Розглянемо застосування прапорців

Прапорці не залежать один від іншого, їх можна встановити / зняти в будь-якій комбінації. В атрибуті NAME задається ім'я прапорця, в атрибуті VALUE – значення, передане (разом з ім'ям прапорця) на сервер, якщо прапорець встановлений. Якщо, крім іншого, для деякого прапорця задати атрибут CHECKED, то при відображенні формуляра цей прапорець буде встановлений за замовчуванням.

Для опису прапорців використовується тег <INPUT> з опцією TYPE, рівної "checkbox" і додатковими атрибутами.

Приклад коду використання прапорців. Необхідно поставити прапорець і визначити чи цікавлять інші місця роботи викладача у ВНЗ (рис. 2.9).

Другие кафедры ХНУРЭ <INPUT TYPE="checkbox" NAME="Другие кафедры ХНУРЭ" VALUE="Да">

Рисунок 2.9 – Приклад використання прапорців

Перемикачі- радіокнопки (рис. 2.10).

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

Кнопки застосовуються для того, щоб організувати вибір одного елемента з декількох. У більшості Windows-браузерів обраний елемент буде обведений штриховим колом.

Для опису кнопок використовується тег <INPUT> з опцією TYPE, рівної "radio". Кнопки-перемикачі можна групувати, привласнюючи деяким з них однакові значення опції NAME. Крім того, опція VALUE використовується для того, щоб відзначити повернене значення.

Приклад коду використання радіокнопок для вибору кафедри на якій працює викладач.

<tr>

<td>Факультет АКТ </td>

<td><INPUT TYPE="radio" NAME="var-name" VALUE="ТАПР"> ТАПР

<INPUT TYPE="radio" NAME="var-name" VALUE="СТ"> СТ

Рисунок 2.10 – Приклад використання радіокнопок

Використання спливаючих меню.

Спливаючі меню дозволяють користувачеві вибрати один або кілька елементів з меню. Будемо називати ці керуючі елементи спливаючим меню, більшість користувачів Windows знають їх як списки, які розкриваються.

Спливаючі меню аналогічні перемикачам-радіокнопкам в тому значенні, що вони дозволяють вибрати один елемент з декількох. Однак, спливаючі меню займають менше місця на екрані, якщо в списку міститься більше 3-4 елементів, то краще використовувати саме меню.

Меню визначається всередині тегу <SELECT>... </ SELECT>. Кожен пункт меню випереджати тегом <OPTION>.

Приклад коду для спливаючого меню (рис. 2.11).

<OPTION>Расписание занятий

<OPTION>Расписание консультаций

<OPTION>Расписание студ.кружка

<OPTION>График приема задолженностей

</SELECT>

Рисунок 2.11 – Приклад спливаючого меню

Використання кнопок.

Використовуються в сценаріях скриптів для інтерактивних дій користувача. Відрізняється від input більш гнучкими настройками конфігурації кнопки.

Приклад коду використання кнопки.

<button name="Button_1"

type="button"

value="Value_1"

onclick="alert('');">

Печать

</button>

Наведем приклад кода до рис. 2.12.

<HTML>

<Head> <H1 Align="Center"> <font color="blue"> Харьковский национальный университет радиоэлектроники </H1>

<Title> Название документа в окне браузера </Title>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0"

rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<font size="5" color="red" face="Arial">Кафедра ТАПР</tr></td>

</TABLE>

<TABLE>

<Td>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Главная</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Информация для абитуриентов</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Перечень специальностей</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Контакты</A></H2>

</Td>

<Td><H2 align="center"><font color="blue">Преподаватели кафедры ТАПР</H2>

<H3 align="center"><font color="red">Все поля должны быть заполнены</H3>

<tr>

<td><FORM METHOD="POST" ACTION="7cgi-bin/data"> Фамилия преподавателя:</td>

<td><INPUT TYPE="text" NAME="username" VALUE=" Ввести фамилию" SIZE="25"

MAXLENGTH="45"></td> </FORM>

</tr>

<tr>

<td><FORM METHOD="POST" ACTION="7cgi-bin/data"> Имя преподавателя:</td>

<td><INPUT TYPE="text" NAME="username" VALUE=" Ввести имя" SIZE="25"

MAXLENGTH="45"></td> </FORM>

</tr>

<tr>

<td><FORM METHOD="POST" ACTION="7cgi-bin/data"> Отчество преподавателя:</td>

<td><INPUT TYPE="text" NAME="username" VALUE=" Ввести отчество" SIZE="25"

MAXLENGTH="45"></td> </FORM>

</tr>

<tr>

<td>Другие кафедры ХНУРЭ <INPUT TYPE="checkbox" NAME="Другие кафедры ХНУРЭ" VALUE="Да">

</td>

</tr>

<tr>

<td>Факультет АКТ </td>

<td><INPUT TYPE="radio" NAME="var-name" VALUE="ТАПР"> ТАПР

<INPUT TYPE="radio" NAME="var-name" VALUE="СТ"> СТ

<OPTION>Расписание занятий

<OPTION>Расписание консультаций

<OPTION>Расписание студ. кружка

<OPTION>График приема задолженностей

</SELECT>

</tr></td>

</TABLE>

<button name="Button_1"

type="button"

value="Value_1"

onclick="alert('');" align="center">

Печать

</button> </br>

</br>

</Body>

</HTML>

Рисунок 2.12 – Фінальне вікно документа

2.4Порядок виконання роботи

