What You Need To Know About Javascript

What is Javascript?

Javascript is the most popular “client-side scripting” language for the web. That is, it is used to write programs that your web browser reads and then executes directly on its own, rather than asking the web server to execute them for it. It's used for many other things, too. Most of the apps on your iPhone, iPad, or Android device are written in Javascript.

Javascript does amazing things to your HTML web page. Two of the coolest are

  • it allows your page to react to events, like mouse movements or key presses
  • it can rewrite HTML elements on the fly, so your page is more than it seems at first glance

We'll be using two tools that rely heavily on Javascript: SIMILE Timeline and the popcorn media framework. We'll also interact with other tools on the web – such as Google Maps – that use Javascript themselves.

Do I need to be a Code Ninja?

Definitively not! We're all just hackers here, learning what we can, stealing from the experts, and trying to get by. The objective here is to learn enough so you can modify and use other people's code. The beauty of the Internet is that anything you want to do, has almost certainly already been done by someone else. You just need to find it, read it, and steal it.

Basics

Just as with a natural language, you will need to understand some grammatical rules and learn a basic vocabulary in order to read Javascript. What follows is a very rough guide to these topics. See the "References" section below for (much) more information.

Variables, Functions, and Scripts

In a natural language, words make up sentences, which together make up paragraphs, and those together form a larger text, say a book. In Javascript, and other programming languages, there are similar structures.

Here are three very basic structures it's worth knowing about:

Statements

follow along at http://jsbin.com/acelot/2/edit#javascript.html.live Here is a basic statement in Javascript:

var greeting = "Hello, World";

This is called a variable initialization, and it follows certain rules. It begins with a standard Javascript built-in command,

var

defines a new word that can be used later on in the program,

var greeting

sets that new word equal to a value, in this case a string of characters,

var greeting = "Hello, World"

and ends with a semi-colon, so Javascript knows that the statement is complete.

Variables

Follow along at: http://jsbin.com/acelot/3/edit#javascript,html,live As you remember from basic algebra, a variable is just a name we use to talk about a value. The value of a variable can change over the course of a program. So for instance, I can say

var greeting = "Hello, World!<br>";
document.write(greeting);
greeting = greeting + " Dude, what's up?<br>"
document.write(greeting);

In Javascript, variables can be numbers, strings, or complex objects called 'arrays' and, well, 'objects'. These variables can carry variables inside them. so for instance:

var myGreeting = {};
myGreeting.start = "Hello there";
myGreeting.end = "how old are you?";
myGreeting.age = (6*7) +1
document.write(myGreeting.start + "<br>" + myGreeting.end + "<br>" + myGreeting.age);

(see this version at: http://jsbin.com/acelot/5/edit#javascript,html,live)

This defines an object called "myGreeting" which has three attrributes – which are really sub-variables of the myGreeting object.

Functions

A function is a new command defined in your script. Like a variable, once you've defined a function, you can call it by name; but unlike a variable, a function acts, whereas a variable just conveniently stores information. In the scripts we write for our class projects, there is usually at least one function – a container that holds all of our variables and sets them in motion at the right time. And sometimes there are lots of functions.

Here's a nice simple one:

function HelloWorld(){
  document.write("Hello There, World!");
}

(online at http://jsbin.com/acelot/6/edit#javascript,html,live)

Can you tell just by looking what this is going to do? Just take a guess. If you put this in your file, though, it will just sit there, doing nothing. It needs to be called before it does anything, like this:

HelloWorld();

Syntax

When you start coding it is very common to make lots and lots of so-called 'syntax errors'. These are usually intellectually trivial typos, which nonetheless break your code completely – because even in a loose language like Javascript, the computer needs you to type in everything exactly right.

  • semi-colons, commas, colons: every statement ends with a semi-colon – but function declarations don't. In an array (you'll see these later on) array elements must be separated by commas. parameter-value pairs are divided into parameter and value by a colon in the middle. If something's not working ,this is very likely your culprit!
  • quotes, parentheses, brackets: Every open quotation mark must be accompanied by a close-quote. Every open parenthesis must have a close-prentheis partner. Every square or curly bracket… you get the picture. This is another common cause of incredibly frustrating errors.
  • spacing
  • comments: this is just something to be aware of – comments in javascript are marked by the "//". Use comments to write messages to yourself, especially if you're doing something you don't understand, or that your groupmates won't understand.

Case Sensitivity!

Everything in Javascript is case sensitive.

A Test Project

You can experiment on our demonstration project page on jsbin:

http://jsbin.com/iriyup/10/edit#javascript,html,live

'Ware the Rabbit Hole!

Have fun with Javascript and learn all you can; but be warned, this is a very big subject and you will always have more to learn. So be careful during your assignments not to chase this rabbit too far down the hole; you may not make it back up to the surface in time to hand your work in!