Cara Menuliskan Javascript Ke HTML - Kali ini saya akan membahas mengenai javascript, dan akan saya mulai dari darsarya yaitu menuliskanya ke HTML, karena javascript dan HTML itu berbeda jenis, maka beda juga metodenya.
Ada 4 cara untuk menuliskan Javascript ke HTML, yaitu
- Menggunakan tag <script> (internal)
- Menggunakan tag <script src=""> (external)
- Menggunakan Event Handler (inline)
- Menggunakan Link
Menggunakan tag <script>
Cara pertama yaitu menulis kode javascript dalam tag <script> secara internal. Artinya javascript ditulis di file yang sama dengan HTML.Cara ini bagus digunakan jika kode javascript tidak terlalu panjang. Contoh
HTML
<!DOCTYPE html>
<html>
<head>
; <body>
</html>
<html>
<head>
<title>Belajar Javascript</title>
<script>
alert('hello');
</script>
</head>alert('hello');
</script>
; <body>
<h1>Hello</h1>
<p>
</body><p>
Belajar Javascript
</p>
</html>
Hasilnya
Pada contoh diatas tag <script> saya letakan di dalam tag <head>. Kalian bebas menempatkan tag <script>, bisa diawal <body>, bebas. Saran saya kalian meletakanya di akhir tag <body>, karena itu akan membuat javascript dieksekusi setelah HTML selesai diload.
Menggunakan tag <script src=""> (external)
Cara kedua yaitu dengan memanggil file javascript ke HTML di atribut src. Artinya, file javascript dan HTML kita pisah, dan javascriptnya dipanggil di HTML.Metode ini saya sarankan, apalagi untuk kode javascript yang panjang, berikut syntaxnya.
<script src="file.js"></script>
Untuk format file, yaitu .js, berikut contohnya.
file.js
alert('help me');
HTML
<!DOCTYPE html>
<html>
<head>
; <body>
</html>
<html>
<head>
<title>Belajar Javascript</title>
script src="file.js"></script>
</head>; <body>
<h1>Hello</h1>
<p>
</body><p>
Belajar Javascript
</p>
</html>
Berikut hasilnya
Sama seperti metode sebelumnya, penempatan terbaik adalah diakhir tag body.
Menggunakan Event Handler (inline)
Cara ini menggunakan event handler sebagai tempat penulisan javascript. Event Handler sendiri adalah aksi/hal yang terjadi pada sebuah tag HTML, sperti ketika diklik yaitu onclick, atau onmouseover, onload, dll.Contoh, kali ini saya memiliki sebuah button, jika button diklik maka akan muncul alert yang berisi pesan 'malu malu kucing'.
HTML
<!DOCTYPE html>
<html>
<head>
; <body>
</html>
<html>
<head>
<title>Belajar Javascript</title>
</head>; <body>
<h1>Hello</h1>
<p>
<button onclick="alert('malu malu kucing')">klik saya</button>
</body><p>
Belajar Javascript
</p><button onclick="alert('malu malu kucing')">klik saya</button>
</html>
Hasilnya
Menggunakan Link
Cara ini sudah jarang digunakan, tapi kali ini saya tetap akan membagikanya untuk pengetahuan. Cara ini yaitu menyisipkan kode javascript ke atribut href dalam tag <a>, cara ini sering disebut juga protocol javascript. ContohHTML
<!DOCTYPE html>
<html>
<head>
; <body>
</html>
<html>
<head>
<title>Belajar Javascript</title>
</head>; <body>
<h1>Hello</h1>
<p>
<a href="javascript:alert('jaman sekarang')">jaman apa</a>
</body><p>
Belajar Javascript
</p><a href="javascript:alert('jaman sekarang')">jaman apa</a>
</html>
Hasilnya
Itulah empat cara dalam menuliskan kode javascript, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Menuliskan Javascript Ke HTML.
Jangan lupa baca postingan saya sebelumnya Fungsi !Important Pada CSS
Terima kasih kak, kebetulan saya lagi ingin mempelajari tentang html,JavaScript, tolong buat blog yang tentang PHP dong kak ingin belajar soalnya
BalasHapusOkhe
Hapus