- •Методические указания по выполнению лабораторных работ
- •Задание
- •Часть вторая
- •Задание
- •Часть третья
- •Задание
- •Часть четвертая
- •Рассморим скрипт
- •Задание
- •Лабораторная работа № 2
- •Разбор скрипта
- •Задание
- •Команды и эффекты
- •Задание
- •Лабораторная работа № 3
- •Рассмотрим скрипт.
- •Разбор скрипта
- •События onMouseOut и onUnload
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 4
- •Разбор скрипта
- •Продолжаем рассматривать работу с окнами. Скрипт
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 5
- •Часть 1
- •Разбор скрипта
- •Часть 2
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание № 1
- •Задание № 2
- •Задание № 3
- •Лабораторная работа № 6
- •Скрипт:
- •Разбор скрипта
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание по первой части
- •Задание по второй части
- •Задание по третьей части
- •Начало формы
- •Конец формы
- •Часть вторая
- •Разбор скрипта
- •Часть третья
- •Разбор скрипта
- •Часть четвертая
- •Разбор скрипта
- •Случайное число
- •Лабораторная работа № 8
- •Разбор скрипта
- •Часть вторая
- •Разбор скрипта
- •Задания Задание к первой части
- •Задание ко второй части
Лабораторная работа № 5
Часть 1
Рассматриваются вопросы выполнения вычислений с помощью JavaScript.
Скрипт
<BODY> <SCRIPT LANGUAGE="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>
Разбор скрипта
<BODY> <SCRIPT LANGUAGE="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 можно не писать, но я советую вам не отказываться от него, пока вы не набьете руку.
Имя переменной может состоять из любого количества букв. Но лучше давать им названия, которые что-то значат. И, ради собственного удобства, не слишком длинные. Не пользуйтесь пробелами.
Имена переменных различают регистр! То есть 'Х' и 'х' — это две разные переменные.
Значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе скрипт поймет их как текст с числовым значением 0!
Сложение, вычитание, умножение и деление выражаются знаками: +, -, *, и / соответственно.
Знак плюс (+) выполняет две задачи: складывает числа или печатает вместе два фрагмента текста.
Во всех языках программирования есть зарезервированные слова, например, названия команд. В любой книжке есть их перечень. Этими словами называть переменные нельзя. Например, не надо использовать в качестве переменной, скажем, слово onMouseOver.
Если необходимо, вместо пробела ставьте знак _ user_name.
Смотрите задание № 1, которое необходимо выполнить.
Часть 2
Вспомним события связанные с кликами мыши. Обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.
Скрипт
<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">
<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>
Разбор скрипта
<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">
<IMG SRC="b.gif" BORDER=0 NAME="pic1"> </a>
Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.
Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.
onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
document.pic1.src следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
В этом примере onMouseOver меняет источник изображения на а.gif.
ОnMouseOut заставляет объект изображение показывать а.gif.
Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.
Смотрите задание №2, которое Вам необходимо выполнить.
Часть третья
Ниже рассматривается еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.
Скрипт
<HTML> <HEAD> <title></title> <SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } </SCRIPT> </HEAD> <BODY> <CENTER> <h2>Пример анимации</h2> <A HREF="http://www.jsp.newmail.ru" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0> </BODY> </HTML>