Условная генерация HTML-разметки на стороне браузера
Размещение кода внутри HTML-документа
Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа (внутри контейнера 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 секунду). Таким образом, каждую секунду в поле статуса будет отображаться новое время.
Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.
Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа, т.е. внутри контейнера BODY. Простой пример - встраивание в страницу локального времени:
Пример 1.3. Точное время загрузки страницы (html, txt)
Несколько слов о различных видах комментариев. В программе JavaScript можно оставлять комментарии, которые игнорируются JavaScript-интерпретатором и служат как пояснения для разработчиков. Однострочные комментарии начинаются с символов //. Текст начиная с этих символов и до конца строки считается комментарием. Многострочный комментарий заключается между символами /* и */ и может простираться на несколько строк.
Для скрытия JavaScript-кода от интерпретации старыми браузерами, не поддерживающими JavaScript (у высокого начальства еще встречаются), весь JavaScript-код между тэгами <SCRIPT> и </SCRIPT> приходится заключать в HTML-комментарии <!-- и -->. Можно предположить, что эти комбинации символов, не являясь полноценными операторами JavaScript, могут быть неверно поняты JavaScript-интерпретатором и порождать ошибки. Однако этого не происходит, так как разработчики языка ввели соглашение: комбинация символов <!-- считается началом однострочного комментария (наряду с // ). Со второй комбинацией ( --> ) такой трюк невозможен (т.к. двойной минус имеет специальное значение в JavaScript), и ее приходится комментировать символами//, что иллюстрирует следующий пример.
<SCRIPT><!-- Скрываем JavaScript-код от старых браузеров a = 5; // --></SCRIPT>
Однако в данном курсе мы не будем загромождать примеры такого рода HTML-комментариями, переложив эту обязанность на пользователя. К тому же, все реже можно встретить браузеры, которые вместо выполнения JavaScript-кода выдают его текст в окно браузера.