Разработка интерактивного Web-приложения
По итогам изучения курса будет разработана работающая браузерная игра "Крестики-нолики".
Темы для изучения
HTML 5
Язык разметки гипертекста
CSS 3
Каскадные таблицы стилей
JavaScript
Браузерные сценарии
| Бесплатный редактор текста Notepad++ Этот редактор будет использоваться для написания кода |
Вместо Блокнота - тестовый редактор Notepad++!
Notepad++ имеет важные преимущества
Синтаксическая подсветка кода
и автоматические подсказки ускоряют разработку
Автоматические отступы
обеспечивают удобство форматирования кода
Поддержка Unicode
позволяет создавать мультиязычные приложения и использовать специальные символы
Каскадные таблицы стилей CSS 3
Создайте в текущей папке файл main.css и подключите его внутри тега <head> HTML файла следующим образом:
<link rel='stylesheet' href='main.css'>
<link rel='stylesheet' href='main.css'>
Настройте стили поля ввода и кнопки как показано на рисунке
Далее добавьте описание стилей ячеек таблицы td, сохраните изменения в файле main.css и обновите страницу в браузере.
Обратите внимание на псевдокласс :hover. С его помощью описываются стили элементов страницы при наведении на них указателя мыши.
Подробнее о стилях элементов можно ознакомиться на сайте htmlbook.ru.
Список стандартных цветов HTML можно найти на сайте colorscheme.ru.
Обратите внимание на псевдокласс :hover. С его помощью описываются стили элементов страницы при наведении на них указателя мыши.
Подробнее о стилях элементов можно ознакомиться на сайте htmlbook.ru.
Список стандартных цветов HTML можно найти на сайте colorscheme.ru.
Браузерные сценарии Javascript
Теперь добавим интерактивности нашему сайту. Код JavaScript можно добавлять как внутри HTML документа, так и создавая отдельный файл с расширением js. Для простоты мы воспользуемся первым способом и напишем обработчик нажатия на кнопку изменения размеров игрового поля непосредственно в разделе head нашего html документа.
Обратите внимание, что JavaScript чувствителен к регистру - большие и маленькие буквы имеют значение!
Код функции resize получился достаточно большим. Ведь при изменении размеров игрового поля необходимо прежде очистить имеющееся.
Далее нужно "подключить" созданную функцию к кнопке "Установить". Для этого необходимо изменить html-код следующим образом:
<button onclick="resize()">Установить</button>
Код функции resize получился достаточно большим. Ведь при изменении размеров игрового поля необходимо прежде очистить имеющееся.
Далее нужно "подключить" созданную функцию к кнопке "Установить". Для этого необходимо изменить html-код следующим образом:
<button onclick="resize()">Установить</button>
Сразу после функции resize (перед закрывающим тегом </script>) напишем обработчик нажатия на ячейки таблицы - функцию tdclick.
Для простоты крестики и нолики будут появляться случайным образом. В будущем можно добавить логики игры - чередовать крестики и нолики, проверять выигрыш игрока, а также запретить нажатие на не пустую ячейку!
Для простоты крестики и нолики будут появляться случайным образом. В будущем можно добавить логики игры - чередовать крестики и нолики, проверять выигрыш игрока, а также запретить нажатие на не пустую ячейку!
Спасибо за внимание!
