Metode Penulisan Javascript Pada Html
Metode Penulisan Javascript pada HTML - Metode atau cara penulisan Javascript di HTML ada beberapa macam. Untuk tujuan Web Development front-end, Javascript wajib dipakai dan ditambahkan pada aba-aba HTML. Berikut ini ialah metode penulisan Javascript di HTML.
Agar Javascript tersebut dapat terhubung dengan HTML, kita perlu memanggilnya dengan cara memakai tag <script> lagi.
Bedanya dengan metode nomor 1, disini kita tidak perlu menulis semua aba-aba Javascript. Cukup menambahkan atribut src sebagai tag pemanggil. Seperti berikut ini.
Untuk penempatannya, dapat didalam <head> atau <body>. Seperti berikut ini,
Tidak hanya onclick, masih ada berbagai 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!" sesudah elemen tersebut di klik.
Nah, cukup hingga disini pembelajaran kita ihwal 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 pertanda sekilas saja ihwal 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 dipakai untuk menyematkan Javascript pada HTML ialah dengan menempatkan aba-aba didalam tag html <script>.
Tag <script> dapat ditempatkan didalam tag <head> maupun <body>.
Tag <script> dapat 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 ialah aba-aba Javascript"); </script> </head> <body> <script> document.write("Halo, Aku ialah aba-aba Javacript"); </script> </body> </html>2. Eksternal Javascript
Metode ini dipakai jikalau kau tidak ingin mencampur aba-aba Javascript dengan aba-aba HTML. Selain itu, metode ini memungkinkan kau untuk melaksanakan editing lebih gampang dan aba-aba HTML dengan aba-aba Javascript tidak saling menumpuk sehingga menghasilkan berbagai kode.
Silahkan buat file gres memakai teks editor milikmu (Saran: gunakan Visual Studio Code). Isi dengan aba-aba berikut ini kemudian beri nama contoh-kode.js.
Ingat! ekstensi file harus .js jangan yang lain.
// contoh-kode.js alert("Aku ialah aba-aba Javascript Eksternal");Agar Javascript tersebut dapat terhubung dengan HTML, kita perlu memanggilnya dengan cara memakai tag <script> lagi.
Bedanya dengan metode nomor 1, disini kita tidak perlu menulis semua aba-aba Javascript. Cukup menambahkan atribut src sebagai tag pemanggil. Seperti berikut ini.
<script src="contoh-kode.js"></script>Untuk penempatannya, dapat 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 dipakai ketika ingin memanggil suatu fungsi Javscript pada Event atau bencana tertentu. Misalnya, kita ingin memanggul fungsi Javascript ketika suatu elemen HTML diklik.
<button onclick="alert('Makasih Bangkhg, I Love U!')">Klik Adek dong Bang!</button>Tidak hanya onclick, masih ada berbagai 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 jikalau diklik.
Dan, berikut ini ialah penggunaan tag <a> yang diselipkan aba-aba 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!" sesudah elemen tersebut di klik.
Nah, cukup hingga disini pembelajaran kita ihwal macam-macam cara atau metode penulisan Javascaript pada HTML. Silahkan lanjut ke artikel pembelajaran Javascript berikutnya ya?
