Search by

Terakhir diperbaharui: Sep 5, 2020

JavaScript pada Browser

Daftar Isi

BOM DOM Menambahkan JS ke HTML Event Developer Tools

BOM dan DOM adalah konsep yang penting untuk diketahui dalam pemrograman JavaScript.

JavaScript menggunakan BOM untuk mengakses isi dari browser dan menggunakan DOM untuk mengakses HTML.

BOM

BOM atau Browser Object Model adalah hirarki atau urutan tingkatan dari semua object yang ada di dalam browser.

5 object di dalam BOM:

Document
Location
Navigator
Screen
History

Semua object di atas juga merupakan bagian dari global variable bernama window object.

Jadi window object adalah object yang berada di urutan teratas dari BOM.

Kita dapat melihat semua fungsi yang ada di dalam browser pada window object.

Jika kita buka Browser Chrome -> DevTools, kemudian pada tab console kita ketik window maka kita akan melihat daftar object dan fungsi yang ada di browser tersebut.

window object

di dalam window object terdapat document object yang berisi DOM.

Selain document object, di dalam window object juga terdapat console object yang berfungsi untuk menampilkan informasi pada console di browser.

console log

Sehingga kita tahu bahwa console.log bukan bagian dari JavaScript.

DOM

DOM = Document Object Model

DOM adalah gambaran struktur dari suatu dokumen dalam bentuk nodes & object.

Halaman web adalah suatu dokumen. Sehingga DOM pada web adalah gambaran struktur dari web tersebut.

Jika halaman web tersebut dibuat menggunakan HTML maka disebut HTML DOM.

Dengan HTML DOM, Javascript dapat memodifikasi element HTML.

dom

BOM vs DOM

Dapat disimpulkan:

DOM berkaitan dengan halaman web (HTML atau XML), dan BOM berkaitan dengan browser
DOM ada di dalam window object, dimana window object adalah bagian dari BOM

Menambahkan JS ke HTML

Ada 2 cara menambahkan JavaScript ke HTML.

1. Embed / Internal

Ditambahkan di antara <script> tag pada satu file yang sama.

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Devsaurus</title>
5  </head>
6
7  <body>
8    <p id="el"></p>
9
10    <script>
11      document.getElementById('el').innerHTML = 'Hello Brachio';
12    </script>
13  </body>
14</html>

2. External

Ditambahkan di antara <script> tag pada file yang berbeda.

filename: script.js

1document.getElementById('el').innerHTML = 'Hello Brachio';

filename: index.html

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Devsaurus</title>
5  </head>
6
7  <body>
8    <p id="el"></p>
9
10    <script src="script.js"></script>
11  </body>
12</html>

<script> tag bisa ditaruh di dalam <head> atau <body>

Event

JavaSript pada browser menggunakan event programming model, semua operasi dijalankan berdasarkan kejadian atau event tertentu.

Contoh event:

onclick (user click sebuah element HTML)
onchange (element HTML mengalami perubahan)
onload (browser telah selesai load halaman web)

Perlu diperhatikan bahwa event-event di atas bukan bagian dari JavaScript namun merupakan bagian dari HTML DOM API.

Contoh code untuk click event:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Devsaurus</title>
5  </head>
6  <body>
7    <button onclick="sayHi()">Say Hi</button>
8
9    <p id="el"></p>
10
11    <script>
12      function sayHi() {
13        document.getElementById('el').innerHTML = 'Hello Brachio';
14      }
15    </script>
16  </body>
17</html>

Pada code di atas, browser akan menampilkan tulisan Hello Brachio ketika button Say Hi di klik.

Untuk demo dari code di atas silahkan klik button RUN.

Developer Tools

Developer Tool (DevTools) yang ada di setiap browser merupakan tool selain code editor / IDE yang wajib kita gunakan dalam menulis code JavaScript dan mengembangkan Web App.

Karena tool ini memiliki banyak fungsi, diantaranya:

DOM inspector
CSS editor
JavaScript Debugger
JavaScript Console
Network Activity Monitor
dll

Cara menggunakan DevTools pada Chrome

Klik kanan window browser -> Pilih Inspect.

Open devtools

JavaScript EngineType Conversions