Объект Math
Объект Math содержит в себе набор констант и методов, расширяющих базовые арифметические операции.
Невозможно создать экземпляр объекта Math, так как он является статиче- ским и создается автоматически во время выполнения скрипта.
Приведем пример возведения числа в степень:
alert(Math.pow(10,3));
//выведет 1000
<!--пример # 4: функция вычисления площади круга -->
<html>
<head>
<title>Функция вычисления площади круга </title>
</head>
<body>
<script type="text/javascript">
function sq(r) {
document.write("Задали r= ", r ,
" для функции.","<BR>")
return Math.PI*r * r;
}
var r=2;
document.write("Площадь круга равна ",sq(r),".")
</script>
</body> </html>
Объекты window и document
Объектная модель JavaScript предоставляет возможность работы с объектами, зависящими от браузера (window, navigator, location и т.д.) и объектами, относящимися к HTML-документу (document, forms, frames и т.д.);
Ниже представлена схема документа, которая позволяет манипулировать свойствами и структурой документа.
Объект window является объектом верхнего уровня в иерархии JavaScript. Ссылки self и window являются синонимами для текущего окна. Вы можете закрыть текущее окно, используя window.close() или self.close(). Ссылка top указывает на самое верхнее окно, а parent ссылается на окно, содержащее frameset. Когда вы открываете или закрываете окно внутри события, необходимо определить window.open() или window.close() вместо open() или close(), так как вызов close()
В следующем примере рассмотрим использование метода window.open() для открытия минимизированного окна.
<!-- пример # 5: минимизация окна и его удаление-->
<html> <head>
<title> Минимизация окна </title>
<script type="text/JavaScript">
function makeicon()
{
window.open("pr1.htm","icon", //открытие окна
"resizable=yes,scrollbars=yes,width=50,height=70");
window.close();//закрытие старого окна
}
</script>
</head><body>
<h1>minimize page</h1>
<form name=formicon>
<input name=ibutton type=button value=mini onClick="makeicon()">
</form>
</body></html>
Метод open() открывает новое окно web-браузера. Синтаксис:
[windowVar=][window].open("URL", "winName", "windowFeatures"])
windowVar – имя нового окна; URL определяет URL, открываемый в новом окне; winName – имя окна; windowFeatures – список через запятую любых из следующих опций или значений:
toolbar[=yes|no] – создает стандартные рабочие инструменты с такими кнопками, как "Back" и "Forward";
location[=yes | no] – создает поле ввода Location;
directories status[=yes | no] – создает строку состояния внизу окна;
menubar[=yes | no] – создает меню вверху окна;
scrollbars[=yes|no] – создает горизонтальную и вертикальную прокрутки, когда документ больше, чем размер окна;
resizable[=yes|no] – позволяет пользователю изменять размер окна;
width=pixels,height=pixels – размеры окна в пикселях.
Опции разделяются запятой. Не делайте пробелов между опциями!
Следующие объекты являются наследниками объекта window: document, frame, location.
Методы: alert(), confirm(), prompt(), open(), close(), setTimeout(), ClearTimeout(). События: onLoad, onUnload .
В систему введено свойство opener, которое определено для текущего окна или фрейма, а методы blur и focus распространены на работу с окнами. Свойство opener определяет окно документа, который вызвал открытие окна текущего документа. Свойство определено для любого окна и фрейма. Если нужно выполнить некоторые действия по отношению к окну, открывшему данное окно, то можно использовать выражение типа: window.opener.[method]. Например, если требуется закрыть окно-предшественник, то можно выполнить метод close(): window.opener.close()
Можно менять и другие свойства объектов в окне-предшественнике. Например, для окна-предшественника определить голубой цвет в качестве цвета фона: window.opener.document.bgColor='cyan'
Следующий пример переназначает для текущего окна окно-предшественник:
window.opener= new_window
Объект Document
Объект Document содержит ряд свойств и методов, позволяющих изменять сам документ. В следующем примере используется массив all, содержащий все элементы документа для вывода списка используемых на странице тегов.
<!--пример # 6: список используемых на странице тегов -->
<html> <head>
<title> Список используемых на странице тегов </title>
<script type="text/javascript">
function findtags()
{var tag;
var tags="страница содержит следующие теги";
for(i=0;i<document.all.length;i++)
{tag=document.all(i).tagName;
tags=tags+"\r"+tag;}
alert(tags);
return tags;}
</script>
</head>
<body onload="findtags()">
<h2 onMouseover="findtags()">Вывод списка используемых на
странице тегов в окно предупреждений </h2>
</body> </html>
<!-- пример # 7: изменение фона документа при выборе кнопки - цвета с помощью свойства bgColor объекта Document -->
<html> <head>
<title>bgcolor</title>
</head>
<body text=000000 bgcolor=ffffff>
<table border=0 align=center>
<tr><td><form>
<input type=button value="красный"
onClick= "document.bgColor ='ff0000'" >
<input type=button value="желтый"
onClick="document.bgColor ='ffff00'">
<input type=button value="синий"
onClick="document.bgColor= '0000ff'">
<input type=button value="голубой"
onClick="document.bgColor= '87ceeb'">
</form></td>
</table>
</body> </html>
Document Object Model (DOM)
Структура любого HTML-документа представляет собой дерево, в корне которого расположен тег (точнее сказать, узел) HTML. Дочерними узлами HTML являются узлы HEAD и BODY, у которых, в свою очередь, есть собственные дочерние узлы.
В структуре дерева могут существовать узлы разных типов, они представлены в таблице:
|
Описание |
Пример |
|
Определяет тип HTML документа |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www. w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
|
Верхний элемент в структуре HTML-дерева |
<html> |
|
HTML комментарий |
<!-- this is comment --> |
|
HTML элемент (тег) |
<p> … </p> |
|
Атрибут HTML элемента |
bgcolor=”red” |
|
Текст, содержащийся внутри HTML элемента |
Content of paragraph |
Каждый HTML-тег может иметь атрибут id, который позволяет быстро получить доступ к этому элементу с помощью метода getElementById объекта document. Приведем пример кода внутри тега BODY:
<p id="myP">Hello, World!</p>
<script type="text/javascript">
alert(document.getElementById("myP").innerHTML);
//выведет на экран фразу Hello World!
var str = "";
str += document.getElementById("myP").nodeName + '\n';
str += document.getElementById("myP").nodeValue + '\n';
str += document.getElementById("myP").nodeType + '\n';
alert(str);
//выведет на экран «P null 1»
</script>
На экран вывелось nodeValue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:
document.getElementById("myP").childNodes[0].nodeValue;
Каждый узел DOM имеет ряд свойств:
nodeName – имя узла;
nodeValue – значение узла;
nodeType – номер, соответствующий типу узла;
parentNode – ссылка на родительский узел, если он существует;
childNodes – список дочерних узлов;
firstChild – первый дочерний элемент;
lastChild – последний дочерний элемент;
previousSibling – указывает на предыдущий соседний узел, если у родительского узла несколько дочерних и текущий узел не первый дочерний;
nextSibling – указывает на следующий соседний узел, если у родительского узла несколько дочерних и текущий узел не последний дочерний;
attributes – список атрибутов;
ownerDocument – указатель на объект document, которому принадлежит текущий узел.
Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:
<!-- пример # 8: иерархия узлов DOM-->
<table>
<tr id="firstRow">
<td id="firstCell"></td>
<td id="currentNode" width="10">
<span id="spanNode">
text</span>
<p id="pNode">text</p>
</td>
<td id="lastCell"></td>
</tr>
</table>
<script type="text/javascript">
alert(document.getElementById("currentNode").parentNode.id);
//выведет на экран firstRow
alert(document.getElementById("currentNode").childNodes[0].id);
//выведет на экран spanNode
alert(document.getElementById("currentNode").firstChild.id);
//выведет на экран spanNode
alert(document.getElementById("currentNode").lastChild.id);
//выведет на экран pNode
alert(document.getElementById("currentNode").previousSibling.id);
//выведет на экран firstCell
alert(document.getElementById("currentNode").nextSibling.id);
//выведет на экран lastCell
alert(document.getElementById("currentNode")
.attributes["width"].value);
//выведет на экран 10
alert(document.getElementById("currentNode")
.ownerDocument.nodeName);
//выведет на экран #document
</script>
Помимо метода getElementById(), существует несколько других, облегчающих доступ к необходимым элементам документа. Метод getElementsByName() возвращает коллекцию элементов с определенным атрибутом name, а метод getElementsByTagName() возвращает коллекцию элементов (тегов) с одинаковым именем. Оба метода принадлежат объекту document.