Переливающийся заголовок

Давайте используем новые возможности, о которых мы узнали, для создания простого, но достаточно эффективного элемента — мерцающей надписи. Ну, например, заставим переливаться заголовок к рассказу “Мое лето”, расположенному на одной из ваших страничек (см. рис. 25);

Рис. 25. Переливающаяся надпись на страничке

На самой страничке работы почти что нет. Надо всего лишь озаглавить контейнер, в котором находится заголовок:

<h2 id=”leto” > Моё лето</h2>

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

k=0;

function color()

{

setTimeout(“color()”,100);

cvet=new Array(“red”,”green”,”blue”,”purple”,”gold”,”orange”,”navy”,”maroon”);

leto.style.color=cvet[k]; k++;

if (k==cvet.length) {k=0}

}

Обратите внимание лишь на то, что оператор располагается вне функции. Это позволяет выполнить его один-единственный раз — при загрузке страницы. В противном случае он выполнялся бы каждый раз при ее вызове, и цвет нашего заголовка был бы всегда один и тот же.

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

1. Создайте переливающийся заголовок на одной из своих страниц.

Большинство web-дизайнеров предпочитают каким-либо образом выделять ссылки в случае наведения на них мышкой. Это может быть изменение цвета, подчеркивание либо еще какой-нибудь вариант изменения текста. Для этого можно воспользоваться, например, свойством Text-decoration входящим в блок style. Его значения могут быть, например, такими:

underline — подчеркивание;

line-through — зачеркивание;

overline — линия над строкой.

2. Воспользуйтесь каким-либо способом выделения текста и сделайте так, чтобы ссылки на вашей странице видоизменялись при наведении мышки.

Лабораторная работа №18 «Навязчивая кнопка»

Одной из наиболее впечатляющих возможностей, которые получили разработчики сайтов после внедрения каскадных таблиц стилей, явилась полная свобода в расположении элементов оформления страницы. Так, текст можно разместить непосредственно на рисунке, который, в свою очередь, может перекрываться другой иллюстрацией. Причем расположение объектов можно динамически менять, используя язык JavaScript.

В качестве примера мы займемся улучшением странички, на которой была сделана лабораторная работа №11 — “Слайд-шоу”. Как вы помните, для удобства пользователей мы поместили на эту же страничку пару кнопок, с помощью которых можно останавливать, а затем снова запускать автоматический просмотр фотографий.

Но если исходить из элементарного чувства справедливости, представляется не совсем честным позволять посетителю останавливать работу программы, над которой мы усердно и плодотворно работали. Поэтому хотелось бы ненавязчиво напомнить гостю о необходимости повторного запуска программы показа фотографий. А что может быть лучше для этого, как не ”приклеивание” к указателю мышки кнопочки “Пуск”?

Итак, первое, что мы сделаем, расположим кнопки управления слайд-шоу над картинкой (см. рис. 26):

Рис. 26. Кнопки управления показом перемещены в начало страницы

Поскольку мы собираемся изменять свойства одной из кнопок, ей присвоено имя. Кроме того, для динамического передвижения какого-либо объекта необходимо задать ему свойство position из блока style. В нашем случае оно принимает значение absolute. То есть его координаты будут отсчитываться от верхнего левого угла открытого документа. Обратите внимание на двоеточие, отделяющее название свойства и его значение.

<h1> Лабораторная работа №18 <br>

Добро пожаловать! <br>

Управление слайд-шоу:

<input type=”button” value=”Стоп!” onClick=”period=100000’>

<input type=”button” value=”Пуск!” onClick=”period=2000; slide()” style=”position: absolute” id=”mv” > <br>

<h2 id=”md”>

Хочешь ли ты приобщиться к мудрости?<br>

Кроме того, мы предполагаем использовать новое для вас событие onmousemove Поскольку оно происходит при любом перемещении указателя мышки по HTML-документу, заказывать его обработку нужно в теге <body>:

<body background=”fon1.gif” onLoad=”slide()” onmousemove=”move()” >

Теперь более подробно о том, чего же мы хотим. При нажатии кнопки “Стоп” другая кнопка — должна “приклеиться” к указателю мышки и следовать за ним до тех пор, пока ее не нажмут. Выглядеть это может примерно так (см. рис. 27):

Рис. 27. Кнопка, к указателю мышки

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

mv.style.pixelTop=event.y-10;

mv.style.pixelLeft=event.x-10;

Обратите внимание на метод event, который выдает координаты мышки как по оси абсцисс, так и по оси ординат. Напоминаем, что началом координат на мониторе считается правый верхний угол, причем ось OY направлена вниз.

Кроме того, очень нелишне вспомнить о глобальном параметре, который мы меняем, нажимая кнопки “Старт” и “Пуск”. Это — переменная period. Значит, нам нужно менять местоположение объекта только в том случае, если period=100000.

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

1. Напишите и отладьте программу move.

2. Зачем в программе из текущего значения координат вычитается 10?

3. Попробуйте определить относительное (relative) позиционирование объекта (вместо использованного absolute). Что из этого получается? Можете ли вы сформулировать отличия этих двух типов позиционирования?

4. А все же, зачем мы перенесли кнопки управления слайд-шоу наверх? Попробуйте вернуть их на старое место и посмотрите, что получится. Как вы можете объяснить получившийся эффект?

Лабораторная работа №19 «Слоеная страничка»

Если вы помните, в лабораторной работе №5 мы создали интерактивный рассказ о том, как провели лето. Но наверняка это не последнее, о чем вы хотели бы рассказать. Интересные поездки, экскурсии, походы, школьные праздники... Согласитесь, было бы здорово, если бы в HTLM-виде постепенно создавалась хроника вашей жизни.

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

Очень красивое решение можно найти, воспользовавшись новым тегом <div> и его свойствами, ставшими доступными после принятия стандарта CSS2. Этот тег... Впрочем, давайте сначала посмотрим, что же мы хотим получить.

Итак, немного преобразуем страничку с рассказом, поместив его в самом низу (см. рис. 28):

Рис. 28. Изменения на странице

Далее мы хотим сделать следующее.

1. Возле надписи “Мое лето” появляется надпись “Поход на Соколиный камень”.

2. Эти две надписи, в свою очередь, тоже приобретают новые свойства. Более конкретно, в случае наведения мышки на любую из них меняется не только картинка, но и весь рассказ целиком. Скажем, так, как это изображено на рис. 29:

Рис. 29. Вид странички после наведения указателя мышки на второй заголовок

При желании здесь же можно расположить еще несколько заголовков, каждый из которых проявит новый интерактивный рассказ.

Хотя именно заголовки в первую очередь видны на странице, мы все же начнем с рассказов. Вот как они выглядят на странице:

<div id=”text1” style=”position: absolute; left: 30; top: 650; visibility: visible”>

<center>

<img id=”ris1” src=”ex0.jpg” height=”500” onmouseover=”zoom()” onmouseout=”antizoom()”> <br>

</center>

<p align="justify"> Этим летом <font color=”red” onClick=”pict(1)”> я съевдил </font >в Археологическую экспедицию. Первые дни мы устанавливали <font color=”red” onClick=”pict(2)”> палатки </font>и строили <font color=”red” onClick=”pict(3)”> столовую </font>.

…

</p>

</div>

<div id=”text2” style=”position: absolute; left: 30; top: 650; visibility: hidden”>

<center>

<img id=”ris2” src=”sok0.jpg” height=”500” onmouseover=”zoom()” onmouseout=”antizoom()”> <br>

</center>

<p align="justify"> В сентябре мы побывали на <font color=”red” onClick=”pict1(12)”> Соколином камне </font>. Это очень <font color=”red” onClick=”pict1(13)”> красивые камни </font>, расположенные на берегу небольшой <font color=”red” onClick=”pict1(14)”> речушки Северки </font>.

…

</p>

</div>

Многоточием отмечено продолжение рассказов. С ним, надеемся, у вас не возникнет проблем. А вот жирным шрифтом выделены новые тети <div>. Их вполне можно рассматривать как некие блоки, в которые заключены другие элементы оформления страницы. В нашем случае это картинка и рассказ, размеченные тегами <font>. Как и любой другой элемент странички, тег <div> поддерживает свойства из блока style.

В частности, уже известное вам свойство position, свойства left и top, указывающие местоположение верхнего левого угла блока относительно начала странички, и, наконец, свойство visibility, принимающее два значения — visible (видимый) и hidden (скрытый).

Обратите внимание, что у обоих блоков <div> указаны совершенно одинаковые координаты размещения на странице. Это означает, что если бы один из них не был скрыт, мы получили бы наложение друг на друга рассказов и картинок.

Итак, легко понять, что единственное действие, которым должны управлять заголовки, — это изменение видимости наших блоков. Так, при наведении мышки на слова “Поход на Соколиный камень” первый блок должен становиться невидимым, а второй — видимым. Слова “Мое лето” работают наоборот: Делают первый блок видимым, а второй — невидимым, возвращая состояние, которое существует при загрузке страницы.

<b onMouseOver=”sloj(1)”> Мое лето</b>

<b onMouseOver=”sloj(2)”> Поход на Соколиный камень</b>

Выше вы видите текст, обеспечивающий вызов соответствующих программ. Больше на HTML-страничке ничего делать не надо. Перейдем к программе sloj(k). В ней мы предусмотрели передачу параметра, определяющего, на каком именно заголовке находится мышка. После этого достаточно всего лишь воспользоваться стандартной конструкцией switch и написать нечто подобное:

Function sloj(i)

{

switch(i)

{ case 1:

text1.style.visibility=”visible”;

text2.style.visibility=”hidden”;

break;

case 2:

text1.style.visibility=”hidden”;

text2.style.visibility=”visible”;

break;

}

}

Не составляет никакого труда в дальнейшем на этом же самом месте разместить и следующий рассказ. Правда, функцию sloj(k) придется изменить.

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

1. Перенесите рассказ в конец страницы.

2. Поместите свой существующий рассказ в контейнер <div> и экспериментальным путем определите параметр top, обеспечивающий правильное положение текста.

3. Напишите новый рассказ, также разместив его в контейнере <div> так, как это описано в тексте лабораторной работы.

4. Напишите и отладьте программу sloj(k), добейтесь изменения интерактивного рассказа при наведении на заголовок мышки.

5. Если вы обратили внимание, для изменения главной картинки второго рассказа используется другая функция — pict1(a). Почему нельзя использовать функцию pict(a)? Напишите и отладьте функцию pict1(a).

6*. Напишите функцию sloj(k), которая в качестве параметров получает номер слоя, который нужно сделать видимым, и общее количество слоев, после чего выполняет необходимые действия. Функция должна работать для любых значений i и j. Про блоки <div> известно, что они имеют имена text1, text2, text3 и т.д.

Поиск ошибок в программах на JavaScript ( ПРИЛОЖЕНИЕ)

Отладка программ на JavaScript представляет собой непростую задачу. Связано это с отсутствием специализированного инструментального обеспечения, которое имеется в распоряжении программистов при использовании языков С, Pascal или Visual Basic. Диагностика, выдаваемая браузером MS Internet Explorer, нередко весьма далека от истинной причины ошибки. Ненамного облегчает жизнь и MS Script Debugger, поставляемый в составе операционной системы MS Windows 2000.

Итак, давайте для начала рассмотрим уже знакомую вам программу перевода из градусов Цельсия в градусы Фаренгейта:

function C2f()

{

grad=prompt(“Перевод температуры”, “Введи сюда градусы по шкале Цельсия”);

alert(grad+ градусов по шкале Цельсия равно” + (1.8 * grad + 32) + “ градусов по шкале Фаренгейта”);

}

Возможно, вы своим наметанным глазом уже увидели в ней ошибку. Как же реагируют на эту ошибку упомянутые программы:

MS IE: “Неверные символ в строке 4”.

MS Debbuger: Текстовый курсор установлен на начале функции, желтым ошибка не выделена.

Немного изменим ошибку, сделав ее тоже типичной:

alert(grad+ “градусов по шкале Цельсия равно” + (1.8grad + 32) + “ градусов по шкале Фаренгейта”);

MS IE: “В строке 4 ожидается ”)””.

MS Debbuger: Текстовый курсор установлен на начале функции, желтым ошибка не выделена.

Если же мы будем настойчивей и все же нажмем на кнопочку, появится сообщение:

MS IE: “В строке 15 ожидается объект”…

Поскольку большинство из учащихся именно тем и занимается, что в случае какой-либо ошибки начинает щелкать мышкой направо и налево, получаемая диагностика в достаточной степени дезориентирует начинающего и способна отбить желание научиться программировать на JavaScript.

В нашем случае диагностика MS IE оказалась даже более полезной, чем диагностика отладчика, но большинство школьников наверняка написало весь этот длиннющий оператор в одну строку, и сходу заметить в ней ошибку смогут далеко не все, не говоря уже о том, что пропущена вовсе даже не круглая скобка, а знак умножения.

Рассмотрим другую ситуацию:

function C2f()

{

grad=prompt(“Перевод температуры”, “Введи сюда градусы по шкале Цельсия”);

itog.innerText=grad+” градусов по шкале Цельсия равно ”+ (1.8*grad + 32)+ “ градусов по шкале Фаренгейта”;

function zoom()

{

ris1.height=”600”;

}

При написании второй программы нечаянно затерли закрывающуюся фигурную скобку первой. В итоге получаем диагностику:

MS IE: “В строке 10 ожидается ” }””.

После такой диагностике любой неискушенный нормальный человек в десятую строку эту самую фигурную скобку и поставит, после чего получит:

MS IE: “В строке 19 ожидается объект”.

Отметим, что строки 19 в файле со скриптами (js) просто нет. По счастью, отладчик выделяет желтым вызов функции в HTML-файле.

Заметим, что вышеописанная ошибка является самой распространенной еще и потому, что, почему-либо не доведя до конца отладку одной программы, учащиесля принимаются за вторую, получая в качестве диагностики доводящее до исступления сообщение:

“В строке … ожидается объект ”.

Для профилактики подобной ошибки совершенно необходимо придерживаться следующих правил:

1. В файле со скриптами (js) нельзя писать новую функцию, пока не отлажена предыдущая.

2. Перед написанием новой функции необходимо пропустить пару пустых строк.

3. Если все же существует необходимость написания новой функции при неработающей старой, создайте новый js-файл, сошлитесь на него в HTML-файле:

<script src=”vasia.js”>

</script>

<script src=”vasia2.js”>

</script>

после чего отлаживайте новую программу, которая записана в отдельном файле.

В особенно тяжелых случаях рекомендуется для каждой программы создавать новый js-файл, делая правило З нормой работы. Кроме того, чрезвычайно полезно придерживаться следующего правила:

4. Не создавайте длинных строк с кодом программы. Перенос лучше делать после запятых или знаков арифметических действий.

Поскольку очень часто единственным средством отладки является сплошной просмотр текста всей программы, настоятельно рекомендуются упражнения следующего типа:

Найдите ошибки в операторах и программах, приведенных ниже:

1. grad=prompt(“Перевод температуры, “Введи сюда градусы по шкале Цельсия”);

2. function zoom()

{

ris1.heigt=”400”;

}

Интересно, что после исправления ошибки в слове function никакая диагностика уже не выдается, но программа просто не работает, сколько ни щелкай мышкой по рисунку. Продолжим примеры:

3. function zoom()

{

ris1.heigt=’’400’’;

}

Тяжелая ошибка, особенно если в блокноте используется недостаточно крупный шрифт. Здесь вместо двойных кавычек проставлены две одинарные.

4. FUNCTION ZOOM()

{

ris1.heigt=”400”;

}

Как мы уже говорили, язык JavaScript чувствителен к регистрам, поэтому необходимо везде, кроме специально оговоренных случаев, использовать только строчные буквы.

5. aler(grad+ “градусов по шкале Цельсия равно” + (1.8 * grad + 32) “ градусов по шкале Фаренгейта”);

Здесь в строке допущены две типичные ошибки, но злоупотреблять этим приемом, увеличивая количество ошибок еще больше, не рекомендуется.

6. function zoom()

(

ris1.heigt=”400”;

)

7. dn=newArray(“воскресенье”, “понедельник”, “вторник”,

“среда”, “четверг”, “пятница”, “суббота”);

8. d=New Date();

h=d.getHour();

9. d=new Date;

h=d.gethours();

10. dn=new Array(“воскресенье”,

“понедельник”, “вторник”, “среда”, “четверг”, “пятница”, “суббота”,);

11. dn=new Array(”воскресенье”,

“понедельник”, “вторник”, “среда”, “четверг”, “пятница”, “суббота”);

vrema.innerText=”Сегодня - ”+dn(d.getDay())+”, “+d.getDate()+”-e “+mes[(d.getMonth())]+” “+d.getYears()+”-го года, сейчас – “+h+”:”+d.getMinutes()+”:”+d.getSeconds();

12. if (min=nur[i]& min<kur[i]) …

Очень часто допускаемые ошибки — использование вместо знака сравнения оператора присваивания и обо значение логической операции “и” одним знаком ”&”.

Первая ошибка неприятна еще и тем, что она никак не диагностируется, программа же при этом не работает.

13. or (i=0; i++; i<4)…

Такой заголовок способен привести к зацикливанию программы и зависанию компьютера.

14. for (i=0; i<4; i++)

if (tv>nur[i]&&tv<kur[i])

{os=kr[i]-tv;

vrema2.innertext=”До конца “+(i+1)+
“—го урока осталось “+ os + “ минут”;

}

}

15. setTimeout(slide(),period);

16. switch(a)

{

case “1”:

knop1.value==” Нет ”;

knop2.value==” Да ”;

break;

case “2”:

knop1.value==” Да ”;

knop2.value==” Нет ”;

break;

}

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

Дата добавления: 2015-06-28