Skip to content

Latest commit

 

History

History
151 lines (90 loc) · 10.3 KB

README.md

File metadata and controls

151 lines (90 loc) · 10.3 KB

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

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

Задания

Модуль 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. Можаев Дмитрий Владимирович