1. Tutorial
  2. Bahasa JavaScript
  3. JavaScript Dasar
14 Agustus 2020

Hello, world!

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. Biasanya type="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>
???
Tolong dicatat:

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.

Jika 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 type dan language tak 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.

Tugas

Tampilkan alert

Buat laman yang menampilkan pesan ???I???m JavaScript!???.

Lakukan dalam sandbox, atau di hard drive kamu, tak masalah, pastikan bisa berjalan.

Demo di jendela baru

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

Buka solusi di kotak pasir.

Tampilkan alert dengan script external

Ambil solusi dari tugas sebelumnya Tampilkan alert. Modifikasi itu dengan mengextrak konten script ke file external alert.js, yang berada di dalam folder yang sama.

Buka lamannya, pastikan alertnya bekerja.

Kode HTML:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

Untuk file alert.js di dalam folder yang sama:

alert("I'm JavaScript!");
Pelajaran sebelumnya Pelajaran berikutnya
Peta tutorial

Bab

Navigasi pelajaran

Bagikan