Você está na página 1de 22

JavaScript Specialist

Academic Student Guide


Web Development Series
ECL02-CEJSRF-PR-1109 version 1.01 rd092811

Authorized to be used in American Public University System.


To report abuse, go to www.CIWcertified.com/abuse.

Authorized to be used in American Public University System.


To report abuse, go to www.CIWcertified.com/abuse.

JavaScript Specialist
Academic Student Guide

Authorized to be used in American Public University System.


To report abuse, go to www.CIWcertified.com/abuse.

President/Chief Certification Architect


James Stanger, Ph.D.
Vice President, Operations
Todd Hopkins
Senior Content Developer
Kenneth A. Kozakis
Managing Editor
Susan M. Lane
Editor
Sarah Skodak
Project Manager/Publisher
Tina Strong
Customer Service

Certification Partners, LLC


1230 W. Washington St., Ste. 111
Tempe, AZ 85281
(602) 275-7700

Copyright 2011, All rights reserved.

Authorized to be used in American Public University System.


To report abuse, go to www.CIWcertified.com/abuse.

JavaScript Specialist
Developers
Brian Danks, Elliot Cherner, Ashley Craft and Susan M. Lane

Contributors
Lisa Pease

Editor
Susan M. Lane

Project Manager/Publisher
Tina Strong

Trademarks
Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified throughout
this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in
editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation
with the book. Copyrights of any screen captures in this book are the property of the software's manufacturer.

Disclaimer
Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described
herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability,
accuracy, or freedom from error of this document or the products it describes. Certification Partners makes no
representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of
fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or
consequential, special or exemplary damages resulting from the use of the information in this document or from the
use of any products described in this document. Mention of any product or organization does not constitute an
endorsement by Certification Partners of that product or corporation. Data used in examples and labs is intended to be
fictional even if actual data is used or accessed. Any resemblance to, or use of real persons or organizations should be
treated as entirely coincidental. Certification Partners makes every effort to ensure the accuracy of URLs referenced in
all its material, but cannot guarantee that all URLs will be available throughout the life of a course. When this course
was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the
Internet, some URLs may no longer be available or may have been redirected.

Copyright Information
This training manual is copyrighted and all rights are reserved by Certification Partners, LLC. No part of this publication
may be reproduced, transmitted, stored in a retrieval system, modified, or translated into any language or computer
language, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or otherwise
without written permission of Certification Partners, 1230 W. Washington Street, Suite 111, Tempe, AZ 85281.

Copyright 2011 by
Certification Partners, LLC
All Rights Reserved
ISBN: 0-7423-2928-3

Authorized to be used in American Public University System.


To report abuse, go to www.CIWcertified.com/abuse.

vi

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

vii

Table of Contents
Course Description...................................................................................................................... xiv
Courseware .................................................................................................................................. xv
Course Objectives...................................................................................................................... xviii
Classroom Setup ....................................................................................................................... xviii
System Requirements ............................................................................................................... xviii
Conventions and Graphics Used in This Book .............................................................................. xxi
Lesson 1: Introduction to JavaScript........................................................................................... 1-1
Pre-Assessment Questions ................................................................................................................ 1-2
Introduction to Scripting ................................................................................................................... 1-3
JavaScript Characteristics................................................................................................................. 1-3
JavaScript and Common Programming Concepts............................................................................... 1-5
JavaScript Flavors and Versions........................................................................................................ 1-6
Server-Side vs. Client-Side Applications............................................................................................. 1-9
Annotating Your Code with Comments ............................................................................................ 1-13
Case Study...................................................................................................................................... 1-16
Lesson 1 Review .............................................................................................................................. 1-18
Lesson 2: Working with Variables and Data in JavaScript ............................................................ 2-1
Pre-Assessment Questions ................................................................................................................ 2-2
Using JavaScript to Communicate with the User ............................................................................... 2-3
Using Data More Than Once: Variables ........................................................................................... 2-12
JavaScript Expressions ................................................................................................................... 2-17
JavaScript Operators....................................................................................................................... 2-18
Inline Scripting, Simple User Events, and Basic Event Handlers ...................................................... 2-26
JavaScript Keywords and Reserved Words ....................................................................................... 2-28
Case Study...................................................................................................................................... 2-30
Lesson 2 Review .............................................................................................................................. 2-33
Lesson 3: Functions, Methods and Events in JavaScript.............................................................. 3-1
Pre-Assessment Questions ................................................................................................................ 3-2
Introduction to Functions.................................................................................................................. 3-2
Defining a Function........................................................................................................................... 3-3
Calling a Function............................................................................................................................. 3-6
User Events and JavaScript Event Handlers .................................................................................... 3-16
Methods as Functions ..................................................................................................................... 3-17
Case Study...................................................................................................................................... 3-21
Lesson 3 Review .............................................................................................................................. 3-23
Lesson 4: Controlling Program Flow in JavaScript ....................................................................... 4-1
Pre-Assessment Questions ................................................................................................................ 4-2
Controlling Decisional Program Flow ................................................................................................. 4-3
The if...else Statement ....................................................................................................................... 4-3
The while Statement.......................................................................................................................... 4-8
The do...while Statement ................................................................................................................. 4-11
The for Statement............................................................................................................................ 4-13
The break Statement ....................................................................................................................... 4-16
The continue Statement ................................................................................................................... 4-18
The switch Statement ...................................................................................................................... 4-21
Case Study...................................................................................................................................... 4-27
Lesson 4 Review .............................................................................................................................. 4-30
Lesson 5: The JavaScript Document Object Model (DOM) ............................................................ 5-1
Pre-Assessment Questions ................................................................................................................ 5-2
The JavaScript Document Object Model (DOM).................................................................................. 5-3
The window Object............................................................................................................................ 5-4
The document Object ....................................................................................................................... 5-16
The with Statement ......................................................................................................................... 5-19
The image Object............................................................................................................................. 5-24
The history Object ........................................................................................................................... 5-31

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

