What is JavaScript?
JavaScript is a compact, object-based scripting language for Web pages. JavaScript code embedded into your HTML pages can enhance them with many interesting elements, from swapping images when you move a cursor over them, to multi-level drop-down menus.
You can create really sophisticated and almost application-like pages with the help of JavaScript. You don't need any special software other than a text editor and a Web browser, and you don't need access to a Web server. You can create and test all your JavaScript code right on your own computer.
JavaScript and Java
Although the names are almost the same, JavaScript isn't the same as Java. These are two different techniques for Internet programming. Java is a real programming language, and you can create real programs with it.
JavaScript is a scripting language. You could even say that JavaScript is rather an extension to HTML than a separate computer language. It's so tightly integrated with HTML that you could call it "JavaScript markup language." JavaScript coders don't care too much about real programming, they just make different nice effects by inserting small JavaScript code fragments into their Web pages.
The drawbacks of JavaScript
Right now the biggest problem is the imperfect JavaScript implementations that today's browsers offer. Although all major browsers that are version 3.0 or higher include JavaScript support, they deal with JavaScript differently.
In fact, different versions of the same browser handle JavaScript differently. This makes it difficult to create a complicated JavaScript code that work across all browsers. So always check your pages on as many different browsers (and even platforms) as possible.
What do JavaScript code look like?
Like HTML, JavaScript is just text that can be typed into a text editor. Its code is embedded in HTML within a <SCRIPT> tag. Some old browsers don't understand this tag. To prevent them from treating your JavaScript as HTML, always use this trick involving HTML comments...
<!-- hide JavaScript code from old browsers
YOUR SCRIPT HERE
// end the hiding comment -->
</script>
Here's an example of JavaScript code that prints current date in the top right corner of your Web page...
<head>
<script type="text/javascript">
<!--
function PrintDate() {
today = new Date();
document.write('Date: ', today.getMonth()+1, '/', today.getDate(), '/', today.getYear());
}
//-->
</script>
</head>
<body>
<p align="right">
<script type="text/javascript">
<!--
PrintDate();
//-->
</script>
</p>
THE REST OF YOUR PAGE.
</body>
</html>
See JavaScript Examples for more complex and useful examples of JavaScript code.
The power of JavaScript
JavaScript has one particular feature that makes it an interactive and power tool - event handling. You can trigger the JavaScript program by various events. For example, when the page loads, when it quits, when you pass your cursor over a link, or when you click on a button or a link.
Here's a list of the common event handlers, that all popular browsers can deal with...
| Event | When it's triggered |
| onAbort | An image is stopped from loading because the user either hits Stop or leaves the page. |
| onBlur | An element, such as a window, frame, or form field, loses focus; that is, when the user clicks on something else. |
| onClick | The user clicks on the particular element. |
| onChange | The value of a form field changes, for example, when the user types in some data. |
| onDblClick | The user double-clicks on the particular element. |
| onError | A loading error happens, like a missing image. |
| onFocus | The user puts the focus on the target element, by clicking on it or tabbing to it. |
| onKeyDown | A key on the keyboard is pushed down, regardless of whether it's then held down or released. |
| onKeyPress | This event is repeatedly triggered as long as a key is held down. |
| onKeyUp | A key on the keyboard is released. |
| onLoad | The browser completely loads the page. |
| onMouseDown | A key on the mouse is pushed down, regardless of whether it's then held down or released. |
| onMouseMove | The mouse moves. |
| onMouseOut | The pointer moves out of the target area. |
| onMouseOver | The pointer moves over the target element. |
| onMouseUp | A key on the mouse is released. |
| onReset | The Reset button of a form is clicked. |
| onResize | A window or frame is resized by the user. |
| onSelect | The user highlights text in a form field. |
| onSubmit | A form is submitted. |
| onUnload | The user leaves the page. |
The basic event handling syntax is very simple. The following JavaScript code will pop up a window when you click a button...
<input type="button" value="Click me" onClick="alert('This is JavaScript!');">
</form>
If you need an elaborate action to take place when the button is clicked, you can call a predefined function. The following JavaScript code writes text to the statusbar (the bar on the bottom of your browser where the URLs are shown)...
window.status = txt;
}
<form>
<input type="button" value="Click me" onClick="MyFunc('This is JavaScript!');">
</form>
Free JavaScript tutorials
There are a lot of free JavaScript help resources on the Net. Here are a few...
HTML Goodies JavaScript Primers
30 lessons that get you started writing your own JavaScript events. Each of these 30 primers will
display one JavaScript and tear it apart so you can see how it works. You'll be taught why something
works, not just shown that it works.
The JavaScript Source
This is an excellent free JavaScript tutorial with tons of free "cut and paste"
JavaScript code examples for your Web pages.
JavaScript is very rich, and although you can learn most of its grammar with these online tutorials, you won't learn the entire language. If you're serious about writing your own JavaScript codes, you need a good book...
 |
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks This book provides you with over 100 thoroughly-tested, customizable and elegant solutions that will show you how to add usable and accessible interactivity to your site: from slick drop-down menus, to style sheet switchers, to AJAX applications, and much more. It also includes download access to all JavaScript code samples used throughout the book - you can plug them right into your own websites without any retyping. |
For more books on JavaScript see Resources: Books on Web Designing.
Don't forget that JavaScript code, just like HTML, can be viewed by selecting View Source on your browser. Learn JavaScript tricks by looking at scripts other people have written.
- Overview
- Cascading Style Sheets (CSS)
- HTML Frames
- JavaScript:
- JavaScript Examples
- PHP
- CGI Scripts
- .htaccess file
What's New
Inexpensive Web Hosting
How to choose a fast and reliable service from the bulk of cheap hosting solutions.
Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.
User-friendly Web conferencing tool
Easy website building tool that may change your business.