Выявление и исправление ошибок

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

  • что такое ошибки;
  • отладка в браузерах Internet Explorer и Netscape Navigator;
  • использование программы Microsoft Script Debugger;
  • наиболее распространенные ошибки JavaScript.

Что такое ошибки

Ошибки (bugs) — это проблемы, возникающие в сценарии. Процесс отыскания и исправления ошибок называется отладкой (debugging). Слово bug в английском языке означает «насекомое» или «жучок».

Происхождение этого термина в действительности никому не известно. Его создание приписывают Грэйс Хоппер (Grace Hopper). В 1944 году, будучи морским офицером резерва (по служебной лестнице она дошла до звания адмирала), она работала на компьютере Mark I в Гарварде и стала одной из первых программистов. Когда она работала с более поздней моделью Mark II, между двумя электрическими реле компьютера залетела моль и, по словам техника, именно это насекомое помешало программе запуститься. Со временем эта история стала притчей во языцех.

Поэтому поиск и исправление ошибок стали называть debugging (или, если хотите, «ловля блох»).

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

Типы ошибок

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

  • синтаксические ошибки;
  • иошибки времени выполнения;
  • логические ошибки;
  • ошибки приоритета операций.

Давайте рассмотрим каждый из этих типов.

Синтаксические ошибки

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

Сценарий JavaScript проверяется на наличие синтаксических ошибок во время загрузки в браузер. Таким образом, подобные ошибки выявляются сразу.

Пример. Здесь приводится пример такой ошибки:

TxtString = "Привет всем

Еще одним примером синтаксической ошибки является опечатка:

fnction callMe()
{
alert("В этом сценарии имеется опечатка в слове function");
}

Ошибки времени выполнения

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

