Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Шакуров Євген Олексійович, старший викладач кафедри інформатики, ХНПУ імені Г. С. Сковороди
Базова інформація
Шифр та назва спеціальності:
014 Середня освіта (Інформатика)Назва освітньо-наукової програми
Інформатика в закладах освітиНазва дисципліни
Спеціалізоване програмуванняВид дисципліни
ОсновнаБлок дисципліни
Алгоритмізація і програмуванняКількість студентів
12Курс/Семестр
3Загальна інформація про дисципліну
Анотація
Дисципліна орієнтована на практичне вивчення сучасного вебпрограмування мовою JavaScript: від основ синтаксису до створення інтерактивних веб-додатків з використанням DOM, обробки подій, анімацій та адаптивного дизайну.Анотація
Мета дисципліни: є вивчення та застосування сучасних парадигм програмування, зокрема мовою програмування Java script, під час програмної реалізації прикладних завдань в області інформаційних систем і технологій та у майбутній професійній діяльності.Анотація
Лекції, лабораторні роботи, практичні заняття, самостійна робота. Підсумковий контроль — залік.Розподіл часу
Загальний обсяг (кредитів): 4; Лекції (занять): 8; Лабораторні (занять): 12; Практичні (занять): 16; Самостійна робота (годин): 54
Попередні дисципліни
Теоретичні основи інформатики, Комп’ютерні мережіМатеріально-технічне та програмне забезпечення дисципліни
VSCode+Prettier,Chrome DevTools, а також доступ до репозиторіїв GitHub для спільної роботи та контролю версій, MDN Web Docs, ECMAScript (ECMA-262)Структура дисципліни
| № | Теоретична складова Назва, перелік питань або анотація лекції | Годин | Практична складова Опис та приклад завдання, а також посилання на методичні матеріали | Годин | Інструменти, засоби та технології | |||||||||||||
| Модуль 1. Основи JavaScript | ||||||||||||||||||
| 1 | Тема 1.1. Вступ до JavaScript. ECMAScript і інструменти Історія та роль JS у вебі; стандарт ECMAScript (ECMA-262); MDN як референс. | 2 | Основні питання мови програмування JavaScript. Зайомство з історією розвитку мови та її ключовими концепціями. Налаштування оточення, перший скрипт, форматування коду. | 2 | VS Code, браузер, Chrome DevTools https://developer.mozilla.org https://ecma-international.org/publications-and-standards/standards/ecma-262/ | |||||||||||||
| 2 | Тема 1.2. Типи даних, змінні, оператори, обчислення let/const/var, область видимості, hoisting, strict mode. Числа, рядки, булеві, null/undefined, масиви, об’єкти. | 2 | Поняття про типи даних в JavaScript. Знайомство з операторами для виконання операцій над даними, визначати та присвоювати значення змінним. Похибки з плаваючою крапкою та безпечне округлення. міні-калькулятор, округлення результатів. | 2 | VS Code | |||||||||||||
| 3 | Тема 1.3. Вирази, керуючі конструкції та масиви Умовні оператори (if/else), цикли (for, while, for...of); масиви та методи HOF (map/filter/reduce/some/every). | 2 | if/else, тернарний оператор, цикли for/while, for...of. Масиви та методи HOF: map/filter/reduce/some/every. Задачі на перетворення та агрегацію даних. | 4 | VS Code, браузер, MDN Docs | |||||||||||||
| 4 | Тема 1.4. Функції, контекст, замикання Оголошення/вирази функцій, стрілкові функції. Замикання, контекст this, огляд bind/call/apply. | 2 | Вивчають навички роботи, як створювати функції в JavaScript, передавати параметри та отримувати результати. Знайомство з важливими концепціями, такі як область видимості та замикання. Утиліти вищого порядку, часткове застосування | 4 | VS Code, Chrome DevTools | |||||||||||||
| 5 | Основні питання об'єктів в JavaScript. Навички створювати та взаємодіяти з об'єктами, вбудовані об'єкти в мові та їхні можливості. Моделювання сутностей даних у JS. | 2 | VS Code, JSON, GitHub | |||||||||||||||
| 6 | Тема 1.6. Робота з міні-проєктами та практичні патерни JavaScript Організація невеликих JS-проєктів: структура коду, модульність, повторне використання функцій. | Розробка невеликого інтерактивного компоненту (наприклад, калькулятор або таймер), застосування функцій вищого порядку | 2 | VS Code + Prettier, браузер, DevTools. | ||||||||||||||
| Модуль 2: Події, DOM, асинхронність і мережа | ||||||||||||||||||
| 7 | Тема 2.1. DOM і події Пошук і зміна вузлів, продуктивність DOM (мінімізувати перерисовки, DocumentFragment | 2 | Вивчають навички роботи як обробляти події в веб-додатках, обробка подій на взаємодію користувачів з веб-сторінкою. Обробники, делегування подій, throttle/debounce, requestAnimationFrame. Інтерактивні компоненти (меню, модальні вікна). | 4 | JS, DOM | |||||||||||||
| 8 | Тема 2.2. Анімації: CSS-first CSS-transition/animation як базовий інструмент; коли потрібен JS. | 4 | Вивчають навички роботи події документа та взаємодію з DOM (Document Object Model), змінювати вміст сторінки та взаємодіяти з елементами DOM за допомогою JavaScript. Анімації без «reflow»: transform/opacity, апаратне прискорення. Мікро-анімації інтерфейсу (hover/focus/expand). | 4 | JS, DOM | |||||||||||||
| 9 | Тема 2.3. Асинхронність і мережеві запити Цикл подій, мікро/макрозавдання, setTimeout/setInterval. | 4 | Ррозробка анімацій та переходів на веб-сторінці за допомогою JavaScript та CSS. Знайомство про анімаційні функції та ефекти. async/await; Fetch API, заголовки, статуси, CORS, обробка помилок. отримання даних з публічних API, обробка станів (loading/error/empty). | 4 | JS, DOM | |||||||||||||
| 10 | Тема 2.4 Форми, валідація, зберігання | localStorage/sessionStorage, базове управління станом на клієнті. форма входу з валідацією (без бекенду), збереження налаштувань у LocalStorage. | ||||||||||||||||
| 11 | 2 | Методи та інструменти для розробки веб-додатків з використанням JavaScript. npm-скрипти, міні-сервер, деплой на GitHub Pages. | 2 | VS Code, Node.js + npm, GitHub, браузер | ||||||||||||||
Теми та завдання для самостійної роботи
| № | Назва та опис завдання | Методи контролю та критерії оцінювання | Годин | |||||||||||||||
| 1 | Розробка інтерактивної веб-сторінки з використанням JavaScript та обробки подій. Інтерактивна сторінка з подіями | Захист, демонстрація | 4 | |||||||||||||||
| 2 | Створення калькулятора для веб-сторінки з використанням JavaScript та вивчення математичних операцій. Калькулятор із коректним округленням | Захист, код | 4 | |||||||||||||||
| 3 | Розробка веб-додатку для управління списком завдань (to-do list) за допомогою JavaScript | Захист, демонстрація | 4 | |||||||||||||||
| 4 | Створення галереї зображень з можливістю перегляду за допомогою JavaScript. | Захист, демонстрація | 4 | |||||||||||||||
| 5 | Реалізація анімаційних ефектів на веб-сторінці з використанням JavaScript. Мікроанімації інтерфейсу (CSS-first) | Захист, демонстрація | 4 | |||||||||||||||
| 6 | Розробка веб-додатку для обміну повідомленнями. | Захист, демонстрація | 4 | |||||||||||||||
| 7 | Розробка веб-додатку для відстеження погоди. Віджет погоди (fetch з публічного API) | Захист, демонстрація | 6 | |||||||||||||||
| 8 | Розробка системи керування відео на веб-сайті з використанням JavaScript. Керування <video> через JS (контроли) | Захист, демонстрація | 6 | |||||||||||||||
| 9 | Створення онлайн-вікторини з можливістю вибору питань та виведення результатів за допомогою JavaScript. Онлайн-вікторина (bank питань, підрахунок) | Захист, демонстрація | 8 | |||||||||||||||
| 10 | Розробка механізмів реєстрації та авторизації користувачів на веб-сайті з використанням JavaScript. Форми реєстрації/авторизації без бекенду (валідація, UX, збереження сесії в LocalStorage) | Захист, демонстрація | 10 | |||||||||||||||
Проєкт
| № | Назва та опис завдання | Метод контролю та захисту | Строки виконання |
|---|---|---|---|
| 1 | Для здачі завдання необхідно викласти вихідний код на github (і зробити сторінку на github), а сам проєкт розмістити на безкоштовному хостингу Перевірка працездатності буде проводитись саме на хостингу, а не на локальному комп'ютері. Оцінюватиметься не лише формальне виконання вимог, а й творчий підхід до вирішення завдання Репозиторій + демонстрація роботи у браузері. Перевірка логіки, таймерів, асинхронних операцій та DOM. |
Рекомендовані джерела інформації та навчальні матеріали
| Основні | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| ECMAScript https://ecma-international.org/publications-and-standards/standards/ecma-262/ | 1, 2 | |||||||||||||||||
| MDN Web Docs (JS/DOM/HTML/CSS): https://developer.mozilla.org/ | 1–8 | |||||||||||||||||
| Robson, Freeman. Head First JavaScript Programming (укр. переклад) | 1–4 | |||||||||||||||||
| JavaScript Підручник. Основи вебпрограмування. [Електронний ресурс] – Режим доступу: https://w3schoolsua.github.io/js/index.html#gsc.tab=0 | 1–8 | |||||||||||||||||
| Marjin Haverbeke. Eloquent JavaScript: A Modern Introduction to Programming. 3rd Edition. – December 2018. – 480 p | 2-7 | |||||||||||||||||
| 1 | Гаврильків В.М. Формальні мови та алгоритмічні моделі: навч. посібник. Вид. друге, доповн. Івано-Франківськ: Голіней, 2023. 180 с. | 1.1, 1.2 — Основи JavaScript, Типи даних, Алгоритмічні моделі | ||||||||||||||||
| 2 | Робсон Е., Фрімен Е. Книга Head First. Програмування на JavaScript. К.: Фабула, 2022. 690 с. | 1.1–1.6 — Основи JS, функції, об'єкти, оператори | ||||||||||||||||
| 3 | Бородкіна І.Л., Бородкін Г.О. Web-технології та Web-дизайн : застосування мови HTML для створення електронних ресурсів. К.: Ліра, 2020. 212 с. | 2.1–2.3 — Обробка подій, робота з DOM, анімація, веб-додатки | ||||||||||||||||
| Додаткові | ||||||||||||||||||
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | Холод М. Ю., Шостак Ю. В. Основи програмування. – Львів : Світ, 2021. – 304 с. | 1.1–1.6 — Основи програмування, типи даних, оператори, функції, об'єкти | ||||||||||||||||
| 2 | Шакуров Є. О. Мобільний застосунок як електронний освітній ресурс в навчанні школярів старших класів / Є. О. Шакуров, С. Р. Чередниченко // Наумовські читання : матеріали ХІХ наук.-метод. конф. здобувачів вищої освіти та молодих учених, присвяч. року мат. освіти в Україні, Харків, 23-24 листоп. 2021 р. / Харків. нац. пед. ун-т ім. Г. С. Сковороди ; [редкол.: Н. О. Пономарьова та ін.]. – Харків : [Б. в.], 2022. – С. 248–250. | 1.1, 1.2 | ||||||||||||||||
| 3 | W3School [Електронний ресурс] – Режим доступу: http://w3schools.com/ | |||||||||||||||||
Контрольні заходи
| № | Назва та опис | Методи контролю та критерії оцінювання |
| 1 | Поточний контроль | Оцінюється участь у дискусіях, виконання завдань під час занять, активність студентів. Максимум – 10 балів |
| 2 | Захист лабораторних робіт | Перевірка працездатності програмних рішень, логіки коду, відповідності вимогам завдання. Максимум – 10 балів |
| 3 | Виконання практичних завдань на заняттях | Розв’язання задач, розробка модулів за темою заняття. Оцінюється правильність, обґрунтованість рішень. 10 балів |
| 4 | Виконання та захист самостійних робіт | Демонстрація результатів роботи програми. Максимум – 10 балів |
| 5 | Онлайн-тестування | Виконання тестів у LMS або Google Forms. Максимум – 20 балів |
| 6 | Підсумковий контроль (залік) | Виконання контрольного завдання. Оцінка за якість і повноту виконання. Максимум – 40 балів |
Результати навчання
Знати синтаксис і концепції JavaScript. Вміти створювати динамічні веб-сторінки з DOM і подіями. Використовувати ООП і асинхронні технології. Презентувати власні проєкти.
Зв'язок з ринком праці
Спеціальність/професія, підготовці до діяльності в якій читається курс:
Розробник інтерфейсуПосилання на вакансії (понад 3),
https://www.work.ua/jobs/5485046 https://www.work.ua/jobs/6622309 https://www.work.ua/jobs/5801562Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
Володіння основами мови програмування JavaScript Навички роботи з HTML та CSS Робота з подіями, DOM та основами взаємодії в браузері Навички роботи з інструментами розробника та системами контролю версій (Git, GitHub); Розробка адаптивних інтерфейсів з підтримкою анімацій і стилів; Презентація та захист реалізованих рішень, soft skills;Інструменти оцінювання результатів навчання за дисципліною
| № | Об'єкт оцінювання | Методи контролю | Інструмент оцінювання |
|---|---|---|---|
| 1 | Теоретичні знання | Тести за темою | Moodle, Google Forms |
| 2 | Навички написання коду на JavaScript | Виконання лабораторних і практичних завдань (код) | Посилання на репозиторії GitHub з кодом, перевірка на заняттях |
| 3 | Уміння працювати з DOM та обробниками подій | Виконання практичних завдань | Презентація виконаного завдання |
| 4 | Вміння створювати адаптивний інтерфейс | Реалізація проєктного завдання з адаптивним дизайном | Перевірка працездатності проєкту на хостингу, захист проєкту |
| 5 | Використання інструментів контролю версій (Git/GitHub) | Створення pull request, аналіз історії комітів | Посилання на репозиторій |
| 6 | Проєктна діяльність | Виконання та захист проєкту | Посилання на працюючий проєкт, презентація |