WEB-орієнтовані технології. Основи Frontend та Backend розробок - Робоча програма навчальної дисципліни (Силабус)

Реквізити навчальної дисципліни

Рівень вищої освіти Перший (бакалаврський)
Галузь знань 126 Інформаційні технології
Спеціальність 126 Інформаційні системи та технології
Освітня програма Інформаційні управляючі системи та технології
Статус дисципліни Нормативна (цикл професійної та практичної підготовки )
Форма навчання очна(денна),заочна
Рік підготовки, семестр 3 курс, осінній семестр
Обсяг дисципліни

Очна(денна). 4 кредитів, 120 годин: лекції-36 год., лаборат. роботи-18 год., СРС – 66 год.,

Заочна. 4 кредитів, 120 годин: лекції-6 год., лаборат. роботи-6 год., СРС – 108 год.,
Семестровий контроль/ контрольні заходи залік
Розклад занять http://rozklad.kpi.ua/Schedules/ScheduleGroupSelection.aspx
Мова викладання Українська
Інформація про
керівника курсу / викладачів

Лектор: ст.викладач Проскура Світлана Леонідівна,

slproskura@gmail.com, моб. +38(066)567-45-59

Лабораторні роботи: Проскура Світлана Леонідівна
Розміщення курсу https://classroom.google.com/r/NTkyMTQ2NzYzNTA1/sort-first-name

Програма навчальної дисципліни

Опис навчальної дисципліни, її мета, предмет вивчання та результати навчання

Силабус освітнього компонента «WEB-орієнтовані технології. Основи Frontend та Backend розробок » складено відповідно до освітньої програми підготовки бакалаврів «Інформаційні управляючі системи та технології» спеціальності 126 – Інформаційні системи та технології

Метою навчальної дисципліни є формування та закріплення у студентів наступних компетентностей: (ЗК 1) Здатність до абстрактного мислення, аналізу і синтезу; (ЗК 2) Здатність застосовувати знання у практичних ситуаціях; (ЗК 6) Здатність до пошуку, оброблення та узагальнення інформації з різних джерел; (ФК 4) Здатність проєктувати, розробляти та використовувати засоби реалізації інформаційних систем, технологій та інфокомунікацій (методичні, інформаційні; (ФК 8 ) Здатність управляти якістю продуктів і сервісів інформаційних систем та технологій протягом їх життєвого циклу; (ФК 12) Здатність управляти та користуватися сучасними інформаційно-комунікаційними системами та технологіями (у тому числі такими, що базуються на використанні Інтернет).

Предмет навчальної дисципліни – це сукупність теоретичних знань, практичних вмінь та навичок проектування та розроблення Frontend та Backend розробок, що є основою у підготовці фахівців з інформаційних технологій для проектування та програмування WEB-орієнтованих застосувань у професійній діяльності.

***Програмні результати навчання, на формування та покращення яких спрямована дисципліна: (***ПРН 3) Використовувати базові знання інформатики й сучасних інформаційних систем та технологій, навички програмування, технології безпечної роботи в комп’ютерних мережах, методи створення баз даних та інтернет-ресурсів,технології розроблення алгоритмів і комп’ютерних програм мовами високогорівня із застосуванням об’єктно-орієнтованого програмування для розв’язаннязадач проєктування і використання інформаційних систем та технологій; (ПРН 5) Аргументувати вибір програмних та технічних засобів для створеннянформаційних систем та технологій на основі аналізу їх властивостей,призначення і технічних характеристик з урахуванням вимог до системи іексплуатаційних умов; мати навички налагодження та тестування програмних ітехнічних засобів інформаційних систем та технологій; (ПРН 6) Демонструвати знання сучасного рівня технологій інформаційних систем,практичні навички програмування та використання прикладних і спеціалізованихкомп’ютерних систем та середовищ з метою їх запровадження у професійнійдіяльності; (ПРН 18) Знати спеціалізовані мови та технології програмування необхідні для розробкипрограмного забезпечення інформаційних управляючих систем та технологійпідтримки прийняття рішень. Розробляти відповідне програмне забезпечення, щовходить до складу інформаційних управляючих систем та технологій підтримкиприйняття рішень

Пререквізити та постреквізити дисципліни

Для успішного засвоєння дисципліни студент повинен володіти освітніми компонентами «Програмування 1 - Основи програмування», «Програмування 2 – Структури даних та алгоритми», «Бази даних», «Інтернет технології та проєктування WEB-застосувань»,

«Розробка програмного забезпечення на платформі Node.JS», «Сучасні технології розробки WEB-застосувань на платформі Node.JS», «Основи Front-end технологій» . Компетенції, знання та уміння, одержані в процесі вивчення освітнього компонента є необхідними для подальшого вивчення освітніх компонентів «Основи WEB – технологій», «Сучасні технології розробки програмного забезпечення», передипломної практики, дипломного проєктування.

Зміст навчальної дисципліни

Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.

Тема 1.1 WEB-орієнтовані технології. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду.

Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. CSS-змінні. Оформлення тексту. Псевдоелементи тексту.

Тема1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Структурні псевдокласи. Flexible Box Layout (Flexbox).

Тема1.4 Позиціонування елементів. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімація. . Адаптивна верстка. Медіа-запити.

Розділ 2. Програмне використання JavaScript у HTML-документах.

Тема 2.1 Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних. Розгалудження та цикли в JavaScript. Методи масивів. Цикл for...of​. Функції. Область видимості. Псевдомасив arguments​.

Тема 2.2 Об'єкт. Властивості об'єкта.​ Короткі властивості. Перебирання об'єкта. Цикл for...in​. Методи об'єкта. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів

Тема 2.3 Функції зворотного виклику (callback). Метод forEach. ​ Стрілочні функції. Псевдомасив arguments​. Стрілочні функції як колбеки​. Перебираючі методи масиву. Ланцюжки методів

Тема 2.4 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce

Тема 2.5 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage.

Тема 2.6 Асинхронність. Проміси. Методи класу Promise

Тема 2.7 HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Розділ 3 Створення інтерфейсів WEB-застосувань з використанням React

Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компоненти. Нормалізація стилів. Події. Форми.

Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи. Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація

Тема 3.3 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

Розділ 4 Основи Backend розробок. Node.js.

Тема 4.1 Модульна система Node.js. Робота з json-файлами.Створення консольного додатку. Основи Express.

Тема 4.2 CRUD в Express. MongoDB та Mongoose.

Тема 4.3 Схеми та методи Mongoose. Деплой на Heroku.

Тема 4.4 Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети.

Навчальні матеріали та ресурси

4.1 Базова література

  1. HTML Підручник. w3schools.com. українською. https://w3schoolsua.github.io/html/index.html

  2. HTML. Мова для створення веб-сторінок. w3schools.com. Українською. https://w3schoolsua.github.io/index.html#gsc.tab=0

  3. HTML Довідник тегів. https://w3schoolsua.github.io/tags/index.html

  4. CSS Підручник. w3schools.com. українською. https://w3schoolsua.github.io/css/index.html#gsc.tab=0

  5. HTML.Language for creating web pages. W3Schools in English. https://w3schoolsua.github.io/index\_en.html#gsc.tab=0

  6. HTML Tutorial. https://w3schoolsua.github.io/html/index_en.html#gsc.tab=0

  7. Підручники HTML та CSS. https://htmlbook.at.ua/news/tutorial_html/1-0-1

  8. Learn to Code. With the world's largest web developer site. https://www.w3schools.com/

4.2. Допоміжна

  1. Український веб-довідник. https://css.in.ua/

  2. Довідник по HTML тегам https://css.in.ua/html/tags

  3. Довідник HTML тегів https://html-css.co.ua/dovidnuk-html-tags/

  4. HTML конструювання. http://htmlbook.in.ua/

  5. http://htmlbook.in.ua/tegs-html/

  6. http://htmlbook.in.ua/pr01-html/

  7. CSS-TRICKS. GUIDES. ARTICLES. https://css-tricks.com/

Навчальний контент

Методика опанування навчальної дисципліни (освітнього компонента)

######### Лекційні заняття

№ з/п Назва теми лекції та перелік основних питань
Розділ 1 Основи Frontend розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1

Тема 1.1 WEB-орієнтовані технології. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду.

Основні питання: Вступ. Зміст предмету. Протокол HTTP. WEB-орієнтовані технології. Структура HTML-документа Основні теги та атрибути. Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).
2

Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. CSS-змінні. Оформлення тексту. Псевдоелементи тексту.

