CSSE 290 Web Programming

Lecture 12: JavaScript Intro

Reading: 8.1 - 8.4

Attribution: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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Valid HTML 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: Different than Java

JavaScript vs. PHP

JS vs. php

Event-driven Programming

event

A Useful JavaScript Statement: alert 

alert("message");

Define a Function

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

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

Linking to a JavaScript file: script 

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

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

Buttons: <button>

the canonical clickable UI control (inline) 

<button>Click me!</button>

Event handlers

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

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

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;
}

Let's Do An Example

Make a new folder (or new project) in Eclipse

Copy the starting files there (linked from the Schedule page)

Slides note: Most of the concepts in the following slides are things we will see in the example.
You may want to read these slides later ot get a few more details.

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

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

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"