CSE 190M Web Programming

Lecture 13: JavaScript

Reading: 8.1 - 8.4

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. 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

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 iLike190M = 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);

Arrays 

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"

Defining functions

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

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

Special values: null and undefined 

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

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

Event-Driven Programming with JavaScript

Event-driven programming

event

Linking to a JavaScript file: script 

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

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

Exercise: Link tip CSS

  • Link javascript code into our tip.html page.

Buttons: <button>

the canonical clickable UI control (inline) 

<button>Click me!</button>

Event handlers

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

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

Exercise: onclick alert

  • Write the necessary javascript so that an alert is made when the button is clicked.

Document Object Model (DOM)

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

DOM

DOM element objects

dom object

Accessing elements: document.getElementById

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

<button onclick="changeText();">Click me!</button>
<input id="output" type="text" value="replace me" />

function changeText() {
	var textbox = document.getElementById("output");
	textbox.value = "Hello, world!";
}

More advanced example

<button onclick="swapText();">Click me!</button>
<span id="output2">Hello</span>
<input id="textbox2" type="text" value="Goodbye" />

function swapText() {
	var span = document.getElementById("output2");
	var textBox = document.getElementById("textbox2");
	var temp = span.innerHTML;
	span.innerHTML = textBox.value;
	textBox.value = temp;
}

Exercise: tip calculator

  • Write the necessary javascript code to calculate a tip and inject it in the page.

9.1.1: Unobtrusive JavaScript

Unobtrusive JavaScript

Obtrusive event handlers (bad)

<button onclick="okayClick();">OK</button>

// called when OK button is clicked
function okayClick() {
	alert("booyah");
}

Attaching an event handler in JavaScript code

// where element is a DOM element object
element.onevent = function;

<button id="ok">OK</button>

var okButton = document.getElementById("ok");
okButton.onclick = okayClick;

Exercise: unobtrusive tip calculator

  • Modify the code to be unobtrusive.

When does my code run?

<html>
	<head>
		<script src="myfile.js" type="text/javascript"></script>
	</head>
	<body> ... </body> </html>

// global code
var x = 3;
function f(n) { return n + 1; }
function g(n) { return n - 1; }
x = f(x);

A failed attempt at being unobtrusive

<html>
	<head>
		<script src="myfile.js" type="text/javascript"></script>
	</head>
	<body>
		<div><button id="ok">OK</button></div>

// global code
document.getElementById("ok").onclick = okayClick;   // error: null

The window.onload event 

// this will run once the page has finished loading
function functionName() {
	element.event = functionName;
	element.event = functionName;
	...
}

window.onload = functionName;   // global code

An unobtrusive event handler

<button id="ok">OK</button>   <!-- look Ma, no JavaScript! -->

// called when page loads; sets up event handlers
function pageLoad() {
	document.getElementById("ok").onclick = okayClick;
}

function okayClick() {
	alert("booyah");
}

window.onload = pageLoad;  // global code

Common unobtrusive JS errors

Anonymous functions 

function(parameters) {
	statements;
}

Anonymous function example

window.onload = function() {
	var okButton = document.getElementById("ok");
	okButton.onclick = okayClick;
};

function okayClick() {
	alert("booyah");
}

window.onload = function() {
	var okButton = document.getElementById("ok");
	okButton.onclick = function() {
		alert("booyah");
	};
};

Exercise: unobtrusive tip calculator 2

  • Modify the code to have a working unobtrusive solution.
  • Change the color of the total text using element.style.color.

Unobtrusive styling 

function okayClick() {
	this.style.color = "red";
	this.className = "highlighted";
}

.highlighted { color: red; }