Guide to HTML, CSS and JavsScript (University at Buffalo Version)


Chapter 10: Creating a JavaScript Web Page

When you create a web page made up of HTML and CSS you are creating a rather *static* web page. Quite often though you will need to add features to you web page to make it a little more dynamic, such as form validation, data manipulation, or something simply like displaying the current date. JavaScript is a coding language that can be either embedded right inside your HTML code or included using the <link> tag to reference an external JavaScript (*.js*) file.

For example, if you want to include the current date you could use this line in the <body> area of your HTML code:

<script>
  document.write("<span style=font-size: 6pt;>" + Date());
</script>

Figure 10-1: HTML <script> Tag

Another, better, way to do this would be to define an identifier and use JavaScript to update that container with the current date:

<p id="currentDate"></p>
<script>
  document.getElementById("currentDate").innerText = (new Date()).toDateString();
</script>

Figure 10-2: Modify Page with JavaScript

JavaScript Comments

Adding comments to your code can help you remember what your code is doing at that statement and will also help others who may need to maintain your code in the future.

JavaScript has two (2) different comment statements. The /* */ can be used to have multiple lines. For example,

/*
Assignment: Form Web Page
Author: Your Name Here
Date: Month Day, Year file was last edited
Editor: Notepad++ or TextWrangler or whatever editor you used
*/


Figure 10-3: Multi-line JavaScript Comments

The // can be used for an inline or single line comment:

var i; // Declare a variable named i to be used in a for loop
for (i = 0; i < 12; i++) {
  docment.write("i = " + i + "<br>\n");
}

Figure 10-4: Inline JavaScript Comments

You can also create an external file to store your JavaScript functions, for example: *myFunctons.js*. This is especially useful if you want to use that same JavaScript in multiple web pages. For an external JavaScript file you would add this <script> tag to the <head></head> area of your HTML file:

<script src="myFunctions.js"></script>

For more information about JavaScript use your favorite search engine (Bing, Google, Yahoo, etc.) and search for:

javascript tutorials for beginners

Task - Create a JavaScript Web Page

For this task you will create a new web page file just as you did in previous tasks. This web page should use JavaScript functions to include the following:

  1. Display the current date
    • Display the current time
    • Create a variable, dueDate, that stores a date 6 days after the date you started this task
    • Uses an if construct based on the dueDate and the current date to print out either:
    • how many days are left until this task is due
      or
      how many days have past since this task was due
  2. Display a table that has 12 rows and 3 columns which is created using a for loop to read through a set of JavaScript arrays that contain the names of the months and the number of days in each month.
  3. Uses the JavaScript mod operator (%) to highlight every other row of the above table with a different color to make it easier to read. The table should look similar to this:
    Months Table

Hint: if you use the JavaScript mod operator (%) to divide the loop counter by 2 and there is no remainder that means the loop counter is an even number and so you need to highlight that row.

This web page should also have a link back to your Home Page task web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your advanced CSS web page.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland