JavaScript in small bites, Part 1

[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.

More resources

If you like this, you might also enjoy:

A JavaScript program from scratch

One of the great things about JavaScript programming is that you don't need to buy anything to get started. You just need a web browser like Internet Explorer or Firefox, and a text editor like Windows Notepad, or Apple's TextEdit (both come pre-installed). JavaScript programs are embeddable directly in web pages, so to get started, just create a new .html file in the text editor of your choice.

Once you've created the file, add the tags that indicate the document is an HTML document:

Then, add a body tag, which is where you'll place all of the content for a page:

Hello, World!

There are many ways to write the ubiquitous "Hello, World!" program in JavaScript. The simplest "Hello, World!" doesn't use any JavaScript at all:

produces:

But, of course, we can also use JavaScript to write the content onto the page:

produces:

Whenever we want to introduce a script to a part of a page, we just use a <script> tag, and put JavaScript inside of it. The text document.write refers to a procedure that writes whatever string it receives to the page.

A more annoying way to write a "Hello, World!" program is to use an alert pop-up:

To see what this page does, click here.

Yet another way to write "Hello, World!" is to access the DOM Tree, and use JavaScript to modify HTML after it's been rendered:

produces:

The procedure document.getElementById grabs ahold of an object connected to the p tag with id some-id. The innerHTML attribute of this object can be used to change the HTML inside of the tag.

Some consider directly modifying the innerHTML property to be "bad style." (I don't.) The proper style would create a new HTML element and insert it:

produces:

The procedure appendChild adds a new HTML element at the end of a tag The procedure document.createTextElement creates a new plaintext HTML element.

Variables and values

JavaScript, just like most other programming languages, has a way to bind a name to a value (like PI to 3.14, or speed to 100).

To declare a variable name in JavaScript, use var name = value ; For example:

produces:

One can also change the value of an existing variable by using the assignment (=) operator:

produces:

Literal values

JavaScript has a rich syntax for literal values--values that can be expressed without resorting to computation.

In JavaScript, the basic literals are numbers, strings and Booleans:

produces:

In JavaScript, an object is a structure with properties (like "height = 13", "name = Billy"), and an object literal denotes an object.

produces:

The format for an object literal is to enclose a (comma-separated) sequence of fieldname : value entries between curly braces: { }. To access a property (also known as field, member or attribute) of an object, one can use the object.field notation.

In JavaScript, an array is an ordered collection of values, and literal arrays are constructed from the bracket syntax: [ ]:

produces:

Functions

Functions in JavaScript are values that encode a computation. These computations transform inputs into outputs.

produces:

Functions can also be recursive:

produces:

Functions can also be iterative:

produces:

Objects

The object literal syntax is only one way to create an object. Here are four ways to create an object with two fields:

produces:

There are several ways to access the field of an object:

produces:

One can also iterate over the fields of an object using a for loop:

produces: