copyright © 2002 prosofttraining. all rights reserved. javascript fundamentals

Copyright © 2002 ProsoftTraining. All rights reserved.

JavaScript Fundamentals

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 1:Introduction to JavaScript

Objectives

• Describe the origins of JavaScript• List the key JavaScript characteristics• Describe the differences between Java and

JavaScript• Discern among JavaScript, JScript and

VBScript• Differentiate between server-side and client-

side JavaScript applications• Embed JavaScript into HTML• Use the JavaScript comment tags

Origins of JavaScript

• Developed by Netscape Corporation• Previously named LiveScript• First supported in Navigator v2.0

– Has since gained universal support

JavaScript Characteristics

• A scripting language• Object-based, not object-oriented• Event-driven• Platform-independent• Enables quick development• Relatively easy to learn

JavaScript and Common Programming Concepts

• Objects• Properties• Methods

Java and JavaScript

• JavaScript and VBScript• Visual Basic and VBScript• JavaScript, JScript and ECMA Script

Comparing Java to JavaScript

Java JavaScript

Server-Side vs. Client-Side Applications

• Server-side applications– LiveWire

• Client-side applications– Embedding JavaScript into HTML– External scripts

Annotating Your Code with Comments

• Single-line comment indicator• Multiple-line comment indicator

Summary

Describe the origins of JavaScript List the key JavaScript characteristics Describe the differences between Java and

JavaScript Discern among JavaScript, JScript and

VBScript Differentiate between server-side and client-

side JavaScript applications Embed JavaScript into HTML Use the JavaScript comment tags

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 2:Working with Variables and Data in JavaScript

Objectives

• Communicate with the user throughalert(), prompt() and confirm()

• Define variables and data types• Obtain user input and store it in variables• Report variable text to the client window• Discern between concatenation and addition• Use expressions and operators• Define inline scripting

Using JavaScript toCommunicate 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 HTML dynamically: the document.write() method

Using Data More Than Once: Variables

• What is a variable?• Variable data types• Literals• Naming variables• Declaring variables• Concatenating variables• Working with variables

JavaScriptExpressions

• Assignment• Arithmetic• String• Logical

Operators

• Used in expressions to store or return a value• Varieties include:

– Assignment– Arithmetic– Unary– Logical

Inline Scripting and Simple User Events

• Event handlers– User-generated events are not script-driven

event handlers

The onLoad and onUnload Event Handlers

• onUnload event handler is used to process, or handle, the unload event

• onLoad event handler is used by scripts that run as the page is loaded in the browser

Keywords andReserved Words

• JavaScript keywords• JavaScript reserved words

Summary

Communicate with the user throughalert(), prompt() and confirm()

Define variables and data types Obtain user input and store it in variables Report variable text to the client window Discern between concatenation and addition Use expressions and operators Define inline scripting

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 3:Functions, Methods

and Events in JavaScript

Objectives

• Use methods as functions• Define and call functions• Use conversion methods• Pass arguments to and return values from

functions• Define operator precedence• Discern between global and local variables• Employ the conditional operator• Identify user events and event handlers

Functions

• Organized blocks of code that handle actions generated by user events

• Can improve program efficiency and readability

Methods as Functions

• Methods and functions are interchangeable in JavaScript– Any method that returns a value can be

called a function

Defining a Function

• Calling statements• Arguments• Inserting functions into HTML pages• Using built-in functions• Good coding practice

Calling a Function

• Passing arguments to functions• Returning values from functions• Operator precedence• Global versus local variables

User Events and JavaScript Event Handlers

• User events– blur– click– change– focus– load– mouseOver– mouseOut– select

• Event handlers– button– reset– submit– radio– checkbox– link– form– text– textarea– select– image– area– window

Summary

Use methods as functions Define and call functions Use conversion methods Pass arguments to and return values from

functions Define operator precedence Discern between global and local variables Employ the conditional operator Identify user events and event handlers

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 4:Controlling Program

Flow in JavaScript

Objectives

• Use the if. . . statement• Use the while. . . statement• Use the for. . . statement• Use the break and continue statements• Define the do. . .while statement• Use the switch. . . statement

