Tutorial: Introduction to JavaScript
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.
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
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 would like to offer us feedback on this or any of our articles, please contact us. Have fun!