Веб-програмування

1.

Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

2.

Веб-програмування
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

3.

Веб-програмування
Ти дізнаєшся:
Що таке мова
гіпертекстової
розмітки
Які бувають
об'єктні моделі
взаємодії між
HTML-кодом
веб-сторінки та
браузером
Ознайомитись
із стандартною
мовою для
веб-скриптів –
JavaScript
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

4.

Веб-програмування та
інтерактивні сторінки
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

5.

Веб-програмування
Поняття об'єктної моделі
Каскадні стилів HTML будують логічну структуру документа, а потім визначати
формат її відображення. Цей підхід змінив усю технологію проектування
сторінок сайту. Тепер можна визначити спочатку типи сторінок, потім логічні
структури сторінок для кожного типу і, нарешті, для кожного логічного
елемента, його склад і зовнішній вигляд.
Об'єктна модель документа (Document
Object Model, DOM) — це засіб для роботи зі
структурою
документа,
а
також
з
елементами сторінки в кодах HTML та у
сценаріях
Такі сценарії розміщують у спеціальних тегах <SCRIPT> і </SCRIPT>
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

6.

Веб-програмування
Сценарії
Щоб веб-сторінка була інтерактивною, тобто могла взаємодіяти з користувачем,
і динамічною, необхідно використовувати скрипти, або сценарії
Сценарій (script, скрипт) — це програма,
написана
спеціальною
мовою
програмування і вбудована в HTMLдокумент.
Сценарії описують усі можливі дії над елементами HTMLдокумента під час взаємодії з користувачем: реакцію на
натискання кнопки миші, зміну вмісту сторінки залежно від
певних дій користувача тощо
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

7.

Веб-програмування
Сценарії
Програмний код JavaScript можна помістити в документ HTML у три способи:
окремі скрипти розмістити в тілі документа, там, де в
їхньому використанні є потреба
скрипти (функції, оголошення об'єктів) розмістити у
заголовній частині документа між тегами
HEAD>...</HEAD>, а використовувати їх у тілі
документа
зберегти скрипт у файлі (із розширенням .js), а в
документі дати посилання на нього
Сценарій (script, скрипт) — це програма, написана спеціальною мовою
програмування і вбудована в HTML-документ
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

8.

Веб-програмування
Метод alert()
Цей метод генерує діалогове вікно-попередження, що відображає текст, заданий
як параметр методу.
Єдина кнопка ОК, напис якої не можна змінити, призначена для того, щоб
користувач міг підтвердити, що він прочитав попередження
Сценарій (script, скрипт) — це програма, написана спеціальною мовою
програмування і вбудована в HTML-документ
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

9.

Веб-програмування
Метод prompt()
Цей метод генерує діалогове вікно запиту. Дві кнопки, наявні в діалоговому
вікні, — ОК і Cancel — дають змогу користувачу закрити діалогове вікно,
повернувши у сценарій значення текстового поля (кнопкою ОК) або спеціальне
значення null (кнопкою Cancel).
Confirm (повертає значення true
(істина), якщо користувач клацає
кнопку ОК, і false (хибність),
Сценарій (script, скрипт) — це програма, написана спеціальною мовою
програмування і вбудована в HTML-документ
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

10.

Веб-програмування
Веб-сторінка зі сценарієм
Сценарій (script, скрипт) — це програма, написана спеціальною мовою
програмування і вбудована в HTML-документ
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

11.

Домашнє завдання
Вивчити тему
Продовжіть розробку веб-сторінки
«Моя маленька батьківщина» з перевіркою
певної інформації
Заповнити словничок
Об'єктна модель документа
(Document Object Model, DOM),
сценарій (script, скрипт)
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

12. Робота з комп'ютером

Завдання 1. Вікно з повідомленням
Створити просту веб-сторінку зі сценарієм. Він виводитиме на екран вікно з
повідомленням «Увага!!!». Для цього використати метод alert( ) .
Чашук О.Ф., вчитель інформатики
ЗОШ№23, Луцьк

13. Робота з комп'ютером

Завдання 1. Тест для перевірки навичок додавання
Створіть
веб-сторінку,
яка
дозволяє перевірити навчики
додавання. Зверніть увагу, що
дано лише частина коду, яка
розміщена між тегами <SCRIPT>.
Код можна копіювати.
Доповніть тест та систему
оцінювання, щоб задавалися 8
запитань. Перешли дороблену
сторінку на адресу вчителя
інформатики.
<SCRIPT>
var s, i = 0
s=confirm ("2+2=4 ? " ) ;
if (s==true) { alert("Правильно!"); i++} else alert('Hi!')
s=confirm ("2+3=6 ? " ) ;
if (s == false) { alert( "Правильно" ) ; i++} else
alert("Hi!")
s=confirm ("2+4 = 6 ? " ) ;
if (s==true) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+2= ?", " " ) ;
if (s==4) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+3= ?"," " ) ;
if (s==5) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+4= ?"," " ) ;
if (s==6) {alert ("Правильно!"); i++} else alert("Hi!")
if (i>=5) alert ("чудово")
else if (i>=3) alert ("добре")
else alert ("погано")
Чашук </SCRIPT>
О.Ф., вчитель інформатики
ЗОШ№23, Луцьк

14.

Працюємо за комп’ютером
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк