ОСНОВИ КЛІЄНТСЬКОЇ РОЗРОБКИ

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

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

Рівень вищої освіти Перший (бакалаврський)
Галузь знань 12 Інформаційні технології
Спеціальність 126 Інформаційні системи та технології
Освітня програма Інтегровані інформаційні системи
Статус дисципліни Вибіркова
Форма навчання очна(денна)/дистанційна
Рік підготовки, семестр 2 курс, осінній семестр
Обсяг дисципліни 180 годин (36 годин – Лекції, 36 годин – Лабораторні, 108 годин – СРС)
Семестровий контроль/ контрольні заходи Залік/залікова робота
Розклад занять http://rozklad.kpi.ua
Мова викладання Українська
Інформація про
керівника курсу / викладачів

Лектор: ст.викл. Хмелюк Марина Сергіївна,

m.khmeliuk@kpi.ua,

Telegram @Maryna181280

Лабораторні: ст.викл. Хмелюк Марина Сергіївна,

m.khmeliuk@kpi.ua,

Telegram @Maryna181280
Розміщення курсу https://campus.kpi.ua

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

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

Опис дисципліни. При проходженні даної дисципліни, студенти познайомляться системами контролю версій, основами верстки за допомогою мови розмітки HTML, мови опису зовнішнього вигляду документу (веб-сторінки) – CSS, мовою JavaScript. На лабораторних заняттях опанують розподілені системи контролю версій Git, Mercurial, HTML-5, CSS-3, JavaScript. В курсі передбачений контроль якості отриманих знань у вигляді модульних контрольних робіт. На лекціях проводитимуться експрес опитування по пройденому матеріалу.

Предмет навчальної дисципліни: основні поняття систем контролю версій, командна робота в розподілених системах контролю версій, клієнтська частина застосунку (веб-документи, стилі, скрипти).

Міждисциплінарні зв’язки. Дисципліна Основи клієнтської розробки базується на дисциплінах: Програмування – 1. Основи програмування; Програмування – 2. Структури даних та алгоритми; Дискретна математика. Дисципліна Основи клієнтської розробки є основою для дисципліни: Node.js

Мета навчальної дисципліни. Підготовка висококваліфікованих фахівців, які будуть володіти знаннями управління проектами (версіями) та командною роботою над проектами за допомогою систем контролю версій, знаннями розробки клієнтської частини веб-застосунків, мовою JavaScript, написанням стриптів для управління веб-сторінками.

Основні завдання навчальної дисципліни

Знання:

  • принципів роботи централізованих та розподілених систем контролю версій (СКВ);

  • структури систем контролю версій, особливості зберігання історії, особливості гілкування в СКВ;

  • колективної робити над проєктом, злиття результатів роботи команди;

  • основних принципів побудови веб-сторінок за допомогою мови розмітки HTML;

  • оформлення зовнішнього вигляду сторінок з застосуванням каскадних таблиць стилів;

  • особливостей мови JavaScript;

  • об’єктної моделі документа DOM;

  • об’єктної моделі браузера BOM;

  • методів (функцій) мови JavaScript для управляння елементами DOM та BOM.

Уміння:

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

  • колективно працювати над проєктом;

  • володіти мовою HTML, застосовувати її конструкції для побудови веб-сторінок;

  • володіти мовою СCS, застосовувати правила та конструкції для стилізації веб-сторінок;

  • володіти мовою JavaScript, писати скрипти;

  • застосовувати методи мови JavaScript для управління елементами DOM та BOM.

Пререквізити та постреквізити дисципліни (місце в структурно-логічній схемі навчання за відповідною освітньою програмою)

Пререквізити: вміти користуватися комп’ютером, мати знання основ програмування, структур даних, алгоритмів.

Постреквізити: колективна робота над проєктом, розробка клієнтських застосунків.

Після проходження дисципліни студенти зможуть працювати з проєктом в СКВ, створювати клієнтські застосунки за допомогою мов HTML, СCS, JavaScript, застосовувати методи мови JavaScript для управління елементами DOM та BOM..

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

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

Розділ 1. Системи контролю версій

Тема 1. Типи систем контролю версій

Тема 2. Організація гілок в СКВ

Тема 3. Командна робота

Розділ 2. Розробка клієнтської частини

Тема 4. Мова розмітки HTML

Тема 5. Каскадні таблиці стилів CSS

Тема 6. Мова JavaScript

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

1. Системи контролю версій. Розподілена система контролю версій Mercurial/Git

2. Гілки Mercurial/Git. Відкладення змін

3. Центральний репозиторій Mercurial/Git. Клони. Злиття результатів роботи кількох користувачів

4. HTML. Структура документа. Заголовки. Гіперпосилання

5. Форматування тексту. Кольори. Списки. Зображення. Фон

6. Таблиці

7. Фрейми

8. CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі

9. Стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків.

10. Контекстні селектори. Сусідні селектори. Дочірні селектори

11. Блочні елементи. Рядкові елементи. Позиціонування. Псевдокласи. Псевдоелементи

12. JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції

13. DOM. BOM. Браузер: документ(document)

14. Події. Обробники подій

15. Події. Спливання. Делегування подій

16. Події миші. Drag'n'Drop

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

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

  1. Хмелюк М.С. Конспект лекцій з дисципліни «Основи клієнтської розробки»

  2. Хмелюк М.С. Методичні вказівки до виконання лабораторних робіт для студентів з дисципліни «Основи клієнтської розробки»

  3. Lynn Ben Git Magic, publish: CreateSpace, 2012. – 68с

  4. Lynn Ben Mercurial: The Definitive Guide, publish: O'Reilly Media, Inc., 2009.

  5. Скот Чакон, Бен Штрауб Pro Git — профессиональный контроль версий, изд. – СПб.: Питер, 2019.- 496с.

  6. Б. Лоусон, Р. Шарп - Изучаем HTML 5, изд: Питер, 2011

  7. П. Лабберс — HTML 5 для профессионалов, изд: Вильямс, 2011

  8. Бен Хеник — HTML и CSS Путь к совершенству, изд: O'Reilly (Питер), 2011. -336с

  9. Дэвид Флэнаган JavaScript. Подробное руководство, изд.: Символ, 2017. -1080

  10. Інтернет-ресурс https://learn.javascript.ru/

Допоміжна література

  1. Інтернет-ресурс https://git-scm.com/book/ru/v2

  2. Інтернет-ресурс http://habr.com

  3. Інтернет-ресурс https://puzzleweb.ru/

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

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

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

№ з/п Назва теми лекції та перелік основних питань
(перелік дидактичних засобів, посилання на літературу та завдання на СРС)
Тема 1 Типи систем контролю версій
1

Лекція 1. Роль систем контролю версій. Типи Системи контролю версій

Можливості систем контролю версій. Локальні, централізовані, розподілені системи контролю версій. Розподілені системи контролю версій Mercurial, Git. Подібність. Відмінність

Л. (1)

Завдання на СРС. Команди для роботи в Git.
Тема 2 Організація гілок в СКВ
2

Лекція 2. Гілки в СКВ

Репозиторій. Поняття - «гілка». Робочий каталог. Способи організації гілок. Управління ревізіями, постійне ім’я для ревізій. Злиття функціоналу гілок.

Л. (1)

Завдання для СРС. Гілкування в Git
Тема 3 Командна робота
3

Лекція 3. Організація роботи команди над проєктом з використанням системи контролю версій для погодження всіх членів команди

Локальний репозиторій, Центральний репозиторій. Створення сервера (центрального репозиторію). Робота кількох користувачів. Злиття результатів роботи кількох користувачів. Виправлення помилок після фіксації. Процес вирішення конфліктів під час злиття

Л. (1)

Завдання для СРС. Виправлення помилок Git
Тема 4 Мова розмітки HTML
4

Лекція 4. Вимоги до клієнтської частини застосунку.

На що потрібно орієнтуватись при створенні веб-сторінок. Мова розмітки HTML. Браузери. Порядок завантаження файлів браузером під час обробки сторінок. Гіпертекст. Гіперпосилання. Скрипти. Аплети. Анімація. Таблиці стилів. Структура документу. Секція !DOCTYPE. Типи html-тегів. Теги, атрибути.

Л. (1)

Завдання для СРС. Відмінності HTML-5 від попередніх версій. Секція <meta>.Мета-теги. Абсолютні, відносні гіперпосилання. Спеціальні символи
5

Лекція 5. Представлення кольору в HTML. Форматування. Зображення

Представлення кольору в HTML. Форматування тексту. Форматування шрифтів. Форматування заголовків. Форматування абзаців. Форматування списків. Вставка зображень. Фон.

Л. (1)

Завдання для СРС. Представлення кольору в HTML за допомогою шістнадцятковових чисел, моделі RGB
6

Лекція 6. Таблиці

Структура таблиці. Типи комірок. Атрибути таблиці, рядків, комірок. Рамки, властивості. Відступи: сellspacing, сellpadding. Об’єднання рядків, комірок.

Л. (1)

Завдання для СРС. Структура таблиці у вигляді 3 семантичних секцій: header, body и footer. Контейнер <colgroup> та його атрибути. Вкладені таблиці
7

Лекція 7. Основи верстки. Фрейми. Блоки

Структура сайту з використанням фреймів. іfame. Властивості фреймів. Атрибут target. Блокова структура.

Л. (1)

Завдання для СРС. Верстка з використанням таблиць
Тема 5 Каскадні таблиці стилів CSS
8

Лекція 8. Каскадні таблиці стилів CSS. Типи селекторів

Селектор, атрибути. Зовнішні, внутрішні, рівня документу стилі. Порядок застосування стилів. Ім’я, ідентифікатор #id, клас .class в якості селектора. Універсальний селектор. Контекстні селектори.

Л. (1)

Завдання для СРС. Імпорт стилів. Оголошення !important, пріоритетність. Дочірні селектори. Сусідні селектори
9

Лекція 9. CSS-властивості

Розміри (одиниці виміру). Кольори. Шрифти. Текст. Поля. Заповнення. Рамки. Фон.

Л. (1)

Завдання для СРС. Оформлення таблиць за допомогою СSS-властивостей.
10

Лекція 10. Блокові, рядкові елементи. Псевдокласи. Псевдоелементи. Позиціонування

Блокові, рядкові елементи. Форма. Кнопки. Текстові поля. Псевдокласи. Псевдоелементи. Позиціонування блокових елементів

Л. (1)

Завдання для СРС. Псевдоклас :lang. Порядок елементів z-index. Плаваючі елементи
Тема 6. Мова JavaScript
11

Лекція 11. Основи JavaScript

Можливості JavaScript. JavaScript у браузерах. Мови «над» JavaScript. Редактори. Консоль розробника. Зовнішні, внутрішні скрипти, підключення скриптів. Інструкції JavaScript, Крапка з комою. Коментарі. Змінні.

Л. (1)

Завдання для СРС. Суворий режим - "use strict". Область видимості змінних. Відмінності змінних let і var
12

Лекція 12. Типи даних.

Типи даних. Математичні операції. Оператор typeof. Взаємодія з браузером: alert, prompt, confirm. Порівняння різних типів. Порівняння з null і undefined. Умовне розгалуження. Цикли while і for.

Л. (1)

Завдання для СРС. Перетворення типів. Унарні, бінарні, побітові, логічні оператори. Оператори порівняння. Умовний оператор "?" Конструкція "switch"
13

Лекція 13. Функції.

Типи функцій: оголошення функції (Function Declaration), Функціональний вираз (Function Expression). Параметри. Параметри за замовчуванням. Повернення значень. Іменування функцій. Function Expression в порівнянні з Function Declaration

Л. (1)

Завдання для СРС. Функції-«колбеки». Функції-стрілки
14

Лекція 14. Браузер: документ

Кореневий об’єкт у браузері для JavaScript. Об’єктна модель документа DOM. Об’єктна модель браузера BOM. Об’єкт document. Вузли-елементи і текстові вузли дерева DOM. Навігація по вузлам DOM. Класи DOM-вузлів. Зміна документа (створення живих сторінок). Методи вставки нових вузлів в документ. Видалення вставлених (живих) вузлів з документу.

Л. (1)

Завдання для СРС. Колекції елементів. Навігація по елементам DOM. DOM-елемент <table>, додаткові властивості. Пошук елементів. Статичні колекції. Живі колекції. DOM-властивість «hidden». Методи отримання стандартних атрибутів. Методи отримання нестандартних атрибутів. Клонування вузлів DOM.
15

Лекція 15. Події JavaScript

Введення в браузерні події. Обробники подій. Альтернативний спосіб призначення обробників за допомогою спеціальних методів addEventListener і removeEventListener. Об’єкт події. Спливання. Делегування подій.

Л. (1)

Завдання для СРС. Доступ до елементу через this. Властивості об'єкта event. Об'єкт-обробник: handleEvent. Занурення. Застосування делегування подій. Прийом проектування «поведінка»
16

Лекція 16. Події миші.

Прості події миші. Комплексні події миші. Порядок подій миші. Координати миші. Рух миші над елемнтами. Drag'n'Drop з подіями миші.

Л. (1)

Завдання для СРС. Модифікатори: shift, alt, ctrl і meta, які включають в себе події миші. Відключення виділення при подвійному кліці мишкою. Запобігання копіюванню вмісту сторінки. Drag'n'Drop з подіями dragstart, dragend.
17

Лекція 17. Форма. Властивості і методи форми

Елементи форми. Навігація по елементам форми. Фокусування focus / blur. Події: change, input, cut, copy, paste

Л. (1)

Завдання для СРС. Форми, властивості елементів форми. Події focusin / focusout.

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

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

Системи контролю версій. Розподілена система контролю версій Mercurial/Git

Створити репозиторій, додати в нього кілька файлів за допомогою командного рядка та графічної оболочки.

Опрацювати команди: створення репозиторію, додавання файлів, збереження файлів у репозиторіях, перегляд історій змін, зафіксованих в репозиторії, повернення змінних файлів до зафіксованого стану в репозиторії, відображення списку змінних файлів, видалення файлів із репозиторіч, відкриття вмісту будь-якого файлу для будь-якої ревізії, апдейт.

Л. (2)

 2
2

Гілки Mercurial/Git. Відкладення змін

Для проекту створити 3 вітки. У кожній з них реалізувати певний функціонал (наприклад, 1 гілка - вивести повідомлення, 2 гілка - вивести інше повідомлення, 3 ілка – виводити повідомлення натиснувши кнопку).

Додати файл, внести до нього зміни, відкласти зміни, забрати зміни для фіксації.

Л. (2)

 2
3

Центральний репозиторій Mercurial/Git. Клони. Злиття результатів роботи кількох користувачів

Навчитися працювати в команді. Створити центральний репозиторій на локальній машині. Клонувати 2 репозиторії на локальній машині для роботи «двох користувачів». Додати проєкт в однин репозиторій, зробити коміт, проштовхнути на центральний репозиторій (push), перейти в інший репозиторій і забрати проєкт з центрального репозиторію (pull). У двох репозиторіях зробити зміни в проекті таким чином, щоб виникла конфліктна ситуація при злитті. Усуньте конфлікти за допомогою засобів СКВ

Л. (2)

 2
4

HTML. Структура документа. Заголовки. Гіперпосилання

Обрати тему проєкту. Створити 4 сторінки. Перша сторінка має назву - index.html. В метаданих вказати автора документа. Кожна сторінка повинна мати назву <title></title>. Кожна сторінка повинна мати заголовок. В тілі сторінок додати по декілька абзаців тексту (відповідно до тематики) використовуючи тег <p></p>. Використовуючи гіперпосилання, реалізувати переходи між сторінками, на певний рядок поточної сторінки, певний рядок іншої сторінки, на сторінку в інтернеті). Застосувати атрибут, який задає колір гіперпосилань.

Л. (2)

 2
5

Форматування тексту. Кольори. Списки. Зображення. Фон

Використовувати обрану тему. Форматувати текст сторінок (виділення курсивом, напівжирним, шрифт, розмір, колір, вирівнювання), використовуючи тег <font></ font > і відповідні атрибути.

Додати декілька картинок <img>. За допомогою атрибутів width і height зменшити і збільшити розмір зображення в 2 рази. Зробити картинку гіперпосиланням: при натисканні на картинку повинен відкриватися повнорозмірний варіант в новому вікні.

Додати список, використовуючи різні типи форматування (нумерація <ul></ul>, маркування <ol></ol>, визначення <dl></dl>). Застосувати різні типи маркерів type. Додати графічний фон на сторінки (картинку або колір)

Л. (2)

 2
6

Таблиці

Використовувати обрану тему. На сторінці додати таблицею 3 * 4. Залити кольором шапку з заголовками колонок. Додати заголовок до таблиці. В комірки першого рядка вставити картинки, другого рядка - гіперпосилання, 3 рядка - текст. Створити складну таблицю, застосувавши різні види вирівнювання для різних рядків, об'єднання комірок (rawspan, calspan), використати відступи (сellspacing, сellpadding).

Л. (2)

 2
7

Фрейми

Використовувати обрану тему. Застосувати фреймову структуру з трьох фреймів (заголовок, ліве вікно (меню), праве вікно (контент)). В лівий фрейм завантажувати меню. Сторінку меню, яка завантажується в лівий фрейм, закодувати таким чином, щоб направляти з'єднані сторінки в правий фрейм контенту. Документ (web-сторінка), виведений в правому фреймі повинен змінюватися в залежності від обраного пункту меню.

Л. (2)

 2
8

CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі

Використовувати обрану тему. Створити зовнішній CSS файл. Підключити його до всіх сторінок. Використовуючи селектори (класи, ідентифікатори, унікальний ідентифікатор) налаштувати стиль шрифта (розмір, колір, стиль, міжрядковий інтервал, вирівнювання) для заголовка (HN), для тіла (BODY), посилань, задати для тега BODY фон властивістю background-color. Застосувати стиль рівня документу для перевизначення стилю для посилань. Застосувати внутрішній стиль до абзайу. Використати оголошення !important.

Л. (2)

 2
9

Стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків

Використовувати обрану тему. Додати в CSS файл стилі для списків (маркованих, нумерованих, визначень) та до таблиці, використовуючи розміри, кольори, шрифти, поля, заповнення, межі, фон.

Л. (2)

 2
10

Контекстні селектори. Сусідні селектори. Дочірні селектори

Використовувати обрану тему. Застосувати контекстні, сусідні, дочірні селектори до елементів сторінок

Л. (2)

 2
11

Блочні елементи. Рядкові елементи. Позиціонування. Псевдокласи. Псевдоелементи

Використовувати обрану тему. Застосувати блочні елементи <div> ... </ div>, рядкові елементи <span> ... </ span>. Для позиціонування блоків застосувати властивість position. Зробити один або декілька блоків плаваючими, застосувавши атрибут float.

Використати:

- псевдокласи для посилань (:link, :visited, :active, :hover);

- псевдоклас :first-child;

- псевдоелементи: :before, :after.

Л. (2)

 2
12

JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції

Використовувати обрану тему. Застосувати функції alert, prompt, confirm. Оформити внутрішніми скриптами. Написати та викликати власну функцію «Діалог з користувачем», застосувати змінні, умовне розгалуження, цикли. Функцію помістити в зовнішній файл-скрипт. Підключити до html-документу. Написати та викликати власну функцію виводу інформації про розробника сторінки з параметрами (прізвище, імя, посада). Параметру «посада» задати значення за замовчуванням. Написати функцію порівняння двох рядків, більший вивести на екран, використовуючи alert.

Л. (2)

 2
13

DOM. BOM. Браузер: документ(document)

Використовувати обрану тему. За допомогою об’єкта document змінити фон сторінки на 30 секунд. За допомогою об’єкта location перенаправити браузер на іншу сторінку. Викоритовуючи метод getElementById. Використати метод querySelectorAll. Використати наступні властивості DOM-вузла: innerHTML, outerHTML, nodeValue / data, textContent. Внести зміни в документи/сторінку, використовуючи document.write, document.createElement(tag), document.createTextNode(text) та методи вставки node.append (... nodes or strings), node.prepend (... nodes or strings), node.after (... nodes or strings), node.replaceWith (... nodes or strings), метод видалення вузлів node.remove ().

Л. (2)

 2
14

Події. Обробники подій

Використовувати обрану тему. Використати одну з подій миші. Написати функцію-обробник. Призначити функцію-обробник події через атрибут і через властивість. Використати метод addEventListener, призначити одній події різні обробники (написати функції-обробники). Призначити обробником події об’єкт за допомогою addEventListener, застосувати метод handleEvent, вивести елемент, на якому спрацював обробник, використовуючи event.currentTarget. Видалити об’єкт, використовуючи removeEventListener

Л. (2)

 2
15

Події. Спливання. Делегування подій

Використовувати обрану тему. Створити список або використати існуючий. Реалізувати підсвічування елементів списку при кліку миші. Використовувати event.target. Обробник onclick застосувати для списку, а не для кожного елементу. Створити меню (кілька кнопок), додати один обробник для всього меню і атрибути data-* для кожної кнопки, в відповідності з методами, які вони викликають. Застосувати прийом проектування «Поведінка» (додавання елементам поведінки behavior за допомогою атрибута data-*.

Л. (2)

 4
16

Події миші. Drag'n'Drop

Використовувати обрану тему. Використати події mouseover, mouseout та event.target, event.relatedTarget. При русі показчика миші над елементами, вони повинні змінювати свій стиль.

Реалізувати перетягування елемента (текст/картинка/файл) на сторінці, використавши mousedown, mousemove, mouseup.

Л. (2)

 4

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

№ з/п Назва теми, що виноситься на самостійне опрацювання Кількість годин СРС
1 Команди для роботи в Git 3
2 Гілкування в Git 3
3 Виправлення помилок після фіксації Git 3
4 Відмінності HTML-5 від попередніх версій 1
5 Секція <meta>. Мета-теги 1
6 Абсолютні, відносні гіперпосилання 0,5
7 Спеціальні символи 0,5
8 Представлення кольору в HTML за допомогою шістнадцятковових чисел, моделі RGB 0,5
9 Структура таблиці у вигляді 3 семантичних секцій: header, body и footer 2
10 Контейнер <colgroup> та його атрибути 0,5
11 Вкладені таблиці 0,5
12 Верстка сторінок з використанням таблиць 2
13 Імпорт стилів 2
14 Оголошення !important, пріоритетність 1
15 Дочірні селектори 1
16 Сусідні селектори 1
17 Оформлення таблиць за допомогою СSS-властивостей 2
18 СSS-властивості. Рамки 0,5
19 СSS-властивості. Фон 0,5
20 Псевдоклас :lang. 0,5
21 Порядок елементів z-index. 1
22 Плаваючі елементи float 2
23 Суворий режим - "use strict" 2
24 Область видимості змінних 2
25 Відмінності змінних let і var 4
26 Перетворення типів 4
27 Унарні оператори 1
28 Бінарні оператори 1
29 Побітові оператори 1
30 Логічні оператори 1
31 Оператори порівняння 1
32 Умовний оператор "?" 1
33 Конструкція "switch" 1
34 Функції-«колбеки» 2
35 Функції-стрілки 2
36 Колекції елементів 2
37 Навігація по елементам DOM 4
38 DOM-елемент <table>, додаткові властивості 3
39 Пошук елементів 4
40 Статичні колекції 2
41 Живі колекції 4
42 DOM-властивість «hidden» 1
43 Методи отримання стандартних атрибутів 2
44 Методи отримання нестандартних атрибутів 3
45 Клонування вузлів DOM 1
46 Доступ до елементу через this 1
47 Властивості об'єкта event 2
48 Об'єкт-обробник: handleEvent 3
49 Занурення подій 4
50 Застосування делегування подій 4
51 Прийом проектування «поведінка» 4
52 Модифікатори: shift, alt, ctrl і meta, які включають в себе події миші 1
53 Відключення виділення при подвійному кліці мишкою 1
54 Запобігання копіюванню вмісту сторінки 1
55 Drag'n'Drop з подіями dragstart, dragend 2
56 Форми, властивості елементів форми 6
57 Події focusin / focusout 1

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

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

Система вимог, які ставляться перед студентом:

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

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

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

  • лабораторні роботи захищаються у два етапи – перший етап: демонстрація результатів роботи; другий етап – захист лабораторної роботи. Бали за лабораторну роботу враховуються лише за наявності електронного звіту;

  • модульні контрольні роботи пишуться на лекційних заняттях (тести у Moodle);

  • заохочувальні бали виставляються за: активну участь на лекціях. Кількість заохочуваних балів на більше 10;

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

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

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

  1. виконання та захист 16 лабораторних робіт;

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

  3. заохочувальні та штрафні бали.

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

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

«відмінно», повна відповідь на питання під час захисту (не менш ніж 90% потрібної інформації) та оформлений належним чином протокол до лабораторної роботи – 5 бали;

«добре», достатньо повна відповідь на питання під час захисту (не менш ніж 75% потрібної інформації) та оформлений належним чином протокол до лабораторної роботи – 4 бали;

«задовільно», неповна відповідь на питання під час захисту (не менш ніж 60% потрібної інформації), незначні помилки та оформлений належним чином протокол до лабораторної роботи – 3 бали;

«незадовільно», незадовільна відповідь та/або не оформлений належним чином протокол до лабораторної роботи – 0 балів.

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

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

«відмінно», повна відповідь (не менш ніж 90% потрібної інформації) – 10 балів;

«добре», достатньо повна відповідь (не менш ніж 75% потрібної інформації), або повна відповідь з незначними помилками – 8 балів;

«задовільно», неповна відповідь (але не менш ніж 60% потрібної інформації) та незначні помилки – 6 бали;

«незадовільно», незадовільна відповідь потребує обов’язкового повторного написання в кінці семестру – 0 балів.

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

за активну творчу роботу на лекції 0,5 балів.

Міжсесійна атестація

За результатами навчальної роботи за перші 7 тижнів максимально можлива кількість балів – 35 балів. На першій атестації (8-й тиждень) студент отримує «зараховано», якщо його поточний рейтинг не менше 25 балів.

За результатами 13 тижнів навчання максимально можлива кількість балів – 75 балів. На другій атестації (14-й тиждень) студент отримує «зараховано», якщо його поточний рейтинг не менший ніж 50 балів.

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

R=16* rлаб +2* rмкр =16*5+2*10=100

де rлаб – бал за лабораторну роботу (0…5);

rмкр – бал за написання МКР (0…10);

Залік:

Студенти, які не мають заборгованостей з лабораторних робіт, виконали дві МКР не нижче ніж на оцінку «задовільно», отримують залікову оцінку (залік) так званим «автоматом» відповідно до набраного рейтингу (таблиця 1)

Таблиця 1. Переведення рейтингових балів до оцінок за університетською шкалою

Кількість балів Оцінка
100-95 Відмінно
94-85 Дуже добре
84-75 Добре
74-65 Задовільно
64-60 Достатньо
Менше 60 Незадовільно

Є не зараховані лабораторні роботи або

не зарахована модульна контрольна робота

 Не допущено

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

  • перелік теоретичних питань, які виносяться на семестровий контроль наведено в Додатку 1;

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

Складено ст. викл, Хмелюк Марина Сергіївна

Ухвалено кафедрою АУТС (протокол № 1 від 27.08.2020 р.)

Погоджено Методичною комісією факультету[1] (протокол № 1 від 02.09.2020 р.)

[1] Методичною радою університету – для загальноуніверситетських дисциплін.

Додаток 1

Перелік теоретичних питань на залік по першій частині курсу

  1. Можливості систем контролю версій

  2. Локальні, централізовані, розподілені системи контролю версій

  3. Розподілені системи контролю версій Mercurial, Git

  4. Системи контролю версій Mercurial, Git. Подібність

  5. Системи контролю версій Mercurial, Git. Відмінність

  6. Репозиторій. Поняття - «гілка».

  7. Робочий каталог

  8. Способи організації гілок

  9. Управління ревізіями, постійне ім’я для ревізій

  10. Злиття функціоналу гілок

  11. Локальний репозиторій, Центральний репозиторій

  12. Створення сервера (центрального репозиторію)

  13. Робота кількох користувачів

  14. Злиття результатів роботи кількох користувачів

  15. Виправлення помилок після фіксації

  16. Процес вирішення конфліктів під час злиття

  17. На що потрібно орієнтуватись при створенні веб-сторінок

  18. Мова розмітки HTML

  19. Браузери

  20. Порядок завантаження файлів браузером під час обробки сторінок

  21. Гіпертекст

  22. Гіперпосилання

  23. Скрипти

  24. Аплети

  25. Анімація

  26. Таблиці стилів

  27. Структура документу

  28. Секція !DOCTYPE

  29. Типи html-тегів

  30. Теги, атрибути

  31. Представлення кольору в HTML

  32. Форматування тексту

  33. Форматування шрифтів

  34. Форматування заголовків

  35. Форматування абзаців

  36. Форматування списків

  37. Вставка зображень

  38. Фон

  39. Структура таблиці

  40. Типи комірок

  41. Атрибути таблиці, рядків, комірок

  42. Рамки, властивості

  43. Відступи: сellspacing, сellpadding

  44. Об’єднання рядків, комірок

  45. Структура сайту з використанням фреймів

  46. Іfame

  47. Властивості фреймів

  48. Атрибут target

  49. Блокова структура

  50. Селектор, атрибути

  51. Зовнішні, внутрішні, рівня документу стилі

  52. Порядок застосування стилів

  53. Ім’я, ідентифікатор #id, клас .class в якості селектора

  54. Універсальний селектор

  55. Контекстні селектори.

  56. СSS-властивості. Розміри (одиниці виміру)

  57. СSS-властивості. Кольори

  58. СSS-властивості. Шрифти

  59. СSS-властивості. Текст

  60. СSS-властивості. Поля

  61. СSS-властивості. Заповнення

  62. Блокові, рядкові елементи

  63. Форма, властивості

  64. Кнопки, властивості

  65. Текстові поля, властивості

  66. Псевдокласи

  67. Псевдоелементи

  68. Позиціонування блокових елементів

  69. Можливості JavaScript

  70. JavaScript у браузерах

  71. Мови «над» JavaScript

  72. Редактори коду JavaScript

  73. Консоль розробника.

  74. Зовнішні, внутрішні скрипти, підключення скриптів

  75. Інструкції JavaScript

  76. Крапка з комою, коментарі

  77. Змінні

  78. Типи даних

  79. Математичні операції

  80. Оператор typeof

  81. Взаємодія з браузером: alert, prompt, confirm

  82. Порівняння різних типів

  83. Порівняння з null і undefined

  84. Умовне розгалуження

  85. Цикли while і for

  86. Оголошення функції (Function Declaration)

  87. Функціональний вираз (Function Expression)

  88. Параметри функцій.

  89. Параметри функцій за замовчуванням

  90. Повернення значень

  91. Іменування функцій

  92. Function Expression в порівнянні з Function Declaration

  93. Кореневий об’єкт у браузері для JavaScript

  94. Об’єктна модель документа DOM

  95. Об’єктна модель браузера BOM

  96. Об’єкт document

  97. Вузли-елементи і текстові вузли дерева DOM

  98. Навігація по вузлам DOM

  99. Класи DOM-вузлів

  100. Зміна документа (створення живих сторінок)

  101. Методи вставки нових вузлів в документ

  102. Видалення вставлених (живих) вузлів з документу

  103. Введення в браузерні події

  104. Обробники подій

  105. Альтернативний спосіб призначення обробників за допомогою спеціальних методів addEventListener і removeEventListener

  106. Об’єкт події

  107. Спливання подій

  108. Делегування подій

  109. Прості події миші

  110. Комплексні події миші

  111. Порядок подій миші

  112. Координати миші

  113. Рух миші над елемнтами

  114. Drag'n'Drop з подіями миші

  115. Елементи форми

  116. Навігація по елементам форми

  117. Фокусування focus / blur

  118. Події: change, input, cut, copy, paste