Metode Penulisan Javascript pada HTML - Metode atau cara penulisan Javascript di HTML ada beberapa macam. Untuk tujuan Web Development front-end, Javascript wajib digunakan dan ditambahkan pada kode HTML. Berikut ini adalah metode penulisan Javascript di HTML.
Agar Javascript tersebut bisa terhubung dengan HTML, kita perlu memanggilnya dengan cara menggunakan tag <script> lagi.
Bedanya dengan metode nomor 1, disini kita tidak perlu menulis semua kode Javascript. Cukup menambahkan atribut src sebagai tag pemanggil. Seperti berikut ini.
Untuk penempatannya, bisa didalam <head> atau <body>. Seperti berikut ini,
Tidak hanya onclick, masih ada banyak sekali perintah Event Javascript seperti onload, ondoubleclick, onsubmit, onmouseover, onmouseout, dll.
Tag diatas akan memanggil sebuah alert yang menampilkan sebuah Pop-up dengan kalimat "Masook Pak Eko!" setelah elemen tersebut di klik.
Nah, cukup sampai disini pembelajaran kita tentang macam-macam cara atau metode penulisan Javascaript pada HTML. Silahkan lanjut ke artikel pembelajaran Javascript berikutnya ya?
Metode Penulisan Javascript pada HTML
Pada artikel sebelumnya, Galih hanya menerangkan sekilas saja tentang cara penulisan Javascript pada HTML. Dan, di artikel panduan ini, Galih akan coba menjelaskannya secara lebih rinci.
1. Menggunakan tag <Script>
Cara yang paling sering digunakan untuk menyematkan Javascript pada HTML adalah dengan menempatkan kode didalam tag html <script>.
Tag <script> bisa ditempatkan didalam tag <head> maupun <body>.
Tag <script> bisa ditempatkan didalam tag <head> maupun <body>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metode Penulisan Javascript</title>
<script>
console.log("Halo, Aku adalah kode Javascript");
</script>
</head>
<body>
<script>
document.write("Halo, Aku adalah kode Javacript");
</script>
</body>
</html>2. Eksternal Javascript
Metode ini digunakan jika kamu tidak ingin mencampur kode Javascript dengan kode HTML. Selain itu, metode ini memungkinkan kamu untuk melakukan editing lebih mudah dan kode HTML dengan kode Javascript tidak saling menumpuk sehingga menghasilkan banyak sekali kode.
Silahkan buat file baru menggunakan teks editor milikmu (Saran: gunakan Visual Studio Code). Isi dengan kode berikut ini lalu beri nama contoh-kode.js.
Ingat! ekstensi file harus .js jangan yang lain.
// contoh-kode.js
alert("Aku adalah kode Javascript Eksternal");Agar Javascript tersebut bisa terhubung dengan HTML, kita perlu memanggilnya dengan cara menggunakan tag <script> lagi.
Bedanya dengan metode nomor 1, disini kita tidak perlu menulis semua kode Javascript. Cukup menambahkan atribut src sebagai tag pemanggil. Seperti berikut ini.
<script src="contoh-kode.js"></script>Untuk penempatannya, bisa didalam <head> atau <body>. Seperti berikut ini,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metode Penulisan Javascript</title>
<!--tag pemanggil Javascrpt-->
<script src="contoh-kode.js"></script>
</head>
<body>
<!--tag pemanggil Javascrpt-->
<script src="contoh-kode.js"></script>
</body>
</html>3. Metode Atribut Event
Metode ini digunakan saat ingin memanggil suatu fungsi Javscript pada Event atau kejadian tertentu. Misalnya, kita ingin memanggul fungsi Javascript saat suatu elemen HTML diklik.
<button onclick="alert('Makasih Bangkhg, I Love U!')">Klik Adek dong Bang!</button>Tidak hanya onclick, masih ada banyak sekali perintah Event Javascript seperti onload, ondoubleclick, onsubmit, onmouseover, onmouseout, dll.
4. Metode URL
Metode ini memanfaatkan tag pemanggil URL pada HTML yakni tag <a>, dengan cara menyisipkannya pada atribut href sebagai pengganti URL.
Berikut ini penggunaan tag <a> yang normal.
<a href="https://www.galihdesign.com">Galihdesign</a>Tag diatas akan mengarahkan kita ke website Galihdesign jika diklik.
Dan, berikut ini adalah penggunaan tag <a> yang diselipkan kode Javascript.
<a href="javascript:alert('Masook Pak Eko!')">Klik Adek Bang!</a>Tag diatas akan memanggil sebuah alert yang menampilkan sebuah Pop-up dengan kalimat "Masook Pak Eko!" setelah elemen tersebut di klik.
Nah, cukup sampai disini pembelajaran kita tentang macam-macam cara atau metode penulisan Javascaript pada HTML. Silahkan lanjut ke artikel pembelajaran Javascript berikutnya ya?