JavaScript - Объект Window: Врата к взаимодействию с браузером
Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир объекта Window. Как ваш добрый соседский компьютерный учитель, я здесь, чтобы провести вас через эту fascynating тему. Так что возьмите ваши виртуальные палочки (клавиатуры) и let's cast some JavaScript spells!
Что такое объект Window?
Представьте окно браузера как магический портал в интернет. Объект Window подобен хранителю этого portals, контролирующему все, что вы видите и с чем взаимодействуете на веб-странице. Он так важен, что часто называется "Глобальный Объект" в JavaScript.
Объект Window как глобальный объект
Когда вы пишете JavaScript для веб-страницы, объект Window всегда рядом, молча наблюдающий за вашим кодом. Это как воздух, которым мы дышим - он везде, даже если мы не всегда его замечаем.
Давайте начнем с простого примера:
console.log("Hello, World!");Знали ли вы, что это на самом деле краткая форма:
window.console.log("Hello, World!");Часть window обычно опускается,因为她 implieD. Круто, да?
Свойства объекта Window
Теперь давайте исследуем некоторые из магических свойств нашего объекта Window. Эти свойства resemble different rooms в нашем браузерном замке, у каждого из которых есть своя особая цель.
1. window.innerWidth и window.innerHeight
Эти свойства告诉我们 размер нашего окна браузера. Давайте посмотрим, как они работают:
console.log("Ширина окна: " + window.innerWidth);
console.log("Высота окна: " + window.innerHeight);Попробуйте изменить размер окна браузера и запустить этот код снова. Вы увидите, как цифры изменяются!
2. window.location
Это свойство похоже на GPS нашего браузера. Оно告诉我们, где мы находимся в интернете и позволяет нам navigate к новым местам.
console.log("Текущий URL: " + window.location.href);
// Чтобы перейти на новую страницу:
// window.location.href = "https://www.example.com";3. window.history
Представьте это как журнал вашего браузера, который ведет record, куда вы были.
console.log("Количество страниц в истории: " + window.history.length);
// Чтобы вернуться на одну страницу назад:
// window.history.back();Вот таблица, резюмирующая эти свойства:
| Свойство | Описание |
|---|---|
| innerWidth | Ширина окна браузера |
| innerHeight | Высота окна браузера |
| location | Информация о текущем URL |
| history | История браузера |
Методы объекта Window
Теперь давайте learn some spells (методы), которые мы можем cast на наш объект Window!
1. window.alert()
Этот метод похож на крик "Эй, слушай!" пользователю. Он создает всплывающее окно с сообщением.
window.alert("Добро пожаловать в JavaScript!");2. window.prompt()
Этот метод похож на то, что вы задаете пользователю вопрос. Он создает всплывающее окно с текстовым вводом.
let name = window.prompt("Как ваше имя?");
console.log("Здравствуйте, " + name + "!");3. window.setTimeout()
Этот метод похож на установку таймера для вашего кода. Он запускает функцию после specified delay.
window.setTimeout(function() {
console.log("This message appears after 3 seconds!");
}, 3000);4. window.setInterval()
Этот метод похож на установку recurrent alarm. Он запускает функцию repeatedly на specified intervals.
let counter = 0;
window.setInterval(function() {
counter++;
console.log("This message appears every 2 seconds. Count: " + counter);
}, 2000);Вот таблица, резюмирующая эти методы:
| Метод | Описание |
|---|---|
| alert() | Отображает всплывающее окно |
| prompt() | Отображает диалоговое окно для ввода пользователя |
| setTimeout() | Выполняет функцию после specified delay |
| setInterval() | Выполняет функцию recurrently на specified intervals |
Использование всего вместе
Теперь, когда мы узнали о этих магических свойствах и методах, давайте используем их, чтобы создать простую интерактивную веб-страницу:
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Добро пожаловать!</h1>
<button onclick="startGame()">Начать игру</button>
<script>
function startGame() {
let name = window.prompt("Как ваше имя,冒险ник?");
document.getElementById("greeting").innerHTML = "Добро пожаловать, " + name + "!";
let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " seconds until the game starts!");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Game start!");
}
}, 1000);
}
</script>
</body>
</html>В этом примере мы создали простую "игру", которая:
- Спрашивает имя игрока с помощью
prompt() - Обновляет приветствие с помощью манипуляций DOM
- Использует
setInterval()для создания обратного отсчета - Использует
alert()для уведомления игрока о обратном отсчете и начале игры
И вот оно,年轻的 JavaScript ученики! Мы исследовали магическое царство объекта Window, от его свойств до его методов. Помните, что практика делает perfect, так что продолжайте experimenting с этими концепциями. Before you know it, вы будете cast JavaScript заклинания как профессионал!
Until next time, happy coding!
Credits: Image by storyset