Introduction to JavaScript    Copyright © by Application Developers Training Company – www.learnnowonline.com
Objectives• Learn about the JavaScript language, its history,  uses, and versions• Explore some of the tools available to ...
Agenda• The JavaScript Language• Developing and Debugging JavaScript• The Anatomy of JavaScript      Copyright © by Applic...
The JavaScript Language• The programming language of the Web   Use with the DOM   Manipulate a page dynamically   Provi...
A Brief History of JavaScript• Netscape’s Brendan Eich designed JavaScript   Mere 10 days   First named LiveScript   Sh...
The Good, Bad, and Ugly• JavaScript has both good and bad parts   Good: things of beauty and elegance that make    JavaSc...
Rise to Fame• Long denigrated as a flawed, toy language   Uncertain whether it would survive   Java was expected to repl...
ECMAScript: StandardizedJavaScript• Netscape looked to standardize JavaScript• Ecma International   Originally the Europe...
ECMAScript ReleasesVersion    Release Date                                      Major Changes   1      June 1997          ...
State of ECMAScript• All modern browsers now use ECMAScript 3• ECMAScript 5 slowly making its way into  browsers   Defaul...
Which Version Should You Use?• Options:   ECMAScript 3   ECMAScript 5/Default   ECMAScript 5/Strict• Choice governed by...
The Name of the Language• JavaScript has had several names    Mocha and LiveScript are defunct    JavaScript, JScript, a...
Language Versions   • Many versions in many placesJavaScript      Version         Equivalent to          Netscape         ...
JavaScript Across Browsers• Hardest thing about using JavaScript   Problem may be browser implementation of the DOM   Ev...
JavaScript May Not Be Available• Problems   Disabled   Not available in the browser   Accessibility issues• Options   ...
Developing and DebuggingJavaScript• Huge numbers of tools you can use   Plainest of text editors to complex development t...
Which Browser to Use?• Any will generally work fine for development   Many tools are similar, with unique features   Too...
Chrome Web Developer Tools• Built into every copy of the browser• Reach deep into the internals of a Web page  and the bro...
Elements Panel• Displays the Web page that the browser renders   Explore its HTML, CSS styles, and DOM objects   Can mak...
Resources Panel• Lists all of the resources used by the page     HTML page itself     CSS stylesheet files     JavaScri...
Network Panel• Information about the resources the browser  downloads for a page   Resources Panel: content and character...
Scripts Panel• Powerful, in-browser script debugger• Rivals features of Web development  environments      Copyright © by ...
Timeline Panel• Useful to diagnose and fix performance  problems in JavaScript code   As well as other resources used by ...
Profiles Panel• Profile both CPU and heap memory• Like Timeline, have to explicitly start and stop  recording• Analyze eve...
Audits Panel• Provides network utilization and performance  information about a Web page   Based either on reloading or l...
Console Panel• Scripts and Console panels together provide  powerful tools for JavaScript code• Use Console to directly en...
JSLint• Invaluable tool while learning and even after  you become an expert• Static code analysis tool   Insight into qua...
Working with JavaScript• Initially going to focus on the language     Ignore how JavaScript interacts with a Web page   ...
The HTML Script Element• Key to using JavaScript in a Web page• Two ways to use   Script embedded inline     <script>    ...
HTML Comments in Script Tag• You may see code like this:  <script>     <!—     console.log("Hello, Page!");     //-->  </s...
The Anatomy of JavaScript• Begin exploring the JavaScript language• Lexical structure   Set of elementary rules that guid...
Case Sensitivity• JavaScript is case-sensitive• All of these are unique identifiers  dateofbirth  DateOfBirth  dateOfBIRTH...
Identifiers• Name for anything you create in code    Variables, arrays, functions, labels, and objects• Rules for naming ...
Reserved Words• Keywords of the language• Depends on version of JavaScript you’re using• To be safe, avoid all reserved wo...
Literals• Fixed value that appears in code    As opposed to a variable whose value can change• Some literals of different...
Semicolons• JavaScript uses semicolons (;) as statement  terminator   Lets you break long statements on multiple lines  ...
Whitespace• In JavaScript, extra whitespace is irrelevant• Need spaces between identifiers and keywords• Line breaks are s...
Comments• Commenting code is a universal best practice   Provides some level of documentation   Aids in maintenance• Two...
Learning from Other Web Sites• Very helpful to explore real world examples   Both good and bad• Browser needs access to c...
Learn More!• This is an excerpt from a larger course which  you can access at: http://learnnowonline.com/      Copyright ©...
Upcoming SlideShare
Loading in...5
×

Introduction to JavaScript

699

Published on

Learn about the JavaScript language, its history, uses and versions.

Get full course details @ www.learnnowonline.com!

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • This is an excerpt from a larger course which you can access at: http://learnnowonline.com/
  • Introduction to JavaScript

    1. 1. Introduction to JavaScript Copyright © by Application Developers Training Company – www.learnnowonline.com
    2. 2. Objectives• Learn about the JavaScript language, its history, uses, and versions• Explore some of the tools available to develop and debug JavaScript code• See the anatomy of JavaScript, its core structural features Copyright © by Application Developers Training Company – www.learnnowonline.com
    3. 3. Agenda• The JavaScript Language• Developing and Debugging JavaScript• The Anatomy of JavaScript Copyright © by Application Developers Training Company – www.learnnowonline.com
    4. 4. The JavaScript Language• The programming language of the Web  Use with the DOM  Manipulate a page dynamically  Provide instant responses to users• Browsers live on because of JavaScript• Most used programming language in the world  Closest thing we have to universal language• Prototype-based interpreted scripting language  Has dynamic and functional characteristics  Weakly typed and supports OOP  Descendant of C, related to Java Copyright © by Application Developers Training Company – www.learnnowonline.com
    5. 5. A Brief History of JavaScript• Netscape’s Brendan Eich designed JavaScript  Mere 10 days  First named LiveScript  Shipped with version 2.0 of Netscape Navigator• Sun wanted to kill LiveScript and make Java the language  Netscape changed name to appease Sun and ride Java’s wave of popularity  Also wanted a simpler programming model• Browser wars heated up  Microsoft created JScript Copyright © by Application Developers Training Company – www.learnnowonline.com
    6. 6. The Good, Bad, and Ugly• JavaScript has both good and bad parts  Good: things of beauty and elegance that make JavaScript a marvelous language  Bad: sometimes nasty, fostering bad code• Where do the bad parts come from?  Legacy design elements  Good intentions  Haste• For the most part, you can ignore the bad parts Copyright © by Application Developers Training Company – www.learnnowonline.com
    7. 7. Rise to Fame• Long denigrated as a flawed, toy language  Uncertain whether it would survive  Java was expected to replace it• But then Ajax happened  Spawned the era of Web 2.0  Greater interactivity, cooperating in a dialog to create content  As Ajax took hold, professional programmers took a fresh look at JavaScript and liked what they saw  Frameworks and libraries followed• The future of JavaScript is bright and assured Copyright © by Application Developers Training Company – www.learnnowonline.com
    8. 8. ECMAScript: StandardizedJavaScript• Netscape looked to standardize JavaScript• Ecma International  Originally the European Computer Manufacturers Association (ECMA)  Sun owned name, so needed a new one  Became ECMAScript by default Copyright © by Application Developers Training Company – www.learnnowonline.com
    9. 9. ECMAScript ReleasesVersion Release Date Major Changes 1 June 1997 Initial release. 2 June 1998 Primarily editorial changes to keep the specification aligned with the ISO/IEC 16262 international standard for ECMAScript. 3 December Added support for regular expressions, improved string 1999 handling, new control statements, exception handling, and various numeric output formatting, and more. 4 -- Abandoned due to political differences and technical difficulties with the complexity of the language. Some features developed made it into version 5, others were deferred for future versions. 5 December Added Strict mode, clarified ambiguities, and 2009 implemented accommodations for real-world uses of implementations. Added getters and setters, support for JSON, and reflection on object properties. 5.1 June 2011 Released to align with the third edition of the international standard ISO/IEC 16262:2011. Copyright © by Application Developers Training Company – www.learnnowonline.com
    10. 10. State of ECMAScript• All modern browsers now use ECMAScript 3• ECMAScript 5 slowly making its way into browsers  Default  Strict• Use strict mode with “use strict”• <script> "use strict"; ... rest of JavaScript code </script> Copyright © by Application Developers Training Company – www.learnnowonline.com
    11. 11. Which Version Should You Use?• Options:  ECMAScript 3  ECMAScript 5/Default  ECMAScript 5/Strict• Choice governed by target browsers  ECMAScript 3 is safe today  ECMAScript 5 is coming  Use strict mode, since it is safest• Take Douglas Crockford’s advice:  In the short term, stick to common elements of ECMAScript 3 and 5/Strict Copyright © by Application Developers Training Company – www.learnnowonline.com
    12. 12. The Name of the Language• JavaScript has had several names  Mocha and LiveScript are defunct  JavaScript, JScript, and ECMAScript are in current use• Each is a particular thing  JavaScript is trademark of Oracle, used by Mozilla  JScript is the language of Internet Explorer  ECMAScript is the standard language• Everyone uses JavaScript Copyright © by Application Developers Training Company – www.learnnowonline.com
    13. 13. Language Versions • Many versions in many placesJavaScript Version Equivalent to Netscape Mozilla Internet Google Version Released Navigator Firefox Explorer Chrome 1.0 March 1996 2.0 3.0 1.1 August 1996 3.0 1.2 June 1997 4.0-4.05 1.3 October 1998 ECMAScript 1 & 2 4.06-4.7x 4.0 1.5 November ECMAScript 3 6.0 1.0 5.5-8.0 1.0- 2000 10.0.666 1.6 November ECMAScript for 1.5 2005 XML 1.7 October 2006 2.0 1.8 June 2008 3.0 1.8.1 June 2009 3.5 1.8.2 January 2010 3.6 1.8.5 March 2011 ECMAScript 5 4 9, 10 13.0+ Copyright © by Application Developers Training Company – www.learnnowonline.com
    14. 14. JavaScript Across Browsers• Hardest thing about using JavaScript  Problem may be browser implementation of the DOM  Even JavaScript engines are different• Strategies  Write standards-compliant code  Check the environment• Writing to the environment means lots of code Copyright © by Application Developers Training Company – www.learnnowonline.com
    15. 15. JavaScript May Not Be Available• Problems  Disabled  Not available in the browser  Accessibility issues• Options  Degrade gracefully  Progressive enhancement• Frameworks and libraries  Particularly for Ajax Copyright © by Application Developers Training Company – www.learnnowonline.com
    16. 16. Developing and DebuggingJavaScript• Huge numbers of tools you can use  Plainest of text editors to complex development tools  Commercial and open source  Expensive and free• Major browsers have built-in tools and extensions  Firefox: built-in tools and Firebug  IE: built-in F12 tools and Fiddler2  Chrome: built-in Web development tools  Opera: built-in DragonFly tools  Safari: built-in developer tools Copyright © by Application Developers Training Company – www.learnnowonline.com
    17. 17. Which Browser to Use?• Any will generally work fine for development  Many tools are similar, with unique features  Tools available where you need to test sites• Use Chrome in this course  Loads and runs noticeably faster  Implements emerging standards  Has an edge with developer tools Copyright © by Application Developers Training Company – www.learnnowonline.com
    18. 18. Chrome Web Developer Tools• Built into every copy of the browser• Reach deep into the internals of a Web page and the browser itself• Improve with every new version of Chrome• Using the latest version  Stable channel  New release about every six weeks  Be on the bleeding edge with Developer or Beta channels• Based on WebKit Web Inspector Copyright © by Application Developers Training Company – www.learnnowonline.com
    19. 19. Elements Panel• Displays the Web page that the browser renders  Explore its HTML, CSS styles, and DOM objects  Can make changes• Powerful tools for fine-tuning appearance and solving layout and content problems Copyright © by Application Developers Training Company – www.learnnowonline.com
    20. 20. Resources Panel• Lists all of the resources used by the page  HTML page itself  CSS stylesheet files  JavaScript and other code files  Cookies and various types of storage  Caches Copyright © by Application Developers Training Company – www.learnnowonline.com
    21. 21. Network Panel• Information about the resources the browser downloads for a page  Resources Panel: content and characteristics of the page resources  Network panel: focused on network resources needed to retrieve the page resources• Waterfall diagram of network activities Copyright © by Application Developers Training Company – www.learnnowonline.com
    22. 22. Scripts Panel• Powerful, in-browser script debugger• Rivals features of Web development environments Copyright © by Application Developers Training Company – www.learnnowonline.com
    23. 23. Timeline Panel• Useful to diagnose and fix performance problems in JavaScript code  As well as other resources used by the page• Profile records wealth of information  Only cover the highlights  Well worth taking time to explore this panel Copyright © by Application Developers Training Company – www.learnnowonline.com
    24. 24. Profiles Panel• Profile both CPU and heap memory• Like Timeline, have to explicitly start and stop recording• Analyze events in the panel Copyright © by Application Developers Training Company – www.learnnowonline.com
    25. 25. Audits Panel• Provides network utilization and performance information about a Web page  Based either on reloading or loaded state• Similar in some ways to Yahoo!’s YSlow extension Copyright © by Application Developers Training Company – www.learnnowonline.com
    26. 26. Console Panel• Scripts and Console panels together provide powerful tools for JavaScript code• Use Console to directly enter and execute JavaScript code• Can write to the Console from code Copyright © by Application Developers Training Company – www.learnnowonline.com
    27. 27. JSLint• Invaluable tool while learning and even after you become an expert• Static code analysis tool  Insight into quality of your code  Written by Douglas Crockford  Available online and in command line versions Copyright © by Application Developers Training Company – www.learnnowonline.com
    28. 28. Working with JavaScript• Initially going to focus on the language  Ignore how JavaScript interacts with a Web page  But need a way to run code  Will use a very simple Web page  Use HTML 5 syntax and structure Copyright © by Application Developers Training Company – www.learnnowonline.com
    29. 29. The HTML Script Element• Key to using JavaScript in a Web page• Two ways to use  Script embedded inline <script> console.log("Hello, Page!"); </script>  External JavaScript file <script src="jquery-1.7.1.js" />• Optional type attribute can specify content  text/javascript• Include as many script elements as you want Copyright © by Application Developers Training Company – www.learnnowonline.com
    30. 30. HTML Comments in Script Tag• You may see code like this: <script> <!— console.log("Hello, Page!"); //--> </script>• Prevent older browsers from treating as page content• Such browsers are nearly extinct now, so no need to do this anymore Copyright © by Application Developers Training Company – www.learnnowonline.com
    31. 31. The Anatomy of JavaScript• Begin exploring the JavaScript language• Lexical structure  Set of elementary rules that guide how you write code  Low-level syntax details of JavaScript Copyright © by Application Developers Training Company – www.learnnowonline.com
    32. 32. Case Sensitivity• JavaScript is case-sensitive• All of these are unique identifiers dateofbirth DateOfBirth dateOfBIRTH dAtEoFbIrTh DATEOFBIRTH• Potential confusion: HTML is not case-sensitive  JavaScript has object and property names the same as HTML  Must be onclick in JavaScript, can be any casing in HTML Copyright © by Application Developers Training Company – www.learnnowonline.com
    33. 33. Identifiers• Name for anything you create in code  Variables, arrays, functions, labels, and objects• Rules for naming identifiers  Consist of letters, underscores, digits, or dollar signs  First character can’t be a number  Cannot be a reserved word• Valid identifiers  a, aaa, $birth, _birth, _$birth67, app$dev, x123$, birth_date• Invalid identifiers  23birth, *birth, Birth-date Copyright © by Application Developers Training Company – www.learnnowonline.com
    34. 34. Reserved Words• Keywords of the language• Depends on version of JavaScript you’re using• To be safe, avoid all reserved words from all versions abstract delete function null throws arguments do goto package transient boolean double if private true break else implements protected try byte enum import public typeof case eval in return var catch export instanceof short void char extends int static volatile class false interface super while const final let switch with continue finally long synchronized yield debugger float native this default for new throw Copyright © by Application Developers Training Company – www.learnnowonline.com
    35. 35. Literals• Fixed value that appears in code  As opposed to a variable whose value can change• Some literals of different types "Don Kiely" // String literal using double quotes Don Kiely // String literal using single quotes 256 // An integer number 3.14159265 // A floating point number false // A Boolean literal null // The absence of an object Copyright © by Application Developers Training Company – www.learnnowonline.com
    36. 36. Semicolons• JavaScript uses semicolons (;) as statement terminator  Lets you break long statements on multiple lines  Interpreter combines everything at runtime• To make easier for casual programmers, semicolons are largely optional  Provides automatic semicolon insertion  Mostly does the right thing  But there are cases where it fails Copyright © by Application Developers Training Company – www.learnnowonline.com
    37. 37. Whitespace• In JavaScript, extra whitespace is irrelevant• Need spaces between identifiers and keywords• Line breaks are sometimes significant, but not often• Language ignores any extra leading indentations, line breaks, tabs, and spaces Copyright © by Application Developers Training Company – www.learnnowonline.com
    38. 38. Comments• Commenting code is a universal best practice  Provides some level of documentation  Aids in maintenance• Two types of comments  Single line: //  Block or multi-line: /* */ Copyright © by Application Developers Training Company – www.learnnowonline.com
    39. 39. Learning from Other Web Sites• Very helpful to explore real world examples  Both good and bad• Browser needs access to code, so you can explore it for any site  Use your developer tools to explore• But sites can minify code  Worse, can obfuscate it• See JavaScriptResources.html in course sample files Copyright © by Application Developers Training Company – www.learnnowonline.com
    40. 40. Learn More!• This is an excerpt from a larger course which you can access at: http://learnnowonline.com/ Copyright © by Application Developers Training Company – www.learnnowonline.com

    ×