JavaScript in small bites, Part 2

[article index] [] [@mattmight] [+mattmight] [rss]

JavaScript is a great langauge for learning programming: you don't need any new software, and you get instantaneous feedback. "In small bites" is a by-example philosophy to language-learning: in this article, you will find code snippets showing many different ways to accomplish the same task in JavaScript. "In small bites" contrasts with the "syntax and semantics" approach to language-learning, which emphasizes top-down learning of formal grammar and specification.

Part 1 covered creating a basic JavaScript program, "Hello, World!", literal values, basic functions and basic objects.

Part 2 covers interacting with forms, object constructors, methods, prototypes and the meaning of the this keyword. The exercise is to create a hand-held calculator simulator from partially completed code.

Part 3 covers arrays, DOM tree interaction and events. The exercise is to create a simulated board game from partially completed code.

Part 4 covers (more) event-handling and how to interact with CSS from JavaScript. The exercise is to create the game Minesweeper from partially completed code.

Related resources

Forms

Forms are a natural and convenient way to interact with the user. A simple greeting program reads the value out of a field, and changes the value of an element elsewhere:

This program shows a basic model for interactive pages: add an id to every element in the HTML that will act as either an input or an output, and then use event handlers to manipulate the page. JavaScript can interact with the HTML through the document.getElementById method.

Constructors

It's tedious to construct objects with the same properties by hand. For example, you might want to create a lot of space ships. Each might have an x coordinate, a y coordinate, an x speed and a y speed:

With this approach, the speed of the ship has to be manually calculated every time. A better approach would be to create a SpaceShip that build space ships, and which that automatically calculates speed:

The keyword this in the constructor refers to the current (newly allocated) object.

Methods

It is poor design to hard-code the speed of a space ship as a field; the speed of a ship is a function if its velocity. A better approach is to define the speed of a ship using an ordinary function:

JavaScript provides a way to associate functions with objects as "methods." A method is allowed to access the fields of its associated object using the this keyword. To turn a function into a method, one can just assign a function to a field:

Of course, we could also assign the method during object initialization:

Prototypes

A popular (and efficient) way to associate methods with objects is attach methods to a constructor's prototype. Methods attached to a prototype are bound to every instance of an object automatically:

What is this?

The object bound to the keyword this depends on the current method that was invoked. If called using the object.method() form, then this is bound to the object. If called using the ordinary function call form fun(), then this gets bound to the top-level Window object. The fun.call() form allows the caller to specify the value of this is the first parameter:

Practice: A Calculator

Tie together everything you've learned so far, and make the following calculator work:

Source code: calculator.html