Professional Documents
Culture Documents
Javascript
(ECMAScript)
Javascript is a dynamically typed language. Variables are declared with the keyword var.
Common simple types are supported.
Arrays
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];
Javascript has built-in collection objects. The Array object is a dynamically typed sequence of
Javascript values. They are created with the bracket notation [] or with the new operator on
the Array object (e.g. new Array(5)).
Property Maps
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
Along with Arrays are the Object objects. They act as property maps with strings serving as
keys to dynamically typed data.
Access
…infogami.com/Javascript_in_Ten_Minu… 1/7
26-01-2011 Javascript in Ten Minutes (Javascript)
Assignment
homogenousMap["one"] = 10;
homogenousMap.two = 20;
Removal
delete homogenousMap["one"];
delete homogenousMap.two;
Iteration
Functions
var callable = function (message) { // <-- notice assignment
window.alert("Callable called with message = "
+ message);
}
function createClosure(initial) {
var res = function () {
initial = initial + 1;
window.alert("Closure with modified state "
+ initial);
}
return res;
}
function callCallable(f, x) {
f(x);
}
function composeCallables(f, g, x) {
f(g(x));
}
Functions are first-class objects. That means that they can be created dynamically, stored,
passed and returned just like any other value.
Objects
function MyObject(name, value) {
this.name = name;
this.value = value;
…infogami.com/Javascript_in_Ten_Minu… 2/7
26-01-2011 Javascript in Ten Minutes (Javascript)
}
Javascript supports prototype based object orientation. Not a class type but an object
constructor is created for new objects with particular properties. In the example above the
this keyword used to reference the ''current instance'' of the object. The this object is
essentially a property map with members accessed (and initialized) in this example with the
dot notation.
The object constructor, MyObject, is an object constructor not in how it's defined, which
looks like any other Javascript function, but in how it's ''invoked''.
var my = new MyObject("foo", 5);
The new operator before the function invokes the function with a newly construced object as
this and returns that the initialized object.
Object Prototype
Part of what makes a language object oriented is that data not only has properties but also
''behaviors''. Also known as: member functions; methods; and object messages. To implement
a member function in Javascript one would be tempted to write something like what's below
based on the member initialization exampled above.
function BadObject(data) {
this.data = data
this.memberFunction = function () {
// ...functions on data...
}
}
While the code above will work without error, it does create a new closure for each member
function for each new instance of the object. What's really required is a class level function
that works on instance data. But remember, Javascript objects aren't class based but
prototype based. So how do we implement "class" level member functions? (Skip to
Implementation) Better yet, how do we implement "class" level members functions in general?
The internal object member, prototype, has language defined significance in that it is used
for resolving property names if the property isn't found in the current property map. It's
considered internal because, while the instance's prototype member is ''inherited'' from the
''constructor's'' prototype member, it cannot be accessed directly from the object instance
itself. The defined prototype member is a property map itself which holds members for
property name resolution. Consider the example below:
var parentPropertyMap = {"bar": "I'm the bar"};
…infogami.com/Javascript_in_Ten_Minu… 3/7
26-01-2011 Javascript in Ten Minutes (Javascript)
}
ChildObject.prototype = parentPropertyMap;
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
Example Code
//////////////////////////////////////
// Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
///////////////////////////////////////
// Array
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];
///////////////////////////////////////
// Property Map
//
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
///////////////////////////////////////
// Functions as values
//
var callable = function (message) { // <-- notice assignment
window.alert("Callable called with message = "
+ message);
}
function createClosure(initial) {
var res = function () {
…infogami.com/Javascript_in_Ten_Minu… 5/7
26-01-2011 Javascript in Ten Minutes (Javascript)
initial = initial + 1;
window.alert("Closure with modified state "
+ initial);
}
return res;
}
///////////////////////////////////////
// Functions as arguments
//
function callCallable(f, x) {
f(x);
}
function composeCallables(f, g, x) {
f(g(x));
}
///////////////////////////////////////
// Objects
//
function MyObject(name, value) {
this.name = name;
this.value = value;
}
///////////////////////////////////////
// Objects with Member Functions
//
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
///////////////////////////////////////
// Demo Utilities
//
function quote(message) {
return "\"" + message + "\"";
}
///////////////////////////////////////
// HTML Invoked demonstration
//
//
function main() {
window.alert("Integer = " + intValue);
window.alert("Float = " + floatValue);
window.alert("String = " + stringValue);
…infogami.com/Javascript_in_Ten_Minu… 6/7
26-01-2011 Javascript in Ten Minutes (Javascript)
callCallable(closure);
composeCallables(callable, quote, "My Message");
…infogami.com/Javascript_in_Ten_Minu… 7/7