Client-side
JavaScript

Parke Godfrey
30 October 2012
CSE-2041

Credits

These slides are based in part on ones from the following sources.

JavaScript in a nutshell

JavaScript in a nutshell (p. 2)

History of JavaScript

Why a functional programming language for the Web?

And not a pure O-O, strongly typed language (like Java)?

Functional Aspects

Functions offer an abstraction strategy.

Can assign functions to variables

function square(x) {
    return x * x;
}

var f = square;
var g = f(3);

alert(g) 
9

Can store functions in arrays

function square(x) {
   return x * x;
}
var f = square;
var g = f(3);

function cube(x) { return x * square(x); }
var mix = [square, f, cube]; 
var h = mix[2](3);

alert(h) 
27

Can pass functions as arguments

function double(x) { return x * 2; }
function third(x)  { return x / 3; }
function triple(x) { return x * 3; }

function operate(f) 
{
   var nums = [1, 2, 3];
   for (var i = 0; i < nums.length; i++) {
       var num = nums[i];
       alert(num + “ ” + f(num));
   }
}

operate(third) 
.333 .666 1.

Can return functions from functions

function randomFunct() {
  if(Math.random() < 0.5) {
     return square;
  } else {
     return double;
  }
}

var f3 = randomFunct();
alert(f3(5)) 
either 25 or 10

Functions can be anonymous

function square(x) { return(x*x); }
⇔
var square = function(x) { return(x*x); };

randomFunc
⇔
function randomFunct2() {
  if (Math.random() > 0.5) {
     return function(x) { return(x*x); };
  } else {
     return function(x) { return(x*2); };
  }
}

Functions can be closures

function makeMultiplierFunction(m) {
  return function(n) { return(n*m); };
}

var test = 10;
var f = makeMultiplierFunction(test);
alert(f(7)) 
70

test = 100;
alert(f(7)) 
70   // Still returns 70

Abstraction with functions
output over an array

function output(array) {
    for (var i = 0; i < array.length; i++) {
        alert(array[i]); 
    }
}

output([12, 76, 30]);

Abstraction with functions
process an action for each in an array

function process(array, action) {
    for (var i = 0; i < array.length; i++) {
        action(array[i]); 
    }
}

process([12, 76, 30], alert);

Abstraction with functions
sum up an array of numbers

function sum(array) {
    var result = 0;
    process(array, function(x) { result += x; });
    return result;
}

alert(sum([12, 76, 30]);

Abstraction with functions
manage an operation to aggregate an array

function manage(array, seed, how) {
    process(array, function(x){seed = how(x,seed);});
    return seed;
} 

manage([12, 76, 30],0,function(a,b){return a+b;})

Running JavaScript

W3School's JavaScript Tutorial is quite worthwhile.

JavaScript Language Features
“associative arrays”

JS has all the usual suspects, as sketched above.

JS has arrays.


Does JS have associative arraysMap, in Java-speak?

JavaScript for HTML

How to attach JS scripts to an HTML document?


How does a JS script refer to the elements of the HTML document?