Javascript Introduction

Lecture Notes for CS142
Winter Quarter 2009
John Ousterhout

• Additional reading for this topic: Javascript, The Definitive Guide, pages 1-146.
• Difference between a Web page and a Web application: in an application pages can update themselves on-the-fly. 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: object-oriented scripting language.
• 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
• Statements are similar to those in Java or C.
• Functions:
  • Simple example:

    function fac(x) {
        if (x <= 1) {
            return 1;
        }
        return x*fac(x-1);
    }
    

  • Can have variable number of arguments (arguments variable).
  • All functions return a value (default is value of the last statement).
• Arrays:
  • Variable-length collections of values.
  • Indexed by integers.
  • Creation:

    x = new Array();
    y = ["a", 123, 65]
    

  • May be sparse.
  • Length: array.length
  • Lots of methods, such as push, pop, and sort.
• Objects:
  • For starters: just a collection of name-value pairs called properties.
  • Creation:

    x = new Object()
    y = {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.
• eval: create and execute new code on-the-fly.
• How to get Javascript into a Web page:
  • By including a separate file:

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

  • Inline in the HTML:

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

  • Event handlers:

    <p onclick="alert('I told you you not to click on me!');">
    Please do not click on this text.</p>
    

• Classes:
  • Functions are objects:

    plus1 = function(value) {
        return value + 1;
    }
    

    plus1(24) returns 25
  • 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.
  • 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).
    • 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;
      }
      

    • When Javascript looks up a property (e.g. a method), if it can't find it on the object itself, it looks for it in the prototype property of its class (constructor function).
  • 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.