КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Пример выполнения практической части. Допустим необходимо одинаковым образом изменять свойства нескольких однотипных объектов
Допустим необходимо одинаковым образом изменять свойства нескольких однотипных объектов. Например есть несколько ячеек таблицы в которых необходимо поменять цвет фона при наведении мышкой.
Можно написать следующий код для каждой ячейки:
<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. Проверьте созданный вами документ на соответствие стандарту
4. Содержание отчёта
1.Название и цель работы
2. Выполненные практические задания 1-3
3. Вывод о проделанной работе
Контрольные вопросы
1. Что такое меню сайта?
2. Какие бывают меню?
3. Назовите методы создания меню.
Дата добавления: 2015-09-15; просмотров: 47; Мы поможем в написании вашей работы!; Нарушение авторских прав |