Más contenido relacionado
Más de LearnNowOnline (20)
Introduction to JavaScript
- 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. Agenda
• The JavaScript Language
• Developing and Debugging JavaScript
• The Anatomy of JavaScript
Copyright © by Application Developers Training Company – www.learnnowonline.com
- 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. 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. 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. 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. 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
- 9. 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.
Copyright © by Application Developers Training Company – www.learnnowonline.com
- 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. 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. 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. 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+
Copyright © by Application Developers Training Company – www.learnnowonline.com
- 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. 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. 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
- 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. 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. 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. 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. 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. Scripts Panel
• Powerful, in-browser script debugger
• Rivals features of Web development
environments
Copyright © by Application Developers Training Company – www.learnnowonline.com
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
Notas del editor
- 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/