Реферат Справочник javascript
Работа добавлена на сайт bukvasha.net: 2015-10-28Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Краткое содержание справочника
Совместное использование HTML и JavaScript
Правила написания скриптов
Объектная модель документа
Объект document
Свойства и методы
Коллекция объектов
Подчиненные объекты и коллекции объекта document
Обращение к элементам страницы
Объект location
Объект style
Свойства и методы
Работа с объектом style
Объект style в Internet Explorer
Объект style в Navigator. JavaScript-стили
Объект window
Свойства
Методы
Свойства окна, передаваемые методу open
Работа с окнами
Объект layer
Доступ к слоям
Свойства
Методы
Объект navigator
Объект screen
Объект history
Правила написания скриптов
Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:
<SCRIPT [language="{Язык программирования, на котором написан скрипт}"]
[src="{Адрес файла со скриптом}"]>
. . . Текст скрипта
</SCRIPT>
Текст скрипта помещаетс внутрь тега <SCRIPT>
Атрибут language позволяет указать, на каком языке программирования написан скрипт. Значение по умолчанию - "JavaScript". Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".
Navigator позволяет задавать версию интерпретатора JavaScript:
<SCRIPT language="JavaScript 1.2">
Это может пригодиться в случаях, когда вы используете возможность языка JavaScript, специфичную для какой-либо версии.
В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator.
| JavaScript | Navigator |
| 1.0 | 2.0 |
| 1.1 | 3.0 |
| 1.2 | 4.0 |
| 1.3 | 4.06 |
Второй атрибут 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[ ="{Цвет}"]; Значение по умолчанию #0000FF. |
| bgColor | Задает или возвращает цвет фона страницы. В IE работает правильно, только если цвет страницы установлен атрибутом BGCOLOR. |
| body | Возвращает ссылку на все содержимое тега <BODY>. |
| fgColor | Задает или возвращает цвет текста. Значение по умолчанию #000000. |
| fileCreatedDate | Возвращает дату создания файла HTML-документа или графического изображения в строковом виде. |
| fileModifiedDate | Возвращает дату последнего изменения файла HTML-документа или графического изображения в строковом виде. |
| fileSize | Возвращает размер файла HTML-документа или графического изображения в строковом виде. |
| height | Задает или возвращает высоту документа в пикселях. |
| lastModified | Возвращает дату последнего изменения документа в виде строки. |
| linkColor | Задает или возвращает цвет гиперссылок в документе. В IE работает правильно, только если цвет гипессылок установлен атрибутом LINK. |
| readState | Возвращает текущее состояние документа. Возвращает одно из четырех значений: |
| referrer | Возвращает интернет-адрес Web-страницы, с которой пользователь перешел на текущую страницу. Если же пользователь перешел на нее простым набором адреса в строке Web-обозревателя, возвращается пустая строка. |
| title | Возвращает заголовок Web-страницы, заданный в теге <TITLE> |
| URL | Задает или возвращает интернет-адрес текущей Web-страницы. |
| vlinkColor | Задает или возвращает цвет посещенных гиперссылок в документе. В IE работает правильно, только если цвет посещенных гиперссылок установлени атрибутом VLINK. Значение по умолчанию №800080 |
| wigth | Ширина документа в пикселях. Доступно только для чтения. |
| Метод | Описание |
| close() | Заставляет Web-страницу немедленно обновить свое содержимое после использования методов write. Метод не принимает параметров и не возвращает значения. |
| elementFromPoint({X}, {Y}) | Возвращает ссылку на элемент, находящийся по координатам X и Y. Метод принимает два параметра, задающие в пикселях горизональную и вертикальную координаты соответственно. |
| getElementById({Имя элемента}) | Возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод принимает единственный параметр - имя элемента страницы. |
| getSelection() | Возвращает строку, содержащую текст, выделенный пользователем на странице. Метод не принимает параметров. |
| write({Текст}) | Записывает текст или HTML-код, переданный как параметр, в текущее место документа. |
| 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 | Все элементы страницы, включая теги <HTML>, <HEAD>, <TITLE> и <BODY>. |
| anchors | Все "якоря" страницы |
| applets | Все Java-апплеты, изображения и элементы ActiveX |
| embeds | Все расширения, внедренные в страницу. |
| forms | Все Web-формы. |
| frames | Все фреймы набора фреймов. |
| images | Все изображения на странице. |
| layers | Все слои страницы. |
| links | Все гиперссылки на странице. В случае NN также все "горячие" области <AREA>. |
| location | Объект location для данного документа. |
| scripts | Все скрипты, внедренные в страницу. |
| selection | Объект selection, представляющий выделенный пользователем на странице текст. |
| styleSheets | Все таблицы стилей встроенные или привязанные к странице. |
Коллекция 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").outerHTML
images("image1").outerHTML
NN делать так не позволяет. Он требует обязательной ссылки на document. Вдобавок он не поддерживает коллекцию all.
document.images("image2").src
Имя элемента Web-страницы задается при помощи атрибутов ID и NAME. Если каждый элемент страницы имеет уникальное имя, то можно использовать так называемое прямое обращение к элементам. То есть, обращаться к нему не как к элементу коллекции, а как к отдельному объекту. Это работает и в IE и в NN.
image1.outerHTML
layer1.top
Прямое обращение происходит быстрее, чем обращение через коллекцию. Поэтому его рекомендуется использовать во всех случаях, когда не нужно специальное обращение к коллекциям и когда каждый элемент страницы, к которому производится обращение из скриптов, имеет уникальное имя.
Свойства и методы объекта location
Объект location содержит информацию о местонахождении текущего документа, т.е. его интернет-адрес. Его также можно использовать для перехода на другой документ и перезагрузки текущего документа.
| Свойство | Описание |
| hash | Имя "якоря" в интернет-адресе документа, если оно есть. |
| host | Имя компьютера в сети интернет вместе с номером порта, если он указан. |
| hostname | Имя компьютера в сети Интернет. |
| href | Полный интернет-адрес документа. |
| pathname | Путь и имя файла, если они есть. |
| port | Номер порта. Если не указан, возвращает номер 80 - стандартный порт, через который работает протокол HTTP. |
| protocol | Идентификатор протокола. Если не указан, возвращается "http:". |
| search | Строка параметров, если она есть. |
| Метод | Описание |
| assign({Адрес}) | Загружает документ, адрес которого передан в качестве параметра. |
| reload([true|false]) | Перезагружает документ с Web-сервера. Необязательный параметр нужен только для NN: значение true заставляет Web-обозреватель перезагрузить документ с жесткого диска, где он был сохранен ранее, а false (значение по умолчанию) - прямо с Web-сервера. |
| replace({Адрес}) | Загружает документ, адерс которого передан в качестве параметра, и заменяет в списке истории Web-обозревателя адрес предыдущего документа адресом нового. |
Пользуясь объектом location, можно загрузить другой документ на место текущего. Для этого просто присвойте значение нового интернет-адреса свойству href.
document.location.href = "http://webobzor.h12.ru";
Пользователи IE также могут воспользоваться методом assign:
document.location.assign("http://webobzor.h12.ru");
Если вы хотите полностью заменить текущий документ, чтобы даже адрес его не появлялся в списке истории, воспользуйтесь методом replace:
document.location.replace("http://webobzor.h12.ru");
Свойства и методы объекта style
Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы: задающие стиль документа и относящиеся к самому объекту style. Свойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не соответстуют соглашению об именах JavaScript, а первые буквы всех слов, образующих имя атрибута, кроме первого, делаются прописными.
В следующей таблице показаны примеры преобразования имен атрибутов стиля в имена свойств объекта style, устанавливающих стиль элемента.
| Атрибут стиля | Свойство объекта |
| background-attachment | backgroundAttachment |
| border-bottom-color | borderBottomColor |
| font-family | fontFamily |
| z-index | zIndex |
По аналогии вы можете преобразовать все атрибуты стилей в свойства объекта style.
Все не относящееся к стилю свойства объекта style перечислены в нижерасположенной таблице. Кроме того, у этого объекта имеются методы getAttribute, removeAttribute и setAttribute. Но эти дополнительные свойства и методы поддерживаются только IE начиная с 4.0
| Свойство | Описание |
| cssText | текстовое представление стиля (параметр атибута STYLE). |
| pixelHeight | Высота элемента в пикселах. |
| pixelLeft | Смещение левого края элемента в пикселах. |
| pixelTop | Смещение верхнего края элемента в пикселах. |
| pixelWidth | Ширина элемента в пикселах. |
| posHeight | Высота элемента в тех единицах измерения, в которых она была установлена в определении стиля. |
| posLeft | Смещение левого края элемента в тех единицах измерения, в которых она была установлена в определении стиля. |
| posTop | Смещение верхнего края элемента в тех единицах измерения, в которых она была установлена в определении стиля. |
| posWidth | Ширина элемента в тех единицах измерения, в которых она была установлена в определении стиля. |
Работа с объектом 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 | Возвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах. |
| innerWidth | Возвращает ширину клиентской области окна (без рамок, меню, панелей инструментов) в пикселах. |
| length | Возвращает количество фреймов. |
| location | Возвращает ссылку на объект location документа, загруженного в текущее окно. |
| locationbar | Возвращает ссылку на объект панели адреса окна Navigator (она же Location Toolbar). Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает. |
| menubar | Возвращает ссылку на объект панели адреса окна Navigator. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает. |
| name | Возвращает имя окна или фрейма. |
| navigator | Возвращает ссылку на объект Web-обозревателя. |
| opener | Возвращает ссылку на окно, которое открыло текущее окно, например, методом open. |
| outerHeight | Возвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселах. |
| outerWidth | Возвращает полную ширину окна (с рамками, меню, панелями инструментов) в пикселах. |
| pageXOffset | Возвращает расстояние по горизонтали между текущей позицией окна и левой границей документа. При прокручивании содержимого окна право значение этого свойства увеличивается, влево - уменьшается. |
| pageYOffset | Возвращает расстояние по вертикали между текущей позицией окна и левой границей документа. При прокручивании содержимого окна вниз значение этого свойства увеличивается, вверх - уменьшается. |
| parent | Возвращает ссылку на родительское окно, если текущий объект window представляет собой фреймы. В противном случае возвращается ссылка на само это окно. |
| personalbar | Возвращает ссылку на объект панели Personal Bar окна Navigator. ЕдИнственное свойство этого объекта visible позволяет показать ее или убрать; значение true этого объекта показывает панель адреса, false убирает. |
| screen | Возвращает ссылку на объект screen. |
| screenLeft | Возвращает горизонтальную координату левого верхнего угла окна. |
| screenTop | Возвращает вертикальную координату левого верхнего угла окна. |
| screenX | Горизонатльная координата левого верхнего угла окна. |
| screenY | Вертикальная координата левого верхнего угла окна. |
| scrollbars | Возвращает ссылку на объект полос прокрутки окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает полосу прокрутки, false убирает. |
| self | Возвращает ссылку на объект window текущего окна. |
| status | Текст, отображаемый в строке состояния окна Web-обозревателя. |
| statusbar | Возвращает ссылку на объект строки состояния окна NN. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает строку состояния, false убирает. |
| toolbar | Возвращает ссылку на объект панели инструментов окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает панель инструментов, false убирает. |
| top | Возвращает ссылку на родительское окно самого верхнего уровня, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на само это окно. |
| window | То же, что и self. |
Методы объекта window
| Метод | Описание |
| alert({Текст}) | Выводит на экран окно предупреждения с текстом, переданным в качестве параметра. |
| back() | Возвращается к предыдущему документу, как если бы на панели инструментов нажали кнопку Назад. |
| blur() | Удаляет фокус с окна. |
| clearInterval({Таймер}) | Останавливает таймер, установленный методом setInterval. |
| clearTimeout({Таймер}) | Останавливает таймер, установленный методом setTimeout. |
| close() | Закрывает текущее окно. Если окно было открыто методом open(), то оно закрывается сразу же, если же оно было открыто пользователем, сначало появляется окно предупреждения, предлагающее пользователю сделать выбор. |
| confirm({Текст}) | Выводит на экран окно предупреждения с текстом, переданным в качестве параметра, предлагающее пользователю сделать выбор. Если пользователь нажмет Ок, возвращается true, если Отмена - false. |
| execScript({Выражение}, | Вычисляет переданное в качестве первого параметра выражение. Второй аргумент должен иметь значение "JavaScript". |
| find([{Строка поиска}[, | Выводит на экран диалоговое окно задания параметров поиска. Первым аргументом передается строка поиска. Второй задает, будет ли поиск производиться с учетом регистра символов (true) или нет (false, значение по умолчанию). Третий - будет ли поиск производиться с конца документа к началу (true) или обычным порядком (false, значение по умолчанию). Возвращает true, если поиск был успешным. |
| focus() | Переносит фокус на текущее окно. |
| forward() | Переходит к следующему документу в списке истории, как если бы на панели инструментов нажали кнопку Вперед. |
| home() | Переходит на "домашнюю" страницу, заданную в настройках Web-обозревателя, как если бы на панели инструментов нажали кнопку Домой. |
| moveBy({X},{Y}) | Перемещает окно на X пикселов вправо и на Y пикселов вниз. Для перемещения влево и вверх задайте отрицательные значения X и Y. |
| moveTo({X},{Y}) | Перемещает окно в точку экрана, заданную координатами X и Y. |
| navigate({Адрес}) | Загружает в окно Web-страницу, адрес которой передан в качестве параметра. |
| open({Адрес}, {Имя окна}, | Открывает новое окно Web-обозревателя, загружает в него документ, адрес которого передан в первом параметре, и присваивает окну имя, переданное во втором параметре. В третьем параметре может быть передан список свойств окна. |
| print() | Печатает содержимое окна на принтере. |
| prompt({Приглашение}, | Выводит на экран диалоговое окно с полем ввода, приглашающее пользователя ввести какое-либо строковое значени. Текст приглашения передается в качестве первого параметра; во втором параметре может быть передано значение по умолчанию. |
| resizeBy({X},{Y}) | Увеличивает окно на X пикселов по горизонтали и на Y пикселов по вертикали. Для уменьшения окна задайте отрицательные значения X и Y. |
| resizeTo({X},{Y}) | Увеличивает или уменьшает окно до размера, заданного значениями X и Y. |
| scroll({X},{Y}) | Прокручивает содержимое окна до точки с координатами X и Y. Не рекомендуется к использованию и сохранен только для совместимости. |
| scrollBy({X},{Y}) | Прокручивает содержимое окна на X пикселов вправо и на Y пикселов вниз. Для прокрутки влево и вверх задайте отрицательные значения X и Y. |
| scrollTo({X},{Y}) | Прокручивает содержимое окно в точку, заданную значениями X и Y. |
| setHotKEys(true|false) | Разрешает (true) или запрещает (false) "горячие" клавиши в окне, не имеющем строки меню. |
| setInterval({Функции или | Вычисляет значение выражения или вызывает функцию каждый раз по истечении заданного интервала (в миллисекундах). Может передавать в функцию заданные в списке аргументы. Возвращает указатель на объект таймера, который можно использовать в методе clearInterval для остановки и уничтожения таймера. |
| setResizeeable(true|false) | Разрашает (true) или запрещает (false) пользователю изменять размеры окна. |
| setTimeout({Функции или | Вычисляет значение выражения или вызывает функцию по истечении заданного интервала (в миллисекундах), если до этого небыл вызван метод clearTimeout. Может передавать в функцию заданные в списке аргументы. Возварщает указатель на объект таймера, который можно использовать в методе clearTimeout для остановки и уничтожения таймера. |
| stop() | Останавливает загрузку текущей страницы. |
Свойства окна, передаваемые методу open
| Метод | Описание |
| alwaysLowered=yes|no | Если yes, то создаваемое окно будет всегда находиться под другими окнами, даже если оно имеет фокус. |
| alwaysRaised=yes|no | Если yes, то создаваемое окно будет всегда находиться над другими окнами, даже если оно не имеет фокуса. |
| channelmode=yes|no | Если yes, то создаваемое окно будет отображаться с панелью каналов (так называемый "режим театра"). |
| dependent=yes|no | Если yes, то создаваемое окно будет дочерним по отношению к создавшему, т.е. при закрытии создающего окна будет закрываться и создаваемое. |
| directories=yes|no | Включает или отключает отображение кнопок директорий Navigator, у создаваемого окна. |
| fullscreen=yes|no | Если yes, то создаваемое окно займет весь экран (так называемый "режим киоска"). |
| height={Высота} | Задает высоту создаваемого окна в пикселах. |
| hotkeys=yes|no | Если no, то большинство "горячих" клавиш будут запрещены в создаваемом окне. |
| innerHeight={Высота} | Задает высоту клиентской области создаваемого окна в пикселах. |
| innerWidth={Ширина} | Задает ширину клиентской области создаваемого окна в пикселах. |
| left={X} | Задает горизонтальную координату левого верхнего угла создаваемого окна. |
| location=yes|no | Включает или отключает отображение панели адреса, включающего строку ввода адреса, у создаваемого окна. |
| menubar=yes|no | Включает или отключает отображение строки меню у создаваемого окна. |
| outerHeight={Высота} | Задает полную (с рамками, строкой меню, полосами инструментов) высоту создаваемого окна в пикселах. |
| outerWidth={Ширина} | Задает полную (с рамками, строкой меню, полосами инструментов) ширину создаваемого окна в пикселах. |
| replace=yes|no | Если yes, то адрес документа, размещаемого в создаваемом окне, заменит в списке истории адрес документа, находящегося в создающем окне. |
| resizable=yes|no | Включает или отключает возможность изменения размера создаваемого окна. |
| screenX={X} | То же, что и left для IE. Поддерживается только NN начиная с 4.06 |
| screenY={Y} | То же, что и top для IE. |
| scrollbars=yes|no | Включает или отключает отображение полос прокрутки у создаваемого окна. |
| status=yes|no | Включает или отключает отображение строки состояния у создаваемого окна. |
| titlebar=yes|no | Включает или отключает отображение заголовка у создаваемого окна. |
| toolbar=yes|no | Включает или отключает отображение панели инструментов у создаваемого окна. |
| top={Y} | Задает вертикальную координату левого верхнего угла создаваемого окна. |
| width={Ширина} | Задает ширину создаваемого окна в пикселах. |
| z-lock=yes|no | Если yes, то создаваемое окно никогда не будет перемещаться выше других окон, даже если получает фокус. |
Вместо значений yes и no вы можете использовать 1 и 0, либо если вообще указывается параметр - соответствует yes, если параметр не указан - no.
Некоторые версии Web-обозревателей для определенных параметров принимают только значения 1 и 0.
Работа с окнами
Давайте поподробнее остановимся на некоторых моментах использования свойств и методов окон.
Прежде всего, требуется дополнительное рассмотрение метода open. Он позволяет Web-дизайнеру открыть на экране дополнительное окно Web-обозревателя и поместить в него какую-либо страницу - очень полезное средство для разработки сложных многостраничных сайтов.
var contentsWindow;
contentsWindow = window.open("http://www.somesite.ru/contents.htm","contents");
В этом примере мы создали новое окно, загрузили в него некую Web-страницу и присвоили ей имя contents. Метод open вернул ссылку на объект вновь созданного окна, которую мы можем впоследствии использовать для работы с этим окном:
contentsWindow.Left = 300;
Имя окна можно использовать в атрибуте TARGET тега <A>:
<A href="http://www.somesite.ru/contents2.htm"
target="contents">Содержание</A>
Можно использовать дополнительные свойства окна, чтобы тонко управлять его характеристиками. Например, мы очень легко можем убрать у вновь создаваемого окна полосу инструментов и строку состояния:
contentsWindow = window.open("http://www.somesite.ru/contents.htm",
"contents", "toolbar=no", "status=no");
Мы можем задать начальные координаты и размеры создаваемого окна:
contentsWindow = window.open("http://www.somesite.ru/contents.htm",
"contents", "top=100", "left=200", "width=400", height="200");
А эта строка будет работать только в NN версии 4.06 или более поздней:
contentsWindow = window.open("http://www.somesite.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
Все слои, определенные в документе, доступны как элементы коллекции layrs.
document.layers[2]
document.layers["somelayer"]
NN поддерживает прямой доступ к слоям по имени. Имена слоям даются с помощью атрибута NAME тегов <LAYER> и <ILAYER>:
document.somelayer
Для доступа к слою, находящемуся внутри другого слоя, используется такой способ:
document.layers["outerlayer"].layers["innerlayer"]
Свойства объекта layer
| Свойство | Описание |
| 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 | Порядок перекрытия слоев. Слои с большим значением этого свойства перекрывают слои с меньшим значением. По умолчанию равно нулю. |
Методы объекта layer
| Метод | Описание |
| load({Адрес файла нового | Позволяет заменить содержимое слоя. В качестве первого параметра принимается интернет-адрес документа, который будет отображен в текущем слое. В качестве второго параметра указывается новая ширина текущего слоя в пикселах. |
| moveAbove({Имя слоя}) | Перемещает текущий слой выше слоя, имя которого передано в качестве параметра. |
| moveBelow({Имя слоя}) | Перемещает текущий слой ниже слоя, имя которого передано в качестве параметра. |
| moveBy({X},{Y}) | Перемещает слой на X пикселов вправо и на Y пикселов вниз. Для перемещения влево и вверх задайте отрицательные значения X и Y. |
| moveTo({X},{Y}) | Перемещает слой в точку, заданную координатами X и Y. Координаты отсчитываются относительно родительского слоя (если такой есть). |
| moveToAbsolute({X},{Y}) | Перемещает слой в точку, заданную координатами X и Y. Координаты отсчитываются относительно документа. |
| resizeBy({X},{Y}) | Увеличивает слой на X пикселов по горизонтали и на Y пикселов по вертикали. Для его уменьшения задайте отрицательные значения X и Y. |
| 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-страниц, просмотренных пользователем в течение времени, указанного в настройках.
| Свойство | Описание |
| current | Возвращает интернет-адрес документа, загруженного в настоящее время. |
| length | Возвращает размер списка истории. |
| next | Возвращает интернет-адрес следующего в списке истории документа. |
| previous | Возвращает интернет-адрес предыдущего в списке истории документа. |
| Метод | Описание |
| back() | Загружает в окно Web-обозревателя предыдущий документ из списка истории. |
| forward() | Загружает в окно Web-обозревателя следующий документ из списка истории. |
| go({Адрес}) | Загружает в окно Web-обозревателя следующий документ из списка истории, интернет-адрес которого наиболее близок к переданному в качестве параметра. Поддерживается только NN. |
| go({Позиция}) | Перемещается в списке истории на позицию, номер которой передан в качестве параметра. Поддерживается только IE начиная с 4.0 |
| go({Приращение}) | Перемещается в списке историй на количество позиций, переданных в качестве параметра. Можно задавать как положительные, так и отрицательные значения приращения. Поддерживается только NN. |
Конец формы