viii

The location Object .......................................................................................................................... 5-31


The navigator Object ....................................................................................................................... 5-32
Case Study...................................................................................................................................... 5-38
Lesson 5 Review .............................................................................................................................. 5-41
Lesson 6: JavaScript Language Objects ....................................................................................... 6-1
Pre-Assessment Questions ................................................................................................................ 6-2
Introduction to JavaScript Language Objects..................................................................................... 6-3
The String Object............................................................................................................................... 6-3
Evaluating Strings........................................................................................................................... 6-12
JavaScript Regular Expressions ...................................................................................................... 6-20
The Array Object ............................................................................................................................. 6-23
The Date Object............................................................................................................................... 6-29
Setting and Extracting Time Information ......................................................................................... 6-34
The Math Object .............................................................................................................................. 6-38
Case Study...................................................................................................................................... 6-44
Lesson 6 Review .............................................................................................................................. 6-46
Lesson 7: Developing Interactive Forms with JavaScript ............................................................. 7-1
Pre-Assessment Questions ................................................................................................................ 7-2
Interactive Forms .............................................................................................................................. 7-3
Overview of Form Elements ............................................................................................................... 7-3
Referring to Form Elements............................................................................................................... 7-4
The form Object................................................................................................................................. 7-4
The button Object .............................................................................................................................. 7-6
The checkbox Object.......................................................................................................................... 7-7
The text and textarea Objects ............................................................................................................ 7-9
The radio Object .............................................................................................................................. 7-15
The select Object ............................................................................................................................. 7-18
Form Validation .............................................................................................................................. 7-26
Case Study...................................................................................................................................... 7-32
Lesson 7 Review .............................................................................................................................. 7-34
Lesson 8: JavaScript Security ..................................................................................................... 8-1
Pre-Assessment Questions ................................................................................................................ 8-2
Introduction to JavaScript Security Issues ........................................................................................ 8-3
Browser vs. Operating System ........................................................................................................... 8-4
Browser-Specific Security Issues ....................................................................................................... 8-4
Browser Compatibility and Client-Side Detection............................................................................... 8-6
Script Blocking................................................................................................................................ 8-13
Differences in document.write Among Browsers ............................................................................... 8-14
Malicious and Accidental Coding ..................................................................................................... 8-15
Frame-to-Frame URL Changing ....................................................................................................... 8-18
Signed Scripts ................................................................................................................................. 8-21
Cross-Site Scripting (XSS) ............................................................................................................... 8-23
Cookies and Security in JavaScript ................................................................................................. 8-26
Creating Secure JavaScript Code..................................................................................................... 8-44
Case Study...................................................................................................................................... 8-46
Lesson 8 Review .............................................................................................................................. 8-48
Lesson 9: Custom JavaScript Objects .......................................................................................... 9-1
Pre-Assessment Questions ................................................................................................................ 9-2
Creating Custom Objects................................................................................................................... 9-3
Creating a JavaScript Object: The Constructor .................................................................................. 9-4
Creating an Instance of a Custom Object........................................................................................... 9-5
Creating Object Methods ................................................................................................................... 9-6
Creating Functions for Your Objects................................................................................................ 9-10
Case Study...................................................................................................................................... 9-19
Lesson 9 Review .............................................................................................................................. 9-21
Lesson 10: Changing X/HTML on the Fly .................................................................................. 10-1
Pre-Assessment Questions .............................................................................................................. 10-2
Changing X/HTML on the Fly.......................................................................................................... 10-3

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

ix

Using the getElementById Method ................................................................................................... 10-4


Using the getElementsByName Method ............................................................................................ 10-8
Using the getElementsByTagName Method .................................................................................... 10-12
Modifying Attributes within the DOM ............................................................................................ 10-14
Appending Text to the DOM........................................................................................................... 10-17
Case Study.................................................................................................................................... 10-20
Lesson 10 Review .......................................................................................................................... 10-22
Lesson 11: JavaScript Libraries ................................................................................................. 11-1
Pre-Assessment Questions .............................................................................................................. 11-2
Introduction to JavaScript Libraries ................................................................................................ 11-3
Choosing a Code Library ................................................................................................................. 11-4
External and Pre-Made Scripts ........................................................................................................ 11-5
Loading Your First Library............................................................................................................... 11-7
Using JavaScript Library Plug-ins ................................................................................................. 11-11
Best Practices with JavaScript Libraries ........................................................................................ 11-17
Copyright Issues and JavaScript ................................................................................................... 11-19
Case Study.................................................................................................................................... 11-21
Lesson 11 Review .......................................................................................................................... 11-23
Lesson 12: JavaScript and AJAX ............................................................................................... 12-1
Pre-Assessment Questions .............................................................................................................. 12-2
Introduction to AJAX....................................................................................................................... 12-3
Introduction to XML ........................................................................................................................ 12-3
Interactions Among JavaScript, XML and XHTML............................................................................ 12-5
Using AJAX Scripts ......................................................................................................................... 12-7
AJAX and Servers.......................................................................................................................... 12-12
AJAX and Databases ..................................................................................................................... 12-13
Usability Issues with AJAX............................................................................................................ 12-17
Combining AJAX with Libraries ..................................................................................................... 12-17
Alternatives to XML-based AJAX ................................................................................................... 12-21
Case Study.................................................................................................................................... 12-23
Lesson 12 Review .......................................................................................................................... 12-25
Lesson 13: Debugging and Troubleshooting JavaScript .............................................................. 13-1
Pre-Assessment Questions .............................................................................................................. 13-2
What Is Debugging? ........................................................................................................................ 13-3
Tools for Debugging Code ................................................................................................................ 13-4
Testing Code in Various Browsers ................................................................................................. 13-13
Debugging Logic Errors ................................................................................................................. 13-14
JavaScript and Mobile Devices ...................................................................................................... 13-18
Case Study.................................................................................................................................... 13-19
Lesson 13 Review .......................................................................................................................... 13-21
Appendixes ................................................................................................................. Appendixes-1
JavaScript Specialist Glossary.......................................................................................... Glossary-1
Index ................................................................................................................................... Index-1
Supplemental Files Contents.............................................................Supplemental Files Contents-1

