JavaScript - Đối tượng Location

Xin chào, các bạn nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những đối tượng hữu ích và thú vị nhất trong JavaScript: đối tượng Location. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Vậy hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

Đối tượng Window Location

Đối tượng Location giống như một GPS cho trình duyệt web của bạn. Nó chứa thông tin về URL hiện tại của cửa sổ trình duyệt và cung cấp các phương thức để thay đổi URL đó. Hãy tưởng tượng nó như một người hướng dẫn cá nhân của bạn trong đại dương rộng lớn của internet!

Để truy cập đối tượng Location, chúng ta sử dụng window.location hoặc đơn giản là location. Hãy cùng nhìn vào một ví dụ đơn giản:

console.log(window.location);
console.log(location); // Cả hai sẽ cho cùng một kết quả

Nếu bạn chạy đoạn mã này trong console của trình duyệt, bạn sẽ thấy tất cả các thuộc tính của URL của trang hiện tại. Rất thú vị phải không?

Thuộc tính của Đối tượng Location

Bây giờ, hãy phân tích các thuộc tính khác nhau của đối tượng Location. Các thuộc tính này giống như các phần của một địa chỉ, mỗi phần cung cấp cho chúng ta thông tin cụ thể về vị trí của chúng ta trên web.

1. href

Thuộc tính href cung cấp cho chúng ta URL đầy đủ của trang hiện tại.

console.log(location.href);
// Output có thể là: https://www.example.com/page?id=123#section

2. protocol

Thuộc tính này cho chúng ta biết đang sử dụng giao thức nào (thường là "http:" hoặc "https:").

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

3. host

Thuộc tính host cung cấp cho chúng ta tên miền và số port (nếu được chỉ định).

console.log(location.host);
// Output có thể là: www.example.com:8080

4. hostname

Giống như host, nhưng hostname chỉ cung cấp tên miền mà không có port.

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

5. port

Thuộc tính này chỉ định số port của URL.

console.log(location.port);
// Output có thể là: 8080 (hoặc trống nếu đó là port mặc định)

6. pathname

Thuộc tính pathname cung cấp cho chúng ta đường dẫn của URL (mọi thứ sau tên miền).

console.log(location.pathname);
// Output có thể là: /page

7. search

Thuộc tính này trả về phần chuỗi truy vấn của URL (bao gồm cả '?').

console.log(location.search);
// Output có thể là: ?id=123

8. hash

Thuộc tính hash cung cấp cho chúng ta phần锚 của URL (bao gồm cả '#').

console.log(location.hash);
// Output có thể là: #section

Phương thức của Đối tượng Location

Bây giờ chúng ta đã khám phá các thuộc tính, hãy nhìn vào một số phương thức cho phép chúng ta tương tác với đối tượng Location. Các phương thức này giống như các điều khiển của GPS trình duyệt web của chúng ta.

1. assign()

Phương thức assign() tải tài liệu mới.

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

Điều này giống như gõ một URL mới vào thanh địa chỉ và nhấn enter.

2. reload()

Như tên gọi của nó, phương thức này tải lại tài liệu hiện tại.

location.reload();

Nó tương đương với việc nhấp vào nút làm mới trong trình duyệt.

3. replace()

Phương thức replace() thay thế tài liệu hiện tại bằng một tài liệu mới.

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

Sự khác biệt giữa replace() và assign() là replace() không tạo ra một mục mới trong lịch sử trình duyệt, vì vậy người dùng không thể sử dụng nút quay lại để điều hướng trở lại trang gốc.

Danh sách Thuộc tính của Đối tượng Location

Dưới đây là bảng tóm tắt tất cả các thuộc tính của Đối tượng Location mà chúng ta đã thảo luận:

Thuộc tính	Mô tả
href	Toàn bộ URL
protocol	Giao thức của URL (ví dụ: "http:" hoặc "https:")
host	Tên miền và số port của URL
hostname	Tên miền của URL
port	Số port mà máy chủ sử dụng cho URL
pathname	Đường dẫn và tên tệp của URL
search	Phần chuỗi truy vấn của URL
hash	Phần锚 của URL

Danh sách Phương thức của Đối tượng Location

Và đây là bảng tóm tắt các phương thức của Đối tượng Location:

Phương thức	Mô tả
assign()	Tải tài liệu mới
reload()	Tải lại tài liệu hiện tại
replace()	Thay thế tài liệu hiện tại bằng tài liệu mới

Và đó là tất cả! Bạn đã vừa tham quan một chuyến du lịch lớn về Đối tượng Location trong JavaScript. Nhớ rằng, giống như bất kỳ GPS nào, Đối tượng Location luôn ở đó để giúp bạn điều hướng và kiểm soát các trang web của mình.

Khi chúng ta kết thúc, tôi nhớ lại một câu chuyện hài từ những ngày đầu dạy học. Tôi từng có một học sinh rất háo hức sử dụng phương thức location.reload() đến mức anh ấy vô tình tạo ra một vòng lặp vô hạn, khiến trình duyệt của anh ấy liên tục làm mới. Chúng tôi đã cùng nhau cười về điều đó, nhưng nó đã dạy chúng tôi một bài học quan trọng: với quyền lực lớn đi kèm với trách nhiệm lớn!

Tôi hy vọng hướng dẫn này đã hữu ích và bạn cảm thấy tự tin hơn khi sử dụng Đối tượng Location trong các cuộc phiêu lưu JavaScript của mình. Hãy tiếp tục thực hành, luôn tò mò và chúc bạn mã code vui vẻ!

Credits: Image by storyset