Title: New%20Perspectives%20on%20HTML,%20XHTML,%20and%20DHTML,%20Comprehensive
1Working with JavaScript
Tutorial 10
- Creating a Programmable Web Page for North Pole
Novelties
2Objectives
- Introducing JavaScript
- Inserting JavaScript into a Web Page File
- Writing Output to the Web Page
3Objectives
- Working with Variables and Data
- Working with Dates
- Working with Expressions and Operators
- Creating JavaScript Functions
- Creating the XmasDays Function
4Objectives
- Working with Conditional Statements
- Using Arrays
- Working with Program Loops
- Debugging Your JavaScript Programs
5Introduction 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
6The Development of JavaScript
- JavaScript is a subset of Java
- Differences between Java and JavaScript
- Java is a compiled language
- JavaScript is an interpreted language
7Comparing Java and JavaScript
8The 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
9Inserting 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
10Inserting 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)
11Writing 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
12Writing 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.
13Working 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)
14Working with Variables and Data
- JavaScript variable types
- Numeric variables
- String variables
- Boolean variables
- Null variables
- You must declare a variable before using it
15Working 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
16Declaring 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.
17Working with Dates
- Create a date object to store date information
Date Methods
18Working 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
19Working with Expressions and Operators
- The Math object is a JavaScript object used for
calculations other than simple math
20Creating 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
21Creating 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.
22Working 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
23Using 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
24Working 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
25Working with Program Loops
Creating a For loop
26Working with Program Loops
Nesting a For loop
27Working with Program Loops
Creating a While loop
28Working with Program Loops
Nesting a While loop
29Debugging 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)
30Common 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
31Debugging 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)
32Tips 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
33Tips 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