Home | О проекте | Новости | Рекламные статейки

Внедрение JavaScript в HTML

Есть два способа встроить операторы серверного JavaScript в HTML-страницу:

  • Тэгом SERVER.
    Используйте этот тэг для размещения в нём одиночного оператора JavaScript или нескольких операторов. Оператор расположен между тэгами <SERVER> и </SERVER>. Вы можете перемежать тэги SERVER полными операторами HTML. Никогда не помещайте тэг SERVER между открывающей (<) и закрывающей (>) угловыми скобками тэга HTML.. Также не используйте тэг <SCRIPT> между тэгами <SERVER> и </SERVER>.
  • С помощью обратной кавычки (`), известной также как тик/tick. Используйте этот символ для включения выражений JavaScript внутрь тэгов HTML, обычно для генерирования атрибута или значения атрибута HTML на базе значений JavaScript. Эта техника используется внутри таких тэгов, как якоря, изображения или тэги элементов формы, например, для предоставления значения атрибута HREF якоря. Не используйте обратные кавычки для включения выражений JavaScript вне тэгов HTML.
1.Рекламка: s |

Если Вы внедряете серверный JavaScript в HTML-страницу, машина выполнения JavaScript на сервере выполняет обнаруженные ею операторы при процессинге (обработке) страницы. Большинство операторов выполняют какие-либо операции на сервере, такие как открытие соединения с БД или блокировка совместно используемого объекта. Однако, если Вы используете функцию write в тэге SERVER или заключаете операторы в обратные кавычки, машина выполнения динамически генерирует новый HTML для модифицирования страницы, высылаемой клиенту.

 
Тэг SERVER
2.Рекламка: s | ;
x |   

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

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

Следующая выдержка из приложения Hello World иллюстрирует эти варианты:

<P>This time you are
<SERVER>
write(request.newname);
client.oldname = request.newname;
</SERVER>
<h3>Enter your name</h3>

Получив данный участок кода, машина выполнения генерирует HTML на базе значения request.newname в операторе write. Во втором операторе она просто выполняет операцию JavaScript, присваивая значение request.newname свойству client.oldname. Она не генерирует никакого HTML. Итак, если request.newname будет "Mr. Ed," машина выполнения генерирует из предыдущего отрывка следующий HTML:

<P>This time you are
Mr. Ed
<h3>Enter your name</h3>

 
Обратные Кавычки

Используйте обратные кавычки (`) для выделения выражений серверного JavaScript как заместителей для имён атрибутов или значений атрибутов HTML. JavaScript, внедрённый в HTML с помощью обратных кавычек, автоматически генерирует HTML; Вам не нужно использовать write.

В целом тэги HTML имеют форму:

<TAG ATTRIB="value" [...ATTRIB="value"]>

где ATTRIB это атрибут, а "value " это его значение. Значение в угловых скобках означает, что допускается любое количество пар атрибут/значение.

Если в обратные кавычки заключено выражение JavaScript, используемое как значение атрибута, машина выполнения JavaScript автоматически добавляет знак кавычки вокруг всего значения. Вы сами не вводите знаки кавычек, хотя Вам это может понадобиться для разграничения строковых литералов выражения, как в следующем примере. Машина выполнения не делает это для имён атрибутов, поскольку не предполагается заключение имён атрибутов в кавычки.

Например, рассмотри следующую строку из образца-приложения Hangman:

Эта строка динамически генерирует имя изображения на основе значения client.num_misses. Обратные кавычки обрамляют выражение JavaScript, конкатенирующее строку "images\hang" и целочисленное значение client.num_misses и строку ".gif", давая строку типа "images\hang0.gif". Результатом будет HTML, такой как

<IMG SRC="images\hang0.gif">

Порядок ввода кавычек является критичным. Сначала идёт обратная кавычка, указывая, что следующее значение является выражением JavaScript, состоящим из строки ("images\hang"), соединяемой с целым числом (client.num_misses) и с другой строкой (".gif"). JavaScript конвертирует всё выражение до строки и добавляет необходимые знаки кавычек вокруг значения атрибута.

Вы должны внимательно использовать знаки двойных кавычек внутри обратных кавычек, поскольку содержащееся внутри них значение интерпретируется как литерал. Поэтому не окружайте выражения JavaScript, которые необходимо вычислить, знаками кавычек. Например, если значение свойства client.val будет NetHead, то данный оператор:

<A NAME=`client.val`>

генерирует такой HTML:

<A NAME="NetHead">

но следующий оператор:

<A NAME=`"client.val"`>

генерирует HTML:

<A NAME="client.val">

В качестве другого примера приведём два атрибута тэга ANCHOR - HREF и NAME. HREF делает тэг гиперссылкой, а NAME делает его именованным якорем. Следующие операторы используют переменную choice для установки свойств attrib и val объекта client и создают затем гиперссылку/hyperlink или цель/target, в зависимости от значений:

<SERVER>
if (choice == "link") {
client.attrib
= "HREF";
client.val = "http://www.netscape.com";
}
if (choice == "target") {
client.attrib = "NAME";
client.val = "NetHead";
}
</SERVER>
<A `client.attrib`=`client.val`>Netscape
Communications</A>

Если значением choice будет "link", результат будет:

<A HREF="http://home.netscape.com">Netscape Communications</A>

Если значением choice будет "target", результат будет:

<A NAME="NetHead">Netscape Communications</A>

 
Когда Использовать Эти Виды Техники

В большинстве случаев ясно, когда использовать тэг SERVER, а когда - обратные кавычки. Иногда, однако можно достичь того же результата другим путём ("Мы пойдём..."). В общем, лучше использовать обратные кавычки для внедрения значений JavaScript в тэги HTML, а в других случаях - тэг SERVER. Например, в Hangman вместо

<IMG SRC=`"images\hang" + client.num_misses + ".gif"`>

можно записать

<SERVER>
write("<IMG SRC=\"images\hang");
write(client.num_misses);
write(".gif\">");
</SERVER>

Обратите внимание, что обратная наклонная черта (backslash) даёт возможность ввести знак кавычки внутри литеральной строки. Хотя результирующий HTML - тот же самый, в этом случае обратные кавычки предпочтительнее, поскольку исходник легче читать и редактировать.


footer:
Rambler's Top100