Scribd
Upload
147 views

Java Script Code Sample

JavaScript is an object-based scripting language used for HTML (Hypertext Markup Language) to add interactive effects to web pages. It supports events, functions, and objects and can run in any browser. JavaScript code can execute when events occur, like when a user clicks a button, and can access and modify the content, structure, and style of a document. It is commonly used for client-side form validation, generating content dynamically, and interacting with the user.

Uploaded by

Aparnesh Roy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
147 views

Java Script Code Sample

JavaScript is an object-based scripting language used for HTML (Hypertext Markup Language) to add interactive effects to web pages. It supports events, functions, and objects and can run in any browser. JavaScript code can execute when events occur, like when a user clicks a button, and can access and modify the content, structure, and style of a document. It is commonly used for client-side form validation, generating content dynamically, and interacting with the user.

Uploaded by

Aparnesh Roy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

1.

What is Java Script


What is Java Script?
JavaScript is an object-based scripting language designed primarily for HTML 2. Java Script Syntax
(Hypertext Markup Language), It supports both IE (internet Explorer) and
Netscape Navigator and all other major web browser. Java script can be used 3. Java Script Objects
for both client side as well as server side in web development. It is not a
4. Java Script Sample Code
programming language it can not create executable code while compiling, it
is embed in document and while pursing the html document it executes the 5. Java Script FAQ
script, it is an object-based scripting language, while reasonably simple in
syntax, construction, and features, the object-based nature of JavaScript still
offers programmers significant power and flexibility through the ability to
create functions and new objects.

An object in the context of JavaScript, is a collection of properties and methods consisting a set of defined
characteristics that you can view and modify, and which you can interact. Methods are the techniques that are
used to perform action involving objects and properties. For example statement like Document. Write("Welcome to
Javascript") here Document is the object, Write is the method of Document object, JavaScript follows event driven
sequence. the events determine the program flow and event handlers determine what happen when these event
occurs.

Where to Write Java Script


You can write javascript in body or head section depend on your requirement or you can write java script in a
sepeate file with extension ".js" and includes it in your HTML document with <SCRIPT SOURCE="abc.js"> tag.

1. Writing text on the browser window


<html>
<body>
<script language="JavaScript">
document.write("Hello World!")
</script>
</body>
</html>

2. Writing Formatted Text on the Browser


<html>
<body>
<script language="Java Script">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>

3. Using HEAD Section


<html>
<head>
<script language="JavaScript">
function message(){
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>

4. Using BODY Section


<html>
<head>
</head>
<body>
<script language="JavaScript">
document.write("This message is written when the page loads")
</script>
</body>
</html>
<!--Example E Using External script -->
<html>
<head>
</head>
<body>
<script src="myscript.js">
</script>
<p>The actual script is in an external script file called "myscript.js".</p>
</body>
</html>
Java Script Objects
1. What is Java Script
Java Script is object based language, it is not support completley OOPs
(Object Oriented Programming) features, you may confuse how you create 2. Java Script Syntax
object from another object rather than create object from class normally we 3. Java Script Objects
do it in any object oriented programming language like C++, Java or dot
net. 4. Java Script Sample Code

Javascript support both built in objects as well as you can create your own 5. Java Script FAQ
custom objects, there are more than 20 objects, in these section we know in
details about them.
JavaScript's built in objects from the core of the logical event-driven environ meant within which scripts are
designed. These objects (frames, windows, documents, forms, and son on) behave in predictable ways and can be
manipulated through their well-defined properties and methods. Built in objects are those that are automatically
included in the java script environment; you don not have to create them or do anything to make them accessible
other refer to them within a script whenever they are nodded.

Sr. Objects Object Description


1 Anchor Consist of text string identifying a hypertext link in an HTML document.
2 Button Lets you define and control a push button that appears on an HTML from.
3 Checkbox Lets you exert control over a check box within an HTML form.
4 Date Provides access to date and time functions within a Java Script.
5 Document Consist of properties and methods associated with a specific HTML document file.
6 Element Array Represents a list of individual from elements accessible through an indexed array.
7 Form Consists of the properties and methods associated with individual forms in an
HTML document and form objects.
8 Frame Consists of an individual scrollable windows established through <FRAMESET> tag
and capable of displaying HTML documents.
9 Hidden Provides access to hidden objects that exits on a form.
10 History Consists of an accessible list of a URL links compiled during the course of a user
navigating through a series of web pages.
11 Link Represents a hypertext link in the form of text or image
12 Location Provides specific data on the currently active URL.
13 Math Performs a wide range of mathematical functions.
14 Navigator Provides version of Navigator
15 Password Provides access to that portion of an HTML form that is used to process text field
containing a password. entered characters are marked as asterisks.
16 Radio Lets you control access to a radio button embedded in an HTML form.
17 Reset Provides access to a reset button appearing on an HTML Form.
18 Select Provides indexed array access to the contents of a selection list or a scrolling list
appearing within an HTML form.
19 String Perform string manipulation.
20 Submit Perform processing of submit buttons that have been defined in an HTML
document.
21 Text Provides access to text input fields that are used on a HTML form.
22 Textarea Offers processing of scrollable, multiline text blocks that can be embedded within
an HTML form.
23 Window Represents the second highest level objects in the hierarchy.

Java Script Code Sample

There is more than 70 sample JavaScript it includes basic JavaScript syntax


features like variable, creating user define function (UDF) conditional
construct, loop, string manipulation, arrays, date objects, math objects,
windows, images, frames, forms, validation, client and browser information

1. Using Variables in JavaScript


2. Creating Functions in JavaScript
3. Function with Arguments
4. Function with two Arguments
5. Function that returns a value
6. Function with arguments that return a value
7. Using If Statement
8. IF Else statement in JavaScript
9. Switch Statement
10. Using For Loop
11. Using While Loop
12. Using DoWhile Loop
13. Finding String Length
14. Using Index of Method in String
15. Using String Match
16. Converting the case of Strings
17. Using substr function with string
18. Using Arrays in JavaScript
19. Another example of using Arrays in JavaScript
20. Using Dates in JavaScript
21. Time in JavaScript
22. Setting Date in JavaScript
23. Setting Date in UTC Format
24. Finding weekday of a particular date
25. Display Full date of the date
26. Display timer
27. Using the round function
28. Using the random function
29. Displaying random number between 1-10
30. Using the max function
31. Using the min function
32. Converting Celsius to Farenheit
33. Converting To Unicode
34. Changing Title of the window
35. Using Alert Boxes
36. Using Alert with line breaks
37. Disabling Right Click button of the mouse
38. Using Confirm button
39. Opening a new window
40. Opening a full size window
41. Specifying window position
42. Closing the window
43. Opening Multiple windows
44. Button which displays source of the web page
45. Mark a bookmark on the web page
46. Setting the homepage
47. Refreshing the screen on clicking the button
48. Status Bar message
49. Last modified page
50. Scrolling Down using JavaScript
51. Scrolling Right Using JavaScript
52. Scrolling effect
53. Preloading Image
54. Converts the page into without frames when clicked the button
55. E-Mail Validation
56. Value Validation
57. Length Validation of a text field
58. Form Validation
59. Setting the Focus to the text field
60. Selects the text in the Text Field
61. Radio button
62. Using CheckBox
63. Drop down list
64. Selecting multiple options from a drop down
65. Select Menu
66. Automatically changing tab index
67. Finding the browser of the client
68. All details of browser of the client
69. Monitor Information
70. Redirecting the user to another page
71. Displaying message to the user depending on the browser used by the
client

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>

You might also like