Ads by Yasya El Hakim
Membuat Program Pertama dengan JavaScript

Inti dari semua yang ada di dalam artikel ini adalah JavaScript. Tetapi, kita membutuhkan hal lain agar script yang akan kita buat dapat berjalan dengan lancar. Disini, kita akan membuat perintah (seperti alert).

Pertama-tama, mari kita tambahkan script ke dalam halaman web.



Menggunakan Tag <script>

Program JavaScript dapat langsung di masukkan ke dalam dokumen HTML di manapun kalian mau dengan menggunakan tag <script>.

Berikut adalah contohnya:

<!DOCTYPE HTML>
<html>

<body>

    <p>Paragraf sebelum script...</p>

    <script>
        alert('Halo Semuanya');
    </script>

    <p>... Paragraf sesudah script.</p>

</body>

</html>


Hasil yang akan tampil pada Browser:

Paragraf sebelum script...

... Paragraf sesudah script.


Tag <script> dapat berisi kode JavaScript yang secara otomatis akan di jalankan ketika Browser memproses tag tersebut.

Markup Modern

Tag <script> memiliki atribut yang sekarang ini jarang di gunakan tetapi terdapat beberapa diantaranya yang masih bisa kita temukan pada kode lama. Berikut adalah beberapa atribut pada tag <script>:

Atribut Type

Standar HTML lama seperti HTML4, membutuhkan atribut type pada tag script. Biasanya, nilai dari atribut type berupa "text/javascript".

Contoh:

<script type="text/javascript">
    ...
</script>


Sekarang, atribut tersebut tidak diperlukan lagi. Standar HTML modern benar-benar mengubah arti dari atribut ini. Tetapi, Atribut type tetap dapat digunakan untuk modul JavaScript (kita akan membahasnya pada bagian selanjutnya).

Atribut Language

Atribut ini bertujuan untuk menunjukkan bahasa dari script tersebut dan jelas tidaklah masuk akal. Mengapa tidak masuk akal? Karena JavaScript adalah bahasa Default dan tag script tidak perlu membutuhkan atribut language.

Contoh:

<script language="...">
    ...
</script>


Komentar Sebelum dan Sesudah Script

Mungkin kalian pernah melihat komentar pada sebelum dan sesudah script seperti contoh berikut:

<script type="text/javascript"><!--
    ...
//--></script>


Pada JavaScript modern, kita tidak perlu menggunakannya lagi. Komentar tersebut berfungsi untuk menyembunyikan kode JavaScript pada Browser lama yang tidak mengenali cara memproses tag <script>.

Script External

Jika kita memiliki banyak kode JavaScript, kita dapat memasukkanya kedalam file yang terpisah.

File script dapat kita cantumkan kedalam dokumen HTML dengan menggunakan atribut src. Contoh:

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


Disini, /namafolder/script.js adalah lokasi absolut direktori atau folder script. Terkadang juga dapat berupa lokasi relatif seperti src="script.js" yang berarti file "script.js" berada dalam lokasi yang sama dengan dokumen HTML.

Kita juga dapat menggunakan URL pada tag src. Contoh:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


Untuk menggunakan beberapa script, kita juga dapat menggunakan beberapa tag. Contoh:

<script src="/namafolder/script1.js"></script>
<script src="/namafolder/script2.js"></script>
...


Hal Penting tentang Script

Aturannya, kita harus menyertakan script yang sederhana pada dokumen HTML. Untuk yang lebih kompleks, kita harus menyertakannya pada file yang terpisah.

Keuntungan dari file script yang terpisah adalah browser akan mendownloadnya dan menyimpannya ke dalam cache.

Halaman dari dokumen HTML lain yang menyertakan script yang sama juga akan mengambilnya dari cache (tanpa mendownloadnya lagi).

Hal tersebut jelas akan mengurangi traffic dan dapat membuat halaman dapat dimuat dengan cepat.

Jangan Menggunakan Atribut src

Tag <script> tidak boleh menggunakan atribut src jika terdapat kode di dalamnya. Perhatikanlah contoh berikut:

<script src="file.js">
    alert(1); // Script akan diabaikan karena terdapat atribut src
</script>


Contoh kode diatas jelas tidak akan bekerja.

Solusi untuk contoh kode yang salah diatas, dapat diselesaikan dengan cara membagi dua tag script. Contoh:

<script src="file.js"></script>
<script>
    alert(1);
</script>


Kesimpulan

  • Kita dapat menggunakan tag <script> untuk memasukkan kode JavaScript ke dalam dokumen HTML.
  • Kita tidak perlu menggunakan atribut type dan languange.
  • Script yang ada pada file eksternal dapat dimasukkan dengan menggunakan atribut src.

Sebenarnya, masih banyak lagi yang harus kita pelajari tentang script dan interaksinya pada Browser.

Mungkin itu saja yang bisa saya sampaikan pada bagian ini. Selanjutnya, kita akan membahasnya lagi secara bertahap. Terimakasih.

0Komentar

Sebelumnya Selanjutnya