Результат работы сценария

10 11 12 13 14 15 16

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

При выполнении сценарий последовательно выводит ряд окон, содержащих:

10 + 2 равно 12

десять — это 10

10 X 2 = 20

Привет Пока

Разбор сценария

<BODY> <SCRIPT type="text/javascript"> var numsums = 10 + 2 alert("10 + 2 равно " + numsums) var x = 10 alert("десять — это " + x) var y = x * 2 alert("10 X 2 = " + y) var z = "Привет " + "Пока" alert(z) </SCRIPT></BODY>

В сценарии задается переменная numsums. Видите, она равна 12 (10+2)? Затем эта переменная используется в методе alert и выводит "10 + 2 = переменная" или 12.

Другая переменная, х, задается равной 10. Затем метод alert выводит это значение.

Следующая переменная, y, равна переменной x, умноженной на 2. Дважды десять — двадцать, не правда ли? Этот результат затем выводится в окне alert.

Наконец создается переменная z, которая показывает, что можно соединять текст с помощью знака сложения. Затем эта переменная выводиться с помощью метода alert.

Посмотрите еще раз, как работает скрипт.

Основные моменты:

· Переменные начинаются со слова VAR (от variable, переменная), затем идет имя, знак = и значение переменной. VAR можно не писать, но лучше не отказываться от него, пока не появится некоторый опыт.

· Имя переменной может состоять из одного или нескольких символов (буквы, цифры, символ подчеркивания). Но лучше использовать содержательные имена.

· Имена переменных различают регистр! То есть, Хvar и хvar — это два разных имени переменных.

· Допустимая длина имени переменной существенно различна для разных браузеров. В целях безопасности берите имена не больше 10 символов. Не используйте в именах пробелы.

· Значение, присваиваемое текстовой переменной, ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе сценарий воспримет их как текст с числовым значением 0!

· Операции сложения, вычитания, умножения и деления обозначаются знаками +, -, *, и / соответственно.

· Знак плюс (+) выполняет две задачи: сложение чисел или соединение вместе двух строк текста (например, "Joe" + " Burns" будет "Joe Burns").

· Все языки программирования имеют зарезервированные слова, например, названия команд. В любой книге можно найти их перечень. Использование зарезервированных слов в качестве имен переменных будет приводить к ошибкам.

· Если необходимо, применяйте в именах переменных вместо пробела знак подчеркивания _ user_name.

Задание

Перепишите приведенный выше код JavaScript в виде функции. Можно, при желании, изменить некоторые математические операции, например, на деление. Включите в тело документа HTML приветственное сообщение. Используйте для выполнения функции событие onLoad.

Возможное решение

<html><head> <SCRIPT type="text/javascript"> function vars() { numsums=10 + 2 alert("10 + 2 is " + numsums) var x = 10 alert("ten is " + x) y = x * 2 alert("10 X 2 = " + y) z = "Привет " + "Пока" alert(z) } </SCRIPT></head><BODY OnLoad="vars()"><h1>Добро пожаловать на мою страницу</h2></body></html>

Мы будем заниматься переменными очень много по мере изучения новых команд Java Script. Главное, пытайтесь понять, что делаете, а не копируйте автоматически.

15. Урок: Изменение изображения с помощью события onMouseOver

Работа с изображениями. Динамическое изменение изображений.

Концепция

В данном примере будут рассмотрены дополнительные возможности использования событий onMouseOver и onMouseOut. Как мы говорили ранее, любое событие может запускать на выполнение функцию или оператор JavaScript. Вспомните команду onLoad в теле документа HTML, которая вызывает код JavaScript из заголовка HEAD.

Представленные здесь два события происходят, когда указатель мыши перемещается на ссылку или смещается со ссылки. В Уроке 4 эти обработчики событий использовались для создания эффекта появления текста в строке состояния.

Еще раз обратите внимание на то, что теги <SCRIPT> и </SCRIPT> не требуются. Обработчики событий onMouseOver и onMouseOut встраиваются в тег HTML <A HREF>. Также отметим, что для отключения вывода рамки вокруг изображения в теге <IMG SRC> включен атрибут BORDER="0".

Сценарий

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: