examples

<html><body>

<script type="text/javascript">document.write("Hello World!");</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("<h1>This is a header</h1>");</script>

</body></html>

<html><head></head>

<body>

<script type="text/javascript">document.write("This message is written by JavaScript");</script>

</body></html>

<html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}</script></head>

<body onload="message()">

</body></html>

<html><head></head><body>

<script src="xxx.js"></script>

<p>The actual script is in an external script file called "xxx.js".</p>

</body></html>

<html><body>

<script type="text/javascript">document.write("<h1>This is a header</h1>");document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");</script>

</body></html>

<html><body>

<script type="text/javascript">{document.write("<h1>This is a header</h1>");document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");}</script>

</body></html>

<html><body>

<script type="text/javascript">// This will write a header:document.write("<h1>This is a header</h1>");// This will write two paragraphs:document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");</script>

</body></html>

<html><body>

<script type="text/javascript">/*The code below will writeone header and two paragraphs*/document.write("<h1>This is a header</h1>");document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("<h1>This is a header</h1>");document.write("<p>This is a paragraph</p>");//document.write("<p>This is another paragraph</p>");</script>

</body></html>

<html><body>

<script type="text/javascript">/*document.write("<h1>This is a header</h1>");document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");*/</script>

</body></html>

<html><body>

<script type="text/javascript">var firstname;firstname="Hege";document.write(firstname);document.write("<br />");firstname="Tove";document.write(firstname);</script>

<p>The script above declares a variable,assigns a value to it, displays the value, change the value,and displays the value again.</p>

</body></html>

<html><body>

<script type="text/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>

<p>If the time on your browser is less than 10,you will get a "Good morning" greeting.</p>

</body></html>

<html><body>

<script type="text/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>

<p>If the time on your browser is less than 10,you will get a "Good morning" greeting.Otherwise you will get a "Good day" greeting.</p>

</body></html>

<html><body>

<script type="text/javascript">var r=Math.random();if (r>0.5){document.write("<a href='http://www.w3schools.com'>Learn Web Development!</a>");}else{document.write("<a href='http://www.refsnesdata.no'>Visit Refsnes Data!</a>");}</script>

</body></html>

<html><body><script type="text/javascript">var d = new Date();theDay=d.getDay();switch (theDay){case 5: document.write("<b>Finally Friday</b>"); break;case 6: document.write("<b>Super Saturday</b>"); break;case 0: document.write("<b>Sleepy Sunday</b>"); break;default: document.write("<b>I'm really looking forward to this weekend!</b>");}</script>

<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body></html>

<html><head><script type="text/javascript">function disp_alert(){alert("I am an alert box!!");}</script></head><body>

<input type="button" onclick="disp_alert()" value="Display alert box" />

</body></html>

<html><head><script type="text/javascript">function disp_alert(){alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!");}</script></head><body>


</body></html>

<html><head><script type="text/javascript">function disp_confirm()

{var r=confirm("Press a button");if (r==true) { document.write("You pressed OK!"); }else { document.write("You pressed Cancel!"); }}</script></head><body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body></html>

<html><head><script type="text/javascript">function disp_prompt(){var name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }}</script></head><body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body></html>

<html><head>

<script type="text/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>

<html><head>

<script type="text/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 alertthis argument.</p>

</body></html>

<html> <head> <script type="text/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 alertthe argument that is passed to it.</p>

</body> </html>

<html><head>

<script type="text/javascript">function myFunction(){return ("Hello, have a nice day!");

}</script>

</head><body>

<script type="text/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>

<html><head><script type="text/javascript">function product(a,b){return a*b;}</script></head>

<body><script type="text/javascript">document.write(product(4,3));</script>

<p>The script in the body section calls a function with two parameters (4 and 3).</p><p>The function will return the product of these two parameters.</p></body></html>

<html><body>

<script type="text/javascript">for (i = 0; i <= 5; i++){document.write("The number is " + i);document.write("<br />");}</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <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>

<html><body>

<script type="text/javascript">for (i = 1; i <= 6; i++)

{document.write("<h" + i + ">This is header " + i);document.write("</h" + i + ">");}</script>

</body></html>

<html><body>

<script type="text/javascript">i=0;while (i<=5){document.write("The number is " + i);document.write("<br />");i++;}</script>

<p>Explanation:</p>

<p><b>i</b> is equal to 0.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>


</body></html>

<html><body>

<script type="text/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>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

</body></html>

<html>

<body><script type="text/javascript">var i=0;for (i=0;i<=10;i++){if (i==3) { break; }document.write("The number is " + i);document.write("<br />");}</script><p>Explanation: The loop will break when i=3.</p></body></html>

<html><body><script type="text/javascript">var i=0;for (i=0;i<=10;i++){if (i==3) { continue; }document.write("The number is " + i);document.write("<br />");}</script>

<p>Explanation: The loop will break the current loop and continue with the next value when i=3.</p>

</body></html>

<html><body><script type="text/javascript">var x;var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";

for (x in mycars){document.write(mycars[x] + "<br />");}</script></body></html>

<html><head><script type="text/javascript">var txt="";function message(){try { adddlert("Welcome guest!");

}catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); }}</script></head>

<body><input type="button" value="View message" onclick="message()" /></body>

</html>

<html><head><script type="text/javascript">var txt=""function message(){try { adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } }}</script></head>


</html>

<html><head><script type="text/javascript">onerror=handleErr;var txt="";

function handleErr(msg,url,l){txt="There was an error on this page.\n\n";txt+="Error: " + msg + "\n";txt+="URL: " + url + "\n";txt+="Line: " + l + "\n\n";txt+="Click OK to continue.\n\n";alert(txt);return true;}

function message(){adddlert("Welcome guest!");}</script></head>


</html>

<html><body><script type="text/javascript">var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);document.write("Browser name: "+ browser);document.write("<br />");document.write("Browser version: "+ version);</script></body></html>

<html><body><script type="text/javascript">document.write("<p>Browser: ");document.write(navigator.appName + "</p>");

document.write("<p>Browserversion: ");document.write(navigator.appVersion + "</p>");

document.write("<p>Code: ");document.write(navigator.appCodeName + "</p>");

document.write("<p>Platform: ");document.write(navigator.platform + "</p>");

document.write("<p>Cookies enabled: ");document.write(navigator.cookieEnabled + "</p>");

document.write("<p>Browser's user agent header: ");document.write(navigator.userAgent + "</p>");</script></body></html>

<html><body>

<script type="text/javascript">var x = navigator;document.write("CodeName=" + x.appCodeName);document.write("<br />");document.write("MinorVersion=" + x.appMinorVersion);document.write("<br />");document.write("Name=" + x.appName);

document.write("<br />");document.write("Version=" + x.appVersion);document.write("<br />");document.write("CookieEnabled=" + x.cookieEnabled);document.write("<br />");document.write("CPUClass=" + x.cpuClass);document.write("<br />");document.write("OnLine=" + x.onLine);document.write("<br />");document.write("Platform=" + x.platform);document.write("<br />");document.write("UA=" + x.userAgent);document.write("<br />");document.write("BrowserLanguage=" + x.browserLanguage);document.write("<br />");document.write("SystemLanguage=" + x.systemLanguage);document.write("<br />");document.write("UserLanguage=" + x.userLanguage);</script>

</body></html>

<html><head><script type="text/javascript">function detectBrowser(){var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); }else { alert("It's time to upgrade your browser!"); }}</script></head>

<body onload="detectBrowser()"></body>

</html>

<html><head><script type="text/javascript">function getCookie(c_name){if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)); } }return ""

}

function setCookie(c_name,value,expiredays){var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString());}

function checkCookie(){username=getCookie('username');if (username!=null && username!="") { alert('Welcome again '+username+'!'); }else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } }}</script></head><body onLoad="checkCookie()"></body></html>

<html><head><script type="text/javascript">function mouseOver(){document.b1.src ="b_blue.gif";}function mouseOut(){document.b1.src ="b_pink.gif";}</script></head>

<body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>

<html><head><script type="text/javascript">function mouseOver(){document.b1.src ="b_blue.gif";}function mouseOut(){document.b1.src ="b_pink.gif";}

</script></head>

<body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>

<html><head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt;}</script></head>

<body><img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126"onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')"href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"href ="venus.htm" target ="_blank" alt="Venus" /></map>

<p id="desc"></p>

</body></html>

<html><head><script type="text/javascript">function timedMsg(){var t=setTimeout("alert('5 seconds!')",5000);}</script></head>

<body><form><input type="button" value="Display timed alertbox!" onClick = "timedMsg()"></form><p>Click on the button above. An alert box will be displayed after 5 seconds.</p></body>

</html>

<html><head><script type="text/javascript">function timedText(){var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000);var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);}</script></head>

<body><form><input type="button" value="Display timed text!" onClick="timedText()"><input type="text" id="txt"></form><p>Click on the button above. The input field will tell you when two, four, and six seconds have passed.</p></body>

</html>

<html><head><script type="text/javascript">var c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout("timedCount()",1000);}</script></head>

<body><form><input type="button" value="Start count!" onClick="timedCount()"><input type="text" id="txt"></form><p>Click on the button above. The input field will count for ever, starting at 0.</p></body>

</html>

<html><head><script type="text/javascript">var c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout("timedCount()",1000);}

function stopCount(){clearTimeout(t);}</script></head>

<body><form><input type="button" value="Start count!" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="Stop count!" onClick="stopCount()"></form><p>Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.</p></body>

</html>

<html><head><script type="text/javascript">function startTime(){var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();// add a zero in front of numbers<10m=checkTime(m);s=checkTime(s);document.getElementById('txt').innerHTML=h+":"+m+":"+s;t=setTimeout('startTime()',500);}

function checkTime(i){if (i<10) { i="0" + i; }return i;}</script></head>

<body onload="startTime()"><div id="txt"></div></body></html>

<html><body>

<script type="text/javascript">personObj=new Object();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";

document.write(personObj.firstname + " is " + personObj.age + " years old.");</script>

</body></html>

<html><body>

<script type="text/javascript">function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}

myFather=new person("John","Doe",50,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");</script>

</body></html>

<html><body>

<script type="text/javascript">function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}