Основні питання: Вступ до CSS. Синтаксис та правила CSS. Типи селекторів. Псевдокласи стану. Каскадування. CSS-змінні. Оформлення тексту. Сервіс Google Fonts
3

Тема1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Структурні псевдокласи. Flexible Box Layout (Flexbox).

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Схлопування та випадання вертикальних відступів. Закругленння рамки.

Типи елементів (block). Горизонтальне центрування блокових елементів. Рядково-блокові елементи (inline-block). Структурні псевдокласи.

Flexible Box Layout (Flexbox). Властивості контейнера : display, flex-direction, justify-content, align-items, flex-wrap, align-content
4

Тема1.4 Позиціонування елементів. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка. Медіа-запити.

Основні питання: Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування. Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport
Розділ 2. Програмне використання JavaScript у html-документах.
5

Тема 2.1 Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних. Розгалудження та цикли в JavaScript. Методи масивів. Цикл for...of​. Функції. Область видимості. Псевдомасив arguments​.

Основні питання: Знайомство з JavaScript. Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof​. Рядки. Конкатенація рядків​. Шаблонні рядки​. Методи обробки рядків. Розгалудження в JavaScript. Логічні оператори.Інструкція if​…else. Тернарний оператор. Інструкція switch. Цикли for​, while​, do...while.​ Оператор break​, continue​.

Масиви. Цикл for...of​. Методи split() і join()​, indexOf()​, includes()​,push(), pop()​, splice()​.Оголошення функції​. Параметри та аргументи​. Властивості і методи функцій. Параметри за замовчуванням .​ Псевдомасив arguments​. Перетворення псевдомасиву​.
6

Тема 2.2 Об'єкт. Властивості та методи об'єкта.​ Короткі властивості. Цикл for...in​. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів

Основні питання: Об'єкт. Створення об'єкта. Властивості. Вкладені властивості​. Короткі властивості Методи об'єкта. Доступ до властивостей об'єкта в методах. Перебирання об'єкта. Цикл for...in​. Методи hasOwnProperty()​, Object.keys()​, Object.values()​, Object.entries()​. Масив об'єктів​. Операції spread і rest.
7

Тема 2.3 Функції зворотного виклику (callback).  Метод forEach. ​ ​ Стрілочні функції. Неявне повернення. Псевдомасив arguments​. Стрілочні функції як колбеки​. Перебираючі методи масиву

Основні питання: Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback).

Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів
8

Тема 2.4 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce

Основні питання: ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Події клавіатури та елементів форм. Делегування подій. Throttle і Debounce.
9

Тема 2.5 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage

Основні питання: Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage
10

Тема 2.6 Асинхронність. Проміси. Методи класу Promise

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise.
11

Тема 2.7 HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Протоколи HTTP та HTTPS. REST AP.I Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API. Параметри рядка запиту. HTTP-заголовки. Крос-доменні запити. Пагінація. CRUD. Операції: створення (create), читання (read), оновлення (update) і видалення (delete). Для кожної з них визначений стандартний HTTP-метод.
Розділ 3 Створення інтерфейсів WEB-застосувань з використанням React
12

Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компоненти. Нормалізація стилів. Події. Форми.

Основні питання: React. Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Рендер за умовою. Колекції. Стилі. Вбудовані стилі. CSS-модулі. Нормалізація стилів. Компоненти-класи. Події. Внутрішній стан компонента Форми
13

Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація

Основні питання: Життєвий цикл. HTTP-запити. React хуки. Хук useState. Хук useEffect. Контекст та рефи. Контекст та useContext. Хук useRef. Власні хуки. Структура URL-рядка. Компонент <BrowserRouter>, <Link> та <NavLink>. URL-параметри Вкладені маршрути. Індексні маршрути. Програмна навігація.
14

Тема 3.3 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.

Розділ 4 Основи Backend розробок. Node.js.
15

Тема 4.1 Модульна система Node.js. Робота з json-файлами.Створення консольного додатку. Основи Express.

