Transcript Lesson 6 Introducing JavaScript

Lesson 6
Introducing JavaScript
HTML and JavaScript
BASICS, 4th Edition
1
Objectives


Lesson 6

2


Display Web page text with JavaScript.
Use HTML formatting tags both in and around
JavaScript code.
Create conditional statements with JavaScript.
Use the JavaScript alert() method.
Access the browser status line with
JavaScript.
Enhancing Your Web Page
Lesson 6

3
The document.write() method simply inserts
a string of characters into the standard HTML
text stream.
<script language="javascript">
function hello()
{
document.write("<h1>Hello World</h1>");
}
</script>
Creating Conditional Statements
in JavaScript

Lesson 6

4

The conditional statement gives
programmers the ability to evaluate a specific
condition and then perform different actions
depending on the results of that evaluation.
A keyword is recognized as part of the
language definition.
A variable is a user-defined name for a
memory location whose value can change
over time.
Creating Conditional Statements
in JavaScript (continued)

Lesson 6

5
The JavaScript if statement also supports an
optional else clause, which defines the action
to take if the specified condition is not true.
A JavaScript condition will always consist of
two tokens separated by a relational
operator. A token can either be a variable
name (such as x or count) or a literal constant
(such as 10 or “hello”).
Creating Conditional Statements
in JavaScript (continued)
Lesson 6

6
Relational Operators
Using the JavaScript alert()
Method

Lesson 6

7
The alert() method allows a JavaScript
program to display a special dialog box that
notifies the user of an unexpected event or
that some sort of user action is required.
The window object is considered to be the
JavaScript default object, which means it is
not necessary to use its name explicitly.
Accessing the Browser Status
Line
The graphic below shows both a status line and an
alert message.
Lesson 6

Web page viewed with Internet Explorer 8
8
Making Graphic Images Come
Alive

A function is a segment of JavaScript code
that can be invoked or called.
Lesson 6
–
9

Methods and functions are the same, except that
methods have been defined as part of the objects
that make up the JavaScript programming
environment.
Calling a function from a hyperlink
<a href="javascript:doBack()">Back</a>
Making Graphic Images Come
Alive (continued)


Teaching an Image to Roll Over:
An image rollover changes the appearance
of an image when a visitor moves the mouse
pointer over the image.
Lesson 6
–
10
–
The onMouseOver event is generated when the
mouse pointer is over a particular object.
The onMouseOut event is generated when the
user moves the mouse pointer off of the object.
Teaching a Hyperlink to Roll Over

A hyperlink rollover is triggered when the
user moves the mouse pointer over a
hyperlink.
Lesson 6
–
11
The code for an image rollover and a hyperlink
rollover are very similar.
Teaching a Hyperlink to Roll Over
(continued)
Lesson 6

12
The graphic to the
right shows
JavaScript events.
Advanced JavaScript
Programming
A Web page that contains a frameset includes
a file that defines the frameset and two or
more additional files that define the frames
within that frameset.
Lesson 6

Frame-based Web page
13
Advanced JavaScript
Programming (continued)
Lesson 6

14
The frameset file is known as the parent
document, and the frame files contained
within the frameset are known as child
documents.
Adding JavaScript Code to Your
Frameset

Lesson 6

15

All JavaScript function definitions include a
parameter list, which is a list of data items
that the function needs to perform its intended
action.
A function parameter is simply an object or
data element that is accessed by an assigned
name within the function.
A parent object is a reserved word in
JavaScript that refers to the parent frameset.
Adding JavaScript Code to Your
Frameset (continued)
By using the JavaScript function parameter to
distinguish one hyperlink from another, it is
not necessary to define a function for each
hyperlink.
Lesson 6

16
Web page with functional hyperlinks