Для використання в роботі. Приклади цікавих анімацій на базі Бутстрап:
https://daneden.github.io/animate.css/ – css-фреймворк для додавання анімацій (на сайті відразу можна протестувати анімації, їх назва в випадаючому списку – клас, який потрібно застосувати). Встановлення – закинути до свого сайту та підключити в html-файлах
https://bootsnipp.com/tags/animation – заготовки анімацій
Запущено 3 частину курсу з веб-розробки (детальніше тут), яка присвячена знайомству з JavaScript. Рекомендую зареєструватись на курсі, або переглянути відео з теми на цій сторінці.
Вступ до JavaScript
Базовий синтаксис мови JavaScript
Можливості консолі розробника для JavaScript
Умовні конструкції та цикли
Масиви та об’єкти як асоціативні масиви
Об’єкти в JavaScript
Функції JavaScript
Базова маніпуляція DOM
Обробка подій
Обробка форм
Випускне тестове завдання для школярів
Випускне тестове завдання доступне за цим посиланням.
КОРОТКО ПРО ТЕСТ:
- Тест містить 15 завдань, перше з яких – вставити посилання на твій фінальний (випускний) проект
- Розрахунковий час, необхідний для проходження тесту – не більше 30 хв (при достатньому рівні підготовки)
- Час, за який ти проходитимеш тест, жодним чином не лімітується.
- Кількість спроб пройти тест не лімітується, але в автоматичному режимі система зарахує лише перший результат.
КОРОТКО ПРО СИСТЕМУ ОЦІНЮВАННЯ:
- Максимальна оцінка за тест – 40 балів.
- Максимальна оцінка за фінальний проект – 60 балів
- Разом – 100 балів
- Для отримання сертифікату категорії “Завершив курс” необхідно здобути не менше 60 балів
- Для отримання сертифікату категорії “Прослухав курс” необхідно здобути не менше 30 балів
Заголовок сторінки, який відображається браузером, задає наступний тег: *
- <head>
- <title>
- <h1>
- <body>
Для створення списку без нумерації використовуєтья наступний тег: *
- <ol>
- <l>
- <list>
- <ul>
Скільки рядків в даній таблиці? <html><head><title></title></head><body><table><tr><td></td><td></td> <td></td></tr><tr><td></td><td></td> <td></td></tr></table></body></html> *
- 1
- 2
- 3
- Жодного
Вибери посилання з правильним синтаксисом *
- <a href=’http://www.ukr.net’value=’www.ukr.net’/>
- <a name=’http://www.ukr.net’>www.ukr.net</a>
- <a href=’http://www.ukr.net’>www.ukr.net</a>
- <a src=’http://www.ukr.net’>www.ukr.net</a>
Для того, щоб мати можливість розташувати елемент, напряму задаючи його координати відносно батьківського елементу (наприклад, через CSS атрибути left та top), CSS атрибут position цього елементу потрібно встановити в: *
- Absolute
- Relative
- Float
- Static
Для того, щоб задати тип розташування елементу (наприклад, зробити його блочним чи, навпаки, рядковим), можна використати наступний атрибут стилю: *
- place
- position
- display
- border
Псевдо-класи в HTML-CSS це: *
- Базовий синтаксис для створення об’єктів
- Віртуальні елементи, які додаються до або після деяких тегів, і до яких можна застосовувати стилі
- Фіксовані слова, які можна додавати до селекторів для того, щоб вони застосовувались лише коли елемент знаходиться у спеціальному стані
- Класи, які можна додавати до елементу, використовуючи атрибут pseudo-class
Якщо на сторінці розміщено елемент <img class=”super image green” src=’test.png’ />, то *
- Селектор img.super .image .green дозволить обрати цей елемент
- Селектор img.super.image.green дозволить обрати цей елемент
- Селектор img .super .image .green дозволить обрати цей елемент
- Задання атрибуту class для елементу не є допустимим.
Відступ від обраного елементу до елементу, який знаходиться над ним, можна задати наступним атрибутом CSS: *
- margin-top
- border-top
- position-top
- padding-top
Для того, щоб елементи, які є дітьми спільного елементу-контейнера, розташовувались з використанням flex, необхідно: *
- Задати кожному з елементів стиль з атрибутом display:flex
- Задати батьківському елементу стиль з атрибутом display:flex
- Реалізувати обидва пункти
Адаптивним дизайном називають: *
- Дизайн, який адаптовано для мобільних пристроїв
- Підхід, при якому сторінка адаптується під користувача, дозволяючи йому налаштувати мову, кольори, шрифти та інше
- Підхід, при якому розташування та стилі елементів сторінки можуть змінюватись в залежності від розміру екрану (вікна) переглядача
- Підхід, при якому користувач бачить різні версії сайту в залежності від того, з якого пристрою він його відкриває.
Використання Javascript у веб-сторінці дозволяє (обери всі вірні варіанти): *
- Додавати та видаляти елементи зі сторінки вже після того, як вона завантажена до браузера користувача.
- Передавати та отримувати дані з серверу
- Реагувати на дії користувача та змінювати стилі деяких елементів сторінки
- Безпосередньо взаємодіяти з іншими застосунками на комп’ютері користувача
Створити масив в Javascript можна наступним чином (обери всі вірні варіанти): *
- var a=[1, 2, 3];
- var a={1, 2, 3};
- var a=[“test”, ”rest”, ”best”];
- var a={“test”, ”rest”, ”best”};
- array a=[1, 2, 3];
- array a={1, 2, 3};
Яка з вказаних Javascript подій не існує? *
- Onmousescroll
- Onclick
- Onmouseover
- Onmousemove
- Onwheel
- Всі вищевказані події існують
ДОМАШНЄ ЗАВДАННЯ (ТЕОРІЯ)
- Курс з веб–розробки на W3Schools, тема “jQuery – AJAX Introduction” (англ)
- Курс з веб–розробки на W3Schools, тема “jQuery – AJAX get() and post() Methods” (англ)
- Mozilla Developer Network (MDN) «Third party APIs» (англ)
- Mozilla Developer Network (MDN) «Fetching data from the server» (англ)
- Офіційний веб–сайт фреймворку jQuery, навчальний розділ “jQuery’s Ajax–Related Methods” (англ)
ДОДАТКОВІ КОРИСНІ МАТЕРІАЛИ
- Стаття про OpenProcurement на Вікіпедії (укр)
- Сайт документації по OpenProcurement, розділ «Туторіал. Розглянемо основні правила» (укр)
- Галерея API на офіційному веб–сайті NY Times (англ)
- Google Maps API на офіційному веб–сайті Google (рос)
