CS Ed Week
© 11 Dec 2012 Luther Tychonievich
Licensed under Creative Commons: CC BY-NC-ND 3.0
other posts

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.

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.




Looking for comments…



Loading user comment form…