Динамический HTML и Объектная Модель Документа

Некоторые методы объекта window

Метод 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);

Все аргументы метода необязательны.

• sURL – адрес (URL) загружаемого документа. Если опущен, то about:blank
• sName – имя окна, которое может использоваться в атрибуте target (цель) элементов form и гиперссылки.
• sFeatures – строка, в которой через запятую перечисляются пары свойство=значение открываемого окна
  • height – высота окна в пикселях. В Internet Explorer 8.0 не может быть меньше 150.
  • width - ширина окна в пикселях. В Internet Explorer 8.0 не может быть меньше 250.
  • left – отступ левого края окна от левого края экрана в пикселях.
  • top – отступ верхнего края окна от верхнего края экрана в пикселях. Internet Explorer 8.0 не позволяет задавать отрицательные значения отступов и значения, превышающие размер экрана (открываемое окно должно быть видимым на экране).
  • location (yes/no) – задает, показывать ли в окне строку адреса.
  • status (yes/no) – задает, показывать ли в окне строку состояния. В Internet Explorer начиная с версии 7.0 установки location и status не имеют эффекта. Из соображений безопасности строки адреса и состояния должны быть видны.
  • resizable (yes/no) – разрешает или запрещает изменение размеров окна пользователем. Запрет допускается не во всех браузерах.
  • scrollbars (yes/no) – разрешает или запрещает полосы прокрутки, когда размер содержимого превышает размер окна. Если свойство опущено или задано no, полосы прокрутки отсутствуют.
  • menubar (yes/no), toolbar (yes/no) – разрешает или запрещает отображение строки меню и инструментов. Если опущены, то запрещены.
• bReplace (true/false) – определяет, добавлять адрес в историю браузера (false) или замещать текущий документ (true). Действует, только если документ открывается в текущем окне (параметр sName имеет значение _self, _parent или _top ).

Возвращаемое значение ( 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>