Objectives
advertisement
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 The === and !== operators The ++ and -- operators Mathematical precedence Inline Scripting, Simple User Events, and Basic Event Handlers • Inline scripting – 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 • Function – 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 • 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 • 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 • Regular expression – 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 • 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) • 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 clientside 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 • 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 clientside 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 • "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 • 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 • The getElementsByName method – Allows you to access all elements with the specified name Using the getElementsByTagName Method • 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 • Plug-in – 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 • AJAX – 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