Рассмотрим применение флажков

Флажки не зависят один от другого, их можно установить/снять в любой комбинации. В атрибуте 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. В текстовом редакторе "Блокнот" создать файл с именем contacts.html и, используя теги HTML, HEAD, TITLE и BODY, задать структуру HTML документа.

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

2.5 Содержание отчета

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

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

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: 1px 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 20px 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.
элемент1~элемент2	div~p	Выберет все элементы div находящиеся перед элементом p.
:before	p:before	Вставит произвольное содержимое перед элементом p.
:after	p:after	Вставит произвольное содержимое после элемента p.
:focus	input:focus	Выберет все активные элементы ввода на странице.
:enabled	:enabled	Позволяет выбрать все работоспособные элементы ввода.
:disabled	:disabled	Позволяет выбрать все неработоспособные элементы ввода.
: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-документа.

6. Выводы по работе.

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.11, в), тогда ответ будет помещен в 2-ое модальное окно (рис. 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 использовался оператор условия If.

Синтаксис у него следующий:

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 – Пример выполнения функции сложения двух

числовых значений

Рассмотрим слои в JavaScript.

Пример 13. Вывести на экран 3 ссылки на слои. При нажатии на первую ссылку появляется слой 1 с текстом, при нажатии на 2-ую ссылку – слой 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) – позволяет просто отменить стандартное предназначение ссылки и выполнить определённый скрипт.