JavaScript - Window Object: Your Gateway to Browser Interaction
Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan melangkah ke dalam dunia Window Object yang menarik. Sebagai guru komputer tetangga yang ramah, saya di sini untuk membimbing Anda melalui topik yang menarik ini. Jadi, ambil keyboard Anda (tongkat sihir virtual), dan mari kita buat some JavaScript spells!
Apa Itu Window Object?
Imaginilah jendela browser sebagai portal magis ke dunia web. Window Object seperti penjaga pintu ini, mengendalikan segala sesuatu yang Anda lihat dan berinteraksi di halaman web. Itu sangat penting sehingga sering disebut "Global Object" dalam JavaScript.
Window Object sebagai Global Object
Ketika Anda menulis JavaScript untuk halaman web, Window Object selalu ada, diam-diam memantau kode Anda. Itu seperti udara yang kita hirup - itu di mana-mana, meskipun kadang-kadang kita tidak perhatikan.
Mari kita mulai dengan contoh sederhana:
console.log("Hello, World!");Apakah Anda tahu bahwa ini sebenarnya singkatan dari:
window.console.log("Hello, World!");Bagian window biasanya dihilangkan karena diasumsikan. Bagus, kan?
Properti Window Object
Sekarang, mari kita jelajahi beberapa properti magis Window Object kami. Properti ini seperti berbagai ruangan di istana browser kami, masing-masing dengan tujuannya sendiri.
1. window.innerWidth dan window.innerHeight
Properti ini memberitahu kita ukuran jendela browser kita. Mari kita lihatnya dalam aksi:
console.log("Lebar jendela: " + window.innerWidth);
console.log("Tinggi jendela: " + window.innerHeight);Cobalah mengubah ukuran jendela browser Anda dan menjalankan kode ini lagi. Anda akan melihat angka berubah!
2. window.location
Properti ini seperti GPS browser kita. Itu memberitahu kita di mana kita berada di web dan memungkinkan kita untuk menavigasi ke tempat baru.
console.log("URL saat ini: " + window.location.href);
// Untuk menavigasi ke halaman baru:
// window.location.href = "https://www.example.com";3. window.history
Pikirkan ini seperti jurnal browser Anda, mencatat tempat Anda telah pergi.
console.log("Jumlah halaman dalam riwayat: " + window.history.length);
// Untuk kembali ke halaman sebelumnya:
// window.history.back();Berikut adalah tabel yang menggabungkan properti ini:
| Properti | Deskripsi |
|---|---|
| innerWidth | Lebar jendela browser |
| innerHeight | Tinggi jendela browser |
| location | Informasi tentang URL saat ini |
| history | Riwayat browser |
Metode Window Object
Sekarang, mari kita belajar beberapa sihir (metode) yang kita bisa buat di Window Object!
1. window.alert()
Metode ini seperti berteriak "Halo, dengarkan!" kepada pengguna. Itu membuat kotak pop-up dengan pesan.
window.alert("Selamat datang di JavaScript!");2. window.prompt()
Metode ini seperti bertanya kepada pengguna. Itu membuat kotak pop-up dengan input teks.
let name = window.prompt("Siapa namamu?");
console.log("Halo, " + name + "!");3. window.setTimeout()
Metode ini seperti menyetel timer untuk kode Anda. Itu menjalankan fungsi setelah jeda yang ditentukan.
window.setTimeout(function() {
console.log("Pesan ini muncul setelah 3 detik!");
}, 3000);4. window.setInterval()
Metode ini seperti menyetel alarm berulang. Itu menjalankan fungsi secara berulang pada interval yang ditentukan.
let counter = 0;
window.setInterval(function() {
counter++;
console.log("Pesan ini muncul setiap 2 detik. Count: " + counter);
}, 2000);Berikut adalah tabel yang menggabungkan metode ini:
| Metode | Deskripsi |
|---|---|
| alert() | Menampilkan kotak peringatan |
| prompt() | Menampilkan kotak dialog untuk input pengguna |
| setTimeout() | Mengeksekusi fungsi setelah jeda yang ditentukan |
| setInterval() | Mengeksekusi fungsi secara berulang pada interval yang ditentukan |
Menggabungkan Semua
Sekarang kita telah belajar tentang properti dan metode ini, mari kita gunakan mereka untuk membuat halaman web interaktif sederhana:
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Selamat Datang!</h1>
<button onclick="startGame()">Mulai Game</button>
<script>
function startGame() {
let name = window.prompt("Siapa namamu, petualang?");
document.getElementById("greeting").innerHTML = "Selamat Datang, " + name + "!";
let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " detik hingga game dimulai!");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Game dimulai!");
}
}, 1000);
}
</script>
</body>
</html>Dalam contoh ini, kita telah membuat game sederhana yang:
- Bertanya kepada pemain tentang namanya menggunakan
prompt() - Memperbarui pesan selamat datang menggunakan manipulasi DOM
- Menggunakan
setInterval()untuk membuat countdown - Menggunakan
alert()untuk memberitahu pemain tentang countdown dan permulaan game
Dan begitu juga, para pemula JavaScript muda! Kita telah menjelajahi realm magis Window Object, dari propertinya hingga metodinya. Ingat, latihan membuat sempurna, jadi terus mencoba konsep ini. Sebelum Anda tahu, Anda akan membuat sihir JavaScript seperti seorang ahli!
Sampaijumpa lagi, selamat berkoding!
Credits: Image by storyset