Контрольные вопросы:

1. Перечислите наиболее часто используемые теги и их назначения.

2. Что такое CSS? Назначение и примеры применения.

3. В чем различия между блочной и табличной верстками.

4. Что вы понимаете под валидацией, кросебраузерностью, жесткой и резиновой версткой?

9.Лабораторная работа №4 «Создание интерактивных, динамически изменяемых страниц с использованием JavaScript»

Цель работы: формирование навыков создания интерактивных, динамически изменяемых страниц используя сценарии- программы, написанные на специальном языке Java Script, совместимый с языком HTML.

1.Общие сведения

С помощью языка разметки гипертекста HTML можно создавать статичные Web- страницы, которые пользователь не может изменять во время показа в окне броузера, не может взаимодействовать с ними. Динамический HTML (Dynamic HTML) – технология для создания интерактивных, динамически изменяемых страниц. Он включает в себя простой классический HTML и опирается на использование каскадных таблиц стилей (CSS) и языка сценариев.

Объектная модель – это представление объектов, свойств, методов и событий, имеющихся в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходных текстов сценариев.

Опишем вкратце содержание основных понятий объектной модели.

Объекты. Объект представляет собой относительно самостоятельную часть программы, выполняющую определенные функции. Главное применение его в программе состоит в знании его свойств, методов и событий, на которые объект реагирует.

Свойства. Объект может иметь свойства. Изменяя значения свойств объекта, мы можем изменять его вид и поведение.

Методы. Объекты могут обладать методами – внутренними функциями. Методы- способ указать объекту, что требуется сделать.

События. Событие является способом сообщить нам, что нечто произошло.

Для придания документу свойств динамичности и интерактивности (диалогового взаимодействия) можно использовать так называемые сценарии- программы, написанные на специальном языке, совместимый с языком HTML(jS).

JavaScript позволяет создавать приложения, выполняемые на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя. Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. Не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои javascript-программы в различных браузерах.

2.Операторы управления JavaScript

Все операторы языка JavaScript делятся на 3 основные группы:

1. Операторы выбора

2. Операторы цикла

3. Операторы манипулирования объектами

К первой группе операторов относятся операторы, которые выполняют определенные блоки операторов в зависимости от истинности некоторого булевого выражения. Операторы цикла повторно выполняют последовательность операторов, определенные в теле, пока не выполнится некоторое заданное условие. Третья группа операторов предназначена для работы с объектами.

Оператор if-else

Оператор If-else управляет последовательностью команд, и относится к первой группе. Он позволяет выбрать и запустить на выполнение одну из двух альтернативных групп операторов. Выбор осуществляется с помощью булевого выражения true или false. Его синтаксис:

If (условие) { операторы1 } else { операторы2}

Операторы1 выполняются при условии истинности выражения условие. Необязательный блок else задает группу операторов “операторы2”, которые будут выполнены в случае ложности условия. Если блок выполняемых операторов состоит из одного оператора, то наличие фигурных скобок необязательно. Если результатом условия if является undefined или null, то это равносильно значению false.

Пример.

Var p=window. confirm (“вам нравиться JavaScript”);

If (p= = true) alert (“Отлично”) else alert (“Жаль”);

Оператор switch

В тех случаях, когда при решении задач требуется выбрать один вариант действия из нескольких возможных. Удобно воспользоваться операторjм switch. Его синтаксис:

Switch (B)

{

case L1: S1 ; [break];

case L2: S2 ; [break];

. . . . . . . . . . . . . . . . . .

case Ln: Sn ; [break];

default :S

}

Здесь B-вычисляемое выражение, L1,L2…,Ln –метки в виде литералов; S1,S2,…,Sn- операторы. Вначале вычисляется значение выражения B. Если оно равно L1, то выполняются операторы S1, а затем все остальные операторы либо до первого необязательного оператора break, либо до конца оператора switch. Аналогично работает оператор switch , если значение B равно L2,L3,…Ln. Если значение B не равно не одной метке, то выполняются операторы S. Часть default может отсутствовать. Оператор break, который может задаваться в каждом из блоков case, выполняет безусловный выход из оператора switch.

Пример.

Var p; p=prompt (“ Введите число от 1 до 4”);

Switch (p)

{ case “1” : alert (“ Вы ввели 1”); break;

case “2” : alert (“ Вы ввели 2”); break ;

case “3 : alert (“ Вы ввели 3”); break;

case “4” : alert (“ Вы ввели 4”); break;

}

Оператор for

Оператор цикла for относится ко второй группе операторов и позволяет организовать выполнение блока операторов заданное число раз. Его синтаксис:

for ( инициализируемое выражение; условие; изменяющееся выражение)

{ операторы}

Параметром “инициализируемое выражение” задается и ини-ся переменная цикла. Это выражение вычисляется один раз вначале цикла. После этого проверяется истинность выражения “условие”. Если оно истинно, то выполняется блок операторов тела цикла, ограниченного фигурными скобками. Вычисляется “изменяющееся выражение”, содержащее переменную цикла и снова проверяется истинность выражения “условие”. Если оно истинно, то повторяется цикл вычислений, если нет, оператор завершает работу.

Пример.

for ( var I=0; I<=5; I ++)

{ document. write ( “<br>e^”,I,”=”, Math.exp(I)}

Оператор while

Оператор цикла while относится ко второй группе операторов. Его цикл выполняется пока истинно выражение, задающее условие выполнения цикла. Его синтаксис:

While (условие)

{операторы}

Цикл прекращается при значении “условие” равным false. В зависимости от условия, операторы внутри тела while могут и вовсе не выполнится.

Операторы break и continue

Если в операторах цикла for и while необходимо завершить цикл не по условию, задаваемому в заголовке цикла, а в результате вычисления некоторого условия в теле цикла, можно использовать операторы break и continue.

Оператор break завершает выполнение цикла и передает управление оператору, следующим за оператором цикла. Оператор continue прекращает выполнение текущей итерации и начинает выполнение следующей, т.е. в цикле while он передает управление на проверку выражение “ условие”, а в цикле for –на вычисление выражения “изменяемое выражение”

Пример.

var x=0

while (x<10)

{x++; if (x= =5) {continue;} alert(x)}

В данном примере, окно предупредительных сообщений не будет выведено при х=5.

Операторы new, with и var

Оператор манипулирования объектами new предназначен для создания объектов, таких как Array, String, Date и др. Например: Arr=new Array (9) –массив из девяти элементов.

При работе с объектами можно использовать оператор with, имеющий следующий синтаксис:

With (t) {S}, где

t- объект; S- последовательность операторов. Оператор with задает объект, используемый по умолчанию в последовательности операторов S. Все свойства и методы в блоке операторов S являются свойствами и методами объекта t. Применение этого оператора сокращает текст программы, т.к. избавляет от необходимости указывать иерархию объектов.

Оператор var предназначен для объявления и инициализации переменных.