Tutorial Javascript 2 - Penulisan Kode JavaScript
Tutorial JavaScript. Pada praktek sebelumnya kita talah membuat dasar penulisan kode yaitu menampilkan jendela popup dengan tulisan "Hello World". Dalam penulisan tersebut kita telah membuat cara penulisan secara inline javascript, selain cara tersebut terdapat lagi 2 metode lain untuk menginput kode javascript yakni internal dan external. Mari kita bahas keduanya.
Namun sebelum membahas keduanya, saya ingin membahas sedikit lagi tentang penginputan kode inline javascript. Inline JavaScript artinya menempatkan kode javascript secara langsung ke dalam attribut tag html. Metode ini sangat praktis namun memiliki beberapa kelemahan yaitu :
- Kode JavaScript "bercampur" dengan kode HTML, jika kita memakai penginputan ini maka akan memakan waktu lama untuk mencari atau mengesekusi kode seperti ini bila terdapat ratusan baris html.
- Kode JavaScript hanya bisa diketik dalam satu baris, sehingga sangat tidak cocok jika digunakan untuk penulisan kode yang panjang.
- Kode JavaScript tidak bisa digunakan ditempat lain, artinya jika kita mempunyai banyak halaman dengan terpaksa kita akan menulis kodenya di setiap halaman hal ini tentu sangat tidak efisien.
Internal JavaScript
Disini kode javascript ditulis di dalam tag <script>. Tag <script> merupakan tag khusus untuk menginput kode script, dimana salah satu kode script itu adalah javascript. Sebelum era html5 seperti saat ini, penulisan tag <script> ditambahkan attribut language dan type berikut contohnya
<script type="text/javascript" language="javascript">
//.. tulisan kode javascript disini
</script>Sekarang cara tersebut sudah tidak direkomendasikan lagi, kita cukup menulis tag <script> tanpa atribut apapun seperti pada contoh di bawah ini
<script>
//.. tulisan kode javascript disini
</script>Attribute type dan language merupakan "warisan" dari era browser war. Ketika itu kode script yang tersedia tidak hanya javascript saja, juga ada jscript dan vbscript. Saat ini semua web browser menjadikan javascript sebagai bahasa default, sehingga atribut type dan language tidak perlu dituliskan lagi.
Menurut anda sebaiknya dimanakan tag <script> ini diletakan? Apakah dibagian <head>? bagian <body>? ataukah diakhir?
Lokasi penempatan ini dipengaruhi oleh 2 aspek yakni performa dan eksekusi. Mari kita bahas satu persatu!
Menempatkan kode di bagian atas seperti ini jika berkaitan dengan performa yang tadi telah saya sebutkan maka beberapa web developer menyarankan untuk tidak melakukanya tapi disarankan untuk diletakan dibagian bawah tag <body yaitu sebelum tag penutup </body> seperti pada contoh dibawah ini:
Untuk internal javascript, peningkatan performa tidak akan begitu terasa. Posisi javascript di bagian bawah seperti di atas lebih di tunjukan untuk external javascript. Jika dikaitkan dengan proses eksekusi posisi kode javascript bisa mempengaruhi alur proses dari web browser.
Dengan menggunakan metode internal javascript, kode program kita sudah sedikit rapih. Seluruh kode javascript diletakan di dalam tag <script>. Namun kode ini masih berada di halaman yang sama dengan html, akibatnya kita tidak bisa menggunakan kode javascript tersebut di halaman lain.
External JavaScript
Metode input javascript yang paling disarankan adalah external javascript. Disini kita membuat file kusus yang berisi kode program javascript. File ini nantinya dipanggil oleh halaman html yang membutuhkanya. Sebagai prakteknya, silakan buat sebuah file baru yang isinya adalah sebagai berikut:
alert("Belajar External JavaScript");Untuk sementara cuma baris ini saja, karena kita belum membahas kode javascript lainya. Save file di atas dengan nama belajarjs.js didalam folder Tutorial JavaScript, anda bisa menggunakan nama lainya asalkan extentionya harus .js. Untuk memasukan file javascript belajarjs.js ke dalam html kita perlu menggunakan atribut src dari tag <script>. Silakan buat kode html seperti contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial JavaScript</title>
</head>
<body>
<h1>Tutorial JavaScript</h1>
<script src="belajarjs.js"></script>
</body>
</html>File html tersebut saya simpan didalam folder Tutorial JavaScript dan dengan nama tutorial-js1.html sehingga di dalam folder tersebut terdapat 2 file.
Kemudian jika dijalankan kode yang tadi kita buat di web browser maka akan muncul seperti gambar seperti di bawah ini:
Hasilnya sebuah jendela popup dengan teks "Belajar External JavaScript". Ini artinya kode javascript yang berada di belajarjs.js telah berhasil dieksekusi. Sama seperti atribut src pada tag <img> file javascript juga bisa menggunakan alamat relatif maupun alamat absolute. Kita bisa saja menginput file javascript yang berada di server lain, seperti contoh berikut ini:
<script src="https://code.jquery-3.1.0.js"></script>Teknik seperti ini sering digunakan untuk mengakses file javascript yang berada di CDN (content delivery network). Untuk menginput file javascript external, pasangan tag penutup </script> tetap harus ditulis walaupun diantara tag <script> dan </script> tidak berisi kode apapun. Kita tidak bisa menulis self closing tag seperti berikut:
<script src="belajarjs.js" />Diantara tag <script> dan </script> juga tidak boleh terdapat kode internal javascript lain:
<script src="belajarjs.js">
alert("Belajar External JavaScript");
</script>Jika butuh memanggil lebih dari satu dile javascript external, bisa dengan menulis tag <script> beberapa kali:
<script src="belajarjs1.js"></script>
<script src="belajarjs2.js"></script>
<script src="belajarjs3.js"></script>Yang perlu diperhatikan, file javascript ini dieksekusi secara beruntun mulai dari yang paling atas. File belajarjs1.js di proses pertama kali, kemudian diikuti oleh belajarjs2.js dan terakhir belajarjs3.js.
Kita perlu mengatur posisi file jika terdapat kode javascript yang bergantung kepada file lain. Misalkan anda membuat program yang memerlukan libraru jQuery, pemanggilan library ini harus di tulis paling awal. kalau tidak, kode program tidak akan berjalan.
Dengan memisahkan kode program javascript ke dalam file kusus, kita bisa melakukan code reuse, yakni menggunakan 1 file javascript oleh banyak halaman html. Halaman tersebut cukup memanggil file ini menggunakan tag <script>.
Fitur cache dari web browser juga bisa mempercepat pengaksesan website dengan cara menyimpan file javascript di dalam cache. Ketika mengunjungi halaman html yang memiliki file javascript external, web browser akan mendownload file-file ini dan disimpan di cache. Saat pindah ke halaman lain yang menggunakan file external javascript, web browser cukup mengambilnya di cache, tidak perlu mendownload ulang seluruh file ini (selama file external javascript tersebut sama persis).
Dibalik keunggulanya, external javascript juga memiliki satu kendala. Spesifikasi protocol HTTP/1.1 menyatakan bahwa web browser harus berhenti memproses HTML pada saat mendownload file external javascript. Situasinya mirip seperti menulis fungsi alert() dibagian <head>. Sebagaimana yang telah kita lihat, fungsi alert() akan menahan web browser untuk memproses kode html sampai tombol OK di klik.