Sample javascript code for beginners
Example 1. Using Variables in JavaScript Go
Top
<html>
<body>
<script language="JavaScript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>
<p>Then the variable is displayed one more time, only this time as a heading.</p>
</body>
</html>
Example 2. Creating Functions in JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
Example 3. Function with Arguments Go Top
<html>
<head>
<script language="JavaScript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p>
</body>
</html>
Example 4. Function with two Arguments Go Top
<html>
<head>
<script language="JavaScript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
</form>
<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
</body>
</html>
Example 5. Function that returns a value Go Top
<html>
<head>
<script language="JavaScript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script language="JavaScript">
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
Example 6. Function with arguments that return a value Go Top
<html>
<head>
<script language="JavaScript">
function total(numberA,numberB)
{
return numberA + numberB
}
</script>
</head>
<body>
<script language="JavaScript">
document.write(total(2,3))
</script>
<p>The script in the body section calls a function with two arguments, 2 and 3.</p>
<p>The function returns the sum of these two arguments.</p>
</body>
</html>
Example 7. Using If Statement Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>
<p>
This example demonstrates the If statement.<p>If the time on your browser is
less then 10, you will get a "Good morning" greeting.
</body>
</html>
Example 8. IF Else statement in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
<p>
This example demonstrates the If...Else statement.<p>If the time on your browser is
less then 10, you will get a "Good morning" greeting. Otherwise you
will get a "Good day" greeting.
</body>
</html>
Example 9. Switch Statement Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("Finally Friday")
break
case 6:
document.write("Super Saturday")
break
case 0:
document.write("Sleepy Sunday")
break
default:
document.write("I'm really looking forward to this weekend!")
}
</script>
<p>This example demonstrates the switch statement.</p>
<p>You will receive a different greeting based on what day it is.</p>
<p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>
</body>
</html>
Example 10. Using For Loop Go Top
<html>
<body>
<script language="JavaScript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
Example 11. Using While Loop Go Top
<html>
<body>
<script language="JavaScript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
Example 12. Using DoWhile Loop Go Top
<html>
<body>
<script language="JavaScript">
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
Example 13. Finding String Length Go Top
<html>
<body>
<script language="JavaScript">
var str="how many characters"
document.write(str.length)
</script>
</body>
</html>
Example 14. Using Index of Method in String Go Top
<html>
<body>
<script language="JavaScript">
var str="W3Schools"
var character=str.indexOf("School")
document.write(character + "<br>")
if (character>=0) {
document.write("The string contains the specified character")
}
</script>
</body>
</html>
Example 15. Using String Match Go Top
<html>
<body>
<script language="JavaScript">
var str = "W3Schools are great"
document.write(str.match("great"))
</script>
</body>
</html>
Example 16. Converting the case of Strings Go Top
<html>
<body>
<script language="JavaScript">
var str=("Hello JavaScripters!")
document.write(str.toLowerCase())
document.write("<br>")
document.write(str.toUpperCase())
</script>
</body>
</html>
Example 17. Using substr function with string Go Top
<html>
<body>
<script language="JavaScript">
var str="W3Schools are great"
document.write(str.substr(3,6))
</script>
</body>
</html>
Example 18. Using Arrays in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var famname = new Array(6)
famname[0] = "Jan Egil"
famname[1] = "Tove"
famname[2] = "Hege"
famname[3] = "Stale"
famname[4] = "Kai Jim"
famname[5] = "Borge"
for (i=0; i<6; i++)
{
document.write(famname[i] + "<br>")
}
</script>
</body>
</html>
Example 19. Another example of using Arrays in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")
for (i=0; i<famname.length; i++)
{
document.write(famname[i] + "<br>")
}
</script>
</body>
</html>
Example 20. Using Dates in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>
</body>
</html>
Example 21. Time in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
</body>
</html>
Example 22. Setting Date in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
d.setFullYear("1990")
document.write(d)
</script>
</body>
</html>
Example 23. Setting Date in UTC Format Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>
</body>
</html>
Example 24. Finding weekday of a particular date Go Top
<html>
<body>
<script language="JavaScript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
document.write("Today is " + weekday[d.getDay()])
</script>
</body>
</html>
Example 25. Display Full date of the date Go Top
<html>
<body>
<script language="JavaScript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>
Example 26. Display timer Go Top
<html>
<head>
<script Language="JavaScript">
var timer = null
function stop()
{
clearTimeout(timer)
}
function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
var clock = hours
clock += ((minutes < 10) ? ":0" : ":") + minutes
clock += ((seconds < 10) ? ":0" : ":") + seconds
document.forms[0].display.value = clock;
timer = setTimeout("start()",1000);
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display">
</form>
</body>
</html>
Example 27. Using the round function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.round(7.25))
</script>
</body>
</html>
Example 28. Using the random function Go Top
<html>
<body>
<script language="JavaScript">
no=Math.random()*10
document.write(Math.round(no))
</script>
</body>
</html>
Example 29. Displaying random number between 1-10 Go Top
<html>
<body>
<script language="JavaScript">
no=Math.random()*10
document.write(Math.round(no))
</script>
</body>
</html>
Example 30. Using the max function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.max(2,4))
</script>
</body>
</html>
Example 31. Using the min function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.min(2,4))
</script>
</body>
</html>
Example 32. Converting Celsius to Fahrenheit Go Top
<html>
<head>
<script language="JavaScript">
function convert(degree)
{
if (degree=="C")
{
F=document.myform.celsius.value * 9 / 5 + 32
document.myform.fahrenheit.value=Math.round(F)
}
else
{
C=(document.myform.fahrenheit.value -32) * 5 / 9
document.myform.celsius.value=Math.round(C)
}
}
</script>
</head>
<body>
<b>Insert a number in either input field, and the number will be converted into
either Celsius or Fahrenheit.</b>
<br />
<form name="myform">
<input name="celsius" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input name="fahrenheit" onkeyup="convert('F')"> degrees Fahrenheit
</form>
<br />
Note that the <b>Math.round</b> method is used,
so that the result will be returned as a whole number.
</body>
</html>
Example 33. Converting To Unicode Go Top
<html>
<head>
<script language="JavaScript">
function toUnicode()
{
var str=document.myForm.myInput.value
if (str!="")
{
unicode=str.charCodeAt(0)
}
document.myForm.unicode.value=unicode
}
</script>
</head>
<body>
<form name="myForm">
Write a character:<br />
<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">
<hr />
The character's Unicode:<br />
<input size="3" name="unicode">
</form>
</html>
Example 34. Changing Title of the window Go Top
<html>
<head>
<script language="JavaScript">
function newTitle()
{
parent.document.title="Put your new title here"
}
</script>
<body>
Click this button and check the browser's title field
<form>
<input type="button" onclick="newTitle()" value="Get A new title">
</form>
</body>
</html>
Example 35. Using Alert Boxes Go Top
<html>
<body>
<script language="JavaScript">
alert("Hello World!")
</script>
</body>
</html>
Example 36. Using Alert with line breaks Go Top
<html>
<body>
<script language="JavaScript">
alert("Hello again! This is how we" + '\n' + "add line breaks into an alert box")
</script>
</body>
</html>
Example 37. Disabling Right Click button of the mouse Go Top
<html>
<head>
<script language="JavaScript">
function disable()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow you can not view my source\nand you can not steal my images")
}
}
</script>
</head>
<body onmousedown="disable()">
<p>Right-click on this page to trigger the event.</p>
<p>The event property is not recognized in Netscape.</p>
<p>Note that this is no guarantee that nobody can view the page source, or steal the images.</p>
</body>
</html>
Example 38. Using Confirm button Go Top
<html>
<body>
<script language="JavaScript">
var name = confirm("Press a button")
if (name == true) {
document.write("You pressed OK")
}
else
{
document.write("You pressed Cancel")
}
</script>
</body>
</html>
<!-- Example 39 Using Prompt function-->
<html>
<head>
</head>
<body>
<script language="JavaScript">
var name = prompt("Please enter your name","")
if (name != null && name != "")
{
document.write("Hello " + name)
}
</script>
</body>
</html>
Example 39. Opening a new window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
window.open("http://www.w3schools.com")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 40. Opening a full size window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
w_height=screen.availheight
w_width=screen.availwidth
window.open("default.asp","","height=" + w_height + ",width=" + w_width + ",left=0,top=0")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 41. Specifying window position Go Top
<html>
<head>
<script language="JavaScript">
function openwindow()
{
window.open("http://www.w3schools.com","my_new_window","width=400,height=400,top=0,left=0")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 42. Closing the window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
mywindow=window.open("http://www.w3schools.com","My_new_window","width=300,height=300")
}
function closewindow()
{
mywindow.close()
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
<input type=button value="Close Window" onclick="closewindow()">
</form>
</body>
</html>
Example 43. Opening Multiple windows Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
window1=window.open("http://www.microsoft.com/")
window2=window.open("http://www.w3schools.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="openwindow()">
</form>
</body>
</html>
Example 44. Button which displays source of the web page Go Top
<html>
<head>
<script language="JavaScript">
function source()
{
location="view-source:" + window.location.href
}
</script>
</head>
<body>
<form>
<input type="button" value="View source" onclick="source()">
</form>
</body>
</html>
Example 45. Mark a bookmark on the web page Go Top
<html>
<head>
<script language="JavaScript">
function bookmark()
{
window.external.AddFavorite("http://www.w3schools.com","W3Schools.com")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="bookmark()" value="Click here to bookmark me">
</form>
</body>
</html>
Example 46. Setting the homepage Go Top
<html>
<head>
<script language="JavaScript">
function makeDefault(element)
{
element.style.behavior='url(#default#homepage)';
element.setHomePage('http://www.w3schools.com');
}
</script>
</head>
<body>
<p>Click the button and W3Schools will become your default home page.</p>
<form>
<input type="button"
onclick="makeDefault(this)"
value="Make W3Schools your default homepage">
</form>
</body>
</html>
Example 47. Refreshing the screen on clicking the button Go Top
<html>
<head>
<script language="JavaScript">
function refresh()
{
location.reload()
}
</script>
</head>
<body>
<form>
<input type="button" value="Refresh" onclick="refresh()">
</form>
</body>
</html>
Example 48. Status Bar message Go Top
<HTML>
<HEAD>
<TITLE>JavaScript Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function scrollit_r21(seed)
{
var msg=" Yes...you can say whatever you want here...Just go on and on forever!"
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
var cmd="scrollit_r21(" + seed + ") ";
timerTwo=window.setTimeout(cmd, 100) ;
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r21(" + seed + ") ";
window.status=out;
timerTwo=window.setTimeout(cmd, 100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r21(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd, 100) ;
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit_r21(100)",75);
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="timerONE=window.setTimeout ('scrollit_r21(100) ' ,500) ;">
</BODY>
</HTML>
Example 49. Last modified page Go Top
<html>
<body>
This page was last modify:
<br />
<script language="JavaScript">
document.write(document.lastModified)
</script>
<br />
<br />
View source to see how it is done
</body>
</html>
Example 50. Scrolling Down using JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
window.scroll(1,600)
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Example 51. Scrolling Right Using JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
window.scroll(500,1)
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
<h1>
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
</h1>
</body>
</html>
Example 52. Scrolling effect Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
for (i=1; i<=600; i++)
{
window.scroll(1,i)
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
Push<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
scroll<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
button<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
to see<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
effect<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Example 53. Preloading Image Go Top
<html>
<head>
<script language="JavaScript">
if (document.images)
{
a = new Image(160, 120)
a.src = "landscape.jpg"
}
</script>
</head>
<body>
<img src="landscape.jpg" width="160" height="120">
</body>
</html>
Example 54. Converts the page into without frames when clicked the button Go Top
<html>
<head>
<script language="JavaScript">
function breakout()
{
if (window.top != window.self)
{
window.top.location="tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<form>
To break out of the frame:
<input type="button" onclick="breakout()" value="Click me">
</form>
</body>
</html>
Example 55. E-Mail Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
if (at == -1)
{
alert("Not a valid e-mail")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your E-mail address:
<input type="text" name="myEmail">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 56. Value Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
txt=x.myInput.value
if (txt>=1 && txt<=5)
{
return true
}
else
{
alert("Must be between 1 and 5")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter a value from 1 to 5:
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 57. Length Validation of a text field Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
In this input box you are not allowed to insert more than 5 characters:
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 58. Form Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
code=x.myCode.value
firstname=x.myName.value
submitOK="True"
if (at==-1)
{
alert("Not a valid e-mail")
submitOK="False"
}
if (code<1 || code>5)
{
alert("Your code must be between 1 and 5")
submitOK="False"
}
if (firstname.length>10)
{
alert("Your name must be less than 10 letters")
submitOK="False"
}
if (submitOK=="False")
{
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your e-mail:
<input type="text" name="myEmail">
<br> Enter your code, value from 1 to 5:
<input type="text" name="myCode">
<br> Enter your first name, max 10 letters:
<input type="text" name="myName">
<br> <input type="submit" value="Send input">
</form>
</body>
</html>
Example 59. Setting the Focus to the text field Go Top
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Get Focus" onclick="setfocus()">
</form>
</body>
</html>
Example 60. Selects the text in the Text Field Go Top
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30" value="input text">
<input type="button" value="Selected" onclick="setfocus()">
</form>
</body>
</html>
Example 61. Radio button Go Top
<html>
<head>
<script language="JavaScript">
function check(browser)
{
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Which browser is your favorite<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Explorer">Microsoft Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Netscape">Netscape Navigator<br>
<input type="text" name="answer">
</form>
</body>
</html>
Example 62. Using CheckBox Go Top
<html>
<head>
<script language="JavaScript">
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i = 0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
answer.value=txt
}
</script>
</head>
<body>
<form>
How do you like your coffee<br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<input type="text" name="answer">
<input type="button" name="test" onclick="check()" value="Order">
</form>
</body>
</html>
Example 63. Drop down list Go Top
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
<p>
Select your favorite browser:
<select name="dropdown" onchange="put()">
<option>Internet Explorer
<option>Netscape Navigator
</select>
</p>
<p>
Your favorite browser is:
<input type="text" name="favorite" value="Internet Explorer">
</p>
</form>
</body>
</html>
Example 64. Selecting multiple options from a drop down Go Top
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Select numbers:<br>
<select name="dropdown">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>0
</select>
<input type="button" onclick="put()" value="-->"> <input type="text" name="number">
</form>
</body>
</html>
Example 65. Select Menu Go Top
<html>
<head>
<script language="JavaScript">
function go(form)
{
location=form.selectmenu.value
}
</script>
</head>
<body>
<form>
<select name="selectmenu" onchange="go(this.form)">
<option>--Select page--
<option value="http://www.microsoft.com">Microsoft
<option value="http://www.altavista.com">Altavista
<option value="http://www.w3schools.com">W3Schools
</select>
</form>
</body>
</html>
Example 66. Automatically changing tab index Go Top
<html>
<head>
<script language="JavaScript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>This script automatically sets focus to the next input field
when the current input field's maxlength has been reached</p>
<form name="myForm">
<input size="3" tabindex="1" name="myInput"
maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" name="mySecond" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" name="myThird" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>
Example 67. Finding the browser of the client Go Top
<html>
<head>
<script language="JavaScript">
document.write("You are browsing this site with: "+ navigator.appName)
</script>
</head>
<body>
</body>
</html>
Example 68. All details of browser of the client Go Top
<html>
<body>
<script language="JavaScript">
document.write("BROWSER: ")
document.write(navigator.appName + "<br>")
document.write("BROWSERVERSION: ")
document.write(navigator.appVersion + "<br>")
document.write("CODE: ")
document.write(navigator.appCodeName + "<br>")
document.write("PLATFORM: ")
document.write(navigator.platform + "<br>")
document.write("REFERRER: ")
document.write(document.referrer + "<br>")
</script>
</body>
</html>
Example 69. Monitor Information Go Top
<html>
<body>
<script language="JavaScript">
document.write("SCREEN RESOLUTION: ")
document.write(screen.width + "*")
document.write(screen.height + "<br>")
document.write("AVAILABLE VIEW AREA: ")
document.write(window.screen.availWidth + "*")
document.write(window.screen.availHeight + "<br>")
document.write("COLOR DEPTH: ")
document.write(window.screen.colorDepth + "<br>")
</script>
</body>
</html>
Example 70. Redirecting the user to another page Go Top
<html>
<head>
<script language="JavaScript">
function redirectme()
{
bname=navigator.appName
if (bname.indexOf("Netscape")!=-1)
{
window.location="tryjs_netscape.htm"
return
}
if (bname.indexOf("Microsoft")!=-1)
{
window.location="tryjs_microsoft.htm"
return
}
window.location="tryjs_other.htm"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="redirectme()" value="Redirect">
</form>
</body>
</html>
Example 71. Displaying message to the user depending on the browser used by the client
<html>
<head>
<script language="JavaScript">
function browserversion()
{
txt="Your Browser is unknown"
browser=navigator.appVersion
if (browser.indexOf("2.")>-1)
{
txt="Your Browser is from the stone-age"
}
if (browser.indexOf("3.")>-1)
{
txt="You should update your Browser."
}
if (browser.indexOf("4.")>-1)
{
txt="Your Browser is good enough"
}
document.forms[0].message.value=txt
}
</script>
</head>
<body onload="browserversion()">
<form>
<input type="text" name="message" size="50">
</form>
</body>
</html>
<html>
<body>
<script language="JavaScript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>
<p>Then the variable is displayed one more time, only this time as a heading.</p>
</body>
</html>
Example 2. Creating Functions in JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
Example 3. Function with Arguments Go Top
<html>
<head>
<script language="JavaScript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p>
</body>
</html>
Example 4. Function with two Arguments Go Top
<html>
<head>
<script language="JavaScript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
</form>
<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
</body>
</html>
Example 5. Function that returns a value Go Top
<html>
<head>
<script language="JavaScript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script language="JavaScript">
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
Example 6. Function with arguments that return a value Go Top
<html>
<head>
<script language="JavaScript">
function total(numberA,numberB)
{
return numberA + numberB
}
</script>
</head>
<body>
<script language="JavaScript">
document.write(total(2,3))
</script>
<p>The script in the body section calls a function with two arguments, 2 and 3.</p>
<p>The function returns the sum of these two arguments.</p>
</body>
</html>
Example 7. Using If Statement Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>
<p>
This example demonstrates the If statement.<p>If the time on your browser is
less then 10, you will get a "Good morning" greeting.
</body>
</html>
Example 8. IF Else statement in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
<p>
This example demonstrates the If...Else statement.<p>If the time on your browser is
less then 10, you will get a "Good morning" greeting. Otherwise you
will get a "Good day" greeting.
</body>
</html>
Example 9. Switch Statement Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("Finally Friday")
break
case 6:
document.write("Super Saturday")
break
case 0:
document.write("Sleepy Sunday")
break
default:
document.write("I'm really looking forward to this weekend!")
}
</script>
<p>This example demonstrates the switch statement.</p>
<p>You will receive a different greeting based on what day it is.</p>
<p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>
</body>
</html>
Example 10. Using For Loop Go Top
<html>
<body>
<script language="JavaScript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
Example 11. Using While Loop Go Top
<html>
<body>
<script language="JavaScript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
Example 12. Using DoWhile Loop Go Top
<html>
<body>
<script language="JavaScript">
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
Example 13. Finding String Length Go Top
<html>
<body>
<script language="JavaScript">
var str="how many characters"
document.write(str.length)
</script>
</body>
</html>
Example 14. Using Index of Method in String Go Top
<html>
<body>
<script language="JavaScript">
var str="W3Schools"
var character=str.indexOf("School")
document.write(character + "<br>")
if (character>=0) {
document.write("The string contains the specified character")
}
</script>
</body>
</html>
Example 15. Using String Match Go Top
<html>
<body>
<script language="JavaScript">
var str = "W3Schools are great"
document.write(str.match("great"))
</script>
</body>
</html>
Example 16. Converting the case of Strings Go Top
<html>
<body>
<script language="JavaScript">
var str=("Hello JavaScripters!")
document.write(str.toLowerCase())
document.write("<br>")
document.write(str.toUpperCase())
</script>
</body>
</html>
Example 17. Using substr function with string Go Top
<html>
<body>
<script language="JavaScript">
var str="W3Schools are great"
document.write(str.substr(3,6))
</script>
</body>
</html>
Example 18. Using Arrays in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var famname = new Array(6)
famname[0] = "Jan Egil"
famname[1] = "Tove"
famname[2] = "Hege"
famname[3] = "Stale"
famname[4] = "Kai Jim"
famname[5] = "Borge"
for (i=0; i<6; i++)
{
document.write(famname[i] + "<br>")
}
</script>
</body>
</html>
Example 19. Another example of using Arrays in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")
for (i=0; i<famname.length; i++)
{
document.write(famname[i] + "<br>")
}
</script>
</body>
</html>
Example 20. Using Dates in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>
</body>
</html>
Example 21. Time in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
</body>
</html>
Example 22. Setting Date in JavaScript Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
d.setFullYear("1990")
document.write(d)
</script>
</body>
</html>
Example 23. Setting Date in UTC Format Go Top
<html>
<body>
<script language="JavaScript">
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>
</body>
</html>
Example 24. Finding weekday of a particular date Go Top
<html>
<body>
<script language="JavaScript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
document.write("Today is " + weekday[d.getDay()])
</script>
</body>
</html>
Example 25. Display Full date of the date Go Top
<html>
<body>
<script language="JavaScript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>
Example 26. Display timer Go Top
<html>
<head>
<script Language="JavaScript">
var timer = null
function stop()
{
clearTimeout(timer)
}
function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
var clock = hours
clock += ((minutes < 10) ? ":0" : ":") + minutes
clock += ((seconds < 10) ? ":0" : ":") + seconds
document.forms[0].display.value = clock;
timer = setTimeout("start()",1000);
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display">
</form>
</body>
</html>
Example 27. Using the round function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.round(7.25))
</script>
</body>
</html>
Example 28. Using the random function Go Top
<html>
<body>
<script language="JavaScript">
no=Math.random()*10
document.write(Math.round(no))
</script>
</body>
</html>
Example 29. Displaying random number between 1-10 Go Top
<html>
<body>
<script language="JavaScript">
no=Math.random()*10
document.write(Math.round(no))
</script>
</body>
</html>
Example 30. Using the max function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.max(2,4))
</script>
</body>
</html>
Example 31. Using the min function Go Top
<html>
<body>
<script language="JavaScript">
document.write(Math.min(2,4))
</script>
</body>
</html>
Example 32. Converting Celsius to Fahrenheit Go Top
<html>
<head>
<script language="JavaScript">
function convert(degree)
{
if (degree=="C")
{
F=document.myform.celsius.value * 9 / 5 + 32
document.myform.fahrenheit.value=Math.round(F)
}
else
{
C=(document.myform.fahrenheit.value -32) * 5 / 9
document.myform.celsius.value=Math.round(C)
}
}
</script>
</head>
<body>
<b>Insert a number in either input field, and the number will be converted into
either Celsius or Fahrenheit.</b>
<br />
<form name="myform">
<input name="celsius" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input name="fahrenheit" onkeyup="convert('F')"> degrees Fahrenheit
</form>
<br />
Note that the <b>Math.round</b> method is used,
so that the result will be returned as a whole number.
</body>
</html>
Example 33. Converting To Unicode Go Top
<html>
<head>
<script language="JavaScript">
function toUnicode()
{
var str=document.myForm.myInput.value
if (str!="")
{
unicode=str.charCodeAt(0)
}
document.myForm.unicode.value=unicode
}
</script>
</head>
<body>
<form name="myForm">
Write a character:<br />
<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">
<hr />
The character's Unicode:<br />
<input size="3" name="unicode">
</form>
</html>
Example 34. Changing Title of the window Go Top
<html>
<head>
<script language="JavaScript">
function newTitle()
{
parent.document.title="Put your new title here"
}
</script>
<body>
Click this button and check the browser's title field
<form>
<input type="button" onclick="newTitle()" value="Get A new title">
</form>
</body>
</html>
Example 35. Using Alert Boxes Go Top
<html>
<body>
<script language="JavaScript">
alert("Hello World!")
</script>
</body>
</html>
Example 36. Using Alert with line breaks Go Top
<html>
<body>
<script language="JavaScript">
alert("Hello again! This is how we" + '\n' + "add line breaks into an alert box")
</script>
</body>
</html>
Example 37. Disabling Right Click button of the mouse Go Top
<html>
<head>
<script language="JavaScript">
function disable()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow you can not view my source\nand you can not steal my images")
}
}
</script>
</head>
<body onmousedown="disable()">
<p>Right-click on this page to trigger the event.</p>
<p>The event property is not recognized in Netscape.</p>
<p>Note that this is no guarantee that nobody can view the page source, or steal the images.</p>
</body>
</html>
Example 38. Using Confirm button Go Top
<html>
<body>
<script language="JavaScript">
var name = confirm("Press a button")
if (name == true) {
document.write("You pressed OK")
}
else
{
document.write("You pressed Cancel")
}
</script>
</body>
</html>
<!-- Example 39 Using Prompt function-->
<html>
<head>
</head>
<body>
<script language="JavaScript">
var name = prompt("Please enter your name","")
if (name != null && name != "")
{
document.write("Hello " + name)
}
</script>
</body>
</html>
Example 39. Opening a new window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
window.open("http://www.w3schools.com")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 40. Opening a full size window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
w_height=screen.availheight
w_width=screen.availwidth
window.open("default.asp","","height=" + w_height + ",width=" + w_width + ",left=0,top=0")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 41. Specifying window position Go Top
<html>
<head>
<script language="JavaScript">
function openwindow()
{
window.open("http://www.w3schools.com","my_new_window","width=400,height=400,top=0,left=0")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
Example 42. Closing the window Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
mywindow=window.open("http://www.w3schools.com","My_new_window","width=300,height=300")
}
function closewindow()
{
mywindow.close()
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
<input type=button value="Close Window" onclick="closewindow()">
</form>
</body>
</html>
Example 43. Opening Multiple windows Go Top
<html>
<head>
<script language=javascript>
function openwindow()
{
window1=window.open("http://www.microsoft.com/")
window2=window.open("http://www.w3schools.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="openwindow()">
</form>
</body>
</html>
Example 44. Button which displays source of the web page Go Top
<html>
<head>
<script language="JavaScript">
function source()
{
location="view-source:" + window.location.href
}
</script>
</head>
<body>
<form>
<input type="button" value="View source" onclick="source()">
</form>
</body>
</html>
Example 45. Mark a bookmark on the web page Go Top
<html>
<head>
<script language="JavaScript">
function bookmark()
{
window.external.AddFavorite("http://www.w3schools.com","W3Schools.com")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="bookmark()" value="Click here to bookmark me">
</form>
</body>
</html>
Example 46. Setting the homepage Go Top
<html>
<head>
<script language="JavaScript">
function makeDefault(element)
{
element.style.behavior='url(#default#homepage)';
element.setHomePage('http://www.w3schools.com');
}
</script>
</head>
<body>
<p>Click the button and W3Schools will become your default home page.</p>
<form>
<input type="button"
onclick="makeDefault(this)"
value="Make W3Schools your default homepage">
</form>
</body>
</html>
Example 47. Refreshing the screen on clicking the button Go Top
<html>
<head>
<script language="JavaScript">
function refresh()
{
location.reload()
}
</script>
</head>
<body>
<form>
<input type="button" value="Refresh" onclick="refresh()">
</form>
</body>
</html>
Example 48. Status Bar message Go Top
<HTML>
<HEAD>
<TITLE>JavaScript Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function scrollit_r21(seed)
{
var msg=" Yes...you can say whatever you want here...Just go on and on forever!"
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
var cmd="scrollit_r21(" + seed + ") ";
timerTwo=window.setTimeout(cmd, 100) ;
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r21(" + seed + ") ";
window.status=out;
timerTwo=window.setTimeout(cmd, 100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit_r21(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd, 100) ;
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit_r21(100)",75);
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="timerONE=window.setTimeout ('scrollit_r21(100) ' ,500) ;">
</BODY>
</HTML>
Example 49. Last modified page Go Top
<html>
<body>
This page was last modify:
<br />
<script language="JavaScript">
document.write(document.lastModified)
</script>
<br />
<br />
View source to see how it is done
</body>
</html>
Example 50. Scrolling Down using JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
window.scroll(1,600)
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Example 51. Scrolling Right Using JavaScript Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
window.scroll(500,1)
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
<h1>
The_window.scroll_method_scrolls_the_document_to_the_specified_x,y_coordinates
</h1>
</body>
</html>
Example 52. Scrolling effect Go Top
<html>
<head>
<script language="JavaScript">
function scrolldown()
{
for (i=1; i<=600; i++)
{
window.scroll(1,i)
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll" onclick="scrolldown()">
</form>
Push<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
scroll<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
button<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
to see<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
effect<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Example 53. Preloading Image Go Top
<html>
<head>
<script language="JavaScript">
if (document.images)
{
a = new Image(160, 120)
a.src = "landscape.jpg"
}
</script>
</head>
<body>
<img src="landscape.jpg" width="160" height="120">
</body>
</html>
Example 54. Converts the page into without frames when clicked the button Go Top
<html>
<head>
<script language="JavaScript">
function breakout()
{
if (window.top != window.self)
{
window.top.location="tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<form>
To break out of the frame:
<input type="button" onclick="breakout()" value="Click me">
</form>
</body>
</html>
Example 55. E-Mail Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
if (at == -1)
{
alert("Not a valid e-mail")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your E-mail address:
<input type="text" name="myEmail">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 56. Value Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
txt=x.myInput.value
if (txt>=1 && txt<=5)
{
return true
}
else
{
alert("Must be between 1 and 5")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter a value from 1 to 5:
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 57. Length Validation of a text field Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
In this input box you are not allowed to insert more than 5 characters:
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>
Example 58. Form Validation Go Top
<html>
<head>
<script language="JavaScript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
code=x.myCode.value
firstname=x.myName.value
submitOK="True"
if (at==-1)
{
alert("Not a valid e-mail")
submitOK="False"
}
if (code<1 || code>5)
{
alert("Your code must be between 1 and 5")
submitOK="False"
}
if (firstname.length>10)
{
alert("Your name must be less than 10 letters")
submitOK="False"
}
if (submitOK=="False")
{
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your e-mail:
<input type="text" name="myEmail">
<br> Enter your code, value from 1 to 5:
<input type="text" name="myCode">
<br> Enter your first name, max 10 letters:
<input type="text" name="myName">
<br> <input type="submit" value="Send input">
</form>
</body>
</html>
Example 59. Setting the Focus to the text field Go Top
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Get Focus" onclick="setfocus()">
</form>
</body>
</html>
Example 60. Selects the text in the Text Field Go Top
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30" value="input text">
<input type="button" value="Selected" onclick="setfocus()">
</form>
</body>
</html>
Example 61. Radio button Go Top
<html>
<head>
<script language="JavaScript">
function check(browser)
{
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Which browser is your favorite<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Explorer">Microsoft Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)"
value="Netscape">Netscape Navigator<br>
<input type="text" name="answer">
</form>
</body>
</html>
Example 62. Using CheckBox Go Top
<html>
<head>
<script language="JavaScript">
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i = 0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
answer.value=txt
}
</script>
</head>
<body>
<form>
How do you like your coffee<br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<input type="text" name="answer">
<input type="button" name="test" onclick="check()" value="Order">
</form>
</body>
</html>
Example 63. Drop down list Go Top
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
<p>
Select your favorite browser:
<select name="dropdown" onchange="put()">
<option>Internet Explorer
<option>Netscape Navigator
</select>
</p>
<p>
Your favorite browser is:
<input type="text" name="favorite" value="Internet Explorer">
</p>
</form>
</body>
</html>
Example 64. Selecting multiple options from a drop down Go Top
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Select numbers:<br>
<select name="dropdown">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>0
</select>
<input type="button" onclick="put()" value="-->"> <input type="text" name="number">
</form>
</body>
</html>
Example 65. Select Menu Go Top
<html>
<head>
<script language="JavaScript">
function go(form)
{
location=form.selectmenu.value
}
</script>
</head>
<body>
<form>
<select name="selectmenu" onchange="go(this.form)">
<option>--Select page--
<option value="http://www.microsoft.com">Microsoft
<option value="http://www.altavista.com">Altavista
<option value="http://www.w3schools.com">W3Schools
</select>
</form>
</body>
</html>
Example 66. Automatically changing tab index Go Top
<html>
<head>
<script language="JavaScript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>This script automatically sets focus to the next input field
when the current input field's maxlength has been reached</p>
<form name="myForm">
<input size="3" tabindex="1" name="myInput"
maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" name="mySecond" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" name="myThird" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>
Example 67. Finding the browser of the client Go Top
<html>
<head>
<script language="JavaScript">
document.write("You are browsing this site with: "+ navigator.appName)
</script>
</head>
<body>
</body>
</html>
Example 68. All details of browser of the client Go Top
<html>
<body>
<script language="JavaScript">
document.write("BROWSER: ")
document.write(navigator.appName + "<br>")
document.write("BROWSERVERSION: ")
document.write(navigator.appVersion + "<br>")
document.write("CODE: ")
document.write(navigator.appCodeName + "<br>")
document.write("PLATFORM: ")
document.write(navigator.platform + "<br>")
document.write("REFERRER: ")
document.write(document.referrer + "<br>")
</script>
</body>
</html>
Example 69. Monitor Information Go Top
<html>
<body>
<script language="JavaScript">
document.write("SCREEN RESOLUTION: ")
document.write(screen.width + "*")
document.write(screen.height + "<br>")
document.write("AVAILABLE VIEW AREA: ")
document.write(window.screen.availWidth + "*")
document.write(window.screen.availHeight + "<br>")
document.write("COLOR DEPTH: ")
document.write(window.screen.colorDepth + "<br>")
</script>
</body>
</html>
Example 70. Redirecting the user to another page Go Top
<html>
<head>
<script language="JavaScript">
function redirectme()
{
bname=navigator.appName
if (bname.indexOf("Netscape")!=-1)
{
window.location="tryjs_netscape.htm"
return
}
if (bname.indexOf("Microsoft")!=-1)
{
window.location="tryjs_microsoft.htm"
return
}
window.location="tryjs_other.htm"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="redirectme()" value="Redirect">
</form>
</body>
</html>
Example 71. Displaying message to the user depending on the browser used by the client
<html>
<head>
<script language="JavaScript">
function browserversion()
{
txt="Your Browser is unknown"
browser=navigator.appVersion
if (browser.indexOf("2.")>-1)
{
txt="Your Browser is from the stone-age"
}
if (browser.indexOf("3.")>-1)
{
txt="You should update your Browser."
}
if (browser.indexOf("4.")>-1)
{
txt="Your Browser is good enough"
}
document.forms[0].message.value=txt
}
</script>
</head>
<body onload="browserversion()">
<form>
<input type="text" name="message" size="50">
</form>
</body>
</html>
