<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Hello, world!");
// -->
</SCRIPT>
</BODY>
</HTML>
Как и подобает любому документу HTML, он
ограничен операторами <HTML>, </HTML> и
состоит из двух разделов. Раздел заголовка
выделяется операторами <HEAD> и </HEAD>, а
раздел тела документа - операторами <BODY>
и </BODY>. Программа JavaScript этом примере
встроена в тело документа HTML при помощи
операторов <SCRIPT> и </SCRIPT>, как это
показано ниже:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Hello, world!");
// -->
</SCRIPT>
С помощью оператора <SCRIPT> можно встроить
в документ сценарий, составленный на языке
JavaScript или VBScript. Язык указывается с помощью
параметра LANGUAGE. Текст сценария оформлен как
комментарий с применением операторов <!-- и
-->. Это сделано для того, чтобы сценарий не
вызывал проблем у пользователей, браузеры
которых не могут работать с JavaScript. Такие
браузеры просто проигнорируют сценарий.
Обратите внимание на строку, которой
завершается комментарий: // --> Перед
символами --> записаны два символа /. Это
позволяет обеспечить работоспособность
сценария в различных браузерах. Некоторые
из них (например, Netscape Navigator) в сценариях
JavaScript рассматривают строку --> как
ошибочную. Символы // используются в JavaScript
для выделения комментариев и предписывают
браузерам игнорировать символы, записанные
после них (в том числе и -->). Для
обозначения комментариев можно
использовать также конструкцию /*...*/. Этот
способ удобен, если комментарий содержит
несколько строк.
Наша первая программа весьма проста и содержит только одну строку:
document.write("Hello, world!");
Здесь для объекта с именем document вызывается
метод write. В качестве параметра ему
передается текстовая строка "Hello, world!".
Строка закрывается символом точка с
запятой, хотя этот символ может и
отсутствовать. Объект document - это документ
HTML, загруженный в окно браузера. Он содержит
в себе объекты, свойства и методы,
предназначенные для работы с элементами
этого документа HTML, а также для
взаимодействия с другими объектами. Метод
write записывает в тело документа HTML
приветственную строку "Hello, world!". При
этом документ будет выглядеть так, как
будто эта строка находится в нем на месте
сценария:
<HTML> <HEAD> <TITLE>Hello, world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> Hello, world! </BODY> </HTML>
Исходный текст любого сценария должен включаться в документы HTML. Однако, есть техническая возможность оформлять программы на JavaScript в отдельных файлах, а в страницах HTML указывать на эти файлы ссылки. Браузер, загружая оформленные подобным образом HTML документы, загружает оформленные в отдельных файлах сценарии и подставляет их вместо соответствующих ссылок. Такой способ включения JavaScript сценариев удобен, если один и тот же сценарий должен быть включен во множество документов HTML, или же если есть необходимость скрыть исходный код от просмотра пользователями (через просмотр источника).
Ссылки на файлы с подгружаемыми скриптами оформляются с помощью параметра SRC тега <SCRIPT>, допускающего указывать адрес URL файла сценария. Следующий пример демонстрирует использование параметра SRC. В листинге 1.2 находится исходный текст документа HTML, содержащий ссылку на файл сценария hello.js.
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript" SRC="hello.js">
</SCRIPT>
</BODY>
</HTML>
Ссылка оформлена с применением операторов
<SCRIPT> и </SCRIPT>, однако между этими
операторами нет ни одной строчки исходного
текста. Этот текст перенесен в файл hello.js (листинг
1.3).
document.write("<HR>");
document.write("Hello, world!");
document.write("<HR>");
В параметре SRC вышеприведенного примера
задано только имя файла, так как он
находится в том же каталоге, что и
ссылающийся на него файл документа HTML.
Однако можно указать и относительный путь,
и полный адрес URL, например: <SCRIPT
LANGUAGE="JavaScript"
SRC="http://www.myserver.ru/scripts/hello.js">
Существенно, чтобы файл, в котором
находится исходный текст сценария JavaScript,
имел тип js. В противном случае сценарий
работать не будет.
В сценариях JavaScript активно применяют функции и переменные. Приведем исходный текст простой программы, в которой используется переменная и функция (листинг 1.4).
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var szHelloMsg = "Hello, world!";
function printHello()
{
document.write(szHelloMsg);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
printHello();
// -->
</SCRIPT>
</BODY>
</HTML>
Прежде всего, обратите внимание на область
заголовка документа, выделенную
операторами <HEAD> и </HEAD>. В этой области
расположено определение переменной и
функции, оформленное с применением
операторов <SCRIPT> и </SCRIPT>:
<SCRIPT LANGUAGE="JavaScript">
<!--
var szHelloMsg = "Hello, world!";
function printHello()
{
document.write(szHelloMsg);
}
// -->
</SCRIPT>
Кроме того, в теле документа HTML есть еще
один раздел сценариев, выделенный
аналогичным образом:
<SCRIPT LANGUAGE="JavaScript"> <!-- printHello(); // --> </SCRIPT>Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение - текстовая строка "Hello, world!".
Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения - с префикса n.
Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg.
Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие или используют определенные в документе переменные, то их определения (вызываемых функций и переменных) необходимо разместить выше вызывающих. Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа.
Язык JavaScript имеет встроенные средства для отображения простейших диалоговых панелей, таких как панель сообщений. В листинге 1.6 приведен исходный текст сценария JavaScript, в котором вызывается функция alert, предназначенная для отображения диалоговых панелей с сообщениями.
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function printHello()
{
alert("Hello, world!");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
printHello();
// -->
</SCRIPT>
</BODY>
</HTML>
Помимо представленной в этом примере диалоговой панели сценарии JavaScript могут выводить на экран и более сложные. В них пользователь может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию.
В данном примере рассматривается использование диалоговой панели ввода информации. Введенная в диалоговой панели текстовая строка выводится в окне браузера.
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function printHello()
{
szHelloStr=prompt("Введите приветственное сообщение:", "");
document.write(szHelloStr);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
printHello();
// -->
</SCRIPT>
</BODY>
</HTML>
Диалоговая панель ввода информации вызывается с помощью функции prompt. В качестве параметров функции передается вводное сообщение для пользователя и начальное значение запрашиваемой текстовой строки (в приведенном примере - пустое).
В языке JavaScript есть удобные средства обработки событий. В следующем примере когда пользователь пытается выбрать ссылку "Select me!", разместив над ней курсор мыши, на экране появляется диалоговая панель с сообщением "Hello, world!". Исходный текст соответствующего документа HTML с встроенным в него сценарием представлен в листинге 1.7.
<HTML>
<HEAD>
<TITLE>Hello world!</TITLE>
</HEAD>
<BODY>
<H1>JavaScript Test</H1>
<A HREF="" onMouseover="alert('Hello, world!');">Select me!</A>
</BODY>
</HTML>
Здесь для нас интересна строка оператора
<A>. Напомним, что этот оператор обычно
применяется для организации ссылок на
другие документы HTML или файлы различных
объектов. В данном случае поле ссылки
параметра HREF пустое, однако дополнительно в
оператор <A> включена следующая
конструкция:
onMouseover="alert('Hello, world!');"
Она указывает, что при возникновении
события onMouseover (наведение мыши) должна
выполняться следующая строка программы
JavaScript:
alert('Hello, world!');
Обратите внимание, что строка задана не в
двойных кавычках, а в одинарных. В сценариях
JavaScript допустимо использовать и те, и другие
кавычки, однако закрывающая кавычка должна
быть такой же, что и открывающая. Внутренняя
пара кавычек должна отличаться от внешней.
Можно установливать обработчики самых разных событий, таких, как: загрузка страницы, щелчок по ссылке или кнопке формы, выбор ссылки или поля формы и др.