Practical JavaScript (aka JavaScript for “normals”)

I used to be like you. Before getting into web development in 1998, I was a college administrator, a “normal,” not a “geek.”

I was a French major. I never took a computer science class. If I can learn JavaScript, so can you.

Practical JavaScript is a gentle introduction to the JavaScript language for non-programmers. It’s not for “dummies” or “idiots.” I’m not going to dumb it down. I’m just going to relate the concepts to things with which “normals” should be familiar, like cups of coffee. And donuts. Mmm…donuts.

What is JavaScript?

JavaScript is a programming language, more formally known as ECMAScript, that is most commonly executed in the context of web browsers. It is used to add interactivity (also called “behavior”) to otherwise static web pages. When you click a link or button on the web and something changes without you being taken to a new page, that is JavaScript in action.

What do I need to use this site?

Everything you need to make use of this site is free.

• A web browser. (Hint: Chances are, that’s what you’re using to read this right now.) I’ll use Apple’s Safari, but Google Chrome, Firefox, Opera, and Internet Explorer are all up to the task.
• JavaScript console (Tip: Go ahead and open that up in a second window or tab now.)
• For more complex examples, you’ll need a text editor (e.g., TextWrangler on the Mac or Notepad++ on Windows).

I’ll explain in some detail how to get set up to write JavaScript in the environment section.

How to use this site

First, some conventions. Code (as opposed to prose) looks like this when in the middle of normal text. It looks like the following when set off by itself:

function () {
  // magic happens
}

The general pattern for each topic will be as follows:

1. Quick explanation of the concept at-hand in langauge as simple as possible, but not simpler
2. Some example code that you can try out

You can start at the beginning and work your way through it, or you can jump around. Your choice. Here’s a table of contents to facilitate jumping around. Alternately, just follow the links at the bottom/right of each page to work your way through from start to finish.

Table of Contents

1. Intro (this page)
2. Development environment
3. JavaScript basics
4. Primitives
5. Variables
6. Arrays
7. Objects
8. Loops
9. Conditionals
10. Functions
11. Built-in objects & methods
12. Advanced topics
13. Resources for further learning

Time to get your environment set up, then let’s learn some JavaScript!