Blake O'Hare .com

Beginner's JavaScript Tutorial, Part 1 - Intro

Welcome to the horrible world of JavaScript. The rumors. They are true.

But with a solid understanding and a healthy level of cross-browser testing, the pain is manageable and only fatal in 20% of cases.

Prerequisites

I assume you have a SOLID understanding of HTML. That means more than "<b> is for bold!" You understand the deeper meaning of XML, that a document is really a "tree" of nodes where a node has exactly 1 parent and 0 or more children. If not, read up on HTML and (arguably more importantly) XML.

Install these browsers if you don't already have them installed:
  • Chrome
  • Firefox
  • Opera
  • Internet Explorer (if you're not on a Windows Machine and don't have it already surgically implanted in your OS)

Download a text editor that supports syntax highlighting. It's more than just pretty colors. It helps prevent you from making silly syntax errors. I suggest any of the following: Notepad2, Notepad++, or Crimson Editor.

Since this is a beginner's tutorial, I will assume this is your first programming language. As far as learning programming languages go, this is an odd choice for a start. It's like deciding to learn Mongolian as your 2nd spoken language (as opposed to something more common like Spanish or Japanese). It means 1 or 2 things: You have a very specific reason to learn this particular language or you have a strange fascination with it in general. But either way, chances are you're not specifically embarking on a JavaScript journey as a stepping stone to learning other programming languages. You are focused on practical results right now.

About Programming in General

Computers are stupid.

When you talk to a human, you can make grammatical mistakes. If you are writing to another human, you can make typos. The human understands (unless you are really really bad at speaking/writing). A programming language does not work this way. If you make a typo, then that's it. If you're lucky, your program will not run and you will get an error message telling you what's wrong. If you're less lucky, your program will run but then die at some point with some error message telling you something broke while executing your code. If you're really unlucky, your program will run without throwing an error message, and you're left with a program that either obviously or not-so-obviously behaves incorrectly and you're left poking through your code with a comb trying to figure out what happened.

Programmers are careful, precise creatures.

The next question going through your head is probably:
but if I make a simple mistake, can't the computer just "guess" what I meant?

No.

Code is an exact encapsulation of a specific behavior. Once "guessing" becomes involved, it becomes fuzzy. Not only for the computer but for other people reading your code. If a line of code deviates from the documented behavior, then what does it mean? The only way to truly know is to run it and find out.

Feuding JavaScript Interpreters

This also brings up another point that is more specific to JavaScript than other languages: JavaScript is not a language created by a company. JavaScript is a standard that has organically evolved over time. JavaScript is executed by browsers that are all created by different companies with their own way of doing things. This ultimately leads to the greatest source of frustration for JavaScript programmers.

That's why I made you install all those browsers at the beginning.

Because your code will be interpreted by different browsers (depending on which browser your end-user prefers) you can get slightly different interpretations. Have you ever watched a movie that was independently translated with subtitles by different people? The results can sometimes be drastically different from each other.

The Structure of Programs

Typically, a program exists as a piece of code in one or more text files. For some languages, you need to "compile" your code into a binary before running it. This is not the case for JavaScript. The browser interprets your code text file directly.

The interpreter (the browser) will start at the first line of the first JavaScript file you include in your page source. Each line typically equates to one command. The command is executed and the interpreter will move on to the next line. It continues to do this until it reaches the end of the file. Once it reaches the end of the file, it moves to the next file you include in your page source. Once it runs out of files, it is done.

That was a gross oversimplification with many exceptions. But we will dive into those with time. But right now it's okay to think of the interpreter this way.

The Structure of the HTML Document

As stated earlier, an HTML document is a tree. By tree, I mean a datastructure that has one root (the <html> node), each node has 0 or more children, and each node only has one parent. The purpose of most JavaScript is to manipulate this tree by adding, moving, copying, and changing elements in this tree.

This tree is called the DOM which stands for Document Object Model. I will get into this more, later.

As a side note, I just want to make this 100% clear...

JavaScript is in absolutely no way related to Java. At all. Sure, they're both in the "curly-brace" family of programming language syntaxes, but so are about half of major modern programming languages. Java. JavaScript. Different. If someone says otherwise, shake them. Shake them until they understand.