Web Programming Step by Step, 2nd Edition

Lecture 14: JavaScript; The Document Object Model (DOM)

Reading: 8.1–8.2.5, 8.2.7–8.2.9, 8.3, 8.4.3, 9.2–9.2.2

Except where otherwise noted, the contents of this document are Copyright 2012 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.

Valid HTML5 Valid CSS

8.1: Key JavaScript Concepts

Client-side scripting

client-side scripting

Why use client-side programming?

PHP already allows us to create dynamic web pages. Why also use client-side scripting?

What is JavaScript?

JavaScript vs. Java

Java + mary jane, da endo, aight = JavaScript

JavaScript vs. PHP

JS <3 php

Linking to a JavaScript file: script 

<script src="filename" type="text/javascript"></script>

<script src="example.js" type="text/javascript"></script>

8.2: JavaScript Syntax

A JavaScript statement: alert 

alert("message");

alert("IE6 detected.  Suck-mode enabled.");
alert

Variables and types 

var name = expression;

var age = 32;
var weight = 127.4;
var clientName = "Connie Client";

Number type 

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

String type 

var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" "));   // "Connie"
var len = s.length;                           // 13
var s2 = 'Melvin Merchant';                   // can use "" or ' '

More about String

Comments (same as Java) 

// single-line comment

/* multi-line comment */

for loop (same as Java) 

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[i] + s1[i];
}
// s2 stores "hheelllloo"

Math object 

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

Logical operators

if/else statement (same as Java) 

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

Boolean type 

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

while loops (same as Java) 

while (condition) {
	statements;
}

do {
	statements;
} while (condition);

Defining functions

function name() {
	statement ;
	statement ;
	...
	statement ;
}

function myFunction() {
	alert("Hello!");
	alert("How are you?");
}

myFunction(); // alerts "Hello" then "How are you?"

Event-Driven Programming with JavaScript

Event-driven programming

event

Event handlers

<element attributes onclick="function();">...

<div onclick="myFunction();">Click me!</div>

Buttons: <button>

the canonical clickable UI control (inline) 

<button onclick="myFunction();">Click me!</button>

9.2: DOM Element Objects

Document Object Model (DOM)

a set of JavaScript objects that represent each element on the page

DOM

DOM element objects

dom object

Accessing an element: document.getElementById

var name = document.getElementById("id");

<img id="icon01" src="images/octopus.jpg" alt="an animal" />
<button onclick="changeImage();">Click me!</button>

function changeImage() {
	var octopusImage = document.getElementById("icon01");
	octopusImage.src = "images/kitty.gif";
}

DOM object properties 

<div id="main" class="foo bar">
	<p>See our <a href="sale.html" id="saleslink">Sales</a> today!</p>
	<img id="icon" src="images/borat.jpg" alt="Borat" />
</div>

var mainDiv = document.getElementById("main");
var icon    = document.getElementById("icon");
var theLink = document.getElementById("saleslink");
Property Description Example
tagName element's HTML tag mainDiv.tagName is "DIV"
className CSS classes of element mainDiv.className is "foo bar"
innerHTML content in element mainDiv.innerHTML is "\n <p>See our <a hr...
src URL target of an image icon.src is "images/borat.jpg"
href URL target of a link theLink.href is "sale.html"

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?

var sid   = document.getElementById("sid");
var frosh = document.getElementById("frosh");
Property Description Example
value the text/value chosen by the user 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

More about form controls

<select id="captain">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
	<option value="cisco">Benjamin Cisco</option>
</select>
<label> <input id="trekkie" type="checkbox" /> I'm a Trekkie </label>

The innerHTML property

<button onclick="addText();">Click me!</button>
<span id="output">Hello </span>

function addText() {
	var span = document.getElementById("output");
	span.innerHTML += " bro";
}

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 

objectName.style.propertyName = "value";

<button onclick="colorIt();">Click me!</button>
<span id="fancytext">Don't forget your homework!</span>

function colorIt() {
	var text = document.getElementById("fancytext");
	text.style.color = "#ff5500";
	text.style.fontSize = "40pt";
}
Property Description
style lets you set any CSS style property for an element

Common DOM styling errors