XP
Tutorial 10
Working with JavaScript
Creating a Programmable Web Page for North Pole
Novelties
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
1
XP
Objectives
• Introducing JavaScript
• Inserting JavaScript into a Web Page File
• Writing Output to the Web Page
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
2
XP
Objectives
•
•
•
•
•
Working with Variables and Data
Working with Dates
Working with Expressions and Operators
Creating JavaScript Functions
Creating the XmasDays Function
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
3
XP
Objectives
•
•
•
•
Working with Conditional Statements
Using Arrays
Working with Program Loops
Debugging Your JavaScript Programs
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
4
XP
Introduction to JavaScript
• Server-side Programs pose problems
• Client-side Programs were developed to
run programs and scripts on the client side
of a Web browser
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
5
XP
The Development of JavaScript
• JavaScript is a subset of Java
• Differences between Java and JavaScript:
– Java is a compiled language
– JavaScript is an interpreted language
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
6
XP
Comparing Java and JavaScript
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
7
XP
The Development of JavaScript
• Jscript is a version of JavaScript supported
by Internet Explorer
• The European Computer Manufacturers
Association (ECMA) develops scripting
standards
– The standard is called ECMAScript but browsers
still generally call is JavaScript
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
8
Inserting JavaScript into a WebXP
Page File
• Outline the main tasks you want the program
to perform first
• A JavaScript program can either be placed
directly in a Web page file or saved in an
external text file
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
9
Inserting JavaScript into a WebXP
Page File
• Insert a client-side script in a Web page when
using the script element
• Comments are useful for hiding scripts from
older browsers
• Specify alternative content using the
nonscript element for browsers that don’t
support scripts (or have their script support
disabled)
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
10
XP
Writing Output to the Web Page
• An object-oriented programming language
writes the output by manipulating tasks
• An action you perform on an object is called a
method
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
11
XP
Writing Output to the Web Page
• To write text to a Web page, use the following
JavaScript commands:
document.write(“text”);
or
document.writeln(“text”)’
Where text is the content to be written to the page. The
doucment.write() and document.writeln() methods are identical,
except that the document.writeln() method preserves any line
breaks in the text string.
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
12
XP
Working with Variables and Data
• A variable is a named item in a program that
stores information
• Variable names have restrictions (see pages
HTML 531-532)
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
13
XP
Working with Variables and Data
• JavaScript variable types:
–
–
–
–
Numeric variables
String variables
Boolean variables
Null variables
• You must declare a variable before using it
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
14
XP
Working with Variables and Data
• Numeric variable- any number, such as 13, 22.5, etc
– Can also be expressed in scientific notation
• String variable- any group of text characters, such
as “Hello” or “Happy Holidays!”
– Must be enclosed within either double or single quotations
(but not both)
• Boolean variable- accepts only true and false values
• Null variable- has no value at all
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
15
XP
Declaring a JavaScript Variable
• You can declare variables with any of the following
JavaScript commands:
var variable;
var variable = value;
variable = value;
Where variable is the name of the variable and value is the
initial value of the variable. The first command creates the
variable without assigning it a value; the second and third
commands both create the variable and assign it a value.
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
16
XP
Working with Dates
• Create a date object to store date information
Date Methods
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
17
Working with Expressions andXP
Operators
• Expressions are JavaScript commands that assign
values and variables
• Operators are elements that perform actions within
expressions
– Arithmetic operators: perform simple mathematical
calculations
– Binary operators: work on two elements in an expression
– Unary operators: work on only one variable
– Increment operators: can be used to increase the value of a
variable by 1
– Assignment operators: used to assign values in expressions
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
18
Working with Expressions andXP
Operators
• The Math object is a JavaScript object used for
calculations other than simple math
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
19
XP
Creating JavaScript Functions
• A function is a series of commands that
perform an action or calculates a value
• A function name identifies a function
• Parameters are values used by the function
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
20
XP
Creating JavaScript Functions
• A group of commands set off by curly braces
is called a command block. Command
blocks exist for other JavaScript structures in
addition to functions.
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
21
Working with Conditional
Statements
XP
• Conditional statements are commands that
run only when specific conditions are met
• Conditional statements require a Boolean
expression
– you need one of the following operators to create
a Boolean expression:
• Comparison operator
• Logical operator
• Conditional operator
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
22
XP
Using Arrays
• An array is an ordered collection of values
referenced by a single variable name
var variable = new Array (size);
Where variable is the name of the array variable and
size is the number of elements in the array
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
23
XP
Working with Program Loops
• A program loop is a set of instructions that is
executed repeatedly
– Use program loops to configure a group of
commands to be executed a set number of times
– The loop uses a counter to track the number of
times the command block has been run
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
24
XP
Working with Program Loops
Creating a For loop
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
25
XP
Working with Program Loops
Nesting a For loop
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
26
XP
Working with Program Loops
Creating a While loop
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
27
XP
Working with Program Loops
Nesting a While loop
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
28
XP
Debugging Your JavaScript
Programs
• Three types of errors:
– Load-time errors (occurs when the script is
loading)
– Run-time errors (occurs when the being executed)
– Logical errors (free from syntax and structural
mistakes, but result in incorrect results)
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
29
XP
Common Mistakes
• You need to debug your program to fix the
mistakes
• Common mistakes include:
–
–
–
–
–
–
Tutorial 10
Misspelling a variable name
Mismatched parentheses or braces
Mismatched quotes
Missing quotes
Using ( instead of [
Using = in place of ==
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
30
XP
Debugging Tools and Techniques
• To avoid making mistakes and quickly located
those you do make:
– Write modular code
– Use the Microsoft Script Debugger to debug (for
use with Internet Explorer)
– Use the Netscape JavaScript Console to debug
(for use with Netscape)
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
31
XP
Tips for Writing Good JavaScript
Code
• Use good layout to make your code more
readable. Indent command blocks to make
them easier to read and to set them off from
other code
• Use descriptive variable names to indicate
the purpose of your variables
• Be careful how you use uppercase and
lowercase letters in your code, because
JavaScript commands and names are casesensitive
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
32
XP
Tips for Writing Good JavaScript
Code
• Add comments to your code to document the
purpose of each script
• Initialize all variables at the top of your script
and insert comments describing the purpose
and nature of your variables
• Create customized functions that can be
reused in different scripts. Place your
customized functions in external files to make
them available to your entire Web site
Tutorial 10
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
33