Web дизайн\Учебник по HTML

Глава 17. Введение в JavaScipt

• Что такое JavaScipt?
  • Какое отношение имеет JavaScipt к Java?
  • JavaScipt или VBScript?
  • Как работает веб-скрипт
• Ввод скриптов в веб-документы
  • Элемент <script> и скрытие скрипта
  • Script или Transitional?
  • Скрипты и элементы <meta> и <noscript>
  • Пример "Hello World"
• Создание функций на JavaScipt
  • Объявление функций
  • Вызов функций и возвращение значений
  • Пример вызова функции
• Работа с переменными
  • Имена переменных
  • Переменные, вычисления и присваивания
  • Инкремент и декремент переменных
  • Массивы
• Управление ходом выполнения алгоритма
  • Операции сравнения
  • Условие if...else
  • Условия циклов
  • Остановка и продолжение работы циклов
  • Циклы и массивы
• Объекты JavaScipt
  • Создание объектов
  • Еще о методах
  • Встроенные объекты
• Резюме

В нескольких последних главах речь шла об интерактивности сайтов. В связи с этим были затронуты два вопроса: формы и CGI-скрипты. Чтобы обрабатывать данные с помощью скрипта, мало его написать. Необходимо произвести установку по на сервере. Для этого нужно иметь доступ по крайней мере к каталогу cgi-bin. Этого не требуется, если вы используете JavaScript — он работает непосредственно внутри браузера (если тот совместим с ним). Вывод отсюда несколько неожиданным: JavaScript можно применять либо для очень небольших задач, либо для очень сложных, в которых сервер не принимает никакого участия.

В этой главе вы найдете только введение в JavaScript. Глава 18 охватывает конкретные вопросы, связанные с обработкой пользовательского ввода. Затем в главе 19 мы обсудим еще один специальный вопрос о связи Dynamic HTML и JavaScript. Что касается данной главы, то она имеет следующие разделы:

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

Что такое JavaScript?

JavaScript — это язык написания скриптов. Он похож на AppleScript, VBScript — собственно нечто, на всю линейку языков написания скриптов. Хотя его интерфейс очень похож на интерфейс полноценных программных языков, таких как С, C++ и Java, не нужно сильно заботиться о том, что стоит за этим сходством. Структура JavaScript по сравнению с ними несколько ограничена, что не умаляет его значения для веб-приложений.

JavaScript был разработан компанией Netscape для совместной работы с HTML (и XHTML) и создания более динамичных и интерактивных страниц. Браузеры Netscape и IE имеют полную поддержку JavaScript, начиная с 3.0, тогда как другие — только частичную и не всегда корректную. Зачастую вы не можете рассчитывать на то, что все ваши пользователи имеют браузеры с поддержкой JavaScript, при написании caйтов нужно учитывать это. Мы еще вернемся к данному вопросу в этом разделе.

ПРИМЕЧАНИЕ

Реализация JavaScript от Microsoft носит название JScript. В целом оба варианта представля ют собой примерно одно и то же, однако в JScript есть несколько отличающихся команд. Тем не менее они являются вполне законными последователями официального стандарта ECMAScript (http://www.ecma.ch/ecmal/STAND/ECMA-262.HTM). ЕСМА — это европейская ассоциация производителей вычислительной техники, установившая ряд спецификаций, которым, в частности, подчиняются языки JavaScript и JScript.

JavaScript предназначен для работы с разными элементами веб-страниц, реагиро вания на пользовательский ввод, передачи значений полей форм в выражения и формулы, иначе говоря, он из обычной страницы делает подобие компьютерной программы. Если поближе познакомиться с JavaScript, то можно научиться весь ма элегантно и просто решать такие вопросы, как автоматизация создания интер фейса форм и проверка введенных в них данных (рис. 17.1).

Рис. 17.1. С помощью JavaScript можно, например, проверять, все ли необходимые поля формы заполнены, причем делать это еще до того, как данные будут отправлены на сервер для обработки CGI-скриптом

JavaScript не входит ни в старый стандарт HTML, ни в новый XHTML, несмотря на то что он используется почти всегда с HTML-страницами и в обоих стандартах есть элемент <script>. Более того, JavaScript и его ближайшие родственники явля ются основной составляющей того, что называется Dynamic HTML, в котором, кроме него, используются таблицы стилей и другие интересные инструменты, позво ляющие создавать действительно интерактивные веб-страницы.

Какое отношение имеет JavaScript к Java?

Следует помнить, что JavaScript и Java — это не одно и то же, они вообще не имеют друг к другу никакого отношения, за исключением, пожалуй, названия. Посудите сами: Java — это полноценный язык программирования, созданный компанией Sun Microsystems в духе C++. Он предназначен для профессиональных или полупрофессиональных программистов и имеет следующие широкие возможности.

• Во-первых, это современный язык программирования, который знают и которым интересуются тысячи серьезных программистов, пишущих на С и C++.
  
• Во-вторых, это нечто большее, чем обычный компьютерный язык программирования. Он ориентирован на технологию виртуальных машин и систем, — это означает, что Java-программы могут работать на самых разных платформах.

Многие веб-браузеры имеют поддержку Java, организованную примерно в такой же манере, как поддержка мультимедиа. Приложения могут работать прямо в окне браузера, вызывая у пользователя ощущение, будто он работает с программой, установленной на его жестком диске.

Концепция виртуальных машин становится настолько сильна, что рано или поздно наступит время, когда во главе всех языков программирования встанет что-нибудь Java-подобное. Идея состоит в некотором упрощении клиентских Java-машин.

Обычно программная начинка компьютера определяется тем, какое ПО и какая ОС на ней установлены. Например, невозможно работать с Mac-программами на компьютере с Windows. Почему? Да потому, что программы для Macintosh рассчитаны на другой процессор и другое оборудование, нежели то, что используется Microsoft Windows.

Однако Java создаст стандартный компьютер, то есть виртуальную машину, базируясь исключительно на программных элементах. Таким образом, вместо того чтобы программировать «под Мас» или «под Windows», можно создавать приложения для виртуальных машин, которые при их использовании разными компьютерными платформами практически ничем не отличаются. Поскольку виртуальная машина создастся браузером, то программы, написанные на Java (в данном контексте более уместно называть их «апплетами»), можно запускать непосредственно в его окне.

Но на сегодняшний день истина заключается в том, что виртуальные машины Java еще не подмяли под себя настольные компьютеры, поэтому все-таки приходится писать разные приложения под Mac, Windows, Unix, Linux и т. д. По крайней мере, по-разному их компилировать. То есть существуют «настольные» Java-приложения для обычных компьютеров и сетевые программы. Но помимо всего этого Java является популярным языком программирования, и программное обеспечение обоих типов сегодня пишется именно на нем.

Почему же столь похожи названия JavaScript и Java? Оказывается, это не случайно. Дело в том, что JavaScript, не являясь полноценным языком, использует синтаксис команд, который очень сильно напоминает Java. Язык Java — прямой наследник C++, а тот, в свою очередь, немало взял от С. Это не только историческая справка, но и намек на то, что программисты, знакомые хотя бы с одним из этих современных объектно-ориентированных языков программирования, с легкостью освоят JavaScript.

JavaScript или VBScript?

На сегодняшний момент JavaScript — самый популярный язык написания скрип тов. VBScript сильно отстает, но все же занимает почетное второе место среди язы ков для написания веб-сценариев. И это несмотря на то, что он поддерживается только технологией Microsoft и единственным типом браузеров — Internet Explorer для Windows.

В чем же особенность VBScript? Это язык, рекомендованный для элементов управления ActiveX (это такая разновидность Java-апплетов, придуманная Microsoft). К тому же он очень похож на Visual Basic, популярный язык программирования под Windows. И Java, и JavaScript являются платформонезависимыми языками, тогда как VBScript вместе с ActiveX предназначен только для Windows.

Эта и последующие две главы рассказывают только о JavaScript, потому что это язык, являющийся кроссплатформенным и использующий наиболее понятный синтаксис. И все же оговорюсь, что если вы намерены написать специализирован ный сайт, рассчитанный исключительно на продукцию Microsoft (например, для каких-нибудь внутренних сетей), если вы привыкли работать с элементами ActiveX или если вы — профессиональный программист на VB, то можете попробовать применить VBScript для создания скриптов.

Как работает веб-скрипт

Обратимся к рассмотрению двух основных концепций, на которых держатся веб-скрипты: «функции» и «обработка событий».

В большинстве скриптов имеются две секции: одна из них расположена в <head> веб-документа, другая — внутри <body>. В первой содержатся функции, а во BTO рой — вызовы этих функций.

Вызовы функций к обработке данных имеют косвенное отношение. Собственно коды алгоритмов находятся в секции, расположенной в <head>. Что же тогда дела ют вызовы? Они передают в функции фактические аргументы, то есть значений переменных, необходимых для их работы. Функции, приняв вызов, начинают выполнять алгоритм, содержащийся в нем. То есть что-нибудь считать, преобразо вывать и т. д., затем возвращают результат.

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

Такой подход называется функциональным: скрипт ожидает наступлениям кого события и запускает соответствующую функцию. В отличие от него пи процедурном подходе программа выполняется строго по порядку. Допустим нужно получить какую-то часть информации или вычислить определенный набор значений. Одной задачей занимается одна функция, другой — другая.3а пускаются только те функции, которые необходимы для решения поставля ных задач. Но происходит это только в том случае, если постановка заданияляется событием, распознаваемым скриптом. Весь этот механизм и называется обработкой событий.

ПРИМЕЧАНИЕ

Обратите внимание на то, что событие — это не обязательно какое-то действие пользователя. Им может являться какое-то значение системного таймера, факт загрузки страницы, изменение какой-то переменной и т. д. Все зависит от того, на что запрограммирован скрипт. А уж реакция может вообще любая. Автоматическое генерирование HTML-страницы, изменение содержимого фрейма, создание электронного письма... Всего не перечислишь.

Ввод скриптов в веб-документы

JavaScript — это еще одна составляющая, являющаяся обычным текстом. Для написания скриптов вам не потребуется никаких специальных приложений. То есть нужно иметь какой-нибудь текстовый редактор попроще, чтобы он не занимался самодеятельностью в виде попыток как-нибудь отформатировать набранный код или сохранить его в каком-нибудь замысловатом формате. Ничего подобного нам не требуется. Также под рукой полезно иметь руководство разработчика по JavaScript от компании Netscape, которое вы можете найти по адресу: http://devetoper.netscape.com/ docs/manuals/js/client/jsguide/index.html. Ну и конечно, нужно не забывать тестировать свои скрипты на максимальном количестве доступных браузеров: Internet Explorer, Netscape разных версий. Если вы используете JavaScript для деловых или организационных целей, то этап тестирования особенно важен.

При работе с JavaScript в вашем словаре появляется новый элемент HTML: <script>. Хотя он и является типичным контейнером XHTML, необычно то, что его придется прятать внутри страницы.

Элемент <script> и скрытие скрипта

Элемент <script> обозначает начало и конец блока, содержащего команды скрипта. Он является контейнером, имеет атрибут type, позволяющий указать название языка, на котором был написан скрипт (по умолчанию им считается JavaScript).

ПРИМЕЧАНИЕ

Чтобы отдать дань в первую очередь совместимости с древними браузерами (IE и Netscape версий младше чем 3.0), можно включить в состав <script> атрибут language="JavaScript". Современные браузеры могут обойтись без этого, но одновременное использование и type, и language избавит вас от множества проблем.

Например:

<script type="text/javascript"> 
Определения функций скрипта 
</schpt>

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

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

<script type="text/javascript">
<!--команды скрипта
II -->        
</script>

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

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

Конечно, основное назначение комментариев в скриптах состоит в том, чтобы предоставить возможность включить кое-какую информацию о программе. В частности, можно написать, как работает скрипт и почему он делает то, что он делает:

 <scrlpt type="text/javascript">
<!--
команда скрипта II Комментарий к команде
...команды скрипта
/* Если нужно вставить длинный комментарий.
поместите его между такими значками */
// Этот комментарий предшествует закрывающему тегу комментария -->
</script>

Итак, есть два типа комментариев: однострочные и многострочные. Однострочные составляются из двух косых черт (//) и служат для тех комментариев, которые могут целиком уместиться на одной строке. Многострочные представляют собой комбинацию из косой черты и звездочки (/*) — тогда это открывающий тег - либо из этих же символов, но в обратном порядке (*/) — тогда это закрывающий тег. Первый и второй могут располагаться на разных строках, а значит, комментарий может быть настолько длинным, насколько потребуется.

СОВЕТ

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

Strict или Transitional?

Если вы прячете скрипты от старых браузеров, значит, вы используете XHTML Transitional. Потому что если вы хотите следовать стандарту XHTML Strict и при этом иметь на веб-странице какие-то скрипты, вы, конечно, можете это делать, но только не внедряя определения функций в HTML-код. Применяйте связывание с функциями, хранящимися в отдельном файле, и будьте счастливы. Впро чем, можно внедрить, но еще дальше перепрятать скрипт, об этом я тоже сейчаc расскажу.

Причиной таких хитрых действий по укрыванию кода, нетипичного для XHTML,
является то, что некоторые общие символы могут по-разному восприниматься в XML.
(A XHTML — это HTML-часть XML.) В результате, например, символы < и & могут
внезапно оказаться принадлежащими XML, хотя на самом деле принадлежат скрипту.
Итак, как же выйти из этой ситуации? Скройте код скрипта, как показано в примере:

<!DOCTYPE html PUBLIC "\//W3C//DTD 
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Строгое скриптирование </title>
<script type="text/jayascript">
<![CDATA[
 ...команды скрипта...]]>
</script>
</head>
</html>

Вы уже заметили разницу? Анализатору XML говорится: «Это не твоя область компетенции» с помощью тегов <![CDATA[ и ]]>. По крайней мере, такой подход является официальной рекомендацией. Проблема в том, что этот метод скрытия кода во многом остается теоретическим. Может быть, в будущем его и будут применять, но пока что эти теги просто не работают. Так что внедрять коды JavaScript и при этом оставаться в рамках XHTML Strict просто не получается.

Если вам действительно принципиально иметь DTD для XHTML Strict, могу посоветовать лишь одно — метод связывания. Берете все объявления функций скрипта (это то, что раньше было в секции <head>), помещаете их в отдельный документ и связываете с ним свою веб-страницу. Это будет выглядеть следующим образом:

<head>
<title>Связывание с JavaScript</title>
<script type="text/javascript" src="script_funct1ons.js">
</Script>
</head>

Документ, ссылку на который вы видите, — это обычный текстовый файл, содержащий текст скрипта. Он начинается с первой его команды, как будто заключен в контейнер <script>.

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

ПРИМЕЧАНИЕ

Впрочем, можно отказаться от следования строгому стандарту XHTML на страницах, содержащих JavaScript. (Я так и буду делать в этой и последующих двух главах.) Между прочим, есть еще одна проблема: к тому времени, как Сеть полностью перейдет на стандарт XHTML Strict, могут измениться требования к скриптам, внедренным в страницы.

Скрипты и элементы <meta> и <noscript>

вообще-то, каждый экземпляр элемента <script> на странице должен иметь атрибут type, хотя далеко не всем браузерам это действительно необходимо. Это требование можно обойти, если в начало страницы вставить элемент <meta>, который задаст значение type по умолчанию. <meta> должен быть расположен в секции <head>:

<head> <title>JavaScript no умолчанию</title>
<meta http-equiv="Content-Script-Type" content=
"text/javascript" />
</head>

Когда у вас на странице будет не один скрипт, а много, вы оцените необходимостн
<meta>.

Обработчики событий JavaScript (в том случае, когда функции скрипта вызым ются из самой веб-страницы) не позволяют указывать type скрипта. Поэтому остается лишь положиться на <meta> (или же предоставить браузеру возможность угадывать самостоятельно).

Наконец, XHTML предлагает использовать контейнерный элемент <noscript>,ко торый сосуществует со <scri pt> и позволяет написать альтернативную HTML разметку для тех браузеров, которые не могут ничего поделать со скриптами. Вря зультате код выглядит следующим образом:

<body>
<script type="text/javascript">
//<![CDATA[ . . функции. . .II ]]>
// -->
</script>
<noscript>
<р>Похоже. ваш браузер не поддерживает JavaScript. Для вас есть
<а href="noscri pt.html ">альтернативная страница</а>
</noscript>
</body>

Давайте соберем все полученные знания в одном шаблоне и рассмотрим небольшой пример.

Пример «Hello World»

Говорят, первая в мире программа в результате своей работы выдала на устройство вывода следующее: «Hello World». Эта фраза стала исторической, и с тех пор при изучении любого языка первая программа традиционно делает то же самое. Наш пример покажет основные приемы, используемые при написании кода скрипта и при его скрытии. Вы, вероятно, поймете и то, как работает сам элемент <script> Для того чтобы до конца понять данный пример, нужно познакомиться с. одной новой командой: document. writelnO, в JavaScript это называется «метод». Определение метода — это такая функция, которая встроена в какой-либо объект, с помо щью метода объект может автоматически производить определенные действия. В данном случае объект может автоматически производить «запись» в «документ». Другими словами, метод document. writelnO выводит текст на веб-страницу.

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

Листинг 17.1. Пример «Hello World»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.
org/TR/xhtmll/DTD/xhtml1-transitional .dtd">
<html xmlns="http://www. w3.org/1999/xhtml "> <head>
<title> Hello World </title>
<meta http-equiv="Content-Script-Type" content=
"text/javascript" /> </head>
<body>
<script language="JavaScript"> 
<!- прячем скрипт
document.writeln("<hl>Hellо World!<\/h1>") 
//закончили прятаться --> </script> 
<noscript>
<р>Ваш браузер не поддерживает JavaScript</p> 
</noscript>
</body>
</html>

Обсудим некоторые моменты, встретившиеся нам в этом примере:

• Контейнер <scr1 pt> вставлен прямо в секцию <body> документа. Так обычно и делается, когда вы используете скрипт для создания чего-либо внутри тела вебстраницы и вам не нужно предварительно описывать функции в <head>. Когда вы имеете дело с более сложными скриптами, конечно, вам не обойтись без элементов <script> и в одной, и в другой секции документа.
  
• В команде document. writeln() закрывающий тег </h1> действительно выглядит как <\/h1>, это не опечатка. Если написать обычный закрывающий тег, то он будет восприниматься методом document. wri tel n () как-то по-своему. Чтобы этого не произошло, вставляют специальный символ (одним из набора этих спецсимволов является «новая строка», /п). В данном случае обратная косая черта (\) позволяет скрипту пропустить прямую (/).
  
• Поскольку есть элемент <meta>, вам не нужны атрибуты type в элементах <script>. Тем не менее, атрибут language, как видите, по-прежнему присутствует для совместимости.
  
  

Рис. 17.2. Корректный результат выполнения скрипта из примера «Hello World»

Сохраните документ под каким-нибудь именем типа helloworld.html и откроите его в браузере. Если все в порядке и с набранным кодом, и с браузером, вы должны увидеть то же самое, что изображено на рис. 17.2. Если ваш браузер не умеет работать с JavaScript, то вы увидите только сообщение об этом (содержащееся в контейнере <noframes>) и ничего более.

Создание функций на JavaScript

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

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

• Во-первых, функции не обязательно использовать в каком-то одном установленном порядке (так же как не обязательно в приложениях под Windows или Маc щелкать на кнопках в каком-то определенном порядке). Поэтому не нужно думать, в каком порядке располагать описания функций, — когда они понадобятся, с помощью технологии вызовов обработчиков событий их запустят, да еще и не один раз.
  
• Во-вторых, функции могут использоваться многократно для обработки изменившихся значений переменных и получения, соответственно, изменившегося результата. То есть исходные данные разные, функция одна и та же, а результат — новый. Если вы напишете достаточно гибкую функцию, это свойство поможет несколько сэкономить время по сравнению с программированием каким-то иным способом. Все это замечательно, но функции должны быть объявлены, то есть определены (в серьезных языках программирования «объявление» функции и ее «определение» - это несколько разные вещи). Обычно это делается в секции <head> веб-документа. После этого функцию нужно вызвать (запустить), причем это действие обычно осуществляется непосредственно на странице.

Объявление функций

Что значит «объявление функции»? Объявляя функцию, вы говорите браузеру: «Я собираюсь завести себе вот такую маленькую функцию, и вот то, что она будет уметь». Когда браузер загрузит страницу, он увидит ваше послание и будет знать, куда бежать, если вдруг случится вызов какой-либо функции.

Большинство программистов справедливо предпочитают размещать объявления функций в разделе <head>, хотя это не является официальным требованием. С технической точки зрения, функции могут быть определены (объявлены) где угодно, хоть в самом конце страницы. Объявление располагается внутри контейнера <script>, причем не обязательно только одно. На самом деле, JavaScript в этом смыc ле ведет себя несколько загадочно, поскольку все элементы <script>, составленные вместе, как раз и составляют весь скрипт.

Рассмотрим формат определения функции:

<script type="text/javaschpt"> <!-- прячем скрипт
function имя_функции(формальный_параметр) {
...над функции...
return (новое_значение)
// закончили прятаться -->
</script>

Помните, что, когда скрипт вызывает функцию, он часто передает в нее фактический параметр, который подставляется вместо формального. Нужно не забыть указать имя формального параметра. Если функция предназначена для выполнения простых вычислений, можно дать переменной какое-нибудь имя типа first_num. Затем его можно использовать в формулах: newjium=first_num+ 3.

Давая имя входному параметру функции, вы тем самым создаете переменную. Компьютер резервирует для ее размещения некоторый отрезок памяти и дает ему имя. Можно присвоить ему какое-нибудь значение, а потом даже использовать в своем скрипте. Например:

1. В теле скрипта посылаем значение 5 в функцию.

2. Функция получает значение и создает переменную myjiumber, которой его и присваивает.

3. Затем вы говорите скрипту: «Прибавь 10 к моей переменной myjiumber» (newjium-ber=my_number+10).

4. Если вы все сделали правильно, скрипт возвращает результат и сохраняет его в переменной new_number.

5. В тело программы передается получившееся значение. Ответ — 15.

Обратите внимание на ключевые слова function и return. Слово function всегда начинает объявление функции, за ним следует ее имя и (в скобках) имя переменной, которой нужно присваивать входное значение. Что касается return, то это — конец объявления, оно сообщает функции о том, что нужно вернуть новое значение туда, откуда она была вызвана.

А еще обратите внимание на то, что вся вычислительная часть объявления располагается между function и return и между двумя фигурными скобками. Приведу пример объявления функции:

<script type="text/javascript">
<!-- прячем скрипт
function getjSquare(num)
square jium = num * num: return (squarejium)
II закончили прятаться -->
</script>

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

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

Вызов функций и возвращение значений

Само тело скрипта представляет собой набор вызовов функций. Это, может быть, непривычно слышать, но это так. В рамках самого скрипта осуществляется очень небольшая часть всех вычислений. Все, что вы делаете, — это в основном посылаете какие-нибудь значения в функции, затем получаете результаты. Вызов функции может располагаться либо внутри контейнера <script>, либо в качестве атрибута, определяющего обработчик событий (глава 18), либо в URL Типичный вызов функции выглядит так:

Имя функции(значение):

В скобках можно ввести имя переменной, реальное значение или строку текста, в зависимости от того, что требуется функции в каждом конкретном случае. (Вызовы функций внутри тела документа должны быть внутри тегов <script>, как и определения функций в заголовке.)

ПРИМЕЧАНИЕ

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

В качестве примера рассмотрим следующий скрипт. В нем будет вызываться уже знакомая функция getSquare:

<script type="text/javascript">
<!-- прячем скрипт
myNum = 10;
mySqr = getSquare (myNum);
document.writeln (" Квадрат числа " + myNum + " равен " 
 + mySqr + ".");
// закончили прятаться -->
</script>

В этом вызове функции происходит:

1. Переменной myNum присвоили значение 10.

2. Эта переменная (а значит, число 10) передается в функцию get_Square. (В этом примере предполагается, что используется та самая функция, речь о которой < шла в предыдущем параграфе.)

3. Когда функция принимает число 10, она присваивает его переменной num, после этого производятся вычисления.
4. По окончании вычислений новое значение передается в скрипт.

5. Обратите внимание, весь вызов функции заменяется значением, полученным от функции. В данном случае вместо вызова getSquare (myNum) подставляется значение 25.

6. В результате переменной mySqr присваивается значение 25, благодаря знаку ра- венства в соответствующей строке.

В JavaScript, как и во многих других языках программирования, знак равенства, стоящий после имени переменной, означает присваивание. В данном случае мы имеем два присваивания: myNum = 10 и mySqr = getSqr (myNum). Во втором, более интересном, случае вы просите скрипт присвоить переменной mySqr значение, возвращаемое функцией getSqr при работе с фактическим параметром myNum.

Итак, в JavaScript знак равенства — это не вопрос, а утверждение равенства переменной определенному значению. А как же задать вопрос насчет равенства? Это может потребоваться, например, для составления условия. А для этого применяется специальная комбинация, состоящая из двух знаков равенства подряд (==).Пе-переменные, сравнения, условия и т. д. мы рассмотрим далее.

Пример вызова функции

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

Листинг 17.2. Вызов функции и возврат значения

KDOCTYPE html PUBLIC "V/W3C//DTD XHTML 
1.0 Transitional//EN" "http://www.wЗ. 
org/JR/xhtmll/DJD/xhtml1-transitiondl. dtd">
Bill xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title> Возведение в квадрат </title>
<meta http-equiv="Content-Script-Туре" 
content="text/javascript">
<scrlpt type="text/javascript">
<! --- прячем скрипт function getSquare (num)
squareNum = num * num; return (squareNum);
 //Закончили прятаться -->
</script>
</head>

<tody>
<h1>A вот и ответ :</h1>
<script type="text/JavaScript">
<!--- прячеv скрипт
 mynym= 10:
mySqr = getSquare (myNum);
document.writeln(" Квадрат числа " + myNum + " равен " 
 + mySqr + "."):
//закончили прятаться --> 
</script>
<noscript>
<p>Baiш браузер не поддерживает JavaScript</p>
</noscnpt>
</body>
</html>

Как видите, в вызов функции можно включить даже обычную разметку HTML После окончания работы скрипта все переменные знают свои значения, и им не стыдно показаться на экране. Результат — на рис. 17.3.

Рис. 17.3. Вторая строка этой страницы — результат вызова функции и возвращения значения

Работа с переменными

При написании скриптов приходится иметь дело с двумя основными типами данных: литералами и переменными. Литералы (они же константы) — это неизменные значения, будь то цифра 5, или строка Любовь и смерть всегда вдвоем, или число 6.02. Их можно присваивать переменным или использовать самостоятельно при вычислениях (и то и другое называется в программировании выражениями).

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

В целочисленный тип входят числа типа 4,17 или 364 345. Они могут быть как полo жительными, так и отрицательными, например -57. Числа с плавающей запятой -это десятичные дроби, такие как 3,2,23534,4435и 1,14159265е10(шш 11 415926500 в обычной нотации). Что касается булевского типа, то в него входят всего два логических значения: true и false.

Символьные строки — это особый тип данных, значениями которого могут быть последовательности символов, заключенные в кавычки. Символы могут соединять ся в слова, предложения, могут быть даже числами. Разница между строковым ти пом и всеми остальными состоит в том, что строки не могут использоваться в арифметических вычислениях. (Тем не менее их можно при желании преобразовать в численные значения.) Примеры переменных, которым присвоены строковые значения: City = "Санкт-Петербург", Zip = "194017".

Имена переменных

Есть определенные соглашения и нормы, касающиеся того, какие имена можно давать переменным.

Имена переменных должны начинаться с буквы или знака подчеркивания. Вслед за первым символом могут следовать строчные либо прописные буквы, цифры и знаки подчеркивания. В JavaScript имена переменных являются регистрозави-симыми, то есть myVar и Myvar не будут восприниматься как одно и то же.

Как выбираются имена переменных? Разные программисты используют разные подходы, а Тодд Стауфер рекомендует выбирать наиболее осмысленные имена. Поскольку использовать пробелы нельзя, приходится иногда соединять несколько слов в одно: Total Sal es, NewNum. Если вам такие имена не нравятся, можете вместо пробела использовать знак подчеркивания: oct_sal es, f i sh_count. Следует помнить, что имена должны быть короткими. Посудите сами, сколько времени и сил вы потратите зря в попытках правильно набрать длинное имя переменной.

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

Переменные, вычисления и присваивания

Очевидно, что переменные очень часто используются в алгебраических вычислениях. И в самом деле, и литералы, и переменные можно складывать (+), вычитать (-), делить (/) или умножать (*). Например:

MyNum * 5 
х+ 1
12%5

В третьем примере мы ищем остаток отделения числа 12 на число 5. Результатом этого действия будет число 2. Математические вычисления такого рода довольно часто встречаются в скриптах и программировании вообще.

Тем не менее вы, вероятно, заметили, что вычисления из данного примера, по боль-шому счету, бессмысленны. Опять же, как и в алгебре, реальные значения нужно заменять переменными, тогда такого рода математика начинает обретать смысл. Более того, результат нужно присваивать какой-нибудь переменной:

NewNum = myNum * 5;
 х = х + 1;

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

При желании, впрочем, можно упростить выражения присваивания:

NewName = "Майкл":
х = 4:
carColor = "серый металлик":

JavaScript позволяет и просто объявлять переменные, не присваивая им сразу кон кретные значения. Это бывает удобно, когда нужно только зарезервировать место в памяти компьютера, не инициализируя его сразу же каким-то значением. Haпрмер:

 var х;
van myVariable;

Кстати, объявление новой переменной может быть одновременно и присваиванием. Поэтому следующее выражение вполне законно:

var milAge = 10000;

Инкремент и декремент переменных

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

х = х + 1;

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

var у = 5; 
У = У + 1 :

После выполнения команды из первой строки значением у будет 5. После второй строки у уже равен 6.

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

х++:

Существуют две разновидности операции инкремента: х++ и ++х. Разница заключается в том, когда выполняется инкремент при одновременном присваивании. Приведу пример. Допустим, х равен 2. Теперь мы пишем:

у = х++;

При этом значением у будет 2, а значение х увеличится на единицу и будет равно 3. А теперь при тех же исходных условиях напишем такое выражение:

у = ++х;

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

Точно так же работает декремент (--).

Существует альтернативный синтаксис операций присваивания с одновременным инкрементом/декрементом. Так, выражению х = х + 3 соответствует такое присваи ванне: х += 3. Если х был равен 5, то после выполнения этой операции он будет равен 8. Эквивалентны и такие две строки:

y = y-2
y = -2

Массивы

Прежде чем мы закончим обсуждение переменных, мы обратимся еще к одному вопросу. Массив — это тип данных, позволяющий под одним именем хранить несколько переменных. Вы спросите меня, как же отличить эти переменные и как обратиться к ним? А я вам отвечу: для этого существует система индексации в массивах. Каждая «переменная» имеет свой порядковый номер внутри массива. Например:

 van player = new Array ("Боб". "Екатерина". "Дима". "Петя"):

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

 document. writeln ("Победитель - " + player[2] +"!");

Массивы нумеруются с нуля, поэтому значением р!ауег[2] будет не Екатерина, как вы, может быть, подумали, а Дима. Именно это имя будет подставлено в качестве аргумента метода writeln. Чтобы узнать, сколько элементов содержится в массиве, можно использовать специальную команду под названием length: NumPlayers = player, length:

Помните о том, что просто так использовать эту команду для обращения к конкретному элементу массива нельзя, поскольку счет ведется с нуля. То есть если length выдал число 5, это означает, что последний индекс массива равен [4], так как первый — [0].

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

<script type="text/javascript">
<!-- прячем скрипт
var player = new Array 
("Боб". "Екатерина". "Дима". "Петя"):
document. writeln ("<р>Игрок №2: " + player[l] + "<\/р>"):
рlауег[1] = "Татьяна" :
player[4] = "Галина" :
document. writeln 
("<р> теперь игрок №2: " + player[l] + "<\/р>"):
var newIdx = (player. length - 1):
 document. writeln 
("<p> Наш новый игрок: " + player[newldx] + "<\/p>"):
 // закончили прятать скрипт -->
</script>

Результаты работы скрипта — на рис. 17.4.

Рис. 17.4. Скрипт может иметь доступ к элементам массива

Управление ходом выполнения алгоритма

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

Если вы уже имели дело с программированием, то многое вам покажется знакомым. В частности, конструкции If.. .else, выражения циклов for, while, break и continue.

Ключевым понятием при разговоре об управляющих выражениях является условие. Это некая часть кода, определяющая дальнейший ход вычислений. Логика условия такова: «Если нечто является истиной, то произойдет некое действие (действия)». Другое условие может выглядеть так: «Пока нечто не является истиной, производить некоторое действие, приводящее в конечном итоге к тому, что это нечто станет истиной». И т. п.

Зачастую в условиях используются сравнения: проверяется, равны ли два значения между собой, а если нет, то какое из них больше. В таком случае условие может звучать следующим образом: «Если х больше, чем у, то следует делать то-то». А можно и указать конкретное действие прямо в этом условии: «Если х больше, чем у, вернуть значение х».

Итак, прежде, чем разбирать управляющие конструкции, обратимся к сравнениям.

Операции сравнения

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

 (X == 1)

Оно очень напоминает присваивание, только почему-то вместо одного знака равенства мы видим два. Это не опечатка, а признак сравнения. Здесь сравниваются два значения: 1 и значение переменной х. Если они равны, то условие истинно.

Хотите верьте, хотите нет, но у присваивания тоже может быть значение. Оно всегда равно true. Следующее условие всегда будет обращаться в истину, поскольку оно содержит присваивание:

(error-level = 2)

Хотя может показаться, что можно использовать одиночный знак равенства для составления выражения сравнения типа «равен ли х единице», но на самом деле это не так. Если вы забудете всего лишь один маленький значок =, то рискуете вместо сравнения написать утверждение факта равенства, то есть присваивание. Значит, следует писать оператор сравнения: ==. В таблице 17.1 показаны всевозможные операции сравнения.

Таблица 17.1. Операции сравнения в JavaScript

Разумеется, все эти операции используются при составлении условных выражений.Например:

(ConttVar ==5)
(testAver > 85) 
(ItemType != "рубашка")

Как показано в примере, сравниваться могут не только численные значения, но и строка. Когда производится сравнение, то значение true или false присваивается всей скобке, содержащей выражение. Если необходимо, можно данное значение присвоить какой-нибудь переменной. Только не забудьте при написании программы изобразить эти скобки замененными на «Истина» или «Ложь».

Условие if...else

В JavaScript есть условное выражение If.. .else, означающее тип выбора «или... или». Его синтаксис:

if (условие) { выражения скрипта}
else {
 другие элементы }

Условие здесь встречается всего один раз и должно содержать выражение, принимающее значение true или fal se. Под «выражениями скрипта» здесь подразумевается наличие любых допустимых команд JS. Например:

 if (x == 5) {
document.writeln("переменная х равна 5."); return;
else {
document.writeln("переменная х равна 5.");

Выражение el se не требуется в том случае, когда вы хотите, чтобы программа просто пропустила конструкцию i f целиком и продолжала выполнение алгоритма. Примером может послужить такой код:

 if (totalValue == 1) { return (0)

В этом случае если условие равно f al se (то есть переменная total Value не равна 1), то конструкция i f полностью пропускается, а выполняется то, что следует за ней. Если же условие равно true (вы, наверное, догадались, что это означает для totalValue), то выполняется строка return (0).

Условия циклов

Для создания в программах циклов используются две конструкции: for и while. Что такое циклы? В программировании циклами называются отрезки кода, повторяющиеся снова и снова, пока условие выхода из цикла не обратится в истину.

Синтаксис цикла for следующий:

for (инициализация счетчика; условие:
 выражение инкремента счетчика) {
команды JavaScript
  }

Порядок работы следующий:

1. Цикл for начинается с инициализации переменной-счетчика.

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

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

4. После выполнения последней команды цикла счетчик инкрементирустся в соответствии с третьим параметром for.

5. Если достигнуто заранее определенное предельное значение, происходит вы ход из цикла, в противном случае программа возвращается к шагу 2.

Рассмотрим пример:

for (x=0: х<10; х=х+1)
{ total Num = 2 * х: document.writeln
("Если 2 умножить на " + х + ".
получится " + totalNum + "<br \/>"):

Как выполняется этот цикл? Вначале инициализируется нулем счетчик х. Вычисляется условие (х<10). Если оно истинно, то выполняется тело цикла. Затем инкре ментнруется счетчик. В данном случае на единицу. Цикл проходится заново, и х снова сравнивается с 10. Если все еще предельное значение не достигнуто, снова выполняется тело цикла. И так до тех пор, пока счетчик не дойдет до 10. Цикл заканчивается.

Цикл while похож на for, но он является более гибким. Он используется в очень многих случаях. Базовый синтаксис whilе:

 while (условие) {
юнцы JavaScript
 }

Цикл повторяется, пока условие истинно. Пример:

х=0; 
while (х <= 5) {
x = х + 1:
document.writeln ("X равен " + х + "<br \/>")
}

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

Остановка и продолжение работы циклов

В языке JavaScript (как, впрочем, и во многих других) существуют зарезервированные слова break и conti nue, изменяющие поведение цикла при выполнении определенных условий.
break идеален для случаев, когда непонятно, какие значения могут поступить в программу. Например, если их вводит пользователь в HTML-форме. Допустим, имеется такой код:

for (x=0; х<10: х=х+1) {
z = getlnput ():
if (z = х) break;
}

Здесь вызывается функция getlnput(). Предполагается, что она просит пользователя ввести значение, присваиваемое затем переменной z. Остановка цикла происходит, если z и х вдруг окажутся одинаковыми. В противном случае цикл for продолжается до тех пор, пока х не достигнет 10.

Выражение continue используется, когда нужно пропустить конкретный инкремент. Например:

<scrlpt> var х = О while (x<10) {
 х = х + 1;
if (x == 5) continue;
document.writeln (x + " не равно 5. <br \/>");
}
</script>

Если выполняется условие (х == 5), то элемент continue возвращает программу снова на while, заставляя пропустить все, что находится в цикле ниже его. Когда
условие не выполняется (в данном случае чаще всего так и будет), тело цикла будет выполняться целиком.

Циклы и массивы

Несмотря на существование множества причин, одна из них, пожалуй, важнее ос тальных. Я имею в виду работу с массивами. Оказывается, циклы и массивы-вообще братья навек. Циклы замечательно подходят для прохода по всем элементам массива, а массивы хранят свои элементы, используя числовые индексы.

Рассмотрим пример цикла while, в котором извлекаются значения из массива:

<script type = "text/javascript"? 
<!-- Прячем код скрипта
student = new Array ("Александр". "Илья". "Наталья",
"Екатерина". "Ольга". "Алексей"): numStudents =
(student, length):  document.writeln
("В группе " + numStudents + " студентов <br \/>"): 
 var x = 0;
while (x < numStudents) {
document.writeln ("Студент №" + (x+1) + ":
" + student[x] + "<br \/>'"); x++;
 // закончили прятаться -->
</script>

Из-за того, что элементы массивы считаются с нуля, нам приходится выполнять некоторые вычисления над переменной х. Она используется в качестве счетчика цикла loop и одновременно является индексом, показывающим номер студента в группе. Поскольку студент №1 соответствует записи массива student[0], нам нужно все время прибавлять к реальному индекса единицу (х+1). Все остальное в данном примере должно быть понятно. Результат работы скрипта показан на рис. 17.5.

Рис. 17.5. Циклы очень помогают в работе с массивами

Объекты JavaScript

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

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

В практическом применении объект можно назвать неким контейнером данных и алгоритмов их обработки. В большинстве случаев объекты выполняют свою строго определенную функцию в программе, чем напоминают массивы. Используя специальную нотацию, можно «влезть» в объект и получить доступ к переменным и методам. Некоторые примеры этого вы уже видели.

document. writeln ( )

В этой команде вызывается метод writeln ( ) объекта document. Как вы узнаете из главы 19, HTML-документ представляет собой один большой объект со множеством переменных, которые можно изменять. И как раз программное изменение свойств документа — это одно из главных достоинств JavaScript.

Можно создавать собственные объекты и использовать их для хранения значений. Рассмотрим в качестве примера объект homeOl. Он предназначен для хранения информации о недвижимости, поэтому содержит следующие переменные:

home01.price = 125 000
home01. sqfoot = 2300
home01.beds = 3
home01. baths = 2
home01.base = true
home01.descrip = "Прекрасное место, рядом хорошая школа."

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

<script>
showListing (home01);
</script>

С помощью указателя на объект получаем доступ к конкретным переменным:

<script>
function showListing (home) {
document.writeln ("Цена: " + home.price + "<br \/>"):
document.writeln ("Площадь: " + home.sqfoot + "<br \/>"):
document.writeln ("Кол-во жилых комнат/ванных: " 
+ home.beds + "/" + home.baths +"<br \/>");
document.writeln ("Описание: " + home.descrip + "<br  \/>");
return:
</script>
 

Чтобы этот пример работал корректно, нужно создать предварительно объект home01.Сейчас мы рассмотрим, как это делается.

Создание объектов

Объекты создаются в два этапа. Во-первых, нужно создать шаблон. Это делается с помощью объявления function. Затем нужно создать экземпляр объекта, с которым можно нормально работать. Например, чтобы создать шаблон объекта home, требуется создать следующую функцию:

function homeCprice. sqfoot. beds, baths, base, descrip) {
this.price = price;
this.sqfoot = sqfoot;
 this.beds = beds:
this.baths = baths:
this.base = base:
this.descrip = descrip:
 }

Обратите внимание на зарезервированное слово this. В JavaScript оно используется для ссылки на текущий объект. Этот прием используется довольно часто при манипуляциях с объектами, особенно в формах. Вы еще встретите this в главе 18.

Меж тем мы создаем экземпляр объекта с помощью шаблонной функции и служебного слова new. Это и будет вторым этапом. Например:

homeOl = new horne (125 000, 2300. 3. 2. true. "Прекрасное место, 
рядом хорошая школа."):

Итак, new создает реальный объект. При этом сообщаются все его свойства: цена, площадь и т.д. При вызове функции home объект homeOl заменит указатель this, и на самом деле присваивания будут выглядеть так:

home01.price = 125 000
home01.sqfoot = 2300
home01.beds = 3
home01.baths = 2
home01.base = true
home01.descrip = "Прекрасное место, рядом хорошая школа."

Конечно, вы не увидите, как все это происходит. Но этого и не требуется. А требуется получить доступ к переменным объекта:

document.writeln ("Этот дом продается за $" + homeOl.price):

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

myhouse = {price:125000. sqfoot: 2300. beds: 3. baths: 
2. base: true,   descrip: "Прекрасное место, 
рядом хорошая школа."}

Интересно, что во время работы с отдельным объектом можно расширять набор его свойств в любое время. Например:

 homeOl.location = "midtown"

Замечательно. Это не повлияет на другие объекты, даже если они созданы с использованием того же шаблона.

Еще о методах

Если обычные переменные, ассоциированные с объектами, мы называем «свойствами», то функции, связанные с объектами, называются методами. Например, совсем недавно нам встречался метод document.writeln ( ), который на самом деле является функцией, связанной с объектом document, и позволяет записывать в веб-документы текст и HTML-разметку.

Итак, writeln( ) — функция, a document — ассоциированный с ней объект. Он является встроенным в JavaScript, и он не один такой. Встроенные объекты позволяют более простым путем получить доступ к часто используемым свойствам и изменять их.

Можно создавать и свои методы простым присваиванием имени функции объектной переменной:

object. имя_метода = имя_функции 

Внутри функции, определяющей объект, методы задаются по-другому:

function showListing () {
document.writeln ("Цена: " + this.price + "<br \/>");
document.writeln ("Площадь: " + this.sqfoot + "<br \/>"):
document.writeln ("Кол-во жилых комнат/ванных: " 
+ this.beds + "/" + this.baths +
"<br \/>");
document.writeln ("Описание: " + this.descrip + "<br   \/>");
return:

function home(price. sqfoot. beds, baths, base, descrip) {
 this.price = price:
this.sqfoot = sqfoot:
this.beds = beds:
 this.baths = baths:
this.base = base:
this.descrip = descrip:
this.showListing = showListing: )
 }

Если теперь определить объект home01l и вызвать метод home01.showLi sting( ), то выполнится функция showLi sti ng, просто вместо thi s будет использовано имя home01.

ПРИМЕЧАНИЕ

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

Встроенные объекты

Когда вы занимаетесь написанием скриптов, то выясняется, что существует множество очень похожих действий, которые приходится описывать снова и снова. Это не может не привести к мысли о какой-нибудь рационализации процесса. Наиболее популярные функции уже включены в язык JavaScript, что избавляет вас от их написания. Встроенные объекты предназначены для хранения наиболее полезных переменных и часто употребляющихся методов. Функции обычно занимаются интенсивными вычислениями, которые то и дело повторяются при написании скриптов.

Из этого параграфа вы узнаете о трех главных встроенных объектах JavaScript:

• первый встроенный объект называется String и предназначен для работы со строками;
  
• объект Math содержит различные константы и методы, которые бывают полезны при математических вычислениях;
  
• объект Date служит для того, чтобы можно было узнать текущую дату и время.

ПРИМЕЧАНИЕ

Я упомянул, конечно же, далеко не все встроенные объекты JavaScript. Просто именно эти обычно используются в веб-программировании. Если вы хотите узнать все о встроенных объектах, обратитесь к соответствующему разделу на сайте JavaScript: http://developer.netscape.com/ docs/manuals/js/client/jsguide/obj.htm/.

Объект String

Объект Stri ng сам по себе интересен хотя бы тем, что не нужно использовать нотацию типа stri ng. property. На самом деле любая создаваемая вами строка представляет собой объект String. Создается этот объект следующим образом:

mystring = "Вот такая строка"

Переменная mystring — это и есть объект. Например, чтобы получить значение длины строки, выполните следующее присваивание:

 Strlen = mystring.length

Когда вы создаете строковую переменную, объект String создается JavaScript автоматически. Длина строки хранится в свойстве length. (Обратите внимание на то, что length — это именно свойство, а не метод, поэтому в данном случае круглые скобки не нужны.) С рассматриваемым нами объектом ассоциирован также ряд методов типа toUpperCase(). Сего помощью можно все буквы строки перевести в верхний регистр. Делается это так:

 mystring - mystring.toUpperCase( )

Если строка была вида «Вот такая строка», то после выполнения этой операции она станет такой: «ВОТ ТАКАЯ СТРОКА». В таблице 17.2 показаны некоторые методы, которые можно применять к строковым объектам.

Таблица 17.2. Методы объекта String в JavaScript

Может быть, вы обратили внимание, что в таблице как-то немножко странно постоянно пишется о том, что строка выводится как что-то. Причина кроется в том, что методы на самом деле не изменяют текущих значений строки. Вместо этого они возвращают значение, соответствующее их функциям. Так, метод small () выводит строку как уменьшенный текст, a toUpperCase возвращает строку, состоящую из заглавных букв. Поэтому следующий пример не меняет в том, что мы видим на экране, ровным счетом ничего, потому как small ( ) не изменяет исходную строку.

<script type="text/javascript">
<!-- прячем скрипт
var testStrlng = "Тест: раз. два. три":
document.writeln(testString + "<br \/>"):
testString.smanO;
document.writeln(testString + "<br \/>");
// закончили прятаться -->
</script>

Наверное, большего эффекта мы добьемся, если напишем:

<script type="text/javascript">
<!-- прячем скрипт
var testStrlng = "Тест: раз. два. три";
document.write"!ndestString + "<br \/>"); var smallString 
= testString.smalK):
document.writeln(smallString + "<br \/>"):
// закончили прятаться -->
</script>

Теперь мы измененное значение присвоили новой переменной, поэтому на экране мы увидим изменения.

Ну так и что же делают эти методы? Почему, например, следующие две строки дадут один и тот же результат?

document.write("<big>" + mystring + "</big>"):         .
 document.write(mystring.big());

Подумайте.

Некоторые теги нуждаются в более подробных пояснениях. Особенно те, которые имеют дело с индексами. Итак, все символы в строках пронумерованы слева направо, начиная с нуля. Рассмотрим пример. Ниже вы видите строку, под каждой буквой которой расположена цифра — индекс данной буквы. (Допустим, строка является значением переменной kakdela.)

Как дела?
012345678

Теперь обратимся к методам обработки этой строки. Возьмем такую команду: kakdela.charAt(l). Результатом ее выполнения будет символ «а», индекс которого в нашей строке равен 1. Обратная операция выглядит так: kakdela.indexOfC'a"), результат ее выполнения равен 1. Между прочим, буква «а» встречается дважды. Результатом выполнения kakdela.lastlndexOfC'a") будет 7 — индекс последнего вхождения буквы «а».

Объект Math

В объекте Math содержатся некоторые полезные значения констант, а также математические методы. Свойствами объекта Math являются е, Q (PI) и Ige (LOG10E, десятичный логарифм числа е). Их можно использовать очень просто: нужно прибавить к имени свойства имя объекта. Например:

Var pi_value = Math.PI; 
Area = Math.PI*(r*r);

В таблице 17.3 перечислены-различные свойства объекта Math.

Таблица 17.3, Свойства объекта Math

Конечно, все эти свойства в данном случае — это просто удобный способ хранить разные значения, используемые в вычислениях. Однако наряду со свойствами в объекте Math имеется и ряд методов. Вызываются они точно так же, как любые другие. Тяжело переоценить уникальную возможность при помощи всего одной строки кода узнать arcsin числа 0,239. Например:

 Math.asin(0.239);

В таблице 17.4 приведены методы объекта Math.

Таблица 17.4. Методы объекта Math

Эти методы очень сильно помогут вам, если придется писать скрипты с какими-нибудь более или менее серьезными математическими вычислениями.

Объект Date

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

 todayDate = new Date( ):

Если вы при создании такого объекта ничего не укажете в скобках, он по умолчанию будет использовать текущую дату и время в таком формате:

День Месяц Число ЧЧ:ММ:СС Пояс Год

Вот пример полной даты:

 Thu Aug 22 19:09:02 CST 2002

Методы объекта Date можно использовать, чтобы, например, вычитать даты. Или части полных дат, такие как todayDate. getDay (), todayDate. getDate() или todayDate. getHours (). Если вы хотите разместить текущую дату и время на своей странице, то делается это следующим образом:

<script type="text/javascript">
<!-- прячем код
var todayDate = new DateO:
document.writeln ("Сегодня " + todayDate.getDateO + "/" 
+ todayDate.getMonthO + "/
" + todayDate.getYear0 + "<br \/>"):
document. writelnC'Ha часах в нашей студии " + todayDate. getHours 
О + ":
" + todayDate.getMinutesО + "<br \/>"):
// закончили прятаться -->
</script>

Результат:

Сегодня 22/7/2002
На часах в нашей студии 19:19

Резюме

Итак, в этой главе вы познакомились с основами языка написания скриптов JavaScript. Среди вопросов, которые мы затронули, были следующие: как добавить скрипт, как спрятать код от браузеров, не имеющих поддержки JavaScript, как закомментировать часть скрипта. Затем, как вы помните, был приведен классический пример «Hello World», в котором я постарался показать основные принципы работы со скриптами.

Затем мы перешли к более конкретным вопросам: функции, их объявление и вызов из тела скрипта. Переменные, их создание, присваивание им значений, различные варианты инкремента/декремента. В том же разделе было рассказало и о массивах.

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

Наконец, мы затронули такую концептуальную тему, как объектно-ориентированное программирование вообще и программирование на JavaScript в частности. Конечно, по сравнению со «старшими братьями», в этом языке реализована лишь малая часть принципов QOLL, но и с ее помощью можно делать многое. В конце главы мы рассмотрели несколько встроенных объектов: String, Math и Date. Все это нам очень сильно пригодится в следующих двух главах, где мы более подробно будем говорить о сложных скриптах и решении различных задач с помощью JavaScript.