Recently, I've picked up JavaScript to aid in designing my alma mater's Homepage. I learned JavaScript entirely from what I could find on the Internet, which I must say is quite alot. However, there were few good pages displaying good, practical, commonly usable applications of JavaScript. Well, so, I've created this page to display the more simple and common applications of JavaScript. Hopefully, you would find the information here useful. You may take any code here, but I would greatly appreciate any form of acknowledgement.
If you have any questions about JavaScript, feel free to use my Q&A Service. I will reply to all questions personally. Alternatively, view the Q&A service FAQ for previously answered questions about JavaScript.
 Background Fade |
This "background fade" effect is most often used when a page (or frame) is loading. By using JavaScript, the background color of the document can be changed dynamically, and thus through the use of a for loop, the background color can be changed constantly to create a "fade" effect. |
Fade from white to red background:
<script language="javascript">
var redstr
for (var red=0;red<255;red+=5){
redstr=red.toString(16)
if (red<16) redstr="0"+redstr
document.bgColor="#"+redstr+"0000";
}
</script> |
|
|
 Going Back |
| With JavaScript, the function of the "Back" button on Netscape Navigator's toolbar can be duplicated on your pages. Through the clicking of a button or hyperlink, your window will change to the previous location. |
Button method:
<form><input type="button" onClick="history.go(-1)"></form>
Hyperlink Method:
<a href="javascript:void(history.go(-1))">Hyperlink</a> |
|
 Last Modified |
| Web Page Designers often like to add a "Last Modified" statement at the end of their pages. However, it is easy to forget to change the often manually-keyed-in date and time. With JavaScript, the page is aware of the date is was last modified, as it is one of the file's attributes. Hence, a truely accurate and automatic means of displaying the last modified date and time of the document can be achieved. |
Displaying the last modified date and time:
<script language="javascript">
document.write("The page was last modified on"+document.lastModified)
</script> |
|
 Dynamic Imagery |
| With JavaScript, the images on the page can be changed dynamically as the user is viewing the page. This allows for the creation of LED panels, etc. However, there is one restriction: the images must all be of the same size. Nevertheless, it is still very powerful. For example, you can create a matrix of images to form an LED Board, or display animation, or different graphics when the user clicks on different buttons, etc. |
Animation:
<head>
<script language="javascript">
var i=0
var imgs=new Array()
imgs[0]=new Image;imgs[0].src="frame0.gif"
imgs[1]=new Image;imgs[1].src="frame1.gif"
imgs[2]=new Image;imgs[2].src="frame2.gif"
function animate(){
document.images[0].src=imgs[i++].src
if (i==3) i=0;
setTimeout("animate()",100);
}
setTimeout("animate()",1000);
</script>
</head>
<body>
<img src="frame0.gif" width=13 height=14 border=0>
</body> |
|
 Form validation |
| On the web, HTML forms are often employed to obtain user input. However, before the onset of JavaScript, there was little client-side validation capability. With JavaScript, form input elements may be validated to prevent the submission of invalid data. With JavaScript, context sensitive help can even be implemented. |
Form validation:
<head>
<script language="javascript">
function validate(){
var digits="0123456789"
var temp
if (document.testform.Name.value==""){
alert("No Name !")
return false
}
if (document.testform.age.value==""){
alert("Invalid Age !")
return false
}
for (var i=0;i<document.testform.age.value.length;i++){
temp=document.testform.age.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("Invalid Age !")
return false
}
}
return true
}
</script>
</head>
<body>
<form name="testform" onSubmit="return validate()">
Name:<input type="text" size=30 name="Name">
Age:<input type="text" size=3 name="age">
<input type="submit" value="Submit">
</form>
</body>
|
|
 Status Bar Text |
| JavaScript also allows you to change the status bar text of the Navigator window to display messages. You may change the status bar text anytime, and the changes will be reflected immediately. Thus, you can make the text scroll to the left or right, or simulate the typing of text, etc. |
Typing simulation on the status bar:
<head>
<script lanuguage="javascript">
var Text="The quick brown fox jumped over the ten lazy dogs."
var Pos=1
function UpdateStatusBar(){
window.status=Text.substring(0,Pos++)
if (Pos==Text.length) Pos=0
setTimeout("UpdateStatusBar()",Math.random()*500)
}
UpdateStatusBar()
</script>
</head>
<body>
</body> |
|
 Multiple Search Engine Select |
