JavaScript   ООП   PHP  

ООП в JavaScript. Лабораторная работа 2
Функции. Создание простейшего меню

Допустим необходимо одинаковым образом изменять свойства нескольких однотипных объектов. Например есть несколько ячеек таблицы в которых необходимо поменять цвет фона при наведении мышкой.

Пример №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.

JavaScript   ООП   PHP