List of Labs
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab

1-1:
2-1:
2-2:
2-3:
2-4:
2-5:
2-6:
2-7:
3-1:
3-2:

Creating a JavaScript-enabled page ...................................................................................... 1-14


Using the JavaScript alert() method ......................................................................................... 2-4
Using the JavaScript prompt() method ..................................................................................... 2-6
Using the JavaScript confirm() method..................................................................................... 2-8
Using the JavaScript document.write() method....................................................................... 2-10
Storing user data in a JavaScript variable ............................................................................. 2-16
Assigning and adding variables in JavaScript ........................................................................ 2-23
Using the JavaScript onunload event handler and inline scripting ......................................... 2-27
Creating a user-defined function in JavaScript ........................................................................ 3-5
Using functions, arguments and return values in JavaScript................................................... 3-9

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab
Lab

3-3: Calling a function from within another function in JavaScript ............................................... 3-12
4-1: Using if statements ................................................................................................................. 4-6
4-2: Using a while statement.......................................................................................................... 4-9
4-3: Using a for statement ............................................................................................................ 4-15
4-4: Nesting if and break statements inside a while loop............................................................... 4-17
4-5: Using a continue statement ................................................................................................... 4-20
4-6: Using a switch statement ...................................................................................................... 4-24
5-1: Launching a new window with the open() method .................................................................... 5-8
5-2: Writing content to new windows............................................................................................ 5-11
5-3: Changing status bar text....................................................................................................... 5-15
5-4: Assigning properties to a remote documentdynamically......................................................... 5-20
5-5: Preloading and swapping images to create an active link ....................................................... 5-27
5-6: Identifying browser properties with the navigator object ........................................................ 5-33
5-7: Redirecting to a page based on browser type ......................................................................... 5-37
6-1: Using String object formatting methods ................................................................................... 6-6
6-2: Applying String methods to text............................................................................................. 6-16
6-3: Creating an Array object ....................................................................................................... 6-27
6-4: Accessing and using dates with the Date object ..................................................................... 6-31
6-5: Creating an onscreen clock ................................................................................................... 6-36
6-6: Using the Math object to generate a random quotation .......................................................... 6-40
7-1: Working with text boxes, check boxes and buttons................................................................ 7-13
7-2: Working with radio buttons................................................................................................... 7-17
7-3: Working with selection lists................................................................................................... 7-21
7-4: Working with a multiple-selection list box ............................................................................. 7-25
7-5: Conducting form validation ................................................................................................... 7-27
8-1: Performing client-side browser detection ................................................................................. 8-9
8-2: Locking the browser with malicious code............................................................................... 8-16
8-3: Setting, viewing and clearing a cookie with JavaScript........................................................... 8-36
8-4: Setting passwords with cookies ............................................................................................. 8-40
9-1: Creating a custom object....................................................................................................... 9-16
10-1: Redirecting a page based on user input with getElementById............................................... 10-5
10-2: Changing the DOM using getElementsByName .................................................................. 10-10
10-3: Getting, setting and removing X/HTML attributes ............................................................. 10-16
11-1: Loading a JavaScript library and running a library script .................................................... 11-8
11-2: Using CSS and JavaScript to create a basic slideshow....................................................... 11-10
11-3: Loading, testing and editing a library plug-in .................................................................... 11-13
12-1: Using AJAX to dynamically edit the DOM with button clicks ............................................. 12-10
12-2: Using AJAX and libraries to create tooltips........................................................................ 12-18
13-1: Installing and debugging with the Mozilla Firebug add-on ................................................... 13-9
13-2: Troubleshooting a logic error in JavaScript........................................................................ 13-15

List of Figures
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

1-1: Comparing Java to JavaScript............................................................................................. 1-7


1-2: File lab1-1.htm displayed in Internet Explorer v8 browser................................................. 1-15
1-3: File lab1-1.htm displayed in Mozilla Firefox browser ......................................................... 1-15
2-1: Alert message ..................................................................................................................... 2-4
2-2: File lab2-1.htm displayed following JavaScript statement.................................................... 2-4
2-3: User prompt dialog box ....................................................................................................... 2-7
2-4: Alert message box ............................................................................................................... 2-7
2-5: Confirm dialog box.............................................................................................................. 2-8
2-6: Result of confirm() method after clicking OK .................................................................... 2-9
2-7: Result of confirm() method after clicking Cancel............................................................... 2-9
2-8: User prompt ..................................................................................................................... 2-11
2-9: Page for lab2-4.htm with customized welcome message..................................................... 2-11
2-10: Customizing initial prompt.............................................................................................. 2-11
2-11: User prompt dialog box ................................................................................................... 2-16
2-12: Alert message box ........................................................................................................... 2-16
2-13: Page for lab2-5.htm with welcome message recalling user's name.................................... 2-17
2-14: Result of JavaScript addition: z=13 ................................................................................. 2-23
2-15: Concatenation, not sum .................................................................................................. 2-24

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xi

Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

2-16: Correct sum is indicated ................................................................................................. 2-24


2-17: Prompt dialog box ........................................................................................................... 2-27
2-18: Alert box ......................................................................................................................... 2-27
2-19: Page for lab2-7.htm with welcome message ..................................................................... 2-28
2-20: Goodbye alert box ........................................................................................................... 2-28
3-1: Page for lab3-1.htm with alert ............................................................................................. 3-5
3-2: Page for lab3-2.htm .......................................................................................................... 3-10
3-3: Result of function call ....................................................................................................... 3-10
3-4: Result of function call ....................................................................................................... 3-11
3-5: Return value from myFunction() ..................................................................................... 3-11
3-6: Page for lab3-3.htm .......................................................................................................... 3-13
4-1: Page for lab4-1.htm ............................................................................................................ 4-7
4-2: Alert dialog box ................................................................................................................... 4-7
4-3: Alert dialog box ................................................................................................................... 4-7
4-4: Alert dialog box ................................................................................................................... 4-8
4-5: Page for lab4-2.htm .......................................................................................................... 4-10
4-6: Prompt dialog box ............................................................................................................. 4-10
4-7: for loop alert message...................................................................................................... 4-13
4-8: Output of for loop............................................................................................................ 4-14
4-9: for loop alert message...................................................................................................... 4-14
4-10: Output of for loop .......................................................................................................... 4-15
4-11: Page for lab4-3.htm......................................................................................................... 4-16
4-12: Page for lab4-4.htm......................................................................................................... 4-17
4-13: Prompt dialog box ........................................................................................................... 4-18
4-14: Leap year example .......................................................................................................... 4-20
4-15: Page for lab4-5.htm......................................................................................................... 4-21
4-16: Page for lab4-6.htm......................................................................................................... 4-25
4-17: Alert boxes...................................................................................................................... 4-26
5-1: JavaScript object hierarchy................................................................................................. 5-3
5-2: Page for lab5-1.htm ............................................................................................................ 5-9
5-3: CIW Web site ...................................................................................................................... 5-9
5-4: New window with height and width attributes ................................................................... 5-10
5-5: Small window opened ....................................................................................................... 5-12
5-6: Manipulating status property .......................................................................................... 5-14
5-7: Page for lab5-3.htm .......................................................................................................... 5-15
5-8: Page for lab5-3.htm status bar message ............................................................................ 5-16
5-9: Result of using with statement ......................................................................................... 5-20
5-10: Page for lab5-4.htm......................................................................................................... 5-22
5-11: Prompt dialog boxes........................................................................................................ 5-22
5-12: Alert dialog box ............................................................................................................... 5-22
5-13: New window.................................................................................................................... 5-23
5-14: Page for lab5-5.htm......................................................................................................... 5-28
5-15: Page for lab5-5.htm with image swap .............................................................................. 5-29
5-16: Page for lab5-6.htm......................................................................................................... 5-35
5-17: Alert in Mozilla Firefox 3.5 .............................................................................................. 5-35
5-18: Alert in Microsoft Internet Explorer 7.0 ........................................................................... 5-36
6-1: Alert with line breaks in text ............................................................................................... 6-7
6-2: Page for lab6-1.htm ............................................................................................................ 6-8
6-3: Links window...................................................................................................................... 6-9
6-4: Output of String prototype demonstration ....................................................................... 6-11
6-5: Evaluating strings with string methods ............................................................................. 6-17
6-6: Telephone number regular expression............................................................................... 6-22
6-7: questions array has length of 3 ....................................................................................... 6-26
6-8: Page for lab6-3.htm .......................................................................................................... 6-27
6-9: Page for Llb6-3.htm with sorted array ............................................................................... 6-28
6-10: Alert dialog box ............................................................................................................... 6-28
6-11: Date object information in browser alerts........................................................................ 6-29
6-12: Alerts with date information ............................................................................................ 6-32
6-13: Date information calculated through script ..................................................................... 6-32
6-14: Page for lab6-5.htm......................................................................................................... 6-37
6-15: Math object alert box sequence........................................................................................ 6-40

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xii

Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

6-16: Page for lab6-6.htm......................................................................................................... 6-42


7-1: Alert with form name/value pairs...................................................................................... 7-12
7-2: Page for lab7-1.htm .......................................................................................................... 7-13
7-3: Alert dialog box ................................................................................................................. 7-14
7-4: Page for lab7-1b.htm......................................................................................................... 7-15
7-5: Page for lab7-2.htm .......................................................................................................... 7-17
7-6: Alert dialog box ................................................................................................................. 7-18
7-7: Alert dialog box ................................................................................................................. 7-18
7-8: Page for lab7-3.htm .......................................................................................................... 7-22
7-9: Alert dialog box ................................................................................................................. 7-22
7-10: Page for lab7-3a.htm after adding onchange event handler.............................................. 7-23
7-11: Alert dialog box ............................................................................................................... 7-23
7-12: Page for lab7-4.htm......................................................................................................... 7-25
7-13: Alert dialog box ............................................................................................................... 7-26
7-14: Interactive form............................................................................................................... 7-27
7-15: Alert dialog box ............................................................................................................... 7-29
7-16: Page for lab7-5a.htm after submitting data ..................................................................... 7-30
8-1: Pop-up describing browser type detected............................................................................. 8-9
8-2: Table detailing your browser properties............................................................................. 8-12
8-3: Blocking JavaScript in Internet Explorer 8.x ..................................................................... 8-14
8-4: Alert dialog box ................................................................................................................. 8-17
8-5: Close Program menu......................................................................................................... 8-17
8-6: End Task message ............................................................................................................ 8-17
8-7: Inline frame used for password entry ................................................................................ 8-19
8-8: Examples of same-origin relationships .............................................................................. 8-20
8-9: Example of security request for signed script .................................................................... 8-22
8-10: Enabling and disabling cookies in Internet Explorer 7.x .................................................. 8-33
8-11: Options dialog in Mozilla Firefox 3.x................................................................................ 8-33
8-12: Deleting cookies in Mozilla Firefox 3.x ............................................................................. 8-34
8-13: Accessing cookie settings in Mozilla Firefox 3.x ............................................................... 8-34
8-14: Accessing cookie settings in Google Chrome 9.x .............................................................. 8-35
8-15: Deleting cookies in Google Chrome.................................................................................. 8-35
8-16: Dialog asking whether to delete cookie ............................................................................ 8-37
8-17: Cookie accepted .............................................................................................................. 8-37
8-18: Landing page for lab8-3.htm ........................................................................................... 8-38
8-19: Cookie deleted................................................................................................................. 8-38
8-20: Page for lab8-4.htm......................................................................................................... 8-41
8-21: Alert dialog box ............................................................................................................... 8-42
8-22: Alert dialog box ............................................................................................................... 8-42
8-23: Password-protected page (lab8-4a.htm) ........................................................................... 8-42
8-24: Alert dialog box ............................................................................................................... 8-43
9-1: Product list page ................................................................................................................. 9-7
9-2: After clicking Get Info ......................................................................................................... 9-9
9-3: Search item for ID............................................................................................................. 9-11
9-4: Search result for invalid entry ........................................................................................... 9-11
9-5: Result of clicking Show All Products button ...................................................................... 9-12
9-6: Result of selecting CIW Polo Shirt link............................................................................... 9-13
9-7: Page for Lab9-1.htm.......................................................................................................... 9-17
9-8: Alert displaying employee information ............................................................................... 9-17
9-9: Alert showing all employees .............................................................................................. 9-17
10-1: Page for lab10-1.htm....................................................................................................... 10-7
10-2: Page for getElementsByName example ............................................................................ 10-9
10-3: Quiz page for lab10-3.htm............................................................................................. 10-11
10-4: Score page generated by document.write ....................................................................... 10-12
10-5: Results of example_getAttributes.htm script accessing and modifying attributes ....... 10-15
10-6: Alert for special_attribute in Internet Explorer and Firefox, respectively......................... 10-15
10-7: Page content with attributes accessed and set............................................................... 10-17
10-8: Content appended to page instead of overwritten........................................................... 10-18
11-1: Basic form page without validation................................................................................ 11-14
11-2: First Name field is validated .......................................................................................... 11-15
11-3: Completed form validation script result......................................................................... 11-17

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xiii

Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

12-1: Diagram of AJAX interactions among JavaScript, XML and X/HTML............................... 12-6
12-2: Database table consisting of fields (columns) and records (rows) ................................... 12-14
13-1: Internet Explorer error alert for syntax error ................................................................... 13-5
13-2: Disabling debugger in Internet Explorer .......................................................................... 13-6
13-3: Accessing JavaScript Console in Chrome's Tools menu ................................................... 13-7
13-4: Chrome error alert for syntax error ................................................................................. 13-7
13-5: Firefox rendering page without errors.............................................................................. 13-8
13-6: Mozilla Firefox home page Add-ons menu.................................................................... 13-9
13-7: Firebug Add-ons home page .......................................................................................... 13-10
13-8: Firefox security alert warning about add-on installation ................................................ 13-10
13-9: Opening Firebug debugger in Firefox............................................................................. 13-11
13-10: Firebug error alert box ................................................................................................ 13-11
13-11: Debugged JavaScript rendered as expected ................................................................. 13-12

List of Tables
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table

1-1: Comparison of JavaScript and Java...................................................................................... 1-7


