Pemrograman Web #12 - JavaScript

Sekilas Tentang Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Struktur Javascript

Struktur dari JavaScript adalah sbb :

<script type=”text/javascript”>
 <!- -
 isi kode javascript
 // - - >
</script>

Keterangan :
Kode <!- - // - - > digunakan untuk menuliskan komentar/ code yang tidak akan dieksekusi
Javascript bisa diletakkan di dalam body ataupun head program atau di letakkan dalam file external.

Latihan-latihan penggunaan javascript

Penggunaan alert

alert merupakan tampilan message box, yang berisi 1 opsi “OK”. Biasanya digunakan untuk menampilakan notifikasi ke user.

<script type="text/javascript">
 alert("Welcomeeee!")
</script>

Penggunaan fungsi

struktur fungsi dalam javascript:

<script type=”text/javascript”>
 Function namaFungsi(){
  // isi kode program
 }
</script>

Contoh Penggunaan ( taruh di dalam tag body )

<button onclick="tampilAlert()">Button</button>
<script type="text/javascript">
 function tampilAlert() {
  document.write("Asd")
  alert("Belajar")
 }
</script>

Fungsi dengan parameter inputan:

<button onclick="Penghitungan(5,2)">Hitung</button>
<script type="text/javascript">
 function Penghitungan(val1, val2) {
  document.write("val 1 = " + val1 + "<br>val 2 = " + val2);
  document.write("<br>" + "perkalian : val1 * val2 = " + val1*val2);
  document.write("<br>" + "pembagian : val1 / val2 = " + val1/val2);
  document.write("<br>" + "penjumlahan : val1 + val2 = ");
  document.write(val1+val2);
  document.write("<br>" + "pengurangan : val1 - val2 = ");
  document.write(val1-val2);
  document.write("<br>" + "modulus : val1 % val2 = ");
  document.write(val1%val2);
 }
</script>

Fungsi dengan inputan dari user:

<button onclick="HitungWindow()">Hitung Input</button>
<script type="text/javascript">
 function HitungWindow() {
  val1=window.prompt("Nilai 1 :")
  val2=window.prompt("Nilai 2 :")
  document.write("<br>" + "val1 == val2" + "<br>" )
  document.write(val1==val2)
  document.write("<br>" + "val1 !== val2" + "<br>" )
  document.write(val1!==val2)
  document.write("<br>" + "val1 &gt val2" + "<br>" )
  document.write(val1>val2)
  document.write("<br>" + "val1 &lt val2" + "<br>" )
  document.write(val1<val2)
 }
</script>

Fungsi kondisi dengan inputan dari user:

<button onclick="MHSLulus()">CekLulus</button>
<script type="text/javascript">
 function MHSLulus() {
  nilai = window.prompt("Nilai Mahasiswa [ 0 - 100 ] :")
  if (nilai >= 75) {
   hasil = "Lulus";
  } else {
   hasil = "Tidak Lulus"
  }
  document.write("Hasil : " + hasil)
 }
</script>

Penggunaan fungsi switch :

<button onclick="Suitch()">Switch</button>
<script type="text/javascript">
 function Suitch() {
  nilai = window.prompt("Angka [ 1 - 5] : ");
  switch (nilai) {
   case "1" :
   document.write("Bilangan satu")
   break
   case "2" :
   document.write("Bilangan dua")
   break
   case "3" :
   document.write("Bilangan tiga")
   break
   case "4" :
   document.write("Bilangan empat")
   break
   case "5" :
   document.write("Bilangan lima")
   break
   default :
   document.write("Bilangan lainnya")
  }
 }
</script>

Penggunaan Fungsi For

<button onclick="Forr()">Click</button>
<script type="text/javascript">
 function Forr() {
  nilai = window.prompt("input angka [ 1 - 100 ] : ")
  for (x = 0; x <= nilai; x++) {
   document.write(x + "<br>")
  }
 }
</script>

Penggunaan fungsi while

<button onclick="Whilee()">Click</button>
<script type="text/javascript">
 function Whilee() {
  nilai = window.prompt("input angka [ 1 - 100 ] : ")
  while (x <= nilai) {
   document.write(x + "<br>")
   x++;
  }
 }
</script>

Penggunaan Form dalam Javascript

<!DOCTYPE html>
<html>
<head>
 <title>Latihan JS</title>
</head>
<body>
 <form>
  username : <input type="text" name="username" id="username"><br><br>
  password : <input type="password" name="password" id="password"><br>
  <input type="submit" name="submit" onclick="check()" value="Submit">
  <input type="reset" name="reset" value="Reset">
 </form>

 <script type="text/javascript">
  function check() {
   var username=document.getElementById('username').value;
   var password=document.getElementById('password').value;

   if (username == "admin" && password == "admin") {
    document.write("Hello : " + username);
   } else {
    alert("Maaf username dan password anda salah")
   }
  }
 </script>
</body>
</html>

Latihan:

Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan menggunakan javascript. Contoh tampilan :

Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic sesuai dengan tombol yang ditekan.

Bagikan Artikel ini