Cara menggunakan TUTIORAL pada JavaScript

Question

Table of Contents Show

OnMouseOver & OnMouseOut
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?
Bagaimana Memulai JavaScript?
Apa itu DOM di JavaScript?
Bagaimana mendeklarasikan variabel pada JavaScript?

Hallo sobat, tulisan kali ini Saya ingin membahas tentang pengenalan dan bagaimana cara menggunakan EVENT pada JavaScript. EVENT pada JavaScript adalah sebuah kejadian yang terjadi pada suatu elemen. Misalnya, Anda mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Anda harus memasukan atribut EVENT onclick pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Anda inginkan. Itulah penjelasan singkat dan contoh pengandaian dari EVENT JavaScript, mudah-mudahan sobat semua paham ya.

JavaScript telah menyediakan banyak keyword EVENT canggih. Namun pada tulisan ini Saya akan mengenalkan event-event JavaScript yang paling sering digunakan saja, di antaranya yaitu:

OnClick
OnChange
OnMouseOver & OnMouseOut
OnKeyDown
OnLoad

Yuk, mari kita bahas satu persatu EVENT JavaScript di atas langsung dengan contohnya.

OnClick

OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to a p element.</p>
<p id="demo" OnClick="myFunction()">Click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

OnChange

OnChange adalah suatu kejadian yang terjadi ketika sebuah elemen html berubah.

<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" OnChange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

Baca Juga: Membuat RESTful API Sederhana dengan PHP

OnMouseOver & OnMouseOut

OnMouseOver adalah suatu kejadian yang terjadi ketika sebuah elemen html di letakkan cursor mouse. OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h2 element.</p>
<h2 id="demo" OnMouseOver ="mouseOver()" OnMouseOut="mouseOut()">Mouse over me</h2>
<script>
function mouseOver() {
  document.getElementById("demo").style.color = "red";
}
function mouseOut() {
  document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>

OnKeyDown

OnKeyDown adalah suatu kejadian yang terjadi ketika ada pengetikan pada elemen html.

<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" id="input" onkeydown="myFunction()">
<div id="text"></div>
<script>
function myFunction() {
   var inputText = document.getElementById("input").value;
   document.getElementById("text").innerHTML = inputText;
}
</script>
</body>
</html>

OnLoad

OnLoad adalah suatu kejadian yang terjadi ketika elemen dan halaman di buka.

<!DOCTYPE html>
<html>
<body OnLoad="myFunction()">
<h2>Hello World!</h2>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>
</html>

Demikian pembahasan tentang Mengenal dan Cara Menggunakan EVENT pada JavaScript, jika ingin mengetahui keyword EVENT lainnya Anda bisa kunjungi link berikut ini LINK. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>

Bagaimana Memulai JavaScript?

Tips Belajar JavaScript untuk Pemula.

Unduh editor kode atau pakai editor online. ... .

3. Ikuti pelatihan online. ... .

4. Jangan takut untuk bereksperimen. ... .

Cari mentor. ... .

6. Catat selalu hal-hal yang dipelajari. ... .

7. Pahami setiap baris dari kode yang Anda buat. ... .

Selalu manfaatkan panduan referensi. ... .

9. Cari teman untuk belajar bersama..

Apa itu DOM di JavaScript?

Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner.

Bagaimana mendeklarasikan variabel pada JavaScript?

Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya. Contoh: var title = "Belajar Pemrograman Javascript"; Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa teks (string): "Belajar Pemrograman Javascript" .