JavaScript: основные понятия (стр. 2 )

window. history. до(1) ;
if (window. history. length>4 )
{window. history. go(5) };

Объект navigator

Объект navigator содержит информацию о производителе браузера, его версии и возможностях.

Свойства объекта navigator

·  appCodeName — название кода браузера;

·  appName — название браузера;

·  appVerston — версия браузера;

·  cookieEnabied — определяет возможность создания в браузере элементов cookies на стороне клиента;

·  userAcjent — название браузера, посылаемое с помощью HTTP-протокола.

Коллекции объекта navigator

·  mimeTypes — коллекция всехтипов документов и файлов, поддерживаемых браузером;

·  piugins — название коллекции всех внедряемых объектов на странице;

Методы объекта navigator

·  taintEnabled — возвращает значение False, включен для совместимости с Netscape Navigator;

·  javaEnabied — сообщает, возможен ли в данном браузере запуск сценария на языке JavaScript.

Объект location

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

Свойства объекта location

·  href — URL-адрес в виде строки;

·  hash — строка, следующая в URL за символом #;

·  host — часть URL ("хост:порт");

·  hostname — часть URL «хост»;

·  pathname — путь к объекту или файлу, находящийся после третьего слэша;

·  port — номер порта URL;

·  protocol — начальная часть, определяющая протокол;

·  search — строка запроса или данные URL после знака ?.

Например, если вы загрузили страницу с адресом http://www. cityline. *****, то значением location. href будет эта строка.

Мы можем изменять показываемую страницу, присваивая свойству href новое значение. Например:

window. location. href="http://www. *****"

Методы объекта location

·  assign — загружает другую страницу; этот метод эквивалентен изменению свойства window. location. href;

·  reload — обновляет текущую страницу;

·  replace — загружает страницу, заменяя URL-адрес текущей.

Объект event

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

Свойства объекта event

·  altKey — возвращает состояние клавиши <Alt>, когда происходит событие;

·  button — кнопка мыши, вызывающая событие;

·  canceiBubble — устанавливается для запрета прохождения заданного события вверх по объектной иерархии;

·  clientx — возвращает горизонтальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;

·  clientY — возвращает вертикальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;

·  ctrlKey — возвращает состояние клавиши <Ctrl> при появлении события;

·  fromElement — возвращает элемент, с которого ушел указатель мыши, для событий onmouseover и onmouseout;

·  keyCode — код ASCII нажатой клавиши; позволяет изменить значение, передаваемое объекту;

·  offsetx — возвращает горизонтальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события;

·  offsetY — возвращает вертикальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события;

·  reason — указывает, что перемещение данных прошло успешно или из-за чего оно прекратилось;

·  returnvalue — определяет возвращаемое значение для события;

·  screenx — возвращает горизонтальную координату указателя мыши относительно экрана, когда происходит событие;

·  screen Y —возвращает вертикальную координату указателя мыши относительно экрана, когда происходит событие;

·  shiftKey — определяет состояние клавиши <Shift> при возникновении события;

·  srcEiement — возвращает элемент, с которого началось прохождение события;

·  srcFiiter — возвращает фильтр, создавший событие onfiiterchange;

·  toElement — возвращает элемент, на который «наезжает» курсор мыши, при появлении события omouseover или onmouseout;

·  type — возвращает название события как строку, без приставки on;

·  х — возвращает горизонтальную координату указателя мыши относительно либо к позиционированному родительскому элементу, либо к окну;

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

Свойства объекта event устанавливаются в момент прохождения события и большинство из них доступны только для чтения (их значения нельзя изменить). Однако есть два изменяемых свойства: keyCode и return Value.

Объект screen

Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, при определении размеров создаваемых окон, а также разрешения, с которым нужно передавать графику (нет смысла загружать 32-битное изображение, если монитор и видеокарта пользователя поддерживают только 256 цветов).

Свойства объекта screen

·  width — возвращает разрешение по ширине экрана пользователя (в пикселах);

·  height — возвращает разрешение по высоте экрана пользователя (в пикселах);

·  bufferDepth — задает количество бит на пиксел браузера;

·  colorDepth — возвращает информацию, позволяющую решить, как использовать цвета на экране;

·  updateinterval — возвращает или устанавливает интервал времени смены экрана пользователя.

Объект TextRange

Объект TextRang (текстовая область) отображает разделы потока текста, формирующего документ HTML. Может использоваться для управления текстом внутри страницы.

Свойства объекта TextRange

·  htmlText — возвращает содержимое TextRange как текст и код HTML;

·  text — простой текст, находящийся внутри элемента TextRange или тэга <OPTION>.

Методы объекта TextRange

·  collapse — стягивает текстовую область в точку в начале или конце текущей области;

·  compareEndPoints — сравнивает две текстовые области и возвращает значение, показывающее результат;

·  duplicate — возвращает копию области TextRange;

·  execCommand — выполняет команду (операцию) над выделением или областью;

·  expand — расширяет текстовую область, добавляя туда новый знак, слово, предложение, или указывает, какие неполные блоки полностью содержатся;

·  findText — определяет текстовую область, содержащую только искомый текст;

·  getBookmark — возвращает значение, позволяющее в дальнейшем идентифицировать данную позицию в документе;

·  inRange — определяет, находится ли заданная текстовая область внутри текущей;

·  isEqual — определяет, равны ли заданная и текущая текстовые области;

·  move —изменяет начальную и конечную точки текстовой области для включения в нее различного текста;

·  moveEnd — заставляет текстовую область сжаться или расшириться до заданной конечной точки;

·  movestart — заставляет текстовую область сжаться или расшириться до заданной начальной точки;

·  moveToBookmark — передвигает границы текстовой области для включения другой, определенной ранее с помощью getBookmark;

·  moveToElementText — передвигает границы текстовой области для включения текста в заданном элементе;

·  moveToPoint — передвигает границы текстовой области и сжимает ее вокруг выбранной точки;

·  parentElement — возвращает родительский элемент для всего, что входит в текстовую область;

·  pasteHTML — вставляет текст и/или код HTML в текущую текстовую область;

·  queryCommandEnabled — сообщает, доступна ли данная команда;

·  queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус;

·  queryCommandState — возвращает текущее состояние команды;

·  queryCommandSupported — сообщает, поддерживается ли данная команда;

·  queryCommandText — возвращает строку, с которой работает команда;

·  queryCommandVaiue — возвращает значение команды, определенное для документа или объекта TextRange;

·  scroiiintoview — переносит текущую текстовую область в видимую часть окна браузера;

·  select — делает активный подсвеченный участок выделения на странице равным текущей текстовой области;

·  setEndPoint — переносит начальную или конечную точку текущей текстовой области в начало или конец заданной области.

Правила написания скриптов

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

Сценарий вставляется в HTML-код с помощью тэга <SCRIPT>, который обычно размещается внутри тэга заголовка <HEAD>. Необходимо иметь в виду следующее:

·  Поместив сценарий на JavaScript в раздел <HEAD> документа, вы делаете так, что весь сценарий будет загружен до того, как потребуется его выполнить.

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

·  Регистр букв в JavaScript имеет значение.

Вставка сценария в HTML-код осуществляется обычно по следующей схеме:

<HTML>
<HEAD>
...
<!--
<SCRIPT LANGUAGE='название_языка' >
... (здесь располагается текст сценария)
</SCRIPT>
//-->
</HEAD>
...
<BODY>
...
</BODY>
</HTML>

Здесь использован типовой вариант, при котором сценарий вставляется внутрь тэга заголовка <HEAD>, хотя он может находиться в любом месте HTML-кода. Иногда даже требуется, чтобы скрипт был загружен после загрузки некоторых элементов страницы.

Атрибут LANGUAGE тэга <SCRIPT> может принимать аргументы JavaScript, JScript, VBScript и VBS. Если атрибут не указан, то подразумевается JavaScript.

Символы < ! — и //--> образуют тэг комментария. Рекомендуется их использовать на тот случай, когда браузер пользователя не сможет интерпретировать сценарий. Например, браузеры Netscape не воспринимают скрипты на VBScript. Тэг комментария в данном случае отличается от обычного тэга комментария < ! >, используемого вне сценария для того, чтобы вставить поясняющие тексты, не отображаемые на экране.

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

<SCRIPT SRC="адрес_файла_со_скриптом"> </SCRIPT>

Например:

<SCRIPT SRC="my_script. js"> </SCRIPT>

В тэг <SCRIPT> нужно вставить атрибут LANGUAGE= ' JScript'.

Привязка сценариев к элементам страницы

Внутри тэга <SCRIPT> размещается программа сценария. Обычно она содержит описания функций, которые должны вызываться при возникновении таких событий, как щелчок кнопкой мыши, нажатие клавиши на клавиатуре, загрузка страницы и др. Такие функции называются обработчиками событий. Чтобы вызов функций сценария произошел при возникновении того или иного события, нужно сделать привязку события и соответствующей ему функции к элементу страницы.

Связь между событием и функцией осуществляется в формате:

событие =" функция"

Например, если мы хотим связать событие «щелчок кнопкой мыши» с определенной нами функцией Myfunc(), то должны использовать запись вида:

onclick="Myfunc ()"

Если вызов этой функции должен произойти при загрузке страницы в браузер, то следует записать:

onload=IMyfunc ()I

Мы рассмотрели связь типа «событие-функция». Однако одно и то же событие может восприниматься различными элементами страницы. Например, на щелчок кнопкой мыши могут отреагировать и кнопка, и картинка, и заголовок. Чтобы образовать связь «событие-функция—элемент», следует вставить запись типа событие='функция' в тэг элемента страницы подобно вставке атрибута. Например, если мы хотим, чтобы функция Myfunc() вызывалась при щелчке на тексте, находящемся внутри тэга <Н2>, то надо написать:

<Н2 onclick='Myfunc()'> Некоторый текст </Н2>

Связь между событием и функцией может быть записана в большинстве тэгов, например в <BODY>, <IMG>, <DIV>, <INPUT> и др.

Возможен и другой, нестандартный способ связи «событие—функция-элемент». Он заключается в том, что в тэге элемента страницы указывается атрибут ID (идентификатор, выполняющий роль имени NAME этого элемента, предназначенный для доступа к нему из программы). Затем в сценарии определяется функция, имя которой формируется по правилу:

идентификатор_элемента. событие()

Например, если мы хотим, чтобы при щелчке мышью на тексте, заключенном внутри тэга <Н2>, выполнялась некоторая функция, то мы должны написать примерно следующее:

....
<Н2 ID=My> Некоторый текст <Н2>
....
<SCRIPT>
....
function My. onclick()
....
</SCRIPT>
....

Обратите внимание на связь между значением атрибута ID в тэге <Н2> элемента страницы и именем функции, определенной внутри тэга сценария <SCRIPT>: значение ID и название события указываются в имени функции.

Обработчики событий

Обработчики событий следует оформлять в виде функций или процедур. В JScript используются только функции. Функция от процедуры отличается только тем, что возвращает некоторое значение. Следует различать описание (определение) функции и ее вызов.

Описание функции в JScript имеет вид:

function имя_функции (список_параметров)
{
... // код (тело) функции
};

Ключевое слово function сообщает интерпретатору (браузеру), что далее идет описание функции. Список параметров, если он есть, представляет собой последовательность идентификаторов, разделенных запятыми. Идентификаторы — просто символьные обозначения параметров, начинающиеся с буквы или символа подчеркивания. Код (тело) функции выделяется фигурными скобками. Выражения в коде, если их несколько, разделяются точкой с запятой. Комментарии начинаются двойным слэшем //. Если требуется явно указать, что именно должна возвратить функция в качестве результата, используется команда

return возвращаемый_результат

Если команда return не указана, то возвращается значение последнего вычисленного выражения. Пример дает описание функции для вычисления площади прямоугольника:

function S_rectangle (a, b)
{
S=a*b;
return S
};

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

имя_функции (список_значений_параметров)

Например, для вычисления площади прямоугольника со сторонами 5 и 20 следует записать выражение:

S = S_rectangle(5,20)

Здесь значение, возвращаемое функцией S_rectangle, присваивается переменной S. В вызове функций вместо конкретных значений можно подставлять переменные, функции и выражения. Вот пример:

х = 5;
S = S_rectangle(x,4+16)

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

а = 5;
b = 20;
S_tr = 0.5*S_rectangle(a, b)

Можно определить специальную функцию, вычисляющую площадь прямоугольного треугольника по его катетам:

function S_tr(a, b)
{
return 0.5*S rectangle(a, b)

Переменные

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

<SCRIPT LANGUAGE 'JScript'>
// Вычисление площади прямоугольного треугольника с помощью
// функции для площади прямоугольника
а = 5;
b = 20;
S_tr = 0.5*S_rectangle (a, b) // Вычисление площади
// прямоугольного треугольника.
function S_rectangle (a, b) // Описание функции
// вычисления площади прямоугольника.
{
S=a*b;
return S
}
</SCRIPT>

Здесь все переменные доступны внутри функции S_rectangle () , но переменная S недоступна вне ее. Чтобы сделать переменную S доступной в любом месте скрипта, нужно просто создать ее вне функции. Например, можно записать выражение S = 0; в том месте скрипта, где определены переменные а и b.

Типы и структуры данных

JavaScript поддерживает встроенные типы и структуры данных:

=  литералы и переменные;

=  массивы, функции и объекты.

Литералы (структуры данных)

Простейшие данные, с которыми может оперировать программа, называются литералами.

В JavaScript существуют такие типы данных:

·  string (строка ) — последовательность символов, заключенных в кавычки;

·  numbers (число) — целые числа и десятичные дроби;

·  boolean (логическое ) —True или False;

·  null — отсутствие данных.

Переменные

Переменные используются для хранения данных, в сценарии представляются с помощью идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита либо с символа подчеркивания. Далее может указываться последовательность, содержащая буквы латинского алфавита, цифры или знак подчеркивания, например res1, _my_rez2, test_1. Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной.

Оператор var можно использовать и для инициализации переменной, например конструкцией var test2=276 определяется переменная test2 и ей присваивается значение 276.

Оператор присваивания

Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить значение, тип переменной, и выглядит так: а = b, где а — переменная, которой мы хотим задать некоторое значение; b — выражение, определяющее новое значение переменной.

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

Для присваивания значений в JavaScript используются следующие операторы:

Оператор	Пример	Результат
=	х=у	х равно у
+=	х+=у	х равно x+ у
=	х-=у	х равно x-у
*=	х*=у	х равно x*у
/=	х/=у	х равно x/у
%=	х%=у	х равно остатку от деления х на у

Каждый из этих операторов присваивает значение справа переменной слева. Пример:

Х=200;
Y=10;
Х+=у; // х теперь равен 210

Операторы сравнения

Оператор	Значение
==	Равно
!=	Не равно
>	Больше, чем
>=	Больше или равно
<	Меньше, чем
<=	Меньше или равно

Другие операторы

Оператор	Значение
+	Сложение
-	Вычитание
*	Умножение
—	Уменьшение на 1
& или AND	Поразрядное логическое И
| или OR	Поразрядное логическое ИЛИ
^ или ХОR	Сложение по модулю 2
<<	Сдвиг на один разряд влево
/	Деление
%	Деление по модулю
++	Увеличение на 1
>>	Сдвиг на один разряд вправо
>>>	Сдвиг вправо с заполнением нулями
&&	Логическое И
I	Логическое ИЛИ
!	Логическое НЕ

Строковые операторы

Оператор	Значение
+	Склеивание строк (конкатенация)
> >=	Сравнивает строки путем сравнения кодов ASCII, начиная с правого конца
< <=	Сравнивает строки путем сравнения

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

st = "текущее "+"состояние"

переменная st получит значение "текущее состояние".