myFather=new person("John","Doe",50,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");</script>

</body></html>

<html><body>

<script type="text/javascript">

var txt="Hello World!";document.write(txt.length);

</script>

</body></html>

<html><body>


var txt="Hello World!";

document.write("<p>Big: " + txt.big() + "</p>");document.write("<p>Small: " + txt.small() + "</p>");

document.write("<p>Bold: " + txt.bold() + "</p>");document.write("<p>Italic: " + txt.italics() + "</p>");

document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>");document.write("<p>Fixed: " + txt.fixed() + "</p>");document.write("<p>Strike: " + txt.strike() + "</p>");

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");

document.write("<p>Subscript: " + txt.sub() + "</p>");document.write("<p>Superscript: " + txt.sup() + "</p>");

document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");</script>

</body></html>

<html><body>


var str="Hello world!";document.write(str.indexOf("Hello") + "<br />");document.write(str.indexOf("World") + "<br />");document.write(str.indexOf("world"));

</script>

</body></html>

<html><body>


var str="Hello world!";document.write(str.match("world") + "<br />");document.write(str.match("World") + "<br />");document.write(str.match("worlld") + "<br />");document.write(str.match("world!"));

</script>

</body></html>

<html><body>


var str="Visit Microsoft!";document.write(str.replace(/Microsoft/,"W3Schools"));

</script></body></html>

<html><body>


document.write(Date());

</script>

</body></html>

<html><body>


var minutes = 1000*60;var hours = minutes*60;var days = hours*24;var years = days*365;var d = new Date();var t = d.getTime();var y = t/years;

document.write("It's been: " + y + " years since 1970/01/01!");

</script>

</body></html>

<html><body>


var d = new Date();d.setFullYear(1992,10,3);document.write(d);

</script>

</body></html>

<html><body>


var d = new Date();document.write (d.toUTCString());

</script>

</body></html>

<html><body>


var d=new Date();var weekday=new Array(7);weekday[0]="Sunday";weekday[1]="Monday";weekday[2]="Tuesday";weekday[3]="Wednesday";weekday[4]="Thursday";weekday[5]="Friday";weekday[6]="Saturday";

document.write("Today it is " + weekday[d.getDay()]);

</script>

</body></html>




<html><body>

<script type="text/javascript">var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";

for (i=0;i<mycars.length;i++){document.write(mycars[i] + "<br />");}</script>

</body></html>

<html><body><script type="text/javascript">var x;var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";

for (x in mycars){document.write(mycars[x] + "<br />");}</script></body></html>

<html><body>


var arr = new Array(3);arr[0] = "Jani";arr[1] = "Tove";arr[2] = "Hege";

var arr2 = new Array(3);arr2[0] = "John";arr2[1] = "Andy";arr2[2] = "Wendy";

document.write(arr.concat(arr2));

</script>

</body></html>

<html><body>


var arr = new Array(3);arr[0] = "Jani";arr[1] = "Hege";

arr[2] = "Stale";

document.write(arr.join() + "<br />");document.write(arr.join("."));

</script>

</body></html>

<html><body>


var arr = new Array(6);arr[0] = "Jani";arr[1] = "Hege";arr[2] = "Stale";arr[3] = "Kai Jim";arr[4] = "Borge";arr[5] = "Tove";

document.write(arr + "<br />");document.write(arr.sort());</script>

</body></html>

<html><body>


function sortNumber(a, b){return a - b;}

var arr = new Array(6);arr[0] = "10";arr[1] = "5";arr[2] = "40";arr[3] = "25";arr[4] = "1000";arr[5] = "1";

document.write(arr + "<br />");document.write(arr.sort(sortNumber));

</script>

</body></html>

<html><body>

<script type="text/javascript">var b1=new Boolean( 0);var b2=new Boolean(1);var b3=new Boolean("");var b4=new Boolean(null);

var b5=new Boolean(NaN);var b6=new Boolean("false");

document.write("0 is boolean "+ b1 +"<br />");document.write("1 is boolean "+ b2 +"<br />");document.write("An empty string is boolean "+ b3 + "<br />");document.write("null is boolean "+ b4+ "<br />");document.write("NaN is boolean "+ b5 +"<br />");document.write("The string 'false' is boolean "+ b6 +"<br />");</script>

</body></html>

<html><body>


document.write(Math.round(0.60) + "<br />");document.write(Math.round(0.50) + "<br />");document.write(Math.round(0.49) + "<br />");document.write(Math.round(-4.40) + "<br />");document.write(Math.round(-4.60));

</script>

</body></html>

<html><body>


document.write(Math.random());

</script>

</body></html>

<html><body>


document.write(Math.max(5,7) + "<br />");document.write(Math.max(-3,5) + "<br />");document.write(Math.max(-3,-5) + "<br />");document.write(Math.max(7.25,7.30));

</script>

</body></html>

<html><body>


document.write(Math.min(5,7) + "<br />");

document.write(Math.min(-3,5) + "<br />");document.write(Math.min(-3,-5) + "<br />");document.write(Math.min(7.25,7.30));

</script>

</body></html>

<html><head><script type="text/javascript">function convert(degree){if (degree=="C") { F=document.getElementById("c").value * 9 / 5 + 32; document.getElementById("f").value=Math.round(F); }else { C=(document.getElementById("f").value -32) * 5 / 9; document.getElementById("c").value=Math.round(C); }}</script></head>

<body><p></p><b>Insert a number into one of the input fields below:</b></p><form><input id="c" name="c" onkeyup="convert('C')"> degrees Celsius<br />equals<br /> <input id="f" name="f" onkeyup="convert('F')"> degrees Fahrenheit </form><p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an integer.</p></body>

</html>

<html><head><script type="text/javascript">function changeLink(){document.getElementById('myAnchor').innerHTML="Visit W3Schools";document.getElementById('myAnchor').href="http://www.w3schools.com";document.getElementById('myAnchor').target="_blank";}</script></head>

<body><a id="myAnchor" href="http://www.microsoft.com">Visit Microsoft</a><input type="button" onclick="changeLink()" value="Change link"><p>In this example we change the text and the URL of a hyperlink. We also change the target attribute.The target attribute is by default set to "_self", which means that the link will open in the same window.By setting the target attribute to "_blank", the link will open in a new window.</p></body>

</html>

<html><head><style type="text/css">a:active{color:green;}</style>

<script type="text/javascript">function getfocus(){document.getElementById('myAnchor').focus();}

function losefocus(){document.getElementById('myAnchor').blur();}</script></head>

<body><a id="myAnchor" href="http://www.w3schools.com">Visit W3Schools.com</a><br /><br/><input type="button" onclick="getfocus()" value="Get focus"><input type="button" onclick="losefocus()" value="Lose focus"></body>

</html>

<html><head><script type="text/javascript">function accesskey(){document.getElementById('w3').accessKey="w";document.getElementById('w3dom').accessKey="d";}</script></head>

<body onload="accesskey()">

<p><a id="w3" href="http://www.w3schools.com/">W3Schools.com</a> (Use Alt + w to give focus to the link)</p><p><a id="w3dom" href="http://www.w3schools.com/htmldom/">HTML DOM</a> (Use Alt + d to give focus to the link)</p>

</body></html>

<html><body>

<script type="text/javascript">document.write("Hello World!");</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("<h1>This is a header</h1>");</script>

</body></html>

<html><head><title>My title</title></head>

<body>The title of the document is: <script type="text/javascript">document.write(document.title);</script></body>

</html>

<html>

<body>The URL of this document is: <script type="text/javascript">document.write(document.URL);</script></body>

</html>

<html><body>

<p>The referrer property returns the URL of the document that loaded this document.</p>

The referrer of this document is:<script type="text/javascript">document.write(document.referrer);</script>

</body></html>

<html><body>

The domain name for this document is: <script type="text/javascript">document.write(document.domain);</script>

</body></html>

<html><head><script type="text/javascript">function getValue(){var x=document.getElementById("myHeader");alert(x.innerHTML);}</script></head><body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1><p>Click on the header to alert its value</p>

</body></html>

<html><head><script type="text/javascript">function getElements(){var x=document.getElementsByName("myInput");alert(x.length);}</script></head>

<body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="How many elements named 'myInput'?" /></body>

</html>

<html><head><script type="text/javascript">function createNewDoc(){var newDoc=document.open("text/html","replace");var txt="<html><body>Learning about the DOM is FUN!</body></html>";newDoc.write(txt);newDoc.close();}</script></head>

<body><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body>

</html>

<html><body>

<a name="first">First anchor</a><br /><a name="second">Second anchor</a><br />

<a name="third">Third anchor</a><br /><br />

Number of anchors in this document:<script type="text/javascript">document.write(document.anchors.length);</script>

</body></html>

<html><body>

<a name="first">First anchor</a><br /><a name="second">Second anchor</a><br /><a name="third">Third anchor</a><br /><br />

InnerHTML of the first anchor in this document:<script type="text/javascript">document.write(document.anchors[0].innerHTML);</script>

</body></html>

<html><body>

<form name="Form1"></form><form name="Form2"></form><form name="Form3"></form>

<script type="text/javascript">document.write("This document contains: " + document.forms.length + " forms.");</script>

</body></html>

<html><body><form id="Form1" name="Form1">Your name: <input type="text"></form><form id="Form2" name="Form2">Your car: <input type="text"></form>

<p>To access an item in a collection you can either use the number or the name of the item:</p>

<script type="text/javascript">document.write("<p>The first form's name is: " + document.forms[0].name + "</p>");document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>");</script>

</body></html>

<html><body><img border="0" src="hackanm.gif" width="48" height="48"><br /><img border="0" src="compman.gif" width="107" height="98"><br /><br />

<script type="text/javascript">document.write("This document contains: " + document.images.length + " images.");</script>

</body></html>

<html><head><script type="text/javascript">function whichButton(event){if (event.button==2) { alert("You clicked the right mouse button!"); }else { alert("You clicked the left mouse button!"); }}</script></head>

<body onmousedown="whichButton(event)"><p>Click in the document. An alert box will alert which mouse button you clicked.</p></body>

</html>

<html><head><script type="text/javascript">function show_coords(event){x=event.clientX;y=event.clientY;alert("X coords: " + x + ", Y coords: " + y);}</script></head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p>

</body></html>

<html><head><script type="text/javascript">function whichButton(event){alert(event.keyCode);}

</script></head>

<body onkeyup="whichButton(event)"><p><b>Note:</b> Make sure the right frame has focus when trying this example!</p><p>Press a key on your keyboard. An alert box will alert the unicode of the key pressed.</p></body>

</html>

<html><head>

<script type="text/javascript">function coordinates(event){x=event.screenX;y=event.screenY;alert("X=" + x + " Y=" + y);}

</script></head><body onmousedown="coordinates(event)">

<p>Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor, relative to the screen.</p>

</body></html>

<html><head>

<script type="text/javascript">function coordinates(event){x=event.x;y=event.y;alert("X=" + x + " Y=" + y);}

</script></head><body onmousedown="coordinates(event)">

<p>Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor.</p>

</body></html>

<html><head><script type="text/javascript">function isKeyPressed(event){if (event.shiftKey==1) { alert("The shift key was pressed!");

}else { alert("The shift key was NOT pressed!"); }}</script></head>

<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document. An alert box will tell you if you pressed the shift key or not.</p>

</body></html>

<html><head><script type="text/javascript">function whichElement(e){var targ;if (!e) { var e=window.event; }if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }if (targ.nodeType==3) // defeat Safari bug { targ = targ.parentNode; }var tname;tname=targ.tagName;alert("You clicked on a " + tname + " element.");}</script></head>

<body onmousedown="whichElement(event)"><p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p>

<h3>This is a header</h3><p>This is a paragraph</p><img border="0" src="ball16.gif" width="29" height="28" alt="Ball"></body>

</html>

<html><head><script type="text/javascript">function getEventType(event){ alert(event.type);}</script></head>

<body onmousedown="getEventType(event)">

<p>Click in the document.An alert box will tell what type of event that was triggered.</p>

</body></html>

<html><head><script type="text/javascript">function getEventType(event){ alert(event.type);}</script></head>

<body onmousedown="getEventType(event)">

<p>Click in the document.An alert box will tell what type of event that was triggered.</p>

</body></html>

<html><head><script type="text/javascript">function changeAction(){var x=document.getElementById("myForm");alert("Original action: " + x.action);x.action="default.asp";alert("New action: " + x.action);x.submit();}</script></head><body>

<form id="myForm" action="js_examples.asp">Name: <input type="text" value="Mickey Mouse" /><input type="button" onclick="changeAction()"value="Change action attribute and submit form" /></form>

</body></html>

<html><head><script type="text/javascript">function showMethod(){var x=document.getElementById("myForm");alert(x.method);}</script></head><body>

<form id="myForm" method="post">Name: <input type="text" size="20" value="Mickey Mouse" /><input type="button" onclick="showMethod()" value="Show method" /></form>

</body></html>

<html><head><script type="text/javascript">function alertId(){var txt="Id: " + document.getElementById("myButton").id;txt=txt + ", type: " + document.getElementById("myButton").type;txt=txt + ", value: " + document.getElementById("myButton").value;alert(txt);document.getElementById("myButton").disabled=true;}</script></head><body>

<form><input type="button" value="Click me!" id="myButton" onclick="alertId()" /></form>

</body></html>

<html><head><script type="text/javascript">function check(){document.getElementById("myCheck").checked=true;}

function uncheck(){document.getElementById("myCheck").checked=false;}</script></head>

<body><form><input type="checkbox" id="myCheck" /><input type="button" onclick="check()" value="Check Checkbox" /><input type="button" onclick="uncheck()" value="Uncheck Checkbox" /></form></body>

</html>

<html><head><script type="text/javascript">function createOrder(){coffee=document.forms[0].coffee;

txt="";for (i=0;i<coffee.length;++ i) { if (coffee[i].checked) { txt=txt + coffee[i].value + " "; } }document.getElementById("order").value="You ordered a coffee with " + txt;}</script></head>

<body><p>How would you like your coffee?</p><form><input type="checkbox" name="coffee" value="cream">With cream<br /><input type="checkbox" name="coffee" value="sugar">With sugar<br /><br /><input type="button" onclick="createOrder()" value="Send order"><br /><br /><input type="text" id="order" size="50"></form></body>

</html>

<html><head><script type="text/javascript">function convertToUcase(){document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase();document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase();}</script></head>

<body><form name="form1">First name: <input type="text" id="fname" size="20" /><br /><br />Last name: <input type="text" id="lname" size="20" /><br /><br />Convert to upper case <input type="checkBox" onclick="if (this.checked) {convertToUcase()}"></form></body>

</html>

<html><head><script type="text/javascript">function check(browser) { document.getElementById("answer").value=browser; }</script></head><body>

<p>What's your favorite browser?</p>

<form><input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />

<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">Firefox<br /><input type="radio" name="browser" onclick="check(this.value)" value="Netscape">Netscape<br /><input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br /><br />Your favorite browser is: <input type="text" id="answer" size="20"></form>

</body></html>

<html><head><script type="text/javascript">function formReset(){document.getElementById("myForm").reset();}</script></head>

<body><p>Enter some text in the text fields below, and then press the "Reset" button to reset the form.</p>

<form id="myForm">Name: <input type="text" size="20"><br />Age: <input type="text" size="20"><br /><br /><input type="button" onclick="formReset()" value="Reset"></form></body>

</html>

<html><head><script type="text/javascript">function formSubmit(){document.getElementById("myForm").submit();}</script></head>

<body><p>Enter some text in the text fields below, and then press the "Submit" button to submit the form.</p>

<form id="myForm" action="js_form_action.asp" method="get">Firstname: <input type="text" name="firstname" size="20"><br />Lastname: <input type="text" name="lastname" size="20"><br /><br /><input type="button" onclick="formSubmit()" value="Submit"></form></body>

</html>

<html><head><script type="text/javascript">function validate(){var at=document.getElementById("email").value.indexOf("@");

var age=document.getElementById("age").value;var fname=document.getElementById("fname").value;submitOK="true";

if (fname.length>10) { alert("The name must be less than 10 characters"); submitOK="false"; }if (isNaN(age)||age<1||age>100) { alert("The age must be a number between 1 and 100"); submitOK="false"; }if (at==-1) { alert("Not a valid e-mail!"); submitOK="false"; }if (submitOK=="false") { return false; }}</script></head>

<body><form action="tryjs_submitpage.htm" onsubmit="return validate()">Name (max 10 chararcters): <input type="text" id="fname" size="20"><br />Age (from 1 to 100): <input type="text" id="age" size="20"><br />E-mail: <input type="text" id="email" size="20"><br /><br /><input type="submit" value="Submit"> </form></body>

</html>

<html><head><script type="text/javascript">function setFocus(){document.getElementById("fname").focus();}</script></head>

<body onload="setFocus()"><form>Name: <input type="text" id="fname" size="30"><br />Age: <input type="text" id="age" size="30"> </form></body>

</html>

<html><head><script type="text/javascript">function selText(){document.getElementById("myText").select();}

</script></head>

<body><form><input size="25" type="text" id="myText" value="A cat played with a ball"><input type="button" value="Select text" onclick="selText()"> </form></body>

</html>

<html><head><script type="text/javascript">function favBrowser(){var mylist=document.getElementById("myList");document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;}</script></head>

<body><form>Select your favorite browser:<select id="myList" onchange="favBrowser()"> <option>Internet Explorer</option> <option>Netscape</option> <option>Opera</option></select><p>Your favorite browser is: <input type="text" id="favorite" size="20"></p></form></body>

</html>

<html><head><script type="text/javascript">function moveNumbers(){var no=document.getElementById("no");var option=no.options[no.selectedIndex].text;var txt=document.getElementById("result").value;txt=txt + option;document.getElementById("result").value=txt;}</script></head>

<body><form>Select numbers:<br /><select id="no">

<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option>

</select><input type="button" onclick="moveNumbers()" value="-->">

<input type="text" id="result" size="20"></form></body>

<html><head><script type="text/javascript">function go() {window.location=document.getElementById("menu").value;}</script></head>

<body><form><select id="menu" onchange="go()"> <option>--Select a page--</option> <option value="http://www.w3schools.com">W3Schools</option> <option value="http://www.microsoft.com">Microsoft</option> <option value="http://www.altavista.com">AltaVista</option></select></form></body>

</html>

<html><head><script type="text/javascript">function checkLen(x,y){if (y.length==x.maxLength) { var next=x.tabIndex; if (next<document.getElementById("myForm").length) { document.getElementById("myForm").elements[next].focus(); } }}</script></head>

<body><p>This script automatically jumps to the next field when a field's maxlength has been reached:</p>

<form id="myForm"><input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)"></form></body>

</html>

<html><head><script type="text/javascript">function access(){

document.getElementById('myName').accessKey="n";document.getElementById('myPwd').accessKey="p";document.getElementById('ie').accessKey="i";document.getElementById('fx').accessKey="f";document.getElementById('myButton').accessKey="b";}</script></head>

<body onload="access()"><form>Name: <input id="myName" type="text" /><br />Password: <input id="myPwd" type="password" /><br /><br />Select your favorite browser:<br /><input type="radio" name="browser" id="ie" value="Internet Explorer">Internet Explorer<br /><input type="radio" name="browser" id="fx" value="Firefox">Firefox<br /><br /><input type="button" value="Click me!" id="myButton" /></form>

<p>(Use Alt + <i>accesskey</i> to give focus to the different form fields.)</p></body>

</html>

<html><frameset cols="50%,50%"> <frame id="leftFrame" src="frame_noresize.htm"> <frame id="rightFrame" src="frame_a.htm"></frameset></html>

<html><frameset cols="50%,50%"> <frame id="leftFrame" src="frame_scroll.htm"> <frame id="rightFrame" src="frame_a.htm"></frameset></html>

<html><frameset id="myFrameset" cols="50%,50%"> <frame id="leftFrame" src="frame_src.htm"> <frame id="rightFrame" src="frame_a.htm"></frameset></html>

