Планирование уроков на учебный год (по учебнику К.Ю. Полякова, Е.А. Еремина, сокращённый курс, по 2 часа в неделю)



Уроки 66 - 67
Динамический HTML
(§32. Динамический HTML)




Содержание урока

Что это такое?

«Живой» рисунок

Скрытый блок

Формы

Вопросы и задания

Задачи


Скрытый блок


Иногда на веб-странице нужно сделать скрытые элементы с дополнительной информацией, которые должны появляется только после щелчка мышью на какой-нибудь ссылке. На рисунке 4.26 показана такая страница до и после щелчка.

Рис. 4.26

Рис. 4.26

Данные, которые должны быть скрыты, поместим в отдельный блок (кроме текста он может содержать рисунки, таблицы и другие элементы): 

<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.
</div>

Это блок имеет идентификатор details, по которому мы будем к нему обращаться из программного кода. Кроме того, он относится к классу hidden (англ. hidden — скрытый). Заметим, что на странице можно сделать несколько скрытых блоков — для них нужно указать класс hidden, однако все они должны иметь разные идентификаторы.

Теперь нужно сообщить браузеру, что элементы класса hidden должны быть скрытыми. Для этого в стилевом файле (назовем его test.ess) установим значение попе (англ. попе — никакой) свойству display (англ. display — показывать): 

.hidden {
display:none;
}

Мы будем с помощью JavaScript менять это свойство после щелчка на ссылке, устанавливая его значение block (блок начинается с новой строки) или inline (в той же строке, без перехода на новую строку).

Как правило, веб-мастера выносят весь код на JavaScript в отдельные файлы, которые обычно имеют расширение js и подключаются на всех страницах сайта с помощь тэга <script> в заголовке страницы. Например, для использования JavaScript-файла test.js нужно записать: 

<head>
<script type="text/javascript" src="test.js"</script>
...
</head>

Атрибут sre задает имя файла, а атрибут type — его тип. Многоточие обозначает другие тэги, помещённые внутрь контейнера <head>.

Файл test.js можно создать в любом текстовом редакторе: 

function show (name)
{
	var elem = document.getElementByld(name); 
	if (elem)
		elem.style.display = "block";
}

Этот файл содержит одну функцию с именем show, которая принимает один параметр name — идентификатор (имя) скрытого элемента. Тело функции ограничено фигурными скобками, синтаксис языка очень похож на язык Си. В первой строчке создаётся переменная elem, в которую записывается ссылка на нужный элемент (для её получения используется метод getElementByld).

Далее с помощью условного оператора проверяем, в самом ли деле такой элемент найден. Если значение elem не равно пустому значению (null), условный оператор срабатывает и меняется стиль элемента (style) — свойству display присваивается значение block.

Осталось оформить гиперссылку так, чтобы при щелчке мышью не происходил переход на другую страницу, а выполнялся код функции show, который показывает блок с идентификатором details. Для этого используем такой код: 

<а href="#" onClick="show('details');return false;">
Показать детали
</a>

Атрибут onClick подключает обработчик события «щелчок мышью» (англ. click). В данном случае это код 

show('details');return false;

Сначала вызывается функция show (из файла test.js), которая «открывает» блок с идентификатором details. Оператор return false («вернуть результат — ложное значение») говорит о том, что больше никаких действий выполнять не нужно. Если пользователь отключил выполнение JavaScript в браузере, сработает гиперссылка (href="#") и загрузится та же самая страница (блок, естественно, не появится).

Итак, для работы этого примера нужны три файла: test.ess, test.js и основной файл с HTML-кодом, который мы приведём полностью: 

<html> 
	<head>
	<title>Скрытый блок</title> 
	<script type="text/javascript"
	src="test. js"x/script> 
	<link rel="stylesheet" type="text/css"
	href="test.css"> 
	</head>
	<body>
	<a href=# onClick="show('details');
	return false;"> 
	Показать детали</а> 
	<div id="details" class="hidden"> 
	Детали — это гайка, шайба, болт, винт,
	шуруп, гвоздь и др. 
	</div> 
	</body>
</html>


Следующая страница Формы



Cкачать материалы урока






Наверх