Masukkan Password
03 Menulis Program JavaScript Pertama
Materi ini adalah lanjutan dari lecture sebelumnya. Kalau sebelumnya kita menyiapkan VS Code, HTML, CSS, dan Live Server, sekarang kita mulai benar-benar menulis program JavaScript pertama.
Bagian yang paling penting dari materi ini adalah memahami:
- Apa itu inline JavaScript.
- Apa itu external JavaScript.
- Apa fungsi
<script>. - Apa itu
src. - Mengapa posisi
<script>bisa berpengaruh. - Apa yang dimaksud DOM.
- Mengapa JavaScript bisa mendapatkan
null. - Mengapa
<script>sering diletakkan di bagian akhir<body>.
1. Program pertama: Hello World
Ketika belajar bahasa pemrograman baru, biasanya kita membuat program sederhana yang disebut:
Hello World
Tujuannya bukan karena program tersebut berguna, tetapi untuk memastikan bahwa lingkungan pemrograman kita sudah berjalan.
Misalnya dalam JavaScript kita ingin menampilkan:
Hello World
Pada materi ini digunakan fungsi:
alert("Hello World");
Ketika dijalankan, browser akan menampilkan kotak dialog:
┌──────────────────────┐
│ Hello World │
│ │
│ OK │
└──────────────────────┘
2. JavaScript pada web bekerja bagaimana?
Sebelum masuk ke kode, pahami dulu hubungan HTML, JavaScript, dan browser.
Kita mempunyai:
index.html
│
│ berisi / menghubungkan
↓
JavaScript
│
↓
Browser
│
↓
Menjalankan JavaScript
Ketika browser membuka index.html, browser membaca dokumen HTML tersebut.
Kalau browser menemukan JavaScript yang harus dijalankan, JavaScript tersebut akan dieksekusi.
Jadi pada pembelajaran JavaScript untuk web:
JavaScript biasanya dihubungkan dengan dokumen HTML.
3. Ada dua cara memasukkan JavaScript ke HTML
Materi ini membahas dua cara:
Cara 1 — Inline JavaScript
JavaScript ditulis langsung di dalam file HTML.
Cara 2 — External JavaScript
JavaScript ditulis dalam file .js terpisah, kemudian file tersebut dihubungkan ke HTML.
Secara sederhana:
Inline
HTML
└── JavaScript
External
HTML ─────→ script.js
4. Inline JavaScript
Inline JavaScript berarti kode JavaScript ditulis langsung di dalam dokumen HTML.
Caranya menggunakan tag:
<script>
// JavaScript ditulis di sini
</script>
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>JS Fundamentals</title>
</head>
<body>
<h2>Fundamentals of JavaScript</h2>
<script>
alert("Hello World");
</script>
</body>
</html>
Ketika halaman dibuka, browser akan menjalankan:
alert("Hello World");
dan muncul alert.
5. Apa itu <script>?
Tag:
<script>
</script>
digunakan untuk memberitahu browser bahwa bagian tersebut berisi JavaScript.
Contoh:
<script>
alert("Hello World");
</script>
Bagian:
alert("Hello World");
adalah JavaScript-nya.
Sedangkan:
<script>
...
</script>
adalah cara HTML memberitahu browser tempat kode JavaScript tersebut berada.
6. Apa sebenarnya alert()?
Kita melihat:
alert("Hello World");
alert() digunakan untuk menampilkan dialog sederhana kepada pengguna.
Tetapi ada satu poin penting dari materi:
alert()bukan fitur inti bahasa JavaScript itu sendiri.
Lebih tepatnya, alert() adalah Web API yang disediakan oleh browser.
Artinya JavaScript berjalan di banyak lingkungan, bukan hanya browser.
Contohnya:
JavaScript
├── Browser
│ └── menyediakan alert(), document, window, dll.
│
├── Node.js
│ └── memiliki API yang berbeda
│
└── Environment lainnya
Jadi jangan menganggap semua yang kita gunakan di browser adalah bagian dari bahasa JavaScript murni.
Misalnya:
alert()
document
window
berhubungan dengan environment browser.
7. Mengapa tidak menggunakan Inline JavaScript terus?
Inline JavaScript memang mudah.
Misalnya:
<script>
alert("Hello World");
</script>
Tetapi ada masalah.
Bayangkan project kecil kita memiliki:
index.html
dan isinya sudah sangat panjang.
Kemudian kita memasukkan ratusan atau bahkan ribuan baris JavaScript ke dalam file tersebut.
Akhirnya:
index.html
│
├── HTML
├── HTML
├── HTML
├── JavaScript
├── JavaScript
├── HTML
├── JavaScript
└── JavaScript
File menjadi sulit dibaca dan dirawat.
8. Masalah utama Inline JavaScript
Ada dua masalah utama yang ditekankan dalam materi.
Masalah 1 — HTML dan JavaScript tercampur
Misalnya:
<body>
<h2>Welcome</h2>
<script>
let nama = "Budi";
alert(nama);
</script>
</body>
Kita mempunyai HTML dan JavaScript dalam satu tempat.
Untuk project kecil tidak masalah.
Tetapi untuk project besar, bisa menjadi sulit dikelola.
Masalah 2 — File menjadi besar
Misalnya kita memiliki:
index.html
dengan 2.000 baris HTML dan 3.000 baris JavaScript.
Kalau semuanya dimasukkan ke satu file:
index.html
= 5.000 baris
Ini kurang nyaman.
Karena itu kita pisahkan.
9. External JavaScript
Solusinya adalah:
Pisahkan JavaScript ke file
.js.
Misalnya:
JavaScript Basics
├── index.html
├── style.css
└── script.js
Sekarang tugasnya dipisahkan:
index.html
↓
HTML
style.css
↓
CSS
script.js
↓
JavaScript
Ini membuat project lebih terstruktur.
10. Membuat file script.js
Di VS Code kita membuat file:
script.js
Perhatikan ekstensi:
.js
Ekstensi .js menunjukkan bahwa file tersebut adalah file JavaScript.
Contohnya:
script.js
app.js
main.js
Semuanya bisa digunakan untuk menyimpan JavaScript.
Nama file bebas.
Yang penting ekstensi filenya:
.js
11. Menulis JavaScript di script.js
Sekarang kita tidak lagi menulis:
<script>
alert("Hello World");
</script>
di HTML.
Kita pindahkan JavaScript-nya ke:
script.js
Isi:
alert("This is my first JavaScript program");
Jadi sekarang:
script.js
alert("This is my first JavaScript program");
index.html
Belum tahu tentang script.js.
Nah, di sinilah kita perlu menghubungkannya.
12. Menghubungkan script.js dengan HTML
Kita menggunakan <script> lagi.
Tetapi sekarang kita menggunakan atribut:
src
Contohnya:
<script src="script.js"></script>
src adalah singkatan dari source.
Maksudnya:
“JavaScript-nya ambil dari file mana?”
Dalam contoh:
<script src="script.js"></script>
berarti:
Ambil JavaScript dari file
script.js.
13. Kenapa script.js tidak berjalan sebelum dihubungkan?
Misalnya struktur folder:
JavaScript Basics
├── index.html
└── script.js
script.js berisi:
alert("Hello");
Tetapi index.html tidak memiliki:
<script src="script.js"></script>
Maka browser tidak tahu bahwa script.js harus dijalankan.
Sederhananya:
script.js
│
│ ada
↓
JavaScript code
TAPI
index.html
│
│ tidak tahu
↓
script.js
Akibatnya JavaScript tidak dijalankan.
14. Setelah menggunakan src
Kita menambahkan:
<script src="script.js"></script>
Sekarang hubungan menjadi:
index.html
│
│ src="script.js"
↓
script.js
│
↓
alert("Hello")
│
↓
Browser menjalankan
Maka alert muncul.
15. Apa itu relative path?
Pada tutorial, index.html dan script.js berada dalam folder yang sama:
JavaScript Basics
├── index.html
└── script.js
Karena keduanya berada dalam folder yang sama, kita cukup menulis:
<script src="script.js"></script>
Tidak perlu menulis alamat lengkap komputer.
Ini disebut relative path.
16. Contoh jika file berada di folder berbeda
Misalnya struktur:
JavaScript Basics
├── index.html
└── js
└── script.js
Sekarang script.js berada di dalam folder js.
Maka:
<script src="js/script.js"></script>
Kalau strukturnya:
project
├── index.html
└── assets
└── js
└── script.js
Maka:
<script src="assets/js/script.js"></script>
Jadi src menunjukkan lokasi file JavaScript.
17. Di mana sebaiknya <script> diletakkan?
Nah, ini adalah bagian paling penting dari lecture.
Tag:
<script src="script.js"></script>
bisa diletakkan di beberapa tempat.
Misalnya di <head>:
<head>
<script src="script.js"></script>
</head>
Atau di bagian akhir <body>:
<body>
<h2>Fundamentals of JavaScript</h2>
<script src="script.js"></script>
</body>
Keduanya secara sintaks valid.
Tetapi timing eksekusinya berbeda.
18. Cara sederhana memahami proses browser
Anggap browser membaca HTML dari atas ke bawah.
Misalnya:
<html>
<head>
...
</head>
<body>
<h2>Hello</h2>
<input>
</body>
</html>
Secara sederhana browser memproses:
<html>
↓
<head>
↓
<body>
↓
<h2>
↓
<input>
↓
</body>
↓
</html>
Sekarang bayangkan JavaScript diletakkan di <head>:
<head>
<script src="script.js"></script>
</head>
Maka JavaScript ditemukan lebih awal.
19. Kenapa ini menjadi masalah?
Sekarang kita punya:
<input type="text" id="name" value="JavaScript">
Kemudian JavaScript ingin mendapatkan elemen tersebut.
Misalnya:
let input = document.getElementById("name");
Lalu:
input.value = "Modern JavaScript";
Tujuannya:
JavaScript
↓
Modern JavaScript
Tetapi jika script dijalankan terlalu awal, elemen <input> tersebut mungkin belum dibuat oleh browser pada saat JavaScript mencoba mencarinya.
20. Apa itu DOM?
Sebelum melanjutkan, kita harus mengenal istilah:
DOM — Document Object Model
DOM adalah representasi dokumen HTML yang dibuat browser sehingga JavaScript dapat berinteraksi dengan elemen-elemen halaman.
Misalnya HTML:
<h2>Hello</h2>
<input id="name">
Browser membangun representasi struktur dokumen tersebut.
Secara sederhana:
Document
│
└── HTML
│
├── H2
│
└── INPUT
└── id="name"
JavaScript dapat menggunakan DOM untuk:
- mencari elemen
- mengubah teks
- mengubah nilai input
- mengubah style
- membuat elemen
- menghapus elemen
- merespons event
Inilah salah satu alasan JavaScript sangat penting dalam web development.
21. document.getElementById()
Dalam materi digunakan:
document.getElementById("name");
Kita bedah:
document
Mengacu pada dokumen halaman web saat ini.
.getElementById()
Metode untuk mencari elemen berdasarkan id.
Misalnya HTML:
<input id="name">
JavaScript:
document.getElementById("name");
Artinya:
“Carikan saya elemen yang memiliki ID
name.”
22. Menyimpan hasilnya ke variabel
Misalnya:
let input = document.getElementById("name");
Artinya:
Cari elemen dengan ID "name"
↓
ditemukan
↓
simpan ke variabel
input
Kemudian kita bisa menggunakan:
input.value
untuk mengakses nilai input tersebut.
23. Mengubah nilai input
Misalnya HTML:
<input type="text" id="name" value="JavaScript">
Nilainya awal:
JavaScript
Kemudian:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
Maka browser akan menampilkan:
Modern JavaScript
Jadi JavaScript berhasil memanipulasi DOM.
24. Masalah ketika <script> berada di <head>
Misalnya:
<head>
<script src="script.js"></script>
</head>
<body>
<h2>Fundamentals of JavaScript</h2>
<input type="text" id="name" value="JavaScript">
</body>
Dan script.js:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
Masalahnya:
Ketika script.js dijalankan, browser belum sampai pada:
<input type="text" id="name">
Jadi elemen tersebut belum tersedia dalam DOM pada saat pencarian dilakukan.
25. Apa yang dikembalikan getElementById()?
Kalau elemen ditemukan:
document.getElementById("name");
hasilnya adalah elemen tersebut.
Tetapi kalau belum ditemukan:
document.getElementById("name");
bisa menghasilkan:
null
null secara sederhana berarti:
Tidak ada objek/elemen yang ditemukan.
Jadi:
let input = null;
Kemudian kita melakukan:
input.value = "Modern JavaScript";
Masalahnya:
Kita mencoba mengakses
.valuedari sesuatu yang ternyatanull.
Itulah sebabnya muncul error seperti:
Cannot set properties of null
26. Kenapa error-nya “null”?
Perhatikan alurnya:
JavaScript dijalankan
↓
getElementById("name")
↓
Browser belum menemukan input
↓
hasil = null
↓
input.value = ...
↓
ERROR
Bukan berarti ID name salah.
Bisa saja ID-nya benar.
Masalahnya adalah waktu JavaScript dijalankan.
Elemen tersebut belum tersedia pada saat kode dijalankan.
27. Memindahkan <script> ke akhir <body>
Sekarang kita ubah menjadi:
<body>
<h2>Fundamentals of JavaScript</h2>
<input type="text" id="name" value="JavaScript">
<script src="script.js"></script>
</body>
Sekarang urutannya:
<h2>
↓
<input>
↓
<script>
Ketika JavaScript dijalankan:
document.getElementById("name");
elemen input sudah ditemukan/dibangun dalam DOM.
Sehingga:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
berhasil.
28. Bandingkan kedua posisi
Script di <head>
HTML mulai dibaca
↓
<script>
↓
JavaScript dijalankan
↓
<input> belum diproses
↓
getElementById()
↓
null
↓
ERROR
Script di akhir <body>
HTML mulai dibaca
↓
<h2>
↓
<input>
↓
<script>
↓
JavaScript dijalankan
↓
<input> sudah tersedia
↓
getElementById()
↓
Elemen ditemukan
↓
Berhasil
Ini adalah inti utama lecture.
29. Kenapa tutorial menyarankan script di akhir body?
Karena kalau JavaScript kita membutuhkan elemen HTML, menaruh:
<script src="script.js"></script>
di akhir <body> memastikan elemen HTML yang berada sebelumnya sudah diproses.
Contoh:
<body>
<h2>Fundamentals of JavaScript</h2>
<input id="name">
<script src="script.js"></script>
</body>
JavaScript dapat dengan aman mencari:
document.getElementById("name");
30. Apakah script selalu harus di akhir body?
Tidak.
Ini penting.
Materi mengatakan <script> bisa diletakkan di berbagai tempat.
Selain itu, HTML modern menyediakan atribut seperti:
<script src="script.js" defer></script>
Dengan defer, browser dapat memproses HTML sambil mengambil script, tetapi eksekusi script ditunda sampai HTML selesai diparse.
Ini adalah pola yang sangat umum dalam development modern.
Jadi jangan mengambil kesimpulan:
“JavaScript harus selalu di akhir body.”
Yang lebih tepat:
Jika script perlu mengakses elemen DOM, pastikan elemen tersebut sudah tersedia sebelum kode dijalankan.
Menaruh script di akhir <body> adalah salah satu cara sederhana untuk mencapai hal tersebut.
31. Gambaran defer
Misalnya:
<head>
<script src="script.js" defer></script>
</head>
Secara sederhana:
Browser membaca HTML
│
├──── mengambil script
│
└──── terus membaca HTML
↓
HTML selesai
↓
JavaScript dijalankan
Dengan begitu JavaScript dapat bekerja dengan DOM yang sudah selesai diproses.
Ini akan sangat berguna ketika kamu mulai membuat project yang lebih serius.
32. Jadi apa yang sebenarnya terjadi saat halaman dibuka?
Mari kita simulasikan.
HTML:
<body>
<h2>Fundamentals of JavaScript</h2>
<input type="text" id="name" value="JavaScript">
<script src="script.js"></script>
</body>
JavaScript:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
Browser melakukan kira-kira:
Langkah 1
Membaca:
<h2>Fundamentals of JavaScript</h2>
DOM memiliki elemen H2.
Langkah 2
Membaca:
<input id="name">
DOM sekarang memiliki input.
Langkah 3
Browser menemukan:
<script src="script.js"></script>
Browser mengambil script.js.
Langkah 4
JavaScript dijalankan:
document.getElementById("name");
Elemen ditemukan.
Langkah 5
JavaScript menjalankan:
input.value = "Modern JavaScript";
Hasil
Nilai input berubah:
JavaScript
menjadi:
Modern JavaScript
33. Konsep penting: HTML → DOM → JavaScript
Ini konsep yang harus mulai kamu tanamkan dari sekarang.
Ketika kita memiliki:
<input id="name">
browser membuat representasi DOM.
Kemudian JavaScript bisa melakukan:
document.getElementById("name");
Sehingga:
HTML
↓
Browser parsing
↓
DOM
↓
JavaScript mengakses DOM
↓
DOM diubah
↓
Tampilan halaman berubah
Inilah yang dimaksud dengan DOM manipulation.
34. Jangan khawatir kalau belum memahami kode DOM
Instrukturnya sendiri mengatakan bahwa kode seperti:
document.getElementById("name")
akan dibahas lebih mendalam pada lecture berikutnya.
Jadi untuk sekarang cukup pahami konsepnya:
JavaScript dapat mencari elemen HTML melalui DOM dan kemudian mengubah elemen tersebut.
Nanti kamu akan belajar:
documentgetElementByIdquerySelectorquerySelectorAlltextContentinnerHTMLvaluestyle- event
- dan lain-lain.
35. Ringkasan Inline vs External JavaScript
| Inline JavaScript | External JavaScript |
|---|---|
| JavaScript berada di HTML | JavaScript berada di file .js |
Menggunakan <script> | Menggunakan <script src=""> |
| Mudah untuk contoh kecil | Lebih baik untuk project |
| HTML dan JS bercampur | HTML dan JS terpisah |
| Kurang maintainable jika besar | Lebih mudah dirawat |
| File HTML bisa menjadi besar | Struktur project lebih bersih |
Contoh inline:
<script>
alert("Hello");
</script>
Contoh external:
<script src="script.js"></script>
dan:
// script.js
alert("Hello");
36. Struktur project setelah lecture
Project kita sekarang kira-kira:
JavaScript Basics
│
├── index.html
├── style.css
└── script.js
index.html:
<!DOCTYPE html>
<html>
<head>
<title>JS Fundamentals</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Fundamentals of JavaScript</h2>
<input type="text" id="name" value="JavaScript">
<script src="script.js"></script>
</body>
</html>
style.css:
h2 {
color: red;
}
script.js:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
Hasilnya kira-kira:
Fundamentals of JavaScript
┌─────────────────────────────┐
│ Modern JavaScript │
└─────────────────────────────┘
37. Kesalahan yang harus kamu ingat
Ada beberapa kesalahan umum yang bisa terjadi.
1. Lupa menghubungkan file JS
Kita membuat:
script.js
tetapi lupa:
<script src="script.js"></script>
Akibatnya JavaScript tidak berjalan.
2. Salah nama file
Misalnya file sebenarnya:
script.js
tetapi kita menulis:
<script src="scripts.js"></script>
Browser tidak akan menemukan file yang dimaksud.
3. Salah path
Struktur:
project
├── index.html
└── js
└── script.js
Tetapi kita menulis:
<script src="script.js"></script>
Salah.
Seharusnya:
<script src="js/script.js"></script>
4. JavaScript dijalankan sebelum elemen tersedia
Misalnya:
let input = document.getElementById("name");
input.value = "Modern JavaScript";
tetapi script dijalankan sebelum:
<input id="name">
tersedia.
Maka input bisa menjadi:
null
38. Cara mengingat seluruh lecture
Gunakan pola sederhana ini:
1. Buat HTML
↓
2. Buat JavaScript
↓
3. Hubungkan dengan <script>
↓
4. Browser membaca HTML
↓
5. JavaScript dieksekusi
↓
6. JavaScript bisa memanipulasi DOM
Dan untuk masalah posisi script:
Script terlalu cepat
↓
Elemen belum tersedia
↓
getElementById()
↓
null
↓
ERROR
Sedangkan:
HTML elemen sudah tersedia
↓
JavaScript dijalankan
↓
getElementById()
↓
Elemen ditemukan
↓
Berhasil
39. Inti paling penting dari lecture ini
Kalau kamu hanya mengingat 5 hal, ingat ini:
① JavaScript bisa ditulis langsung di HTML
<script>
alert("Hello World");
</script>
Ini disebut inline JavaScript.
② JavaScript lebih baik dipisahkan ke file .js
script.js
Kemudian hubungkan:
<script src="script.js"></script>
Ini disebut external JavaScript.
③ src menunjukkan lokasi file JavaScript
<script src="script.js"></script>
Artinya browser mengambil kode dari script.js.
④ JavaScript dapat berinteraksi dengan HTML melalui DOM
Contohnya:
document.getElementById("name");
Artinya mencari elemen HTML yang memiliki:
id="name"
⑤ Waktu eksekusi JavaScript penting
Kalau JavaScript dijalankan sebelum elemen HTML tersedia:
document.getElementById("name");
bisa menghasilkan:
null
Karena itu, untuk pola sederhana seperti yang diajarkan di materi, kita bisa menaruh:
<script src="script.js"></script>
di bagian akhir <body>.
🧠 Analogi paling mudah
Bayangkan kamu meminta seseorang:
“Tolong ubah tulisan di papan menjadi ‘Modern JavaScript’.”
Tetapi papan tersebut belum dipasang.
Orang itu mencari papan:
Cari papan
↓
Belum ada
↓
null
Kemudian dia diperintahkan:
“Ubah tulisan di papan.”
Tentu tidak bisa, karena papannya belum ada.
Itulah kira-kira yang terjadi ketika JavaScript dijalankan terlalu awal.
Sedangkan kalau kita menunggu sampai papan dipasang:
Pasang papan
↓
Pasang tulisan
↓
JavaScript mencari papan
↓
Papan ditemukan
↓
Tulisan diubah
Begitulah konsep DOM dan timing eksekusi JavaScript yang sedang diperkenalkan dalam lecture ini.
Kalau kamu mau, saya juga bisa membuat diagram visual alur HTML → DOM → JavaScript → perubahan tampilan supaya konsep ini lebih mudah diingat.