JavaScript: Event Handler JavaScript DOM

Published in

Amikom Computer Club

7 min readApr 26, 2024

Hallo sobat Frontend👋🏻. Gimana nih kabarnya?? Gimana Liburan kleann? ? eh BTW kami dari Divisi Frontend ingin mengucapkan Minal Aidin Wal Faizin, Mohon Maaf Lahir dan Batin.

Masih pada semangat kan? Di pertemuan 7 ini, kita akan membahas materi Javascript part 2 ya guys🎉

Pada JavaScript part 2 ini, kita akan membahas mengenai apa itu JavaScript DOM, event handler, serta penerapan konsep dasar JavaScript untuk memanipulasi DOM.

Kalian udah tau belum JavaScript ini ajaib lhoo, dimana JavaScript ini bisa membuat halaman website kita menjadi lebih menarik dan dinamis lho. Penasaran kan kalian gimana caranya?? langsung aja simak penjelasan berikut ya ini gaiss🚀

Table Of Content

· Mengenal JavaScript DOM
· Event Handler
∘ 1. Menggunakan Atribut (Inline)
∘ 2. Menggunakan Event Listener (Script)
∘ Contoh Penerapan Event Handler
· Menerapkan konsep dasar JavaScript untuk memanipulasi DOM
∘ Menangkap Elemen Html pada DOM
∘ 1. Mengambil Elemen dengan Id
∘ 2. Mengambil Elemen dengan Class
∘ 3. Mengambil Elemen dengan Tag
∘ 4. Mengambil Elemen dengan Selector
∘ 5. Mengambil Elemen dengan Selector All
∘ Mengubah Elemen HTML
∘ 1. Mengubah Konten Html
∘ 2. Mengubah Style
∘ Memanipulasi Class dengan JavaScript
∘ Memanipulasi Style atau Tampilan Elemen
· Penutup

Mengenal JavaScript DOM

DOM (Document Object Model) JavaScript adalah interface yang memungkinkan developer memanipulasi halaman web mulai dari struktur, tampilan, dan kontennya. Dengan DOM, developer dapat membuat interface halaman website menjadi lebih dinamis dan interaktif.

Nah dalam browser yang kita pakai setiap hari ini, menciptakan sebuah dokumen yang dikenal sebagai DOM untuk setiap halaman web. Jadi, DOM inilah yang memungkinkan JavaScript untuk mengakses sekaligus memanipulasi semua elemen statis di halaman tersebut.

DOM sendiri bukanlah bahasa pemrograman dan juga bukan bagian dari JavaScript, akan tetapi DOM itu merupakan API Web yang digunakan untuk membangun suatu situs web. DOM itu dirancang untuk tidak tergantung pada bahasa pemrograman tertentu, sehingga representasi struktural dokumen tersedia dari satu API yang konsisten.

“API (Application Programming Interface) Web adalah suatu software penghubung antara server dengan aplikasi”

Contoh penerapan struktur DOM dari halaman website

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <nama meta="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>JavaScript</title> 
  </head>

  <body> 
  <h1>Structure JavaScript DOM</h1> 
  <h2>Ini adalah DOM</h2> 
  </badan> 
</html>

Hasi script setelah diolah menjadi DOM:

Dari hasil script diatas, Html merupakan elemen induk dan mempunyai dua elemen anak yaitu Head dan Body dan seterusnya hingga elemen terkecil pada html. Nah, setiap elemen ini akan dimanipulasi oleh developer dengan bantuan JavaScript.

Event Handler

JavaScript DOM juga bisa digunakan untuk menangani Event Handler. Event pada JavaScript adalah kejadian atau aksi yang terjadi pada halaman website seperti aksi user melakukan klik, aksi ketika halaman web dibuka, aksi pada form submit, dan lain sebagainya.

Ada beberapa cara untuk membuat event handler pada JavaScript yaitu:

1. Menggunakan Atribut (Inline)

<button onclick="Hello()">Click Here</button>

Onclick disini digunakan untuk membuat aksi klik pada sebuah elemen dan onclick sendiri bisa disebut dengan Atribut event. Sedangkan Hello() merupakan fungsi yang akan dijalankan saat atribut onclick di klik oleh user. Ada beberapa macam event pada JavaScript seperti onchange, onmouseover, onload, dan sebagainya.

2. Menggunakan Event Listener (Script)

Event Listener ini adalah metode yang terdapat pada objek DOM (Document Object Model ). Jadi, ketika kita ingin mengatur sebuah acara dalam JavaScript, kita harus memanggil addEventListener.

