JavaScript - Objek Lokasi

Hai, para pengembang web yang sedang berkembang! Hari ini, kita akan melihat salah satu objek paling berguna dan menarik di JavaScript: Objek Lokasi. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk mengantar Anda dalam perjalanan ini. Jadi, ambillah secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Objek Lokasi Window

Objek Lokasi seperti GPS untuk browser Anda. Itu berisi informasi tentang URL saat ini di jendela browser dan menyediakan metode untuk mengubah URL itu. Bayangkan itu sebagai pengarah pribadi Anda di laut luas internet!

Untuk mengakses Objek Lokasi, kita gunakan window.location atau saja location. Mari kita lihat contoh sederhana:

console.log(window.location);
console.log(location); // Kedua-duanya akan memberikan hasil yang sama

Jika Anda menjalankan kode ini di konsol browser Anda, Anda akan melihat semua properti URL halaman saat ini. Sangat keren, kan?

Properti Objek Lokasi JavaScript

Sekarang, mari kitauraikan properti yang berbeda dari Objek Lokasi. Properti ini seperti bagian-bagian yang berbeda dari sebuah alamat, masing-masing memberikan informasi spesifik tentang dimana kita berada di web.

1. href

Properti href memberikan URL lengkap dari halaman saat ini.

console.log(location.href);
// Output mungkin: https://www.example.com/page?id=123#section

2. protocol

Properti ini mengatakan kepada kita protokol yang digunakan (biasanya "http:" atau "https:").

console.log(location.protocol);
// Output: https:

3. host

Properti host memberikan nama domain dan nomor port (jika ditentukan).

console.log(location.host);
// Output mungkin: www.example.com:8080

4. hostname

Mirip dengan host, tapi hostname memberikan hanya nama domain tanpa port.

console.log(location.hostname);
// Output: www.example.com

5. port

Properti ini menentukan nomor port URL.

console.log(location.port);
// Output mungkin: 8080 (atau kosong jika itu port default)

6. pathname

Properti pathname memberikan path URL (segala sesuatu setelah nama domain).

console.log(location.pathname);
// Output mungkin: /page

7. search

Properti ini mengembalikan bagian query string URL (termasuk '?').

console.log(location.search);
// Output mungkin: ?id=123

8. hash

Properti hash memberikan bagian anchor URL (termasuk '#').

console.log(location.hash);
// Output mungkin: #section

Metode Objek Lokasi JavaScript

Sekarang kita telah mengeksplor properti, mari kita lihat beberapa metode yang memungkinkan kita untuk berinteraksi dengan Objek Lokasi. Metode ini seperti kontrol GPS browser kita.

1. assign()

Metode assign() memuat dokumen baru.

location.assign("https://www.example.com");

Ini seperti mengetik URL baru ke dalam bilah alamat dan menekan enter.

2. reload()

Seperti namanya, metode ini memuat ulang dokumen saat ini.

location.reload();

Ini setara dengan mengklik tombol refresh di browser Anda.

3. replace()

Metode replace() mengganti dokumen saat ini dengan yang baru.

location.replace("https://www.example.com");

Perbedaan antara replace() dan assign() adalah replace() tidak membuat entri baru di riwayat browser, sehingga pengguna tidak dapat menggunakan tombol back untuk kembali ke halaman asli.

Daftar Properti Objek Lokasi

Berikut adalah tabel ringkasan semua properti Objek Lokasi yang telah kita diskusikan:

Properti	Deskripsi
href	URL lengkap
protocol	Skema protokol URL (misalnya, "http:" atau "https:")
host	Nama host dan nomor port URL
hostname	Nama host URL
port	Nomor port server yang digunakan untuk URL
pathname	Path dan nama file URL
search	Bagian query URL
hash	Bagian anchor URL

Daftar Metode Objek Lokasi

Dan berikut adalah tabel ringkasan metode Objek Lokasi:

Metode	Deskripsi
assign()	Memuat dokumen baru
reload()	Memuat ulang dokumen saat ini
replace()	Mengganti dokumen saat ini dengan yang baru

Dan itu adalah! Anda telah melakukan perjalanan besar ke Objek Lokasi JavaScript. Ingat, seperti GPS yang bagus, Objek Lokasi ada untuk membantu Anda menavigasi dan mengontrol halaman web Anda.

Saat kita mengakhiri, saya teringat cerita lucu dari hari-hari awal mengajar. Saya pernah punya murid yang sangat antusias tentang menggunakan metode location.reload() dan secara tidak sengaja menciptakan loop tak terbatas, menyebabkan browsernya refresh tak terhenti. Kita berdua bersuka-suka tentang hal itu, tapi itu mengajarkan kita lesson penting: dengan kekuatan yang besar datang tanggung jawab yang besar!

Saya harap panduan ini telah membantu dan Anda merasa lebih Percaya diri dalam menggunakan Objek Lokasi di perjalanan JavaScript Anda. Terus latih, tetap curiga, dan selamat berkoding!

Credits: Image by storyset