• Contact Us
Wednesday, December 21, 2022
-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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 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
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
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 infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json 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 uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 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