+7 (812) 703-02-02 info@hse.spbstu.ru
Об Академии
Программы
Онлайн
Поступление
Мероприятия
Лето!
Расписание
Войти

Разработка игр и веб-приложений на JavaScript

Любой школьный класс | 36 занятий | Очно

Длительность курса: 144 ак. часа

Записаться

О чём курс

На самом деле не так сложно создать свой сайт. Вы можете создать свой личный сайт на любом бесплатном ресурсе, коих очень много сейчас в сети, выбрать шаблон и заполнить его информацией. Но, что, если вы хотите продать что-нибудь? Что делать, если вы не человек, который просто хочет убить свободное время, а владелец компании? Сайт необходим, как телефон в наши дни: качественный и гибкий сайт, который имеет интересный дизайн и работает без ошибок. Создание такого сайта занимает намного больше времени и сил, чем сайт, созданный на бесплатном ресурсе с помощью стандартных шаблонов.

Веб-разработчики являются теми людьми, которые создают дизайн и функционал сайта, используя для этого разные технологии, в том числе и язык JavaScript и библиотеку React.

JavaScript — это язык программирования высокого уровня, то есть код на нем понятный и хорошо читается.

В январе 2022 года JS занимает седьмое место в индексе TIOBE, который составляется на основе статистики поисковых запросов. Этот язык популярнее, чем PHP, Swift, Ruby, Go.

На языке JavaScript можно:

  • Разрабатывать мобильные приложения: с помощью фреймворка React Native создаются приложения для Android и iOS.
  • Серверные приложения: Node.js (серверная версия JavaScript) применяется для бэкенд-разработки.
  • Десктопные приложения: JavaScript применяется в офисных пакетах Microsoft и OpenOffice, в приложениях компании Adobe.
  • Программировать оборудование и бытовую технику, например, платёжные терминалы и телевизионные приставки.

Клиентская часть веб-приложений (frontend) - это интерфейс страницы, то есть всё, что видит пользователь: контент, кнопки, формы обратной связи, меню. С помощью JavaScript интерфейс реагирует на действия пользователя (клики мыши, нажатия клавиш), также язык отвечает за запоминание данных и автозаполнение форм.

В frontend-части сайтов язык используют для создания интерактива (анимаций, всплывающих форм, автозаполнения), так как он связан с HTML и CSS и может ими манипулировать.

В серверной части веб-приложений (backend) код пишут на платформе Node.js. На JS работают, например, запросы AJAX (asynchronous javascript and XML), которые отправляются на сервер в фоновом режиме, без перезагрузки веб-страницы, и push-уведомления — всплывающие сообщения в браузере, которые реализуются с помощью технологии Comet. Такие уведомления приходят со специального Comet-сервера, который постоянно поддерживает соединение с браузером. Как раз с помощью JavaScript устанавливается это соединение.

Мобильные приложения для Android и iOS также могут быть созданы на JavaScript. JavaScript используют в том случае, когда необходимо разработать кросс-платформенное приложение или сделать адаптацию уже имеющегося веб-приложения для мобильной ОС.

JavaScript поддерживают все современные популярные браузеры.

Спрос на рынке труда JavaScript-разработчиков сильно превышает предложение. Компании ищут разработчиков любого уровня, в том числе начинающих.

С JavaScript разобрались. Зачем нужен React и что это такое?

React (иногда React.js или ReactJS) — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. Он используется для визуализации и в связке с другими библиотеками. Например:

  • React Native можно использовать для создания мобильных приложений.
  • React 360 можно использовать для создания приложений виртуальной реальности.
  • Помимо всего вышеперечисленного есть и другие варианты.

Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов.

React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы.

В данной программе учащиеся делают свои первые шаги на пути получения такой интересной, непростой, современной и популярной профессии веб-разработчика.

Основная цель программы – изучение основ программирования на языке JavaScript и использования библиотеки React в объеме достаточном для разработки интерактивных элементов веб-страниц, простых игр и веб-приложений.

Чему научим

В результате освоения программы, учащиеся будут:

знать:

  • синтаксис языка JavaScript;
  • объектную модель документа;
  • основные типы данных в JavaScript;
  • основные события: указателя, клавиатуры, форм;
  • синтаксис создания объекта;
  • синтаксис создания класса;
  • принципы наследования;
  • принципы работы с библиотекой React;
  • принципы работы с разметкой JSX;
  • принципы работы с библиотекой Redux;

уметь:

  • работать с объектной моделью документа;
  • работать с разными типами данных в JavaScript;
  • использовать условные инструкции, циклы, массивы и функции;
  • считывать информацию с элементов форм;
  • создавать интерактивность на странице: смена картинок по событию, фотогалерея, слайд-шоу, выпадающее меню;
  • создавать программным способом иллюстрации;
  • анимировать иллюстрации, созданные программным способом;
  • создавать объекты;
  • создавать классы;
  • использовать промисы и модули;
  • обрабатывать ошибки;
  • работать с Map и Set;
  • использовать формат JSON;
  • работать с компонентами;
  • работать с формами в React;
  • использовать обработку событий в React;
  • использовать методы жизненного цикла компонентов;
  • работать с библиотекой Redux;
  • подключать библиотеку Redux к проекту;

владеть:

  • навыками разработки сценариев на языке JavaScript;
  • навыками разработки веб-приложений с помощью библиотеки React.

Модуль 1. Создание интерактивных элементов веб-страниц

Тема 1.1. Синтаксис языка и типы данных

  • Размещение сценария.
  • Особенности JavaScript.
  • Комментарии.
  • Переменные и константы.
  • Свободная типизация.

Практические занятия

  • Типы данных.
  • Массивы и объекты.
  • Операторы.
  • Ввод-вывод информации.
  • Упражнения и задачи на типы данных и ввод-вывод информации.

Самостоятельная работа

  • Упражнения и задачи на типы данных и ввод-вывод информации.

Тема 1.2. Условные инструкции и циклы

  • Условная инструкция if..else.
  • Инструкция switch.
  • Логические операторы в условии.
  • Цикл for.
  • Цикл do..while.
  • Цикл while.
  • Оператор break.
  • Оператор continue.

Практические занятия

  • Условная инструкция if..else.
  • Инструкция switch.
  • Логические операторы в условии.
  • Цикл for.
  • Цикл do..while.
  • Цикл while.
  • Оператор break.
  • Оператор continue.
  • Упражнения и задачи на использование условных инструкций и циклов.

Самостоятельная работа

  • Упражнения и задачи на использование условных инструкций и циклов.

Тема 1.3. Функции

  • Объявление и вызов функции. Аргументы функции. Возврат значения. Функциональные выражения. Стрелочные функции. Правила "этикета" для функций.

Практические занятия

  • Объявление и вызов функции.
  • Аргументы функции.
  • Возврат значения.
  • Функциональные выражения.
  • Стрелочные функции.
  • Упражнения и задачи на работу с функциями: создание, вызов, возврат значение.

Самостоятельная работа

  • Упражнения и задачи на работу с функциями: создание, вызов, возврат значение.

Тема 1.4. Массивы

  • Объявление массива.
  • Работа с массивом.
  • Особенности массивов.
  • Свойство length.
  • Перебор массива.
  • Методы для работы с массивами.

Практические занятия

  • Объявление массива.
  • Работа с массивом.
  • Особенности массивов.
  • Свойство length.
  • Перебор массива.
  • Методы для работы с массивами.
  • Упражнения и задачи на обработку массивов: перебор элементов массива, поиск максимального значения, вывод массива.

Самостоятельная работа

  • Упражнения и задачи на обработку массивов: перебор элементов массива, поиск максимального значения, вывод массива.

Тема 1.5. Объектная модель документа

  • Браузерное окружение.
  • Объектная модель документа.
  • Поиск элементов в dom.
  • Навигация по dom.
  • Свойства узлов.
  • Атрибуты и dom-свойства.
  • Создание, добавление и удаление узлов.

Практические занятия

  • Поиск элементов в dom.
  • Навигация по dom.
  • Свойства узлов.
  • Атрибуты и dom-свойства.
  • Создание, добавление и удаление узлов.
  • Упражнения и задачи на работу с объектной моделью документа: поиск элементов, изменение содержимого элемента.

Самостоятельная работа

  • Упражнения и задачи на работу с объектной моделью документа: поиск элементов, изменение содержимого элемента.

Тема 1.6. События

  • Обработчик события.
  • Объект события (Event).
  • Всплытие и погружение.
  • Делегирование событий.
  • События мыши.
  • События клавиатуры.
  • События указателя.
  • Прокрутка.
  • События документа.
  • Объект Image и предзагрузка изображений.

Практические занятия

  • Делегирование событий.
  • События мыши.
  • События клавиатуры.
  • События указателя.
  • Прокрутка.
  • События документа.
  • Объект Image и предзагрузка изображений.
  • Упражнения и задачи на обработку событий: изменение внешнего вида элемента по щелчку основной кнопки мыши, удаление элемента из объектной модели по щелчку основной кнопки мыши.

Самостоятельная работа

  • Упражнения и задачи на обработку событий: изменение внешнего вида элемента по щелчку основной кнопки мыши, удаление элемента из объектной модели по щелчку основной кнопки мыши.

Тема 1.7. Программное рисование и анимация

  • Рендеринг содержимого.
  • Рисование замкнутых фигур.
  • Рисование контуров.
  • Задание цвета и стилей линии.
  • Градиенты.
  • Вывод текста на холст.
  • Шаги анимации.
  • Управление ходом анимации.

Практические занятия

  • Рендеринг содержимого.
  • Рисование замкнутых фигур.
  • Рисование контуров.
  • Задание цвета и стилей линии.
  • Градиенты.
  • Вывод текста на холст.
  • Шаги анимации.
  • Управление ходом анимации.
  • Упражнения и задачи на программное рисование: создание заднего плана (статичного) и переднего плана (для программной анимации) на заданную тему с помощью программного рисования.
  • Упражнения и задачи на программную анимацию.

Самостоятельная работа

  • Упражнения и задачи на программное рисование: создание заднего плана (статичного) и переднего плана (для программной анимации) на заданную тему с помощью программного рисования.
  • Упражнения и задачи на программную анимацию.
  • Промежуточная аттестация – итоговая практическая работа по модулю.

Модуль 2. Разработка игры на JavaScript

Тема 2.1. Работа с формами и объект String

  • События форм и элементов.
  • Методы форм и элементов.
  • Свойство строки.
  • Методы класса String.
  • Сравнение строк.
  • Изменение строк.

Практические занятия

  • События форм и элементов.
  • Методы форм и элементов.
  • Свойство строки.
  • Методы класса String.
  • Сравнение строк.
  • Изменение строк.
  • Упражнения и задачи на работу с формами и строковым типом данных.

Самостоятельная работа

  • Упражнения и задачи на работу с формами и строковым типом данных.

Тема 2.2. Объекты Date и RegExp

  • Создание экземпляра объекта класса Date.
  • Автоисправление даты.
  • Методы класса Date.
  • Создание шаблона регулярного выражения.
  • Методы для работы с регулярными выражениями.
  • Расширенный поиск с флагами.
  • Регулярное выражение для проверки email.

Практические занятия

  • Создание экземпляра объекта класса Date.
  • Автоисправление даты.
  • Методы класса Date.
  • Создание шаблона регулярного выражения.
  • Методы для работы с регулярными выражениями.
  • Расширенный поиск с флагами.
  • Регулярное выражение для проверки email.
  • Упражнения и задачи на работу с классом Date.
  • Упражнения и задачи на работу с регулярными выражениями.

Самостоятельная работа

  • Упражнения и задачи на работу с классом Date.
  • Упражнения и задачи на работу с регулярными выражениями.

Тема 2.3. Введение в объекты

  • Литералы и свойства.
  • Оператор «in».
  • Цикл «for…in».
  • Копирование объектов и ссылки.
  • Методы объекта.
  • Конструкторы.
  • Тип данных Symbol.

Практические занятия

  • Литералы и свойства.
  • Оператор «in».
  • Цикл «for…in».
  • Копирование объектов и ссылки.
  • Методы объекта.
  • Конструкторы.
  • Тип данных Symbol.
  • Создание игры «Змейка».
  • Упражнения и задачи на работу с объектами.

Самостоятельная работа

  • Упражнения и задачи на работу с объектами.
  • Внесение правок и улучшений в игру «Змейка».

Тема 2.4. Перебираемые объекты

  • Строка – перебираемый объект.
  • Псевдомассивы и коллекции.
  • Структуры данных Map и Set.

Практические занятия

  • Строка – перебираемый объект.
  • Псевдомассивы и коллекции.
  • Структуры данных Map и Set.
  • Упражнения и задачи на работу с перебираемыми объектами, псевдомассивами, Map и Set.

Самостоятельная работа

  • Упражнения и задачи на работу с перебираемыми объектами, псевдомассивами, Map и Set.

Тема 2.5. Формат JSON

  • JSON.stringify. JSON.parse.
  • Использование reviver.
  • Замыкание.
  • Привязка контекста к функции.
  • Повторяем стрелочные функции.

Практические занятия

  • JSON.stringify. JSON.parse.
  • Использование reviver.
  • Замыкание.
  • Привязка контекста к функции.
  • Повторяем стрелочные функции.
  • Упражнения и задачи на работу с форматом JSON: получение данных, парсинг в объект, преобразование объекта в JSON.

Самостоятельная работа

  • Упражнения и задачи на работу с форматом JSON: получение данных, парсинг в объект, преобразование объекта в JSON.

Тема 2.6. Свойства объекта

  • Флаги и дескрипторы свойств.
  • Свойства - геттеры и сеттеры.
  • Прототипы и наследование.
  • Прототипное наследование.
  • Методы прототипов, объекты без свойства __proto__.

Практические занятия

  • Флаги и дескрипторы свойств.
  • Свойства - геттеры и сеттеры.
  • Прототипы и наследование.
  • Прототипное наследование.
  • Методы прототипов, объекты без свойства __proto__.
  • Упражнения и задачи на работу со свойствами объектов: создание объектов с геттерами и сеттерами, добавление методов в объекты.

Самостоятельная работа

  • Упражнения и задачи на работу со свойствами объектов: создание объектов с геттерами и сеттерами, добавление методов в объекты.

Тема 2.7. Классы

  • Класс: базовый синтаксис.
  • Наследование классов.
  • Статические свойства и методы.
  • Приватные и защищённые методы и свойства. Обработка ошибок: "try..catch".

Практические занятия

  • Класс: базовый синтаксис.
  • Наследование классов.
  • Статические свойства и методы.
  • Приватные и защищённые методы и свойства.
  • Обработка ошибок: "try..catch".
  • Упражнения и задачи на работу с классами: создание классов со статическими свойствами и методами, создание классов с приватными и защищенными свойствами и методами.

Самостоятельная работа

  • Упражнения и задачи на работу с классами: создание классов со статическими свойствами и методами, создание классов с приватными и защищенными свойствами и методами.

Тема 2.8. Модули

  • Модули: введение.
  • Экспорт и импорт.
  • Динамические импорты.

Практические занятия

  • Экспорт и импорт.
  • Динамические импорты.
  • Упражнения и задачи на работу с модулями: создание модуля, экспорт модуля, импорт модуля.

Самостоятельная работа

  • Упражнения и задачи на работу с модулями: создание модуля, экспорт модуля, импорт модуля.
  • Промежуточная аттестация – итоговая практическая работа по модулю.

Модуль 3. Введение в работу с React

Тема 3.1. Начало работы с React

  • Введние.
  • Среда разработки. ReactDOM и JSX.
  • Функциональные компоненты.

Практические занятия

  • ReactDOM и JSX.
  • Функциональные компоненты.
  • Упражнения и задачи на ReactDOM и JSX.
  • Упражнения и задачи на функциональные компоненты.

Самостоятельная работа

  • Упражнения и задачи на ReactDOM и JSX.
  • Упражнения и задачи на функциональные компоненты..

Тема 3.2. Файлы компонентов и структура проектов

  • Файлы компонентов.
  • Структура проекта.
  • Родительские и дочерние компоненты.

Практические занятия

  • Файлы компонентов.
  • Структура проекта.
  • Родительские и дочерние компоненты.
  • Упражнения и задачи на работу с родительскими и дочерними компонентами: создание и использование.

Самостоятельная работа

  • Упражнения и задачи на работу с родительскими и дочерними компонентами: создание и использование.

Тема 3.3. Основы стилизации

  • Стилизация в React с использованием CSS-классов.
  • О некоторых особенностях JSX и JavaScript.
  • Встроенные стили.

Практические занятия

  • Стилизация в React с использованием CSS-классов.
  • О некоторых особенностях JSX и JavaScript.
  • Встроенные стили.
  • Практикум: разработка TODO-приложения, часть первая.
  • Упражнения и задачи на стилизацию.

Самостоятельная работа

  • Практикум: разработка TODO-приложения, часть первая.
  • Упражнения и задачи на стилизацию.

Тема 3.4. Знакомство со свойствами компонентов

  • Атрибуты HTML-элементов.
  • Компоненты, подходящие для повторного использования.
  • Свойства компонентов. Динамическое формирование разметки и метод массивов map.

Практические занятия

  • Атрибуты HTML-элементов. Компоненты, подходящие для повторного использования. Свойства компонентов. Динамическое формирование разметки и метод массивов map.
  • Практикум: разработка TODO-приложения, часть вторая.
  • Упражнения и задачи на свойства компонентов и стилизация.
  • Упражнения и задачи на динамическое формирование разметки.

Самостоятельная работа

  • Практикум: разработка TODO-приложения, часть вторая.
  • Упражнения и задачи на свойства компонентов и стилизация.
  • Упражнения и задачи на динамическое формирование разметки.

Тема 3.5. Компоненты, основанные на классах

  • Введение.
  • Состояние компонентов.
  • Обработка событий в React.

Практические занятия

  • Состояние компонентов. Обработка событий в React.
  • Практикум: разработка TODO-приложения, часть третья.
  • Упражнения и задачи на компоненты, основанные на классах.
  • Задачи на состояние компонентов.

Самостоятельная работа

  • Практикум: разработка TODO-приложения, часть третья.
  • Упражнения и задачи на компоненты, основанные на классах.
  • Задачи на состояние компонентов.

Тема 3.6. Изменение состояния компонентов и жизненный цикл

  • Изменение состояния компонентов.
  • Методы жизненного цикла компонентов.
  • Условный рендеринг.
  • Логический опреатор && в условном рендеринге.

Практические занятия

  • Изменение состояния компонентов.
  • Методы жизненного цикла компонентов.
  • Условный рендеринг.
  • Логический опреатор && в условном рендеринге.
  • Практикум: разработка TODO-приложения, часть четвертая.
  • Упражнения и задачи на условный рендеринг.

Самостоятельная работа

  • Практикум: разработка TODO-приложения, часть четвертая.
  • Упражнения и задачи на условный рендеринг.
  • Промежуточная аттестация – итоговая практическая работа по модулю.

Модуль 4. Разработка веб-приложения на React

Тема 4.1. Загрузка данных из внешних источников

  • Загрузка данных из внешних источников.
  • Работа с формами.
  • Взаимодействие компонентов и текстовых полей.
  • Поле многострочного текста, флажки, переключатели и списки.

Практические занятия

  • Загрузка данных из внешних источников.
  • Работа с формами.
  • Взаимодействие компонентов и текстовых полей.
  • Поле многострочного текста, флажки, переключатели и списки.
  • Упражнения и задачи на работу с формами и полями: отслеживнание событий на полях формы, получние данных с поля по событию.

Самостоятельная работа

  • Упражнения и задачи на работу с формами и полями: отслеживнание событий на полях формы, получние данных с поля по событию.

Тема 4.2. Архитектура приложений

  • Архитектура приложений.
  • Паттерны Container и Component.

Практические занятия

  • Архитектура приложений.
  • Паттерны Container и Component.
  • Практикум - разработка редактируемой таблицы: создание стилизованной таблицы, добавление фильтра и кнопок для редактирования, отслеживание событий, изменение информации в таблице.

Самостоятельная работа

  • Практикум - разработка редактируемой таблицы: создание стилизованной таблицы, добавление фильтра и кнопок для редактирования, отслеживание событий, изменение информации в таблице.

Тема 4.3. Библиотека Redux

  • Что такое Redux?
  • Простой пример использования Redux.
  • Использование redux-toolkit.

Практические занятия

  • Простой пример использования Redux. Использование redux-toolkit.
  • Упражнения и задачи на использование библиотеки Redux.

Самостоятельная работа

  • Упражнения и задачи на использование библиотеки Redux.

Тема 4.4. Работа над проектом

  • Выбор темы.
  • Постановка и обсуждение задачи.
  • Разработка алгоритма.
  • Описание необходимых компонентов.
  • Написание кода.
  • Отладка и тестирование.

Практические занятия

  • Выбор темы.
  • Постановка и обсуждение задачи.
  • Разработка алгоритма.
  • Описание необходимых компонентов.
  • Написание кода.
  • Отладка и тестирование.
  • Работа над итоговым проектом: разработка веб-приложения на заданную тему.

Самостоятельная работа

  • Работа над итоговым проектом: разработка веб-приложения на заданную тему.

Тема 4.5. Экзамен

  • Защита проекта

Преподаватели

Стоимость

--

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

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

Данная программа рассчитана на учащихся общеобразовательных школ 8-11 классов, владеющих основными навыками работы на ПК, знанием основ математики, обладающих математической культурой и успешно прошедших вступительное тестирование на программу.

Тест № ВКТ-531 Основы информатики. Математическая культура (Код Будущего)

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

  1. Знания курса математики за 7 классов общеобразовательной школы.
  2. Общие принципы организации и работы ЭВМ. Представление информации в памяти компьютера.
  3. Перевод чисел из одной системы счисления в другие.
  4. Знание основных логических операций.
  5. Вычисление и упрощение логических выражений.
  6. Умение анализировать и формализовать постановку задачи.
  7. Умение решать задачу в общем виде, строить математическую модель.

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

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

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

18 лет

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

10

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

73

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

3 500

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

4

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

36

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