LIS 523 - JavaScript Lab

This lab will give you some hands-on experience with simple JavaScript.
  1. Run Notepad or another simple text editor. Create a basic HTML file containing the following code:
    <html>
    <head>
    </head>
    <body>
    <h1>LIS 523 JavaScript lab</h1>
    </body>
    </html>
    Preview the page in Internet Explorer.
  2. Insert the following JavaScript block just before </body>:
    <script language="JavaScript1.1">
    <!-- JavaScript begins...
    document.writeln("This part is generated by JavaScript.")
    // JavaScript ends -->
    </script>
    Also insert the following noscript element:
    <noscript>JavaScript needs to be enabled for this page to be displayed properly</noscript>
    Preview the page again in your browser, viewing it both with scripting enabled and with scripting disabled (remember to refresh after changing this setting).
  3. Insert the following in the JavaScript block to show the date and time that the page was last modified:
    document.writeln("<br>Last modified: ", document.lastModified)
    With scripting enabled, preview the results. If you also have another browser installed, preview in it also and note any difference in how the date is displayed.
  4. Insert the following to get and display today's date:
    today = new Date()
    document.writeln("<br>Viewed: ", today)
    Preview in Internet Explorer and any other browser that you have installed. Note the different formats used for the date and time, even by the same browser.
  5. To get the two browsers to display today's date in the same format, omitting the time information, substitute the following for the second line that you inserted in the previous step:
    document.writeln("<br>Today is ", today.getYear(), ".", today.getMonth()+1,".", today.getDate())
    Preview. Some browsers (e.g., Opera and older versions of Netscape) think that the year is somewhere in the second century AD. Correct the problem by using another variable and a condition as follows:
    thisYear = today.getYear()
    if (thisYear < 1900) {
    thisYear = thisYear+1900
    }
    document.writeln("<br>Today is ", thisYear, ".", today.getMonth()+1, ".", today.getDate())
  6. To get the month to display as a word, first insert the following array definition at the beginning of the script:
    months = new Array("Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec.")
    Then change the final statement to
    document.writeln("<br>Today is ", months[today.getMonth()], today.getDate(), ", ", thisYear, ".")
  7. To randomize the color of the first line displayed by JavaScript, first insert the following array definition at the beginning of the script:
    colors = new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet")
    Then change the first writeln statement to
    document.writeln("<font color='", colors[Math.floor(Math.random()*7)], "'>This part is generated by JavaScript.</font>")
    Preview the results. Try refreshing the page several times to see the different colors.
  8. To control an image, first download the files heads.gif and tails.gif from the course site. Then insert the following at the beginning of the script:
    images = new Array("heads.gif", "tails.gif")
    Further down in the script, insert the following to display a random image:
    document.writeln("<br><img src='", images[Math.floor(Math.random()*2)],"'>")

    Preview the results, refreshing the page several times to see the random image choice.
  9. To allow the image to respond to a mouse click, move the image reference outside of the script element and make it part of an anchor, as follows:
    <a href="javascript:flip()"><img name="img1" src="heads.gif"></a>
    (You need to use a function call here because some browsers tend to misbehave when presented with more complex JavaScript in HTML link attributes.) Now insert the definition of the function flip() in the script:
    function flip() {
     images = new Array("heads.gif", "tails.gif")
     document.img1.src = images[Math.floor(Math.random()*2)]
    }
    (The definition of the array images could be elsewhere in the script as far as Internet Explorer is concerned, but some browsers may require it to be here in the function.)

    Try clicking on the image in the page to see how a random selection is made.

  10. To introduce some animation, modify the flip() function as follows:
    function flip(n) {
     images = new Array("heads.gif", "tails.gif")
     document.img1.src = images[n-2*Math.floor(n/2)]
     if (n < 9) {
      setTimeout("flip("+(n+1)+")", 100)
     }
     else {
      document.img1.src = images[Math.floor(Math.random()*2)]
     }
    }
    To fit this new function definition, change the href value to "javascript:flip(0)".

    Preview the results.

Submit your final HTML file by e-mail.
Home

Last updated October 8, 2003.
This page maintained by Prof. Tim Craven
E-mail (text/plain only): craven@uwo.ca
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7