| You can use JavaScript to allow the user the type in the search text in a single text box (edit control), select a search engine from a list, and press a button to search using that search engine. This demonstrates the flexibility and power Javascript gives you in the design of Web Pages. |
Multiple Search Engine Select:
<head>
<script language="JavaScript">
var FirstForm;
function StartSearch(){
document.forms[FirstForm+document.InputForm.SearchSelect.[Next Line]
selectedIndex].elements[0].value=document.InputForm.SearchWords.value;
document.forms[FirstForm+document.InputForm.SearchSelect.[Next Line]
selectedIndex].submit();
}
</script>
</head>
<body>
<form Name="InputForm">
Search For: <input name="SearchWords" type=text size=30>
Search Engine: <select Name="SearchSelect">
<option selected>Yahoo
<option>Altavista
<option>Excite
<option>Lycos
</select>
<br><input type=button value="Search !" onClick="StartSearch()">
</form>
<script language="JavaScript">FirstForm=document.forms.length</script>
<form action="http://search.yahoo.com/bin/search" method=get>
<input type="hidden" size=35 name=p>
</form>
<form action="http://www.altavista.digital.com/cgi-bin/query" method=get>
<input type="hidden" name=q size=35 maxlength=200 value="">
<input type="hidden" name=pg value=q>
<input type="hidden" name="fmt" value=".">
<input type="hidden" name=what value=web>
</form>
<form action="http://www.excite.com/search.gw" method=post>
<input type="hidden" name="search" size=35>
<input type="hidden" name="searchType" value="Keyword">
<input type="hidden" name="category" value="default" checked>
<input type="hidden" name="mode" value="relevance">
<input type="hidden" name="showqbe" value="1">
<input type="hidden" name="display" value="html3,hb">
</form>
<form action="http://www.lycos.com/cgi-bin/nph-randurl[Next Line]
/cgi-bin/largehostpursuit1.html">
<input type=hidden size=35 name="query">
</form>
</body>
|
* The above code uses what I call "hidden" forms (one form for each of the search engines in the list) to achieve this,
allowing the designer of the Web Page to specify the various custom options of the different search engines.
|
| Demonstration of the above code: |
|
 Cookies |
| Cookies are client-side state objects, i.e. they can be used to store values in the surfer's computer. It is a very powerful tool, as it allows user-specific information to be stored over a period of time without using up space in the server. JavaScript allows the programmer to not only read cookies, but also set new ones. Cookies can be used for storing any type of information, such as the surfer's browsing preferences, i.e. frames/no frames, etc. |
Form that allows you to set/get cookies:
<head>
<script language="Javascript">
function setcookievalue(name,value){
document.cookie=name+"="+value+";"+[Next Line]
"expires=Wednesday, 09-Nov-99 23:12:40 GMT"
}
function getcookievalue(name){
var temp=document.cookie+";";
var Pos=temp.indexOf("=",temp.indexOf(name+"="));
if (temp.indexOf(name+"=")==-1) return "";
return temp.substring(Pos+1,temp.indexOf(";",Pos));
}
</script>
</head>
<body>
<form name="Example">
<center>
Cookie name:<input name="CName" type="text" size=20><br>
Cookie value:<input name="CVal" type="text" size=40><br>
<input type="button" value="Set Cookie" [Next Line]
onClick="setcookievalue(document.Example.CName.value,document.Example.CVal.value)">
<input type="button" value="Get Cookie" [Next Line]
onClick="document.Example.CVal.value=getcookievalue(document.Example.CName.value)">
<input type="button" value="View document.cookie" [Next Line]
onClick="document.Example.ViewCookie.value=document.cookie"><br>
document.cookie:<input name="ViewCookie" type="text" size=50>
</center>
</form>
</body> |
* For more information, view Netscape's cookie specification |
| Demonstration of the above code: |
|
|
This page is still under construction... more innovations will be added soon !
[Home|Go Back]