Основи клієнтської розробки

Силабус освітнього компонента

Реквізити навчальної дисципліни
Рівень вищої освіти Перший (бакалаврський)
Галузь знань 12 Інформаційні технології
Спеціальність 126 Інформаційні системи та технології
Освітня програма Інтегровані інформаційні системи, Інформаційні управляючі системи та технології, Інформаційне забезпечення робототехнічних систем
Статус дисципліни Вибіркова
Форма навчання очна(денна)/заочна/дистанційна
Рік підготовки, семестр 2 курс, весняний семестр
Обсяг дисципліни 120 годин (денна: 36 годин – лекції, 18 годин – лабораторні, 66 годин – СРС / 120 годин (6 годин – Лекції, 6 годин – Лабораторні, 108 годин – СРС)
Семестровий контроль/ контрольні заходи Залік/МКР
Розклад занять 1 лекція (2 години) 1 раз на тиждень; 1 лабораторна робота (2 години) 1 раз на 2 тижні
Мова викладання Українська
Інформація про керівника курсу / викладачів Лектор, лабораторні: ст. викладач Хмелюк Марина Сергіївна ua, m.khmeliuk@kpi.ua
Розміщення курсу https://campus.kpi.ua

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

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

Силабус освітнього компонента «Основи клієнтської розробки» складено відповідно до стандарту вищої освіти спеціальності 126 Інформаційні системи та технології галузі знань 12 Інформаційні технології для першого (бакалаврського) рівня вищої освіти. Мета навчальної дисципліни. Метою навчальної дисципліни є формування та закріплення у студентів наступних компетентностей: (КЗ 2) Здатність застосовувати знання у практичних ситуаціях (КЗ 3) Здатність до розуміння предметної області та професійної діяльності, (КЗ 5) Здатність вчитися і оволодівати сучасними знаннями, (КЗ 6) Здатність до пошуку, оброблення та узагальнення інформації з різних джерел, (КС3) Здатність до проектування, розробки, налагодження та вдосконалення системного, комунікаційного та програмно-апаратного забезпечення інформаційних систем та технологій, Інтернету речей (ІоТ), комп’ютерно-інтегрованих систем та системної мережної структури, управління ними, (КС4) Здатність проектувати, розробляти та використовувати засоби реалізації інформаційних систем, технологій та інфокомунікацій (методичні, інформаційні, алгоритмічні, технічні, програмні та інші), (КС 17) Здатність застосовувати технології та інструментальні засоби для розроблення вебзастосувань, веб-сервісів, веб-сайтів та веб-інтерфейсів з інтеграцією зовнішніх даних і програмних продуктів. Підготовка висококваліфікованих фахівців, які будуть володіти знаннями управління проектами (версіями) та командною роботою над проектами за допомогою систем контролю версій, знаннями розробки клієнтської частини веб-застосунків, основами верстки за допомогою мови розмітки HTML, мови опису зовнішнього вигляду документу (веб-сторінки) – CSS, мовою JavaScript. написанням стриптів для управління веб-сторінками. Предмет навчальної дисципліни: основні поняття систем контролю версій, командна робота в розподілених системах контролю версій, клієнтська частина застосунку (веб-документи, стилі, скрипти). Програмні результати навчання, на формування та покращення яких спрямована дисципліна: (ПРН 3) Використовувати базові знання інформатики й сучасних інформаційних систем та технологій, навички програмування, технології безпечної роботи в комп'ютерних мережах, методи створення баз даних та інтернет-ресурсів, технології розроблення алгоритмів і комп’ютерних програм мовами високого рівня із застосуванням об’єктно-орієнтованого програмування для розв’язання задач проектування і використання інформаційних систем та технологій, (ПРН 5) Аргументувати вибір програмних та технічних засобів для створення інформаційних систем та технологій на основі аналізу їх властивостей, призначення і технічних характеристик з урахуванням вимог до системи і експлуатаційних умов; мати навички налагодження та тестування програмних і технічних засобів інформаційних систем та технологій, (ПРН 6) Демонструвати знання сучасного рівня технологій інформаційних систем, практичні навички програмування та використання прикладних і спеціалізованих комп’ютерних систем та середовищ з метою їх запровадження у професійній діяльності, (ПРН 7) Обґрунтовувати вибір технічної структури та розробляти відповідне програмне забезпечення, що входить до складу інформаційних систем та технологій.

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

Знання

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

Уміння

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

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

Пререквізити

вміти користуватися комп’ютером, мати знання основ програмування, структур даних, алгоритмів. Дисципліна Основи клієнтської розробки базується на дисциплінах: Програмування – 1. Основи програмування; Програмування – 2. Структури даних та алгоритми; Теорія алгоритмів. Дисципліна Основи клієнтської розробки є основою для дисципліни: Сучасні технології розробки WEB-застосувань на платформі Node.JS

Постреквізити

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

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

Очна форма

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

Розділ 1. Системи контролю версій Тема 1. Типи систем контролю версій Тема 2. Організація гілок в СКВ Тема 3. Командна робота Розділ 2. Розробка клієнтської частини
Тема 4. Мова розмітки HTML Тема 5. Каскадні таблиці стилів CSS Тема 6. Мова JavaScript

Лабораторні заняття
  1. Центральний репозиторій /Git. Гілкування Git. Клони. Злиття результатів роботи кількох користувачів
  2. HTML. Структура документа. Заголовки. Гіперпосилання. Форматування тексту. Кольори. Списки. Зображення. Фон. Таблиці
  3. CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків
  4. CSS. Контекстні селектори. Сусідні селектори. Дочірні селектори
  5. CSS. Блочні елементи. Рядкові елементи. Позиціонування. Псевдокласи. Псевдоелементи
  6. JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції. DOM. BOM. Браузер: документ(document)
  7. JavaScript. Події. Обробники подій. Спливання. Делегування подій
  8. JavaScript. Події миші

Заочна форма

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

Розділ 2. Розробка клієнтської частини Тема 1. Мова розмітки HTML Тема 2. Каскадні таблиці стилів CSS Тема 3. Мова JavaScript.

Лабораторні заняття
  1. HTML. Структура документа. Заголовки. Гіперпосилання. Форматування тексту. Кольори. Списки. Зображення. Фон. Таблиці.
  2. CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків
  3. JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції. DOM. BOM. Браузер: документ(document)

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

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

  1. Хмелюк М.С. Конспект лекцій з дисципліни «Основи клієнтської розробки»
  2. Хмелюк М.С. Методичні вказівки до виконання лабораторних робіт для студентів з дисципліни «Основи клієнтської розробки»
  3. Lynn Ben Git Magic, publish: CreateSpace, 2012. – 68с
  4. Scott Chacon, Ben Straub, Pro Git 2nd Edition 2014.- 440p.
  5. David Flanagan, JavaScript. The Definitive Guide. Master the World's Most-Used Programming Language 7th Edition, O'Reilly, 2020
  6. HTML & CSS: Design and Build Web Sites, Jon Duckett, 2011, 512p
  7. HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself 3rd Edition? Sams Publishing; 3rd edition, 2018, 800p
  8. Інтернет-ресурс https://uk.javascript.info/

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

  1. Інтернет-ресурс https://git-scm.com/book/uk/v2
  2. Інтернет-ресурс http://habr.com
  3. https://uk.sharpcoderblog.com/blog/html-unclosed-tag-checker#google_vignette

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

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

Очна форма

Лекційні заняття ||| |-|-| |№| Назва теми лекції та перелік основних питань (перелік дидактичних засобів, посилання на літературу та завдання на СРС) | |1| Лекція 1. Роль систем контролю версій. Типи Системи контролю версій | || Можливості систем контролю версій. Локальні, централізовані, розподілені системи контролю версій. Розподілені системи контролю версій. Подібність. Відмінність | || Література: (1)| || Завдання на СРС. Команди для роботи в Git| |2| Лекція 2. . Лекція 2. Гілки в СКВ| || Репозиторій. Поняття - «гілка». Робочий каталог. Способи організації гілок. Управління ревізіями, постійне ім’я для ревізій. Злиття функціоналу гілок.| ||Література: (1)| ||Завдання на СРС. Гілкування в Git| |3|Лекція 3. Організація роботи команди над проєктом з використанням системи контролю версій для погодження всіх членів команди| ||Локальний репозиторій, Центральний репозиторій. Створення сервера (центрального репозиторію). Робота кількох користувачів. Злиття результатів роботи кількох користувачів. Виправлення помилок після фіксації. Процес вирішення конфліктів під час злиття| ||Література: (1)| ||Завдання на СРС. Виправлення помилок Git| |4|Лекція 4. Вимоги до клієнтської частини застосунку| ||На що потрібно орієнтуватись при створенні веб-сторінок. Мова розмітки HTML. Браузери. Порядок завантаження файлів браузером під час обробки сторінок. Гіпертекст. Гіперпосилання. Скрипти. Аплети. Анімація. Таблиці стилів. Структура документу. Секція !DOCTYPE. Типи html-тегів. Теги, атрибути.| ||Література: (1)| ||Завдання на СРС. Відмінності HTML-5 від попередніх версій. Секція .Мета-теги. Абсолютні, відносні гіперпосилання. Спеціальні символи| |5|Лекція 5. Представлення кольору в HTML. Форматування. Зображення| ||Представлення кольору в HTML. Форматування тексту. Форматування шрифтів. Форматування заголовків. Форматування абзаців. Форматування списків. Вставка зображень. Фон| ||Література: (1)| ||Завдання для СРС. Представлення кольору в HTML за допомогою шістнадцятковових чисел, моделі RGB| |6|Лекція 6. Таблиці| ||Структура таблиці. Типи комірок. Атрибути таблиці, рядків, комірок. Рамки, властивості. Відступи: сellspacing, сellpadding. Об’єднання рядків, комірок|| ||Література: (1)| ||Завдання для СРС. Структура таблиці. Типи комірок. Атрибути таблиці, рядків, комірок. Рамки, властивості. Відступи: сellspacing, сellpadding. Об’єднання рядків, комірок| |7|Лекція 7. Основи верстки. Блоки| ||Структура сайту з використанням блоків. Використання плаваючих фреймів іfame. Рядкові елементи| ||Література: (1)| ||Завдання для СРС. Верстка з використанням таблиць | |8|Лекція 8. Лекція 8. Каскадні таблиці стилів CSS. Типи селекторів| ||Селектор, атрибути. Зовнішні, внутрішні, рівня документу стилі. Порядок застосування стилів. Ім’я, ідентифікатор #id, клас .class в якості селектора. Універсальний селектор. Контекстні селектори| ||Література: (1)| ||Завдання для СРС. Імпорт стилів. Оголошення !important, пріоритетність. Дочірні селектори. Сусідні селектори| |9|Лекція 9. CSS-властивості| ||Розміри (одиниці виміру). Кольори. Шрифти. Текст. Поля. Заповнення. Рамки. Фон| ||Література: (1- стор.89-96 )| ||Завдання для СРС. Оформлення таблиць за допомогою СSS-властивостей| |10|Лекція 10. Блокові, рядкові елементи. Псевдокласи. Псевдоелементи. Позиціонування| ||Блокові, рядкові елементи. Форма. Кнопки. Текстові поля. Псевдокласи. Псевдоелементи. Позиціонування блокових елементів|| ||Література: (1)| ||Завдання для СРС. . Псевдоклас :lang. Порядок елементів z-index. Плаваючі елементи| |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-елемент

, додаткові властивості. Пошук елементів. Статичні колекції. Живі колекції. 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|Центральний репозиторій /Git. Гілкування Git. Клони. Злиття результатів роботи кількох користувачів. Створити репозиторій, додати в нього кілька файлів за допомогою командного рядка та графічної оболочки. Опрацювати команди: створення репозиторію, додавання файлів, збереження файлів у репозиторіях, перегляд історій змін, зафіксованих в репозиторії, повернення змінних файлів до зафіксованого стану в репозиторії, відображення списку змінних файлів, видалення файлів із репозиторіч, відкриття вмісту будь-якого файлу для будь-якої ревізії, апдейт. Для проекту створити 3 вітки. У кожній з них реалізувати певний функціонал (наприклад, 1 гілка - вивести повідомлення, 2 гілка - вивести інше повідомлення, 3 ілка – виводити повідомлення натиснувши кнопку). Навчитися працювати в команді. Створити центральний репозиторій. Клонувати 2 репозиторії на локальній машині для роботи «двох користувачів». Додати проєкт в однин репозиторій, зробити коміт, проштовхнути на центральний репозиторій (push), перейти в інший репозиторій і забрати проєкт з центрального репозиторію (pull). У двох репозиторіях зробити зміни в проекті таким чином, щоб виникла конфліктна ситуація при злитті. Усунути конфлікти за допомогою засобів СКВ |2| |2|HTML. Структура документа. Заголовки. Гіперпосилання. Форматування тексту. Кольори. Списки. Зображення. Фон. Таблиці. Обрати тему проєкту. Створити 4 сторінки. Перша сторінка має назву - index.html. В метаданих вказати автора документа. Кожна сторінка повинна мати назву . Кожна сторінка повинна мати заголовок. В тілі сторінок додати по декілька абзаців тексту (відповідно до тематики) використовуючи тег

. Використовуючи гіперпосилання, реалізувати переходи між сторінками, на певний рядок поточної сторінки, певний рядок іншої сторінки, на сторінку в інтернеті). Застосувати атрибут, який задає колір гіперпосилань. Форматувати текст сторінок (виділення курсивом, напівжирним, шрифт, розмір, колір, вирівнювання), використовуючи тег </ font > і відповідні атрибути. Додати декілька картинок . За допомогою атрибутів width і height зменшити і збільшити розмір зображення в 2 рази. Зробити картинку гіперпосиланням: при натисканні на картинку повинен відкриватися повнорозмірний варіант в новому вікні. Додати список, використовуючи різні типи форматування (нумерація
    , маркування
      , визначення
      ). Застосувати різні типи маркерів type. Додати графічний фон на сторінки (картинку або колір). На сторінці додати таблицею 3 * 4. Залити кольором шапку з заголовками колонок. Додати заголовок до таблиці. В комірки першого рядка вставити картинки, другого рядка - гіперпосилання, 3 рядка - текст. Створити складну таблицю, застосувавши різні види вирівнювання для різних рядків, об'єднання комірок (rawspan, calspan), використати відступи (сellspacing, сellpadding)|2| |3|CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків. Підключити його до всіх сторінок. Використовуючи селектори (класи, ідентифікатори, унікальний ідентифікатор) налаштувати стиль шрифта (розмір, колір, стиль, міжрядковий інтервал, вирівнювання) для заголовка (HN), для тіла (BODY), посилань, задати для тега BODY фон властивістю background-color. Застосувати стиль рівня документу для перевизначення стилю для посилань. Застосувати внутрішній стиль до абзайу. Використати оголошення !important. Додати в CSS файл стилі для списків (маркованих, нумерованих, визначень) та до таблиці, використовуючи розміри, кольори, шрифти, поля, заповнення, межі, фон.|2| |4|CSS. Контекстні селектори. Сусідні селектори. Дочірні селектори. Використовувати обрану тему. Застосувати контекстні, сусідні, дочірні селектори до елементів сторінок|2| |5|CSS. Блочні елементи. Рядкові елементи. Позиціонування. Псевдокласи. Псевдоелементи. Застосувати блочні елементи
      ... </ div>, рядкові елементи ... </ span>. Для позиціонування блоків застосувати властивість position. Зробити один або декілька блоків плаваючими, застосувавши атрибут float. Використати: - псевдокласи для посилань (:link, :visited, :active, :hover); - псевдоклас :first-child; - псевдоелементи: :before, :after|2| |6|JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції. DOM. BOM. Браузер: документ(document). Застосувати функції alert, prompt, confirm. Оформити внутрішніми скриптами. Написати та викликати власну функцію «Діалог з користувачем», застосувати змінні, умовне розгалуження, цикли. Функцію помістити в зовнішній файл-скрипт. Підключити до html-документу. Написати та викликати власну функцію виводу інформації про розробника сторінки з параметрами (прізвище, імя, посада). Параметру «посада» задати значення за замовчуванням. Написати функцію порівняння двох рядків, більший вивести на екран, використовуючи alert. Використовувати обрану тему. За допомогою об’єкта 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().|4| |7|JavaScript. Події. Обробники подій. Спливання. Делегування подій. Використати одну з подій миші. Написати функцію-обробник. Призначити функцію-обробник події через атрибут і через властивість. Використати метод addEventListener, призначити одній події різні обробники (написати функції-обробники). Призначити обробником події об’єкт за допомогою addEventListener, застосувати метод handleEvent, вивести елемент, на якому спрацював обробник, використовуючи event.currentTarget. Видалити об’єкт, використовуючи removeEventListener. Створити список або використати існуючий. Реалізувати підсвічування елементів списку при кліку миші. Використовувати event.target. Обробник onclick застосувати для списку, а не для кожного елементу. Створити меню (кілька кнопок), додати один обробник для всього меню і атрибути data-* для кожної кнопки, в відповідності з методами, які вони викликають. Застосувати прийом проектування «Поведінка» (додавання елементам поведінки behavior за допомогою атрибута data-*|2| |8|Події миші. Drag'n'Drop. Використати події mouseover, mouseout та event.target, event.relatedTarget. При русі показчика миші над елементами, вони повинні змінювати свій стиль. Реалізувати перетягування елемента (текст/картинка/файл) на сторінці, використавши mousedown, mousemove, mouseup|2|

      Заочна форма

      Лекційні заняття |||| |-|-|-| |№ з/п|Назва теми лекції та перелік основних питань
      (перелік дидактичних засобів, посилання на літературу та завдання на СРС)| |Тема 1 Мова розмітки HTML| |1|Лекція 1. Вимоги до клієнтської частини застосунку. На що потрібно орієнтуватись при створенні веб-сторінок. Мова розмітки HTML. Браузери. Порядок завантаження файлів браузером під час обробки сторінок. Гіпертекст. Гіперпосилання. Скрипти. Аплети. Анімація. Таблиці стилів. Структура документу. Секція !DOCTYPE. Типи html-тегів. Теги, атрибути. Л. (1) Завдання на СРС. Відмінності HTML-5 від попередніх версій. Секція .Мета-теги. Абсолютні, відносні гіперпосилання. Спеціальні символи | |Тема 2 Каскадні таблиці стилів CSS| |2|Лекція 2. Каскадні таблиці стилів CSS. Типи селекторів. Селектор, атрибути. Зовнішні, внутрішні, рівня документу стилі. Порядок застосування стилів. Ім’я, ідентифікатор #id, клас .class в якості селектора. Універсальний селектор. Контекстні селектори. Л. (1) Завдання для СРС. Імпорт стилів. Оголошення !important, пріоритетність. Дочірні селектори. Сусідні селектори| |Тема 3. Мова JavaScript| |3|Лекція 3. Основи JavaScript. Можливості JavaScript. JavaScript у браузерах. Мови «над» JavaScript. Редактори. Консоль розробника. Зовнішні, внутрішні скрипти, підключення скриптів. Інструкції JavaScript, Крапка з комою. Коментарі. Змінні. Л. (1) Завдання для СРС. Суворий режим - "use strict". Область видимості змінних. Відмінності змінних let і var.|

      Лабораторні заняття |||| |-|-|-| |№ з/п|Назва лабораторної роботи (комп’ютерного практикуму)|Кількість ауд. годин| |1|HTML. Структура документа. Заголовки. Гіперпосилання. Форматування тексту. Кольори. Списки. Зображення. Фон. Таблиці. Обрати тему проєкту. Створити 4 сторінки. Перша сторінка має назву - index.html. В метаданих вказати автора документа. Кожна сторінка повинна мати назву . Кожна сторінка повинна мати заголовок. В тілі сторінок додати по декілька абзаців тексту (відповідно до тематики) використовуючи тег

      . Використовуючи гіперпосилання, реалізувати переходи між сторінками, на певний рядок поточної сторінки, певний рядок іншої сторінки, на сторінку в інтернеті). Застосувати атрибут, який задає колір гіперпосилань. Форматувати текст сторінок (виділення курсивом, напівжирним, шрифт, розмір, колір, вирівнювання), використовуючи тег </ font > і відповідні атрибути. Додати декілька картинок . За допомогою атрибутів width і height зменшити і збільшити розмір зображення в 2 рази. Зробити картинку гіперпосиланням: при натисканні на картинку повинен відкриватися повнорозмірний варіант в новому вікні. Додати список, використовуючи різні типи форматування (нумерація
        , маркування
          , визначення
          ). Застосувати різні типи маркерів type. Додати графічний фон на сторінки (картинку або колір). На сторінці додати таблицею 3 * 4. Залити кольором шапку з заголовками колонок. Додати заголовок до таблиці. В комірки першого рядка вставити картинки, другого рядка - гіперпосилання, 3 рядка - текст. Створити складну таблицю, застосувавши різні види вирівнювання для різних рядків, об'єднання комірок (rawspan, calspan), використати відступи (сellspacing, сellpadding). Л. (2) |2| |2|CSS. Внутрішні стилі. Стилі рівня документу. Зовнішні стилі. Оформлення тексту, поля, заповнення, межі. Застосування стилів для таблиць і списків. Підключити його до всіх сторінок. Використовуючи селектори (класи, ідентифікатори, унікальний ідентифікатор) налаштувати стиль шрифта (розмір, колір, стиль, міжрядковий інтервал, вирівнювання) для заголовка (HN), для тіла (BODY), посилань, задати для тега BODY фон властивістю background-color. Застосувати стиль рівня документу для перевизначення стилю для посилань. Застосувати внутрішній стиль до абзайу. Використати оголошення !important. Додати в CSS файл стилі для списків (маркованих, нумерованих, визначень) та до таблиці, використовуючи розміри, кольори, шрифти, поля, заповнення, межі, фон. Л. (2) |2| |3|JavaScript. Внутрішні, зовнішні скрипти. Змінні. Умови. Цикли. Функції. DOM. BOM. Браузер: документ(document). Застосувати функції alert, prompt, confirm. Оформити внутрішніми скриптами. Написати та викликати власну функцію «Діалог з користувачем», застосувати змінні, умовне розгалуження, цикли. Функцію помістити в зовнішній файл-скрипт. Підключити до html-документу. Написати та викликати власну функцію виводу інформації про розробника сторінки з параметрами (прізвище, імя, посада). Параметру «посада» задати значення за замовчуванням. Написати функцію порівняння двох рядків, більший вивести на екран, використовуючи alert. Використовувати обрану тему. За допомогою об’єкта 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|

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

          Очна форма |||| |-|-|-| |№|Назва теми, що виноситься на самостійне опрацювання|Кількість годин СРС| |1|Команди для роботи в Git|2| |2|Гілкування в Git|2| |3|Виправлення помилок після фіксації Git|2| |4|Відмінності HTML-5 від попередніх версій|1| |5|Секція . Мета-теги|1| |6|Абсолютні, відносні гіперпосилання|0,5| |7|Спеціальні символи|0,5| |8|Представлення кольору в HTML за допомогою шістнадцятковових чисел, моделі RGB|0,5| |9|Структура таблиці у вигляді 3 семантичних секцій: header, body и footer|1| |10|Контейнер

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

          Заочна форма |||| |-|-|-| |№|Назва теми, що виноситься на самостійне опрацювання|Кількість годин СРС| |1|Роль систем контролю версій. Типи Системи контролю версій. Можливості систем контролю версій. Локальні, централізовані, розподілені системи контролю версій. Розподілені системи контролю версій. Подібність. Відмінність. Команди для роботи в Git.|4| |2|Гілки в СКВ. Репозиторій. Поняття - «гілка». Робочий каталог. Способи організації гілок. Управління ревізіями, постійне ім’я для ревізій. Злиття функціоналу гілок. Гілкування в Git |6| |3|Організація роботи команди над проєктом з використанням системи контролю версій для погодження всіх членів команди. Локальний репозиторій, Центральний репозиторій. Створення сервера (центрального репозиторію). Робота кількох користувачів. Злиття результатів роботи кількох користувачів. Виправлення помилок після фіксації. Процес вирішення конфліктів під час злиття. Виправлення помилок Git |8| |4|Представлення кольору в HTML. Форматування тексту. Форматування шрифтів. Форматування заголовків. Форматування абзаців. Форматування списків. Вставка зображень. Фон. Представлення кольору в HTML за допомогою шістнадцятковових чисел, моделі RGB |4| |5|Структура таблиці. Типи комірок. Атрибути таблиці, рядків, комірок. Рамки, властивості. Відступи: сellspacing, сellpadding. Об’єднання рядків, комірок. Структура таблиці. Типи комірок. Атрибути таблиці, рядків, комірок. Рамки, властивості. Відступи: сellspacing, сellpadding. Об’єднання рядків, комірок |4| |6|Структура сайту з використанням блоків. Використання плаваючих фреймів іfame. Рядкові елементи. Верстання з використанням таблиць |4| |7|CSS-властивості. Розміри (одиниці виміру). Кольори. Шрифти. Текст. Поля. Заповнення. Рамки. Фон. Оформлення таблиць за допомогою СSS-властивостей. |6| |8|Блокові, рядкові елементи. Форма. Кнопки. Текстові поля. Псевдокласи. Псевдоелементи. Позиціонування блокових елементів. Псевдоклас :lang. Порядок елементів z-index. Плаваючі елементи |4| |9|JavaScript. Типи даних. Математичні операції. Оператор typeof. Взаємодія з браузером: alert, prompt, confirm. Порівняння різних типів. Порівняння з null і undefined. Умовне розгалуження. Цикли while і for. Перетворення типів. Унарні, бінарні, побітові, логічні оператори. Оператори порівняння. Умовний оператор "?" Конструкція "switch"|14| |10|JavaScript. Типи функцій: оголошення функції (Function Declaration), Функціональний вираз (Function Expression). Параметри. Параметри за замовчуванням. Повернення значень. Іменування функцій. Function Expression в порівнянні з Function Declaration. Функції-«колбеки». Функції-стрілки |10| |11|Браузер: документ. Кореневий об’єкт у браузері для JavaScript. Об’єктна модель документа DOM. Об’єктна модель браузера BOM. Об’єкт document. Вузли-елементи і текстові вузли дерева DOM. Навігація по вузлам DOM. Класи DOM-вузлів. Зміна документа (створення живих сторінок). Методи вставки нових вузлів в документ. Видалення вставлених (живих) вузлів з документу. Колекції елементів. Навігація по елементам DOM. DOM-елемент

          , додаткові властивості. Пошук елементів. Статичні колекції. Живі колекції. DOM-властивість «hidden». Методи отримання стандартних атрибутів. Методи отримання нестандартних атрибутів. Клонування вузлів DOM. |12| |12|Події JavaScript. Введення в браузерні події. Обробники подій. Альтернативний спосіб призначення обробників за допомогою спеціальних методів addEventListener і removeEventListener. Об’єкт події. Спливання. Делегування подій. Доступ до елементу через this. Властивості об'єкта event. Об'єкт-обробник: handleEvent. Занурення. Застосування делегування подій. Прийом проектування «поведінка» |12| |13|JavaScript. Прості події миші. Комплексні події миші. Порядок подій миші. Координати миші. Рух миші над елемнтами. Drag'n'Drop з подіями миші. Модифікатори: shift, alt, ctrl і meta, які включають в себе події миші. Відключення виділення при подвійному кліці мишкою. Запобігання копіюванню вмісту сторінки. Drag'n'Drop з подіями dragstart, dragend |12| |14|Форма. Властивості і методи форми. Елементи форми. Навігація по елементам форми. Фокусування focus / blur. Події: change, input, cut, copy, paste. Події focusin / focusout|8|

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

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

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

          • відвідування лекційних та лабораторних занять є обов’язковою складовою вивчення матеріалу;
          • на лекції викладач користується власним презентаційним матеріалом; використовує телеграм для викладання матеріалу поточної лекції, додаткових ресурсів, лабораторних робіт та інше; викладач відкриває доступ до певної директорії гугл-диска для скидання електронних лабораторних звітів;
          • на лекції заборонено відволікати викладача від викладання матеріалу, усі питання, уточнення та ін. студенти задають в кінці лекції у відведений для цього час;
          • лабораторні роботи захищаються у два етапи – перший етап: демонстрація результатів роботи; другий етап – захист лабораторної роботи. Бали за лабораторну роботу враховуються лише за наявності електронного звіту;
          • модульні контрольні роботи пишуться на лекційних заняттях (тести у Moodle);
          • заохочувальні бали виставляються за: активну участь на лекціях. Кількість заохочуваних балів на більше 10;
          • штрафні бали виставляються за: невчасну здачу лабораторної роботи. Кількість штрафних балів на більше 10;
          • політика щодо академічної доброчесності: Кодекс честі Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського» https://kpi.ua/files/honorcode.pdf встановлює загальні моральні принципи, правила етичної поведінки осіб та передбачає політику академічної доброчесності для осіб, що працюють і навчаються в університеті, якими вони мають керуватись у своїй діяльності, в тому числі при вивченні та складанні контрольних заходів з дисципліни «Переддипломна практика».

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

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

          1. виконання та захист 8 лабораторних робіт;
          2. виконання 2 одногодинних модульних контрольних робіт (МКР);
          3. заохочувальні та штрафні бали.

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

          Денна форма навчання:

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

          1. виконання та захист 8 лабораторних робіт;
          2. виконання 2 одногодинних модульних контрольних робіт (МКР);
          3. заохочувальні та штрафні бали.

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

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

          «відмінно», повна відповідь на питання під час захисту (не менш ніж 90% потрібної інформації) та оформлений належним чином протокол до лабораторної роботи – 9 балів; «добре», достатньо повна відповідь на питання під час захисту (не менш ніж 75% потрібної інформації) та оформлений належним чином протокол до лабораторної роботи – 7,5 балів; «задовільно», неповна відповідь на питання під час захисту (не менш ніж 60% потрібної інформації), незначні помилки та оформлений належним чином протокол до лабораторної роботи – 6 балів; «незадовільно», незадовільна відповідь та/або не оформлений належним чином протокол до лабораторної роботи – 0 балів. За запізнення з поданням лабораторної роботи до захисту від встановленого терміну оцінка знижується на 1 бал (але не нижче 1 балу за кожну лабораторну роботу).

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

          «відмінно», повна відповідь (не менш ніж 90% потрібної інформації) – 14 балів; «добре», достатньо повна відповідь (не менш ніж 75% потрібної інформації), або повна відповідь з незначними помилками – 10 балів; «задовільно», неповна відповідь (але не менш ніж 60% потрібної інформації) та незначні помилки – 6 бали; «незадовільно», незадовільна відповідь потребує обов’язкового повторного написання в кінці семестру – 0 балів.

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

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

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

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

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

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

          R=8* rлаб +2* rмкр =8*9+2*14=100

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

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

          Залік:

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

          Таблиця 1. Переведення рейтингових балів до оцінок за університетською шкалою
          Кількість балів Оцінка
          100-95 Відмінно
          94-85 Дуже добре
          84-75 Добре
          74-65 Задовільно
          64-60 Достатньо
          Менше 60 Незадовільно
          Є не зараховані лабораторні роботи або не зарахована модульна контрольна робота Не допущено

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

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

          Робочу програму навчальної дисципліни (Силабус): Складено ст. викладач кафедри інформаційних систем та технологій ФІОТ, Хмелюк Марина Сергіївна Ухвалено кафедрою ІСТ (протокол № 16 від 12.06.2024 р.) Погоджено Методичною комісією факультету (протокол № 10 від 21.06.2024 р.)

          Додаток 1 Перелік теоретичних питань на залік

          1. Можливості систем контролю версій
          2. Локальні, централізовані, розподілені системи контролю версій
          3. Розподілені системи контролю версій
          4. Репозиторій. Поняття - «гілка».
          5. Робочий каталог
          6. Способи організації гілок
          7. Управління ревізіями, постійне ім’я для ревізій
          8. Злиття функціоналу гілок
          9. Локальний репозиторій, Центральний репозиторій
          10. Створення сервера (центрального репозиторію)
          11. Робота кількох користувачів
          12. Злиття результатів роботи кількох користувачів
          13. Виправлення помилок після фіксації
          14. Процес вирішення конфліктів під час злиття
          15. На що потрібно орієнтуватись при створенні веб-сторінок
          16. Мова розмітки HTML
          17. Браузери
          18. Порядок завантаження файлів браузером під час обробки сторінок
          19. Гіпертекст
          20. Гіперпосилання
          21. Скрипти
          22. Аплети
          23. Анімація
          24. Таблиці стилів
          25. Структура документу
          26. Секція !DOCTYPE
          27. Типи html-тегів
          28. Теги, атрибути
          29. Представлення кольору в HTML
          30. Форматування тексту
          31. Форматування шрифтів
          32. Форматування заголовків
          33. Форматування абзаців
          34. Форматування списків
          35. Вставка зображень
          36. Фон
          37. Структура таблиці
          38. Типи комірок
          39. Атрибути таблиці, рядків, комірок
          40. Рамки, властивості
          41. Відступи: сellspacing, сellpadding
          42. Об’єднання рядків, комірок
          43. Структура сайту з використанням фреймів
          44. Іfame
          45. Властивості фреймів
          46. Атрибут target
          47. Блокова структура
          48. Селектор, атрибути
          49. Зовнішні, внутрішні, рівня документу стилі
          50. Порядок застосування стилів
          51. Ім’я, ідентифікатор #id, клас .class в якості селектора
          52. Універсальний селектор
          53. Контекстні селектори.
          54. СSS-властивості. Розміри (одиниці виміру)
          55. СSS-властивості. Кольори
          56. СSS-властивості. Шрифти
          57. СSS-властивості. Текст
          58. СSS-властивості. Поля
          59. СSS-властивості. Заповнення
          60. Блокові, рядкові елементи
          61. Форма, властивості
          62. Кнопки, властивості
          63. Текстові поля, властивості
          64. Псевдокласи
          65. Псевдоелементи
          66. Позиціонування блокових елементів
          67. Можливості JavaScript
          68. JavaScript у браузерах
          69. Мови «над» JavaScript
          70. Редактори коду JavaScript
          71. Консоль розробника.
          72. Зовнішні, внутрішні скрипти, підключення скриптів
          73. Інструкції JavaScript
          74. Крапка з комою, коментарі
          75. Змінні
          76. Типи даних
          77. Математичні операції
          78. Оператор typeof
          79. Взаємодія з браузером: alert, prompt, confirm
          80. Порівняння різних типів
          81. Порівняння з null і undefined
          82. Умовне розгалуження
          83. Цикли while і for
          84. Оголошення функції (Function Declaration)
          85. Функціональний вираз (Function Expression)
          86. Параметри функцій.
          87. Параметри функцій за замовчуванням
          88. Повернення значень
          89. Іменування функцій
          90. Function Expression в порівнянні з Function Declaration
          91. Кореневий об’єкт у браузері для JavaScript
          92. Об’єктна модель документа DOM
          93. Об’єктна модель браузера BOM
          94. Об’єкт document
          95. Вузли-елементи і текстові вузли дерева DOM
          96. Навігація по вузлам DOM
          97. Класи DOM-вузлів
          98. Зміна документа (створення живих сторінок)
          99. Методи вставки нових вузлів в документ
          100. Видалення вставлених (живих) вузлів з документу
          101. Введення в браузерні події
          102. Обробники подій
          103. Альтернативний спосіб призначення обробників за допомогою спеціальних методів addEventListener і removeEventListener
          104. Об’єкт події
          105. Спливання подій
          106. Делегування подій
          107. Прості події миші
          108. Комплексні події миші
          109. Порядок подій миші
          110. Координати миші
          111. Рух миші над елемнтами
          112. Drag'n'Drop з подіями миші
          113. Елементи форми
          114. Навігація по елементам форми
          115. Фокусування focus / blur
          116. Події: change, input, cut, copy, paste