<html><head><script type="text/javascript">function breakout(){if (window.top!=window.self) { window.top.location="tryjs_breakout.htm"; }}</script>

</head><body>

<input type="button" onclick="breakout()" value="Break out of frame!">

</body></html>

<html><head><script type="text/javascript">function changeSource(){document.getElementById("frame1").src="frame_c.htm";document.getElementById("frame2").src="frame_d.htm";}</script></head>

<body><iframe src="frame_a.htm" id="frame1"></iframe><iframe src="frame_b.htm" id="frame2"></iframe><br /><br /><input type="button" onclick="changeSource()" value="Change source of the two iframes">

</body></html>

<html><head><script type="text/javascript">function changeSource(){document.getElementById("frame1").src="frame_c.htm";document.getElementById("frame2").src="frame_d.htm";}</script></head>

<body><iframe src="frame_a.htm" id="frame1"></iframe><iframe src="frame_b.htm" id="frame2"></iframe><br /><br /><input type="button" onclick="changeSource()" value="Change source of the two iframes">

</body></html>

<html><head><script type="text/javascript">function changeSize(){document.getElementById("compman").height="250";document.getElementById("compman").width="300";}</script></head>

<body><img id="compman" src="compman.gif" width="107" height="98" /><br /><br /><input type="button" onclick="changeSize()" value="Change height and width of image">

