|
|
JavaScript
JavaScript is much more complicated that HTML.
Even though its not HTML I am including it in this tutorial because it is used alot with HTML to
do things that would be impossible to do otherwise.
On this page I will give you several scripts that you can just copy and paste into your
pages. You can also look through the coding and learn more about how it is done.
This first one is for putting a description of a link in the status bar of their browser.
<A HREF="YourLink.html" onMouseOver="window.status='Your text here'; return true">
Very simple just add onMouseOver="window.status='Your text here'; return true" to your normal link.
This script pops up an alert message.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function drawAlert () {
alert ("Place your alert message in here!");
}
// End -->
</SCRIPT>
<BODY>
<CENTER>
<FORM>
<input type=button value="Click Here To Be Alerted!"
onClick="drawAlert()">
</FORM>
</CENTER>
</BODY>
</HTML>
This script places a button on your page that will print the page
when pressed.
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (window.print) {
document.write('<form>Do not forget to '
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"> this page!</form>');
}
// End -->
</script>
Calculator
<BODY>
<CENTER>
<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE=" 1 "
OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two" VALUE=" 2 "
OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE=" 3 "
OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus" VALUE=" + "
OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four" VALUE=" 4 "
OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five" VALUE=" 5 "
OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six" VALUE=" 6 "
OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE=" - "
OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE=" 7 "
OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE=" 8 "
OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine" VALUE=" 9 "
OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE=" x "
OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE=" c "
OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero" VALUE=" 0 "
OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt" VALUE=" = "
OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div" VALUE=" / "
OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
Calender
<BODY>
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT>
</CENTER>
This JavaScript builds a calender for for any month you
want.
This one is a little harder than the others to install. Dont forget
the unload event handler.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Rob Patrick (rpatrick@mit.edu) -->
<!-- Begin
function setToday() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getYear();
if (year < 100) { year += 1900; }
else { year += 2000; }
this.focusDay = day;
document.calControl.month.selectedIndex = month;
document.calControl.year.value = year;
displayCalendar(month, year);
}
function isFourDigitYear(year) {
if (year.length != 4) {
alert ("Sorry, the year must be four-digits in length.");
document.calControl.year.select();
document.calControl.year.focus();
} else { return true; }
}
function selectDate() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
displayCalendar(month, year);
}
}
function setPreviousYear() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
year--;
document.calControl.year.value = year;
displayCalendar(month, year);
}
}
function setPreviousMonth() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
if (month == 0) {
month = 11;
if (year > 1000) {
year--;
document.calControl.year.value = year;
}
} else { month--; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
}
}
function setNextMonth() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
if (month == 11) {
month = 0;
year++;
document.calControl.year.value = year;
} else { month++; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
}
}
function setNextYear() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
year++;
document.calControl.year.value = year;
displayCalendar(month, year);
}
}
function displayCalendar(month, year) {
month = parseInt(month);
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month+1,year);
var firstOfMonth = new Date (year, month, 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
document.calButtons.calPage.value = " Su Mo Tu We Th Fr Sa";
document.calButtons.calPage.value += "\n --------------------";
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
document.calButtons.calPage.value += " ";
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
if (i-startingPos+1 < 10)
document.calButtons.calPage.value += "0";
document.calButtons.calPage.value += i-startingPos+1;
document.calButtons.calPage.value += " ";
}
for (i=days; i<42; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
document.calButtons.calPage.value += " ";
}
document.calControl.Go.focus();
}
function getDaysInMonth(month,year) {
var days;
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
days=31;
else if (month==4 || month==6 || month==9 || month==11) days=30;
else if (month==2) {
if (isLeapYear(year)) { days=29; }
else { days=28; }
}
return (days);
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
return (true);
} else { return (false); }
}
// End -->
</SCRIPT>
<BODY onLoad="setToday()">
<CENTER>
<H2>Select-A-Month</H2>
<FORM NAME="calControl" onSubmit="return false;">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR><TD COLSPAN=7>
<CENTER>
<SELECT NAME="month" onChange="selectDate()">
<OPTION>January
<OPTION>February
<OPTION>March
<OPTION>April
<OPTION>May
<OPTION>June
<OPTION>July
<OPTION>August
<OPTION>September
<OPTION>October
<OPTION>November
<OPTION>December
</SELECT>
<INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4>
<INPUT TYPE="button" NAME="Go" value="Build!"
onClick="selectDate()">
</CENTER>
</TD>
</TR>
</FORM>
<FORM NAME="calButtons">
<TR><TD align="center"><textarea FONT="Courier"
NAME="calPage" WRAP=no ROWS=8
COLS=22></textarea></TD><TR><TD><CENTER>
<INPUT TYPE=BUTTON NAME="previousYear" VALUE=" << "
onClick="setPreviousYear()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE=" < "
onClick="setPreviousMonth()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE="Today"
onClick="setToday()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE=" > "
onClick="setNextMonth()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE=" >> "
onClick="setNextYear()">
</CENTER></TD></TR>
</TABLE></FORM></FONT>
This Script desplays the time on a button.
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Michael Tartaglia <stonedstan@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/SiliconValley/Horizon/5235 -->
<!-- Begin
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) {
hour = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hour = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hour = 12;
} else if (hrNow >= 13) {
hour = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hour = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
self.status = time;
setTimeout('clock()', 1000);
}
function timeInfo() {
milliSince = miNow;
milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = Math.round((milliNow / 1000) / 60);
alert("There have been " + milliSince + " milliseconds since midnight,
January 1, 1970. "
+ "You have spent " + milliNow + " of those milliseconds on this page.
"
+ ".... About " + minsVisit + " minutes, and "
+ secsVisit + " seconds.");
}
document.write("<form name=\"form\">"
+ "<input type=button value=\"Click for info!\""
+ " name=button onClick=\"timeInfo()\"></form>");
onError = null;
clock();
// End -->
</SCRIPT>
This clock desplays the time on your status bar. Dont forget
the unload
event handler.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Francis Woodhouse (francis@contessa.u-net.com) -->
<!-- Begin
function runClock() {
theTime = window.setTimeout("runClock()", 1000);
var today = new Date();
var display= today.toLocaleString();
status=display;
}
// End -->
</SCRIPT>
<body onLoad="runClock()">
Typing test.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Michael Tartaglia <stonedstan@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/SiliconValley/Horizon/5235 -->
<!-- Begin
msg = new Array("Practicing with your typing can greatly help your overall computer
skills.",
"A new computer is sold in the US every hour!",
"When do birds migrate from North to South?",
"Perplexing phrases, like this one, are tougher to type.")
word = 10
function m() {
msg = new Array("Practicing with your typing can greatly help your overall computer
skills.",
"A new computer is sold in the US every hour!",
"When do birds migrate from North to South?",
"Perplexing phrases, like this one, are tough to type.")
word = 10
}
function e() {
msg = new Array("If you can correctly, and quickly, type this perplexing sentence,
you are one superb typist!",
"You are one superb typist if you can correctly, and quickly, type this long
phrase.",
"I believe you're a good typist, so I believe you will correctly copy this
statement!",
"Because this is not a fairly simple phrase, could you swiftly, and precisely, copy
it?")
word = 15
}
function s() {
msg = new Array("Computers are the medium of the future.",
"Can you type this phrase rather quickly?",
"Who is the President of the US?",
"I believe that you can type well!")
word = 7
}
function beginIt() {
randNum = Math.floor((Math.random() * 10)) % 4
msgType = msg[randNum]
day = new Date();
startType = day.getTime();
document.theForm.given.value = msgType
document.theForm.typed.focus();
document.theForm.typed.select();
}
function cheat() {
alert("You can not change that!");
document.theForm.typed.focus();
}
function stopIt() {
dayTwo = new Date();
endType = dayTwo.getTime();
totalTime = ((endType - startType) / 1000)
spd = Math.round((word/totalTime) * 60)
if (document.theForm.typed.value == document.theForm.given.value) {
alert("\nYou typed a " + word + " word sentence in "
+ totalTime + " seconds, a speed of about " + spd + " words per
minute!")
}
else {
alert("You made an error, but typed at a speed of " + spd + " words per
minute.")
}
}
// End -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM name="theForm">
<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>Are you a....</TD>
<TD align=center><input type=radio name="sme"
value="Beginner" onClick="s()" checked>Beginner
<input type=radio name="sme" value="Novice"
onClick="m()">Novice
<input type=radio name="sme" value="Expert"
onClick="e()">Expert</TD>
</TR>
<TR><TD colspan=2><BR>
<center><input type=button value="Start Typing Test"
name="start" onClick="beginIt()"></center><P>
<textarea name="given" cols=53 rows=3 wrap=on
onFocus="cheat()"></textarea></TD>
</TR>
<TR><TD colspan=2><center><input type=text name="typed"
size=45>
<input type=button value="DONE" name="stop"
onClick="stopIt()"></center></TD>
</TR>
</TABLE></FORM>
</CENTER>