Javascript Programming 101

JavaScript, unfortunately, has become a buzzword of sorts. People like to say it (sure sounds cool, doesn't it?), and they also like to use it - in fact, some of them use it a lot. JavaScript is frequently misused in flashy and over-the-top ways.

The aim of this tutorial is to teach you how to write some simple JavaScripts of your own, and offer a tip here or there on what you should and should not actually implement into your own site. You're the only one who can make the final decision on what to use, but hopefully the advice herein will serve as a useful guide concerning appropriate and inappropriate uses of JavaScript.

If you have any experience with programming, a lot of the basics of JavaScript should be a breeze for you. Functions, variables, arrays: they're all here, and usage is similar to other languages. If you're new to programming: good luck! My only advice is to read slowly, try the code yourself, and modify it however you like. Observe and document the results. Normal, everyday people can learn how to program - just takes concentration and some time.

One word of warning: if you're not familiar with HTML, you're likely to be a bit baffled by this tutorial. A general grasp of HTML is highly recommended. It's not 100% required, but don't be surprised if the code looks like gibberish! If you lack this particular skill, make a virtual trip to HTMLGoodies.com and familiarize yourself with the language before beginning.

Okay, let's get started!

First off, let's try something that is useless, but serves as a good start-off script:

<html>
<head>
<title>Test</title>
<script language="JavaScript">
var message = "Welcome to this page!";
</script>
</head>

<body>
<script language="JavaScript">document.write(message);</script>
</body>
</html>

As you can see, our JavaScript code is imbedded right into the HTML page.

The first line is quite simple:

<script language="JavaScript">

This basically tells the browser that we're going to write a JavaScript - JavaScripts placed outside of the script tags simply will not function.

Okay, now the second line:

var message = "Welcome to this page!";

This line creates something called a variable. Think of a variable as a little container - it has a name, and it stores something inside. In this case, the container/variable is storing a line of text. The beginning of this line ("var") tells JavaScript that we're creating a variable.

The next word, "message", is the name of the variable. After that, we use something called an assignment operator - which is basically an equals sign: "=". Think of it as algebra: x = y + 2. It's quite similar. We're telling JavaScript that the variable named "message" equals whatever is inside those double quotes - in this case, it is the text "Welcome to this page!" - followed by a semi-colon.

The semi-colon is simply to let JavaScript know that we've reached the end of the command. This is common among several programming languages. The double quotes and semi-colon are not part of the value of the "message" variable - they're just there to hold things in place. The value of the "message" variable is, quite simply, the text "Welcome to this page!" - nothing more, nothing less.