Введение в Java Script

Этот язык программирования может выполняться в браузере пользователя и сделать ваш сайт более динамичным и современным. Например вам хочется, чтобы всплывало окошко, и чтобы его можно было закрыть, нажав на крестик. Давайте посмотрим как это сделать, создаем элемент окошко, а внутри поместим ссылку, при нажатии на которую окошко будет закрываться.

<div class="window">
    <a href="#" class="close">Закрыть</a>
</div>

Теперь повесим обработчик, скрипты пишутся в отдельных файлах или в теге <script>. В нашем примере мы сделаем обоими способами.

<html>
<body>
<div class="window">
    <a href="#" class="close">Закрыть</a>
</div>
<script src="index.js"></script>
</body>
</html>
function close() {
    document.querySelector('.window').style.display = 'none';
}

document.querySelector('.close').addEventListener('click', close);

Теперь объясним, что здесь происходит. У Java Script все глобальные переменные находятся в одном объекте window. У данного объекта есть свойство document. Само слово window можно опускать. document служит для обращения к HTML вашего документа, и у него есть хороший метод для этого querySelector — который по CSS селектору отдаст вам нужный тег. Этот тег сам является объектом типа HTMLElement. Тут мы получаем два объекта через этот способ Окно и ссылку закрыть. Окно мы получаем чтобы его скрыть, а ссылку чтобы повесить на него обработчик нажатия мышкой. Метод addEventListener устанавливает обработчик click на элементе ссылки закрытия, в качестве обработчика указана функция close — которая определена выше. Данная функция close обращается к стилям элемента окна и устанавливает ему свойство CSS display в значение none.

Нужно сказать что Java Script выполняется сразу же, и поэтому если в HTML не загружен тег к которому вы обращаетесь, то произойдет ошибка. Именно поэтому мы подключили наш index.js после всех тегов. Можно было поставить и в начало, но тогда нужно будет это делать на событие уже window которое называется DOMContentLoaded

<html>
<body>
<script>
function close() {
    document.querySelector('.window').style.display = 'none';
}

window.addEventListener('DOMContentLoaded', (event) => {
  document.querySelector('.close').addEventListener('click', close);
});
</script>
<div class="window">
    <a href="#" class="close">Закрыть</a>
</div>
</body>
</html>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *