(Updated: 04/24/2007 10:27 )
Last updated by: Andrew Kaufman
Comments to: Steve Wolfman
Sources and contributions: Much of the lab was taken from UBC Roadmap for Javascript and Scott Rose's quiz from the University of Washington. The first version of this lab was created by Shelly Zhao. Revisions were made by Tanya Ellchuk, Holger Hoos, Michael Chiang, and Andrew Kaufman.
In this lab you will be introduced to a new method of creating and enhancing internet web pages -- JavaScript. JavaScript is like HTML in the sense that it is code that web browsers read and understand. However, where HTML describes the content and layout of a page, JavaScript describes processes for the web browser to perform.
You will get an introduction of how JavaScript is used in page design, and will be able to add some advanced features into your web pages using JavaScript.
We will cover these topics in the lab:
Before the lab you should have met all the requirements of the HTML Web Page Design lab.
NOTE:
This section of the course will bring you up to speed on the basics of JavaScript. We will take a look at some important facts about JavaScript that all aspiring scripters need to know, and then we'll dive right in with a quick example of a simple script.
One of the most distinguishing facts about JavaScript is that it is embedded inside HTML. JavaScript is never seen on its own. All of the scripts are placed either inside the <head> </head> or <body> </body> tags of an HTML document.
In fact, without HTML, JavaScript will not have a user interface. HTML and your browser provides JavaScript with the access to the user. However, HTML isn't doing all the work either. JavaScript extends the capabilities of almost every HTML tag by allowing them to respond to events, something that we will look at closely in upcoming sections.
This is a simple example of JavaScript being embedded inside HTML. Try it out.
The JavaScript here is contained within the <head> tag and
the </head> tag. This is where most of your JavaScript
will go, but there are times when you'll find JavaScript between the
<body> tag and the </body> tag.
We'll explore that further when you get into event handling.
JavaScript code is not only dependent on HTML, but it is also dependent on the user's web browser. JavaScript is interpreted at run-time by the browser.
JavaScript support is provided by all modern browsers, including Firefox and Internet Explorer, regardless of which type of operating system they run on. JavaScript owes much of its popularity to this fact; it saves you, the developer, a lot of hassle. The code is interpreted only when the page containing the code is loaded, much like the way HTML tags are translated during the loading of the page. Like HTML, JavaScript code is written in plain text. The same code that runs on your PC will run on any other platform, as long as JavaScript capable browsers are available for that platform.
It's time to jump right in and look at your first JavaScript. Although this is a simple example, it will show you the essentials that will go into every JavaScript you will write.
Add the following red bold part into the head of your "courses.html"
<html> <head> <title> UBC Courses </title> <script language="JavaScript1.2"> <!-- alert("You are entering my UBC course page. Go ahead, click OK."); // --> </script> </head> <body> ......</body> </html>
Now go to your "index.html" and click on the link to the "courses.html" to see what happens. Click here to see what it should be.
Great! You've now seen your first JavaScript. Let's dissect the code and take a look at some of the essentials of every JavaScript.
The first thing you see within the <head> </head>
area is <script language="Javascript1.2">. This tells
the browser that everything between that tag and </script> is JavaScript
code that has to be interpreted. This tag also makes the browser aware
that the following code requires version 1.2 of JavaScript.
...... <script language="JavaScript1.2"> ...... </script>
The strange symbols <!-- and //--> need
to surround your JavaScript within the <head> and
</head> tags. It's good practice when programming to use many descriptive comments. Comments are text that isn't interpreted as program code; it's just there for humans reading the code. In JavaScript, everything from // until the end of a line is a comment.
<!-- and --> are the same constructs
used for HTML comments; they hide JavaScript from browsers that don't
support it. Just remember that these two strings should surround all of your
JavaScript code in your <head> section, right inside the
<script language= "Javascript1.2"> and
</script> tags.
</head>
......
<script language="JavaScript1.2">
<!--
alert("You are entering my UBC courses page. Click OK.");
//-->
</script>
</head>
......
If you're curious why we put the // and the --> together for the second construct, check out this explanation of // -->.
alert() Method alert() is one of
JavaScript's most frequently used methods. A method is just
object-oriented talk for something that performs an action
on an object; in this case, the object is your
browser's window.
alert() is a great way to get a user's attention. It
issues a beep on sound-equipped systems and displays a message of your
choice in a special pop-up box. Like in many other programming
languages, displayable text (called a "string") in JavaScript is enclosed in quotes and the semi-colon at the end of
the alert() line signifies the end of a JavaScript statement.
......
<script language="JavaScript1.2">
<!--
alert("You are entering my UBC courses page. Click OK.");
// -->
</script>
</head>
......
The mouseover is probably the most used JavaScript trick, and almost every JavaScript enabled page makes use of it in one way or another. Maybe you have seen a menu that seems to come to life when you move the mouse over the different menu items - the mouseover in JavaScript is what makes this possible.
When you move your mouse over a menu item, JavaScript responds by swapping the original image with another image of your choice.
Now, change the image of your picture in the "index.html" by typing the following, and see what happens when you open it with a browser. Be sure to roll your mouse on and off your picture. Click here to see how it should work.
<P>
<A HREF = "#" onMouseOver =
"document.images[0].src = 'logoUBC.jpg';"
onMouseOut =
"document.images[0].src = 'mypicture.gif';">
<IMG border=0 SRC =
"mypicture.gif" width="95" align="left"></A>
<P>
This code introduces two fundamental concepts of JavaScript. The mouseover is made possible by the client-side object hierarchy and the event handling of JavaScript. As you learn more JavaScript, you will find that understanding these two concepts are absolutely essential to writing useful JavaScripts.
We can start by dissecting the code from this example.
The line that makes the image swap possible is in red bold text above
A few things are happening here, so let's look at one part at a time. Everything that is not in bold is just straight HTML that places and aligns an image on the page.
JavaScript is monitoring two different events here. Most of the JavaScript code that you will write responds to events caused by the user or the web browser. "onMouseOver" detects when the mouse cursor is moved over the image, and "onMouseOut" detects when the mouse cursor is moved away from the image.
As mentioned before, JavaScript is tightly integrated with HTML, and the power lies in its ability to give HTML tags "intelligence" - or a way to respond to user interaction.
onMouseOver = "document.images[0].src = 'logoUBC.jpg';"
Everything between the quotes is active JavaScript. In English, this says, "When the mouse is moved over this image, change the file source of the first image in the document (this one being the first) to 'logoUBC.jpg'."
Here is an example, wmst201quiz.html, of how to create a quiz in JavaScript. Re-save it with the file name "quiz.html". You will also need this file, save it with the name "quiz_result.html".
Note: The goal of this section is to modify the quiz to contain your own questions (and answers). At the end of the lab, you should have a quiz with at least two of your own questions and none of the questions from the original example quiz.
Open the file "quiz.html" with Notepad, and find the following line near the beginning of the file:
form name="wmst201quiz" method="get" action="wmst201quiz_result.html"
Change the form name from "wmst201quiz" to "myquiz" , and the action from "wmst201quiz_result.html" to "quiz_result.html".
Also, find the questions, so that you can change the content of the quiz.
The html code for the questions is like this:
<TD colSpan=4 height=25>What do you
use to browse an HTML file? </TD></TR>
<TR>
<TD
></TD>
<TD ><INPUT
type=radio value=0 name=2> Word</TD>
<TD
><INPUT type=radio value=1 name=2>
Excel</TD>
<TD ><INPUT
type=radio value=2 name=2>
PowerPoint</TD>
<TD
><INPUT type=radio value=3 name=2> Internet Explorer</TD><
</TR>
You can change the question "What do you use to browse an HTML file?" to your own question.
Each question will have four answers, shown as "Word", "Excel","PowerPoint" and "Internet Explorer" in the above example. Try to change the answers according to your questions.
Now open the file "quiz_result.html". Read carefully the text between /* ....... */ before each part of the JavaScript function.
Here is the copy of the explanations:
1) the JavaScript in the <head> is function handleQuestion:
/* the handleQuestion function
*
* This function figures out what answer the user chose for the question with
* number 'questionNumber' then prints the question and the correct answer.
* It is important that this function is called for each question in order.
* You don't have to change the code here.
*/
2) The second JavaScript code is in the <body>:
/* This code creates the output page after the user submits some answers. * Set answer[1] to answer[4] according to your four answers to each question, and * set the variable 'correct' to be the value of the correct answer. * * good luck in your quiz. */
NOTE:
score += handleQuestion(1, "What can you use to edit an HTML file? ", correct, answers);
document.writeln("<hr>");
This part is just to demonstrate some fancy things that JavaScript can do. Only examples, not how to create the code, are given for each topic.
Here are some examples that you can put into any of your pages. Feel free to change them or to find other examples on the web. You can use the links at the end of the lab as a reference. But be sure not to make your website to be one of these examples.
4.2 Prompt windows
4.3 Login and Password (enter "cpsc101" as the UserID and password)
4.4 Length Conversion Calculator
It can be fun to search professional Web pages to find out cool uses of JavaScript. Try the reference links, and add one of the more interesting features into any of your three pages. You need to have a separate link in your main page to specify what the function is and where you found it and what you did to revise it.