Halo teman-teman semua selamat datang kembali di Javascript Course dari nusantech academy. Sebelum teman-teman melanjutkan membaca materi ini, pastikan teman-teman sudah menginstall aplikasi-aplikasi yang dapat dibutuhkan untuk mengikuti course javascript ini. Untuk cara setup tools dibaca pada blog Setup Tools.
Pada materi ini saya akan membahas mengenai cara menambahkan file javascript ke dalam file HTML. Hal ini diperlukan untuk menjalankan kode javascript yang kita miliki di dalam sebuah website.
Setidaknya ada 2 cara yang untuk menambahkan file javascript ke dalam file HTML, yaitu yang pertama adalah menambahkan kode javascript langsung ke dalam tag <script> yang ada di dalam file HTML. Cara yang kedua adalah membuat file javascript yang berisi kode javascript yang kita miliki, lalu kita kaitkan file javascript tersebut di dalam tag <script> dengan menggunakan attribute src.
Untuk cara yang pertama contohnya seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modul 2 - Javascript Course</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
<script>
// kodingan javascript ditulis disini
alert('Codingan Javascript')
</script>
</html>Bisa dilihat dalam struktur HTML di atas, kode javascript yang kita miliki bisa tuliskan di dalam tag <script> dan jika kita buka file HTML tersebut dalam web browser, maka akan muncul tampilan seperti ini:
Bisa dilihat, di gambar tersebut muncul sebuah alert yang sesuai dengan kode javascript yang dituliskan di dalam tag <script>. Hal ini berarti bahwa kode javascript tersebut telah berhasil dieksekusi oleh web browser dan proses menambahkan kode javascript di dalam file HTML pun berhasil.
Adapun untuk cara yang kedua, kode javascript tidak dituliskan di dalam file HTML melainkan dibuat file javascript sendiri dan kemudian file tersebut ditautkan di file HTML sehingga isi kode di dalam file javascript tersebut bisa dieksekusi oleh web browser.
Untuk contohnya, kita coba buat sebuah file javascript dengan nama script.js. Lalu di dalam file tersebut kita tuliskan kode javascript:
alert('Codingan Javascript')Kemudian kita tautkan file script.js tersebut di dalam file HTML kita dengan cara:
<script src="./script.js"></script>Tag <script> yang tadinya berisi kode javascript kini digunakan untuk menautkan/memanggil file script.js dengan menggunakan attribute src yang telah diisi path atau letak dari file script.js.
Jika kita coba buka file HTML tersebut di web browser, maka akan terlihat seperti ini:
Bisa dilihat hasilnya sama dengan cara yang pertama. Hal ini berarti bahwa file script.js berhasil ditautkan ke file HTML dan kode javascript di dalam file script.js berhasil dieksekusi oleh web browser.
Curious time:
Apakah peletakan tag <script> harus berada setelah tag <body> ?
Tidak harus diletakkan setelah tag <body>, tag <script> juga bisa diletakkan di dalam tag <head>, di dalam tag <body>, bahkan setelah tag <html>. Kode javascript dalam tag <script> akan berhasil dieksekusi oleh web browser.
Akan tetapi, karena web browser memproses sebuah halaman HTML dari atas ke bawah, sehingga ketika kita meletakkan tag <script> di dalam tag <head> tetapi dalam kode javascript yang dibuat ada perintah untuk memproses sebuah elemen HTML di dalam tag <body>, maka akan muncul error karena isi dalam tag <body> belum diproses oleh web browser.
Oleh sebab itu, peletakan tag <script> tergantung kapan kode javascript di dalam tag tersebut ingin dieksekusi oleh web browser.
Jadi untuk mereview ulang materi yang sudah dipelajari ini, cara untuk menambahkan file javascript dalam file HTML ada 2 cara, yaitu dengan cara langsung menuliskan kode javascript di dalam tag <script> yang ada di dalam file HTML, atau dengan cara meletakkan kode javascript di dalam sebuah file javascript terpisah dengan file HTML lalu menautkan file javascript tersebut di dalam tag <script> yang ada dalam file HTML dengan menggunakan attribute src.
Baik teman-teman, saya rasa cukup untuk materi menambahkan file javascript ke dalam file HTML ini. Tetap semangat mengikuti Javascript Course dari Nusantech Academy.
Thank you and see you next time!
Javascript – 04 – Menambahkan File Javascript ke File HTML (Video):
Quiz Time:
Quiz dapat dikerjakan pada link berikut: https://bit.ly/quizjs2-2
