1 / 81

Project 8

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

morrison
Download Presentation

Project 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 8 Integrating JavaScriptwith HTML

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

  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. 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 arrowand then click 3½ Floppy (A:).Click the Project 8 folder, clickfun.htm and then point tothe open button

  9. Click the Open button

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

  11. Entering the Start <SCRIPT> Tag and Comment • Click the blank line (line 10) above the </BODY> tag

  12. Type <SCRIPT LANGUAGE = “JAVASCRIPT”> and then pressthe ENTER key. Type <!– Hidefrom old browsers and thenpress the ENTER key

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

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

  15. With the insertion pointon line 14, enter the fourremaining lines of code asshown on the next slide

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

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

  18. Saving the HTML File • Make sure the floppy disk is in drive A. Click File on the menu bar and then click Save As

  19. Type funwithphonics.htmin the File name text box, andthen double-click the Project 8folder. Point to the Save button

  20. Click the Save button

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

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

  23. JavaScript Variables

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

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

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

  27. 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 inMM/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)

  28. Extracting the System Date • Relative addressing

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

  30. 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)and then press the ENTER key

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

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

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

  34. Constructing a MessageUsing Several Variables • Type 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

  35. Constructing a MessageUsing Several Variables • Type var introMsg = intro1+intro2+intro3+intro4 and then press the ENTER key

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

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

More Related