Cara Menghubungkan JavaScript Dengan HTML

Cara Menghubungkan JavaScript Dengan HTML

Pada seri sebelumnya kita belajar menulis kode JavaScript pertama kemudian pada seri ini kita akan belajar cara menghubungkan JavaScript dengan HTML. Untuk menghubungkan file JavaScript dengan HTML ada dua cara yaitu dengan cara internal dan eksternal. Apabila kamu perhatikan pada seri sebelumnya kita menulis JavaScript dengan cara internal.

Menulis Kode JavaScript Internal

Untuk menulis JavaScript internal kamu cukup menggunakan tag HTML script dalam file HTML, kemudian dalam tag script tersebut langsung ditulis kode-kode JavaScript. Penulisan tag script dapat ditulis di dalam tag head, namun juga dapat ditulis didalam tag body (sebelum berakhirnya tag body). Tujuan penulisan sebelum berakhirnya tag body agar semua tag HTML didalam tag body telah selesai di muat oleh browser, kemudian baru kode JavaScript dijalankan. Cara ini bertujuan agar jika ada kode JavaScript yang memilih element HTML yang ada didalam body dapat ditemukan oleh JavaScript. Untuk contoh penulisan JavaScript secara internal kamu dapat melihat kode dibawah ini :

Pada contoh kode diatas ada 2 contoh penulisan JavaScript secara internal. Contoh pertama yaitu penulisan didalam tag head pada HTML yang terletak pada baris nomor 6 sampai 8. Sedangkan contoh kedua yaitu penulisan JavaScript yang berada sebelum penutup tag body yang terletak pada baris nomor 15 sampai 17. Apabila kode tersebut dibuka pada browser maka akan menampilkan dua buah alert.

Menulis Kode JavaScript Eksternal

Untuk menulis JavaScript secara eksternal kamu juga menggunakan tag script, namun pada tag pembuka script memiliki sebuah atribut src. Dimana atribut src tersebut memiliki value link dari file JavaScript. Dan file kode JavaScript disimpan dengan format js, contohnya script.js. Jadi apabila kamu menyimpan file JavaScript dengan nama script.js yang masih satu folder dengan file HTML yang memuat file JavaScript tersebut maka atribut scr menjadi src=”script.js”. Untuk lebih jelasnya kamu dapat melihat kode HTML dibawah ini :

Tulis kode HTML diatas kemudian disimpan dengan nama index.html. Kemudian tulis kode JavaScript dibawah ini :

Setelah kode JavaScript diatas selesai ditulis kemudian simpan dengan nama script.js yang masih satu folder dengan file index.html.

Contoh Gambar File HTML dan JavaScript Tersimpan

Untuk menulis kode JavaScript secara eksternal pada file JavaScript tidak memerlukan tag script lagi dan langsung ditulis kode JavaScriptnya, seperti contoh kode JavaScript diatas. Kode JavaScript tersebut hanya satu baris, namun apabila file index.html dibuka pada browser maka akan menampilkan sebuah alert.

Demikian untuk seri belajar JavaScript cara menghubungkan JavaScript dengan HTML, apabila kamu memiliki pertanyaan seputar seri ini silakan sampaikan di kolom komentar.


Kolom Komentar

Related Post