Основні питання: Знайомство з Node.js . Модульна система Node.js. CommonJS модулі. Глобальні змінні (process, __dirname). Робота із файловою системою. Модулі fs та path. Робота з json-файлами. Cтворення консольного додатку за допомогою пакетів yargs або commander.

Веб-сервіс. Postman. Що таке Express. Створення middleware.CORS. logger через Morgan. Винесення роутів в окремий файл за допомогою express.Router. Обробка помилок 404 та 500
16

Тема 4.2 CRUD в Express. MongoDB та Mongoose.

Основні питання: . CRUD у express. Вилучення динамічної частини маршруту через req.params. Вилучення тіла запиту (req.body) через express.json(). Валідація за допомогою Joi. Винесення валідації в окрему middleware.

Що таке MongoDB. Створюємо Mongo-аккаунт, проект Mongo Atlas, кластер. MongoDB Compass. Робота з базою даних MongoDB через Mongoose. Принципи роботи Mongoose: схема – модель – колекція.
17

Тема 4.3 Схеми та методи Mongoose. Деплой на Heroku.

Основні питання: Mongoose: створення схеми (required, enum, default, unique, match).

З'єднання Joi та вбудованої в Mongoose валідації. Методи моделей: find, findById, create, findByIdAndUpdate;,findByIdAndDelete. Деплой на Heroku.
18

Тема 4.4 Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети.

Основні питання: Реєстрація, хешування пароля через бібліотеку bcrypt або crypto ( Node.js) Створення JWT-токену під час аутентифікації через бібліотеку jsonwebtoken.Аутентифікація користувача через самописну middleware. Піраміда тестування. Юніт-тести. Пошта. Docker. Верифікація пошти. Основи Docker . Вебсокети

######### Лабораторні заняття

№ з/п Назва лабораторної роботи
1

Лабораторна робота №1. HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду.

Основні питання: Структура HTML-документа. Основні теги та атрибути в HTML-документі. Структурна розмітка. Розмітка тексту. Валідація коду. Інструменти розробника. ІDE. Оформлення тексту. Сервіс Google Fonts. Опис бізнес-логіки предметної галузі майбутнього WEB-застосунку.
2

Лабораторна робота №2. Каскадні таблиці стилів CSS. Селектори . Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту

Основні питання: Псевдокласи стану.. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts
3

Лабораторна робота №3.Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка.

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Центрування блокових елементів. Рядково-блокові елементи (inline-block). Позиційовані елементи.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Стратегія Mobile First. Адаптивна та респонсивна верстки.
4

Лабораторна робота №4. Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції.

Основні питання:Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback).  Стрілочні функції як колбеки​. Методи ap(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів
5

Лабораторна робота №5. Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API.

Основні питання:ООП.Прототипи. Класи. Навігація по DOM. Властивості та атрибути. Властивість innerHTML. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Делегування подій. Throttle і Debounce. Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage
6

Лабораторна робота №6. Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise. Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API
7

Лабораторна робота №7. Створення інтерфейсів WEB-застосувань з використанням React

Основні питання: Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Маршрутизація Структура URL-рядка. Компонент <BrowserRouter>. Компоненти <Link> та <NavLink>. URL-параметри. Вкладені маршрути.
8

Лабораторна робота №8. MongoDB та Mongoose. Схеми та методи Mongoose. Деплой на Heroku.

Основні питання: MongoDB. Створюємо Mongo-аккаунт, проект Mongo Atlas, кластер. MongoDB Compass. Робота з базою даних MongoDB через Mongoose. Принципи роботи Mongoose: схема – модель – колекція. Mongoose: створення схеми (required, enum, default, unique, match). З'єднання Joi та вбудованої в Mongoose валідації. Методи моделей. Деплой на Heroku.
9

Лабораторна робота №9. Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети.

Основні питання: Реєстрація, хешування пароля через бібліотеку bcrypt або crypto ( Node.js) Створення JWT-токену під час аутентифікації через бібліотеку jsonwebtoken. Аутентифікація користувача через самописну middleware. Піраміда тестування. Юніт-тести. Пошта. Docker. Верифікація пошти. Основи Docker . Вебсокети

######### Самостійна робота студента

№

з/п

 Вид самостійної роботи

Кількість

годин СРС
1 Підготовка до лабораторної робіти №1 5
2 Підготовка до лабораторної робіти №2 5
3 Підготовка до лабораторної робіти №3 5
4 Підготовка до лабораторної робіти №4 5
5 Підготовка до лабораторної робіти №5 5
6 Підготовка до лабораторної робіти №6 5
7 Підготовка до лабораторної робіти №7 5
8 Підготовка до лабораторної робіти №8 7
9 Підготовка до лабораторної робіти №9 7
10 Підготовка до МКР 17

Заочна форма навчання

Лекційні заняття

№ з/п Назва теми лекції та перелік основних питань Кількість ауд. годин
Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1

Тема 1 Структура та зміст курсу. РСО. Інтернет-технології. Класифікація сайтів. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду.

Основні питання: Вступ. Зміст предмету. Інтернет-технології. Класифікація сайтів. Протокол HTTP. WEB-орієнтовані технології. Структура HTML-документа Основні теги та атрибути. Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).

 2
