Вход Регистрация
Файл: masteram_us/work/js_teach/embed.php
Строк: 101
<?php
require'../../shaxty.php';

$title='Учебник JS';
$align 'left';
$head 'Учебник JS';
include_once (
H.'shaxty/head.php');
echo 
'<br />';
?>
<!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-документ: как операторы и функции в тэге &lt;SCRIPT&gt;, 
специфицировав файл в качестве источника кода 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, "Обработчики Событий&quot;</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>&lt;SCRIPT&gt;</CODE> является расширением HTML и может содержать 
любое количество операторов JavaScript, как показано здесь:</p>
<PRE><A NAME="1013181"></a>&lt;SCRIPT&gt;<br>&nbsp;&nbsp;&nbsp;<I>операторы JavaScript ..</I>.<br>&lt;/SCRIPT&gt;</PRE>
<p><A NAME="1013182"></a>В документе может быть несколько тэгов <CODE>&lt;SCRIPT&gt;</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>&lt;SCRIPT&gt;</CODE> 
для специфицирования версии JavaScript, для которой скрипт компилируется. Например, 
для использования синтаксиса JavaScript 1.2  Вы специфицируете:</p>
<PRE><A NAME="1013188"></a>&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt;</PRE>
<p><A NAME="1013189"></a>Используя атрибут <CODE>LANGUAGE</CODE>, Вы можете создавать скрипты для ранних 
версий Navigator'а. Если конкретный браузер не 
поддерживает специфицированную версию JavaScript, код игнорируется. Если Вы не 
специфицируете атрибут LANGUAGE, поведение по умолчанию зависит от версии Navigator'а.</p>
<p><A NAME="1013191"></a>В таблице перечислены тэги <CODE>&lt;SCRIPT&gt;</CODE>, поддерживаемые 
различными версиями Netscape Navigator'а.</p><A NAME="1013235"></a>
<h6 align="center" style="text-align: center"><A NAME="1013194"></a>
Таблица 9.1&nbsp;Версии 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>
Поддерживаемые Тэги &lt;SCRIPT&gt;<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>&lt;SCRIPT LANGUAGE="JavaScript"&gt;</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>&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt;</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>&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt;</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>&lt;SCRIPT LANGUAGE="JavaScript1.3"&gt;</CODE> и все предыдущие версии</P></TABLE>
<p><A NAME="1013590"></a>Navigator игнорирует код в тэгах <CODE>&lt;SCRIPT&gt;</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>&lt;SCRIPT LANGUAGE="JavaScript"&gt;<br>// Определить функции, совместимые с версией 1.0, такие как doClick() в этом примере<br>&lt;/SCRIPT&gt;</PRE><PRE><A NAME="1013239"></a>&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt;<br>// Переопределение этих функций с использованием возможностей 1.1<br>// Также определение функций только версии 1.1<br>&lt;/SCRIPT&gt;</PRE><PRE><A NAME="1013240"></a>&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt;<br>// Переопределение этих функций с использованием возможностей 1.2<br>// Также определение функций только версии 1.2<br>&lt;/SCRIPT&gt;</PRE><PRE><A NAME="1013241"></a>&lt;FORM ...&gt;<br>&lt;INPUT TYPE="button" onClick="doClick(this)" ...&gt;<br>...<br>&lt;/FORM&gt;</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>&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt;<br>// Заменить эту страницу в истории сессии версией для 1.2<br>location.replace("js1.2/mypage.phpl");<br>&lt;/SCRIPT&gt;<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>&lt;SCRIPT LANGUAGE="JavaScript"&gt;<br>if (navigator.userAgent.indexOf("4.0") != -1)<br>&nbsp;&nbsp;&nbsp;jsVersion = "1.2";<br>else if (navigator.userAgent.indexOf("3.0") != -1)<br>&nbsp;&nbsp;&nbsp;jsVersion = "1.1";<br>else<br>&nbsp;&nbsp;&nbsp;jsVersion = "1.0";<br>&lt;/SCRIPT&gt;<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>&lt;SCRIPT&gt;<br>&lt;!-- Начало скрытия содержимого скрипта от старых браузеров.<br><I>Операторы JavaScript...<br></I>// Здесь скрытие заканчивается. --&gt;<br>&lt;/SCRIPT&gt;</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>
Рисунок&nbsp; 9.1&nbsp;&nbsp;Простой скрипт</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, "Обработка Событий&quot;</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>&lt;SCRIPT&gt;</CODE> даёт возможность 
специфицировать файл как источник кода JavaScript (вместо непосредственного встраивания JavaScript в HTML). Например:</p>
<PRE><A NAME="1013279"></a>&lt;SCRIPT SRC="common.js"&gt;<br>&lt;/SCRIPT&gt;</PRE><p><A NAME="1013280"></a>
Этот атрибут часто используется для использования функций на нескольких страницах.</p><p><A NAME="1014486"></a>
Закрывающий/конечный тэг <CODE>&lt;/SCRIPT&gt;</CODE> необходим.</p><p><A NAME="1014458"></a>
Операторы JavaScript в теле тэга <CODE>&lt;SCRIPT&gt;</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>&lt;SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js"&gt;</PRE>
<p><A NAME="1014260"></a>Если Вы загружаете документ любым URL, кроме <CODE>file:</CODE>, и этот 
документ содержит тэг <CODE>&lt;SCRIPT SRC="..."&gt;</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&nbsp;&nbsp;&nbsp;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-конструкции, поскольку&nbsp; атрибуты одного HTML-элемента могут зависеть 
от информации об элементах, размещённых ранее на странице.</p><p><A NAME="1013296"></a>
Вы, возможно, уже знакомы с мнемониками HTML, с помощью которых можно определить 
символы по специальному числовому коду или имени, вставив впереди амперсанд (<CODE>&amp;</CODE>) 
и в конце мнемоники - точку с запятой (<CODE>;</CODE>). Например, Вы можете 
включить символ &quot;больше&quot; (<CODE>&gt;</CODE>) мнемоникой <CODE>&amp;gt;,</CODE> 
а символ &quot;меньше&quot; (<CODE>&lt;</CODE>) мнемоникой <CODE>&amp;lt;</CODE>.</p><p><A NAME="1013297"></a>
Мнемоники JavaScript также начинаются знаком амперсанда (<CODE>&amp;</CODE>) и 
заканчиваются точкой с запятой (<CODE>;</CODE>). Вместо имени или числа Вы 
можете использовать выражение JavaScript, заключённое в фигурные скобки <CODE>{}</CODE>. 
Мнемоники JavaScript можно использовать только в тех местах, где может появиться 
обычное значение атрибута HTML. Например, предположим, Вы определяете переменную <CODE>barWidth</CODE>. 
Вы можете создать горизонтальную линию со специфицируемым процентным значением:</p>
<PRE><A NAME="1013298"></a>&lt;HR WIDTH="&amp;{barWidth};%" ALIGN="LEFT"&gt;</PRE>
<p><A NAME="1013299"></a>Так, например, если <CODE>barWidth</CODE> будет 50, этот оператор создаст такую линию.</p>
<h6><A NAME="1013304"></a>Рисунок 9.2&nbsp;&nbsp;&nbsp;Результат использования мнемоники 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>&lt;H4&gt;&amp;{myTitle};&lt;/H4&gt;</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>&nbsp;&nbsp;&nbsp;document.write("&lt;HR ALIGN='left' WIDTH=" + widthPct + "%&gt;")<br>}</PRE>
<p><A NAME="1013316"></a>Вот другой пример:</p>
<PRE><A NAME="1013317"></a>&lt;INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')"&gt;</PRE>
<H2><A NAME="Specifying Alternate Content with the NOSCRIPT Tag">
<A NAME="1013319"></a>Специфицирование альтернативного содержимого тэгом NOSCRIPT</H2><hr><p><A NAME="1013321"></a>
Тэг <CODE>&lt;NOSCRIPT&gt;</CODE> используется для специфицирования альтернативного содержимого для браузеров, не поддерживающих JavaScript. HTML в 
тэге <CODE>&lt;NOSCRIPT&gt;</CODE> отображается браузерами, не поддерживающими JavaScript; 
код внутри этого тэга игнорируется Navigator'ом. Учтите, однако, что, если пользователь отключил JavaScript на вкладке Advanced 
диалога Preferences, Navigator отобразит код тэга <CODE>&lt;NOSCRIPT&gt;</CODE>.</p><p><A NAME="1013323"></a>
Вот пример тэга <CODE>&lt;NOSCRIPT&gt;</CODE>.</p>
<PRE><A NAME="1013324"></a>&lt;NOSCRIPT&gt;<br>&lt;B&gt;This page uses JavaScript, so you need to get Netscape Navigator 2.0 or later!<br>&lt;BR&gt;<br>&lt;A HREF="http://home.netscape.com/comprod/mirror/index.phpl"&gt;<br>&lt;IMG SRC="NSNow.gif"&gt;&lt;/A&gt;<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>&lt;/NOSCRIPT&gt;<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>
<?
 
echo '&laquo; <a href="/work/?">В Раздел</a>';
echo 
'<br />';
include_once (
H.'shaxty/foot.php');
foot();?>
Онлайн: 1
Реклама