Применение JavaScript при создании Web-страниц

• Необходимость применения JavaScript
• Основы JavaScript
• Вставка в код страницы
• Синтаксис. Типы переменных. Массивы
• Ввод/вывод в JavaScript
• Управление потоком вычислений в JavaScript
• Управление окнами просмотра.
• Пользовательские функции
• Формы и JavaScript

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

Необходимость применения JavaScript

Первый и самый главный недостаток языка HTML — это полное отсутствие каких-либо независимых от пользователя средств управления и контроля за отображением и просмотром Web-страниц. Содержимое и/или параметры отображения той или иной страницы задаются жестко в момент написания и не могут быть изменены в процессе отображения страницы и просмотра ее пользователем. Переходы между страницами также находятся под полным контролем пользователя. Даже размер открываемого для просмотра окна браузера будет таким, каким захочет видеть его пользователь (И ваш чудесный дизайн, рассчитанный, правда, на ширину окна 480 пикселов, перестанет быть таковым при просмотре в окне шириной 600 пикселов). Таким образом, сайт, созданный при помощи стандартных средств HTML, получается достаточно пассивным по отношению к пользователю и не отвечает в полной мере интерактивной концепции, в рамках которой он, вообще говоря, и создавался. Второй недостаток во многом переплетается с первым и состоит в отсутствии средств программирования. Ввиду этого недостатка HTML не имеет той гибкости, которую ожидают создатели современных Web-сайтов. Представим, что создатель сайта хочет, чтобы перед отображением документа была известна ширина текущего окна браузера. В зависимости от этой величины выбирается тот или иной дизайн страницы. Это легко сделать при помощи банального, известного еще со времен Бейсика и Паскаля, оператора ветвления (if - Then - Else). Так ведь HTML не имеет даже такого простого средства. Таким образом, в рамках чистого HTML мы не только не можем предоставить пользователю свою реальность, но и не можем даже подстроиться под реалии пользователя.

Естественно, с таким положением дел мириться нельзя. Было предложено несколько вариантов выхода из этой ситуации.

Первый подход — автоматическая генерация HTML-кода на стороне сервера и дальнейшая отправка его клиенту. Этот подход реализовывается благодаря технологиям CGI, ASP, SSI и др. Он позволяет в полной мере держать под контролем взаимодействие сайта с пользователем и решить тем самым многие из вышеописанных проблем. Однако, являясь очень мощными средствами Web-программирования, CGI, ASP, SSI имеют также несколько принципиальных недостатков.

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

Второй подход — перенос исполнения серверных приложений на клиентскую сторону. В рамках этого подхода происходит загрузка исполняемого кода для машины пользователя по сети. Здесь мы сразу сталкиваемся с проблемой безопасности, поскольку исполняемый модуль является, по сути дела, "котом в мешке", и может содержать команды, выполняющие деструктивные действия, предотвратить исполнение которых довольно сложная проблема. Также приложения могут иметь очень большой (сотни килобайт) размер, что сказывается на времени их передачи по сети и возможности нарушения целостности данных ввиду сбоев связи или помех. Третье препятствие — многообразие аппаратно-программных платформ пользователей. Не факт, что у пользователя, загружающего ЕХЕ-файл стоит Windows-подобная операционная система. Вопросы совместимости, безопасности, объема данных и другие могут быть решены путем перехода от готовых компилированных приложений к интерпретируемым. Специальная программа-интерпретатор, находящаяся на стороне пользователя и управляемая браузером, принимает от сервера некий промежуточный код, анализирует его, в том числе и на наличие деструктивных операций, и либо исполняет его, либо компилирует его в настоящий исполняемый модуль. Данный подход был реализован в специальном Web-ориентированном языке Java, рожденном в недрах компании Sun Microsystems в 1995 году, а также в других подобных средствах, например, Macromedia Flash.

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

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

JavaScript является потомком вышеупоминавшегося языка Java компании Sun. Впервые он был реализован в браузерах Netscape 2.O. Однако быстро завоевал бешеную популярность и получил повсеместное распространение, особенно после "введения в эксплуатацию" Internet Explorer 3.0 с поддержкой JavaScript. Как и Java, JavaScript имеет синтаксис, подобный синтаксису языка C++, что во многом способствовало его популярности. Другим достоинством JavaScript, взятым от прародителя, является использование объектно-ориентированной концепции программирования. Правда, в отличие от Java, объектная модель спрятана достаточно глубоко, и Web-мастер, довольно долго использующий JavaScript, может и не догадываться о том, что он работает не просто с переменными, а с объектами. Тем не менее программа, написанная на языке описания сценариев, в процессе своего функционирования использует как свои объекты, так и объекты браузера, осуществляя при этом вызовы методов и обработку событий.

Основы JavaScript

На момент написания книги последней является версия JavaScript 1.3.

В данной главе мы не претендуем на теоретически скрупулезное изложение основ JavaScript. По данной теме написано некоторое количество неплохих книг. Поэтому упор будет сделан на аспекты практического применения этого языка.

Вставка в код страницы

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

Как правило, скрипты вставляются непосредственно в тело HTML-документа при помощи специального тега <SCRIPT>...</SCRIPT>. Браузер анализирует содержимое, находящееся между этими тегами и для исполнения сценария приводит в действие тот или иной интерпретатор. Тем не менее, для устранения возможных разночтений и коллизий есть возможность указывать язык и его версию непосредственно в теле тега скрипта:

<SCRIPT language JavaScript 1.1>... </SCRIPT>.

Альтернативным и во многих случаях полезным вариантом является размещение скриптов в отдельных файлах. Этот подход наиболее приемлем при использовании скриптов довольно большого объема, а также для хранения служебных процедур. Если мы храним наш скрипт в файле с именем filel.js, то включить его в код страницы мы можем следующим способом: <SCRIPT src="filei. JS"X/SCRIPT>. В этом случае между тегами описания скрипта ничего вставлять не нужно — необходимый код находится ведь в файле filel.js. Ничто не мешает нам указывать название языка и его версию в теге описания скрипта и в этом случае.

Если же браузер пользователя не имеет средств работы со скриптами, то полезно использовать тег <NOSCRIPT>...</NOSCRIPT> для вывода соответствующего этому случаю варианта содержимого страницы.

В листинге 8.1 приведем пример,HTML-страницы с использованием различных вариантов включения скриптов.

Листинг 8.1. Использование скриптов в теле HTML-документа

<HTML>

<HEAD>

<! - - - Здесь данные заголовка --->

</HEAD>

<BODY>

<!---HTML-код --->

<SCRIPT>

// Код скрипта

</SCRIPT>

<!--- HTML-код--->

<SCRIPT language VBScript>

// Код скрипта на языке VBScript

</SCRIPT>

<!---HTML-код-->

<SCRIPT language JavaScript 1.3 >

// Код скрипта на языке JavaScript

</SCRIPT>

<!---HTML-код--->

<!--- Подключаем скрипт из внешнего файла--->

<SCRIPT src="script-l.js" language JavaScript 1.1 >

</SCRIPT>

<!---А если браузер не знает о скриптах? -->

<NOSCRIPT>

<CENTER> <H1>

!!! Ваш браузер не имеет поддержки скриптов. Советуем обзавестись новым

программным обеспечением!!!

</Н1>

</CENTER>

</NOSCRIPT>

</BODY>

</HTML>

Дата добавления: 2014-12-29