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 develop and debug JavaScript code See the anatomy of JavaScript, its core structural features
Copyright by Application Developers Training Company www.learnnowonline.com
Agenda
The JavaScript Language Developing and Debugging JavaScript The Anatomy of JavaScript
Copyright by Application Developers Training Company www.learnnowonline.com
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
A Brief History of JavaScript
Netscapes 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 Javas 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
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
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
ECMAScript: Standardized JavaScript
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
ECMAScript Releases
Version 1 2 3 Release Date June 1997 June 1998 December 1999 -Major Changes Initial release. Primarily editorial changes to keep the specification aligned with the ISO/IEC 16262 international standard for ECMAScript. Added support for regular expressions, improved string handling, new control statements, exception handling, and various numeric output formatting, and more. 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. Added Strict mode, clarified ambiguities, and implemented accommodations for real-world uses of implementations. Added getters and setters, support for JSON, and reflection on object properties. Released to align with the third edition of the international standard ISO/IEC 16262:2011.
December 2009 June 2011
5.1
Copyright by Application Developers Training Company www.learnnowonline.com
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
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 Crockfords advice:
In the short term, stick to common elements of ECMAScript 3 and 5/Strict
Copyright by Application Developers Training Company www.learnnowonline.com
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
Language Versions
Many versions in many places
JavaScript Version 1.0 1.1 1.2 1.3 1.5 1.6 1.7 1.8 1.8.1 1.8.2 1.8.5 Version Released March 1996 August 1996 June 1997 October 1998 November 2000 November 2005 October 2006 June 2008 June 2009 January 2010 March 2011 Equivalent to Netscape Navigator 2.0 3.0 4.0-4.05 4.06-4.7x 6.0 Mozilla Internet Firefox Explorer 3.0 Google Chrome
ECMAScript 1 & 2 ECMAScript 3
ECMAScript for XML
1.0 1.5 2.0 3.0 3.5 3.6 4
4.0 5.5-8.0
1.010.0.666
ECMAScript 5
9, 10
13.0+
Copyright by Application Developers Training Company www.learnnowonline.com
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
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
Developing and Debugging JavaScript
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
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
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
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
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
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
Scripts Panel
Powerful, in-browser script debugger Rivals features of Web development environments
Copyright by Application Developers Training Company www.learnnowonline.com
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
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
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
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
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
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
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
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
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
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
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 cant 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
Reserved Words
Keywords of the language Depends on version of JavaScript youre using To be safe, avoid all reserved words from all versions
abstract arguments boolean break byte case catch char class const continue debugger default delete do double else enum eval export extends false final finally float for function goto if implements import in instanceof int interface let long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with yield
Copyright by Application Developers Training Company www.learnnowonline.com
Literals
Fixed value that appears in code
As opposed to a variable whose value can change
Some literals of different types
"Don Kiely" 'Don Kiely' 256 3.14159265 false null // // // // // // String literal using double quotes String literal using single quotes An integer number A floating point number A Boolean literal The absence of an object
Copyright by Application Developers Training Company www.learnnowonline.com
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
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
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
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
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
