Copyright © 2002 ProsoftTraining. All rights reserved. JavaScript Fundamentals.
-
Upload
oscar-barton -
Category
Documents
-
view
221 -
download
0
Transcript of 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