To Start the Lab

To start, copy the folder named lab3 from the directory /classes/cs120 into your www folder. To do that:

• Open a file browser window as usual. Click on "File System" on the left, or click the "Computer" icon in the toolbar and then click the "File System" disk. This shows all the files on the computer.
• Double-click the folder named "classes", then double-click the folder named "cs120". You should see a lab3 folder.
• Right-click the lab3 folder and select "Copy."
• Open your Home folder again, and open your www folder. Right-click in the www window, and select "Paste." A copy of the lab3 folder should appear. (Alternatively, you can drag lab3 from the cs120 folder into your www folder.)

You will work in your copy of the lab3 folder for this lab.

JavaScript and the Console in Chrome

Most Web browsers have "Developer Tools" that are useful to Web site developers. One of the tools is a "JavaScript Console" where you can type in JavaScript commands to see what they do. In Firefox, you can find it under the name "Web Console" in a "Developer" submenu. For Safari, you need to turn on the "Develop" menu in the "Advanced" section of the Safari preferences; then you can select "Show Error Console" from the "Develop" menu. I don't know about Internet Explorer. All the different browsers work a little differently, but look for a prompt where you can type in a command. For this lab, to be definite, we will work with Chrome.

Sign into your Linux account, go into the lab3 folder inside your www folder, and open the file named sample.html in the Chrome browser. (You can right-click the file and select "Open with / Chrome" or drag the file onto a Chrome window.) Click the menu icon, go to the "Tools" submenu and select "JavaScript Console." (Or just hit Control-Shift-J.)

The JavaScript Console appears at the bottom of the browser window. It can be detached into a window of its own, if you want more space. You will see a small ">", which is the prompt where you can type in commands, with a blinking input cursor. (Click in the console, if necessary, to get the cursor so that you can type into the console.)

JavaScript Expressions and Statements

You can type JavaScript expressions into the console. An expression is something that has a value. When you type in an expression, JavaScript will evaluate the expression and show you the value. For example, 2 + 2 is an expression. Type it into the console, and press return to find out the value. Try typing in the expression Math.sqrt(2) (and press return!) to see the value of the square root of two.

You can also type JavaScript commands, which perform some action (and might or might not have a value in addition to the action). Sometimes the action is immediately visible. Try entering this command

alert("Hello World);

This will pop up a dialog box that displays the message, Hello World, to the user. This command is not so useful in the JavaScript console, but it can be useful in JavaScript programs on a web page. You might also try

prompt("What is your name");

Which asks the user a question and gives back whatever the user types as an answer. Note that the value of the prompt command is the answer that you type, and this value is printed in the console.

Note that commands are generally called "statements" in programming, even though their goal is to tell the computer to do something.

Also note that in the console, you can leave out the semicolon at the end of a statement. But when you write JavaScript programs, you should use the semicolon, so I will use it here.

JavaScript Variables and Assignment Statements

A variable in programming is a name that refers to a value. You can give a value to a variable with an assignment statement. For example, type this assignment statement into the console:

x = 2 + 2;

Here, the variable is x. Except for some words that have special meaning, you can make up almost any name for a variable. The "=" sign is the assignment operator. After the "=" comes an expression. JavaScript finds the value of the expression and sets the value of the variable to be the value of the expression. After the above assignment, the value of the variable x is 4. If you just type x into the console, you will see the value 4. If you type  x + 3  you will see the value 7.

This is most useful to us here because the value of a variable can refer to an element on the web page that Chrome is displaying. There are several ways to get a reference to an element. The only one we will look at here is document.getElementById. Type the following expression into the console. (You should still be viewing sample.html in Chrome!)

document.getElementById("content")

JavaScript will show you the (source code for the) <body> element. You will notice that it says, <body class="normal" id="content">. The expression document.getElementById("xxx") gets a reference to the element that has id="xxx". (If there is no such element, the value is null, which is a way of saying that no such element exists.)

Notice that the <body> has class="normal". In JavaScript, the class can be referred to as

document.getElementById("content").className

Try typing it in! This is really just a very long variable whose value is the class. Now for the cool part: You can actually change the value of this variable, and it will change the appearance of the web page in the browser window to match the new value. Use an assignment statement to change the value, as follows. (Hint: Press the up-arrow in the console to get back previous commands.)

document.getElementById("content").className = "alternate";

This changes the appearance dramatically! To see where the new style comes from, look at the source code in sample.html. You will see that it defines styles for class name "alternate" as well as for class name "content". If you say

document.getElementById("content").className = "foo";

the page will revert to the default style because there are no style rules for class "foo".

Now, to get back to variables, instead of writing out a very long name like document.getElementById("content") over and over, you can store the value in a variable. For example:

bd = document.getElementById("content");

Then you can just write bd instead of document.getElementById("content"). For example, to change the class for the <body> back to "normal", you can just say:

bd.className = "normal";

(One more thing to note: You are not changing the original HTML source file sample.html here. You are only changing the page as it has been loaded into the browser.)

More Web Page Manipulation

Let's look at some more changes that you can make to a web page using JavaScript assignment statements. For one thing, you can change the entire content inside an element by assigning to its innerHTML. For example, the JavaScript command

document.getElementById("mainhead").innerHTML = "Hello World!";

will change the top headline on the page to show the text Hello World. Try it! This works because the top headline is given by the element that has id="mainhead". Alternatively, you could make a variable to refer to the element and use the variable in the assignment statement:

headln = document.getElementById("mainhead");
headln.innerHTML = "Hello World!";

There is am <img> element at the bottom of the page that shows a picture of Professor John Vaughn. The <img> element has id="facpic". To make it show a picture of Professor Yan Hao instead, you can change the src property of the element:

pic = document.getElementById("facpic");
pic.src = "http://math.hws.edu/web/faculty/hao.jpg";

You can change the size of the displayed image with

pic.width = 300;

And you could say document.getElementById("facname").innerHTML = "Yan Hao" to make the name above the picture match the new picture. Why does this work?

It is also possible to change style properties of elements. For example, to change the color of the main headline to red and the font size to be 50px:

document.getElementById("mainhead").style.color = "red";
document.getElementById("mainhead").style.fontSize = "50px";

Here is how this works: On the left side of the "=", you need the element followed by .style followed by another period and the CSS property name. For property names that have hyphens in them, such as font-size or background-image, You have to leave out the hyphen and capitalize the next word: fontSize or backgroundImage. (This is because names in JavaScript can't contain hyphens.) On the right side of the "=" is the new value for the style property. It should be enclosed in quotes, and inside the quotes you should have the value just like it would appear in a CSS rule. As usual on the Web, either single or double quotes can be used. For a few more examples,

document.getElementById('content').style.fontFamily = 'monospace';
document.getElementById("cs441").style.textDecoration = "line-through";
document.getElementById("content").style.backgroundImage = "url(brick.png)";

(The file brick.png from coolpatterns.net is in the lab3 folder along with sample.html.)

<button onclick="doClick()">Click Me!</button>

function doClick() {
    alert("Thanks for clicking!");
}

<script>
    function doClick() {
        alert("Thanks for clicking!");
    }
</script>