Vous êtes sur la page 1sur 23

//Contoh01.html <html> <head> <script> function myFunction() { alert("Hello! I am an alert box!

"); } </script> </head> <body> <input type="button" onclick="myFunction()" value="Show alert box" /> </body> </html> //Contoh02.html <html> <body> <p>Click the button to demonstrate line-breaks in a popup box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { alert("Hello\nHow are you?"); } </script> </body> </html> //Contoh03.html <html> <body> <p>Click the button to display a confirm box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x; var r=confirm("Press a button!"); if (r==true)

{ x="You pressed OK!"; } else { x="You pressed Cancel!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html> //Contoh04.html <html> <body> <p>Click the button to demonstrate the prompt box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x; var person=prompt("Please enter your name","Harry Potter"); if (person!=null) { x="Hello " + person + "! How are you today?"; document.getElementById("demo").innerHTML=x; } } </script> </body> </html> //Contoh05.html <html> <head> <script> 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> //Contoh06.html <html> <head> <script> 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> //Contoh07.html <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.blur(); } </script> </head> <body> <input type="button" value="Open window" onclick="openWin()" /> </body> </html> //Contoh08.html <html> <head> <script> 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> //Contoh09.html <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.focus(); } </script> </head> <body> <input type="button" value="Open window" onclick="openWin()" /> </body> </html> //Contoh10.html <html> <head> <script> function openWin() { myWindow=window.open("","","width=200,height=100"); myWindow.document.write("<p>This is 'myWindow'</p>"); } function closeWin() { myWindow.close(); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> <input type="button" value="Close 'myWindow'" onclick="closeWin()" />

</body> </html> //Contoh11.html <html> <head> <script> var myWindow; function openWin() { myWindow=window.open("","","width=400,height=200"); } function closeWin() { if (myWindow) { myWindow.close(); } } function checkWin() { if (!myWindow) { document.getElementById("msg").innerHTML="'myWindow' has never been opened!"; } else { if (myWindow.closed) { document.getElementById("msg").innerHTML="'myWindow' has been closed!"; } else { document.getElementById("msg").innerHTML="'myWindow' has not been closed!"; } } } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> <input type="button" value="Close 'myWindow'" onclick="closeWin()" /> <br><br> <input type="button" value="Has 'myWindow' been closed?" onclick="checkWin()" /> <br><br> <div id="msg"></div> </body> </html>

//Contoh12.html <html> <head> <script> var myWindow; function openWin() { myWindow=window.open('','MsgWindow','width=200,height=100'); myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>"); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> </body> </html> //Contoh13.html <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.focus(); myWindow.opener.document.write("<p>This is the source window!</p>"); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> </body> </html> //Contoh13.html <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); } function moveWin() { myWindow.moveBy(250,250); myWindow.focus(); } </script>

</head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> <br><br> <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> </body> </html> //Contoh14.html <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); } function moveWin() { myWindow.moveTo(0,0); myWindow.focus(); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> <br><br> <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> </body> </html> //Contoh15.html <html> <head> <script> function printpage() { window.print(); } </script> </head> <body> <input type="button" value="Print this page" onclick="printpage()" /> </body> </html> //Contoh16.html <html>

<head> <script> 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, because we use frames. If you do not use frames, use the <b>window</b> element instead.</p> </body> </html> //Contoh17.html <html> <head> <script> var w; function openwindow() { w=window.open('','', 'width=100,height=100'); w.focus(); } function myFunction() { w.resizeTo(500,500); w.focus(); } </script> </head> <body> <button onclick="openwindow()">Create window</button> <button onclick="myFunction()">Resize window</button> </body> </html> //Contoh18.html <html> <head> <script> 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> //Contoh19.html <html> <head> <script> 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 <br> <br> <br> <br> <br> <br> <br> <br> <p>SCROLL <br> <br> <br> <br> <br> <br> <br> <br> <p>SCROLL <br> <br> <br> <br> <br> <br> <br> <br> <p>SCROLL <br> <br> <br> <br> <br> <br> <br> <br> <p>SCROLL <br> <br> <br> <br> <br> <br> <br> <br> <p>SCROLL <br> <br> <br> <br> <br> <br>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

<br> <br> </body> </html> //Contoh20.html <html> <head> <script> function timedText() { var x=document.getElementById('txt'); var t1=setTimeout(function(){x.value="2 seconds"},2000); var t2=setTimeout(function(){x.value="4 seconds"},4000); var t3=setTimeout(function(){x.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> //Contoh21.html <html> <head> <script> var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout(function(){timedCount()},1000); } function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } }

function stopCount() { clearTimeout(t); timer_is_on=0; } </script> </head> <body> <form> <input type="button" value="Start count!" onclick="doTimer()" /> <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. Click on the "Start count!" button to start the timer again. </p> </body> </html> //Contoh22.html <html> <body> <input type="text" id="clock" /> <script> var int=self.setInterval(function(){clock()},1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button onclick="int=window.clearInterval(int)">Stop</button> </body> </html> //Contoh23.html <html> <body> <h3>Your Screen:</h3> <script> document.write("Total width/height: "); document.write(screen.width + "*" + screen.height); document.write("<br>"); document.write("Available width/height: "); document.write(screen.availWidth + "*" + screen.availHeight);

document.write("<br>"); document.write("Color depth: "); document.write(screen.colorDepth); document.write("<br>"); document.write("Color resolution: "); document.write(screen.pixelDepth); </script> </body> </html> //Contoh24.html <html> <head> <script> function goBack() { window.history.back() } </script> </head> <body> <input type="button" value="Back" onclick="goBack()"> <p>Notice that clicking on the Back button here will not result in any action, because there is no previous URL in the history list.</p> </body> </html> //Contoh25.html <html> <head> <script> function goForward() { window.history.forward() } </script> </head> <body> <input type="button" value="Forward" onclick="goForward()"> <p>Notice that clicking on the Forward button here will not result in any action, because there is no next URL in the history list.</p> </body> </html> //Contoh26.html <html> <head> <script>

function goBack() { window.history.go(-2) } </script> </head> <body> <input type="button" value="Go 2 pages back" onclick="goBack()"> <p>Notice that clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.</p> </body> </html> //Contoh27.html <html> <head> <script> 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<10 m=checkTime(m); s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s; t=setTimeout(function(){startTime()},500); } function checkTime(i) { if (i<10) { i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html> //Contoh28.html <html> <body> <p id="demo">Click the button to display todays day of the week.</p>

<button onclick="myFunction()">Try it</button> <script> function myFunction() { 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"; var x = document.getElementById("demo"); x.innerHTML=weekday[d.getDay()]; } </script> </body> </html> //Contoh29.html <html> <body> <p id="demo"></p> <script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="Browser inner window width: " + w + ", height: " + h + "." </script> </body> </html> //Contoh30.html <html> <head> <script> function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") {

alert("First name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> //Contoh31.html <html> <head> <script> function validateForm() { var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="Submit"> </form> </body> </html> //Contoh32.html <html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>getElementById</b> method!</p> <script> x=document.getElementById("intro"); document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");

</script> </body> </html> //Contoh33.html <html> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>This example demonstrates the <b>getElementsByTagName</b> method</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('First paragraph inside "main" is ' + y[0].innerHTML); </script> </body> </html> //Contoh34.html <html> <head> <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> //Contoh34.html <html>

<head> <script> function myFunction() { alert("Hello! I am an alert box!"); } </script> </head> <body> <input type="button" onclick="myFunction()" value="Show alert box" /> </body> </html> //Contoh35.html <html> <body> <p>Click the button to display a confirm box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x; var r=confirm("Press a button!"); if (r==true) { x="You pressed OK!"; } else { x="You pressed Cancel!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html> //Contoh36.html <html> <body> <p>Click the button to demonstrate the prompt box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p>

<script> function myFunction() { var x; var person=prompt("Please enter your name","Harry Potter"); if (person!=null) { x="Hello " + person + "! How are you today?"; document.getElementById("demo").innerHTML=x; } } </script> </body> </html> //Contoh37.html <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html> //Contoh38.html <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies are enabled") } else { alert("Cookies are not enabled") } } </script> <p>An alert box should tell you if your browser has enabled cookies or not.</p> </body> </html> //Contoh39.html <html> <head> <script> function myFunction()

{ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onchange="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> </body> </html> //Contoh40.html <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="backgroundcolor:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML="Thank You" } function mOut(obj) { obj.innerHTML="Mouse Over Me" } </script> </body> </html> //Contoh41.html <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="backgroundcolor:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="Release Me" } function mUp(obj) { obj.style.backgroundColor="#D94A38";

obj.innerHTML="Thank You" } </script> </body> </html> //Contoh41.html <html> <head> <script> function lighton() { document.getElementById('myimage').src="bulbon.gif"; } function lightoff() { document.getElementById('myimage').src="bulboff.gif"; } </script> </head> <body> <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" /> <p>Click and hold to turn on the light!</p> </body> </html> //Contoh42.html <html> <head> <script> function myFunction(x) { x.style.background="yellow"; } </script> </head> <body> Enter your name: <input type="text" onfocus="myFunction(this)"> <p>When the input field gets focus, a function is triggered which changes the backgroundcolor.</p> </body> </html> //Contoh42.html <html> <head>

<script> function mymessage() { alert("This message was triggered from the onload event"); } </script> </head> <body onload="mymessage()"> </body> </html> //Contoh43.html <html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'"> Mouse over this text</h1> </body> </html> //Contoh44.html

Vous aimerez peut-être aussi