Web Programming Step by Step

Lecture 13
Introduction to JavaScript

Reading: 7.1 - 7.4

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

Valid XHTML 1.1 Valid CSS!

Client-side scripting (7.1.1)

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? (7.1)

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>

A JavaScript statement: alert

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

Variables and types (7.2.1, 7.2.3)

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

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 */

String type (7.2.7)

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

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;

// 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"

Event-driven JavaScript

Event-driven programming

event

Buttons: <button>

the canonical clickable UI control (inline)

<button>Click me!</button>

JavaScript functions

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

Event handlers

<element attributes onclick="function();">...
<button onclick="myFunction();">Click me!</button>

Document Object Model (DOM) (7.1.4)

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

DOM

DOM element objects (7.2.5)

dom object

Accessing elements: document.getElementById

var name = document.getElementById("id");
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
function changeText() {
	var span = document.getElementById("output");
	var textBox = document.getElementById("textbox");
	textBox.value = span.innerHTML;
	span.innerHTML = "Hello, how are you?";
}