HTML & JavaScript Exercise

Type (or copy and paste) the following code into NotePad. Save it in a newly created folder named johnportfolio (where your name is substituted for john) using the file name index.htm.

<HTML>
<HEAD>
<TITLE>John's Portfolio</TITLE>
</HEAD>

<BODY>
Hello <B>World</B>
</BODY>

</HTML>

The keywords in the angle brackets are HTML tags. These tags should be typed in lowercase letters (unlike the example above). Tags with forward slashes are called closing tags while others are called opening tags. Indenting the phrase "Hello World" would not cause it to be indented on the actual Web page. Other techniques would have to be used to indent that phrase. All of the tags could be placed on one line of HTML. However, you should make your HTML code easy for others to read.

Replace the Hello <B>World</B> line with the following:

<A HREF = "http://www.minich.com"> Hello World </A>

This tag causes the words Hello World to be an underlined hyperlink that links to the Web page www.minich.com.

Now change the <A HREF> tag and line of HTML to the following:

<SCRIPT>

document.write("Hello World");

</SCRIPT>

The middle line is a JavaScript statement which must appear within the HTML <SCRIPT> tags. The semicolon at the end of the JavaScript statement is technically optional but preferred by C++-trained programmers.

Now change the SCRIPT section to the following:

<SCRIPT>

document.write("Hello World<P>");

if (navigator.appName == "Netscape")
{
        document.write("You are using Netscape");
}
    else
{
        document.write("I bet you are using Internet Explorer");
}

</SCRIPT>

The <P> tag causes a new line to appear similar to endl in C++. Understand that navigator is an object and appName is a property just like a label is an object and Caption is its property in Visual Basic. (The equivalent in C++ would be an apstring object with its myLength being a member variable.) On the other hand, write is a method of the document object in JavaScript just like Print is a method of a Form object in Visual Basic. In C++, the member function length( ) in the apstring class is like a method of an apstring object.

Add the Javascript line of code, alert("Netscape is detected"); to the if clause to see what happens. The alert method is another way that JavaScript can produce output besides the write method.

Download 3 icon graphics from http://www.free-graphics.com and save them with the file names iconA.gif, iconB.gif, and iconC.gif in your johnportfolio folder.

You must use the <IMG> HTML tag to have a graphic appear in a Web page. Add the following to a line of code below your SCRIPT section but before the </BODY> closing tag.

<IMG SRC = "iconA.gif">

The graphic appears within the Web page where the <IMG> tag is used.

Now modify your whole Web page by typing the following HTML:

<HTML><HEAD><TITLE>John's Portfolio</TITLE>
<SCRIPT>
Graphic1 = new Image;
Graphic1.src = "iconA.gif";
Graphic2 = new Image;
Graphic2.src = "iconB.gif";
</SCRIPT>
</HEAD>

<BODY>
<A HREF = "http://www.minich.com"
onMouseOver = "document.icon.src = Graphic2.src;"
onMouseOut = "document.icon.src = Graphic1.src;">
<IMG SRC = "iconA.gif" NAME = "icon"
</A>
</BODY></HTML>

Note that the JavaScript in the HEAD of the Web page executes before the body of the Web page is displayed in the Web browser. Now modify the Web page with the following:

<HTML><HEAD><TITLE>John's Portfolio</TITLE>
<SCRIPT>
imgArray = new Array(3);
imgArray[0] = new Image;
imgArray[0].src = "iconA.gif";
imgArray[1] = new Image;
imgArray[1].src = "iconB.gif";
imgArray[2] = new Image;
imgArray[2].src = "iconC.gif";
i = 0;

function cycle()
{
    document.icon.src = imgArray[i].src;
    i++;
    if (i == 3)
    {
          i = 0;
    }
     setTimeout("cycle()", 2000);
     return;
}
</SCRIPT></HEAD>
<BODY onLoad = "cycle();">
<IMG SRC = "iconA.gif" NAME = "icon">
</BODY></HTML>

An array named imgArray with 3 elements with positions 0 through 2 is used to store three separate graphics. Arrays are zero-based in JavaScript like they are in Java and VB. Also, a function named cycle is defined within the SCRIPT of the HEAD of the Web page. This function can be called from anywhere in the body of the Web page. It is called within the BODY tag when the onLoad event is triggered. The onLoad event is always triggered when the browser is finished loading the Web page. Previously you used the onMouseOver and onMouseOut events to create rollover graphics. Finally the built-in JavaScript setTimeout method causes the cycle function to be called every 2000 milliseconds (2 seconds). The i++ statement causes one to added to the value of the variable i as in the language Java

Now change the function, cycle, to the following:

function cycle()
{
    i = Math.floor(Math.random( ) * 3);
    document.icon.src = imgArray[i].src;
    setTimeout("cycle( )", 2000);
    return;
}

The random method of the Math object returns a floating value between 0.0 and 1.0. The floor method truncates its argument so the net result is that variable i will have a value of 0, 1, or 2.

Change your SCRIPT to the following:

<HTML><HEAD><TITLE>John's Portfolio</TITLE></HEAD>
<BODY>
<SCRIPT>
today = new Date( );
dayofweek = today.getDay( );
switch (dayofweek)
{
    case 0: document.bgColor = "blue";
                  document.write("Today is Sunday");
                 break;
    case 1: document.bgColor = "red";
                  document.write("Today is Monday");
                 break;
    default: document.bgColor = "blanchedalmond";
                   document.write("It is not Sunday or Monday");
                  break;
}
</SCRIPT>
<IMG SRC = "iconA.gif" NAME = "icon">
</BODY></HTML>

The switch structure is similar to the Select Case statement in VB and the switch structure in C++.

Many other Java and Visual Basic statements and structures such as while and for loops also work in JavaScript. Even more exciting is the number of objects, methods, properties, and events that the Web author can take advantage of when creating Web pages.

There are hundreds of JavaScript tutorials on the Web that you can find to learn more about JavaScript. You can even find thousands of free JavaScript functions and code segments to use in your own Web pages. For example, see http://java-scripts.iboost.com/scripts/mousetrail.html for an example of a goofy mousetrail. Or, you can add a JavaScript watermark to the lower-right corner of your Web page like you see at http://www.geocities.com/jsmaster/watermark.html .

HTML Assignment:

Make an interesting Web page that lists the courses that you took this year in high school and save it as index.htm within a folder named johnportfolio (where john is replaced by your first name). The folder must be located at the top ("in the root") of your Poweredge network folder so that Mr. Minich can find it easily. Only use your first name on this Web page, but you may list teachers' names if desired. You may also add graphics such as icons found at www.free-graphics.com. Along with each course, try to list at least one project or assignment that you completed in that class (English poems, history essays, math word problems, etc.) and create a hyperlink that links to a Web page (.htm file) or a text (.txt) file with an excerpt of the project or the complete project. For example, you can copy code from any program that you wrote in Visual Basic or C++ and paste it into the BODY of a Web page for your computer programming entry. You could even save a Visual C++ program (.cpp file) or Visual Basic form file (.frm) as .htm and directly link to that file. Make sure that the file that you are linking to does not include your last name either. You can use Notepad and/or Netscape Composer to create this page and you may use the template provided by Mr. Minich as a starting point.

Javascript Assignment:

Create an interesting Web page that makes use of JavaScript or add interesting and effective use of JavaScript to your portfolio (index.htm) Web page. You may use code that is obtained from other Web sites as long as you have permission to use their code and as long as you document where you obtained it from (provide the URL Web address.) If you are creating a separate page that uses JavaScript, save the Web page as javascript.htm in your portfolio folder and provide a link to it from your index.htm (portfolio) page.