Занятие посвящено новым приёмам взаимодействия css и JavaScript, а также обработчикам событий
 Скачать 372.82 Kb.
|
|
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() к блоку победителя. Чтобы начать игру заново, нужно вернуть переменные в их начальное положение, обновить свойства в соответствии с ними, спрятать блок победителя и стереть текст внутри. Повторите код и проверьте работоспособность игры. Начинаем новую игру по нажатию на блок победителя По экспериментируйте с параметрами игры, положение элементов, скорость роста и т.д. |