10. Javascript pada HTML

Pernah mendengar javascript? sering...

Saya juga sering mendengar javascript, bahasa pemrograman satu ini memang lagi ngetren, mungkin efek dari  teks "java" jadinya bisa ada dimana-mana, hehehe...

Sama seperti css pada html, tutorial javascript kali ini hanya sedikit, dan berhubungan dengan HTML saja. Topik javascript secara mendetail akan diposting dibagian tersendiri. Harap bersabar...

Kalau CSS di HTML digunakan untuk styling, kalau javascript digunakan untuk membuat web lebih interaktif, atraktif, dan dinamis.

Sebagai client side pendamping HTML, javascript biasanya dipakai untuk validasi form, posting by ajax, dan mainpulasi DOM HTML, apa itu?

Kita telah tahu bahwa struktur dokumen HTML berupa elemen2, nah isi elemen itu, bahkan atributnya, bisa diubah2 oleh javascript. Perubahan itu sendiri bisa dilakukan secara dinamis, saat pengunjung web melakukan sesuatu pada website kita. Canggih kan... 

Cara penulisan kode javascript pada html, sama seperti css, yaitu:

1. Ditulis inline pada atribut tag html

2. Ditulis internal menggunakan elemen <script> di dalam tag <head> atau di dalam <body>

3. Ditulis external, terpisah dari dokumen HTML, misalnya script.js

Umumnya yang dipakai banyak orang adalah menggunakan cara yang ketiga.

Untuk lebih jelasnya, berikut contoh penggunaan javascript pada dokumen HTML.

1. Inline pada tag HTML

Praktekin javascript_inline.html

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Inline Javascript pada HTML</title> 
   </head>
 
   <body>
      <h1>Contoh inline Javascript:</h1>
      <p>Sekarang waktunya adalah: <span id="jam_sekarang">-</span></p>  
      
      <button type="button" onclick="document.getElementById('jam_sekarang').innerHTML = Date();">Klik untuk melihat waktu sekarang</button>
      <button type="button" onclick="alert('Sekarang: '+Date())">Tampilkan alert</button>
      
      <p onclick="alert('Sekarang: '+Date())" style="padding:5px;border:1px solid #000000;">Klik untuk tampilkan alert</p>
   </body>
 
</html>

Pada contoh diatas, kode javascript ditulis pada atribut onclick="document.getElementById('jam_sekarang').innerHTML = Date();"

Maksudnya onclick adalah user sedang klik elemen tersebut, bisa jadi elemen adalah <button>, <p>, <body>, <div>, dan semua elemen html lainnya.

Kode document.getElementById('jam_sekarang') adalah mencari elemen HTML yang mempunyai atribut id="jam_sekarang", yaitu <span id="jam_sekarang">-</span>.

Sedangkan kode innerHTML = Date(); adalah kode javascript untuk memasukkan string Date() pada span tersebut.

Hasil dari kode diatas adalah:

2. Internal Javascript dalam file HTML

Praktekin langsung buat file javascript_internal.html

<!DOCTYPE html>
<html>
<head>
      <title>Internal Javascript pada HTML</title> 
      <script type = "text/javascript"> 
         function formatElemen(el) {
            el.style.fontSize = "25px";
            el.style.color = "red";
            el.style.backgroundColor = "blue";
         }
         function setFontBesar() {
            document.getElementById("paragraf1").style.fontSize = "25px";
            document.getElementById("paragraf2").style.fontSize = "25px";
            document.getElementById("paragraf3").style.fontSize = "25px";
            document.getElementById("paragraf4").style.fontSize = "25px";
         }
         function setFontKecil() {
            document.getElementById("paragraf1").style.fontSize = "12px";
            document.getElementById("paragraf2").style.fontSize = "12px";
            document.getElementById("paragraf3").style.fontSize = "12px";
            document.getElementById("paragraf4").style.fontSize = "12px";
         }
         function setBackgroundText() {
            document.getElementById("paragraf1").style.color = "red";
            document.getElementById("paragraf1").style.backgroundColor = "yellow";

            document.getElementById("paragraf2").style.color = "red";
            document.getElementById("paragraf2").style.backgroundColor = "yellow";

            document.getElementById("paragraf3").style.color = "red";
            document.getElementById("paragraf3").style.backgroundColor = "yellow";

            document.getElementById("paragraf4").style.color = "red";
            document.getElementById("paragraf4").style.backgroundColor = "yellow";
         }
         function setBiru() {
            var elemen_class = document.getElementsByClassName("class_sama");
            var i;
            for (i = 0; i < elemen_class.length; i++) {
                elemen_class[i].style.color = "blue";
            }
         }
      </script> 
