Файл: Опорний кнспект.doc

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 18.07.2024

Просмотров: 241

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Лекція 1

Лекція 2

Лекція 3

Лекція 4 Теги форматування тексту Створення гіперпосилань та списків в Html-документі

2. Теги логічного форматування тексту

4. Текстові гіперпосилання

5. Списки

Лекція 6

1. Використання таблиць у html-документах

2. Форматування таблиць.

3. Форматування тексту та оформлення рамок таблиці

4. Використання таблиць для розміщення об'єктів на веб-сторінці

1. Фрейми, їхні теги та атрибути

2. Використання посилань у фреймах

3 Вкладені набори фреймів

Лекція 6

1. Поняття форми

Створення форм

2. Елементи форми в html

Поле для пароля

Кнопка submit

Кнопка reset

Прапорці (checkbox)

Перемикачі (radiobutton)

Кнопка із зображенням

Приклад комбінованої форми

Лекція 7

1. Фрейми, їхні теги та атрибути

2. Використання посилань у фреймах

3 Вкладені набори фреймів

Лекція 8

1. Поняття форми

Створення форм

2. Елементи форми в html

Поле для пароля

Кнопка submit

Кнопка reset

Прапорці (checkbox)

Перемикачі (radiobutton)

Кнопка із зображенням

Приклад комбінованої форми

Лекція 10

1. Технологія створення веб-вузла.

5.Створення веб-сторінки за допомогою шаблона

Контрольні запитання

Лекція 11

1. Створення форми.

MySql - субд для Інтернету

Інтеграція сценаріїв з базами даних

2. Використання php

3. Вбудовування php в html

5. Доступ до змінних форми

Лекція 15

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

2. Властивості, методи та події

3. Сценарії

Зверніть увагу, що переданий функції рядок укладений у круглі дужки. Це значення називається аргументом, або параметром функції.

Функція date()

Аргумент, переданий у функцію date(), повинен бути рядком формату, що задає необхідний стиль виводу. Кожна буква в рядку представляє частину рядка дати й часу. Н представляє години в 12-годинному форматі, i - хвилини із провідним нулем, коли потрібно, j - день місяця без провідного нуля, S представляє звичайний суфікс, а F - рік, представлений чотирма цифрами.

5. Доступ до змінних форми

Весь зміст використання форми замовлення полягає в одержанні інформації про замовлення клієнта. Одержання докладної інформації про те, що ввів клієнт, реалізується в PHP дуже просто.

Усередині PHP-сценарію до кожного з полів форми можна одержати доступ як до змінної, що має те ж ім'я, що й у поля форми. Розглянемо приклад.

Додамо наступні рядки в нижню частину PHP-сценарію:

echo "<p>Ваше замовлення було таким:";

echo "<br>";

echo $cdr." CDR-диск(ов)<br>";

echo $cdrw." CDRW-диск(ов)<br>";

echo $fut." футляр(ов)<br>";

Після відновлення вікна браузера вивід сценарію повинен виглядати подібно показаному рисунку 2.4. Звичайно ж, фактичні значення будуть залежати від того, що уведено у форму.

Рисунок 2.4 - Вивід замовлення

Змінні форми

В остаточному підсумку, дані зі сценарію попадають в PHP-змінні. Імена змінних в PHP легко розпізнати, оскільки всі вони починаються із символу долара ($). (Пропуск символу долара - ще одна розповсюджена помилка програмування). Існують два способи доступу до даних форми через змінні.

У цьому прикладі для посилання на змінні форми використовується скорочений стиль. При використанні цього стилю можна, наприклад, просто почати роботу зі змінної, скажемо, $CDR.

Другий стиль полягає в одержанні змінних форми через один з 2-х масивів, що зберігаються в змінних $HTTP_POST_VARS й $HTTP_GET_VARS. Один із цих масивів буде містити докладну інформацію про всі змінні форми. Вибір використовуваного масиву залежить від методу відправлення форми: POST або GET.

Скорочений стиль можна застосовувати тільки при установці в значенні "On" директиви register_globals у файлі php.ini. Це - настроювання за замовчуванням у стандартному файлі php.ini.

Обоє ці методи аналогічні методам, використовуваних в інших мовах створення сценаріїв, наприклад, Perl, і можуть виглядати знайомо.


Конкатенація рядків

У сценарії оператор echo застосовувався для виводу значень, уведених користувачем у кожному з полів форми, за якими ішов деякий пояснювальний текст. Якщо уважно придивитися до операторів echo, можна помітити, що між ім'ям змінної й наступним за ним текстом міститься крапка(.), наприклад:

echo $CDR. " CDR-диск(ов)<br>";

Це операція конкатенації рядків, що використовується для об'єднання рядків (фрагментів тексту). Вона буде часто застосовуватися при пересиланні виводу в браузер за допомогою оператора echo. Ця операція дозволяє уникати запису декількох команд echo. Інакше можна було б записати так:

echo "$CDR CDR-диск(ов)<br>";

Цей оператор еквівалентний першому. Обидва формати припустимі й використання кожного з них - особиста справа кожного.

Змінні й літерали

Змінні й рядки, поєднувані в кожному з операторів echo, - різні поняття. Змінні - це символи (позначення) для даних. Рядки ж - це і є дані. Фрагмент неструктурованих даних у програмі подібній розглянутій називається літералом, на відміну від змінної. $CDR - це змінна, тобто символ, що представляє уведені клієнтом дані. З іншого боку, "CDR" - це літерал. Він приймається так, як виглядає.

Фактично, в PHP існують два види рядків - з подвійними лапками й одинарними лапками. PHP буде намагатися оцінити рядки, укладені в подвійні лапки. Рядки, укладені в одинарні лапки, будуть оброблятися, як справжні літерали.


Лекція 15

Тема: Сценарії. Мова програмування JavaScript.

План

  1. Поняття об’єктної моделі.

  2. Властивості, методи та події

  3. Сценарії

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

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

Розглянемо поняття об'єктної моделі як способу взаємодії між HTML-кодом веб-сторінки та браузером. Об'єктна модель докумен­та (Document Object Model, DOM) — це засіб для роботи зі струк­турою документа, а також з елементами сторінки в кодах HTML та у сценаріях. Вона забезпечує реалізацію технології динамічної HTML, яка ґрунтується на класичній HTML і використовує табли­ці каскадних стилів та мови сценаріїв. Об'єктна модель документа є основою для того, щоб зробити елементи сторінки динамічно керованими під час її відтворення у вікні браузера.

Об'єктна модель описує кожний HTML-документ як набір окре­мих об'єктів — зображень, абзаців, списків і т. д. до найнижчо­го рівня, навіть до окремих символів. Кожний об'єкт може мати властивості, визначені у вигляді атрибутів. Наприклад, абзац <Р> має атрибут вирівнювання <ALIGN>, який може набувати значень left, right або center. В об'єктній моделі атрибут називають властивістю об'єкта. Об'єкт має також свої методи і події, які можуть відбуватися з ним і впливати на нього. Наприклад, зобра­ження <IMG> має подію OnMouseOver, яка відбувається тоді, коли користувач розміщує над ним вказівник миші. Можна керувати станом об'єктів, використовуючи методи з деякого набору стан­дартних методів. Все це й складає концепцію DOM як платформо-незалежного програмного інтерфейсу, який дає змогу програмам та скриптам керувати вмістом HTML-документів, змінювати їх структуру та оформлення.

Ми розглянули об'єкти HTML-документа, зокрема теги з тексто­вим наповненням. Проте браузер як програма також має свою об'єктну модель, при цьому моделі різних браузерів суттєво відрізняються. Браузер і документи, завантажені в нього, створю­ють ієрархічно організований набір об'єктів.

Сьогодні є можливість керувати як вмістом HTML-документів, так і браузером. Наприклад, для браузера Internet Explorer за допомогою об'єктно-орієнтованих мов JScript та VBScript можна писати програми, які називають сценаріями (скриптами), і встав­ляти їх у HTML-код. Такі сценарії розміщують у спеціальних тегах <SCRIPT> І </SCRIPT>.


2. Властивості, методи та події

Об'єкти мають фіксовані імена і певні властивості. Наприклад, вікну браузера відповідає об'єкт Window, а HTML-документу, завантаженому в браузер, — об'єкт Document. Звичайні власти­вості — це змінні з фіксованими іменами, які мають певні зна­чення. Одні властивості можна лише переглядати, інші можна змінювати. Для доступу до властивості об'єкта у мовах сценаріїв використовують такий синтаксис:

об'єкт.властивість

Наприклад, значенням властивості Document.Location є URL-адреса HTML-документа.

Властивістю об'єкта може бути інший об'єкт. При цьому перший об'єкт називають також батьківським (parent), а другий — на­щадком (child). Якщо ми хочемо звернутися до властивості або методу об'єкта Object2, який міститься в об'єкті Objectl, то слід записати:

Objectl. Object2.властивість

Object1.Object2.метод()

Наприклад, об'єкт Document є нащадком об'єкта Window. Як­що ми хочемо щось записати в документ, завантажений у поточ­не вікно, то можемо скористатися для цього методом Write(). Наприклад:

window.Document.Write ("Текст")

Методи — це пов'язані з об'єктами дії, які мають фіксовані імена, можуть мати параметри і повертати значення. Синтаксис застосування методу такий:

об'єкт.метод (список параметрів)

Наприклад, метод Window.Open(“www.protvaryn.narod.ua”) відкриває нове вікно браузера і завантажує у нього сторінку, роз­ташовану за вказаною адресою.

Крім властивостей і методів для кожного об'єкта існує набір по­дій. Події мають наперед визначені назви: натискання кнопки ми­ші позначають OnClick відпускання кнопки миші — OnMouseUp, а завантаження документа в браузер — OnLoad тощо. Настанням події можна скористатися для ініціювання певних дій.

Окрім об'єктів, у модель входять колекції — структури, що скла­даються з однотипних елементів. Колекція — це групування об'єктів для спрощеного доступу до них за допомогою програм­ного коду. Наприклад, об'єкт Document містить колекцію зобра­жень Images. Ми можемо звернутися до зображення або за його іменем, або за порядковим номером:

Document.Images ("my_image")

Document.Images (0)

Індекс (порядковий номер) елемента в колекції залежить від йо­го розміщення у тексті HTML-документа. У колекціях об'єктної моделі перший елемент має нульовий індекс.


Колекціями також є:

  • All — всі теги та елементи, що розташовані на веб-сторінці;

  • Frames — фрейми;

  • Images — зображення;

  • Links — посилання та карти посилань.

Приклад. Об'єктна модель HTML-документа

Розглянемо приклад HTML-документа.

<HTML>

<TITLE>Приклад</TITLE> <BODY>

<P><IMG SRC="chajka.jpg" height=200 width=200 NAME="imagel">

<A HREF="fl.html" NАМЕ="1ink1">Чайка</А></Р>

<P><IMG SRC="flamingo.jpg" height=200 width=200 NAME="image2">

<A HREF="f2.html" МАМЕ="1ink2">Фламінго</А></Р>

</BODY>

</HTML>

Ha рис. 1 показано, який вигляд має цей документ у вікні браузера.

На цій сторінці розташовано два малюнки та два посилання. На рис. 2 наведена ієрархічна схема об'єктного подання HTML-документа з цього прикладу.

Рис. 2 Ієрархічна схема об’єктного подання html-документа

Головний об'єкт у цій структурі — Document. Перший елемент HTML-документа — зображення з іменем Image 1 (це малюнок із файлу fly.jpg) — воно подане як об'єкт колекції Images (0) (ну­мерація елементів колекції починається з нуля, тому перший еле­мент має індекс 0). Другий елемент — посилання з іменем Linkl на файл l.html — нульовий об'єкт колекції Links тощо.

У HTML-документі імена елементів було визначено за допомогою атрибута NAME, і, хоча це не обов'язково, у нашому прикладі та­ке позначення виявилося корисним, оскільки тепер до елементів можна звертатися за іменами. Наприклад, для доступу до пер­шого елемента сторінки можна записати Document.Images(0) або Document. Imagel. Це особливо зручно тоді, коли на сторінці розташовано багато елементів, і важко відстежити, який індекс має той чи інший із них.

Об'єктна модель браузера Internet Explorer

Основні об'єкти моделі браузера Internet Explorer такі:

  • Window — об'єкт найвищого рівня, це вікно браузера Internet Explorer;

  • Frame — фрейм; усі фрейми утворюють колекцію Frames;

  • History — об'єкт-історія, призначений для навігації за спи­ском переглянутих у цьому сеансі сторінок;

  • Location — об'єкт-розташування, це URL-адреса поточної сторінки;

  • Event — об'єкт-подія, надає інформацію, що пов'язана з дея­кою подією у сценарії;

  • Parent — батьківське вікно;

  • Document — документ, область, в яку сценарій виводить ін­формацію.