Web Programming Step by Step

Lecture 13
JavaScript Syntax and DOM

Reading: 7.1 - 7.4

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

7.2 - 7.4: JavaScript Syntax

Number type (7.2.2)

var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);

Comments (same as Java) (7.2.4)

// single-line comment

/* multi-line comment */

More about String

for loop (same as Java) (7.2.8)

for (initialization; condition; update) {
	statements;
}
var sum = 0;
for (var i = 0; i < 100; i++) {
	sum = sum + i;
}
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
	s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"

Math object (7.2.9)

var rand1to10 = Math.floor(Math.random() * 10 + 1);
var three = Math.floor(Math.PI);

Special values: null and undefined (7.2.10)

var ned = null;
var benson = 9;
var caroline;

// at this point in the code,
//   ned is null
//   benson's 9
//   caroline is undefined

Logical operators (7.3.1, 7.3.4)

if/else statement (same as Java) (7.3.2)

if (condition) {
	statements;
} else if (condition) {
	statements;
} else {
	statements;
}

Boolean type (7.3.3)

var iLike190M = true;
var ieIsGood = "IE6" > 0;   // false
if ("web dev is great") {  /* true */ }
if (0) {  /* false */ }

while loops (same as Java) (7.3.5)

while (condition) {
	statements;
}
do {
	statements;
} while (condition);

Popup boxes (7.4.4)

alert("message");     // message
confirm("message");   // returns true or false
prompt("message");    // returns user input string
alert confirm prompt

Arrays (7.4.2)

var name = [];                          // empty array
var name = [value, value, ..., value];   // pre-filled
name[index] = value;                     // store element
var ducks = ["Huey", "Dewey", "Louie"];

var stooges = [];        // stooges.length is 0
stooges[0] = "Larry";    // stooges.length is 1
stooges[1] = "Moe";      // stooges.length is 2
stooges[4] = "Curly";    // stooges.length is 5
stooges[4] = "Shemp";    // stooges.length is 5

Array methods

var a = ["Stef", "Jason"];   // Stef, Jason
a.push("Brian");             // Stef, Jason, Brian
a.unshift("Kelly");          // Kelly, Stef, Jason, Brian
a.pop();                     // Kelly, Stef, Jason
a.shift();                   // Stef, Jason
a.sort();                    // Jason, Stef

Splitting strings: split and join

var s = "the quick brown fox";
var a = s.split(" ");          // ["the", "quick", "brown", "fox"]
a.reverse();                   // ["fox", "brown", "quick", "the"]
s = a.join("!");               // "fox!brown!quick!the"

Problems with JavaScript

JavaScript is a powerful language, but it has many flaws:

Prototype framework

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" 
 type="text/javascript"></script>

The $ function (9.1.3)

$("id")

DOM element objects (7.2.5)

dom object

DOM object properties (7.2.5)

<div id="main" class="foo bar">
	<p>Hello, <em>very</em> happy to see you!</p>
	<img id="icon" src="images/borat.jpg" alt="Borat" />
</div>
Property Description Example
tagName element's HTML tag $("main").tagName is "DIV"
className CSS classes of element $("main").className is "foo bar"
innerHTML content inside element $("main").innerHTML is "\n <p>Hello, <em>ve...
src URL target of an image $("icon").src is "images/borat.jpg"

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?
Property Description Example
value the text in an input control $("sid").value could be "1234567"
checked whether a box is checked $("frosh").checked is true
disabled whether a control is disabled (boolean) $("frosh").disabled is false
readOnly whether a text box is read-only $("sid").readOnly is false

Abuse of innerHTML

// bad style!
var paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a href="page.html">link</a>";

Adjusting styles with the DOM (8.2.2)

<button id="clickme">Color Me</button>
window.onload = function() {
	document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
	var clickMe = document.getElementById("clickme");
	clickMe.style.color = "red";
}
Property Description
style lets you set any CSS style property for an element

Common DOM styling errors