1. Tag <script>
Cara yang umum yang dipakai adalah menuliskanya dalam tag <script>. Tag <script> bisa dibuat di dalam tag <head>, mauapun di dalam tag <body>. Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
<script>
console.log("Hi, ini kode Javascript");
</script>
</head>
<body>
<script>
document.write("Javascript itu keren!");
</script>
</body>
</html>
2. File Eksternal
Tidak ingin kode Javascript bercampur aduk dengan HTML, kita bisa menuliskannya pada file terpisah. Caranya, buatlah sebuah file yang berekstensi
.js, misalnya isinya sebagai berikut.// file-eksternal.js
alert("Kode Javascript dari File Eksternal");
Kemudian, kita perlu menghubungkan file eksternal tersebut dengan file HTML. Caranya, gunakan tag
<script> dengan atribut src untuk menentukan lokasi file Javascriptnya.<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
<script src="file-eksternal.js"></script>
</head>
<body>
</body>
</html>
3. Atribut Event
Cara yang ketiga ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya ketika suatu elemen diklik, maka jalankan fungsi Javascript.
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
Selain event onclick ada juga event-event yang lain, seperti onsubmit, onload, ondoubleclick, onmouseover, onmouseout, dsb.
4. URL
Terakhir, penulisan Javascript pada URL. Cara ini jarang digunakan, namun kita juga perlu mengetahuinya. Penulisan Javascript pada URL menggunakan protokol Javascript. Misal, cobalah untuk menuliskan kode seperti ini pada URL browser.
javascript:alert("Nah! ini Javascript")
Hasilnya, Javascript akan dieksekusi browser.
Lalu, bagaiaman kita menggunakan cara ini di HTML?
Cara ini bisa kita gunakan pada tag
<a>, kemudian mengisi kode javascript pada atribut href. Cara ini bisa menggantikan event onclick.<a href="javascript:alert('Wih! hebat bukan?')">Klik Aku</a>
Itulah empat cara penulisan Javascript pada HTML. Manakah cara yang sering kalian gunakan?
sumber : https://www.petanikode.com/
Tidak ada komentar:
Posting Komentar