2.3 - JavaScript Language¶

Context¶

Everything in JavaScript is an object. Objects are instances of a class. Objects contain data and have functions that can manipulate that data. Functions of an object have a context in which they work. Their context is defined by the data they can access and the current state of that data. The idea that every function in JavaScript is executed from a “context” is central to understanding how JavaScript works. Let’s walk through some examples. If a function is called because a user clicked on a button, then the function is executed in the context of the HTML button element. If a function is called from code loaded from a JavaScript file, then it is executed in the context of the global address space. If a function is called from inside an object, then its context is that object. There is a keyword in JavaScript that always references the context from which a function is called. The keyword is called this. The keyword this in Java, C++ and other object-oriented programming languages means something totally different. Do not get them confused.

This is so important that it need to be repeated. In JavaScript, the keyword this references the context from which a function is called. You will see how to use this in powerful ways as you get more experience with JavaScript.

Classes and Objects in JavaScript¶

Defining classes and objects in JavaScript can be confusing, especially if you expect JavaScript to behave like other languages you know. Since we will be developing all of our WebGL code as objects, we need to specifically discuss how JavaScript implements object oriented programming.

A class is defined in the same way a normal function is defined. The function definition is basically the constructor of the class. If you call the function in the normal way, it will act like a normal function. If you use the new command in front of the function call you are creating an object of that class. Hopefully an example will make this clearer. Here is a simple function definition.

function Example(a,b,c) {
  // Do some stuff
}

You can call this function in the normal way and it will perform some processing, like this:

Example(alpha, beta, gamma);

Or, you can create an object from the definition like this:

var my_object = new Example(alpha, beta, gamma);

When you create an object, any data defined inside the function is retained inside the object and the data can be accessed and modified at a later time.

Public and Private Data in a Class¶

By default, variables declared inside a function that defines a class are private. In the following example, all of the data and functions are private.

function ExampleClass(a,b,c) {
  // Private class variables
  var s,t,u;

  // Private functions
  function _innerOne() {
    // can manipulate s, t, and u
  }

  function _innerTwo() {
    // can manipulate s, t, and u
  }
}

This is an example of an immutable object in JavaScript. An object created from this class can’t be modified because it has no public data or public functions. To make variables or functions public you add them to the object as properties. Properties of an object are accessed using dotted notation, as in object.property. Since JavaScript is an interpreted and dynamic language, new properties can be added to an object at any time. This can cause hard to find errors if you misspell property names. Instead of manipulating an existing property, a misspelled property name will add an new unwanted property to an object. So watch your spelling!

When an object is created by calling the new command, the this keyword is a reference to the new object (just like in Java and C++). Therefore, you can prefix any variable or function with the this keyword to make them public. Below is an example class definition that includes both private and public data and functions.

function ExampleClass(a,b,c) {
  // Private class variables
  var s,t,u;

  // Public class variables (actually properties of the object)
  this.m = value1;
  this.n = value2;

  // Public function
  this.doSomething = function () {
    // can manipulate all private and public data
    // can call all private and public functions
  }

  // Private function
  function _innerOne() {
    // can manipulate all private and public data
    // can call all private and public functions
  }
}

If we make an object from this example class like this:

var my_object = new ExampleClass(alpha, beta, gamma);

Then the following statements are valid because they are accessing the public members of the object.

my_object.doSomething();
my_object.m = 5;

However, the following statements are invalid because they are attempting to use the private members of the object.

my_object._innerOne();  // would cause an error
my_object.s = 5;        // would cause an error

But wait! The above example has a major flaw. The value of the keyword this changes with context. When the object is actually used, the keyword this will take on various other values besides a reference to the object. This will cause the code to fail. The solution is to not use the keyword this for accessing public members. We will use this in the constructor to get a reference to the object, not use it in the member functions.

The example below shows how this works. When the constructor is executed the keyword this will be a reference to the new object because of the new command context. It is a relatively standard practice to use a private variable called self to store a reference to the new object inside the object itself. Then the local private variable self is used throughout the rest of the class definition.

function ExampleClass(a,b,c) {

  var self = this; // store a local reference to the new object

  // Private class variables
  var s,t,u;

  // Public class variables (actually properties of the object)
  self.m = value1;
  self.n = value2;

  // Public function
  self.doSomething = function () {
    // can manipulate all private and public data using self.property
    // can call all private and public functions using self.property
  }

  function _innerOne() {
    // can manipulate all private and public data using self.property
    // can call all private and public functions using self.property
  }
}

You are encouraged to re-read the above description. Often the second reading makes more sense.

Some Examples¶

In the WebGL demo code below there are two examples of JavaScript class definitions. Do not attempt to understand the functionality of the code at this time, but rather exam the structure of the class definitions. As you study the examples, please note that:

• All code that is not inside a member function composes the constructor of the class. This code executes once when objects of the class are created.
• Using strict mode, which requires that all variables be defined before they are used, means that the constructor code is sometimes not contiguous.
• Notice how the variable self is used to define and access the public members of an object.
• The important thing to read in these examples is the comments!

Coding Standard¶

Before leaving this discussion of JavaScript, please review the coding standard we will be using.

• Always include "use strict"; to force the declaration of variables.

• Avoid global variables whenever possible.

• Use JSLint to check for errors. (The Pycharm IDE will do this for you.)

• Use two-space indentation.

• Use shorthand for conditional statements where appropriate: var results = (test === 5) ? alert(1) : alert(2);

• The closing brace should be on the same indent as the original statement:

  function func() {
    return {
      "name": "Batman"
    };
  }
  

• Naming conventions

  • Constructors start with a capital letter.

  • Methods/functions start with a small letter.

  • Methods/functions should use camel case. thisIsAnExample

  • Variables should always use an underscore between words. this_is_an_example

  • When appropriate, include the variable type in the name. value_list

  • Element ID’s and class names should always use an underscore between words.

  • Private methods should use a leading underscore to separate them from public methods.

  • Abbreviations should not be used in names.

  • Plurals should not be used when assigning names.

  • Comments should be used within reason.

  • Use YUIDoc to document functions.

    /**
     * Reverse a string
     *
     * @param  {String} input_string String to reverse
     * @return {String} The reversed string
     */
    function reverseString(input_string) {
      // ...
      return output_string;
    };
    

Glossary¶

JavaScript

JavaScript is a high-level, dynamic, untyped, and interpreted programming language that is used to manipulate the HTML and CSS code of a web page after the code has been downloaded to a client.

class

A construct that holds data and functions that can manipulate that data.

object

An instance of a class. For example, a class might hold data and functions related to an automobile. Multiple instances of the class can be created to store specific data about individual automobiles.

object property

A specific piece of data stored in an object.

JavaScript this keyword

A builtin variable in JavaScript that always references the context in which a function is executing.