Файл: www/ycheb/js_teach/embed.php
Строк: 99
<?php
include '../../config.php';
$title='Учебник JavaScript';
aut();
head();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<phpl<TITLE>Ведрение JavaScript в HTML</TITLE>
<BODY>
<h5><A HREF="contents.php">Оглавление</a> | <A HREF="partcli.php">Назад</a>
| <A HREF="evnt.php">Вперёд</a> | <A HREF="bklast.php">Индекс</a></h5>
<HR><h1>Глава 9<BR><a name="1009710"></a>Внедрение JavaScript в HTML</h1><p><A NAME="1013080"></a>
Вы можете встроить JavaScript в HTML-документ: как операторы и функции в тэге <SCRIPT>,
специфицировав файл в качестве источника кода JavaScript, специфицировав
выражения JavaScript как значения HTML-атрибута или как обработчики событий в
некоторых HTML-тэгах (во основном - в элементах формы).</p><p><A NAME="1012854"></a>В главе имеются следующие разделы:</p>
<ul><LI><A NAME="1012855"></a><A HREF="#1013179">Использование тэга SCRIPT</a></LI><LI><A NAME="1013395"></a>
<A HREF="#1013277">Специфицирование файла с кодом JavaScript</a></LI><LI><A NAME="1013469"></a>
<A HREF="#1013293">Использование выражений JavaScript в качестве значений атрибутов HTML</a></LI><LI><A NAME="1013471"></a>
<a href="#1013313">Использование кавычек</a></LI><LI><A NAME="1013472"></a>
<A HREF="#1013319">Специфицирование альтернативного содержимого тэгом NOSCRIPT</a></LI></ul>
<p><A NAME="1013396"></a>О скриптинге в обработчиках событий см.
<A HREF="evnt.php#1009710">Главу 10, "Обработчики Событий"</a>.</p>
<BLOCKQUOTE><p><B>ПРИМЕЧАНИЕ: </B><A NAME="1013539"></a>В отличие от HTML, JavaScript чувствителен к регистру символов.</p></BLOCKQUOTE>
<H2><A NAME="Using the SCRIPT Tag"><A NAME="1013179"></a>Использование тэга SCRIPT</H2><hr><p><A NAME="1013180"></a>
Тэг <CODE><SCRIPT></CODE> является расширением HTML и может содержать
любое количество операторов JavaScript, как показано здесь:</p>
<PRE><A NAME="1013181"></a><SCRIPT><br> <I>операторы JavaScript ..</I>.<br></SCRIPT></PRE>
<p><A NAME="1013182"></a>В документе может быть несколько тэгов <CODE><SCRIPT></CODE>, и каждый тэг
может содержать любое количество операторов JavaScript.</p><H3><A NAME="Head2;"></a><A NAME="1013185"></a>
Специфицирование версии JavaScript</H3><hr><p><A NAME="1013187"></a>
Каждая версия Navigator'а поддерживает разные версии JavaScript.
Для исключения проблем при использовании различных версий Navigator'а
с JavaScript, используйте атрибут <CODE>LANGUAGE</CODE> в тэге <CODE><SCRIPT></CODE>
для специфицирования версии JavaScript, для которой скрипт компилируется. Например,
для использования синтаксиса JavaScript 1.2 Вы специфицируете:</p>
<PRE><A NAME="1013188"></a><SCRIPT LANGUAGE="JavaScript1.2"></PRE>
<p><A NAME="1013189"></a>Используя атрибут <CODE>LANGUAGE</CODE>, Вы можете создавать скрипты для ранних
версий Navigator'а. Если конкретный браузер не
поддерживает специфицированную версию JavaScript, код игнорируется. Если Вы не
специфицируете атрибут LANGUAGE, поведение по умолчанию зависит от версии Navigator'а.</p>
<p><A NAME="1013191"></a>В таблице перечислены тэги <CODE><SCRIPT></CODE>, поддерживаемые
различными версиями Netscape Navigator'а.</p><A NAME="1013235"></a>
<h6 align="center" style="text-align: center"><A NAME="1013194"></a>
Таблица 9.1 Версии JavaScript и Navigator'а</h6><TABLE BORDER="2" CELLPADDING=5><TR><TH><B><A NAME="1013200"></a>
Версия Navigator'а<TH><B><A NAME="1013202"></a>Версия JavaScript по умолчанию<TH><B><A NAME="1013204"></a>
Поддерживаемые Тэги <SCRIPT><TR><TD><P><A NAME="1013206"></a>Navigator ранее 2.0</P><TD><P><A NAME="1013208"></a>
JavaScript не поддерживается</P><TD><P><A NAME="1013210"></a>Отсутствуют</P><TR><TD><P><A NAME="1013212"></a>
Navigator 2.0</P><TD><P><A NAME="1013214"></a>JavaScript 1.0</P><TD><P><A NAME="1013216"></a>
<CODE><SCRIPT LANGUAGE="JavaScript"></CODE></P><TR><TD><P><A NAME="1013218"></a>
Navigator 3.0</P><TD><P><A NAME="1013220"></a>JavaScript 1.1</P><TD><P><A NAME="1013222"></a>
<CODE><SCRIPT LANGUAGE="JavaScript1.1"></CODE> и все предыдущие версии</P><TR><TD><P><A NAME="1013224"></a>
Navigator 4.0-4.05</P><TD><P><A NAME="1013226"></a>JavaScript 1.2</P><TD><P><A NAME="1013228"></a>
<CODE><SCRIPT LANGUAGE="JavaScript1.2"></CODE> и все предыдущие версии</P><TR><TD><P><A NAME="1013230"></a>
Navigator 4.06-4.5</P><TD><P><A NAME="1013232"></a>JavaScript 1.3</P><TD><P><A NAME="1013234"></a>
<CODE><SCRIPT LANGUAGE="JavaScript1.3"></CODE> и все предыдущие версии</P></TABLE>
<p><A NAME="1013590"></a>Navigator игнорирует код в тэгах <CODE><SCRIPT></CODE>, которые
специфицируют неподдерживаемую версию. Например, Navigator 3.0 не
поддерживает JavaScript 1.2, поэтому, если пользователь запускает скрипт JavaScript 1.2
в Navigator'е 3.0, этот скрипт будет проигнорирован.</p><p><A NAME="1013237"></a>
<B>Пример 1.</B> Показано определение функций три раза, первый - для JavaScript 1.0,
второй - использование возможностей JavaScript 1.1, третий - JavaScript 1.2.</p>
<PRE><A NAME="1013238"></a><SCRIPT LANGUAGE="JavaScript"><br>// Определить функции, совместимые с версией 1.0, такие как doClick() в этом примере<br></SCRIPT></PRE><PRE><A NAME="1013239"></a><SCRIPT LANGUAGE="JavaScript1.1"><br>// Переопределение этих функций с использованием возможностей 1.1<br>// Также определение функций только версии 1.1<br></SCRIPT></PRE><PRE><A NAME="1013240"></a><SCRIPT LANGUAGE="JavaScript1.2"><br>// Переопределение этих функций с использованием возможностей 1.2<br>// Также определение функций только версии 1.2<br></SCRIPT></PRE><PRE><A NAME="1013241"></a><FORM ...><br><INPUT TYPE="button" onClick="doClick(this)" ...><br>...<br></FORM></PRE>
<p><A NAME="1013242"></a><B>Пример 2.</B> Показано использование двух разных версий документа JavaScript,
одна - для JavaScript 1.1, а вторая - для JavaScript 1.2. По умолчанию
загружается документ для JavaScript 1.1. Если у пользователя запущен Navigator 4.0, метод <CODE>replace</CODE> заменяет страницу.</p>
<PRE><A NAME="1013243"></a><SCRIPT LANGUAGE="JavaScript1.2"><br>// Заменить эту страницу в истории сессии версией для 1.2<br>location.replace("js1.2/mypage.phpl");<br></SCRIPT><br><I>[1.1-совместимая страница продолжается здесь...]</I></PRE>
<p><A NAME="1013244"></a><B>Пример 3.</B> Показано, как тестировать свойство <CODE>navigator.userAgent</CODE>
для определения версии Navigator'а 4.0. Затем код выполняет версии 1.1 и 1.2.</p>
<PRE><A NAME="1013245"></a><SCRIPT LANGUAGE="JavaScript"><br>if (navigator.userAgent.indexOf("4.0") != -1)<br> jsVersion = "1.2";<br>else if (navigator.userAgent.indexOf("3.0") != -1)<br> jsVersion = "1.1";<br>else<br> jsVersion = "1.0";<br></SCRIPT><br><I>[здесь нужно проверить версию jsVersion перед использованием расширения 1.1 или 1.2]</I></PRE>
<H3><A NAME="Head2;"></a><A NAME="1013248"></a>Скрытие скриптов в тэгах комментария</H3><hr><p><A NAME="1013249"></a>
Только версии Navigator'а 2.0 и более поздние распознают JavaScript. Чтобы другие браузеры игнорировали код JavaScript,
поместите весь текст скрипта внутри тэгов комментария HTML и вставьте перед
конечным тэгом комментария двойной слэш (//), являющийся символом однострочного
комментария JavaScript:</p>
<PRE><A NAME="1013251"></a><SCRIPT><br><!-- Начало скрытия содержимого скрипта от старых браузеров.<br><I>Операторы JavaScript...<br></I>// Здесь скрытие заканчивается. --><br></SCRIPT></PRE>
<p><A NAME="1013252"></a>Поскольку браузеры обычно игнорируют неизвестные тэги, браузеры, не работающие с
JavaScript, будут игнорировать начальный и конечный тэги <CODE>SCRIPT</CODE>.
Все операторы скрипта находятся внутри тэгов HTML-комментария, поэтому они также
игнорируются. Navigator правильно интерпретирует тэги <CODE>SCRIPT</CODE> и
игнорирует строку скрипта, начинающуюся с двойного слэша (//).</p><p><A NAME="1013253"></a>
Хотя Вы не обязаны использовать эту технику, это рекомендуется делать, чтобы
Ваши страницы не генерировали неотформатированные операторы скрипта у
пользователей, не использующих Navigator 2.0 и более поздние его версии.</p>
<BLOCKQUOTE><p><B>ПРИМЕЧАНИЕ: </B><A NAME="1013255"></a>Для упрощения, некоторые примеры в этой книге не прячут скрипты.</p></BLOCKQUOTE>
<H3><A NAME="Head2;"></a><A NAME="1013258"></a>Пример: первый скрипт</H3><hr><p><A NAME="1013262"></a>
На <a href="#1013269">Рисунке 9.1</a> показан простой скрипт, выводящий в Navigator'е:</p><P><A NAME="1013263"></a>
Hello, net!<br>That's all, folks.</p><p><A NAME="1013264"></a>
Заметьте, что здесь нет отличий в отображении первой строки, генерируемой JavaScript,
и второй строки, генерируемой обычным HTML.</p><h6><A NAME="1013269"></a>
Рисунок 9.1 Простой скрипт</h6>
<b><P>
<IMG SRC="graphics/getstart.gif" width="527" height="204"></a></b></P>
<p><A NAME="1013271"></a>Вы иногда видите точку с запятой в конце каждой строки JavaScript. Вообще-то
символ ; не обязателен и необходим только тогда, когда в одной строке вводятся
несколько операторов. Это чаще всего бывает в обработчиках событий, которые
обсуждаются в <A HREF="evnt.php#1009710">Главе 10, "Обработка Событий"</a>.</p>
<H2><A NAME="Specifying a File of JavaScript Code"><A NAME="1013277"></a>
Специфицирование файла с кодом JavaScript</H2><hr><p><A NAME="1013278"></a>
Атрибут <CODE>SRC</CODE> тэга <CODE><SCRIPT></CODE> даёт возможность
специфицировать файл как источник кода JavaScript (вместо непосредственного встраивания JavaScript в HTML). Например:</p>
<PRE><A NAME="1013279"></a><SCRIPT SRC="common.js"><br></SCRIPT></PRE><p><A NAME="1013280"></a>
Этот атрибут часто используется для использования функций на нескольких страницах.</p><p><A NAME="1014486"></a>
Закрывающий/конечный тэг <CODE></SCRIPT></CODE> необходим.</p><p><A NAME="1014458"></a>
Операторы JavaScript в теле тэга <CODE><SCRIPT></CODE> с атрибутом <CODE>SRC</CODE>
игнорируются, за исключением браузеров, не поддерживающих атрибут <CODE>SRC</CODE>,
таких как Navigator 2.</p><H3><A NAME="Head2;"></a><A NAME="1014307"></a>URL, которые могут специфицироваться в атрибуте SRC</H3>
<hr><p><A NAME="1013284"></a>В атрибуте <CODE>SRC</CODE> можно специфицировать любой URL, относительный или
абсолютный. Например:</p><PRE><A NAME="1013285"></a><SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js"></PRE>
<p><A NAME="1014260"></a>Если Вы загружаете документ любым URL, кроме <CODE>file:</CODE>, и этот
документ содержит тэг <CODE><SCRIPT SRC="..."></CODE>, этот внутренний
атрибут <CODE>SRC</CODE> не может обратиться к другому URL <CODE>file:</CODE>.</p><H3><A NAME="Head2;"></a>
<A NAME="1014321"></a>Требования к файлам, специфицированным атрибутом SRC</H3><hr><p><A NAME="1013286"></a>
Внешние файлы с кодом JavaScript не могут содержать никаких тэгов HTML: они
обязаны содержать только операторы и определения функций JavaScript.</p><p><A NAME="1013287"></a>
Внешние файлы JavaScript должны иметь расширение файла <CODE>.js</CODE>, и
сервер обязан отображать расширение <CODE>.js</CODE> в MIME-тип <CODE>application/x-javascript</CODE>,
который сервер отсылает обратно в шапке/header HTTP. Для отображения расширения
в MIME-тип добавьте следующую строку в файл <CODE>mime.types</CODE> в директории config
сервера, а затем перезапустите сервер.</p>
<PRE><A NAME="1013288"></a>type=application/x-javascript exts=js</PRE>
<p><A NAME="1013289"></a>Если сервер не отображает <CODE>.js</CODE> в MIME-тип <CODE>application/x-javascript</CODE>, Navigator
неправильно загружает файл JavaScript, специфицированный атрибутом <CODE>SRC</CODE>.</p>
<BLOCKQUOTE><p><B>ПРИМЕЧАНИЕ: </B><A NAME="1013291"></a>Это требование не применяется, если Вы используете локальные файлы.</p></BLOCKQUOTE>
<H2><A NAME="Using JavaScript Expressions as HTML Attribute Values">
<A NAME="1013293"></a>Использование выражений JavaScript<br>
в качестве значений атрибутов HTML</H2><hr>
<p><A NAME="1013295"></a>Используя <I>мнемоники JavaScript</I>, Вы можете
специфицировать любое выражение JavaScript в качестве значения атрибута HTML.
Значения мнемоник вычисляются динамически. Это позволяет создавать более гибкие
HTML-конструкции, поскольку атрибуты одного HTML-элемента могут зависеть
от информации об элементах, размещённых ранее на странице.</p><p><A NAME="1013296"></a>
Вы, возможно, уже знакомы с мнемониками HTML, с помощью которых можно определить
символы по специальному числовому коду или имени, вставив впереди амперсанд (<CODE>&</CODE>)
и в конце мнемоники - точку с запятой (<CODE>;</CODE>). Например, Вы можете
включить символ "больше" (<CODE>></CODE>) мнемоникой <CODE>&gt;,</CODE>
а символ "меньше" (<CODE><</CODE>) мнемоникой <CODE>&lt;</CODE>.</p><p><A NAME="1013297"></a>
Мнемоники JavaScript также начинаются знаком амперсанда (<CODE>&</CODE>) и
заканчиваются точкой с запятой (<CODE>;</CODE>). Вместо имени или числа Вы
можете использовать выражение JavaScript, заключённое в фигурные скобки <CODE>{}</CODE>.
Мнемоники JavaScript можно использовать только в тех местах, где может появиться
обычное значение атрибута HTML. Например, предположим, Вы определяете переменную <CODE>barWidth</CODE>.
Вы можете создать горизонтальную линию со специфицируемым процентным значением:</p>
<PRE><A NAME="1013298"></a><HR WIDTH="&{barWidth};%" ALIGN="LEFT"></PRE>
<p><A NAME="1013299"></a>Так, например, если <CODE>barWidth</CODE> будет 50, этот оператор создаст такую линию.</p>
<h6><A NAME="1013304"></a>Рисунок 9.2 Результат использования мнемоники JavaScript</h6>
<b><P>
<IMG SRC="graphics/entity.gif" width="408" height="127"></a></b></P><p><A NAME="1013306"></a>
Как и в HTML, после отображения вывода вид страницы может измениться только при её перезагрузке.</p><p><A NAME="1013307"></a>
В отличие от обычных мнемоник, которые могут появляться в любом месте текстового
потока HTML, мнемоники JavaScript интерпретируются только в правой части пары
имя/значение HTML-атрибутов. Например, если у Вас имеется оператор:</p>
<PRE><A NAME="1013308"></a><H4>&{myTitle};</H4></PRE><p><A NAME="1013309"></a>
он выведет строку <CODE>myTitle</CODE> вместо значения переменной <CODE>myTitle</CODE>.</p>
<H2><A NAME="Using Quotation Marks"><A NAME="1013313"></a>Использование кавычек</H2><hr><p><A NAME="1013314"></a>
Везде, где Вы указываете строку в кавычках внутри строкового литерала,
используйте одинарные кавычки (') для ограничения строкового литерала. Это даст
скрипту возможность отличить литерал внутри строки. В следующем примере функция <CODE>bar</CODE>
содержит литерал "left" в значении атрибута, заключённого в двойные кавычки:</p>
<PRE><A NAME="1013315"></a>function bar(widthPct) {<br> document.write("<HR ALIGN='left' WIDTH=" + widthPct + "%>")<br>}</PRE>
<p><A NAME="1013316"></a>Вот другой пример:</p>
<PRE><A NAME="1013317"></a><INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')"></PRE>
<H2><A NAME="Specifying Alternate Content with the NOSCRIPT Tag">
<A NAME="1013319"></a>Специфицирование альтернативного содержимого тэгом NOSCRIPT</H2><hr><p><A NAME="1013321"></a>
Тэг <CODE><NOSCRIPT></CODE> используется для специфицирования альтернативного содержимого для браузеров, не поддерживающих JavaScript. HTML в
тэге <CODE><NOSCRIPT></CODE> отображается браузерами, не поддерживающими JavaScript;
код внутри этого тэга игнорируется Navigator'ом. Учтите, однако, что, если пользователь отключил JavaScript на вкладке Advanced
диалога Preferences, Navigator отобразит код тэга <CODE><NOSCRIPT></CODE>.</p><p><A NAME="1013323"></a>
Вот пример тэга <CODE><NOSCRIPT></CODE>.</p>
<PRE><A NAME="1013324"></a><NOSCRIPT><br><B>This page uses JavaScript, so you need to get Netscape Navigator 2.0 or later!<br><BR><br><A HREF="http://home.netscape.com/comprod/mirror/index.phpl"><br><IMG SRC="NSNow.gif"></A><br>If you are using Navigator 2.0 or later, and you see this message,<br>you should enable JavaScript by on the Advanced page of the Preferences dialog box.<br></NOSCRIPT><br>...</PRE>
<h5><A HREF="contents.php">Оглавление</a> | <A HREF="partcli.php">Назад</a>
| <A HREF="evnt.php">Вперёд</a> | <A HREF="bklast.php">Индекс</a></h5><hr>
</BODY></HTML>
<?php
echo gb.'<a href="../../ycheb">Учебники</a>'.div;
echo gb.'<a href="'.H.'enter">Прихожая</a>'.div;
foot(); ?>