</body>

</html>

<html><head><script type="text/javascript">function changeSrc(){document.getElementById("myImage").src="hackanm.gif";}</script></head>

<body><img id="myImage" src="compman.gif" width="107" height="98" /><br /><br /><input type="button" onclick="changeSrc()" value="Change image"></body>

</html>

<html><head><script type="text/javascript">function currLocation(){alert(window.location);}

function newLocation(){window.location="http://www.w3schools.com";}</script></head>

<body><input type="button" onclick="currLocation()" value="Show current URL"><input type="button" onclick="newLocation()" value="Change URL"></body>

</html>


function newLocation(){window.location="http://www.w3schools.com";}</script></head>


</html>

<html><head><script type="text/javascript">function reloadPage(){window.location.reload();}</script></head><body>

<input type="button" value="Reload page" onclick="reloadPage()" />

</body></html>

<html><head><script type="text/javascript">function breakout(){if (window.top!=window.self) { window.top.location="tryjs_breakout.htm"; }}</script></head><body>


</body></html>

<html><head><script type="text/javascript">function linkTo(y){var x=window.open("anchors.htm","","scrollbars=yes,width=250,height=200");x.location.hash=y;}</script></head>

<body><h3>Links and Anchors</h3><p>Click on a button to display that anchor in a second window!</p><input type="button" value="0" onclick="linkTo(0)"><input type="button" value="1" onclick="linkTo(1)"><input type="button" value="2" onclick="linkTo(2)"><input type="button" value="3" onclick="linkTo(3)"></body>

</html>

<html>

<body><script type="text/javascript">var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);document.write("Browser name: "+ browser);document.write("<br />");document.write("Browser version: "+ version);</script></body></html>

<html><body><script type="text/javascript">document.write("<p>Browser: ");document.write(navigator.appName + "</p>");

document.write("<p>Browserversion: ");document.write(navigator.appVersion + "</p>");

document.write("<p>Code: ");document.write(navigator.appCodeName + "</p>");

document.write("<p>Platform: ");document.write(navigator.platform + "</p>");

document.write("<p>Cookies enabled: ");document.write(navigator.cookieEnabled + "</p>");

document.write("<p>Browser's user agent header: ");document.write(navigator.userAgent + "</p>");</script></body></html>

<html><body>

<script type="text/javascript">var x = navigator;document.write("CodeName=" + x.appCodeName);document.write("<br />");document.write("MinorVersion=" + x.appMinorVersion);document.write("<br />");document.write("Name=" + x.appName);document.write("<br />");document.write("Version=" + x.appVersion);document.write("<br />");document.write("CookieEnabled=" + x.cookieEnabled);document.write("<br />");document.write("CPUClass=" + x.cpuClass);document.write("<br />");document.write("OnLine=" + x.onLine);document.write("<br />");document.write("Platform=" + x.platform);document.write("<br />");document.write("UA=" + x.userAgent);document.write("<br />");document.write("BrowserLanguage=" + x.browserLanguage);document.write("<br />");document.write("SystemLanguage=" + x.systemLanguage);document.write("<br />");document.write("UserLanguage=" + x.userLanguage);</script>

</body></html>

<html><head><script type="text/javascript">function detectBrowser(){var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); }else { alert("It's time to upgrade your browser!"); }}</script></head>

<body onload="detectBrowser()"></body>

</html>

<html><head><script type="text/javascript">function disable(){document.getElementById("mySelect").disabled=true;}function enable(){document.getElementById("mySelect").disabled=false;}</script></head><body>

<form><select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option></select><br /><br /><input type="button" onclick="disable()" value="Disable list"><input type="button" onclick="enable()" value="Enable list"></form>

</body></html>

<html><body>

<form id="myForm"><select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option></select></form>

<p>The id of the form is:<script type="text/javascript">document.write(document.getElementById("mySelect").form.id);</script></p>

</body></html>

<html><head><script type="text/javascript">function getLength(){alert(document.getElementById("mySelect").length);}</script></head><body>

<form><select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option></select><input type="button" onclick="getLength()" value="How many options in the list?"></form>

</body></html>

<html><head><script type="text/javascript">function changeSize(){document.getElementById("mySelect").size=4;}</script></head><body>

<form><select id="mySelect"> <option>Apple</option> <option>Banana</option> <option>Orange</option> <option>Melon</option></select><input type="button" onclick="changeSize()" value="Change size"></form>

</body></html>

<html><head><script type="text/javascript">function selectMultiple(){document.getElementById("mySelect").multiple=true;}</script></head><body>

<form><select id="mySelect" size="4">

<option>Apple</option><option>Pear</option><option>Banana</option><option>Orange</option>

</select><input type="button" onclick="selectMultiple()" value="Select multiple"></form><p>Before you click on the "Select multiple" button, try to select more than one option (by holding down the Shift or Ctrl key). Then click on the "Select multiple" button and try again.</p>

</body></html>

<html><head><script type="text/javascript">function getOptions(){var x=document.getElementById("mySelect");for (i=0;i<x.length;i++) { document.write(x.options[i].text); document.write("<br />"); }}</script></head><body>

<form>Select your favorite fruit:<select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option></select><br /><br /><input type="button" onclick="getOptions()" value="Output all options"></form>

</body></html>

<html><head><script type="text/javascript">function getIndex(){var x=document.getElementById("mySelect");alert(x.selectedIndex);}</script>

</head><body>

<form>Select your favorite fruit:<select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option></select><br /><br /><input type="button" onclick="getIndex()" value="Alert index of selected option"></form>

</body></html>

<html><head><script type="text/javascript">function changeText(){var x=document.getElementById("mySelect");x.options[x.selectedIndex].text="Melon";}</script></head><body>

<form>Select your favorite fruit:<select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option></select><br /><br /><input type="button" onclick="changeText()" value="Set text of selected option"></form>

</body></html>

<html><head><script type="text/javascript">function removeOption(){var x=document.getElementById("mySelect");x.remove(x.selectedIndex);}</script></head><body>

<form><select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option></select><input type="button" onclick="removeOption()" value="Remove selected option">

</form>

</body></html>

<html><body>

<script type="text/javascript">document.write("Screen resolution: ");document.write(screen.width + "*" + screen.height);document.write("<br />");document.write("Available view area: ");document.write(screen.availWidth + "*" + screen.availHeight);document.write("<br />");document.write("Color depth: ");document.write(screen.colorDepth);document.write("<br />");document.write("Buffer depth: ");document.write(screen.bufferDepth);document.write("<br />");document.write("DeviceXDPI: ");document.write(screen.deviceXDPI);document.write("<br />");document.write("DeviceYDPI: ");document.write(screen.deviceYDPI);document.write("<br />");document.write("LogicalXDPI: ");document.write(screen.logicalXDPI);document.write("<br />");document.write("LogicalYDPI: ");document.write(screen.logicalYDPI);document.write("<br />");document.write("FontSmoothingEnabled: ");document.write(screen.fontSmoothingEnabled);document.write("<br />");document.write("PixelDepth: ");document.write(screen.pixelDepth);document.write("<br />");document.write("UpdateInterval: ");document.write(screen.updateInterval);document.write("<br />");</script>

</body></html>

<html><head><script type="text/javascript">function changeBorder(){document.getElementById('myTable').border="10";}</script></head><body>

<table border="1" id="myTable"><tr><td>100</td><td>200</td></tr><tr><td>300</td><td>400</td>

</tr></table><br /><input type="button" onclick="changeBorder()" value="Change Border">

</body></html>

<html><head><script type="text/javascript">function padding(){document.getElementById('myTable').cellPadding="15";}

function spacing(){document.getElementById('myTable').cellSpacing="15";}</script></head><body>

<table id="myTable" border="1"><tr><td>100</td><td>200</td></tr><tr><td>300</td><td>400</td></tr></table><br /><input type="button" onclick="padding()" value="Change Cellpadding"><input type="button" onclick="spacing()" value="Change Cellspacing">

</body></html>

<html><head><script type="text/javascript">function aboveFrames(){document.getElementById('myTable').frame="above";}function belowFrames(){document.getElementById('myTable').frame="below";}</script></head><body>

<table id="myTable"><tr><td>100</td><td>200</td></tr><tr><td>300</td><td>400</td></tr></table>

<br /><input type="button" onclick="aboveFrames()" value="Show above frames"><input type="button" onclick="belowFrames()" value="Show below frames">

</body></html>

<html><head><script type="text/javascript">function rowRules(){document.getElementById('myTable').rules="rows";}

function colRules(){document.getElementById('myTable').rules="cols";}</script></head>

<body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><br /><input type="button" onclick="rowRules()" value="Show only row borders"><input type="button" onclick="colRules()" value="Show only col borders">

</body></html>

<html><head><script type="text/javascript">function showRow(){alert(document.getElementById('myTable').rows[0].innerHTML);}</script></head><body>

<table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td>

<td>Row3 cell2</td></tr></table><br /><input type="button" onclick="showRow()" value="Show innerHTML of first row">

</body></html>

<html><head><script type="text/javascript">function cell(){var x=document.getElementById('myTable').rows[0].cells;alert(x[0].innerHTML);}</script></head><body>

<table id="myTable" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table><br /><input type="button" onclick="cell()" value="Alert first cell">

</body></html>

<html><head><script type="text/javascript">function createCaption(){var x=document.getElementById('myTable').createCaption();x.innerHTML="My table caption";}</script></head><body>

<table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr></table><br /><input type="button" onclick="createCaption()" value="Create caption">

</body></html>

<html><head><script type="text/javascript">function deleteRow(r){var i=r.parentNode.parentNode.rowIndex;document.getElementById('myTable').deleteRow(i);}</script></head><body>

<table id="myTable" border="1"><tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr><tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr><tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr></table>

</body></html>

<html><head><script type="text/javascript">function insRow(){var x=document.getElementById('myTable').insertRow(0);var y=x.insertCell(0);var z=x.insertCell(1);y.innerHTML="NEW CELL1";z.innerHTML="NEW CELL2";}</script></head>

<body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><br /><input type="button" onclick="insRow()" value="Insert row">

</body></html>

<html><head><script type="text/javascript">function insCell(){var x=document.getElementById('tr2').insertCell(0);x.innerHTML="John";}</script></head><body>

<table border="1"><tr id="tr1"><th>Firstname</th><th>Lastname</th></tr><tr id="tr2"><td>Peter</td><td>Griffin</td></tr></table><br /><input type="button" onclick="insCell()" value="Insert cell">

</body></html>

<html><head><script type="text/javascript">function leftAlign(){document.getElementById('header').align="left";}</script></head><body>

<table width="100%" border="1"><tr id="header"><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></tr></table><br /><input type="button" onclick="leftAlign()" value="Left-align table row" />

</body></html>

<html><head><script type="text/javascript">function topAlign(){document.getElementById('tr2').vAlign="top";}</script></head><body>

<table width="50%" border="1"><tr id="tr1"><th>Firstname</th><th>Lastname</th><th>Text</th></tr><tr id="tr2"><td>Peter</td><td>Griffin</td><td>Hello my name is Peter Griffin. I need a long text for this example. I need a long text for this example.</td></tr></table><br /><input type="button" onclick="topAlign()" value="Top-align table row" />

</body></html>

<html><head><script type="text/javascript">function alignCell(){document.getElementById('td1').align="right";}</script></head><body>

<table border="1"><tr><th>Firstname</th><th>Lastname</th></tr><tr><td id="td1">Peter</td><td id="td2">Griffin</td></tr></table><br /><input type="button" onclick="alignCell()" value="Align cell" />

</body></html>

<html><head><script type="text/javascript">function valignCell(){var x=document.getElementById('myTable').rows[0].cells;x[0].vAlign="bottom";}</script></head>

<body><table id="myTable" border="1" height="70%"><tr><td>First cell</td><td>Second cell</td></tr>