1. У текстовому редакторі "Блокнот" створити файл *.html і, використовуючи теги HTML, HEAD, TITLE і BODY, задати структуру HTML документа.

2. Створити документ «Книжковий магазин», згідно рис. 2.13, використовуючи посилання на інші документи, форми для заповнення інформації про книгу, радіокнопки, спливаюче меню, прапорці і т.д.

2.5 Зміст звіту

1. Теорія по HTML верстці і використанні таблиць в HTML-документі

2. Текст нового HT ML-документа.

3. Копія екрану з відображенням HTML-документа.

4. Висновки по роботі.

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

1. Описати призначення тегів: <TABLE>, <TD>, <TH>.

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

3. Описати значення, які може приймати метод METHOD.

4. Описати синтаксис створення форми для вводу тексту.

5. Визначити в чому відмінність перемикачів від перемикачів-радіокнопок?

6. Описати застосування прапорців в HTML-документі та їх синтаксис.

7. Написати код програми використання спливаючого меню і списку для того, щоб вибрати день тижня.

8. Написати код програми для того, щоб з групувати 3 рядки таблиці з використанням тегів <THEAD>, <TBODY>, <TFOOT>.

9. Написати код програми створеної таблиці з 2 ячейками і 3 стовпцями із заголовком сірого кольору.

10. Описати особливості атрибутів: CELLSPACING, BORDER.

Рисунок 2.13 – Структура головної сторінки книгарні

3 СТВОРЕННЯ HTML-СТОРІНКИ, ЯКІ СТИЛІЗОВАНІ

ЗА ДОПОМОГОЮ CSS

3.1 Мета роботи

Вивчення основ каскадних таблиць стилів та їх використання для відображення елементів HTML-сторінок.

3.2 Вказівки до організації самостійної роботи студентів

Під час виконання роботи необхідно ознайомиться з літературою [1 – 3], матеріалами конспекту лекцій та інформацією, наведеною в підрозділі 3.4.

3.3 Опис програмного продукту, використовуваного для виконання лабораторної роботи

Для виконання лабораторної роботи використовується ПЕОМ, операційна система Windows 2007, Web- браузер Internet Explorer / Opera / Google Chrome, текстовий редактор.

3.4 Порядок виконання роботи та вказівки до її виконання

3.4.1 Розглянемо деякі основні теоретичні положення, необхідні для виконання даної лабораторної роботи

CSS-код – це просто написані інструкції, які говорять браузерам (таким, як Firefox і Internet Explorer), як відображати ті чи інші речі на сторінці. CSS (Cascading Style Sheets) – каскадні таблиці стилів.

Також як в HTML є теги, в CSS є «селектори». Під селекторами слід розуміти імена, які описують стилі у внутрішніх і зовнішніх таблицях стилів.

Коли пишуть CSS код, то повинні мати на увазі, що деякі селектори матимуть вищий пріоритет, ніж інші, останній селектор, не завжди перевизначає попередні, які написано для цих елементів.

У кожного селектора є властивості, які знаходяться всередині фігурних дужок. Всі селектори згруповані за допомогою фігурних дужок: {}.

У CSS існують такі види селекторів (рис. 3.1).

Рисунок 3.1 – Види селекторів CSS

1) Селектори тегів.

Можна вибирати елементи на сторінці для оформлення за назвою тегу.

Приклад 1. Код в CSS для селектора body, p, li, який визначає, як будуть виглядати тіло сторінки, абзац і заголовки:

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

background-color: #F9F9F9;

}

p {

width: 80%;

}

Встановили ширину 80% для тегів <p>, що дозволить контролювати ширину тексту в одному легкому для редагуванні місці.

Приклад 2. Стилізація списку (тег <li >) за допомогою CSS:

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(./images/arrowSmall.gif);

}

Код, вказаний вище, використовує картинки в якості маркерів списку і встановлює простір між елементами списку в півтора рази більше нормального (150 %). Але не обов'язково використовувати картинки в якості маркерів.

Щоб використовувати маркери без картинок, досить видалити цей атрибут: list-style-image: url(.../images/arrowSmall.gif);

Приклад 3. В якості маркерів списку можна використовувати disc (диск) (рис. 3.2), circle (коло) і square (квадрат), тоді

li {

list-style-type: disc;

line-height: 150%;

}

Рисунок 3.2 – Маркування списку у вигляді диск

2) Cелектор ID.

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

Ідентифікатор для елемента задається за допомогою атрибута

id (<p id = "ідентифікатор"> текст </ p>).

Приклад 4. Код в HTML з описом ідентифікаторів для елементів "navigation" та "centerDoc".

<html>

<head>

<title>First CSS Tutorial</title>

</head>

<body>

<h2>The Main navigation</h2>

<ul>

</ul>

</div>

<h1>The Main Heading</h1>

<p> Go to the Web Designers Killer Handbook home page and grab the

practice HTML page that we will used as the starting template for this

tutorial. You can find it under the heading: 'To create the practice HTM

page do the following:'.

Follow the instructions there and create your basic HTML page

... and do it now!</p> </div>

</body>

Тобто, в прикладі 3 зроблені два контейнери (div) та кожному з них присвоєно унікальний ідентифікатор ID:

...

</div>

Для того, щоб потім оформити даний елемент необхідно звернутися до

ідентифікатору в таблицях стилів СSS додавши перед ним символ "#" (# перед ім'ям CSS-селектора - цей селектор особливого виду - ID-селектор), наприклад, (# ідентифікатор {color: red}).

Приклад 5. Код правил для ID в myCSS.css для елемента навігації #navigation і документ а #centerDoc.

#navigation {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

padding: 0 0 20px 0; /*top right bottom left*/

margin-top: 50px;

margin-left: 235px;

}

У прикладі 5 всі селектори згруповані за допомогою фігурних дужок: {}. Ось ці селектори без змісту (воно було видалено):

#navigation {

/*Дивіться, немає ніяких CSS-правил!*/

}

#centerDoc {

/* Дивіться, немає ніяких CSS-правил!*/

}

Рядок font-weight: normal – весь текст буде набрано звичайним шрифтом, а якщо font-weight: bold – текст всередині div буде набрано жирним шрифтом. FONT задає параметри шрифту елемента сторінки. Замінює атрибути font-family, font-height, font-size, font-style, font-variant і font-weight. Значення цих атрибутів можуть розташовуватися в будь-якому порядку. font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight} ]. Альтернативний формат: font: caption | icon | menu | message-box | small-caption | status-bar.

Рядок border – right: 1 px Solid #C6EC8C – елемент div навігації розташований зліва і має кордон у вигляді тонкої зеленої рамки шириною в 1 піксель праворуч від елемента div. BORDER задає всі властивості кордонів елемента сторінки в один прийом. Замінює атрибути border-color, border-style і border-width. Значення цих атрибутів можуть розташовуватися в будь-якому порядку. border: [{border-color}] [{border-style}] [{border-width}]. Значення за замовчуванням medium none.

Рядок position: absolute; говорить браузеру, що помістити блок div на сторінку треба як є (для того, щоб встановити, яким чином обчислюється положення елемента в площині екрану position: static | absolute | relative).

Розглянемо код для centerDoc (приклад 5).

Рядок padding: 0 0 20 px 0; / * Top Right Bottom Left * / говорить браузеру, що потрібно вставити відступ в 20px (пікселів) знизу div з ID 'centerDoc'

Ця блокова модель складається з: padding (відступ), margins (поля), borders (рамки) і самого контенту. Це дозволяє помістити рамку навколо елементів і розставити елементи відносно інших. Порядок зсередини назовні виглядає так: контент -> padding -> border -> margin.

Контроль простору перед рамкою (padding) і після неї (margin) впливає на розмітку тексту.

Рядок margin-top: 50px для div centerDoc; означає, що верхнє поле 50 пікселів, а margin-top: 0px для div navigation означає, що centerDoc буде нижче, ніж navigation на 50px.

3) Селектор class.

На перший погляд немає ніякої різниці, що використовувати: id або class. Адже присвоївши однакові параметри CSS стилів для id та class – результат буде ідентичний. Насправді, відмінностей між id та class в CSS практично немає, за винятком пріоритету їх обробки.

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

За допомогою атрибута class можна задати, що елемент відноситься до групи (<p class = "ім'я_группи"> текст </ p>).

Наприклад, <p class="my_class_r7t" id="my_id_r7t">Этому абзацу присвоены класс my_class и идентификатор my_id.</p>

Для того щоб потім оформити цю групу необхідно в таблицях стилів звернутися до імені групи додавши перед нею символ "." (.імя_групи {Color: red}).

Псевдокласи - це особливі властивості, які дозволяють змінювати стиль елемента в залежності від дій користувача, а так само положення цього елемента (тега) в загальному потоці документа, що дозволяє розбавити дизайн сторінки якоїсь динамікою і логікою. Класичним прикладом застосування псевдокласів є посилання, яке змінює свій колір при наведенні на нього курсором. Ось список всіх псевдокласів:

hover – стиль елемента на який наведено курсор миші.

Active – стиль для посилання, яке стає активним, але перехід по ньому ще не здійснено.

Visited – стиль для недавно відвіданого посилання.

Link – стиль для нечасто відвідуваного посилання.

focus – стиль елемента знаходиться у фокусі.

first-child – стиль першого дочірнього елемента.

lang – визначає мову, яка використовується в фрагменті документа.

Розглянемо приклад опису правил в CSS для псевдокласів.

Приклад 6. Код опису для посилань (navigation)

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li:link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

li a:hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

a:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

4) Селектори атрибутів.

Елементи на сторінці можуть бути обрані за їх атрибутам.

Приклад 7. Код в CSS, що визначає правила для елементів, у яких задано атрибут src (рис. 3.3).

<html>

<head>

/* Оформит все элементы, у которых задан атрибут src */

[src]

{

border-color:green;

border-style:solid;

border-width:3px;}

</style>

</head>

<body>

<p>У данного элемента не будет зеленой рамки потому, что у него нет атрибута src. </p>

</html>

Рисунок 3.3 – Вид сторінки з атрибутом src

У табл. 3.1 приведено короткий опис CSS селекторів.

Таблиця 3.1 – Короткий опис CSS селекторів

Селектор	Приклад	Опис
# Ідентифікатор	# El1	Вибере всі елементи на сторінці, які мають ідентифікатор el1 (які мають атрибут id = 'el1').
.класс	.group1	Вибере групу елементів на сторінці, які мають клас group1 (які мають атрибут class = 'group1').
елемент	P	Вибере всі абзаци на сторінці.
*	*	Вибере всі елементи на сторінці.
: Not (x)	: Not (div)	Вибере всі елементи на сторінці крім елементів div.
: Link	a: link	Вибере всі не відвідані посилання на сторінці
: Visited	a: visited	Вибере всі відвідані посилання на сторінці.
: Hover	a: hover	Вибере всі посилання, на які наведений курсор миші.
: Active	a: active	Вибере всі активні в даний момент посилання (на які клацнули мишкою).
[Атрибут]	p [id]	Вибере всі абзаци на сторінці, які мають атрибут id.
:: Selection	:: Selection	Оформляє виділений користувачем текст.
[Атрибут = значення]	p [id = "el1"]	Вибере всі абзаци на сторінці, які мають атрибут id зі значенням el1.
[Атрибут ~ = значення]	a [href ~ = "wisdomweb]"	Вибере всі посилання з атрибутом href, який містить у значенні підрядок "wisdomweb" відокремлений пробілами від решти вмісту.
[Атрибут ^ = значення]	[Src ^ = "http: //"]	Вибере всі елементи, які мають атрибут src зі значенням, яке починається з "http: //".

Продовження табл. 3.1

Селектор	Приклад	Опис
[Атрибут $ = значення]	[Src $ = ". Gif"]	Вибере всі елементи, які мають атрибут src зі значенням, яке закінчується на ".gif".
[Атрибут = * значення]	[Src * = "picture"]	Дозволяє вибрати всі елементи, які мають атрибут src зі значенням, яке містить підрядок "picture".
: First-child	p: first-child	Вибере всі абзаци, які є першими в батьківському елементі.
: Last-child	div: last-child	Дозволяє вибрати всі елементи div, що є останніми елементами нащадками в батьківському.
: First-line	p: first-line	Оформить перший рядок всіх абзаців на сторінці.
: First-letter	p: first-letter	Оформить першу букву всіх абзаців на сторінці.
ел1 ел2	div p	Вибере всі абзаци, які є нащадками елемента div.
ел1 + ел2	div + p	Вибере всі абзаци наступні після елемента div.
елемент1 ~ елемент2	div ~ p	Вибере всі елементи div, які знаходяться перед елементом p.
: Before	p: before	Вставить довільний вміст перед елементом p.
: After	p: after	Вставить довільний вміст після елемента p.
: Focus	input: focus	Вибере всі активні елементи вводу на сторінці.
: Enabled	: Enabled	Дозволяє вибрати всі працездатні елементи вводу.
: Disabled	: Disabled	Дозволяє вибрати всі непрацездатні елементи вводу.

Продовження табл. 3.1

Селектор	Приклад	Опис
: First-of-type	div: first-of-type	Дозволяє вибрати всі елементи div, які є першими в батьківському.
: Last-of-type	div: last-of-type	Дозволяє вибрати всі елементи div, що є останніми в батьківському.
: Only-of-type	div: only-of-type	Дозволяє вибрати всі елементи div, які є унікальними батьківському.
: Nth-child (x)	div: nth-child (3)	Дозволяє вибрати всі елементи div, які є третіми за рахунком в батьківському.
: Nth-last-child (x)	div: nth-last-child (2)	Дозволяє вибрати всі елементи div, які є другими елементами нащадками в батьківському з кінця.
: Root	: Root	Дозволяє вибрати кореневий елемент документа.
: Empty	p: empty	Дозволяє вибрати порожні абзаци.

3.4.2 Порядок виконання роботи

1. У текстовому редакторі "Блокнот" створити шаблон базового документа, зберегти його, як HTML-сторінку, яку будемо використовувати для цієї лабораторної роботи.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Лабораторная 3</title>

</head>

<body>

Текст документа ….

</body>

</html>

2. Створити папку з назвою myCSSwebsite. Потім помістити HTML-файл в цю папку. У цій же директорії створити новий текстовий документ і назвати його myCSS.css.

3. Для того, щоб створена HTML сторінка відображалася відповідно до заданого стилем, необхідно прикріпити її до CSS-файлу (додати в документ НTML):

<head>

<title>First CSS Tutorial</title>

</head>

Як і у випадку з посиланням звичайної сторінки, використовується атрибут 'href', який в цей раз вказує на CSS-документ, що містить весь CSS-код. Код в CSS-документі буде впливати на сторінку, тому вона посилається на CSS-файл. Це не єдиний спосіб зв'язати CSS-код зі сторінкою. Отже, у наведеному вище посиланні, назву імені CSS-файлу можна описати за допомогою наступної конструкції: ‘href=”myCSS.css’. Атрибут ‘type=”text/css’, яка говорить браузеру, що посилання вказує на CSS-сторінку. Найважливіше тут - це те, що посилання вказує на CSS-файл з ім'ям 'myCSS.css'.

4. У HTML- файлі додати наступний код між тегами * <body> та </ body>:

<body>

<h2>The Main navigation</h2>

<ul>

</ul>

</div>

<h1>The Main Heading</h1>

<p> Go to the Web Designers Handbook home page and grab the

practice HTML page that we will used as the starting template for this

tutorial. You can find it under the heading: 'To create the practice HTM

page do the following:'.

Follow the instructions there and create your basic HTML page

... and do it now!</p> </div>

</body>

Вийшло два контейнери ("navigation", "centerDoc"). Кожному з них присвоєно унікальний ідентифікатор ID. Зберегти створену HTML-файл у форматі *.Html та *.txt.

5. В файлі myCSS.css повинні бути описані правила для:

- body, p, li (приклад 1 та 3);

- h1 та h2:

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

6. У файлі myCSS.css повинні бути описані правила для псевдокласів (приклад 6).

7. У файлі myCSS.css повинен бути описано елемент навігації #navigation і сам документ #centerDoc - селектор ID (приклад 5).

В результаті, зберегти створений файл myCSS.css.

На екрані повинна бути наступна картинка рис. 3.4.

Рисунок 3.4 – Вікно створеної HTML -сторінки

8. Додати в створений документ зображення, яке б розташовувалося під текстом по центру сторінки.

3.5 Зміст звіту

1. Теорія по CSS верстке.

2. Текст нового HTML-документа.

3. Текст створеного CSS-файлу.

4. Таблиця коротким описом CSS селекторів.

5. Копія екрану з відображенням HTML-документа та висновки по роботі.

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

1. Визначення CSS.

2. Описати, як відбувається прикріплення CSS-файлу до HTML-документа.

3. Поняття селектор.

4. Поняття ідентифікатор, навести приклад синтаксису.

5. Поняття селектори тегів, навести приклад синтаксису.

6. Навести приклад стилізації списку (тег <li >) з маркером квадрат за допомогою CSS.

7. Поняття клас і псевдоклас, навести приклад синтаксису.

8. Поняття селектори атрибутів, навести приклад синтаксису.

9. Значення атрибутів: FONT, BORDER, POSITION.

10. У чому відміна padding від border та margin?

4ОСНОВНІ МОЖЛИВОСТІ JAVASCRIPT

4.1 Мета роботи

Вивчення способів динамічного управління елементами Web-сторінок за допомогою організації властивостей і методів об'єктів JavaScript.

4.2 Вказівки до організації самостійної роботи студентів

Під час виконання роботи необхідно ознайомиться з літературою [1 - 3], матеріалами конспекту лекцій та інформацією, наведеною в підрозділі 4.4.

4.3 Опис програмного продукту, використовуваного для виконання лабораторної роботи

4.4 Порядок виконання роботи та вказівки до її виконання

4.4.1 Розглянемо деякі основні теоретичні положення, необхідні для виконання даної лабораторної роботи

JavaScript - це мова сценаріїв (Scripting Language), яка може застосовуватися в файлах Web-сторінок поряд з HTML, наприклад, для надання Web-сторінкам властивостей діалогових вікон. Ці інтерактивні можливості дозволяють розробнику динамічно управляти елементами Web-сторінок. JavaScript можна також застосовувати для зміни елементів Web-сторінки при взаємодії з нею користувача. Наприклад, можна передбачити, щоб текст, що відображається в текстовому полі форми, змінювався, коли користувач клацає на кнопці. Сценарій JavaScript може виконуватися в браузері без будь-яких додаткових програм.

Класифікація об'єктних моделей JavaScript (рис. 4.1).

Рисунок 4.1 – Класифікація об'єктів JavaScript

1) Об'єкт document – це документ HTML, завантажений у вікно браузера. Він містить у собі об'єкти, властивості і методи, призначені для роботи з елементами цього документа HTML, а також для взаємодії з іншими об'єктами.

Об'єкт document містить такі методи:

1. clear () – для очищення поточного документа з вікна браузера.

2. close () – змушує Web-сторінку негайно оновити свій вміст після використання методів write.

3. write () – записує текст або HTML -код, який передано, як параметр, в поточне місце документа.

4. writeLn () – те ж саме, що write, але врешті додає символ повернення каретки і переведення рядка.

Також ще є (createAttribute(), setAttributeNode, createElement(), elementFromPoint(), getElementById(), getSelection()).)

Крім методів, об'єкти мають ще й властивостями. У чому відмінність методу від властивості? Властивість (повертає інформацію - це для того, щоб дізнатися інформацію про якісь конкретні властивості), а метод (дозволяє щось зробити). Наприклад: Кот Анна. Вік // Вік – це властивість.

Або, наприклад: Світлофор. Змінити колір (червоний) // Змінити колір – метод; червоний – властивість.

Розглянемо приклад використання методу write (рис. 4.2, а).

document.write("<p>Выведем текст с помощью <strong>JavaScript"</strong></p>");

</SCRIPT>

<p> – рядок стал параграфом (перед рядком з'являється верхній відступ), <strong> – слово JavaScript буде виділено жирним шрифтом.

а) б)

Рисунок 4.2 – Вікно браузера з виведеним текстом

Якщо необхідно вивести текст або слово в лапках, то ставимо або ‘ ‘ – одинарні лапки, або \, тому що, якщо його не поставити, то це буде розцінюватися, як кінець пропозиції.

Наприклад, document.write("<p>Выведем текст с помощью <strong>\"JavaScript\"</strong></p>"); – це правильний запис.

document.write("<p>Выведем текст с помощью <strong>"JavaScript"</strong></p>"); – це неправильний запис, так як лапки "означають кінець пропозиції, тому " </ strong> </ p> вже не видно оброблювачу коду, а, значить, виведеться помилка (теги <p> і <strong> – це парні теги).

Увага! Не плутати \ (зворотний слеш) та /.

Для того, щоб у тексті коду написати коментар потрібно поставити //, а якщо коментар багатостроковий, то

/ *.................

................. * /

2) Об'єкт location містить інформацію про місцезнаходження поточного документа, тобто його інтернет-адресу. Його також можна використовувати для переходу на інший документ і перезавантаження поточного документа.

Об'єкт location містить такі методи:

1. assign ({Адреса}) – завантажує документ, адреса якого передана в якості параметру.

2. reload ([true | false]) – перезавантажує документ з Web-сервера. Необов'язковий параметр потрібний тільки для NN: значення true змушує Web-оглядач перезавантажити документ з жорсткого диска, де він був збережений раніше, а false (значення за замовчуванням) – прямо з Web-серверу.

3. replace ({Адреса}) – завантажує документ, адерса якого передана, як параметр, і замінює в списку історії Web-оглядача адресу попереднього документа адресою нового.

3) Об'єкт style підтримує ряд властивостей і методів. Їх можна розділити на дві групи: що задають стиль документа і ті, що відносяться до самого об'єкту style.

4) Об'єкт screen служить для доступу до характеристик відеосистеми комп'ютера клієнта.

5) Об'єкт navigator служить для доступу до самої програми Web-оглядача. Не плутайте його з об'єктом window, що представляє поточне вікно Web-оглядача, і назвою програми Netscape Navigator.

6) Об'єкт window являє поточне вікно Web-оглядача або окремий фрейм, якщо вікно розділене на фрейми (рис. 4.3). Приклади використання методів цього об'єкта розглянемо пізніше.

7) Об'єкт layer – доступ до шарів.

8) Об'єкт history представляє інтерфейс до списку історії Web-оглядача, тобто списку всіх Web-сторінок, переглянутих користувачем протягом часу, зазначеного в налаштуваннях.

На рисунку 4.3 схематично наведена ієрархія об'єктів браузера.

Рисунок 4.3 – Ієрархія об'єкт а window

Розглянемо опис змінних в JavaScript.

У ході роботи комп'ютерні програми маніпулюють різними значеннями, які розташовуються в пам'яті. Вони можуть їх записувати, змінювати або звільняти область пам'яті, яку займає якесь значення. Ці області пам'яті і називаються змінними. Змінна - символ або слово, що позначає деяке значення.

Рисунок 4.4 – Структура імені змінної

Оголошення змінної.

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

Наприклад, оголосимо змінну а.

var a;

За допомогою одного оператора var можна оголосити кілька змінних.

var a, b, c;

Часто оголошення змінної суміщають з присвоєнням їй значення (ініціалізацією)

var a = 10;

var a = 1, b = 2, c = 3;

Приклад 1. Нехай є змінна a, на початку її потрібно оголосити, потім присвоїти їй значення 500.

var priсe;

priсe=500;

</SCRIPT>

Тобто, присвоюємо priсe значення 500, знак = означає не дорівнення, а привласнення.

Приклад 2. Необхідно присвоїти змінній текстове значення Іван і вивести його на екран.

var name = "Иван";

document.write (name); // Выводит на экран

</SCRIPT>

Де "" – означають, що всередині текст.

Правила для імен змінних:

1. Імена змінних можуть починатися з літери або зі знака $, або з підкреслення _. З інших символів ім'я змінної починатися не може.

2. Імена змінних можуть містити тільки букви або знак $, або підкреслення _, але не можуть: тире, знак амперсанта && і т.д.

Наприклад.

var my_lesson; // це правильно.

varmy-lesson или mylesson // це неправильно так, як у першому є знак -, а в другому є прогалина в імені.

3. Ім'я змінної чутливо до регістру.

Наприклад, Kharkov і kHarkov – це дві різні змінні, якщо на початку вказали Kharkov, то далі в програмі потрібно звертатися тільки до Kharkov.

4. Не можна називати змінну одним із зайнятих слів (це список зарезервованих слів, які використовуються в самій мові програмування, наприклад, function, short, public, null, new і т.д.).

Робота з рядками.

Приклад 3. Складання / Злиття рядкових змінних (рис. 4.5, а і б).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Лаба по JavaScript</title>

</head>

var fam = "Cотник", name = "Лана", otch = "Викторовна";

var fio = fam + name + otch;

document.write(fio);

</Script>

<body>

</body>

</html>

а) б)

Рисунок 4.5 – Приклад виводу строкових змінних на екран

На рис. 4.5, а всі слова написані без пробілів між ними, але якщо потрібно, щоб слова були розділені пробілом (рис. 4.5, б), тоді

var fio = fam +” ” + name +” ” + otch;

Приклад 4. Додати до ПІБ адресу: пр. Леніна 14 (скласти рядки і числа) і вивести на екран (рис. 4.6).

var fam = "Cотник", name = "Лана", otch = "Викторовна";

var fio = fam + " " + name + " " + otch;

document.write(fio);

var myWork = "пр.Ленина", myNumerHouse = 14, myAdress

myAdress = " " + myWork + " " + myNumerHouse;

document.write(myAdress);

</Script>

<body>

</body>

Рисунок 4.6 – Приклад виводу на екран строкових і числових значень змінних

Приклад 5. Визначити загальну суму замовлення яблук (40 яблук по 30 коп.)

var appleCount = 40, priceApple = 30, totalSum;

totalSum = appleCount * priceApple;

document.write(totalSum);

</SCRIPT>

Розглянемо зміну значень змінних (наприклад, збільшити / зменшити).

Приклад, необхідно збільшити значення змінної а на 16 при цьому а = 36.

var a = 36;

a = a + 16;

document.write(a);

</Script>

Рисунок 4.7 – Приклад виводу числових значень

a = a + 16; // Завжди спочатку розраховується права частина виразу, а потім ліва, тобто 36 + 16, а значить а = 52.

a = a + 16; можна записати скорочено, наприклад, а + = 16; (Тобто, потрібно додати значення 16 до змінної а). Точно також, якщо потрібно зменшити значення, тоді пишеться знак -.

Якщо необхідно збільшити значення змінної на 1, то пишеться а ++; Якщо зменшити на 1, то а--;.

Робота з текстом і змінними.

Приклад 6. Вивести на екран (рис. 4.8) наступний текст: Вы студенты 4 курса, дневной формы обучения. Сейчас у вас 7 семестp. Который будет включать переменные: vidOb = ‘дневной’, kurs = 4, sem = 7.

var vidOb = "дневной", kurs = 4, sem = 7;

document.write("<p> Вы студенты " + kurs + "курса." + vidOb + " формы обучения. Сейчас у вас " + sem + " семестp.</p>");

Рисунок 4.8 – Приклад виводу на екран тексту та змінних

Цикли в JavaScript. Будь-який цикл можна розділити на 4 частини - ініціалізацію, тіло, ітерацію і умову завершення. У Java є три циклічні конструкції: while (з передумовою), do-while (з постумовою) і for (з параметром). Лічильник і в циклах зазвичай позначають однією буквою, зазвичай це i. Сінтаксис циклів, наприклад, while:

[Ініціалізація; ]

while (завершення) {

тіло;

[Ітерація;]}

Ініціалізація та ітерація необов'язкові.

Приклад 7. Необхідно, щоб виконувалася умова: лічильник повинен бути менше або дорівнює 10 (рис. 4.9).

var i = 1;

while(i<= 10) {

document.write(i + "<br />");

i=i + 1; // Либо i++

}

Рисунок 4.9 – Приклад виконання циклу

document. write (i + "<br />"); – виводимо лічильник на екран і добавляємо перенесення рядка, щоб кожне число виводилося з нового рядка;

i + "<br/>" – це тому, що лічильник з'єднуємо з рядком (тому ставимо ""), а <br> – розрив рядка.

Детальніше про методи об'єктів Window. Об'єкт Window – це вікно браузера.

Розглянемо метод Open – дозволяє генерувати нове вікно:

window.open ()

Може приймати 3 параметри: window.open ("", "Модальне вікно", "weigth = 400, height = 300"), де 1 – це яку сторінку будемо завантажувати в документ, 2 – назва вікна, 3 – різні опції вікна.

Створення модального вікна. Модальним називається вікно, яке блокує роботу користувача з батьківським додатком до тих пір, поки користувач це вікно НЕ закриє. Для того, щоб створити модальне вікно.

Приклад 8. Створити нове модальне вікно (рис. 4.10) з розмірами ширина 400рх, висота 300рх.

window.alert("Новое окно"); або

var newWin = window.open(" "," Модальное окно","width=400, height=300"); /* Задамо розміри вікна */

newWin.document.write("Модальное окно");

Рисунок 4.10 – Нове модальне вікно

У прикладі 8 використаний метод window. open ().

Синтаксис: open ({Адреса}, {Ім'я вікна}, [{Список властивостей вікна, розділених комами}])

Відкриває нове вікно Web-оглядача, завантажує в нього документ, адреса якого передано в першому параметрі, і присвоює вікна ім'я, передане в другому параметрі. У третьому параметрі може бути переданий список властивостей вікна.

Використання методів prompt і confirm.

Метод prompt – містить поле для вводу тексту і дозволяє запитати у користувача якусь інформацію (рис. 4.11, а). Приклад запису: prompt ("Ви студент?");

а) б)

в) г)

Рисунок 4.11 – Приклад модального вікна з запитанням

Приклад 9. Вивести модальне вікно з будь-яким запитанням, щоб в поле для відповіді висвічувалася відповідь за замовчуванням.

var XNURE = prompt ("Ви студент?"); / * Все, що буде введено в поле користувачем, буде поміщено в змінну XNURE * /

Для того, щоб у вікні висвічується відповідь за замовчуванням (рис. 4.11, б).

var XNURE = prompt ("Ви студент?", "Студент"); / * Другий параметр "Студент" буде виведений в поле автоматично. У змінну XNURE поміщається то, слово, яке вводитися в рядок і буде відображатися в другому модальному вікні * /

alert ("Моя відповідь" + XNURE); // для виводу в новому модальному вікні.

Користувач може залишити значення – студент в поле для вводу відповіді, інакше, необхідно ввести свій варіант відповіді, наприклад, немає (рис. 4.1 1, в), тоді відповідь буде поміщений в другому модальне вікно (рис. 4.11, г).

Метод confirm. Виводить на екран вікно попередження з текстом, переданим в якості параметра, що пропонує користувачеві зробити вибір. Якщо користувач натисне Ок, повертається true, якщо Скасування – false. Наприклад, confirm ("Ви працюєте в ХИРЕ?");

Приклад 10. Вивести нове вікно з будь-яким запитанням (рис. 4.12, а), на котре можна відповісти так чи ні, при цьому, якщо натиснути на кнопку «Ок» в батьківському вікні буде виведено одна фраза-висновок (рис. 4.12, б), а при натисканні на «Скасування» – інша (рис. 4.12, в).

var answer = confirm ("Вы работаете в ХИРЭ?");

if (answer) {

document.write("Допустим работаю");}

else {

document.write("Значит Вы студент");

}

</Script>

а) б) в)

Рисунок 4.12 – Приклад використання методу confirm

var answer = confirm ("Ви працюєте в ХИРЕ? "); / * поміщається в змінну answer той варіант відповіді, який, шляхом натискання вибере користувач.

Метод confirm працює так, що за замовчуванням, якщо виконується умова, то повертається значення true, а якщо ні, то false, тобто при натисканні «Ок», значення true і т.д. * /

У прикладі 10 використовувався оператор умови іf.

Синтаксис у нього наступний:

if B {S1} else {S2}

де B – вираз логічного типу, а S1 і S2 – оператори. Працює це так: обчислюється значення виразу B, якщо воно істинне, то виконується оператор S1, якщо воно помилкове, то виконується оператор S2. Рядок else {S2} можна опустити.

Приклад 11. Вивести запит скільки років користувачеві, який зараз рік і вивести в циклі інформацію про те, скільки йому років було за минулі роки (з нового рядка (рис. 4.13)).

var age = prompt ("Сколько сейчас Вам лет ");

var year = prompt ("Какой сейчас год?");

while(age > 0) {

document.write ("<br>" + "В " + year + "Вам было" +" " + age + "лет" + "<br />");

age--; // Либо age = age – 1; Тобто, зменшення віку на 1, якщо age > 0.

year--; // Либо year = year – 1; Тобто, зменшення року на 1, якщо age > 0.

}

Рисунок 4.13 – Приклад виконання циклу

Розглянемо функції function в JavaScript.

Приклад 12. Нехай є функція, в якості змінних – два числа. Необхідно дізнатися суму цих двох чисел. Результат вивести на екран рис. 4.14.

function summa (number1, number2) {

var itog = number1 + number2;

document.write ("<br>" + "Cумма двух переданных чисел:" + itog);

}

summa (30, 58);

Рисунок 4.14 – Приклад виконання функції складання двох

числових значень

Розглянемо шари.

Приклад 13. Вивести на екран 3 посилання на шари. При натисканні на перше посилання з'являється шар 1 з текстом, при натисканні на другий посилання – шар 2 і т.д. За умови, що всі верстви будуть відображатися на 20 рх від батьківського шару та 160 рх від лівого краю батьківського шару, а місце для шару 2 і 3 не пропускається (рис. 4.15, а, б).

<HTML>

<HEAD>

div {

position: absolute;

top: 20; //

left: 160;

visibility: hidden;

}

</STYLE>

<!--

function show(d)

{

div1.style.visibility='hidden';

div2.style.visibility='hidden';

div3.style.visibility='hidden';

d.style.visibility='visible';

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<a href="javascript:void(0)" onClick="show(div1);">показать слой 1</a><br>

<a href="javascript:void(0)" onClick="show(div2);">показать слой 2</a><br>

<a href="javascript:void(0)" onClick="show(div3);">показать слой 3</a><br>

<h3>Слой номер один</h3>

Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.

</div>

<h3>Слой номер два</h3>

Содержит свой текст. Если показывается, то текст на других слоях не виден.

</div>

<h3>Слой номер три</h3>

Тоже текст. При работе со слоями надо следить, чтобы текст одного слоя не "выглядывал" из-под другого слоя при самых различных размерах окна браузера и используемых шрифтах.

</div>

</BODY>

</HTML>

Шари. Для створення шарів використовують тег <DIV > або < SPAN>.

Розглянемо докладніше опис шарів, які виводяться при натисканні на посилання показати шар 1. 2, або 3.

div {

position: absolute;

top: 20;

left: 160;

visibility: hidden;

}

</STYLE>

position – встановлює спосіб позиціонування елемента щодо вікна браузера або інших об'єктів на веб-сторінці (absolute – відлік координат ведеться від краю батьківського елементу).

top: 20; / * визначає відстань від верхнього краю батьківського шару (тут воно 20 пікселів). * /

left: 160; / * визначає відстань від лівого краю батьківського шару (тут воно 160 пікселів). * /

visibility: hidden; / * Призначено для відображення (visible) або приховування (hidden) шару. * /

При приховуванні шару, хоча він і стає не видний, місце, яке шар займає, залишається за ним, а при

position: absolute;

top: 20;

left: 160;

всі приховані шари відображаються на одному місці (на 20 рх від батьківського шару і 160 рх від лівого краю батьківського шару) і місце не пропускається для шару 2 і 3.

Розглянемо докладніше функції відображення javascript.

Function Show (d); / * де show – назва функції. d – параметр, який передаємо функціі (тут це шар). * /

У дужках {} пишуться дії, які повинні виконуватися.

Тому, необхідно щоб деякі шари були приховані

{

div1.style.visibility = 'hidden';

div2.style.visibility = 'hidden';

div3.style.visibility = 'hidden';

d. style. visibility = 'visible'; // шари посилання бачимо и.

}

Для того, щоб приховати відображення шару div1, можна використовувати наступну команду:

div1.style.visibility='hidden';

Для звернення до шарів із сценаріїв JavaScript, найзручніше кожному шару дати власне ім'я за допомогою параметра id. Наприклад:

...

</div>

Тому для першого прихованого шару:

<h3>Слой номер один</h3>

Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.

</div>

Розглянемо посилання. Стандартний синтаксис посилань: <A HREF = 'javascript: void (0)' onclick = "someFunction ()">.

Тому:

<a href="javascript:void(0)" onClick="show(div1);">показать слой 1</a><br> / * Тобто, «клікаючи» на посилання викликається його виконання. В обробнику onClick можна самим визначати виконання необхідної дії. * /

void (0) – дозволяє просто скасувати стандартне призначення посилання і виконати певний скрипт.