Transcript Java Script Project 8 Power Point

HTML
Comprehensive Concepts and Techniques
Second Edition
Project 8
Integrating JavaScript
with HTML
Objectives
Discuss how to integrate JavaScript
with HTML
Insert <SCRIPT> tags on a Web page
Write start and end <SCRIPT> tags
Define and use flickering to draw
attention
Describe the background color
property of the document object
2
Objectives
Set the background color of a Web
page using JavaScript
Save the HTML file
Test the Web page
Discuss JavaScript variables
Extract the system date
Use several variables to construct a
message
3
Objectives
Describe the write() method of the document
object
Write a user-defined function that displays a
message and links visitors to a new Web site
Describe how the setTimeout() method
works
Use the lastModified property to display the
last modified document date
Print an HTML Notepad file
4
Introduction
JavaScript is an object-based
language
– Uses built-in objects
Properties are attributes of objects
Methods are actions performed on an
object
5
6
Introduction
An event is the result of a user’s action
Event handlers are the way to
associate that action with the set of
JavaScript codes you want executed
7
Opening a Web Page
Insert the HTML Data Disk in drive A.
Start Notepad, and maximize the
window. Click File on the menu bar
and then click Open. When the Open
dialog box displays, type *.htm in the
File name text box
8
Click the Look in box arrow
and then click 3½ Floppy (A:).
Click the Project 8 folder, click
fun.htm and then point to
the open button
9
Click the Open button
10
11
Inserting <SCRIPT> Tags
on a Web Page
JavaScript code can go anywhere in HTML
Place all JavaScript code between the
<SCRIPT> and </SCRIPT> tags
Set the LANGUAGE attribute so the browser
knows how to interpret your code
The HTML comment line hides any script
language the browser might not be able to
interpret
<SCRIPT LANGUAGE=“JAVASCRIPT”>
<!– Hide from old browsers
12
Entering the Start <SCRIPT>
Tag and Comment
Click the blank line (line 10) above the
</BODY> tag
13
Type <SCRIPT LANGUAGE =
“JAVASCRIPT”> and then press
the ENTER key. Type <!– Hide
from old browsers and then
press the ENTER key
14
15
Using a Flicker on a Web Page
Changes the background color in rapid
succession
JavaScript allows you to set the
background color multiple times, while
HTML only allows you to set it once (in
the BODY tag)
16
Creating Flicker on the Web Page
Click line 12. Press the SPACEBAR
four times. Type
document.bgColor=“red” and then
press the ENTER key. Type
document.bgColor=“white” and
then press the ENTER key
17
With the insertion point
on line 14, enter the four
remaining lines of code as
shown on the next slide
18
19
Setting the Background Color
to a Static Color
The last color you specify will be the
browser’s final background color
With the insertion point on line 18, type
document.bgColor=“blanchedalmond”
and then press the ENTER key
20
21
Completing the
JavaScript Selection
It is now necessary to end the comment
tag and close the <SCRIPT> tag
If necessary, click line 19. Press the
ENTER key to create another blank line
With the insertion point on line 20, type
//-> and then press the ENTER key.
Type </SCRIPT> and then press the
ENTER key
22
23
Saving the HTML File
Make sure the floppy disk is in drive A.
Click File on the menu bar and then
click Save As
24
Type funwithphonics.htm
in the File name text box, and
then double-click the Project 8
folder. Point to the Save button
25
Click the Save button
26
27
Testing the Web Page
Start your browser
Click the Address bar. Type
a:\Project 8\funwithphonics.htm
and then press the ENTER key
28
29
JavaScript Variables
Used to store values temporarily
Global variables
Local variables
Variables are considered global, except
if they are declared in a user-defined
function, in which case they are local
30
JavaScript Variables
31
JavaScript Variables
JavaScript variables are loosely typed
– You are not required to define the data
type
– JavaScript defines the data type for you
• String data types
– var LastName = “Simon”
• Numeric data types
– var pageCnt = 1
• Boolean data types
– var Done = false
32
Extracting the System Date
Built-in Date() object
– Can be manipulated only by creating a
new object instance
var variable = new object
var birthDay = Date(“Jul, 13,
1975”)
– Returns July 13, 1975 to birthDay
var curDate = new Date()
– Returns the current system date and time
information as an object instance
33
Extracting the System Date
The variable curDate cannot be
manipulated
To extract the date, convert curDate to
a string using the toLocaleString() and
substring methods
34
35
Extracting the System Date
Define a new object for the date in
MM/DD/YY HH:MM:SS format
var tNow = new Date()
Extract the date and time and store it in
MM/DD/YY HH:MM:SS format
var tlocDate = tNow.toLocaleString()
Extract only the date portion from the
tlocDate variable using relative addressing
var tDate = tlocDate.substring(0,10)
36
Extracting the System Date
Relative addressing
37
Extracting the Current System Date
Using the Date() Object
Click the Notepad button on the
taskbar to activate the Notepad
window. Click line 19 below the
document.bgColor=“blanchedalmond”
statement
38
Type var tNow = new Date() and then
press the ENTER key. Type
var tlocDate = tNow.toLocaleString()
and then press the ENTER key. Type
var tDate = tlocDate.substring(0,10)
and then press the ENTER key
39
40
Displaying the Current System Date
Use plus signs (+) to concatenate (join)
strings and variables
41
Displaying the Current System Date
in the Initial Greeting
Click line 22. Press the SPACEBAR
four times. Type
document.write(“<H2><CENTER>
Welcome, today is
“+tDate+”</CENTER></H2>”) and
then press the ENTER key
42
43
Constructing a Message
Using Several Variables
Click line 23. Type var intro1 = “Hi,
thanks for visiting our Web site,
but we have moved. Please make a
note “ and then press the ENTER key
Type var intro2 = “of our new URL
(www.funphonics.com) and notify
the Webmaster about our new “ and
then press the ENTER key
44
Constructing a Message
Using Several Variables
Type var intro3 = “location.
Click<A
Href=‘http://www.scsite.com/’>her
e</A> or wait 15 seconds “ and
then press the ENTER key
Type var intro4 = “to be moved
automatically to our new site.”
and then press the ENTER key
45
Constructing a Message
Using Several Variables
Type var introMsg =
intro1+intro2+intro3+intro4
and then press the ENTER key
46
47
Writing the Message
on the Web Page
Click line 28. Press the SPACEBAR
four times. Type
document.write(“<H4><FONT
Color=‘firebrick’>”+introMsg+
”</H4></FONT>”) and then press
the ENTER key
48
49
Saving a File
With the HTML Data Disk in drive A,
click File on the menu bar and then
point to Save
50
Click Save
51
Testing the Web Page
in the Browser
Click the Fun with Phonics button on
the taskbar to activate the browser.
Click the Refresh button on the
browser toolbar
52
53
Activating the Notepad Window
Click the Notepad button on the
taskbar to activate the Notepad window
54
Calling a JavaScript Function
Two basic methods to call a function
– Event handlers and object methods
– Code the function name in a JavaScript
section at the logical point of execution
setTimeout() method
– Causes a delay before an instruction is
executed
55
Calling a JavaScript Function
56
Writing the setTimeout() Method to
Execute the chngSite() Function
If necessary, click line 29. Press the
SPACEBAR four times
Type setTimeout(“chngSite()”,
15000) and then press the ENTER
key
57
58
Displaying the
Last Modified Document Date
If necessary, click line 30. Press the
SPACEBAR four times
Type
document.write(“<BR><H4><CENTER>T
his document was last modified
“+document.lastModified+”</CENTER
></H4>”) and then press the ENTER
key
59
60
Writing a JavaScript
User-Defined Function
A function is
JavaScript code
written to perform
certain tasks
repeatedly
Built-in functions
61
Writing a JavaScript
User-Defined Function
User-defined functions
– Written by the Web developer
Functions can have data passed to it
To call a function means to have
JavaScript execute the function
62
63
64
Entering the chngSite() User-Defined
Function in the HEAD Section
Click the blank line (line 4) between the
end </TITLE> tag and the end
</HEAD> tag
65
Type <SCRIPT LANGUAGE=“JAVASCRIPT””>
and then press the ENTER key. Type
<!—Hide from old browsers and then
press the ENTER key
66
Entering the chngSite() User-Defined
Function in the HEAD Section
 Press the SPACEBAR four times. Type
