Продолжим разбор

Перейдем к основной части:

var user_name = prompt ("Напишите свое имя","Здесь");

document.write("Привет, " + user_name + "! Милости просим!");

• Имя переменной user_name присвоено результату запроса.
• prompt просит пользователя написать свое имя.
• В строке ввода читаем: "Здесь."
• Точка с запятой в конце строки.
• document.write вызывает текст "Привет, ".
• Знак плюс + отмечает, что все элементы идут друг за другом.
• user_name вводит результат запроса. Никаких кавычек — эти слова не нужны нам на странице.
• Еще плюс.
• "! Милости просим!" завершает текст.
• Точка с запятой.

Задание

Разберите скрипт самостоятельно

<SCRIPT LANGUAGE="javascript">

var name = prompt("Напишите свое имя, пожалуйста","")
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;

document.write("<TITLE>")
document.write("Привет, "+name+ ". Сегодня " +t+ ". Спасибо, что зашли.");
document.write("</TITLE>")

</SCRIPT>

- попробуйте поработать с переменными, формирую документ в зависимости от введенных значений

например:

запросите новый заголовок окна и измените текущий заголовок на тот что ввел пользователь

выведите на странице текущую дату в следующем виде: “Сегодня 15 день 10 месяца 2003 года”

сформируйте список из трех элементов которые запросите у пользователя

попробуйте нарисовать и заполнить таблицу следующего вида:

Любимый цвет	Любимое блюдо	Любимое время года

В соответствующие ячейки поместите ответы пользователя.

Лабораторная работа № 2

Рассмотрим событиям (events). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.

События — это то, что происходит. Они добавят динамики вашему сайту. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).

Скрипт

<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>

Разбор скрипта

Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Он используется внутри гиперссылки. Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Объектом в данном случае является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.

Пожалуйста, обратите внимание на точку с запятой в конце строки.

return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.

Другие свойства

Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Попробуем создать ссылку, которая изменяла бы фон страницы с помощью обработчика onMouseOver.

1. Во-первых, раз это ссылка, то сохраним ту же схему, которой уже пользовались.
2. Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
3. Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
4. Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

Вот что получилось...

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white'; return true">Не щелкать</a>

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

Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.

Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом, мы показываем браузеру, что все это одно событие.

Однако нам еще могут понадобиться одинарные кавычки...

Вернем документу первоначальный цвет...

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', nMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>

Задание

Рассмотрим новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK.

Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

Рассмотрим, как действуют другие события. Все они работают по одной схеме.