JavaScript

CSCE 242

University of South Carolina

José M. Vidal [1]
http://jmvidal.cse.sc.edu/talks/javascript/ [2]
An introduction to the language. This talk follows:

David Flanagan, JavaScript [3], 5th edition, 2006. Chapters 1–12.
Douglas Crockford. JavaScript: The Good Parts [4]. O'Reilly. 2008.

Examples are taken [5] from Flanagan.

JavaScript [6] resides on your browser.
JavaScript has nothing to do with Java
JavaScript is not a scripting language.
JavaScript is object-oriented, but without classes.
JavaScript is an instance of ECMAScript, ActionScript (MacroMedia Flash) is another.
JavaScript is used in DreamWeaver, Photoshop, PDF files, Dashboard.
JavaScript can be used by itself [7] or embedded: SpiderMonkey [8], Rhino [9].
Chrome [10] and firefox 3.1 [11] compile JavaScript: 20 to 40 times faster!

This code:

<html>
<head><title>Factorials</title></head>
<body>
<h2>Table of Factorials</h2>
<script>
<!--
var fact = 1;
for(i = 1; i < 10; i++) {
    fact = fact*i;
    document.write(i + "! = " + fact + "<br>");
}
-->
</script>
</body>
</html>

Looks like this.

Note that document.write does not work with XHTML.

<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.result { font-weight: bold; }  /* For elements with class="result" */
#payment { text-decoration: underline; } /* For element with id="payment" */
</style>
</head>
<body>
<form name="loandata">
  <table>
    <tr><td><b>Enter Loan Information:</b></td></tr>
    <tr>
      <td>1) Amount of the loan (any currency):</td>
      <td><input type="text" name="principal" onchange="calculate();"></td>
    </tr>
    <tr>
      <td>2) Annual percentage rate of interest:</td>
      <td><input type="text" name="interest" onchange="calculate();"></td>
    </tr>
    <tr>
      <td>3) Repayment period in years:</td>
      <td><input type="text" name="years" onchange="calculate();"></td>
    </tr>
    <tr><td></td>
      <td><input type="button" value="Compute" onclick="calculate();"></td>
    </tr>
    <tr><td><b>Payment Information:</b></td></tr>
    <tr>
      <td>4) Your monthly payment:</td>
      <td>$<span class="result" id="payment"></span></td>
    </tr>
    <tr>
      <td>5) Your total payment:</td>
      <td>$<span class="result" id="total"></span></td>
    </tr>
    <tr>
      <td>6) Your total interest payments:</td>
      <td>$<span class="result" id="totalinterest"></span></td>
    </tr>
  </table>
</form>

<script language="JavaScript">
/*
 * This is the JavaScript function that makes the example work. Note that
 * this script defines the calculate() function called by the event
 * handlers in the form. The function reads values from the form
 * <input> fields using the names defined in the HTML code above.  It outputs
 * its results into the named <span> elements.
 */
function calculate() {
    // Get the user's input from the form. Assume it is all valid.
    // Convert interest from a percentage to a decimal, and convert from
    // an annual rate to a monthly rate. Convert payment period in years
    // to the number of monthly payments.
    var principal = document.loandata.principal.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    // Now compute the monthly payment figure, using esoteric math.
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);

    // Get named <span> elements from the form.
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");

    // Check that the result is a finite number. If so, display the
    // results by setting the HTML content of each <span> element.
    if (isFinite(monthly)) {
        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
    }
    // Otherwise, the user's input was probably invalid, so display nothing.
    else {
        payment.innerHTML = "";
        total.innerHTML = ""
        totalinterest.innerHTML = "";
    }
}
</script>
</body>
</html>

Results in this.

Looks like C.
Case-sensitive.
Ignores spaces.
Semicolons optional, but use them;

Numbers
Strings
Booleans
null is "no value"
undefined is for declared but unassigned variables. Note that null == undefined
Objects

All numbers are floating point values: 0.1 + 0.2 [12]
Can use exponential notation: 6.02E23

NaN: is not a number
Infinity
Number.MAX_VALUE
Number.MIN_VALUE: closest to zero
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY

"" Empty string
'hello'
"hello"
"Jim's scooter."
'<a href="http://me.com">me</a>'
"The End.\n"
No character type.

"Hello, " + name + "!"
'steve'.length [13]: num characters in s.
'steve'.charAt(1) [14]: character at position 1.
'steve'.substring(1,4) [15]: second, third, and fourth characters.
'steve'.indexOf('e') [16]: first position of 'e'.
Number('1.0') + Number('2') [17]: converts strings to a number.

if (1) {'yes'} else {'no'} [18]: 1 is truthy
if (0) {'yes'} else {'no'} [19]: 0 is falsy
if (1 == 0) {'yes'} else {'no'} [20]: a real Boolean value.
'What he said is ' + (1 == 0) [21]: Booleans get converted to whatever automatically.

You can define your own functions:

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

Or, do it the lambda way:

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

square(5); [22]

More fun: (more later)

var plusone = function (x) {return x+1};
var doublef = function (f,x) {return f(f(x))};

doublef(plusone,5) [23]

An object is a collection of named values (a map, a hashtable).
image.width
document.myform.button
Create one with:

//The new operator pretends we have Classes

var o = new Object();
var now = new Date();


//Object literals are much faster, aka JSON

var point = {x:2.3, y:-1.2};
var rectangle =
        {
                upperLeft: {x:2,y:2},
                lowerRight: {x:4, y:0}
        };

Arrays are a lot like objects.
They are also implemented as maps.
Create them with

var a = [1, "hello", true, {x:1, y:2}, 4];

a; [24]

You can get the current time with var now = new Date() [25]
Or create your own time: var bday = Date(2007, 2, 15)
bday.setFullYear(bday.getFullYear() + 1)

/^HTML/
/[1-9][0-9]*/
/\bjavascript\n/i
more later...

Like Integer in Java.

//primitive data type
var s = "hello";

//an object.
vas S = new String("hello");

Don't use them.

Primitive types are passed by value.
Reference types (objects, arrays, functions) are passed by reference.
By value:

var n = 1;  // Variable n holds the value 1
var m = n;  // Copy by value: variable m holds a distinct value 1

function add_to_total(total, x)
{
    total = total + x;  // This line changes only the internal copy of total
}

add_to_total(n, m);

if (n == 1) m = 2;  // n contains the same value as the literal 1; m is now 2

m; [26]

By reference:

var xmas = new Date(2007, 11, 25);

var solstice = xmas;  // Both variables now refer to the same object value

solstice.setDate(21);

xmas.getDate();  // Returns 21, not the original value of 25

(xmas == solstice)  // Evaluates to true

// The two variables defined next refer to two distinct objects, both
// of which represent exactly the same date.
var xmas = new Date(2007, 11, 25);
var solstice_plus_4 = new Date(2007, 11, 25);


//totals will be different after function returns
function addToTotals(totals, x)
{
    totals[0] = totals[0] + x;
    totals[1] = totals[1] + x;
    totals[2] = totals[2] + x;
}
var t = [1,2,3];
addToTotals(t,5);

xmas != solstice_plus_4 [27]

t; [28]

Are untyped.
Can declare and initialize on the same line:

var message = "hello";
var i=0, j=0, k=1;

Must declare before reading (writing OK in global scope, but don't)

Global variables have global scope.
Local variables have function scope: there is no block-level scope.

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function nested() {
        var scope = "nested scope";
        alert("1-" + scope); //prints, what?
    }
    nested();
    scope = "local scope";
    for (var i =0; i < 10; i++){
        var scope = "nested scope";     
    }
    alert("2-" + scope);
}

checkscope()

You can use local variable before its declared. It will be undefined.
But, best practice is to declare all at the start of function.

var scope = "global";
function checkloc() {
        alert ("1-" + scope);
        var scope = "local";
        alert ("2-" + scope);
}

checkloc()

Variables are fundamentally the same as object properties.
There is a global object which holds (as properties) all global vars.
There is a call object for local variables.
There is an execution context in which every function (program) executes.
Client side JavaScript uses a global execution context to give you access to the browser.

+ - * / % ++ --
== is equal to.
- '1' == true [29]
- var v = {x:1}; v == {x:1} [30]
- var v = {x:1}; v == v [31]
=== is identical to.
- '1' === true [32]
- var v = {x:1}; v === {x:1} [33]
- var v = {x:1}; v === v [34]

< > <= >=
Is property in object?
- var p = {x:1,y:1}; 'y' in p [35]
- var p = {x:1,y:1}; 'z' in p [36]
Is object instanceof class constructor?

Be careful with conversion. + and comparisons operators make different conversions.
1 + 2 [40]
'1' + '2' [41]
'1' + 2 [42]
'11' < '2' [43]
'11' < 2 [44]
1 + 2 + ' blind mice' [45]
'blind mice=' + 1 + 3 [46]

Deletes properties or objects (regardless of book).

var o = {x:1,y:2};

delete o.x;

delete o; 

o;

if ((a == null) || (b == "")) {
        //do something
 }
 else if (n == 3) {
         //do something else
 }
 else {
         //do something else
 }

function convert(x){
        switch(typeof x) {
        case 'number':
                return x.toString(16);
        case 'string':
                return '"' + x + '"';
        case 'boolean':
                return x.toString().toUpperCase();
        default:
                return x.toString();
        }
}

case part can have an expression.

while (count < 10){
        document.write(count + "<br/>");
 }


do {
        document.write(a[i] + "<br/>");
 } while (++i < a.length);

for (i = 0, j = 10; i < 10; i++, j--){
        sum += i * j;
 };

var d = {x:1, y:2};
for (var prop in d){
        alert(prop + ":" + d[prop]);
 }

Run [47]

function testbreak(){
 outerloop:
        for (var i = 0; i < 10; i++){
        innerloop:
                for(var j = 0; j< 10; j++){
                        if (j > 3) break;
                        if (i == 2) break innerloop;
                        if (i == 3) break outerloop;
                        alert("i=" + i + " j=" + j);
                }
        }
        alert("Final i=" + i + " j=" + j);
}

testbreak()

You can throw anything, but try to use an Error object:

function factorial (x) {
        if (x < 0) {
                throw new Error("Negative argument" + x);
        }
        for (var f = 1; x > 1; f *= x, x--);
        return f;
}

There is only one catch.

try {
        //do stuff
 }
 catch (e) {
         //only one catch, so you might need to:
         switch (e.name) {
         case 'Error':
                 //stuff
                 break;
         default:
                 throw e;
         }
 }
finally {
        //statements that always get executed
}

An object is a collections of named values, as we saw before:

//The new operator pretends we have Classes

var o = new Object();
var now = new Date();


//Object literals are much faster, aka JSON

var point = {x:2.3, y:-1.2};
var rectangle =
        {
                upperLeft: {x:2,y:2},
                lowerRight: {x:4, y:0}
        };

Properties should be an identifier, not a string or expression: object.property
You can list all properties with:

function DisplayPropertyNames(o){
        var names ="";
        for (var name in o) {
                names += name + " ";
        }
        alert(names);
}

DisplayPropertyNames(document)

You can check if a property exists with:

//If o has property named "x" then set it
if ("x" in o) {
        o.x = 1;
 }

//If "x" exists and is not undefined, set it
if (o.x !== undefined) {
        o.x = 1;
 }

These two lines give the same value:

object.property
object["property"]

Using the string version allows for runtime changes.

You can check which constructor created an object with o.constructor:
var d = new Date(); d.constructor==Date [48]
There is a toString() method but its very uninformative:
var o={x:1,y:2};alert(o.toString()); [49]
The valueOf() converts to primitive type, for some objects like:
var now = new Date();alert(now.valueOf()); [50]
o.hasOwnProperty(s) returns true if o defines s and it is not inherited.
o.propertyIsEnumerable(s) like before but s would be enumerated by a for/in loop.
isPrototypeOf(), later..

As we saw before, they are really maps.
Thus, you can do some wacky stuff:

var c = new Circle(1,2,3);
c[0] = "this is an array element of an object";

The length property is always one larger than the largest element number in the array:

var a = new Array();
a.length; [51]

var a = new Array(10);
a.length; [52]

var a = [4,5];
a.length; [53]

var a = [4,5];
a[10] = 3;
a.length; [54]

join() converts an array into a string, using a given separator:

var a =[1,2,3];
a.join('=='); [55]
reverse()

var a=[1,2,3];
a.reverse(); [56]
sort()

var a=['beta','alpha','delta'];
a.sort(); [57]

var a=[1,2,3,4];
a.sort(function(x,y){return y-x;}); [58] later...
concat(x) concatenate with x

var a=[1,2,3];
a.concat(4,5); [59]

a.concat([4,5]); [60]

a.concat([4,5],[6,7]); [61]

a.concat(4,5,[6,[7,8]]); [62] hmmm, try in firebug.
slice(start,length) returns a subset. Negative means start from end.

var a=[1,2,3,4,5];
a.slice(0,3); [63]

a.slice(3); [64]

a.slice(1,-1); [65]

a.slice(-3,-1); [66]
a.splice(start, length) modifies array deleting elements:

var a=[1,2,3,4,5,6,7,8];
a.splice(4); [67]

var a=[1,2,3,4,5,6,7,8];
a.splice(1,2); [68]

var a=[1,2,3,4,5,6,7,8];
a.splice(2,4); [69]
a.push(x) adds x to the end and pop() deletes and returns the last element.
a.unshift(x) and shift() are the same but from the beginning.

