Assalamu’alaikum…

         Hai sobat kali ini saya akan memberitahu tentang macam macam Javascript HTML DOM, ternyata ada banyak macamnya mari kita pahami dan praktikkan coding di bawah ini .

Pengertian
        JavaScript HTML DOM Animation kita membuat animasi dalam sebuah halaman web. Seperti yang kita ketahui animasi adalah hasil pengolahan gambar sehingga menjadi gambar yang bergerak.

        JavaScript HTML DOM Event adalah JavaScrip yang dapat dijalankan saat sebuah peristiwa terjadi, seperti pengguna mengeklik elemen HTML. Untuk menjalankan kode saat pengguna mengeklik elemen, tambahkan kode javascript ke atribut sebuah HTML.
Contoh HTML Event:
  • Saat pengguna mengeklik mouse
  • Saat halaman web dimuat
  • Saat gambar telah dimuat
  • Saat mouse bergerak di atas sebuah elemen
  • Bila field masukan diubah
  • Saat formulir HTML dikirimkan
  • Saat pengguna memasukkan kunci


Latar Belakang

        JavaScript HTML DON Animation dan JavaScript HTML DOM Event sendiri memiliki kode atau cara yang bermacam macam, tampilannya juga banyak. Berikut ini contoh dari masing masing javascript HTML DOM :

JavaScript HTML DOM Animation

  • Membuat Halaman web sederhana

    Coding :

<html>
<body>

<h1>Animasi JavaScript pertama saya</h1>

<div id="animate">Aniamasi saya akan masuk di Halaman ini</div>

</body>
</html>



Hasil :









  • Membuat Kontainer Animasi Gaya Elemen
Elemen kontainer harus dibuat dengan style = “position : relative “.
Element Animasi harus dibuat dengan = “position : absolute “.

Coding :

<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: aqua;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>

<h1>Animasi JavaScript Pertamaku </h1>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>





Hasil :














Tampilan di atas hanya menampilkan halaman saja belum ada animasinya.hanya pewarnaan dan gaya elemen.


  • Kode Animasi
    dilakukan dengan memprogram perubahan terhadap dalam gaya elemen perubahan dipanggil oleh timer, bila interval timer kecil, maka animasi akan terus-menerus. kode dasarnya adalah sebagai berikut :
var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}


Contoh :

<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: aqua;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id="container">
<div id="animate"></div>
</div>

<script>
function myMove() {
var elem= document.getElementById("animate");
var pos= 5;
var id= setInterval(frame, 5);
function frame() {
if (pos == 350){
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>





Hasil :















Tampilan di atas juka di klik maka warna kotak merah akan bergerak ke pojok kiri atas.





JavaScript HTML DOM Element

  • Bereaksi ke Event
    Dalam contoh ini, isi elemen <h1> akan berubah saat pengguna mengekliknya.

Coding :

<html>
<body>

<h1 onclick="changeText(this)">Klik pada teks!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>



Hasil :




 


Jika teks di atas di klik maka akan berubah menjadi :








  • HTML Event Attributes
    Dalam contoh ini menampilkan Date (waktu dan tanggal) pada saat tombol atau button di klik.

Coding :















Hasil :









  • The Ochange Event
    Acara onchange sering digunakan bersamaan dengan validasi field input.Berikut adalah contoh bagaimana cara menggunakan onchange. Fungsi upperCase () akan dipanggil saat pengguna mengubah isi field masukan. Yang akan menampilkan sebuah tampilan jika diisi huruf maka akan diubah menjadi huruf kapital.


Coding :









Hasil :













  • The onmouseover and onmouseout Events
    Jika cursor diarahkan ke gambar warna tersebut maka akan berubah warna dan tulisan sesuai warna dan tulusan yang kita isikan pada coding.


Coding :













Hasil :




 Jika cursor diarahkan pada gambar akan berubah menjadi :







  • The onmousedown, onmouseup and onclick Events
    Ini adalah bagian dari klik mouse. Pertama pada saat tombol mouse di klik,event onmousedown dipicu, saat tombol mouse dilepaskan akan berubah.

Coding :







Hasil :











Maksud dan Tujuan
Lebih memahami JavaScript HTML DOM Animation dan Javascript HTML DOM Event.

Alat dan Bahan
  • Laptop
  • File Items
  • Text Editor

Hasil yang diharapkan
agar bisa memahami penjelasan di atas dan mempraktikkan contoh.

Referensi