JavaScript Specialist
Lesson 1: Introduction to JavaScript
Objectives List key JavaScript characteristics, including object-based nature, events, platform-independence, and differences between scripting languages and programming languages Identify common programming concepts, including objects, properties and methods Describe various JavaScript versions and flavors, including ECMA standards, JScript and similarities with proprietary scripting languages Distinguish between server-side and client-side JavaScript applications, including JavaScript interpreters and rendering engines Describe acceptable coding practices, including appropriate use of comment tags and the <noscript> tag
Introduction to Scripting JavaScript A scripting language for adding dynamic interactivity to Web pages Generally used on the client side but can also be used on the server side Origins of JavaScript
JavaScript Characteristics JavaScript is a scripting language JavaScript is object-based, not object-oriented JavaScript is event-driven JavaScript is platform-independent JavaScript enables quick development JavaScript is relatively easy to learn
JavaScript and Common Programming Concepts Objects Properties Values Methods
JavaScript Flavors and Versions JavaScript vs. Java JavaScript, JScript and ECMA JavaScript vs. VBScript Visual Basic and VBScript JavaScript versions
Server-Side vs. Client-Side Applications Server-side applications of JavaScript Client-side applications of JavaScript Embedding JavaScript into X/HTML The HTML 4.0 type attribute The language attribute and deprecated code Script versioning for your browser External scripts The <noscript> tag
Annotating Your Code with Comments Single-line comment indicator (//) Multiple-line comment indicator (/*...*/)
Summary List key JavaScript characteristics, including object-based nature, events, platform-independence, and differences between scripting languages and programming languages Identify common programming concepts, including objects, properties and methods Describe various JavaScript versions and flavors, including ECMA standards, JScript and similarities with proprietary scripting languages Distinguish between server-side and client-side JavaScript applications, including JavaScript interpreters and rendering engines Describe acceptable coding practices, including appropriate use of comment tags and the <noscript> tag
Lesson 2: Working with Variables and Data in JavaScript
Objectives Use attributes and methods to communicate with users, including the type attribute, and the alert(), prompt() and confirm() methods Define variables Use data types, including null and undefined Obtain user input and store it in variables Report variable text to the client window Distinguish between concatenation and addition Use expressions Use operators, including string concatenation ( += ), strict comparison ( === , !==) and mathematical precedence Implement inline scripting Implement simple event handlers, including onload() and onunload() Define keywords and reserved words
Using JavaScript to Communicate with the User Giving the user a message: The alert() method Using semicolons in JavaScript Getting data from the user: The prompt() method Concatenation Requesting confirmation: The confirm() method Writing X/HTML dynamically: The document.write() method
Using Data More Than Once: Variables What is a variable? Variable data types Literals Naming variables Case-sensitivity in JavaScript Declaring variables Concatenating variables Working with variables
JavaScript Expressions Assignment Arithmetic String Logical Comparison Conditional
Operators The + operator The = and == operators Mathematical precedence
Inline Scripting, Simple User Events, and Basic Event Handlers Placing JavaScript code within an X/HTML tag, rather than between the file's <body> </body> tags The onunload event handler The onload event handler
Keywords and Reserved Words JavaScript keywords JavaScript reserved words
Summary Use attributes and methods to communicate with users, including the type attribute, and the alert(), prompt() and confirm() methods Define variables Use data types, including null and undefined Obtain user input and store it in variables Report variable text to the client window Distinguish between concatenation and addition Use expressions Use operators, including string concatenation ( += ), strict comparison ( === , !==) and mathematical precedence Implement inline scripting Implement simple event handlers, including onload() and onunload() Define keywords and reserved words
Lesson 3: Functions, Methods and Events in JavaScript
Objectives Use methods as functions Define functions Use data type conversion methods Call functions Pass arguments to functions, including argument creation, return values and the calculateAvg() function Return values from functions Distinguish between global and local variables Use the conditional operator Identify user events and event handlers Use built-in functions and cast variables
Introduction to Functions A named block of code that can be called when needed In JavaScript, a function can return a value
Defining a Function Calling statement Argument Inserting functions into X/HTML pages Good coding practice
Calling a Function Passing arguments to functions Returning values from functions Operator precedence Global vs. local variables
User Events and JavaScript Event Handlers Event Objects button reset submit radio checkbox link form text textarea select image area window User Events abort blur click change error focus load mouseOver mouseOut reset select Submit unLoad Event Handlers onabort onblur onclick onchange onerror onfocus onload onmouseover onmouseout onreset onselect onsubmit onunload
Methods as Functions Using built-in functions Casting variables
Summary Use methods as functions Define functions Use data type conversion methods Call functions Pass arguments to functions, including argument creation, return values and the calculateAvg() function Return values from functions Distinguish between global and local variables Use the conditional operator Identify user events and event handlers Use built-in functions and cast variables
Lesson 4: Controlling Program Flow in JavaScript
Objectives Use the if... statement Use the while... statement Use the do...while statement Use the for... statement Use the break and continue statements Use the switch... statement
Controlling Decisional Program Flow Control the execution of JavaScript statements Control structure In programming, a statement that uses a comparison operator to make decisions based on Boolean values, or a statement that causes code to execute repeatedly (i.e., loop)
The if...else Statement A single condition Multiple conditions Using if for conditional program flow Multiple conditions in the same expression
The while Statement The while statement Used to execute a block of code for as long as (while) a certain test condition is true The isNaN method Used to determine whether a given value is a valid number
The do...while Statement The do...while statement Does not check the conditional expression until after the first time through the loop, guaranteeing that the code within the curly braces will execute at least once
The for Statement The for statement Repeats a group of statements for some particular range of values
The break Statement The break statement Used to exit a loop that would otherwise continue to execute
The continue Statement Used to force the flow of control back to the top of a loop Using continue in a while loop
The switch Statement The switch statement Compares a value against other values, searching for a match
Summary Use the if... statement Use the while... statement Use the do...while statement Use the for... statement Use the break and continue statements Use the switch... statement
Lesson 5: The JavaScript Document Object Model (DOM)
Objectives Use JavaScript to manipulate the Document Object Model (DOM) Use the window object of the DOM Manipulate properties and methods of the document object within the DOM Use the with statement Use the image object of the DOM, including image rollover creation Use the history object of the DOM Evaluate and change URL information with the location object of the DOM Use the navigator object of the DOM
The JavaScript Document Object Model (DOM)
The window Object The window object Represents the frame of the browser and the mechanisms associated with it Opening additional windows Dot notation revisited The status property The onmouseover and onmouseout event handlers
The document Object The document object Provides the properties and methods to work with the current document The bgColor and fgColor properties The title property The lastModified property Referencing remote window and document objects
The with Statement The with statement Combines several properties and/or methods with a single object
The image Object The image object Allows you to manipulate images in browsers Handling image object events JavaScript and image maps
The history Object The history object Allows the user to move backward or forward through the stored history of your Web page
The location Object The location object Allows you to specify URLs in a script
The navigator Object The navigator object Determines the brand and version of the browser in use Identifies the user's operating system Redirecting the browser with the navigator and location objects
Summary Use JavaScript to manipulate the Document Object Model (DOM) Use the window object of the DOM Manipulate properties and methods of the document object within the DOM Use the with statement Use the image object of the DOM, including image rollover creation Use the history object of the DOM Evaluate and change URL information with the location object of the DOM Use the navigator object of the DOM
Lesson 6: JavaScript Language Objects
Objectives Use the String object to test user input Evaluate strings, including use of the length property, and use of the indexOf(), lastIndexOf(), substring() and charAt() methods Identify basic regular expressions and the RegExp object Use the Array object to create more efficient code Identify uses for the Date and Math objects
Introduction to JavaScript Language Objects The String object The Math object The Array object The RegExp object
The String Object The String object Text, numbers, or any combination of characters that functions as text String object formatting methods String object special characters The prototype property of the String object Common syntax errors with the String object Additional String object methods
Evaluating Strings The length property of the String object The indexOf()method of the String object The lastIndexOf() method of the String object The substring() method of the String object The substr() method The charAt() method of the String object Form validation using string methods
JavaScript Regular Expressions Searches for specified patterns in text The RegExp object Used to create regular expressions Creating regular expressions More methods of the String object Patterns with alphanumeric characters
The Array Object The Array object Used when a single variable needs to be able to reference multiple values The join() method of the Array object The reverse() method of the Array object The sort() method of the Array object The Array object length property
The Date Object The Date object Used for date and time information Methods of the Date object
Setting and Extracting Time Information Setting and extracting time information follows the same procedures as setting and extracting date information Uses the Date object
The Math Object The Math object Used to create advanced mathematical calculations Methods and properties of the Math object Using the Math object
Summary Use the String object to test user input Evaluate strings, including use of the length property, and use of the indexOf(), lastIndexOf(), substring() and charAt() methods Identify basic regular expressions and the RegExp object Use the Array object to create more efficient code Identify uses for the Date and Math objects
Lesson 7: Developing Interactive Forms with JavaScript
Objectives Identify and use form controls, including X/HTML form elements Refer to form objects, including form, radio, select, button, text, textarea and checkbox Define the form object Use the button object Use the checkbox object Evaluate text with the text and textarea objects Process radio object options Capture choices from a select list with the select object Conduct form validation, including valid X/HTML code
Interactive Forms The ability to retrieve and verify data from the user through an X/HTML form From a Web developer's perspective, the most common need for JavaScript
Overview of Form Elements X/HTML form elements button checkbox hidden password radio reset select submit text textarea Corresponding JavaScript objects
Referring to Form Elements You can refer to a form element in the form object's elements array in two ways: By its name By its index number
The form Object The form object Represents an X/HTML form in JavaScript Available when <form> tags are present in the X/HTML document Properties, methods and event handlers of form object
The button Object The button object Provides a basic push-button type of user interface element on an X/HTML page Properties, methods and event handlers of button object
The checkbox Object The checkbox object An input object in the shape of a small square (called a check box) that can be selected, or "checked," on or off Users can select as many as they like or all check boxes in a group (not mutually exclusive) Properties, methods and event handlers of checkbox object
The text and textarea Objects The text object Displays a single line of text The textarea object Displays multiple, scrolling lines of text Properties, methods and event handlers of text and textarea objects Checking user input
The radio Object The radio object Small round button that can selected on or off Used to select one option from among two or more mutually exclusive options Properties, methods and event handlers of radio object
The select Object The select object A drop-down selection list or a list box of items used in an X/HTML form Allows you to choose one item from a list of mutually exclusive items Properties, methods and event handlers of the select object Working with selection lists Multiple-selection list box Allows you to choose as many items as they like from a list (not mutually exclusive)
Form Validation Benefits of client-side form validation: Increased validity of form submissions Increased end-user satisfaction Conservation of bandwidth Form validation tips
Summary Identify and use form controls, including X/HTML form elements Refer to form objects, including form, radio, select, button, text, textarea and checkbox Define the form object Use the button object Use the checkbox object Evaluate text with the text and textarea objects Process radio object options Capture choices from a select list with the select object Conduct form validation, including valid X/HTML code
Lesson 8: JavaScript Security
Objectives Distinguish between the browser and the operating system in relation to the elements responsible for security Discuss browser security issues relevant to JavaScript Define signed scripts Perform client-side browser detection and determine browser compatibility Identify common issues and procedures for creating secure JavaScript code Define cross-site scripting and the associated security risks Define the functions of cookies and manipulate them effectively Assign a cookie using JavaScript Use cookies and passwords to restrict entry to a page
Introduction to JavaScript Security Issues JavaScript is an open scripting language JavaScript does not protect data passed between browser and server JavaScript does not protect the Web site owner For true security, ensure that your Web pages use SSL/TLS (HTTPS) and that your server has all the checks in place
Browser vs. Operating System The operating system allows the computer to interface directly with users The browser connects your operating system to the unprotected network that is the Internet Securing operating systems and browsers
Browser-Specific Security Issues Example issues with older browsers Example issues with recent browsers Helper application problems What users and developers can do
Browser Compatibility and Client-Side Detection Standards-based browsers Problems with browser detection Alternative coding for browser compatibility Browser detection and security
Script Blocking How script blocking affects developers Blocking JavaScript from your browser
Differences in document.write Among Browsers The document.write method Provides the simplest way to use JavaScript to write text onto a Web page Incompatibility issues with XHTML and Internet Explorer What JavaScript developers can do
Malicious and Accidental Coding Every developer makes some mistakes while coding Ill-advised or malicious users sometimes upload such scripts to the Web deliberately Locking the browser with an infinite loop
Frame-to-Frame URL Changing How frames work Cloaking Inline frames Browser restrictions Same origin policy What JavaScript developers can do
Signed Scripts Signed script A script validated by a certificate authority that can request extended privileges and abilities How signed scripts work Creating a signed script
Cross-Site Scripting (XSS) A security vulnerability in which an attacker embeds malicious script into a link that appears to be from a trusted site How XSS works Types of XSS Code and servers in XSS What JavaScript developers can do OWASP and XSS
Cookies and Security in JavaScript What are cookies? How are cookies sent? Who can send cookies? Why use cookies? Storing cookies Cookies and specific browsers Users deleting or disabling cookie files Assigning a cookie with JavaScript Testing for cookie presence Clearing a cookie Users controlling cookies in the browser Cookies and passwords
Creating Secure JavaScript Code Test, test, test your scripts Keep current in your knowledge about JavaScript and its security Do not use deprecated code Use proper encoding and validation practices Know the code you are using before putting it on a Web site Write your code consistently Comment your code liberally Keep security patches up-to-date Keep your operating system up-to-date
Summary Distinguish between the browser and the operating system in relation to the elements responsible for security Discuss browser security issues relevant to JavaScript Define signed scripts Perform client-side browser detection and determine browser compatibility Identify common issues and procedures for creating secure JavaScript code Define cross-site scripting and the associated security risks Define the functions of cookies and manipulate them effectively Assign a cookie using JavaScript Use cookies and passwords to restrict entry to a page
Lesson 9: Custom JavaScript Objects
Objectives Create a custom JavaScript object Define properties and methods of custom objects Create new object instances Create client-side arrays using custom objects Create functions and methods for manipulating client-side arrays Use the prototype property
Creating Custom Objects Array objects, custom objects and databases Advantages of custom objects Custom object demonstration
Creating a JavaScript Object: The Constructor A special function that enables you to create instances of custom objects Defines the properties and methods of your object
Creating an Instance of a Custom Object To instantiate and then populate the properties of each new instance with actual data, you must declare variables The prototype property Used to add new properties or methods to JavaScript objects
Creating Object Methods You can create as many methods for your object as you need (or as many as memory allows) You can make them as simple or as sophisticated as you like
Creating Functions for Your Objects The findItem() function The showAll() function Full source code for this client-side array Complex custom objects
Summary Create a custom JavaScript object Define properties and methods of custom objects Create new object instances Create client-side arrays using custom objects Create functions and methods for manipulating client-side arrays Use the prototype property
Lesson 10: Changing X/HTML on the Fly
Objectives Identify steps and methods for changing X/HTML "on the fly," including the getElementById, getElementsByName and getElementsByTagName methods of the DOM Modify attributes in X/HTML using DOM elements Modify values in X/HTML using DOM elements Use the innerHTML element
Changing X/HTML on the Fly Changes can be made when needed, even during the execution of a page or process X/HTML basics Why change X/HTML on the fly?
Using the getElementByID Method Allows you to access and change all the properties of object elements The innerHTML property Allows you to set and retrieve the contents of a specified element
Using the getElementsByName Method Allows you to access all elements with the specified name
Using the getElementsByTagName Method Allows you to access all elements with the specified tag name
Modifying Attributes within the DOM getAttribute() Allows you to retrieve the corresponding value of an attribute setAttribute() Allows you to dynamically modify the value of an element's attribute removeAttribute() Allows you to remove entire X/HTML attributes from an element
Appending Text to the DOM The appendChild method Enables you to add elements to the end of the page, before the closing </body> tag, without overwriting the existing page content
Summary Identify steps and methods for changing X/HTML "on the fly," including the getElementById, getElementsByName and getElementsByTagName methods of the DOM Modify attributes in X/HTML using DOM elements Modify values in X/HTML using DOM elements Use the innerHTML element
Lesson 11: JavaScript Libraries
Objectives Identify and evaluate the benefits and drawbacks of using predefined libraries and plug-ins, such as jQuery, Spry, Dojo, MooTools and Prototype Identify steps for using libraries (such as jQuery) and available plug-ins, including jQuery-friendly X/HTML and X/HTML optimization for faster JavaScript manipulation Identify steps for loading and referencing external scripts and pre-made external scripts
JavaScript Libraries Code library A collection of fully formed external scripts that are designed to make JavaScript simpler to use Why use a code library?
Choosing a Code Library Reputable code libraries jQuery Spry Prototype Dojo MooTools
External and Pre-Made Scripts External script A script placed in a separate file that is run by linking it to the X/HTML page Library plug-ins Plug-ins vs. pre-made scripts Separation of scripting Loading external scripts
Loading Your First Library To use a JavaScript library Choose the library you want to use Download it Set it up Begin using the code it contains in your X/HTML pages
Using JavaScript Library Plug-ins A program in a JavaScript library that performs a particular function or extends functionality toward a particular result Typically developed by third parties and offered for free on the Web Why use plug-ins?
Best Practices with JavaScript Libraries Optimizing your X/HTML for libraries jQuery-friendly XHTML
Copyright Issues and JavaScript Copyright gives a work's creator the right to specify the work's use Requirements for copyright eligibility for code: The code must form a complete function The script or program must be a unique work The work must generate revenue Copyleft and copycenter
Summary Identify and evaluate the benefits and drawbacks of using predefined libraries and plug-ins, such as jQuery, Spry, Dojo, MooTools and Prototype Identify steps for using libraries (such as jQuery) and available plug-ins, including jQuery-friendly X/HTML and X/HTML optimization for faster JavaScript manipulation Identify steps for loading and referencing external scripts and pre-made external scripts
Lesson 12: JavaScript and AJAX
Objectives Define fundamental AJAX elements and procedures Diagram common interactions among JavaScript, XML and XHTML Identify key XML structures and restrictions in relation to JavaScript Explain how the XMLHttpRequest object interacts with XML Use the XMLHttpRequest object to retrieve data Describe typical AJAX-based requests Identify key server response issues related to AJAX-based requests Use JavaScript to communicate with databases Identify alternatives to XML-based AJAX
Introduction to AJAX AJAX (Asynchronous JavaScript and XML) A technology that combines functionality from JavaScript and XML to allow a Web page to reload only a specified portion, rather than the entire page, in response to a request The XMLHttpRequest object A JavaScript object that is used to request either XML data or plaintext data from a Web server
Introduction to XML XML (Extensible Markup Language) A meta-language that enables the developer to create unique tags for structuring Web documents based on context rather than appearance Valid XML Is well-formed and references a DTD Well-formed XML Conforms to strict, specific syntax rules
Interactions Among JavaScript, XML and XHTML Common interactions in AJAX Relating XML structures and restrictions to JavaScript Key structures Restrictions How XMLHttpRequest interacts with XML
Using AJAX Scripts There are three basic JavaScript functions in a typical AJAX request: A function that creates an HTTP request A function that calls and submits the HTTP request A function that handles the data returned to the page
AJAX and Servers Typical AJAX-based requests Returning server variables from the server to the client Parsing XML and data Sending entire pages of information in a native language to the server for interpretation and retrieval Server response issues with AJAX Partial responses Unfinished responses
AJAX and Databases Relational databases Relationships in databases Using AJAX with a database Security issues with AJAX and databases
Usability Issues with AJAX Bookmarking Search engines Back button Script blocking ActiveX blocking
Combining AJAX with Libraries Works well with data and server-side applications Works well with JavaScript libraries
Alternatives to XML-based AJAX Java applets Adobe Flash Microsoft Silverlight
Summary Define fundamental AJAX elements and procedures Diagram common interactions among JavaScript, XML and XHTML Identify key XML structures and restrictions in relation to JavaScript Explain how the XMLHttpRequest object interacts with XML Use the XMLHttpRequest object to retrieve data Describe typical AJAX-based requests Identify key server response issues related to AJAX-based requests Use JavaScript to communicate with databases Identify alternatives to XML-based AJAX
Lesson 13: Debugging and Troubleshooting JavaScript
Objectives List common steps for debugging JavaScript code including reviewing code and testing code in different browsers Describe and use various native and supplemental debugging tools, including enabling/disabling display Test code in multiple display platforms, including mobile devices
What Is Debugging? Debugging Troubleshooting and repairing code that does not work properly or at all Bug An error in the code Steps for debugging JavaScript code
Tools for Debugging Code Browsers that offer native debugging include: Microsoft Internet Explorer Google Chrome Apple Safari Supplemental debugging tools: Firebug add-on for Firefox Microsoft Script Debugger Speed Tracer in the Google Web Toolkit Opera Dragonfly 1st JavaScript Editor Rhino Debugger SplineTech JavaScript Debugger
Testing Code in Various Browsers Browsers can appear to behave differently for several reasons: Monitor resolution Video card quality and settings Browser version Script interpretation The end user's CPU speed and RAM Mobile devices User considerations
Debugging Logical Errors Maintenance debugging Code repairs performed after a site has been launched into production Watchpoint An alert, placed in JavaScript code to check on the program at certain points, and to ensure the actual output matches the expected output
JavaScript and Mobile Devices PDAs, smartphones, iPhones, Blackberries, etc. Most past-version mobile devices are Web-enabled and many are JavaScript-compatible Almost all new mobile devices offer online access and handle JavaScript Main issues with mobile devices: Small and limited display Different methods of user interaction (finger touches and swipes, stylus clicks) Various screen resolutions Various operating systems
Summary List common steps for debugging JavaScript code including reviewing code and testing code in different browsers Describe and use various native and supplemental debugging tools, including enabling/disabling display Test code in multiple display platforms, including mobile devices
JavaScript Specialist Introduction to JavaScript Working with Variables and Data in JavaScript Functions, Methods and Events in JavaScript Controlling Program Flow in JavaScript The JavaScript Document Object Model (DOM) JavaScript Language Objects Developing Interactive Forms with JavaScript JavaScript Security Custom JavaScript Objects Changing X/HTML on the Fly JavaScript Libraries JavaScript and AJAX Debugging and Troubleshooting JavaScript