Пример. Распространенная ошибка времени выполнения - попытка вызова несуществующей функции (например, неверно указано ее название):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFuncion()
{
alert("Привет всем");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction() ">
</body>
</html>

Логические ошибки

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

Ошибки приоритета операций

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

Пример. Рассмотрим следующий пример:

ans = numl - num2 * num3;

Если вы присвоите переменным numl, num2 и num3 какие-нибудь случайные значения (например, 3, 1 и 6), то каким получится ответ? Чему будет равен результат - двенадцати [(3 - 1) X 6 = 12] или минус трем [3 - (1 х 6) = - 3]? Правильным ответом будет -3 - из-за приоритетного порядка выполнения операций. Сначала выполняется умножение, а затем - вычитание.

Приоритет выполнения операций следующий:

1. () -группирование.
2. - - и ++ -операции с одним операндом.
3. *, / и % -умножение, деление и взятие по модулю.
4. + и - -сложение и вычитание.
5. <, <=, >, >=    -меньше, меньше или равно, больше, больше или равно.
6. = = и ! = -равенство и неравенство.
7. && - логическое И.
8. | | -логическое ИЛИ.
9. ? : -условие.

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

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

ans = (numl - num2) * numЗ;

Пример. Следующий пример это доказывает (результат представлен на рис. 10.1 и 10.2):

<script language="JavaScript">
<!-- Маскируемся!
alert(3 - 1 * 6) ;
alert((3 - 1) * 6) ;
// Снимаем маскировку. -->
</script>


Рис. 10.1. Окно предупредительных сообщений, показывающее, что 3 - 1 х 6 = -3


Рис. 10.2. Окно предупредительных сообщений, показывающее, что (3 - 1) х 6 = 12

Как найти ошибку

Пример. Давайте посмотрим, как браузеры Netscape Navigator 4, Netscape Navigator 6 и Internet Explorer 5.5 отреагируют на внесенную ошибку:

<script language="JavaScript">
<!-- Маскируемся!
alrtt("He работает!");
// Снимаем маскировку. -->
</script>

Здесь допущена простая синтаксическая ошибка - опечатка в слове alert. На рис. 10.3 показано, как она отражается на работе Netscape Navigator 4.


Рис. 10.3. Web-страница с синтаксической ошибкой в браузере Netscape Navigator 4

Как видите, явных признаков ошибки нет. В действительности это не совсем так. Во-первых, окно предупредительных сообщений так и не появилось, и, во-вторых, в строке состояния браузера (там, где сейчас надпись Document: Done) промелькнула надпись: Javascript error. Type 'javascript:' into Location for details (эта надпись исчезает так быстро, что ее трудно заметить). Если вы введете javascript: в строке Location (там, где вы вписываете URL), то появится сообщение, показанное на рис. 10.4.


Рис. 10.4. Информация об ошибке

Коммуникационная панель, приведенная на рис. 10.4, выдает больше сведений об ошибке, но вы должны знать, как воспользоваться этой информацией.

На рис. 10.5 показано, как на ту же самую ошибку реагирует браузер Netscape Navigator 6.


Рис. 10.5. Опять нет явных признаков ошибки

На этот раз нет ни окна предупредительных сообщений, ни какой-либо другoй информации от программы Netscape Navigator 6. Но если вы впишете javascript в строку Location, то появится следующая панель (см. рис. 10.6).


Рис. 10.6. И снова ничего не ясно

На рис. 10.7 показана та же ошибка, но применительно к браузеру Internet Explorer 5.5. При загрузке страницы в строке сообщений мелькает надпись Done, but with errors on the page (Выполнено, но с ошибками на странице). Затем эта фраза сменяется надписью Done (Готово), рядом с которой возникает пиктограмма с восклицательным знаком.

Двойной щелчок по этой пиктограмме вызывает диалоговое окно с информацией об ошибке (см. рис. 10.8).

Обнаружение ошибок

Вы, конечно, заметили, что все три браузера указывают на одну и ту же строку, содержащую ошибку, - на строку 7. Именно здесь она и находится (см. рис. 10.9).

Что-то начинает проясняться. Но и на солнце найдется пара пятен:

  • вам придется открыть файл и сосчитать строки, пока не доберетесь до нужной;
  • сообщенная информация не совсем понятна;
  • эта информация не всегда бывает точной.

Однако пользователи Internet Explorer могут упростить поиск ошибок, применив специальную программу, разработанную компанией Microsoft. Она называется Microsoft Script Debugger.

Рекомендация Программа Microsoft Script Debugger распространяется бесплатно. Загрузите ее с сайта http://www.Micmsoft.com/scripting.


Рис. 10.7. Пиктограмма, предупреждающая об ошибке, в строке состояния браузера Internet Explorer 5.5


Рис. 10.8. Диалоговое окно с информацией об ошибке

Программа Microsoft Script Debugger

Загрузите и установите Microsoft Script Debugger, прежде чем переходить к дальнейшему изучению этой главы. Инсталляция происходит как обычно: запустите выполняемый файл и следуйте указаниям Мастера установки.

Последний шаг, который вам необходимо сделать, - проверить установки браузера. Войдите в меню Tools (Сервис) и выберите пункт Internet Options (Свойства обозревателя).

Щелкните мышью по вкладке Advanced (Дополнительно) и отключите флажок напротив надписи Disable Script Debugging (Запретить отладку сценариев).

Теперь вы готовы к работе с программой Microsoft Script Debugger. Возьмите пример с простой синтаксической ошибкой, рассмотренный ранее, и откройте его в браузере Internet Explorer. Теперь при загрузке страницы появляется диалоговое окно, предоставляющее вам возможность исправить ошибку.

Если щелкнуть по кнопке ОК, то откроется окно программы Script Debugger и строка с ошибкой будет в нем выделена. Теперь вы можете открыть соответствующий файл и внести изменения в сценарий.

Примечание В программе Script Debugger страницы открываются только для чтения, и, следовательно, их нельзя редактировать. Вам придется вернуться к первоначальному файлу и сделать исправления именно в нем.

Программа Microsoft Script Debugger многофункциональна (например, она используется для отладки ASP-страниц на стороне сервера), она также полезна и для разработчиков клиентских приложений JavaScript, поскольку значительно ускоряет отладку сценариев.

Наиболее распространенные ошибки

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

Опечатки

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

Пример. Вы нажали не на ту клавишу:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
{
//Ниже дается пример нажатия не на ту клавишу при закрытии скобок.
alert("Привет всем"_;
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Пример. Вы забыли нажать клавишу Shift перед фигурной скобкой:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
//Вы забыли нажать клавишу Shift перед фигурной скобкой.
[
alert("Привет всем");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction() ">
</body>
</html>

Пример. Была нажата клавиша Caps Lock:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Была нажата клавиша Caps Lock.
FUNCTION MYFUNCTION()
{
alert("Привет всем");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Пример. Вы нажали не ту клавишу с математическим символом. Это особенно чаcто бывает при использовании правой цифровой панели клавиатуры.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
{
//Неправильный символ операции конкатенации строк.
alert("Привет" - " всем");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Пример. Опечатки в названиях методов и функций:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
{
//Неправильное написание слова alert.
alerg("Привет всем");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Пример. Опечатки в именах переменных:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
{
var msg = "Привет всем";
//Ошибочное имя переменной.
alert(mssg);
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Еще одна разновидность ошибок - использование скобок другого типа. Как вы уже знаете, в языке JavaScript есть три вида скобок - ( ), { }, [ ].

Пример. Эти скобки не подлежат взаимной замене - вы должны использовать нужный тип:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function myFunction()
//He та скобка.
(
var msg = "Привет всем";
alert(msg);
//И опять не та.
)
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

Таковы обычные ошибки новичков (и не только новичков). Научитесь их распознавать.

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



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz