Membuat Program dengan JavaScript

Halo semuanya, pada artikel kali ini kita akan mempelajari JavaScript. Disini kita akan membuat perintah dengan JavaScript (alert).

Membuat Program Pertama dengan JavaScript

Halo semuanya, pada artikel kali ini kita akan mempelajari JavaScript. Sebagai pendahuluan, disini kita akan membuat perintah dengan JavaScript (alert).



Menggunakan Tag script

Program JavaScript dapat langsung di masukkan ke dalam dokumen HTML dan kita dapat meletakkan dimanapun yang kita mau dengan menggunakan tag <script>. Contoh:


<!DOCTYPE HTML>
<html>

<body>

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

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

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

</body>

</html>

Berikut adalah hasil dari kode diatas 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 JavaScript 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 yang dapat digunakan pada tag <script>:

Atribut type

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


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

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

Atribut language

Atribut languange bertujuan untuk menunjukkan bahasa dari kode/script dan jelas tidaklah masuk akal. Mengapa tidak masuk akal? Jelas karena JavaScript adalah bahasa Default dari Web dan tag script tidak membutuhkan atribut language. Contoh:


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

Komentar Sebelum dan Sesudah Script

Mungkin kalian pernah melihat komentar di didalam tag<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 script. Contoh:


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

Hal Penting tentang Script

Pada dasarnya, kita harus menyertakan script yang lebih sederhana pada dokumen HTML. Untuk script yang lebih kompleks/rumit, 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 (lalu lintas) 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 yang mungkin akan kita bahas pada bagian selanjutnya.

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

Diskusikan

0 Diskusi