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  
Знаете ли Вы, что "гравитационное линзирование" якобы наблюдаемое вблизи далеких галактик (но не в масштабе звезд, где оно должно быть по формулам ОТО!), на самом деле является термическим линзированием, связанным с изменениями плотности эфира от нагрева мириадами звезд. Подробнее читайте в FAQ по эфирной физике.

Bourabai Research Institution home page

Bourabai Research - Технологии XXI века Bourabai Research Institution БОРОВСКОЕ ИССЛЕДОВАТЕЛЬСКОЕ УЧРЕЖДЕНИЕ - Технологии XXI века