Home : Articles : Introduction to JavaScript

Introduction to JavaScript

Tutorial by Matt Doyle. Level: Beginner. Published on 1 January 1998 in JavaScript.

What is JavaScript, and what can it do? How do I use it? These questions, and more, are answered here. We'll get you going and show you how to write some simple scripts.

JavaScript's a great language. We love it. It may not have the speed or power of Java or C, or the tight integration of ActiveX, but on the plus side it's interpreted (no messing about with compilers), fast to load, easy to debug and it embeds itself neatly into your web page.

Most important of all, it's easy to learn. Hopefully if you're fairly new to the language, these tips will help get you started. Even seasoned JavaScript coders may learn a thing or two from these tips - you never know!

This tutorial shows you how to get started with JavaScript. We'll look at how to embed JavaScript in your web page, and how JavaScript talks to your web browser. We'll illustrate these points by building a simple program to display an alert box when the page is first loaded.

Where in my web page do I put JavaScript?

The simple answer is - anywhere you like! Most folks, though, like to put it near the top of the page in one chunk, usually below the <body> tag or between the <head></head> section, for readability and ease of debugging. Putting it in the <head></head> section has the advantage that all of the code will be loaded before the page, which is more secure.

Regardless of where you place it, you must enclose it within the following HTML tags:


<script language="JavaScript">
<!--

(place your code here)

// --></script>

Why? Well, <script language="JavaScript"> tells the browser to interpret what follows as JavaScript, while the comment markers (  ) make the JavaScript invisible to older browsers that don't support the language.

How does JavaScript make the browser do stuff?

JavaScript talks to your browser through objects and methods. An object is something like a window, a frame, or an image - the things that make up your browser and the web pages it displays. A method is something that an object can do. For example, a window can be opened or closed.

As an example, we're going to make your browser display an alert box when your page loads. Open the example page in a new window to see it in action.

Here's the function that made that extremely witty box appear:


function showAlert ( )
{
  window.alert ( "ALERT! ALERT! KLINGONS ON THE STARBOARD BOW!" );
}

See? It's easy! We're calling the alert method of the window object, to make the alert box appear. The method takes one argument - the text to display in the box. Couldn't be simpler.

But how does it come up automatically, when the page is first viewed? That's done with a little trick called the onload event handler. In the standard <body> tag at the top of the page, we add this code:


<body bgcolor="#FFFFFF" onload="showAlert()">

This tells the browser to execute the JavaScript function showAlert() when the page is first loaded. (It will also be executed when you click Reload/Refresh.)

Congratulations - if you made it this far, you now understand the building blocks of JavaScript! Now have a browse through the other tutorials in this section. Start writing your own code. There are lots of helpful books available on the subject, and some great websites too! Good luck.

Responses to this article

There are no repsonses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute or two. Sign up now.

Keep in touch

Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you need help with a Web-building issue, check out our online Webmaster Forums, where you can get assistance from members of Elated and other webmasters.