Lecture 9b: JavaScript

What You Will Learn Today

  1. Use values, variables, literals and characters.
  2. Use operators and statements.
  3. Define and call functions.
  4. Use built-in objects (Array, Math, String and Date) and create new objects.
  5. Use event handlers to process events from form elements and other objects.
  6. Work with images and animations.

Values, Variables, Literals, Characters

Category Description of Syntax Example
values numbers, logical, strings, null, undefined 3.14, true/false, "Hello"
number + string returns string
string - number returns number
x = "Size " + 42 // returns "Size 42"
y = 12 + " eggs" // returns "12 eggs"
"37" - 7 // returns 30
"37" + 7 // returns 377
assignment assign a value to a variable x = 42
declaration use keyword var (to prevent runtime error)  var x = 42
to numbers
or strings
var age = parseInt(f.age.value)
var mass = parseFloat(f.mass.value)
s = String(Math.PI)
integer literals digits, sign, hexadecimal 42, -345, 0xFFF
floating point
decimal point, scientific notation 3.1415, -3.1E12, .1e12, 2E-12
string literals enclose strings in quotes (single or double) "blah", 'blah', "1234", "one line \n another line"
array literal list of array values enclosed in brackets coffees = ["French Roast", "Columbian", "Kona"]
special or
\ followed by the character: 
backspace, formfeed, newline, carriage return, 
tab, single quote, double quote, backslash
\b, \f, \n, \r, \t, \', \", \\


Category Description of Syntax Example
= to assign a value to a variable
+=, -=, *=, /=, etc. are shorthand
x = y // assigns y to x
x += y // same as x = x + y
equal, not equal, greater than, less than, ge, le x == y, x != y, x > y, x < y, x >= y, x <= y
addition, subtraction, multiplication, division, 
increment, decrement, unary negation, modulus
1 + 2, 1 - 2, 1 * 2, 1 / 2, x++, y--, -x, x % y
logical operators and, or, not false && true // returns false
false || true // returns true
!true // returns false
+ joins strings "my" + "string" // returns "mystring"
condition ? val1 : val2 status = (age >= 18) ? "adult" : "minor"


Category Description of Syntax Example
statements ; // semicolon separates multiple statements on a line a = 10; b = 20; c = 30;
comments begin one-line comments with //
use /* and */ for multiple-line comments
// This is a single-line comment.
/* This is a multiple-line comment. It can be of any length, and can contain anything. */
if (condition) { statements1 }[else { statements2 }] if (name == "John") 
{ alert("Your name is John"); } 
else { alert("You are not John"); }
switch (expression){
case label : statement; break;
case label : statement; break; ...
default : statement;}
switch (gender) { 
case "m": title="Sir"; break; 
case "f": title="Madam"; break; 
default: title="Sir or Madam";}
for loop for ([initialExpression]; [condition]; [incrementExpression])
{ statements}
fact = 1; for (i=2; i<=n; i++) fact *= i;
do..while do { statements } while (condition) do { i+=1; document.write(i);} while (i<5);
while while (condition) { statements } while (true) { alert("Hello") } // infinite loop


Category Description of Syntax Example
defining function name (arg1, arg2, ..., argn) { statements } function square (number) { return number * number; }
calling name(arg1, arg2, ..., argn) square(5) // returns 25
arguments functionName.arguments[i] or arguments[i] returns argument i
arguments.length returns number of arguments
function myConcat(separator) { result=""; 
for (var i=1; i<arguments.length; i++)
{ result += arguments[i] + separator }
return result; }


Category Description of Syntax Example
arrayObjectName = new Array(arrayLength)
or Array(element0, element1, ..., elementN)
property: length
methods: concat, join, pop, push, reverse, shift, slice, splice, sort, unshift
myArray = new Array("Wind","Rain","Fire");
myArray[0] // returns "Wind"
myArray.pop() // removes and returns "Fire"
myArray.shift() // removes and returns "Wind"
myArray.length // returns 1
property: PI
methods: abs, sin, cos, tan, asin, acos, atan, exp, log, ceil, floor, min, max, pow, round, sqrt
Math.PI is 3.141592...; Math.abs(-1) is 1;
Math.cos(0) is 1; Math.log(1) is 0;
Math.floor(3.1) is 3; Math.min(4,5) is 4;
Math.pow(2,3) is 8; Math.sqrt(16) is 4
property: length
HTML methods: anchor, link, big, bold, etc.
other methods: concat, indexOf, lastIndexOf, split, splice, substr, toLowerCase, toUpperCase
s1 = new String("Hello") //creates a String object
s1.length // returns 5
s1.bold() // returns <b>Hello</b>
s1.lastIndexOf("l") // returns 3
s1.toUpperCase() // returns "HELLO"
Date object object for displaying date and time today = new Date();
constructor objectName = new objectType ( param1 [,param2] ...[,paramN] ) myobject = new Car ("red", "fast", "sporty")
destructor delete objectName delete myobject
current object this[.propertyName] <input type="button" value="Do something to the form" onclick="myFunction(this.form)">
for..in for (variable in object) { statements } for (var i in obj) { result += obj_name + "." + i + " = " + obj[i] + "" }
with with (object){ statements} var a, x, y; var r=10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI/2);}

Event Handlers

handler User event (action/trigger) Applies to Examples
onClick User clicks form element or link all buttons, checkboxes, links <input type="button" value="Calculate" onClick="compute(this.form)">
onChange User changes value of element text fields, textareas, select lists <input type="text" onChange="alert('Sorry, this value is read only.')">
onFocus User gives input focus to window or form element windows and all form elements <input type="text" onFocus="this.select()">
onBlur User removes input focus from window or form element windows and all form elements <input type="text" onBlur="updateValue(this.form)">
onMouseOver User moves the cursor over a link using the mouse links, images <a href="home.htm" 
onMouseOver="window.status('Click this link to go to my home page.')">
My Home Page</a>
onMouseOut User moves cursor off of a link using the mouse links, images <a href="home.htm" 
onMouseOut="alert('Why didn\'t you click?')">
My Home Page</a>
onLoad User loads the page in the browser document body, images <body onLoad="startAnimation()">
onUnload User exits the page in the browser document body <body onUnload="stopAnimation()">

Images and Animations

Object Method or Attribute Description Examples
image Image() constructor to create an image object var img = new Image()
image src set the URL of the image object img.src = "pic2.jpg"
form element name, src image tag in form of HTML document <img name="animation" src="pic1.jpg">
form element src sets or gets the URL of the image element document.forms[0].animation.src = img.src
window timerID = setTimeout(method, delay) waits delay milliseconds then calls method function animate() {
   timerID = setTimeout('animate()', 1000);
   timerRunning = true;
window clearTimeout(timerID) stops the animation function stopAnimation() {
   if (timerRunning) clearTimeout(timerID);
   timerRunning = false;

To Do After Class