We saw before how to define functions.
These function literals are also known as lambda functions.
You can do fun stuff:

function hypotenuse(a,b){
        function square(x) {
                return x*x;
        }
        return Math.sqrt(square(a) + square(b));
}

If called with too many arguments, they are ignored.
If called with too few, the extra vars are set to undefined.

//Copy property names to a.
//If a is missing, create a new a.
function copyPropertyNamesToArray(o, /*optional*/ a){
        if (!a) {
                a = [];
        };
        for (var p in o) {
                a.push(p);
        }
        return a;
}

Within a function arguments refers to the arguments array and callee is a property of it.
callee refers to the function that is currently being executed, used in recursive lambda functions

function getArguments(){
        //can't use join() because arguments is an object (that looks like an array).
        var result = "";
        for (var i =0; i< arguments.length; i++){
                result += arguments[i] + " ";
        }
        return result;
}

function getCaller(){
        return arguments.callee;
}

getArguments(1,2,3) [70]

getArguments('hi', 2) [71]

getArguments() [72]

getCaller() [73]

f = function(x) {
        if (x <= 1){
                return 1;
        }
        return x * arguments.callee(x-1);
}

// We define some simple functions here
function add(x,y) { return x + y; }
function subtract(x,y) { return x - y; }
function multiply(x,y) { return x * y; }
function divide(x,y) { return x / y; }

// Here's a function that takes one of the above functions
// as an argument and invokes it on two operands
function operate(operator, operand1, operand2)
{
    return operator(operand1, operand2);
}

// We could invoke this function like this to compute the value (2+3) + (4*5):
var i = operate(add, operate(add, 2, 3), operate(multiply, 4, 5));

// For the sake of the example, we implement the functions again, this time
// using function literals within an object literal;
var operators = {
    add:      function(x,y) { return x+y; },
    subtract: function(x,y) { return x-y; },
    multiply: function(x,y) { return x*y; },
    divide:   function(x,y) { return x/y; },
    pow:      Math.pow  // Works for predefined functions too
};

// This function takes the name of an operator, looks up that operator
// in the array, and then invokes it on the supplied operands. Note
// the syntax used to invoke the operator function.
function operate2(op_name, operand1, operand2)
{
    if (typeof operators[op_name] == "function")
        return operators[op_name](operand1, operand2);
    else throw "unknown operator";
}

// We could invoke this function as follows to compute
// the value ("hello" + " " + "world"):
var j = operate2("add", "hello", operate2("add", " ", "world"))
// Using the predefined Math.pow() function:
var k = operate2("pow", 10, 2)

i; [74]

j; [75]

k; [76]

You can do o.m = myFunction; and then o.m(); calls myFunction
Its how JavaScript does OOP.
Within a method, this refers to the object.

var calculator = {
        operand1: 1,
        operand2: 3,
        compute: function () {
                this.result = this.operand1 + this.operand2;
        }
};

calculator.compute(); [77]

calculator.result [78]

Functions are objects, thus they can have properties!
The length of a function is the number of arguments it was declared with.

function foo(x,y,z){};
foo.length [79]

Useful when your function needs to remember state

getuid.id=0;

function getuid() {
        return getuid.id++;
}

getuid() [80]

Used to invoke a function f as if it were a method of object o.
f.call(o,1,2)
f.apply(o,[1,2]) the same but arguments in list.

// Return an array that holds the names of the enumerable properties of o
function getPropertyNames(/* object */o) {
    var r = [];
    for(name in o) r.push(name);
    return r;
}

// Copy the enumerable properties of the object from to the object to.
// If to is null, a new object is created.  The function returns to or the
// newly created object.
function copyProperties(/* object */ from, /* optional object */ to) {
    if (!to) to = {};
    for(p in from) to[p] = from[p];
    return to;
}

// Copy the enumerable properties of the object from to the object to,
// but only the ones that are not already defined by to.
// This is useful, for example, when from contains default values that
// we want to use if they are not already defined in to.
function copyUndefinedProperties(/* object */ from, /* object */ to) {
    for(p in from) {
        if (!p in to) to[p] = from[p];
    }
}

// Pass each element of the array a to the specified predicate function.
// Return an array that holds the elements for which the predicate
// returned true
function filterArray(/* array */ a, /* boolean function */ predicate) {
    var results = [];
    var length = a.length;  // In case predicate changes the length!
    for(var i = 0; i < length; i++) {
        var element = a[i];
        if (predicate(element)) results.push(element);
    }
    return results;
}

