Recommended sites:

-JavaScript Tutorials
-PHP tutorials
-JavaScript Forums

Andy's JavaScript tutorial 4

Advanced JavaScript applications

Ok, I'll dedicate this final tutorial to showing you some more advanced JavaScript applications, along with their complete source code, so you can simply cut and paste 'em to instantly "pump up" your site!

JavaScript live clock

This is a cool script that displays a "live" form clock on your web page:

Source code:

<form name="time">
<input type="text" name="time2" size=15>
</form>
<script>
function liveclock(){
var curdate=new Date()
var hours=curdate.getHours()
var minutes=curdate.getMinutes()
var seconds=curdate.getSeconds()
var suffix="AM"
if (hours>=12){
suffix="PM"
if (hours>=13)
hours-=12
}
if (minutes<10)
minutes="0"+minutes
if (seconds<10)
seconds="0"+seconds
var thetime=hours+":"+minutes+":"+seconds+" "+suffix
document.time.time2.value=thetime
setTimeout("liveclock()",1000)
}
liveclock()
</script>

Image Flip

An image flip is a cool JavaScript effect that makes an image change to another when the mouse moves over it. Not very practical, but defintely cool:

The above button consists of two images - one before the mouse is over it, and one after. Here's the source code:

Source code:

<a href="index.htm" onMouseover="if (document.images) document.images.menu.src='after.gif'" onMouseout="if (document.images) document.images.menu.src='before.gif'"><img src="before.gif" name="menu" border=0></a>

Try pasting the above code onto your webpage, and change 'before.gif' and 'after.gif' to reflect your own images. Notice how I gave the image a name ('menu') using the name attribute. This is neccessary, and if you want to have multiple image flips on one page, you'll need to give each image flip a unique name.

Drop down menu box

I'ms sure most of you have seen a drop down menu box before. They are <select> lists that go to the selected url when clicked on...a great space saver!

<form name="c1">
<p><select name="c2" size="1">
<option selected value="http://www.oocities.org">Geocities</option>
<option value="http://www.happypuppy.com">Happypuppy</option>
<option value="http://www.gamespot.com">Gamespot</option>
</select>
<input type="button" value="Go"
onClick="location=document.c1.c2.options
[document.c1.c2.selectedIndex].value"></p>
</form>

You can cram in as many links as you wish into the box simply by adding more options to the selection list.

Recommended JavaScript sites:

  JavaScript Kit- A superb JavaScript technology center featuring free scripts and tutorials on many aspects of JavaScript. I credit most of my JavaScript knowledge to this site.

  Dynamic Drive- Quite an amazing JavaScript site with advanced JavaScripts/DHTML scripts you can simply cut and paste onto your site to intantly add magic to your site. I must have used at least a dozen of them on my personal site already...