New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1
Working with JavaScript
Tutorial 10

• Creating a Programmable Web Page for North Pole
  Novelties

2
Objectives

• Introducing JavaScript
• Inserting JavaScript into a Web Page File
• Writing Output to the Web Page

3
Objectives

• Working with Variables and Data
• Working with Dates
• Working with Expressions and Operators
• Creating JavaScript Functions
• Creating the XmasDays Function

4
Objectives

• Working with Conditional Statements
• Using Arrays
• Working with Program Loops
• Debugging Your JavaScript Programs

5
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

6
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

7
Comparing Java and JavaScript
8
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

9
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

10
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 dont support scripts
  (or have their script support disabled)

11
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

12
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.

13
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)

14
Working with Variables and Data

• JavaScript variable types
• Numeric variables
• String variables
• Boolean variables
• Null variables
• You must declare a variable before using it

15
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

16
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.

17
Working with Dates

• Create a date object to store date information

Date Methods
18
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

19
Working with Expressions and Operators

• The Math object is a JavaScript object used for
  calculations other than simple math

20
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

21
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.

22
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

23
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

24
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

25
Working with Program Loops
Creating a For loop
26
Working with Program Loops
Nesting a For loop
27
Working with Program Loops
Creating a While loop
28
Working with Program Loops
Nesting a While loop
29
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)

30
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

31
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)

32
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

33
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