Основы программирования на JavaScript

  • в группе, индивидуально,

Коротко о курсе

  • Работа с переменными, массивами и объектами.
  • Профессиональное написание и использование JavaScript-скриптов на сайте.
  • Динамическое модифицирование веб-страниц. Обработка событийя.
  • Работа с изображениями: ролловеры, фотогалереи, анимированные слайд-шоу.
  • Использование предопределенных объектов JavaScript. Создание анимации.
  • Улучшение веб-форм: верификация и сообщения об ошибках.

Краткое описание курса

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

Подробно о курсе

Язык JavaScript популярен и востребован сегодня во всем мире при решении широкого круга задач веб-разработки. С его помощью на сайты добавляют интерактивные элементы (меню, галереи, «табы» и т. п.), проверку веб-форм, создают анимацию, улучшают взаимодействие сайта с посетителем. Всему этому ребята научатся на курсе «Основы программирования на JavaScript».

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

Программирование нередко отпугивает новичков своей абстрактностью. Учебные примеры «заточены» на освоение теории, но не отвечают на главный вопрос: а как это можно использовать на практике, для чего это нужно? Сложность в освоении языков программирования состоит в том, что без владения теоретической базой трудно создавать настоящие, интересные проекты, а без таких проектов сложно понять, зачем нужна теория.

Значительный опыт работы в области обучения веб-разработке позволил нам создать курс, в котором число абстрактных упражнений сведено к минимуму. Уже со второго месяца обучения ребята начинают применять полученные знания для решения конкретных задач, возникающих при создании сайтов. Это облегчает понимание теории, способствует более глубокому её усвоению, так как сразу становится понятно, зачем она нужна и как её использовать.

Закончив курс «Основы программирования на JavaScript», школьники смогут создавать современные интерактивные сайты, повышать привлекательность своих веб-страниц благодаря добавлению анимированных элементов, улучшать взаимодействие сайта с посетителем. Специалисты, обладающие такими знаниями и навыками, очень востребованы сегодня и, возможно, этот курс станет началом профессионального пути Вашего ребёнка.

Программа курса

Ниже представлена программа курса . Представлен общий вариант программы, некоторые разделы могут варьироваться в зависимости от возрастной категории обучаемых.

Тема 1. Введение в Java Script. Пишем первую программу на Java Script

Введение в программирование. Что такое компьютерная программа. Особенности языка JavaScript. Существующие стандарты JS. Добавление JavaScript на страницу. Внешние файлы JavaScript. Прикрепление внешнего файла JavaScript. Ваша первая программа на JavaScript. Написание текста на веб-странице. Вывод текста на экран. Вывод текста в консоль браузера.

Тема 2. Грамматика Java Script. Базовые типы

Типы данных в JavaScript. Тривиальные типы. Базовые типы. Переменные. Создание переменной. Использование переменных. Особенности использования констант в JavaScript.

Число. Операторы для работы с числами. Операторы инкремента и декремента.

Строка. Выражения. Формат работы «обратные косые кавычки». Запрос информации от пользователя.

Работа с типами данных и переменными. Приведение типов. Объединение строк. Объединение чисел и строк. Функции проверки типов.

Тема 3. Динамическое модифицирование страниц

Объектная модель документа (DOM). Типы узлов. Методы узлов. Перемещение по DOM.

Выбор элементов страницы: по идентификатору, по классам CSS. Добавление содержимого на веб-страницу. Создание, вставка и удаление узла.

Тема 4. Добавление в программу логики и контроля

Логический тип данных. Операторы сравнения. Сравнение строк. Логические операторы.

Интеллектуальная реакция программы. Основы условных выражений. Проверка истинности более одного условия. Проверка истинности как минимум одного условия. Отрицание условия. Вложение условных выражений.

Тема 5. Реализация повторяющихся задач с использованием циклов

Понятие цикла. Цикл For. Инструкции прерывания и продолжения.

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

Объектный тип данных: массивы. Создание массива. Длина массива. Доступ к элементам в массиве.

Использование циклов для перебора элементов массива. Цикл For/of.

