Добро пожаловать на мой блог

The world is yours

Java-script

автор: admin | Октябрь 14, 2010 | Раздел: Жизнь

Колосветов Евгений 13пр31.

1.Сценарий

Jave-script

’a может быть размещен непосредственно в тексте страницы.

2.Текст может быть загружен из внешнего по отношению к веб-странице файла.

3.Размещение сценария в обработчиках события.

Синтаксис

<html>

<head>

<script type=”text/javascript” src=”адрес.файла.js ”></script>

</head>

<body>

<script type=”text/javascript”>Код скрипта!!!</script>

</body>

</html>

ПРАВИЛА

1.Java-script чувствительный к регистру

2. операторы должны разделяться точкой с запятой

3.операторы объединяются в блоки а блоки объединяются фигурными скобками

4. Комментарии такие же как и с С++.

<script type=”text/javascript” src=”адрес.файла.js ”>

<!—

КОД СКРИПТА!!!

//–> </script>

<noscript> Текст</noscript>

Переменные

Var имя переменной [=значение1],[перем[=значение2]][…];

Example:

·       Var a;

·       Var b=1;

·       Var d,c=”string”;

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

Типы данных

1.Строковый

2.Логический

3.Объектный

4.Числовой

Сравнение

= = = СТРОГО РАВНО

10= = =”10”

!== НЕ СТРОГО РАВНО.

Ложью является false , NULL, пустая строка, undefined, 0.

Диалоговые Окна

Alert (“Text message”);

Confirm (“Text question”);

Prompt (“Запрос на ввод данных”,” значение по -умолчанию”); Возвращает строковый тип!

Перевод J

ParseInt (“Строка”); в целое

Parsefloat(“Строка”); во флоат

JJJJJJJJJJJJJJJJJJJJJ

Оператор IF

If (Условие)

{ …}

Else if ()….

for([инициализация_счетчика];[условие];[приращение_счетчика])
{
    оператор; 
    оператор; 
    ...
} 
while(условие_продолжения)
{
    оператор; 
    оператор; 
    ...
} 

Цикл с постусловием “do … while”

do
{
    оператор;
    оператор;
    ...
}
while(условие_продолжения)
 

Управление циклом

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

  • break – прерывает выполнение цикла и передает управление на следующий после цикла оператор.
  • continue – прерывает текущую итерацию цикла и передает управление на первый оператор тела цикла для новой итерации.
 

Java-script функции это совокупность операторов имеющая свое имя.

function имя_функции ([аргументы]) {
    // тело функции
}
 

Оператор typeof(переменная)-используется для определения типа переданной переменной, возвращаемое значение оператора может быть  следующим Bool, number, object, string, undefined.

Непосредственно перед входом в тело функции, Автоматически создается объект arguments который содержит аргументы вызова начиная от нуля, длину в свойстве length, ссылку на саму функцию в свойстве callee.

Свойства arguments похоже на массив но это не массив. Он не содержит методов добавления, удаления элементов и так далее.Но из него можно сделать массив.

var args=Array.prototype.slice.call(arguments);

args-это уже массив.

SOME EXAMPLE:

Function func(){

For(var i=0;i<argements.length;i++)

{

Alert(“arguments[“+i+”]=”+arguments[i]);

}

}

Func(‘a’,’b’,true);

-= Видимость переменных =-

Если предполагается что значение переменной будет использоваться

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

Если переменная необходима только в пределах конкретной функции, то ее там лучше объявить. Обязательно с ключевым словом var. Java-script будет считать такую переменную уникальной и отличной от глобальной.

Если требуется использовать переменную только в пределах данного сценария а не внутри каких-либо функций, объявляйте переменную где-нибудь вне функции.

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

Объектный тип данных

——————————————————————————————————————–

Конструктор:

Function Student(aname, asurname,aage)

{

This.name=aname;

This.surname=asurname;

This.age=aage;

This.toString=print;

Return this;

}

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

Var vasia=new student(“vasia”,”Ivanov”,18);

Vasia.tostring();

Function print()

{

Return “Имя :”+this.name+“Фамилия :”+this.surname+“Возраст :”+this.age;

}

ДЗ!

Задача:

Кол-ячеек , ширина таблицы, 2 цвета.

isNaN(“str”)это не число?true –не число false –число.

Конструктор человек, преподаватель,студент.

Наследование!

Массивы

Var a= new Array();

Или  var a = new Array(length);-создания массива из length неопределенных значений.

Или var a = new Array(item1,item2,…);

Метод SORT

По умолчанию метод СОРТ рассматривает элементы как строки

И критерием считается порядок символов в строке в соответствии с таблицей АСКЕ.

Для реализации других критериев сортировки используют пользовательскую функцию.

Которая строится следующим образом:

  1. функция должна принимать 2 параметра (a,b)
  2. В случае если a>b функция должна вернуть положительное значение.
  3. В случае если a<b функция должна вернуть отрицательное значение.
  4. В случае если a=b функция должна вернуть ноль

Свойство prototype

Свойство prototype позволяет добавить в готовый объект, новое свойство или метод.

Function array_max()

{

Var i, max=this[0];

For(i=0;i<this.length;i++)

If (this[i]>max)

Max=this[i];

Return max;

}

Array .prototype.max=array_max;

Var a=new Array();

//заполнение массива.

Alert(“Максимум=“ + a.max());

Var a = new Array();

For(var i=0;i<3;i++){

a[i]=new Array();

For(var j=0;j<5;j++){

a[i][j]=i*j;

}

}

В качестве индекса элемента массива

Можно использовать некое целое число, но и строки.

var users= new Array();

users[“Admin”]=”aaa”;

users[“user”]=”aaa”;

users[“user1”]=”u1”;

var l=promt(“Введите свой логин”,””);

var p=promt(“Введите свой пароль”,””);

if(p==users[l])

alert(“Привет”);

else  alert(“Неверный логин или пароль”);

for..in

for (property in object)

statement

property- переменная которой последовательно присваивается название свойств объекта (У массива это будут индексы)

Object- Объект свойства которого перебираются(например массив)

Statement- Блок для вызова на каждой итерации.

Например  :

var users= new Array();

users[“Admin”]=”aaa”;

users[“user”]=”aaa”;

users[“user1”]=”u1”;

for(var a in users)

{

Alert(“Логин:”+u+”;пароль:”+users[u]);

}

Свойства и методы строк

Ниже в таблице представлены свойства и методы строк, наиболее часто применяемые в сценариях:

Табл. 2.2. Свойства и методы строк
Свойство Пояснение
string.length Длина (количество символов) строки
string.prototype Ссылка на прототип класса объекта. Это свойство позволяет добавлять в объекты новые методы.
Метод Пояснение
str1.bold() Выводит содержимое строки полужирным шрифтом так, как будто строка заключена в теги <b></b>
str1.italics() Выводит содержимое строки курсивом так, как будто строка заключена в теги <i></i>
str1.strike() Выводит содержимое строки перечеркнутым так, как будто строка заключена в теги <s></s>
str1.big() Выводит содержимое строки шрифтом на единицу большим, чем текущий так, как будто строка заключена в теги <big></big>
str1.small() Выводит содержимое строки шрифтом на единицу меньшим, чем текущий так, как будто строка заключена в теги <small></small>
str1.sub() Выводит содержимое строки со смещением вниз относительно базовой линии так, как будто строка заключена в теги <sub></sub>
str1.sup() Выводит содержимое строки со смещением вверх относительно базовой линии так, как будто строка заключена в теги <sup></sup>
str1.fixed() Выводит содержимое строки моноширным шрифтом так, как будто строка заключена в теги <tt></tt>
str1.fontSize(size) Выводит содержимое строки шрифтом указанного размера так, как будто строка заключена в теги <font size=size></font>
str1.fontColor(color) Выводит содержимое строки шрифтом указанного цвета так, как будто строка заключена в теги <font color=color></font>
str1.link(url) Возвращает содержимое строки как гиперссылку на указанный ресурс
str1.toUpperCase() Возвращает строку в верхнем регистре
str1.toLowerCase() Возвращает строку в нижнем регистре
string str1.charAt(index) Возвращает символ строки из указанной позиции
number str1.charCodeAt(index) Возвращает Unicode – код символа строки из указанной позиции
number str1.indexOf(str2[, start]) Возвращает позицию, с которой начинается первое вхождение подстроки str2 в строку str1. Если указан параметр start, поиск подстроки начинается с указанной позиции. Если подстрока str2 в строке str1 не найдена, метод возвращает -1.
number str1.lastIndexOf(str2[, end) Возвращает позицию, с которой начинается последнее вхождение подстроки str2 в строку str1. Если указан параметр end, поиск подстроки начинается с указанной позиции. Если подстрока str2 в строке str1 не найдена, метод возвращает -1.
string str1.slice(start[, end]) Возвращает часть строки от позиции start и заканчивая позицией end не включительно. Если параметр end опущен, подстрока продолжается до конца строки.
string str1.substring(start[, end]) Возвращает часть строки от позиции start и заканчивая позицией end не включительно. Если параметр end опущен, подстрока продолжается до конца строки. В качестве начальной позиции выступает меньшее из двух указанных значений, т.е. вызовы substring(0,5) и substring(5,0) эквивалентны.
string str1.substr(start[, length]) Возвращает часть строки указанной длины начиная с позиции start. Если параметр length равен 0 или имеет отрицательное значение, возвращается пустая строка. Если параметр length не указан, подстрока продолжается до конца строки.
array str1.split(seperator[, limit]) Разбивает строку str1 на подстроки, разделяемые в строке указанным разделителем и возвращает массив подстрок. Параметр limit служит для ограничения количества элементов в результирующем массиве

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

Применение методов форматирующих вывод

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

Приведем практический пример: необходимо вывести список гиперссылок на поисковые системы, которые хранятся в сценарии в виде массива. Ниже показан один из способов реализации данной задачи:

Листинг №2.7: Применение методов форматирования вывода строк
var titles = new Array("Rambler", "Yandex", "Google", "Altavista");
var urls   = new Array("http://www.rambler.ru", "http://www.ya.ru",
             "http://www.google.com", "http://www.altavista.com");
for (var i=0; i<titles.length; i++) {
    document.write (titles[i].bold()+": "+urls[i].link(urls[i])+"<br />");
}
выполнить.

Приведенный выше фрагмент кода сначала выводит полужирным начертанием название поискового сервера (элементы массива “titles” – заголовки), а, затем, саму гиперссылку из массива “urls”, причем, текст гиперссылки и адрес ресурса совпадают.

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

document.write ("<b>"+titles[i]+"</b>: <a href='"+urls[i]+"'>"+urls[i]+"</a><br />");

Применение методов indexOf() и lastIndexOf()

Методы indexOf() и lastIndexOf() применяются в тех ситуациях, когда необходимо проверить, является ли некоторая последовательность символов частью строки. Такая необходимость может возникнуть, например, при проверке достоверности данных, введенных пользователем. Приведем простой пример: от пользователя требуется ввести адрес электронной почты а сценарий должен проверить корректность ввода (упрощенно):

Листинг №2.8: Пример применения метода ‘indexOf()’
var email;
do {
    email = prompt ("Введите свой e-mail:","")
    if (email.indexOf("@") == -1) {
        alert ("Введенный e-mail синтаксически некорректен!nПовторите операцию.");
    }
    else
        break;
} while (true);
alert ("Спасибо за сотрудничество!");
выполнить.

Сценарий в бесконечном цикле запрашивает у пользователя ввод e-mail адреса и проверяет наличие в нем символа “@”. Если таковой отсутствует, метод indexOf("@") вернет значение -1 и пользователь получит сообщение об ошибке, после чего запрос повторится. Цикл будет продолжаться до тех пор, пока пользователь не введет строку, содержащую символ “@”.

Совершенно очевидно, что проверка корректности адреса, введенного пользователем, не претендует на полноту и ее запросто можно обойти, введя при запросе символ “@”.

Еще один пример демонстрирует применение метода indexOf() с параметром “start”. Пример позволяет вычислить вероятность появления некоторого символа (например – ‘а’) в произвольном тексте:

var text="Карл у Клары украл кораллы, Клара у Карла украла кларнет.";
var count=0, start=0;
do {
    start=text.indexOf("а", start);
    if (start > 0)
        count++;
} while (start > 0);
alert ("Символ 'а' всречается в строке с вероятностью "+count/text.length*100+"%");

Применение методов slice(), substring() и substr()

Все три метода, как следует из таблицы, служат для получения части строки. Эти методы так же можно применить при проверке данных. Например, из адреса электронной почты пользователя необходимо выделить в отдельные строки логин пользователя (символы, находящиеся перед символом “@”) и адрес почтового сервера (символы, находящиеся после символа “@”) с целью их дальнейшей проверки. Упрощая ситуацию, проверим наличие “.” в адресе почтового сервера и отсутствие “.” в логине пользователя:

Листинг №2.9: Получение подстроки
var email;
do {
    email = prompt ("Введите свой e-mail:","username@host.com")
    var pos1 = email.indexOf("@");
    if (pos1 == -1) {
        alert ("Введенный e-mail синтаксически некорректен!nПовторите операцию.");
    }
    else {
        var userName = email.substring(0, pos1);
        var host = email.slice(pos1+1);
        if (userName.indexOf(".") != -1)
            alert ("Введенный e-mail синтаксически некорректен!nПовторите операцию.");
        else if (host.indexOf(".") == -1)
            alert ("Введенный e-mail синтаксически некорректен!nПовторите операцию.");
        else
            break;
    }
} while (true);
alert ("Спасибо за сотрудничество!");
выполнить.

После такой доработки проверка стала значительно лучше, хотя она все еще не универсальна. Теперь пользователь должен вводить символы до “@” без точек, а символы после “@” обязательно должны содержать хотя бы одну точку.

Применение метода split()

Метод split() можно с успехом применять для ввода массивов с клавиатуры. Ниже на примере демонстрируется одна из возможных реализаций этого подхода:

Листинг №2.10: Применение метода ’split()’
var s = prompt ("Введите несколько числовых значений, разделенных запятыми:", "1,2,5,0,3,7");
var a = s.split(",");
var sum=0;
for (var i=0; i<a.length; i++)
    sum+=parseInt(a[i]);
alert ("Сумма элементов введенного массива: "+sum);
выполнить.

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

События и их обработка

——————————————————————————————

MOUSE!!!

Onclick

Ondblclick

Onmouseover

Onmouseout

Onmousedown

Onmouseup

Oncontextmenu

——————————————————————————————

KEYBOARD!!!

Onkeydown

Onkeyup

Onkeypress

Onload

Onunload

<элемент имя_события=”код”>

Или

element.имя_события=обработчик;

Или

element.имя_события=function()

{

}

<body onload=”alert(“bla-bla”>

</body>

Некоторые общие свойства и методы элементов страниц:

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

clientTop  смещение верхнего края элемента, относительно верхнего края родителя

элемента без учетов рамок, полос прокруток, границ, отступов ,

clientLeft смещение левого края элемента, относительно левого края родителя

элемента без учетов рамок, полос прокруток, границ, отступов ,

clientWidth ширина элемента без учетов рамок, полос прокруток, границ, отступов , Доступно только для чтения

id идентификатор элемента

innerText текстовое содержимое элемента включая и текст дочерних элементов но исключая любые тэги html.

innertHTML все содержимое элемента : текст и тэги дочерних элементов.

offsetleft  и offsetTOP

смещение верхнего/левого элемента относительно верхнего либо левого края родителя.

outerHTML все содержимое элемента: текст и тэги дочерних элементов включая тэги образующие этот элемент

outerText текстовое содержимое элемента включая и текст дочерних элементов но без  тэгов html.

Таблица 1.2 – Общие методы элементов WEB-страницы

Метод Описание
clearAttributes() Удаляет все атрибуты тега элемента.
contains(имя элемента) Возвращает true, если элемент с данным именем содержится внутри текущего элемента.
getAdjacentText(place) Возвращает текстовую строку, находящуюся в текущем элементе или рядом с ним. Параметр place может принимать следующие значения: BeforeBegin – текст, находящийся перед открывающим тегом элемента; AfterBegin – после открывающего тега, но перед всем содержимым текущего элемента; BeforeEnd – перед закрывающим тегом, но после всего содержимого;  AfterEnd – после закрывающего тега.
getAttribute(имя атрибута, true | false) Возвращает значение атрибута тега текущего элемента. Если в торой параметр установлен в true, поиск атрибута будет производиться с учетом регистра символов его имени. В зависимости от атрибута может вернуть значение разного типа.
getElementsByTagName(имя тега) Возвращает указатель на коллекцию дочерних элементов, созданных с использованием тега, переданного в качестве параметра.
insertAdjacentHTML(place,текст) Позволяет вставить текст внутрь текущего элемента. Текст может содержать HTML-форматирование. Параметр place может принимать следующие значения: BeforeBegin – текст вставляется перед открывающим тегом текущего элемента, AfterBegin – после открывающего тега,  BeforeEnd – перед закрывающим тегом, но после всего содержимого, AfterEnd – после закрывающего тега.
insertAdjacentText(place, текст) То же самое, что предыдущий метод, но при вставке текста игнорируются все HTML-теги.
removeAttribute(имя атрибута, true | false) Удаляет атрибут у тега текущего элемента. Если второй параметр установлен в true, то поиск атрибута будет производиться с учетом регистра символов его имени. Возвращает true, если удаление было выполнено успешно, и  false – в противном случае.
replaceAdjacentText(place, текст) Позволяет заменить текст, находящийся в текущем элементе или рядом с ним, на другой текст, переданный в качестве второго параметра.
scrollIntoView(true | false) Вызывает прокрутку страницы в окне WEB-обозревателя так, чтобы текущий элемент оказался в поле зрения. Если в качестве параметра передано true, то текущий элемент окажется у верхнего края окна, если false – у нижнего.
setAttribute(имя атрибута, значение атрибута, true | false) Присваивает значение атрибуту тега текущего элемента. Если третий параметр установлен в true, поиск атрибутов будет произведен с учетом регистра символов его имени.

document.GetelementbyId(…);

Элемент.style.color=…

borderTopWidth

<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlsns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8" />
<title> Menu </title>
</head>
<body id="page">
    <script type="text/javascript">
    </script>
             <p id="world" Onmouseover="getElementById('page').style.backgroundColor = '#f00';">111111111111111111</p>
             <p id="world" Onmouseover="getElementById('page').style.backgroundColor = '#ccc';">1111111111111111</p>
            <p id="world" Onmouseover="getElementById('page').style.backgroundColor = '#000';">1111111111111111</p>
</body>
</html>
Табл. 3.1. Свойства объекта event
Свойство Пояснение
type Возвращает тип события
returnValue позволяет установить возвращаемое обработчиком события значение.

  • true – (по умолчанию) стандартный обработчик будет вызван
  • false – стандартный обработчик не вызывается
cancelBubble устанавливает признак “всплывания” события

  • true – всплывание события не происходит
  • false – (по умолчанию) событие всплывает
srcElement элемент – источник события
toElement указывает элемент, на который был уведен курсор мыши при возникновении события onMouseOut
fromElement указывает элемент, с которого пришел курсор мыши при возникновении события onMouseOver
button определяет, какие кнопки мыши были нажаты в момент возникновения события

  • 0 – нет нажатых кнопок
  • 1 – левая кнопка
  • 2 – правая кнопка
  • 3 – левая и правая кнопки
  • 4 – средняя кнопка
  • 5 – левая и средняя кнопки
  • 6 – правая и средняя кнопки
  • 7 – все три кнопки
wheelDelta определяет смещение при прокрутке колеса мыши. Отрицательное значение – поворот колеса “на себя”, положительное – поворот колеса “от себя”
offsetX, offsetY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла элемента, отправившего событие.
x, y Координаты курсора мыши в момент возникновения события относительно верхнего левого угла относительно позиционируемого родительского элемента.
clientX, clientY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла клиентской области страницы.
screenX, screenY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла экрана.
keyCode Код нажатой на клавиатуре клавиши в Unicode
altKey Признак состояния кнопки Alt в момент возникновения события: true – нажата, false – свободна
altLeft Признак состояния левой кнопки Alt в момент возникновения события: true – нажата, false – свободна
ctrlKey Признак состояния кнопки Ctrl в момент возникновения события: true – нажата, false – свободна
ctrlLeft Признак состояния левой кнопки Ctrl в момент возникновения события: true – нажата, false – свободна
shiftKey Признак состояния кнопки Shift в момент возникновения события: true – нажата, false – свободна
shiftLeft Признак состояния левой кнопки Shift в момент возникновения события: true – нажата, false – свободна
repeat признак удерживания клавиши

ДЗ!!!

Сделать меню

и форму пароля и логина (display, z-index)

Объекты Image

Img=document.images[0]

Document.images[“img”]

<img src=”1.gif” name=”img”/>

Свойства:

Alt

Src

Width

Height

Complete

События

Load

Error

About

Предзагрузка изображений:

Var imgObj=newImage();

Var imgObj1=newImage(width,height);

Задержки и интервалы

Для отложенного выполнения функции

Используется следующий метод.

Var timeID=setTimeout(“код javascript,timeout);

ClearTimeOut(timeID)- отменения выполнения.

Таймер может быть только один!

Для периодического выполнения функции используется   метод:

Var timeID= setInterval(“код javasctipt”,period)

clearInterval(timerID)

Математический класс Math

Математический класс Math предоставляет программистам-математикам набор тригонометрических и логарифмических функций. Он существует в единственном экземпляре и не требует создания. В таблице 1.1 перечислены свойства класса Math, а в таблице 1.2 перечислены его методы.

Таблица 1.1 – Свойства класса Math.

Свойство Описание
E Содержит константу Эйлера (число е)
PI Содержит число π
LN2 Содержит значение натурального логарифма двух (ln 2)
LN10 Содержит значение натурального логарифма десяти (ln 10)
LOG2E Логарифм числа е по основанию 2
LOG10E Логарифм числа е по основанию 10
SQRT1_2 Корень квадратный из 1/2
SQRT2 Корень квадратный из 2

Таблица 1.2 – Методы класса Math.

Метод Описание
abs(число) Возвращает абсолютное значение аргумента
acos(число) Возвращает арккосинус числа в радианах
asin(число) Возвращает арксинус числа в радианах
atan(число) Возвращает арктангенс числа в радианах
atan2(X,Y) Возвращает угол в радианах между горизонтальной осью и прямой, проведенной через начало координат и точку с координатами X,Y
cos(число) Возвращает косинус числа, заданного в радианах
sin(число) Возвращает синус числа, заданного в радианах
tan(число) Возвращает тангенс числа, заданного в радианах
ceil(число) Возвращает ближайшее целое число, большее или равное аргументу
floor(число) Возвращает ближайшее целое число, меньшее или равное аргументу
round(число) Возвращает целое число, округленное по правилам математики (если дробная часть меньше 0.5, то округляет в большую сторону, если меньше, то в меньшую)
exp(число) Возвращает результат возведения числа е в степень, заданную числом
log(число) Возвращает натуральный логарифм числа
max(число1, число2, …) Возвращает максимальное из перечисленных чисел. Если одно из чисел равно NaN, то возвращается NaN.
min(число1, число2, …) Возвращает минимальное из перечисленных чисел. Если одно из чисел равно NaN, то возвращается NaN.
pow(число, степень) Возвращает результат возведения числа в указанную степень
sqrt(число) Возвращает корень квадратный из числа
random() Возвращает псевдослучайное число от 0 включительно до 1 исключительно

Например:

var t=Math.pow(3,5); //в переменной t будет значение 243

Случайное число в заданном диапазоне:

var a=N+Math.floor(Math.random()*(M-N)),

где N- начало диапазона, M – конец диапазона

Фильтры и преобразования

Фильтры

Запись в CSS:

.className {filter:progid:DXImageTransform.Microsoft.имя фильтра(свойства фильтра)}

Название фильтра Свойства Описание
Alpha opacity=50 (начальный уровень градиентной прозрачности: 0-полная прозрачность – знач.по умолч. ; 100 – полная непрозрачность) Делает элемент страницы полупрозрачным
FinalOpacity=100 (конечный уровень градиентной прозрачности:

0-полная прозрачность – знач.по умолч. ; 100 – полная непрозрачность)

finishX=20 (горизонтальная координата позиции, в которой заканчивается область градиентной прозрачности)
finishY=50 (вертикальная координата позиции, в которой заканчивается область градиентной прозрачности)
StartX, StartY (горизонтальная и вертикальная координаты позиции, в которой начинается область градиентной прозрачности)
Style (параметры градиентной прозрачности: 0-нет градиента, 1-линейный градиент, 2-круговой градиент, 3-прямоугольный градиент)
Blur MakeShadow=true|false (если true, то элемент страницы будет отображаться как тень, если  false – знач.по умолч.- как обычно) Делает элемент страницы размытым
PixelRadius=1-100 (размер области размытия)
ShadowOpacity (прозрачность тени: 0.0-полностью прозрачная, 1.0-полностью непрозрачная)
Strength (дистанция в пикселах, на которой выполняется преобразование)
DropShadow color=red (цвет тени) Заставляет элемент страницы «отбросить» тень, причем тень отображается отдельно от самого элемента
OffX, OffY (горизонтальное и вертикальное смещение тени)
Positive=true|false (усли true – знач. по умолч.- то тень создается из прозрачных пикселов элемента, если false – из непрозрачных)
Glow color=red (цвет свечения) Отображает элемент страницы так, что он кажется «тлеющим»
Strength (дистанция в пикселах, на которой выполняется преобразование)
Matrix Dx=25,Dy=59 (значения матричных преобразований) Изменяет размеры элемента страницы, поворачивает или инвертирует его, используя матричные преобразования
M11,M12,M21,M22 (значения матричных преобразований)
MotionBlur direction=45 (направление, задается в градусах и должно быть кратно 45) Делает элемент страницы размытым, словно быстро движущимся
Pixelate MaxSquare=4 (максимальный размер пиксела) Отображает элемент страницы отдельными пикселами
Shadow color=red (цвет тени) Заставляет элемент страницы отбросить тень
direction=45 (направление, задается в градусах и должно быть кратно 45)
Wave freq=10 (количество волн) Создает волнистое искажение элемента сраницы
LightStrength=0-100 (постоянство окраски волн)
Phase=0-100 (фаза волн)
Strength (дистанция в пикселах, на которой выполняется преобразование)

Пример:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title></title>

<meta content=”Microsoft Visual Studio .NET 7.1″>

<meta content=”http://schemas.microsoft.com/intellisense/ie5″>

</head>

<body>

<img src=”kubiki.jpg” style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)”>

<img src=”kubiki.jpg” style=”filter:progid:DXImageTransform.Microsoft.Blur”>

<img src=”kubiki.jpg” style=”filter:progid:DXImageTransform.Microsoft.DropShadow(color=red)”>

<img src=”kubiki.jpg” style=”filter:progid:DXImageTransform.Microsoft.Shadow(color=red)”>

<img src=”kubiki.jpg” style=”filter:progid:DXImageTransform.Microsoft.Wave(freq=5,lightStrength=60)”>

</body>

</html>

Результат:


Преобразования

Название преобразования Свойства Описание
Barn Motion=”in | out” (in – движение от границ к центру, out – от центра к границам)

Orientation=”horizontal | vertical” (направление преобразования)

Создает эффект “открывающейся двери”
Blinds Bands=5 (количество полосок),

Direction=”up | down | right | left” (направление)

Создает эффект “открывающихся и закрывающихся жалюзи”
CheckerBoard Direction=”up | down | right | left” (направление)

SquaresX, SquaresY (количество рядов по горизонтали и вертикали)

Создает эффект “шахматной доски”
Fade Overlap=”от 0.0 до 1.0” (время, относительно общей продолжительности преобразования, когда старое и новое содержимое отображаются одновременно) Создает эффект наплыва (старое содержимое плавно пропадает, а новое одновременно так же плавно появляется)
GradientWipe GradientSize=”от 0.0 до 1.0” (часть площади элемента, покрываемой градиентной полосой)

Motion=”forward | reverse” (направление движения градиента)

WipeStyle (0–по горизонтали, 1–по вертикали)

Новое содержимое элемента “наползает” на старое, причем граница выглядит как градиентная цветная полоса
Inset Новое содержимое элемента диагонально “наползает” на старое
Iris Motion=”in | out” (in – движение от границ к центру, out – от центра к границам) Создает эффект ирисовой диафрагмы
Pixelate MaxSquare (максимальный размер пикселя) Старое содержимое элемента “рассыпается” на отдельные пиксели и пропадает, а новое так же “собирается” из отдельных пикселей
RadialWipe WipeStyle (способ замещения содержимого элемента: clock–вращение вокруг центра элемента по часовой стрелке, wedge–вращение сразу в обе стороны, radial–радиальное вращение ) Новое содержимое элемента радиально “наползает” на старое
RandomBars Orientation=”horizontal | vertical” (направление преобразования) Старое содержимое элемента страницы “рассыпается” на отдельные линии и пропадает, а новое так же “собирается” из отдельных линий
RandomDissolve Новое содержимое элемента поточечно “проявляется” на месте старого
Slide Bands=5 (количество полосок)

SlideStyle (способ замещения содержимого элемента: hide–скрытие, push–выталкивание, swap–замена)

Старое содержимое элемента “сдвигается” в сторону, открывая под собой новое
Spiral GridSizeX, GridSizeY (количество полосок по горизонтали или вертикали. Может быть от 1 до 100) Новое содержимое элемента спирально закрашивает старое
Stretch StretchStyle (способ замещения содержимого элемента: hide–скрытие, push–выталкивание, spin–замена) Новое содержимое элемента “растягивается”, заменяя собой старое
Strips Motion=”leftdown | leftup | rightup | rightdown” (угол, из которого появляется новое содержимое) Новое содержимое элемента диагонально отдельными полосками “наползает” на старое
Wheel Spokes=”от 2 до 20” (количество секторов) Новое содержимое элемента посекторно “наползает” на старое
Zigzag GridSizeX, GridSizeY (количество полосок по горизонтали или вертикали. Может быть от 1 до 100) Новое содержимое элемента зигзагообразно отдельными полосками “наползает” на старое

Кроме свойств, перечисленных в таблице, все преобразования поддерживают свойства:

  • Duration – продолжительность преобразования в секундах;
  • Enadled – если true, то фильтр или преобразование применяется к элементу;
  • Percent – процент выполнения преобразования. Может быть от 0 (преобразование еще не начиналось) до 100 (преобразование закончено).

Также преобразования поддерживают методы:

  • Apply() – “Замораживает” элемент, после чего можно применять к нему любое преобразование;
  • Play() – Запускает преобразование;
  • Stop() – Немедленно останавливает преобразование.

Пример:

<html>

<head> <title></title>

<style type=”text/css”>

.f1{filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=”2″,direction=left,squaresX=”20″, squaresY=”50″);position:absolute}

.f2 {filter:progid:DXImageTransform.Microsoft.RandomBars(duration=”2″,orientation=horizontal);position:absolute}

</style>

<script >

var a=0;

function transform()

{

if(a==0)

{

pic.className=”f2″;

pic.filters.item(0).Apply();

pic.src=”pep1.jpg”;

pic.filters.item(0).Play();

a=1;

}

else

{

pic.className=”f1″;

pic.filters.item(0).Apply();

pic.src=”pep.jpg”;

pic.filters.item(0).Play();

a=0;

}

}

</script></head>

<body >

<img src=”./pep.jpg”  onfilterchange=”transform()”></body>

</html>

Объектная модель браузера Microsoft Internet Explorer

IE: Internet Explorer, F: Firefox, O: Opera.

Navigator Object Collections

Collection Description IE F O
plugins[] Returns a reference to all embedded objects in the document 4 1 9

Navigator Object Properties

Property Description IE F O
appCodeName Returns the code name of the browser 4 1 9
appMinorVersion Returns the minor version of the browser 4 No No
appName Returns the name of the browser 4 1 9
appVersion Returns the platform and version of the browser 4 1 9
browserLanguage Returns the current browser language 4 No 9
cookieEnabled Returns a Boolean value that specifies whether cookies are enabled in the browser 4 1 9
cpuClass Returns the CPU class of the browser’s system 4 No No
onLine Returns a Boolean value that specifies whether the system is in offline mode 4 No No
platform Returns the operating system platform 4 1 9
systemLanguage Returns the default language used by the OS 4 No No
userAgent Returns the value of the user-agent header sent by the client to the server 4 1 9
userLanguage Returns the OS’ natural language setting 4 No 9

Navigator Object Methods

Method Description IE F O
javaEnabled() Specifies whether or not the browser has Java enabled 4 1 9
taintEnabled() Specifies whether or not the browser has data tainting enabled 4 1 9

IE: Internet Explorer, F: Firefox, O: Opera.

Location Object Properties

