Bagian dari tutorial ini ialah tentang inti JavaScript itu sendiri.
Tapi kita butuh lingkungan kerja untuk menjalankan scripts kita dan, karena buku ini online, peramban adalah pilihan yang baik. Kita akan menjaga supaya jumlah perintah yang spesifik peramban (seperti alert) seminimum mungkin sehingga kamu tak boros waktu di situ jika kamu berencana untuk fokus ke lingkungan lain (seperti Node.js). Kita akan fokus ke JavaScript di peramban dalam bagian selanjutnya dari tutorial ini.
Jadi pertama, kita lihat bagaimana kita menyisipkan script ke laman web. Untuk lingkungan (seperti Node.js), kamu bisa mengeksekusi script itu dengan perintah seperti "node my.js".
Tag “script”
Program JavaScript bisa disisipkan ke dalam bagian mana saja dari dokumen HTML dengan bantuan tag <script>.
Contoh:
<!DOCTYPE HTML>
<html>
<body>
<p>Kode ini ditulis sebelum skrip...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...Kode ini ditulis setelah skrip.</p>
</body>
</html>Kamu bisa menjalankan contohnya dengan mengklik tombol “Play” di sebelah ujung kanan-atas dari box di atas.
Tag <script> mengandung kode JavaScript yang otomatis dieksekusi ketika peramban memproses tag.
Markup modern
Tag <script> punya beberapa attribut yang jarang dipakai akhir-akhir ini tapi masih bisa ditemukan dalam kode lama:
- Atribut
type:<script type=…> -
Standar HTML lawas, HTML4, mengharuskan script memiliki
type. Biasanyatype="text/javascript". Sekarang sudah tak diperlukan. Selain itu, standar HTML modern, HTML5, mengubah total makna atribut ini. Sekarang, ia bisa digunakan untuk modul JavaScript. Tapi itu topik berat, kita akan membahas modul di bagian lain dari tutorial ini. - Atribut
language:<script language=…> -
Atribut ini untuk menampilkan bahasa script. Atribut ini tak lagi dibutuhkan karena JavaScript adalah bahasa default. Tak usah menggunakan itu lagi.
- Komen sebelum dan setelah script.
-
Di dalam buku dan panduan jadul, kamu mungkin menemukan komen di dalam tag
<script>, seperti ini:<script type="text/javascript"><!-- ... //--></script>Trik ini tak lagi dipakai di JavaScript modern. Komen ini menyembunyikan kode JavaScript dari peramban tua yang tak tahu cara memproses tag
<script>. Oleh karena peramban yang dirilis 15 tahun terakhir tak punya masalah terkait ini, komen macam ini bisa membantumu mengidentifikasi kode yang sangat jadul.
Script External
Jika kita punya banyak kode JavaScript, kita bisa menaruhnya di dalam file berbeda.
File script ditempel ke HTML dengan atribut src:
<script src="/path/to/script.js"></script>Di sini, /path/to/script.js adalah jalur absolut ke file script dari root sitius. Kamu juga bisa menyediakan jalur relatif dari laman ini. Misalnya, src="script.js" berarti file "script.js" dalam folder saat ini.
Kamu bisa memasang URL penuh juga. Misalnya:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>Untuk menempelkan beberapa script, gunakan tag berlapis:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…Aturannya, cuma script paling simpel yang ditaruh di dalam HTML. Script lebih rumit ditaruh di file terpisah.
Keuntungan file terpisah ialah peramban akan mengunduhnya dan menyimpannya di cache-nya.
Laman lain yang merujuk ke script yang sama akan mengambilnya dari cache ketimbang mengunduhnya, jadi sebenarnya file hanya diunduh sekali saja.
Itu mengurangi trafik dan membuat laman jadi lebih cepat.
src diset, konten script diabaikan.Tag <script> tunggal tak bisa punya atribut src dan kode di dalamnya bersamaan.
Ini tak akan berjalan:
<script src="file.js">
alert(1); // konten diabaikan karena 'src' telah di set
</script>Kita harus memilih antara <script src="…"> external atau <script> external.
Contoh di atas bisa dipecah menjadi dua script:
<script src="file.js"></script>
<script>
alert(1);
</script>Kesimpulan
- Kita bisa menggunakan tag
<script>untuk menambah kode JavaScript ke laman. - Atribut
typedanlanguagetak wajib. - Script di file external bisa disisipkan dengan
<script src="path/to/script.js"></script>.
Masih banyak lagi yang harus dipelajari tentang script peramban dan interaksi mereka dengan laman web. Tapi harap diingat bahwa bagian ini dari tutorial ini dikhususkan hanya ke bahasa JavaScript, jadi kita tak akan membahas implementasi Javascript yang spesifik peramban. Kita akan menggunakan peramban hanya sebagai alat untuk menjalankan JavaScript, yang nyaman untuk bacaan online.
komentar
<code>, untuk beberapa baris – bungkus dengan tag<pre>, untuk lebih dari 10 baris – gunakan sandbox (plnkr, jsbin, < a href='http://codepen.io'>codepen…)