Добавление элементов в массив. Удаление элементов массива. Получение части массива. Сложение массивов. Поиск элементов в массиве. Сортировка массива.

Деструктуризация массивов. Операторы rest и spread.

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

Функции: превращение полезного кода в многократно используемые команды. Передача информации функциям. Возвращение информации от функций. Функция как значение переменной.

Области видимости. Глобальные и локальные переменные. Блочная видимость переменных в новом стандарте ECMAScript. Анонимная функция. Стрелочные функции.

Использование функций с массивами. Обработка каждого элемента в массиве. Функция forEach(). Фильтрация массива.

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

Что такое события. События мыши. События документа/окна. События форм. События клавиатуры.

Обработка событий. Базовая (исходная) модель обработки событий. Отмена стандартной реакции элементов на события. Модель W3C DOM.

Тема 9. Объекты

Объектный тип данных: объект. Создание объекта. Свойства объекта. Обращение к свойствам объекта. Сравнение объектов. Методы объекта. Обнуление объекта. Использование цикла For/in для перебора свойств объекта.

Переменная this в JavaScript: особенности использования. Особенности использования стрелочных функций в объектах. Деструктуризация объектов.

Тема 10. Встроенные объекты JavaScript

Глобальный объект Window. Понятие глобального объекта. Свойства и методы глобального объекта. Работа с окном: создание, перемещение, передача фокуса, закрытие.

Объект Math. Методы объекта Math. Применение методов объекта Math с массивами.

Объект Date. Методы объекта Date. Создание календаря.

Тема 11. Использование таймеров

Таймеры setTimeout() и setInterval(). Запуск и остановка сценария по таймеру.

Тема 12. Введение в jQuery. Селекторы и методы jQuery

О библиотеках JavaScript. Где взять jQuery. Загрузка файла jQuery. Добавление библиотеки jQuery на страницу.

jQuery и DOM. Выбор элементов страницы: подход jQuery. Структура HTML с точки зрения jQuery. Селекторы СSS и селекторы jQuery: различия и предназначение.

Эффекты скольжения и изменения прозрачности в jQuery. Конкатенация и слияние данных. Использование методов append() и remove(). Ключевое слово this в jQuery: особенности использования.

Тема 13. События и функции jQuery

Действие/реакция. Связывание события с элементом. Удаление событий. Перебор элементов с помощью итератора each().

Использование функций. Структура функции. Пользовательские функции. Именованные и анонимные функции. Передача данных функции. Возвращение информации от функций. Условные конструкции в jQuery.

Тема 14. Операции со структурой страниц в jQuery

Назначение классов элементам. Перемещение по дереву DOM. Методы обхода дерева DOM. Методы parent(), children(), next(). Сцепленные вызовы методов.

Добавление содержимого на страницу. Методы detach(), before(), after(). Создание интерактивного меню.

Массивы в jQuery. Хранение элементов в массиве. Изменение элементов массива методом replaceWith(). Метод each() и перебор массивов. Фильтры jQuery.

Тема 15. Анимация и эффекты

Эффекты jQuery. Как jQuery выполняет анимацию элементов. Основы отображения и сокрытия. Постепенное появление и исчезновение элементов. Эффекты изменения прозрачности. Скользящие элементы. Задержка при использовании эффектов.

Пользовательские эффекты и метод animate(). Что можно анимировать. Абсолютная и относительная анимация. Методы работы с таймером JS и jQuery.

Тема 16. Использование плагинов для расширения возможностей jQuery

Работа с изображениями. Изменение атрибута изображения src. Предварительная загрузка изображений. Сменяемые изображения.

Создание галереи изображений. Плагины LightBox, FancyBox, Cycle 2. Создание выпадающего меню с помощью плагина Superfish.

Тема 17. Улучшение веб-форм

Расширение возможностей jQuery с помощью библиотеки jQuery UI.

Структура форм. Выбор элементов форм. Фильтры jQuery для форм. Настройка виджета datepicker. Использование виджета button для создания стильных кнопок. Ограничение ввода числовых данных с помощью виджета slider. Верификация формы. Плагин jQuery Validation. Базовая верификация. Расширенная верификация. Расширенные сообщения об ошибках.

