Cara Menulis Kode Javascript HTML

<!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>

Mana sih yang lebih baik?

ditulis di dalam <head> atau di <body>?

Kedua cara ini memang sah-sah saja dilakukan, namun ada juga pendapat yang mengatakan:

Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display

Penulisan di akhir <body> akan meningkatkan kecepatan display atau tampilnya konten di web.

Karena, jika kita tulis di dalam <head>, script tersebut akan dieksekusi terlebih dahulu sebelum konten ditampilkan.

Jadi, disarankan menulis kode Javascript di dalam <body>, tepatnya sebelum tutup </body>.

2. Menulis Javascript pada File Eksternal

Cara kedua, kita bisa menulis Javascript di File yang terpisah dengan HTML.

Caranya, buatlah sebuah file yang berekstensi .js. File ini kita isi dengan kode Javascript.

Sebagai contoh, saya akan membuat file eksternal dengan nama kode-script.js dan file-external.html sebagai kode HTML-nya.

Berikut ini isi file kode-script.js :

document.write("Kode Javascript dari File Eksternal");

Lalu isi file-external.html adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

Hasilnya:

Coba kamu perhatikan!

Pada kode HTML file-external.html, kita tetap menggunakan tag <script>. Akan tetapi, tag ini tidak kita isi dengan kode Javascript. Melainkan kita menggunakan atribut src untuk menggunakan kode Javascript yang ada di file kode-script.js.

perlu diperhatikan juga:

Tag <script> tetap harus ditutup dengan </script> walaupun tidak punya isi.

Salah: ❌

<script src="kode-script.js">

Benar: ✅

<script src="kode-script.js"></script>

3. Menulis Javascript pada Atribut

Penulisan Javascript pada atribut bisanya dilakukan pada atribut event.

Contoh:

<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

Pada contoh ini, kita membuat elemen <button> dan memiliki attribut onclick yang berisi kode Javascript.

Nantinya, kode javascript yang ada di dalam atribut onclick akan dieksekusi saat event klik terjadi pada elemen <button>.

Penulisan atribut event di HTML diawali dengan on, misalnya untuk event click, maka pada atribut HTML ditulis onclick.

4. Penulisan Javascript pada URL

Cara ini memang jarang digunakan dan hampir tidak ada yang menggunakannya di dalam aplikasi.

Tapi tetap bisa.

Caranya, pada URL kita gunakan javascript: lalu diikuti dengan kode Javascript yang ingin dieksekusi.

Contoh:

javascript:alert("Nah! ini Javascript")

Ini di ketik pada address bar browser.

Maka hasilnya:

Catatan: Cara ini tidak bekerja di web browser versi terbaru, karena ini merupakan sebuah celah yang bisa dipakai untuk serangan XSS.

Lalu, bagaimana kita menggunakan cara ini di HTML?

Cara ini bisa kita gunakan pada tag <a>, lalu mengisinya di atribut href.

Contoh:

<a href="javascript:alert('Wih! hebat bukan?')">Coba Klik</a>

Hasilnya:

Jadi saat link <a> diklik, ia akan membuka URL javascript: dan menjalankan kode Javascript yang ada di sana.

Mirip seperti event onclick ya.

Itulah 4 Cara Menulis Kode JavaScript,Semoga Bermanfaat Teman-Teman.

Cari Blog Ini

Winda Regina