JavaScript allows you to create ‘dynamic, interactive’ web pages: web pages that do things in response to what your readers do, without having a separate page for each possible response. In this tutorial, I’m going to cover some of the very basics of using JavaScript in your web pages. I’m going to assume that you know a little bit about HTML, but nothing about programming or JavaScript. If you aren’t familiar with HTML, you’ll want to go over the Web Writing Guide at http://www.hoboes.com/NetLife/Web_Writing/ first.
First, JavaScript has nothing to do with Java. Java is a separate programming language. JavaScript is a language for scripting web browsers and web servers, although it is seeing other uses as it becomes popular. Java was created by Sun and is designed for complete software applications, while JavaScript was created separately by Netscape Corporation and is designed for modifying (and “scripting”) web pages.
The first thing we need to do is create two files for the tutorial: a web page, and a JavaScript file. You can call them anything you want. I’m going to call the web page “basicscripting.html” and the JavaScript file “scripts.js”.
<html>
<head>
<title>Basic JavaScript Tutorial</title>
<script src="scripts.js" language="JavaScript"></script>
</head>
<body>
<h1>Basic JavaScript Tutorial</h1>
<p>We will use this page to test out our dangerously revolutionary JavaScript programs.</p>
</body>
</html>
This is about as simple a web page as you’ll ever make. The only thing out of the ordinary is the <script> tag inside the ‘head’ portion of the web page. Even that looks familiar if you’ve used the <img> tag. The “script” has a “source” and a “language”. The language is obvious: we’re using JavaScript. The “source”, or “src” is a file or URL to a file that stores scripts this page will use. In this case, we’re telling the browser that the scripts this page uses are stored in a file called “scripts.js”. The browser will go to our site and ask for that file in the same directory as the web page. You can put any URL inside the “src” modifier, as long as it points to a valid JavaScript file.
//these are my basic javascripts
That’s it for “scripts.js”: we haven’t created any JavaScripts yet! In a JavaScript file, two slashes (“//”) tell the web browser to completely ignore that line. Every line that begins with a “//” is a “comment”. It isn’t JavaScript, and the browser would likely get in trouble if it tried to be dynamic with that line.
JavaScript is line oriented. Unlike HTML, which uses opening tags and ending tags, such as <head> and </head>, to identify the beginning and ending of things, JavaScript uses semicolons and carriage returns. So, if you have the following file as a JavaScript file:
//this is a comment
this is another line
You are going to get an error. The browser is going to assume that the second line, “this is another line” is some JavaScript code, but it isn’t.
Always be careful with carriage returns when writing JavaScript.
One of the easiest and most useful things done with JavaScript is to alert you, the programmer, to some aspect of your script, or alert the viewer that they’re possibly about to do something wrong. You might display a warning if they didn’t fill in some required portion of a form, for example.
The JavaScript “code” for an alert is very simple. It is “window.alert” and then the alert message you want to display. If you write “window.alert("Paul is sleeping")” in your JavaScript, a window will pop up and display the phrase “Paul is sleeping”.
Let’s go ahead and write our first bit of JavaScript code. Add the following to your “scripts.js” file:
//displays message in alert window
function w_alert(w_message) {
window.alert(w_message);
return false;
}
The first line is a comment. The browser will ignore the line “displays message in alert window”, but you won’t. You’re who its there for. A few months later when you look at the “scripts.js” file, you will know what this JavaScript code does: it displays a message in an alert window. That’s what comments are for. They “comment” your JavaScript code to remind you what this code does.
The second line tells the browser that we are creating a “function” called “w_alert”, and when we use “w_alert”, we’re going to give it one thing to work with, which it will store in “w_message”.
By calling this a “function”, we are telling the browser not to perform these lines of JavaScript until we ask it to perform the function called “w_alert”. By giving it one “parameter”, or “thing to work with”, we are making it more useful to us. We can have it display any message we want, rather than having to write one function for “hello” and another function for “goodbye”.
When we use this function, we “call” it by writing “return w_alert("The Message we want");”. If we want it to say “hello”, we would write “return w_alert("hello");”. We put the message in quotes between the two parentheses.
The third line, “window.alert(w_message);”, tells the browser to pop a message up with the “variable” w_message. A variable is a place to store information. Because w_message was listed on the “function” line, anything we write between the parentheses when we “call” w_alert will be stored in “w_message”. So, whatever is in “w_message” gets displayed in the alert window.
The fourth line is “return false;”. Functions do not have to return anything, but usually they do. And, usually, functions that get used on web pages return either “true” or “false”. In this case, “false” tells the browser that the function handled everything, so that the browser doesn’t follow that link. If we wrote “return true” here instead, our function would display the alert message, and then after the viewer clicked to dismiss the message, the browser would follow the link. Often when you display an alert, it is because you don’t want the browser to do what it normally would have done (such as submit a form).
You’ll notice that each of the lines that does something ends in a semicolon. JavaScript requires this. Each JavaScript step must end in a semicolon.
The function itself is surrounded by two curly brackets (“{ }”). Curly brackets in Javascript surround chunks of JavaScript code that belong together. In this case, our two lines of JavaScript are surrounded by curly brackets to indicate that they belong in the function called “s_display”.
We are ready to use our first JavaScript. Go back to “basicscripts.html” and add the following link:
<p><a href="http://www.hoboes.com/" onClick='return w_alert("You are not allowed to visit Negative Space!");'>Negative Space</a></p>
Remember that carriage returns are important, so everything between “onClick” and the final “)'” need to be on the same line!
If you save this file, reload the page in your browser, and click the link, you should see a message pop up saying “You are not allowed to visit Negative Space!”. See an example of how this should work at http://www.hoboes.com/NetLife/Web_Scripting/lessons/lesson1.html.
The “pieces of information” that we send to functions are called “parameters” or “arguments”. Functions don’t have to take parameters, in which case the parentheses after the function name will be empty. Later on we’ll get to functions that take multiple arguments.
That’s all very simple. But it doesn’t make any fundamental changes to the web browsing experience. Let’s go ahead and make something that displays images without traveling from page to page. We’ll make a single page, with a single image, but that image will change depending on what ‘link’ the user chooses.
First, we need to add another “function” to our “scripts.js” file:
//changes an image to another image
function change_img(imgName,imgFile) {
document[imgName].src = imgFile;
return false;
}
What’s different about this function than our previous two?
First, it has a different name: “change_img”.
Second, this function takes two arguments instead of one or none. It calls these arguments “imgName” and “imgFile”.
It has a completely different middle line: “document[imgName].src=imgFile”. What does that mean? Well, “document[imgName]” is the image that we want to change. In order to use the function “change_img”, our images have to be able to be identified to the web browser. They have to have a name. You’ll give your images names by adding “name=something” to the HTML code for the <img> tag. Once your image has a name, JavaScript can do things to that image by calling it “document[the name]”. In this case, we’ve stored the name inside “imgName”, so “document[imgName]” is the image that we’re going to change. If you’ll recall from HTML, each <img> tag has a “src=” option that gives the URL where the web browser can find the image. We’re changing the “src” for our named image to whatever is inside “imgFile”.
Let’s say we have an image on our web page called “gallery”. If we want to change the image inside “gallery” to the image at
“http://www.hoboes.com/jerry/Gallery/Lego_Thumb.jpg”. We would call our “change_img” function as: change_img("gallery","http://www.hoboes.com/jerry/Gallery/Lego_Thumb.jpg").
Go ahead and make up a new web page:
<html>
<head>
<title>JavaScript Image Tutorial</title>
<script src="scripts.js" language="JavaScript"></script>
</head>
<body>
<h1>JavaScript Image Tutorial</h1>
<img
name="gallery"
border="2"
src="http://www.hoboes.com/jerry/Gallery/Christmas_Thumb.jpg"
width="160"
height="120"
align="right"/>
<ul>
<li><a onClick='returnchange_img("gallery",this.href);'
href="http://www.hoboes.com/jerry/Gallery/Christmas_Thumb.jpg">Christmas</a></li>
<li><a onClick='returnchange_img("gallery",this.href);'
href="http://www.hoboes.com/jerry/Gallery/Lego_Thumb.jpg">Legos</a></li>
<li><a onClick='returnchange_img("gallery",this.href);'
href="http://www.hoboes.com/jerry/Gallery/Gender_Thumb.jpg">Lenses of Gender</a></li>
</ul>
</body>
</html>
Save this file, and try clicking on the links. Instead of changing pages, what you should see is that only the image on the right changes when you click on the link. See the example at http://www.hoboes.com/NetLife/Web_Scripting/lessons/lesson4.html.
You’ve probably already guessed that “onClick” is the “event” that happens when someone clicks on a link. The function we call is “change_img”. We give change_img the arguments “gallery”, which is the name of the image that we want to change, and “this.href”, which is... well, what is it? In JavaScript, “this” refers to the current object. An “object” is a part of your web page. In this case, the current object is the link to the image. That URL to the image is stored in the option called “href”. So, “this.href” is the URL to the image that this link points to.
Because we “return false”, the web browser never actually follows the link. If, of course, the person viewing your page has JavaScript turned off, their browser will completely ignore our JavaScript, and it will simply visit the image the “old-fashioned way”. This is important: we have provided an improved means of viewing our images for those who want it, but those who don’t want it can still view the images, with no added work on our part. When designing JavaScript for your web pages, remember that not everyone has JavaScript, and not everyone who has JavaScript wants to use it. (Unfortunately, some commercial pages do annoying things with JavaScript, like pop up windows in front of the page you’re trying to read. This causes many people to turn JavaScript off completely, avoiding those annoyances, but also avoiding your tastefully presented JavaScript.)
By using “this.href” to reference our image, we allow non-JavaScript readers to view our images, without any added work on our part. Always remember to keep things as simple as possible. JavaScript allows you to make your web pages impossible to manage if you aren’t careful.
If you play around with the above and plug in some differently-sized images, you’ll notice that some image(s) have to be stretched or squeezed to match the dimensions of the first image. That’s one of the constraints on changing images: the web browser makes space for the image based on the first image, and then forces all subsequent images to change their size to match.