Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 22940 / 4214 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 1:

Назначение и применение JavaScript, общие сведения

Лекция 1: 1234 || Лекция 2 >

Способ 4: вставка (контейнер <SCRIPT>)

Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Side Includes, т.е. генерации страниц документов на стороне сервера. Однако здесь мы забежали чуть вперед. При разборе документа HTML-парсер передает управление JavaScript-интерпретатору после того, как встретит тег начала контейнера <SCRIPT>. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-парсеру для обработки текста страницы после тега конца контейнера </SCRIPT>.

Помещать JavaScript-код на HTML-странице с помощью контейнера <SCRIPT> можно двумя способами. Первый состоит в написании текста кода непосредственно внутри этого контейнера:

<SCRIPT>
 a = 5;
</SCRIPT>

Второй способ состоит в том, чтобы вынести код JavaScript в отдельный файл, например, myscript.js (расширение может быть любым), и затем включить его в HTML-страницу следующим образом:

<SCRIPT SRC="myscript.js"></SCRIPT>

Этот способ удобен, когда один и тот же скрипт планируется использовать на разных HTML-страницах. Обратите внимание, что при наличии атрибута SRC содержимое контейнера <SCRIPT> пусто, и это не случайно: согласно спецификации HTML, если скрипт подключается из внешнего файла, то скрипт, написанный между тэгами <SCRIPT> и </SCRIPT>, если таковой имеется, будет проигнорирован браузером.

Здесь уместно небольшое замечание, которое позволит Вам избежать одной ошибки начинающих программистов. Между тэгами <SCRIPT> и </SCRIPT> не должно встречаться последовательности символов </SCRIPT> в любом контексте. Например, следующий пример работать не будет:

<SCRIPT>
alert('</script>');
</SCRIPT>

Дело в том, что специфика разбора HTML-документа браузером такова, что он сначала определяет границы скрипта, а потом уже передает его интерпретатору JavaScript. В нашем случае браузер посчитает, что код скрипта завершился на первой же встретившейся ему последовательности символов " </script> ", т.е. не на той, на которой было нужно нам. Чтобы пример заработал, достаточно, например, написать alert('<\/script>') (т.к. комбинация " \/ " выводит на экран символ " / "), либо разбить строчку на две: alert('</scr'+'ipt>').

Контейнер SCRIPT выполняет две основные функции:

  • размещение кода внутри HTML-документа;
  • условная генерация HTML-разметки на стороне браузера.

Первая функция аналогична декларированию переменных и функций, которые потом можно будет использовать в качестве программ переходов, обработчиков событий и подстановок. Вторая - это подстановка результатов исполнения JavaScript-кода в момент загрузки или перезагрузки документа.

Размещение кода внутри 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. Часы в поле статуса окна

Функция 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. Точное время загрузки страницы
Лекция 1: 1234 || Лекция 2 >
Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>