button.addEventListener("click", function(){ 
//kode 
alert("Hello World!"); 
});

Pada contoh kode diatas button disebut dengan object DOM, sedangkan click merupakan nama event handler yang akan dipanggil dan function adalah fungsi yang akan dijalankan ketika event handler dipanggil.

Contoh Penerapan Event Handler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Event Handler</title>
</head>
<body>
    <button onclick="hello()">Hello</button>
    <button id="hello-myfriend">Hello Friend</button>

    <script>
        function hello(){
        alert("Hello World!!");
        }        const btnLogin = document.getElementById("hello-myfriend");
        btnLogin.addEventListener("click", function(){
        alert("Hello My Friend!!");
        });
    </script>
</body>
</html>

Menerapkan konsep dasar JavaScript untuk memanipulasi DOM

Menangkap Elemen Html pada DOM

Dalam menangkap elemen html kita menggunakan function dari object document. Ada beberapa method yang digunakan untuk menyesuaikan kondisi yaitu sebagai berikut:

getElementById() : mengembalikan objek dengan elemen yang ditangkap Id
getElementsByClassName() : mengembalikan html collection dari elemen yang memiliki class name
getElementsByTagName() : mengembalikan html collection dari elemen dengan nama tag yang sesuai
querySelector() : mengembalikan elemen pertama dalam dokumen yang cocok dengan selector
querySelectorAll() : mengembalikan sekelompok node dalam dokumen sesuai dengan pemilih

1. Mengambil Elemen dengan Id

Mengambil elemen dengan Id yaitu dengan menggunakan getElemenById(). Contohnya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Elemen Id</title>
</head>
<body>
  <button onclick="tampilkan_nama()">Klik</button>
  <div id="hasil"></div>
  <script>
    function tampilkan_nama(){
      document.getElementById("hasil").innerHTML="Namaku Andi";
    }
  </script>
</body>
</html>

Hasil :

Output menangkap elemen html menggunakan Id

2. Mengambil Elemen dengan Class

Mengambil elemen dengan Class yaitu dengan menggunakan method getElementsByClassName(). Contohnya sebagai berikut:

<html lang="en">
    <body>
        <div id="parent-id">
        <p>Hello world 1</p>
        <p class="test">Hello world 2</p>
        </div>

        <script>
        const parentDOM = document.getElementById("parent-id");        const test = parentDOM.getElementsByClassName("test"); 
        console.log(test);        const testTarget = parentDOM.getElementsByClassName("test")[0];
        console.log(testTarget);
        </script>
    </body>
</html>

3. Mengambil Elemen dengan Tag

Mengambil elemen dengan Tag yaitu dengan menggunakan getElementsByTagName(). Contohnya sebagai berikut:

<!DOCTYPE html>
<html>
<body>

<h1>My Cafe</h1>
<h2>The getElementsByTagName()</h2><p>Menu Unordered list:</p>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul><p>The innerHTML of the second li element is:</p>
<p id="demo"></p><script>
const collection = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = collection[1].innerHTML;
</script></body>
</html>

4. Mengambil Elemen dengan Selector

Mengambil elemen dengan selector yaitu dengan menggunakan querySelector(). Contohnya sebagai berikut:

<!DOCTYPE html>
<html>
<body>
<h1>Hello Beautiful World</h1>
<h2>Ini menggunakan querySelector()</h2>

<h3>Menambahkan warna latar belakang ke elemen paragraf pertama:</h3>
<p>Dunia Indah</p>
<p>Dunia Indah</p><script>
document.querySelector("p").style.backgroundColor = "red";
</script></body>
</html>

5. Mengambil Elemen dengan Selector All

Mengambil elemen dengan selector all yaitu dengan menggunakan querySelectorAll(). Contohnya sebagai berikut:

<!DOCTYPE html>
<html>
<body>
<h1>Belajar JavaScript</h1>
<h2>Ini menggunakan querySelectorAll()</h2>

<p>Mengatur warna latar belakang elemen pertama (dalam "myDIV") dengan class="example":</p><div id="myDIV" style="border:1px solid black">
    <h2 class="example">Heading</h2>
    <p class="example">Paragraph</p> 
</div><script>
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "blue";
</script></body>
</html>

Mengubah Elemen HTML

1. Mengubah Konten Html

Mengubah konten html ini kalian bisa menggunakan innerHTML yang dikombinasikan dengan getElementById() misalnya:

document.getElementById(“#header”).innerHTML = “Hello Guys”;

2. Mengubah Style

Disini JavaScript DOM juga dapat digunakan untuk mengubah style pada elemen html. Contohnya seperti berikut ini:

document.getElementById(id).style.property = new style

Memanipulasi Class dengan JavaScript

Memanipulasi class dalam JavaScript yaitu sebuah proses untuk menambah, menghapus, atau mengganti class css pada elemen html. Memanipulasi class ini dapat menggunakan properti “classList”. Berikut ini caranya:

Menambahkan Class. Dengan cara ini kita dapat menembahkan kelas baru ke dalam elemen

element.classList.add("namaKelas");

Contoh Penerapan kode program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menambahkan Kelas</title>
    <style>
        .highlight {
        background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="myElement">Ini adalah sebuah elemen</div>
    <button onclick="addHighlight()">Tambah Kelas</button>    <script>
        function addHighlight() {
        var element = document.getElementById("myElement");
        element.classList.add("highlight");
        }
    </script>
</body>
</html>

2. Menghapus Class. Dengan cara ini kita dapat menghapus kelas tertentu dari elemen

element.classList.remove("namaKelas");

Contoh Penerapan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menghapus Kelas</title>
    <style>
        .highlight {
        background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="myElement" class="highlight">Ini adalah sebuah elemen</div>
    <button onclick="removeHighlight()">Hapus Kelas</button>    <script>
        function removeHighlight() {
        var element = document.getElementById("myElement");
        element.classList.remove("highlight");
        }
    </script>
</body>
</html>

3. Toggle Class. Dengan cara ini akan menambahkan kelas jika tidak ada atau menghapus kelas jika sudah ada

element.classList.toggle("namaKelas");

Contoh Penerapan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Kelas dengan JavaScript</title>
    <style>
        .highlight {
        background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="myElement">Ini adalah sebuah elemen</div>
    <button onclick="toggleHighlight()">Toggle Kelas</button>    <script>
        function toggleHighlight() {
        var element = document.getElementById("myElement");
        element.classList.toggle("highlight");
        }
    </script>
</body>
</html>

Memanipulasi Style atau Tampilan Elemen

Untuk memanipulasi style elemen kita dapat menggunakan interface CSSStyleDeclaration. Nah, CSSStyleDeclaration sendiri memiliki tiga cara penggunaan, yaitu:

Melalui interface CSSStyleSheet dari properti style yang berada pada objek CSSStyleRule
Melalui properti style dari objek HtmlElement. Objek ini mempresentasikan style yang digunakan secara inline
Melalui function getComputedStyle(). Method ini mengembalikan objek yang memiliki nilai-nilai properti Css dari suatu elemen tertentu setelah menerapkan Css yang ditulis.

Contoh penerapan CSSStyleDeclaration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh CSSStyleDeclaration</title>
  <style>
    /* Mendefinisikan class dengan beberapa gaya */
    .myClass {
      color: blue;
      font-size: 16px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="myElement" class="myClass">Hello, world!</div>  <script>
    // Akses gaya elemen dengan id "myElement"
    var elementStyle = document.getElementById("myElement").style;    // Mengubah beberapa propoerti CSS menggunkan CSSStyleDeclaration
    elementStyle.color = "red";
    elementStyle.fontWeight = "bold";
    elementStyle.padding = "10px";
  </script>
</body>
</html>

Penutup

Dari penjelasan dasar mengenai DOM hingga penggunaan Event Handler, kita telah menjelajah dunia JavaScript yang sangat menarik ini. Disini kita juga sudah belajar bagaimana JavScript mampu mengubah halaman website menjadi lebih hidup dan interaktif. Dengan mempelajari materi ini kita jadi lebih dekat untuk menjadi developer ahli pengembangan web antarmuka yang interaktif dan menarik. Selamat berkreasi dengan JavaScript guyss!!🚀

Sampai jumpa di artikel selanjutnyaa!!👋🏻

Learning By Doing, Learning By Teaching

JavaScript: Event Handler JavaScript DOM

Table Of Content

Mengenal JavaScript DOM

Event Handler

1. Menggunakan Atribut (Inline)

2. Menggunakan Event Listener (Script)

Contoh Penerapan Event Handler

Menerapkan konsep dasar JavaScript untuk memanipulasi DOM

Menangkap Elemen Html pada DOM

1. Mengambil Elemen dengan Id

2. Mengambil Elemen dengan Class

3. Mengambil Elemen dengan Tag

4. Mengambil Elemen dengan Selector

5. Mengambil Elemen dengan Selector All

Mengubah Elemen HTML

1. Mengubah Konten Html

2. Mengubah Style

Memanipulasi Class dengan JavaScript

Memanipulasi Style atau Tampilan Elemen

Penutup

Written by Fauzakhrn