The if. . . else Statement

• A single condition• Multiple conditions• Using if for conditional program flow

The while Statement

• Used to execute a code group for as long as (while) a certain condition is true

The for Statement

• A loop that can be used to execute a group of statements repeatedly

The break Statement

• Used to exit a loop that otherwise would continue executing

The continue Statement

• Used to force the flow of control back to the top of the loop

The switch Statement

• Compares a value against other values• Functions the same as multiple if statements

The do. . . while Statement

• Operates exactly like the while statement, with one key difference:– The do. . . while statement does not

check the conditional expression until after the first time through the loop

Summary

Use the if. . . statement Use the while. . . statement Use the for. . . statement Use the break and continue statements Define the do. . .while statement Use the switch. . . statement

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 5:The JavaScript Object Model

Objectives

• Describe the JavaScript object model• Use the window object• Manipulate properties and methods of the document object

• Use the with statement• Deploy the image, navigator and history

objects• Evaluate and change URL information with the location object

The JavaScriptObject Model

• Browser objects• Language objects• Form field objects• Document Object Model (DOM)• Containership

The window Object

• The highest-level object in the JavaScript object hierarchy

• Opening additional windows• Dot notation revisited• The status property• The onMouseOver and onMouseOut event

handlers

The document Object

• Subordinate to the window object in the window hierarchy

• Defined when the <BODY> tag is evaluated in an HTML page

The with Statement

• Says that for the body of the statements, any references that follow refer to the same object

The image object

• Allows you to manipulate images in Internet Explorer 4.0 and Netscape Navigator 3.0 and later

• JavaScript and image maps

The history Object

• Subordinate to the window object in the window hierarchy

The location Object

• Subordinate to the window object in the window hierarchy

• Allows you to specify URLs in a script

Thenavigator Object

• Reflects information about the browser being used

Summary

Describe the JavaScript object model Use the window object Manipulate properties and methods of the document object

Use the with statement Deploy the image, navigator and history

objects Evaluate and change URL information with the location object

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 6:JavaScript

Language Objects

Objectives

• Use the String object to test user input• Identify basic regular expressions and the RegExp object

• Deploy the Array object to create more efficient code

• Identify uses for the Date and Math objects

JavaScript Language Objects

• String object• Math object• Array object• Date objects

The string Object

• String object formatting methods• String object special characters• Additional String object methods

Evaluating Strings

• The length property• The indexOf() and lastindexOf() methods• The substring() method• The charAt() method• Form validation using string methods

The Array Object

• The Array object length property• Instances

The Date Object

• Based on arrays• The only way to use date and time information

in JavaScript

Setting and Extracting Time Information

• Follows the same procedures as setting and extracting date information

The Math Object

• Contains properties and methods that aid in the creation of advanced mathematical calculations

Summary

Use the String object to test user input Identify basic regular expressions and the RegExp object

Deploy the Array object to create more efficient code

Identify uses for the Date and Math objects

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 7:Developing Interactive Forms with JavaScript

Objectives

• Identify and use form controls• Refer to and define form objects• Use the button object• Use the checkbox object• Evaluate text in the text and textarea

objects• Process radio object options• Capture choices from a select list

Overview of Form Elements

• button• checkbox• hidden• password• radio

• reset• select• submit• text• textarea

Referring to a Form Element

• Two ways– By name– By index number in the form object’s elements array

Theform Object

• Represents an HTML form in JavaScript• <FORM> tags present in HTML document

The button Object

• The simplest of all objects• Has only one event handler: onClick

The checkbox Object

• A checkbox is an input object in the shape of a small square that can be checked on or off

The text and textarea Objects

• Text objects can only display a single line of text

• Textarea objects can display multiple, scrolling lines of text

The radio Object

• Used to select among mutually exclusive options

The select Object

• A drop-down list or a list box of items used in an HTML form

• No methods are defined for the select object

FormValidation

• Benefits– Increased validity of form submissions– Increased end-user satisfaction– Conservation of bandwidth

Summary

Identify and use form controls Refer to and define form objects Use the button object Use the checkbox object Evaluate text in the text and textarea

