JavaScript Examples

Related:
• HTML Examples

This page contains JavaScript examples - examples of JavaScript tricks that you can use for your own website.

You can use any of these examples simply by copying and pasting the code straight into your website.

We've got plenty of HTML examples too!

Description	Code	Result
Popup Window	<!-- JavaScript examples by Quackit.com --> <script type="text/javascript"> // Popup window code function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a href="JavaScript:newPopup('http://www.quackit.com/html/codes/');">Get your HTML codes here!</a>	Get your HTML codes in a popup!
Jump Menu	<!-- JavaScript examples by Quackit.com --> <script language="javascript" type="text/javascript" > <!-- hide function jumpto(x){ if (document.form1.jumpmenu.value != "null") { document.location.href = x } } // end hide --> </script> <form name="form1"> <select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value=http://www.quackit.com>Quackit Homepage</option> <option value=http://www.quackit.com/javascript/>JavaScript</option> <option value=http://www.quackit.com/html/>HTML</option> <option value=http://www.quackit.com/css/>CSS</option> <option value=http://www.quackit.com/sql/tutorial/>SQL</option> <option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option> <option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option> </select> </form> <p style="font-family:verdana,arial,sans-serif;font-size:10px;color:#999;">Codes by <a href="http://www.quackit.com">Quackit</a>
Automatically launch the "print" dialog	<!-- JavaScript examples by Quackit.com --> <a href="JavaScript:window.print();">Print this page</a>	Print this page
"Print" dialog with printer icon	<!-- JavaScript examples by Quackit.com --> <a href="JavaScript:window.print();"><img src="/pix/printer_icon.gif" border="0" width="17" height="17" align="middle" alt="Print Version" /></a>
Alert Box	<!-- JavaScript examples by Quackit.com --> <input type="button" onclick="alert('Wow... you sure do know how to click!');" value="Click me..." />
Confirm Box	<!-- JavaScript examples by Quackit.com --> <script type="text/javascript"> function confirmHappy() { var happiness=confirm("Are you sure you're happy?"); if (happiness==true) { alert("Wow! You seem really happy!"); } else { alert("You should get out more!"); } } </script> <input type="button" onclick="confirmHappy()" value="If you're happy and you know it, click me..." />
Prompt	<!-- JavaScript examples by Quackit.com --> <script type="text/javascript"> function displayPrompt() { var name=prompt("What's your name?","Homer"); if (name!=null && name!="") { alert("Well " + name + ". You seem very daring!"); } else { alert("Hey, I asked you your name!"); } } </script> <input type="button" onclick="displayPrompt()" value="I dare you to click me!" />
Status Bar Messages	<!-- JavaScript examples by Quackit.com --> <a href="http://www.quackit.com/html/codes/" onMouseover="JavaScript:window.status='Get your HTML codes here!'; return true;"onMouseout="JavaScript:window.status=''; return true">Hover over me!</a>	Hover over me! (Doesn't work? Learn more here).
Image Rollover	<!-- JavaScript examples by Quackit.com --> <script type="text/javascript"> <!-- // Pre load images for rollover if (document.images) { smile = new Image nosmile = new Image smile.src = "http://www.quackit.com/pix/smile.gif" nosmile.src = "http://www.quackit.com/pix/nosmile.gif" } function swapImage(thisImage,newImage) { if (document.images) { document[thisImage].src = eval(newImage + ".src") } } --> </script> <a href="http://www.quackit.com/javascript/image_rollovers.cfm" onMouseOver="swapImage('jack','smile')" onMouseOut="swapImage('jack','nosmile')"> <img src="http://www.quackit.com/pix/nosmile.gif" width="100" height="100" border="0" alt="Picture of Jack" name="jack"> </a>
Timed Redirect	<!-- JavaScript examples by Quackit.com --> <script type="text/JavaScript"> <!-- function timedRedirect(redirectTo, timeoutPeriod) { setTimeout("location.href = redirectTo;",timeoutPeriod); } // --> </script> <a href="JavaScript:void(0);" onclick="JavaScript:timedRedirect(redirectTo='http://www.quackit.com/html/examples/', timeoutPeriod='2000')">Redirect in 2 seconds...</a>	Redirect in 2 seconds...
Timed Refresh	<!-- JavaScript examples by Quackit.com --> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> <p><a href="javascript:timedRefresh(3000)">Refresh this page in 3 seconds...</a></p>	Refresh this page in 3 seconds...

JavaScript Tutorial

JavaScript Reference

JavaScript Examples

JavaScript Examples

Enjoy this page?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING