JavaScript

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

Материалы курса 2022 года

Лекции

Лекция 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.

Модуль 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.
• Порядок показа: Открыть вкладку Network, выбрать xhr, выполнить фильтрацию в приложении, показать параметр в заголовке запроса в Network. добавить в Postman новую запись, показать что она появилась в приложении, указать название этой записи в фильтрации
• Контрольные вопросы: опиишите проблему и пути решения CORS, что такое AJAX и xhr

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

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

• Задание: замена коллбеков на промисы, запросы fetch. Собрать файлы фронтенда через bundler, развернуть их на сервере c API
• Порядок показа: повторить действия из 5ой лаборатоной, но показать fetch. Показать что CORS работает без расширения
• Контрольные вопросы: что такое промис и 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. Можаев Дмитрий Владимирович