University of Washington CSE 154

Section 7: JavaScript

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

IMPORTANT notes on Kevin Bacon

• Comments about PHP: If a comment deals with or references PHP at all, the comment MUST be in PHP!!
• Expression Blocks: It is considered bad style to make function calls from within PHP expression blocks (and can also break your code). Always make function calls from inside standard PHP blocks!
• SELECT * FROM...: Don't do this!! You should only select the exact columns you need IN YOUR QUERY!
• Reasonable spacing around table elements: The data in your table shouldn't be "tightly packed". Give all your text some breathing room! (see spec for illustration)
• PDO:Be sure to use the PDO object and set error checking. See slides for details. CAREFUL: This information is NOT in the 1st edition of the textbook!
• Comment your SQL queries!

Debugging

The following links may help you in the debugging process:

• Bonus Lecture Slides - Debugging JavaScript
• Firebug, Chrome Dev Tools
• Validators: W3C HTML, W3C CSS, JSLint
• Use alert() and console.log() to print debug messages.
• Write "use strict"; at top of script file to enable strict syntax checking.

Exercise : Buggy Javascript

The following pages have mistakes that cause their JavaScript code not to work properly. Look at the pages, find the bug(s), and correct the problems.

1. buggy page #1 (JavaScript)
2. buggy page #2 (JavaScript)
3. buggy page #3 (JavaScript)
4. buggy page #4 (JavaScript)

Exercise Solution

• buggy1: HTML script tag has name of JS file misspelled. Discover by putting alert at top of JS file, noticing that it doesn't show, checking script tag.
• buggy2: HTML script tag is self-closing (not valid; breaks whole page in FF), and misspelled name of onclick attribute. Discover by using W3C HTML Validator.

Exercise Solution

• buggy3: many syntax errors:

  • semicolon after () in function header
  • '' instead of " to close string
  • Alert shouldn't be uppercase
  • ) instead of } to close function

  Discover by looking at Firebug error console, and/or by running JSLint.

• buggy4: syntax error, missing } brace. Discover by running JSLint (error message more helpful than Firebug's).

Exercise : Font Manipulation (by Rishi Goutam)

Using the browser's Javascript console, modify font.html by changing the following in the paragraph #text:

1. the text of the paragraph to something of your choice
2. the font, font size, and color of the text

Once you have achieved these modifications, add your code to the page so that clicking the "Prettify" button will apply them. A runnable solution is located here (Don't peek at the code!).

Now, make it so that the JavaScript code is unobtrusive - ie there is no onclick handler in the HTML file

Exercise Solution

<div>
	<button id="prettify">Prettify</button>
</div>

window.onload = setup;
	 
function setup() {
	document.getElementById("prettify").onclick = prettify;
}

function prettify() {
var text = document.getElementById("text");
text.innerHTML = "Look! It's pretty!";

// font styles added by JS:
text.style.fontSize = "13pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "red";
}

Exercise : Sometimes Red, Sometimes Blue

Modify redblue.html so that when the button is clicked, it randomly decides whether the background color of the page should be red, or if the background color of the page should be blue. Hint: You can use document.body to access the page's body in JavaScript.

A runnable solution is located here. (Don't peek at the solution code!)

Once you've gotten that working, make your JavaScript code unobtrusive (and way cooler) by taking out the button on the page and choosing a color randomly when the page loads.

Exercise Solution

<button id="change">RedBlue?!</button>

window.onload = setup;

function setup() {
    document.getElementById("change").onclick = chooseColor;
}

function chooseColor() {
    var choice = Math.round(Math.random());
    if(choice == 1) {
       document.body.style.backgroundColor = "blue";
    } else {
       document.body.style.backgroundColor = "red";
    }
}

window.onload = setup;

function setup() {
	document.getElementById("calculate").onclick = convert;
}

function convert() {
	var input = document.getElementById("input");
	value = parseInt(input.value);

	var conversion = document.getElementById("convert");
	if (conversion.value == "kgtopounds") {
	  value *= 2.20462262;
	} else {
	  value *= 0.45359237;
	}

	var answer = document.getElementById("answer");
	answer.innerHTML = value;
}

Exercise : Order-It

Write a page that lets us perform various manipulations on the text in a text area. Here is the page (click the image to run our sample solution, written by TAs Sylvia Tashev and Stefanie Hatcher):