Web Scripting dengan Javascript Part I


 

BASIC penulisan javascript

<html>

<body>

<script type=”text/javascript”>


</script>

</body>

</html>

Contoh:

<html>

<body>

<script type=”text/javascript”>

document.write(“Belajar Javascript”)

</script>

</body>

</html>

 

Jenis penulisan javascript

  1. Head section

    Format penulisan:

    <html>

    <head>

    <script type=”text/javascript”>

    ….

    </script>

    </head>

     

Contoh:

<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>

 

  1. Body section

    Format penulisan:

<html>

<head>

</head>

<body>

<script type=”text/javascript”>

document.write(“Tulisan ini akan tampil pada saat loding “)

</script>

</body>

</html>

 

  1. External script

    Contoh:

    <html>

    <head>

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

    </head>

    <body>

    </body>

    </html>

 

Penggunaan Variabel pada Javascript

    Format penulisan variabel:

    Var namavar = “value”

         atau

    Namavar = “value”

 

Contoh:

<html>

<body>

<script type=”text/javascript”>

var name = “Hege”

document.write(name)

document.write(“<h1>”+name+”</h1>”)

</script>

<p>Contoh pendeklarasian variabel dan penggunaannya</p>

<p>nilai variabel akan langsung tampil</p>

</body>

</html>

 

 

 

 

 

 

JavaScript Popup Boxes

Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:

  1. Alert box
  2. Alert box with line breaks
  3. Confirm box
  4. Prompt box

 

Alert Box

Alert box di gunakan untuk memberikan informasi pesan kepada user dan bila user yakin dengan pilihannya. Alert box ini mempunyai satu tombol “OK” untuk melanjutkan proses.

 

Syntax:

alert(“sometext”)

Contoh:

<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>


 

 

Alert Box and line breaks

<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>

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

 

</body>

</html>


Confirm Box

Confirm box biasanya di gunakan jika kita ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua tombol pilihan kepada user berupa tombol “OK” dan tombol “Cancel”. Jika pilihan tombol “OK” maka halaman web akan diproses jika pilihan tombol “Cancel” maka halaman tidak akan diproses.

Syntax:

confirm(“sometext”)

 

Contoh:

<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>

 


Prompt Box

Prompt box biasanya di gunakan untuk memberikan pesan kepada user agar user memberikan inputan sebelum halaman web itu diproses. Ketika prompt box muncul, dan user diminta untuk mengklik tombol awal yang kemudian akan muncul box yang harus di input oleh user sesuai dengan pertanyaan yang di ajukan.

Setelah di input kemudian user mengklik tombol “OK” atau “Cancel”. Untuk melanjutkan proses pilih tombol “OK” dan browser akan menampilkan hasil. Jika tombol “Cancel” kotak box akan kembali kosong untuk mengulang.

 

Syntax:

prompt(“sometext”,”defaultvalue”)

Contoh:

<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>


=======================================================================================

….Learning By Doing….

Iklan

tulis comment nya...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s