Here are a few JavaScript examples that are not only educational, but also applicable for practical Web development.
Image swapping
Here's the classic mouseover button effect that shows one image when it's left alone, and another when the mouse passes over it...
<head>
</head>
<script type="text/javascript">
<!--
function PreloadImages() {
var aImages = new Array('img12.jpg','img22.jpg');
for(var i=0; i < aImages.length; i++) {
var img = new Image();
img.src = aImages[i];
}
}
//-->
</script>
<body onLoad="PreloadImages()">
<a href="index.html"
onMouseOver="document.img1.src='img12.jpg';"
onMouseOut="document.img1.src='img11.jpg';">
<img src="img11.jpg" name="img1">
<a href="javascript-examples.html"
onMouseOver="document.img2.src='img22.jpg';"
onMouseOut="document.img2.src='img21.jpg';">
<img src="img21.jpg" name="img2">
</body>
</html>
In the above JavaScript example there are two graphic buttons, one called "img11.jpg" and the other called "img21.jpg." The buttons contain onMouseOver and onMouseOut instructions that change the image objects from "img11.jpg" to "img12.jpg" and from "img21.jpg" to "img22.jpg" respectively, and back again.
The body tag has an event handler called onLoad, which calls the function PreloadImages once a page finishes loading. This function creates an array of the names of images to preload, and then creates a new Image object for each name.
This makes the browser to preload all images and store them in the cache when the page first loads, before any rollover action. It's necessary for instant image swapping.
Using cookies
This JavaScript example places one item from a set of items (tips, thoughts, quotes, banners) on your Web page. It simply includes in your page one string from a big array. Since the strings may be long and may contain any HTML tags, you can easily create, for example, banner rotation.
Each time the page loads, a new item will be displayed. Every visitor has his own counter stored in a browser cookie.
<body>
<script type="text/javascript">
<!--
var count=document.cookie.indexOf("cnt=");
if(count>=0) count=document.cookie.substring(count+4);
else count=0;
document.cookie = "cnt=" + (count+1) + ";expires=Fri,1 Jan 2010 00:00:00";
var aStrings = new Array(
"<a href='index.html'>Home Page</a>",
"<a href='examples.html'>JavaScript Examples</a>",
"<a href='tutorials.html'>JavaScript Tutorials</a>"
);
document.write(aStrings[count%aStrings.length]);
//-->
</script>
</body>
</html>
This script uses a cookie (a small file that gets written onto your hard disk by JavaScript from the website you're visiting) to store the variable count. This variable is incremented every time the page is loaded, and is used as an index of the array aStrings, which contains HTML strings.
JavaScript game
This JavaScript example shows that you can create almost application-like pages with the help of JavaScript. Unlike the above JavaScript examples, this one is much longer. You can view the code by selecting View Source in your browser.
Object of the game
Assemble a big picture from small scraps. During assembling you can see the little sample
of the picture. You can choose the complexity of the game by selecting the amount of
scraps below.
- 4 x 3 - very simple variant of the game (for kids).
- 8 x 6 - medium complexity. It may take 10 minutes and more to accomplish this game. Be patient!
- 12 x 9 - top complexity. It's almost impossible to finish the game in this mode.
Select the variant and click any picture to start the game. After loading the puzzle page, during the game process, Internet connection is not necessary.
)
)
)
For more useful JavaScript examples, look at Tools: Site Search Engine and Tools: Secure HTML. These free Web tools make heavy use of JavaScript.
If you want more JavaScript examples, see, for instance...
The JavaScript Source
An excellent resource with tons of free "cut and paste" JavaScript examples
for your Web pages.
- Overview
- Cascading Style Sheets (CSS)
- HTML Frames
- JavaScript:
- JavaScript Examples
- PHP
- CGI Scripts
- .htaccess file
What's New
How to Create a Website
One-page guide for beginners.
Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.
Advanced and free spam blockers
New generation of email spam blockers.
Dedicated IP hosting
Benefits of using a static over shared IP address.