Transcript Document

JavaScript
Fundamentals
Copyright © 2002 ProsoftTraining. All rights reserved.
Lesson 1:
Introduction
to JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
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 clientside 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 clientside JavaScript applications
 Embed JavaScript into HTML
 Use the JavaScript comment tags
Lesson 2:
Working with Variables
and Data in JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
Objectives
• Communicate with the user through
alert(), 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 to
Communicate with the User
• Giving the user a message: the alert()
method
• Using semicolons in JavaScript
• Getting data from the user: the prompt()
method
• Concatenation
• Requesting confirmation: the confirm()
method
• Writing 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
JavaScript
Expressions
•
•
•
•
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 and
Reserved Words
• JavaScript keywords
• JavaScript reserved words
Summary
 Communicate with the user through
alert(), 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
Lesson 3:
Functions, Methods
and Events in JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
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
Lesson 4:
Controlling Program
Flow in JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
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
Lesson 5:
The JavaScript
Object Model
Copyright © 2002 ProsoftTraining. All rights reserved.
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 JavaScript
Object 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
The
navigator 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
Lesson 6:
JavaScript
Language Objects
Copyright © 2002 ProsoftTraining. All rights reserved.
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
Lesson 7:
Developing Interactive
Forms with JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
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
The
form 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
Form
Validation
• 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
Lesson 8:
Cookies and
JavaScript Security
Copyright © 2002 ProsoftTraining. All rights reserved.
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
Lesson 9:
Controlling
Frames with JavaScript
Copyright © 2002 ProsoftTraining. All rights reserved.
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 JavaScript
with 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 Windows
with 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
Lesson 10:
Custom
JavaScript Objects
Copyright © 2002 ProsoftTraining. All rights reserved.
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