// Return the array of values that result when each of the elements
// of the array a are passed to the function f
function mapArray(/* array */a, /* function */ f) {
    var r = [];             // to hold the results
    var length = a.length;  // In case f changes the length!
    for(var i = 0; i < length; i++) r[i] = f(a[i]);
    return r;
}

// Return a standalone function that invokes the function f as a method of
// the object o.  This is useful when you need to pass a method to a function.
// If you don't bind it to its object, the association will be lost and
// the method you passed will be invoked as a regular function.
function bindMethod(/* object */ o, /* function */ f) {
    return function() { return f.apply(o, arguments) }
}

// Return a function that invokes the function f with the
// specified arguments and also any additional arguments that are
// passed to the returned function. (This is sometimes called "currying".)
function bindArguments(/* function */ f /*, initial arguments... */) {
    var boundArgs = arguments;
    return function() {
        // Build up an array of arguments.  It starts with the previously
        // bound arguments and is extended with the arguments passed now
        var args = [];
        for(var i = 1; i < boundArgs.length; i++) args.push(boundArgs[i]);
        for(var i = 0; i < arguments.length; i++) args.push(arguments[i]);
        
        // Now invoke the function with these arguments
        return f.apply(this, args);
    }
}

Functions in JavaScript are lexically scoped.
Like Java, like most languages.
Thus, this works:

function hypotenuse(a,b){
        function squarea() {
                return a*a;
        }
        function squareb() {
                return b*b;
        }
        return Math.sqrt(squarea() + squareb());
}

hypotenuse(2,2); [81]

When a function is invoked a call object is created which stores arguments and local variables.
This call object can be used as a namespace:

(function () { //anonymous function
        var a = 123; //this variable will dissapear at the end of the function
        var b = 'hello';
        //some more code here
 })(); //invoke my anonymous function

In a closure we use the function as data and rely on lexical scoping to give more information to this function:

var x = "global";
function f() {
    var x = "local";
    function g() { //creates a closure
        alert(x);
    };
    return g();
}

x; [82]

f(); [83]

That might not appear surprising, but how about this?

var x = "global";
function f2() {
        var x = "local";
        function g() { //creates a closure
                alert(x);
        };
        return g;
}
var g = f2();

x; [84]

g(); [85]

More examples...

function makefunc(x) {
        return function() {
                return x;
        }
}

var a = [makefunc(0), makefunc(1), makefunc(2)];

a[0](); [86]

a[1](); [87]

a[2](); [88]

//
// This function adds property accessor methods for a property with 
// the specified name to the object o.  The methods are named get<name>
// and set<name>.  If a predicate function is supplied, the setter
// method uses it to test its argument for validity before storing it.
// If the predicate returns false, the setter method throws an exception.
// 
// The unusual thing about this function is that the property value 
// that is manipulated by the getter and setter methods is not stored in
// the object o.  Instead, the value is stored only in a local variable
// in this function.  The getter and setter methods are also defined
// locally to this function and therefore have access to this local variable.
// Note that the value is private to the two accessor methods, and it cannot
// be set or modified except through the setter.
// 
function makeProperty(o, name, predicate) {
    var value;  // This is the property value

    // The setter method simply returns the value
    o["get" + name] = function() { return value; };

    // The getter method stores the value or throws an exception if
    // the predicate rejects the value
    o["set" + name] = function(v) { 
        if (predicate && !predicate(v))
            throw "set" + name + ": invalid value " + v;        
        else
            value = v;
    };
}

// The following code demonstrates the makeProperty() method 
var o = {};  // Here is an empty object

// Add property accessor methods getName and setName()
// Ensure that only string values are allowed
makeProperty(o, "Name", function(x) { return typeof x == "string"; });

o.setName("Frank");  // Set the property value

o.getName() [89]

o.setName(123) [90]

o.getName() [91]

o.setName('Joe') [92]

o.getName() [93]

// 
// This function implements a breakpoint. It repeatedly prompts the user
// for an expression, evaluates it with the supplied self-inspecting closure,
// and displays the result.  It is the closure that provides access to the
// scope to be inspected, so each function must supply its own closure.
// 
// Inspired by Steve Yen's breakpoint() function at
// http://trimpath.com/project/wiki/TrimBreakpoint
//
function inspect(inspector, title) {
    var expression, result;

    // You can use a breakpoint to turn off subsequent breakpoints by
    // creating a property named "ignore" on this function.
    if ("ignore" in arguments.callee) return;

    while(true) {
        // Figure out how to prompt the user
        var message = "";
        // If we were given a title, display that first
        if (title) message = title + "\n";
        // If we've already evaluated an expression, display it and its value
        if (expression) message += "\n" + expression + " ==> " + result + "\n";
        else expression = "";
        // We always display at least a basic prompt:
        message += "Enter an expression to evaluate:";

        // Get the user's input, displaying our prompt and using the
        // last expression as the default value this time.
        expression = prompt(message, expression);

        // If the user didn't enter anything (or clicked Cancel),
        // they're done and so we return, ending the breakpoint.
        if (!expression) return;

        // Otherwise, use the supplied closure to evaluate the expression
        // in the scope that is being inspected. 
        // The result will be displayed on the next iteration.
        result = inspector(expression);
    }
}

