• Общая информация о языке JavaScript (история возникновения, сфера использования).
• Среда разработки и редакторы кода JavaScript.
• Написание кода в консоли браузера.
• Способы интеграции скрипта в веб-страницу.
• Понятие переменной, ключевые слова var и let.
• Модальные окна alert, prompt и confirm.

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

В текстовом редакторе Notepad++ осуществить простой диалог с пользователем с использованием окна prompt.



Домашнее задание

Установить на своем компьютере текстовый редактор Notepad++. Создать документ html и подключить к нему внешний скрипт с окном alert, которое приветствует пользователя.

• Типы данных в языке JavaScript.
• Примитивные типы и объекты.
• Целочисленные, вещественные, логические, символьные и строковые типы данных.
• Математические операции и операторы сравнения.
• Условный оператор if-else.
• Оператор множественного выбора switch.

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

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



Домашнее задание

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

• Циклы и массивы Понятие цикла. Типы циклов. Циклы while, do-while и for.
• Массив в JavaScript. Одномерные и многомерные массивы.
• Создание, инициализация и заполнение массива. Генерация случайных чисел.
• Перебор и сортировка массива.

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

Написать игру «Угадай число».

Создать двумерный массив, заполнить его случайными целыми числами и последовательно вывести в окне alert нечетные числа массива.



Домашнее задание

Создать одномерный массив, заполнить его целыми числами, найти наименьший и наибольший элемент массива и их индексы.

• Понятие функции в программировании.
• Объявление функции.
• Входящие параметры. Область видимости переменных.
• Возвращаемое значение.

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

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

Домашнее задание

Написать функцию, которая осуществляет действия, предусмотренные домашним заданием по теме № 2 (Типы данных и условные конструкции в JavaScript).

• Понятие и принципы ООП.
• Свойства и методы объекта.
• Создание объектов. Конструкторы.
• Понятие инкапсуляции. Ее реализация в JavaScript.
• Классы в JavaScript.

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

Создать объект Employee (Сотрудник), имеющий свойства: id (табельный номер),name (имя), salary(зарплата), age (возраст), stage(стаж) и метод print(), выводящий информацию о сотруднике.

Создать конструктор объекта Employee с вышеперечисленными полями и методами.

Создать класс Employee с вышеперечисленными полями и методами.



Домашнее задание

Создать конструктор, который описывает любой объект окружающей действительности. С помощью данного конструктора создать несколько объектов и записать их в массив.

Написать функцию сортировки данного массива по одному из полей объекта.

• Понятие DOM. Объект document.
• Получение элемента веб-страницы. Манипулирование элементами. Работа со стилями и аттрибутами.
• Добавление и изменение элемента.
• Обработка событий в JavaScript. Основные типы событий. Обработчики событий. Объект event.
• Работа с браузером. Хранение информации в браузере клиента. Куки, localStorage, sessionStorage.

Практическое занятие № 6Создать адаптивное раскрывающееся двухуровневое меню средствами JavaScript и CSS. При уменьшении ширины браузера до 400px меню заменяется кнопкой-гамбургером.





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

Создать html-таблицу сотрудников и написать на JavaScript функцию ее сортировки, используя объктно-ориетированное программирование и методы работы с DOM.



Домашнее задание

Написать функцию, которая при клике на кнопку добавляет/удаляет атрибут readonly текстового поля input.

• Библиотека JQuery: понятие и сфера применения.
• Способы подключения JQuery.
• Селекторы элементов. Манипулирование стилями элементов.
• Добавление и удаление элементов веб-страницы с помощью JQuery.
• Введение в обработку событий.
• Эффекты анимации JQuery.

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

С помощью JQuery и объекта sessionStorage реализовать функцию добавления товара в корзину Интернет-магазина.



Домашнее задание

Создать модальное окно html, которое раскрывается/закрывается при клике на кнопку. Функция открытия/скрытие окна и добавления текста пишется с помощью JQuery. Окно должно находиться строго по центру экрана.

• Взаимодействие приложения с сервером, GET и POST запросы.
• Понятие синхронного и асинхронного запроса к серверу. Технология Ajax.
• Передача данных на сервер. Синхронизация форм, формат JSON.
• Методы load, get, post, ajax.

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

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

Написать скрипт, который передает на сервер информацию о товарах в формате JSON. Информация берется из таблицы html..



Домашнее задание

Написать скрипт валидации формы логина и пароля перед их отправкой на сервер.

• Понятие и сферы использования фрэймворка Bootstrap.
• Способы подключения Bootstrap.
• Введение в адаптивную верству с помощью Bootstrap.
• Сетка Bootstrap.
• Стили и компоненты.

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

Сверстать адаптивную веб-страницу (меню, 2 колонки, футер) с помощью Bootstrap.



Домашнее задание

Дополнить веб-страницу, сверстанную в аудитории, слайдером (каруселью) Bootstrap.

• Технология MVC. Взаимодействие представления, модели и контроллера.
• Структура приложения на Angular JS. Понятие модуля.
• Контроллеры в Angular JS. Объект $scope.
• Директивы Angular JS.

Практическое занятие № 11Написать приложение по наполнению и изменению списка товаров интернет-магазина с использованием Angular JS.



Домашнее задание

Создать модуль Angular JS.