2

Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. Робота з кольором. Каскадування.

Основні питання: Вступ до CSS. Синтаксис та правила CSS. Типи селекторів. Псевдокласи стану.. Робота з кольором. Каскадування.

 2
3

Тема 1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Рядково-блокові елементи. Структурні псевдокласи.

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Схлопування та випадання вертикальних відступів. Закругленння рамки.

Типи елементів (block). Горизонтальне центрування блокових елементів. Елемент-контейнер. Рядкові елементи (inline). Проміжок у рядкових елементів. Рядково-блокові елементи (inline-block)

 2

######### Лабораторні заняття

№ з/п Назва лабораторної роботи Кількість ауд. годин
1

Лабораторна робота №1. HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду.

Основні питання: Структура HTML-документа. Основні теги та атрибути в HTML-документі. Структурна розмітка. Розмітка тексту. Валідація коду. Інструменти розробника. ІDE. Оформлення тексту. Сервіс Google Fonts. Опис бізнес-логіки предметної галузі майбутнього WEB-застосунку.

 2
2

Лабораторна робота №2. Каскадні таблиці стилів CSS. Селектори . Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту

Основні питання: Псевдокласи стану.. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts.

 2
3

Лабораторна робота №3.Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка.

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Центрування блокових елементів. Рядково-блокові елементи (inline-block). Позиційовані елементи.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Стратегія Mobile First. Адаптивна та респонсивна верстки.

 2

Самостійна робота студента

№ з/п Назва теми лекції та перелік основних питань Кількість годин СРС
Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1

Тема 1.1 Структурна розмітка. Валідація коду.

Основні питання: Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).

 2
2

Тема1.2 Стильове оформлення елементів HTML-документу. CSS-змінні. Оформлення тексту. Псевдоелементи тексту.

Основні питання:. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts

 2
3

Тема1.3 . Flexible Box Layout (Flexbox).

Основні питання:

Flexible Box Layout (Flexbox). Властивості контейнера : display, flex-direction, justify-content, align-items, flex-wrap, align-content

 4
4

Тема1.4 Позиціонування елементів. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка. Медіа-запити.

Основні питання: Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування. Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport

 4
5 Розділ 2. Програмне використання JavaScript у html-документах.
6

Тема 2.1 Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних. Розгалудження та цикли в JavaScript. Методи масивів. Цикл for...of​. Функції. Область видимості. Псевдомасив arguments​.

Основні питання: Знайомство з JavaScript. Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof​. Рядки. Конкатенація рядків​. Шаблонні рядки​. Методи обробки рядків. Розгалудження в JavaScript. Логічні оператори.Інструкція if​…else. Тернарний оператор. Інструкція switch. Цикли for​, while​, do...while.​ Оператор break​, continue​.

Масиви. Цикл for...of​. Методи split() і join()​, indexOf()​, includes()​,push(), pop()​, splice()​.Оголошення функції​. Параметри та аргументи​. Властивості і методи функцій. Параметри за замовчуванням .​ Псевдомасив arguments​. Перетворення псевдомасиву​.

 4

Тема 2.2 Об'єкт. Властивості та методи об'єкта.​ Короткі властивості. Цикл for...in​. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів

Основні питання: Об'єкт. Створення об'єкта. Властивості. Вкладені властивості​. Короткі властивості Методи об'єкта. Доступ до властивостей об'єкта в методах. Перебирання об'єкта. Цикл for...in​. Методи hasOwnProperty()​, Object.keys()​, Object.values()​, Object.entries()​. Масив об'єктів​. Операції spread і rest.

 4
7

Тема 2.3 Функції зворотного виклику (callback).  Метод forEach. ​ ​ Стрілочні функції. Неявне повернення. Псевдомасив arguments​. Стрілочні функції як колбеки​. Перебираючі методи масиву

Основні питання: Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback).

Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів

 4
8

Тема 2.4 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce

Основні питання: ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Події клавіатури та елементів форм. Делегування подій. Throttle і Debounce.

 4
9

Тема 2.5 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage

Основні питання: Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage

 4
10

Тема 2.6 Асинхронність. Проміси. Методи класу Promise

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise.

 4
11

Тема 2.7 HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Протоколи HTTP та HTTPS. REST AP.I Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API. Параметри рядка запиту. HTTP-заголовки. Крос-доменні запити. Пагінація. CRUD. Операції: створення (create), читання (read), оновлення (update) і видалення (delete). Для кожної з них визначений стандартний HTTP-метод.

 4
12 Розділ 3 Створення інтерфейсів WEB-застосувань з використанням React 4
13

Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компоненти. Нормалізація стилів. Події. Форми.

Основні питання: React. Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Рендер за умовою. Колекції. Стилі. Вбудовані стилі. CSS-модулі. Нормалізація стилів. Компоненти-класи. Події. Внутрішній стан компонента Форми

 4
14

Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація

Основні питання: Життєвий цикл. HTTP-запити. React хуки. Хук useState. Хук useEffect. Контекст та рефи. Контекст та useContext. Хук useRef. Власні хуки. Структура URL-рядка. Компонент <BrowserRouter>, <Link> та <NavLink>. URL-параметри Вкладені маршрути. Індексні маршрути. Програмна навігація.

 4

Тема 3.3 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.
15 Розділ 4 Основи Backend розробок. Node.js.
16

Тема 4.1 Модульна система Node.js. Робота з json-файлами.Створення консольного додатку. Основи Express.

Основні питання: Знайомство з Node.js . Модульна система Node.js. CommonJS модулі. Глобальні змінні (process, __dirname). Робота із файловою системою. Модулі fs та path. Робота з json-файлами. Cтворення консольного додатку за допомогою пакетів yargs або commander.

Веб-сервіс. Postman. Що таке Express. Створення middleware.CORS. logger через Morgan. Винесення роутів в окремий файл за допомогою express.Router. Обробка помилок 404 та 500

 6
17

Тема 4.2 CRUD в Express. MongoDB та Mongoose.

Основні питання: . CRUD у express. Вилучення динамічної частини маршруту через req.params. Вилучення тіла запиту (req.body) через express.json(). Валідація за допомогою Joi. Винесення валідації в окрему middleware.

Що таке MongoDB. Створюємо Mongo-аккаунт, проект Mongo Atlas, кластер. MongoDB Compass. Робота з базою даних MongoDB через Mongoose. Принципи роботи Mongoose: схема – модель – колекція.

 4
18

Тема 4.3 Схеми та методи Mongoose. Деплой на Heroku.

Основні питання: Mongoose: створення схеми (required, enum, default, unique, match).

З'єднання Joi та вбудованої в Mongoose валідації. Методи моделей: find, findById, create, findByIdAndUpdate;,findByIdAndDelete. Деплой на Heroku.

6
19

Тема 4.4 Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети.

Основні питання: Реєстрація, хешування пароля через бібліотеку bcrypt або crypto ( Node.js) Створення JWT-токену під час аутентифікації через бібліотеку jsonwebtoken.Аутентифікація користувача через самописну middleware. Піраміда тестування. Юніт-тести. Пошта. Docker. Верифікація пошти. Основи Docker . Вебсокети

4
20

Лабораторна робота №4. Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції.

Основні питання:Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback).  Стрілочні функції як колбеки​. Методи ap(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів

4
21

Лабораторна робота №5. Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API.

Основні питання:ООП.Прототипи. Класи. Навігація по DOM. Властивості та атрибути. Властивість innerHTML. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Делегування подій. Throttle і Debounce. Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage

4
22

Лабораторна робота №6. Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise. Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API

4
23

Лабораторна робота №7. Створення інтерфейсів WEB-застосувань з використанням React

4
24

Лабораторна робота №8. MongoDB та Mongoose. Схеми та методи Mongoose. Деплой на Heroku.

Основні питання: MongoDB. Створюємо Mongo-аккаунт, проект Mongo Atlas, кластер. MongoDB Compass. Робота з базою даних MongoDB через Mongoose. Принципи роботи Mongoose: схема – модель – колекція. Mongoose: створення схеми (required, enum, default, unique, match). З'єднання Joi та вбудованої в Mongoose валідації. Методи моделей. Деплой на Heroku.

6
25

Лабораторна робота №9. Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети.

Основні питання: Реєстрація, хешування пароля через бібліотеку bcrypt або crypto ( Node.js) Створення JWT-токену під час аутентифікації через бібліотеку jsonwebtoken. Аутентифікація користувача через самописну middleware. Піраміда тестування. Юніт-тести. Пошта. Docker. Верифікація пошти. Основи Docker . Вебсокети

4
26

Підготовка до екзамену по всьому матеріалу модуля.

10

Всього СРС

108

Політика та контроль

Політика навчальної дисципліни (освітнього компонента)

Як викладач, так і студент зобов’язані дотримуватись Кодексу честі Національного технічного університету України «Київський політехнічний інститут»

Основні положення політики:

  • відвідування лекційних та лабораторних робіт є обов’язковою складовою вивчення матеріалу;

  • самостійне вивчення теоретичного матеріалу та виконання лабораторних робіт студента є обов’язковою складовою вивчення навчальної дисципліни;

  • під час проведення лекції, викладач користується власним презентаційним матеріалом з демонстрацією практичної частини на комп’ютері з встановленим інтегрованим середовищем розробки;

  • всі матеріали поточної лекції, лабораторних та самостійних робіт, додаткових матеріалів, літератури розміщуються викладачем у середовищі Classroom.

  • після виконання лабораторних та самостійних робіт, студенти розміщують посилання на них на Git Hub або у власній папці на гугл-диску або в Classroom;

  • до кожної лабораторної роботи студенти виконують проміжний тест, оцінка за який входить до складу загальної оцінки за лабораторну роботу;

  • на лекції бажано не відволікати викладача від викладання матеріалу. Усі питання, уточнення та ін. студенти задають в кінці лекції у відведений для цього час;

  • у випадку виявлення факту академічної недоброчесності лабораторна або самостійна робота не зараховується;

  • заохочувальні бали виставляються за: участь у факультетських та інститутських олімпіадах з навчальних дисциплін, участь у конкурсах з ІТ-технологій, підготовка оглядів наукових праць, ; презентацій по одній із тем СРС дисципліни тощо. Кількість заохочуваних балів не більше 10;

  • штрафні бали виставляються за: невчасну здачу лабораторної та самостійної робіт. Кількість штрафних балів не більше 10.

Види контролю та рейтингова система оцінювання результатів навчання (РСО)

Поточний контроль

Рейтинг студента з дисципліни кладається з балів, які він отримує за:

  • виконання та захист 9 лабораторних робіт;

  • виконання 2-х модульних контрольних робіт (МКР);

  • проміжні тести для перевірки засвоєння вивченого матеріалу;

  • заохочувальні бали;

  • штрафні бали (віднімаються від загальної суми оцінювання лабораторної або самостійної робіт ;

Семестровий контроль - екзамен

Система рейтингових (вагових) балів та критерії оцінювання

Лабораторні роботи

Вагові бали кожної лабораторної роботи наведені у Таблиці 1. Сумарний ваговий бал за даний контрольний захід складає 63 балів.

Критерії оцінювання лабораторних робіт включають якість їх виконання та захист.

Таблиця 1 – Вагові бали та критерії оцінювання лабораторних робіт

1 Назва роботи Бали
Виконання Захист Звіт Сума
1 HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду. 2 3 2 7
2 Каскадні таблиці стилів CSS. Селектори .. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту 2 3 2 7
3 Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімація. Адаптивна верстка. 2 3 2 7
4 Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції 2 3 2 7
5 Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API.. 2 3 2 7
6 Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD 2 3 2 7
7 Створення інтерфейсів WEB-застосувань з використанням React 2 3 2 7
8 MongoDB та Mongoose. Схеми та методи Mongoose. Деплой на Heroku. 2 3 2 7
9 Аутентифікація. Тести. Модульне тестування. Пошта. Docker. Вебсокети. 2 3 2 7
Разом за лабораторні роботи 18 27 18 63

Кожна лабораторна робота оцінюється максимальною оцінкою в 7 балів за:

Виконання 2 бал

Захист 3 бал (тест)

Звітний HTML-документ 2 бал

де,

  • “відмінно”, повна відповідь (не менше 95% потрібної інформації);

 - 6,65 - 7 балів;

  • “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності);

 - 4,98 - 6,64 балів;

  • “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки);

 - 2,98 - 4,97 бали;

  • “незадовільно”, незадовільна відповідь.

 - < 2,98 балів

