About JavaScript

For this lab, you will use only some basic JavaScript: assignment statements, calling functions that are already defined for you, and defining a few functions of your own. (There are no loops or if statements.) An assignment statement is used to change a value that is stored in the computer. Here are some examples:

str = "This is a string";
x = 7;
y = x + 3;
location.href = "http://math.hws.edu";
document.getElementById("picture").src = "pic2.jpg";
document.getElementById("greet").innerHTML = "Hello World";
document.getElementById("mainhead").style.color = "red";

The first three examples assign values to variables. The variables x, y, and str should have been declared by saying

var x;
var y;
var str;

The assignment statements give values to the variables. For str, the value is a string. For x, the value is a number. For y, the value is computed by evaluating the expression x+3, so that the value assigned to y is the number 10.

The next line assigns a value to location.href. On a web page, JavaScript has many predefined variables that store properties of the page. The variable location.href represents the URL of the web page that is displayed in the web browser. Assigning a value to this variable will actually change the web page; that is, it will send the browser to a new page. (The fact that an assignment statement can have this kind of "side effect" will be surprising to people who know other programming languages.) You should understand something about names like "location.href" that contain a period. The value of location is a complex value, with several parts, and href is the name of one of those parts. The period means that you are going into a complex value and picking out one of its parts, which is itself a simpler value.

The last three assignment statements use the function document.getElementById(id). The function makes it possible to refer to elements on the web page. The element must be identified by an id attribute. For example, the following web page elements would work with the above assignment statements:

<h2 id="mainhead">My Pictures</h2>
<p id="greet">Welcome</p>
<p><img id="picture" src="pic1.jpg></p>

In the examples, document.getElementById("picture") refers to the <img> element, which has id="picture". One part of that element is the src attribute that says where the image comes from. By assigning a value to document.getElementById("picture").src, you will actually change the picture that is displayed on the web page.

Similarly, document.getElementById("greet") represents the <p> element, which has that id. Part of the element is the innerHTML, which is the text in the paragraph. By assigning a value to document.getElementById("greet").innerHTML, you can change the text that appears on the page. The last assignment statement example changes the color aspect of the style of the element with id="mainhead".

For this lab, you will need to use location.href and the src attribute of an image element.

---

Recall that a function is just a list of commands that can be executed by calling the function. JavaScript has lots of built-in functions, and it is possible to define new ones. Generally, a function is called by using its name as a command. A function can also have parameters that are input values for the function. A parameter tells the function some information that it needs to work. For example,

alert("Hello World");

calls the function named alert with the parameter "Hello World". The alert function puts up a dialog box to display a message to the user; the parameter tells the function what message to display. Some functions have no parameters; in that case, you still need an empty pair of parentheses as part of the name when you call the function. A function can have more than one parameter; in that case, the parameters are separated by commas. For example:

graphics.strokeLine(100,100,400,200);

In the second exercise of the lab, you will use this function and other similar functions to draw a picture.

It is also possible to define new functions of your own. For now, we won't talk about how to define functions that have parameters. For a function that has no parameters, you have to specify a name and a list of commands that will be executed when the function is called. The syntax is

function putNameHere() {
    putCommandsHere;
}

One way for a function to be called is in response to some event. For example, it is possible to put a button on the web page and to set a function to be executed when the button is clicked. The user clicking the button is an example of an event. For example, here is how to make a button that will execute the function named myFunc:

<button onclick="myFunc()">Run My Code!</button>

You will need to know this to do the first exercise!

Exercise 1: Slideshow

For exercise, 1, you should edit the file lab2a.html. This file shows an image of a cute animal. You should modify it to make it into a "slideshow". Add five buttons to the page. Clicking on a button should change the image that is displayed. (The page will only show one image at a time!) Each button will need a function. The definition of the function has to go in the <script> at the top of the page, and the button has to be programmed to call the function when it is clicked. Each of the buttons should show one of the animal images that I have provided. (Or, if you prefer, you are welcome to use your own selection of images.)

If you want to do something extra, add a caption for the images. The caption should change when the image changes. (Use innerHTML.)

Exercise 2: Drawing

