Створення динамічних елементів на веб сторінках
Створення динамічних елементів на веб сторінках
Embedded Files
Пройти інтерактивне опитування
Опанувати веб конспект
Виконати практичне завдання 1
Виконати практичне завдання 2
Виконати практичне завдання 3
Порівняння статистичних та динамічних вебсторінок
Порівняння статистичних та динамічних вебсторінок
Статичні вебсторінки
Динамічні вебсторінки
Статичні вебсторінки залишатимуться однаковими до тих пір, поки хтось не змінить їх вручну
Прості у дизайні
Інформація оновлюється рідко
Сторінки завантажуються швидко
Динамічні веб-сторінки є поведінковими та мають можливість створювати виразний контент для різних відвідувачів
Складні в побудові
Інформація оновлюється часто
Сторінки завантажуються довше
Для написання динамічних вебсторінок використовуються фрагменти коду, написані на мові JavaScript, яка має синтаксис, відмінний від HTML. Для того щоб відділити ці фрагменти від решти частини HTML-документа, такий код розміщують між тегами <SCRIPT>...</SCRIPT>.
Для написання динамічних вебсторінок використовуються фрагменти коду, написані на мові JavaScript, яка має синтаксис, відмінний від HTML. Для того щоб відділити ці фрагменти від решти частини HTML-документа, такий код розміщують між тегами <SCRIPT>...</SCRIPT>.
JavaScript має надзвичайно багато застосувань. Ви можете розпочати з малого: створити "каруселі", галереї зображень, динамічні макети сторінок, відповіді на натиски кнопок, тощо. Із досвідом, ви зможете створювати ігри, 2D та 3D графіку, складні застосунки з використанням баз даних та багато іншого!
Практичне завдання 1. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "Hello".
Практичне завдання 1. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "Hello".
Теоретичні відомості: Важливою ознакою інтерактивних HTML сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна, або виконання перевірки правильності введених користувачем даних. В JavaScript інтерактивність реалізована за допомогою обробки подій, викликаних в результаті дій користувача. Для цього в теги деяких елементів введені параметри обробки подій. Ім'я параметру обробки події починається з префіксу on, за яким йде назва події.
Теоретичні відомості: Важливою ознакою інтерактивних HTML сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна, або виконання перевірки правильності введених користувачем даних. В JavaScript інтерактивність реалізована за допомогою обробки подій, викликаних в результаті дій користувача. Для цього в теги деяких елементів введені параметри обробки подій. Ім'я параметру обробки події починається з префіксу on, за яким йде назва події.
Наприклад, події клік кнопкою миші Click, відповідає параметр обробки події з назвою onClick.
Наприклад, події клік кнопкою миші Click, відповідає параметр обробки події з назвою onClick.
Метод alert() генерує діалогове вікно-попередження, що відображає текст, заданий як параметр методу. Єдина кнопка ОК, напис якої не можна змінити, призначена для того, щоб користувач міг підтвердити, що він прочитав попередження.
Метод alert() генерує діалогове вікно-попередження, що відображає текст, заданий як параметр методу. Єдина кнопка ОК, напис якої не можна змінити, призначена для того, щоб користувач міг підтвердити, що він прочитав попередження.
Технологія виконання завдання 1.
Технологія виконання завдання 1.
Зайдіть на редактор коду https://jsfiddle.net та ввести HTML код вебсторінки https://docs.google.com/document/d/1IWM2aFYLaQIR-qdOnj-CMWcDy4cEOnQHBWV5k27wAuA/edit?usp=sharing Натиснути RUN, щоб переглянути - результат роботи, можна побачити при натисканні кнопки на створеній вебсторінці.
- Натисни Save, щоб згенерувати URL адресу вебсторінки з формою . Прозвітувати посиланням.
Практичне завдання 2. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Ок " з’являлось вікно повідомлення з фразою "Продовжуємо", а при натисканні на «Отмена» з’являлось вікно повідомлення з фразою " Ні, то й ні"
Практичне завдання 2. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Ок " з’являлось вікно повідомлення з фразою "Продовжуємо", а при натисканні на «Отмена» з’являлось вікно повідомлення з фразою " Ні, то й ні"
Теоретичні відомості: Метод confirm() У діалоговому вікні, яке відображує цей метод, є дві кнопки та текст, заданий як параметр методу. Для більшості версій браузерів і платформ це кнопки ОК і Cancel (Скасувати). Таке вікно називають діалоговим вікном підтвердження. Метод Confirm () повертає значення true (так), якщо користувач клацає кнопку ОК, і false (ні) — якщо кнопку Cancel (Скасувати). Це діалогове вікно і значення, яке воно повертає, можна використовувати для надання користувачу можливості керувати подальшими діями сценарію.
Теоретичні відомості: Метод confirm() У діалоговому вікні, яке відображує цей метод, є дві кнопки та текст, заданий як параметр методу. Для більшості версій браузерів і платформ це кнопки ОК і Cancel (Скасувати). Таке вікно називають діалоговим вікном підтвердження. Метод Confirm () повертає значення true (так), якщо користувач клацає кнопку ОК, і false (ні) — якщо кнопку Cancel (Скасувати). Це діалогове вікно і значення, яке воно повертає, можна використовувати для надання користувачу можливості керувати подальшими діями сценарію.
Технологія виконання завдання 2.
Технологія виконання завдання 2.
Зайдіть на редактор коду https://jsfiddle.net та ввести HTML код вебсторінки https://docs.google.com/document/d/1AhvnGmIApzF-efZjqvhEe1gBQ-MkbDF2YN81-gT5Bx8/edit?usp=sharing Натиснути RUN, щоб переглянути - результат роботи, можна побачити при натисканні кнопок Ок і Відмінити на створеній вебсторінці.
- Натисни Save, щоб згенерувати URL адресу вебсторінки з формою . Прозвітувати посиланням.
Практичне завдання 3. Створити слайдшоу з кнопкою.
Практичне завдання 3. Створити слайдшоу з кнопкою.
Технологія виконання завдання 3.
Технологія виконання завдання 3.
Зайдіть на редактор коду https://jsfiddle.net та ввести HTML код вебсторінки https://docs.google.com/document/d/1gcKF8qQ5FlVe4pzVycX9nWh4KNOLLDIfCZXkRtVAzGo/edit?usp=sharing
img1.src = "images/k1.jpg"
img2.src = "images/nk2.jpg"
img3.src = "images/nk3.jpg" замініть локальні адреси зображень на URL адреси
https://photocdn.photogoroda.com/source1/cn9908/r10535/c10552/10552-527579.jpg
https://photocdn.photogoroda.com/source1/cn9908/r10535/c10552/10552-527585.jpg
https://photocdn.photogoroda.com/source2/cn9908/r10535/c10552/32659849.jpg
можна вставити власні зображення, слідкуйте, щоб вони мали розширення .jpeg
Натиснути RUN, щоб переглянути - результат роботи, можна побачити при натисканні кнопки ДАЛІ на створеній вебсторінці.
- Натисни Save, щоб згенерувати URL адресу вебсторінки з формою . Прозвітувати посиланням.
Практичне завдання 4. Реакція на мишку. Зміна фото при наведенні мишею.
Практичне завдання 4. Реакція на мишку. Зміна фото при наведенні мишею.
Технологія виконання завдання 4.
Технологія виконання завдання 4.
Зайдіть на редактор коду https://jsfiddle.net та ввести HTML код вебсторінки https://docs.google.com/document/d/1y0hjTzLBAJEjIuSYfQ2lbiPSr1r4elR2VAZ5w-fXHXo/edit?usp=sharing
img1.src = "images/k1.jpg"
img2.src = "images/nk2.jpg" замініть локальні адреси зображень на URL адреси
https://photocdn.photogoroda.com/source1/cn9908/r10535/c10552/10552-527579.jpg
https://photocdn.photogoroda.com/source1/cn9908/r10535/c10552/10552-527585.jpg
можна вставити власні зображення, слідкуйте, щоб вони мали розширення .jpeg
Натиснути RUN, щоб переглянути - результат роботи, можна побачити при наведені миші на картинку, повинна змінитися на іншу картинку, на створеній вебсторінці.
- Натисни Save, щоб згенерувати URL адресу вебсторінки з формою . Прозвітувати посиланням.
Практичне завдання 5. Ефект лупи. Збільшення фото при наведенні мишею.
Практичне завдання 5. Ефект лупи. Збільшення фото при наведенні мишею.
Технологія виконання завдання 5.
Технологія виконання завдання 5.
Зайдіть на редактор коду https://jsfiddle.net та ввести HTML код вебсторінки https://docs.google.com/document/d/14hJNXh_3l_b-os_YjTc3eDtaHxyRnjtJ1G8ZzGtb1Kw/edit?usp=sharing
img1.src = "images/k1.jpg" замініть локальні адреси зображень на URL адреси
https://photocdn.photogoroda.com/source1/cn9908/r10535/c10552/10552-527579.jpg
можна вставити власні зображення, слідкуйте, щоб вони мали розширення .jpeg
Натиснути RUN, щоб переглянути - результат роботи, можна побачити при наведені миші на картинку , вона повинна збільшитися у розмірі, на створеній вебсторінці.
- Натисни Save, щоб згенерувати URL адресу вебсторінки з формою . Прозвітувати посиланням.
Прозвітувати тест і 5 посилань
Page updated
Google Sites
Report abuse