Javascript Introduction

Lecture Notes for CS349W
Fall Quarter 2008
John Ousterhout

Interactive Web pages need to change dynamically in response to user input. This requires 2 facilities:
- A programming language running in the browser
- API's in the language to provide access to the page's components
Javascript is not that closely related to Java; the name was a marketing gimmick.
In its early days Javascript was heavily criticized, but it's really a nice language: simple, clean, and powerful. The pieces fit together nicely.

Basic syntax similar to C:

sum = 0;
for (i = 1; i < 10; i++) {
    sum += i*i;
}

However, Javascript is a scripting language: dynamic, interpreted. Simple object system based on prototypes.
Variables:
- Untyped: types associated with values, not with variables
  - Any variable can hold any value.
- Scope is either local (within a function) or global.
- Default is global (careful!) use var to declare a local variable.
- No block-level scoping within a function.
Basic data types:
- Numbers (everything is floating-point, no integers)
- Strings (variable-length); no char type.
- Booleans
- null
- Undefined
Arrays:
- Variable-length collections of values.
- Indexed by integers.
- Creation:
```
new Array();
["a", 123, 65]
```
- May be sparse.
- Length: array.length
- Lots of methods, such as push, pop, and sort.
Statements are similar to those in C or Java.
Functions:
- Simple example:
```
function fac(x) {
    if (x <= 1) {
        return 1;
    }
    return x*fac(x-1);
}
```
- Functions are first-class objects: in the above case fac is a global variable whose value is a function. We could achieve the same affect by declaring the function this way:
```
fac = function(x) {...};
```
- Functions can be anonymous.
- Can have variable number of arguments (arguments variable).
- All functions return a value (default is value of the last statement).
Objects:
- Very simple, yet they provide object-oriented programming with a prototype-based class system.
- For starters: just a collection of name-value pairs called properties.
- Creation:
```
new Object()
{name: "Alice", age: 23, state: "California"}
```
- Referenced either like a structure or like a hash table with string keys:
```
o = new Object();
o.name = "Alice";
o["age"] = 23;\
```
- Can define new properties on-the-fly.
- Methods:
  - A property of an object can be a function; if so, it can be invoked using method notation:
```
Object o = new Object();
o.count = 0;
o.increment = function(inc) {
    if (inc == undefined) {
        inc = 1;
    }
    this.count += inc;
    return this.count;
}
```
    o.increment() returns 1
    o.increment(3) returns 4
  - There is no difference between a method and a function except the way they are invoked: method invocation provides a value for this.
  - Must use this to refer to instance variables.
- Constructor: a function named after the class.
```
function Rectangle(width, height) {
    this.width = width;
    this.height = height;
}
r = new Rectangle(26, 14);
```
- Prototypes: provide for inheritance of properties (typically methods).
  - If I say new Foo(1, 2, 3) Javascript looks for an object Foo.prototype and copies each of its properties to the new object.
    (functions are objects that can have their own properties)
  - To create a method that applies to all objects of a particular class, define it like this:
```
Rectangle.prototype.area = function() {
    return this.width*this.height;
}
```
- How object-oriented constructs are implemented in Javascript:
  - Class: a constructor function; there is no other notion of class.
  - Method: a function property on the prototype property of the constructor.
  - Instance variable: a property on an object; must be created explicitly for each object (e.g., by constructor).
  - Class variable: a property on the constructor function.
  - Static variable: a property on the function.
  - Static method: a function property on the constructor function.
- This object system is very simple, yet very flexible:
  - Can add new properties and methods at any time.
  - "Duck typing": if it looks like a duck and walks like a duck....
eval: can create and execute new code on-the-fly.

How to get Javascript into a Web page:

Inline in the HTML:

<script type=\"text/javascript\">
//<![CDATA[
Javascript goes here...
//]]>
</script>

By including a separate file:

<script type="text/javascript" src="code.js"></script>

It is important that Javascript is a "safe" language: browsers may end up executing Javascript code that comes from untrusted Web sites.
- For example, there is no file I/O from Javascript.