objects Process radio object options Capture choices from a select list

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 8:Cookies and

JavaScript Security

Objectives

• Explain cookies• Delete cookies from your disk• Assign a cookie• Test for the presence of a cookie• Clear a cookie• Enable and disable cookies in the browser• Use cookies and passwords to restrict entry to

a page

What Are Cookies?

• Small memory-resident pieces of information sent from a server to your computer

• Often referred to as “persistent cookies” and “persistent HTML”

How Are Cookies Sent?

• When a user generates an HTTP request, two actions can occur:– A server can deposit cookies on the user’s

hard drive– Any cookies already on the user’s system

that match the server’s domain can be passed along in the request header

Who Can Send Cookies?

• A server can set, or deposit, a cookie only if a user visits that particular site– Cross-domain posting is impossible– Some domains “share” cookies

Storing Cookies

• Cookies store name=value pairs as text strings

• Domains can store no more than 20 cookies on a user’s computer

• Users can delete cookie files

Why Use Cookies?

• Authentication• Storing user information

– Operating system and browser type– Service provider– IP address– History of sites visited

• State maintenance with cookies

Testing for Cookie Presence

• You can easily test for the presence of any cookie by using “document.cookie” in your script

Clearing a Cookie

• To clear a cookie, reassign it, adding an expiration date that has already passed

Controlling Cookies in the Browser

• Netscape Navigator• Microsoft Internet Explorer

JavaScript Security Issues

• JavaScript and helper application programs• Malicious and accidental coding• Previous browser versions and security• Signed scripts

– Digital certificates

Summary

Explain cookies Delete cookies from your disk Assign a cookie Test for the presence of a cookie Clear a cookie Enable and disable cookies in the browser Use cookies and passwords to restrict entry to

a page

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 9:Controlling

Frames with JavaScript

Objectives

• Target frames with JavaScript• Change two or more frames simultaneously• Use functions and variables within framesets• Use functions and variables with related

windows• Target the opener window

Using JavaScriptwith Frames and Windows

• Understanding HTML frames• Understanding HTML targets

Targeting Frames with JavaScript

• To target frames, use either of the following techniques– By target name– By number in the frames array

Changing Two or More Frames with JavaScript

• To change two (or more) frames at once in a script, write a simple function that includes two (or more) location.href lines

Frames, Functions and Variables

• Variables can be stored in any of the files involved in making a frameset

• Targeting windows– Targeting the “opener” window

Targeting Windowswith JavaScript

• Targeting the opener window

Summary

Target frames with JavaScript Change two or more frames simultaneously Use functions and variables within framesets Use functions and variables with related

windows Target the opener window

Copyright © 2002 ProsoftTraining. All rights reserved.

Lesson 10:Custom

JavaScript Objects

Objectives

• Create a custom JavaScript object• Define properties and methods of custom

objects• Create new object instances• Create client-side databases using custom

objects• Create functions and methods for

manipulating client-side databases

Advantages of Custom Objects

• Creating a user-defined object offers two major advantages– You can create sophisticated solutions with

a minimum of coding– You can represent programming constructs

as objects

Creating a JavaScript Object: The Constructor

• You define, or create, a custom JavaScript object with a special function called a constructor– The constructor defines the properties and

methods of your object

Creating an Instance of a Custom Object

• To instantiate then populate the properties of each new instance with actual data, you must declare variables

Creating Object Methods

• You can create as many methods for your object as you want

• Methods can be as simple or as sophisticated as you want

Creating Functions for Your Objects

• When you need to evaluate multiple objects in an array, you need a function as opposed to a method

Summary

Create a custom JavaScript object Define properties and methods of custom

objects Create new object instances Create client-side databases using custom

objects Create functions and methods for

manipulating client-side databases

JavaScript Fundamentals

Introduction to JavaScript Working with Variables and Data in JavaScript Functions, Methods and Events in JavaScript Controlling Program Flow in JavaScript The JavaScript Object Model JavaScript Language Objects

JavaScript Fundamentals

Developing Interactive Forms with JavaScript Cookies and JavaScript Security Controlling Frames with JavaScript Custom JavaScript Objects