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

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

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

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

Ти дізнаєшся:

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

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

Веб-програмування та інтерактивні сторінки

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

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

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

Поняття об'єктної моделі

Каскадні стилів HTML будують логічну структуру документа, а потім визначати формат її відображення. Цей підхід змінив усю технологію проектування сторінок сайту. Тепер можна визначити спочатку типи сторінок, потім логічні структури сторінок для кожного типу і, нарешті, для кожного логічного елемента, його склад і зовнішній вигляд.

Об'єктна модель документа (Document Object Model, DOM) — це засіб для роботи зі структурою документа, а також з елементами сторінки в кодах HTML та у сценаріях

Такі сценарії розміщують у спеціальних тегах <SCRIPT> і </SCRIPT>

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

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

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

Сценарії

Щоб веб-сторінка була інтерактивною, тобто могла взаємодіяти з користувачем, і динамічною, необхідно використовувати скрипти, або сценарії

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ.

Сценарії описують усі можливі дії над елементами HTML-документа під час взаємодії з користувачем: реакцію на натискання кнопки миші, зміну вмісту сторінки залежно від певних дій користувача тощо

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

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

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

Сценарії

Програмний код JavaScript можна помістити в документ HTML у три способи:

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ

окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є потреба

скрипти (функції, оголошення об'єктів) розмістити у заголовній частині документа між тегами HEAD>...</HEAD>, а використовувати їх у тілі документа

зберегти скрипт у файлі (із розширенням .js), а в документі дати посилання на нього

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

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

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

Метод alert()

Цей метод генерує діалогове вікно-попередження, що відображає текст, заданий як параметр методу.

Єдина кнопка ОК, напис якої не можна змінити, призначена для того, щоб користувач міг підтвердити, що він прочитав попередження

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ

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

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

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

Метод prompt()

Цей метод генерує діалогове вікно запиту. Дві кнопки, наявні в діалоговому вікні, — ОК і Cancel — дають змогу користувачу закрити діалогове вікно, повернувши у сценарій значення текстового поля (кнопкою ОК) або спеціальне значення null (кнопкою Cancel).

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ

Confirm (повертає значення true (істина), якщо користувач клацає кнопку ОК, і false (хибність),

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

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

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

Веб-сторінка зі сценарієм

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ

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

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

Завдання 1. Вікно з повідомленням

Створити просту веб-сторінку зі сценарієм. Він виводитиме на екран вікно з повідомленням «Увага!!!». Для цього використати метод alert( ) .

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

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

Завдання 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, Луцьк

Працюємо за комп’ютером