1 of 30

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

2 of 30

Повторюємо

  1. Що таке об’єктна модель документа?
  2. Яка організація і чому запропонувала стандарт DOM?
  3. Як можна представити веб-сторінку?
  4. У чому перевага використання DOM?
  5. Назвіть типи вузлів.
  6. Як саме можна працювати з веб- документом завдяки DOM?��

3 of 30

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

галузь веб-розробки і різновид дизайну, в завдання якої входить проектування користувальницьких веб-інтерфейсів для сайтів або веб-додатків.

�

4 of 30

JavaScript

мова програмування, що обробляє дії користувачів сайта.

Це об’єктно-орієнтована клієнтська�мова, вона підтримується додатками, які працюють з дизайном сайта. �

5 of 30

Цікаво

  • Брендан Айк — американський програміст, автор JavaScript, мови, яка була створена за 10 днів. Вона подавалась як�скриптова для виконання невеликих клієнтських завдань у�браузері. ��Один із засновників�американської компанії Mozilla, яка розробляє браузер Firefox. �

6 of 30

Цікаво

  • Синтаксис JS навмисно було розроблено �максимально подібним до Java, який на �той момент дуже активно використовувався,

​

  • Динамічну типізацію запозичено від не�менш популярної мови Perl.

​

  • Функції в JavaScript — це просто ще один тип об'єкта. �Ними можна оперувати, як і будь-якими іншими �елементами, що запозичено з мови Scheme.

​

  • Наслідування реалізовано через�прототипи, як у мові Self. �

7 of 30

Функції JavaScript дозволяють:

• зберігати дані в змінних�• активувати частину коду згідно з певними сценаріями,�що реалізуються на сторінці сайта�• створювати контент, який оновлюється автоматично�• керувати мультимедійними можливостями (працювати�з відео, анімувати зображення)��

8 of 30

Що може JavaScript?

  • JavaScript обробляється у веб-додатках на стороні клієнта, тобто у браузері. Завдяки цьому він може виконуватися на будь-якій операційній системі, а веб-інтерфейси, що працюють на його основі, є кросплатформними

9 of 30

AJAX

AJAX (англ. Asynchronous Java Script And XML — асинхронний JavaScript і XML (мова розмітки веб-сторінок)) — дає змогу створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія.�Поки сервер обробляє запит, користувач може переглядати вміст сайта. Браузер лише довантажує потрібні йому дані �

10 of 30

Поміркуйте

  • Перегляньте відео.
  • В чому різниця між роботою браузера без AJAX та з ним
  • Чи є вона принциповою і чому?

11 of 30

Цікаво

  • Джеймс Гаррет —�основоположник науки�«інформаційна архітектура»,�засновник компанії Adaptive�Path, яка займається�консультаціями зі створення�сайтів, дружніх до користувачів.
  • У 2005 році запропонував поєднати роботу JSON із AJAX (більш детально про це поговоримо на 29 уроці☺). � �

12 of 30

Google активно використовує AJAX у створенні своїх сайтів, таких як Gmail, Google Maps і Google Suggest.

Прикладами застосування технології AJAX є відображення контенту, що періодично оновлюється (інтерактивні карти); створення анімації й графічних об’єктів у форматі 2D/3D � �

13 of 30

JSON

  • JSON (англ. JavaScript Object Notation 0151 — запис об’єктів JavaScript)�JSON був розроблений у 2001 році Дугласом Крокфордом для обміну даними та заснований на підмножині мови JavaScript (спосіб створення об’єктів у JavaScript), яка використовувала можливості звичайного браузера та дозволяла веб-розробникам створювати веб-додатки з постійним двостороннім зв’язком із веб-сервером. �

14 of 30

Інтерактивні сторінки

15 of 30

  • Створити інтерактивну сторінку — означає створити сторінку, що вміє «спілкуватися» зі своїми відвідувачами. Проста статична сторінка доступна лише для перегляду. Для того щоб зв’язатися з адміністрацією сайта або зробити замовлення, відвідувачеві необхідно зателефонувати за контактним телефонним номером, написати електронного листа на e-mail або відправити факс.
  • Інтерактивність сторінки забезпечується за допомогою HTML-форм: реєстраційних, відправки повідомлень, онлайн-замовлень тощо.

16 of 30

HTML-форми

елементи управління для збирання інформації від відвідувачів веб-сайта.

Такі форми є набором текстових полів, кнопок, списків та інших елементів управління,�які активізуються клацанням миші.

Завдання форми полягає в передаванні даних користувача віддаленому серверу. �

17 of 30

тег <form>

  • Базою для форми є парний тег <form> — контейнер, який утримує всі елементи керування форми, — поля, що групуються залежно від призначення форми.
  • Кожна форма є набором логічно�пов’язаних елементів. �

18 of 30

Обов’язкові атрибути: action і method.

�Action містить url-адресу, яка визначає, куди буде надіслано дані форми.

�Method визначає спосіб відправлення даних із форми. Може набувати двох значень:

​

"get" - за замовчуванням надсилає дані на сервер через адресний рядок, тобто їх видно в адресному рядку браузера

​

"post" - приховує запит і дозволяє передавати великі обсяги даних. �

19 of 30

Елемент <input>

є одинарним (непарним) тегом і створює�більшість полів форми.

Атрибути елемента відрізняються залежно від типу поля, для створення якого використовується цей елемент, тому першим обов’язковим його атрибутом є <type>. �

20 of 30

Значення атрибута type �

Назва

Опис

Text

Створює у формі текстові поля, виводячи однорядкове текстове поле для введення тексту

Submit

Створює стандартну кнопку, що активізується клацанням миші, збирає інформацію з форми й надсилає серверу для опрацювання

Reset

Кнопка для повернення даних форми в початкове значення

Placeholder

Містить текст, який відображається в полі введення до заповнення (найчастіше це підказка), тобто в текстовому полі відображатиметься текст підказки, який зникне, щойно буде введено певний текст

E-mail

Браузери, що підтримують цей атрибут, очікують, що користувач уведе дані, відповідні синтаксису адреси електронної пошти

Password

Створює у формі текстові поля, при цьому символи, що вводяться користувачем, замінюються на зірочки (або інші значки, встановлені браузером)

21 of 30

  • type = "email" і type = "password" забезпечують специфічну семантику для введення, визначаючи, яку інформацію повинно містити поле. �

Другий атрибут, який необхідно зазначати, це “name” — ім’я поля (латиницею), необхідне для правильного опрацювання даних на�сервері, �

  • парний тег <label> створює логічний зв’язок між текстом і полем введення. – підпис поля
  • якщо клацнути на текст такого підпису, то курсор переміститься у відповідне поле. ��

22 of 30

Пригадайте

  • За допомогою CSS-стилів можна змінювати розмір, тип і колір шрифта, інші властивості тексту, а також додавати межі, колір�тла і зображення тла. Ширина поля задається властивістю width. �

23 of 30

Щоб створити підпис — достатньо обернути текст підпису і тег поля тегом <label> �

<label>�Введіть ім’я <input type = "text" name = "username">�</label> �

24 of 30

25 of 30

Аналізуємо.Обговорюємо

  1. Що таке веб-програмування?
  2. Яка мова програмування є базовою�у веб-розробці?
  3. Наведіть приклади використання JavaScript.
  4. Як досягається інтерактивність сторінок?
  5. Опишіть призначення форм.
  6. З яких елементів складається форма? �

26 of 30

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

  • Завдання 1. Створимо форму, яка дозволяє увійти зареєстрованому користувачу

27 of 30

Файл index.html

28 of 30

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

  • Завдання 2. Створимо форму, яка дозволяє користувачеві надсилати коментарі.

29 of 30

Файл form.html

30 of 30

Завдання для самостійного виконання

  1. Створіть HTML-сторінку з назвою form.html і створіть на ній форму наступного вигляду�

​