Программа для программирования на javascript. Коллекция бесплатных и полезных инструментов для разработчиков Javascript. Условия и циклы


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

Рассмотрим особенности создания динамики на странице, обработки форм, а также работы со слоями и стилями.
JavaScript - это объектно-ориентированный язык программирования сценариев с синтаксисом, немного аналогичным синтаксисам языков C, Perl и Python . Несмотря на то что язык имеет схожее название с языком программирования Java, ничего общего, кроме части названия, у них нет.

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

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

Сценарии JavaScript - это небольшие программы, которые выполняются на компьютере пользователя при загрузке с сервера вместе с веб-страницами.

Область применения JavaScript

С самого начала своего развития язык JavaScript применялся для написания различных клиентских сценариев. Они широко применялись для решения таких задач, как, например, проверка информации, введенной пользователем в форму, перед ее отправкой на сервер или программирование ответных реакций на действия пользователя, делающие веб-страницы интерактивными. Сегодня с помощью языка JavaScript создаются уже целые веб-приложения, некоторые из них мало чем уступают своим настольным «собратьям». Хорошие примеры таких веб-приложений можно найти среди сервисов компании Google, например Google Calendar - многофункциональный органайзер в веб-браузере и Google Doc & Spreadsheet - текстовый и табличный редактор, позволяющий работать с офисными документами прямо в окне веб-браузера. Для создания динамического содержимого веб-страниц используется язык создания динамических страниц HTML Dynamic HTML (Динамический HTML), ключевой частью которого является опять же JavaScript.

Язык JavaScript применятся не только в Интернете, но и в таких программах, как, например, Adobe Dreamweaver, Adobe Acrobat Reader и Adobe Photoshop для расширения их возможностей, аналогично использованию языка Visual Basic в Microsoft Office.

Теперь рассмотрим создание сценариев и способы их внедрения в HTML-документ.

Создание сценариев

Разберем все этапы создания JavaScript-сценария - от организации рабочего окружения до подключения кода к HTML-документу.

Для работы над сценариями подойдет практически любой текстовый редактор, позволяющий создавать обычные текстовые файлы и сохранять их с расширением htm или html. Например, в операционной системе Windows в числе стандартных есть два подходящих текстовых редактора - Блокнот и WordPad. Существуют также редакторы, специально разработанные для создания веб-страниц, например Microsoft FrontPage и Adobe Dreamweaver (ранее известный как Macromedia Dreamweaver). Такие редакторы позволяют создавать веб-страницы с помощью визуальных инструментов, а затем переключаться в режим отображения кода и вносить нестандартные изменения, например добавлять сценарии. В отличие от обычных текстовых редакторов, в таких редакторах подсвечивается синтаксис языка HTML и JavaScript, что очень удобно.

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

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

Веб-разработчикам приходится считаться, в основном, с особенностями веб-браузера Microsoft Internet Explorer. Следовательно, свои веб-страницы нужно обязательно протестировать в этом веб-браузере, который имеется в каждой операционной системе Windows.
Большой популярностью пользуются также веб-браузеры Mozilla Firefox и Opera, которые стремятся максимально соответствовать стандартам. Mozilla Firefox можно загрузить с сайта http://www.mozilla.ru/, а Opera - с сайта .

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

Существует немало программ для отладки сценариев на JavaScript. Например, отладчик Microsoft Script Debugger имеет все необходимое для успешной отладки сценариев на JavaScript. Он применяется совместно с веб-браузером Microsoft Internet Explorer. Этот наладчик распространяется бесплатно компанией Microsoft, его можно загрузить с сайта . Кроме того, данный отладчик распространяется вместе с редактором Microsoft FrontPage в рамках программы Microsoft Script Editor, которая практически не отличается от Microsoft Script Debugger.

Существуют также и другие отладчики, например для веб-браузера Mozilla Firefox они созданы в виде расширений. В частности, отладчик FireBug можно загрузить с сайта , причем если на эту страницу перейти в веб-браузере Mozilla Firefox, то отладчик сразу же установится.

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

Встраивание сценариев

Рассмотрим встраивание сценариев в веб-страницы.
Сценарии внедряются в HTML-документ тремя стандартными способами:

Как известно, для создания на веб-страницах гиперссылок применяется контейнерный тег

имеющий атрибут href для указания адреса страницы или файла, к которому приведет гиперссылка. Однако вместо адреса данный атрибут может содержать и JavaScript-сценарий, если перед сценарием поставить слово javascript: (со знаком двоеточие). Пример такой гиперссылки следующий:

Нажмите сюда

Когда пользователь щелкает кнопкой мыши на гиперссылке, интерпретатор сценариев JavaScript получает код

Alert("Привет, мир!");

и исполняет его, в результате чего на экране появляется диалоговое окно (рис. 2.1).


Рис. 2.1. Результат перехода по гиперссылке

Здесь сценарий состоит всего из одной функции alert(), которая выводит на экран диалоговое окно с текстом, полученным в качестве параметра. Объем кода может быть любым.

Встраивание сценариев для обработки событий

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

Это простой текст

Контейнерный тег

просто объединяет текст в параграфы, однако на него возлагается еще одна функция. Если вы определите атрибут onclick, то ваш текст будет реагировать на щелчок кнопкой мыши. Результат обработки кода приводится на рис. 2.2.


Рис. 2.2. Результат щелчка кнопкой мыши на тексте

В языке HTML практически каждый тег имеет атрибуты для обработки событий. Благодаря возможности обработки событий вы можете создавать интерактивные страницы, которые будут реагировать на действия пользователей.

Встраивание сценариев в тег

В HTML есть специальный контейнерный тег

Если при разборе кода HTML-документа веб-браузер встретит этот тег, то он интерпретирует последующий до закрывающего тега

текст как сценарий на каком-либо языке. Язык сценария указывается с помощью атрибута type. Например, для указания языка JavaScript используется следующий код:

Здесь располагается код сценария

Этот атрибут можно и не указывать, так как значение «text/javascript» является значением по умолчанию.

В коде сценария можно использовать комментарии - текст, который игнорируется интерпретатором JavaScript. Комментарии // и

// Это первый комментарий // Второй комментарий, далее идет код Код сценария ... // Код на JavaScript ...