project 8
DESCRIPTION
Project 8. Integrating JavaScript with HTML. Objectives. Discuss how to integrate JavaScript with HTML Insert tags on a Web page Write start and end tags Define and use flickering to draw attention Describe the background color property of the document object. Objectives. - PowerPoint PPT PresentationTRANSCRIPT
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 8Integrating JavaScriptwith HTML
2
ObjectivesDiscuss how to integrate JavaScript
with HTMLInsert <SCRIPT> tags on a Web pageWrite start and end <SCRIPT> tagsDefine and use flickering to draw
attentionDescribe the background color
property of the document object
3
ObjectivesSet the background color of a Web
page using JavaScriptSave the HTML fileTest the Web pageDiscuss JavaScript variablesExtract the system dateUse several variables to construct a
message
4
ObjectivesDescribe the write() method of the document
objectWrite a user-defined function that displays a
message and links visitors to a new Web siteDescribe how the setTimeout() method
worksUse the lastModified property to display the
last modified document datePrint an HTML Notepad file
5
IntroductionJavaScript is an object-based
language– Uses built-in objects
Properties are attributes of objectsMethods are actions performed on an
object
7
IntroductionAn event is the result of a user’s actionEvent handlers are the way to
associate that action with the set of JavaScript codes you want executed
8
Opening a Web PageInsert 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
9
Click the Look in box arrowand then click 3½ Floppy (A:).Click the Project 8 folder, clickfun.htm and then point to
the open button
12
Inserting <SCRIPT> Tags on a Web PageJavaScript code can go anywhere in HTMLPlace all JavaScript code between the
<SCRIPT> and </SCRIPT> tagsSet the LANGUAGE attribute so the browser
knows how to interpret your codeThe HTML comment line hides any script
language the browser might not be able to interpret
<SCRIPT LANGUAGE=“JAVASCRIPT”><!– Hide from old browsers
13
Entering the Start <SCRIPT> Tag and CommentClick the blank line (line 10) above the
</BODY> tag
14
Type <SCRIPT LANGUAGE = “JAVASCRIPT”> and then pressthe ENTER key. Type <!– Hidefrom old browsers and then
press the ENTER key
16
Using a Flicker on a Web PageChanges the background color in rapid
successionJavaScript allows you to set the
background color multiple times, while HTML only allows you to set it once (in the BODY tag)
17
Creating Flicker on the Web PageClick 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
18
With the insertion pointon line 14, enter the four
remaining lines of code asshown on the next slide
20
Setting the Background Color to a Static ColorThe last color you specify will be the
browser’s final background colorWith the insertion point on line 18, type document.bgColor=“blanchedalmond” and then press the ENTER key
22
Completing the JavaScript SelectionIt is now necessary to end the comment
tag and close the <SCRIPT> tagIf necessary, click line 19. Press the
ENTER key to create another blank lineWith the insertion point on line 20,
type //-> and then press the ENTER key. Type </SCRIPT> and then press the ENTER key
24
Saving the HTML FileMake sure the floppy disk is in drive A.
Click File on the menu bar and then click Save As
25
Type funwithphonics.htmin the File name text box, andthen double-click the Project 8
folder. Point to the Save button
28
Testing the Web PageStart your browserClick the Address bar. Type a:\Project 8\funwithphonics.htm and then press the ENTER key
30
JavaScript VariablesUsed to store values temporarilyGlobal variablesLocal variablesVariables are considered global,
except if they are declared in a user-defined function, in which case they are local
32
JavaScript VariablesJavaScript 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
33
Extracting the System DateBuilt-in Date() object
– Can be manipulated only by creating a new object instance
var variable = new objectvar 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
34
Extracting the System DateThe variable curDate cannot be
manipulatedTo extract the date, convert curDate to
a string using the toLocaleString() and substring methods
36
Extracting the System DateDefine a new object for the date in
MM/DD/YY HH:MM:SS formatvar 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)
38
Extracting the Current System Date Using the Date() ObjectClick the Notepad button on the
taskbar to activate the Notepad window. Click line 19 below the document.bgColor=“blanchedalmond” statement
39
Type var tNow = new Date() and thenpress 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
41
Displaying the Current System Date
Use plus signs (+) to concatenate (join) strings and variables
42
Displaying the Current System Date in the Initial GreetingClick line 22. Press the SPACEBAR
four times. Type document.write(“<H2><CENTER>Welcome, today is “+tDate+”</CENTER></H2>”) and then press the ENTER key
44
Constructing a Message Using Several VariablesClick 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
45
Constructing a MessageUsing Several VariablesType var intro3 = “location. Click<A Href=‘http://www.scsite.com/’>here</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
46
Constructing a MessageUsing Several VariablesType var introMsg = intro1+intro2+intro3+intro4 and then press the ENTER key
48
Writing the Message on the Web PageClick line 28. Press the SPACEBAR
four times. Type document.write(“<H4><FONT Color=‘firebrick’>”+introMsg+”</H4></FONT>”) and then press the ENTER key
50
Saving a FileWith the HTML Data Disk in drive A,
click File on the menu bar and then point to Save
52
Testing the Web Page in the BrowserClick the Fun with Phonics button on
the taskbar to activate the browser. Click the Refresh button on the browser toolbar
54
Activating the Notepad WindowClick the Notepad button on the
taskbar to activate the Notepad window
55
Calling a JavaScript FunctionTwo basic methods to call a function
– Event handlers and object methods– Code the function name in a JavaScript
section at the logical point of executionsetTimeout() method
– Causes a delay before an instruction is executed
57
Writing the setTimeout() Method to Execute the chngSite() FunctionIf necessary, click line 29. Press the
SPACEBAR four timesType setTimeout(“chngSite()”, 15000) and then press the ENTER key
59
Displaying the Last Modified Document DateIf necessary, click line 30. Press the
SPACEBAR four timesType document.write(“<BR><H4><CENTER>This document was last modified “+document.lastModified+”</CENTER></H4>”) and then press the ENTER key
61
Writing a JavaScript User-Defined FunctionA function is
JavaScript code written to perform certain tasks repeatedly
Built-in functions
62
Writing a JavaScript User-Defined FunctionUser-defined functions
– Written by the Web developerFunctions can have data passed to itTo call a function means to have
JavaScript execute the function
65
Entering the chngSite() User-Defined Function in the HEAD SectionClick the blank line (line 4) between the
end </TITLE> tag and the end </HEAD> tag
66
Type <SCRIPT LANGUAGE=“JAVASCRIPT””>and then press the ENTER key. Type
<!—Hide from old browsers and thenpress the ENTER key
67
Entering the chngSite() User-Defined Function in the HEAD SectionPress 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
69
Saving the File on the Floppy DiskWith the HTML Data Disk in drive A,
click File on the menu barClick Save on the File menu
70
Testing the Web PageClick the Fun with Phonics button on the
taskbarClick the Refresh button on the browser
toolbarIf 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
73
Printing the HTML File Using NotepadIf necessary, click the Notepad button
on the taskbar. Click File on the menu bar and then point to Print
76
Closing Notepad and Your BrowserClick the Close button on the browser
title barClick the Close button on the Notepad
window title bar
77
SummaryDiscuss how to integrate JavaScript
with HTMLInsert <SCRIPT> tags on a Web pageWrite start and end <SCRIPT> tagsDefine and use flickering to draw
attentionDescribe the background color
property of the document object
78
SummarySet the background color of a Web
page using JavaScriptSave the HTML fileTest the Web pageDiscuss JavaScript variablesExtract the system dateUse several variables to construct a
message
79
SummaryDescribe the write() method of the document
objectWrite a user-defined function that displays a
message and links visitors to a new Web siteDescribe how the setTimeout() method
worksUse the lastModified property to display the
last modified document datePrint an HTML Notepad file
