Заняття 13. Прийоми роботи в Javascript (на основі частини відеокурсу). Повторення пройденого матеріалу: підготовка до заключного тестування

Для використання в роботі. Приклади цікавих анімацій на базі Бутстрап:

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
  • Всі вищевказані події існують

 

ДОМАШНЄ ЗАВДАННЯ (ТЕОРІЯ)

 

ДОДАТКОВІ КОРИСНІ МАТЕРІАЛИ

 

 

 

Вам может бути цікаво...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Завантаження Captcha...