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

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;

}

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