JavaScript code - overview, examples, resources, free JavaScript tutorials.

JavaScript

HomeBuildingPromotionIncomeAdvancedToolsResources

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...

<script type="text/javascript">
<!-- 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...

<html>
<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...

EventWhen it's triggered
onAbortAn image is stopped from loading because the user either hits Stop or leaves the page.
onBlurAn element, such as a window, frame, or form field, loses focus; that is, when the user clicks on something else.
onClickThe user clicks on the particular element.
onChangeThe value of a form field changes, for example, when the user types in some data.
onDblClickThe user double-clicks on the particular element.
onErrorA loading error happens, like a missing image.
onFocusThe user puts the focus on the target element, by clicking on it or tabbing to it.
onKeyDownA key on the keyboard is pushed down, regardless of whether it's then held down or released.
onKeyPressThis event is repeatedly triggered as long as a key is held down.
onKeyUpA key on the keyboard is released.
onLoadThe browser completely loads the page.
onMouseDownA key on the mouse is pushed down, regardless of whether it's then held down or released.
onMouseMoveThe mouse moves.
onMouseOutThe pointer moves out of the target area.
onMouseOverThe pointer moves over the target element.
onMouseUpA key on the mouse is released.
onResetThe Reset button of a form is clicked.
onResizeA window or frame is resized by the user.
onSelectThe user highlights text in a form field.
onSubmitA form is submitted.
onUnloadThe 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...

<form>
<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)...

function MyFunc( txt ) {
   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
by Cameron Adams and James Edwards

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.

Solo Build It!

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.

 

Web conferencing tool
for any business.

 

Advanced and free spam blockers
New generation of email spam blockers.

Sponsored links

Copyright © 2002-2023 BuildWebSite4u.com