Client-side
JavaScript
Parke Godfrey
7 November 2011
9 November 2011
CSE-2041
Parke Godfrey
7 November 2011
9 November 2011
CSE-2041
These slides are based in part on ones from the following sources.
Is a “scripting” language.
interpreted
no typing! (well, weakly typed)
Is object-oriented (but isn't!).
everything is an object
an object can have methods (functions), just has it has fields
But JS does not
enforce encapsulation,
have classes, or
support inheritance!
Looks Java-ish.
has the same control structures
E.g., if
...else
...,
switch
,
for
,
&
while
,
has try
...catch
and throw
strings and pattern matching similar to Java
Math
same as Java
Is a functional programming language, like Lisp and Scheme.
functions are first-class objects!
variables han hold them as values
can pass them as parameters!
can be declared as anonymous
JS is not picky about the number of parameters — or their types! — that are passed to a function
Developed by Brendan Eich at Netscape in 1995.
Netscape needed a client-side scripting language to support dynamic behaviour.
First named Mocha, then LiveScript.
Re-branded as JavaScript when Netscape added support for Java (in agreement with Sun).
Submitted in 1996 to Ecma International for consideration as an industry standard, resulting in standardized version named ECMAScript.
Was to be declarative and simple.
Eich wanted to use Lisp or a derivative.
The Netscape bosses said it had to look like Java.
And not a pure O-O, strongly typed language (like Java)?
light weight
easy to implement and sandbox
is interpreted
flexible
not being strongly typed, it is not brittle, breaking on unexpected inputs
can degrade gracefully
works well for callbacks (& event-driven programming)
compositional
functions can be composed easily
allows for different sources of JS to be mixed
JS functions != Java methods. JS functions can be
global (not part of an object),
called with any number of arguments,
Functions in JS are first-class citizens. They can be
assigned to variables (and be stored in arrays),
passed as arguments to other functions,
the return result of a functions, and
anonymous.
Functions offer an abstraction strategy.
function square(x) {
return x * x;
}
var f = square;
var g = f(3);
alert(g) ⇒
9
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
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.
function randomFunct() {
if(Math.random() < 0.5) {
return square;
} else {
return double;
}
}
var f3 = randomFunct();
alert(f3(5)) ⇒
either 25 or 10
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); };
}
}
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
function output(array) {
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
}
output([12, 76, 30]);
function process(array, action) {
for (var i = 0; i < array.length; i++) {
action(array[i]);
}
}
process([12, 76, 30], alert);
function sum(array) {
var result = 0;
process(array, function(x) { result += x; });
return result;
}
alert(sum([12, 76, 30]);
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;})
Modern Web browsers implement JavaScript.
Can run JS functions by embedding them in Web pages.
Indeed! This is what it is meant for!
How? Next.
Plug-in's and extensions can expose JS for play, trial, and debugging.
Execute JS is a nice Firefox add-on for this.
There are stand-alone shells for running JS.
W3School's JavaScript Tutorial is quite worthwhile.
JS has all the usual suspects, as sketched above.
JS has arrays.
Does JS have associative arrays — Map, in Java-speak?
No. But...
We can add “fields” to any object at any time.
So this gives the functionality of maps!
JS has added syntactic sugar for making this easy to use.
How to attach JS scripts to an HTML document?
<script>
...
</script>
For external,
use the src
attribute
(and the content is empty).
For in-document, the element's content is the script.
Can go anywhere in the document.
Usually are within <head>
.
Can be inline as the value of an event attribute.
How does a JS script refer to the elements of the HTML document?
DOM is how.