Some basic Javascript programs.

Getting Started

Normally Javascript is used in tandem with HTML. HTML is a markup language and it’s details are not the point of this post. I thus offer two ways for you to get your feet wet.

Zero setup

I whipped up a simple text environment here where you can type Javascript and try it out directly in your web browser. There’s no save functionality, but also no setup required: just type and press the button.

Saving your work

To save your work, you need a text editor. Notepad is a bare-bones text editor that comes with Windows; TextEdit on OS X has a text editor option; any other OS comes with real text editors installed by default (Kate, Gedit, StyledEdit, vim, gvim, emacs, xemacs, medit, leafpad, …). My current suggestion for a good bells-and-whistles text editor is Geany; it’s technically a lightweight IDE but it is my favorite easy-to-learn text editor as well.

In your text editor, make the following file:

<html><head><title>demo</title></head><body><script>

</script></body></html>

Save the file somewhere you can find it and name it whatever you want to name it.html. Open your favorite web browser and drag the icon of the saved file into the browser window.

All your Javascript will go between the two lines noted above. To see what the result of an edit does, save the file and then in the browser reload the document (F5 or Ctrl+R).

Generating Content

I mentioned yesterday that the interaction system in Javascript (the DOM) is very large. Let’s start with a simple element of that system: the ability to create paragraphs and append them to a document.

To create a paragraph we need to invoke the createElement function that is stored inside the object referred to by the document variable. When we invoke the function we need to tell it what kind of element we want; in this case that’s a "p" for “‍paragraph‍”. So the full invocation looks like document.createElement("p"). The result of this invocation is a new paragraph object; we’ll want this object later so we’ll store it in a variable, like so: p = document.createElement("p").

Paragraph objects have inside them text, which we can access using the innerHTML key; thus we might write p.innerHTML = "example". Once we set up the paragraph, we want to tell the document where it belongs; the simplest place is at the end of the current body of the document. Thus we have

p = document.createElement("p")
p.innerHTML = "example"
document.body.appendChild(p)

The power of generated content comes out when we do repetition or computation; consider, for example, the following:

n = 99
while ( n > 0 ) {
    p = document.createElement("p")
    p.innerHTML = n + " bottles of beer on the wall, " + 
        n + " bottles of beer. Take one down, pass it around, " + 
        (n-1) + " bottles of beer on the wall."
    document.body.appendChild(p)
    n = n - 1
}

The stupidity of this program aside, there are actually some interesting things going on.

The strangest line is probably the n = n - 1. Javascript always evaluates the right-hand side of equals signs first, so this might be more clearly written as “‍let the new value of n be the result of subtracting 1 from the old value of n.‍”
The while loop has two parts. The first, in parentheses, says when the second, in braces, should be repeated. I like to read while as “‍as long as‍” since it’s less ambiguous: “‍as long as n is greater than zero, do these actions.‍”
We see that plus signs can be used to stick numbers and strings together. We also see the use of parentheses as grouping markers, like in mathematics.
While spacing doesn’t really matter, there’s a tradition to indent things in braces, to break long lines into pieces, and to indent broken likes more. Note, though, that you do need to have a line break at the end of each action (or use a ; in liu of a line break).

One more example for today, taken from a suggestion in wikipedia:

n = 99
while ( n > 0 ) {
    p = document.createElement("p")
    p.innerHTML = "The square root of " + (n*n) + 
        " bottles of beer on the wall, the square root of " + 
        (n*n) + " bottles of beer. Take one down, pass it around, " +
        " the square root of " + ((n-1)*(n-1)) + 
        " bottles of beer on the wall."
    document.body.appendChild(p)
    n = n - 1
}

I’ll observe in passing that most programming languages use the asterisk (*) to represent multiplication because the standard keyboard doesn’t have a multiplication sign (× or ·).

Next: More interesting interaction.