Файл: Занятие посвящено новым приёмам взаимодействия css и JavaScript, а также обработчикам событий.pdf

Web-программирование
Практическое занятие 3
Занятие посвящено новым приёмам взаимодействия CSS и JavaScript, а также обработчикам событий.
1. Занятие посвящено созданию простой игры для двух игроков. Суть её такова: нужно нажимать клавишу на клавиатуре как можно быстрее. Самый быстрый – выигрывает.
2. Нам понадобится такая заготовка страницы.
Всего нам нужно 3 элемента: два столбца для двух игроков, которые будут расти при нажатии клавиши, и третий блок, объявляющий победителя и служащий для перезапуска игры. Скрипт мы подключаем в самом конце, это важно! Потому что, если мы поставим скрипт в начало body и попробуем обратиться к какому-нибудь элементу страницы, у нас возникнет ошибка, ведь эти элементы ещё не описаны. Это одна из особенностей интерпретируемого языка.

Вспоминаем, что делает команда «onclick», и что значит такая запись. Зачем нужны скобки у слова newgame?
3. Создадим таблицу стилей. нарисуем два столбика разных цветов и разместим их на странице. С размещением нам помогут новые команды: position: absolute; - позволяет нам задавать расположение элемента без поправки на другие. left | bottom: px; - позволяет устанавливать отступы от края экрана. Повторите код.
Создаём таблицу стилей style.css
4. Создайте файл скрипта. Несколько слов о переменных. В нашем случае нам надо хранить высоту столбцов, увеличивать её по нажатию клавиши и объявлять победу, если кто-то из игроков достигнет какого-то порога высоты. Это наши переменные h1 и h2. Однако, мы можем хранить не только числа и строки. Мы может хранить сами элементы страницы. Они называются объектами. Когда мы создаём

переменную и присваиваем ей объект, мы можем управлять этим объектом. Это значит, что мы можем получить доступ к его свойствам, а также проводить с ним какие-то операции.
Чтобы каждый раз не искать объект на странице по его id, когда он нам нужен, мы найдём его один раз и приравняем к переменной. Теперь он «хранится» в ней, и мы будем им управлять через эту переменную.
Повторите код.
Создаём скрипт js1.js
5. Чтобы понять, что такое обработчики событий – вспомним, что такое событие. Событие – это какое действие, которое совершает пользователь на странице. Чтобы на это событие была какая-то реакция, нужно указать обработчик, то есть функцию, которая будет выполняться при наступлении этого события. добавляется он командой имя_объекта.addEventListener(“тип_события”, функция);
Так как нам не принципиально, на каком элементе страницы была нажата клавиша клавиатуры, мы добавим обработчик к самому документу.
Также обработчик можно и удалять. Своими параметрами он должен повторять параметры команды добавления обработчика. Удалять тоже бывает полезно, например, когда мы хотим, чтобы страница перестала реагировать на нажатия.
Тип события – keyup означает событие отпускания клавиши.
Что такое обработчики событий?
6. Мы можем узнать не только, что какая-то клавиша была нажата, но и какая именно. Для этого нам поможет параметр event. напишите его в аргументах функции, а в теле функции rise выведите в консоль event.keyCode. Консоль в браузере можно включить по клавише F12. Выберите две любые символьные клавиши, по одной на игрока, и запомните их код. Для пробела и клавиши «0» - это 32 и 96
Узнаём код клавиши
7. Используем блок if.
Когда у нас есть элемент страницы (в переменной column1), мы можем менять его CSS свойства напрямую. Для этого нужно написать имя_переменной.style.свойство = значение;
Чтобы увеличить высоту столбика на 10 пикселей, сначала увеличим переменную высоты на 10, а потом установим значение свойства CSS в значение переменной высоты. Добавим строку “px”, чтобы дать понять интерпретатору, что мы имеем ввиду именно пиксели. По умолчанию, наша переменная h1 была

численной, но когда мы складывали h1 и строку, произошло приведение типов, и h1 стала строкой. К ней добавилась строка px и получилось, например, 310px.
Обращение к CSS-свойствам
8. Самостоятельно дополните блок else if для второго игрока.
9. Самостоятельная работа.
Опишите CSS свойства для блока объявления победителя winnerBlock
•
Позиция: абсолютная
•
Цвет фона: lightgreen
•
Высота и ширина: 100 пикселей
•
Отступ слева: 125 пикселей, сверху: 250 пикселей.
•
Размер шрифта: 30 пунктов
•
Выравнивание шрифта: центр
10. Кроме указанных свойств, применим свойство display: none;, чтобы скрыть наш блок до конца игры. По умолчанию этот параметр имеет значение inline;
11. Когда высота столбика начинает превышать какое-то пороговое значение, мы выбираем победителя. Для этого мы удаляем обработчик нажатия (чтобы больше было невозможно менять результат), включаем отображение блока, установив display в значение inline, и пишем внутри блока текст с именем победителя. Повторите код и проверьте, что первый игрок может выиграть. Добавьте блок else if, для второго игрока.
Определяем победителя
12. Самостоятельно сделайте так, чтобы блок победителя появлялся не по центру, а над столбцом победителя.
Разное положение блока победителя

13. Как вы помните, мы присоединили функцию newgame() к блоку победителя. Чтобы начать игру заново, нужно вернуть переменные в их начальное положение, обновить свойства в соответствии с ними, спрятать блок победителя и стереть текст внутри. Повторите код и проверьте работоспособность игры.
Начинаем новую игру по нажатию на блок победителя
По экспериментируйте с параметрами игры, положение элементов, скорость роста и т.д.