Материалы представленные на сайте исключительно с целью ознакомления пользователям Интернета и не преследуют коммерческих целей или нарушение авторских прав.
© 2018 - 2024
Метод alert (предупреждение) открывает модальное окно сообщения с введенным в качестве аргумента текстом и единственной кнопкой.
window.alert('Всем привет');Метод confirm (подтверждение) открывает диалоговое окно с сообщением и кнопками "ОК" и "Отмена". Метод возвращает true, если пользователь нажал "ОК" и false в противном случае.
if (window.confirm('Хотите продолжить?') == true) RunMyScript();Метод prompt (подсказка) открывает диалоговое окно с полем однострочного ввода и двумя кнопками. Метод возвращает введенную строку, если пользователь нажал "ОК" или null, если "Отмена".
var name = window.prompt('Ваше имя:', 'не помню'); if (name != null) document.write("Добро пожаловать, " + name); else document.write("Добро пожаловать, неизвестный");Метод setTimeout планирует выполнение определенной разработчиком функции через указанное время в миллисекундах и возвращает целочисленный идентификатор процесса, который может быть использован для отмены действия при помощи метода clearTimeout.
function MyAction() { alert("Приступайте к действиям"); } var iTimer = window.setTimeout(MyAction, 10000); // обратите внимание на отсутствие скобок после MyAction // вариант: window.setTimeout("MyAction()", 10000); function StopAlert() { window.clearTimeout(iTimer); }В этом примере через 10 секунд (после открытия окна) будет запущена функция MyAction и выдано предупреждение, если только в результате каких-либо действий пользователя не будет вызвана функция StopAlert, отменяющая выполнение процесса.
Метод setInterval выполняет указанное действие многократно через указанный промежуток времени в миллисекундах. Синтаксис метода аналогичен setTimeout. Повторы могут быть остановлены методом clearInterval.
<div id="clock"> </div> <button type="button" onclick="StopClock()"> Остановить часы</button> <script type="text/javascript"> function MyClock() { var d = new Date(); //текущие дата и время компьютера пользователя document.getElementById('clock').innerHTML = d.toTimeString(); } var iClock = window.setInterval(MyClock, 1000); function StopClock() { window.clearInterval(iClock); } </script>В этом примере функция MyClock выполняется каждую секунду. При выполнении функция получает системные дату и время локального компьютера (через объект Date ) и отображает время в блоке с id="clock". Часы могут быть остановлены нажатием кнопки, которая вызывает функцию StopClock.
Метод open открывает новое окно браузера и загружает в него документ из указанного адреса.
var oNewWindow = window.open(sURL, sName, sFeatures, bReplace);Все аргументы метода необязательны.
Возвращаемое значение ( oNewWindow ) является ссылкой на открываемое окно (объект window ) и открывает доступ к его свойствам и методам.
Окно, открытое методом window.open имеет свойство opener, являющееся ссылкой на объект window, в контексте которого был выполнен метод open.
Метод close закрывает окно. Если окно не было открыто методом open, то выдается предупреждение о том, что сценарий пытается закрыть текущее окно.
Объект document
Объект window содержит единственный объект document – HTML-документ. По разнообразию свойств и методов объект document не уступает объекту window. Именно через объект document осуществляется доступ к содержимому HTML-документа. Вот некоторые свойства и методы объекта document.
Объект body
Объект body представляет собой HTML-элемент body. Это специальный случай, поскольку элемент body в документе единственный. Для обращения к остальным элементам документа могут использоваться стандартные методы объекта document.
Коллекция all
Коллекция all поддерживается только Internet Explorer и содержит все элементы HTML-документа.
Коллекция anchors
Коллекция anchors содержит все гиперссылки (объекты a ), которые имеют атрибуты name или id. Эта коллекция полезна при создании списка гиперссылок.
Массив images
Массив document.images содержит все изображения (элементы img ), загруженные вместе с документом. Каждое изображение загружается на страницу отдельным файлом, и в случае динамической замены одного изображения другим может потребоваться время для загрузки нового файла. Чтобы избежать этого, можно заранее загрузить изображения, которые будут храниться в кэше браузера, откуда они доступны немедленно.
... <img src="myImg.jpg" onmouseover="this.src='myImg_over.jpg'"> ... <script type="text/javascript"> function ImagePreload() { var img = new Image(); img.src = 'myImg_over.jpg'; } window.onload = ImagePreload; </script> ...Коллекция forms
Коллекция forms содержит все HTML-формы, определенные в документе. Доступ к каждому из объектов form возможен по индексу или по имени (если элемент form имеет атрибут name, не являющийся стандартным).
Свойство cookie
Cookie (буквально, печенье) – это небольшие фрагменты информации, хранимые браузером. Каждая cookie представляет собой пару имя=значение. Cookie может хранить до 20 таких пар. Cookie являются механизмом хранения пользовательских настроек и поддержания диалога между веб-сервером и браузером. веб-сервер может отправлять браузеру инструкцию SetCookie с парами имя=значение, и браузер возвращает эту же пару серверу (только тому, который установил cookie ) при каждом запросе, что позволяет серверу установить, с кем (чем) ведется диалог. Cookie имеют время жизни. Если параметр expires (истечение срока) не задан или установлен на дату в прошлом, то cookie не сохраняются на диске локального компьютера и уничтожаются при закрытии браузера. Если параметр expires установлен на дату в будущем, то cookie сохраняются на диске в виде текстового файла и автоматически удаляются по истечении срока годности.
Cookie могут также читаться и создаваться в браузере при помощи языков сценариев. Свойство document.cookie представляет собой строку, содержащую пары имя=значение, разделенные точкой с запятой и пробелом ("; "). Таким образом, для получения отдельных значений требуется разбор строки.
<script> // Создает куки с определенными именем и значением. // срок действия установлен до конца XXI века. function SetCookie(sName, sValue) { document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 2099 23:59:59 GMT;"; } // Возвращает значение куки по его имени. function GetCookie(sName) { // пары разделены "; " // метод split расщепляет строку на массив строк var aCookie = document.cookie.split("; "); for (var i = 0; i < aCookie.length; i++) { // теперь следует расщепить каждую пару имя=значение var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } // Куки с запрошенным именем не существует return null; } // Удаляет куки с заданным именем. function DelCookie(sName) { document.cookie = sName + "=; expires=Fri, 21 Dec 1976 04:31:24 GMT;"; } </script>Поиск элемента по id
Элемент может быть найден в документе по его id.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Поиск по id</title> <script type="text/javascript"> function ShowDetails() { var elem = document.getElementById('details'); elem.style.display = 'block'; } </script> </head><body> <p> Нажмите кнопку для просмотра подробностей</p> <button type="button" onclick="ShowDetails()"> Подробности </button> <div id="details" style="display: none"> Здесь описаны все подробности. </div> </body></html>В этом примере метод объекта document (HTML-документ) getElementById ищет элемент, атрибут id которого равен указанному (в данном примере "details"); строчные и заглавные буквы в значении атрибута различаются.
Internet Explorer предлагает более простой доступ к элементу по его id. Достаточно просто указать id элемента.
function ShowDetails() { details.style.display = 'block'; }Следует иметь в виду, что такой подход не является стандартным и не гарантирует обнаружение элемента в других браузерах. Использование DOM метода getElementById гарантирует работу в большинстве браузеров. Предполагается, что id задает уникальный в пределах документа идентификатор элемента.
Поиск групп элементов
DOM-метод getElementsByTagName ищет элементы по имени HTML-тэга в пределах элемента, в контексте которого выполняется метод.
// коллекция таблиц в документе var oTables = document.body.getElementsByTagName('table'); document.write("В документе " + oTables.length + " таблиц"); // коллекция ячеек первой таблицы var oCells = oTables[0].getElementsByTagName('td'); DOM-метод getElementsByName ищет элементы в документе по значению атрибута name (атрибут name поддерживают управляющие элементы HTML-формы). <form method="post" action="form.php"> <input type="text" name="UserName" /> <input type="radio" name="Age" value="1" />18 – 24 <input type="radio" name="Age" value="2" />25 – 35 <input type="radio" name="Age" value="3" />36 – 55 </form>... //все элементы переключателя var oAge = document.getElementsByName('Age'); // текстовое поле UserName var oUserName = document.getElementsByName('UserName')[0]; // даже если найден единственный объект, // он является элементом массива // Тот же результат во всех браузерах: var oForm = document.forms[0]; var oAge = oForm.Age; // массив элементов var oUserName = oForm.UserName; //единственный элементЗамечание: Методы getElementById, getElementsByName и getElementsByTagName доступны только после полной загрузки документа. Например, следующий код не работает.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascript"> document.getElementById('MyDiv').innerHTML = "Hello"; </script></head><body> <div id="MyDiv"> </div></body></html>Дата: 2019-02-02, просмотров: 199.