1. JavaScripts- JavaScript is NOT
Java.
JavaScript is a basic scripting language that allows Web authors to
create dynamic pages that react to user interaction. JavaScript code can be
inserted in <SCRIPT> tags within a page's HTML code, or embedded into a
page to react to HTML "event handlers," such as a page loading, a button being
clicked, or a window opening.
JavaScript can greatly enhance the "coolness" and
interactivity of your web page. Great stuff you see on the net such as image
flips, drop down menu boxes, live clocks etc are all written in
JavaScript. If you want your web pages to look more than just a bunch of stale
and boring paper documents converted into digital form, you'll want to learn
this neat programming language.
The Basic Clock-
<!-- TWO STEPS TO INSTALL BASIC CLOCK:
1. Add the onLoad event handler into the BODY tag
2. Copy the coding into the BODY of your HTML document -->
<!-- STEP ONE: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="clock()">
<!-- STEP TWO: Paste this code into the BODY of your HTML document -->
<!-- Adjust the placement of the clock in the line below -->
<span id="pendule" style="position:absolute;left:300;top:20;"></span>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Xavier R. (xav@lougaou.com) -->
<!-- Modified: Benjamin Wright, Editor -->
<!-- Web Site: http://www.lougaou.com/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
// End -->
</script>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 1.42 KB -->
Would you like a "Back" button that
goes back to whence they came?
This small bit of code will create a back button that takes the user back to where they were, rather then to a URL that you set.
To add this to your page using FrontPage:
Copy the code below in the gray box (highlight and press CTRL+C keys)
Place your cursor where you would like the "Back" button to appear
Go to INSERT, Front Page Component, and select "Insert HTML"
Paste the code below into the Insert HTML dialog box. (Press CTRL+V keys)
Click OK.
Your button may not appear on the page in Normal view, but will appear in the preview view or when uploaded.
<form>
<input type="button" value="Back" onClick="history.go(-1)">
</form>
Scrolling Status window message
This script is a little longer then the ones above, but still fun.
You will add this part to your <HEAD> </HEAD> section in
your HTML view.
<script language="JavaScript">
<!--
var msg = "Welcome to my web page!!!! "
var delay = 150
var timerID
var maxCount = 0
var currCount = 1
function scrollMsg() {
if (maxCount == 0) {
maxCount = 3 * msg.length
}
window.status = msg
currCount++
msg = msg.substring (1, msg.length) + msg.substring (0,1)
if (currCount >= maxCount) {
timerID = 0
window.status = " "
return
}else{
timerID = setTimeout("scrollMsg()",delay)
}
}
// -->
</script>
Change only the text in red to reflect your own message.
Next add this short line to your <BODY> tag in your HTML view.
onLoad="scrollMsg()"
Do not change anything in this line.
Your <BODY> tag should now look like this:
<body onLoad="scrollMsg()">
Although, it may have several other attributes in the tag already, that is fine, don't remove the other attributes.
Just add this line before the closing wicket " >
"
| by The JavaScript Source |
Current Time Clock- http://free-javascripts.com/time/clock.html
Fixing the Clock Problem
Simple Clock requires only that
the following is added to the <body> section of your page, where
appropriate,
remembering to include the onload command within your <body>
tag (as shown below).
<script
Language="JavaScript">
<!-- This Script Created by Randy Bennett: http://home.thezone.net/~rbennett/utility/javahead.htm
-->
<!-- For this and 100s of other Free Javascripts, check out: -->
<!-- Free-Javascripts.com @ http://www.free-javascripts.com/ -->
<!-- Begin
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
//I added the following line to see if i could get 9 hours to show as 09
hours
timeValue = ((timeValue <10)? "0":"") + timeValue
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " pm" : " am"
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",100);
timerRunning = true;
}
function startclock() {
stopclock();
showtime();
}
// End -->
</SCRIPT>
<br><br>
<CENTER><B><FONT COLOR="#FFFFFF">The current time is:</FONT></B></CENTER><br><br>
<CENTER>
<FORM name="clock">
<input type="text" name="face" size=11 value="">
</FORM>
</CENTER>
(Step-by-step tutorial- http://javascript.internet.com/tutorials/frontpage2000.html)
Counter- http://www.digits.com/create.html
More
cool JavaScripts- Click
Here