JavaScript - Location Object

Привет,野心勃勃的网页开发者们!今天，我们将深入了解JavaScript中最有用和最有趣的对象之一：Location对象。作为你友好的计算机老师邻居，我很高兴能引导你完成这次旅行。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

Window Location Object

Location对象就像是你网页浏览器中的GPS。它包含了关于浏览器窗口当前URL的信息，并提供了改变该URL的方法。把它想象成你在互联网广阔海洋中的私人导航员！

要访问Location对象，我们使用window.location或者简单地location。让我们来看一个简单的例子：

console.log(window.location);
console.log(location); // Оба дадут один и тот же результат

如果你在浏览器的控制台中运行这段代码，你将看到当前页面URL的所有属性。很酷，对吧？

JavaScript Location Object Properties

Теперь давайте разберем различные свойства объекта Location. Эти свойства как разные части адреса, каждая из которых дает нам конкретную информацию о том, где мы находимся в интернете.

1. href

Свойство href дает нам completo URL текущей страницы.

console.log(location.href);
// Вывод может быть: https://www.example.com/page?id=123#section

2. protocol

Это свойство告诉我们使用的是哪种协议 (обычно "http:" или "https:").

console.log(location.protocol);
// Вывод: https:

3. host

Свойство host дает нам доменное имя и номер порта (если указан).

console.log(location.host);
// Вывод может быть: www.example.com:8080

4. hostname

Похож на host, но hostname дает нам только доменное имя без порта.

console.log(location.hostname);
// Вывод: www.example.com

5. port

Это свойство specifies номер порта URL.

console.log(location.port);
// Вывод может быть: 8080 (или пусто, если это стандартный порт)

6. pathname

Свойство pathname дает нам путь URL (всё после доменного имени).

console.log(location.pathname);
// Вывод может быть: /page

7. search

Это свойство возвращает строку запроса URL (включая '?').

console.log(location.search);
// Вывод может быть: ?id=123

8. hash

Свойство hash дает нам якорь URL (включая '#').

console.log(location.hash);
// Вывод может быть: #section

JavaScript Location Object Methods

Теперь, когда мы рассмотрели свойства, давайте посмотрим на некоторые методы, которые позволяют нам взаимодействовать с объектом Location. Эти методы как управления нашего веб-браузера GPS.

1. assign()

Метод assign() загружает новый документ.

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

Это как если бы вы ввели новый URL в строку адреса и нажали enter.

2. reload()

Как следует из названия, этот метод перезагружает текущий документ.

location.reload();

Это эквивалентно нажатию кнопки обновления в вашем браузере.

3. replace()

Метод replace() заменяет текущий документ на новый.

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

Разница между replace() и assign() в том, что replace() не создает новую запись в истории браузера, поэтому пользователь не может использовать кнопку "назад", чтобы вернуться к исходной странице.

Location Object Properties List

Вот удобная таблица, резюмирующая все свойства объекта Location, которые мы обсуждали:

Свойство	Описание
href	Полностью URL
protocol	Протокол URL (например, "http:" или "https:")
host	Доменное имя и порт URL
hostname	Доменное имя URL
port	Номер порта, который сервер использует для URL
pathname	Путь и имя файла URL
search	Часть запроса URL
hash	Якорь URL

Location Object Methods List

А вот таблица, резюмирующая методы объекта Location:

Метод	Описание
assign()	Загружает новый документ
reload()	Перезагружает текущий документ
replace()	Заменяет текущий документ на новый

И вот вы только что совершили грандиозное путешеctвие по объекту JavaScript Location. Помните, как любой хороший GPS, объект Location всегда готов помочь вам navigate и управлять своими веб-страницами.

Подводя итоги, я вспомнил забавную историю из своих早期教书生涯. У меня был один студент, который был так взволнован использованием метода location.reload(), что случайно создал бесконечный цикл, из-за чего его браузер обновлялся бесконечно. Мы посмеялись над этим, но это дало нам важный урок: с великой силой приходит великая ответственность!

Надеюсь, это руководство было полезным, и вы чувствуете себя более уверенно в использовании объекта Location в своих JavaScript приключениях. Продолжайте практиковаться, stay curious, и счастливого кодирования!

Credits: Image by storyset