Lab 12 Material - November 13th, 2008

Reminder: office hours tonight, 9-11pm; hw due at 5pm on Friday.


Objective: expose you to JavaScript and JS troubleshooting.

General JS resources:


Files for this lab are in svn, at:

or you can copy them from


on the CSE cluster.


Common problems (hat tip to Taylor Marshall):

'' == '0' //false
0 == '' // true
0 == '0' // true

(== and != are not symmetric, so weird stuff can happen as above; this is also possible in Python, note!)

Recommend using === and !== operators to avoid such tomfoolery. In the above examples, all statements would evaluate to false using ===.

JavaScript examples

Simple JS (page, source) :

<script type="text/javascript">               <--
document.write("Hello World!");
</script>                                     <--

Hide your JavaScript from non-JS users (page, source) :

<script type="text/javascript">
document.write("Hello World!");

Load JavaScript code from another file (page, source and JS source) :

<script src='hello.js'></script>

Grouping JS statements into blocks with squigglies (page, source) :

<script type='text/javascript'>
document.write(" World!");

Basic JS prompts (page, source) :

alert("something happened!");

confirm("may I delete all your files?");

prompt("some question","defaultvalue");

Functions, head/body separation, and element events (page, source) :

<script type="text/javascript">
function displaymessage()
alert("Hello World!");


<input type="button" value="Click me!" onclick="displaymessage()" >


'undefined' implicit conversion to strings, & errors (page, source) :

document.write(" is: " +

document.write("<p>foo is: " + foo);

document.write("<p>and hello, world!");

(Go look at the Firefox error console.)

Simple object-oriented programming, and iteration over bags o' properties (page, source) :

function some_object_method(param) {
   document.write("hello!  This is SomeObject's other param: ");

   document.write("<p> and this is my method param:");

function SomeObject(what, other_param) { = "hello";
   this.what = other_param;
   this.method = some_object_method;


x = new SomeObject("world", 2);

document.write( + " " + x.what + "<p>");
x.method("argument to SomeObject.method");

for (z in x) {
   document.write('<p>z is ' + z);
   document.write('<p>x[z] is ' + x[z]);

Working with HTML elements (page, source) :

<script type="text/javascript">

function change_title() {
    var x = document.getElementById("my_input");
    document.title = x.value;
    return false;

document.write("The title is: " + document.title + "<p>");

<form onsubmit='return change_title()' method='POST'>

New title: <input type="text" id='my_input'>

<input type="submit" value='change title' >




Group exercises

There are several files with a variety of problems between them, in lab-12/exercises/. Fix the problems!