</head>
<body>

    <h1>Contoh internal Javascript:</h1>
    <p onclick="formatElemen(this)" style="padding:5px;border:1px solid #000;">Klik saya untuk format elemen</p>
    
    <p>
      <button type="button" onclick="setFontBesar()">Set ukuran besar</button>
      <button type="button" onclick="setFontKecil()">Set ukuran kecil</button>
      <button type="button" onclick="setBackgroundText()">Set background dan warna text</button>
      <button type="button" onclick="setBiru()">Set class_nama menjadi biru</button>
    </p>

    <p id= "paragraf1" style="padding:5px;border:1px solid #000;">Paragraf 1</p>  
    <p id= "paragraf2" style="padding:5px;border:1px solid #000;">Paragraf 2</p>  

    <p id= "paragraf3" class="class_sama" style="padding:5px;border:1px solid #000;">Paragraf 3 dg class class_sama</p>  
    <p id= "paragraf4" class="class_sama" style="padding:5px;border:1px solid #000;">Paragraf 4 dg class class_sama</p>  
    

</body>
</html>

Hasilnya adalah:

3. External Javascript dalam file HTML

Praktekin, buat file myscript.js

function formatElemen(el) {
  el.style.fontSize = "25px";
  el.style.color = "red";
  el.style.backgroundColor = "blue";
}
function setFontBesar() {
  document.getElementById("paragraf1").style.fontSize = "25px";
  document.getElementById("paragraf2").style.fontSize = "25px";
  document.getElementById("paragraf3").style.fontSize = "25px";
  document.getElementById("paragraf4").style.fontSize = "25px";
}
function setFontKecil() {
  document.getElementById("paragraf1").style.fontSize = "12px";
  document.getElementById("paragraf2").style.fontSize = "12px";
  document.getElementById("paragraf3").style.fontSize = "12px";
  document.getElementById("paragraf4").style.fontSize = "12px";
}
function setBackgroundText() {
  document.getElementById("paragraf1").style.color = "red";
  document.getElementById("paragraf1").style.backgroundColor = "yellow";

  document.getElementById("paragraf2").style.color = "red";
  document.getElementById("paragraf2").style.backgroundColor = "yellow";

  document.getElementById("paragraf3").style.color = "red";
  document.getElementById("paragraf3").style.backgroundColor = "yellow";

  document.getElementById("paragraf4").style.color = "red";
  document.getElementById("paragraf4").style.backgroundColor = "yellow";
}
function setBiru() {
  var elemen_class = document.getElementsByClassName("class_sama");
  var i;
  for (i = 0; i < elemen_class.length; i++) {
      elemen_class[i].style.color = "blue";
  }
}

buat file javascript_external.html

<!DOCTYPE html>
<html>
<head>
      <title>Internal Javascript pada HTML</title> 
      <script src = "myscript.js" type = "text/javascript"/></script>
</head>
<body>

    <h1>Contoh internal Javascript:</h1>
    <p onclick="formatElemen(this)" style="padding:5px;border:1px solid #000;">Klik saya untuk format elemen</p>
    
    <p>
      <button type="button" onclick="setFontBesar()">Set ukuran besar</button>
      <button type="button" onclick="setFontKecil()">Set ukuran kecil</button>
      <button type="button" onclick="setBackgroundText()">Set background dan warna text</button>
      <button type="button" onclick="setBiru()">Set class_nama menjadi biru</button>
    </p>

    <p id= "paragraf1" style="padding:5px;border:1px solid #000;">Paragraf 1</p>  
    <p id= "paragraf2" style="padding:5px;border:1px solid #000;">Paragraf 2</p>  

    <p id= "paragraf3" class="class_sama" style="padding:5px;border:1px solid #000;">Paragraf 3 dg class class_sama</p>  
    <p id= "paragraf4" class="class_sama" style="padding:5px;border:1px solid #000;">Paragraf 4 dg class class_sama</p>  
    

</body>
</html>

Hasilnya jika file javascript_external.html dijalankan

Demikianlah tutorial Javascript dalam HTML, ketik saja meski banyak, jika ada kesalahan ketik nanti akan membuat kita semakin teliti dalam ngoding.

Script tersebut hanya untuk manipulasi ukuran font, warna dan background, pada tutorial javascript nanti akan dijelaskan secara detail step by step...