vvz.nw.ru Примеры к занятиям по JavaScript

<< Встраивание кода JavaScript в документ HTML

Код JavaScript может быть встроен в документ HTML следующими основными способами.

  1. Включение фрагментов сценария внутри элемента script:
     
    <script type="text/JavaScript">
        ... операторы ...
      </script>
     
    На практике наряду с атрибутом type часто используют и атрибут language="JavaScript" , несмотря на то, в спецификации HTML он объявлен нежелательным. Наличие атрибута language гарантирует выполнение сценария любым браузером, поддерживающим JavaScript. Атрибут language позволяет также задать версию языка, возможности которой задействованы в сценарии, и тем самым ограничить выполенение сценария лишь браузерами, поддерживающими указанную версию. Например, при задании language="JavaScript1.5" сценарий будет выполняться лишь в браузерах, в которых реализована поддержка JavaScript1.5.
     
    Элементы script могут содержаться как в разделе head, так и в body. При интерпретации документа они выполняются последовательно. В head, как правило, объявляются и инициализируются глобальные переменные и размещаются описания функций. В body фрагменты сценария обычно реализуют вставку динамически формируемого содержимого, например, вывод случайного изображения или даты последнего изменения документа.
     
  2. Включение файлов со сценариями JavaScript:
     
     <script type="text/JavaScript" src="myFunc.js"></script>
     
    Вкключение файлов актуально, если одни и те же функции, объекты, глобальные переменные используются не в одном, а в ряде документов сайта. В таком случае эти файлы (обычно имеющих расширение .js) размещают в разделе head соответствующих документов. Это упрощает поддержку сценариев и позволяет ускорить загрузку за счет кэширования браузером файла с кодом JavaScript.
     
  3. Определение обработчика события.
     
    Обработчики событий, связанных с элементами документа HTML, указываются как атрибуты этих элементов. Список этих атрибутов приведен в разделе "События JavaScript". Значение этих атрибутов может представлять собой любое количество операторов JavaScript, однако обычно обработчики определяются как функции, описанные в элементе script. Ниже приведены два условных примера.
     
    <span onClick="this.style.color='red'"> Click me! </span>
     
    - в ответ на щелчок мыши текст "Click me!" станет красным.
    <img src="jazz.jpg" id="jazz"
         onMouseOver="changeImg('rock.jpg')"
         onMouseOver="changeImg('jazz.jpg')">
    
    - при наведении / уводе курсора мыши изображение меняется; это реализовано с помощью некоей функции changeImg().
     
  4. URL типа JavaScript.
     
    В гиперсылке можно указать значение атрибута href как псеводпротокол javascript: , после которого идет список инструкций. В этом случае при выборе гиперссылки браузер исполняет код JavaScript. Например выбор гиперссылки
    <a href="javascript: window.open('next.htm','newWin','width=300,height=200'); void(0)">
       откроем новое окно
    </a>
    приведет к открытию нового окна 300х200px и загрузке в него документа next.htm.
     
    При использовании URL типа JavaScript следует помнить, что если последняя инструкция возвращает какое-то значение, его строковый эквивалент будет выведен в текущий документ, заменив его содержимое. Попробуйте, например, в приведенном выше коде убрать инструкцию void(0). Новое окно, конечно, откроется, но поскольку метод window.open() возвращает значение объектного типа, в исходном документе появится строка [object] или [object Window] (в зависимости от браузера). Чтобы избежать этого, применяют инструкцию void(0), указывающую на неопределенное возвращаемое значение.
     
    Определенным недостатком URL типа JavaScript является отображение в статусной не адреса целевого документа, а последовательности инструкций JavaScript, невразумительной для большинства пользователей.


vvz.nw.ru  > JavaScript