Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа (внутри контейнера HEAD) либо в теле документа (внутри контейнера BODY). Последний способ и его особенности будут рассмотрены в разделе "Условная генерация HTML-разметки на стороне браузера". Поэтому обратимся к заголовку документа.
Код в заголовке документа размещается внутри контейнера SCRIPT. В следующем примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события Load в теге начала контейнера BODY.
<HTML><HEAD><SCRIPT>function time_scroll(){ var d = new Date(); window.status = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); setTimeout('time_scroll()',1000);}</SCRIPT></HEAD><BODY onLoad="time_scroll()"><H1>Часы в строке статуса</H1></BODY></HTML>Пример 1.2. Часы в поле статуса окна (html, txt)
Функция time_scroll() вызывается по окончании полной загрузки документа (обработчиком onLoad). Она заносит текущую дату и время (new Date) в переменную d. Затем записывает текущее время в формате ЧЧ:ММ:СС в window.status, тем самым оно будет отображаться в поле статуса окна браузера (подробнее о нем рассказано в лекции "Программируем свойства окна браузера"). Наконец, она откладывает (setTimeout) повторный вызов самой себя на 1000 миллисекунд (т.е. 1 секунду). Таким образом, каждую секунду в поле статуса будет отображаться новое время.
Условная генерация HTML-разметки на стороне браузера
Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.
Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа, т.е. внутри контейнера BODY. Простой пример - встраивание в страницу локального времени:
<BODY>...<SCRIPT>d = new Date();document.write('Момент загрузки страницы: '+ d.getHours() + ':'+ d.getMinutes() + ':'+ d.getSeconds());</SCRIPT>...</BODY>Пример 1.3. Точное время загрузки страницы (html, txt)
//////
Комментарии в HTML и JavaScript
Несколько слов о различных видах комментариев. В программе JavaScript можно оставлять комментарии, которые игнорируются JavaScript-интерпретатором и служат как пояснения для разработчиков. Однострочные комментарии начинаются с символов //. Текст начиная с этих символов и до конца строки считается комментарием. Многострочный комментарий заключается между символами /* и */ и может простираться на несколько строк.
<SCRIPT> a=5; // однострочный комментарий /* Многострочный комментарий */ </SCRIPT>Для скрытия JavaScript-кода от интерпретации старыми браузерами, не поддерживающими JavaScript (у высокого начальства еще встречаются), весь JavaScript-код между тэгами <SCRIPT> и </SCRIPT> приходится заключать в HTML-комментарии <!-- и -->. Можно предположить, что эти комбинации символов, не являясь полноценными операторами JavaScript, могут быть неверно поняты JavaScript-интерпретатором и порождать ошибки. Однако этого не происходит, так как разработчики языка ввели соглашение: комбинация символов <!-- считается началом однострочного комментария (наряду с //). Со второй комбинацией (-->) такой трюк невозможен (т.к. двойной минус имеет специальное значение в JavaScript), и ее приходится комментировать символами //, что иллюстрирует следующий пример.
Однако в данном курсе мы не будем загромождать примеры такого рода HTML-комментариями, переложив эту обязанность на пользователя. К тому же, все реже можно встретить браузеры, которые вместо выполнения JavaScript-кода выдают его текст в окно браузера.
Указание языка сценария
Контейнер <SCRIPT> имеет необязательный атрибут LANGUAGE, указывающий язык, на котором написан содержащийся внутри контейнера скрипт. Значение атрибута не чувствительно к регистру. Если этот атрибут опущен, то его значением по умолчанию считается " JavaScript ". Поэтому все наши примеры можно записывать следующим образом:
<SCRIPT LANGUAGE="JavaScript">...</SCRIPT>В качестве альтернативы атрибут LANGUAGE может принимать значения " JScript " (упоминавшаяся выше разновидность языка JavaScript, разработанная компанией Microsoft), " VBScript " или " VBS " (оба указывают на язык программирования VBScript, основанный на Visual Basic и тоже являющийся детищем Microsoft; поддерживается преимущественно браузером Internet Explorer) и другие. Кроме того, для JavaScript бывает необходимо указать версию языка, например, LANGUAGE="JavaScript1.2". Потребность в этом может возникнуть, если нужно написать разные участки кода для браузеров, поддерживающих разные версии языка.
Следует также иметь в виду, что в настоящей версии языка HTML (т.е. 4.0 и выше) атрибут LANGUAGE контейнера <SCRIPT> считается устаревшим и нерекомендуемым к использованию (deprecated). Вместо него в контейнере <SCRIPT> рекомендуется использовать атрибут TYPE. Его значениями, также не чувствительными к регистру, могут быть " text/javascript " (значение по умолчанию), " text/vbscript " и другие. Например, все наши примеры можно оформлять так:
Некоторые старые браузеры не понимают атрибут TYPE, поэтому можно задавать оба атрибута одновременно - LANGUAGE и TYPE. Атрибут TYPE имеет высший приоритет, т.е. если браузер распознает значение TYPE, то значение LANGUAGE игнорируется.
Поскольку в любом случае значение по умолчанию соответствует языку JavaScript, в наших примерах эти атрибуты будут опускаться.
Регистр символов
Как Вы, наверное, знаете, язык HTML является регистро-независимым. Вследствие этого, контейнер <SCRIPT> можно писать как <script>, его атрибуты - как Type, LANGuage и src, значение атрибутов, указывающих язык, - как " JavaSCRIPT " и " TEXT/JavaScript ". Разумеется, значение атрибута SRC, т.е. имя файла, следует писать точно так, как файл назван в операционной системе.
Напротив, язык же JavaScript - регистро-зависимый. Это означает, что все переменные, функции, ключевые слова и т.п. должны набираться в том же регистре, в каком они заданы в языке или в программе пользователя. Например, если Вы объявили переменную var myText='Привет', то в дальнейшем ее можно использовать только как myText, но не MyText. В этом кроется частая ошибка, которую допускают программисты на JavaScript. Она усугубляется еще и тем, что JavaScript не требует явно декларировать переменные, и встретив MyText, интерпретатор может решить, что это новая (но не объявленная) переменная.
Это касается и всех встроенных объектов, свойств и методов языка. Например, объектом является document. Вызов document.write() нельзя записать как Document.write() или document.Write(). К свойству объекта document, задающему цвет фона Web-страницы, можно обратиться только как document.bgColor, а метод этого же объекта, выдающий элемент с заданным идентификатором " id5 ", можно вызвать только как document.getElementById("id5").
Названия событий, такие как Click (щелчок мышью), DblClick (двойной щелчок мышью), Load (окончание загрузки документа) и т.п. сами по себе не являются элементами синтаксиса. Обработчики же соответствующих событий могут появляться в двух контекстах:
- внутри кода JavaScript - в этом случае регистр имеет значение. Например, чтобы при возникновении события Load вызывалась функция myFunction, мы должны написать: window.onload = myFunction. Названия обработчиков событий onload, onmouseover и т.п. в таком контексте должны быть написаны маленькими буквами;
- как атрибут какого-либо HTML-контейнера - в этом случае регистр не важен. Например, чтобы обработчик события onLoad вызывал функцию myFunction, мы можем написать в HTML-исходнике: <BODY onLoad="myFunction()"> либо <BODY ONLOAD="myFunction()">.
/////