For this exercise, you will edit the file lab2b.html. This is a rather long file that does a lot of setup to make drawing possible. However, you only need to work in the function named draw, near the top of the file. This function will be called as soon as the page loads, and its purpose is to draw a picture. You should add commands to it to draw a picture of your choice. The drawing commands that are available to you are described below. Right now, the function just draws a few simple shapes. You want to remove that code and substitute your own. Try to draw a picture that looks like something. (Well, actually, like a child's drawing of something.) Some things you might draw: house, sun, cloud, tree, flower, snowman, sailboat, airplane, computer, logo, hockey stick...

As a second, short addition to this assignment: After someone has been on your page for, say, one minute, an alert should pop up telling them that they have looked at the page long enough. Then the web browser should be sent to a different page. To do this, you will need to use the setTimeout function, which takes a form such as:

setTimeout( func, 10000 );

Here, func is the name of a function that will be called sometime in the future. (Note that it's just the function name, without parentheses!!) The second parameter, 10000 in the example, tells how far in the future the function should be called. The value is given as the number of milliseconds, where 1000 milliseconds equal one second. The meaning in this case is, schedule the func to be called 10 seconds from now. For this exercise, you want to write a function that will show an alert and send the user to a new page, and you want to use setTimeout to schedule the function to be called after one minute.

---

About JavaScript Graphics...

A <canvas> element on a web page represents a rectangular area on which you can draw. The web page lab2b.html contains a <canvas> element that is 800 pixels wide and 600 pixels high. The canvas has a coordinate system in which each pixel is identified by a pair of numbers (x,y), with (0,0) at the top left corner of the canvas. The horizontal coordinate, x, increases as you move from left to right. The vertical coordinate, y, increases as you move from top to bottom:

A variable named graphics in lab2b.html includes a number of functions for drawing. The function names use the words "fill" and "stroke". "Fill" fills the interior of a shape with color, whereas "stroke" is like dragging a pen along the border of a shape. Here are the functions that are available for you to use:

• graphics.strokeLine(x1,y1,x2,y2) -- Stroke the line from the point (x1,y1) to the point (x2,y2).
• graphics.strokeRect(x,y,w,h) -- Stroke the boundary of the rectangle that has upper left corner at (x,y), width w, and height h.
• graphics.strokeCircle(x,y,r) -- Stroke the circumference of the circle with center (x,y) and radius r.
• graphics.strokeOval(x,y,r1,r2) -- Stroke the boundary of the oval with center (x,y), horizontal radius r1, and vertical radius r2.
• graphics.strokePoly(x1,y1,x2,y2,...,xN,yN) -- Stroke the boundary of the polygon with vertices (x1,y1), (x2,y2), ..., (xN,yN). (That is, it draws lines from point to point, then back to the starting point.)
• graphics.strokeText(str,x,y) -- Strokes the outlines of the characters in the string str. The basepoint of the string is (x,y). (The basepoint is the left endpoint of the line that underlines the string.) Note that stroking text doesn't work well unless the font size is pretty big.
• graphics.fillRect(x,y,w,h) -- Fills the inside of the rectangle that has upper left corner at (x,y), width w, and height h.
• graphics.fillCircle(x,y,r) -- Fills the inside of the circle with center (x,y) and radius r.
• graphics.fillOval(x,y,r1,r2) -- Fills the inside of the oval with center (x,y), horizontal radius r1, and vertical radius r2.
• graphics.fillPoly(x1,y1,x2,y2,...,xN,yN) -- Fills the inside of the polygon with vertices (x1,y1), (x2,y2), ..., (xN,yN).
• graphics.fillText(str,x,y) -- Draws the characters in the string str, filling in their outlines.

In addition to these functions, graphics contains several variables that affect how the drawing is done. Whenever you assign a value to one of these variables, the new value affects drawing that is done after you make the change, and the change remains in effect until you do another assignment. Here are the variables with examples of using them:

• graphics.fillStyle = "red"; -- Sets the color that will be used for "fill" commands. The value is a string that contains a CSS color value. It can be a color name, like "red", or a hexadecimal code, like "#AA0070". Remember that you can look up CSS colors at http://w3schools.com/tags/ref_colornames.asp.
• graphics.strokeStyle = "#AA0070"; -- Sets the color that will be used for "stroke" commands. Again, the value must be a string containing a CSS color name.
• graphics.lineWidth = 3; -- Sets the width of the line that is drawn for "stroke" commands. The value must be a positive number. The width is given in pixels. The initial value is 1.
• graphics.font = "30px serif"; -- Sets the font that is used for fillText and strokeText. The value is a string containing a CSS font description. The string contains a size and a font name. Optionally, you can start the string with "bold" or "italic". The size "30px" gives characters size that is about 30 pixels high; you can also use in or cm (inches or centimeters) as measures. The most common standard font names are serif, sans-serif, monospace.

---

The Firefox Web Console. When you are working on JavaScript, it's a good idea to keep Firefox's Web Console open. Errors in your JavaScript code will be noted in the web console. If you don't have the web console open, you get no notification at all that an error has occurred; your page simply doesn't do anything.

To open the Web Console, go to the "Tools" menu, then into the "Web Developer" submenu. Select the "Web Console" command. The web console appears at the bottom of the Browser window.