Table of Contents <<   >> On to the next chapter: Programmed Poems

Learn to Program with Javascript and jQuery

Table of Contents

Preface for Parents
Programmed Poems - HTML and Javascript.
Mutating Madlib - CSS and jQuery.
Pascal's Triangle - arrays and button clicks.
Guess My Number - alerts, prompts, and inputs.
Caesar's Cipher - string manipulation.
Fifteen Puzzle - tables, swapping, and jQuery traversal.
Concentration - Unicode and taking turns with a three-state state machine.
Mastermind - cloning and slicing and advanced array manipulation.
Tic-Tac-Toe - recursion, strategy, and artificial intelligence.

To be continued with examples such as caesar-cipher, fifteen-puzzle, concentration, mastermind, polygon-drawing, cannon-game, maze-maker, and. tic-tac-toe.

Preface for Parents

Why Learn to Program?

We all know that computer programming has given us Youtube and Wikipedia and Nintendo. But as more modes of communication have gone online, software has enabled completely new forms of human organization in all facets of life. Sophisticated programs have given us Wal-Mart-style retail, Credit card finance, and nationwide political microtargeting. We normally think of programming as the way to control an electonic machine, but increasingly, programming is how we shape society.

In the 21st century, to understand human civilization we must understand software. To learn programming is to learn the new rules of the game.

Until the 1970s all computers came with programming tools because people were expected to program their own computers. Today that idea seems quaint: software is arcane stuff, created by highly-trained specialists. People use Google and Facebook every day, but we do not fully understand the biases, goals, and limitations of these systems or their programmers. Nobody programs their own software any more.

In the United States, 8-12 year old children spend 12% of their waking hours playing video games. This time has largely displaced childhood book-reading. But unlike book-reading, video-game-playing is a profoundly asymmetric activity. Because few children have ever created a video game (most cannot even fathom how a video game is created) they do not understand how the software is shaping their behavior in front of the screen.

The pages you are reading now are an effort to help our children retake control of that 12% of their lives by arming them with the basics of programming. While it takes years to become a skilled programmer, any middle-schooler can acquire basic programming literacy. They can build their own games and software. They can understand what a programmer can and cannot do, how software is created, and they can start down the path of understanding how programmers structure the modern world.

Programming literacy is not about learning a mathematical abstraction: it is about seeing how the actual workings of the information age in which we live. Just as a literate writer must spell real words, a literate programmer must program using a real computer language. But which language first?

Learn Javascript First

Javascript was invented by Brendan Eich in mid-1995 during the frenzy of the Internet boom.

He created the little language in the space of a few weeks to help Netscape add a bit of interactivity to their web browser, in the same spirit that Visual Basic adds a bit of interactivity to Microsoft Office applications.

At the time, the language was seen as a practical hack, a stopgap measure until the "more serious" Java language from Sun could be made to work better with web browsers. It was not clear at the time that Javascript would ever be an important language. But due to the remarkably rapid early development of the web, Javascript - not Java - ended up becoming the standard language for web browsers.

Today Javascript runs on billions of devices globally and is far and away the world's most widely deployed programming language. Javascript can be used to automate almost every web browser on almost every device. Among computer users it has broader reach than Spanish, English, Chinese, or (astonishingly) Windows. A properly-written Javascript program can reach essentially the whole population of the computer-using world.

And Javascript is accessible to beginning programmers. It is an interpreted language, so anybody with a web browser and a way to edit a text file has what they need to learn to program in Javascript.

Learn Javascript With jQuery

Despite the advantages of Javascript, Javascript has the reputation of being an inelegant, confusing language.

Why? Mainly because it has a terrible built-in standard library. The official library of functions for Javascript is the W3C Document Object Model - the "DOM". Compared to built-in libraries found in python, lisp, or Java, the DOM is a terrible mess.

The official W3C DOM defines a set of functions for manipulating a webpage that are clumsy, unintuitive, and incomplete. The worst problem is that the standard does not match reality: for example, event handling as defined by the W3C has never been a complete description of what browsers do in the real world. Any programmer who needs to do something as simple as detecting the coordinates of a mouse-click will need to write ugly code that deals separately with the idioms of IE, Firefox, and WebKit.

Fortunately, in recent years several excellent AJAX libraries have emerged that provide abstractions that fix the main problems in the DOM. The most popular one of these is John Resig's jQuery library, which is built around a Javascript implementation of CSS selector syntax. Javascript programs written using jQuery are concise, readable, and portable.

With jQuery, Javascript becomes an excellent learning language. It is possible to do sophisticated interactions with ease, and the language itself has readable algebraic syntax, a simple type system, straightforward object literals and functional closures.

Start At The End

Even with a good language, the nuts and bolts of programming are difficult.

When getting started, it can be hard to figure out where to put all the punctuation! But the best way to learn about the endless details of programming is to work with a lot of working examples. In these pages we aim to reveal how the magic behind software works. How can you create computer animation? How do you model mathematics, physics, gravity, and real-world objects? Can a computer think strategically? Can a computer keep a secret? Can a computer write a poem?

We will try to explore interesting questions. The details will come with a bit of practice.

The philosophy here is to start off with complete, well-written, working examples of Javascript programs. Instead of plodding along through the atomic details of "what is a number," "what is a string," "what is a function," and "what is an object," we just dive right into fully-functioning programs that use numbers, strings, functions, arrays, objects, CSS, jQuery, and graphics. In each chapter we look at some of the atomic parts that make up each program.

Of course among the chapters there is a ramp up from simpler examples to more intricate ones, but we always anchor each chapter with a complete program. This is very much in the spirit of the Web since its early days, where any user can "View Source" to see the code behind any webpage.

You will not find any complete catalog of facts on these pages: any factual information about programming in Javascript or jQuery or HTML can be answered in a moment with a search on Google. Instead you will find that the examples are accompanied by explanatory overviews, rules of thumb, or thoughts about the "why" behind the "what."

Along the way readers are encouraged to learn by modifying the programs and seeing what happens, or by writing new programs using the examples as inspiration.

To get set up to program in Javascript you want two things:

  1. A web browser with a script debugger, such as Firefox with the Firebug plugin or IE with the Jscript debugger enabled. Google's Chrome browser is my favorite for programmers because it comes built-in with a terrific debugger, and it also provides a the fastest implementation of Javascript with a full-featured implementation of the latest web standards. Chrome can be installed here.
  2. A way of editing text files. On the Mac, the built-in TextEdit app can be used (with formatting disabled), or use vi or emacs in the terminal shell if you want to learn an old-fashioned editor, and on Windows, the built-in Notepad or WordPad apps can be used. If you want to install a better text editor, try Notepad++, an open-source source code editor for Windows.

Examples in these pages are editable directly within the browser, so you do not strictly need to set up a text editor immediately to follow along. But you will want to have one to work on larger problems.

Table of Contents <<   >> On to the next chapter: Programmed Poems