function chngSite() { and then press the
ENTER key. Press the SPACEBAR eight times.
Type alert(“You are about to be
transported to the new site
location!”) and then press the ENTER key.
Press the SPACEBAR eight times. Type
location = “http://www.scsite.com/”
and then press the ENTER key. Press the
SPACEBAR four times. Type } and then press
the ENTER key. Type //-> and then press the
ENTER key. Type </SCRIPT> and then press
the ENTER key
67
68
Saving the File on the Floppy Disk
With the HTML Data Disk in drive A,
click File on the menu bar
Click Save on the File menu
69
Testing the Web Page
Click the Fun with Phonics button on the
taskbar
Click the Refresh button on the browser
toolbar
If you are connected to the Internet, click the
OK button when the dialog box displays with
the alert message
Click the Back button on the browser toolbar
to return to the Fun with Phonics Web page
70
71
72
Printing the HTML File
Using Notepad
If necessary, click the Notepad button
on the taskbar. Click File on the menu
bar and then point to Print
73
Click Print
74
75
Closing Notepad and Your Browser
Click the Close button on the browser
title bar
Click the Close button on the Notepad
window title bar
76
Summary
Discuss how to integrate JavaScript
with HTML
Insert <SCRIPT> tags on a Web page
Write start and end <SCRIPT> tags
Define and use flickering to draw
attention
Describe the background color
property of the document object
77
Summary
Set the background color of a Web
page using JavaScript
Save the HTML file
Test the Web page
Discuss JavaScript variables
Extract the system date
Use several variables to construct a
message
78
Summary
Describe the write() method of the document
object
Write a user-defined function that displays a
message and links visitors to a new Web site
Describe how the setTimeout() method
works
Use the lastModified property to display the
last modified document date
Print an HTML Notepad file
79
What You Should Know
80
HTML
Comprehensive Concepts and Techniques
Second Edition
Project 8 Complete