Листинг 5.

<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 могут выводить на экран и более сложные. В них пользователь может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию.

Рассмотрим еще несколько простейших примеров использования JavaScript.

Например, интересной возможностью Javascript является использование диалоговой панели ввода информации. Введенная в диалоговой панели текстовая строка выводится в окне браузера.

Листинг 6.

<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 с встроенным в него сценарием представлен в листинге 7.

Листинг 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 допустимо использовать и те, и другие кавычки, однако закрывающая кавычка должна быть такой же, что и открывающая. Внутренняя пара кавычек должна отличаться от внешней.

Можно установливать обработчики самых разных событий, таких, как: загрузка страницы, щелчок по ссылке или кнопке формы, выбор ссылки или поля формы и др. Мы рассмотрим это несколько позже.

Задания:

1. Измените последний пример так, чтобы диалоговая панель возникала не при наведении курсора мыши, а при выборе ссылки (событие onClick).

2. Измените пример так, чтобы при наведении курсора мыши на ссылку, выполнялась бы процедура, выводящая в окно браузера фразу "Hello, word!".

3. Напишите скрипт, который сначала выводит на экран диалоговое окно, а затем, после нажатия кнопки "ОК", в окне браузера пишет фразу "Hello, world!".

4. Напишите скрипт, который запрашивает у пользователя информацию, а затем выводит ее в диалоговом окне.

5. Составьте документ так, чтобы диалоговое окно для ввода информации предлагалось только после наведения курсора мыши на ссылку, и введенная пользователем текстовая строка выводилась бы в виде диалогового окна, или в окно браузера.

6. Написать скрипт, реализующий сложение двух чисел по щелчку на кнопке