- •Методические указания по выполнению лабораторных работ
- •Задание
- •Часть вторая
- •Задание
- •Часть третья
- •Задание
- •Часть четвертая
- •Рассморим скрипт
- •Задание
- •Лабораторная работа № 2
- •Разбор скрипта
- •Задание
- •Команды и эффекты
- •Задание
- •Лабораторная работа № 3
- •Рассмотрим скрипт.
- •Разбор скрипта
- •События onMouseOut и onUnload
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 4
- •Разбор скрипта
- •Продолжаем рассматривать работу с окнами. Скрипт
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 5
- •Часть 1
- •Разбор скрипта
- •Часть 2
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание № 1
- •Задание № 2
- •Задание № 3
- •Лабораторная работа № 6
- •Скрипт:
- •Разбор скрипта
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание по первой части
- •Задание по второй части
- •Задание по третьей части
- •Начало формы
- •Конец формы
- •Часть вторая
- •Разбор скрипта
- •Часть третья
- •Разбор скрипта
- •Часть четвертая
- •Разбор скрипта
- •Случайное число
- •Лабораторная работа № 8
- •Разбор скрипта
- •Часть вторая
- •Разбор скрипта
- •Задания Задание к первой части
- •Задание ко второй части
Разбор скрипта
Не забывайте про регистр и <script language= "javascript">
function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" }
Функции выполняют то же, что и команды. Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().
<A HREF="http://www.newmail.ru" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A>
Oбычно функция используется для многократных повторений.
Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:
<SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } function up2() { document.mypic2.src="up.gif" } function down2() { document.mypic2.src="down.gif" } </SCRIPT>
...и две разные картинки:
<A HREF="http://www.htmlgoodies.com" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A> <a href="http://www.htmlgoodies.com" onMouseOver="up2()" onMouseOut="down2()"> <IMG SRC="down.gif" NAME="mypic2" BORDER=0></A>
Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.
Смотрите задание № 3, которое Вам необходимо выполнить.
Задания Задание № 1
Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.
<html> <head> <script language="javascript"> <!-- function vars() { 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> </head> <body onLoad="vars()"> </body> </html>
Задание № 2
Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.
<h2 align="center"><font face="Verdana,Arial">Портрет дальнего родственника</font></h2> <p align="center"><a href="http://www.newmail.ru" onMouseOver="document.img1.src='pic1.gif'" onMouseOut="document.img1.src='pic2.gif'"><img src="pic2.gif" border="0" name="img1" width="77" height="76"></a></p>
Задание № 3
Переделайте задание № 2, создав две функции для смены картинки.
<html> <head> <title> </title> <SCRIPT language="JavaScript"> function over() { document.pic1.src="a.gif" } function out() { document.pic1.src="b.gif" } </SCRIPT> </head> <body bgcolor="xxxxxx"> <center> <a href="" onMouseOver="over() " onMouseOut="out()"> <img src="b.gif" border=0 name="pic1"></a> </body> </html>