Справочкик по JavaScript

Справочкик по JavaScript

О этом справочнике

Справочник предназначается для людей, уже освоивших азы программирования в JavaScript.

Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.

В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download

Дата выхода данной версии справочника: 12:33, 21 марта 2007.

Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.

Совместное использование HTML и JavaScript

Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:

<SCRIPT [language="{Язык программирования, на котором написан скрипт}"] [src="{Адрес файла со скриптом}"]>. . . Текст скрипта</SCRIPT>

Текст скрипта помещаетс внутрь тега <SCRIPT>

Атрибут language позволяет указать, на каком языке программирования написан скрипт.

Значение по умолчанию - "JavaScript".

Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".

Navigator позволяет задавать версию интерпретатора JavaScript:

<SCRIPT language="JavaScript 1.2">

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

В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator:

Второй атрибут src служит для задания адреса файла, содержащего скрипт.

В этом случае обычно парный тег <SCRIPT> превращается в одинарный:

<SCRIPT src="menu.js">

js - стандартное расширение для JavaScript-файлов.

Но что случиться, если Web-обозреватель не поддерживает скрипты? (Например, это слишком старая версия программы, или пользователь отключил поддержку скриптов в настройках безопасности.) Web-обозреватель проигнорирует тег <SCRIPT> и выведет на экран текст скрипта.

Чтобы избежать этого, скрипт внутри тега <SCRIPT> рекомендуют заключать в комментарий.

<SCRIPT><--. . . Текс скрипта--></SCRIPT>

Однако некоторые версии Navigator в этом случае "не видят" скрипта, хотя, согласно техническим руководствам самой Netscape, должны. Так что этот совет применим только для Internet Explorer.

В качестве альтернативы вы можете использовать тег <NOSCRIPT>.

Этот тег поддерживается Internet Explorer и Navigator:

<NOSCRIPT>. . . Текст, отображаемый, если Web-обозреватель неподдерживает скрипты</NOSCRIPT>

Тег <NOSCRIPT> может помещаться где угодно в тексте страницы, даже вне тега <BODY>. Текст, помещенный внутрь этого тега, будет отображаться вместо всей страницы. То есть, пользователь Web-обозревателя с отключенной поддержкой скриптов увидит в окне только этот текст и больше ничего.

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

Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:

<SCRIPT [language="{Язык программирования, на котором написан скрипт}"] [src="{Адрес файла со скриптом}"]>. . . Текст скрипта</SCRIPT>

Текст скрипта помещаетс внутрь тега <SCRIPT>

Атрибут language позволяет указать, на каком языке программирования написан скрипт.

Значение по умолчанию - "JavaScript".

Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".

Navigator позволяет задавать версию интерпретатора JavaScript:

<SCRIPT language="JavaScript 1.2">

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

В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator:

Второй атрибут src служит для задания адреса файла, содержащего скрипт.

В этом случае обычно парный тег <SCRIPT> превращается в одинарный:

<SCRIPT src="menu.js">

js - стандартное расширение для JavaScript-файлов.

Но что случиться, если Web-обозреватель не поддерживает скрипты? (Например, это слишком старая версия программы, или пользователь отключил поддержку скриптов в настройках безопасности.) Web-обозреватель проигнорирует тег <SCRIPT> и выведет на экран текст скрипта.

Чтобы избежать этого, скрипт внутри тега <SCRIPT> рекомендуют заключать в комментарий.

<SCRIPT><--. . . Текс скрипта--></SCRIPT>

Однако некоторые версии Navigator в этом случае "не видят" скрипта, хотя, согласно техническим руководствам самой Netscape, должны. Так что этот совет применим только для Internet Explorer.

В качестве альтернативы вы можете использовать тег <NOSCRIPT>.

Этот тег поддерживается Internet Explorer и Navigator:

<NOSCRIPT>. . . Текст, отображаемый, если Web-обозреватель неподдерживает скрипты</NOSCRIPT>

Тег <NOSCRIPT> может помещаться где угодно в тексте страницы, даже вне тега <BODY>. Текст, помещенный внутрь этого тега, будет отображаться вместо всей страницы. То есть, пользователь Web-обозревателя с отключенной поддержкой скриптов увидит в окне только этот текст и больше ничего.

Объектная модель документа

Надо отметить, что JavaScript поддерживает так называемые внешние классы и объекты, определенные другими программами.Web-страница, которую вы просматриваете в окне Web-обозревателя, может быть описана как набор объектов. Скажем, она включает большой объект "документ-в-целом" и более мелкие объекты: "абзац-1", "абзац-2", "абзац-1" и "рисунок". Вы можете обращаться к этим объектам из того же JavaScript.

Рисунок.ДвигайВперед;Абзац-1.Ширина = 80%;Абзац-3.Покажи;

Конечно, здесь сильно утрируется, но принцып таков.

Например, рассмотрим скрипт:

var d;d=new Date();document.write(d.toString());

Документ document - это наш "документ-в-целом". А write - его метод, вставляющий текст, переданный в качестве параметра, в текущее место HTML-документа.

Совокупность объектов, описывающая web-страницу, со всеми их методами и свойствами называется объектной моделью документа. А технология создания web-страницы, при которой обычный HTML-код объединяется с JavaScript-кодом, причем последний управляет страницей с помощью объектной модели, называется динамическим HTML (DHTML).

Объект document

Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.

activeElement

Используется в сценарии для получения ссылки на элемент странички находящийся в данный момент в фокусе

alinkColor

Задает или возвращает цвет активных гиперссылок.

document.alinkColor[ ="{Цвет}"];

anchors

Объекты анкеров представляют собой выражения в документе HTML, описанные в дескрипторе . Данные объекты обозначаются в URL символом #, расположенным между URL странички и именем анкера.

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

var anchorCount=document.anchors.length

applets

Благодаря свойству applets можно обращаться к аплетам java, содержащимся в документе.

bgColor

Задает или возвращает цвет фона страницы. В IE работает правильно, только если цвет страницы установлен атрибутом BGCOLOR.

body

Этот объект имеет множество ключевых свойств для управления внешним видом странички. Для доступа к его свойствам лучше использовать выражение document.body.

charset

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички. Используется только IE.

characterSet

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички.Используется только NN.

compatMode

в Internet Explorer 6 появилось новое свойство объекта document, которое обзывается compatMode. Благодаря этому свойству (оно, кстати, только для чтения) мы можем определить, какой режим включён в данный момент — BackCompat (IE 4.x–IE 5.x) или CSS1Compat (IE 6). Исходя из значения этого свойство, мы можем, например, указывать различные значения CSS свойств width, margin или padding:

if (document.getElementById){oBlock = document.getElementById("mydiv");oBlock.style.width = ((document.compatMode) && (document.compatMode == "CSS1Compat")) ? "200px" : "250px";}

defaultCharset

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

designMode

Это свойство используется, когда браузер IE выступает в качестве компонента другого приложения, данная ситуация описана здесь. Оно разрешает/запрещает изменение HTML кода текущей странички, в обычных условиях это свойство не имеет никакого действия.

documentElement

Возвращает ссылку на объект HTML или XML - элемента, который представляет содержимое всего текущего документа.

embeds

Всякий раз, когда необходимо загрузить данные, требующие надстройки (внедряемого модуля)-приложения для их воспроизведения либо вывода на экран, используют дескриптор Свойство document.embeds - это единственный способ определения таких дескрипторов, добавленных в документ

var сount=document.embeds.length

expando

Это свойство установленное в true позволяет использовать новые свойства объекта, добавленные вами при выполнении сценария

fgColor

Задает или возвращает цвет текста. Значение по умолчанию #000000.

fileCreatedDate

Возвращает дату создания файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileModifiedDate

Возвращает дату последнего изменения файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileSize

Возвращает размер файла HTML-документа или графического изображения.

forms

Возвращает массив объектов form. Первым элементом массива document.forms[0] является ссылка на самую первую форму, определённую в документе.

frames

Возвращает массив объектов frame. Первым элементом массива document.frames[0] является ссылка на самую первыйфрейм, определённый в документе.

height

Задает или возвращает высоту текущего окна или фрейма в пикселях, соответствует свойству в IE scrollHeight.

images

edocument.images[0]

lastModified

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

layers

Это массив слоёв расположенных в документе

linkColor

Задает или возвращает цвет гиперссылок в документе. В IE работает правильно, только если цвет гипессылок установлен атрибутом LINK.

links

Массив содержит в себе ссылки на все объекты ссылок в текущем документе, нумерация начинается с 0.

location

Установка нового URL адреса свойству location приведёт к загрузке странички находящейся по этому адресу

URL

Свойство только для чтения, возвращает адрес текущей загруженной в браузер странички.

parentWindow

Свойство document.parentWindow возвращает ссылку на объект window, который содержит текущий документ.

plugins

Аналог document.embeds

protocol

Возвращает версию протокола, с помощью которой и осуществлялся доступ к текущему документы

readState

Возвращает текущее состояние документа.

referrer

Возвращает Интернет-адрес Web-страницы, с которой пользователь перешел на текущую страницу. Если же пользователь перешел на нее простым набором адреса в строке Web-обозревателя, возвращается пустая строка.

script

Возвращает массив всех элементов SCRIPT содержащихся в документе. Имеется возможность не только просматривать массив, но и добавлять/удалять элементы.

security

Это свойство предоставляет информацию о типе защиты, если таковая применяется в текущем документе.

selection

Свойство document.selection возвращает объект selection, содержимое которого отображается в окне браузера как выделение основного текста. Это выделение может осуществляется пользователем или с помощью сценария в объекте TextRange

styleSheets

Массив styleSheets содержит ссылки на все элементы STYLE, присутствующие на текущей страничке.

title

Возвращает заголовок Web-страницы, заданный в теге <TITLE>

URL

Задает или возвращает интернет-адрес текущей Web-страницы.

URLUnencoded

Свойство возвращает строку URL-адреса в виде кода. Это означает, что все не буквенно-цифровые символы (имеются ввиду только цифры и буквы латинского алфавита) будут перекодированны в их URL-представление. т.е.знак % и шестнадцатеричный код символа ( например пробел будет выглядеть как %20).

vlinkColor

Задает или возвращает цвет посещенных гиперссылок в документе. В IE работает правильно, только если цвет посещенных гиперссылок установлени атрибутом VLINK.

wigth

Ширина документа в пикселях.

Свойства

Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.

activeElement

Используется в сценарии для получения ссылки на элемент странички находящийся в данный момент в фокусе

alinkColor

Задает или возвращает цвет активных гиперссылок.

document.alinkColor[ ="{Цвет}"];

anchors

Объекты анкеров представляют собой выражения в документе HTML, описанные в дескрипторе . Данные объекты обозначаются в URL символом #, расположенным между URL странички и именем анкера.

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

var anchorCount=document.anchors.length

applets

Благодаря свойству applets можно обращаться к аплетам java, содержащимся в документе.

bgColor

Задает или возвращает цвет фона страницы. В IE работает правильно, только если цвет страницы установлен атрибутом BGCOLOR.

body

Этот объект имеет множество ключевых свойств для управления внешним видом странички. Для доступа к его свойствам лучше использовать выражение document.body.

charset

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички. Используется только IE.

characterSet

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички.Используется только NN.

compatMode

в Internet Explorer 6 появилось новое свойство объекта document, которое обзывается compatMode. Благодаря этому свойству (оно, кстати, только для чтения) мы можем определить, какой режим включён в данный момент — BackCompat (IE 4.x–IE 5.x) или CSS1Compat (IE 6). Исходя из значения этого свойство, мы можем, например, указывать различные значения CSS свойств width, margin или padding:

if (document.getElementById){oBlock = document.getElementById("mydiv");oBlock.style.width = ((document.compatMode) && (document.compatMode == "CSS1Compat")) ? "200px" : "250px";}

defaultCharset

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

designMode

Это свойство используется, когда браузер IE выступает в качестве компонента другого приложения, данная ситуация описана здесь. Оно разрешает/запрещает изменение HTML кода текущей странички, в обычных условиях это свойство не имеет никакого действия.

documentElement

Возвращает ссылку на объект HTML или XML - элемента, который представляет содержимое всего текущего документа.

embeds

Всякий раз, когда необходимо загрузить данные, требующие надстройки (внедряемого модуля)-приложения для их воспроизведения либо вывода на экран, используют дескриптор Свойство document.embeds - это единственный способ определения таких дескрипторов, добавленных в документ

var сount=document.embeds.length

expando

Это свойство установленное в true позволяет использовать новые свойства объекта, добавленные вами при выполнении сценария

fgColor

Задает или возвращает цвет текста. Значение по умолчанию #000000.

fileCreatedDate

Возвращает дату создания файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileModifiedDate

Возвращает дату последнего изменения файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileSize

Возвращает размер файла HTML-документа или графического изображения.

forms

Возвращает массив объектов form. Первым элементом массива document.forms[0] является ссылка на самую первую форму, определённую в документе.

frames

Возвращает массив объектов frame. Первым элементом массива document.frames[0] является ссылка на самую первыйфрейм, определённый в документе.

height

Задает или возвращает высоту текущего окна или фрейма в пикселях, соответствует свойству в IE scrollHeight.

images

edocument.images[0]

lastModified

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

layers

Это массив слоёв расположенных в документе

linkColor

Задает или возвращает цвет гиперссылок в документе. В IE работает правильно, только если цвет гипессылок установлен атрибутом LINK.

links

Массив содержит в себе ссылки на все объекты ссылок в текущем документе, нумерация начинается с 0.

location

Установка нового URL адреса свойству location приведёт к загрузке странички находящейся по этому адресу

URL

Свойство только для чтения, возвращает адрес текущей загруженной в браузер странички.

parentWindow

Свойство document.parentWindow возвращает ссылку на объект window, который содержит текущий документ.

plugins

Аналог document.embeds

protocol

Возвращает версию протокола, с помощью которой и осуществлялся доступ к текущему документы

readState

Возвращает текущее состояние документа.

referrer

Возвращает Интернет-адрес Web-страницы, с которой пользователь перешел на текущую страницу. Если же пользователь перешел на нее простым набором адреса в строке Web-обозревателя, возвращается пустая строка.

script

Возвращает массив всех элементов SCRIPT содержащихся в документе. Имеется возможность не только просматривать массив, но и добавлять/удалять элементы.

security

Это свойство предоставляет информацию о типе защиты, если таковая применяется в текущем документе.

selection

Свойство document.selection возвращает объект selection, содержимое которого отображается в окне браузера как выделение основного текста. Это выделение может осуществляется пользователем или с помощью сценария в объекте TextRange

styleSheets

Массив styleSheets содержит ссылки на все элементы STYLE, присутствующие на текущей страничке.

title

Возвращает заголовок Web-страницы, заданный в теге <TITLE>

URL

Задает или возвращает интернет-адрес текущей Web-страницы.

URLUnencoded

