Pada beberapa tutorial sebelumnya telah kita bahas Cara Menjalankan Kode Program JavaScript,. Sekarang akan dilanjutkan dengan metode atau Cara Memasukkan Kode JavaScript ke dalam file HTML
Cara memasukkan kode JavaScript ke dalam file HTML
JavaScript termasuk jenis bahasa skrip yang dimasukkan ke dalam file HTML. Untuk memasukkan atau menyisipkan kode JavaScript ke dalam HTML, ada 4 cara
- JavaScript internal
- JavaScript eksternal
- JavaScript sebaris
- Protokol JavaScript
Kami akan membahas keempat metode ini secara lebih rinci
Pemahaman Internal JavaScript
Cara pertama untuk menginput kode JavaScript ke dalam file HTML adalah dengan Internal JavaScript. Disebut sebagai ‘internal’ karena kode JavaScript itu ditulis pada halaman yang sama dengan kode HTML, atau di dalam satu file HTML. Kode JavaScript di input menggunakan tag .
Internal JavaScript cukup sering digunakan, terutama jika kode itu tidak begitu panjang dan hanya dibutuhkan pada satu halaman saja. Kode JavaScript di tulis antara tag pembuka dan tag penutup seperti berikut:
<script> //kode javascript diletakkan disini </script>Tag akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.
Berikut adalah contoh prakteknya
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>_Saya menempatkan tag ke dalam tag pada baris ke 6. Tag tersebut berisi 1 baris perintah, yakni <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>0. Ini adalah kode untuk menjalankan fungsi alert() milik JavaScript.
alert() adalah perintah khusus untuk menampilkan kotak informasi. Fungsi ini sering digunakan dalam proses pembuatan kode JavaScript hanya untuk menampilkan output sederhana. Teks informasi ditulis di antara tanda kurung dan dalam tanda kutip
Simpan file di atas dengan nama apa saja asalkan berekstensi. html, misalnya index. html, lalu akses di browser web
Akibatnya, jendela peringatan akan muncul yang berisi teks "Hello World". Berikut adalah contoh dari internal JavaScript
Dalam beberapa tutorial JavaScript lama, Anda juga dapat menemukan atribut tambahan <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>1 seperti contoh berikut
<script type="text/javascript"> //kode javascript diletakkan disini </script>_Dahulu, atribut <!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar JavaScript di Duniailkom</title>
<script>
alert("Hello World!!");
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript di duniailkom.com</p>
<p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>_1 digunakan untuk membedakan JavaScript dari bahasa skrip lain seperti VBScript atau JScript. Namun karena VBScript dan JScript sudah punah, hampir semua web browser modern menjadikan JavaScript sebagai bahasa default. Oleh karena itu menulis <!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar JavaScript di Duniailkom</title>
<script>
alert("Hello World!!");
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript di duniailkom.com</p>
<p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>_1 tidak lagi diperlukan
Selain itu, terkadang ada juga orang yang menuliskan atribut bahasa sebagai pengganti atribut tipe, seperti pada contoh berikut
<script language="text/javascript"> //kode javascript diletakkan disini </script>Atribut bahasa dianggap usang (deprecated) dan disarankan untuk tidak digunakan lagi
Arti JavaScript Eksternal
Cara menginput kode JavaScript ke dalam file HTML yang kedua adalah dengan memindahkan kode JavaScript ke dalam file terpisah, kemudian diakses dari file HTML tersebut. Karena file JavaScript ini berada di luar file HTML, maka disebut juga JavaScript eksternal. Metode ini lebih direkomendasikan untuk kode JavaScript yang panjang, dan digunakan oleh banyak halaman
File JavaScript external disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya menggunakan juga dengan tag , tapi kali ini dengan tambahan atribut src. Atribut src berisi alamat dari file JavaScript tersebut, seperti berikut ini:
<script src="kode_javascript.js"></script>_Perhatikan bahwa tag langsung ditutup dengan tag . Di antara tag ini, tidak bisa ditulis kode internal JavaScript lain, tapi harus dipisah ke dalam tag tersendiri:
<script src="kode_javascript.js">Tidak boleh ada kode lagi disini</script>_Sebagai contoh praktis, saya akan memindahkan perintah peringatan ("Hello World. ”) ke dalam file terpisah. Silahkan buat file baru dengan nama kode_javascript. js, lalu isi perintah berikut
Ya, hanya 1 baris itu saja, dan pastikan untuk menyimpannya di folder yang sama dengan kode HTML. Dalam HTML, kita akan memanggil file JavaScript dengan kode berikut
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script src="kode_javascript.js"></script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>Pada kode ini, perintah untuk memanggil file kode_javascript. js ada di baris 5. Alhasil, saat dijalankan, jendela peringatan akan langsung muncul seperti contoh di JavaScript internal
Alamat file JavaScript eksternal dapat berupa alamat relatif seperti contoh di atas, atau dapat berupa alamat absolut seperti <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>4. Urutan penulisan alamat ini sama dengan atribut src pada HTML. Lebih lanjut tentang perbedaan antara alamat relatif dan absolut dapat ditemukan di Tutorial HTML tentang cara membuat tautan HTML
Penamaan file JavaScript dengan akhiran .js sebenarnya juga sebuah kesepakatan. Meskipun tidak umum, web browser tetap mengizinkan kita membuat akhiran atau extension lain seperti: kode_javascript.aku, atau kode_javascript.duniailkom, selama pemanggilan tag harus sesuai dengan nama file tersebut, seperti <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>5. Namun agar lebih nyaman dan tidak membuat bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.
Arti JavaScript Sebaris
Cara ketiga untuk menjalankan JavaScript adalah dengan metode inline JavaScript. Hal ini dapat dilakukan dengan menggunakan konsep event handler
Konsep event handler termasuk bagian dari DOM (Document Object Model) baru telah kita pelajari secara khusus di tutorial terpisah. Tapi sederhananya, event handler adalah memanggil kode javascript ketika 'sesuatu' terjadi di tag HTML
Ini berarti ketika elemen HTML diklik, diklik kanan, diarahkan ke mouse, dll. Event handler dalam JavaScript ditulis dengan penambahan kata on, sehingga jika tombol diklik, menggunakan title, atau jika mouse berada di atas elemen disebut onmouseover, dll.
Berikut adalah praktik JavaScript sebaris yang berjalan saat tombol diklik
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> <button title="alert('Hello World!!')">Klik Saya</button> </body> </html>Perhatikan baris 10 dari contoh kode di atas. Ke dalam tag , saya menambahkan <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>6, ini merupakan kode JavaScript yang diinput melalui metode event handler.
Meski praktis, cara memasukkan kode JavaScript ini tidak disarankan. Alasannya karena kita mencampurkan kode JavaScript dengan HTML. Dan jika kode JavaScriptnya cukup panjang, tidak praktis lagi untuk menuliskannya hanya dalam 1 baris
Dalam pemrograman JavaScript, ada istilah yang disebut JavaScript yang tidak mengganggu. Unobtrusive JavaScript adalah filosofi atau paradigma yang percaya bahwa konten (HTML) sebisa mungkin harus dipisahkan dari perilaku (JavaScript) agar mudah dipelihara dan lebih fleksibel. Konsep ini dapat dibaca di http. // en. wikipedia. org/wiki/Unobtrusive_JavaScript
Memahami Protokol JavaScript
Cara terakhir yang juga sangat jarang digunakan adalah dengan memasukkan kode JavaScript ke alamat href tag HTML. Metode ini juga disebut Protokol JavaScript. Disebut demikian, karena kita mengubah alamat link dari yang biasa menggunakan protokol http// menjadi javascript
Berikut adalah contoh penggunaannya
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> <a href="javascript:alert('Hello World!!')">Hallo Dunia...</a> </body> </html>Jika anda menjalankan kode diatas dan men-klik link Hallo Dunia… akan tampil alert Hello World!!. Jendela ini berasal dari kode JavaScript di tag pada baris 10:
Cara menjalankan JavaScript ini sudah ada sejak awal JavaScript dan sebagian besar telah ditinggalkan
Jadi Metode Apa Yang Harus Anda Gunakan?
Selain protokol JavaScript, tiga metode input JavaScript lainnya tidak menjadi masalah jika Anda ingin menggunakannya, yaitu internal, eksternal, dan inline. Pilihannya lebih kepada situasi yang dihadapi
- Jika kita membuat kode yang sangat singkat dan tidak keberatan sedikit kesulitan menemukan posisinya nanti, silakan gunakan Inline JavaScript
- Jika kami membuat kode yang cukup pendek dan tidak digunakan oleh halaman lain, harap gunakan JavaScript Internal
- Dan jika kita membuat kode yang cukup panjang atau kode tersebut akan digunakan oleh banyak halaman, maka JavaScript eksternal adalah pilihan terbaik
Catatan. Di masa lalu, JavaScript sebaris banyak dikritik karena menggabungkan kode JS dan HTML. Namun, konsep ini bahkan banyak digunakan oleh library/framework seperti React atau Vue
Berkaitan dengan cara menginput kode JavaScript ke dalam halaman HTML, sebenarnya masih ada masalah yang harus dibahas, apalagi jika kita menggunakan JavaScript internal dan eksternal. Masalahnya adalah, di mana tag <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> <script> alert("Hello World!!"); </script> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>_7 harus ditempatkan?
Saat ini di Duniailkom tersedia eBook / Uncover buku JavaScript. Dengan total lebih dari 650 halaman A4, materi dalam buku ini jauh lebih banyak dari tutorial yang ada di website Duniailkom. Penjelasan lebih lanjut bisa ke. Pengungkapan JavaScript – Panduan Pembelajaran JavaScript