<tr><td>Third cell</td><td>Fourth cell</td></tr></table><form><input type="button" onclick="valignCell()" value="Vertical align cell content"></form></body>

</html>

<html><head><script type="text/javascript">function changeContent(){var x=document.getElementById('myTable').rows[0].cells;x[0].innerHTML="NEW CONTENT";}</script></head>

<body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><form><input type="button" onclick="changeContent()" value="Change content"></form></body>

</html>

<html><head><script type="text/javascript">function setColSpan(){var x=document.getElementById('myTable').rows[0].cells;x[0].colSpan="2";x[1].colSpan="6";}</script></head>

<body><table id="myTable" border="1"><tr><td colspan="4">cell 1</td><td colspan="4">cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td>

<td>cell 5</td><td>cell 6</td><td>cell 7</td><td>cell 8</td><td>cell 9</td><td>cell 10</td></tr></table><form><input type="button" onclick="setColSpan()" value="Change colspan"></form></body>

</html>

<html><head><script type="text/javascript">function setColSpan(){var x=document.getElementById('myTable').rows[0].cells;x[0].colSpan="2";x[1].colSpan="6";}</script></head>

<body><table id="myTable" border="1"><tr><td colspan="4">cell 1</td><td colspan="4">cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td><td>cell 5</td><td>cell 6</td><td>cell 7</td><td>cell 8</td><td>cell 9</td><td>cell 10</td></tr></table><form><input type="button" onclick="setColSpan()" value="Change colspan"></form></body>

</html>

<html><head><script type="text/javascript">function disp_alert(){alert("I am an alert box!!");}</script></head><body>


</body></html>

<html><head><script type="text/javascript">function disp_alert(){alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!");}</script></head><body>


</body></html>

<html><head><script type="text/javascript">function disp_confirm(){var r=confirm("Press a button");if (r==true) { document.write("You pressed OK!"); }else { document.write("You pressed Cancel!"); }}</script></head><body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body></html>

<html><head><script type="text/javascript">function disp_prompt(){var name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }}</script></head><body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body></html>

<html><head>

<script type="text/javascript">function open_win() {window.open("http://www.w3schools.com");}</script></head>

<body><form><input type=button value="Open Window" onclick="open_win()"></form></body>

</html>

<html><head><script type="text/javascript">function open_win(){window.open("http://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");}</script></head>

<body><form><input type="button" value="Open Window" onclick="open_win()"></form></body>

</html>

<html><head><script type="text/javascript">function open_win() {window.open("http://www.microsoft.com/");window.open("http://www.w3schools.com/");}</script></head>

<body><form><input type=button value="Open Windows" onclick="open_win()"></form></body>

</html>


function newLocation(){

window.location="http://www.w3schools.com";}</script></head>


</html>

<html><head><script type="text/javascript">function reloadPage(){window.location.reload();}</script></head><body>

<input type="button" value="Reload page" onclick="reloadPage()" />

</body></html>

<html><body>

<script type="text/javascript">window.status="Some text in the status bar!!";</script>

<p>Look at the text in the statusbar.</p>

</body></html>

<html><head><script type="text/javascript">function printpage(){window.print();}</script></head><body>

<input type="button" value="Print this page" onclick="printpage()" />

</body></html>

<html><head><script type="text/javascript">function breakout()

{if (window.top!=window.self) { window.top.location="tryjs_breakout.htm"; }}</script></head><body>


</body></html>

<html><head><script type="text/javascript">function resizeWindow(){top.resizeBy(-100,-100);}</script></head>

<body><form><input type="button" onclick="resizeWindow()" value="Resize window"></form><p><b>Note:</b> We have used the <b>top</b> element instead of the <b>window</b> element, to represent the top frame. If you do not use frames, use the <b>window</b> element instead.</p></body>

</html>

<html><head><script type="text/javascript">function resizeWindow(){top.resizeTo(500,300);}</script></head>

<body><form><input type="button" onclick="resizeWindow()" value="Resize window"></form><p><b>Note:</b> We have used the <b>top</b> element instead of the <b>window</b> element, to represent the top frame. If you do not use frames, use the <b>window</b> element instead.</p></body>

</html>

<html><head><script type="text/javascript">function scrollWindow(){window.scrollBy(100,100);

}</script></head><body>

<input type="button" onclick="scrollWindow()" value="Scroll" /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br />

</body></html>

<html><head><script type="text/javascript">function scrollWindow(){window.scrollTo(100,500);}</script></head><body>

<input type="button" onclick="scrollWindow()" value="Scroll" /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br />

<br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br /><p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p><br /><br /><br /><br /><br /><br /><br /><br />

</body></html>

<html><head><script type="text/javascript">function timedMsg(){var t=setTimeout("alert('5 seconds!')",5000);}</script></head>

<body><form><input type="button" value="Display timed alertbox!" onClick = "timedMsg()"></form><p>Click on the button above. An alert box will be displayed after 5 seconds.</p></body>

</html>

<html><head><script type="text/javascript">function timedText(){var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000);var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);}</script></head>

<body><form>

<input type="button" value="Display timed text!" onClick="timedText()"><input type="text" id="txt"></form><p>Click on the button above. The input field will tell you when two, four, and six seconds have passed.</p></body>

</html>

<html><head><script type="text/javascript">var c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout("timedCount()",1000);}</script></head>

<body><form><input type="button" value="Start count!" onClick="timedCount()"><input type="text" id="txt"></form><p>Click on the button above. The input field will count for ever, starting at 0.</p></body>

</html>

<html><head><script type="text/javascript">var c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout("timedCount()",1000);}

function stopCount(){clearTimeout(t);}</script></head>

<body><form><input type="button" value="Start count!" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="Stop count!" onClick="stopCount()"></form><p>Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.</p></body>

</html>




<html><head><script type="text/javascript">function show_popup(){var p=window.createPopup();var pbody=p.document.body;pbody.style.backgroundColor="lime";pbody.style.border="solid black 1px";pbody.innerHTML="This is a pop-up! Click outside the pop-up to close.";p.show(150,150,200,50,document.body);}</script></head>

<body><button onclick="show_popup()">Show pop-up!</button></body>

</html>

examples

Documents

body section

input field

function dispalert

function mouseout

function mouseover

good morning

select multiple

function myfunction