Masukkan Password
49 DOM bukan JavaScript
Lecture ini sangat penting sebagai penutup bagian DOM, karena instructor ingin meluruskan satu hal yang sering membuat pemula salah paham:
DOM bukan JavaScript.
Lebih tepatnya, DOM API seperti document, getElementById(), querySelector(), createElement(), console.log(), dan banyak API lainnya bukan bagian dari bahasa JavaScript itu sendiri. API tersebut disediakan oleh environment tempat JavaScript dijalankan, terutama browser.
Mari kita bedah pelan-pelan.
1. Gambaran Besar Lecture Ini
Selama beberapa lecture sebelumnya, kamu sudah menggunakan kode seperti:
document.getElementById("fName");
document.querySelector(".login-button");
document.createElement("div");
element.remove();
console.log("Hello");
Mungkin selama ini muncul pemikiran:
“Oh, berarti
getElementById()adalah fitur JavaScript.”
Nah, tidak persis begitu.
JavaScript memang bahasa pemrogramannya, tetapi browser menyediakan berbagai kemampuan tambahan agar JavaScript bisa berinteraksi dengan dunia browser.
Gambaran sederhananya:
BROWSER
│
┌────────────┴────────────┐
│ │
JavaScript Engine Web APIs
│ │
menjalankan JS menyediakan kemampuan
tambahan
│
┌───────────────┼───────────────┐
↓ ↓ ↓
DOM Console Fetch
Jadi JavaScript dan browser bekerja sama.
2. JavaScript Itu Apa?
JavaScript adalah:
Programming language
Seperti:
- Python
- Java
- C++
- JavaScript
JavaScript mempunyai aturan dan fitur bahasanya sendiri.
Contohnya:
let name = "Budi";
let age = 25;
if (age >= 18) {
console.log("Adult");
}
function add(a, b) {
return a + b;
}
Konsep seperti:
let
const
if
else
function
return
+
-
*
/
===
&&
||
adalah bagian dari bahasa JavaScript/ECMAScript.
3. Lalu document Itu Apa?
Sekarang perhatikan:
document
Kamu sudah sering menggunakan:
document.getElementById(...)
document.querySelector(...)
document.createElement(...)
Tetapi:
documentbukan fitur yang didefinisikan oleh core JavaScript/ECMAScript.
document adalah object yang disediakan oleh browser environment untuk merepresentasikan dokumen HTML yang sedang dibuka.
Karena itu ketika JavaScript berjalan di browser, kita bisa melakukan:
document.querySelector("button");
Browser menyediakan object document.
4. Analogi Sederhana
Bayangkan:
JavaScript = bahasa yang kamu gunakan
Misalnya kamu bisa mengatakan:
“Tolong hitung 10 + 20.”
JavaScript bisa melakukan:
10 + 20
Tetapi kemudian kamu mengatakan:
“Tolong cari tombol Login di halaman website.”
Nah, ini bukan pekerjaan inti sebuah bahasa pemrograman.
Ini membutuhkan kemampuan dari browser.
Browser berkata:
“Oke, saya punya API untuk mengakses halaman HTML.”
Lalu browser menyediakan:
document.querySelector(".login");
Jadi:
JavaScript
│
│ menggunakan
↓
Browser Web APIs
│
├── DOM API
├── Console API
├── Fetch API
├── Storage API
└── dll.
5. DOM Itu Apa?
Kamu sudah mempelajari DOM sebelumnya.
DOM = Document Object Model
Browser mengambil HTML:
<body>
<h1>Hello</h1>
<button>Login</button>
</body>
Kemudian browser membuat representasi object/tree dari HTML tersebut:
Document
│
└── body
├── h1
│ └── "Hello"
│
└── button
└── "Login"
JavaScript kemudian bisa berinteraksi dengan representasi tersebut:
document.querySelector("button");
Jadi JavaScript bisa mengatakan kepada browser:
“Berikan saya element button.”
Browser memberikan object DOM tersebut.
6. Jadi Apa Hubungan JavaScript, Browser, dan DOM?
Ini bagian paling penting.
BROWSER
│
┌───────────┴───────────┐
│ │
JavaScript Engine Web APIs
│ │
│ ┌─────┴─────┐
│ │ │
│ DOM Console
│ │
│ Fetch
│
↓
menjalankan kode JS
JavaScript engine bertugas menjalankan JavaScript.
Browser menyediakan berbagai API agar JavaScript bisa melakukan hal-hal yang berhubungan dengan browser.
7. Contoh yang Sudah Kamu Pelajari
Misalnya:
const button = document.querySelector("#login");
Mari kita pecah:
document
↓
browser menyediakan object ini
↓
.querySelector()
↓
browser menyediakan method ini
↓
"#login"
↓
CSS selector
Jadi JavaScript memanfaatkan API browser.
8. getElementById() Bukan Core JavaScript
Misalnya:
document.getElementById("fName");
Yang termasuk JavaScript adalah syntax dan konsep seperti:
const element = ...
Sedangkan:
document.getElementById()
berasal dari API yang disediakan environment browser.
Hal yang sama berlaku untuk:
document.querySelector();
document.createElement();
document.getElementsByName();
dan berbagai DOM API lainnya.
9. Bagaimana Kalau JavaScript Dijalankan di Node.js?
Nah, ini contoh yang sangat bagus untuk memahami konsep tersebut.
Kamu sudah tahu bahwa JavaScript tidak hanya bisa berjalan di browser.
JavaScript juga bisa dijalankan menggunakan:
Node.js
Node.js adalah runtime environment untuk menjalankan JavaScript di luar browser.
Misalnya:
console.log("Hello World");
Node.js bisa menjalankan ini.
Tetapi:
document.querySelector("button");
akan bermasalah dalam Node.js standar karena Node.js tidak menyediakan DOM browser seperti document pada browser.
10. Kenapa Node.js Tidak Punya document?
Karena Node.js bukan browser.
Bayangkan browser punya:
Browser
├── HTML page
├── DOM
├── window
├── document
├── localStorage
├── browser events
└── Web APIs
Sedangkan Node.js digunakan untuk menjalankan JavaScript di lingkungan server/komputer:
Node.js
├── JavaScript runtime
├── filesystem APIs
├── networking
├── server capabilities
└── dll.
Tidak ada halaman HTML browser yang sedang dikelola secara default.
Jadi:
document.querySelector(...)
tidak tersedia secara default.
11. Ini Analogi yang Sangat Mudah
Bayangkan JavaScript adalah orang yang bisa melakukan banyak hal.
Browser adalah rumah tempat orang tersebut berada.
Rumah menyediakan fasilitas:
Browser
├── pintu
├── lampu
├── telepon
├── TV
└── dokumen HTML
JavaScript bisa menggunakan fasilitas tersebut.
Kalau orang yang sama pindah ke rumah lain:
Node.js
fasilitasnya berbeda.
Mungkin ada:
Node.js
├── file system
├── network
├── server
└── process
Tetapi tidak ada:
document
karena tidak ada halaman HTML browser secara default.
Jadi:
JavaScript-nya sama, tetapi environment-nya berbeda.
12. JavaScript ≠ Browser
Ini mental model yang sangat penting.
Jangan berpikir:
JavaScript = Browser
Yang benar:
JavaScript
+
Runtime Environment
↓
Program berjalan
Contohnya:
JavaScript
+
Browser
↓
Web application
atau:
JavaScript
+
Node.js
↓
Server / CLI / backend application
Jadi JavaScript adalah bahasanya.
Browser atau Node.js adalah environment/runtime yang menjalankan JavaScript dan menyediakan kemampuan tertentu.
13. ECMAScript Berperan di Mana?
Kamu sebelumnya sudah belajar tentang ECMAScript.
Hubungannya kira-kira:
ECMAScript
↓
spesifikasi bahasa JavaScript
↓
JavaScript language
Kemudian browser menyediakan Web APIs di luar core language tersebut.
Gambaran:
┌───────────────────────────────┐
│ JavaScript Language │
│ │
│ let, const, if, function │
│ arrays, objects, operators │
│ promises, classes, dll. │
└───────────────────────────────┘
+
┌───────────────────────────────┐
│ Browser Web APIs │
│ │
│ document / DOM │
│ console │
│ fetch │
│ localStorage │
│ timers │
│ events │
│ dll. │
└───────────────────────────────┘
↓
Browser
Ini adalah cara berpikir yang bagus.
14. console.log() Juga Bukan Core JavaScript
Ini juga menarik.
Kamu hampir pasti sering menggunakan:
console.log("Hello");
Instructor menjelaskan bahwa console.log() juga disediakan oleh environment, bukan fitur core ECMAScript dalam arti yang sama seperti if, let, atau function.
Browser menyediakan object:
console
dan method:
console.log()
Karena itu JavaScript dapat menggunakannya.
15. Tapi console.log() Bisa Dipakai di Node.js, Kan?
Betul.
Ini bagian yang kadang membuat pemula bingung.
Kita tadi bilang:
console.log()disediakan environment.
Node.js juga menyediakan console API.
Jadi:
console.log("Hello");
bisa berjalan di:
Browser
dan:
Node.js
Karena keduanya menyediakan API console.
Jadi jangan berpikir:
“Kalau bukan core JavaScript, berarti hanya browser yang punya.”
Tidak.
Environment yang berbeda bisa menyediakan API yang mirip atau berbeda.
16. Contoh Perbedaan Browser dan Node.js
Misalnya:
Browser
document.querySelector("#login");
Bisa karena browser menyediakan DOM.
Node.js
document.querySelector("#login");
Tidak tersedia secara default.
Sebaliknya Node.js punya API untuk filesystem, misalnya:
fs.readFile(...)
Browser tidak memberikan akses filesystem server seperti Node.js.
Jadi:
Browser APIs ≠ Node.js APIs
walaupun keduanya bisa menjalankan JavaScript.
17. Browser Bukan Cuma Untuk Menampilkan HTML
Ini juga poin penting dari lecture.
Kita sering berpikir browser hanya:
“Menampilkan website.”
Sebenarnya browser melakukan jauh lebih banyak.
Browser:
Browser
│
├── Render HTML/CSS
│
├── Menjalankan JavaScript
│
├── Menyediakan DOM API
│
├── Menyediakan Console API
│
├── Menyediakan Web Storage
│
├── Menyediakan Fetch API
│
├── Menangani event
│
├── Menyediakan timer
│
└── dll.
Jadi browser adalah runtime environment yang sangat kaya.
18. Browser Sebagai Runtime Environment
Istilah penting dari lecture:
Runtime environment
Artinya lingkungan tempat program dijalankan.
Untuk JavaScript:
JavaScript code
↓
Runtime environment
↓
JavaScript dijalankan
Contoh:
Browser
↓
JavaScript Engine + Web APIs
atau:
Node.js
↓
JavaScript Engine + Node APIs
19. JavaScript Engine
Lecture juga menyebut:
JavaScript engine
JavaScript engine adalah komponen yang bertugas memahami dan menjalankan JavaScript.
Contohnya, browser Chrome menggunakan engine bernama V8.
Browser lain memiliki engine masing-masing.
Secara sederhana:
JavaScript code
↓
JavaScript Engine
↓
kode dijalankan
Misalnya:
let a = 10;
let b = 20;
console.log(a + b);
Engine menjalankan logika JavaScript tersebut.
20. Lalu Web API Apa?
Sekarang kita sampai pada bagian yang menjadi fokus lecture.
Web API adalah kumpulan interface/kemampuan yang disediakan oleh browser agar JavaScript bisa berinteraksi dengan lingkungan web.
Contohnya:
Web APIs
│
├── DOM API
├── Console API
├── Fetch API
├── Storage API
├── Timer APIs
├── Event-related APIs
└── dll.
Jadi ketika kamu menulis:
document.querySelector(...)
kamu sedang menggunakan kemampuan yang disediakan browser.
21. DOM API
Ini yang baru saja kamu pelajari dalam banyak lecture.
Contoh:
document.getElementById("intro");
document.querySelector(".button");
document.createElement("div");
element.remove();
element.classList.add("active");
Semua ini berkaitan dengan DOM/browser APIs.
22. Console API
Contoh:
console.log("Hello");
console.error("Something went wrong");
console.warn("Warning");
Browser menyediakan console agar developer dapat melakukan debugging/logging.
23. Fetch API
Lecture juga menyebut:
fetch()
Ini digunakan untuk melakukan HTTP request.
Misalnya nanti kamu akan belajar:
fetch("/api/users")
Secara konsep:
JavaScript
↓
fetch()
↓
Browser Web API
↓
HTTP request
↓
Server
Jadi fetch() juga merupakan kemampuan web platform yang digunakan dari JavaScript.
24. Web API dan Event yang Kamu Pelajari
Ini juga menghubungkan lecture ini dengan lecture sebelumnya.
Kamu baru saja belajar:
document.addEventListener("keydown", ...)
dan:
button.addEventListener("click", ...)
Event system di browser juga merupakan bagian dari kemampuan platform web.
Jadi ketika kamu menulis:
document.addEventListener(...)
JavaScript menggunakan API yang diberikan oleh environment browser.
25. Lalu Apa Hubungannya dengan Event Loop?
Instructor mengatakan bahwa di lecture mendatang mereka akan membahas:
JavaScript Engine
Web APIs
Callback Queue
Microtask Queue
Event Loop
Ini adalah topik besar dan sangat penting.
Gambaran kasarnya:
BROWSER
│
┌───────────┴───────────┐
│ │
JavaScript Engine Web APIs
│ │
│ timer / events /
│ fetch / dll.
│
↓
Call Stack
│
↓
Event Loop
│
↓
Queue
Nanti kamu akan memahami bagaimana JavaScript yang pada dasarnya menjalankan kode secara single-threaded bisa berinteraksi dengan operasi asynchronous seperti:
setTimeout(...)
fetch(...)
Untuk sekarang, belum perlu menghafal mekanismenya.
Lecture ini hanya memberikan gambaran bahwa browser mempunyai beberapa komponen yang bekerja bersama.
26. Hal yang Sering Disalahpahami
❌ Salah pemahaman
“JavaScript punya
document.”
Lebih tepat:
JavaScript yang berjalan di browser dapat menggunakan
documentkarena browser menyediakan DOM API.
❌ Salah pemahaman
“
querySelector()adalah syntax JavaScript.”
Bukan syntax bahasa seperti if atau function.
Lebih tepat:
querySelector()
↓
DOM API
↓
browser
❌ Salah pemahaman
“Kalau JavaScript bisa dijalankan di Node.js, berarti
documentpasti ada.”
Tidak.
Karena:
JavaScript ≠ Browser
Node.js memiliki environment/API sendiri.
27. Bandingkan Core JavaScript dengan Browser API
Ini tabel yang sangat bagus untuk kamu simpan.
| Core JavaScript / ECMAScript | Browser/Web API |
|---|---|
let | document |
const | querySelector() |
if | getElementById() |
for | createElement() |
function | classList |
return | addEventListener() |
| Array | fetch() |
| Object | localStorage |
| String | console |
| Number | DOM events |
=== | Browser timers |
Catatan: pembagian API bisa lebih bernuansa secara spesifikasi, tetapi tabel ini cocok untuk mental model beginner.
28. Contoh Nyata dari Code Kamu
Misalnya:
const input = document.getElementById("fName");
const name = input.value;
console.log(name);
Apa yang terjadi?
const
const
→ fitur bahasa JavaScript.
document
document
→ object yang disediakan browser.
getElementById()
document.getElementById()
→ DOM API.
.value
input.value
→ property dari DOM element.
console
console
→ API yang tersedia dari environment.
console.log()
console.log()
→ method console API.
Jadi satu baris kode bisa melibatkan JavaScript language + browser APIs sekaligus.
29. Visualisasi Paling Penting
Misalnya kamu menulis:
document.querySelector("#login");
Secara mental:
KODE KAMU
│
↓
document.querySelector()
│
↓
Browser Web API
│
↓
DOM
│
↓
cari #login
│
↓
DOM Element
JavaScript menjadi “pengguna” API browser.
30. Analogi Restoran 🍽️
Ini analogi yang mungkin membantu.
Bayangkan:
JavaScript = pelanggan
Browser = restoran
Web API = menu layanan restoran
Kamu sebagai pelanggan bisa meminta:
“Saya mau mengambil element button.”
Browser menyediakan layanan:
DOM API
Kamu memanggil:
document.querySelector("button");
Atau kamu mengatakan:
“Saya mau melakukan HTTP request.”
Browser menyediakan:
Fetch API
dan kamu menggunakan:
fetch(...)
Jadi JavaScript tidak harus membangun semuanya sendiri.
Ia menggunakan fasilitas yang diberikan environment.
31. Kenapa Konsep Ini Penting?
Karena nanti ketika kamu belajar:
- Node.js
- React
- backend
- browser
- asynchronous JavaScript
- Fetch API
- Web APIs
- event loop
kamu tidak akan bingung:
“Ini JavaScript atau fitur browser?”
Kamu akan mulai bisa membedakan:
JavaScript Language
│
├── syntax
├── variables
├── functions
├── objects
├── arrays
├── operators
└── language features
Environment
│
├── Browser
│ ├── DOM
│ ├── fetch
│ ├── localStorage
│ ├── events
│ └── console
│
└── Node.js
├── filesystem
├── server/network
├── process
└── dll.
32. Satu Hal Penting: “Web API Ditulis dalam JavaScript” Bukan Berarti Bagian dari JavaScript Language
Caption lecture mengatakan Web APIs juga ditulis dalam JavaScript.
Jangan sampai ini membuat bingung.
Ada perbedaan antara:
API dapat diakses menggunakan JavaScript
dan:
API tersebut merupakan bagian dari spesifikasi bahasa JavaScript.
Misalnya:
document.querySelector()
bisa kita panggil menggunakan syntax JavaScript.
Tetapi querySelector() adalah bagian dari platform web/DOM API, bukan fitur core language seperti:
let
function
if
return
Jadi:
Bahasa JavaScript
↓
digunakan untuk
↓
mengakses Browser APIs
33. Connection dengan Semua Lecture DOM Sebelumnya
Ini sebenarnya adalah kesimpulan besar dari section DOM.
Kamu sudah belajar:
Mengambil element
document.getElementById()
document.querySelector()
Mengubah isi
element.textContent
element.innerHTML
Mengubah class
element.classList.add()
element.classList.remove()
element.classList.contains()
Membuat element
document.createElement()
Memasukkan element
appendChild()
insertAdjacentElement()
Menghapus element
element.remove()
Event
addEventListener()
Keyboard
event.key
Form
element.value
element.checked
Semua kemampuan tersebut kamu akses dari JavaScript ketika JavaScript berjalan di browser environment.
34. Jadi Kalau Ditanya: “DOM Itu JavaScript?”
Jawaban:
Tidak. DOM adalah model/struktur dokumen yang disediakan oleh browser, dan JavaScript dapat mengakses serta memanipulasinya menggunakan DOM APIs.
Mental model:
HTML
↓
Browser
↓
DOM
↑
JavaScript
JavaScript berinteraksi dengan DOM.
JavaScript bukan DOM.
35. Kalau Ditanya: “Apa itu Web API?”
Jawaban sederhana:
Web API adalah sekumpulan API yang disediakan oleh browser/web platform agar JavaScript dapat berinteraksi dengan fitur dan lingkungan web, seperti DOM, network, storage, events, dan lainnya.
Contoh:
DOM API
Console API
Fetch API
Storage API
Event APIs
36. Kalau Ditanya: “Kenapa document.querySelector() Tidak Bisa Dipakai di Node.js?”
Jawaban:
Karena
documentdan DOM API tersebut disediakan oleh browser. Node.js memang menjalankan JavaScript, tetapi environment Node.js standar tidak menyediakan browser DOM.
Ini jawaban interview yang bagus.
37. Jangan Sampai Salah Memahami “JavaScript Bisa Berjalan di Mana Saja”
Pernyataan:
“JavaScript bisa berjalan di browser dan server.”
Benar.
Tetapi jangan menyimpulkan:
“Semua JavaScript API tersedia di semua tempat.”
Salah.
Lebih tepat:
JavaScript
│
┌─────────┴─────────┐
↓ ↓
Browser Node.js
│ │
Browser APIs Node APIs
│ │
DOM filesystem
fetch server
storage process
events network
JavaScript language-nya sama, tetapi environment dan API yang tersedia berbeda.
38. Cheat Sheet
| Istilah | Pengertian mudah |
|---|---|
| JavaScript | Bahasa pemrograman |
| ECMAScript | Spesifikasi standar bahasa JavaScript |
| Browser | Runtime environment untuk web |
| JavaScript Engine | Komponen yang menjalankan JS |
| DOM | Representasi dokumen HTML dalam bentuk object/tree |
| DOM API | API untuk mengakses/manipulasi DOM |
| Web API | API yang disediakan browser/web platform |
document | Object untuk mengakses dokumen/DOM |
querySelector() | Mencari element menggunakan CSS selector |
getElementById() | Mencari element berdasarkan ID |
createElement() | Membuat DOM element |
console.log() | Logging melalui Console API |
fetch() | API untuk HTTP/network request |
| Node.js | Runtime untuk menjalankan JS di luar browser |
39. Mental Model Besar
Kalau semua lecture ini dirangkum dalam satu gambar:
JAVASCRIPT
(bahasa pemrograman)
│
│ dijalankan oleh
↓
RUNTIME ENVIRONMENT
│
┌──────────┴──────────┐
↓ ↓
BROWSER NODE.JS
│ │
↓ ↓
Browser Web APIs Node APIs
│
┌───────┼────────┐
↓ ↓ ↓
DOM Console Fetch
│
↓
HTML / Web Page
Jadi ketika kamu menulis:
document.querySelector("#login");
mental model-nya adalah:
JavaScript
↓
memanggil
Browser Web API
↓
DOM API
↓
mengakses DOM
↓
mendapatkan element
🧠 Inti yang Harus Kamu Ingat
Ada 5 kalimat yang paling penting dari lecture ini:
1.
JavaScript adalah bahasa pemrograman.
2.
Browser adalah salah satu environment yang menjalankan JavaScript.
3.
DOM bukan JavaScript.
DOM adalah model dokumen yang disediakan oleh browser.
4.
document,querySelector(),getElementById(),createElement(), dan API DOM lainnya adalah kemampuan dari Web/DOM API yang dapat digunakan oleh JavaScript di browser.
5.
JavaScript bisa berjalan di environment lain seperti Node.js, tetapi API yang tersedia bisa berbeda.
Jadi rumus mental paling sederhananya:
JavaScript
= bahasa pemrograman
+
Runtime Environment
↓
┌──────────┴──────────┐
↓ ↓
Browser Node.js
↓
Web APIs
↓
DOM
Dan ini adalah fondasi yang sangat bagus sebelum masuk ke topik JavaScript runtime, Call Stack, Web APIs, Callback Queue, Microtask Queue, dan Event Loop yang disebut instructor di akhir lecture.