Tutorial Javascript 3 - Aturan Dasar Menulis JavaScript
Tutorial JavaScript - Sebelum saya membahas tentang aturan dasar menulis javascript, ijinkan saya untuk membahas materi terkait Atribut async dan defer, karena materi ini juga sangat penting bila disangkutpautkan dalam materi sebelumnya.
Render-Blocking JavaScript menjadi sebuah masalah ketika kita ingin menggunakan External JavaScript. Ini karena web browser harus membagi waktu antara mendownload file JavaScript dengan memproses kode HTML.
Untungnya HTML5 hadir sebagai penyelamat. Dengan atribut async dan defer, kita bisa men- gatur kapan clan bagaimana file external JavaScript diproses. Kedua atribut ini memungkinkan penulisan tag <script> tidak harus di bawah tag <body>.
Atribut async
Pada situasi "normal", web browser langsung mendownload dan menjalankan file external JavaScript pada saat itu juga. Inilah yang bisa membuat jeda waktu beberapa saat ketika web browser sedang memproses JavaScript.
Jika atribut async ditambahkan ke dalam tag <script> , file JavaScript akan diproses pada saat yang bersamaan dengan kode HTML (secara simultan). Dengan kata lain, web browser tidak "terkunci" untuk menjalankan kode JavaScript. Metode ini juga dikenal dengan istilah Asynchronous JavaScript.
Berikut contoh penulisannya:
<script src= "belajarjs1.js" async ></script>
<script src= "belajarjs2.js" async ></script> Dengan penambahan atribut async, halaman web bisa tampil dengan lebih cepat tanpa harus menunggu JavaScript selesai diproses. Artinya tidak mengalami Render-Blocking JavaScript.
Efek samping dari penggunaan atribut ini, bisa saja file belajarjs2.jsdieksekusi sebelum belajarjs1.js. Atau jika kode JavaScript tersebut digunakan untuk menambah element baru, pengguna bisa melihat gambar clan tulisan yang bergeser saat JavaScript sedang diproses.
Contoh praktek async cukup susah dilakukan secara offline, karena kita mengakses halaman web di komputer sendiri tanpa ada jeda di jaringan (terlalu cepat untuk bisa melihat proses async). Penggunaannya baru bisa terlihat pada web online dengan banyak file JavaScript external dari berbagai server.
Atribut defer
Atribut defer digunakan untuk mengatur kapan file javascript dijalankan. Dengan atributini file javascript baru didownload dan dieksekusi setelah seluruh kode html selesai di proses. Tanpa defer, file javascript akan dijalankan langsung pada posisinya pada saat ini.
Berikut contoh defer:
<script src= "belajarjs1.js" defer ></script>
<script src= "belajarjs2.js" defer ></script> Noted : Efek dari atribut async dan defer mungkin terdengar sama. Perbedaan mendasar adalah async digunakan untuk mengatur cara eksekusi kode javascript, sedangkan defer untuk mengatur kapan file javascript tersebut di download dan diproses.
Senjutnya kita akan masuk kemateri, secara cara umum aturan dasar penulisan kode program javascript mirip seperti bahasa pemrograman lain. Pada awalnya kita akan membahas point-point penting terkait hal ini yakni tentang statement, case sensitivity, whitespace dan baris komentar di dalam javascript sebelum kita memasuki materi tentang variabel dan konstanta itu sendiri.
Statement
Statement adalah sebutuan untuk sebuah garis perintah javascript, walaupun saya menggunakan kata "baris" bisa saja sebuah statement butuh berberapa baris atau dalam satu baris bisa terdiri dari beberapa statement. Setiap element diakhiri dengan tanda titik koma (;). Berikut contoh penulisan statement javascript:
<script>
alert("Hello World");
console.log("Tutorial JavaScript");
var a = 12; var b = "aku"; var c = 3.14;
d = 13 * 5 + 9 - 0.14;
let foo = document.getElementById("bar");
var elementsBox =
document.getElementsByClassName("box");
</script>Pada baris ke-4 saya menulis 3 statement dalam 1 baris. Sedangkan di baris ke-7, satu statement dipecah menjadi 2 baris. Sebenernya tanda titik koma untuk mengakhiri statement javascript ini adalah opsional. Artinya, boleh tidak ditulis sepanjang statement tersebut harus berada dalam baris baru (1 statement, 1 baris).
Sebagai contoh, kode program berikut tidak akan menimbulkan error dan berjalan sebagimana mestinya:
<script>
alert("Hello World")
console.log("Tutorial JavaScript")
var a = 12
var b = "aku"
var c = 3.14;
d = 13 * 5 + 9 - 0.14
let foo = document.getElementById("bar")
</script>
Namun menulis statement seperti ini sangat tidak disarankan. Sebaiknya kita tetap menambahkan tanda titik koma ; untuk mengakhiri setiap statement di dalam javascript.
Case Sensitivity
JavaScript termasuk bahasa pemrograman yang bersifat yang bersifat case sensitif, artinya huruf besar dan huruf kecil dianggap berbeda. Salah menulis huruf sangat sering terjadi, apalagi fungsi-fungsi bawaan javascript lumayan panjang, misalnya document.getElementById() dan document.getElementsByClassName(). Penulisan fungsi seperti ini harus sama persis, tidak boleh ada salah ketik huruf besar atau kecil.
Hal yang sama juga juga berlaku untuk penulisan variabel dan keyword. Variabel nama, Nama dan NAMA merupakan 3 variabel berbeda. Sedangkan untuk penulisan keyword while, harus ditulis sebagai 'while', bukan 'While' atau 'WHILE'.
Whitespace
Whitespace berarti karakter "kosong" seperti spasi, tab, atau baris baru. Secara umum di dalam javascript whitespace akan diabaikan. Anda bisa membuat seluruh kode program javascript di dalam 1 baris panjang maupun memecahnya menjadi beberaoa baris.
Kode contoh ini diproses sama dalam javascript:
<script>
var a="Selamat Pagi"; console.log(a); var b="Good Morning"; alert(b);
</script><script>
var a = "Selamat Pagi";
console.log(a);
var b = "Good Morning";
alert(b);
</script>contoh kedua tentu lebih mudah dibaca daripda contoh pertama.
Identing adalah istilah yang digunakan untuk menambahkan spasi atau tab di awal baris kode program. Tujuanya agar kode lebih mudah dibaca terutama jika kode program tersebut sudah mencapai puluhan atau ratusan baris kode program.
Berikut contoh program penggunaan identing dalam javascript:
<script>
var pesan = "document.gerElementById("pesan");
var username = "document.gerElementById("username");
var submit = "document.forms[0].submit;
var pattern = /^[A-Za-z0-9]{6,}$/;
submit.onclick = function () {
if (pattern.test(username.value)) {
pesan.innerHTML = "Username sesuai";
pesan.innerHTML = "betul";
}
};
</script>Jika tanpa identing, kode program diatas sangat susah untuk dibaca. Kita tidak tahu baris mana yang menjadi awal dan akhir dari sebuah blok program. Tidak ada aturan kusus penggunaan identing ini. Sebagaimana programmer menggunakan tab, dan ada juga yang menggunakan spasi. untuk saya pribadi, lebih suka menggunakan 2 buah spasi untuk membuat identing.
Baris Komentar
Baris komentar atau coment adalah sebutan untuk kode program yang tidak akan dieksekusi oleh javascript. Jika tidak akan di proses, untuk apa ditulis?
Setidaknya terdapat 2 fungsi dari comment:
- Membuat dokumentasi atau penjelasa atas kode program yang dibuat.
- Menonaktifkan beberapa kode progarm, misalnya jika anda sedang mencoba metode lain tapi tidak ingin menhapus kode program yang sudah ada.
Untuk membuat komentar, javascript menyidiakan 2 cara penulisan:
- Komentar singkat (satu baris), menggunakan karakter
//(2x forward slash). - Komentar panjang, menggunakan tanda
/*sebagai awal komentar dan tanda*/sebagai akhir komentar, ditengah-tengahnya anda bisa menuliskan komentar yang di inginkan sehingga bisa memuat lebih dari satu baris.
Berikut contoh penulisanya:
<script>
// ini adalah komentar satu baris
/* komentar ini dapat
memuat beberapa
kode program */
</script>
Dengan adanya komentar untuk membuat dokumentasi penjelasan tentang cara kerja kode program. Jika anda membuat bersama tim, komentar seperti ini sangat pentinf ditambahkan, supaya rekan kerja lain mudah memperlajarinya. Ataupun jika berkerja sendiri, komentar penting di tulis sebagai "pengingat". Mskipun saat ini anda paham, namun saya yakin 1 atau 2 bulan kemudian anda suda lupa tentang cara kerja sebagian besar kode program tersebut.