JavaScript Untuk Pemula (Bagian I)

JavaScript adalah bahasa scripting untuk digunakan di dalam halaman web HTML. Bahasa yang digunakan oleh JavaScript mirip dengan gaya bahasa C. JavaScript adalah awal pembelajaran yang baik bagi pemula dalam mempelajari pemrograman.


1. Syntax JavaScript


Kode JavaScript diletakkan di dalam tag <script> dengan atribut type="text/javascript". Contohnya adalah :
<script type="text/javascript">
  // Tulis kode JavaScript di sini
</script>

2. Script Pertama


Buatlah sebuah file dengan ekstensi .html yang isinya :
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
  document.write("Hello World!");
</script>
</body>
</html>

Jika file di atas dibuka di browser, hasilnya adalah :
Hello World!

3. Penempatan JavaScript


JavaScript dapat ditempatkan di :
  • Tag <head>..</head>, contohnya :
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
      // Tulis kode JavaScript di sini
    </script>
    </head>
    <body>
    </body>
    </html>
  • Tag <body>..</body>, contohnya :
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
      // Tulis kode JavaScript di sini
    </script>
    </body>
    </html>
  • File eksternal. Buat sebuah file yang berisi kode JavaScript (tetapi tanpa menggunakan tag <script>..</script> lagi) dan kemudian simpan dengan nama, misalnya sekrip.js. Setelah itu panggil file sekrip.js tadi dalam halaman html dengan cara :
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="sekrip.js"></script>
    </head>
    <body>
    </body>
    </html>
  • atau menggunakan kombinasi dari ketiga cara di atas

4. Case Sensitive


JavaScript sangat sensitif terhadap penggunaan huruf besar dan huruf kecil. Jadi jika Anda menggunakan contoh di dalam artikel ini, pastikan mana yang menggunakan huruf kecil dan mana yang menggunakan huruf besar.

Pada kebanyakan fungsi standar JavaScript yang terdiri dari gabungan beberapa kata, huruf pertama kata menggunakan huruf kecil dan kata berikutnya diawali dengan huruf besar. Misalnya "get element by id" menjadi "getElementById".

5. Output (write)


Sebelumnya sudah dicontohkan cara menampilkan kalimat "Hello World!". Selain itu bisa juga ditambahkan tag untuk menghias tulisan. Misalnya :
<script type="text/javascript">
  document.write("<u>Hello</u> <b>World!</b>");
</script>
akan menghasilkan : Hello World!

6. Output (alert)


Metode output kedua adalah menggunakan alert. Alert atau peringatan, adalah sebuah kotak yang muncul dan menampilkan tulisan tertentu. Selain itu satu atau beberapa tombol ditampilkan juga sebagai konfirmasi dari user. Contoh :
<script type="text/javascript">
  alert("Hello World!");
</script>
akan menghasilkan :


7. Output (getElementById)


Metode output yang terakhir ini biasa digunakan oleh programmer. Semua elemen di HTML yang bisa diberi atribut id="penunjuk-elemen" bisa diubah isinya dengan cara ini. Nilai dari atribut id sifatnya unik, artinya dalam sebuah halaman HTML tidak boleh ada id yang sama. Contoh :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="hasil">Tulisan ini akan diganti oleh JavaScript</div>
<script type="text/javascript">
  document.getElementById("hasil").innerHTML = "Hello World!";
</script>
</body>
</html>

8. Penulisan Komentar


Komentar adalah kata atau kalimat yang dimaksudkan hanya sebagai petunjuk bagi programmer. Jadi komentar tidak wajib ada. Isi komentar bisa apa saja dan tidak akan dieksekusi. Penulisan komentar dalam JavaScript ada 2 (dua) jenis, yaitu :
  • Menggunakan tanda Double Slashes // yang berarti dari mulai setelah tanda itu sampai akhir baris akan dianggap komentar. Contoh :
    <script type="text/javascript">
      var x = 5; // inisialisasi x dan diberi nilai 5
    </script>
  • Komentar diletakkan di antara /* dan */. Komentar jenis ini berguna untuk komentar yang panjang atau bahkan memakan beberapa baris. Jadi semua yang berada di antaranya akan dianggap sebagai komentar. Contoh :
    <script type="text/javascript">
      /* Inisialisi variabel
         x : sumbu koordinat x
         y : sumbu koordinat y
         z : sumbu koordinat z */
      var x = 5;
      var y = 98;
      var z = 21;
    </script>


Usai sudah Bagian I dari "JavaScript Untuk Pemula" ini. Bagian II nanti akan membahas tentang jenis-jenis input dalam JavaScript. Semoga bermanfaat. Aamiin.

Komentar

Posting Komentar