JavaScript Modern: Halo Dunia!

Bagian ini merupakan inti dari JavaScript. Nanti, anda akan mempelajari tentang Node.js dan Platform lainnya yang menggunakan JavaScript.

Tetapi kami ingin menggunakan Environment untuk menjalankan Script dan Browser adalah pilihan yang tepat. Kita akan fokus ke Browser pada pelajaran selanjutnya.

Jadi, Pertama-tama, mari kita lihat Script berikut. Untuk Environment Server-Side (Seperti Node.js), anda dapat menjalankan Script dengan perintah "node jsku.js"

Tag "Script"

Program pada JavaScript dapat dimasukkan kedalam bagian dari dokumen HTML dengan bantuan tag <script>.

Contoh:
<!DOCTYPE HTML>
<html>
<body>
<p>Paragraf sebelum Script...</p>
<script>
alert ('Halo Dunia!');
</script>
<p>Paragraf sesudah Script...</p>
</body>
</html>
</HTML>

Tag <script> terdiri dari kode JavaScript yang dapat menjalankan secara otomatis pada Browser.

Modern Markup

Tag <script> memiliki beberapa atribut yang jarang digunakan sekarang ini, tetapi tetap dapat digunakan:

Atribut type: <script type=…>
HTML lama, HTML4, membutuhkan tipe untuk Script. Biasanya menggunakan type="text/javascript". Sekarang, JavaScript tidak lagi membutuhkannya. Dan juga, HTML modern, HTML5, telah mengubah arti dari atribut. Sekarang, hal tersebut dapat digunakan untuk modul JavaScript. Tetapi hal tersebut adalah topik yang menarik: Kita akan membicarakan modul di bagian lain pada pembelajaran ini.

Atribut language <script language=…>
Atribut ini berfungsi untuk menunjukkan bahasa dari Script. Atribut ini tidak lagi berpengaruh karena JavaScript merupakan bahasa Default. Dan tidak lagi membutuhkannya.

Komentar sebelum dan sesudah Script.
Dari berbagai sumber, mungkin anda akan menemukan komentar didalam tag <script> seperti berikut:
<script type="text/javascript"><!--
    ...
//--></script>

Trik tersebut tidak lagi digunakan pada JavaScript modern. Komentar tersebut dapat menyembunyikan kode dari Browser lama yang tidak mengetahui proses tag <script>.

Script Eksternal

Jika kita memiliki banyak kode JavaScript, kita dapat memasukkannya kedalam file yang berbeda.
File Script dapat dimasukkan kedalam HTML dengan menggunakan atribut src:
<script src="/path/ke/script.js"></script>

Disini, /path/ke/script.js merupakan lokasi file Script.

Anda juga dapat memasukkan lokasi relatif dari halaman yang sedang digunakan. Contoh, src="script.js" yang berarti file "script.js" berada didalam Folder yang sedang digunakan.

Kita juga dapat memasukkan URL kedalamnya, contoh:
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Untuk memasukkan beberapa Script, kita dapat menggunakan tag ganda:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

Catatan:

Sebagai peraturan, hanya Script Simple yang dapat dimasukkan kedalam HTML. Untuk yang lebih kompleks nya dapat dimasukkan kedalam file yang berbeda.

Keuntungan dari file yang berbeda adalah Browser akan mendownloadnya dan menyimpannya kedalam Cache.

Halaman lain yang memilki Script yang sama akan mengambil dari Cache, jadi Browser hanya mendownloadnya sekali.

Hal tersebut dapat mengurangi Traffic dan membuat halaman memuat dengan cepat.

Jika src diterapkan, konten Script akan diabaikan.

Tag <script> tidak boleh memiliki atribut src jika terdapat kode didalamnya.
Contoh, berikut kode yang tidak akan bekerja:
<script src="file.js">
  alert(1); // konten akan diabaikan, karena src telah diterapkan
</script>

Kita harus memilih antara <script src="…"> atau <script>.

Contoh diatas dapat dibagi kedalam dua Script agar dapat bekerja:
<script src="file.js"></script>
<script>
  alert(1);
</script>

Kesimpulan

  1. Kita dapat menggunakan tag <script> untuk menambahakan kode JavaScript kedalam halaman.
  2. Atribut type dan language tidak dibutuhkan lagi.
  3. Script pada file eksternal dapat dimasukkan dengan menggunakan <script src="path/ke/script.js"></script>

Tugas

Menampilkan Peringatan "Alert"
Buat sebuah halaman yang dapat menampilkan pesan "Saya JavaScript!".

Buatlah dengan menggunakan Notepad atau Editor kode lainnya, tetapi pastikan hal tersebut dapat bekerja.

Lihat Demo Tugas | Lihat Jawaban Tugas

Menampilkan Peringatan "Alert" dengan Script Eksternal
Cari solusi pada tugas sebelumnya. Ubah konten script kedalam file eksternal alert.js didalam folder yang sama.

Buka halaman, pastikan tugas tersebut berhasil anda kerjakan.

Lihat Jawaban Tugas

0Komentar

Sebelumnya Selanjutnya