Вопросы и задания
1. Измените программу перевода градусов так, как это описано в тексте лабораторной работы. Убедитесь в том, что результат выводится прямо на кнопку.
Объектом может быть вообще любой контейнер HTML-страницы. Например,
<center> … </center>
или
<h2> … </h2>
Надеемся, вы помните, что они означают. С их помощью напишите еще одну строку на своей страничке и один из этих контейнеров превратите в объект.
для следующего задания нам потребуется изменить его свойство innerText (именно так, с заглавной буквой посередине).
2. Измените вашу программу таким образом, чтобы итог работы подпрограммы выводился просто как обычная строка на HTML (см. рис. 4 и 4а).
Рис. 4. Вид странички до работы программы
Рис. 4а. Вид странички после работы программы
Лабораторная работа №4 «Объекты html» Часть 2
Разумеется, нельзя пройти мимо такого интересного объекта, каким является тег <img>. У него есть несколько свойств, с частью которых вы уже знакомы. Это:
height - высота изображения в пикселях или процентах от высоты окна;
width — ширина изображения;
src — месторасположение файла с изображением.
На вашей страничке есть одно изображение. давайте с помощью подпрограммы на языке JavaScript снабдим его “зум-эффектом”, т.е. пусть при наведении мышки его размер увеличивается, скажем, в два раза.
Не сомневаемся, что вы уже представляете, как это сделать.
1. На HTML-страничке организуем новый объект и вместо строки
<img src=”pict.jpg” height=”300”>
напишем:
<img id=”ris1” src=”pict.jpg” height=”300”>
— ах, да, конечно же, нужно добавить обработку события “наведение мышки”. На всякий случай приведем полное содержимое HTML-файла, какое должно быть у вас к этому моменту. Новое выделено жирным:
<html>
<head>
<title> Лабораторная работа №4 </title>
<script src=”vasia.js”>
</script>
</head>
<body background=”fon1.gif”>
<h1>
<center> Лабораторная работа №4. <br> Добро пожаловать!
</h1> <br>
<input
id=”knopka1” type=”button” onclick=”C2F()”
value=”Перевод градусов из шкалы Цельсия в шкалу Фаренгейта”>
</center>
<h2> <center id=”itog”> А здесь получится результат </center> </h2>
<br> <br>
<img id=”ris1” src=”pict.jpg” height=”300” onmouseover=”zoom()”>
</body>
</html>
2. В файле с JavaScript-программами опишем новую функцию (выделена жирным шрифтом):
function C2f()
{
grad=prompt(“Перевод температуры”, “Введи сюда градусы по шкале Цельсия”);
itog.innerText=grad+” градусов по шкале Цельсия равно ”+ (1.8*grad + 32)+ “ градусов по шкале Фаренгейта”;
}
function zoom()
{
ris1.height=”600”;
}
Здесь тоже приведено полное содержимое файла, в котором содержится и подпрограмма для выполнения лабораторной работы №3. Обратите внимание на правильное расположение фигурных скобок, ограничивающих функции.
К сожалению, после того как мышка убрана с картинки, она не восстанавливает свой первоначальный размер. Для этого просто не заказан отклик объекта на другое событие — “убрать мышку”: onmouseout.
Приведем таблицу основных событий, на которые реагирует объект <img>:
Событие |
Возникнет |
onclick |
При щелчке мышкой на изображении |
onmouseover |
При наведении указателя мышки на изображение |
onmouseout |
При выходе курсора мишки из области над изображением |
ondblclick |
При двойном щелчке мышкой на изображении |
oncopy |
При копировании изображения |
onmouseup |
При отпускании левой клавиши мышки над изображением |
Вопросы и задания
Определите для объекта <img> реакцию еще на пару событий и обеспечьте:
а) возвращение исходного размера картинки после того, как мышка будет убрана из ее области;
б) изменение картинки в случае щелчка по изображению.
Естественно, что для каждого такого события должна быть написана соответствующая подпрограмма.
Лабораторная работа №5 «Интерактивное сочинение»
Возможно, вы хотя бы раз писали краткое сочинение с названием типа “Мое лето”. И в этом случае вам наверняка хотелось проиллюстрировать его фотографиями. Очень может быть, что теме летнего отдыха была даже посвящена HTML-страничка, сделанная ранее.
Предположим, что мы захотели бы объединить в одном HTML-документе десяток фотографий с хорошим разрешением (скажем, 500 пикселей по вертикали) и сочинение. Скорее всего выяснится, что с помощью стандартных средств это получается не слишком привлекательно: текст сочинения небольшой и просто теряется на фоне фотографий. Конечно, можно сделать к каждой фотографии подпись и этим ограничиться, но тогда теряет целостность восприятия рассказа. Можно, правда, написать сочинение на пару десятков тетрадных листов. Хорошо, хорошо, будем считать это неудачной шуткой... Лучше призовем на помощь уже известные нам объекты и их свойства.
Итак, мы собираемся добавить сочинение прямо на страничку, с которой работали ранее. Выглядеть, это будет следующим образом (см. рис. 5).
Как видите, само сочинение небольшое: всего-то не сколько строчек. Зато иллюстраций к нему аж целая дюжина, не считая самой первой фотографии, которую вы и видите на рис. 5.
«А где же остальные 12 фотографий? - наверняка заинтересуетесь вы. — Полос прокрутки вроде не видно. Может, страничка еще не доделана?”. Однако, как это ни удивительно, на рис. 5 изображена уже полностью сделанная работа.
Рис. 5. Сочинение на HTML-страничке
Если приглядеться внимательно, можно увидеть, что часть слов в сочинении выделена красным цветом. И, хотя это и не гиперссылки, по ним можно щелкнуть мышкой. На рис. 6 показан вид страницы после щелчка по слову “посвящение”.
Рис. 6. Вид страницы после щелчка по выделенному слову
Если вы самостоятельно делали предыдущие лабораторные работы, то, видимо, уже догадались, в чем здесь секрет: конечно же, изображение выступает в качестве изменяемого объекта, а выделенные слова, в свою очередь, расположены в контейнерах, реагирующих на событие мышкой”: onclick.
Заметим, что изображение еще в предыдущей лабораторной работе фигурировало под именем ris1; написать три строчки текста, разумеется, не составляет труда, поэтому обратим особое внимание на контейнер, в который помещаются выделенные слова.
Вполне логично выбрать в него теги с <font> … </font> , с помощью которых наиболее естественно меняется цвет букв. Вот часть текста:
Этим летом <font color=”red” onclick=”picture(1)”> я съездил </font> в археологическую экспедицию.
Видно, что при щелчке мышкой по содержимому контейнера (в нашем случае это слова “я съездил”) происходит вызов JavaScript-подпрограммы picture(1). Вроде бы тут все понятно. Неясно только, что это за единичка стоит внутри круглых скобок. До сих пор внутри скобок мы ничего не писали, и было даже не совсем понятно, зачем они нужны.
Те из вас, кто изучал программирование с помощью учебного исполнителя “Паркетчик” или с использованием профессиональных пакетов вроде Паскаля или Си, не могли не узнать механизм передачи параметров.
Итак, в подпрограмму picture передается фактический параметр, равный единице. Можно предположить, что это сделано для того, чтобы с помощью одной и той же подпрограммы обеспечить вызов на страничку любой фотографии. Действительно, изучая HTML дальше, в следующем предложении увидим:
Первые дни мы устанавливали <font color=”red” onclick=”picture(2)”> палатки </font>
То есть, изменяя значение фактического параметра, мы обеспечиваем загрузку на страничку каждый раз другой фотографии.
Сама же функция, расположенная в файле с JavaScript-программами, до неприличия проста, но, поскольку мы впервые столкнулись с передачей параметра в JavaScript программу, приведем ее полностью:
function picture(num)
{
ris1.src=”ex” + num + “.jpg”
}
Итак, когда мы вызываем функцию на HTML-страничке, в скобках обязательно указываем какое-либо значение параметра num. Так, в ранее приведенных строках он будет равен, соответственно, единице и двойке.
В подпрограмме это значение подставляется в правую часть оператора присваивания, в результате чего формируются текстовые константы “ех1.jpg” и “ех2.jpg”. Видимо, излишне говорить, что именно так называются файлы с первой и второй фотографиями.