Project 8

1
Project 8

• Integrating JavaScriptwith HTML

2
Objectives

• Discuss how to integrate JavaScript with HTML
• Insert ltSCRIPTgt tags on a Web page
• Write start and end ltSCRIPTgt tags
• Define and use flickering to draw attention
• Describe the background color property of the
  document object

3
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

4
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

5
Introduction

• JavaScript is an object-based language
• Uses built-in objects
• Properties are attributes of objects
• Methods are actions performed on an object

6
(No Transcript)
7
Introduction

• An event is the result of a users action
• Event handlers are the way to associate that
  action with the set of JavaScript codes you want
  executed

8
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

9
Click the Look in box arrowand then click 3½
Floppy (A).Click the Project 8 folder,
clickfun.htm and then point tothe open button
10
Click the Open button
11
(No Transcript)
12
Inserting ltSCRIPTgt Tags on a Web Page

• JavaScript code can go anywhere in HTML
• Place all JavaScript code between the ltSCRIPTgt
  and lt/SCRIPTgt 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
• ltSCRIPT LANGUAGEJAVASCRIPTgt
• lt! Hide from old browsers

13
Entering the Start ltSCRIPTgt Tag and Comment

• Click the blank line (line 10) above the lt/BODYgt
  tag

14
Type ltSCRIPT LANGUAGE JAVASCRIPTgt and then
pressthe ENTER key. Type lt! Hidefrom old
browsers and thenpress the ENTER key
15
(No Transcript)
16
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)

17
Creating Flicker on the Web Page

• Click line 12. Press the SPACEBAR four times.
  Type document.bgColorred and then press the
  ENTER key. Type document.bgColorwhite and
  then press the ENTER key

18
With the insertion pointon line 14, enter the
fourremaining lines of code asshown on the next
slide
19
(No Transcript)
20
Setting the Background Color to a Static Color

• The last color you specify will be the browsers
  final background color
• With the insertion point on line 18, type
  document.bgColorblanchedalmond and then press
  the ENTER key

21
(No Transcript)
22
Completing the JavaScript Selection

• It is now necessary to end the comment tag and
  close the ltSCRIPTgt tag
• If necessary, click line 19. Press the ENTER key
  to create another blank line
• With the insertion point on line 20, type //-gt
  and then press the ENTER key. Type lt/SCRIPTgt and
  then press the ENTER key

23
(No Transcript)
24
Saving the HTML File

• Make 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 8folder.
Point to the Save button
26
Click the Save button
27
(No Transcript)
28
Testing the Web Page

• Start your browser
• Click the Address bar. Type a\Project
  8\funwithphonics.htm and then press the ENTER key

29
(No Transcript)
30
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

31
JavaScript Variables
32
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

33
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

34
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

35
(No Transcript)
36
Extracting the System Date

• Define a new object for the date in MM/DD/YY
  HHMMSS format
• var tNow new Date()
• Extract the date and time and store it in
  MM/DD/YY HHMMSS 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 Date

• Relative addressing

38
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.bgColorblanchedalmond statement

39
Type var tNow new Date() and thenpress the
ENTER key. Typevar tlocDate
tNow.toLocaleString()and then press the ENTER
key. Typevar tDate tlocDate.substring(0,10)an
d then press the ENTER key
40
(No Transcript)
41
Displaying the Current System Date

• Use plus signs () to concatenate (join) strings
  and variables

42
Displaying the Current System Date in the Initial
Greeting

• Click line 22. Press the SPACEBAR four times.
  Type document.write(ltH2gtltCENTERgtWelcome, today
  is tDatelt/CENTERgtlt/H2gt) and then press the
  ENTER key

43
(No Transcript)
44
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

45
Constructing a MessageUsing Several Variables

• Type var intro3 location. ClickltA
  Hrefhttp//www.scsite.com/gtherelt/Agt 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 Variables

• Type var introMsg intro1intro2intro3intro4
  and then press the ENTER key

47
(No Transcript)
48
Writing the Message on the Web Page

• Click line 28. Press the SPACEBAR four times.
  Type document.write(ltH4gtltFONT Colorfirebrickgt
  introMsglt/H4gtlt/FONTgt) and then press the
  ENTER key

49
(No Transcript)
50
Saving a File

• With 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 Browser

• Click the Fun with Phonics button on the taskbar
  to activate the browser. Click the Refresh
  button on the browser toolbar

53
(No Transcript)
54
Activating the Notepad Window

• Click the Notepad button on the taskbar to
  activate the Notepad window

55
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

56
Calling a JavaScript Function
57
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

58
(No Transcript)
59
Displaying the Last Modified Document Date

• If necessary, click line 30. Press the SPACEBAR
  four times
• Type document.write(ltBRgtltH4gtltCENTERgtThis
  document was last modified document.lastModified
  lt/CENTERgtlt/H4gt) and then press the ENTER key

60
(No Transcript)
61
Writing a JavaScript User-Defined Function

• A function is JavaScript code written to perform
  certain tasks repeatedly
• Built-in functions

62
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

63
(No Transcript)
64
(No Transcript)
65
Entering the chngSite() User-Defined Function in
the HEAD Section

• Click the blank line (line 4) between the end
  lt/TITLEgt tag and the end lt/HEADgt tag

66
Type ltSCRIPT LANGUAGEJAVASCRIPTgtand then
press the ENTER key. Typelt!Hide from old
browsers and thenpress the ENTER key
67
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 //-gt and then
  press the ENTER key. Type lt/SCRIPTgt and then
  press the ENTER key

68
(No Transcript)
69
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

70
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

71
(No Transcript)
72
(No Transcript)
73
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

74
Click Print
75
(No Transcript)
76
Closing Notepad and Your Browser

• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
  title bar

77
Summary

• Discuss how to integrate JavaScript with HTML
• Insert ltSCRIPTgt tags on a Web page
• Write start and end ltSCRIPTgt tags
• Define and use flickering to draw attention
• Describe the background color property of the
  document object

78
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

79
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

80
What You Should Know
81
Project 8 Complete