JavaScript Tutorial – Lesson 1

Interactivity, shminteractivity. Most web pages that claim interactivity really mean you can click on hyperlinks to go to new pages. Even web pages that have CGI scripts behind them don’t really seem all that interactive: Fill out a form, hit the Submit button, and wait. It’s more like throwing bottles into an ocean and hoping for a meaningful reply.

Happily, we have JavaScript. With JavaScript, images can swap when you move a cursor over them, form elements can influence each other on the fly, and calculations can be made without having to resort to a CGI script. There’s none of this submit-and-wait stuff — everything happens on your web page while you’re playing with it.

One of the best things about JavaScript is that you can do a great deal with very little programming. You don’t need a fancy computer, you don’t need any software other than a word processor and a web browser, and you don’t need access to a web server; you can do all your work right on your own computer.

Even though it’s simple to work with, JavaScript is a complete programming language, so as you learn more complicated JavaScript, you’re also learning the basics of computer programming. If you want to move on to other programming languages, like Perl, C, C++, or Java, JavaScript is a great introduction.

Enough hype about JavaScript. On to hype about this tutorial.

All About This Tutorial

This five-part tutorial aims to get you writing useful JavaScripts immediately. And not just silly JavaScripts — this tutorial will teach you how to build the browser of your dreams. As we go through the examples in the course, you will build a fancier and fancier browser that you can tweak to your heart’s content. Tweaking is the Webmonkey way, after all.

Here’s a brief outline of what you will learn each day, with an example of what you’ll be able to do by the end of that lesson.

Day 1: Introductions, some examples, and your first JavaScript (example)

Day 2: Variables, if-then branching, link events, and image swaps

Day 3: Windows, frames, and the Document Object Model

Day 4: Loops, arrays, and functions

Day 5: Forms, forms, and more forms

Before we jump in, here are few important things to note about JavaScript and this tutorial.

Second, sometimes JavaScript isn’t JavaScript! It turns out that different browsers deal with JavaScript differently. In fact, different versions of the same browser handle JavaScript differently. So always double-check your JavaScripted pages on as many different browsers (or even platforms) as possible.

Third, this tutorial is not a substitute for a good reference book. JavaScript is very rich, and although you’ll learn most of the grammar of JavaScript here, you won’t learn the entire language. So, if you like what you’ve learned here and are serious about writing your own JavaScripts, go out and get a book. Whatever book you get should have an extensive reference section. I suggest JavaScript: The Definitive Guide by David Flanagan, or, ahem, Dave Thau’s The Book of Javascript: A Practical Guide to Interactive Web Pages.

Fourth, view source! The best way to learn JavaScript is to look at scripts other people have written. JavaScript, just like HTML, can be viewed by selecting View Source on your browser. Do it frequently!

Finally, as with HTML, the best way to learn JavaScript is to experiment freely and often. At several places in this tutorial, you’ll be given the opportunity to try things out. Don’t be afraid to expand beyond the exercise to try new things.

Down to Business

<html>
<head>
<title>
Thau's JavaScript Tutorial
</title>
<script language="JavaScript">
// put up an alert box, to show how they work
alert("Soon, I will rebuild my browser!");
</script>
</head>

Here are the key things to notice:JavaScript usually goes between the </title> tag and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor. It goes right into the HTML that describes your page. (Although I’ve only shown JavaScript in the header of the HTML page, you can also put JavaScript in the body. You’ll see an example of this in the next lesson.)

The beginning of a bit of JavaScript begins with <script language="JavaScript">

Right now, you don’t really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it’s a good idea to include the language element.

Everything between // and the end of a line is a comment and will be ignored.

Comment, comment, comment! A basic rule of good programming style is that you should always think about the next person who has to look at your script. It might be a friend, a co-worker, an employer, or it could be you in three months.

The easiest way to make sure you’ll understand your own script in three months is to comment freely and often. If you want to comment a huge block of text, you can put it between /* and */ like this:

/* this is
a huge block
of text that I've
commented out */

alert("Soon, I will rebuild my browser!"); calls up a simple dialog box with the words “Soon, I will rebuild my browser!” inside.

Here’s your first piece of JavaScript:the alert method. You’ll learn more about how this line works in the next lesson. For now, you just need to know that you should end it with a semicolon, and put the text you want in the alert box between quotes.

The beginning of a bit of JavaScript begins with <script language=”JavaScript”> tag. No rocket science here. Easy as HTML. Simple, right? Well … actually, there’s one complication.

Hiding JavaScript

The following discussion on hiding JavaScript is obsolete since all modern browsers understand the <script> tag. Further, using this technique to hide a script is NOT XHTML compliant. It is, however, an interesting (historical) hack that’s worth a read.

The problem with the last example is that some old browsers don’t understand the <script> tag. These browsers will treat your JavaScript just like HTML, so the page will come out like this:

//put up an alert box, to show how they work
alert("Soon, I will rebuild my browser!");
'''Congratulations!'''

Here’s The Thing With Ad Blockers

We get it: Ads aren’t what you’re here for. But ads help us keep the lights on. So, add us to your ad blocker’s whitelist or pay $1 per week for an ad-free version of WIRED. Either way, you are supporting our journalism. We’d really appreciate it.