Сценарии можно писать непосредственно в HTML-документе, а также в отдельных текстовых файлах, которые вызываются из HTML-документа. Проще всего размещать сценарий непосредственно в HTML-документе.
Сценарий в HTML-документе можно разместить несколькими способами. Стандартным является размещение сценария в контейнерном теге <script>. Все, что находится вне тегов <script> и </script>, браузер воспринимает как HTML-код. Контейнер script может располагаться в любом месте HTML-документа и не один раз.
Контейнерный тег <script>, объемлющий код сценария, может содержать следующие атрибуты:
• language — язык сценария; возможные значения:
- "JavaScript", "JScript";
- "VBScript", "VBS".
Если атрибут language не указан, то в Internet Explorer подразумевается JScript;
• src — указывает файл (имя или URL-адрес), содержащий код сценария. Этот атрибут используется в том случае, если сценарий расположен не в HTML-документе, а в отдельном файле.
Примеры
<script language="JavaScript">
. . . // код сценария
</script>
<script language="JScript" src = "myscripts.js"></script>
При разработке сценариев, рассчитанных для различных браузеров, рекомендуется использовать ссылку language = "JavaScript".
В HTML 4 атрибут language был заменен атрибутом type. Чтобы браузер для интерпретации кода использовал последнюю версию JavaScript, необходимо указать строку: <script type="text/javascript">. Кроме того, можно вынудить браузер использовать более старую версию JavaScript или другой язык, например, JScript (type="text/jscript").
Комментарии: используются комментарии /* */ из С, // из C++ и <!-- --> из HTML. Дескриптор /* */ позволяет добавлять комментарии, занимающие несколько строк. Дескриптор // позволяет приводить однострочные комментарии. В HTML всё, что помещено между тегами <!-- и --> считается комментарием. Язык JavaScript интерпретирует этот комментарий также, как и символы //.
Некоторые более старые браузеры, которые не поддерживает дескрипторы <script>, будут выводить на экран весь код, находящийся между дескрипторами <script> и стандартным HTML-текстом. Для этого дескриптор <!-- указывают в строке после дескриптора <script>, а дескриптор //--> — в строке перед конечным дескриптором </script>. Это приводит к тому, что в браузерах, не поддерживающих JavaScript, код JavaScript будет считаться HTML-комментарием, а в браузерах, поддерживающих JavaScript код будет интерпретироваться.
Вот как используются символы комментария предохранения сценария от старых браузеров:
<script language="JavaScript" >
<!--
код сценария
//-->
</script>
Новые браузеры, поддерживающие сценарии, будут игнорировать эти символы, выполняя код сценария, а старые (не понимающие сценарии), наоборот, будут игнорировать код сценария.
Пробел для браузера означает конец команды.
На странице между тегами <head> и </head> в тегах <мета> могут размещаться метаданные Информация, содержащаяся в тегах <мета>, не отображается браузером и служит специальным целям. Например, в ней указываются язык, на котором написан документ, кодовая страница, ключевые слова для поиска и др. Эти данные очень важны для настройки браузера и работы поисковых серверов.
function имя_функции(параметры)
}
код
}
Если требуется, чтобы функция возвращала некоторое значение, то в ее теле используется оператор возврата return с указанием справа от него того, что следует возвратить. В качестве возвращаемой величины может выступать любое выражение: простое значение, имя переменной или вычисляемое выражение.
В JavaScript можно не поддерживать равенство между количествами параметров в определении функции и в ее вызове. Если в функции определены, например, три параметра, а в вызове указаны только два, то последнему параметру будет автоматически присвоено значение null. Наоборот, лишние параметры в вызове функции будут просто проигнорированы.
Инициализация в функции переменной с ключевым словом var создает локальную переменную.
Одним из главных назначений сценариев в HTML-документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов HTML имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы.
Например, следующий HTML-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет функцию myfunc():
<h2 onclick = "myfunc()">Щелкни здесь</h2>
Значением атрибута-события является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события. В приведенном примере обработчиком события onclick является функция myfunc().
Для одного и того же элемента можно определить несколько событий, на которые он будет реагировать. Другими словами, для одного и того же тега можно указать несколько атрибутов-событий.
Пример
В результате щелчка на графическом изображении из файла picture.jpg функция alert() выводит окно с сообщением. Обработчик события onclick задается в примере как функция clickimage().
<нтмl>
<script>
function clickimage() {
alert("Привет!")
}
</script>
<img src = "pict.jpg" onclick = "clickimage() ">
</html>
Рассмотрим еще один способ оформления обработчиков событий. Почти для всех тегов HTML можно указать атрибут — id (идентификатор). Этот атрибут принимает любые строковые значения, которые играют роль индивидуальных имен элементов. Если атрибут id в теге используется, то для задания обработчика события можно не использовать атрибуты-события. Вместо этого в контейнере <script> достаточно написать определение функции обработчика события, имя которой образуется по следующему шаблону:
значение id.событие()
Пример
<html>
<h1 id = " Myheader">Привет всем!</h1>
<script>
function Myheader.onclick(){
alert("Привет!")
}
</script>
</html>
Браузер, встречая в HTML-документе тег с определенным id, создает в объектной модели этого документа объект с таким же именем. Для этого объекта имеется метод обработки события. Название метода совпадает с названием события и пишется в нижнем регистре.
Объекты представляют собой программные единицы, обладающие некоторыми свойствами. Управление веб-страницами с помощью сценариев, написанных на JavaScript, заключается в использовании и изменении свойств объектов HTML-документа и самого браузера. Встроенные объекты имеют фиксированные названия и свойства. Все свойства этих объектов разделяют на два вида: просто свойства и методы. Свойства аналогичны обычным переменным. Они имеют имена и значения. Некоторые свойства объектов доступны только для чтения. Это означает, что их значения нельзя изменять. Другие свойства доступны и для записи — их значения можно изменять с помощью оператора присвоения.
Чтобы узнать значение свойства объекта, необходимо указать имя этого объекта и имя свойства, отделив их друг от друга точкой: имя_объекта.свойство. Синтаксис применении метода к объекту такой:
имя_объекта.метод(параметры).
Объект может и не иметь свойств или методов.
Объект можно понимать как некоторый контейнер, содержащий переменные-свойства и функции-методы.
Для разработчиков веб-сайтов особенно важны объекты String (обработка строк), Array (массивы), Math (математические формулы и константы) и Date (работа с датами).
Объекты с именами, совпадающими с их фиксированными названиями, называются статическими. Можно создать экземпляры (копии) статических объектов, присвоив им свои собственные имена.
Встроенные объекты имеют, среди прочих, свойство prototype (прототип), с помощью которого можно добавлять новые свойства и методы к уже существующим экземплярам объектов.