project 8

Post on 25-Feb-2016

26 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

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 Presentation

TRANSCRIPT

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

10

Click 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

26

Click 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

31

JavaScript Variables

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)

37

Extracting the System DateRelative addressing

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

51

Click 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

56

Calling a JavaScript Function

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

74

Click 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

80

What You Should Know

HTMLComprehensive Concepts and TechniquesSecond Edition

Project 8 Complete

top related