lampu nyala

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="http://www.w3schools.com/htmldom/pic_bulboff.gif";
}
else
{
element.src="http://www.w3schools.com/htmldom/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" border="0" src="pic_bulboff.gif" width="100" height="180">
<p>Click to turn on/off the light</p>

</body>
</html>

hasilnya

Click to turn on/off the light

membuka web blog

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3schools.com")
}
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

hasilnya

stop time

<FORM NAME="myform">
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="10" VALUE=""
NAME="my_time">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">

function det_time()
{
var d = new Date();
var c_hour = d.getHours();
var c_min = d.getMinutes();
var c_sec = d.getSeconds();
var t = c_hour + ":" + c_min + ":" + c_sec;
document.myform.my_time.value = t;
}

setInterval("det_time()", 1000);

</SCRIPT>

hasilnya

memasukkan nama

radio button

Favorite Color

Blue
Red
Green
None

dapatkan hari

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 0:
    x="Today it's Sunday";
    break;
case 1:
    x="Today it's Monday";
    break;
case 2:
    x="Today it's Tuesday";
    break;
case 3:
    x="Today it's Wednesday";
    break;
case 4:
    x="Today it's Thursday";
    break;
case 5:
    x="Today it's Friday";
    break;
case 6:
    x="Today it's Saturday";
    break;
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

hasilnya

Click the button to display what day it is today.

else if function

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

hasilnya

Click the button to get a time-based greeting.

enable disable function

<html>
<head>
<title>My test function enabler</title>
<script type="text/javascript">
var Enabled=true;
function RunMyFunction()
{
if(Enabled == true)
{
alert("This function is enabled");
}else
{
alert("This function is disabled");
}
}
</script>
</head>
<body>
<input type="button" value="Enable my function" onclick="Enabled=true;RunMyFunction();">
<input type="button" value="Disable my function" onclick="Enabled=false;RunMyFunction();">
</body>
</html>

hasilnya

My test function enabler

lihat pekerjaan

<!DOCTYPE html>
<html>
<body>

<p>Click one of the buttons to call a function with arguments</p>

<button onclick="myFunction('Harry Potter','Wizard')">Click for Harry Potter</button>
<button onclick="myFunction('Bob','Builder')">Click for Bob</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

hasilnya

Click one of the buttons to call a function with arguments

ganti teks

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>

<p>
<button type="button" onclick="myFunction()">Try it</button>
</p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello Dolly";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>

<p>When you click on "Try it", the two elements will change.</p>

</body>
</html>

hasilnya

My Web Page

I am a paragraph.

I am a div.

When you click on "Try it", the two elements will change.

merubah teks baru

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>

</body>
</html>

hasilnya

My First Web Page

My First Paragraph.

menyala

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
}
</script>

<img id="myimage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light</p>

</body>
</html>

hasilnya

Click the light bulb to turn on/off the light

teks berubah

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can change the content of an HTML element.
</p>

<script>
function myFunction()
{
x=document.getElementById("demo"); // Find the element
x.innerHTML="Hello JavaScript!"; // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

hasilnya

My First JavaScript

JavaScript can change the content of an HTML element.

welcome with click

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>
JavaScript can react to events. Like the click of a button:
</p>

<button type="button" onclick="alert('Welcome!')">Click Me!</button>

</body>
</html>

hasilnya

My First JavaScript

JavaScript can react to events. Like the click of a button:

merubah teks

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

atau

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

hasilnya

My First Web Page

A Paragraph.

menghitung dan stop

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

hasilnya

Count numbers:

hidden text slow

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

hasilnya

This is a paragraph with little content.
This is another small paragraph.

menampilkan teks

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var x=document.getElementById("hidden1").name;
alert(x);
}
</script>
</head>
<body>

<form>
<input type="hidden" id="hidden1" name="hidden1">
</form>

<button type="button" onclick="displayResult()">Display name of hidden field</button>

</body>
</html>

hasilnya

show hide teks

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

hasilnya

If you click on the "Hide" button, I will disappear.

menyembunyikan teks

<!DOCTYPE html>
<html>
<head>
<script>
function demoDisplay()
{
document.getElementById("p1").style.display="none";
}

function demoVisibility()
{
document.getElementById("p2").style.visibility="hidden";
}
</script>
</head>
<body>

<p id="p1">This is some text.</p>
<p id="p2">This is some text.</p>

<input type="button" onclick="demoDisplay()" value="Hide text with display property">
<input type="button" onclick="demoVisibility()" value="Hide text with visibility property">

</body>
</html>

hasilnya

This is some text.

menyetop script sebelum 3 detik

<!DOCTYPE html>
<html>
<body>

<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>

<script>
var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}
</script>

hasilnya

Click the first button alert "Hello" after waiting 3 seconds.
Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)

menghentikan waktu

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

</body>
</html>

hasilnya

A script on this page starts this clock:

nomer apalah

hasilnya

add and delete

<form id="frm" action="" method="post">
  Select list:<br/>
  <select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>
  Add an option: <input type="text" name="optval" id="optval" /><br /><br/>
  <input type="button" id="addopt" name="addopt" value="Add Option" onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp;
  <input type="button" id="del_opt" name="del_opt" value="Delete Option" onclick="adOption.delOption('sel_list', 'optval');" />
</form>
<script type="text/javascript"><!--
// Free JavaScript course - coursesweb.net

// create the object with methods to add and delete <option></option>
var adOption = new Object();
  // method that check if the option is already in list
  // receives the id of the <select></select> list, and box with the value for <option>
  adOption.checkList = function(list, optval) {
    var re = 0;           // variable that will be returned

    // get the <option> elements
    var opts = document.getElementById(list).getElementsByTagName('option');

    // if the option exists, sets re=1
    for(var i=0; i<opts.length; i++) {
      if(opts[i].value == document.getElementById(optval).value) {
        re = 1;
        break;
      }
    }

    return re;         // return the value of re
   };

   // method that adds <option>
  adOption.addOption = function(list, optval) {
    // gets the value for <option>
    var opt_val = document.getElementById(optval).value;

    // check if the user adds a value
    if(opt_val.length > 0) {
      // check if the value not exists (when checkList() returns 0)
      if(this.checkList(list, optval) == 0) {
        // define the <option> element and adds it into the list
        var myoption = document.createElement('option');
        myoption.value = opt_val;
        myoption.innerHTML = opt_val;
        document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);

        document.getElementById(optval).value = '';           // delete the value added in text box
      }
      else alert('The value "'+opt_val+'" already added');
    }
    else alert('Add a value for option');
  };

  // method that delete the <option>
  adOption.delOption = function(list, optval) {
    // gets the value of <option> that must be deleted
    var opt_val = document.getElementById(optval).value;

    // check if the value exists (when checkList() returns 1)
    if(this.checkList(list, optval) == 1) {
       // gets the <option> elements in the <select> list
      var opts = document.getElementById(list).getElementsByTagName('option');

      // traverse the array with <option> elements, delete the option with the value passed in "optval"
      for(var i=0; i<opts.length; i++) {
        if(opts[i].value == opt_val) {
          document.getElementById(list).removeChild(opts[i]);
          break;
        }
      }
    }
    else alert('The value "'+opt_val+'" not exist');
  }

  // method that adds the selected <option> in text box
  adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
--></script>

hasilnya

-->

menghitung bulan

<HTML>

<HEAD><TITLE>Percabangan Switch</TITLE></HEAD>

<BODY>

<!--

function tanyabulan()

{

var bulan = parseFloat(document.fform.ibulan.value);

var namabulan=" ";

switch (bulan)

{

case 1 : namabulan="Bulan ke 1 adalah = Januari";break;

case 2 : namabulan="Bulan ke 2 adalah = Februari";break;

case 3 : namabulan="Bulan ke 3 adalah = Maret";break;

case 4 : namabulan="Bulan ke 4 adalah = April";break;

case 5 : namabulan="Bulan ke 5 adalah = Mei";break;

case 6 : namabulan="Bulan ke 6 adalah = Juni";break;

case 7 : namabulan="Bulan ke 7 adalah = Juli";break;

case 8 : namabulan="Bulan ke 8 adalah = Agustus";break;

case 9 : namabulan="Bulan ke 9 adalah = September";break;

case 10 : namabulan="Bulan ke 10 adalah = Oktober";break;

case 11 : namabulan="Bulan ke 11 adalah = November";break;

case 12 : namabulan="Bulan ke 12 adalah = Desember";break;

default : namabulan="Anda salah mengisi";

}

alert(namabulan);

}

//--></SCRIPT>

<H2>Penggunaan Percabangan Switch</H2><HR>

<PRE>

Masukkan Nomor Bulan [1-12] :<input type="text" size="2" name="ibulan">

</PRE>

</FORM>

</BODY>

</HTML>

hasilnya

Percabangan Switch

Penggunaan Percabangan Switch

Masukkan Nomor Bulan [1-12] :

-->

pause script

<script type="text/javascript"><!--
function testPause(Pause) {
  alert('Hi there');
  setTimeout( function() {
    // code that must be executed after pause
    alert('Hi, I came after 2 seconds');
  }, Pause );
}

testPause(2000);
--></script>

hasilnya

-->

text generator

<SCRIPT type="text/javascript">var normal="abcdefghijklmnopqrstuvwxyz0123456789!#%&'()*+,-./:;<=>?@[\]^_"
   var changed="4BCD3F9H1JKLMNØPQR57üVWXYZ"


   function change(_in, _out)
   {
     var s="";
     var n=_in.value.toLowerCase();

     ///if (_in.value.length=="0") _arab.value="";

     for(i=0; i<n.length; i++)
     {
       var c=n.charAt(i);
       for(j=0; (j<normal.length)&&(c!=normal.charAt(j)); j++);
       if (j<normal.length) {
         s+=changed.charAt(j);} else {
         s+=c;
       }
     }

     _out.value=s;

   }

   function focusFirst() {

     if (els = oTD.getElementsByTagName("input")) {
       els[0].focus();
     }
   }

   function highlight(field) {
   field.focus();
     field.select();
   }</SCRIPT><div class="post" align="center"> <br />
<FORM name="yform"> <TEXTAREA class="genTxt" name="textin" style="color:#f00;height:65px;width:100%">Masukkan text disini</TEXTAREA><br />
     </div>
<div class="post" align="center"><INPUT name="button" type="button" class="button" style="width:100%" onclick="change(textin, message);" value="Create"></div><div class="post" align="center">Copy Here:<br />
</div><TEXTAREA name="message" input style="color:#f00;height:65px;width:100%"></TEXTAREA><BR></div>

hasilnya

Copy Here:

lulus tidak lulus

<HTML>
<HEAD>
<TITLE> Contoh if-else </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "";
   if (nilai >= 60)
     hasil = "Lulus";
   else
     hasil = "Tidak Lulus";
   document.write("Hasil: " + hasil);
</SCRIPT></BODY>
</HTML>

hasilnya

Contoh if-else