1-2: JavaScript versions and browser support ............................................................................. 1-8
2-1: JavaScript variable data types ............................................................................................ 2-12
2-2: JavaScript literal types ....................................................................................................... 2-13
2-3: JavaScript expression types................................................................................................ 2-18
2-4: JavaScript operators .......................................................................................................... 2-18
3-1: JavaScript user events ....................................................................................................... 3-16
3-2: JavaScript event handlers .................................................................................................. 3-17
5-1: Properties of window object................................................................................................... 5-4
5-2: Methods of window object ..................................................................................................... 5-5
5-3: Event handlers of window object ........................................................................................... 5-6
5-4: window attributes accessible in open() method.................................................................... 5-7
5-5: Properties of document object ............................................................................................. 5-17
5-6: Methods of document object ............................................................................................... 5-18
5-7: Comparison of code using with statement.......................................................................... 5-20
5-8: Properties of image object................................................................................................... 5-25
5-9: Event handlers of image object........................................................................................... 5-26
5-10: Properties and methods of history object ........................................................................ 5-31
5-11: Properties of location object ........................................................................................... 5-32
5-12: Properties of navigator object ...................................................................................... 5-33
5-13: Methods of navigator object ........................................................................................ 5-33
6-1: String object formatting methods........................................................................................ 6-4
6-2: Special characters in JavaScript ........................................................................................... 6-5
6-3: Methods of Date object....................................................................................................... 6-30
6-4: Methods of Math object....................................................................................................... 6-39
6-5: Properties of Math object .................................................................................................... 6-39
7-1: X/HTML form elements ........................................................................................................ 7-3
7-2: Properties of JavaScript form object ..................................................................................... 7-5
7-3: Methods of JavaScript form object ....................................................................................... 7-5
7-4: Event handlers of JavaScript form object ............................................................................. 7-6
7-5: Properties of button object................................................................................................... 7-6
7-6: Method and event handler of JavaScript button object........................................................ 7-6
7-7: Properties of checkbox object ............................................................................................... 7-8
7-8: Method and event handler of JavaScript checkbox object ..................................................... 7-8
7-9: Properties text and textarea objects.................................................................................. 7-9
7-10: Methods of text and textarea objects........................................................................... 7-10
7-11: Event handlers of text and textarea objects................................................................. 7-10
7-12: Properties of radio object................................................................................................. 7-16
7-13: Method and event handler of JavaScript radio object ........................................................ 7-16
7-14: Event handlers of select object ....................................................................................... 7-19
7-15: Properties and subproperties of select object .................................................................. 7-20
8-1: Types of cross-site scripting (XSS) ...................................................................................... 8-24
12-1: readyState values for XMLHttpRequest............................................................................. 12-9

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xiv

Course Description
The JavaScript Specialist course focuses on the fundamental concepts of the JavaScript language. This
course will empower you with the skills to design client-side, platform-independent solutions that greatly
increase the value of your Web site by providing interactivity and interest. You will learn how to use
JavaScript to communicate with users, modify the Document Object Model (DOM), control program flow,
validate forms, animate images, create cookies, change XHTML on the fly, and communicate with
databases.
The first part of this course focuses on essential JavaScript principles and techniques, including common
programming practices, working with variables and data, and using functions, methods and events.
Next, you will learn intermediate JavaScript programming techniques that will build upon your knowledge
and present solutions for more functional and exciting Web pages. These include using control structures
for program flow, manipulating the JavaScript DOM, using language objects, creating expressions, and
creating and using custom objects.
You will then apply JavaScript programming techniques to develop interactive forms, change XHTML
dynamically, create and use cookies, and explore security issues related to JavaScript. You will also learn
about extensions to the JavaScript language, including JavaScript code libraries and advanced interactive
Web applications with AJAX. Finally, you will learn about tools and techniques for debugging and
troubleshooting your JavaScript code.
By the end of this course, you will understand and use the most popular applications of JavaScript.
Guided, step-by-step labs provide opportunities to practice new skills. You can challenge yourself and
review your skills after each lesson in the Lesson Summary and Lesson Review sections. Additional skill
reinforcement is provided in Optional Labs, Lesson Quizzes and a Course Assessment that are available
from your instructor. This course also offers Case Studies and pre-lab scenarios for class discussion
about real-world skills applications.
This coursebook comes with supplemental materials that include the lab files used in class. To practice
the skills presented in class or to perform any labs that were not completed, refer to the Classroom Setup
section for information about system requirements and using the lab files.
Note: Most JavaScript code is widely provided as freeware and is not subject to copyright restrictions.
Some code used in this course's examples and labs for instructional purposes was provided in part or in
whole as freeware, and was not necessarily written in full by CIW developers.
The CIW JavaScript Specialist course prepares students to take the CIW JavaScript Specialist certification
exam (1D0-635).

Series
JavaScript Specialist is the first course in the CIW Web Development series:

JavaScript Specialist

Perl Specialist

Database Design Specialist

Prerequisites
No prior knowledge of the JavaScript programming language is necessary. However, students should be
familiar with using the Internet, developing Web pages and configuring networks to a level consistent with
that found in the CIW Web Foundations series. Knowledge of X/HTML code development is required.

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xv

Certification
The CIW JavaScript Fundamentals course prepares candidates to take the CIW JavaScript Specialist exam
(1D0-635), which if passed earns the individual the CIW JavaScript Specialist certification.
Candidates who also earn the CIW Perl Specialist certification and the CIW Database Design Specialist
certification earn the advanced CIW Web Development Professional certification in addition.
The CIW Web Development Professional certification program prepares students to excel in a career in
Web and IT technologies. This advanced certification validates skills in the essential combination of a
front-end scripting language, a back-end programming language and the ability to integrate them with a
database.
To earn the CIW Web Development Professional certification, students must pass three certification
exams:

CIW JavaScript Specialist (exam 1D0-635)

CIW Perl Specialist (exam 1D0-437)

CIW Database Design Specialist (exam 1D0-541)

For information about taking CIW exams, visit www.CIWcertified.com.

Target audience
The CIW JavaScript Specialist course is for individuals who want to understand how to fully use the
features of the JavaScript programming language in Web application development. These specialized Web
language skills can help you begin or grow a career in advanced Web development and technologies:

Web developers

Software developers

Application programmers

Client/server developers

Desktop publishers

Courseware
This coursebook was developed for instructor-led training and will assist you during class. Along with
comprehensive instructional text and objectives checklists, this coursebook provides easy-to-follow
hands-on labs and a glossary of course-specific terms. It also provides Internet addresses needed to
complete some labs, although due to the constantly changing nature of the Internet, some addresses may
no longer be valid.
The student coursebook is organized in the following manner:

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xvi

course title
table of contents
list of labs
list of figures
list of tables
lessons
lesson objectives
pre-assessment questions
narrative text
exam objective callouts
graphics
tables and figures
warnings
tech notes
supplemental movie clips
labs
exam objective callouts
graphics
tables and figures
warnings
tech notes
case study
lesson summary
lesson review
appendixes
glossary
index
supplemental files

When you return to your home or office, you will find this coursebook to be a valuable resource for
reviewing labs and applying the skills you have learned. Each lesson concludes with questions that review
the material. Lesson review questions are provided as a study resource only and in no way guarantee a
passing score on the CIW JavaScript Specialist certification exam.

Coursebook versions
The CIW Web Development courseware is designed for various classroom environments: academic,
learning center and corporate. These coursebooks are available in both instructor and student versions.
Student versions are available for both the academic environment and the learning center/corporate
environment. Check your book to verify which version you have.

Instructor (Academic, Learning Center and Corporate) Example syllabi for 10-week and 16week instruction periods are included with the instructor supplemental files available on CIW Online.
Learning centers can teach this series at an accelerated pace; consult the implementation table that
can be found on CIW Online. The supplemental files also include an appendix listing the CIW
JavaScript Specialist certification exam objectives and locations of corresponding material in the
coursebook. The instructor version of this book includes Instructor Notes in the margin, which
provide additional tips and commentary for the instructor to supplement course narrative. Margin
callouts also direct instructors to material that relates directly to specified CIW JavaScript Specialist
objectives. The instructor book and supplemental files contain all answers to Optional Labs, Lesson
Quizzes and the Course Assessment. The supplemental files also include handout versions of all
Optional Labs, Lesson Quizzes and the Course Assessment, which the instructor can print and assign
during class or as homework. Lesson Quizzes and Course Assessments are provided as study and

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xvii

course-grading resources only; success on these materials in no way guarantees a passing score on
the CIW JavaScript Specialist certification exam.

Student (Academic) The student book and supplemental files include Pre-Assessment and Lesson
Review questions for each lesson. However, the student book does not provide answers to these
questions. It also does not include any Optional Labs, Quizzes or the Course Assessment. Students
can obtain these elements and answers only from the instructor. The student supplemental materials
include appendixes and files used to perform many of the labs in the coursebook. The supplemental
files also include an appendix listing the CIW JavaScript Specialist certification exam objectives and
locations of corresponding material in the coursebook. Lesson Quizzes and Course Assessments are
provided as study and course-grading resources only; success on these materials in no way
guarantees a passing score on the CIW JavaScript Specialist certification exam.

Student (Learning Center/Corporate) Designed for the learning center/corporate environment,


this student book includes Pre-Assessment and Lesson Review questions. The student supplemental
materials include appendixes; files used to perform many of the labs in the coursebook; and answers
to the Pre-Assessment Questions, Lesson Review Questions, Course Assessment, Optional Labs and
Lesson Quizzes. The supplemental files also include an appendix listing the CIW JavaScript Specialist
certification exam objectives and locations of corresponding material in the coursebook. Lesson
Quizzes and Course Assessments are provided as study and course-grading resources only; success
on these materials in no way guarantees a passing score on the CIW JavaScript Specialist
certification exam.

Online resources
You can visit CIW Online at http://education.certification-partners.com/ciw/ to access supplemental
course materials and to get help in preparing for the CIW JavaScript Specialist certification exam.

CIW courseware supplemental files


This coursebook includes supplemental material that can be accessed from CIW Online. Online materials
are provided for both instructors and students, and include some elements required to complete the
coursework and other optional elements that are provided for your interest or further study. Student
materials include lab files used to complete the course labs, answers to student exercises and quizzes,
and appendixes with related information (including the CIW JavaScript Specialist Objectives And
Locations Appendix). Instructor materials include course syllabi and implementation tables, answers to
student exercises and quizzes, and appendixes with related information (including the CIW JavaScript
Specialist Objectives And Locations Appendix). See the CIW Supplemental Files section under Classroom
Setup for information about accessing these files.

CIW Online Exercises


These interactive activities are instructional supplements to the official print and online books, designed
to offer a blended-learning approach. Mapped directly to the Official CIW Courseware, the CIW Online
Exercises enable you to review important concepts from the JavaScript Specialist course and measure
your proficiency on content relevant to the CIW JavaScript Specialist certification exam. CIW Online
Exercises challenge you with a wide range of activities, including glossary flashcards, matching exercises,
fill-in-the-blank exercises, crossword puzzles and true/false questions all providing immediate
feedback.

CIW Course Reviews


CIW Course Reviews are designed to assess your knowledge of the concepts, skills and best practices of
Web technology taught in the Official CIW Courseware. The CIW Course Reviews assess lesson
knowledge, reinforce classroom learning and enhance instruction. This online review program contains
multiple-choice reviews and quizzes that cover CIW JavaScript Specialist courseware content lesson by
lesson.

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xviii

CIW Certification Practice Exams


