Свойства браузеров и объект Navigator
Данные о браузере хранит объект navigator. Чтобы вывести в окно браузера свойство appName (имя браузера), можно написать такой оператор:
document.getElementById("P1").innerHTML= "appName = " + window.navigator.appName
//P1 – ID контейнера, в который будет выведено имя браузера
Если страница предназначена для выполнения только одним браузером, то можно при её загрузке проверять имя браузера (appName). Если браузер не подходит, то нужно предупредить пользователя о том, какой браузер необходим для просмотра этой страницы.
Задача 6.1. Напишите сценарий, выводящий в окно браузера следующие свойства объекта navigator:
- appName,
- appCodeName,
- appVersion ,
- userAgent,
- browserLanguage,
- cookieEnabled.
Выполните этот сценарий во всех браузерах, установленных на вашем компьютере. Внимательно изучите полученные значения свойств объекта 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.
Лабораторная работа №2.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 | |
| в градусах | в радианах | |
| 0.5236 | 0.5 | |
| 0.5585 | 0.5299 | |
| 0.5934 | 0.5592 | |
| 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 |