ЯЗЫК JavaScript

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

Санкт-Петербург

2008


Содержит описание комплекса лабораторных работ по созданию динамических HTML-документов. Подробно рассматриваются приёмы разработки сценариев на языке JavaScript.

Предназначен для студентов факультета И, изучающих дисциплину “Автоматизация разработки веб-приложений”

©В.Н. Каминский © БГТУ, 2008


ОГЛАВЛЕНИЕ

Введение
ОСНОВЫ СОЗДАНИЯ СЦЕНАРИЕВ
Способы создания динамических HTML-документов
Объектная модель документа
Структура HTML-документа
Структура объекта document
События
   Основы JavaScript
Переменные
Операторы
Массивы
Строки
Объекты Math и Number
ЛАБОРАТОРНЫЕ РАБОТЫ
    Лабораторная работа №1 Доступ к объектам и сценариям
Доступ к свойствам и методам объектов
Размещение сценариев в HTML-документе
    Лабораторная работа №2 События
Реакция на событие в отдельном элементе
Фиксация события в родительском элементе
Предотвращение всплывания события. Свойство cancelBubble
   Лабораторная работа №3 Формы
Проверка данных перед отправкой на сервер
Получение данных из всплывающего списка
Проверка данных сразу после ввода
   Лабораторная работа №4 Изображения и рисование
Предварительная загрузка изображений
Рисование
   Лабораторная работа №5 Движение и перетаскивание
Движение
Перетаскивание
   Лабораторная работа №6 Совместимость браузеров
Свойства браузеров и объект Navigator
Способы преодоления несовместимости браузеров
   Лабораторная работа №7 Окна и таблицы
Создание нового окна
Управление таблицей
Библиографический список

Введение

Язык JavaScript отличается от других языков высокого уровня, прежде всего тем, что программы, написанные на нём, не могут выполняться самостоятельно. Они либо встроены в HTML-документ, либо расположены в отдельных файлах и присоединяются к HTML-документу при его загрузке в браузер. Исходные данные берутся из HTML-документа, а результаты выполнения программы возвращаются в него. Программы на JavaScript называют сценариями или скриптами.

Так как сценарии передаются на компьютер пользователя по сети, то от их размера зависит время загрузки сайта. Часто сценарий служит для внесения очень простых изменений в HTML-документ, например, требуется изменить цвет или размер какого-нибудь объекта на экране. Поэтому сценарии, как правило, небольшие, часто состоят из нескольких строк. Формально на их размер никаких ограничений не накладывается.

Наибольшие трудности у разработчика сценариев вызывают необходимость постоянно использовать объектную модель HTML-документа и несовместимость браузеров. Модель состоит из множества объектов, каждый из которых имеет большое количество свойств и методов. Многие свойства имеют большой набор специальных значений. Объекты реагируют на большое число событий. Например, объект div в объектной модели, применяемой в одном из наиболее распространённых браузеров, имеет 51 свойство, 38 методов и 35 событий. Запомнить все необходимые для разработки сценариев сведения об объектной модели очень трудно, поэтому необходимо использовать специализированный редактор с хорошей справочной системой. Некоторые фирмы создают редакторы для разработки сценариев, предназначенных только для одного типа браузера, причём в справочной системе об этом не сообщается. Такой подход является проявлением войны браузеров.

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

В предлагаемом лабораторном практикуме подробно на примерах рассматриваются основные приёмы программирования на языке JavaScript. Первая часть практикума – справочная. В ней излагаются сведения о языке JavaScript, достаточные для решения задач, предлагаемых в лабораторных работах, описанных во второй части практикума.

Лабораторные работы построены по следующей схеме: описывается проблема, методы её решения, рассматривается пример и предлагается задача для самостоятельного решения.

Большое внимание уделяется проблеме совместимости браузеров. Из-за слишком большой сложности разработки сценариев, предназначенных для работы на браузерах многих типов, рассматривается совместимость только браузеров Internet Explorer 6.0 и Mozilla FireFox 2.0. Все примеры, приводимые в лабораторных работах, проверены на этих браузерах. Часть примеров специально разработана только для одного браузера.

ОСНОВЫ СОЗДАНИЯ СЦЕНАРИЕВ

Способы создания динамических HTML-документов

HTML-документы (страницы), которые видит пользователь Интернета в окне браузера, могут храниться на веб-сервере в виде готовых к использованию файлов, или формироваться по запросу пользователя. Будем называть заранее подготовленные к просмотру страницы статическими. Страницы, формирующиеся «на лету» по запросу пользователя, назовём динамическими.

Типичным является формирование динамической страницы из информации, выбранной из базы данных по запросу пользователя. Например, пользователь просит показать курсы некоторых валют за определённый период времени. Результаты будут выданы в форме таблицы, количество строк и столбцов которой будет зависеть от запроса пользователя. Страница в этом случае формируется на веб-сервере специальной программой, имя которой и параметры для её работы содержатся в адресе (URL), передаваемом браузером. Веб-сервер идентифицирует программу по расширению имени файла и запускает её выполнение. Программа создаёт HTML-документ, который веб-сервер возвращает браузеру в качестве ответа на запрос пользователя.

Желание снизить нагрузку на сеть и на веб-сервер приводит к идее выполнять некоторые преобразования страницы прямо в браузере, например, перемещать рисунок в окне браузера. Для этого в HTML-документ встраивают небольшую программу (сценарий), выполняемую по мере необходимости браузером. Стандартным языком для написания сценариев является JavaScript. Фирма Microsoft разработала язык сценариев VBScript, не получивший широкого распространения.

Придание динамичности страницам сайтов обеспечивается совокупностью языков HTML и JavaScript. В HTML для расширения возможностей управления видом и расположением элементов на странице стали применяться каскадные таблицы стилей (Cascading Style Sheets или CSS). Браузер при открытии HTML-документа строит его объектную модель (Document Object Model или DOM), используемую как при отображении документа, так и при его изменении скриптом. Организация World Wide Web Consortium (W3C) разработала стандарты на CSS и DOM. Версия HTML 4, поддерживающая стандарты DOM и CSS, называется динамическим HTML (Dynamic HTML или DHTML ).

К сожалению, разработчики браузеров не строго придерживаются стандартов, вносят свои элементы в HTML и JavaScript. Скрипт, написанный для конкретной версии какого-либо браузера, может не выполняться даже на других версиях того же браузера, не говоря о браузерах других фирм. Программист, создающий сайт, должен предусмотреть, как будут работать на различных браузерах скрипты, входящие в состав сайта. Кроме того, он должен подумать, как будет выглядеть сайт на браузерах с установленным в целях безопасности запретом на выполнение скриптов.

Объектная модель документа

Объектная модель документа имеет иерархическую структуру. На вершине этой иерархии находится объект window . Он имеет следующие дочерние объекты:

В скриптах, в основном, используется объект document, так как он целиком описывает загружаемый в браузер HTML-документ. Объекты navigator, screen и history используются для справки о свойствах браузера и компьютера пользователя. Объект location удобно использовать для загрузки страниц или фреймов.

Структура HTML-документа

HTML-документ состоит из элементов (абзацев, гиперссылок, таблиц и т. д.). Элемент обычно делится на три части: начальный тег, содержимое и конечный тег. Название элемента появляется в начальном теге  (<название_элемента>) и в  конечном теге (</название_элемента >). Пример элемента:

<H1> Структура HTML-документа</H1>

Начальный тег может содержать атрибуты, определяющие свойства элемента. Для некоторых элементов допускается отсутствие конечного тега (например, для тегов P, TR, TD). Некоторые типы элементов HTML-документа не имеют содержимого. Например, обрыв строки BR не имеет содержимого, его единственная задача - обозначить конец строки текста. Такие пустые элементы никогда не имеют конечного тега.

Элементы HTML-документа могут входить друг в друга, образуя сложную иерархическую структуру.

Структура объекта document

Объект document ставится в соответствие всему HTML-документу и создаётся браузером при его загрузке. Всем элементам HTML-документа ставятся в соответствие объекты, входящие в состав объекта document, т. е. структура объекта document повторяет структуру порождающего его HTML-документа. Атрибутам элемента соответствуют свойства объекта, имеющие те же названия, что и атрибуты.

В HTML-документе может быть несколько элементов с одинаковым названием, например, контейнеров DIV . Поэтому каждый элемент имеет атрибут ID – идентификатор элемента. Объекту, соответствующему элементу, автоматически присваивается ID этого элемента. Кроме того, объекты в модели нумеруются по порядку их появления в модели. Использовать номера объектов нужно осторожно, так как при внесении иэменений в документ количество и порядок объектов могут меняться.

Для идентификации некоторых элементов (FORM, IMG) кроме атрибута ID используется атрибут NAME. Области действия ID и NAME совпадают лишь частично. Рекомендуется в случае одновременного применения обоих атрибутов присваивать им одинаковые значения.

События

Изменения в динамических страницах могут происходить либо циклически, либо в ответ на действия пользователя. Например, чтобы обратить внимание на важную информацию, можно с помощью скрипта периодически менять цвет соответствующей области экрана. Примером реакции на действия пользователя служит увеличение размера рисунка после щелчка по нему мышкой. Во всех случаях сигналом к изменениям служит какое-то событие. В динамическом HTML события включены в число атрибутов элементов. Следующие события используются большинством элементов:

Указательным устройством, как правило, служит мышка.

Рассмотрим пример простейшей динамической страницы. Допустим, что в браузере после загрузки страницы видно только одно слово Письмо. При щелчке по этому слову всплывает маленькое окошко с сообщением Это заголовок. HTML-код этой страницы:

<html> <H1 onclick= "window.alert('Это заголовок')">Письмо</h1> </html>

При загрузке этого документа браузер добавит в объектную модель объекты HEAD и BODY. Вставленный в заголовок H1 атрибут onclick вызовет при щелчке по слову Письмо метод alert, в результате выполнения которого появится окно с сообщением. Так как объект window находится в вершине объектной модели документа, то его можно не указывать. В рассматриваемом примере весь скрипт поместился внутри тега. Для размещения сложных скриптов служат специальные средства языков DHTML и JavaScript.

Основы JavaScript

Переменные

Имя (идентификатор) переменной может состоять из букв, цифр и знаков $ и _ (подчёркивание). Имя переменной не должно начинаться с цифры. В имени различаются строчные (маленькие) и прописные (большие) буквы. Например, Alfa, alfa и aLFa – разные переменные. В качестве имён переменных нельзя использовать ключевые слова языка JavaScript. Переменные могут иметь следующие типы:

В JavaScript тип переменной явно не объявляется. Создают переменную чаще всего, присваивая ей начальное значение:

x = 2; // или var a = 2

В приведённом примере две косые черты (//) указывают на комментарий. Начало и конец многострочного комментария обозначаются символами /* и */. После оператора можно ставить точку с запятой. Если в одной строке записано несколько операторов, то точка с запятой отделяет операторы друг от друга. Можно создать переменную без присвоения ей начального значения, например,

Var y;

Ключевое слово var используется для определения области видимости переменных. Переменная, созданная в функции с использованием var, видна только в этой функции и называется локальной. Во всех остальных случаях переменная является глобальной и видна во всей программе, включая функции. Пример:

<HTML>Скрипт
<SCRIPT> var x = 2 //глобальная переменная
y = 3*x //глобальная переменная
z= kvadr(y)
alert( "z="+z +" x ="+x)// z=36 x=2
function kvadr(a)
{ var x = a*a //x - локальная переменная, действующая
//только в kvadr(a)
 return x //x=36
}
</script>
</html>

Тип переменной определяется (почти так же как в языках Perl и PHP) из контекста программы. В приведённом примере использованы операторы присваивания в стиле языка С (подробнее в разделе Операторы).

1. a = 2; // целое
2. a + = 1.5 // 2 + 1.5 = 3.5 - число с плавающей запятой
3. a * ="4" //3.5*4=14
4. a + = "2" //конкатенация строковых величин "14" и "2".
//Результат "142"
5. b = 53; //целое число
6. c = " года. ";
7. d = b + c //строка "53 года. "

В строках 4 и 7 знак + использован для обозначения операции конкатенации (слияния) строковых переменных, а не сложения двух чисел. Одинаковое обозначение двух разных операций приводит к необходимости использовать функции явного преобразования переменной из строкового типа в тип числа с плавающей запятой (функция parseFloat()) или в тип целого числа (функция parseInt()). Пример использования функций parseFloat() и parseInt():

1. a ="3.7";
2. b = "6.1";
3. c = a * b // результат 3.7 * 6.1 = 22.57
4. c=a+b; // результат "3.76.1"
5. d=parseFloat(a)+parseFloat(b); // результат 3.7 + 6.1=9.8
6. e=parseInt(a)+parseInt(b); // результат 3 + 6 = 9

В строке 3 переменные a и b перемножаются и поэтому автоматически преобразуются в числа с плавающей запятой. В строке 4 выполняется операции конкатенации, так как в строках 1 и 2 переменным a и b были присвоены строковые значения. В строках 5 и 6 явно задаётся преобразование переменных a и b в числовой тип, поэтому выполняется операция сложения.

Операторы

В JavaScript, как и в большинстве языков программирования, используются традиционные математические операторы и операторы, применяемые только в программировании. Математические операторы делятся на три группы: арифметические, операторы сравнения и логические. Среди арифметических операторов (табл. 1) в JavaScript отсутствует возведение в степень.
Таблица 1. Арифметические операторы
Название Обозначение Пример
Сложение + a + b
Вычитание - a - b
Умножение * a * b
Деление ./ a / b
Деление по модулю % a % b
Увеличение на 1 (инкремент)++ a++
Уменьшение на 1 (декремент) --a--

Возведение числа A в степень N выполняется так:

x = Math.pow(A,N),
где pow(A,N) – метод объекта Math.

Операторы сравнения (табл. 2) применяются к числовым, строковым и логическим выражениям.

Таблица 2. Операторы сравнения
Название Обозначение Пример
Равно == a == b
Не равно != a != b
Больше > a > b
Меньше< a < b
Больше или равно >= a >= b
Меньше или равно <= a <= b

В JavaScript используются три логических оператора: И, ИЛИ и НЕ, имеющие обозначения &&, || и ! соответственно. Результат логической операции может иметь одно из двух значений: true (истина) и false (ложь). Логической величине true соответствует число 1, а false – 0. Примеры логических операций:

a = 2; b = 3; st = "a"; // исх. данные для лог.выражений
a > b || st == "a" // истина
a > b || st > "a" // ложь
a > b && st == "a" // ложь
a < b &&
st == "a" // истина
!(a < b) // ложь

Операторы, применяемые только в программировании, также можно разделить на три группы: присваивания, условного перехода и циклические.

Примеры операторов присваивания:

a = 5 //записать число 5 в область памяти,
//отведённую под переменную a
a + = 2 //вместо оператора a = a + 5
a - =2;
a * = 2;
a / = 2;
a % = 2

Результаты действия инкремента и декремента зависят от того, как они расположены относительно операнда:

a = b++; // сначала a присваивается значение b, затем b увеличивается на 1
a = ++b; //сначала b увеличивается на 1, затем a присваивается значение b

Примеры операторов условного перехода if и switch:

Var a=3
If (a > 2) alert("a больше двух");
a = 1;
b = -3;
c = 2;
det = Math.pow(b,2) - 4*a*c
if (det < 0)
{ alert("действительных корней нет")
  r = 0
}
else if (det == 0)
{ alert("корни одинаковые")
  r=1
}
else
{ alert("два корня")
  r=2
}

switch (a)
{ case 0:
    alert("ноль")
    break
case 1:
    alert(1)
    break
case 2:
    alert("два")
    break
default:
    alert("не подходит");
}

Если в операторе switch убрать ключевое слово break, то будут выполнены все операторы после первого совпадения.

Вместо условного оператора if может использоваться следующая конструкция:

переменная = (условие)? значение 1 : значение 2

Например, в результате выполнения оператора

x = (4 > 2) ? "правильно" : "ошибка"

переменная х примет значение правильно.

Примеры применения операторов цикла  for, while и do while

// Оператор for. Сложение всех нечётных чисел от 1 до 10
S = 0;
for(i= 1; i <= 10; i++) {S += i}
S = 0 //сложение чисел 5 ,10,...,25
for(i = 5; i<= 25; i+=5) {S += i}
// Оператор while. Сложение всех нечётных чисел от 1 до 10
S = 0; i = 0;
while(i < 10) {S += ++i}
// Оператор do ... while.
//Сложение всех нечётных чисел от 1 до 10
S = 0; i = 0;
do
{ S += ++i}
while(i < 10)

Массивы

Массивы в JavaScript одновременно рассматриваются и как объекты и как массивы в традиционном понимании. Способы создания массивов показаны в следующих примерах:

var a = new Array(5) //создан массив из пяти элементов
var b = new Array(2,7,12) // создан массив b из трёх
//элементов и его элементам присвоены значения

Нумерация элементов массива начинается с нуля. Для обращения к элементу массива используются квадратные скобки, например

x = b[1] // x равен 7

Длина массива определяется как его свойство:

c = a.length // длина массива a c= 5

Элементы одного массива могут иметь разный тип. В следующем примере массив состоит из строковых и числовых элементов.

earth = new Array(4)
earth[0]= "Планета" // строка
earth[1]= "24 часа" // строка
earth[2]= 6378 // целое число
earth[3]= 365.25 // число с плавающей запятой

Информацию о планете Земля удобно хранить в ассоциативном массиве.

earthA = new Array(4)
earthA.type_= "Планета"
earthA.day_= "24 часа"
earthA.radius= 6378
earthA.period = 365.25

Слова type и day – ключевые в JavaScript. Поэтому к идентификаторам переменных type_ и day_ добавлен знак подчёркивания. Для извлечения из обоих массивов радиуса Земли служат операторы:

R=earth[2]
R= earthA.radius

Элементами массива могут служить массивы:

product = new Array()
product[0] = new Array("Пшеница",250)
product[1] = new Array("Рожь",300)
product[2] = new Array("Ячмень",200)

Массив product – двумерный. Элемент product[0][1] имеет значение 250. Длина двумерного массива определяется свойством length:

L = product.length // L = 3
m = product[0].length // m = 2

Элементами массива product являются три массива, каждый из которых состоит из двух элементов.

Строки

Строка в JavaScript является одновременно и объектом string и переменной, поэтому может быть создана двумя способами:

st1 =new String("Строка – это объект")
st2 = "Строка – это переменная"

Строки, рассматривая их как переменные, можно объединять с помощью операции конкатенации. Рассмотрим пример, в котором новая строка получается в результате объединения двух строковых переменных, строковой константы и числовой переменной:

st1 = "Санкт-Петербург основан" n = 1703
st2 =" году"
st3= st1 + " в " + n +st2

В строке st3 будет предложение Санкт-Петербург основан в 1703 году. Тип переменной n изменён автоматически. Наиболее часто над строкой совершаются следующие действия:

Для поиска подстроки используется метод indexOf(), имеющий следующий синтаксис:

строка.indexOf(подстрока [,начало]) ,
//где начало – номер символа в строке, с которого нужно начинать поиск.

Результат применения метода indexOf() – номер символа, с которого начинается искомая подстрока. Нумерация символов начинается с нуля. Найдём в строке st3 номер символа, с которого начинается подстрока Петербург:

n = st3.indexOf("Петербург") // результат – 6

Для выделения нескольких символов используется метод substr(), имеющий следующий синтаксис:

строка.substr(начало [,длина]) ,
где: начало – номер символа, с которого начинается подстрока,
   длина – длина искомой подстроки

Результат применения метода – найденная подстрока. Выделим в st3 слово Петербург:

gorod = st3.substr(6,9)

Для замены подстроки используется метод replace(), имеющий следующий синтаксис:

строка.replace(регулярное выражение, заменяющая подстрока)

В качестве регулярного выражения в простейшем случае можно применить заменяемую подстроку. Заменим в строке st3 подстроку 1703 году на подстроку XVIII веке:

osnovanie=st3.replace(/1703 году/," XVIII веке")

Строка st3 примет значение Санкт-Петербург основан в XVIII веке.

Объекты Math и Number

Свойствами объекта Math служат математические константы, а методами - математические функции. Примеры использования объекта Math:

r = 5
//Радиус как объект: r = new Number(5)
L = 2 * Math.PI * r //Длины окружности L=31.41592653589793
Lc =Math.ceil(L) // Lc=32. Округление до ближайшего
// большего или равного целого
Ld = Math.floor(L) // Ld=31.Округление до ближайшего
// меньшего или равного целого
Lok =Math.round(L)//Lok=31. Округление до ближайшего целого
S= Math.PI * Math.pow(r,2) //Площадь круга

Все переменные в примере являются объектами Number. Общий вид выражения для создания объекта Number:

переменная = new Number(число)

Создание конкретного объекта:

z = new Number(43.567)

Часто используемые свойства объекта Number:

L = new Number(31.41592653589793)
//L.toFixed(n) - n знаков после запятой
L_3 = L.toFixed(3) // L_3=31.416
//L.toPrecision(n) - n значащих цифр
L4 = L.toPrecision(4) //L4=31.42

ЛАБОРАТОРНЫЕ РАБОТЫ

Лабораторная работа №1
Доступ к объектам и сценариям

Доступ к свойствам и методам объектов

Цель работы - научиться использовать различные способы доступа к свойствам и методам объектов для внесения изменений в HTML-документ.

Все изменения в HTML-документе производятся через свойства, методы и события объектов, входящих в состав объектной модели документа. Рассмотрим сценарий (пример 1.1), в котором используются типичные способы доступа к свойствам и методам объектов.

Пример 1.1.

<HTML ID='DOCUM'>
<CENTER><H1 ID='zag'> ВАСЬКА</h1>
Вариант, совместимый с Mozilla<P>
<FORM NAME='f1'>
<INPUT TYPE=BUTTON name="bot" onclick=bm() value='Увеличить'>
</FORM >
<P><IMG SRC="VaskaM.jpg" ID='Vas' onclick=bm()>
</center>
<!--В скрипте закомментирован вывод окна со списком объектов -->
<SCRIPT>
/*
 var msg=''
 for(i=0; i<document.all.length;i++)
 msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n'
 alert(msg)
*/
flag=true
function bm()
{ if(flag)
{ document.images[0].src='VaskaB.jpg' flag=false;
  document.forms[0].bot.value="Уменьшить"
  document.forms[0].bot.style.background='red'
  document.all.bot.style.color='black';
}
else
{ document.getElementById("Vas").src='VaskaM.jpg';
  //обращение к кнопке по индексу
  document.forms[0].bot.value="Увеличить"
  document.forms[0].bot.style.background='green'
  document.all.bot.style.color='white'; flag= true
}
}
</script>
</HTML>

Выполнить пример 1.1

В примере 1.1 сценарий используется для замены фотографии и изменения цвета кнопки и надписи на ней. Друг друга меняют маленькая и большая фотографии кота Васьки.

Замена фотографии и изменение вида кнопки в примере происходят при щелчке мышкой по кнопке или по самой фотографии. В тегах <INPUT> и <IMG> помещён атрибут onclick=bm(), при помощи которого в ответ на щелчок мышкой вызывается функция bm(). Такой атрибут называют обработчиком событий. Имя файла с фотографией является свойством SRC объекта IMG. Замена фотографии делается в сценарии двумя равнозначными способами:

document.images[0].src='VaskaB.jpg'
document.getElementById("Vas").src='VaskaM.jpg'

В первом варианте доступ к фотографии происходит через коллекцию images, в которой все расположенные на странице фотографии (в примере одна фотография) пронумерованы. Нумерация начинается с нуля. Во втором варианте используется метод getElementById() объекта document. Параметром в методе getElementById() служит ID (идентификатор) объекта IMG. Весь оператор читается так: "свойству src объекта, имеющего ID=Vas и входящего в состав объекта document, присвоить значение VaskaM.jpg ". Сам объект document является дочерним по отношению к объекту window. Поэтому полное обращение к свойству src следовало бы писать так:

window.document.images[0].src='VaskaB.jpg'
window.document.getElementById("Vas").src='VaskaM.jpg'

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

Более сложная иерархия объектов наблюдается при обращении к свойствам кнопки:

document.forms[0].bot.value="Уменьшить"
document.forms.f1.bot.style.background='red'

Первый оператор служит для изменения надписи на кнопке. Доступ к кнопке происходит по её имени (name='bot'). Доступ к форме осуществляется через коллекцию forms и номер формы в коллекции.

С помощью второго оператора меняется цвет кнопки. Доступ к форме осуществляется через коллекцию forms и имя формы f1. Своеобразие доступа к свойствам, задаваемым стилем, состоит в том, что style выступает формально как дочерний объект. В рассматриваемом примере родительским по отношению к style является объект с именем bot, то есть, кнопка.

Для обращения к объектам удобна коллекция all объекта document. В коллекцию all входят все объекты HTML-документа, поэтому выбирать объект нужно по его ID или имени. Коллекция all использована для изменения цвета надписи на кнопке:

document.all.bot.style.color='black'

Все описанные способы доступа к объектам HTML-документа базируются на объектной модели документа (DOM). Наиболее трудной задачей, стоящей перед разработчиком сценариев, является разработка сайтов, которые будут одинаково выполняться на всех браузерах. Рассматриваемый пример HTML-документа подобран так, что он (почти) одинаково выполняется на браузерах Internet Explorer 6.0 и Mozilla Firefox 2.0, несмотря на то, что объектные модели в этих браузерах отличаются друг от друга. Для того, чтобы убедиться в этом уберите символы комментариев /* и */ из первой и пятой строчек скрипта и откройте страницу в обоих браузерах. Появится окно со списком всех объектов, созданных браузером для открытого документа. В созданной браузером Internet Explorer модели – 12 объектов, а у Mozilla Firefox – 10.

Рассмотрим подробнее раскомментированный фрагмент скрипта.

var msg=''
for(i=0; i<document.all.length;i++)
msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n'
alert(msg)

Коллекция all всех объектов HTML-документа имеет свойство length, равное количеству всех объектов модели документа. Любой объект имеет свойство tagName, значение которого совпадает с именем объекта. В приведённом фрагменте скрипта в цикле формируется строковая переменная msg, состоящая из номеров, имён и ID объектов. Сочетание символов \n служит для перевода строки.

Метод getElementById() - входит в стандарт W3C и поддерживается всеми браузерами. Коллекция all разработана фирмой Microsoft для браузера Internet Explorer. В настоящее время эта коллекция поддерживается почти всеми брауэерами. Как ни странно, в новом браузере Edge, встроенном в ОС Windows 10, коллекция all не поддерживается.

Задача 1.1. Напишите HTML-документ, который в окне браузера отображается в виде следующих трёх строк:

Первую строку поместите в контейнер <H2>...</h2>, вторую – в контейнер <P> …</p>, третью – в контейнер <DIV> … </div>. Напишите скрипт для изменения цветов фона и букв надписей, при щелчке по этим строкам. При щелчке по первой строке цвет букв должен меняться с чёрного на белый или с белого на чёрный, а фон – с жёлтого на синий или с синего на жёлтый. Так же должны меняться цвета третьей строки.

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

Для изменения первой и третьей строк примените метод getElementById(), а для второй строки – коллекцию all.

Размещение сценариев в HTML-документе

Сценарий в HTML-документе можно размещать тремя способами:

Контейнеры со сценариями могут размещаться в любом месте HTML-документа. Количество сценариев в одном HTML-документе не ограничено.

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

Сценарий можно хранить в отдельном файле. Для вставки сценария в HTML-документ служит атрибут SRC тега <SCRIPT>. Сценарий, размещённый в отдельном файле, можно использовать на многих страницах сайта. В примере 1.2 рассматривается одна из страниц сайта сети магазинов.

Пример 1.2

html><!-- СКРИПТ загружается из файла primJs.js--> <HEAD>
<TITLE>Сеть</title>
</head>
<body>
<SCRIPT language="JavaScript" src="PrimJs.js">
</script>
<H2 align=center style="color:green">Магазин "ПОДАРКИ"</h2>
Адрес: Лесная ул., д.2<P>
Транспорт: трамваи 7, 23, автобусы 56, 93
</body>
</html>
// Файл primJs.js
a="background-color:#00ffff; color:#ff00ff;"
a+="font-size:24pt; font-family:'Times New Roman'"
naim='Сеть магазинов "ВСЁ ДЛЯ ДОМА"'
var da=new Date()
d=da.getDate()+"."+(da.getMonth()+1)+"."+da.getFullYear()
document.write('<P align=center style= "'+a+'">'+
naim+'</p><P>Сегодня '+d+'</p>')

Выполнить пример 1.2

Общие для страниц всех магазинов сети заголовок с названием сети и сегодняшняя дата формируются скриптом, размещённым в отдельном файле primJs.js . Метод write(HTML-код) служит для вставки в страницу размеченного текста (HTML-кода). Этот метод применяется только при загрузке страницы, так как его применение после окончания загрузки приведёт к стиранию старого содержимого страницы.

Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.

Лабораторная работа №2
События

Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.

Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.

Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.

Реакция на событие в отдельном элементе

Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.

Пример 2.1.

<HTML>
<BODY>
<P align=right ID='alfa'
onMouseOver="document.all.alfa.align='center'
"onMouseOut="this.align='left'">
События onMouseOver и onMouseOut </p>
</body>
</html>

Выполнить пример 2.1

Страница в примере 2.1 состоит из одной строки, заключённой в контейнер <P> …</p>. В объектной модели страницы событие, происходящее с объектом P, происходит также и с родительским объектом BODY. Чтобы локализовать реакцию на событие только пределами строки, то есть объекта P, сценарий реакции на события помещен в тег <P >.

В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0 . Ключевое слово this означает ссылку на текущий объект.

Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.

Пример 2.2

<HTML>
<P align=right ID='alfa' onMouseOver="M_Over()"
onMouseOut="M_Out()">
Событие onMouseOver</p>
<SCRIPT>
function M_Over()
{ document.all.alfa.align='center'
  document.all.alfa.style.color='FF00FF'
}
function M_Out()
{ document.all.alfa.align='left'
  document.all.alfa.style.color='0000FF'
}
</script>
</html>

Выполнить пример 2.2

Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:

Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:

Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.

Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.

При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.

Фиксация события в родительском элементе

Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция.

Пример 2.3

<HTML><HEAD><TITLE>Реакция на событие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:FF00FF}
	  #k1{position:absolute; left:50;top:200;width:300; height:100;background-color:blue}
   #k2{position:relative; left:50;top:25; width:200; height:50;background-color:yellow}
</STYLE>
</HEAD>
<BODY ID="B" onclick="rodEl(event)">
 <H1 ID="HH" >ЦВЕТ  </H1>
 <DIV ID="k1" >
  <DIV ID="k2" ></div>
 </div>
<SCRIPT>
/*	Функция запускается при щелчке мышкой по любой точке документа */
flag=0;
function rodEl(evt) 
{  var e = evt || window.event;  //e -это объект event
   var elem = e.target || e.srcElement; //elem - элемент (объект), 
                                  // на котором произошло событие
   id1=elem.id
   z1=document.getElementById(id1)
 switch(id1)
 { case "k1": //Изменение цвета внешнего прямоугольника
      z=z1.style.backgroundColor 
      if(z!="red")z="red"
      else z="green"
      z1.style.backgroundColor=z
      break
   case "k2": 	//Изменение цвета внутреннего прямоугольника
      z=z1.style.backgroundColor 
      if(z!='rgb(0, 255, 255)'){z='rgb(0, 255, 255)'}
      else{z='rgb(0, 255, 0)'}
      z1.style.backgroundColor=z
      break
   case "B": //Изменение цвета заднего плана документа
      z=z1.style.backgroundColor 
      if(z!='rgb(190, 190, 190)'){z='rgb(190, 190, 190)'}
      else {z='rgb(0, 190, 190)'}
      z1.style.backgroundColor=z
      break
   case "HH": //Изменение цвета слова "Цвет"
      if(flag==0)
      {  document.getElementById(id1).style.color='rgb(170,0,170)';
         flag=1;
      }
      else 
      {   document.getElementById(id1).style.color='rgb(0,255,170)';
          flag=0;
      }
 }
}

</SCRIPT>
</BODY>
</HTML>

Выполнить пример 2.3

В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.

В момент наступления события вся информация о нём запоминается в объекте event. Этот объект по разному описывается в стандарте W3C и в браузере Internet Explorer. Новые версии Internet Explorer поддерживают и стандарт W3C.

В стандарте W3C объект event передаётся в функцию в качестве параметра, а для обращения к объекту, на котором произошло событие, служит свойство event.target.

В Internet Explorer объект window.event - глобальный и поэтому передавать его в функцию в виде параметра не нужно. Для обращения к объекту, на котором произошло событие, в Internet Explorer служит свойство window.event.srcElement

В примере 2.3 первые две строчки тела функции rodEl()служат для кроссплатформенного (в любом браузере) обращения к объекту, на котором произошло событие. Другой способ кроссплатформенного использования объекта event описывается в примере 6.2 лабораторной работы 6 (функция brows(evt) )

В в следующих строках функции rodEl() сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента.

Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.

Предотвращение всплывания события. Свойство cancelBubble

В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция:

Пример 2.4

<HTML><HEAD><TITLE>Реакция на событие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:#ff00ff}
	  #k1{position:absolute; left:50;top:200;
      width:300; height:100;background-color:blue}
	  #k2{position:relative; left:50;top:25;
       width:200; height:50;background-color:yellow}
</STYLE></HEAD>
<BODY ID="B" bgcolor="AAAAAA" onclick="rodEl()" style="height:600px">
	<H1 ID="HH" onclick="H_l()">ЦВЕТ</H1>
	<DIV ID="k1" onclick="D_l()">
		<DIV ID="k2" style="background-color:yellow" onclick="D_2(this)"></div>
	</div>
</BODY>
<SCRIPT>
/*	Функция запускается при щелчке мышкой по 
	любой точке документа */
function rodEl() 
{  //Изменение цвета заднего плана документа
var  z=document.all.B.bgColor 
	if(z!="#777777"){z="#777777"}
	else{z="AAAAAA"}
    document.all.B.bgColor =z
}
function D_l() 
 { 	//Изменение цвета внешнего прямоугольника

  var  z=document.all.k1.style.backgroundColor 
	if(z!="red") z="red"
	else z="green"
	document.all.k1.style.backgroundColor=z
}
/*function D_2() 
{	//Изменение цвета внутреннего прямоугольника
    var z=document.all.k2.style.backgroundColor 
 	if(z=="#ff00ff" || z=='rgb(255, 0, 255)'){z="#00ffff"}
	else{z="ff00ff"}
	document.all.k2.style.backgroundColor=z
}*/
function D_2(thi) 
{	//Изменение цвета внутреннего прямоугольника
    var z=thi.style.backgroundColor 
 	if(z=="#ff00ff" || z=='rgb(255, 0, 255)'){z="#00ffff"}
	else{z="ff00ff"}
	thi.style.backgroundColor=z
}
function H_l() 
{	//Изменение цвета слова "Цвет"
    var z=document.all.HH.style.color
    //alert("1. z="+document.all.HH.style.color)
    if(z=="#aa00aa" || z=='rgb(170, 0, 170)')
	{	z="#00ffff"
	//alert("2. z="+z)
	}
	else{z="#aa00aa"}
	document.all.HH.style.color=z
}																
</SCRIPT></HTML>

Выполнить пример 2.4

Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.

Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор

window.event.cancelBubble=true

Лабораторная работа №3
Формы

Цель работы: научиться управлять формой через сценарий.

Форма служит для ввода пользователем через окно браузера данных и передачи их на веб-сервер. Форма состоит из контейнера <FORM> …</form> и заключённых в него тегов (элементов) <INPUT>, <SELECT> и <TEXTAREA>.

Проверка данных перед отправкой на сервер

Для уменьшения нагрузки на сеть и веб-сервер можно проверять введённые пользователем данные на браузере с помощью сценария на JavaScript. Если в данных обнаружится ошибка, то пользователю предоставляется возможность её исправить. Введенные правильно данные отправляются на веб-сервер. Использование сценария для управления формой демонстрируется в примере 3.1.

Пример 3.1

<HTML>
<HEAD><TITLE>Первая страница</title></head>
<H2>Представьтесь, пожалуйста</h2>
<FORM name=F1 METHOD="POST" ACTION="">
Имя....
<INPUT TYPE="text" NAME="name"><BR>
Возраст <INPUT TYPE="text" NAME="age">
<P> <INPUT TYPE="submit" VALUE="ВВОД" onclick="Proverka()">
</FORM>
<SCRIPT>
function Proverka()
{ im=document.F1.name.value
vozr=document.forms[0].elements[1].value st=""
if(im == "") st="имя\n"
if(vozr == "") st+="возраст"
if(st == "") document.F1.action="Prim3_1.php"
else //отмена передачи на веб-сервер
{   str="Введите:\n "+st
    alert(str)
    return=false
}
}
</script>
</html>

<HTML>
<HEAD><TITLE>Вторая страница</title></head>
<BODY>
<H3>П Р И В Е Т С Т В И Е</h3>
<?php
$imja=$_POST["name"]; //приём параметров из формы
$age=$_POST["age"]; $x="Здравствуйте!
$imja.";
if($age>50) echo "$x Вы включены в старшую группу.";
elseif($age>30)echo "$x Вы включеныв группу среднего возраста.";
else echo"$x Вы относитесь к молодёжной группе.";
?>
<P>
<A href="Prim3_1.html">Возврат </a>
</body>
</html>

Выполнить пример 3.1 Пример выполняется через веб-сервер по протоколу HTTP. Адрес (URL) примера на веб-сервере кафедры И5: http://kafi5.loc/kam.loc/LabJS/prim3_1.html

Пример 3.1 состоит из двух страниц.Первая страница служит для ввода пользователем данных и их проверки с помощью скрипта, написанного на JavaScript. Если данные введены правильно, то они отправляются на веб-сервер. На веб-сервере полученные данные обрабатываются скриптом, написанным на языке PHP, формируется и пересылается на браузер пользователя новая страница.

В скрипте,написанном на JavaScript, для доступа к данным, находящимся в форме, используются имена и индексы элементов формы. Для задания адреса (URL) страницы, содержащей PHP-скрипт, используется свойство action объекта Form.

Получение данных из всплывающего списка

Иногда можно полностью решать задачу ведения диалога с пользователем средствами JavaScript, не обращаясь к веб-серверу. В примере 3.2 пользователь вводит код цвета в модели RGB и выбирает из списка название цвета. После нажатия кнопки Ввод на экран выводятся окрашенные в выбранные цвета код и название цвета.

Пример 3.2

<html>
<HEAD><TITLE>СКИПТ SELECT </title> </head>
<body>
<!--Пример выбора и выводана экранэлемента списка Select -->
<SCRIPT>
function select_()
{ a=document.all.Kod.value //код цвета
b= document.all.Gor.selectedIndex
//номервыбранного элемента// спискаselect
c = document.all.Gor.options[b].text//текст элементасписка
d = document.all.Gor.options[b].value//передаваемое из формы
//значение<option value= red>
e="<FONT size= 7 color="+a+">"+a+"</font>"//трансляция и
document.all.alfa.innerHTML= e// вывод на экран HTML-строки
e= "<FONT size = 7 color= "+d+">"+c+"</font>"
document.all.beta.innerHTML= e
}
</script>
<H2>Подбор оттенков цвета</h2>
В первое поле нужно ввести шестнадцатеричный код цвета.<BR>
Например,красный цвет имеет код FF0000.
<BR>Из списка во втором поле выбирается для сравнения
<BR> один из основных цветов(красный, зелёный,синий)
<P>Введитекод цвета
<input TYPE= "text"name="Kod"> <P>Выберитецвет 
<SELECT NAME= "Gor">
<option value="red">Красный </option>
<option value="yellow">Жёлтый </option>
<option value="maroon">каштановый</option>
<option value=green">Зеленый</option>
<option value="blue">Cиний
</select>
<P> <BUTTON onclick="select_()">Выполнить </button>
<P><B ID="alfa"></b>
<br> <B ID = "beta"></b>
</body>
</html>

Выполнить пример 3.2

В примере 3.2 нет необходимости использовать контейнер <FORM> …</form>, так как на веб-сервер ничего не передаётся. Для вывода на экран кода и названия цвета используется свойство innerHTML. Строго говоря, innerHTML следовало бы называть не свойством, а методом. Рассмотрим применение этого свойства на примере вывода на экран введённого пользователем кода цвета. Пусть пользователь ввёл код цвета a=FF0000, т.е. красный.

В результате выполнения оператора

e="<FONT size= 7 color="+a+">"+a+"</font>"

сформируется стока

e="<FONT size=7 color=FF0000>FF0000</font>"

В результате выполнения оператора

document.all.alfa.innerHTML= e

в элемент <B ID="alfa"></b> вставится значение переменной e:

<B ID="alfa"><FONT size=7 color=FF0000>FF0000</font></b>

и браузер выполнит преобразованный злемент (оператор языка HTML), т.е. выведет на экран

FF0000

Таким образом, с помощью свойства innerHTML можно на стороне браузера программным путём вносить изменения в HTML-документ (страницу сайта).

Задача 3.1. Создайте сайт из двух страниц. Первая страница имеет заголовок Заказ мебели. На ней расположены два поля со списками (теги <SELECT>), поле (<INPUT>) и кнопка (<SUBMIT>). Из первого поля со списком пользователь выбирает изделие (шкаф, стол, сервант и т.д.).Из второго поля со спискомпользователь выбирает материал (дуб,орех, бук). В третье поле нужно ввести количество заказываемых изделий. После ввода данных необходимо проверить, все ли данные введены.Если обнаружена ошибка, то нужно вывести сообщение и предложить её исправить. Правильно введённые данные нужно отправить на веб-сервер.Вторая страница содержит написанный на PHPскрипт, с помощью которого формируется следующее сообщение:

Ваш заказ принят
Заказано изделие название заказанного изделия
Материал заказанный материал
Количество заказанное количество

Указания к задаче 3.1

Проверка данных сразу после ввода

Если в форме нужно заполнить много полей, то пользователю удобно получать сообщения об ошибках сразу после окончания ввода данных в очередное поле, то есть после нажатия клавиши Tab или клавиши со стрелкой. Для немедленной проверки введённых данных служит событие onchange:

<INPUT TYPE ="text"SIZE=6 onchange="arg(this)">

Функция, вызываемая событием onchange, имеет примерно такую структуру:

function arg(fld)
{ x=fld.value //введённое значение
  if(x. . .) //условия проверки
  { alert("Сообщение об ошибке");
    fld.focus();
    fld.select()
  }
}

Методы focus() и select() служат для возвращения курсора мышки в поле ввода и выделения ошибочных данных. Эти методы без использования специальных приёмов правильно работают только в браузере Mozilla.

Рис. 1

Задача 3.2. Создайте страницу (рис. 1) для вычисления тригонометрических функций. Вводимые пользователем данные должны проверяться немедленно после ввода и после нажатия кнопки Вычислить.

Указания. Не забудьте перевести градусы в радианы. Название тригонометрической функции можно передавать как параметр тега :

<option value="sin". . . >

Сформируйте текстовую строку вида

"Math." + имя_ф + "(" + знач_аргумета + ")" // имя_ф – sin,cos или tan

Затем воспользуйтесь функцией eval(строка), которая выполняет выражение, хранящееся в строке.

Лабораторная работа №4
Изображения и рисование

Цель работы: исследовать методы динамического размещения изображений на странице и научиться создавать рисунки с помощь сценария.

Предварительная загрузка изображений

Изображения, размещаемые на сайтах, должны удовлетворять двум противоречащим друг другу требованиям. Они должны иметь высокое качество и быстро загружаться, но чем выше качество изображения, тем больше занимаемый изображением объём памяти и тем медленнее оно загружается. Задача построения изображения, имеющего приемлемые объём и качество, решается с помощь графических пакетов прикладных программ, например, Photoshop с подключённым к нему пакетом ImageReady.

Средствами JavaScript можно сначала загрузить несколько изображений в кэш, а затем выводить их по одному на экран по команде пользователя. Такой приём основан на психологии пользователя Интернета. Опытным путём доказано, что человек не замечает паузы между моментами посылки запроса и получением ответа, если эта пауза не больше четырёх секунд. Пользователь привык ждать несколько десятков секунд, пока загрузится выбранная им страница, а при работе с уже загруженной страницей болезненно реагирует на возникающие паузы.

Для загрузки изображения в память без отображения его на экране служит объект Image, которому не соответствует ни один элемент HTML-документа. Создаётся и используется объект Image так:

var risunok = new Image(ширина, высота) //создание объекта
risunok.src = "pict.jpg" //загрузка pict.jpg в память
document.images[0].src = risunok.src //отображение на экране

Задача 4.1. Создайте страницу (рис. 2), на которой пользователь может просматривать фотографии, выбирая их названия из поля со списком (тег <SELECT>).

Рис. 2

Указания. Используйте ассоциативный массив, элементами которого будут объекты Image, то есть фотографии, а ключами – значения атрибута VALUE тега <SELECT>. Создание массива и одного элемента делается так:

var photo= new Array()
photo["les"] = new Image(400,550);//элемент массива - объект
photo["les"].src = "les.jpg";//свойство объекта - имя файла с рисунком

Вызов функции, служащей для появления в окне браузера выбранной фотография, производится при щелчке мышкой по элементу списка.Это событие называется onchange. В качестве параметра функции передаётся объект SELECT:

<SELECT onchange= "prosm(this)">
<option value="les">Лес

Функция, правильно воспринимаемая браузерами Internet Explorer и Mozilla, состоит из трёх строк:

function prosm(list)
{d = list.options[list.selectedIndex].value //d ="les"
document.fot.src = photo[d].src; //fot – имя тега IMG }

Файлы с фотографиями предоставит преподаватель.

Рисование

В JavaScript изображение можно построить тремя способами:

  1. по принципу мозаики, используя в качестве элемента маленькую картинку или окрашенный элемент <div> (минимальный размер элемента мозаики - один пиксель);
  2. средствами языка SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика);
  3. с помощью элемента canvas языка HTML5.

Кроме того, отрезок вертикальной прямой можно изобразить с помощью тега <DIV>, задав ширину и высоту контейнера равными толщине и длине линии соответственно. Горизонтальный отрезок строится с помощью тега <DIV> и вложенного в него тега <HR>.

Примеры рисования всеми тремя способами можно посмотреть здесь

Идея рисования первым способом кривой, описанной аналитически, состоит в следующем:

Вместо картинки можно использовать элемент <DIV>.

В примере 4.1 описанными методами строятся четыре прямых.

Пример 4.1

<HTML>
<HEAD>
<TITLE>Прямые линии</TITLE>
<script>
line(100,100,400,400,3)
line(100,400,400,100,10)
function line(x1,y1,x2,y2,n)
{  var xstr=""
   var xstr0=
   '<IMG SRC="Tochka.bmp" WIDTH='+n+' HEIGHT='+n+
   ' STYLE="position:absolute;'
   var k=(y2-y1)/(x2-x1)
   x=x1
   while (x<=x2)
   {  xstr+=xstr0+'top:'+(k*(x-x1)+y1)+';left:'+x+'">';
      x++
   } 
   document.write(xstr)
}
</script> 
</HEAD>
<BODY>
</div>
<div  style="font-size:20pt;padding-left:50">
<B>Рисование прямых линий</b></div>
<DIV id="dd" STYLE="position:absolute;top:250;left:100;
width:300;height:1;"><hr noshade></div>
<div ID="kv" STYLE="position:absolute;top:100;left:250;
width:1;HEIGHT:300;background-color:#ff0099"></div>
</BODY></HTML>

Выполнить пример 4.1

Все прямые пересекаются в одной точке (рис. 3). Горизонтальная и вертикальная прямые построены без использования скрипта. Наклонных прямые построены с помощью функции line(x1,y1,x2,y2,n), где x1, y1 – координаты начала отрезка прямой, x2, y2 – координаты конца, n – толщина линии.

Рис. 3

Задача 4.2. Создайте страницу (рис. 4) , на которой строится эллипс с задаваемыми пользователем размерами большой и малой полуосей. Эллипс нужно построить всеми тремя указанными выше способами.

Указания. Для построения эллипса первым способом удобно использовать его параметрические уравнения:

x = a* cos(t); y = b*sin(t),
где: a, b – полуоси, 0 <= t <= 2π

Рис. 4

Лабораторная работа №5
Движение и перетаскивание

Цель работы: изучить методы создания сценариев для автоматического движения объектов по заданной траектории и для перетаскивания объектов мышкой.

Движение

Для управления движением объекта используются:

Методом setInterval(выражение, период) запускается процесс, состоящий в циклическом выполнении заданного в первом параметре выражения с периодом, заданным во втором параметре. Процесс останавливается методом clearInterval(имя процесса). В качестве выражения обычно используется функция. Скрипт, задающий движение фотографии по диагонали экрана, приведён в примере 5.1.

Пример 5.1

<HTML>
<HEAD><TITLE>Движение фотографии</TITLE>
</HEAD>
<BODY >
<BUTTON ID="B1" onclick=Start_stop()
STYLE="position:absolute; left:300;top:5">
Запустить</button>
<IMG ID="lv" src="LV.jpg"
STYLE="position:absolute;top:0;left:20">
</BODY>
<SCRIPT>
dx=8;
dy=3
st=false //остановить процесс
function Start_stop()
{ if(st)
  { window.clearInterval(proc) //остановиться
    st=false //заменить надпись на кнопке с именем В1
    document.all.B1.innerHTML="Запустить"
  }
  else //двигаться (запустить процесс с именем proc)
  { proc=window.setInterval("move()",100)
st=true
//заменить надпись на кнопке с именем В1
document.all.B1.innerHTML="Стоп"
  }
}
function move()
{ //ордината верхнего края фотографии (переведено
//в тип INTEGER)
var y=parseInt(document.all.lv.style.top)
//абсцисса левого края фотографии
var x=parseInt(document.all.lv.style.left)
document.all.lv.style.top=y+dy //Перемещение по OY
document.all.lv.style.left=x+dx //Перемещение по OX
}
</script>
</HTML>

Выполнить пример 5.1

В исходном состоянии фотография находится в верхнем левом углу экрана. Для запуска и остановки движения служит кнопка. Надпись на кнопке меняется. Если фотография неподвижна,то на кнопке написано Запустить, при движении –Стоп.

В браузере Internet Explorer надпись на кнопке можно изменить с помощью свойства innerText:

document.all.B1.innerText="Запустить"
document.all.B1.innerText= "Стоп"

Браузер Mozilla Firefox не поддерживает свойство innerText, поэтому в примере использовано свойство innerHTML, поддерживаемое обоими браузерами. При нажатии кнопки выполняется функция Start_stop, служащая для запуска или остановки процесса proc. Если proc запущен, то через каждые 100 мсек вызывается функция move, перемещающая фотографию на 8 пикселей вправо и на 3 вниз.

Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать параметрическими уравнениями:

y=R*sin(t) ,
где: R– радиус круга, 0 <= t <= 2

Квадратом может служить контейнер <DIV> …</div> с цветным фоном.

Перетаскивание

В сценариях для перетаскивания какого-либо предмета по окну браузера используется событие onmousemove. Рассмотрим два варианта сценария, в которых используется событие onmousemove. В обоих сценариях пользователь может мышкой передвигать фотографию по всему окну браузера. Первый вариант сценария (пример 5.2) применим только в браузере Internet Explorer. Второй вариант (пример 5.3) правильно выполняется в браузерах Internet Explorer 6.0 и MozillaFirefox 2.0, но он сложнее для понимания.

Пример 5.2.

<HTML>
<HEAD><TITLE>ПЕРЕМЕЩЕНИЕ ИЗОБРАЖЕНИЯ МЫШКОЙ
</TITLE> </HEAD>
<BODY id="body1" STYLE="font-size:12pt">
< H2 align= "center"style= "color:#ff00ff">
Перетаскивание фотографии мышкой</h2>
<P align= "center">
Фотография начинает двигаться при попадании на неё курсора мышки<BR> При захвате и перемещении фотографии не нажимайте кнопки мышки.<BR> Для прекращения движения щёлкните левой кнопкой мышки</p>
<P align= right> Примечание. Страница правильно отображается тольков браузере <i>InternetExplorer 6.0</i></p> <img id= "IM1" src= "LV.jpg"" STYLE= "position:absolute;top:200;left:10">
</BODY>
<SCRIPT> flag= false //запрет на перемещения
// Функция запускается припересечении
// курсором мышки границы изображения
function IM1.onmouseover()
{flag= true }
// Перетаскивание разрешено //
function IM1.onmousemove()
{ if (flag)
 { //пересчёткоординатизображения
document.all.IM1.style.top= event.clientY-170
document.all.IM1.style.left=event.clientX-120
 }
}//запрет на перемещения. Запускается при отпускании кнопки мышки
function IM1.onclick()
{flag=false }
</SCRIPT>
<SCRIPT language="JavaScript" src="ProvBrows.js">
</script>
</HTML>

Выполнить пример 5.2

В примере 5.2 попадание курсора мышки на фотографию служит сигналом к началу перемещения. При дальнейшем перемещении курсора мышки фотография передвигается вместе с ним.Пользователь при перемещении фотографии не должен нажимать на кнопки мышки,так как нажатие на левую кнопку остановит движение и курсор можно будет убрать с фотографии. Нажатие правой кнопки кроме прекращения движения вызывает всплытие меню.

В сценарии используются три функции:

Все три функции имеют специальные имена. IM1.onmouseоver() означает, что эта функция выполняется, когда на объекте с ID=IM1 происходит событие onmouseоver(). Для функций со специальным именами не нужны операторы вызова.

Функция IM1.onmousemove() выполняется циклически в течение всего времени нахождения курсора мышки в площади фотографии. Так как частота выполнения функции не бесконечная, то при резком движении мышкой можно сорвать курсор с фотографии и прекратить перетаскивание, но такое завершение процесса неудобно. Для управления процессом перетаскивания предназначена логическая переменная flag. Если щёлкнуть кнопкой мышки по фотографии, то выполнится функция IM1.onclick(), переменная flag примет значение false и функция IM1.onmousemove() прекратит менять координаты фотографии. Можно будет убрать курсор с фотографии. Если снова хотя бы коснуться курсором фотографии, то выполнится функция IM1.onmouseover(), переменная flag примет значении true и перетаскивание возобновится.

Во втором варианте сценария (пример5.3) неиспользуются функции со специальными именами.

Пример 5.3

<html>
<head><title>Перетаскивание</title></head>
<body onload= "init()">
<h2 align= "center" style="color:#ff00ff">
Перетаскиваниеквадрата мышкой</h2> <h3>align="center">
Установите курсор внутри красногоквадрата, нажмите левую кнопку
мышки и тащите квадрат.<BR> Для освобождения квадрата
от захвата отпустите кнопку мышки</h3>
<P align= right> Примечание. Страница правильно
отображается в браузерах <i>Mozilla Firefox 2.0</i>
и <i>Internet Explorer 6.0 </i> </p>
<DIV id= 'kv' style=
"position:absolute;left:10;top:10;width:50;height:50;background-color:red">
</div>
</body>
<SCRIPT>
flag= false; //Связывание событий с функциями
function init()
{   //Если мышка двигается то выполняется ф-ция dragIt
document.all.kv.onmousemove= dragIt
//Если кнопка мышки отпускается, то - ф-ция osvobodi
document.all.kv.onmouseup= osvobodi
document.all.kv.onmousedown=zachvat

}
function dragIt(evt)
{   Параметр evt создаётся самим браузером
sobytie=(evt) ? evt :(window.event) ?window.event : "";
if(flag)
{   document.all.kv.style.top=sobytie.clientY-25;
    document.all.kv.style.left=sobytie.clientX-25; <
  }
}
function osvobodi()
{   flag=false;//устанавливается запрет на перетаскивание
}
function zachvat()
{ flag=true;//Перетаскивание разрешается
}
</SCRIPT>
</html>

Выполнить пример 5.3

В отличие от первого варианта во втором явно вызывается одна функция. Строка

<bodyonload ="init()">

предписывает при загрузке HTML-документа вызвать функцию init(). В результате выполнения функции init() события, происходящие с объектом, имеющим идентификатор kv, будут вызывать выполнение функций dragIt, osvobodi и zachvat. Объект kv – это контейнер <DIV>, задающий красный квадрат, перетаскиваемый мышкой.

Функция zachvat(), разрешающая начать перетаскивание, выполняется при нажатии кнопки мышки на квадрате, то есть когда происходит событие onmousedown. Функция osvobodi() выполняется при отпускании кнопки мышки (событие onmouseup) и запрещает перетаскивание.

Функция dragIt(evt) связана с событием onmousemove и поэтому циклически выполняется в течение всего времени нахождения курсора мышки на фотографии. Параметр evt – это объект события, созданный в ответ на действие пользователя. В Internet Explorer объект события имеет обозначение window.event или просто event. В Mozilla Firefox объект события обозначается как evt. Для совместимости обоих случаев служит условный оператор

sobytie = (evt) ? evt : window.event;

или в более привычной форме

if(evt) sobytie=evt
else sobytie=window.event

Задача 5.2. Измените последний пример так, чтобы красный квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.

Лабораторная работа №6
Совместимость браузеров

Цель работы: освоить приёмы создания таких страниц, которые можно было бы просматривать браузерами разных типов.

Для разработчиков веб-сайтов было бы идеальным строгое соблюдение стандарта W3C DOM во всех типах и версиях браузеров. К сожалению, даже в самых последних версиях браузеров стандарт объектной модели поддерживается не полностью. В объектные модели браузеров вводятся объекты, события, свойства и методы, отсутствующие в стандарте. Поэтому создание страниц, правильно отображаемых браузерами разных типов, представляет собой очень сложную задачу. В самом простом случае сайт тщательно отлаживается только на браузере одного типа и одной версии, а пользователи всех других браузеров при открытии сайта получают предупреждение об отсутствии гарантий правильного отображения сайта. Такой подход вполне приемлем для информационной системы, используемой одной организацией, например, банком, имеющим свою сеть Интранет.

Свойства браузеров и объект Navigator

Данные о браузере хранит объект navigator. Чтобы вывести в окно браузера свойство appName (имя браузера), можно написать такой оператор:

document.getElementById("P1").innerHTML= "appName = " + window.navigator.appName
//P1 – ID контейнера, в который будет выведено имя браузера

Если страница предназначена для выполнения только одним браузером, то можно при её загрузке проверять имя браузера (appName). Если браузер не подходит, то нужно предупредить пользователя о том, какой браузер необходим для просмотра этой страницы.

Задача 6.1. Напишите сценарий, выводящий в окно браузера следующие свойства объекта navigator:

Выполните этот сценарий во всех браузерах, установленных на вашем компьютере. Внимательно изучите полученные значения свойств объекта navigator.

Задача 6.2. Напишите сценарий, который определяет имя браузера. Если загрузка произошла в любом браузере кроме Internet Explorer, то пользователь должен быть предупреждён о том, что страница правильно отображается только в браузере Internet Explorer. Поместите написанный сценарий в отдельный файл с расширением js. Скопируйте в свой каталог пример 2.3, который правильно отображается только в браузере Internet Explorer. Вставьте в скопированный пример тег <SCRIPT ... > для загрузки файла со скриптом. Проверьте пример в браузерах Internet Explorer и Mozilla.

Способы преодоления несовместимости браузеров

Способов создания сценариев, правильно выполняющихся во всех существующих браузерах, нет. Рассмотрим некоторые различия объектных моделей, используемых в браузерах Internet Explorer и Mozilla, и типовые приёмы учёта этих различий. Браузер Mozilla не поддерживает свойство innerText, поэтому для совместимости следует использовать более универсальное свойство innerHTML. В браузерах Internet Explorer и Mozilla используются разные модели события. В Internet Explorer объект event доступен как свойство объекта window (window.event). Объект window указывать не обязательно. Схема доступа к элементу, на котором произошло событие, выглядит так :

<BODY onclick=cl_b()>
.......
.......
<script>
.......
......
function cl_b()
{ event.srcElement.style.background='AAAAFF'
.......
.......

В приведённом примере меняется цвет фона того элемента, по которому щёлкнули мышкой. Эта схема доступа использована в примере 2.3.

В браузере Mozilla объект event передаётся в качестве параметра в функцию, обрабатывающую событие (пример 6.1). Вместо свойства srcElement для хранения объекта, с которым произошло событие, используется свойство target. Модель HTML-документа в стандарте W3C DOM строится в виде дерева, состоящего из узлов (node). Преимущественно используются узлы двух типов – узлы элементов и текстовые узлы. Узел элемента соответствует элементу документа, а текстовый узел – тексту, введённому между тегами элемента. Узел, содержащий другие узлы, называется родительским (parentNode). В родительском узле содержатся дочерние узлы. Текстовый узел всегда дочерний.

Пример 6.1.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT language="JavaScript" src="ProvBrowsMaz.js">
<SCRIPT>
function colorch(col,evt)
{ evt.target.style.color=col; }
function cl_b(evt)
{ var elem = (evt.target.nodeType== 3)? evt.target.parentNode : evt.target;
if(elem.style.background.substring(0,6)=='yellow')
{ elem.style.background='#AAAAFF'; }
else {elem.style.background='yellow';}
}
</script>
</HEAD>
<BODY onclick=cl_b(event) style="height:600px">
<P onmouseover="colorch('red',event)"
onmouseout= "colorch('green',event)" ALIGN = 'CENTER'
style = 'color:green'>
ТЕКСТ, МЕНЯЮЩИЙ СВОЙ ЦВЕТ </P>
<P>При наведении и снятии курсора заголовок меняет свойцвет.<BR>
Щелчок по любому объекту меняет его цвет</p> <
DIV style = "position :absolute;top:200;left:300;width:200;height:100; background-color:green;color:red"> <b>Контейнер</b>
DIV</div> </BODY></HTML>

Выполнить пример 6.1

В примере 6.1 в функцию cl_b() передаётся только объект event, а в функцию colorch() – два параметра. Параметр event должен быть в списке параметров последним. Текстовый узел имеет свойство nodeType= 3. В примере меняется цвет фона родительского узла, содержащего текстовый узел.

Пример 6.1 легко переделать так,что он будет правильно выполняться в браузерах обоих типов (пример6.2). Изменения нужно внести только в сценарий. Для настройки на браузер служит функция brows(evt).

Пример 6.2.

<HTML>
<HEAD><TITLE>Internet Explorer и Mozilla</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT>
functioncolorch(col,evt)
{ e=brows(evt)
  e.style.color=col;
}
function cl_b(evt)
{ elem=brows(evt)
  varx="";
  x=elem.style.background
  if(x.substring(0,6) == 'yellow')
  { elem.style.background = '#AAAAFF'; }
  else
  { elem.style.background = 'yellow';}
}
function brows(evt)//Настройка на браузер
{ evt=(evt) ? evt:window.event;
  if(evt.target)
  { elem =(evt.target.nodeType ==3) ?
  evt.target.parentNode :evt.target;
  }
  else elem= evt.srcElement;
  return elem;
}
</script>
</HEAD>
<BODY onclick=cl_b(event) style="height:600px">
<P onmouseover="colorch('red',event)" onmouseout="colorch('green',event)"
ALIGN= 'CENTER'style='color:green'>
ТЕКСТ, МЕНЯЮЩИЙ СВОЙ ЦВЕТ
</P><P>При наведении и снятии курсора заголовок меняет свой
  цвет.<BR>
Щелчок по любому объекту меняет его цвет</p>
<DIV style= "position:absolute;top:200;left:300;width:200;
height:100;background-color:green;color:red">
<b>Контейнер</b>DIV</div>
</BODY>
</HTML>

Выполнить пример 6.2

Задача 6.3. Измените примеры 2.3, 2.4 и 3.1 так, чтобы они правильно выполнялись не только в Internet Explorer, но и в Mozilla.

Лабораторная работа №7
Окна и таблицы

Цель работы: изучить способы управления окнами и таблицами.

Создание нового окна

Объект window находится в вершине дерева объектной модели W3C DOM и имеет много свойств и методов. В сценариях, особенно при отладке, часто используется метод alert. Свойства setInterval, clearInterval (пример 5.1) и setTimeout необходимы для оживления страницы, организации движения объектов. Чтобы не загромождать основное окно, часто для просмотра дополнительной информации (графиков, таблиц и т.д.) удобно открыть новое дополнительное окно. Для создания нового окна используется метод open, имеющий следующий синтаксис: var windowObject=window.open([параметры) Рассмотрим сценарий (пример 7.1), по которому окно с описываемым на странице графиком появляется при наведении курсора мышки на слова на графике.

Пример 7.1

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<h1 align=center>График открывается в новом окне</h1>
Зависимость y=f(x) <B onmouseover="gr('График 1','prim1.gif')" style="color:blue;"> на графике 1</b> имеет линейный характер.
<p> Изменение цены и объёмов продаж показаны
<B onmouseover="gr('График 2','prim2.gif')" style="color:green">
на графике 2</b>. Объёмы продаж серого цвета.
<P><font size=-1>
Примечание. Для просмотра графиков подведите курсор мышки к словам "на
графике"<BR> </p>
<script>
function gr(txt,fil)
{ grWin=window.open("","","width=650,height=400")
  grWin.document.write("<H1 align=center>"+ txt+
  "</h1><CENTER><IMG SRC='"+fil+"'></center>")
}
</script>
</BODY>
</HTML>

Выполнить пример 7.1

Первые два параметра, URL и название окна в примере оставлены пустыми. В третьем параметре заданы ширина и высота окна в пикселях.

Рис. 5

Задача 7.1. Создайте сайт, состоящий из двух страниц. Сайт служит для вывода таблицы значений тригонометрической функции (sin, cos или tg) в заданном диапазоне и с заданным шагом. На первой странице (рис. 5) пользователь задаёт исходные данные, а на второй получает соответствующую таблицу. Окно с новой страницей должно открываться методом open(). Исходные данные должны проверяться сразу после ввода и после нажатия кнопки Вычислить. Таблица должна иметь следующий вид:

Угол sin
в градусах в радианах
30 0.5236 0.5
32 0.5585 0.5299
34 0.5934 0.5592
36 0.6283 0.5878

Указания. Данная задача является расширением задачи 3.2. Для проверки цифровых символов служит следующая функция:

function isNumb(fld)
{ t=fld.value
 for (i=0;i<t.length;i++)
 { var ch=t.charAt(i)
if((ch<"0" ||ch>"9") & !(ch=="," ||ch=="."))
{ alert("Не цифра") fld.focus(); fld.select()
  return false
}
 }
 return true
}

Параметр fld – объект, значение которого проверяется. Пример обращения к функции isNumb(fld):

<INPUT TYPE="text" NAME="h" onchange=isNumb(this)>

Результат выполнения оператора ch=t.charAt(i) – i-й символ строковой переменной (объекта) t. Функция сообщает об ошибке, если введён любой символ кроме десятичных цифр, точки или запятой.

Управление таблицей

Для занесения данных в ячейку таблицы служит выражение:

document.all.tab1.rows[i].cells[j].innerHTML =x
//где tabl – id таблицы

Чтение данных из ячейки в браузере Internet Explorer симметрично занесению:

x = document.all.tab1.rows[i].cells[j].innerHTML

Браузер Mozilla не воспринимает этот оператор. Оба браузера правильно выполняют следующий оператор:

x = document.all.tab1.rows[i].cells[3].firstChild.nodeValue

Содержимое ячейки таблицы рассматривается как дочерний узел по отношению к узлу, соответствующему тегу <TD>. В примере извлекаются данные из i-й ячейки третьей строки таблицы, имеющей ID=tab1. Нумерация строк и ячеек начинается с нуля. С помощью сценария можно менять структуру таблицы, добавляя или удаляя строки и ячейки. Операция вставки строки в таблицу состоит из следующих этапов.

Пример добавления строки и ячейки:

NewRow= document.all.tab1.insertRow() //вставка строки
NewCell=NewRow.insertCell(0) //вставка ячейки

Для удаления строк и столбцов служат методы deleteRow(индекс строки) и deleteCell(индекс ячейки). Пример удаления всех строк таблицы:

while (tableRef.rows.length > 0)
{tableRef.deleteRow(0);}

Задача 7.2. Создайте страницу (рис. 6) для учёта поступления товаров. Пользователь может менять в таблице количество и цену выбранного товара, вводя новые значения в поля, расположенные под таблицей. Введёнными значениями заменяются соответствующие данные в таблице и автоматически подсчитывается суммарная стоимость всех товаров.

Рис. 6

Библиографический список

Гудман Дэнни. JavaScript. Библия пользователя. 5-е изд. Пер. с англ./ Гудман Дэнни, Моррисон Майкл. М.:ООО «И.Д. Вильямс», 2006. – 1184с.

Дунаев В.В. HTML, скрипты и стили / Дунаев В.В. СПб.: БХВ-Петербург, 2005. – 832 с.