Вернуться в начало раздела

Работы учеников

Работы, выполненные ребятами в ходе изучения курса самостоятельно:

  • Скриншот работы
    Конкурсная работа Акима Дулимова. Номинация «Веб-разработка», 2 место.
  • Слайдшоу с картинами художников на сайте. Работа Дарьи Гольцовой, 15 лет.
  • Слайдшоу, имитирующее анимацию. Работа Евы Грибковой, 15 лет.

Организация занятий

Необходимая подготовка и возраст

Для успешного освоения программы курса нужно умение создавать статические веб-страницы на языках HTML5 и CSS3. Получить необходимые знания можно на нашем курсе «Веб-дизайн» или самостоятельно. Мы принимаем на данный курс ребят .

Продолжительность курса и график занятий

Продолжительность курса составляет (1 учебный час равен 45 минутам). Все указанное время слушатели работают с преподавателем за собственным рабочим местом.

Обучение проводится в группах выходного дня (суббота, воскресенье) и по будням во временном интервале с 10.00 до 17.00. Типовой график занятий включает 2 академических часа в неделю, например, в воскресенье с 11.10 до 12.40. Таким образом, в месяц проводится 4 занятия по 2 академических часа. Такой режим позволяет избежать чрезмерной перегрузки детей.

Занятия на наших курсах совпадают со школьным учебным годом и обычно начинаются в сентябре–октябре, заканчиваясь в мае. Таким образом, на протяжении учебного года ребенок получает полезное и увлекательное дополнительное образование, которое со временем может стать основой будущей профессии.

Обучение по данному курсу проводится по адресу:

ул. Карла Маркса, 67

Стоимость обучения и запись на курс

Оплата обучения производится помесячно или единовременно. Стоимость курса при помесячной оплате составляет . При этом осуществлять предоплату не требуется, более того, вы имеете право бесплатно посетить первое занятие (2 академических часа) и уже после этого принять решение о продолжении обучения и оплате занятий удобным для вас способом.

Документ, подтверждающий прохождение курса

По окончании обучения и после сдачи практических зачетов вы получите Сертификат об окончании курса .

Так выглядит сертификат, выдаваемый по курсу Основы программирования на JavaScript.

Согласие на обработку персональных данных

Настоящим в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» от 27.07.2006 года свободно, своей волей и в своем интересе выражаю свое безусловное согласие на обработку моих персональных данных АНО ДПО «ИНСТИТУТ СОВРЕМЕННОГО ОБРАЗОВАНИЯ» (ОГРН 1143600000290, ИНН 3666999768), зарегистрированным в соответствии с законодательством РФ по адресу: ул. Карла Маркса, дом 67, Воронеж, Воронежская область, Россия, 394036 (далее по тексту — Оператор).
Персональные данные — любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу.
Настоящее Согласие выдано мною на обработку следующих персональных данных:
 — Имя;
 — Телефон.

Согласие дано Оператору для совершения следующих действий с моими персональными данными с использованием средств автоматизации и/или без использования таких средств: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, а также осуществление любых иных действий, предусмотренных действующим законодательством РФ как неавтоматизированными, так и автоматизированными способами. Данное согласие дается Оператору для обработки моих персональных данных в следующих целях:
 — предоставление мне услуг/работ;
 — направление в мой адрес уведомлений, касающихся предоставляемых услуг/работ;
 — подготовка и направление ответов на мои запросы;
 — направление в мой адрес информации, в том числе рекламной, о мероприятиях/товарах/услугах/работах Оператора.

Настоящее согласие действует до момента его отзыва путем направления соответствующего уведомления на электронный адрес osnova@webfly.pro. В случае отзыва мною согласия на обработку персональных данных Оператор вправе продолжить обработку персональных данных без моего согласия при наличии оснований, указанных в пунктах 2 — 11 части 1 статьи 6, части 2 статьи 10 и части 2 статьи 11 Федерального закона № 152-ФЗ «О персональных данных» от 27.07.2006 г.