МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ДЕРЖАВНИЙ ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД

«УКРАЇНСЬКИЙ ДЕРЖАВНИЙ ХІМІКО-ТЕХНОЛОГІЧНИЙ

УНІВЕРСИТЕТ»

ЛАБОРАТОРНИЙ ПРАКТИКУМ

з HTML та JavaScript

для студентів усіх спеціальностей

Затверджено на засіданні

кафедри ОТ та ПМ.

Протокол № 12 від 11.06.2010.

Дніпропетровськ УДХТУ 2010

Лабораторний практикум з HTML та JavaScript для студентів усіх спеціальностей денної форми навчання / Укл.: К.Є Золотько, О.О. Кузенков, А.Д. Архіпов. – Дніпропетровськ: ДВНЗ УДХТУ, 2010. – 41 с.

Укладачі: К.Є Золотько

О.О. Кузенков

А.Д. Архіпов

Відповідальний за випуск С.А. Волкова, канд. фіз.-мат. наук

Навчальне видання

Лабораторний практикум

з HTML та JavaScript для студентів усіх спеціальностей денної форми навчання

Укладачі: ЗОЛОТЬКО Костянтин Євгенійович

КУЗЕНКОВ Олександр Олександрович

АРХІПОВ Антон Дмитрович

Редактор Л.М. Тонкошкур

Коректор В.П. Синицька

Підписано до друку 23.09.10. Формат 6084¹/₁₆. Папір ксерокс. Друк різограф. Ум.-друк. акр. 1,86. Обл.-вид. арк. 1,91. Тираж 100 прим. Зам. № 40. Свідоцтво ДК № 303 від 27.12.2000.

ДВНЗ УДХТУ, 49005, м. Дніпропетровськ-5, просп. Гагаріна, 8.

Видавничо-поліграфічний комплекс ІнКомЦентру

ЗМІСТ

ВСТУП..........................................................................................................................4

ПРИНЦИП ГІПЕРТЕКСТОВОЇ РОЗМІТКИ ТЕКСТУ............................................4

ГРУПИ ТЕГІВ У HTML..............................................................................................5

Лабораторна робота № 1. Проста HTML-сторінка ..................................................6

Лабораторна робота № 2. HTML-списки, малюнки, HTML-таблиці.....................9

Лабораторна робота № 3. Створення нових вікон, фреймів..................................14

Лаборатора робота № 4. Каскадні таблиці стилю .................................................18

Лабораторна робота № 5. Основи JavaScript..........................................................22

Лабораторна робота № 6. Використання функцій в JavaScript.............................23

Лабораторна робота № 7. Створення годинника засобами Java Script.................26

Лабораторна робота № 8. Події в Java Script..........................................................27

Лабораторна робота № 9. Умовні вирази, оператори присвоювання

та порівняння, логічні операції, коментар в Java Script.........................................29

Лабораторна робота № 10. Оператори циклу в Java Script....................................33

Лабораторна робота № 11. Створення динамічних інтерфейсів

засобами Java Script...................................................................................................36

Лабораторна робота № 12. Робота з базами даних засобами Java Script..............39

СПИСОК ЛІТЕРАТУРИ............................................................................................41

ВСТУП

Методичні вказівки містять відомості про сучасні web-технології. Послідовно розглянуті принципи гіпертекстової розмітки, побудова простих сторінок, форматування тексту, списки, таблиці, фрейми. Також стисло розглянуте керування відображенням сторінок за допомогою каскадних таблиць стилю.

Окремо описана об'єктно-орієнтовна скриптова мова програмування JavaScript. Послідовно розглянуті способи розміщення коду, цикли, логічні та математичні оператори, події, робота з базами даних, наведені та розібрані приклади практичного використання JavaScript-коду у web-сторінках.

Методичні вказівки призначені для студентів та аспірантів, які займаються web-програмуванням та застосовують internet-технології у навчальному процесі та науковій роботі.

Принцип гіпертекстової розмітки тексту

HTML є описовою мовою розмітки документів, в ньому використовуються покажчики розмітки (теги). Тегова модель описує документ як сукупність контейнерів, кожен з яких починається і закінчується тегами, тобто НТМL документ представляє собою не що інше, як звичайний АSСII-файл з доданими до нього керуючими НТМL-кодами (тегами).

Теги НТМL-документів в більшості своїй прості та зрозумілі, бо вони утворені за допомогою загальновживаних слів англійської мови, зрозумілих скорочень і позначень. НТМL-тег складається з імені, за яким може слідувати необов'язковий список атрибутів тега. Текст тега розміщується в кутових дужках ("<" і ">"). Найпростіший варіант тега – ім'я, укладене в кутові дужки, наприклад, <HEAD> або <I>. Для ряду тегів характерна наявність атрибутів, які можуть мати конкретні значення, що встановлюються автором для зміни функції тега.

Атрибути тега слідують за ім'ям і відділяються один від одного одним або кількома абзацами, пробілами або символами повернення до початку рядка. Порядок запису атрибутів в тезі значення не має. Значення атрибуту, якщо таке є, йде за знаком рівності, що стоїть після імені атрибута. Якщо значення атрибуту – одне слово або число, то його можна просто вказати після знаку рівності, не виділяючи додатково. Всі інші значення необхідно укладати в одинарні або подвійні лапки, особливо якщо вони містять кілька розділених пробілами слів. Довжина значення ознаки обмежена 1024 символами. Регістр символів в іменах тегів і атрибутів не враховується, чого не можна сказати про значення атрибутів. Наприклад, особливо важливо використати потрібний регістр при введенні URL (Uniform Resource Locator, уніфікований покажчик ресурсу) інших документів як значення атрибуту HREF.

Найчастіше елементи розмітки HTML, або HTML-контейнери, складаються з початкового і кінцевого компонентів, між якими розміщуються текст та інші елементи документа. Ім'я кінцевого тега ідентично імені початкового, але перед ім'ям кінцевого тега ставиться коса риса (/) (наприклад, для тега стилю шрифту – курсив <I> закриває пара представляє собою </I>, для тега заголовка <ТIТLЕ> закриває парою буде </ТIТLЕ>). Кінцеві теги ніколи не містять атрибутів. За своїм значенням теги близькі до поняття дужок "begin / end" в універсальних мовах програмування, які задають області дії імен локальних змінних та ін. Теги визначають область дії правил інтерпретації текстових документів.

При використанні вкладених елементів розмітки в документі слід дотримуватися особливої акуратності. Вкладені теги потрібно закривати, починаючи з останнього. Деякі елементи розмітки не мають кінцевого компонента, оскільки є автономними елементами. Наприклад, тег зображення <IMG>, який служить для вставки в документ графічного зображення, кінцевого компоненту не вимагає. До автономних елементів розмітки також відносяться розрив рядка (<BR>), горизонтальна лінійка (<HR>) і теги, що містять таку інформацію про документ, яка не впливає на його відображення, вміст, наприклад, теги <META> і <BASE>.

У деяких випадках кінцеві теги в документі можна опускати. Більшість браузерів влаштовано так, що при обробці тексту документа початковий тег сприймається як кінцевий тег попереднього. Найпоширеніший тег такого типу – тег абзацу <р>. Оскільки він використовується в документі дуже часто, його звичайно ставлять тільки на початку кожного абзацу. Коли один абзац закінчується, наступний тег <Р> сигналізує браузеру про те, що потрібно завершити цей абзац і почати наступний.

Загальна схема побудови контейнера у форматі HTML може бути записана в наступному вигляді:

"Контейнер" =

<"Ім'я тега" "список атрибутів">

зміст контейнера

</ "Ім'я тега">

Крім тегів, елементами HTML є CER (Character Entity Reference), вони призначені для представлення спеціальних символів в документі HTML, які можуть бути неправильно оброблені браузером. Припустимо, створюється документ HTML, мова в якому йде про елементи цієї мови. Якщо вказати ім'я тега <BODY> просто в документі, браузер може сприйняти його як безпосередньо старт-тег. Для виведення таких символів і використовується CER.

Наприклад, щоб представити символ "<" в документі HTML, потрібно замінити його на <, а символ ">" – на>. Тобто, якщо вказати в тексті HTML рядок <BODY>, вона буде виглядати на екрані як текст <BODY>.