***Максимальна сумарна оцінка за 9 лабораторних робіт – 63 балів

Модульні контрольні роботи

Кожна модульна контрольна робота оцінюється максимальною оцінкою в 18,5 балів
де,

  • “відмінно”, повна відповідь (не менше 95% потрібної інформації): складання тесту (1 бал);

 - 12,02 – 18,5 балів;

  • “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності);

 - 9,01 - 12,01 балів;

  • “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки);

 - 5,41 - 9,00 бали;

  • “незадовільно”, незадовільна відповідь.

 - < 5,41 балів

Максимальна сумарна оцінка за модульні контрольні роботи 37 балів

Модульні контрольні виконуються у вигляді тестів

Заохочувальні бали

за виконання творчих робіт (наприклад, участь у факультетських та інститутських олімпіадах з навчальних дисциплін, участь у конкурсах робіт, підготовка оглядів наукових праць тощо); за активну роботу на лекції (питання, доповнення, зауваження за темою лекції, коли лектор пропонує студентам задати свої питання) 1-2 бали, але в сумі не більше 10;

Штрафні бали

За кожне заняття запізнення з поданням лабораторної до захисту від встановленого терміну оцінка знижується на 0,5 бал. При наяності довідки або інших вагомих причин – бали не знімаються

Умови позитивної проміжної атестації

Для отримання “зараховано” з першої проміжної атестації (8 тиждень) студент повинен мати не менше ніж 24 балів (за умови, якщо на початок 8 тижня згідно з календарним планом контрольних заходів “ідеальний” студент має отримати 44 балів).

Для отримання “зараховано” з другої проміжної атестації (14 тиждень) студент повинен мати не менше ніж 36 балів (за умови, якщо на початок 14 тижня згідно з календарним планом контрольних заходів “ідеальний” студент має отримати 60 балів).

Розрахунок шкали рейтингу Rc*:***

Максимальна сума вагових балів контрольних заходів протягом семестру складає:

Rc = 63 + 37 = 100 балів

Необхідною умовою отримання залікової оцінки є:

  • виконання 9 лабораторних робіт на оцінку не нижче ніж “задовільно” +звітний документ ;

  • виконання МКР-1 не нижче ніж на оцінку “задовільно”;

  • виконання МКР-2 не нижче ніж на оцінку “задовільно”;

Для отримання студентом відповідних оцінок -його рейтингова оцінка Rc переводиться в оцінку згідно з таблицею:

Бали

Rc

 Оцінка
95… 100 відмінно
85 … 94 дуже добре
75 … 84 добре
65 … 74 задовільно
60 … 64 достатньо
RD<60 незадовільно
rC < 50 або не виконані інші умови допуску до заліку недопущений

Додаткова інформація з дисципліни (освітнього компонента)

Перелік питань, які виносяться на семестровий контроль розміщений в Classroom

Робочу програму навчальної дисципліни (силабус):

Складено ст.викладачем Проскурою Світланою Леонідівною

Ухвалено Кафедрою ІСТ протокол № 21 від 29.06.23

Погоджено Методичною комісією факультету протокол № 11 від 29.06.23