Working with JavaScript
Objectives
•
•
•
•
•
•
•
•
•
•
•
Introducing JavaScript
Inserting JavaScript into a Web Page File
Writing Output to the Web Page
Working with Variables and Data
Working with Dates
Working with Expressions and Operators
Creating JavaScript Functions
Working with Conditional Statements
Using Arrays
Working with Program Loops
Debugging Your JavaScript Programs
2
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
3
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
4
Comparing Java and JavaScript
5
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
6
Inserting JavaScript into a Web
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
7
Inserting JavaScript into a Web
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)
8
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
9
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.
10
Working with Variables and
Data
• A variable is a named item in a program
that stores information
• Variable names have restrictions.
11
Working with Variables and
Data
• JavaScript variable types:
– Numeric variables
– String variables
– Boolean variables
– Null variables
• You must declare a variable before using
it
12
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
13
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.
14
Working with Dates
• Create a date object to store date information
Date Methods
15
Working with Expressions and
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
16
Working with Expressions and
Operators
• The Math object is a JavaScript object
used for calculations other than simple
math
17
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
18
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.
19
Working with Conditional
Statements
• 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
20
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
21
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
22
Working with Program Loops
Creating a For loop
23
Working with Program Loops
Nesting a For loop
24
Working with Program Loops
Creating a While loop
25
Working with Program Loops
Nesting a While loop
26
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)
27
Common Mistakes
• You need to debug your program to fix the
mistakes
• Common mistakes include:
– Misspelling a variable name
– Mismatched parentheses or braces
– Mismatched quotes
– Missing quotes
– Using ( instead of [
– Using = in place of ==
28
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)
29
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
case-sensitive
30
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
31
site