• Contact Us
Kamis, Mei 25, 2023
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Perbedaan BOM Dan DOM Pada JavaScript

admin by admin
September 20, 2022
in Javascript, Tutorial
0 0
0
Home Tutorial Javascript

This post is also available in: English

Hallo apa kabar teman semuanya, semoga kalian semua sehat dan sukses selalu. Kali ini kita akan membahas perbedaan BOM dan DOM sering kali kita gunakan di JavaScript akan tetapi kita tidak tahu perbedaan di antara keduanya.

BOM dan DOM terlihat sama akan tetapi berbeda dari keduanya. Kita bahas perbedaannnya.

Browser environment, specs
https://id.javascript.info/browser-environment

Sebelumnya kamu baca tutorial lainnya di sini:

JavaScript Dasar Part 6 : If Else JavaScript

JavaScript Dasar Part 5 : Operator JavaScript

JavaScript Dasar Part 4 : Tipe Data JavaScript

Browser Object Model (BOM)

BOM merukapakan Browser Objeck Model yaitu objek jendela didukung oleh semua browser yang mewakili jendela browser yang terdiri dari objek navigator, history, screen, location dan document yang merupakan anak dari windows. BOM dapat berfungsi untuk mengecek sebuah event dari windows dengan window.addEventListener dan dapat melakukan manipulasi menggunakan window.innerHeight dan window.innerWidth.

BOM dapat memberikan pernitah khusus pada browser contohnya kita gunakan atribut khusus pada browser, Kamu dapat membuatnya menggunakan broswe. Contohnya seperti di bawah ini:

Tambahkan perintah window.alert(‘Hallo Teman Ngoding’);

Ada beberapa method yang dapat kita gunakan dari BOM di anataranya alert(), prompt(), dan objek console.

Method alert()

Method alert() merupakan salah satu method BOM yang guginakan untuk menampilkan peringatan atau informasi. Contohnya dapat kita gunakan seperti di bawah ini:

window.alert("Hello World!");

atau

alert("Hello World!");

Method prompt()

Method prompt() berfungsi untuk menampilkan dialog browser dan dapat di isi oleh pengguna. Dialog prompt() akan mengembalikan sebuah nilai string dari pengguna ketika melakukan input sting pada dialog prompt(). Contohnya seperti di bawah ini:

let message = prompt('Your Name:');

atau

var name = prompt("Your Name?", "");
document.write("<p>Hello "+ name +"</p>");

Kita dapat memberikan inputdan pada prompt windows selanjutnya string yang telah kita input akan di tampilkan pada browser.

Method console

Method console merupakan sebuah method yang sangat berguna bagi seorang pengembang frontend, karena method console dapat kamu gunakna untuk menghilangkan bug yang ada pada code yang telah di buat. Contoh kode console di bawah ini:

console.log('Pesan kamu');

Ada beberapa method console yang dapat kita gunakan.

MethodPenjelasan
log()Menampilkan pesan secara umum ke console browser.
info()Menampilkan pesan yang berisi informasi penting ke console browser.
warn()Menampilkan pesan yang berisi informasi dalam bentuk peringatan ke console browser.
error()Menampilkan pesan yang berisi informasi dalam bentuk error ke console browser.

Console.log()

Method ini digunakan untuk menampilkan pesan atau inforamsi ke tab console. Contohnya:

console.log("this is console.log")
console.log(4+9)

Console.warn()

Metode console.warn() memiliki fungsi yang sama dengan console.log() tapi pesan yang muncul adalah berupa warning atau peringatan. Contohnya :

console.warn("this is console.warm")
console.warn(4+9)

Console.error()

Method  console.error() juga memiliki fungsi yang sama dengan kedua metode di atas tapi pesan yang muncul adalah berupa error. Contohnya :

console.warn("this is console.error")
console.warn(4+9)

Console.info()

MEthod ini juga fungsinya sama dengan method sebelumnya, yaitu untuk menampilkan pesan. Conothnya:

console.info("this is console.info")
console.info(4+9)

Dan banyak lagi method yang dapat kita gunakan menggunakan javascript.

Kita lanjutkan pada pembahawan DOM.

Document Object Model (DOM)

DOM merupakan sekumpulan fungsi dan atribut/data yang kita manfaatkan untuk membuat program JavaScript yang dapat kita sebut dengan API (Application Programming Interface). DOM dapat digunakan di HTML, XM dan SVG. DOM tidak hanya digunakan untuk pemrograman JavaScript saja akan tetapi dapat digunakan untuk pemrograman yang lainnya juga.

Di dalam objek document, kita akan menapatkan fungsi-fungsi dan atibut yang dapat kita gunakan untuk memanipulasi dokumen HTML.

DOM memiliki struktur dalam bentuk phon dapat kita sebut degan DOMtree.

Coba kamu perhatikan trusktur DOMtree ini, kita akan mengetahui trusktur dari kode HTML yang akan kita manipulasi menggunakan DOM. Contohnya di bawah ini:

document.head;

document.body;

document.title.length;

Masukan kode tersebut pada browser kamu, maka hasilnya akan menjadi seperti ini:

Ketika kita mengakses elemen HTML melalui DOM, kita cukup menambahkan kode document.

Cukup dengan objek document, kita dapat mengakses keseluruhan konten pada HTML yang terdapat root element <html>. Sehingga, jika dicermati kembali di dalamnya terdapat elemen lainnya seperti <head> dan <body>.

Dan kita dapat mengakses elemen HTML lebih spesifik dengan menggunakan beberapa fungsi di bawah ini.

  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
  • querySelector() fungsi untuk memilih elemen berdasarkan query.
  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
  • dan lain-lain.

Pada method di atas ada yang mengembalikan nilai HTML elemen secara tunggal. Selain itu, ada juga yang mengembalikan banyak elemen dari sebuah berkas HTML yang biasa disebut sebagai HTMLCollection. Dikarenakan semua method di atas dimiliki oleh objek document, maka jangan lupa mengawali semua pemanggilan method-method di atas dengan sintaks document.<nama_method>.

Saya berikan contoh cara menggunakan DOM pada browser.

<!DOCTYPE html>
<html>
<head>
    <title>Element HTML</title>
</head>
<body>

    <div id="tutorial"></div>


    <script type="text/javascript">
        var tutorial = document.getElementById("tutorial");

        tutorial.innerText = "Tutorial Javascript";

        tutorial.style.backgroundColor = "gold";
        tutorial.style.padding = "10px";

    </script>

</body>
</html>

Baik BOM maupun DOM sangat berguna sekali bagi kamu yang membangun sebuah frontend menggunakan JavaScript.

Demikian tutorial kali ini yang dapat saya buat, semoga bermanfaat untuk kamu semua.

Terimakasih.

ShareTweetShare
admin

admin

Next Post
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Juni 2, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

Juli 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

Mei 30, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Juni 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Migration Laravel

Migration Laravel

1
HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023
Programmer Atau Hacker?

Programmer Atau Hacker?

April 6, 2023
PENGENALAN BACKEND DEVELOPER

Pemrograman Backend Developer

April 5, 2023
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html html basic html dasar infinite scroll javascript javascript tutorial laravel laravel 8 laravel 9 laravel9 load more ajax mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs

Recent News

HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia