JavaScript Базовий
Для кого цей курс
• Початківці з базовими навичками роботи з JavaScript.• Студенти, які пройшли курс JavaScript Стартовий
• Розробники з невеликим досвідом в програмуванні іншими мовами.
• Тестувальники
Попередні вимоги
• Знання базового синтаксису JavaScript (проходження курсу JavaScript Стартовий)• Знання HTML та основних CSS властивостей і CSS селекторів
Тривалість
36 год.
Кількість уроків
18 занять
Вартість навчання
259
Курс входить до
Спеціальності FrontEnd Розробник + AI Skills, Full-stack. Node.js Розробник + AI SkillsПрограма курсу
1
Пошук елементів та DOM дерево
• Поняття оточення в JavaScript
• DOM - Document Object Model
• BOM - Browser Object Model
• Пошук елементів у DOM, використання методів querySelector і querySelectorAll
• Типи вузлів DOM дерева
• Основні властивості вузлів DOM дерева
• Методи для навігації вузлами DOM дерева
• DOM - Document Object Model
• BOM - Browser Object Model
• Пошук елементів у DOM, використання методів querySelector і querySelectorAll
• Типи вузлів DOM дерева
• Основні властивості вузлів DOM дерева
• Методи для навігації вузлами DOM дерева
2
Зміна DOM дерева. CSS стилі
• Способи створення вузлів в DOM дереві
• Вставка і видалення вузлів
• Способи клонування вузлів DOM дерева
• Властивості і атрибути елементів
• Методи для роботи з атрибутами
• Робота з одними атрибутами data- *
• Використання CSS стилів, властивості className і classList
• Обчислені стилі і робота з ними
• Вставка і видалення вузлів
• Способи клонування вузлів DOM дерева
• Властивості і атрибути елементів
• Методи для роботи з атрибутами
• Робота з одними атрибутами data- *
• Використання CSS стилів, властивості className і classList
• Обчислені стилі і робота з ними
3
Події. Частина 1
• Що таке подія
• Основні події
• Обробка подій через HTML атрибути
• Обробка подій через властивості вузлів DOM дерева
• Обробка подій за допомогою методу AddEventListener
• Основні події
• Обробка подій через HTML атрибути
• Обробка подій через властивості вузлів DOM дерева
• Обробка подій за допомогою методу AddEventListener
4
Події. Частина 2
• Об'єкт Event для отримання додаткових даних при обробці події
• Події DOMContentLoaded і load
• Приклади обробки подій миші
• Приклади обробки подій клавіатури
• Події DOMContentLoaded і load
• Приклади обробки подій миші
• Приклади обробки подій клавіатури
5
Події. Частина 3
• Фази проходу події DOM деревом
• Реєстрація обробника події на різні фази
• Скасування виконання дії, за замовчуванням пов'язаної з подією
• Скасування спливання або занурення події
• Приклади використання делегування події при використанні методу addEventListener
• Реєстрація обробника події на різні фази
• Скасування виконання дії, за замовчуванням пов'язаної з подією
• Скасування спливання або занурення події
• Приклади використання делегування події при використанні методу addEventListener
6
Функції-конструктори
• Різниця між функцією-фабрикою і функцією-конструктором
• Використання функцій-конструкторів
• Робота з прототипами
• Циклічна конструкція for / in
• Використання ключового слова instanceof
• Використання функцій-конструкторів
• Робота з прототипами
• Циклічна конструкція for / in
• Використання ключового слова instanceof
7
Класи
• Поняття класів
• Використання ключового слова class
• Конструктори і методи класів
• Getter і setter
• Закриті та відкриті поля класів
• Використання ключового слова class
• Конструктори і методи класів
• Getter і setter
• Закриті та відкриті поля класів
8
Класи. Наслідування
• Наслідування класів в JavaScript
• Ключове слово extends
• Робота з конструкторами в класах-спадкоємцях
• Використання ключового слова super
• Перевизначення методів
• Статичні методи і властивості
• Ключове слово extends
• Робота з конструкторами в класах-спадкоємцях
• Використання ключового слова super
• Перевизначення методів
• Статичні методи і властивості
9
Контекст функції
• Що таке контекст функції
• Зміна контексту через методи apply, call і bind
• Планування виклику функції, використання методів setTimeout і setInterval
• Контекст в стрілочних функціях
• Особливості використання контексту при використанні функцій зворотного виклику
• Зміна контексту через методи apply, call і bind
• Планування виклику функції, використання методів setTimeout і setInterval
• Контекст в стрілочних функціях
• Особливості використання контексту при використанні функцій зворотного виклику
10
Замикання
• Глобальний об'єкт і глобальні змінні, що таке globalThis
• Контекст виконання
• Лексичне оточення
• Замикання
• Приклади використання замикань
• Контекст виконання
• Лексичне оточення
• Замикання
• Приклади використання замикань
11
Форми і елементи управління
• Тег form
• Способи отримання форми і її елементів через JavaScript код
• Приклади роботи з основними елементами управління через JavaScript код
• Способи отримання форми і її елементів через JavaScript код
• Приклади роботи з основними елементами управління через JavaScript код
12
Перевірка даних форми
• Обробка події submit
• Події blur і focus
• Події copy, paste і cut
• Вбудована перевірка користувацького введення (HTML5 валідація)
• Додавання своєї логіки до вбудованої перевірки користувацького введення форм
• Основи роботи з регулярними виразами і приклади застосування регулярних виразів для перевірки користувацького введення
• Створення сценарію для перевірки користувацького введення
• Події blur і focus
• Події copy, paste і cut
• Вбудована перевірка користувацького введення (HTML5 валідація)
• Додавання своєї логіки до вбудованої перевірки користувацького введення форм
• Основи роботи з регулярними виразами і приклади застосування регулярних виразів для перевірки користувацького введення
• Створення сценарію для перевірки користувацького введення
13
Cookies і Web Storage
• Що таке cookies і як з ними працювати в JavaScript
• Огляд Web Storage API
• Використання sessionStorage і localStorage
• Подія storage
• Огляд Web Storage API
• Використання sessionStorage і localStorage
• Подія storage
14
Обробка виключень
• Що таке виключення
• Конструкція try catch
• Використання блоку finally
• Використання ключового слова throw
• Створення користувацьких виключень
• Конструкція try catch
• Використання блоку finally
• Використання ключового слова throw
• Створення користувацьких виключень
15
Асинхронний код. Promise
• Що таке синхронний і асинхронний код
• Використання функцій зворотного виклику для організації асинхронного коду
• Використання Promise для асинхронного коду
• Ланцюжки promise
• Обробка винятків при роботі з Promise
• Використання методів Promise API
• Використання функцій зворотного виклику для організації асинхронного коду
• Використання Promise для асинхронного коду
• Ланцюжки promise
• Обробка винятків при роботі з Promise
• Використання методів Promise API
16
Мережеві запити
• Що таке HTTP
• Структура HTTP протоколу, як виглядає запит і відповідь
• Використання методу fetch для відправки HTTP запиту через JavaScript код
• Налаштування HTTP запиту під час роботи з методом fetch
• Скасування HTTP запиту, відправленого через метод fetch
• Структура HTTP протоколу, як виглядає запит і відповідь
• Використання методу fetch для відправки HTTP запиту через JavaScript код
• Налаштування HTTP запиту під час роботи з методом fetch
• Скасування HTTP запиту, відправленого через метод fetch
17
Практичне заняття
Частина 1
18
Практичне заняття
Частина 2
По завершенню курсу ви будете вміти
1
Працювати з DOM деревом, знаходити елементи, створювати, видаляти і змінювати стан існуючих елементів
2
Працювати зі стилями через JavaScript код
3
Використовувати події, застосовувати техніку делегування подій, працюючи з різними фазами події (Capture Phase і Bubble Phase)
4
Використовувати HTML template і шаблонізатор mustache.js
5
Працювати з функціями-конструкторами і прототипами
6
Використовувати класи і наслідування класів, розуміти принципи об'єктно-орієнтованого підходу при розробці на JavaScript
7
Працювати з функціями і використовувати замикання - розуміти, що таке лексичне оточення, контекст
8
Працювати з формами і перевіряти дані, уведені до форми
9
Працювати з даними на стороні клієнта, використовуючи cookies і Web Storage
10
Обробляти виключення і створювати користувацькі виключення
11
Організовувати асинхронний код за допомогою функцій зворотного виклику і Promise
12
Створювати мережеві запити за допомогою методу fetch
Спробуйте безкоштовно
Повноцінне заняття з тренером
Що входить до курсу
36 годин живого навчання з тренером
Практичні заняття та перевірка ДЗ
Спілкування з групою
Підтримка ментора та асистента
Тестування та Сертифікат
Відео курс від ITVDN
Як відбувається навчання
1
Живі онлайн заняття
з тренером
2
Виконання
домашніх завдань
3
Перевірка ДЗ
та фідбек
4
Тестування
та сертифікація
Сертифікат після закінчення курсу
Сертифікат після закінчення курсу
Тестування та сертифікація ІТ фахівців проходить на нашій власній платформі TestProvider.com
Ви отримуєте завірений сертифікат від CyberBionic Systematics, який підтверджує рівень ваших знань та збільшує шанси на успішне працевлаштування.
Кожен сертифікат має серійний номер, роботодавець може його перевірити та переконатися у справжності сертифіката.
Готовий
почати навчання?
Відправляй заявку та зафіксуй свою знижку на навчання
Віталій Мазяр
Web Frontend Developer. Тренер – консультант. Сертифікований тренер Microsoft. Автор відео курсів на ITVDN
Богдан Мартиненко
Frontend Developer. Тренер – консультант
Тарас Заславський
FrontEnd Developer. Тренер-консультант
Владислав Бєлік
React FrontEnd Developer, тренер-консультант за напрямком FrontEnd
Ростислав Сілівейстр
WEB Frontend Developer. Тренер – консультант
Олексій Татаренков
FrontEnd Developer, тренер-консультант в CyberBionic Systematics
Олексій Кучеренко
тренер-консультант напрямку FrontEnd at CyberBionic Systematics
Олександр Виноградов
Software Developer, тренер-консультант з напрямку Node.js Developer у CyberBionic Systematics
Відгуки наших студентів
Відгуки з DOU
Olha Aliakina
Python developer
Я пройшла курс Python Developer.
Мені сподобалось, Python досить глибоко вивчали, з нуля і до асинхроного програмування, WebSocket... Насправді дуже багато тем розглянули, отримала уявлення як правцювати з БД, Git. Також вивчали Django, вже не так глибоко як Python, але достатньо, щоб робити проекти типу блог, веб магазин.
Домашки у мене займали часу, якщо на базовому курсі все встигати було легко, то починаючи з ООП вже потребували більше часу. Але насправді дуже корисні завдання і різні, щоб мозок запрацював у різних напрямках однієї теми. Щоб виконати дз, у моєму курсі конктетно, треба було також переглядати лекції на ITDVN, не тільки лекцію викладача. Бо часто відповідь як вирішити певну задачку була на лекції ITDVN на відповідну тему.
Після кожного з курсів можна пройти тестування і отримати сертифікацію по курсу. Для джунів це досить хороша опція, бо ці сертифікати можна викладати на лінкедин, щоб було підтвердження навчання. Що я і зробила. Тому рекомендувала б не забивати на тестування, а проходити.
Я б сказала, що пройти курс Python Developer було для мене визванням, встигати робити всі домашки і кінцевий проект не було легко, але було варто того. Нагрузка відчувалась, але якраз нагрузка і запускає роботу мозку в потрібному напрямку. Я задоволена курсом.
Прочитати оригінал
Відгуки з Facebook
Евгений Евгеньевич
Angular Developer
Пройшов у CyberBionics все що тільки можна))
Близько 5 різних курсів по frontend після чого вже 5 років є Angular розробником і нещодавно піврічний курс по .NET
Дякую школі, вона допомогла мені стати тим, хто я є.
Прочитати оригінал
Відгуки з Google
Дмитрий Беляев
.NET Developer
Пройшов курс за спеціальністю .NET розробник, від початку до кінця. Дуже вдячний людям за їхню працю, розуміння та допомогу. Чуйність від персоналу досить висока, так само, як і навички тренера (Михайла Козіна) - впевненість у поданні матеріалу, підкреслення важливих моментів та їх повторення при необхідності. Заняття проходять у комфортній обстановці, без будь-якої напруги. Навчання на останньому уроці не обривається, адже Команда CBS дає змогу отримати досвід роботи в їхній компанії, що є неймовірним бонусом.
Прочитати оригінал
Компанії, в яких працюють наші студенти
Залишилися питання?
Підкажемо, з чого почати, яку спеціальність обрати і як знайти першу роботу.
Про курс JavaScript Базовий
Вивчення курсу JavaScript Базовий передбачає наявність початкових знань і умінь, які відповідають програмі курсу JavaScript Стартовий. На курсі JavaScript Базовий ви зможете детально вивчити семантику та особливості роботи з конструкціями мови JavaScript.
Протягом 18 занять ви опануєте головні принципи використання цієї мови при побудові користувацьких інтерфейсів і при створенні сценаріїв, які використовують об'єктно-орієнтовані техніки та функціональні підходи. Цей курс стане фундаментом для подальшого вивчення бібліотек і фреймворків, що базуються на мові JavaScript. Останні 2 заняття будуть присвячені виключно практиці для надійного закріплення пройденого матеріалу. Успішно завершивши навчання на даному курсі, вам набагато легше буде зрозуміти і почати використовувати такий фреймворк, як Angular, або бібліотеку React.
В курсі можна виділити декілька головних тем:
• Робота з DOM
• Обробка подій
• Об'єктно-орієнтоване програмування, класи та наслідування
• Поглиблене вивчення функцій - контекст, лексичне оточення, замикання
• Збереження даних на клієнтській стороні
• Робота з асинхронним кодом
• Мережеві запити
Для кожного уроку передбачено домашнє завдання, виконавши яке, ви не тільки закріпите матеріал, але і побачите додаткові варіанти використання вивчених конструкцій.
В курсі можна виділити декілька головних тем:
• Робота з DOM
• Обробка подій
• Об'єктно-орієнтоване програмування, класи та наслідування
• Поглиблене вивчення функцій - контекст, лексичне оточення, замикання
• Збереження даних на клієнтській стороні
• Робота з асинхронним кодом
• Мережеві запити
Для кожного уроку передбачено домашнє завдання, виконавши яке, ви не тільки закріпите матеріал, але і побачите додаткові варіанти використання вивчених конструкцій.