function factorial(n) {
        var inspector = function(x) {
                return eval(x);
        }
        inspect (inspector, "Entering factorial()");
        var result = 1;
        while (n > 1){
                result = result * n;
                n--;
                inspect(inspector, "factorial() loop");
        }

        inspect(inspector, "Exiting factorial()");
        return result;
}

inspect(function (x) {return eval(x);}, 'Hello') [94]

factorial(5); [95]

var f = new Function("x", "y", "return x*y");

//same as this
function f(x,y){
        return x*y;
}

Allows you to generate code dynamically.
Slow.
These functions do not use lexical scoping.

JavaScript implements objects using the idea of a prototype, as opposed to classes.
An object constructor (cf. factory pattern [96]) implements the “class”

function Rectangle(w, h){
        this.width = w;
        this.height = h;
}

var r1 = new Rectangle(2,3);

r1 [97]

Adding a function as a property would lead to each instance having a copy of all functions.
Instead, there is a prototype for each constructor which contains all the properties every instance gets.

function Rectangle(w, h){
        this.width = w;
        this.height = h;
}

Rectangle.prototype.area = function() {
        return this.width * this.height;
}
        
var r1 = new Rectangle(2,3);

r1.area() [98]

Thus, an object inherits properties from its prototype object.
Use hasOwnProperty("area") to determine if "area" is not inherited.
A prototype object can inherit from its own prototype object, and so on.......
The properties' values are not copied at creation time. They are dynamically looked up at runtime.
Look up happens only when reading the value of a property. When writing, the object obtains its own copy of the property, if inherited.

//Create a new object which inherits from o.
function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}

var human = {
    name: "Floyd",
    age: 33,
    sex: "Male",
}

var employee = object(human);

employee.salary = 100;

employee.name; [99]

human.name = 'Pink'; [100]

employee.name; [101]

employee.name = 'Blue'; [102]

human.name; [103]

Tip: Draw graph.

// Here is a simple Rectangle class.
// It has a width and height and can compute its own area
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}
Rectangle.prototype.area = function() { return this.width * this.height; }

// Here is how we might subclass it 

function PositionedRectangle(x, y, w, h) {
    // First, invoke the superclass constructor on the new object
    // so that it can initialize the width and height.
    // We use the call method so that we invoke the constructor as a
    // method of the object to be initialized. 
    // This is called constructor chaining.
    Rectangle.call(this, w, h);

    // Now store the position of the upper-left corner of the rectangle
    this.x = x;
    this.y = y;
}

// If we use the default prototype object that is created when we
// define the PositionedRectangle() constructor, we'd get a subclass of Object.
// To subclass, rectangle, we must explicitly create our prototype object.
PositionedRectangle.prototype = new Rectangle();

// We create this prototype object for inheritance purposes, but we
// don't actually want to inherit the width and height properties that
// each Rectangle object has, so delete them from the prototype.
delete PositionedRectangle.prototype.width;
delete PositionedRectangle.prototype.height;

// Since the prototype object was created with the Rectangle() constructor,
// it has a constructor property that refers to that constructor.  But
// we want PositionedRectangle objects to have a different constructor
// property, so we've got to reassign this default constructor property.
PositionedRectangle.prototype.constructor = PositionedRectangle;