After you have mastered the CIW JavaScript Specialist course material, you are ready to prepare for the
high-stakes CIW JavaScript Specialist certification exam. The online CIW Certification Practice Exams
program helps you build confidence with your knowledge of the CIW exam objectives. This program
provides you with:

Timed practice exams that simulate the high-stakes testing environment and help predict actual
performance on CIW certification exams.

A feedback review mode that allows you to check answers while taking the practice exam and gain
valuable feedback that relates each question to a CIW exam objective and a lesson in the Official CIW
Courseware.

Exam results that report on your mastery of each CIW exam objective.

Personalized performance reports and study plans to track individual progress and view overall class
trends.

Course Objectives
After completing this class, you will be able to:

Identify characteristics of JavaScript and common programming practices.

Work with variables and data in JavaScript.

Use JavaScript functions, methods and events.

Use JavaScript statements to control program flow.

Explain and use the JavaScript Document Object Model (DOM).

Use JavaScript language objects and create expressions.

Use JavaScript to develop interactive XHTML forms.

Address security issues relevant to JavaScript, and define and use cookies.

Create and use custom JavaScript objects.

Use JavaScript to change XHTML before it is rendered on a Web page.

Use JavaScript code libraries to assist in developing JavaScript programs.

Use JavaScript and AJAX to create interactive Web applications.

Debug and troubleshoot JavaScript code.

Classroom Setup
Your instructor has probably set up the classroom computers based on the system requirements listed in
the following sections. Most software configurations on your computer are identical to those on your
instructor's computer. However, your instructor may use additional software to demonstrate network
interaction or related technologies.

System Requirements
This section lists the hardware, software and connectivity requirements to implement this course.

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xix

Hardware
The following table summarizes the hardware requirements for all courses in the CIW program. Each
classroom should be equipped with enough personal computers to accommodate each student and the
instructor with his or her own system.
Note: The CIW hardware requirements are similar to the minimum system requirements for Microsoft
Windows XP implementation except that CIW requires increased hard disk space (20 GB) and RAM (1 GB).

CIW hardware specifications

Greater than or equal to the following

Processor

Intel Pentium processor (or equivalent) 1-GHz minimum


required (single or dual processor system)

L2 cache

256 KB

Hard disk

20 GB

RAM

1 GB

CD-ROM

32X

Network interface card (NIC)

10BaseT or 100BaseTX (10 or 100 Mbps)

Sound card/speakers

Required for instructor's station, optional for


student stations

Video adapter

At least 4 MB

Monitor

Super VGA (800 x 600) resolution video graphics card and


17-inch monitor with 256 colors

Network hubs

Enough 10-port 10BaseT or 100BaseTX (10 or 100 Mbps)


hubs to allow classroom computers to communicate

Router*

Multi-homed system with three NICs


(Windows 2000/2003 server)*

* Router only required for some security and networking courses. Please review the connectivity or
network requirements for each course to determine if a router is required. Must meet universal CIW
hardware requirements.

Software
The recommended software configurations for computers used to complete the labs in this book are as
follows.
To be installed before class:

Microsoft Windows XP or later.

Microsoft Internet Explorer browser

Mozilla Firefox browser

(optional) Google Chrome browser

(optional) Safari browser

A standard text editor, such as Notepad, Notepad++ or WordPad (included with Microsoft Windows).

Connectivity
Internet connectivity is required for this course. You will experience optimal performance with a dedicated
Internet connection (e.g., a cable/DSL modem or a T1 line).

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xx

CIW supplemental files


This coursebook includes supplemental materials that are referenced and used throughout the course.
These supplemental materials are provided online at http://education.certification-partners.com/ciw/.
You will need to create a directory for all supplemental materials for the course. The default location is
C:\CIW\[Course_Title]. To view or download the materials, go to CIW Online, click the link for each file
and save to this directory. You can then create a shortcut to this directory on your Desktop. As you
conduct the course labs, you can use this shortcut to quickly access your lab files.
Note: Most JavaScript code is widely provided as freeware and is not subject to copyright restrictions.
Some code used in this course's examples and labs for instructional purposes was provided in part or in
whole as freeware, and was not necessarily written in full by CIW developers.

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xxi

Conventions and Graphics Used in This Book


The following conventions are used in this coursebook.
Terms

Technology terms defined in the margins are indicated in bold type the first time
they appear in the text. However, not every word in bold type is a term requiring
definition.

Lab Text

Text that you enter during a lab appears in italic bold type. Names of components
that you access or change in a lab appear in bold type.

Notations

Notations or comments regarding screenshots, labs or other text are indicated in italic
type.

Program Code or
Commands

Text used in program code or operating system commands appears in the Lucida
Sans Typewriter font.

The following graphics are used in this coursebook.


Tech Notes point out exceptions or special circumstances that you may find when
working with a particular procedure. Tech Notes that occur within a lab are
displayed without the graphic.

Tech Tips offer special-interest information about the current subject.

Warnings alert you about cautions to observe or actions to avoid.

This graphic signals the start of a lab or other hands-on activity.

Each lesson summary includes an Application Project. This project is designed to


provoke interest and apply the skills taught in the lesson to your daily activities.
Each lesson concludes with a summary of the skills and objectives taught in that
lesson. You can use the Skills Review checklist to evaluate what you have learned.

This graphic indicates a line of code that is completed on the following line.

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

xxii

2011 Certification Partners, LLC. All Rights Reserved.


Authorized to be used in American Public University System.
To report abuse, go to www.CIWcertified.com/abuse.

Version 1.01

Você também pode gostar