Подготовка, запуск и отладка сценариев JavaScript

Мы не будем рассматривать мощные и удобные для пользователя редакторы визуальной разработки Web-страниц и сайтов, такие как Dreamweaver, FrontPage и др. Как HTML-документы, так и сценарии для них можно разрабатывать с помощью обыкновенного текстового редактора, такого как Блокнот Windows.

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

<HTML> <HEAD><TITLE>Какой-то скрипт</TITLE></HEAD> <SCRIPT>

</SCRIPT>

</HTML>

Это не что иное, как тестовый HTML-документ соответствующий пустой Web-странице. Сохраните данный файл под любым именем, например step1.htm. Расширение может быть htm или html, потому как мы хотим, чтобы он адекватно обрабатывался Web-браузером. Мы записали несколько простых тегов на языка HTML в файле step1.htm. Код JavaScript нужно помещать строго между тегами <script> и </script>. Завершать строку следует нажатием клавиши Enter, переходя к следующей строке. Если в одной строке потребуется написать несколько выражений, то их следует отделять друг от друга точкой с запятой.

Выполняя тестовые примеры, начинающие программисты часто пытаются отобразить на экране окончательные либо промежуточные данные. Это можно реализовать методом alert( ), вставив в скобки выражение, параметры которого вы хотите вывести на экран. Среди прочего, метод alert(у) может вывести на экран диалоговое окно, в котором отобразится значение какой-либо переменной. Если вам желательно увидеть результаты вычислений прямо в браузерном окне, то вместо alert(у) введите выражение «document.write(y)».

Чтобы открыть файл (в нашем случае это proba.htm) в Web-браузере и выполнить содержащуюся в нем программу, достаточно просто дважды щелкнуть левой кнопкой мыши на его имени в окне Проводника Windows. Для изменения исходного кода снова откройте этот файл в текстовом редакторе, внесите требуемые коррективы и сохраните файл на диске. Чтобы Web-браузер смог отобразить измененный файл, выполните команду меню браузера Вид | Обновить. Таким образом, переходя от текстового редактора к браузеру и обратно, можно разрабатывать и отлаживать свои программы.

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

Браузеры имеют средства отладки, представляющие собой окна, в которые выводятся сообщения об ошибках их общую характеристику и место в исходном коде сценария. При возникновении ошибки в нижнем левом углу браузера Internet Explorer появляется значок с изображением треугольника с восклицательным знаком. Двойным щелчком на этой пиктограмме открывается окно с сообщением об ошибке. В Mozilla Firefox имеется Консоль ошибок, а в Opera — Консоль JavaScript, которые открываются с помощью соответствующих меню браузера.

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

<HTML>

<HEAD>

<TITLE>Пример ошибки</TITLE>

</HEAD>

<SCRIPT> x=5;

alert(«Вычисляем myfunc(x)»);

y= myfunc(x);

alert («Результат «+у);

x=x+y; </SCRIPT> </HTML>

В данном примере вызывается функция myfunc (х), которая не определена, что является ошибкой, приводящей к остановке выполнения сценария. Для отладочных целей в код сценария JavaScript вставлены два вывода сообщений: до и после вызова myfunc (x). Если при выполнении сценария появилось диалоговое окно с сообщением «Вычисляем myfunc (x)», значит, все предыдущие операторы были безошибочными. В точке вызова неопределенной функции myfunc (x) выполнение сценария прерывается и, следовательно, сообщение «Результат » не появится, что и сигнализирует нам о возникновении ошибки и ее месте. В данном случае браузер также создаст сообщение об ошибке, которое можно посмотреть, открыв соответствующее окно (консоль). Однако новички нередко забывают открыть консоль ошибок или посмотреть, не появился ли желтый треугольник с восклицательным знаком в левом нижнем углу окна браузера Internet Explorer.