Introduction to JavaScript

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


Agenda
• The JavaScript Language
• Developing and Debugging JavaScript
• The Anatomy of JavaScript


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

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

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


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

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


ECMAScript Releases
Version 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.

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>


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

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


Language Versions
• Many versions in many places

JavaScript 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+


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


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


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

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


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

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


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


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


Scripts Panel
• Powerful, in-browser script debugger
• Rivals features of Web development
environments


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


Profiles Panel
• Profile both CPU and heap memory
• Like Timeline, have to explicitly start and stop
recording
• Analyze events in the panel


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


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


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


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


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

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


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


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

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

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


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


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


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


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: /* */


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


Learn More!
• This is an excerpt from a larger course which
you can access at: http://learnnowonline.com/


Introduction to JavaScript

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Plus de LearnNowOnline

Plus de LearnNowOnline (20)

Dernier

Dernier (20)

Introduction to JavaScript

Notes de l'éditeur