Допустим необходимо одинаковым образом изменять свойства нескольких однотипных объектов. Например есть несколько ячеек таблицы в которых необходимо поменять цвет фона при наведении мышкой.
Пример №1
Главная Лекции Лабы Ссылки Об авторе Можно написать следующий код для каждой ячейки:
<td style="background-color:mistyrose" onmouseover="this.style.backgroundColor='white' " onmouseout="this.style.backgroundColor='mistyrose'">Главная</td>
Однако так как действия одинаковы можно написать подпрограмму-функцию. Функция написанная один раз может вызываться и выполняться многократно. Функции сокрашают код и упрошают процесс отладки (проверки и исправления кода).
Скрипт с функцией может находиться в разделе <head> между тегами <script> </script> и должен иметь следующий синтаксис:
function имя_функции (список аргументов функции)
{
тело функции
}Таким образом, в разделе <head> мы размещаем функцию
<script type="text/javascript">
function doit(obj, zvet)
{
obj.style.backgroundColor=zvet
}
</script>Имя данной функции doit, но можно выбрать и другое. В качестве аргументов в данном случае передаются объект, свойство которого нужно изменить и цвет, который нужно присвоить свойству "цвет фона" объекта. В теле функции оператор присваивания: obj.style.backgroundColor=zvet
Данная функция вызывается следующим образом:
onmouseover="doit(this, 'white')"
указывается событие и после знака равенства в кавычках имя функции, которая должна выполниться если данное событие наступит. После имени функции в скобках указывают передаваемые аргументы объект и цвет фона объекта.
Таким образом, запись кода получается следующая
<table class="navig">
<tr>
<td onmouseover="doit(this, 'white')" onmouseout="doit(this, 'mistyrose')">Главная</td>
<td onmouseover="doit(this, 'white')" onmouseout="doit(this, 'mistyrose')">Лекции</td>
....
</tr>
</table>Где свойства таблицы определяются с помощью таблицы стилей (определяется класс navig)
<style type="text/css">
.navig {background-color:mistyrose; text-align:center; width:100%; height: 2em;}
</style>
Задание
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте панель навигации
3) Проверьте созданный вами документ на соответствие стандарту
Валидация страниц Web.
|
|  |