Свойство возвращает строку URL-адреса в виде кода. Это означает, что все не буквенно-цифровые символы (имеются ввиду только цифры и буквы латинского алфавита) будут перекодированны в их URL-представление. т.е.знак % и шестнадцатеричный код символа ( например пробел будет выглядеть как %20).

vlinkColor

Задает или возвращает цвет посещенных гиперссылок в документе. В IE работает правильно, только если цвет посещенных гиперссылок установлени атрибутом VLINK.

wigth

Ширина документа в пикселях.

Методы

clear()

Этот метод предназначен для очистки текущего документа из окна браузера.

close()

Заставляет Web-страницу немедленно обновить свое содержимое после использования методов write. Метод не принимает параметров и не возвращает значения.

createAttribute()

createAttribute( "Имя Атрибута" )

Генерирует объект атрибута и возвращает ссылку на него. При вызове метода указывается только название атрибута, таким образом, в сценарии назначается значение свойству nodeValue, а затем новый атрибур добавляется в существующий элемент с помощью метода *Возвращает: ссылка на объект атрибута

setAttributeNode

var newAttr = document.createAttribute("width");newAttr.nodeValue = "80%";document.getElementById("myTable").setAttributeNode(newAttr);

createElement()

createElement( "Имя дескриптора" )

Генерирует объект атрибута для любого дескриптора HTML(или XML), указанного в качастве параметра. Этот объект официально не является частью объектной модели текущего документа, так как он в состав документа пока ещё не входит. Но данный метод используется для вызова объекта элемента, который в конечном счёте будет помещён в документ.

elementFromPoint()

elementFromPoint({X}, {Y})

Возвращает ссылку на элемент, находящийся по координатам X и Y. Метод принимает два параметра, задающие в пикселях горизональную и вертикальную координаты соответственно.

getElementById()

getElementById({Имя элемента})

Возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод принимает единственный параметр - имя элемента страницы.

getSelection()

Возвращает строку, содержащую текст, выделенный пользователем на странице. Метод не принимает параметров.

write()

write({Текст})

Записывает текст или HTML-код, переданный как параметр, в текущее место документа.

writeLn()

writeLn({Текст})

То же самое, что write, но в конце добавляет символ возврата каретки и перевода строки.

Коллекция объектов

Коллекция - это своего рода массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам, и имеющий свойства и методы. Коллекция отличается от ассоциативного массива именно наличием свойств и методов, т.е. коллекция - сама по себе объект.

Рассмотрим, например, коллекцию images, которую включает в себя объект document. Вы можете получить доступ к отдельным ее элементам по порядковому номеру или уникальному имени.

document.images.item(1)document.images("iamge1")

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

document.images(1)document.images("image1")

Все элементы Web-страницы нумеруются в порядке их появления в HTML-коде. А уникальные имена задаются специальным атрибутом ID, доступным практически во всех тегах.

<IMG src="img1.gif" id="image1"><SCRIPT><!--var someImage = document.images("image1");--></SCRIPT>

Для некоторых тегов (в частности <IMG> и <FRAME>) доступен также атрибут NAME, выполняющий ту же функцию, что и ID.

Коллекция all представляет все элементы Web-страницы без исключений, в том числе и изображения. К элементам этой коллекции можно обращаться по номеру (нумеруются они в порядке появления в HTML-коде) или по имени.

document.all(8)document.all("iamge1")

Атрибут ID требует уникальности имен всех элементов, но только формально. Реально же на странице могут встретиться два или более элемента с одинаковыми именами. В таком случае нужно будет указать второй индекс

document.all("image1", 2)

или выражение document.all("image1") вернет коллекцию всех изображений с именем image1.

Также все коллекции имеют свойство length, вызывающее количество элементов коллекции. Надо отметить, что элементы коллекции нумеруются с нуля, поэтому последний ее элемент будет иметь номер length-1.

Некоторые коллекции могут иметь методы для добавления и удаления элементов и других целей.

Подчиненные объекты и коллекции объекта document

Объект document содержит внутри себя множество подчиненных объектов и коллекций. В следующей таблице перечисленны свойства, возвращающие ссылки на них, и приведены описания соответствующих объектов и коллекций.

Коллекция all имеет дополнительный метод tags, позволяющий фильтровать элементы коллекции по их тегу. В качестве параметра этот метод принимает строковое значение нужного тега.

document.all.tags("H1")

Данное выражение вернет ссылку на коллекцию, содержащую только заголовки первого уровня.

Такой же метод поддерживает коллекция links.

Также хочу упомянуть два метода, поддерживаемых Internet Explorer начиная с 5.0. Это методы getElementByName и getElementByTagName. Первый из них возвращает коллекцию элементов со значением атрубута NAME, переданным в качестве параметра. Поскольку атрибут NAME применяется в современном HTML очень редко, польза от этого метода невелика. Второй метод возвращает коллекцию элементов, созданных посредством тега, переданного в качестве параметра.

document.getElementByName("someimage")document.getElementByTagName("H1")

Обращение к элементам страницы

Объект document имеет несколько полезных методов, которые можно использовать в скриптах. Но главное его значение - предоставление доступа к отдельным элементам Web-страницы.Как же можно добраться до отдельного элемента страницы?Прежде всего, через коллекции. Например, коллекцию all:

document.all("image1").outerHTML

Или через коллекцию images:

document.images("image1").outerHTML

IE позволяет опускать ссылку на объект document. Так что можно будет написать и так:

all("image1").outerHTMLimages("image1").outerHTML

NN делать так не позволяет. Он требует обязательной ссылки на document. Вдобавок он не поддерживает коллекцию all.

document.images("image2").src

Имя элемента Web-страницы задается при помощи атрибутов ID и NAME. Если каждый элемент страницы имеет уникальное имя, то можно использовать так называемое прямое обращение к элементам. То есть, обращаться к нему не как к элементу коллекции, а как к отдельному объекту. Это работает и в IE и в NN.

image1.outerHTMLlayer1.top

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

Объект location

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

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

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

Пользуясь объектом location, можно загрузить другой документ на место текущего. Для этого просто присвойте значение нового интернет-адреса свойству href.

document.location.href = "http://www.spravkaweb.ru";

Пользователи IE также могут воспользоваться методом assign:

document.location.assign("http://www.spravkaweb.ru");

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

document.location.replace("http://www.spravkaweb.ru");

Объект style

Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы:

и

Свойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не соответстуют соглашению об именах JavaScript, а первые буквы всех слов, образующих имя атрибута, кроме первого, делаются прописными.В следующей таблице показаны примеры преобразования имен атрибутов стиля в имена свойств объекта style, устанавливающих стиль элемента.

По аналогии вы можете преобразовать все атрибуты стилей в свойства объекта style.Все не относящееся к стилю свойства объекта style перечислены в нижерасположенной таблице. Кроме того, у этого объекта имеются методы getAttribute, removeAttribute и setAttribute. Но эти дополнительные свойства и методы поддерживаются только IE начиная с 4.0

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

Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы:

и

Свойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не соответстуют соглашению об именах JavaScript, а первые буквы всех слов, образующих имя атрибута, кроме первого, делаются прописными.В следующей таблице показаны примеры преобразования имен атрибутов стиля в имена свойств объекта style, устанавливающих стиль элемента.

По аналогии вы можете преобразовать все атрибуты стилей в свойства объекта style.Все не относящееся к стилю свойства объекта style перечислены в нижерасположенной таблице. Кроме того, у этого объекта имеются методы getAttribute, removeAttribute и setAttribute. Но эти дополнительные свойства и методы поддерживаются только IE начиная с 4.0

Работа с объектом style

Объект style позволяет изменить стиль любого элемента Web-страницы, просто присвоив нужному свойству необходимое значение.

paragraph1.style.fontSize = 7;

Можно изменить геометрические размеры элемента:

image1.style.height = "100mm";image1.style.width = "120mm";

и его месторасположение:

iamge1.style.top = "200px";image1.style.left = "50px";

Заметьте, что мы присваиваем свойству строковые значения геометрических параметров с указанием единицы измерения. Это не очень удобно для вычислений, поэтому объект style предоставляет свойства pixel, принимающие и возвращающие числовые значения в пикселах:

image1.style.pixelHeight = 400;iamge1.style.pixelLeft +=5;

Также можно использовать свойства pos, возвращающие и принимающие числовые значения в тех единицах измерения, в которых эти значения были заданы в определении стиля.

<IMG src="image1.gif" id="image1" style="height: 100mm; width: 100">nheight = image1.style.posHeight; // Значение в миллиметрахnwidth = image1.style.posWidth; // Значение в пикселах

Вы можете использовать методы getAttribute, setAttribute и removeAttribute для получения и установки значения и удаления какого-либо свойства стиля:

paragraph1.style.setAttribute("borderBottomWidth", 5, false);paragraph1.style.removeAttribute("borderTopWidth", false);

Объект style в Internet Explorer

Как же получить доступ к объекту style? Internet Explorer предоставляет для этого три свойства: style, currentStyle и runtimeStyle.

Первое свойство позволяет получить доступ к стилю, встроенному в тег элемента с помощью атрибута STYLE:

<P id="par1" style="color: green">Любой текст</P>someColor = par1.style.color;

Вышеприведенное выражение поместит в переменную someColor значение атрибута color встроенного стиля элемента, т.е. "green".

someFontSize = par1.style.fontSize;

Это выражение вернет null, даже если где-то в таблице стилей атрибут font-size для этого элемента определен. А все потому, что интересы свойства style не выходят за рамки встроенного ситиля.

Чтобы получить стиль элемента с учетом и встроенных стилей, и таблиц стилей, и атрибутов тега, используйте свойство currentStyle:

<FONT id="par1" style="color: green" size="7">Любой текст</FONT>someColor = par1.currentStyle.color;someBColor = par1.currentStyle.backgroundColor;someFontSize = par1.currentStyle.fontSize;someOther = par1.currentStyle.textDecoration;

Предположим, что где-то в таблице стилей определен для этого элемента атрибут background-color, равный "teal", а text-decoration не определен вообще. Эти выражения вернут следующие значения: первое - "green", второе - "teal", третье - "largest" (или "7"), а четвертое - "none"? т.е. значение по умолчанию для этого атрибута стиля.

Если вы измените какое-либо свойство объекта style, измениться то же свойство и у объекта currentStyle, и наоборот. Единственная деталь: если вы изменили какое-либо свойство currentStyle и потом сразу же обратились к нему, вернется старое значение. То есть, между присвоением значения и его применением к элементу должно пройти некоторое время.

Свойство runtimeStyle довольно странное. Оно возвращает ссылку на объект runtimeStyle, который является примерно тем же самым, что и currentStyle, но присвоение его свойствам новых значений не затригивает аналогичных свойств style. То есть, вы можете переопределить свойства стиля runtimeStyle, и соответствующие свойства style (но не currentStyle) не изменятся.

Объект styleSheet и коллекция styleSheets

Объект document в IE имеет встроенную коллекцию styleSheets, которую можно использовать для доступа к отдельным таблицам стилей документа. А отдельная таблица стилей представляется объектом styleSheet:

address = document.styleSheets(1).href;

Для нас будут полезны три свойства объекта таблицы стилей.

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

Второе - disabled, разрешающее или запрещающее Web-обозревателю применять эту таблицу для форматирования документа. Заметьте, что в данном случае false разрашает применение таблицы, а true запрещает.

И последнее свойство - type - имеет для нас только теоретический интерес: оно задает тип таблицы стилей, который для IE всегда равен "text/css".

Объект style в Navigator. JavaScript-стили

Navigator поддерживает прямое обращение по идентификаторам только для объектов layer и не поддерживает коллекцию all. Да и поддержка атрибута ID в нем реализована так себе, в основном, для присвоения элементам стилей. Но объект document Navigator предусматривает четыре очень мощьных свойства для работы со стилями.

Свойство classes позволит вым получить доступ к отдельному поименованному стилю:

document.classes.{Имя стиля}.{Имя тега}|all.{Имя свойства}

Здесь {Имя тега} может быть именем любого тега. Если нужно определить стиль для всех тегов, используйте слово all.

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

.somestyle {color: green}

Тогда в коде скрипта вы можете получить к нему доступ:

document.classes.somestyle.all.fontFamily = "Arial";

Аналогично вы можете определить какой-либо стиль для одного определенного тега:

P.somestyle {color: green}document.classes.somestyle.P.fontFamily = "Arial";

В свою очередь свойство ids позволит вам получить доступ к стилю, присвоенному отдельному идентификатору ID:

document.ids.{Идентификатор}.{Имя свойства}

Например:

#someid {color: green}document.ids.someid.fontFamily = "Arial";

Но что делать, если вы переопределили стиль какого-либо тега? В этом случае воспользуйтесь свойством tags:

document.tags.{тег}.{Имя свойства}

Например:

H1 {color: green}document.tags.H1.fontFamily = "Courier";

А если вам нужно, скажем, изменить стиль элемента <B>, находящегося внутри заголовка второго уровня? Для этого существует свойство contextual:

document.contextual({Контекст 1}[, {Контекст 2}[, ...]]).{Имя свойства}

Тогда для описанного нами случая:

document.contextual(document.tags.H2, document.tags.B).fontStyle= "oblique";

что аналогично заданию в таблице стилей

H2 B {font-style: oblique}

Но если вы думаете, что можете динамически изменять внешний вид элементов страницы в Navigator путем изменения их стилей, вы жестоко ошибаетесь. Реально объект style нужен Navigator только для поддержки нового вида таблиц стилей, так называемых JavaScript-стилей.

JavaScript-стили отличаются от обычных тем, что больше всего похожи на скрипты. Собственно, это и есть скрипты. Давайте рассмотрим два примера: обычной таблицы стилей и таблице JavaScript-стилей:

<STYLE type="text/css">P {color: blue}.bigtext {font-size: 72pt; font-weight: boldest}H1 B {text-decoration: underline}</STYLE>

Это обычная таблица стилей.Теперь преобразуем ее в таблицу JavaScript-стилей:

<STYLE type="text/javascript">document.tags.P.color = "blue";width (document.classes.bigtext.all) { fontSize = "72pt"; fontWeight = "boldest"; }document.contextual(document.tags.H1, document.tags.B).textDecoration = "underline";</STYLE>

Теперь вы видете, как таблица JavaScript-стилей похожа на скрипт. Заметьте также, что в этом случае атрибут type обязателен, т.к. он указвывает тип таблицы стилей.

Во всех предыдущих примерах для Navigator мы всегда приводили ссылку на объект document. Но в таблицах JavaScript-стилей ее можно опустить.

<STYLE type="text/javascript">tags.P.color = "blue";width (classes.bigtext.all) { fontSize = "72pt"; fontWeight = "boldest"; }contextual(tags.H1, tags.B).textDecoration = "underline";</STYLE>

Объект window

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

closed

Возвращает true, если текущее окно закрыто. Может быть использовано при работе с несколькими окнами.

defaultStatus

Сообщение по умолчанию, отображаемое в строке состояния окна.

document

Возвращает ссылку на документ, загруженный в текущее окно.

frames

Возвращает ссылку на коллекцию фреймов.

history

Возвращает ссылку на объект истории Web-обозревателя.

innerHeight

Возвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

innerWidth

Возвращает ширину клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

length

Возвращает количество фреймов.

location

Возвращает ссылку на объект location документа, загруженного в текущее окно.

locationbar

Возвращает ссылку на объект панели адреса окна Navigator (она же Location Toolbar). Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.

Поддерживается только NN начиная с 4.0

menubar

Возвращает ссылку на объект панели адреса окна Navigator. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.

Поддерживается только NN начиная с 4.0

name

Возвращает имя окна или фрейма.

navigator

Возвращает ссылку на объект Web-обозревателя.

opener

Возвращает ссылку на окно, которое открыло текущее окно, например, методом open.

outerHeight

Возвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

outerWidth

Возвращает полную ширину окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

pageXOffset

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

Поддерживается только NN начиная с 4.0

pageYOffset

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

Поддерживается только NN начиная с 4.0

parent

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

personalbar

Возвращает ссылку на объект панели Personal Bar окна Navigator. ЕдИнственное свойство этого объекта visible позволяет показать ее или убрать; значение true этого объекта показывает панель адреса, false убирает.

Поддерживается только Navigator начиная с 4.0

screen

Возвращает ссылку на объект screen.

screenLeft

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

Поддерживается только IE начиная с 5.0

screenTop

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

Поддерживается только IE начиная с 5.0

screenX

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

Поддерживается только NN начиная с 4.0

screenY

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

Поддерживается только NN начиная с 4.0

scrollbars

Возвращает ссылку на объект полос прокрутки окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает полосу прокрутки, false убирает.

Поддерживается только NN начиная с 4.0

self

Возвращает ссылку на объект window текущего окна.

status

Текст, отображаемый в строке состояния окна Web-обозревателя.

statusbar

Возвращает ссылку на объект строки состояния окна NN. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает строку состояния, false убирает.

Поддерживается только NN начиная с 4.0

toolbar

Возвращает ссылку на объект панели инструментов окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает панель инструментов, false убирает.

Поддерживается только NN начиная с 4.0

top

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

window

То же, что и self.

Свойства

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

closed

Возвращает true, если текущее окно закрыто. Может быть использовано при работе с несколькими окнами.

defaultStatus

Сообщение по умолчанию, отображаемое в строке состояния окна.

document

Возвращает ссылку на документ, загруженный в текущее окно.

frames

Возвращает ссылку на коллекцию фреймов.

history

Возвращает ссылку на объект истории Web-обозревателя.

innerHeight

Возвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

innerWidth

Возвращает ширину клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

length

Возвращает количество фреймов.

location

Возвращает ссылку на объект location документа, загруженного в текущее окно.

locationbar

Возвращает ссылку на объект панели адреса окна Navigator (она же Location Toolbar). Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.

Поддерживается только NN начиная с 4.0

menubar

Возвращает ссылку на объект панели адреса окна Navigator. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.

Поддерживается только NN начиная с 4.0

name

Возвращает имя окна или фрейма.

navigator

Возвращает ссылку на объект Web-обозревателя.

opener

Возвращает ссылку на окно, которое открыло текущее окно, например, методом open.

outerHeight

Возвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

outerWidth

Возвращает полную ширину окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

pageXOffset

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

Поддерживается только NN начиная с 4.0

pageYOffset

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

Поддерживается только NN начиная с 4.0

parent

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

personalbar

Возвращает ссылку на объект панели Personal Bar окна Navigator. ЕдИнственное свойство этого объекта visible позволяет показать ее или убрать; значение true этого объекта показывает панель адреса, false убирает.

Поддерживается только Navigator начиная с 4.0

screen

Возвращает ссылку на объект screen.

screenLeft

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

Поддерживается только IE начиная с 5.0

screenTop

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

Поддерживается только IE начиная с 5.0

screenX

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

Поддерживается только NN начиная с 4.0

screenY

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

Поддерживается только NN начиная с 4.0

scrollbars

Возвращает ссылку на объект полос прокрутки окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает полосу прокрутки, false убирает.

Поддерживается только NN начиная с 4.0

self

Возвращает ссылку на объект window текущего окна.

status

Текст, отображаемый в строке состояния окна Web-обозревателя.

statusbar

Возвращает ссылку на объект строки состояния окна NN. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает строку состояния, false убирает.

Поддерживается только NN начиная с 4.0

toolbar

Возвращает ссылку на объект панели инструментов окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает панель инструментов, false убирает.

Поддерживается только NN начиная с 4.0

top

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

window

То же, что и self.

Методы

alert()

alert({Текст})

Выводит на экран окно предупреждения с текстом, переданным в качестве параметра.

back()

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

Поддерживается только NN начиная с 4.0

blur()

Удаляет фокус с окна.

clearInterval()

clearInterval({Таймер})

Останавливает таймер, установленный методом setInterval.

clearTimeout()

clearTimeout({Таймер})

Останавливает таймер, установленный методом setTimeout.

close()

Закрывает текущее окно. Если окно было открыто методом open(), то оно закрывается сразу же, если же оно было открыто пользователем, сначало появляется окно предупреждения, предлагающее пользователю сделать выбор.

confirm()

confirm({Текст})

Выводит на экран окно предупреждения с текстом, переданным в качестве параметра, предлагающее пользователю сделать выбор. Если пользователь нажмет Ок, возвращается true, если Отмена - false.

execScript()

execScript({Выражение},{Язык})

Вычисляет переданное в качестве первого параметра выражение. Второй аргумент должен иметь значение "JavaScript".

Поддерживается только IE начиная с 4.0

find()

find([{Строка поиска}[, true|false, true|false]])

Выводит на экран диалоговое окно задания параметров поиска.

Первым аргументом передается строка поиска.

Второй задает, будет ли поиск производиться с учетом регистра символов (true) или нет (false, значение по умолчанию).

Третий - будет ли поиск производиться с конца документа к началу (true) или обычным порядком (false, значение по умолчанию).

Возвращает true, если поиск был успешным.

Поддерживается тольк NN начиная с 4.0

focus()

Переносит фокус на текущее окно.

forward()

Переходит к следующему документу в списке истории, как если бы на панели инструментов нажали кнопку Вперед.

Поддерживается только NN начиная с 4.0

home()

Переходит на "домашнюю" страницу, заданную в настройках Web-обозревателя, как если бы на панели инструментов нажали кнопку Домой.

Поддерживается только NN начиная с 4.0

moveBy()

moveBy({X},{Y})

Перемещает окно на X пикселов вправо и на Y пикселов вниз. Для перемещения влево и вверх задайте отрицательные значения X и Y.

moveTo()

moveTo({X},{Y})

Перемещает окно в точку экрана, заданную координатами X и Y.

navigate()

navigate({Адрес})

Загружает в окно Web-страницу, адрес которой передан в качестве параметра.

Поддерживается только IE.

open()

open({Адрес}, {Имя окна}, [{Список свойств окна, разделенных запятыми}])

Открывает новое окно Web-обозревателя, загружает в него документ, адрес которого передан в первом параметре, и присваивает окну имя, переданное во втором параметре.

В третьем параметре может быть передан список свойств окна.

print()

Печатает содержимое окна на принтере.

prompt()

prompt({Приглашение}, [{Значение по умолчанию}])

Выводит на экран диалоговое окно с полем ввода, приглашающее пользователя ввести какое-либо строковое значени. Текст приглашения передается в качестве первого параметра; во втором параметре может быть передано значение по умолчанию.

resizeBy()

resizeBy({X},{Y})

Увеличивает окно на X пикселов по горизонтали и на Y пикселов по вертикали. Для уменьшения окна задайте отрицательные значения X и Y.

resizeTo()

resizeTo({X},{Y})

Увеличивает или уменьшает окно до размера, заданного значениями X и Y.

scroll()

scroll({X},{Y})

Прокручивает содержимое окна до точки с координатами X и Y. Не рекомендуется к использованию и сохранен только для совместимости.

scrollBy()

scrollBy({X},{Y})

Прокручивает содержимое окна на X пикселов вправо и на Y пикселов вниз. Для прокрутки влево и вверх задайте отрицательные значения X и Y.

scrollTo()

scrollTo({X},{Y})

Прокручивает содержимое окно в точку, заданную значениями X и Y.

setHotKeys()

setHotKeys(true|false)

Разрешает (true) или запрещает (false) "горячие" клавиши в окне, не имеющем строки меню.

Поддерживается только NN начиная с 4.0

setInterval()

setInterval({Функции или выражение},{Интервал}, [{Список аргументов функции, разделенных запятыми}])

Вычисляет значение выражения или вызывает функцию каждый раз по истечении заданного интервала (в миллисекундах). Может передавать в функцию заданные в списке аргументы.

Возвращает указатель на объект таймера, который можно использовать в методе clearInterval для остановки и уничтожения таймера.

setResizeeable()

setResizeeable(true|false)

Разрашает (true) или запрещает (false) пользователю изменять размеры окна.

Поддерживается только NN начиная с 4.0

setTimeout()

setTimeout({Функции или выражение},{Интервал}, [{Список аргументов функции, разделенных запятыми}])

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

stop()

Останавливает загрузку текущей страницы.

Поддерживается только NN начиная с 4.0

Свойства окна, передаваемые методу open

alwaysLowered

alwaysLowered=yes|no

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

Поддерживается только NN начиная с 4.06

alwaysRaised

alwaysRaised=yes|no

Если yes, то создаваемое окно будет всегда находиться над другими окнами, даже если оно не имеет фокуса.

Поддерживается только NN начиная с 4.06

channelmode

channelmode=yes|no

Если yes, то создаваемое окно будет отображаться с панелью каналов (так называемый "режим театра").

Поддерживается только IE начиная с 4.0

dependent

dependent=yes|no

Если yes, то создаваемое окно будет дочерним по отношению к создавшему, т.е. при закрытии создающего окна будет закрываться и создаваемое.

Поддерживается только NN начиная с 4.06

directories

directories=yes|no

Включает или отключает отображение кнопок директорий Navigator, у создаваемого окна.

fullscreen

fullscreen=yes|no

Если yes, то создаваемое окно займет весь экран (так называемый "режим киоска").

Поддерживается только IE начиная с 4.0

height

height={Высота}

Задает высоту создаваемого окна в пикселах.

hotkeys

hotkeys=yes|no

Если no, то большинство "горячих" клавиш будут запрещены в создаваемом окне.

Поддерживается тольк NN начиная с 4.06

innerHeight

innerHeight={Высота}

Задает высоту клиентской области создаваемого окна в пикселах.

Поддерживается только NN начиная с 4.06

Рекомендуется использовать вместо height

innerWidth

innerWidth={Ширина}

Задает ширину клиентской области создаваемого окна в пикселах.

Поддерживается только NN начиная с 4.06

Рекомендуется использовать вместо width

left

left={X}

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

Поддерживается только IE начиная с 4.0

location

location=yes|no

Включает или отключает отображение панели адреса, включающего строку ввода адреса, у создаваемого окна.

menubar

menubar=yes|no

Включает или отключает отображение строки меню у создаваемого окна.

outerHeight

outerHeight={Высота}

Задает полную (с рамками, строкой меню, полосами инструментов) высоту создаваемого окна в пикселах.

Поддерживается только NN начиная с 4.06

Рекомендуется к использованию вместо height.

outerWidth

outerWidth={Ширина}

Задает полную (с рамками, строкой меню, полосами инструментов) ширину создаваемого окна в пикселах.

Поддерживается только NN начиная с 4.06

Рекомендуется к использованию вместо width.

replace

replace=yes|no

Если yes, то адрес документа, размещаемого в создаваемом окне, заменит в списке истории адрес документа, находящегося в создающем окне.

Поддерживается тольк IE начиная с 4.0

resizable

resizable=yes|no

Включает или отключает возможность изменения размера создаваемого окна.

screenX

screenX={X}

То же, что и left для IE.

Поддерживается только NN начиная с 4.06

screenY

screenY={Y}

То же, что и top для IE.

Поддерживается только NN начиная с 4.06

scrollbars

scrollbars=yes|no

Включает или отключает отображение полос прокрутки у создаваемого окна.

status

status=yes|no

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

titlebar

titlebar=yes|no

Включает или отключает отображение заголовка у создаваемого окна.

Поддерживается только IE начиная с 4.0

toolbar

toolbar=yes|no

Включает или отключает отображение панели инструментов у создаваемого окна.

top

top={Y}

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

Поддерживается только IE начиная с 4.0

width

width={Ширина}

Задает ширину создаваемого окна в пикселах.

z-lock

z-lock=yes|no

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

Поддерживается только NN начиная с 4.06

Вместо значений yes и no вы можете использовать 1 и 0, либо если вообще указывается параметр - соответствует yes, если параметр не указан - no.

Некоторые версии Web-обозревателей для определенных параметров принимают только значения 1 и 0.

Работа с окнами

Давайте поподробнее остановимся на некоторых моментах использования свойств и методов окон.

Прежде всего, требуется дополнительное рассмотрение метода open. Он позволяет Web-дизайнеру открыть на экране дополнительное окно Web-обозревателя и поместить в него какую-либо страницу - очень полезное средство для разработки сложных многостраничных сайтов.

var contentsWindow;contentsWindow = window.open("http://www.spravkaweb.ru/contents.htm","contents");

В этом примере мы создали новое окно, загрузили в него некую Web-страницу и присвоили ей имя contents. Метод open вернул ссылку на объект вновь созданного окна, которую мы можем впоследствии использовать для работы с этим окном:

contentsWindow.Left = 300;

Имя окна можно использовать в атрибуте TARGET тега <A>:

<A href="http://www.spravkaweb.ru/contents2.htm"target="contents">Содержание</A>

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

contentsWindow = window.open("http://www.spravkaweb.ru/contents.htm","contents", "toolbar=no", "status=no");

Мы можем задать начальные координаты и размеры создаваемого окна:

contentsWindow = window.open("http://www.spravkaweb.ru/contents.htm","contents", "top=100", "left=200", "width=400", height="200");

А эта строка будет работать только в NN версии 4.06 или более поздней:

contentsWindow = window.open("http://www.spravkaweb.ru/contents.htm","contents", "screenY=100", "screenX=200", "outerWidth=400",outerHeight="200");

Когда создание окна перестанет быть нужным, его можно закрыть при помощи метода close. Свойство closed позволит в дальнейшем проверить, закрыто ли это окно (например, если его закроет пользователь):

contentsWindow.close;if(contentsWindow.closed) . . .

Свойство status позволяет поместить в строку состояния какой-либо текст, отличный от текста по умолчанию:

window.status = "Справочник WEB - языков";

А свойство defaultStatus позволит также просто вернуть туда текст по умолчанию:

window.status = window.defaultStatus;

Вы также можете вести примитивный диалог с пользователем, используя три специально предусмотренных метода. Метод alert выводит на экран окно предупреждения с заданным текстом и кнопкой Ок:

window.alert("Привет!!!");

Метод confirm отображает окно сообщения с текстом и кнопками Ок и Отмена. Если пользователь нажал Ок, возвращается true, иначе - false.

if(window.confirm("Выберите что-нибудь.")) alert("Вы нажали Ок");else alert("Вы нажали Отмена");

Метод prompt позволяет запросить у пользователя какие-либо данные. Он выводит диалоговое окно с полем ввода и кнопками Ок и Отмена. В качестве параметров принимается текст приглашения и необязательный текст по умолчанию, отображаемый в поле ввода:

string=window.prompt("Пример использования метода prompt:", "Введите что-нибудь");alert(string);

Объект layer

Все слои, определенные в документе, доступны как элементы коллекции layers.

document.layers[2];document.layers["somelayer"];

NN поддерживает прямой доступ к слоям по имени. Имена слоям даются с помощью атрибута NAME тегов <LAYER> и <ILAYER>:

document.somelayer;

Для доступа к слою, находящемуся внутри другого слоя, используется такой способ:

document.layers["outerlayer"].layers["innerlayer"]

Доступ к слоям

Все слои, определенные в документе, доступны как элементы коллекции layers.

document.layers[2];document.layers["somelayer"];

NN поддерживает прямой доступ к слоям по имени. Имена слоям даются с помощью атрибута NAME тегов <LAYER> и <ILAYER>:

document.somelayer;

Для доступа к слою, находящемуся внутри другого слоя, используется такой способ:

document.layers["outerlayer"].layers["innerlayer"]

Свойства

above

Возвращает ссылку на слой, находящийся над текущим (т.е. выше в z-последовательности). Если таких нет, возвращается null.

background

Ссылка но объект Image, представляющий фоновый ресунок текущего слоя. Вы можете использовать свойство src этого объекта для задания или получения адреса файла рисунка. Этому свойству можно присвоить ссылку на другой объект Image. Если для текущего слоя не задан фоновый рисунок, возвращается null.

below

Возвращает ссылку на слой, находящийся под текущим (т.е. ниже в z-последовательности). Если таких нет, возвращается null.

bgcolor

Цвет фона слоя.

document

Возвращает ссылку на объект document, представляющий содержимое слоя.

left

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

name

Имя тега, заданного в атрибуте NAME.

pageX

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

pageY

Вертикальная координата слоя относительно остального документа в пикселах.

parentLayer

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

siblingAbove

Возвращает ссылку на слой, находящийся над текущим (т.е. выше в z-последовательности) и имеющий того же родителя. Если таких нет, возвращает null.

siblingBelow

Возвращает ссылку на слой, находящийся под текущим (т.е. виже в z-последовательности) и имеющий того же родителя. Если таких нет, возвращает null.

src

Возвращает адрес файла документа, отображаемого в слое.

top

Вертикальная координата левого верхнего угла слоя в пикселах.

visibility

Видимость слоя: show показывает его, hide скрывает, а inherit наследует видимость от родителя (это поведение по умолчанию).

window

Возвращает ссылку на объект window (или frame), где находится текущий слой.

x

То же самое, что left.

y

То же самое, что top.

zIndex

Порядок перекрытия слоев. Слои с большим значением этого свойства перекрывают слои с меньшим значением. По умолчанию равно нулю.

Методы

load

load({Адрес файла нового документа}, {Новая ширина слоя в пикселах})

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

moveAbove

moveAbove({Имя слоя})

Перемещает текущий слой выше слоя, имя которого передано в качестве параметра.

moveBelow

moveBelow({Имя слоя})

Перемещает текущий слой ниже слоя, имя которого передано в качестве параметра.

moveBy

moveBy({X},{Y})

Перемещает слой на X пикселов вправо и на Y пикселов вниз. Для перемещения влево и вверх задайте отрицательные значения X и Y.

moveTo

moveTo({X},{Y})

Перемещает слой в точку, заданную координатами X и Y. Координаты отсчитываются относительно родительского слоя (если такой есть).

moveToAbsolute

moveToAbsolute({X},{Y})

Перемещает слой в точку, заданную координатами X и Y. Координаты отсчитываются относительно документа.

resizeBy

resizeBy({X},{Y})

Увеличивает слой на X пикселов по горизонтали и на Y пикселов по вертикали. Для его уменьшения задайте отрицательные значения X и Y.

resizeTo

resizeTo({X},{Y})

Увеличивает слой до размера, заданного значениями X и Y.

Объект navigator

Объект navigator служит для доступа к самой программе Web-обозревателя. Не путайте его с объектом window, представляющем текущее окно Web-обозревателя, и названием программы Netscape Navigator.

appCodeName

Возвращает имя кода программы Web-обозревателя. И для Internet Explorer, и для Navigator вернет строку "Mozilla".

appMinorVersion

Возвращает младшую цифру номера версии программы Web-обозревателя. Например, для Internet Explorer 5.0 вернет "0", а для 5.5 - "5".

Поддерживается только Internet Explorer начиная с 4.0

appName

Возвращает имя программы Web-обозревателя, например, "Netscape" или "Microsoft Internet Explorer".

appVersion

Возвращает версию программы Web-обозревателя.

browserLanguage

Возвращает код программы Web-обозревателя. Поддерживается только IE начиная с 4.0

cookieEnabled

Возвращает true, если Web-обозревателю разрешен пользователем прием cookie. Поддерживается только IE начиная с 4.0

cpuClass

Возвращает класс процессора клиентского компьютера, например, "x86" или "Alpha". Поддерживается только IE начиная с 4.0

language

Возвращает код языка программы Web-обозревателя. Поддерживается только NN начиная с 4.0

onLine

Возвращает true, если клиент в настоящее время подключен к интернету (находится в режиме on-line), и false, если отключен (off-line).

Поддерживается только IE начиная с 4.0

platform

Возвращает название клиентской платформы, например, "Win32".

systemLanguage

Возвращает код языка операционной системы клиента. Поддерживается только IE начиная с 4.0

userAgent

Возвращает строку, идентифицирующую Web-обозреватель клиента. Является комбинацией значений свойств appCodeName и appVersion.

userLanguage

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

Поддерживается только IE начиная с 4.0

Объект navigator поддерживает, кроме того, метод javaEnabled(), возвращающий true, если Web-обозревателю разрешено пользователем выполнение сценариев JavaScript.

Немного более подробно хотелось бы сказать о свойстве appVersion, а точнее о возвращаемом им значении. Все дело в том, что у IE и NN оно будет разным.

Вот какой формат будет у Navigator:

{Версия} [{Язык}] ({Операционная система}; U|I)

Здесь {Версия} представляет собой версию Web-обозревателя, {Язык} - язык программы (но может и отсутствовать), {Операционная система} - обозначение операционной системы клиента, например, "Win96", "Win16" или "WinNT", буква "U" - американскую версию программы, а "I" - интернациональную.

Например:

4.0 [ru] (Win95; I)

У Internet Explorer формат вывода значений свойства appVersion другой:

{Совместимая версия Navigator} (compatible; {Версия}; {Операционная система})

Здесь {Операционная система} может принимать значения "Windows 3.1", "Windows 3.11", "Windows 95" или "Windows NT".

2.0 (compatible; 3.01; Win95)

Свойство userAgent возвращает значение, имеющее формат:

{Значение appCodeName}/{Значение appVersion}

То есть, для двух предыдущих примеров мы получим следующие значения:

Mozilla/4.0 (Win95; I)Mozilla/2.0 (compatible; 3.01; Win95)

Объект screen

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

availHeight

Возвращает высоту полезной области экрана без панели задач и подобных ей элементов графического интерфейса системы.

availWidth

Возвращает ширину полезной области экрана без панели задач и подобных ей элементов графического интерфейса системы.

colorDepth

Возвращает глубину цвета. Для 16 цветов возвращается 2, для 256 - 8, для 16,7 миллионов цветов (режим High Color) - 32

height

Возвращает полную высоту экрана.

width

Возвращает полную ширину экрана.

Объект history

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

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

current

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

length

Возвращает размер списка истории.

next

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

previous

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

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

back()

Загружает в окно Web-обозревателя предыдущий документ из списка истории.

forward()

Загружает в окно Web-обозревателя следующий документ из списка истории.

go()

go({Адрес})

Загружает в окно Web-обозревателя следующий документ из списка истории, интернет-адрес которого наиболее близок к переданному в качестве параметра.

Поддерживается только NN.

go({Позиция})

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

Поддерживается только IE начиная с 4.0

go({Приращение})

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

Поддерживается только NN.

Советы по JavaScript

Передача и обработка данных в html-файле

Передача данных в html-файл:

Передачу данных в html-файл можно произвести через URL-адрес. После адреса ставиться знак вопроса и после него параметр, который Вы хотите передать. Если этих параметров несколько, то между ними ставиться амперсанд (&).

Пример 1:

"youfile.html?parametr"

Пример 2:

"youfile.html?parametr1&parametr2&parametr3"

Также данные можно передавать при помощи форм. Для этого надо воспользоваться методом GET.

Вот как буде выглядеть URL-адрес в строке броузера:

Пример:

"youfile.html?name1=value1&name2=value2&name3=value3"

Получение переданных данных:

Получение переданных данных выполняется при помощи JavaScript.

Сначало мы присваиваем переменной все то, что находится после знака вопроса:

var p_url=location.search.substring(1);

Если Вы передавали один параметр, то переменную p_url можно обрабатывать.

Если параметров было много, то их надо разделить:

var parametr=p_url.split("&");

У нас получился массив parametr, который содержит полученные данные.

Если Вы пересылали данные при помощи форм, то надо избавиться от знака равенства и присвоить каждой переменной свое значение:

var values= new Array();for(i=0; i var j=parametr.split("="); values[j[0]]=unescape(j[1]);}

Пример:

Если строка была:

"youfile.html?name=Serg&city=Рязань&age=21"

то получим массив:

values[name]="Serg";values[city]="Рязань";values[age]="21";

или можно так:

values[0]="Serg";values[1]="Рязань";values[2]="21";

Чем заменить SSI, или необычное использование JavaScript

Структура подавляющего количества интернет-страничек примерно одинакова: это заголовок странички, навигационное меню и, непосредственно, само содержимое. Нет проблем, когда на Вашем сайте несколько страниц. Если Вы захотели изменить дизайн, то на это уйдет немного времени. А если страниц не 8-10 а 100-200? Чтобы поменять дизайн нужен долгий однообразный кропотливый труд. А если в меню появился новый пункт? Опять же везде на каждой странице надо вводить изменения.

Помочь в этом может SSI - возможность собрать страничку из отдельных блоков. Т.е у Вас есть меню, которое одинаково на всех страницах. Вы его выносите в отдельный файл, а затем включаете его в нужное место на странице. Теперь, чтобы изменить меню на всех страницах, надо изменить его только в одном файле.

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

Справиться с этой проблемой может язык JavaScript, а именно атрибут SRC в теле тега <SCRIPT>.

Атрибут SRC задает URL файла, в котором находится код программы JavaScript, а в самом файле с расширением *.js мы запишем то, что должно выводиться на экран при помощи метода document.write

Например у нас есть меню состоящее из двух пунктов и страница, в которую надо вставить это меню:

Файл menu.js:

document.write("<B>Меню:</B>

<BR>"); document.write("<A href="page1.html">Ссылка1</A>

<BR>"); document.write("<A href="page2.html">Ссылка2</A>");

Файл page.html:

<html> <head> <title>Проверка</title> </head> <body> <h1>Моя страница</h1> <script src="menu.js"></script> . . . </body> </html>

Т.е. вместо

<script src="menu.js"></script>

браузер вставил:

<B>Меню:</B>

<BR> <A href="page1.html">Ссылка1</A>

<BR> <A href="page2.html">Ссылка2</A>

И если вместо меню на всех страницах вставить <script src="menu.js"></script>, то для изменения меню на всех страницах нужно изменить только файл menu.js

Но у этого метода есть небольшие недостатки:

Как сделать страницу стартовой

Сделав страницу стартовой при запуске Internet Explorer браузер пользователя будет автоматически загружать указанный адрес.

Вот код ссылки, нажав которую пользователь сделает страницу стартовой:

<a href="#" onClick="this.style.behavior="url(#default#homepage)"; this.setHomePage("http://www.spravkaweb.ru/"); return false;"> Сделать страницу стартовой</a>

Как добавить страницу в избранное

Добавляет вашу страницу в "Избранное".

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

<a href="#" onClick="window.external.addFavorite ("http://www.spravkaweb.ru/", "Краткий справочник WEB-языков"); return false;"> Добавить сайт в избранное</a>

Как вывести дату последнего изменения страницы

Эта возможность позволяет автоматически указывать дату последней модификации данной страницы.

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

<script language="JavaScript"> <!-- document.write ("Дата последнего изменения: " + document.lastModified); //--> </script>

Как убрать в теге SELECT рамку и стрелку

При помощи каскадных таблиц стилей (CSS) можно изменить стандартный вид объекта <SELECT>:

<SELECT size=1 style="position:absolute;width:100px; clip:rect(2px 82px 20px 2px);background:pink;top:10px;">

<OPTION VALUE=1>One

<OPTION VALUE=2>Two

<OPTION VALUE=3>Three </SELECT>

Интересный JavaScript - побуквенное появление текста

Данный эффект позволяет выводить текст побуквенно. Есть возможность задавать количество выводимых за один раз символов и скорость вывода.

Вот код:

<script>

var source,dest,len,now=0,delay=100,letters=1;

function show_text()

{

source = document.getElementById("pageTextSource");

dest = document.getElementById("pageText");

len = source.innerHTML.length;

show();

}

function show()

{

dest.innerHTML += source.innerHTML.substr(now,letters);

now+=letters;

if(now<len)

setTimeout("show()",delay);

}

</script>

<body onload="show_text();">

<p style="display:none" id="pageTextSource">Текст для вывода...

<p id="pageText"></p>

</body>

Content

Справочкик по JavaScript

Справочкик по JavaScript

О этом справочнике

Совместное использование HTML и JavaScript

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

Объектная модель документа

Объект document

Свойства

Методы

Коллекция объектов

Подчиненные объекты и коллекции объекта document

Обращение к элементам страницы

Объект location

Объект style

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

Работа с объектом style

Объект style в Internet Explorer

Объект style в Navigator. JavaScript-стили

Объект window

Свойства

Методы

Свойства окна, передаваемые методу open

Работа с окнами

Объект layer

Доступ к слоям

Свойства

Методы

Объект navigator

Объект screen

Объект history

Советы по JavaScript

Передача и обработка данных в html-файле

Чем заменить SSI, или необычное использование JavaScript

Как сделать страницу стартовой

Как добавить страницу в избранное

Как вывести дату последнего изменения страницы

Как убрать в теге SELECT рамку и стрелку

Интересный JavaScript - побуквенное появление текста