// Now that we've configured the prototype object for our subclass,
// we can add instance methods to it.
PositionedRectangle.prototype.contains = function(x,y) {
    return (x > this.x && x < this.x + this.width &&
            y > this.y && y < this.y + this.height);

You can use the prototype to add to an existing type.

String.prototype.trim = function() {
        return this.replace(
         /^\s*(\S*(\s+\S+)*)\s*$/, "$1");
}

'---' + ' hello there '.trim() + '---' [104]

String.prototype.supplant = function (o){
    return this.replace(/{([^{}]*)}/g,
                        function (a,b) {
                            return o[b];
                        }
                       );
};

var template = '<table border="{border}"' +
        '<tr><th>Last</th><td>{last}</td></tr>' +
        '<tr><th>First</th><td>{first}</td></tr>' +
        '</table>';

var data = {
        first: "Carl",
        last: "Hollywood",
        border: 2
};

template.supplant(data) [105]

Object.prototype
Array.prototype
Function.prototype
Number.prototype
String.prototype
Boolean.prototype

Get to them via the prototype.

Rectangle.prototype.toString = function () {
    return "[" + this.width + "," + this.height + "]";
}

PositionedRectangle.prototype.toString = function (){
    return "(" + this.x + "," + this.y +") " +
        Rectangle.prototype.toString.apply(this); //call superclass toString
}

// Borrow methods from one class for use by another.
// The arguments should be the constructor functions for the classes
// Methods of built-in types such as Object, Array, Date and RegExp are
// not enumerable and cannot be borrowed with this method.
function borrowMethods(borrowFrom, addTo) {
    var from = borrowFrom.prototype;  // prototype object to borrow from
    var to = addTo.prototype;         // prototype object to extend

    for(m in from) {  // Loop through all properties of the prototye
        if (typeof from[m] != "function") continue; // ignore nonfunctions
        to[m] = from[m];  // borrow the method
    }
}

// This class isn't good for much on its own. But it does define a
// generic toString() method that may be of interest to other classes.
function GenericToString() {}
GenericToString.prototype.toString = function() {
    var props = [];
    for(var name in this) {
        if (!this.hasOwnProperty(name)) continue;
        var value = this[name];
        var s = name + ":" 
        switch(typeof value) {
        case 'function':
            s += "function";
            break;
        case 'object':
            if (value instanceof Array) s += "array"
            else s += value.toString();
            break;
        default:
            s += String(value);
            break;
        }
        props.push(s);
    }
    return "{" + props.join(", ") + "}";
}

// This mixin class defines an equals() method that can compare
// simple objects for equality.
function GenericEquals() {}
GenericEquals.prototype.equals = function(that) {
    if (this == that) return true;
    
    // this and that are equal only if this has all the properties of 
    // that and doesn't have any additional properties
    // Note that we don't do deep comparison.  Property values
    // must be === to each other.  So properties that refer to objects
    // must refer to the same object, not objects that are equals()
    var propsInThat = 0;
    for(var name in that) {
        propsInThat++;
        if (this[name] !== that[name]) return false;
    }

    // Now make sure that this object doesn't have additional props
    var propsInThis = 0;
    for(name in this) propsInThis++;
    
    // If this has additional properties then they are not equal
    if (propsInThis != propsInThat) return false;

    // The two objects appear to be equal.
    return true;
}

borrowMethods(GenericEquals, Rectangle);
borrowMethods(GenericToString, Rectangle)

Once an object implements all the methods defined by a class/constructor it becomes an instance of that class!
Known as duck typing [106].

/*
 * Complex.js:
 * This file defines a Complex class to represent complex numbers.
 * Recall that a complex number is the sum of a real number and an
 * imaginary number and that the imaginary number i is the
 * square root of -1.
 */

/*
 * The first step in defining a class is defining the constructor
 * function of the class. This constructor should initialize any
 * instance properties of the object. These are the essential
 * "state variables" that make each instance of the class different.
 */
function Complex(real, imaginary) {
    this.x = real;       // The real part of the number
    this.y = imaginary;  // The imaginary part of the number
}

/*
 * The second step in defining a class is defining its instance
 * methods (and possibly other properties) in the prototype object
 * of the constructor. Any properties defined in this object will
 * be inherited by all instances of the class. Note that instance
 * methods operate implicitly on the this keyword. For many methods,
 * no other arguments are needed.
 */

// Return the magnitude of a complex number. This is defined
// as its distance from the origin (0,0) of the complex plane.
Complex.prototype.magnitude = function() {
    return Math.sqrt(this.x*this.x + this.y*this.y);
};

// Return a complex number that is the negative of this one.
Complex.prototype.negative = function() {
    return new Complex(-this.x, -this.y);
};

// Add a complex number to this one and return the sum in a new object.
Complex.prototype.add = function(that) {
    return new Complex(this.x + that.x, this.y + that.y);
}

// Multiply this complex number by another and return the product as a
// new Complex object.
Complex.prototype.multiply = function(that) {
    return new Complex(this.x * that.x - this.y * that.y,
                       this.x * that.y + this.y * that.x);
}

// Convert a Complex object to a string in a useful way.
// This is invoked when a Complex object is used as a string.
Complex.prototype.toString = function() {
    return "{" + this.x + "," + this.y + "}";
};

// Test whether this Complex object has the same value as another.
Complex.prototype.equals = function(that) {
    return this.x == that.x && this.y == that.y;
}

// Return the real portion of a complex number. This function
// is invoked when a Complex object is treated as a primitive value.
Complex.prototype.valueOf = function() { return this.x; }

/*
 * The third step in defining a class is to define class methods,
 * constants, and any needed class properties as properties of the
 * constructor function itself (instead of as properties of the
 * prototype object of the constructor). Note that class methods
 * do not use the this keyword: they operate only on their arguments.
 */
// Add two complex numbers and return the result.
// Contrast this with the instance method add()
Complex.sum = function (a, b) {
    return new Complex(a.x + b.x, a.y + b.y);
};

// Multiply two complex numbers and return the product.
// Contrast with the instance method multiply()
Complex.product = function(a, b) {
    return new Complex(a.x * b.x - a.y * b.y,
                       a.x * b.y + a.y * b.x);
};

// Here are some useful predefined complex numbers.
// They are defined as class properties, and their names are in uppercase
// to indicate that they are intended to be constants (although it is not
// possible to make JavaScript properties read-only).
Complex.ZERO = new Complex(0,0);
Complex.ONE = new Complex(1,0);
Complex.I = new Complex(0,1);

Simulate them using closures.

//The values of w and h can never be changed after the object is created.
//Constructor:
function ImmutableRectangle (w, h){
    this.getWidth = function() {
        return w;
    };
    this.getHeight = function() {
        return h;
    };
}

//Get values like this.
ImmutableRectangle.prototype.area() = function (){
    return this.getWidth() * this.getHeight();
}

Like in Java, the toString property/method can be defined to pretty print your object.

Circle.prototype.toString = function (){
    return "[Circle of radius " + this.r + ", centered at("
        + this.x + ", " + this.y + ").]";
}

Use instanceof to compare to a constructor:

if (x instanceof Array) {
        //something
 }

Does not recognize duck typing. You must define your own operator.

Needed for libraries: JSAN [107].
No namespaces, but use objects instead.

//Store all my libraries under the directory/namespace jmvidal.
var jmvidal; 
if (!jmvidal) jmvidal = {};
//define my Lib590 library
jmvidal.Lib590 = {};
jmvidal.Lib590.myfun1 = function (x) {
        //code here
};
jmvidal.Lib590.myfun2 = function (x) {
        //code here
}

See regular expressions [108]
'javascript'.search(/scr/i) [109]
'javascript'.search(/joe/i) [110]

var text='He said "Hi"';
var quote = /"([^"]*)"/g; //" find quoted text
text.replace(quote, "&ldquo;$1&rdquo;");

'1 plus 2 equals 3'.match(/\d+/g) [111] returns an array

JavaScript

CSCE 242

University of South Carolina

1 Introduction

1.1 Example

1.2 Another Example

2 Lexical Structure

3 Datatypes and Values

3.1 Numbers

3.1.1 Special Numbers

3.2 Strings

3.2.1 Working with Strings

3.3 Booleans

3.4 Functions

3.5 Objects

3.6 Arrays

3.7 Date

3.8 Regular Expressions

3.9 Wrapper Objects

3.10 Value vs Reference

4 Variables

4.1 Scope

4.1.1 var Location Does Not Matter

4.2 Variables as Properties

5 Expressions and Operators

5.1 Relational Operators

5.2 String Operators

5.3 delete Operator

6 If Statements

6.1 Switch

6.2 While

6.3 For

6.4 Labels and Break

6.5 Throw and Catch

7 Objects and Arrays

7.1 Object Properties

7.2 Objects as Associative Arrays

7.3 Universal Properties and Methods

7.4 Arrays

7.4.1 Array Length

7.4.2 Array Methods

8 Functions

8.1 Arguments to Functions

8.2 Functions as Data

8.3 Functions as Methods

8.4 Function Properties

8.4.1 Defining new Function Properties

8.4.2 apply and call

8.4.3 Utility Function Examples

8.5 Scoping

8.5.1 Call Object as Namespace

8.5.2 Closures

8.5.3 Sharing Closure Variables Among Functions

8.5.4 Breakpoints using Closures

8.5.5 Function Constructor

9 Object-Oriented JavaScript

9.1 Prototype

9.1.1 Inheritance Example

9.1.2 Inheritance via Constructor Chaining

9.1.3 Extend a Type

9.1.4 Calling Overridden Methods

9.1.5 Mixins

9.1.6 Complex Numbers Example

9.1.7 Private Members

9.2 Common Methods: toString

9.3 instanceof

10 Modules and Namespaces

11 Regular Expressions

URLs