Javascript sebagai salah satu bahasa pemrograman yang berjalan di atas browser harus di tulis di dalam HTML. Ada empat cara penulisan javascript pada HTML.
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 dengan membuat sebuah file yang berekstensi .js, misalnya isinya sebagai berikut.
// file-eksternal.js
alert("Kode Javascript dari File Eksternal");
Selanjutnya, 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. Sebagai contoh ketika suatu elemen diklik, maka jalankan fungsi Javascript.
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>Selain event onclick ada beberapa event-event yang lain, seperti onsubmit, onload, ondoubleclick, onmouseover, onmouseout, dsb.
4. URL
Terakhir, penulisan Javascript pada URL. Cara ini jarang atau malah tidak pernah digunakan, namun kita juga perlu mengetahuinya. Penulisan Javascript pada URL menggunakan protokol Javascript. Misal, cobalah untuk menulis 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>
No comments:
Write comments