JavaScript

Репозиторий курса "Проектирование Сетевых Приложений"

Лекции

Лекция 1. Введение в Web

Основы Web: URI, Document, HTTP, HTML, CSS, Кратко JavaScript

• Презентация

Лекция 2. Основы JavaScript

Основы JavaScript: типы, операторы, функции, объекты, коллекции, классы, DOM

• Презентация

Лекция 3. Углубленный JavaScript

Углубленный JavaScript: замыкания, контекст, прототипы, наследования, модули, обработка ошибок, события

• Презентация

Лекция 4. Архитектура Web

DNS, браузерный рендеринг, клиент-серверная модель, история веб-приложений, NPM, Ajax, Cookie, Cors

• Презентация

Лекция 5. Бэкенд на JavaScript

Node.js. Бэкенд на JavaScript

• Презентация

Лекция 6. AJAX

• Презентация

Лекция 7. Асинхронный JavaScript и Лекция 8. Транспайлинг

Event Loop, промисы, async/await, fetch

Полифиллы, Транспайлинг, Постпроцессоры, Бандлеры

• Презентация

Задания

• Установка Python, NodeJS, Git, Docker на Windows, MacOS, Linux

• Основные команды git и описание Docker Compose.

• каждому студенту весь код необходимо переписать по теме, только у вас будут такие названия переменных, массивов, страниц и тд. Никаких общих text, search, order, cart, basket, service и т.д. Это должны быть airplane, document, software_request, shipName, softwarePrice и тд.

Модуль 1

Лабораторная работа 1

• Задание: Создание калькулятора. Верстка на HTML, CSS.
• Порядок показа: объяснить все стили и теги, которые потребовалось добавить для повторения стилистики выбранного сайта
• Контрольные вопросы: основные составляющие web, опишите URI, напишите HTML для страницы из заголовка и абзаца текста, отличительные черты протокола HTTP

• Методические указания

Лабораторная работа 2

• Задание: Создание калькулятора. Функции на JavaScript.
• Порядок показа: показать и объяснить индивидуальную операцию. Объяснить как связана кнопка = и код программы. Как по этапа происходит сложение в программме.
• Контрольные вопросы: объясните, как связана кнопка = с кодом лабораторной; объясните от начала до конца, что проиходит при сложении двух чисел (что нажимает пользователь, что происходит в коде); напишите класс кнопки, которая выводит количество нажатий; напишите код поиска максимального элемента в массиве

• Методические указания

Лабораторная работа 3

• Задание: Знакомство с node, npm. Верстка интерфейса с карточками (страница списка с фильтрацией и страница подробнее), данные получать через mock объекты (коллекция). Добавить кнопку добавления (копировать первую карточку), кнопку удаления карточки. В хедере на обеих страницах должна быть кнопка Домой
• Порядок показа: объяснить состав компонентов в лабораторной, во вкладке Network показать GET запрос получения html и содержимое Response
• Контрольные вопросы: опишите структуру вашего проекта, что такое MVC, что такое роутинг, ключевые этапы рендера

• Методические указания

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

• Задание: Работа с коллекциями, функциями, классами.
• Порядок показа: объяснить реализацию требуемых функций

• Методические указания

Рубежный контроль 1

Модуль 2

Лабораторная работа 4

• Задание: Реализация собственного API на Node.js. Тестирование через Postman/Insomnia 5 методов: список с фильтрацией, получение одной записи, добавление, редактирование, удаление
• Порядок показа: показать коллекцию запросов в Postman, показать список, добавить новую запись, получить по id, удалить, показать в списке с фильтрацией
• Контрольные вопросы: Что такое NodeJS, каковы его особенности и среда применения; клиент серверная модель, сравнение SSR и SPA; назовите несколько встроенных библиотек NodeJS и их предназначение; почему целесообразно применять высокоуровневые фреймворки при разработки API; перечислите основные сущности NestJS приложения и их предназначение; Injectable, что позволяет делать внедрение зависимостей в NestJs; какие особенности обработки ошибок в NestJS

• Методические указания

Лабораторная работа 5

• Задание: Продолжение Лабораторной работы 3: добавить страницу добавления/редактирования и соответствующие кнопки, подключение к созданному API бэкенду. Запросы XHR, Cors обойти через расширение браузера CORS Unblock. Код 4ой лабораторной НЕ НУЖНО добавлять в ветку по 5ой, в 5ой и 6ой остается только фронтенд, как в 3ей
• Порядок показа: В Google Chrome запустить одновременно сервера из 4ой и 5ой лабораторных на разных сокетах. Открыть вкладку Network, выбрать xhr, выполнить фильтрацию в приложении, показать ошибку, включить CORS Unblock, повторить фильтрацию, показать параметр в заголовке запроса в Network. добавить в Postman новую запись, показать что она появилась в приложении, указать название этой записи в фильтрации
• Контрольные вопросы: опиишите проблему и пути решения CORS, что такое AJAX и xhr

• Методические указания

Лабораторная работа 6

• Задание: замена коллбеков на промисы, запросы fetch. Собрать файлы фронтенда через bundler, развернуть их на сервере c API. Ветка по 6ой лабораторной остается только с файлами исходного кода, а собранный bundle необходимо добавить в ветку по 4ой лабораторной
• Порядок показа: Запустить 4ую лабораторную вместе с bundle: повторить действия из 5ой лаборатоной, но показать fetch. Показать что CORS работает без расширения, так как домен запросов AJAX совпадает с url страницы. Показать вкладку Sources, в ней должен быть только bundle, никаких файлов исходного кода
• Контрольные вопросы: что такое промис и fetch, что такое async/await, что такое bundler/babel/TS

• Методические указания

Требования к отчету

Пример отчета

ГОСТ (1.5 интервал, 1.25 см отступ, 14 пт и тд) - Требования по оформлению.

1. Титульный лист
2. Введение (задачи по каждой лабораторной)
3. Разделы по лабораторным. Все рисунки подписать с названиями, ссылки в тексте (литература, таблицы, формулы аналогично)
4. Заключение (задачи с результатами). Ссылка на гит.
5. Список литературы

Дополнительное задание

• Продолжение Лабораторной работы 6 - добавление уведомлений/обновлений через Polling
• Подключение к API VK
• библиотека three.js

Рубежный контроль 2

Требуемое ПО

Образ виртуальной машины Linux Ubuntu 20.04 для выполнения заданий курса

1. Node JS
2. npm
3. VS Code
4. VS Code LiveServer

Команда курса выражает благодарность за помощь в подготовке данного курса

1. Алехин Сергей Сергеевич
2. Елхимова Ирина Сергеевна
3. Шевчук Михаил Сергеевич
4. Толпаров Натан Русланович
5. Вивчарук Ростислав Владимирович
6. Можаев Дмитрий Владимирович