- •Основы html
- •Основные теги, работа с текстом, списки
- •Работа со списками
- •Создание таблиц
- •Кодировка в html
- •Специальные символы в html
- •Основы css
- •Css-свойства: поля, заполнение, границы
- •Css-свойства: фон, оформление таблиц
- •Теги div и span
- •JavaScript
- •Информация экрана
- •Информация о производителе клиентского компьютера
- •Обработка событий
Обработка событий
Смена картинки через onMouseOver()
<a 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следует иерархии объектов. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
В этом примере onMouseOver меняет источник изображения на а.gif.
ОnMouseOut заставляет объект изображение показывать b.gif.
Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.
Еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.
<HTML>
<HEAD>
<SCRIPTLANGUAGE="JavaScript">
function up()
{
document.mypic.src="a.jpeg" ;
}
function down()
{
document.mypic.src="b.jpeg" ;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>Пример анимации</h2>
<A onMouseOver="up()" onMouseOut="down()">
<IMG SRC="b.jpeg" NAME="mypic" BORDER=0>
</BODY>
</HTML>
Случайные числа
Генерируя случайные числа, JavaScript пользуется датой и временем.
<HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
{
var now=new Date();
var num=(now.getSeconds())%10;
var num=num+1;
alert(num);
if(num>2) {alert(num+ " больше 2");}
else{alert(num+ " меньше или равно 2");}
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Случайное число</h1>
<form>
<INPUT TYPE="button"
VALUE="Случайное число от 1 дo 10"
onClick="rand()">
</FORM>
</BODY>
</HTML>
Случайный выбор числа осуществляется в несколько шагов:
Во-первых, создаем функцию, к примеру, rand().
Потом создаем переменную для метода new Date().
И еще одну переменную, num. Она содержит метод getSeconds(), так как в данном случае мы воспользуемся секундами, чтобы выбрать случайное число. Элемент %10 говорит скрипту, что нужно выбирать из десяти чисел.
В JavaScript отсчет начинается с нуля. Таким образом, прибавляя к случайному числу единицу (num=num+1), мы задаем числа не от 0 до 9, а от 1 до 10.
alert показывает число.
if(num>2) пример использования оператораif. Заifследует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.if/else(если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.