На прошлом уроке мы познакомились с основами языка javascript. На этот раз мы продолжим его изучение и сможем сделать что-то полезное.
В прошлом уроке мы научились обрабатывать событие нажатия на кнопку "Играть крестиком". Сейчас при нажатии на кнопку мы показываем окошко, а что должно происходить на самом деле? На самом деле должен прятаться первый экран и показываться второй. После этого мы можем кликать мышкой по ячейкам игрового поля, то есть играть.
Когда мы с вами разбирались со стилями и классами мы узнали, что можно прятать и показывать элементы при помощи стилей. Для этого мы создали специальный класс hidden. Добавляя и удаляя этот класс мы можем показывать и прятать любой элемент. И мы можем делать это при помощи javascript!
Смотрите, как это делается:
Будьте внимательны. Здесь мы добавили новые атрибуты id к элементам первого и второго экранов. Этот атрибут позволяет установить уникальное имя для элемента. Теперь это имя означает именно этот элемент. Мы можем использовать эти имена в стилях и в скриптах.
В скриптах идентификаторы превращаются в переменные, которые носят имена назначенных нами идентификаторов. Таким образом мы можем обращаться к элементам просто используя их имя. В этих переменных хранится значение типа объект. Мы уже знакомы со строковыми значениями. Значения могут быть также числовыми. А могут быть и объектами. Объект - это сложное, структурированное значение, которое может объединять в себе другие значения.
Ко вложенным значениям мы можем обращаться при помощи точки: screen1.classList - так мы обращаемся к списку классов элемента screen1. Список классов в свою очередь тоже является объектом. screen1.classList.add('hidden') - так мы добавляем класс hidden в список классов элемента screen1. Соответственно screen2.classList.remove('hidden') - так мы удаляем класс из списка классов элемента screen2. В результате первый экран прячется, а второй появляется. Сохраните и проверьте.
Отлично, все должно работать. Вторая кнопка должна работать так же, мы можем создать такую же функцию:
Сохраните и проверьте. Теперь работают обе кнопки. По нажатию на любую из них мы переходим ко второму экрану. Прекрасно, так и должно быть.
Итак, перед нами игровое поле. При клике на каждую клетку в ней должна появляться фигура, крестик или нолик. Мы уже делали это, мы добавляли класс x или o и тогда на клетке рисовалась фигура. У нас сейчас достаточно знаний, чтобы повторить это:
Мы сделали все то же самое, что и для кнопок - добавили идентификатор, добавили функцию. Все хорошо, за исключением того, что нам предстоит сделать это еще восемь раз для каждой ячейки. Этой проблемой мы займемся позже, на следующем уроке, а пока убедитесь, что все работает как надо. Обновляем страницу, жмем на кнопку, попадаем на второй экран, кликаем по первой ячейке и на ней появляется крестик. Отлично!
На следующем уроке мы заставим работать все ячейки, познакомимся с циклами. Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки.
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.