More resources
If you like this, you might also enjoy:
- Part 2 of the JavaScript in small bites series.
- The Y Combinator in JavaScript.
-
JavaScript: The Good Parts
. Exactly that.
-
JavaScript: The Definitive Guide
. The best reference on JavaScript.
- Doug Crockford's site. Crockford is a JavaScript master.
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: