JavaScript Окна и таблицы

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

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

Объект 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>

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

Рис. 5

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

Угол		sin
в градусах	в радианах	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. Нумерация строк и ячеек начинается с нуля. С помощью сценария можно менять структуру таблицы, добавляя или удаляя строки и ячейки. Операция вставки строки в таблицу состоит из следующих этапов.

Вызов метода insertRow() и сохранение возвращенной ссылки на новую незаполненную строку.
Использование ссылки на строку при вызове метода insertCell() для каждой ячейки в строке (при этом сохраняется возвращенная ссылка на каждую новую незаполненную ячейку).
Присвоение значений свойствам ячейки, включая ее содержимое.

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

NewRow= document.all.tab1.insertRow() //вставка строки 

NewCell=NewRow.insertCell(0) //вставка ячейки

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

while (tableRef.rows.length > 0) 

{tableRef.deleteRow(0);}

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

Рис. 6

К содержанию