Artikel kali ini masih bersangkut paut dengan artikel sebelumnya, yang masih belajar menggunakan metode JavaScript, bagaimana artikel sebelumnya kita menggunakan metode inline dan disini kita akan belajar cara menggunakan metode internal javaScript, hampir sama kita masih menggunakan kode JavaScript di sebuah halaman HTML yang sama dengan struktur yang kita ingin beri efek dengan JavaScript, oke jangan kemana-mana simak terus ya teman-teman.
Jika menggunakan metode Internal JavaScript atau belajar cara menggunakan metode internal javaScript, kita bisa memindahkan kode JavaScript ke dalam tag <script>. Lokasi tag <script> bisa diletakkan dimana saja, apakah di bagian <head>, di awal <body>, atau dikhir halaman. Berikut modifikasi kode program kita sebelumnya. Kali ini menggunakan metode Internal JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>belajar cara menggunakan metode internal javaScript</title>
<script>
function pesan(){
alert('Saya Sedang Belajar JavaScript');}
window.onload = function(){
var a = document.getElementById("tombol");
a.addEventListener("click", pesan);
}
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<button id="tombol"> Click me!</button>
</body>
</html>
Pada contoh diatas, kode JavaScript berada di bagian <head> dari halaman. Hal ini membuat halaman menjadi rapi karena seluruh kode JavaScript berada di bagian head. Jika anda menjalankan halaman diatas, hasilnya masih sama dengan contoh sebelumnya. Tapi kali ini saya menggunakan beberapa kode tambahan. Karena kita tidak menulis atribut “onclick” secara langsung ke dalam tag <button>, maka kita perlu mencari cara untuk ‘mengaitkan’ event click kepada tombol ‘Click me!’ tersebut. Untuk mencari sebuah objek HTML dengan JavaScript, bisa menggunakan perintah document.getElementById(). Ini adalah sebuah function (lebih tepatnya: method) yang berfungsi untuk mencari objek HTML yang memiliki atribut id.
Dari kode HTML dapat dilihat bahwa tombol ‘Click me!’ memiliki atribut id=”tombol”, maka saya bisa menggunakan perintah document.getElementById(“tombol”) untuk mendapatkan objek tersebut. Agar mudah diakses, saya menyimpan objek tombol ini kedalam variabel a, sehingga penulisan kodenya menjadi:
var a = document.getElementById("tombol");
Selanjutnya, agar tombol ‘Click me!’ dapat berfungsi ketika di-click, kita menambahkan event “click” menggunakan perintah:
a.addEventListener("click", pesan);
addEventListener adalah method JavaScript yang digunakan untuk menambahkan sebuah event, dimana dalam contoh diatas adalah event click. Namun apa yang terjadi ketika tombol di klik? Inilah yang dijelaskan menggunakan fungsi pesan, dimana fungsi ini hanya untuk menampilkan kotak alert(‘Saya Sedang Belajar JavaScript’).
Kode-kode diatas mungkin terkesan rumit, terutama apabila anda belum pernah mencoba bahasa pemrograman komputer. Di dalam JavaScript, kita akan banyak berurusan dengan variabel, function, method, object yang memang lebih kompleks jika dibandingkan dengan HTML maupun CSS. Bagaimana teman-teman, jangan pusing dulu ya teman-teman karena kita nanti masih akan membahas bagaimana menggunakan kode JavaScript pada ekternal, oke cukup sudah kita belajar cara menggunakan metode internal javaScript, semoga bermanfaat dan sampai jumpa di artikel selanjutnya terimakasih.
The post Belajar Cara Menggunakan Metode Internal JavaScript appeared first on Kursus Website Terbaik.