1. HTML Comprehensive Concepts and Techniques Second Edition Project 8 Integrating JavaScript with HTML

2. 2 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

3. 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. 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. 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. 6

7. 7 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

8. 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. 9 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

10. 10 Click the Open button

11. 11

12. 12 Inserting Tags on a Web Page  JavaScript code can go anywhere in HTML  Place all JavaScript code between the and 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 <!– Hide from old browsers

13. 13 Entering the Start Tag and Comment  Click the blank line (line 10) above the tag

14. 14 Type and then press the ENTER key. Type <!– Hide from old browsers and then press the ENTER key

15. 15

16. 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. 17 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

18. 18 With the insertion point on line 14, enter the four remaining lines of code as shown on the next slide

19. 19

20. 20 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

21. 21

22. 22 Completing the JavaScript Selection  It is now necessary to end the comment tag and close the 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 and then press the ENTER key

23. 23

24. 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. 25 Type funwithphonics.htm in the File name text box, and then double-click the Project 8 folder. Point to the Save button

26. 26 Click the Save button

27. 27

28. 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. 29

30. 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. 31 JavaScript Variables

32. 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. 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. 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. 35

36. 36 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)

37. 37 Extracting the System Date  Relative addressing

38. 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.bgColor=“blanchedalmond” statement

39. 39 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

40. 40

41. 41 Displaying the Current System Date  Use plus signs (+) to concatenate (join) strings and variables

42. 42 Displaying the Current System Date in the Initial Greeting  Click line 22. Press the SPACEBAR four times. Type document.write(“ Welcome, today is “+tDate+” ”) and then press the ENTER key

43. 43

44. 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. 45 Constructing a Message Using Several Variables  Type var intro3 = “location. Click her e 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. 46 Constructing a Message Using Several Variables  Type var introMsg = intro1+intro2+intro3+intro4 and then press the ENTER key

47. 47

48. 48 Writing the Message on the Web Page  Click line 28. Press the SPACEBAR four times. Type document.write(“ ”+introMsg+ ” ”) and then press the ENTER key

49. 49

50. 50 Saving a File  With the HTML Data Disk in drive A, click File on the menu bar and then point to Save

51. 51 Click Save

52. 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. 53

54. 54 Activating the Notepad Window  Click the Notepad button on the taskbar to activate the Notepad window

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

57. 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. 58

59. 59 Displaying the Last Modified Document Date  If necessary, click line 30. Press the SPACEBAR four times  Type document.write(“ T his document was last modified “+document.lastModified+” ”) and then press the ENTER key

60. 60

61. 61 Writing a JavaScript User-Defined Function  A function is JavaScript code written to perform certain tasks repeatedly  Built-in functions

62. 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. 63

64. 64

65. 65 Entering the chngSite() User-Defined Function in the HEAD Section  Click the blank line (line 4) between the end tag and the end tag

66. 66 Type and then press the ENTER key. Type <!—Hide from old browsers and then press the ENTER key

67. 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 //-> and then press the ENTER key. Type and then press the ENTER key

68. 68

69. 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. 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. 71

72. 72

73. 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. 74 Click Print

75. 75

76. 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. 77 Summary  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

78. 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. 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. 80 What You Should Know

81. HTML Comprehensive Concepts and Techniques Second Edition Project 8 Complete