+7 (812) 703-02-02 info@hse.spbstu.ru

Создание интерактивных страниц и игр на HTML и JavaScript (годовая программа)

C 6 класса | 28 занятий | Очно или онлайн

Длительность курса: 84 ак. часа (28 занятий по 2 ак. часа + 28 часов домашней работы)

О чём курс

Все большая доля информации предоставляется всемирной сетью интернет. Для разработки ресурсов интернет используется язык разметки гипертекста (HTML). Язык HTML активно используется не только в интернете, но и вне сети. Умение создавать документы с использованием языка HTML это задача не только для специалистов узкой области разработки интернет ресурсов, но и для каждого грамотного человека.

А изучить еще и язык JavaScript – отличная идея, потому что этот язык используется повсюду. Его поддерживают браузеры Chrome, Firefox, Opera, Internet Explorer, Edge и другие. Возможности JavaScript позволяют программистам делать из обычных веб-страниц полноценные интерактивные приложения и игры. Но и это еще не всё: JavaScript также работает на интернет-серверах и даже может использоваться для управления роботами и другими устройствами.

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

Курс ориентирован на школьников не младше 6 класса.

Программа является годовой: занятия по программе начинаются в сентябре и заканчиваются в мае.

Чему научим

В результате обучения учащиеся получат знания и навыки в следующих областях:

  • Изучат принцип гипертекста.
  • Освоят азы языка HTML и спецификации CSS.
  • Получат базовые знания по стилистике и структуре веб-страниц, которые помогут им создавать хорошо оформленные и удобочитаемые тексты.
  • Получат представление о типах данных языка JavaScript, переменной, массиве и объекте, функции, событиях браузера, мыши,  клавиатуры, арифметических операциях и их  применении к различным типам данных, функциях для программного  рисования.
  • Будут уметь создавать переменные,  массивы и объекты, создавать функции и работать  с ними, применять условные  инструкции, работать с циклами, создавать программную  анимацию, обрабатывать события.

Занятие 1

Введение

  • Представление текстовой информации: заголовки, параграфы, списки, поля и отступы.
  • Шрифты: семейство, размер, цвет, курсив и полужирное выделение
  • Файлы и папки. Имя файла, тип файла

Язык разметки гипертекста HTML

  • Понятие гипертекст
  • Понятие тег
  • Структура HTML-документа
  • Основные теги форматирования текста
  • Заголовки, параграф, шрифт

Занятие 2

Вложенность тегов

Списки

  • Нумерованные
  • Маркированные

Занятие 3

Теги логического выделения текста

Адресация в Интернет

  • Понятие корневой папки проекта
  • Понятие и принцип формирования URL

Занятие 4

Графика

  • Форматы изображений в интернет
  • Встраивание изображения на страницу
  • Свойства изображения

Занятие 5

Ссылки

  • Тэги ссылок
  • Внешние и внутренние ссылки
  • Закладки на странице

Занятие 6

Оформление текста страницы

  • Логическое и физическое форматирование
  • Представление цвета в модели RGB

Стилевые описания

  • Способы определения стилей
  • Абстрактные классы
  • Динамические эффекты на странице, псевдоклассы
  • Применение стилей

Занятие 7

Анимация в CSS

  • Анимация по действию пользователя
  • Автоматическая анимация содержимого

Занятие 8

Формы

  • Тег form
  • Элементы формы: текстовое поле, список, переключатель, флажок, число, кнопка
  • Стилевое оформление форм

Занятие 9

Понятие ширины объекта

Обтекание объектов

Занятие 10

Введение в JavaScript

  • Знакомьтесь: JavaScript
  • Пробуем JavaScript
  • Строение JavaScript-программы

Типы данных и переменные

  • Числа
  • Операторы
  • Переменные
  • Строки
  • Булевы значения
  • Undefined и null

Занятие 11

Массивы

  • Создание массива
  • Доступ к элементам массива
  • Создание и изменение элементов
  • Работаем с массивами

Занятие 12

Объекты

  • Создание объектов
  • Доступ к свойствам объекта
  • Массивы объектов
  • Работа с объектами

Занятие 13

Условные конструкции

  • if..else
  • switch

Занятие 14

Циклы

  • while
  • do..while
  • for
  • Массивы и циклы
  • Объекты и циклы: for..in

Занятие 15

Создаем игру «Виселица»

  • Взаимодействие с игроком
  • Проектирование игры
  • Программируем игру
  • Код игры

Занятие 16-17

Функции

  • Базовое устройство функции
  • Вызов функции
  • Передача аргументов в функцию
  • Возврат значения из функции
  • Вызов функции в качестве значения
  • Упрощаем код с помощью функций
  • Ранний выход из функции по return

Занятие 18-19

Элемент canvas

  • Создаем холст
  • Рисование на холсте
  • Выбор цвета
  • Рисование фигур
  • Рисование линий или путей
  • Заливка путей цветом
  • Рисование дуг и окружностей
  • Рисование нескольких окружностей с помощью функции

Занятие 20

Анимация в canvas

  • Движение по странице
  • Изменение размера квадрата
  • Случайная пчела
  • Отскакивающий мяч

Занятие 21

Управление анимацией с клавиатуры

  • События клавиатуры
  • Управляем мячом с клавиатуры
  • Код программы
  • Запуск программы

Занятие 22-23

Создаем игру «Змейка»

  • Игровой процесс
  • Структура игры
  • Начинаем писать игру
  • Рисуем рамку
  • Отображение счета
  • Конец игры
  • Создаем конструктор Block
  • Создаем змейку
  • Перемещаем змейку
  • Управляем змейкой с клавиатуры
  • Создаем яблоко
  • Код игры

Занятие 24-25

Работа с формой в JS

  • Обращение к форме
  • Обращение к элементу формы
  • Читаем информацию из элемента формы

Создаем игру «Виселица» с помощью формы и рисования

  • Взаимодействие с игроком
  • Проектирование игры
  • Программируем игру
  • Код игры

Выбираем тему для итоговой игры

Занятие 26-27

Работа над собственной игрой

Занятие 28

Итоговое занятие

  • Доработка игры
  • Презентация игры
  • Подведение итогов

Стоимость

29 400 ₽

Есть скидки от 10% до 20%. Узнать подробнее...

Как поступить

Для тех, кто еще не учится в АИШ:

  • Вступительное тестирование
Тест № АИШ-001 Основы компьютерной грамотности

Тест на владение практическими навыками работы в ОС MS Windows:

  • Проходной балл: 60
  • Длительность: 60 минут
  • Количество попыток: 2

Необходимы знания и навыки для успешного прохождения тестирования:

  • Понятия файла
  • Понятие папки
  • Расширение файлов
  • Работа с файловой системой: копирование, удаление, перемещение, поиск, создание файлов и папок
  • Горячие клавиши
  • Работа с оконными приложениями
  • Работа с мышкой
  • Устройство и принцип работы компьютера
  • Операционная система: что это такое, цели и задачи

Как записаться на занятия

О дате начала набора будет объявлено дополнительно.

Академия информатики для школьников в цифрах

18 лет

успешной работы
в Политехническом университете Петра Великого

10

направлений обучения

73

учебные программы

3 500

школьников
проходят обучение
ежегодно

4

учебные площадки

36

компьютерных классов