Property Description IE F O
hash Sets or returns the URL from the hash sign (#) 4 1 9
host Sets or returns the hostname and port number of the current URL 4 1 9
hostname Sets or returns the hostname of the current URL 4 1 9
href Sets or returns the entire URL 4 1 9
pathname Sets or returns the path of the current URL 4 1 9
port Sets or returns the port number of the current URL 4 1 9
protocol Sets or returns the protocol of the current URL 4 1 9
search Sets or returns the URL from the question mark (?) 4 1 9

Location Object Methods

Method Description IE F O
assign() Loads a new document 4 1 9
reload() Reloads the current document 4 1 9
replace() Replaces the current document with a new one 4 1 9

IE: Internet Explorer, F: Firefox, O: Opera.

History Object Properties

Property Description IE F O
length Returns the number of elements in the history list 4 1 9

History Object Methods

Method Description IE F O
back() Loads the previous URL in the history list 4 1 9
forward() Loads the next URL in the history list 4 1 9
go() Loads a specific page in the history list 4 1 9

IE: Internet Explorer, F: Firefox, O: Opera.

Screen Object Properties

Property Description IE F O
availHeight Returns the height of the display screen (excluding the Windows Taskbar) 4 1 9
availWidth Returns the width of the display screen (excluding the Windows Taskbar) 4 1 9
bufferDepth Sets or returns the bit depth of the color palette in the off-screen bitmap buffer 4 No No
colorDepth Returns the bit depth of the color palette on the destination device or buffer 4 1 9
deviceXDPI Returns the number of horizontal dots per inch of the display screen 6 No No
deviceYDPI Returns the number of vertical dots per inch of the display screen 6 No No
fontSmoothingEnabled Returns whether the user has enabled font smoothing in the display control panel 4 No No
height The height of the display screen 4 1 9
logicalXDPI Returns the normal number of horizontal dots per inch of the display screen 6 No No
logicalYDPI Returns the normal number of vertical dots per inch of the display screen 6 No No
pixelDepth Returns the color resolution (in bits per pixel) of the display screen No 1 9
updateInterval Sets or returns the update interval for the screen 4 No No
width Returns width of the display screen 4 1 9

Объектная модель браузера (BOM – Browsers Object Model)

Объект navigator

Объект navigator служит для доступа к самой программе Web-обозревателя. Свойства объекта navigator представлены в таблице 1.1, методы – в таблице 1.2.

Таблица 1.1 – Свойства объекта navigator.

Свойство Описание
appCodeName Возвращает имя кода программы Web-обозревателя. И для Internet Explorer и для Navigator вернет строку “Mozilla”.
appName Возвращает официальное название программы Web-обозревателя.
appVersion Возвращает версию программы Web-обозревателя
appMinorVersion Возвращает дополнительную информацию о программе Web-обозревателя
browserLanguage

(поддерживается только IE 4.0 и выше)

Возвращает код языка программы Web-обозревателя.
systemLanguage

(поддерживается только IE 4.0 и выше)

Возвращает код языка  операционной системы клиента.
userLanguage

(поддерживается только IE 4.0 и выше)

То же самое, что browserLanguage.
language

(поддерживается только Navigator 4.0 и выше)

Возвращает код языка программы Web-обозревателя.
platform Возвращает название клиентской платформы.
cpuClass Возвращает класс процессора клиентского компьютера.
onLine

(поддерживается только IE 4.0 и выше)

Возвращает true, если клиент в настоящий момент подключен к Internet (находится в режиме on-line), и false, если отключен (off-line).
userAgent Возвращает строку, идентифицирующую Web-обозреватель клиента.
cookieEnabled

(поддерживается только IE 4.0 и выше)

Возвращает true, если Web-обозревателю разрешен пользователем прием cookie.

Таблица 1.2 – Методы объекта navigator

Метод Описание
javaEnabled() Возвращает true, если Web-обозревателю разрешено пользователем выполнение сценариев JavaScript

В основном  объект navigator используется для определения версии и типа браузера у пользователя, для загрузки соответствующего документа. Поскольку элементы и скрипты работают и отображаются в разных версиях и типах браузеров различно.


Объект screen

Объект screen служит для доступа к характеристикам видеосистемы компьютера пользователя.

Свойства объекта screen представлены в таблице 1.3, методов данный объект не поддерживает.

Таблица 1.3 – Свойства объекта screen

Свойство Описание
availWidth Возвращает ширину полезной области экрана без панели задач и подобных ей элементов графического интерфейса системы.
availHeight Возвращает высоту полезной области экрана без панели задач и подобных ей элементов графического интерфейса системы.
width Возвращает полную ширину экрана
height Возвращает полную высоту экрана
colorDepth Возвращает глубину цвета.

Объект history

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

Все поддерживаемые этим объектом свойства перечислены в таблице 1.4, а методы – в таблице 1.5.

Таблица 1.4 – Свойства объекта history

Свойство Описание
current

(поддерживается только Navigator 3.0 и выше)

Возвращает Интернет-адрес документа, загруженного в настоящее время.
length Возвращает размер списка истории
next

(поддерживается только Navigator 3.0 и выше)

Возвращает Интернет-адрес следующего в списке истории документа.
previous

(поддерживается только Navigator 3.0 и выше)

Возвращает Интернет-адрес предыдущего в списке истории документа.

Таблица 1.5 –  Методы объекта history

Метод Описание
back() Загружает в окно браузера предыдущий документ из списка истории
forward() Загружает в окно браузера следующий документ из списка истории (если возможно)
go( [адрес] )

(поддерживается только Navigator)

Загружает в окно браузера документ из списка истории, Интернет-адрес которого наиболее близок к переданному в качестве параметра.
go( [приращение] )

(поддерживается только Navigator)

Перемещается в списке истории на количество позиций, переданное в качестве параметра. Можно задавать как положительные, так и отрицательные значения.
go( [позиция] )

(поддерживается только IE 4.0 и выше)

Перемещается в списке истории на позицию, номер которой передан в качестве параметра.


Объект location

Объект location содержит информацию о местонахождении текущего документа, т.е. его Интернет-адресе. Его также можно использовать для перехода на другой документ и перезагрузки текущего документа.

Все поддерживаемые свойства объекта location перечислены в таблице 1.6, а методы – в таблице 1.7.

Таблица 1.6 – Свойства объекта location

Свойство Описание
hash Имя «закладки» в Интернет-адресе документа.
host Имя сервера с номером порта
hostname Имя сервера
href Полный Интернет-адрес документа
pathname Путь и имя файла
port Номер порта (если не указан, то используется стандартный 80 порт)
protocol Идентификатор протокола
search Строка параметров, если она есть (от символа ? до конца строки)

Если свойству href присвоить новый адрес, то произойдет переход на указанный документ, при этом предыдущий документ сохраняется в списке истории.

Например:

location.href=”new_page.html”;

Таблица 1.7 – Методы объекта location

Метод Описание
assign( [адрес] )

(поддерживается только IE 4.0 и выше)

Загружает документ, адрес которого передан в качестве параметра.
reload( [true | false] ) Перезагружает документ. Если в скобках стоит true, то перезагрузка происходит с сервера, если false, то из КЭШа браузера.
replace( [адрес] ) Загружает документ, адрес которого передан в качестве параметра, при этом предыдущий документ в списке истории не сохраняется.

Например:

location.replace(“new_page.html”);


Объект window

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

Свойства объекта window представлены в таблице 1.8, методы – в таблице 1.9.

Таблица 1.8 – Свойства объекта window

Свойство Описание
closed Возвращает true, если дочернее окно закрыто. Может быть использовано при работе с несколькими окнами.
defaultStatus Текст по умолчанию, отображаемый в строке состояния.
document Содержит ссылку на документ, загруженный в текущее окно.
frames Содержит ссылку на коллекцию фреймов.
history Содержит ссылку на объект history браузера.
innerHeight (Поддерживается только Navigator 4.0 и выше) Содержит высоту клиентской области окна(без рамок, меню, панели инструментов) в пикселях.
innerWidth (Поддерживается только Navigator 4.0 и выше) Содержит ширину клиентской области окна (без рамок, меню, панели инструментов) в пикселях.
length Содержит количество фреймов.
location Содержит ссылку на объект location документа, загруженного в текущее окно.
name Содержит имя окна или фрейма.
navigator Содержит ссылку на объект navigator браузера.
opener Содержит ссылку на окно, с помощью которого было открыто текущее окно.
outerHeight (Поддерживается только Navigator 4.0 и выше) Содержит полную высоту окна (с рамками, меню, панелью инструментов) в пикселях.
outerWidth (Поддерживается только Navigator 4.0 и выше) Содержит полную ширину окна (с рамками, меню, панелью инструментов) в пикселях.
pageXOffset

(Поддерживается только Navigator 4.0 и выше)

Возвращает расстояние по горизонтали между текущей позицией окна и левой границей документа. При прокручивании содержимого окна вправо значение этого свойства увеличивается, влево – уменьшается.
pageYOffset

(Поддерживается только Navigator 4.0 и выше)

Возвращает расстояние по вертикали между текущей позицией окна и верхней границей документа. При прокручивании содержимого окна вниз значение этого свойства увеличивается, вверх – уменьшается.
parent возвращает ссылку на родительское окно, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на текущее окно.
screen Возвращает ссылку на объект screen
screenLeft

(Поддерживается только IE 5.0 и выше)

Возвращает горизонтальную координату левого верхнего угла окна.
screenTop

(Поддерживается только IE 5.0 и выше)

Возвращает вертикальную координату левого верхнего угла окна.
screenX

(Поддерживается только Navigator 4.0 и выше)

Горизонтальная координата левого верхнего угла окна.
screenY

(Поддерживается только Navigator 4.0 и выше)

Вертикальная координата левого верхнего угла окна.
self Возвращает ссылку на объект window текущего окна.
status Текст, отображаемый в строке состояния браузера.
top Возвращает ссылку на родительское окно самого верхнего уровня, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на текущее окно.
window Возвращает ссылку на объект window текущего окна.

Таблица 1.9 – Методы  объекта window

Метод Описание
alert(“текст”) Выводит на экран окно предупреждения с текстом, переданным в качестве параметра.
blur() Удаляет фокус с окна
clearInterval(timerId) Останавливает таймер с указанным timerId, установленный методом setInterval
clearTimeout(timerId) Останавливает таймер с указанным timerId, установленный методом setTimeout
close() Закрывает текущее окно. Если окно было открыто методом open(), то окно закрывается сразу, если окно было открыто пользователем, то сначала появится окно предупреждения, предлагающее пользователю сделать выбор.
confirm(“текст”) Выводит на экран окно предупреждения с текстом, переданным в качестве параметра, предлагающее пользователю сделать выбор. Если пользователь нажмет кнопку ОК, возвращается true, если Отмена – false.
focus() Переносит фокус на текущее окно.
moveBy(dx,dy) Перемещает окно на dx пикселов вправо и на dy пикселов вниз. Для перемещения вверх в влево необходимо задать отрицательные значения.
moveTo(x,y) Устанавливает окно в точку, заданную координатами x,y
open(“адрес”,”имя”,”свойства окна”) Открывает новое окно, загружает в него документ, адрес которого передан в качестве первого параметра, присваивает окну имя, заданное в качетсве второго параметра. В третьем параметре содержится список свойств окна, разделнных запятыми.

( Свойства представлены в таблице 1.10.)

print() Печатает содержимое окна на принтере.
prompt (“запрос на ввод”,  ”значение по умолчанию”) Выводит на экран диалоговое окно с полем ввода, приглашающее пользователя ввести какое-либо строковое значение. Текст приглашения передается в качетсве первого параметра, во втором может быть передано значение по умолчанию.
resizeBy(dw,dh) Увеличивает окно на dw пикселов по горизонтали, и на dh пикселов по вертикали. Для уменьшения окна необходимо задавать отрицательные значения.
resizeTo(w,h) Устанавливает размер окна, заданный размерами w и h
scrollBy(dx,dy) прокручивает содержимое окна на dx пикселов по горизонтали, и на dy пикселов по вертикали. Для прокручивания влево и вверх необходимо задавать отрицательные значения.
scrollTo(x,y) прокручивает содержимое окна в точку, заданую координатами x,y.
setInterval(“функция()”,время в мс,  список_аргументов_функции_разделенных_запятыми) Вычисляет значение выражения или вызывает функцию, каждый раз по истечении заданного интервала (в миллисекундах). Может передавать в функцию заданные в списке аргументы. Возвращает указатель на объект таймера, который можно использовать в методе clearInterval для остановки или уничтожения таймера.
setTimeout(“функция()”,время в мс,  список_аргументов_функции_разделенных_запятыми) Вычисляет значение выражения или вызывает функцию, один раз по истечении заданного интервала (в миллисекундах). Может передавать в функцию заданные в списке аргументы. Возвращает указатель на объект таймера, который можно использовать в методе clearTimeout для остановки или уничтожения таймера.

Таблица 1.10 – Свойства окна, передаваемые методу open()

Свойство Описание
height Задает высоту создаваемого окна в пикселах
width Задает ширину создаваемого окна в пикселах.
left

(Поддерживается только IE 4.0 и выше)

Задает горизонтальную координату левого верхнего угла создаваемого окна.
top

(Поддерживается только IE 4.0 и выше)

Задает вертикальную координату левого верхнего угла создаваемого окна.
screenX

(Поддерживается только Navigator 4.06 и выше)

Задает горизонтальную координату левого верхнего угла создаваемого окна.
screenY

(Поддерживается только Navigator 4.06 и выше)

Задает вертикальную координату левого верхнего угла создаваемого окна.
location=yes | no Включает или отключает от ображение панели адреса, включающего строку ввода адреса, у создаваемого окна
menubar=yes | no Включает или отключает отображение строки меню у создаваемого окна
toolbar=yes | no Включает или отключает отображение панели инструментов у создаваемого окна
status=yes | no Включает или отключает отображение строки состояния у создаваемого окна
scrollbars=yes | no Включает или отключает отображение полос прокрутки у создаваемого окна
resizable=yes | no Включает или отключает возможность изменения размеров создаваемого окна.

При указании хотя бы одного свойства нового окна, все свойства, принимающие значение yes | no, устанавливаются в no.

Например:

1) Создание нового пустого окна произвольного размера

window.open();

2) Создание нового окна и загрузка в него существующего документа

window.open(“page.html”,””,””);

3) Создание нового окна с указанием свойств нового окна

window.open(“”,””,”width=400,height=400,menubar=yes,status=yes”);

4) Создание нового окна с новым документом и запись в него информации

var w1=window.open(“”,””,”width=400,height=400,menubar=yes,status=yes”);

w1.document.write(“<body><h1>hello</h1></body>”);

<head>

<script>

function newWindow()

{

var newwin=window.open(“”,”",”width=200,height=200,resizable=0″);

newwin.document.write(“Hello!”);

newwin.document.body.style.backgroundColor=(“red”);

}

</script>

</head>

<body >

</body>

Quetrix

Формы

<form name=”Имя” action=”url” method=”POST|GET”>

</form>

GET?…передает открыто

POST?…передается скрыто

Текстовое поле

text(Обычное текстовое поле, одна строка данных)

textarea(Несколько строк поля)

password(Для ввода пароля)

hidden (невидимый)

создается:

<input type=”Тип” name=”” value=”значение по умолчанию” size=”размер в символах”/>

Флажки(индикаторы) и переключатели.

Флажки:

<intput type=”checkbox” name=”” value=”” checked=”cheked”/>

Если отмечен тогда 1 если нет но пусто!

<input type=”radio” name=”name” value=”id можно” checked=”checked”/>

Список

<select name=”name” size=”1” multiple=”multiple” <option value=”option1” >Spisok1</option>

<option value=”option2” selected=”selected>”</option>

</select>

Кнопки:

<input type=”submit” value=”напись”/>

<input type=”reset” value=”Сброс”/>

<button name=”…”>My BUTTON</button>

Программирование форм

Document.forms[Index]

либо

Document.forms[“Name”]

Либо

Document.Имя

Name, method, action, length, elements

Общие свойства у всех форм

Type, name, value, disabled (true,false),onfocus,onblur.

Методы

focus();

blur();

ДЗ:

Сделать форму абитуриента.

Все из перечисленных форм были!

Получив ссылку на объект Form, каким является форма, мы можем читать и изменять следующие свойства форм:

Табл. 7.1. Свойства и методы объекта Form
Свойство Пояснение
name позволяет получить имя формы
method позволяет получить/установить метод отправки данных формы
action позволяет получить/установить адрес сценария или исполняемого модуля на сервере, которому будут отправлены данные формы для дальнейшей обработки
length возвращает количество элементов формы
elements коллекция, содержащая все элементы формы

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

Табл. 7.2. Свойства и методы элементов управления
Свойство Пояснение
name позволяет получить имя элемента управления
type тип элемента управления (“text”, “checkbox”, “button” и т.д.)
value значение элемента (текст)
disabled true – элемент недоступен, false – доступен.
onfocus событие, возникающее при активации элемента мышью или с помощью кнопки Tab
onblur событие, возникающее при деактивации элемента
focus() метод, имитирующий событие onfocus, принудительно передает фокус ввода элементу
blur() метод, имитирующий событие onblur, принудительно убирает фокус ввода с элемента
Программирование текстовых полей

Текстовые поля являются наиболее распространенными элементами форм. Набор свойств и методов этих элементов не слишком отличается от приведенных в таблице 7.2:

Табл. 7.3. Свойства, методы и события текстовых полей
Свойства Методы События
name blur() onblur
type focus() onfocus
value select() onselect
defaultValue onchange
disabled onkeydown
onkeyup
onkeypess

Свойство defaultValue позволяет получить значение текстового поля по умолчанию, то есть тот текст, который пользователь видит при загрузке формы. Метод select() служит для выделения содержимого элемента.

Программирование флажков

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

Флажки обладают несколько иным набором свойств и методов, чем текстовые поля:

Табл. 7.4. Свойства, методы и события флажков
Свойства Методы События
name blur() onblur
type click() onclick
value onmousedown
checked onmouseup
defaultChecked
disabled
Программирование переключателей

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

Табл. 7.5. Свойства, методы и события переключателей
Свойства Методы События
name click() onclick
type onmousedown
value onmouseup
checked
defaultChecked
disabled
length
Прораммирование списков

Списки применяются в формах практически по тем же причинам, что и флажки или переключатели с той лишь разницей, что список имеет компактную форму представления, даже если количество элементов списка велико. Так как, списки строятся с использованием двух типов элементов (select – сам список и option – элемент списка), то и нам придется рассматривать 2 типа объектов.

Ниже в таблицах предствалены свойства списков и их элементов:

Табл. 7.6. Свойства, методы и события списков
Свойства Методы События
name blur() onblur
length focus() onfocus
options onchange
selectedIndex
disabled
Табл. 7.7. Свойства элементов списков
Свойство Пояснение
defaultSelected Возвращает true, если данный элемент является выбранным по умолчанию
index номер элемента
selected Возвращает true, если данный элемент является выбранным
value Возвращает значение атрибута value
text Возвращает текст элемента заключенный между дескрипторами <option></option>

Регулярные выражения

  1. Объект RegExp
  2. Спецсимволы в регулярном выражении
  3. Проверка результатов: метод test
  4. Поиск совпадений: метод exec
  5. Строковые методы, поиск и замена
    1. Метод search(regexp)
    2. Метод match(regexp)
    3. Замена, replace
    4. Спецсимволы в строке замены
    5. Замена через функцию
  6. Дополнительно

Регулярные выражения в javascript имеют особую краткую форму и стандартный PCRE-синтаксис.

Работают они через специальный объект RegExp.

Кроме того, у строк есть свои методы search/match/replace, но чтобы их понять – разберем-таки сначала RegExp.

Объект RegExp

Объект типа RegExp, или, короче, регулярное выражение, можно создать двумя путями

/pattern/флаги
new RegExp("pattern"[, флаги])

pattern – регулярное выражение для поиска (о замене – позже), а флаги – строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск).

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

var reg = /ab+c/i
var reg = new RegExp("ab+c", "i")

При втором вызове – т.к регулярное выражение в кавычках, то нужно дублировать

// эквивалентны
re = new RegExp("w+")
re = /w+/

При поиске можно использовать большинство возможностей современного PCRE-синтаксиса.

Спецсимволы в регулярном выражении

Свернуть/Развернуть таблицу

Символ Значение
Для обычных символов – делает их специальными. Например, выражение /s/ ищет просто символ ’s’. А если поставить перед s, то /s/ уже обозначает пробельный символ.И наоборот, если символ специальный, например *, то сделает его просто обычным символом “звездочка”. Например, /a*/ ищет 0 или больше подряд идущих символов ‘a’. Чтобы найти а со звездочкой ‘a*’ – поставим перед спец. символом: /a*/.
^ Обозначает начало входных данных. Если установлен флаг многострочного поиска ("m"), то также сработает при начале новой строки.Например, /^A/ не найдет ‘A’ в “an A”, но найдет первое ‘A’ в “An A.”
$ Обозначает конец входных данных. Если установлен флаг многострочного поиска, то также сработает в конце строки.Например, /t$/ не найдет ‘t’ в “eater”, но найдет – в “eat”.
* Обозначает повторение 0 или более раз. Например, /bo*/ найдет ‘boooo’ в “A ghost booooed” и ‘b’ в “A bird warbled”, но ничего не найдет в “A goat grunted”.
+ Обозначает повторение 1 или более раз. Эквивалентно {1,}. Например, /a+/ найдет ‘a’ в “candy” и все ‘a’ в “caaaaaaandy”.
? Обозначает, что элемент может как присутствовать, так и отсутствовать. Например, /e?le?/ найдет ‘el’ в “angel” и ‘le’ в “angle.”Если используется сразу после одного из квантификаторов *, +, ?, или {}, то задает “нежадный” поиск (повторение минимально возможное количество раз, до ближайшего следующего элемента паттерна), в противоположность “жадному” режиму по умолчанию, при котором количество повторений максимально, даже если следующий элемент паттерна тоже подходит.Кроме того, ? используется в предпросмотре, который описан в таблице под (?=), (?!), и (?: ).
. (Десятичная точка) обозначает любой символ, кроме перевода строки: n r u2028 or u2029. (можно использовать [sS] для поиска любого символа, включая переводы строк). Например, /.n/ найдет ‘an’ и ‘on’ в “nay, an apple is on the tree”, но не ‘nay’.
(x) Находит x и запоминает. Это называется “запоминающие скобки”. Например, /(foo)/ найдет и запомнит ‘foo’ в “foo bar.” Найденная подстрока хранится в массиве-результате поиска или в предопределенных свойствах объекта RegExp: $1, ..., $9.Кроме того, скобки объединяют то, что в них находится, в единый элемент паттерна. Например, (abc)* – повторение abc 0 и более раз.
(?:x) Находит x, но не запоминает найденное. Это называется “незапоминающие скобки”. Найденная подстрока не сохраняется в массиве результатов и свойствах RegExp.Как и все скобки, объединяют находящееся в них в единый подпаттерн.
x(?=y) Находит x, только если за x следует y. Например, /Jack(?=Sprat)/ найдет ‘Jack’, только если за ним следует ‘Sprat’. /Jack(?=Sprat|Frost)/ найдет ‘Jack’, только если за ним следует ‘Sprat’ или ‘Frost’. Однако, ни ‘Sprat’ nor ‘Frost’ не войдут в результат поиска.
x(?!y) Находит x, только если за x не следует y. Например, /d+(?!.)/ найдет число, только если за ним не следует десятичная точка. /d+(?!.)/.exec("3.141") найдет 141, но не 3.141.
x|y Находит x или y. Например, /green|red/ найдет ‘green’ в “green apple” и ‘red’ в “red apple.”
{n} Где n – положительное целое число. Находит ровно n повторений предшествующего элемента. Например, /a{2}/ не найдет ‘a’ в “candy,” но найдет оба a в “caandy,” и первые два a в “caaandy.”
{n,} Где n – положительное целое число. Находит n и более повторений элемента. Например, /a{2,} не найдет ‘a’ в “candy”, но найдет все ‘a’ в “caandy” и в “caaaaaaandy.”
{n,m} Где n и m – положительные целые числа. Находят от n до m повторений элемента.
[xyz] Набор символов. Находит любой из перечисленных символов. Вы можете указать промежуток, используя тире. Например, [abcd] – то же самое, что [a-d]. Найдет ‘b’ в “brisket” и ‘c’ в “ache”.
[^xyz] Любой символ, кроме указанных в наборе. Вы также можете указать промежуток. Например, [^abc] – то же самое, что [^a-c]. Найдет ‘r’ в “brisket” и ‘h’ в “chop.”
[b] Находит символ backspace. (Не путать с b.)
b Находит границу слов (латинских), например пробел. (Не путать с [b]). Например, /bnw/ найдет ‘no’ в “noonday”; /wyb/ найдет ‘ly’ в “possibly yesterday.”
B Обозначает не границу слов. Например, /wBn/ найдет ‘on’ в “noonday”, а /yBw/ найдет ‘ye’ в “possibly yesterday.”
cX Где X – буква от A до Z. Обозначает контрольный символ в строке. Например, /cM/ обозначает символ Ctrl-M.
d находит цифру из любого алфавита (у нас же юникод). Испльзуйте [0-9], чтобы найти только обычные цифры. Например, /d/ или /[0-9]/ найдет ‘2′ в “B2 is the suite number.”
D Найдет нецифровой символ (все алфавиты). [^0-9] – эквивалент для обычных цифр. Например, /D/ или /[^0-9]/ найдет ‘B’ в “B2 is the suite number.”
f,r,n Соответствующие спецсимволы form-feed, line-feed, перевод строки.
s Найдет любой пробельный символ, включая пробел, табуляцию, переводы строки и другие юникодные пробельные символы. Например, /sw*/ найдет ‘ bar’ в “foo bar.”
S Найдет любой символ, кроме пробельного. Например, /Sw*/ найдет ‘foo’ в “foo bar.”
t Символ табуляции.
v Символ вертикальной табуляции.
w Найдет любой словесный (латинский алфавит) символ, включая буквы, цифры и знак подчеркивания. Эквивалентно [A-Za-z0-9_]. Например, /w/ найдет ‘a’ в “apple,” ‘5′ в “$5.28,” и ‘3′ в “3D.”
W Найдет любой не-(лат.)словесный символ. Эквивалентно [^A-Za-z0-9_]. Например, /W/ и /[^$A-Za-z0-9_]/ одинаково найдут ‘%’ в “50%.”
n где n – целое число. Обратная ссылка на n-ю запомненную скобками подстроку. Например, /apple(,)sorange1/ найдет ‘apple, orange,’ в “apple, orange, cherry, peach.”. За таблицей есть более полный пример.
Найдет символ NUL. Не добавляйте в конец другие цифры.
xhh Найдет символ с кодом hh (2 шестнадцатиричных цифры)
uhhhh Найдет символ с кодом hhhh (4 шестнадцатиричных цифры).

Проверка результатов: метод test

Чтобы просто проверить, подходит ли строка под регулярное выражение, используется метод test:

if ( /s/.test("строка") ) {
...В строке есть пробелы!...
}

Поиск совпадений: метод exec

Метод exec возвращает массив и ставит свойства регулярного выражения.
Если совпадений нет, то возвращается null.

Например,

Выделить все

// Найти одну d, за которой следует 1 или более b, за которыми одна d
// Запомнить найденные b и следующую за ними d
// Регистронезависимый поиск
var myRe = /d(b+)(d)/ig;
var myArray = myRe.exec("cdbBdbsbz");

В результате выполнения скрипта будут такие результаты:

Объект Свойство/Индекс Описания Пример
myArray Содержимое myArray. ["dbBd", "bB", "d"]
index Индекс совпадения (от 0) 1
input Исходная строка. cdbBdbsbz
[0] Последние совпавшие символы dbBd
[1], ...[n] Совпадения во вложенных скобках, если есть. Число вложенных скобок не ограничено. [1] = bB
[2] = d
myRe lastIndex Индекс, с которого начинать следующий поиск. 5
ignoreCase Показывает, что был включен регистронезависимый поиск, флаг “i“. true
global Показывает, что был включен флаг “g” поиска всех совпадений. true
multiline Показывает, был ли включен флаг многострочного поиска “m“. false
source Текст паттерна. d(b+)(d)

Если в регулярном выражении включен флаг “g“, Вы можете вызывать метод exec много раз для поиска последовательных совпадений в той же строке. Когда Вы это делаете, поиск начинается на подстроке str, с индекса lastIndex. Например, вот такой скрипт:

Выделить все

var myRe = /ab*/g;
var str = "abbcdefabh";
while ((myArray = myRe.exec(str)) != null) {
    var msg = "Found " + myArray[0] + ".  ";
    msg += "Next match starts at " + myRe.lastIndex;
    print(msg);
}

Этот скрипт выведет следующий текст:

Found abb. Next match starts at 3
Found ab. Next match starts at 9

В следующем примере функция выполняет поиск по input. Затем делается цикл по массиву, чтобы посмотреть, есть ли другие имена.

Предполагается, что все зарегистрированные имена находятся в массиве А:

Выделить все

var A = ["Frank", "Emily", "Jane", "Harry", "Nick", "Beth", "Rick",
         "Terrence", "Carol", "Ann", "Terry", "Frank", "Alice", "Rick",
         "Bill", "Tom", "Fiona", "Jane", "William", "Joan", "Beth"];
function lookup(input)
{
  var firstName = /w+/i.exec(input);
  if (!firstName)
  {
    print(input + " isn't a name!");
    return;
  }
  var count = 0;
  for (var i = 0; i < A.length; i++)
  {
    if (firstName[0].toLowerCase() == A[i].toLowerCase())
      count++;
  }
  var midstring = (count == 1) ? " other has " : " others have ";
  print("Thanks, " + count + midstring + "the same name!")
}

Строковые методы, поиск и замена

Следующие методы работают с регулярными выражениями из строк.

Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.

Так что вызовы эквивалентны:

var i = str.search(/s/)
var i = str.search("s")

При использовании кавычек нужно дублировать и нет возможности указать флаги, поэтому иногда бывает удобна и полная форма

var i = str.search(new RegExp("s","g"))

Метод search(regexp)

Возвращает индекс регулярного выражения в строке, или -1.

Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод search(аналогично RegExp-методы test). Чтобы получить больше информации, используйте более медленный метод match(аналогичный методу RegExp exec).

Этот пример выводит сообщение, в зависимости от того, подходит ли строка под регулярное выражение.

Выделить все

function testinput(re, str){
   if (str.search(re) != -1)
      midstring = " contains ";
   else
      midstring = " does not contain ";
   document.write (str + midstring + re.source);
}

Метод match(regexp)

Если в regexp нет флага g, то возвращает тот же результат, что regexp.exec(string).

Если в regexp есть флаг g, то возвращает массив со всеми совпадениями.

Чтобы просто узнать, подходит ли строка под регулярное выражение regexp, используйте regexp.test(string).

Если Вы хотите получить первый результат – попробуйте regexp.exec(string).

В следующем примере match используется, чтобы найти “Chapter”, за которой следует 1 или более цифр, а затем цифры, разделенные. В регулярном выражении есть флаг i, так что регистр будет игнорироваться.

str = "For more information, see Chapter 3.4.5.1";
re = /chapter (d+(.d)*)/i;
found = str.match(re);
alert(found);

Скрипт выдаст массив из совпадений:

  • Chapter 3.4.5.1 – полностью совпавшая строка
  • 3.4.5.1 – первая скобка
  • .1 – внутренняя скобка

Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с match. Будут найдены все буквы от А до Е и от а до е, каждая – в отдельном элементе массива.

Выделить все

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = /[A-E]/gi;
var matches = str.match(regexp);
document.write(matches);
// matches = ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

Замена, replace

Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис – такой:

var newString = str.replace(regexp/substr, newSubStr/function)

regexp

Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2

substr

Строка, которая будет заменена на newSubStr.

newSubStr

Строка, которая заменяет подстроку из аргумента номер 1.

function

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

Метод replace не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.

Чтобы осуществить глобальную замену, включите в регулярное выражение флаг "g".

Если первый аргумент – строка, то она не преобразуется в регулярное выражение, так что, например,

var ab = "a b".replace("s","..") // = "a b"

Вызов replace оставил строку без изменения, т.к искал не регулярное выражение s, а строку “s”.

Спецсимволы в строке замены

В строке замены могут быть такие спецсимволы:

Pattern Inserts
$$ Вставляет “$”.
$& Вставляет найденную подстроку.
$` Вставляет часть строки, которая предшествует найденному вхождению.
$' Вставляет часть строки, которая идет после найденного вхождения.
$n or $nn Где n или nn – десятичные цифры, вставляет подстроку вхождения, запомненную n-й вложенной скобкой, если первый аргумент – объект RegExp.

Замена через функцию

Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.

В функции можно динамически генерировать и возвращать строку подстановки.

Первый параметр функции – найденная подстрока. Если первым аргументом replace является объект RegExp, то следующие n параметров содержат совпадения из вложенных скобок. Последние два параметра – позиция в строке, на которой произошло совпадение и сама строка.

Например, следующий вызов replace возвратит XXzzzz – XX , zzzz.

Выделить все

function replacer(str, p1, p2, offset, s)
{
return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)

Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра p1, p2.
Если бы были три скобки, то в функцию пришлось бы добавить параметр p3.

Следующая функция заменяет слова типа borderTop на border-top:

Выделить все

function styleHyphenFormat(propertyName)
{
  function upperToHyphenLower(match)
  {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/, upperToHyphenLower);
}

Дополнительно

Для общего понимания регулярных выражений можно почитать Статью в wikipedia.

Более подробно они описаны в книге (англ.) Beginning Regular Expressions.

DOM- (document object model )–используется в основном в XML дом это представления документа в виде дерева

<html>

<head>

<title>TITLE</head>

</head>

<body>

</body>

</html>

HTML

Head                                      BODY

Title

Заголовок                                      Текст

<html>

<head>

<title>TITLE</head>

</head>

<body>

Текст1

<ul>

<li>el1</li>

<li>el1</li>

</ul>

</body>

</html>

Html                                                                   DOCTYPE

Head                   body

Title                    Текст1            ul

Заголовок                            li                li

Эл1                     эл2

Document.documentElement –Возвращает самый верхний тэг

Document.body- возвращает боди

Elem.nodeType – Какого типа узела

Node.ELEMENT_NODEçè1

Node.TEXT_NODEçè3

Дочерние элементы

childNodes- вернет все дочерние элементы

firstChild- получение первого дочернего

lastChild- получение последнего дочернего

parentNode- Указывает на родителя

previousSibling –левый брат

nextSibling- правый брат

Свойства элементов

tagName –имя тэга (Только у элементов тэгов, только для чтения, в верхним регистре возвращается)

style –стиль

className –аналогично атрибута класс

onclick….

Методы для работы с dom атрибутами

Чтобы установить атрибут – setAttribute(name,value)

Получить атрибут – getAttribute(name)

hasAttribute (name)- проверить существуют ли аттрибуты у элемента

removeAttribute(name)- удалить аттрибут

elem.setAttribute(‘onclick’,”alert(‘1’)”);  – не пашет в IE

<label for=”t”></lable><input name=”y” type=”text” / > -метка (Не пашет в IE)

Соответствие forHTML

Поиск элемента в доме

getElementById

Поиск по тэгу

Document.getElementByTagName(‘p’)

Document.getElementsByTagName(‘div’)[1].getElementsByTagName(‘li’)

Поиск по имени

Document.getElementByName(name)

Elem.getElementsByTagName(‘*’)

Для возвращения всех элементов:

Document.getElementsByTagName(‘*’) не пашет в IE

Document.all   для IE

Изменение страницы используя DOM

Var newDIV=Document.createElement(‘DIV’);

NewDIV.style.backgroundColor=”red”;

NewDiv.innerHTML=”Hello”;

appendChild –добавляет последним в список детей

document.body.appendChild(newDIV);

parentElem.insertBefore(newElem,target) – вставляем новый объект перед чем то

parentElem.removeChild(Elem) – удаление .

Доступ к DOM-модели

Документ ECMAScript Language Binding

Документ ECMAScript Language Binding («языковая привязка ECMAScript») определяет набор DOM-объектов, к которым возможен доступ из JavaScript-кода. На самом деле документ ECMAScript Language Binding является приложением к определениям ядра объектной модели документов уровня 2 (level 2 Document Object Model Core Definitions). С точки зрения JavaScript привязка ECMAScript Language Bindingможет рассматриваться как расширение ECMAScript.

Начнем с того, что такое привязка. В основном документ ECMAScript Language Binding содержит определения более двух десятков JavaScript-объектов, обеспечивающих всю функциональность, необходимую для навигации и манипулирования DOM. А что необходимо для того, чтобы начать использовать эту замечательную функциональность? Не очень многое: просто браузер. Представляющий HTML-содержимое в виде дерева и поддерживающий JavaScript и объекты, определенные в документе ECMAScript Language Binding. Все распространенные браузеры поддерживаю DOM, JavaScript и привязки, так что нужно лишь продолжить пользоваться JavaScript как обычно, но добавив в свой арсенал несколько дополнительных объектов.

Документ ECMAScript Language Binding доступен по адресу:

http://www.w3.org/TR/2002/CR-DOM-Level-2-HTML-20020605/ecma-script-binding.html

В таблице1.1 перечислены все объекты, определенные в документе ECMAScript Language Binding. Сочетание и взаимодействие этих объектов обеспечивает вас всем необходимым для взаимодействия DOM через Javascript. Предоставляемые объекты позволяют JavaScript работать с HTML- и  XML-документами.

Объекты, относящиеся к узлам

Объект Node является первичным типом данных для всех объектной модели документов. DOM представляет собой древовидную структуру. Каждая составляющая этой структуры называется узлом. Узлом может быть элемент, текст, атрибут и так далее. Достаточно много объектов, определенных в ECMAScript Language Binding, порождены именно от объекта Node. Объект Node обеспечивает все, что необходимо для навигации по DOM. В таблице 1.2 перечислены все атрибуты объекта Node. Обратите внимание, что в ней приведено довольно много констант, связанных с объектом Node.Поскольку другие объекты порождены от объекта Node, то при определении типа может использоваться сравнение свойства nodeType с этими константами.

Таблица 1.1 Объекты ECMAScript Language Binding

Объект Описание
Attr Атрибут элемента в HTML- или  XML-документе
CDATASection Текст раздела CDATA
CharacterData Содержимое объекта Element или объекта Attr
Comment Содержимое комментария
Document Полный HTML- или  XML-документ
DocumentFragment Облегченный объект Document, служащий контейнером для других узлов
DocumentType Интерфейс для списка разделов, определенных для документа
DOMException Исключения, возвращаемые методами в случае невозможности выполнения операций
DOMImplementation Реализует методы для выполнения операций, не зависящих от любого конкретного экземпляра объектной модели документов
Element Элемент HTML- или  XML-документа
Entity Раздел XML-документа, либо анализируемый, либо неанализируемый
EntityReference Ссылка на объект Node
NamedNodeMap Коллекция узлов. К которым возможен доступ по имени
Node Базовый объект DOM-модели
NodeList Контейнер для списка объектов Node
Notation Форма записи, объявленная в DTD
ProcessingIstruction Инструкция анализатора, применяемая в XML в качестве способа хранения специфичной для анализатора информации в тексте документа
Text Текстовое содержимое объекта Element или объекта Attr

Таблица 1.2 Аргументы объекта Node

Тип Имя Описание
константы ELEMENT_NODE Значение равно 1
ATTRIBUTE_NODE Значение равно 2
TEXT_NODE Значение равно 3
CDATA_SECTION_NODE Значение равно 4
ENTITY_REFERENCE_NODE Значение равно 5
ENTITY_NODE Значение равно 6
PROCESSING_REFERENCE_NODE Значение равно 7
COMMENT_NODE Значение равно 8
DOCUMENT_NODE Значение равно 9
DOCUMENT_TYPE_NODE Значение равно 10
DOCUMENT_FRAGMENT_NODE Значение равно 11
NOTATION_NODE Значение равно 12
свойства attributes Объект NamedNodeMap, содержащий все атрибуты данного узла
childNodes Список узлов, содержащий всех потомков данного узла (объект NodeList)
firstChild Первый потомок данного узла
lastChild Последний потомок данного узла
localName Локальная часть квалифицированного имени данного узла
namespaceURI URI пространства имен данного узла
nextSibling Узел, следующий сразу за данным узлом
nodeName Имя данного узла
nodeType Тип объекта данного узла. Соответствует одной из констант, определенных для объкта Node
nodeValue Значение данного узла (текстовое содержимое)
ownerDocument Объект Document, связанный с данным узлом
parentNode Родительский узел данного узла
prefix Префикс пространства имен данного узла
previousSibling Узел, предшествующий данному узлу
методы appendChild(N) Добавляет узел N в конец списка потомков данного узла
cloneNode(deep) Возвращает копию данного узла. Если параметр deep равен true. То копируется текущий узел и его потомки
hasAttributes() Возвращает true, если данный узел имеет атрибуты, а иначе false
hasChildNodes() Возвращает true, если данный узел имеет потомков, а иначе false
insertBefore(N,E) Вставляет новый узел N перед существующим узлом E
isSupported(F,V) Определяет, поддерживается ли данным узлом возможность F версии V
normalize() Помещает узлы Text в самую глубину поддерева данного узла
removeChild(N) Удаляет и возвращает дочерний узел N из списка потомков
replaceChild(N,E) Заменяет и возвращает существующий дочерний узел E новым узлом N

Существуют еще два объекта, тесно связанных с объектом Node. Это объекты NodeList и NamedNodeMap.

Объект NodeList

Объект NodeList представляет собой просто контейнер для списка объектов Node. Многие объекты языковой привязки возвращают из своих методов именно этот объект. Объект NodeList предоставляет свойство и метод для доступа к списку содержащихся в нем узлов. Это свойство и метод описаны в таблице 1.3.

Таблица 1.3 Свойство и метод объекта NodeList

тип имя описание
свойство length Количество узлов, содержащихся в списке
Метод item(индекс) Возвращает указанный узел списка

Объект NamedNodeMap

Объект NamedNodeMap представляет собой коллекцию узлов, к которым возможен доступ по имени. В отличие от объекта NodeList, объект NamedNodeMap не содержит узлы в каком-то конкретном порядке. Однако NamedNodeMap предоставляет числовой индекс. Позволяющий удобно нумеровать его содержимое. Некоторые объекты языковой привязки возвращают этот объект из своих методов. Свойство и методы, связанные с NamedNodeMap, описаны в таблице 1.4.

Таблица 1.4 свойство и методы объекта NamedNodeMap

тип имя описание
Свойство length Количество узлов в контейнере
Методы getNamedItem(имя) Возвращает из контейнера узел с указанным именем
getNamedItemNS(URI,имя) Возвращает узел из контейнера, имеющего указанный URI пространства имен и локальное имя
item(индекс) Возвращает из контейнера указанный узел
removedNamedItem(имя) Удаляет из контейнера указанный узел
removeNamedItemNS(URI, имя) Удаляет узел из контейнера, имеющего указанный URI пространства имен и локальное имя
setNamedItem(узел) Добавляет узел в контейнер. Если в контейнере уже есть узел с таким же атрибутом nodeName. То он заменяется на новый
setNamedItemNS(узел) Добавляет узел в контейнер.Если в контейнере уже есть узел с таким же URI пространства имен и локальным именем, то он заменяется на новый.

Объекты, относящиеся к элементам

Объект Element представляет элемент HTML- или  XML-документа. Примером элемента HTML-документа может быть дескриптор <table>. Элементы могут иметь связанные с ними атрибуты. Поэтому объект Element предоставляет несколько методов для работы с атрибутами элементов. Свойство и методы, связанные с объектом Element, описаны в таблице 1.5. Поскольку объект Element является потомком объекта Node. То свойство attributes объекта Node может быть использовано и с объектом Element для получения набора всех атрибутов этого элемента.

Таблица 1.5 Свойство и методы объекта Element

тип имя описание
свойство tagName Имя данного элемента
методы getAttribute(имя) Возвращает значение атрибута по его имени
getAttributeNode(имя) Возвращает объект Attr по его имени
getAttributeNodeNS(URI,имя) Возвращает объект Attr по его локальному имени и URI пространства имен
getattributeNS(URI,имя) Возвращает значение атрибута по его локальному имени и URI пространства имен.
getElementsByTagName(имя) Возвращает объект NodeList всех элементов-потомков по заданному имени дескриптора
getElementsByTagNameNS(URI,имя) Возвращает объект NodeList всех элементов-потомков по локальному имени и URI пространства имен.
hasAttribute(имя) Возвращает true, если элемент имеет атрибут с указанным именем.
hasAttibuteNS(URI,имя) Возвращает true. Если элемент имеет атрибут с указанным именем и URI пространства имен.
removeAttribute(имя) Удаляет атрибут с указанным именем.
removeAttributeNS(URI,имя) Удаляет атрибут с указанным локальным именем и URI пространства имен
removeAttributeNode(атрибут) Удалает и возвращает указанный объект Attr
setAttribute(имя, значение) Добавляет в данный элемент новую пару атрибутов имя/значение
setAttributeNode(атрибут) Добавляет в данный элемент новый объект Attr
setAttributeNodeNS(атрибут) Добавляет в данный элемент новый объект Attr
setAttributeNS(URI,имя,значение) Добавляет новую пару атрибутов имя/значение в данный элемент с указанным локальным именем и URI пространства имен.

Объект Attr

Объект Attr представляет атрибут элемента в HTML- или XML-документе. Примером атрибута их XHTMLдокумента может служить атрибут width дескриптора <table>. Свойства, связанные с объектом Attr, перечислены в таблице 1.6.

Таблица 1.6 Свойства объекта Attr

имя описание
name Имя атрибута
ownerElement Элемент, с которым связан данный атрибут
specified Если в исходном документе этому атрибуту явно присвоено значение, то равно true; иначе равно false
value Значение атрибута


Объект Attr является потомком объекта Node, но поскольку он не представляет собой реального потомка описываемого им элемента. То DOM не считает его частью дерева документа. Поэтому атрибуты узла parentNode, previousSibling, nextSibling имеют для объектов Attr пустые значения.

Объекты Text CharacterData

Объект Text представляет текстовое содержимое объекта Element или объекта Attr. Объект Text содержит только один метод: splitText(смещ.). Этот метод разбивает текущий текстовый узел по заданной позиции на два узла, запоминая оба полученных объекта в дереве в качестве родственников. Кроме того, объект Text наследует дополнительную функциональность от объекта CharacterData. Свойства и методы, связанные с объектом CharacterData, описаны в таблице 1.7.

Таблица 1.7 Свойства и методы объекта CharacterData

Тип имя описание
свойства data Сама строка
length Длина строки
методы substringData(смещ., счет) Выбирает и возвращает диапазон данных по заданным смещению и счетчику счет
appendData(строка) Добавляет строку в конец символьных данных узла
insertData(смещ.,строка) Вставляет строку в указанную позицию
deleteData(смещ.,счет) Удаляет диапазон данных по заданным смещению смещ. и счетчику  счет
replaceData(смещ.,счет,строка) Заменяет символы, указанные смещением смещ и счетчиком счет, указанной строкой

Объекты, относящиеся к документу

С точки зрения DOM объект Document представляет весь XHTML- или XML-документ. Объектная модель документов имеет древовидную структуру. Объект Document служит корнем этого дерева.

Поскольку HTML- и  XML-элементы должны существовать в контексте документа, то объект Document содержит методы, необходимые для создания этих объектов. Дополнительные методы и свойства обеспечивают первичный доступ к данным документа. В таблице 1.8 перечислены все свойства и методы, связанные с объектом Document, причем так, как они определены в ECMAScript Language Binding.

Таблица 1.8 Свойства и методы объекта Document

тип имя описание
свойства doctype Объект DocumentType, связанный с данным документом
documentElement Объект Element, представляющий документ (корневой элемент документа)
Implementation Объект DOMImplementation, связанный с данным документом
методы createAttribute(имя) Создает и возвращает объект Attr с указанным именем
createAttributeNS(URI, имя) Создает и возвращает объект Attr с указанным именем и URI пространства имен
createCDATASection(строка) Создает и возвращает объект CDATASection со значением, равным  указанной строке
createComment(строка) Создает и возвращает объект Commentс указанной строкой
createDocumentFragment() Создает и возвращает пустой объект DocumentFragment
createElement(tagName) Создает и возвращает объект Element с типом, заданным параметром tagName
createElementNS(URI,имя) Создает и возвращает объект Element с указанным именем и URI пространства имен
createEntityReference(имя) Создает и возвращает объект EntityReference, ссылающийся на сущность имя
createTextNode(строка) Создает и возвращает объект Text, содержащий указанную строку
getelementById(id) Возвращает объект Element по указанному id элемента
getElementsByTagName(имя) Возвращает объект NodeList, содержащий все элементы с указанным именем дескриптора
getElementsByTagName(URI,имя) Возвращает объект NodeList, содержащий все элементы с указанным именем и URI пространства имен
importNode(N,deep) Импортирует узел N из другого документа в данный документ. Если параметр deep равен true, то импортируются все потомки данного узла.

Объект DocumentFragment

Метод createDocumentFragment() объекта Document возвращает объект DocumentFragment. Объект DocumentFragment считается «облегченным» или «минимальным» объектом Document, так как он просто служит контейнером для других узлов. Например, часто бывает нужным выделить часть дерева документа или создать новый фрагмент документа. Удобство объекта DocumentFragment состоит в том, что при вставке в объект Document (или в любой другой узел, который может иметь потомков) в узел вставляются только потомки DocumentFragment, а не сам объект DocumentFragment. Это удобно при создании потомков. В данном случае DocumentFragment выступает в качестве родителя этих узлов, и вы можете воспользоваться стандартными методами объекта Node, такими как insertBefore и appendChild.

Объект DOMImplementation

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

Таблица 1.9 Методы объекта DOMImplementation

имя описание
createDocument(URI, имя,тип) Создает и возвращает объект Document с указанным URI пространства имен, определенным именем и типом документа
createDocumentType(имя, открID, сист ID) Создает и возвращает объект DocumentType с указанным определенным именем, открытым id и системным id
hasFeature(возможность, версия) Проверяет, содержит ли реализация DOM указанную возможность с данным номером версии

Объект CDATASection

Объект CDATA используется для оформления блоков текста, содержащих символы, которые иначе считались бы разметкой. Единственным ограничителем, распознаваемым в разделе CDATA, является строка ]]>, завершающая раздел CDATA. Их основное назначение состоит во включении материала наподобие фрагментов XML кода без необходимости кодирования всех специальных символов.

Метод createCDATASection() объекта Document возвращаетобъект CDATASection. Объект CDATASection представляет текст раздела CDATA. Поскольку объект CDATASection не имеет своих свойств или методов, он наследует их от объекта CharacterData через объект Text.

Объект Comment

Метод createComment объекта Document возвращает объект Comment. Объект Comment представляет содержимое комментария, к которому относятся все символы между началом комментария <!—и концом комментария –>. Поскольку объект Comment не имеет своих свойств или методов, он наследует их от объекта CharacterData.

Объекты, специфичные для XML

До этого момента мы рассматривали объекты ECMAScript Language Binding, представляющие аспекты обычных HTML-документов или комбинаций HTML- и XML-документов. Однако существуют еще несколько объектов, свойственных только XML и доступных в JavaScript-коде.

Объект Entity

Объект Entity представляет раздел XML-документа либо анализируемый, либо неанализируемый. Этот объект модеоирует сам раздел, а не описание раздела. Объект Entity является потомком объекта Node, но он определяет и несколько своих собственных свойств. Эти свойства перечислены в таблице 1.10. Важно также помнить, что узел раздела не имеет родительского узла.

Таблица 1.10 Свойства объекта Entity

имя описание
notationName Название формы записи неанализируемого раздела
publicId Общедоступный идентификатор, связанный с разделом
systemId Системный идентификатор, связанный с разделом

Объект EntityReference

Метод createEntityReference объекта Document возвращает объект EntityReference. Поскольку объект EntityReference не имеет своих собственных свойств или методов, он наследует их от объекта Node.


Объект ProcessingInstruction

Объект ProcessingInstruction представляет инструкцию анализатора, применяемую в XML в качестве способа хранения специфичной для анализатора информации в тексте документа. Этот объект является потомком объекта Node, но имеет и пару собственных свойств, которые описаны в таблице 1.11.

Таблица 1.11 Свойства объекта ProcessingInstruction

имя описание
data Содержимое инструкции анализатора. Это текст от первого непробельного символа после имени инструкции до символа, непосредственно предшествующего ?>
target Имя инструкции анализатора.

Объект Notation

Объект Notation представляет форму записи, объявленную в DTD. Он либо объявляет по имени формат неанализируемого раздела, либо используется для формального объявления имен инструкций анализатора. Этот объект является потомком объекта Node, но имеет и пару своих свойств. Эти свойства перечислены в таблице 1.12.

Таблица 1.12 Свойства объекта Notation

имя описание
publicId Общедоступный идентификатор, связанный с разделом.
systemId Системный идентификатор, связанный с разделом.

Объект DocumentType

Свойство doctype объекта Document содержит объект DocumentType. Объект DocumentType предоставляет интерфейс для списка разделов, определенных для документа. Свойства, связанные с этим объектом, приведены в таблице 1.13.

Таблица 1.13 Свойства объекта DocumentType

Имя Описание
entities NameNodeMap, содержащий общие разделы – и внешние, и внутренние,- объявленные в DTD
internalSubset Внутреннее подмножество в виде строки
Name Имя DTD
notations NameNodeMap, содержащий формы записи, объявленные в DTD
publicId Общедоступный идентификатор, связанный с разделом
systemId Системный идентификатор, связанный с разделом.

Исключительные состояния DOM

Документ ECMAScript Language Binding также определяет исключения, возвращаемые многими методами при невозможности выполнения операций. Эти исключительные состояния определены в объекте DOMException и перечислены в таблице 1.14.


Таблица 1.14 Исключения DOM

Исключение Значение
INDEX_SIZE_ERR 1
DOMSTRING_SIZE_ERR 2
HIERARCHY_REQUEST_ERR 3
WRONG_DOCUMENT_ERR 4
INVALID_CHARACTER_ERR 5
NO_DATA_ALLOWED_ERR 6
NO_MODIFICATION_ALLOWED_ERR 7
NOT_FOUND_ERR 8
NOT_SUPPORTED_ERR 9
INUSE_ATTRIBUTE_ERR 10
INVALID_STATE_ERR 11
SYNTAX_ERR 12
INVALID_MODIFICATION_ERR 13
NAMESPACE_ERR 14
NAMESPACE_ERR 15

Мой блог находят по следующим фразам

38 отзыва(-ов) »

  1. [...] "развернуть таблицу" oracle [...]

  2. [...] javascript удаление из строки шестнадцатиричных кодов симв… [...]

  3. [...] документация JS insertBefore ошибка NOT_FOUND_ERR [...]

  4. [...] как сгенерировать исключение INVALID_STATE_ERR [...]

  5. [...] [...]

  6. [...] javascript циклы шахматная доска [...]

  7. [...] opener.location.reload(true) [...]

  8. [...] list contains java проверить повторение строк [...]

  9. [...] javascript регулярные выражения "незапоминающие скобки&q… [...]

  10. [...] js object DocumentFragment содержимое [...]

  11. [...] js вызов любой события минимальное количество раз [...]

  12. [...] шахматная доска на javascript [...]

  13. [...] ширина экрана браузера. java [...]

  14. [...] скрипт запоминающий данные javascript Cookies [...]

  15. [...] getElementsByTagNamens предназначение [...]

  16. [...] java скрипт сиснтаксис гиперссылки [...]

  17. [...] вращение элементов вокруг своей оси java [...]

  18. [...] js убрать дробную часть parseInt [...]

  19. [...] скрипт запрашивает имена до тех пор, пока пользователь… [...]

  20. [...] параметры getElementsByTagNameNS java [...]

  21. [...] javascript textarea фиксированная длина строки фиксированное к… [...]

  22. [...] window.print() в дочернем окне IE javascript [...]

  23. [...] вращение элемента вокруг курсора java [...]

  24. [...] boooo значок [...]

  25. [...] скрипт для преобразования пикселей в проценты [...]

  26. [...] обработка BODY OnBlur setTimeout focus() для FireFox [...]

  27. [...] незапоминающие скобки в регулярных выражениях [...]

  28. [...] незапоминающие скобки js [...]

  29. [...] альтернатива ImportNode для IE [...]

  30. [...] <html> <body> <script type="text/javascript"> var a=b=c ; for (i=Math.ex… [...]

  31. [...] jquery browser history back удалить историю [...]

  32. [...] сравнение insertAdjacentHTML или DocumentFragment [...]

  33. [...] написать сценарий,который запрашивает фамилии и имена… [...]

  34. [...] js createDocumentType [...]

  35. [...] 2. напишите скрипт, который запрашивает фамилии и имена… [...]

  36. [...] javascript метод имитирующий событие активации элемента фо… [...]

  37. [...] принять фамилию имя возраст из клавиатуры java [...]

  38. Scripts can be selectively disabled, so JavaScript can’t be relied on to prevent operations such as right-clicking on an image to save it.

Оставить отзыв