Merdok javascript by Наталия Петухова

Your visual blueprint for building dynamic Web pages

Шя т

by Kelly L. Murdock maranGraphics

IDG

BOOKS WORLDWIDE

IDG Books Worldwide, Inc. An International Data Group Company Foster City, CA • Indianapolis • Chicago • New York

Наглядный курс создания динамических Web-страниц

lit

Келли Л. Мэрдок

ДИАЛЕКТИКА Москва • Санкт-Петербург • Киев 2001

ББК 32.973.26-018.2Я75

М97 УДК 681.3.07

Компьютерное издательство "Диалектика" "

Перевод с английского и редакция канд. техн. наук В.М. Неумоина По общим вопросам обращайтесь в издательство "Диалектика" по адресу: info@dialektika.com, http://www.dialektika. com Мэрдок, Келли, Л. М97 JavaScript: наглядный курс создания динамических Web-страниц. : Пер. с англ. : Уч. пос. — М. : Издательский дом "Вильяме", 2001. — 288 с. : ил. — Парал. тит. англ. ISBN 5-8459-0156-1 (рус.) Книга представляет собой уникальное наглядное пособие по основам программирования на языке сценариев JavaScript. В ней рассмотрены базовые средства JavaScript и методы их использования для решения конкретных задач, возникающих при разработке Web-страниц. Читатель узнает, как сделать Web-страницы динамическими, из более чем двухсот коротких уроков, каждый из которых основан на одном-двух примерах, наглядно демонстрирующих результаты работы операторов JavaScript. В книге содержится около 500 копий экранов с текстами сценариев и Web-страниц. Простота, ясность и наглядность изложения делают эту книгу незаменимой для тех, кто приступает к изучению JavaScript; она будет также полезной для более искушенных пользователей HTML. ББК 32.973.26-018.2Я75

Все названия программных продуктов являются зарегистрированными торговыми марками соответствующих фирм. Никакая часть настоящего издания ни в каких целях не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами, будь то электронные или механические, включая фотокопирование и запись на магнитный носитель, если на это нет письменного разрешения издательства IDG Books Worldwide, Inc. Copyright © 2001 by Dialektika Computer Publishing. Original English language edition copyright © 2000 by raaranGraphics, Inc. All rights reserved. No part of this book, including interior design, cover design, and icons, may be reproduced or transmitted in any form, by any means (electronic, photocopying, recording, or otherwise) without proir written permission from maranGraphics. This edition published by arrangement with the original publisher, IDG Books Worldwide, Inc., Foster City, California, USA.

ISBN 5-8459-0156-1 (рус.) ISBN 0-7645-4T30-5 (англ.)

ОГЛАВЛЕНИЕ

ОГЛАВЛЕНИЕ Глава 1. Введение в JavaScript Глава 2. Использование переменных и массивов Глава 3. Составление выражений Глава 4. Управление ходом выполнения программы Глава 5. Работа с функциями Глава 6. Обработка событий Глава 7. Использование объектов Глава 8. Работа с окнами Глава 9. Работа со строками Глава 10. Работа с форматами дат и времени Глава 11. Работа с объектом MATH Глава 12. Работа с формами Глава 13. Работа с фреймами Глава 14. Определение свойств Web-среды пользователя Глава 15. Отладка сценариев JavaScript Приложение. Справочник по HTML 4.01 Предметный указатель

12 24 46 60 74 84 100 126 154 174 186 200 230 242 256 264 275

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЕ Глава JL. Введение в JavaScript Понятие сценария ВводЬоператоров JavaScript в поле URL Включение операторов JavaScript в документ ! HTMJL Установление связи с внешним файлом JavaScript Представление содержимого сценариев для броузеров, не поддерживающих JavaScript Добавление комментариев в JavaScript Глава 2. Использование переменных и массивов Понятие типа переменной Объявление переменных Присваивание значений переменным Использование целочисленных переменных Использование чисел с плавающей точкой Использование булевых переменных Использование строковых переменных Определение типа переменной Преобразование строковых значений в численные Преобразование численных значений в строковые Объявление массивов Определение количества элементов в массиве Преобразование массивов в строки Сортировка массивов Глава 3. Составление выражений Использование арифметических операторов Операторы инкремента и декремента Составление выражений с операторами сравнения Составление логических выражений Использование условных операторов Старшинство операций Вычисление строковых выражений Распознавание численных значений

12 12 14 16 18 20 22 24 24 26 27 28 29 30 31 32 34 36 38 40 42 44 46 46 48 50 52 54 56 57 58

Глава 4. Управление ходом выполнения программы Использование условного оператора if-else Использование операторов цикла for Использование операторов цикла while Оператор break Оператор continue Использование таймеров JavaScript Задание регулярных временных интервалов Сброс таймеров JavaScript Глава 5. Работа с функциями Объявление функций Вызов функции Понятие глобальных и локальных переменных Передача параметров функции Возврат значений функцией Вызов функции по HTML-ссылке Глава 6. Обработка событий Использование обработчиков событий JavaScript Обработка щелчка мышью Обработка двойного щелчка Создание переворачивающихся кнопок Обработка нажатий клавиш Установка фокуса Фиксация изменений элементов форм Создание сообщений о загрузке и выгрузке Web-страниц Глава 7. Использование объектов Понятия объекта, свойства и метода Использование объектов-элементов Web-страницы Использование подобъектов Использование предопределенных объектов Создание новых объектов Обращение к текущему объекту Просмотр свойств объектов

60 60 62 64 66 67 68 70 72 74 74 75 76 78 80 82 84 84 86 88 90 92 94 96 98 100 100 102 104 106 108 110 112

СОДЕРЖАНИЕ

Использование объекта Array Использование объекта image Предварительная загрузка изображений Изменение изображений Использование объектов link и anchor Изменение гипертекстовых ссылок Использование объекта history Глава 8. Работа с окнами Использование объектов window и document Вывод текста в строке состояния броузера Изменение цвета фона Изменение цвета текста и гипертекстовых ссылок Изменение заголовка документа Отображение даты последнего изменения Web-страницы Просмотр URL текущего документа Просмотр ссылочных страниц Открытие нового окна броузера Закрытие удаленного окна Печать Web-страницы Перемещение окон броузера Изменение размеров окон Информирование пользователей с помощью окон предупреждения Получение информации через приглашение для ввода Диалоговое окно для подтверждения решения пользователя Глава 9. Работа со строками Использование объекта string Подстроки и работа с ними Сцепление строк Форматирование строковых переменных Создание элементов привязки и гипертекстовых ссылок Определение длины строк Изменение регистра Поиск фрагментов строк Локализация символов в строке Замена текста в строке Разделение строк

114 116 117 118 120 122 124 126 126 128 130 132 134 135 136 137 138 140 142 144 146 148 150 152 154 154 156 158 160 162 164 165 166 168 170 172

Глава 10. Работа с форматами дат и времени Использование объекта Date Отображение местного времени и даты Получение значений времени и даты Установка значений даты и времени Работа с представлением времени Работа с часовыми поясами Глава 11. Работа с объектом MATH Объект MATH Генератор случайных чисел Некоторые математические постоянные Использование тригонометрических функций Использование методов вычисления логарифма и экспоненты Использование метода извлечения квадратного корня Округление чисел Возведение чисел в степень Нахождение максимальных и минимальных значений Использование абсолютных значений Глава 12. Работа с формами Использование текстовых полей Работа с полями пароля Работа со скрытыми полями Работа с окнами textarea Использование кнопок Использование кнопки Сброс Использование кнопки Подача запроса Использование флажков Использование переключателей Работа со списками типа меню Работа с отдельными элементами списков типа меню Работа со списками множественных альтернатив Блокировка элементов формы Операции сброса и подачи запроса для формы Проверка корректности форм

174 174 176 178 180 182 184 186 186 188 190 192 194 195 196 197 198 199 200 200 202 203 204 206 208 209 210 212 214 216 218 220 222 224

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

Управление фокусом формы

226

Использование событий, связанных с фокусом

228

Глава 13. Работа с фреймами

230

Работе объектом frame

230

Обращение к фрейму по имени

232

Количество фреймов в наборе

234

Ссылка на текущий фрейм

235

Перекрестные ссылки между фреймами

236

Вывод информации в отдельный фрейм

238

Контроль изменения размеров фрейма

239

Задание целевого фрейма

240

Вывод фреймов на печать

241

Глава 14. Определение свойств Web-среды пользователя

242

Использование объекта navigator

242

Определение типа броузера, с которым работает пользователь

244

Определение версии броузера

245

Определение операционной системы, с которой работает пользователь

246

Свойство userAgent

247

Определение разрешения на использование языка Java

248

Определение кодового имени

249

Использование объекта location

250

Использование файлов cookie

252

Кодирование символов

254

Глава 15. Отладка сценариев JavaScript

256

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

256

Отладка с помощью комментариев

258

Вывод значений в текстовых полях

260

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

262

Приложение. Справочник по HTML 4.01 Предметный указатель

264 275

marahGraphics т-Ь это кропания, созданная членами одной семьи, которая проживает (^окрестностях города Торонто, Канада

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

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

Приглашаем посетить наш Web-узел: www.maran.com

С искренним уважением семья Маран

ОБ АВТОРЕ Келли Мэрдок (Kelly Murdock) — соавтор нескольких книг об Internet. Среди его последних изданий следует назвать такие, как Master Visually HTML and XHTML (Наглядное освоение HTML и XHTML), HTML Unleashed (Недокументированный HTML), Using FrontPage (Использование FrontPage) и FrontPage Bible (Библия FrontPage). Он также является штатным руководителем группы Web-разработчиков компании Big Planet и вдохновителем и генератором идей, воплощенных в рамках проекта Web-узла для детей www.animabets.com, главное место на котором отведено разнообразным играм на основе JavaScript.

БЛАГОДАРНОСТИ АВТОРА Я хотел бы выразить благодарность тем, кто оказал мне поддержку при работе над данным проектом. В первую очередь, благодарю мою семью. Спасибо Анжеле (Angela) за помощь в наиболее напряженные моменты работы над книгой и ее постоянное ободрение, а также Эрику (Eric) и Томасу (Thomas) за то, что они проявляли понимание, пока их папа был занят. Я благодарен Крису Мэрдоку (Chris Murdock) за его работу над набором символов Animabets для Web-узла www. animabets . com, которые стали украшением всей книги. Выражаю признательность Мартину Эдвардсу (Martine Edwards), который подвигнул меня на этот проект, а также Дене Лэш (Dana Lesh) за высочайший уровень редактирования и руководства проектом. Огромное спасибо всем сотрудникам IDG, ответственным за редактирование, корректуру, составление указателей, создание обложки и выпуск книги. Также благодарю всех, кто внес свой неоценимый вклад в выпуск электронной версии этой книги.

Нельзя недооценивать силу воздействия хорошей игры. Эрику (Eric), 2000

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СЙШТИЙСЦЕНАРИЯ |айлы Web-страниц, написанные на языке \HTML (Hypertext Markup Language — \ язык разметки гипертекста), определяют внешний вид в окне броузера таких элементов, как текст, таблицы и изображения. При этом HTML работает только со статическими элементами.

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

JavaScript — это язык сценариев (scripting language), который может применяться в файлах Web-страниц наряду с HTML, например, для придания Web-страницам свойств диалоговых окон.

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

Эти интерактивные возможности позволяют разработчику динамически управлять элементами

ПОНЯТИЕ СЦЕНАРИЯ • : Ж**" -''Чек.-

Дравка "

QHB •^абршчюе

-/:<rtis;№;". "

Сдиеис

Справка • - :

ЕЭсг*юв»»Л> Овиовм1ь

Домой

:: a

". • •

^ ' Г1ои«

;{6«)ec|^]http/l'yAwanimabets corri/activrtiesVq-balls/ballshtml j

HsUMwoe

Х;рнал

Остановить

^ ,с*Пер«ж(л

I) Sport Balls Match with Quipper Quail

• \ Ссылки "*.;

Обновите

ГЬиск

Иабрапгве .

Ifiuw»*] http./Vw.animabets.com/aLf vitivi/q-ballsyba Is .htm!

Sport Balls Match with Quipper Quail

'Ф |Guess the Spurt?

. i --.„„,

Q Откройте Webстраницу, например www.animabets.com/ activities/qballs/ balls.html, окно броузера которой включает сценарий JavaScript.

Comets: |0

- — —r~ -i»-«=5=s-~~

Щелкните на одной из кнопок.

•iCofTBet. you're righl! |

±1

Corrects: P

I j _ b«9bail \ J^ccti; I W«f<te j t«nms'j|. racqi -._-,,,.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПЕРАТОРОВ JAVASCRIPT

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

Что еще?

::..:••:

JavaScript - - наиболее популярный язык сценариев для клиентов Web, поскольку он поддерживается броузерами Netscape Navigator и Internet Explorer, однако существуют и другие языки сценариев для обеспечения интерактивных возможностей Web-страниц. Если установить значение атрибута language дескриптора <script> равным VBScript, то в качестве языка сценариев будет использоваться VBScript.

OoamMA ' 06ratwt>

'Домой

—.1.- .1 I

Покл " ИэСраимж

«iC http/AvvAV animabets сют/actiyities/q^balls/balls.html

~"~~3 x0*??* .:|^"*

Sport Balls Match with Quippcr Quail

Corrects: I Ь»Ь«Ы« |

Синтаксис VBScript подобен синтаксису языка Visual Basic, однако VBScript поддерживается только броузером Internet Explorer. Если вы знакомы с языком программирования Visual Basic, то вам может быть проще изучить VBScript, чем JavaScript. Однако при этом не стоит забывать, что VBScript работает только с броузером Microsoft Internet Explorer.

<SCRIPT language-] / 'prelo a images uar image uar image uar image uar image uar image* uar image uar image uar image b llsHo • 7;

f inc io nd ( { ( ( ( ( <

Ь«з»Ь|« | 5occ.tr | bilaio» j lenms j raca

'inito <

о - Hath. andHo andHo andHo andHo andHo • andHo -andHo -andHo -<•

$;;

p ем ем ем ем ем пем пем пем

ma e < ) ; ma e(); ma e(); ma e(); ma e(); ma e(); ma e(); ma e();

inagel.src i*age2.src Images. src image*. src iwgeS.src i»age6.src image?. src image 8. src

oor(t * Hath.random()) ; document .images src document .images src document .images src document .images src document .images src document .images src document .images src document .Images src

oasrball.jpg- ; basketball.jpg' ; Dillat-ds.jpg1 ; Football.jpg'; golf. J p g - ; racqurtball.jpg- ; soccer.jpg'; tpnnl5.jpg';

-'v'j

I Mi • jj

иj

—) golf .jpg-: asko ball. jpg ' ;

a»b 11. jpg-; occe .jpg1;

ilia ds.jpg* ; «nni .jpg-; acqii tball.jpg'; Football.jpg- ;

;v',:| о.-':

'' -^ '-..'..

Si -,-..

Г"

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

Q Чтобы отобразить исходный текст, выберите команду Вид^В виде HTML (View 1 * Source).

••_

I Прокрутите текст на экране, пока не обнаружите дескриптор <script>.

Обратите внимание, что атрибут language установлен равным javascript.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ВВОД ОПЕРАТОРОВ JAVASCRIPT В ПОЛЕ URL

ценарии JavaScript состоят из операторов, интерпретация которых приводит к выполнению требуемой функции. Например, оператор JavaScript d o c u m e n t . w r i t e ( " h e l l o " ) отображает слово hello в окне броузера. т Интерпретация и выполнение операторов JavaScript осуществляются броузером. Эти операторы могут располагаться в файле Web-страницы или непосредственно вводиться в поле URL броузера. Чтобы заставить броузер выполнить оператор JavaScript, введите ключевое слово j a v a s c r i p t :

в поле Адрес (Address) броузера, после чего введите оператор JavaScript и нажмите клавишу <Enter>. В конце оператора JavaScript необходимо поместить точку с запятой (;). В поле Адрес можно поместить несколько операторов JavaScript, разделив их точками с запятой. Например, если ввести оператор j a v a s c r i p t : d o c u m e n t . w r i t e ( " h e l l o " ) ; , после нажатия клавиши <Enter> броузер отобразит слово "hello".

ВВОД ОПЕРАТОРОВ JAVASCRIPT В ПОЛЕ URL

:.;•'£ Оствновнтъ

ЭЙНОВЧГЕ

Спмой

;

Пас*

Игфмт»

• . Почгъ

' П0«г.*

чэ

PcTatHOBHTt

OfeMW*

^ ; -а

Д»«й

hnfoCit^

| Откройте броузер.

В поле Адрес введите ключевое слово javascript:.

Hwc*

-л

HsHf«*woe

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

Г Что еще?

Обычно после ввода ключевого слова в поле Адрес броузер осуществляет поиск Web-страниц, соответствующих этому ключевому слову. Если необходимо, чтобы броузер нашел Web-страницы JavaScript, а не выполнил оператор JavaScript, просто опустите двоеточие после javascript. Если ввести в поле Адрес ключевое слово j a v a script : без двоеточия (:), броузер станет искать Web-страницы, соответствующие ключево-

му слову javascript. Символ двоеточия сообщает броузеру, что следующий за ним текст необходимо интерпретировать, как оператор JavaScript. Если вы забыли добавить ключевое слово j a v a s c r i p t : , броузер воспримет введенный оператор JavaScript как адрес Webстраницы. Он попытается отыскать по этому адресу Web-страницу, которой может не существовать.

за ! J (>!(!«• i>.!!.H! m-jHIHUH Н.ГЧ.Ч-иЛ

InfoCSCT

После ключевого слова j a v a s c r i p t : введите оператор document .write ("<]11>Губитёльная нерешительность</Ы>") ;.

Q Введите также оператор document .bgColor = "blue";. Е]| Нажмите клавишу <Enter>.

Оператор JavaScript выполняется в броузере.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ВКЛЮЧЕНИЕ ОПЕРАТОРОВ JAVASCRIPT В ДОКУМЕНТ HTML

ценарий JavaScript может быть добавлен в; Web-страницу между дескрипторами <script>. Операторы JavaScript, включенные между дескрипторами <script>, выполняются при загрузке Web-страницы в броузер. Дескрипторы <script> могут располагаться в любом месте между дескрипторами <head> или <body>. В файле одной Web-страницы может содержаться несколько наборов дескрипторов <script>.

Дескриптору <script> передаются два атрибута: type и language. Атрибут type может принимать одно из значений, соответствующих известным типам MIME, такое как text/ javascript. (MIME — Multipurpose Internet Mail Extensions — многоцелевые расширения электронной почты в Internet.

Представляет собой набор стандартов для передачи мультимедийной информации посредством электронной почты. - - Прим. ред.) Атрибут language — это еще один способ задания используемого языка сценариев. В случае JavaScript этот атрибут просто устанавливается равным javascript. Если оператор JavaScript отображает в окне броузера какой-либо текст, то размещение текста соответствует размещению дескрипторов <script> в файле Web-страницы. Например, если HTMLфайл содержит заголовок, за которым следует дескриптор <script>, предназначенный для вывода некоторого текста, сценарий JavaScript должен следовать непосредственно после заголовка HTML-файла.

ВКЛЮЧЕНИЕ ОПЕРАТОРОВ JAVASCRIPT В ДОКУМЕНТ HTML

;s^ipti->

Ц Создайте файл skeleton.html, имеющий следующую структуру: <html> <head> </head> <body> </body> </html>. -Я Между дескрипторами <body> поместите набор дескрипторов <script>. —И К дескриптору <script> добавьте атрибут language.

-0 Присвойте атрибуту language значение javascript. -И Сохраните файл под именем j s-skeleton.html. Замечание. Эта схема может использоваться для быстрого создания Web-страницы, содержащей JavaScript.

Между дескрипторами Сохраните файл под <script> поместите именем changebg . html. оператор JavaScript для Замечание. Операторы изменения цвета фона. JavaScript, размещенные —И В конце оператора между дескрипторами JavaScript добавьте <script>, выполняются точку с запятой (;). при загрузке файла.

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

Попробуй!

С помощью JavaScript можно персонифицировать Web-страницу для посетителей вашего Web-узла. Приведенный ниже фрагмент программы предназначен для открытия диалогового окна, в которое пользователи могут ввести свое имя. Затем это имя отображается в Web-странице с помощью еще одного оператора JavaScript. temp = window.prompt("Введите свое и м я " ) ; document.write("Добро пожаловать, ' + "на нашу Web-страницу. Надеемся, Вам здесь понравится.");

temp

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

3. dy>

rtD:un*-nt.t.qColoi

—И Для вывода на экран фразы добавьте еще один оператор JavaScript. 41 Оператор вывода может включать дескрипторы HTML.

2-1747

В конец оператора JavaScript добавьте точку с запятой (;). —УП Сохраните файл под именем output .html.

44 Откройте файл • Обратите внимание, output. html в броузере, что цвет фона окна изменился и в нем отобразился текст.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

УСТАНОВЛЕНИЕ СВЯЗИ С ВНЕШНИМ «ШИЛОМ JAA/ASCRIPT

дескриптором <script> можно использовать еще один атрибут src. Он может указывать на URL внешнего файла, содержащего сценарий JavaScript. Внешний файл может не включать дескрипторов <script> и содержать только операторы JavaScript. Он может также не содержать расширения html. Обычно внешний файл JavaScript имеет расширение j s. Внешний файл JavaScript может располагаться в любом месте сети Web, и на него можно сослаться

с помощью ключевого слова протокола h t t p : / / , за которым следует Web-адрес внешнего файла. Например, с помощью оператора <script src = " m y f i l e . j s " > можно получить доступ к внешнему файлу JavaScript с именем my f i l e , j s , расположенному в том же каталоге, что и HTML-файлу. В приведенном ниже примере используется файл o u t p u t . html, созданный в предыдущем разделе, "Включение операторов JavaScript в документ HTML", однако соответствующие шаги можно применить к любому файлу.

УСТАНОВЛЕНИЕ СВЯЗИ С ВНЕШНИМ ФАЙЛОМ JAVASCRIPT

Д Откройте файл output. html с помощью программы Блокнот (Notepad). —И Вырежьте содержимое дескрипторов <script> из файла.

И Сохраните файл под именем external. html.

СОЗДАНИЕ ВНЕШНЕГО ФАЙЛА СЦЕНАРИЯ Ц Откройте с помощью программы Блокнот новый файл. —Q Вставьте содержимое дескриптора <script>, вырезанное из файла output. html, в новый файл.

Сохраните файл под именем external. j s.

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

Г~ Что еще?

Синтаксис JavaScript зависит от регистра клавиатуры. Если переменная JavaScript введена прописными буквами, то при обращении к переменной в соответствующих местах также необходимо использовать прописные буквы. Так, например, hello, Hello и HELLO — это разные переменные. Если введенный оператор JavaScript правильно не распознается, проверьте, нет ли орфографических ошибок в ключевых словах. Операторы ч JavaScript можно

выполнять многократно, поместив их внутрь структуры, которая называется функцией. Функции рассматриваются в главе 5. Операторы JavaScript, заключенные между дескрипторами <head>, выполняются раньше остальных дескрипторов HTML. Например, если внутри дескрипторов <head> расположены дескрипторы <script>, содержащие оператор JavaScript, предназначенный для вывода некоторого текста, этот текст отобразится вверху Web-страницы.

:йзйрапнве ;

. э

Ц Откройте с помощью программы Блокнот внешний файл external.html. —Я Добавьте к дескриптору <script> атрибут src.

£пр«ив

d '"'•••и' Г" а

Ойчивип

Да-ой

Пои».

Hsdp«*ioe

.*дом*я

Пг^агь

а"

Пр«лв

"^1 ••'••''"I '

script ui.aM3.."J...scrlpt-| srtf -e.t.rn.l . j, /scrl|t> "—T—'

УСТАНОВЛЕНИЕ СВЯЗИ С ВНЕШНИМ ФАЙЛОМ

С^мие

—И Установите значение атрибута src равным external . j s . Сохраните файл под именем external . html, записав его поверх исходного файла external . html.

—И Откройте файл external.html с помощью броузера.

Операторы JavaScript по-прежнему работают (теперь, как внешний файл).

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРЕДСТАВЛЕНИЕ СОДЕРЖИМОГО СЦЕНАРИЕВ ДЛЯ БРОУЗЕРОВ, НЕ ПОДДЕРЖИВАЮЩИХ JAVASCRIPT

ользователи могут отключить поддержку JavaScript. Такая возможность предоставляется им в рамках управления конфигурацией броузера. Если пользователь отключит поддержку JavaScript, его броузер не будет отображать сценариев JavaScript, помещенных в Webстраницу. Броузером с отключенной поддержкой JavaScript можно управлять с помощью дескрипторов <noscript>. Если сценарий JavaScript не может быть обработан броузером, то в его окне отображается содержимое, заключенное внутри дескрипторов <noscript>.

Это содержимое может помочь пользователю, который отключил поддержку броузером JavaScript, понять, что отобразится в окне броузера при включенной поддержке JavaScript. Например, если в файле Web-страницы содержится фраза "Эта страница использует JavaScript", заключенная внутри дескрипторов <noscript>, она будет отображена (если JavaScript отключен). В этом примере используется рассмотренный ранее файл output.html.

ПРЕДСТАВЛЕНИЕ СОДЕРЖИМОГО СЦЕНАРИЕВ ДЛЯ БРОУЗЕРОВ, НЕ ПОДДЕРЖИВАЮЩИХ JAVASCRIPT

ДОБАВЛЕНИЕ ДЕСКРИП- —Н Между ТОРОВ <NOSCRIPT> дескрипторами В WEB-СТРАНИЦУ <noscript> разместите поясняющий текст. Ц Откройте файл output.html. —И Сохраните файл под именем -Q После дескрипторов noscript.html. <script> добавьте набор дескрипторов <noscript>.

ОТКЛЮЧЕНИЕ Выберите команду ПОДДЕРЖКИ JAVASCRIPT Edit^Preferences, чтобы В NETSCAPE NAVIGATOR открыть диалоговое окно Preferences. Ц Откройте программу Netscape Navigator. —И Из размещенного слева списка выберите Замечание. В броузере категорию Advanced. Internet Explorer нет специальных средств отключения JavaScript.

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

с~

Что еще?

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

111

включены или отключены с помощью параметров броузера. С помощью диалогового окна Preferences броузера Netscape Navigator можно включить поддержку языка Java, JavaScript, страниц стилей и cookies. С помощью диалогового окна Свойства обозревателя (Options) программы Internet Explorer можно отключить поддержку Java, элементов ActiveX, сценариев и файлов cookies.

"" I

File

'-: Лрсевагсе

^Щщг.

£drt

I ^

ч* twww V*9ni«*iM«fiKaft*«(*repwi>cl

'yiew

Qorrm-tuntcator

НЦ>

j*-

«i

a»

.,(: Bookma*3 .Д- tecafcft jfi-t v.ili/.a/aic^ pJ.TJosciipihtHl

J-O.W,

Г , „ „ * * , « « , „ „

4N«£T

i „^(пКжУМпяве

"Piws

ii га

jj ^ ^>*'ifl*»*rf '•*. С"ь«-*гз^

У Fn<!S**» ^J Chennt*

Ivf т. M*l i Newsgroups >= RoamngAccew

;,]

Р ЕмМв «fe sheets

. ajsFTPpw&roid

Г W«r.nebetweacc«*4ta-s

•|/

i-fta —

1 « j. •. S -г- i . 1

Q Отключите опцию Enable JavaScript (В

В Щелкните на кнопке ОК.

aji^'4C^-"

" " " " Docun*« Don»

•'l-^fe '^. y£> Q

ПРОСМОТР WEB-СТРАНИЦЫ | 1 В окне С ПОМОЩЬЮ БРОУЗЕРА броузера С ОТКЛЮЧЕННЫМ JAVASCRIPT отображается ТРКГ.Т,

'-И Откройте файл noscript .html в Netscape Navigator.

заключенный внутри дескрипторов <noscript>.

^- : -

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗБАВЛЕНИЕ КОММЕНТАРИЕВ В JAVASCRIPT

й'нтаксис JavaScript может быть сложным для новичков. Один из способов документирования содержания каждого из разделов исходного текста заключается во включении в него блоков комментариев. Эти комментарии игнорируются броузером и могут быть просмотрены только в исходном файле. Однострочные комментарии можно обозначить, предварив их текст двумя косыми чертами (//). Многострочные комментарии начинаются с косой черты (слэша) и звездочки (/*), а завершаются обратной комбинацией этих символов (* /). Наборы комментариев не могут быть вложены друг в друга. Все операторы внутри символов начала и конца комментариев игнорируются.

Комментарии могут встретиться в любом месте набора дескрипторов <script>. Их можно использовать не только для документирования исходной программы, но и для отладки JavaScript. Многострочные комментарии можно применять для быстрого отключения разделов текста программы без их удаления. Эта возможность особенно полезна, когда необходимо выполнить отладку разделов, которые работают неверно. В приведенном ниже примере используется файл n o s c r i p t . h t m l , созданный в разделе "Представление содержимого сценариев для броузеров, не поддерживающих JavaScript", однако соответствующе шаги можно применить к любому файлу.

ДОБАВЛЕНИЕ КОММЕНТАРИЕВ В JAVASCRIPT

<««>

</head> <body> <scrlpt 1 nquage-"jauasci-ipt">

Hint текст.-/ 1 doc ииеп .ъг1.1е("<||1>Гувительная нереимтел! юсть</м>">; </sc lpt> <nos ript Зт Heb-страница использует J a u d S c l - t p t . Ч' 1BU увидеть страницу полностью. </no cript> Cfbaay </htnl

П С помощью программы Блокнот откройте файл

noscript .html.

-И Пепел ггепвым

оператором JavaScript добавьте однострочный комментарий.

—И Перед вторым оператором JavaScript добавьте многострочный комментарий . — Е! Сохпанитк Лайл пол именем comments . html.

Откройте файл comment s.html в броузере.

Обратите внимание, что комментарии, добавленные в файл, не отображаются броузером.

ГЛАВА 1. ВВЕДЕНИЕ В JAVASCRIPT

Попробуй!

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

персонификации

разработан КЛМ 16 мая 2000 года Описание. Этот сценарий предназначен для ввода имени пользователя с помощью диалогового окна приглашения, сохранения имени в переменной и его отображения в окне броузера как части текста приветствия. */

°T//Илеяумее 11

предложение JavaScript э. do:un*nt.bgcolor - "blue"; ; •fttiymqet прецлйжеине JavaScript i

синий мет Veb-страницы. •т • окна браузера мокры

<nosoript> З т , i Web-страница использует JavaScript. Чтоаы уиияен. страницу пол) •кмчен ли JavaScript. </no>crl)>t> </doHii > </htPl>

Сохраните файл Q Откройте с помощью программы Блокнот файл под именем coiranents2 . html. comments . html. Поместите закрывающий блок комментария после второго оператора JavaScript.

-И Откройте файл comments2.html в броузере.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОНЯТИЕ ТИПА ПЕРЕМЕННОЙ

онятие переменной является базовым для Языка JavaScript, поэтому, приступая к его освоению, необходимо понять принципы работы с переменными. Переменные представляют собой нечто наподобие временных контейнеров для хранения значений. При изменении значений переменные обновляются и в них хранятся новые значения. В переменных могут также храниться неизменяемые значения — константы. (Заметим, что абсолютные значения, не ассоциируемые с какой-либо переменной, называются литералами. Прим. ред.) Можно, к примеру, создать переменную с именем hoursPerDay (в переводе с английского языка оно означает "количество часов в сутках". — Прим. ред.) и присвоить ей значение 24. Теперь в тексте программы можно ссылаться на "количество часов в сутках", используя переменную hoursPerDay. Можно, конечно, непосредственно применять в тексте программы литералы (в нашем примере — 24), однако при удачном выборе имен переменных выражения языка, как правило, несут дополнительную смысловую нагрузку. Как следствие использование переменных для хранения констант упрощает отладку программы и работу с ней. Имена переменных должны удовлетворять ряду требований. Например, 24 — не очень удачное имя для переменной, поскольку его легко можно принять за литерал. Имена переменных могут состоять из строчных и прописных букв, цифр и символов подчеркивания (_). Знаки препинания или специальные символы в именах переменных использоваться не могут. Имена переменных не могут начинаться с цифры и содержать пробелы. Имена переменных в JavaScript идентифицируются с учетом регистра клавиатуры. Так что имена переменных Hello, hello и HeLLo — это различные имена. Зачастую весьма плодотворной оказывается идея использования имен переменных, которые описывают хранимые в них дан-

ные. Если при именовании переменных придерживаться какого-либо единого правила или принципа, это облегчит последующий анализ и понимание исходного текста. Одним из способов идентификации постоянных значений (констант) может быть, например, использование в их именах только прописных букв. В JavaScript существует несколько различных типов переменных, которые определяются типом хранимых в них данных. Переменные различных типов могут хранить в качестве значений разнообразную числовую и текстовую информацию. В частности, в JavaScript допустимы переменные, представляющие значения следующих типов. • Целые числа • Числа с плавающей точкой • Строки символов • Булевы значения Полезным приемом, помогающим при работе с исходным текстом программы, является использование в начале имени переменной буквы, указывающей на тип переменной. Например, целочисленная переменная может называться iVar, переменная с плавающей точкой — fVar, строковая переменная — sVar, а булева переменная — bVar. Подобный способ именования переменных не является обязательным, а приводится здесь только в качестве примера.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

ТИПЫ ПЕРЕМЕННЫХ

ЦЕЛОЧИСЛЕННЫЕ ПЕРЕМЕННЫЕ В целочисленных переменных хранятся элементарные натуральные числа, как положительные, так и отрицательные. С целочисленными значениями можно работать, используя арифметические операторы, такие как сложение, вычитание, умножение и деление. Примерами целочисленных значений являются 2, 345 и -34.

ПЕРЕМЕННЫЕ С ПЛАВАЮЩЕЙ ТОЧКОЙ В численных переменных с плавающей точкой могут храниться дробные числа, в представлении которых используется десятичная точка. Эти переменные также можно использовать в обычных арифметических операторах. Примерами значений с плавающей точкой являются 2.5, -34.56 и 3.121.

СТРОКОВЫЕ ПЕРЕМЕННЫЕ Строковые переменные представляют слова или предложения. В переменных этого типа могут храниться как отдельные символы, так и целые абзацы текста. Строковые значения обычно заключаются в кавычки. Вот примеры строковых з н а ч е н и й : " h e l l o " , " a b c " и " Э т о тест".

БУЛЕВЫ ПЕРЕМЕННЫЕ Булевы переменные представляют собой уникальный тип переменных, в которых могут храниться только два значения: true (истина) и false (ложь). Их можно использовать для построения условных операторов, смысл которых заключается в проверке состояния (истинно или ложно) некоторого предложения языка. Для представления значения false также используется число 0, а для представления значения true — 1.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ avaScript — слаботипизированный язык. Это ознрчает, что переменные можно использовать без явного объявления их типа и комбинация различных типов переменных не приводит к ошибке. Слабая типизированность языка означает также, что при создании новой переменной нет необходимости задавать тип переменной. Достаточно ввести имя переменной, а ее тип будет установлен автоматически в зависимости от типа значения, присвоенного этой переменной.

Кроме того, в JavaScript существует возможность задавать имена конкретных переменных с помощью ключевого слова var. Это ключевое слово, помещенное перед именем переменной, как раз и идентифицирует ее в качестве переменной. Можно объявить несколько переменных одновременно, разделив их запятыми. Например, оператор var intl, int2, strl, str2 объявляет четыре переменные. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

• ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ li ' 1||ИП1П11Ж11Г1ИИМ11МЯИЖ7Ш1!11УЛ"'Д'М1ГНИТ1НДШИЯ^ИИ1ЯН *Л|<

ПРЖК*

Фа^л ЯрЗ«* <htMl> <he*d> </M«D <ЬоЬу>

ПЗ^^ПМ*М

<HtRl>

CIIMO </hc*d> <bna v > -|<1>1>Вопроенмк</п1>| < true Ilnggnr— lluascrlpf •>

лояж цлраам • .

<1)1>ВОПрОСНИК</||1>

answer^ answera, answerl;!

< scriptV

с/шу>

< ».dy> < htfil)

</htnl>

•.

> ;

;;., .

±3

Д Откройте с помощью ~И В конце строки программы Блокнот файл программы поставьте j s-skeleton.html. точку с запятой ( ; ). страницы в дескриптор <body>. -И В дескриптор <script> добавьте ключевое слово var, а после него укажите имя переменной.

под именем var.html.

[j Введите несколько дополнительных имен зеременных, разделив ]лх запятыми.

| | Сохраните файл под и менем var2 . html.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

ПРИСВАИВАНИЕ ЗНАЧЕНИИ ПЕРЕМЕННЫМ

осле того как переменная объявлена в тексте сценария, ей можно присваивать значения d помощью знака равенства (=). Значение всегда 'располагается справа от знака равенства, а имя переменной — слева. Например, оператор tempi = 56; помещает значение 56 в переменную с именем tempi. Теперь на это значение можно ссылаться, используя имя переменной tempi. Чтобы присвоить переменной значение строкового литерала, его заключают в кавычки (" ")• Любая строка символов без кавычек в тексте сценария рассматривается как имя переменной.

Например, оператор strl = "Привет всем"; помещает строку "Привет всем" в переменную strl. В приведенном ниже примере используются файлы var.html и v a r 2 . h t m l , созданные в разделе "Объявление переменных", однако описанные действия применимы к любому файлу.

ПРИСВАИВАНИЕ ЗНАЧЕНИЙ ПЕРЕМЕННЫМ I ИНН^^ИИШИ^ИИННИИ^ИИ-и^Д^

"йй™1Чфа№л Пенс* Ор*ьчл <l)tnl> <head> </head' <dodji> <h >DonpocHMK</til> <s r.pt language'"jauascripf>

«•аил

Правке

i\f»Kt.

Справка

<h*ad> </tiead> <body> <П1>Вопрасник</Г|1> <script language—Jauascr :

dns«er2 - ?.S; an иегЗ - "Milky Чау";

</~"c-lpt>

</bo y> </ht 1>

</SC

)

ПРИСВАИВАНИЕ ЗНАЧЕНИЯ ПЕРЕМЕННОЙ П ,л

11 Откроите файл \7ят hfml г. TTmvmmTito

программы Блокнот. —И В строке, следующей за объявлением переменной, введите имя переменной и присвойте ей значение.

] Сохраните файл од именем ssign.html.

IptS

</Ъч4у </ht«l

ПРИСВАИВАНИЕ ЗНАЧЕНИЙ НЕСКОЛЬКИМ ПЕРЕМЕННЫМ • Птктшмтр fkt1ЙТ1

var2 .html с помощью программы Блокнот. И В строке, следующей за объявлением переменной, присвойте значение каждой из переменных.

| Сохраните файл од именем ssign.2 .html.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ 1 1

• -.

ИСПОЛЬЗОВАНИЕ ЦЕЛОЧИСЛЕННЫХ ПЕРЕМЕННЫХ uibie числа представляют числовые значения без десятичной точки. О них обычно 'оворят как о натуральных числах или натурального ряда. Эти числа могут быть как положительными, так и отрицательными. Перед отрицательными целыми числами ставится знак "минус" (-). Целочисленные значения могут быть десятичными, шестнадцатеричными или восьмеричными. Эти типы значений отличаются основанием системы счисления. Целые десятичные числа имеют основание 10. Основанием целых шестнадцатеричных служит число 16, причем для их представления используются цифры 0-9 и буквы a-f.

Целые шестнадцатеричные числа записываются с комбинацией символов Ох (нуль-х) перед чис^ лом. Целые восьмеричные числа имеют основание 8, а их представление включает лидирующий нуль (0). Например, 24 — десятичное число, 024 — восьмеричное число, а 0x24 — шестнадцатеричное число. В приведенном ниже примере используется файл js-skelet.on.html, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ЦЕЛОЧИСЛЕННЫХ ПЕРЕМЕННЫХ giim.i.M.1. "i J.IILIJ i .itj.iuuu .и i J.U..LI.III.IUUI.. . £«йп

Qpwu

Вив

Йэбрвпчае

* • . . - » , <э

'j"V,V.

..'•:<•;>;.;•.•:,•>,

Cspw*

Оста-овнть

£грюкл

iii

ОАквнгь

Д«*ой

-: ;

E «JL «£.' n^L nj» • " _-j ji'ffepewja1; 'Ссылл *-

ofrteget html | _

liJ

£]

CtalHun • 82 ;

loctiaent .urlt

т3 Д Откройте файл j s-skeleton.html с помощью программы Блокнот. —Я В дескрипторе <script> объявите три переменные с помощью ключевого слова var. —И Присвойте значение каждой переменной.

~H Для отображения значения каждой переменной воспользуйтесь оператором document.write. —И Сохраните файл под именем integer.html.

^!Ш^

ШШШ

integer.html в броузере.

отображаются значения переменных. Обратите внимание, как каждое из чисел отображается в виде его десятичного эквивалента.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

ИСПОЛЬЗОВАНИЕ ЧИСЕЛ С ПЛАВАЮЩЕЙ ТОЧКОЙ

исла с плавающей точкой представляют соб£>й дробные числа, которые включают дес^тичную точку. Они могут быть как положительными, так и отрицательными. Очень большие и очень малые (близкие к нулю) числа могут быть выражены в так называемой научной записи. Научная запись, называемая еще экспоненциальным представлением, включает символ экспоненты Е (или е), за которым следует число позиций, на которые сдвигается десятичная точв:а. Дробная часть числа называется мантиссой, а число после символа Е — порядком. Положительное значение порядка сдвигает десятичную точку вправо, а отрицательное — влево. Например, запись 5.14Е6 отображает число 5140000, а 6.023Е-4 представляет число 0.0006023.

В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

г~

Что еще?

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

ИСПОЛЬЗОВАНИЕ ЧИСЕЛ С ПЛАВАЮЩЕЙ ТОЧКОЙ i £айл

flpae-а

£иа

Цгйрвнгчв

Сгоенс

£прав«

Поиск

и»- • -э

tbdp*«ioe

• &tp*eti!" Е У5В^Лв>«еры\Г|иеа 2 • Испшъэсезчие перемсн-ы- и масс>TO1MI.,»nop».Nmll

< crlit lanauaae—U»»5crlat">

>»^«л

Пгчиь

•а

з . "

Пр««<4

-I ^Пад»„

Сс«Л<и» 3

Это большое число)] 234 56789 1+ 21

898веОййвВ|

И •

Это очень мало* число) 5. 02 inent.»rite("3

л,

•1 Откройте файл j s-s3keleton.html с помощью программы Блокнот.

—Q Для отображения значения каждой переменной воспользуйтесь оператором document.write.

—И El дескрипторе <script> объя вите четыре переменные с помощью ключевого слова —И Сохраните файл под именем var. floating—И Присвойте каждой point .html. переменной значение числа с плавающей точкой. Два числа должны быть очень большими, а два — очень малыми.

if]fmm

—И Откройте файл

floating-point.html в броузере.

i i :4»«"^~r^

1 1 В окне броузера

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ БУЛЕВЫХ ПЕРЕМЕННЫХ ' 3JK!

уже упоминалось, булевы переменные йринимают два значения true или flalse. Кроме того, следует напомнить, что в качестве булевых значений можно использовать целые числа 0 и 1, при этом 0 представляет значение f a l s e , а 1 — true. Поскольку булевы значения принимают всего два значения, true (истина) и f a l s e (ложь), с их помощью удобно строить условные операторы. Условные операторы используются для управления ходом выполнения программы.

операторов используется булева переменная о именем finished. Можно также использовать булеву переменную следующим образом: if (finished). В приведенном ниже примере используется файл var2 .html, который был создан в разделе "Объявление переменных", однако описанные действия применимы к любому файлу.

Операторы управления ходом программы вида i f - e l s e вводятся в главе 4. Их "рабочими лошадками" как раз и являются булевы переменные. Например, в операторе if (finished == " t r u e " ) для передачи управления одному из двух наборов

ИСПОЛЬЗОВАНИЕ БУЛЕВЫХ ПЕРЕМЕННЫХ

06ният>

Ждон»п

Печет,

dy> Г)1>Вопросник</Г>1>

•Ipt l a n g u a g e = " j

Вопросник Гепард развивает скорость 10' Обезьяны едят т Страус бегает быстрее 4eJ

</script> /bofl;i> /titnl>

Ц Открой те файл var2 .html с помощью программы блокнот. —И В дескрипторе <script> присвойте каждой переменной булево значение.

—И Для отображения значения камсдой переменной воспользуйтесь оператором document.write. —И Сохраните файл под именем boolean.html.

—И Откройте файл boolean.html • в броузере.

В окне броузера отображаются значения переменных.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

ИСПОЛЬЗОВАНИЕ СТРОКОВЫХ ПЕРЕМЕННЫХ

троковые значения состоят из отдельных символов или последовательности символов, заключенных в кавычки.

Строковое значение можно заключать в одинарные ( ' ) или двойные ( " ) кавычки, однако открывающая и закрывающая кавычки должны быть при этом одного типа.

Если в строковом значении в качестве одного из символов требуется использовать кавычки, то перед символом кавычки следует поместить обратный слэш (\). Это приводит к тому, что назначение кавычки отменяется и она выводится, как обычный символ. Точно так можно использовать символ обратного слэша для вывода самого знака обратного слэша в строку. Например, если в переменную s t r l помещается строка"Привет, меня зовут В л а д . \ " , то опе-

ратор присваивания значения переменной будет выглядеть следующим образом: s t r l = ^"Привет, меня зовут Влад . \ " " . Как видно из примера, строковое значение заключается в кавычки, при этом кавычки, составляющие часть строкового значения, обозначаются с помощью обратного слэша. Когда строковое значение отображается с помощью метода document .write ( } , текст отображается броузером и обрабатывается процессором отображения HTML. Это означает, что дескрипторы HTML можно включить в строковые значения; при этом они будут интерпретированы и использованы для отображения текста в окне броузера. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ СТРОКОВЫХ ПЕРЕМЕННЫХ

; J-:;.1:.: •; .-Чх.

/tiead>

;'.

- Г*"." :Й . ,

Оет*«йигв

Обиамт,

а. ; i

йв^ой

fiw

; i^ipeejiC' E VSByifintCt'1.' fMti2-.1rrio,»>Joea-nenep!.fl.H-4M-HMaici«^ NiH-ngHiTJI

<script

ftT=«pe««

Ссыяли " _J

По«вд,ыпо™« 8 о6»д7

I - "Почему вы паек'

;•;;

•V. -"'

^,_...__ —

!g>s

Ц Откройте файл j s-skeleton . html с помощью программы Блокнот.

на для отображения

значения каждой переменной -Я В дескрипторе <script> воспользуйтесь объявите две переменные оператором с помощью ключевого слова var. document.write. -И Присвойте каждой переменной строковое значение.

—Q Сохраните файл под именем string.html.

-И Откройте файл string.html в броузере,

: £J Ч|>' SWrtnTfp

1 1 В окне броузера отображаются значения строкового типа.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ ТИПА ПЕРЕМЕННОЙ

ыражения JavaScript зачастую включают Комбинации переменных. Например, если в! текст программы включить некоторое уравнение, то для получения результата вычислений можно использовать комбинацию двух переменных. Иногда попытка использования в операторе JavaScript двух переменных, относящихся к различным типам, может привести к проблемам. В подобных случаях может возникнуть необходимость в определении типа переменной. JavaScript включает специальный оператор, позволяющий проверить тип переменной — typeof. Если поместить ключевое слово typeof перед именем переменной, оператор возвратит тип переменной как строковое значение.

Оператор typeof возвращает в качестве значения строку number для целочисленных переменных и чисел с плавающей точкой, s t r i n g — для строковых переменных и boolean — для булевых переменных. Если тип переменной нельзя определить, возвращается значение undefined. Например, если переменной intl присвоено значение 2 4 , оператор typeof int I; возвращает в качестве значения строку number. В приведенном ниже примере используются файлы assign2 .html и var2 .html, которые были созданы в разделах "Присваивание значений переменным" и "Объявление переменных", однако описанные действия применимы к любому файлу.

ОПРЕДЕЛЕНИЕ ТИПА ПЕРЕМЕННОЙ

LUf**,b"*-i Советь <П1>Вопрпсник</1т1> (script l*ngua9*--]a

Вопросник •lip*01" lypeof ty?et»f

Ц Откройте файл assign.2 .html с помощью программы Блокнот. —И Для отображения значения каждой переменной воспользуйтесь оператором document.write.

В каждом из операторов document .write перед именем переменной поместите ключевое слово typeof. -И Сохраните файл под именем typeof .html.

-И Откройте файл В окне броузера typeof . html в броузере. отображаются типы для каждой переменной.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

Г~ Что еще?

Оператор typeof может использоваться также для определения типа других элементов языка: объектов, форм и функций. Каждая форма, функция и объект имеет имя. Если применить оператор typeof к этим именам, то он возвратит в качестве значения тип элемента. Если в качестве результата оператор typeof возвращает значение undefined,значит, либо переменной с таким именем вообще не существует, либо она еще не определена. В первом случае имеет место ошибка в написании имени переменной, она не распознается, в ре-

зультате чего возвращается значение типа undefined. Второй случай соответствует ситуации, когда оператор typeof применяется к имени переменной до того, как она получила значение. Иначе говоря, если ключевое слово typeof появилось в сценарии до того, как переменная или функция встретились в каком-либо выражении (помимо, естественно, оператора объявления var, который, как мы помним, тип переменной не определяет), то оператор typeof возвратит в качестве значения undefined.

Остановить

<body> <h1>B лросник</п1>

Обновить

й>*й

По^-т

1'айсдн-«*

,ч=, 2 Л:1В<ьз«!ЭН*е пере^™-ЬВ и ма-о»4'1Лка1; htrJ

*№иад

Печать

_-J

•

Прл

^-Пщитяж

Вопросник answer 2 *"<br>"); aoc nent .witelanstwra * " о т н о с и т с я к типу " * typeof ansm-гЭ *"<br>");

^/script? </body> </ht»l>

it Откройте файл

var2 .html с помощью программы Блокнот. -И Для отображения типа каждой переменной, которой не было присвоено значение, воспользуйтесь оператором document.write.

3-1747

1 Сохраните файл

под именем typeof2.html.

-И Откройте файл typeof2.html в броузере.

В окне броузера тип каждой из переменных, не получивших значения, отображается как неопределенный (undefined).

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРЕОБРАЗОВАНИЕ СТРОКОВЫХ ЗНАЧЕНИЙ В ЧИСЛЕННЫЕ режде чем приступить к выполнению каких| либо арифметических операций над числами, не лишне убедиться в том, что вы имеете дело|с переменными численного типа, а не строками. Если во время присваивания значения переменной число заключается в кавычки, оно рассматривается как строковое, а не численное значение. Если теперь попытаться сложить данное число с другим числом, могут возникнуть проблемы. На этот случай в JavaScript имеется пара функций, которые можно использовать, чтобы выделить из начала строки "численную" составляющую и преобразовать ее в переменную численного типа.

Строка, начальная подстрока которой образует число, может быть преобразована в переменную численного типа с помощью функции parseInt ( } для целых чисел и функции parseFloat ( ) — для чисел с плавающей точкой. Для этого имя переменной, содержащей строку, заключается в скобки. Например, для преобразования строки " 2 5 6 " , которая хранится в переменной temp, в число можно воспользоваться оператором вызова функции p a r s e l n t ( t e m p ) В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПРЕОБРАЗОВАНИЕ СТРОКОВЫХ ЗНАЧЕНИИ В ЧИСЛЕННЫЕ

<head> </hejd> <body> <script 1 nqiuqe-" j a u a s c r i p f "> 1

uT l"t

|I|l,re""tM"i'E-J

</Dodv> </hti»l>

Ц Откройте файл j s-skeleton . html с помощью программы Блокнот.

—И Воспользуйтесь функцией parselnt ( для преобразования строкового значения в численное.

qi м

—0 Откройте файл parseint.html в броузере.

• В окне броузера отображается тип каждой из переменных.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

Что еще?

Если строка, которую вы пытаетесь преобразовать, начинается не с цифровых символов, функция parselnt () возвращает значение NaN, которое означает "not a number" ("не число"). JavaScript включает простой метод, позволяющий определить, является ли переменная численной: функция isNaN() возвращает значение true, если переменная "не число", и f a l s e — в противном случае.

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

ф^ц — 2f5 ! <fiead </hea > <body 1

6 23Е-23 откосится к типу! stnng 6 23е-23 относится к типу|пшп

mlti-.b^LitUrl);! • topeoF Float! . "<llr>"> ; |

</bo4JI

Ц Откройте файл js-skeleton .html с помощью программы Блокнст.

—И Воспользуйтесь функцией parseFloat ( ) для преобразования строкового значения в численное.

-Н В дескриптор <script> добавьте две —Q Для отображения новые переменные, значения и типа одной :лз которых каждой переменной присвойте строковое воспользуйтесь значение, начинающееся оператором с числа в формате document.write. с плавающей точкой. -И Сохраните файл под именем parsefloat.html.

Откройте файл parsefloat.html в броузере.

• В окне броузера отобраясается тип каждой из переменных.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРЕОБРАЗОВАНИЕ ЧИСЛЕННЫХ ЗНАЧЕНИЙ В СТРОКОВЫЕ

гЬтве 9 рассматривается целый набор методЬв, предназначенных для работы со строками, в частности для форматирования строк и работы с подстроками. Если их применить к переменной, содержащей не строку, а число, это приведет к ошибке. Однако, если преобразовать переменную, содержащую число, в строку, эти методы сработают. Численные значения можно легко преобразовать в строковые, поместив перед записью числа (в виде переменной или литерала) кавычки или пробел. Например, если переменная с именем tempi содержит значение 36, оператор " " + tempi; автоматически преобразует tempi в строковый тип.

Еще один способ преобразования числа в строку состоит в использовании метода toString ( ) . Чтобы воспользоваться этим методом, нужно просто добавить имя метода в конец имени переменной через точку. Например, для преобразования переменной с именем temp2, содержащей значение 36, в строку, можно воспользоваться оператором temp2.toString();. В приведенном ниже примере используется файл j s ~ s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПРЕОБРАЗОВАНИЕ ЧИСЛЕННЫХ ЗНАЧЕНИИ В СТРОКОВЫЕ «Лйа

^Цнвф-

Пек*

&*»wa

Ост»**."»

Сй..и«ть

Ламой

<sttiD С_идшаое=^щ« cr i pt " > -

ffiMiPiJ,:!-.

< sc IpU «полу </htiU

-0 Для отображения значения и типа каждой переменной воспользуйтесь оператором Э В дескриптор <script> document .write. цобавьте две новые

Ц Откройте файл j s-skeleton . html : помощью программы Блокнот.

которых присвойте численное значение. —И Преобразуйте тип второй переменной из численного в строковый, заключив ее в кавычки "

под именем tostring.html.

-П Откройте файл tostring.html в броузере.

В окне броузера отображается тип каждой из переменных.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

Г Что еще?

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

p a r s e l n t O и parseFloat ( ) часть строковой информации теряется. Преобразование числа в строку путем ввода кавычек перед именем преобразуемой переменной — прием, конечно, быстрый, но более корректный способ преобразования заключается в использовании метода toString ( ) . Он позволяет, вопервых, четко понять, какую операцию вы выполняете, и, во-вторых, содействует приобретению навыков программирования.

!tiead

:/he* : ..i:ilM_

I docuntnt.witp

Ц Откройте файл j s-skeleton.html с помощью программы Блокнот. —И В дескриптор <script> добавьте две новые переменные, первой из которых присвойте численное значение. -И Преобразуйте тип второй переменной из численного в строковый с помощью метода toStringl).

~И Для отображения значения и типа каждой переменной воспользуйтесь оператором document.write. —И Сохраните файл под именем tostring2.html.

—Q Откройте файл tostring2.html в броузере.

• В окне броузера отображается тип каждой из переменных.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБЪЯВЛЕНИЕ МАССИВОВ

есколько переменных могут быть сгруппированы в виде нумерованного списка, называемого массивом. Ко всем элементам массива!м6жно обращаться по одному и тому же имени, используя различные значения индекса. Порядковый номер или индекс элемента массива указывается после имени массива в квадратных скобках ([ ]). Массив можно создать путем присваивания переменной значения new Array ( ) , при этом количество элементов массива указывается в скобках.

за которым следует порядковый номер элемента в квадратных скобках. Значения индексов массива всегда начинаются с нуля (0). Например, оператор array I = new Array ( 1 0 ) создает массив, который может содержать десять значений. В этом случае первый элемент массива обозначается как arrayl [ 0 ] , а последний — как arrayl [ 9 ] . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

После создания массива можно обращаться к его отдельным элементам с помощью имени массива, ОБЪЯВЛЕНИЕ МАССИВОВ «Райл Mpfwa <htnl> I

Помж, •••Спрмка

-1

<head> </tiead> (body} <script

lanquaQp-1Jiauasefinf>

£«; °j - :;„:;"„« array

порыва I

3] - "благородного ";

</body> </htnl>

Ц Откройте файл j s- skeleton. html с помощью программы Блокнот.

-И Присвойте каждом из элементов массива строковое значение. -И Для отображения

—О Откройте файл array.html в броузере.

В окне броузера отображается строка, составленная из всех отдельных элементов массива.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

Что еще?

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

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

Н*5м

• • •••••'..

Встамйв*

Домой

Лоне*

а-

««»**«.' миссией ял M.^

script language-"j. {Простые числа 1 3 5 7 1 ] ) -

Ц Откройте файл js-skeleton.html с помощью программы Блокнот. -Я В дескриптор <script> добавьте новую переменную и присвойте ей ссылку на массив new Array ( ) , указав количество элементов массива в скобках.

—Н Присвойте каждому элементу массива целочисленное значение. —Q Для отображения значения каждого элемента массива воспользуйтесь оператором document.write. —И Сохраните файл под именем array2.html.

—И Откройте файл В окне броузера array2 .html в броузере. отображаются значения, содержащиеся в каждом из элементов массива.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ КОЛИЧЕСТВА ЭЛЕМЕНТОВ В МАССИВЕ

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

Объект array включает свойство length (длина), которое можно использовать, чтобы получить значение текущего количества элементов в массиве. Свойство length — целое число, показывающее длину или размер соответствующего свойства объекта. Для его создания необходимо добавить имя свойства length в конец имени массива через точку. Например, если объявить массив с именем arrayl, значение свойства можно получить с помощью оператора a r r a y l . length.. В приведенном ниже примере используются файлы a r r a y . h t m l и j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОПРЕДЕЛЕНИЕ КОЛИЧЕСТВА ЭЛЕМЕНТОВ В МАССИВЕ £^л

Qpeene

|ш

Избранное

€дй»>£

~О

£п[«ка

; Нвэ«; *';:"-" •..•"•+ - а -и 4 •.•.••.•, " Оя»ив'«" Q&wixrv Домо* :

И jHCIt

И^йоапнзв

Xjf*ai

"йас*с}»; Е иЗВ\Поииары\Гпам ; - Hr.rram,v**« пвремя-негя и массив 3JM,-na»Khirn,|

Пгчжь _3J

Пцзвкл

^^^Овкш .

Си-лч'"

• Я с™ .™«ь.„» сВМт,=„™«. 6,„о„„„о„ порь, Этот И.ССИ, содержит ', «теистов. 1

J £j f стгг»о

-И Для отображения Ц Откройте файл array. html с помощью длины массива добавьте программы Блокнот. новый оператор document.write. —Q Используя символ обрыва строки, добавьте -Q Сохраните файл под именем length.html. оператор + "<br/>" document.write.

! £| WMI BOMtrtxirap

-П Откройте файл 1 1 В окне броузера length.html в броузере, отображается количество элементов в массиве.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

Что еще?

.¥ew iipeu ChttHl

Если некоторые элементы массива не определены, результат, возвращаемый свойством length, зависит от того, задан ли размер массива. Если размер массива определен, то свойство length всегда его возвращает. Он соответствует количеству "мест" в памяти, зарезервированных для элементов массива. Если размер не задан, то значение свойства length определяется элементом массива с самым большим значением индекса. Например, если в масси-

Ло«ж Слвае**

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

Сдоис

£г*««ъо

..... ........

</hea > <Ьвйу

Опт* сс>до^1апд1КгЬ1гг|||

« i p t Unquaqe.-j^scripr

jn|Bj - -кора-;

[>гст~ма{сне содержит^ эд-менти^-

ar У1!?] ' "TUIWH"; /sc ipl? </dndy </htnl

ij Д Откройте файл j s- skeleton. html с помощью программы Блокнот.

—И Присвойте значения некоторым элементам массива. -0 Для отображения O H A V P H W M ?*ТТРТ\ЛРНТПП

и количества элементов <scri;pt> добавьте массива воспользуйтесь новую переменную оператором и присвойте ей ссылку на массив new Array ( ) , document.write. не указывая количества -И Сохраните файл под элементов массива. именем Iength2.html.

ВТ.

-И Откройте файл Iength2.html в броузере.

•;

В окне броузера отображается количество элементов массива.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРЕОБРАЗОВАНИЕ МАССИВОВ В СТРОКИ

ассив может быть довольно большим и содержать много различных элементов. Для отображения всех элементов может оказаться проще преобразовать его в строку. Объект array включает метод для преобразования элементов массива в строку. Это метод j o i n t ) . В качестве параметра метод j oin () получает строку, состоящую из одного символа. Эта строка помещается между отдельными элементами массива, преобразованными в строки. По умолчанию в качестве разделителя используется запятая (,), однако можно использовать другой разделитель. Так, например, если arrayl — массив целых чисел, то оператор strl = arrayl. j o i n ( " " ) поме-

щает между каждым из элементов массива пробел (вместо запятой, установленной по умолчанию). В результате переменная strl будет содержать строку чисел с пробелами, помещенными между каждым из элементов. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ПРЕОБРАЗОВАНИЕ МАССИВОВ В СТРОКИ СВР»* иго**

•"& V.a Octanoe«№

Ztmafn,

Ж«*«Л

05-чп, !

crtpt

'-..;

array array

Ц Откройте файл j s- skeleton. html с помощью программы Блокнот. i—И В дескриптор <script> добавьте новую переменную и присвойте ей ссылку на массив new Array ( ) Преобразуйте массив в строку с помощью метода join ( ) и присвойте полученное значение строковой переменной.

—Q Присвойте значения некоторым элементам массива. —И Для отображения строковой переменной воспользуйтесь оператором document.write. —И Сохраните файл под именем j o i n . h t m l .

-И Откройте файл j o i n , html в броузере.

..-

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

г.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

п *• ", Попробуй!

Просмотр больших массивов в поисках определенного фрагмента данных может оказаться довольно сложной задачей. Эта задача может быть облегчена, если прибегнуть к другому способу поиска в массиве, который заключается в преобразовании всего массива в одну строку и использовании метода ind e x O f ( ) для локализации определенных данных, как, например, показано ниже. arrayI = new Array("привет", " 1 2 3 " , "старший", "пустой", "фиксированный");

strl = a r r a y l . j o i n ! " " ) ; beginChar = strl.indexOf("123");

Приведенная в примере последовательность операторов объявляет массив элементов, преобразует массив элементов в строку strl, а затем устанавливает значение переменной beginChar равным позиции в строке, с которой начинается значение " 1 2 3 " . Используя эти операторы, можно отыскать определенные элементы в массиве. После определения местоположения этих элементов можно продолжить анализ данных с помощью других методов объекта string. Методы объекта string более подробно рассматриваются в главе 9.

<Э

в*.. . . £2.

ора яблоко гуыак стайный нервный вода

1] . ••«

2] - --т. 1] - "ис

5J - -ц

Ц Откройте файл j oin. html с помощью программы Блокнот. -Я Добавьте в метод j o i n ( ) строку в виде пробела, как параметр.

Замечание. В п. 2 определяется, что в качестве разделителя будет использоваться пробел, а не запятая, заданная по умолчанию, так что между элементами массива появляются пробелы. -И Сохраните файл под именем j oin2.html.

Откройте файл j oin2 . html в броузере.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СОРТИРОВКА МАССИВОВ

ак было Показано в разделе "Преобразование массивов в строки", массив, полностью заполненный элементами, может быть преобразован в строку с помощью j o i n ( ) . Объект array включает еще и метод sort ( ) , который, прежде чем преобразовать массив в строку, сортирует элементы массива в алфавитном порядке по возрастанию. Например, массив arrayl, состоящий из элементов-слов, можно отсортировать по словам, а затем преобразовать в строку с помощью оператора strl = a r r a y l . s o r t ( ) .

Когда метод sort ( ) применяется к численному массиву, числа сортируются в алфавитном порядке, а не в числовом. Например, массив, содержащий значения 1, 2, 10, 12, после сортировки будет выглядеть следующим образом: 1, 10, 12, 2. В приведенном ниже примере используется файл j o i n . h t m l , созданный в разделе "Преобразование массивов в строки", однако описанные действия применимы к любому файлу.

СОРТИРОВКА МАССИВОВ :•

£»Дл Оо*ч, Вш ЙЛ<»«в •Qgmc &^вка :

4*' . -» ' "•"&

И «ж

>':••• -\.

Згт^юешъ

а"" 3"Т" :з ••^-.--•••jii

Ойнпвить

Сомой

Покк

Изйр****

Ждаил

Печать

$ _

1рик*

Йай*С)Ф' Г VT,iA:iDi'i.-(W>r л*л ^ • Нспопвх**** гврвмяимын м MacuHeofitod ilml|

_^j ^Пврияв i i Ссылки '

"TJ

«Г«=-

П Откройте файл j oin . html с помощью программы Блокнот. Замените метод j oin ( ) методом sort

Сохраните файл под именем sort.html.

-И Откройте файл sort . html в броузере.

В "о*«***«и»

"а

\ Массив отсортирован в алфавитном порядке.

ГЛАВА 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ И МАССИВОВ

«_ Попробуй!

Метод sort ( ) может получать в качестве параметра имя функции, которая реализует другой способ сортировки массива. Этот параметр может использоваться для сортировки не в алфавитном порядке, а в числовом. Соответствующие операторы имеют следующий вид. function numSort (varl , var2) { return varl - var2 ; arrayl = new Array ( " 1 " , " 2 " "12", " 3 4 " , " 7 2 " ) ; strl = array 1. sort (numSort)

При выполнении метода sort ( ) происходит вызов функции numSort. Она получает два параметра и возвращает в качестве результата их разность. Эта разность используется методом sort ( ) для упорядочения чисел в массиве. При обходе методом sort ( ) всех элементов массива функция numSort вызывается столько раз, сколько необходимо для завершения сортировки.

<•••"".'•

. Qcreoeft

Овмвль

Яв»ов

Пв^кНяЛи.»»*

l С '.)53Т.Г«-*пы\Гтаеа ; • Исгу.тысвзми- п^с.м.нмаа и Ml^gf^sMt: H-Tj|

Х.фяял

ЛВЧЯТЕ ^ f^f

elr

Ц Откройте файл sort .html с помощью программы Блокнот. и

-И Замените строковые элементы массива численными.

Сохраните файл под именем s o r t 2 . h t m l .

-Q Откройте файл 3ort2 .html в броузере.

• Массив отсортирован, но в числовом порядке.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ АРИФМЕТИЧЕСКИХ :

! !

ОПЕРАТОРОВ Оператор вычитания может применяться в качестве унарного оператора изменения знака переменной. Для этого знак операции следует поместить перед переменной или численным литералом. Например, оператор tempi = -varl; заменяет положительное значение переменной varl отрицательным и помещает результат в переменную tempi. Еще один не столь распространенный арифметический оператор — это оператор взятия остатка по модулю (%). Он возвращает остаток от деления двух чисел. Например, оператор 11%5 возвращает значение 1, поскольку 5 дважды содержится в 11, а остаток при этом равен 1. В данном случае модуль равен 5. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ыражения используются для составления Математических уравнений. С помощью э|гих уравнений вычисляются требуемый результат, который затем может быть отображен броузером. Для двуместных операций (например, сложения) в качестве операндов могут использоваться как переменные, так и литералы. Литералы могут быть численными и строковыми значениями. В самых простых выражениях используются арифметические операторы. JavaScript включает четыре стандартных арифметических оператора: сложения (+), вычитания (-), умножения (*) и деления (/). Они работают только в том случае, если переменные в обеих частях оператора относятся к численному типу. В то же время оператор сложения можно использовать для сцепления строк. ИСПОЛЬЗОВАНИЕ АРИФМЕТИЧЕСКИХ ОПЕРАТОРОВ п

. .1 <bod '

Правда | Пии*. 1

5 .' - - э

г] - 4J; 1

Idd "' ^ rSub - oar

Стойки

синел .иг сине иг сите иг сине иг сине иг сине иг rlpt

'•&" ."Ji

а*

а .-д

Переменная 1 12 Переменная 2 10 Сложение 22 Вычитание: 2

- vat-2; 'Перемен чая 1: " * кем • "<Ьг>"); "Перемен чая 2: " * иаг2 * 'ЧЬЮ 1 1 ); "Сяохени г: " + uarftdd » "<Ьг>"); "Вычитан <е: " * ил-Sub * "<Ы->"); "Умножен «е: " * uarMult * "<br>">; "Деление " * u a r D l u * "<Ы'>"1:

\ /

</(lt«l>

П Откройте с помощью программы Блокнот файл DS -skeleton.html.

-Q Создайте две новые

переменные и присвоите им численные значения.

43 Создайте четыре новые

•

|Для отображения значений каждой переменной воспользуйтесь несколькими операторами document .write.

переменные и присвойте —И Сохраните каждой из них значение файл под именем арифметического выражения, arithmetic .html. составленного с использованием первых двух переменных.

.,. ,г

S(SS

....___.,,

Q Откройте в окне броузера файл arithmetic.html.

-^nsKSS^ii'

• Броузер отображает значения каждого из вычисленных . арифметических выражений.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИИ

Г Сто еще?

Оператор сложения может использоваться для сцепления (соединения) строк. Однако все другие арифметические операторы при попытке применить их к строковым аргументам возвращают значение NaN. NaN значит "not a number" ("не число"). Если строка представляет последовательность цифр и не содержит букв, JavaScript автоматически преобразует строку в число и вычисляет выражение. Более подробно использование строк описано в главе 9. Факториал можно определить как произведение, число сомножителей которого равно исходному числу. При этом первый сомножитель также равен исходному числу, а каждый из ос-

тальных сомножителей меньше предыдущего на единицу. Например, факториал числа 3 равен произведению 3 х 2 х 1, а результат — 6. Функция вычисления факториала может, например, выглядеть следующим образом. function factorial (num) { for ( j=num,- j>0,- j— ) result *= num; return result В приведенной функции для получения значения факториала используется несколько выражений. По завершении вычисления функция возвращает его в качестве результата.

Г*

war! - 12;

>nt .«i-l t •Ttt .ИГ

jnt.writ • nt.wl

№

)ененная 1: " * uar-1 . "<br>">: "Прременнм 2: " * «at-2 * •Xbr>"); "Сложение: " * udt-ftlld ' "<br>"); "Внчигаиие: " * warSub . "<br>">; •Умножение: " * uarHult . "<lii->"): •Дрденне: •• ' uarOiu . "<tir>"l

Для отображения Ц Откройте с помощью программы Блокнот файл значения выражения с операцией деления по arithmetic.html. модулю воспользуйтесь -И Создайте новую оператором переменную и, document.write. используя первые две L переменные, присвойте -|JJ Сохраните файл под ей значение выражения именем modulus .html. с операцией деления по модулю.

3 f>Rew«*i

".г

Сеыж

Переменная 1: 12 Переменная 2; 10 Сложение 22 Вычитание: 2 У м н о ж е н и е 120 Деление 1 2 ГОстатокГ21

0 Откройте в окне броузера файл modulus .html.

• Броузер отображает результат вычисления выражения с операцией деления по модулю.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПЕРАТОРЫ ИНКРЕМЕНТА ИДЕКРЕМЕНТА

дин из самых простых типов арифметичес1сих выражений связан с увеличением или уменьшением значения переменной на единицу- Выражения с приращением значения переменной особенно полезны при организации счетчиков и циклов. Переменную можно наращивать, прибавляя к ней единицу и присваивая значение полученного выражения этой же переменной, например, так: var = var + 1. В JavaScript существует, однако, более простой способ приращения значений с помощью так называемого оператора инкремента. Чтобы обозначить соответствующую операцию, двойной символ "плюс" (++) присоединяют к имени переменной. Например, оператор var + + каждый раз при вычислении выражения, в которое он входит, авто-

матически увеличивает значение переменной с именем var на единицу. Аналогично значение переменной можно уменьшать на единицу с помощью так называемого оператора декремента. Чтобы обозначить соответствующую операцию, двойной символ "минус" (--) присоединяют к имени переменной. Например, оператор var-- каждый раз при вычислении выражения, в которое он входит, автоматически уменьшает значение переменной с именем var на единицу. Операторы инкремента и декремента относятся к так называемым унарным операторам. Это означает, что им требуется один операнд, а не два, как в случае арифметических операторов. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОПЕРАТОРЫ ИНКРЕМЕНТА И ДЕКРЕМЕНТА - . Ж*** и"*1* . 2«1 ifcrfpimij* , СЕРВИС &p4wj

;

: '-а ;Гш"Г"2Р'" и Домой '; flout*

| '-"..«. *~. ;•.-•*•,.,, baay) <script language-"jJuascript">

Зств-ювьп* Саиенгв

А**ик|«:\; 1 У5Э\П^,|^цы\Гяв1н: Составлен Bt,Mj«e«J\.?x:.hiiiil|

л(

Иэ4%мто«

J ' Печрь J>

ЖВРЯЛ '

3 ~.

^рм"»

_-j ^>f1epe«» !| Go**.- *'

1 [S™°°c«2

^script! Dotty>

</ntm?

i3 ®Й™"°

Ц Откройте с помощью ft Увеличьте значение программы Блокнот файл переменной с помощью js-skeleton.html. операции ++. Создайте новую —И Чтобы вновь переменную и присвойте отобразить значения ей численное значение. каждой переменной, добавьте в программу -Q Для отображения еще один оператор значений переменной document.write. воспользуйтесь оператором —И Сохраните файл под document .write. именем inc . html.

;

','.;'*'•;„' '.Г,

.' "•-lmi,£^ie

броузера файл inc . html. значения каждой из переменных до и после вычисления выражений с оператором инкремента.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИИ

Г Ч.то еще?

Операции инкремента и декремента не обязательно должны указываться после имени переменной. Знак операции инкремента и декремента может как предшествовать переменнойоперанду, так и следовать за ней. Когда эти операторы применяются вместе с оператором присваивания (=), между первым и вторым случаями существует довольно тонкое различие. Если операция инкремента или декремента предшествует переменной, как, например, в выражении varl = ++var2, пере-

менная var2 получает приращение до того, как значение присваивается переменной v a r l . Напротив, если операция следует за переменной, значение var2 присваивается varl до того, как она получит положительное или отрицательное приращение. Конечно, вместо более простого выражения х++ всегда можно применить эквивалентное ему выражение х == х + 1. Однако оператор инкремента используется достаточно часто для того, чтобы оправдать свое существование.

ipt language-"javascripf>

Д Откройте с помощью программы Блокнот файл inc.html.

Q Уменьшите значение переменной с помощью операции --.

—И Чтобы вновь -Щ Создайте еще одну переменную и присвойте отобразить значения каждой переменной, ей численное значение. добавьте в программу —И Для отображения еще один оператор значения каждой из document.write. переменных -П Сохраните файл под воспользуйтесь именем dec . html. оператором document.write. 4-1747

Броузер отображает -Q Откройте в окне броузера файл dec . html. значения каждой из переменных до и после вычисления выражений с операторами инкремента и декремента.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ |

сбсТАВЛЕНИЕ ВЫРАЖЕНИЙ G ОПЕРАТОРАМИ СРАВНЕНИЯ

ыражения с операторами сравнения используются для сравнения значений двух переменных. Результатом вычисления выражения с операторами сравнения является одно из булевых значений: true или false. Эти операторы обычно используются для управления ходом выполнения программы и более подробно рассматриваются в главе 4. Например, оператор if использует выражения сравнения для принятия решения о выполнении той или иной последовательности операторов. Операция сравнения обозначается двумя знаками равенства (==). Она используется для установления факта равенства двух значений и отличается от символа присваивания (=). Применение в операто-

ре сравнения одного знака равенства — одна из распространенных ошибок при работе с JavaScript. Еще один широко используемый оператор сравнения предназначен для установления неравенства двух значений. Соответствующая операция обозначается с помощью восклицательного знака вместе с символом равенства (! =). Другие операторы сравнения в JavaScript позволяют проверить, является ли одна переменная "больше, чем" (>) или "меньше, чем" (<) вторая, или же одна из переменных "больше или равна" (>=) либо "меньше или равна" (<=) второй. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

СОСТАВЛЕНИЕ ВЫРАЖЕНИИ С ОПЕРАТОРАМИ СРАВНЕНИЯ . Gn»«e«k i»

Ойновмш

и.

jlswek

iTowc*

Иэбртм •

.J n*%pt

2 .

г w*

</scrlpt: </bodii> </htnl>

• -

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html.

-Н Чтобы отобразить значения каждой переменной, воспользуйтесь -Я Создайте новую операторами переменную и присвойте ей doc ument.wri t e. численное значение. —И Сохраните файл —И Составьте условное под именем выражение с оператором comp .html. i f , включив в него оператор сравнения. Внутри условного предложения присвойте значение другой — строковой — переменной.

-П Откройте в окне броузера файл comp.html.

Броузер отображает значения каждой из переменных.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИЙ

Что еще?

Очевидно, что результат применения операторов сравнения к численным операндам относительно легко определить. Однако операторы сравнения могут применяться и к строкам. В этом случае результат может быть не столь очевиден. Результатом сравнения, на первый взгляд, одинаковых строк, например ( " с днем рождения" == "С Днем Рождения"), будет значение false, поскольку, как мы помним, в JavaScript символы нижнего и верхнего регистров трактуются по-разному. К строкам также можно применять операции "меньше чем"

и "больше чем". При сравнении строк сравниваются их значения, представленные в коде ASCII. Каждому символу клавиатуры ASCII ставится в соответствие определенное число. Компьютер распознает эти числа и использует их для отображения на экране соответствующих символов. Так, например, в результате сравнения может быть установлено, что символ А меньше символа а, а а, в свою очередь, меньше, чем Ь, поскольку значение А в коде ASCII меньше ASCII-значения для а.

! ; Safirt

Ow*"

ЁЧ1

йзврамни*

11.. * • - • * . в ; . Нвмс

•:•: ••••

Сдоеис

£npaat»

Оствчавм-ь Обкшть

-Л • -Я Лсмо}

•

Пей*

3 , =<

H*Sp»*«e

Ж$оиад

Печати

Я .

Правив

JJ ^Пвртл

• lire)*' E '..5В\Л»*»лГ,., I. :°m.«. к<а«™) *"»р:»ч

аы*и

|Д»™ •«««"' 31 | месяц янс-ыъ и л и ь;арт или мая или июль или аЕП'ст или октябрь или декабрь [

_ZJ

__ ЩретикГ '

Q Откройте с помощью Внутри условного программы Блокнот файл оператора if присвойте значение другой — comp.html. строковой — переменной. —П Присвойте переменной новое -QQ Чтобы отобразить численное значение.

значения каждое выпажение Составьте выпэжение Составьте вьтзженыо Составьте выпзжеыне :0ставьте вывзжение вставьте вьшажение Оставьте вьтпажение 8С13ВЫе вьтажение гавие вьтажение

переменнойпепеменной. пепеменной певеменной переменной. в§вшеннойвевеменнои-

Сбййвьте выражение с операцией сравнения, воспользуйтесь - ~»*о£>«о;Г1<2*1 cp«oiiclIII3i; _

i?,»., o j ^ o o x K i i i i i a i l

как в п. 3.

оператором document.write.

Используя оператор "больше чем", составьте -ГО Сохраните файл под именем comp2 .html. еще одно выражение внутри оператора i f .

i Д:| Мц1 -,сИ1мл ~|j

— ВЕЗ Откройте в окне • Броузер отобрансает броузера файл значения каждой из . comp2.html. переменных.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОСТАВЛЕНИЕ ЛОГИЧЕСКИХ БШАЖЕНИЙ

гф один тип операторов JavaScript — логические операторы. Их можно использовать д^я объединения нескольких различных операторов сравнения в один сложный или составной оператор. Эти операторы также вырабатывают результат булева типа и зачастую используются для управления ходом программы. К логическим операциям относятся операции И, которая выражается в виде двойного амперсанта (&&), ИЛИ, которая представляется в виде двойной вертикальной черты ( I I), а также НЕ, выражаемая в виде восклицательного знака (!). Оператор и вырабатывает значение true, если обе части логического выражения имеют значе-

ние true. Оператор ИЛИ вырабатывает значение true, если по меньшей мере одна из частей логического выражения принимает значение true. Оператор НЕ просто изменяет булево значение на противоположное. Используемые логические операторы должны располагаться между операторами, вырабатывающими булево значение, и заключаться во внешние скобки. В приведенном ниже примере используется файл comp.html, созданный в разделе "Составление выражений с операторами сравнения", однако описанные действия применимы к любому файлу.

СОСТАВЛЕНИЕ ЛОГИЧЕСКИХ ВЫРАЖЕНИИ *аби Омиш gw йзФ**00

script Ianguige-"java5cript") daysofMonth - 2U; If (MuslKH.ntb - ;4ll W

Рв**1 Справка

ДнеВвисощЕ 28 1

••Р^РЬ J

rfeh

«го™,

Ц Откройте с помощью • Оператор программы Блокнот файл document.write comp .html. отображает значение каждой из переменных. —И Добавьте логический в выпажение оператор в выражение

о оггопятопами о оггепэтстэмм

^охраните именем logics]. именем ] оа] с§} именем ]oaica]именем ] oai именем' именем \именем' именем :.ggig§

с опепзтопами с операторами

именем I88ieii :iicitti:

ОПОГЮШОПЯЬЛН

rt ОГТОПОПЭОЮЭВЛ!

о опопяггопами О ОПОПЯГГООЭМИ

сравнения. Сравнении: Сравнении; Сравнении:

••

mi. itmi. псин: j f.- LU т -

;

—И Откпоите R ПКНР

броузера файл logical.html.

:.-1H^,.V.«»

1 Knovnpn ПТОЙПЯТКЯРТ

значения каждой из переменных.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИЙ

С Что еще?

Для лучшего понимания всевозможных вариантов использования логических операторов рассмотрим следующие примеры. true && true = true true && f a l s e = f a l s e false && true = false false && false = false Для оператора ИЛИ справедливы следующие соотношения. true I I true = true true I I false = true false I I true = true false I I false = false Для оператора НЕ возможны только два варианта.

!true = false ! false = true Логические операторы сначала вычисляют значения выражений, расположенных по обе стороны логической операции, а затем — значение самого логического оператора. Например, предложение (varl > 17 && varl < 25) объединяет два оператора сравнения, устанавливающих, является ли переменная больше 17 и одновременно меньше 25. Если значение переменной varl равно 18, то результат выражения принимает значение true.

! Sat*n ' Оомил

^tfffRf0'* 'f 4JSB^»**0t|lJ"'1-*'" ^ Состж ™BHL.S BWMtwMtJoaiCft: h'nl

В*"

B>6w«oe

Ся*»с

£тоа«а

• ysofMontli • ?9; r • eoo: (day OfMopi -- 28 {) daysorMontlt — 29)

JJ <>П«ре»яй

Ссо.ли* ^J

WITHII фгпрал!.

__|и ,_^^l

Гад 2000 Високосный гор true

& в] Готово

Q Откройте с помощью Q Чтобы отобразить программы Блокнот файл значения каждой переменной, logic:al .html. воспользуйтесь -И Составьте еще одно оператором логическое выражение, document.write. входящее в оператор i f . -И Сохраните файл под именем Iogical2 .html.

—И Откпойта в окне

броузера файл Iogical2.html.

.""

r~»==.-J 1 Bnov3eD отобоажает

значения каждой из переменных.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗрВАНИЕ УСЛОВНЫХ ОПЕРАТОРОВ

Например, оператор (varl == 2 3 ) ? (str2 = ' y e s ' ) : (str2 = ' n o ' ) сравнивает значение переменной varl с литералом. Если значение переменной varl равно 23, переменной str2 присваивается строковое значение yes; если значение не равно 23, str2 присваивается значение по. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

словный оператор — это простой оператор, к-оторый служит в качестве сокращенной записи для одиночного оператора i f - e l s e . Операторы i f - e l s e рассматриваются в главе 4. Условный оператор состоит из знака вопроса (?) и двоеточия (:). Условное выражение располагается слева от вопросительного знака. Если значение условного оператора равно true, вычисляется выражение, расположенное непосредственно справа от вопросительного знака. За первым выражением следует символ двоеточия и еще одно выражение. Если условное выражение принимает значение false, JavaScript вычисляет выражение, следующее за двоеточием.

1 ИСПОЛЬЗОВАНИЕ УСЛОВНЫХ ОПЕРАТОРОВ ^ЯДЯДДЯР^Н^Д^^ЯЯЯИЯВР^ИР^'Р'^Я

"**

*а

'off

'.••' --Л ' ' ' ' 1

^Ч • ; .Л

-Т^

-а

'•* '

^Д

•• л

•

^Ш

п '

tl e * ". то я сьем " * e a t l : </sc ipt> </bod]i </htnl

П Откройте с помощью Q Чтобы отобразить программы Блокнот файл значение каждой j s-skeleton.html. переменной, воспользуйтесь —И Создайте несколько оператором новых переменных document .write. и присвойте им значения. -0 Сохраните файл под именем -И Для определения conditional .html. значения переменной воспользуйтесь условным выражением.

«J«~

-—-"— Т •

™

Q Откройте в окне броузера файл conditional.html.

^ •""'-••"• -<•-'-

• Броузер отображает значения каждой из переменных.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИЙ

_»

№ Попробуй!

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

можно заменить простым условным предложением, которое выглядит следующим образом. (conditionl == true) ? expression! : expression2;

if (conditionl == true) { expression!; } else {

Вот еще несколько примеров условных операторов.

expression^ ;

(flipCoin) ? result="open" : result="решка";

Это простая конструкция типа if -else, которая вычисляет выражение expression!, если условие conditionl истинно, или выражение expression2, если условие conditionl ложно. Подобную конструкцию

(today=birthday) ? document.write("С днем рождения") : document.write("С днем варенья");

Ь-. а4..»- « <^crip

XX"k а 1 !1" "^ а. ^

*8«иН*' E w; JV-™.^™.-4 Спг,«»»и. -»м.--.| „„~<™r: w».|

ig-"iai>ascripf •>

-1 iMbm : .Со.»» »

Переработка' tive Отработано часов 14 Такса 1025 К оплате $21525

. ,, . .

Q Вновь откройте с помощью программы Блокнот файл

js-skeleton.html. -И Создайте несколько новых переменных и присвойте им значения. —Щ Чтобы определить, какое 1 из выражений должен вычислять JavaScript, воспользуйтесь условным выражением.

jj Для отображения значения каждой переменной воспользуйтесь оператором document.write. Сохраните файл под именем conditional .html.

Щ Откройте в окне эроузера файл conditional2.html.

^^№S8^^J • Броузер отображает значения каждой из переменных.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СТАРШИНСТВО ОПЕРАЦИИ С

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

Что еще?

В JavaScript наивысший приоритет, как мы помним, имеют скобки, а затем используется такой порядок следования операторов. 1. Унарные операторы: ++,--,-,!. 2. Арифметические операторы: *, /, %,+, -• 3. Операторы сравнения: >, <, >=, <=. 4. Логические операторы: &&, I I . 5. Условный оператор ? :. 6. Оператор присваивания =.

СТАРШИНСТВО ОПЕРАЦИЙ 1

<h <h </ <b

nl a f > d

'• . •£ аил ' !^eo*e IHB ^дбрдши Сдемс £npav*- • • • . . . ! • • '

• • * * - ' * -

" Ш -- ' £й

' • ' ^й . " - ji " " :~&

-=*

э! .- "

i t lanoii,»cje-"1auascriDf>

; p :k1 ' 2 t H * 5 ^ 3 * 1 j : e k2 - 12 • 1) • Pf che КЗ - 2 . <* . tf/ r£! 1 ) ;

проверка2 = 11

< script>

</htnl>

Q Откройте с помощью программы Блокнот файл j s - s k e l e t o n . html. новых переменных и присвойте им значения выражений, использующих однотипные операторы.

Q В различных местах выражений поместите пары скобок. -И Чтобы отобразить результаты вычисления каждого выражения, воспользуйтесь операторами document.write. -0 Сохраните файл под именем precedence.html.

г ТЧЭ»«и~~«5

броузера файл precedence.html.

различия в значениях каждого из выражений.

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИЙ

ВЫЧИСЛЕНИЕ СТРОКОВЫХ ВЫРАЖЕНИЙ ногда выражения содержатся в строке, как, г~ Функцию eval ( ) можно исНапример, при вводе пользователем выра- Что еще?

жения в поле формы. В подобных случаях функция eval ( ) указывает JavaScript на то, что строка должна вычисляться, как выражение. Например, если строковой переменной strl присвоить значение выражения 128 + 62, значение этой переменной будет отображено в виде "128 + 62". В то же время, если отобразить значение этой переменной с помощью функции eval ( s t r l ) , результат будет выглядеть как 190. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

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

ВЫЧИСЛЕНИЕ СТРОКОВЫХ ВЫРАЖЕНИИ : i *£Мл

О&яалЛ ' Еии

^1 ' «Lt. ' ^'

Цэбовнпое

Cspenc

£пваяч!

•а

о„£^, оЖ, S. '

Пию.

а -.. ; '\» ; -«а

Н Ценнее

Жэоч^ч

: ^tepKH^E lJSB*J1i»*.ieDb'M"^ea 3 • Cocr»/imveet*ai.-Hi4l\f.3l htTii

<scrlvt Unman,."Uiriscrlaf.

Печать

•а

з ;. "

ПЕ»е»л

_£] ^ГЧ*«с ; Сгь™* » -I

льзовать таксе выражение: 365 - 24 |

(ргэультзт ?того выражения равен. S760

П Откройте с помощью программы Блокнот файл js-skeleton.html. —fj Создайте новую переменную и присвойте ей выражение, как строку в кавычках. —Я Чтобы отобразить значения строковой переменной, воспользуйтесь оператором document.write.

Q Для вычисления и отображения результата строкового выражения воспользуйтесь еще одним оператором document.write и функцией e v a l ( ) . -0 Сохраните файл под именем eval.html.

броузера файл eval.html.

i ' ;f$Mo<.<;*rt*tep

строковую переменную до и после вычисления выражения.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАСПОЗНАВАНИЕ ЧИСЛЕННЫХ I aya&cript включает уникальный метод расI познавания переменных численного типа. J Подобная функция может быть весьма полезной,! когда необходимо установить, действительно ли введенные пользователем данные являются численными. Попытка выполнить численное выражение, содержащее строковое значение, приведет к ошибке. Этот метод проверки того, является ли переменная численной, на самом деле состоит в проверке того, что она таковой не является. Данный метод — isNaN ( ) — получает в качестве единственного параметра проверяемую строку. Если переданная методу переменная является численной, метод возвращает значение false, если переменная — не число, возвращается значение true.

Например, если переменной присваивается значение с помощью оператора varl = 23, выражение i s N a N ( v a r l ) возвращает значение f a l s e , поскольку значение переменной varl является числом (23). В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

РАСПОЗНАВАНИЕ ЧИСЛЕННЫХ ЗНАЧЕНИИ 2«бч

£мек«

В'«

ажмн-о»

С«*«с

£лм**л

- ^ ~ . V' : 'J W""":Ji'-

4"~^j[ 'и'35

6BJ"CJ3j Е '-|ЯВУПа-мвс*ДГгсжа 1 • Сд^вечм* Bcpa«gnljVNaN Nr

«Свои

Ц Откройте с помощью Q Чтобы отобразить программы Блокнот файл результат условного js-skeleton.html. оператора, включите в программу оператор —W\ Создайте новую document.write. переменную и присвойте L ей численное значение. -H! Сохраните файл под именем isNaN.html. -Щ Добавьте в программу условное выражение с помощью метода isNaN.

• '

-И Откройте в окне броузера файл isNaN.html.

-1

£»

ЩЩ

. "f.

_^j <*> fbpewn : i Слали

•^М^к«м*«оти> '

1 1 Броузер определяет п временную как ч исленную.

| .•

ГЛАВА 3. СОСТАВЛЕНИЕ ВЫРАЖЕНИЙ

[опробуй!

Одним из лучших способов использования метода isNaN() является проверка данных, вводимых в форму. Например, если в поле формы, используемое при вычислении уравнения, введено численное значение, можно предусмотреть окно предупреждения, которое появляется, если пользователь ввел в поле не численное значение. Фрагмент программы для этого примера выглядит так. <form name="forml"> Enter the circle radius.<input type="text" name="textl" onchange="(isNaN(this.value))?window. alert('Это не число. Пожалуйста, введите численное значение.'):document. forml.text2.value = (document.forml. textl.value*document.forml.textl.value*Math.PI)"/> Area: <input type="text" name="text2"/> </form> Используемая в примере форма имеет два текстовых поля. В первое пользователь вводит значение радиуса окружности. После ввода числа и утраты текстовым полем фокуса обработчик события onchange выполняет условный оператор. Для определения того, что введенный текст представляет собой число, условный оператор проверяет метод isNaN ( ) . Если это так, программа вычисляет площадь круга. В противном случае отображается окно предупреждения.

ii £*йл flpawe Ё^

Г ' «•'" \ •••••-;.

•» •'••'•

ЙЛа«>м

CBMHC

-3 Остановить

£правм

.0 Овкявиг*.

До*«А

ПСИ»

_у

И1ЙР»««в

ЯфнМ

: i^oeCrBj Е Ч^ТЛринсом Тпаг, 3 • доставление вым.ен^Г Aillbl-lj

•

tVMV

' т

а . "

Пр«(»л

.J #П»»«: С~«."

•

Ьтегменям яблоко не число 1

\Je$faoib

Q Вновь откройте с помощью программы Блокнот файл isNaN.html. —И Замените значение переменной строковым значением.

| Сохраните файл под именем isNaN2 .html.

броузера файл isNaN2.html.

•

.- :.

J .

•

данная переменная — не число.

,.f'

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ УСЛОВНОГО ОПЕРАТОРА IF-ELSE т

ногда при написании сценария необходимо, Чтобы определенные операторы выполня4ись в зависимости от некоторого условия. Например, в зависимости от того, правильно ли пользователь представляет форму, не содержащую: определенных данных, может потребоваться различная реакция. Один из способов управления подобным ходом выполнения программы заключается в использовании оператора if-else. Синтаксис оператора if состоит из ключевого слова if, за которым следует условное выражение в скобках. Если в зависимости от условия необходимо выполнить только один оператор, можно поместить его непосредственно после условия и поставить в конце точку с запятой. Чтобы выполнить несколько операторов JavaScript, их следует заключить в скобки.

Альтернативный оператор располагается под оператором if после ключевого слова else. Оператор else также может содержать несколько операторов JavaScript, заключенных в скобки. Если условие в операторе if не выполняется (соответствующее булево выражение имеет значение false), выполняются предложения JavaScript, содержащиеся в операторе else. Операторы i f - e l s e могут образовывать последовательность, так что за одним оператором i f может следовать несколько пар операторов else i f , однако заключительный оператор e l s e не может содержать ключевого слова i f . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , но описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ УСЛОВНОГО ОПЕРАТОРА IF-ELSE снм*> </head> <body> <

ЖгЙ-<

-1

л "< -a •

.таит..- Пимент") [Сегодня Рождество н магтин^крыт^-

--fe ™

I»

</script> C/htM)

D Откройте с помощью программы Блокнот файл js-skeleton.html. -И Создайте две новые переменные и присвойте им значения. -И г,„ оператор if с условным выражением, предназначенным для проверки переменной.

| Для случая, когда оператор if принимает значение true, предусмотрите вывод некоторого текста. Воспользуйтесь для этого оператором document . write. -И Для случая, когда оператор if принимает значение false, предусмотрите в сценарии оператор else, который выполняет оператор document.write, отличный от предыдущего. -0 Сохраните файл под именем i f - e l s e . h t m l .

—Q Откройте в окне броузера файл if-else.html.

Отображаемый текст определяется значением условного выражения. Замечание. Если переменной присвоить значение, отличное от проверяемого оператором if, броузер отобразит текст, вывод которого предусмотрен оператором else.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

.,,_„. с~ Попробуй!

Операторы цикла if могут быть вложены один в другой. Это позволяет "углубляться" от общих условий к более специфическим условиям. Каждый из уровней структуры i f - e l s e может содержать некоторые предложения JavaScript. С помощью подобной структуры можно установить точные критерии выбора выполняемых операторов. Посмотрим, например, как работает следующая программа. function coolCarO { if (car == "Мустанг") if (year == 1965)

if (parts == "оригинальные") document .write ( "крутое авто ! " ) ; else

document .write ( "он, по меньшей йере, бегает. " ) ;

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

•"•

• • " * - . - t^JL оЖ. tfL'

BJ а а э • i • & з .* i •« тек

*», |«>. E MSBVW^rfn.. 4 Уф,™-,, „«wp^d,rt>

Иабмнмм

.KijiHfti'

;

П«члть

Прев».*

_*] i?!%ep*«rae • Ссьмк- *

-- 1

Й ^»e

Ж1 Откройте с помощью Q Добавьте программы Блокнот файл предложения JavaScript, if-else.html. которые должны выполняться под ~Н Измените значения управлением операторов переменных. else i f . —И Между операторами if и else вставьте еще два оператора else if с условными выражениями, отличными от существующих.

—И Сохраните файл под именем el self .html. Замечание. Заключительный оператор else не должен содержать ключевого слова if.

броузера файл elseif.html.

.._,-.,,.»., ^ ,— tgsia^ss,, - —

определяется значением условного выражения.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

^ПОЛЬЗОВАНИЕ ОПЕРАТОРОВ ЦИКЛАГОК

!ще один распространенный способ управления работой программы состоит в выполне:нии оператора - - или последовательности операторов — заданное число раз. Этот способ довольно эффективно реализуется с помощью оператора цикла f o r . Оператор for состоит из трех частей, заключенных в общие скобки и разделенных точкой с запятой. Первая часть определяет начальное условие цикла, вторая — условие завершения цикла, а третья — шаг приращения цикла. Оператор for начинается с исходного условия и продолжает выполнение оператора (или опера-

торов), следующего за ключевым словом for, до тех пор, пока не будет удовлетворено условие выхода из цикла. Переменная цикла for наращивается при каждом прохождении цикла. Например, оператор for (1 = 1; i<10 ; i + +) начинает выполнение при значении переменной цикла i, равном 1, и до выхода из цикла девять раз повторяет следующую за ним последовательность предложений JavaScript. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОПЕРАТОРОВ ЦИКЛА FOR **

**• • .

'••''I чй?

'1 .^J

Ъгинуе-лъ Сб"Л»л-ь

i* **» LJtJ

Долгой

ti -ЗЛ

Ibutu

''* Jia

£ ' ' • *\У .4

1"У1оаию«

-:=*t

Ждонал

П-г«"11

uapecj^j E ийбМПримвры^Гпава^-Упраглвнне кодом npwpaMn^Jprtoop htm' |

j-i

Дошкольники учатс Дошкояь нкк учатс

н ать о 3 н ать о 4

Дошколь ихя учатс Дошколь икя учагс

и ать о 7 и ать о S

Дошколь ики учатс счн ать

о К

'.ЦГймм

(count< = 10) ставится Ц Откройте с помощью программы Блокнот файл условие окончания цикла и в третьей ( count + +) js-skeleton.html. определяется —И Добавьте в сценарий приращение переменной. оператор цикла for, в котором значение Д ля отображения счетчика циклов значения переменной изменяется от 1 до 10. воспользуйтесь оператором Замечание. В данном document .write. примере оператор цикла for включает три — Q Сохраните файл под части: в первой именем forloop.html. (count=1) задается начальное условие цикла, во второй

A ^3

П tie

^»j ^Паоекпо ; ; С«ЫКМ ™-

-|3 Откройте в окне броузера файл fdrloop.html.

| •

Г(МЖ.Г,-^Я«

1 1 Броузер отображает р езультат выполнения к аждого шага цикла.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

Попробуй!

Хотя в приведенном здесь примере переменная цикла увеличивается, ее точно так же можно заставить уменьшаться. Рассмотрим, к примеру, следующий цикл. function countdown (start) { for ( j = s t a r t ; j > 0 ; j - - J

document .write ( j + " < b r / > " ) ;

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

Обротать

Домой .

-з \ э

а .

На уроке матеиатики дета учтя считт ло 2

' d<;n..nl.»Hel"U.. дао,!» нат.яат.к. ит. дчатся считать to - . u n t . "<hr>"); </5Cript>

На уроке математики дети учатся считать до 256 На уроке математики дети учатся считать до 65536

Q Откройте с помощью программы Блокнот файл forloop.html. —И Измените выражение в операторе for.

Замечание. В данном примере в качестве параметра, управляющего шагом цикла, используется выражение count=count*count, в котором текущее значение переменной цикла count умножается само на себя. -И Сохраните файл под именем forloop2 .html.

-И Откройте в окне броузера файл forloop2.html.

i Броузер отображает результат выполнения каждого шага цикла.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОПЕРАТОРОВ IIHKJIAWHILE

!ще один тип операторов цикла в JavaScript — оператор while. Принцип его работы отлича;ет|ся от принципа работы оператора for, поскольку он не подсчитывает количество выполняемых циклов. Он просто продолжает выполнение операторов, заключенных в скобки, до тех пор, пока условное выражение не примет значение false. Этот оператор цикла состоит только из условного выражения после ключевого слова while. При использовании оператора цикла while необходимо быть уверенным в том, что условное выражение в конечном счете примет значение false; в противном случае цикл будет продолжаться бесконечно долго. Необходимо также сле-

дить за тем, чтобы все переменные, входящие в условное выражение, были определены. Например, оператор while (varl <= 100) выполняет последовательность операторов, входящих в цикл, до тех пор, пока переменная varl остается большей 100. Если операторы, входящие в цикл, не изменят значение varl, цикл станет бесконечным. Чтобы оператор while выполнял в цикле несколько операторов, их заключают в скобки. В этом примере используются файлы f orloop . html и f orloop2 . html, созданные в разделе "Использование операторов цикла for", но описанные действия можно применить к любому файлу.

ИСПОЛЬЗОВАНИЕ ОПЕРАТОРОВ ЦИКЛА WHILE

•л я . '

-~--:'d:'iL'

Обнэвши

...!^^Ь..„;_:. '1??*!'* ~2 r'fleps-oa jCcuw-K1

^"^

ь ян " • count *

Дошкольники учатся Дошкольники учатся Дошкольники учатся Дошкольники учатся Дошкольники учатся

с> с* с1 с1 с' :читать до 10 Дошкольники уча :читтдо11 Дошкольники учатся :читатьдо 12

</scnpt> </Ьойу> </htnl>

Дошкольники учатся Дошкольники учатся

Ц Откройте с помощью -Q Внутри цикла программы Блокнот файл добавьте оператор f orloop .html. инкремента для переменной count. •И Добавьте в сценарий

и присвойте ей значения, именем while.html. Замените цикл for циклом while.

-И Откройте в окне броузера файл while . html.

Броузер отображает значения переменной цикла.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

Что еще?

Существует много способов организации циклов в программе. В одних случаях целесообразно использовать оператор while, в других более подходит оператор for. Два различных способа организации циклов во многом схожи, однако оператор for требует полной информации о переменных, которые управляют выполнением цикла. Оператор while может использовать переменные, объявленные в любом месте программы. Если цикл с оператором while не включает скобок, то в нем

<head> </tiead> <Dody> < s c r i p t u n q u a q e - " j auascr ip t"> — icount - : while (count < 5.8™ {

выполняется только оператор, непосредственно следующий за оператором while. Если в цикле необходимо выполнить несколько операторов, все они должны быть заключены в скобки. Для выхода из цикла, который представляется бесконечным, в обход условного выражения, составляющего часть оператора while, можно воспользоваться оператором break. Более подробно этот вопрос рассматривается в разделе "Оператор break".

' : 2**л Прем ЕИП

1 *• I

- • .;

й»6р*«*е

•»..•& '• • .

Сервис £гади»й

Оствиовит»:

06пое«гь

^3.^ Дс<л*

Пьист.

Йлрвр^ое

*$ • *ь *.дрчаэ

ы , *

Лраим

На уроке математики дети учатся считать до 2 На уроке математики дети учатся считать до Л На уроке штеыатнки дети учатся считать до 16

'""'jiLt - a,M - ...... i

Печати

_^j ^n«pei«i : Ссылки **

isAepwl*! 1 ! Е У5В\Пим*рВ1\Гтава* - Управяв**-е хмом чс^р^лм^мчЬ^ 2'

На уроке математики дети учатся считать до 65536 На уроке математики дети учатся счн-mt. до 4294967296

i/scripR </body> </htni>

i >•

л Q Откройте с помощью -fli] Внутри цикла программы Блокнот файл добавьте оператор инкремента для forlocp2 .html. переменной count. -П Добавьте в сценарий и присвойте ей значения, именем while2 .html. -И Замените цикл for циклом while.

5-1747

йЗ'йй^Г'

—ГО Откройте в окне броузера файл while2 . html.

\У^ М£*'»-«ЫОТ1р

1 1 Броузер отображает з чачения переменной ц икла.

.'1:Х

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

1ПЕРАТОР BREAK

В этом примере используется файл while .html, созданный в разделе "Использование операторов цикла while", но описанные действия можно применить к любому файлу.

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

Что еще?

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

break.

• ОПЕРАТОР BREAK ШД5ВДЯиГ5!^^^^Н1НРнв^ш^*^^^^я^^^^^^^Я^Я5!РЗР^|^шТЯ|Ч £«йг

<html>

<head> </he*d> <ЬлЛц> «cripl J» n ju, 9 i--]J»«tripf>

</scrlpt> </body> </titnl>

— Q Переместите оператор document .write в конец цикла.

-fjj Добавьте в цикл while оператор if для проверки '—И Сохраните файл переменной. под именем break.html. оператор break, который должен выполняться, когда условие оператора if становится истинным.

ijltewwc*

Cswttl

£правк»

Дотольники учатся считан, до 3

I Ц Откройте с помощью программы Блокнот файл while .html.

Вт

-I

«mile (count<-15> (

Ui»>LV-

Ope».*

*" • * 'OCTi:Lo«sL ^L „Е й-^ *? • <£ г^. • "

Дошкольники учатся считать до 5 Дошкольники учатся считать до 6 Дошкольники учатся считать до "7

g] Готом

Q Откройте в окне броузера файл 3reak.html.

' л! "ей ммлывмр

• Когда условие оператора if становится истинным, цикл завершается.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

ОПЕРАТОР CONTINUE щё один оператор работы с циклами — оператор continue. Он останавливает выполнение • цикла и возвращает управление в его начало так, будто все операторы цикла уже выполнились. Операторы, следующие за оператором continue, в данной итерации цикла не выполняются. Это позволяет проверять работу цикла в особых случаях и пропускать выполнение итераций цикла, в которых они возникают, без прерывания нормального хода цикла. Например, если цикл while должен выполняться до тех пэр, пока истинно условие varl == 100, выполнении цикла с "номером" 50 можно пропустить с помощью оператора i f (varl == 50) continue;.

В этом примере используется файл break.html, созданный в разделе "Оператор break", но описанные действия можно применить к любому файлу.

ЧТО еще?

Один и тот же цикл может включать как операторы break, так и операторы continue, однако после выполнения оператора break цикл завершается.

ОПЕРАТОР CONTINUE I Opasss

£айя

gwi

Изврвяно*

Сдавис

;

<head>

. ••"•:.:

Оетввовить '.Da

Поисж

Избранное

У~&

Жхнвл

Печать

•Ш

я . "

Прввьа

^; n^^e" ?>

Дошкольники учатся считать до 4

Дошкольной у ч т

счит™ ,7

Дошкою и х и у ч т

считать о 10

Дошколь ики уч т

считать о 12

-•J1

•

«1 й"Гв££

_ программы Блокнот файл break.html. —И Замените оператор break оператором continue.

под именем continue.html.

броузера файл

continue.html.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ТАЙМЕРОВ J^ASGRIPT avaScript можно использовать для управления таймерами, что позволяет выполнять определенные сценарии в различные наперед заданные моменты. Это может быть полезно, в частнорти, для синхронизации разных действий на Web-странице. Функция управления таймерами называется window. setTimeout ( ) и имеет два параметра. Первый параметр — предложение JavaScript, которое необходимо выполнить. Это может быть один оператор, например document .bgcolor = ' b l u e ' , или имя функции, определенной в каком-либо месте Web-страницы. Предложение, которое подлежит выполнению, может состоять из нескольких операторов, разделенных точкой

с запятой. Операторы, составляющие этот первый параметр, должны заключаться в кавычки. Второй параметр функции window.setTimeout ( ) -- это значение времени, которое должно пройти до выполнения предложения JavaScript, т.е., по сути, второй параметр — это задержка, с которой должно выполниться предложение JavaScript. Величина этого промежутка измеряется в миллисекундах. Например, значение 5000 соответствует задержке в 5 секунд, а значение 10000 — в 10 секунд. В этом примере используется файл js-skeleton.html, но описанные действия можно применить к любому файлу.

ИСПОЛЬЗОВАНИЕ ТАЙМЕРОВ JAVASCRIPT h £Л1

i '.<•

Прем" &«. Из*в"В* '• ttasuc

•*

.0~i^jwt Э

Справка

ЩЩ

•£ ' 3 i ® i ^

ОСччеигь titr^i П;и.. 'Лхел*** ! :&u»ej0] Е ^-ВЧ1гим«»4\Глам*-Упоав|да*е Wfli*i поогоа"^Ш1еои(ъм|

Э \ Печи* 'л

>'sf*w

d . -:

Прм*а *j {?Пе -кия ' ; Cctiij. n

1Ч

А теперь мой следующий фокус - кролик ш шляпы.

(ёЗгм.'

Ц Откройте с помощью программы Блокнот файл while .html. Включите в сценарий функцию, которая использует оператор document . wr i t e для вывода заголовка и изображения.

-0 Добавьте в качестве первого параметра функции setTimeout ( ) ее имя, а в качестве второго параметра — значение временного интервала в миллисекундах. -И Добавьте в дескриптор <body> один заголовок.

—И В дескриптор <body> добавьте обработчик события onload —Q Сохраните файл под и присвойте ему ссылку на именем t imeout.html. window. setTimeout ( ) .

"'"

броузера файл timeout.html.

"r-fMi,™^,^

отображается заголовок дескриптора <body>.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

...... ,,.,.

Попробуй!

В главе 11 рассматривается объект Math. Он включает метод, который предназначен для генерации случайных чисел в интервале от 0 до 1. Пользуясь этим методом, можно составить сценарий, который позволяет сыграть в "один лишний". (Детская игра с таким названием заключается в том, что ее участники маршируют под музыку по комнате, количество стульев в которой на один меньше, чем количество игроков. Цель игроков — занять свободный стул при внезапном прекращении музыки. — Прим. ред.) Соответствующая программа выглядит следующим образом. <form name="forml"> <input type="button" name="buton1" value="Приготовиться!" onclick="stopMusic()"/> <input type="text" name="textl" value="музыка играет"/> </form>

Правка

fiw

ЦэВоачюе

Саяис

. ?<;•-.;,' .•*.;' ":, : -Q ..-, • Остановка.

06нов»«ь

Ломов : . ;

Пвнск

. И»брв»ю*

J^ Обоовнга

itf ! Лнлси-

' ^ - L i J ' A$ • • i ^ Пак* ViXv&rfx АУР.Й" Лечаю

:''- 'M Правка

Ой, это не кролик!

И Сценарий ожидает указанное время.

Сценарий function выполняется по истечении временного интервала, отображая заголовок и изображение.

-Q Вновь откройте в окне броузера файл timeout.html. -ПЛ Щелкните на кнопке Остановить до истечения временного интервала. НИ Пауза не прерывается, и изображение вновь выводится на экран.

;

!д|Но«м»п-.-

Замечание. Установленную временную паузу можно сбросить только с помощью метода c l e a r T i m e o u t ( ) , который рассматривается ниже в этой главе.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ЗАДАНИЕ РЕГУЛЯРНЫХ ВРЕМЕННЫХ ИНТЕРВАЛОВ

адание временных задержек приводит к однократному выполнению предложения или функции JavaScript. Чтобы задать многократно'повторяющиеся временные задержки, можно! включить метод setTimeout ( ) в оператор цикла for или воспользоваться другим методом, позволяющим задавать регулярно повторяющиеся задержки: s e t l n t e r v a l ( ) . Метод setlnterval ( ) может использоваться для выполнения оператора, функции или группы операторов через регулярно повторяющиеся интервалы времени. Метод setlnterval ( ) подобно методу setTimeout ( } использует два параметра. Первый параметр — предложение JavaScript, которое необходимо выполнить, а второй — время задержки выполнения предложения JavaScript в милли-

секундах. Первый параметр, как и в случае функции setTimeout ( ) , заключается в кавычки. Временные задержки, созданные с использованием метода s e t l n t e r v a l ) } , будут циклически срабатывать до тех пор, пока не будет вызван соответствующий метод c l e a r I n t e r v a l ( ) . Более подробно этот метод рассматривается в данной главе, в разделе "Сброс таймеров JavaScript". В данном примере используется файл j s - s k e l e t o n . h t m l , но описанные действия можно применить к любому файлу.

ЗАДАНИЕ РЕГУЛЯРНЫХ ВРЕМЕННЫХ ИНТЕРВАЛОВ ; ; Файл

</head> <b

Древка

бив

Й»*Р*»**>

Cspwc

! '•** - - ' * ' - ' 'Ф K'-'-.vv-

"-•:•• .'•

Осиио*и*ь

Справка

' ^

Обнови*

& .!

Дл-ю*

Поиск

«criBt laiHiuaae-"1av«criDl">

fecunent. f o r m . t e x t l .value" JplMV

'.&

Избранно*

; 'ftftpec |й1 Е-Ч5В\Примвры\Г1иы* • Упг-иплин; чсиом грогрвм|д|ч.в»1п1«и1 h'rJ ]

Ждаиап

Гйчвъ

-3 '-••>

Г .мне

"j (^Перв«м ; !Ссы*м **

Ввод )веол

k/f.r.>

</htnI>

t* lensss

Ц Откройте -И Задайте первый с помощью программы параметр функции Блокнот файл setlnterval ( ) таким j s-skeleton.html. образом, чтобы второе текстовое окно обновлялось -Н Включите с использованием в сценарии метод содержимого первого окна. setlnterval ( ) . -И В качестве второго в сценарий форму с двумя текстовыми окнами.

s e t l n t e r v a l ( ) задайте значение временного интервала. -||| Сохраните файл под именем setlnterval.html.

броузера файл

С";"

setlnterval.html.

; ' ':".' \3'"*»"""-^

отображаются два текстовых окна.

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

Г~

В главе 10 рассматривается объект Date. Он включает метод getLocaleString ( ) , который предоставляет в качестве результата текущее местное время. С помощью этого метода, а также метода setlnterval ( ) можно создать "часы". Соответствующая программа на JavaScript приводится ниже.

Попробуй!

<form name="forml "> <input type="text" n a m e = " t e x t l " / > </form> <script language="javascript"> stop = w i n d o w . s e t l n t e r v a l ( " t i m e = new Date();document.forml.textl.value = time.toLocaleString()",1000); </script> Программа создает форму с одним текстовым окном. Временной интервал реакции для функции setlnterval ( ) устанавливается равным одной секунде. В каждом таком интервале формируется временной объект, значение которого отображается методом toLocaleString ( ) в текстовом окне. За счет применения метода setlnterval () значение времени обновляется каждую секунду.

;!;.-->

:-•-*: . .

.-.'»*

-. ••• -.-.

_l3 .

Остановит Ойювчть

•а

4 £омсй

s«u о»»- а* и«~™ ев»»- о»...

а .У j • j a • . •

; . to«]« : F 'J' Р'Ло,„,„М „„. < . и„„,™ „.^^Р™,»*™.

••"«

*• :

' --•"-.

•* •'

C'nSKWwra

J ']?>гл^|

ij Ди»Я

rt xi

i*".!*.1 V.SB5rr-/~"4 •b"^'— «~ ""-=«-' - »

^ <*P«r^J'.Csr~1." J

Б,0„||С^„й,„с,р„„е

И*£*-м*

ж..^им

,j™..

•

-~t

Прагь

.3 - ~

Пгзавеа

J -р-Пгака

Со*-,,»

' ..

«jr.™.

. -

-Q Введите в первое окно 1 1 Предложение какой-нибудь текст. setlnterval выполняется по истечении временного интервала, при этом второе текстовое поле обновляется.

И Гп««

J Введите в первое текстовое поле другой текст.

L :

и^нёём9м«юг(|> -. •

1 Текст во втором поле вновь обновляется.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СБРОС ТАЙМЕРОВ JAVASCRIPT

разделе "Использование таймеров JavaSpript" было показано, что с помощью кнопки Остановить (Stop) броузера снять временные задеряфш нельзя. Их можно сбросить только внутри программы с помощью метода с learTimeout ( ) . Этот|метод представляет собой часть объекта window, и в текущем окне к нему можно обратиться с помощью оператора window, с learTimeout ( ) . Чтобы воспользоваться методом с learTimeout ( ) , задаваемой временной задержке необходимо присвоить имя. Сделать это можно, присвоив ссылку на метод setTimeout ( ) имени переменной.

1 0 0 0 ) , таймер можно сбросить в любой момент с помощью оператора clearTimeout ( t i m e r l ) . Аналогичный метод может использоваться для отмены временных интервалов, установленных с помощью метода s e t l n t e r v a l ( ) . Это метод clearlnterval().

В данном примере используется файл setlnterval . html, но описанные действия можно применить к любому файлу.

Впоследствии имя переменной можно использовать в качестве параметра метода clearTimeout ( ) для отмены задержки. Например, если ссылка на "таймер" присвоена переменной наподобие timer1 = setTimeout(x++,

СБРОС ТАЙМЕРОВ JAVASCRIPT <htnl> <head> /head)

;

'о "I ..... а .......... и ..... I ..... а 'и

сгиижт.

П^>

ч i • Граблен.; чмон програм-^crealnlerv

Ц Откройте с помощью —Q Задайте в качестве программы Блокнот файл результата события setlnterval.html. onclick(щелкнув левой кнопкой мыши на Добавьте в сценарий кнопке формы) вызов новую переменную метода и присвойте ей ссылку clearlnterval(). на метод setlnterval(). •И Сохраните файл под именем -И Добавьте в форму clearlnterval.html. кнопку, подключив к ней обработчик событий onclick.

-И Откройте в окне броузера файл clearlnterval .html. Введите в первое текстовое поле некоторый текст.

Текст во втором текстовом поле обновляется.

.а

ГЛАВА 4. УПРАВЛЕНИЕ ХОДОМ ВЫПОЛНЕНИЯ ПРОГРАММЫ

. ...,

Попробуй!

Пример программы для часов, приведенный в разделе "Задание регулярных временных интервалов", можно модифицировать, добавив кнопку, которая останавливает часы. Ниже приводится фрагмент программы, в котором добавляется такая кнопка (Stop). <form name="forml"> <input type="text" name="textl"/> <input type="button" name="buttonl" value="Stop" onelick="window.clearInterval(stop)"/> </form> <script language="javascript"> stop = window.setlnterval("time = new Date();document.forml.textl.value = time.toLocaleStringO " Д О О О ) ; </script> В приведенной программе в форму добавляется кнопка, связанная с обработчиком событий onclick. Обработчик onclick предназначен для инициирования сброса временного интервала с помощью метода clearlnterval ( ) . Параметр метода clearlnterval ( ) имя переменной, которая ссылается на метод setlnterval ( ) .

Осипович • 'OeHOwev

Домой

Поил

Иэфаино*

Ж.»нал

Печвгь

'V»**

Ой«вИТ1.-

Домой

(5 чи

:,з i «* : a . -*.-)(»«.'

Печать

"р**? *

•,„,,

-И Щелкните на кнопке. Ш Действие метода setlnterval( ) прекращено.

—Q Введите в первое текстовое поле некоторый текст.

Текст во втором текстовом поле больше не обновляется.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБЪЯВЛЕНИЕ ФУНКЦИЙ

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

Все предложения JavaScript, входящие в функцию, должны быть заключены в фигурные скобки, следующие после объявления функции. Операторы функции могут быть выполнены только через вызов функции. Имена функций подчиняются тем же ограничениям и удовлетворяют тем же требованиям, что и переменные, а именно: они должны начинаться с буквы, не должны содержать пробелов и специальных символов наподобие + , * , / , & , % , $ , # , @ и !. Следует также помнить, что имена функций зависят от используемого при вводе символов регистра клавиатуры. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОБЪЯВЛЕНИЕ ФУНКЦИЙ <ЙЙЧ'*" HgieiJS'f Псист

<htnl>

Ov**»a

flw»,

</head> <body>

—i «.cum asgsjn <Ч

J>t

]

И«вГ**«в ^flppexte • 'Cw*« '

•"jaUJSCrjpt">

"""" """° """"

<l с Tpt> </bo у C/htHl

| Ц Откройте с помощью ~Н За объявлением программы Блокнот файл функции укажите js-skeleton. html. оператор JavaScript в фигурных скобках.

Я Введите новое ОТТПРТТР.ЛРНИР. divHKiiHH

— Р1 ППХПЯНИТР. гЪяйп гтпгг

с помощью ключевого именем function.html. слова function и имени.

•И Откройте в окне броузера файл function.html.

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

ГЛАВА 5. РАБОТА С ФУНКЦИЯМИ

ВЫЗОВ ФУНКЦИИ

Е!

\cЛи функция объявлена, ее можно выполнить в любой момент, поместив обращение ^ ; к ней в нужном месте документа. Независимо от того, имеет ли функция параметры, при вызове функции после ее имени необходимо указать круглые скобки. Например, если функция определена как function hel Io ( ) , выполнить ее можно с помощью оператора hello ( ) ,-. Обратиться к функции можно как до, так и после ее объявления. В приведенном ниже примере используется файл f u n c t i o n . h t m l , созданный в разделе "Объявление функций", однако описанные действия применимы к любому файлу.

Что еще?

Воспользовавшись ключевым словом javascript:, можно вызвать функцию по HTML-ссылке с помощью атрибута href HTML-дескриптора <а>. Более подробно этот способ вызова функций описывается в разделе "Вызов функции по HTMLссылке" далее в этой главе.

ВЫЗОВ ФУНКЦИИ •ЕШЗ i 1 £<йп

HJH»«

&на

Избранное

., ;

:-• ' '

Сдахс •. Справка

! *• . -»" . ;э "а . 4 "' OtTS~aei-"t

Обновить

Домой

- ' Г таг

±1

Иэфмпое

Sf-.f*aa

Печать

Ирина

^j f?fTBpe«*i

' ifiacecji:' F ,SB Jl[M.-*C"- Vwa5 -PafSnsc «а^Цчям^ипс Bon-eal Ыт||

Cc»-»)-"

атъ|

слунать, но иножа нужно уметь только

„,_,„„„ _..„

Сохраните файл Д Откройте с помощью программы Блокнот файл под именем function.html. function-call.html. —И После предложения объявления функции введите в сценарий вызов функции.

,„„.

, — ,.

-ft ОТКПОЙТР R окнй

броузера файл function-call.html.

;

iSjIweiiiiSMWOTep

1 ОпРПЯТОПЫ fbVHKTTHH

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОНЯТИЕ ГЛОБАЛЬНЫХ (КАЛЬНЫХ ПЕРЕМЕННЫХ

Переменные, объявленные вне функции (даже если в их объявлении использовано ключевое слово var), также будут глобальными. Их можно использовать в любом месте текущего документа, как внутри, так и вне функций. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные ниже действия применимы к любому файлу.

еременные, объявленные внутри функции ^помощью ключевого слова var, являются фокальными по отношению к функции, в которой они введены. Они будут "видимы" только внутри функции и не будут распознаваться ни в одном из предложений языка JavaScript вне функции. Например, если переменная myVarl объявлена в теле функции с помощью оператора var, то переменная может использоваться внутри функции, однако если сослаться на эту переменную вне функции, ее значение будет неизвестно. Переменные, объявленные внутри функции без ключевого слова var, называются глобальными. ПОНЯТИЕ ГЛОБАЛЬНЫХ И ЛОКАЛЬНЫХ ПЕРЕМЕННЫХ

-а ipt languagelanguag ]auasci-ipt"> Гости вэ нашего дома. Корина Анна Гости не из нашего дома. Корина Аи

</script> /D°dy> /htnl>

Ц Откройте с помощью —И Добавьте оператор программы Блокнот файл выполнения функции. js-skeleton.html.

-Я Введите две новые переменные с использованием ключевого слова var. -И Введите в сценарий функцию, включающую предложение document.write, которое отображает значения объявленных переменных.

—И Введите еще один оператор document .write вне функции для отображения значений переменных. Сохраните файл под именем global . html .

—Q Откройте в окне броузера файл global.html.

Отображаемые переменные являются глобальными, поскольку они объявлены вне функции и могут использоваться как внутри, так и вне функции.

ГЛАВА 5. РАБОТА С ФУНКЦИЯМИ

С Что еще?

<htnl>

Удобный способ наблюдения за глобальными и локальными переменными в программе состоит в том, чтобы принять определенное соглашение об именовании переменных, которое помогает сразу судить об области видимости той или иной переменной. Например, если ъ начале имени каждой глобальной переменной использовать строчную букву g (от англ, global — "глобальный". Прим. ред.), как в случае переменной gVarl, переменную можно идентифицировать как глобальную, просто взглянув на ее имя. Одна из причин использования локальных переменных заключается в стремлении строить такие функции, которые можно было бы легко использовать по-

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

[ рствповйгь

f u n c t i o n housed <

Ойновить

С-эмеб

ft*

Гостк из нашего лома Корина Анн

\air (jUfst! • "Янн,. ";

"<br "): о sen; 0 umpnt.wlterTocTH не it

намего вомл: • » g u e s t l . guest2 •

</ с ipt>

(/ktM

Ц Откройте с помощью -И Сохраните файл под программы Блокнот файл именем local . html. global .html. Замечание. Теперь ~Н Переместите переменные стали объявления двух локальными по переменных внутрь тела отношению к функции, функции. поскольку они объявлены с использованием ключевого слова var и помещены в тело функции.

-И Откройте в окне броузера файл local.html. • Появляется диалоговое окно с сообщением об ошибке в Webстранице.

—И Для просмотра информации об ошибке щелкните на кнопке Показать Подробности. •Ш Обратите внимание, что локальные переменные при использовании в операторе document.write вне функции рассматриваются как неопределенные.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАН

ПЕРЕДАЧА ПАРАМЕТРОВ ФУНКЦИИ

;сли функцию необходимо выполнять при различных значениях переменных, эти значения можно передать функции в качестве параметров. Параметры передаются функции в скобках после имени функции. Функции можно передать значения нескольких переменных, разделив их запятыми. Оператор вызова функции может включать значения, а определение функции может содержать имена переменных. Эти переменные можно использовать внутри функции. Количество значе-

ний в вызове функции должно соответствовать количеству переменных в определении функции. Например, если функция определяется как function s u m ( a , b, с ) , то оператор вызова функции sum (16, 34, 98) поместит значение 16 в переменную а, 34 — в переменную b и 98 — в переменную с. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПЕРЕДАЧА ПАРАМЕТРОВ ФУНКЦИИ i , ЗДий Двмм

£«1

• ;

- •.••-,.:

£|»бмпн0в

ii *•.•. , •* , & ;- - •-•-;

•-&И*е|*М t v. ::' I . . . . , , .

L'jpewc

£гаде*а

' Остановить О&юдоь

Д(«ей

-,^,--. о&ысъуъьчыЁ^лгн

Передайте, пожалуйста, шасле Передайте, пожалуйста, соль

и ,i -а :

Тнн|

Поиск

Иаф*нчм

^ .;, =*

Журнал

;

Печать

а . " а

Преем'1 .

-} f>t\r -woo

;Ccbi(*j-"

ГМППРГ Fwnnei . '

щк~

Ц Откройте с помощью • В данном примере программы Блокнот файл используется параметр item. j s-skeleton.html. Введите функцию с одним параметром, которая отображает сообщение и выводит значение параметра.

Введите в сценарий несколько обращений к функции, каждое со своим значением параметра. -Н Сохраните файл под именем parameters . html.

'-""

-И Откройте в окне броузера файл parameters .html.

""'" '

: ^Мо(1ГОЧПь«ЭТЧ1

• Каждый раз при вызове функция выполняется заново с другим значением.

ГЛАВА 5. РАБОТА С ФУНКЦИЯМИ

С еще?

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

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

•ЕШШ if

| Среднее PT 34 56 7S равис 56 igcunent.Nriter'cpeiHec с i • « ave * •ХЬг>"); <7U,'ipT </t,ay. </ht«i:

Q Откройте с помощью -И Введите в сценарий программы Блокнот файл вызов функции. j s-skeleton.html. -Н Сохраните файл под именем -И Введите функцию parameters2.html. с несколькими параметрами, которая вычисляет и выводит значение параметра.

-И Откройте в окне броузера файл parameters2.html.

• Вычисленные значения зависят от значений, передаваемых функции.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ЗНАЧЕНИЙ ФУНКЦИЕЙ 1

ункции можно указать на необходимость (возвратить значение с помощью ключевоI го слова return. Это позволяет ей определить) результирующее значение и переслать его снова в основную программу. Например, если в программу включена функция, вычисляющая некоторую сумму, и эта сумма запоминается в переменной t o t a l , оператор return total отправляет значение total в то место в программе, из которого было выполнено обращение к функции. Поскольку значение передается обратно в точку вызова функции, вызов функции должен представлять собой оператор, в котором это возвращаемое значение каким-либо образом используется. Например, оператор varl = fund ( ) поместит

значение, возвращаемое функцией fund ( ) в переменную varl. Функция может возвращать данные строкового и численного типов, а также любые другие значения. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ВОЗВРАТ ЗНАЧЕНИЙ ФУНКЦИЕЙ

</head> <body> tpt language-"jauascript">

П Откройте с помощью -И Введите еще один программы Блокнот файл оператор

j s -skeleton.html.

-И Введите функцию с несколькими параметрами, которая вычисляет значение. -И Добавьте в тело функции оператор return, который возвращает результирующее значение.

document.write, содержащий вызов функции и отображающий результирующее значение.

-И Сохраните файл под именем return. html.

—И Откройте в окне броузера файл return.html.

На экран выводится возвращаемое значение.

ГЛАВА 5. РАБОТА С ФУНКЦИЯМИ

Попробуй!

Хорошей иллюстрацией функции, возвращающей значение, является функция, которая получает параметры, вычисляет результат решения уравнения и возвращает результирующее значение. Вот пример функции, которая вычисляет и возвращает вычисленный объем коробки при заданных параметрах ширины, высоты и глубины. function computeArea (width, height, depth) { /*Параметры функции: width — ширина, height -- высота и depth — глубина*/ area = width * height * depth; return area; Если эту функцию включить в файл Web-страницы, к ней можно будет обратиться с помощью следующего оператора. computeArea (3 , 4 , 5 ) ; Результат выполнения функции возвращается непосредственно в точку вызова функции и может быть использован, например, в следующем предложении. document .write ( "Объем коробки

с размерами " + width + " , " + height + " , " + depth + " равен " + computeArea (3 , 4, 5) ) ;

• Jnlxl

'head? </head> <tioily>

h°-r".r^ ГТНГТ1? Н««»«Й..НЧ5»>П|>™».^—!5-Р^1.сФ»«и«»,)««.пгь^|

3 'fete**

kQ r»~

Ц Откройте с помощью программы Блокнот файл js-skeleton .html. Введите функцию, которой передается один строковый параметр.

— Q Укажите эту переменную в качестве возвращаемого значения в операторе return.

—И Воспользуйтесь оператором —И Заключите строковый document .write для параметр в набор HTMLвывода возвращаемой дескрипторов и присвойте строки. его значение возвращаемой Сохраните файл переменной. под именем return2 .html.

-И Откройте в окне броузера файл return2.html.

•

!i)-««-«N,

••:-.

1 1 Строка, переданная функции в качестве параметра, возвращена в отформатированном виде. Замечание. Функция, которая возвращает необходимое значение, может быть включена непосредственно в оператор JavaScript.

6-1747

Попробуй!

Спети.»

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ВЫЗОВ ФУНКЦИИ ПО HTML-ССЫЛКЕ

ункцию можно вызвать, указав ее имя в; качестве оператора JavaScript. Функцию JavaScript можно также вызвать, указав ее имя в HTML-ссылке. Для этого нужно воспользоваться ключевым словом javascript, за которым следуют двоеточие и имя функции. Например, если ссылка определена с помощью дескриптора <а>, а атрибут href установлен равным j a v a s c r i p t : hello ( ) , то после щелчка на ссылке будет вызвана функция hello (). Эту же форму обращения к функции можно использовать для вызова функции из поля Адрес броузера. Если в это поле ввести ключевое слово

javascript: и имя функции, то соответствующая функция выполнится. В приведенном ниже примере используется файл function.html, созданный в разделе "Объявление функций", однако описанные действия применимы к любому файлу.

ВЫЗОВ ФУНКЦИИ ПО HTML-ССЫЛКЕ г.» см». e« o«sw '(*«* о»» (/head :body>

*•'•'• •* ":. a

pf * pt language-'-jj ction quoteO < ocuiwnt.MrlteC'HyKHo у

."):

4 . 4»' ' iaf " з • '^

J <-'r-m>; COOO4 ".

S^»|*'- ,.,ВЛ„~.о.,\Г,.,.5.р,лот,СФ,.,«^4'л,1т:| ) иногда нужно уметь 1

-ran

a - "

- |:[.T mnay^LM arvn,-w UIITalv 1

•I

•азда^герэдвдав»..^^

Ц Откройте с помощью — Q Установите первый программы Блокнот файл атрибут href равным function.html. ключевому слову

—И Вне дескриптора <script> введите два дескриптора <а> и включите некоторый ссылочный текст. -И В каждый набор дескрипторов <а> ттпбавьте атрибут href.

javascript : , за которым следует имя функции.

-И Откройте в окне J Щелкните на броузера файл h r e f . h t m l . п ервой ссылке. отображаются две ссылки.

Установите второй атрибут href равным ключевому слову javascript.: , за которым следует оператор JavaScript.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБРАБОТЧИКОВ СОБЫТИИ JAVASCRIPT

СОБЫТИЯ, ГЕНЕРИРУЕМЫЕ МЫШЬЮ

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

ГЛАВА 5. РАБОТА С ФУНКЦИЯМИ

., „

Попробуй!

Вызов функции можно разместить и в другом месте HTML-страницы - - в атрибуте action дескриптора <f orm>, например так, как показано ниже. function hello ( ) { document .write ( "Привет и добро пожаловать"); <f orm ас tion=" javascript : hello ( ) "> <input type=" submit " value=" Отобразить приветствие " / > </f orm> HTML-форма отображает в окне броузера кнопку подачи запроса, помеченную как "Отобразить приветствие". Щелчок на кнопке инициирует выполнение функции hello ( } , которая отображает сообщение приветствия.

„-

—

Замечание. Если щелкнуть на HTMLссылке, будет вызвана функция, которая выводит на экран фразу.

Н*ыс

• :("'-.- :•;

Иявр**юв

Свс*"=

£псмя»а

ai' " 1

Осгаиотить

Овн?вип>

'и

Л**ш

ЧЙ1Ч«с|^^ Е MSB^puHepBiyfaesS- Работа с «*»m«»*^ef ^rn

Поиск

"з :' "3 а .

И»Йрв»*ов . Xgf«M

Пв-«гв

1 Щелкните на кнопке броузера Назад.

Пм«4

j j ^R«***» : Семки

• Функция выполняется, и в окне броузера отображается фраза.

8«<

н'7* Г' * :

Д] с'П'»™ :со.™-

i f Э**". DP*"*»

-ill

4»«с)Г; MSB\Tp»m..J-,.M 5 . рлог. t «„un^rdhM

3 - "

1U . J i. J

ГИГ л^ЗгзГ Ж'; |i

ДЛ Щелкните на второй 1 1 Выполняется другой ссылке. о ператор JavaScript, к оторый выводит на э кран другую фразу.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБРАБОТЧИКОВ СОБЫТИЙJAVASCRIPT

бработчики событий JavaScript представляют собой небольшие подпрограммы, связывающие действия пользователей со сценариями, которые необходимо выполнить в ответ на эти действия. К таким действиям относятся щелчки мышью, нажатие клавиш клавиатуры, выбор или изменение элементов формы или даже загрузка и выгрузка Web-страницы. Обработчики событий JavaScript можно поместить в дескрипторы HTML так же, как и другие атрибуты. Обработку события можно отождествить со строкой программы JavaScript или с функцией JavaScript, объявленной в некотором месте Webстраницы. Например, обработчик события onclick можно ввести как атрибут дескриптора кнопки <button> и отождествить с функцией blink следующим образом. •cbutton onclick= "blink ( ) ; " / >

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

СОБЫТИЯ, ГЕНЕРИРУЕМЫЕ МЫШЬЮ

События, генерируемые мышью, происходят в тот момент, когда пользователь щелкает мышью или перемещает ее. Если пользователь щелкает кнопкой мыши один раз, срабатывает обработчик события onclick. Когда пользователь делает двойной щелчок, срабатывает обработчик события ondblclick. Для более тонкого управления можно воспользоваться обработчиками события onmousedown, которое происходит в тот момент, когда кнопка мыши нажимается, и события onmouseup, которое происходит при отпускании кнопки мыши. Событие onmouseover сигнализирует о том, что указатель мыши расположен на некотором элементе. Событие onmouseout происходит тогда, когда указатель мыши перемещается с элемента.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

СОБЫТИЯ, ГЕНЕРИРУЕМЫЕ КЛАВИАТУРОЙ

РАЗНОРОДНЫЕ СОБЫТИЯ

Событие onkeypress можно использовать для определения момента, когда клавиша на клавиатуре нажимается. Значение, соответствующее нажатой клавише, передается в объект window .event.keycode.

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

По аналогии со щелчком кнопкой мыши событие on key down срабатывает после того, как клавиша нажимается и удерживается в нажатом состоянии, а событие onkeyup сигнализирует о том, что нажатая клавиша отпущена. СОБЫТИЯ ВЫБОРА Когда элемент в окне броузера выделяется, говорят, что он получает фокус. Событие onf ocus используется для сигнализации о том, что элементу передан фокус. Нажав клавишу <ТаЬ>, можно изменить этот фокус. Когда элемент теряет фокус, срабатывает событие onblur. При выборе элемента срабатывает событие onselect.

Обработчик события onload используется для установления момента полной загрузки Webстраницы. Аналогично наступление события onunload свидетельствует о том, что Web-страница выгружена. Это происходит, когда пользователь покидает текущую страницу или щелкает на кнопке броузера Обновить (Refresh). При отмене операции загрузки Web-страницы в броузер вызывается обработчик события onabort. В HTML-формах имеются две кнопки (submit и reset), выполняющие специфические функции. Эти же функции можно инициировать с помощью обработчиков событий onsubmit и onreset.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБРАБОТКА ЩЕЛЧКА МЫШЬЮ

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

Обработчик события onclick обычно присоединяется к кнопкам формы, например таким, как submit и reset, созданным с помощью дескрипторов <input/> и/или <button>. Обработчик события onclick можно использовать и с дескриптором <а>. Событие onclick относится к разряду так называемых встроенных событий, которые распознаются большинством Web-элементов. Встроенные события представляют собой набор общеупотребительных событий, которые можно использовать с большинством стандартных дескрипторов HTML. В приведенном ниже примере используется файл s k e l e t o n . h t m l , однако описанные действия применимы к любому другому файлу.

ОБРАБОТКА ЩЕЛЧКА МЫШЬЮ Правка

Псмж

<input|ti f( ar

. .

tune-"button" nane^'4iutton1" yalue ^hlt^docui.,ent .f пгя1 .buttoi.1 .tialue-'

Ц Откройте с помощью В дескриптор программы Блокнот файл <input/> введите

skeleton.html.

атрибуты type, name и value.

-И Добавьте дескрипторы <f orm> —И Присвойте атрибуту и <input/> между type значение button, дескрипторами <body>. атрибуту name — значение buttonl, -И В дескриптор <f orm> а свойству value — введите атрибут name значение надписи на и присвойте ему кнопке. значение forml.

В дескриптор < input/> добавьте обработчик события onclick JavaScript.

Отождествите событие onclick с предложением JavaScript, которое изменяет текст надписи на кнопке. —И Сохраните файл под именем onclick.html.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

Г Что еще?

Событие onclick происходит при нажатии и отпускании кнопки мыши. Эти действия можно зафиксировать и по отдельности с помощью событий onmousedown и onmou-seup. Пользователь может нажать кнопку мыши и не отпускать ее. В таком случае событие onclick не сможет зафиксировать действие пользователя, зато это сделает событие onmousedown. Функции обработчиков событий onmousedown и onmouseup аналогичны функции обработчика события onclick. Эти со-

бытия также относятся к разряду внутренних событий, которые можно использовать с большинством дескрипторов HTML. Для фиксации двойного щелчка мышью в JavaScript существует специальное событие. Дело в том, что событие onclick предназначено только для распознавания однократного щелчка мышью, поэтому для распознавания двойного щелчка введено свое событие - - ondb l c l i c k . Оно рассматривается в следующем разделе ("Обработка двойного щелчка").

В* й;во*«*» Сдоис Ёлем**

Щелкните на кнопке -Q Откройте с помощью программы Блокнот файл мышью. onclick.html. Ш В окне броузера выводится изображение одной кнопки.

а .

Надпись на кнопке изменяется в соответствии с оператором JavaScript, присоединенным к обработчику события onclick.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБРАБОТКА ДВОЙНОГО ЩЕЛЧКА

точки зрения обработки событий двойной щелчок мышью очень похож на одинарный, но пользователь быстро нажимает кнопку не один раз, а два. Двойной щелчок мышью можно зафиксировать с помощью события ondblclick. Обработчик этого события можно ввести в те же элементы, что и событие onclick, включая дескрипторы <input/>,<button> и <а>. Событие ondblclick также относится к категории встроенных. Это означает, что его можно использовать практически со всеми элементами Web-страниц.

Двойной щелчок мышью может придать кнопке двойную функциональную нагрузку. Если связать событие onclick с обработкой одной последовательности команд, а событие ondblclick — с обработкой другой последовательности команд, то один и тот же элемент интерфейса наподобие кнопки можно применять для выполнения двойной работы. В приведенном ниже примере используется файл onclick.html, созданный в разделе "Обработка щелчка мышью", однако описанные действия применимы к любому файлу.

ОБРАБОТКА ДВОЙНОГО ЩЕЛЧКА <P-iSn . |1и«*-в^ Ионе.

Слр*в*в

. .•

<htnl>

..а

ггаиммть

</he«d> <body>

j . -а

Ойноямт*

Домоз

«: -у

Поя.'*

Ичбгчим

-л

Жур-чп

- •''_'' • • • '" * mffcirij'.ori±itclicti ritd \

' -^Йг^ C/body>

</htnl>

Д Откройте с помощью -И Отождествите программы Блокнот файл обработчик события onclick.html. ondblclick с предложением -И За обработчиком JavaScript, события onclick предназначенным для поместите обработчик изменения надписи на события ondblclick. кнопке. Сохраните файл под именем ondblclick.html.

—И Откройте в окне броузера файл ondblclick.html. • В окне броузера выводится изображение одной кнопки.

| Щелкните на кнопке мышью.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

,..._ с

Что еще?

| • %,Ла

"'£• l»*(C''

8&т*

£*а

Навранное

Если наступает событие опdblclick, то наступает и событие onclick, поскольку событие onclick срабатывает всякий раз при щелчке мышью (даже в том случае, если зафиксировано событие ondblclick). Один дескриптор может содержать несколько обработчиков событий. Соответствующие события обрабатываются в том порядке, в котором они перечислены в тексте программы. Например, если дескриптор

Сй»мс

фгравка

включает как событие onclick, так и событие ondblclick, оба события будут обрабатываться при каждом быстром двойном щелчке на элементе. Встроенные события — это набор событий, которые можно ввести практически во все Web-элементы. К встроенным событиям относятся onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown и onkeyup.

ЕЯ

£*»Я

:•! !.-~l, , . »

-1-

„

\fjfSST

• Надпись на кнопке изменяется.

"~\ ' ' " i^MtAKwibKjrep

|| Дважды щелкните на к нопке мышью.

™:

&«**«« . йрвнс

^' Т S

'* •*;?.;- . • Остановить

Еор»»Л

W- ' й~ г '"й" V5

ОйиовкГв

' Дэтой

=' ' Пою

J 1 '-Ji

Иафвикм" Ж«иал

веж j«j E'Mb3\npk»«!ipB,y-flae9 E - Свравсгги собыг-ЙЧпгйЫсЬс* Wm,

JrJ <««»•» jCt««. »

1ШШ

£рм*4

**• '

••"* -<JL» oJ». 1Й. ; - n£ \b£L "*^ i nrfl- fiL • *

^- ь -

Пвчвгь

• ggj|

J '.

Поа»-»

j j ^?ПврвяМ

Da>m« "

• '•

Jforoec-

• Надпись на кнопке изменяется в соответствии с оператором JavaScript, присоединенным к обработчику события ondblclick.

^Мслкомтьдаео

zJ ..

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СОЗДАНИЕ ПЕРЕВОРАЧИВАЮЩИХСЯ КНОПОК

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

Использование обработчиков событий onmouseover и onmouseout приводит к тому, что при расположении указателя мыши на кнопке появляется новое изображение, а после того как указатель убран с кнопки, она принимает прежний вид. Обработчики событий onmouseover и onmouseout можно использовать с гипертекстовыми ссылками, картами отображения изображений и изображениями. В приведенном ниже примере используется файл s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

СОЗДАНИЕ ПЕРЕВОРАЧИВАЮЩИХСЯ КНОПОК f <hr«l>|_ £;*** •

- JTT;

Д Откройте с помощью — Q Присоедините программы Блокнот файл к обработчику событий skeleton.html. onmouseover процедуру загрузки другого -И Добавьте в сценарий изображения. дескриптор <img/>. Присоедините —И В дескриптор <img/> к обработчику событий введите атрибут src onmouseout процедуру и присвойте ему загрузки другого в качестве значения имя изображения. файла. —И Сохраните файл под -И Введите обработчики именем rollover.html. событий onmouseover и onmouseout.

Лога,

3 ,

ККЙЯГ"

—И Откройте в окне броузера файл rollover.html.

В окне броузера выводится единственное изображение.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

с~

Что еще?

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

мещении мыши. Это означает, что событие onmousemove срабатывает как при наступлении события onmouseover, так и при наступлении события onmouseout. Данное событие особенно полезно, когда необходимо определить, применяет ли пользователь компьютер. Обработчики событий onmouseover и onmouseout можно поместить в дескриптор <р>. Используя этот дескриптор, можно выполнить операторы JavaScript, позволяющие "перевернуть" текст с помощью мыши.

• 5>вйя "£Ь*в*» 8 * йм&*»«в сервис ОФмм '•': У . П«*вт»

" •"*•""" . •• • •. .

Я ' Правке

;г: »: ' .-..' : • ;5 3* :; W] 5? 5 'Э 1 :di' ИР иагнеяяаъ Обгчииго iiOMsi ; Пснсг Ияврвньо* Xy*w • Лмвть Правка

M.ck:tvs,,:i»«w»-™,E:o«»«=.«^,1v,,*,..n.M

J .^пто,» to*. -

GO!

_j i Готово

| Расгсоложите указатель мыши над изображением.

Изображение изменяется, принимая вид, который определен обработчиком события onmouseover.

ilil Переместите указатель мыши с изображения.

1Д««.»П."'В

• Изображение принимает первоначальный вид.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

НАЖАТИИ КЛАВИШ 1екст можно ввести в текстовое поле или элемент textarea с помощью клавиатуры, иногда возникает необходимость зафиксировать нажатие одной клавиши, например клавиши, позволяющей запустить определенную функцию. Нажатие клавиши на клавиатуре можно зафиксировать с помощью события onkeypress. Код конкретной нажатой клавиши может быть идентифицирован с помощью объекта window. event.keyCode. Используя обработчик события onkeypress, можно установить, какая из клавиш была нажата, и соответствующим образом отреагировать.

Событие onkeypress относится к встроенным событиям, поэтому его можно использовать с большинством Web-элементов. С помощью обработчика события onkeypress можно назначить всем элементам интерфейса "горячие клавиши". За счет этого пользователи могут перемещаться по интерфейсу, применяя только клавиатуру. Это также позволяет работать с вашим Web-узлом людям с физическими недостатками. В приведенном ниже примере используется файл skeleton.html, однако описанные действия применимы к любому файлу.

ОБРАБОТКА НАЖАТИИ КЛАВИШ

</forS> </body>

Q Откройте с помощью -0 В дескриптор программы Блокнот файл <input/> введите skeleton.html. атрибуты type, name

и value. -И Добавьте дескрипторы <form> —И Присвойте атрибуту и <input/> между type значение text, дескрипторами <body>. атрибуту name — значение textl, -И В дескриптор <form> а свойству value — введите атрибут name строковое значение из и присвойте ему текстового поля. значение forml.

>1 .t<*tl .ualu«-'

-Q В дескриптор < input /> добавьте обработчик события onkeypress. Отождествите событие onkeypress с предложением if JavaScript, которое проверяет значение объекта window . event . keyCode и при верно нажатой клавише отображает определенный текст.

| Сохраните файл под именем onkeypress.html.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

Г Что еще?

; . £«йл

Винил

В«Л

В^вовиво*

Сейме

События onkeydown и onkeyup во многом подобны событиям onmousedown и onmouseup. Не исключена ситуация, при которой пользователь нажимает клавишу на клавиатуре и не отпускает ее. Обработчик события onkeydown может зафиксировать данное действие, в то время как обработчик события onkeypress не сможет сделать этого до тех пор, пока клавиша на клавиатуре не будет окончательно освобождена.

&Ф«<*

: £•.' "i" W SF '3 ':""$

;

•

••"—»•»$.

Octwoeuts Обновит»

Двмой

Пиигк

Набоммо*

-л Т -J

Ждош

i .&ИИ*|*:Е Ч5В\Грим«рыУпаеае ПЙмбта сойь™Г^е£и^^|

|Eg«£

.£ff;^»r'"r~?'~"

;

П*чоъ

э ."

Пыекв

^J (?П«о»ав 'iCcw***

События onkeydown и onkeyup всегда срабатывают одновременно с событием onkeypress, однако событие onkeydown фиксируется раньше события onkeyup. Если обработчик события onkeypress присоединяется к двум или более элементам, событие фиксируется только в том случае, если элемент получает фокус. Фокус элемента можно изменить с помощью клавиши <ТаЬ>.

-•' ;,-jv

;;,:

Оствнсвл-в

Ойнетвдга

Дмл*

Пана.

• :4to*ij^, £ и56\Ррнмеры\Глава6-Обрвботиасобы™й\ог*еургвч.Ыл11

HsCpe»*»

Жярил

ГЬчвть

Преем

^J 4*0w*"raie

C*w«f "

"~1

~ ^

zi |

f^JMoflnOtwuon* •

-0 Откройте с помощью [ j] Щелкните на программы Блокнот файл т екстовом поле, чтобы onkeypress.html. передать ему фокус. • В окне броузера выводится одно текстовое поле.

Zp——;

•

Q Нажмите клавишу <D>.

,..., щщй^

1 1 Текст обновляется, принимая вид, который задан с помощью обработчика onkeypress.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

УСТАНОВКА ФОКУСА

окус определяет, на какой из элементов формы будет оказано воздействие при нажатии той или иной клавиши клавиатуры. Например, если кнопка получает фокус и вы нажимаете клавишу <Enter>, реакция будет такой же, как после щелчка мышью на кнопке. С помощью HTML можно установить порядок перехода между элементами формы по клавише табуляции. Используя клавишу <ТаЬ>, можно перемещать фокус между различными элементами формы. По мере перемещения фокуса от одного элемента к другому вы с помощью события onf ocus можете определить, получил ли элемент фокус. Ис-

пользуя обработчик события onblur, можно предусмотреть выполнение некоторого действия как результат потери фокуса элементом. Обработчики событий onfocus и onblur можно использовать с дескрипторами <select>, <input/> и <textarea>, а также с дескриптором <frameset>.

В приведенном ниже примере используется файл onkeypress.html, созданный в разделе "Обработка нажатий клавиш", однако описанные действия применимы к любому файлу.

УСТАНОВКА ФОКУСА £айг- Цр**.а £« Избранное Сдееие

FFh

"™~1onJ>lui"TdocUftent -Form лекм . u a l u e ^ ' B O T . потерял е г о . ' : " / >

</forn> </body> </ht(4>

Ц Откройте с помощью ~Н Измените атрибут программы Блокнот файл name во втором onkeypress .html. дескрипторе <input/>. -И Замените событие -И Отождествите onkeypress событиями обработчики событий onfocus и onblur. onfocus и onblur с оператором, -И Скопируйте изменяющим значение дескриптор < input /> текстового поля. и вставьте еще одну его копию в дескриптор -0 Сохраните файл под именем onfocus .html. <body>.

чн броузера файл onfocus.html

поля появляются на экране один рядом с другим.

-И Щелкните на левом поле, чтобы передать ему фокус.

ГЛАВА 6. ОБРАБОТКА СОБЫТИЙ

Что еще?

Обработчик события onselect можно использовать с текстовым полем или элементами textarea для определения момента выбора раздела текста. После того как факт выделения текста установлен, можно работать с выделенным разделом, заменять, удалять или изменять его. В JavaScript существуют два события, позволяющие зафиксировать момент отмены данных, введенных в форму, или отправки данных формы на сервер для обработки сценарием. Это onreset и onsubmit. Событие onreset насту-

пает после щелчка на кнопке Сброс (Reset), а событие onsubmit — после щелчка на кнопке Подача запроса (Submit). С помощью соответствующих обработчиков событий можно заменить действия, предусмотренные в HTML по умолчанию, в случае использования этих кнопок. Одним из примеров ситуаций, в которых необходимо знать, обладает ли элемент фокусом, является ситуация, когда предпринимается попытка определить нажатие клавиши, поскольку событие onkeypress срабатывает только для элемента, имеющего фокус.

£<й"

Сряжа

"" ""' BMI

gsdpawe*

Сдамс

tftaen

Осгйновнп, ' Збповига ; MMCiCUMSPr..^,,, , . „ - i cu.:«»caWM.b>*xulM_

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

•&

П»

LSI

га

Првпл

^ <i П.М*» . ; Сс„«« »

^^^^^~J~^ ^щ

I ]ft»*>

Донки .

[Теперь фокус у меня |

У .

;

2|Mn*KOW*«(«.

.„;;

[ ] Щелкните на правом т зкстовом поле.

Текст изменяется в обоих полях: в первом — в соответствии с его обработчиком события onblur (поскольку оно теряет фокус), а во втором — в соответствии с его обработчиком события onf ocus (поскольку оно получает фокус).

Замечание. Событие onblur для второго текстового поля срабатывает, когда оно теряет фокус.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ФИКСАЦИЯ ИЗМЕНЕНИИ ЭЛЕМЕНТОВ ФОРМ

аиболее распространенным способом обеспечения возможности выбора пользователем одного из вариантов параметров приложения является предоставление ему списка элементов. Список для выбора можно создать в форме с помощью дескриптора <select>. Каждый отдельный элемент создается с использованием дескрипторов <option> внутри дескрипторов <select>. С помощью события onchange можно определить момент выбора элемента списка. Обработчик события onchange может зафиксировать момент изменения элемента формы. Событие onchange можно использовать в дескрипторах <select>, <input/> и <textarea>.

Обработчик события onchange, применяемый с текстовыми полями и элементами text area, фиксирует изменение текста в полях. С помощью этого события можно определить, обновлялся ли текст. При необходимости можно также проверить, заполнены ли соответствующие поля перед отправкой формы серверу. В приведенном ниже примере используется файл s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ФИКСАЦИЯ ИЗМЕНЕНИЙ ЭЛЕМЕНТОВ ФОРМ

Hyce</option> </optlon> iopT</option>

шоколадный мусс трюфели клубничный торт

<input type-"text" iMW"ti

'•<

Д Откройте с помощью —И В открывающий программы Блокнот файл дескриптор <select> skeleton . html. добавьте обработчик события onchange. -И Добавьте дескриптор Отождествите <f orm> с текстовым полем и набор обработчик события дескрипторов <select>. onchange с оператором, изменяющим текст В дескриптор в текстовом поле. <select> введите четыре набора -И Сохраните файл под дескрипторов <option> именем onchange . html. с текстом.

—Я Откройте в окне броузера файл onchange.html.

У*^~*

Два текстовых поля I появляются на экране одно рядом с другим.

ГЛАВА 6. ОБРАБОТКА СОБЫТИИ

Попробуй! Обработчик события onchange весьма

полезен для проверки правильности заполнения форм, поскольку это событие наступает при каждом изменении элемента формы. Например, если в форме присутствует текстовое поле, запрашивающее у пользователя целочисленное значение от 0 до 9, можно создать функцию, которая будет проверять правильность значения, введенного в текстовое поле. Подобная функция может, к примеру, иметь следующий вид. function intCheck(val) { if (val < О I I val > 9) document.alert("Это значение недопустимо. Пожалуйста, введите целое в пределах от 0 до 9 . " ) ;

; .ew~ 1 «.: i '.ISB^,.,^..,. E .ми*... Bf*^s«». «

Рпривет

4J f>l!r~ . '•»»""

.дца^^! |

;•

^^.(шиотар.

•

Текстовое поле обновляется в соответствии с заданием обработчика событий onchange.

]

> t f««»

3 Щелкните на второй <шции списка для ее »ыбора.

ИЗ 95

1 1 Текстовое поле о бновляется снова.

"П| •

zi .

кпувннчный горт

}

__ _ , первой опции списка для: ее выбора.

7-1747

W^HlE^^^»^™1.:.0?!^";!;"»^4^^1-1

клубочный юрт

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

-:^-:r--"5cy V: ^ „^ -•£ ^ - д-™

d „<>"!»"». 1 it?— "

ipay

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СОЗДАНИЕ СООБЩЕНИИ О ЗАГРУЗКЕ И ВЫГРУЗКЕ WEB-СТРАНИЦ

оскольку Web-страницы бывают довольно сложными, зачастую для их загрузки требуется длительное время. Это может привести пользователя в замешательство, поскольку он не знает, загрузилась ли страница полностью. С помощью события onload можно уведомить пользователя о том, что загрузка страницы полностью завершена. Обычно этот обработчик события размещается в дескрипторе <body>. Обработчик события onload также полезен для того, чтобы, прежде чем приступить к выполнению сценария на странице, убедиться, что вся графика с сервера загружена.

Существует еще одно событие, подобное событию onload. Это onunload. Оно наступает, когда пользователь покидает текущую страницу или выполняет сброс страницы с помощью кнопки броузера Обновить (Refresh). Обработчик события onunload можно применять для установления различных значений, принятых по умолчанию, или выдачи сообщений пользователям прежде, чем они покинут текущую страницу. В приведенном ниже примере используется файл s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

СОЗДАНИЕ СООБЩЕНИИ О ЗАГРУЗКЕ И ВЫГРУЗКЕ WEB-СТРАНИЦ <р»*л

|П|>«1!?

Пане*

<„1„14

Dp**.»

. | £**T!

-I

<Fiea<J>

Правка

ЕИИ

«•'

jlauMHtM

р' i:°».'^;ii°; y

' п""ч'с"' "'

- J r p y » l,cl. Lxi*,,tc,, по,о«.г»-/>

;

i£

•J.&i,

V«p«ftfiw\!

тавл

___

Домой -п'слЛгг-а

y-g• '

ЛЕЯ*-,*

Hrft^mo*

г-frn.f

jsnineehtnlj

..-™... ...... _^.. Ж.)ри4л "j.

Гвчв--*

f^flepBwu

_~ Г:*»ьа

;

; "

Со*»и

</t>ody

Ц Откройте с помощью —И Добавьте обработчики программы Блокнот событий onload файл skeleton.html. и onunload. -И Добавьте —И Отождествите дескрипторы <form> событие onload и <input/> между с отображением дескрипторами <body>. сообщения в текстовом поле, а событие -И В дескриптор onunload — < input /> введите с отображением атрибуты type, name, предупреждающего s i z e и value диалогового окна. и установите их значения. —И Сохраните файл под именем onload. html.

uajet

£f*Heui

••£••;•;•••"£

Остановит* Обновить

- • !

Ся««

- 1Э

€]Гс««

-И Откройте в окне броузера файл onload.html.

:а«.««™

1 1 Пока Web-страница загружается, на экране отображается соответствующее сообщение.

ГЛАВА 6. ОБРАБОТКА СОБЫТИИ

Что еще?

В любой момент при загрузке Web-страницы в броузер пользователь может отменить загрузку, щелкнув на кнопке броузера Остановить (Stop). Это действие можно зафиксировать с помощью события ^onabort. С помощью обработчика события onabort можно проинформировать пользователя о том, что произойдет, если не все элементы страницы будут загружены. Событие onerror позволяет определить, не было ли в процессе загрузки ошибочных элементов. Если при загрузке изображения или страницы

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

G Обмбогм CD6tniMk\w*>dd.hM - ИпгахаП Inleinet Е

. Обквигь

Лемой

•

По* (?• Песета ; Ссылки '

]3агру;

После завершения загрузки Web-страницы сообщение обновляется.

Q Загрузите в броузер • Появляется окно отдельную Web-страницу. предупреждения с сообщением.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОНЯТИЯ ОБЪЕКТА, СВОЙСТВА И МЕТОДА

тобы раскрыть всю мощь языка JavaScript, прежде всего необходимо освоить понятие объект. Объект — это абстрактный контейнер для хранения данных. Эти данные могут быть простыми числами или иметь сложную структуру. В JavaScript можно создавать собственные объекты или использовать предопределенные объекты, такие как s t r i n g , frame, image, date и textarea. Объекты могут обладать свойствами, которые несут информацию о них. Например, объект document включает свойства, которые хранят информацию о цвете фона и заголовке страницы. К свойствам можно обращаться, поместив точку

между именем объекта и свойства, например, так:document.title. Объекты могут также обладать методами, которые представляют собой функции, реализующие специфические для данного объекта задачи. Например, объект document обладает методом w r i t e ( ) , который отображает значение переменной или строки, заключенной в круглые скобки. К методам можно обращаться так же, как к свойствам, например document. write ( ) . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПОНЯТИЯ ОБЪЕКТА, СВОЙСТВА И МЕТОДА

г•

Ц Откройте с помощью -Н В качестве программы Блокнот файл параметра метода document . w r i t e ( ) введите строковый -И Добавьте в дескриптор литерал и ссылку <body> атрибут b g C o l o r на свойство и присвойте ему значение document . bgColor, фонового цвета. поместив их в скобки после имени метода. —И В дескриптор <script > добавьте метод Сохраните файл под d o c u m e n t . w r i t e ( ) для именем ob j ect . html. отображения некоторого текста.

—И Откройте в окне броузера файл object.html.

Метод объекта document выводит значение свойства объекта.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

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

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

-Линек ' СпрмкА

$*й«

£>ае*в

|иа

-» ' .

Йэбр*яиое

Cfipenc

-3

Оетмлплп

£лрое-.л

Г}бм№т*

-2

Д'г.^тС

&&ес\& • Е и$ВЧГ(*«еры'Г>МБЗ 7 tkinMt .-JBof^t _^.:.т^ .otfti ^ -Iff

Цееттекста-черный(#ОООСОС) ]

a j^ ^ ; ^ ^ . " »| .{•'Птмл

Ссыжи*

TfifSS; "

_ Сохраните файл под Q Откройте с помощью программы Блокнот файл именем object2 .html. object.html. -И Замените свойство document.bgColor свойством document.fgColor.

-ПГ] Откройте в окне

броузера файл object2.html.

;

>'^j Ной г.омгкчгое

1 1 В окне броузера

отображается значение цвета переднего плана документа.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ ЭЛЕМЕНТОВ WEB-СТРАНИЦЫ олный набор объектов JavaScript, относящихся к элементам Web-страниц, называется | объектной моделью документа (Document Object Model — DOM). Наивысшим родительским объектом (объектом верхнего уровня JavaScript, который содержит подобъекты) DOM является объект window. Он включает все аспекты, имеющие отношение к окну броузера, например расположение Web-страниц и Журнал (History), который представляет собой список ранее посещенных страниц. Объект window также содержит объект document. Объект document, в свою очередь, включает все элементы, образующие Web-страницу, такие как ссылки, изображения и формы.

В объекте form имеется целый ряд объектов, представляющих различные элементы, которые можно поместить в форму, такие как text, textarea,password, button, radio, checkbox, select и combo. При прохождении дерева иерархии модели DOM на объекты можно ссылаться, как на подобъекты их родительских объектов. Например, ссылка на независимый переключатель (радиокнопку) в форме выглядит как window, document. form, radio. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ-ЭЛЕМЕНТОВ WEB-СТРАНИЦЫ

Домой

flow»

Извожное

<1приПуре-"Ы1»«п" иа1ие-"РтоЯРТ^Гть текст nclich>yocgnent-wite(document.farHl^rtal .yjlue < / t (!*•

П Откройте с помощью программы Блокнот файл j s-skeleton.html.

-И Обработчик события onclick для первой кнопки присоедините -Я Вслед за дескрипторами к методу. <script> добавьте форму -И Обработчик с элементом textarea. события onclick для -И С помощью второй кнопки дескрипторов <input/> присоедините добавьте в форму кнопки. к свойству. —Q В каждый дескриптор < input/> добавьте обработчик события onclick.

Сохраните файл под именем

ta_ob j ect . html.

-И Откройте в окне броузера файл ta_object.html. -• Элемент textarea отображается вместе с двумя кнопками.

| Щелкните на первой кнопке.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Что еще?

• - ••

Все элементы Web-страницы включены в родительский объект window. Поскольку существование этого объекта всегда предполагается по умолчанию, при обращении к его объектам, свойствам и методам необязательно включать его имя. Это относится, в частности, к объекту document. Например, на объект — независимый переключатель можно сослаться, как на объект document.form.radio, а не как на window.document .form.radio.

Oclartcwurn ОСнммт^

Еангл

Понэ<

Иэймнню

Хумал ;

: toHJfJ Е •ьа-Лв-юлГт... г Испо*,«~,=»«.™Ч.г<««п«

[мшшм

ll^r..:..-. ^~,,..„Ш

_,/),\ в1да»«п,т»«м |™*Jffi»Sfnsn|

Печаля

При указании объектов, используемых вне текущего документа, ссылка на объект window обязательна. Это относится, например, к таким объектам, как t i o n и h i s t o r y ; объект 1 гу рассматривается ниже в этой главе, в разделе "Использование объекта history". Например, чтобы сослаться на объект history, следует использовать запись window.history.

Лаавко

Остановите

Ойнс**и»

_-J ^П.»«. = 1&»™ " 3

• Текст в поле выделен. [ ] Щелкните на второй кнопке. •Ц2 Введите в поле другой текст.

На экране отображается текст, введенный в поле textarea.

Домой

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ПОДОБЪЕКТОВ

бъекты могут быть вложены один в другой, образуя иерархию. При этом объекты, содержащиеся в другом объекте, называются: подобъектами. При именовании объектов подобъекты присоединены к родительским объектам через точку (.) (см. раздел "Использование объектов-элементов Web-страницы"). Подобъекты могут, в свою очередь, содержать другие подобъекты. Таким образом, по мере "углубления" в определение объекта становится доступным его все более детализированное описание. Например, если Web-страница включает форму forml, а форма включает текстовое поле textl, значение текстового поля может быть идентифи-

цировано как w i n d o w . d o c u m e n t . f o r m l . t e x t l . value. Здесь document — родительский объект, a form — подобъект. Объект form, в свою очередь, выступает в качестве родительского объекта по отношению к текстовому полю (его подобъекту). На свойства и методы объектов также можно ссылаться с использованием точки (.). Например, document. bgColor — свойство "цвет фона" Webстраницы, а метод d o c u m e n t . w r i t e ( " h e l l o " ) выводит на Web-страницу надпись hello. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ПОДОБЪЕКТОВ 4

ЛИ'*"Г!ВЖ1 j'ftftMEn

Erpaari

жГ8

Ц Откройте с помощью —И В дескрипторах программы Блокнот файл <script> поместите j s-skeleton.html. ссылку на подобъект, который изменяет Я Добавьте перед значение текстового дескрипторами поля. <script> форму с элементом — — Н Сохоаните (Ьайл под именем текстовым полем. sub-object .html.

—И Откройте в окне броузера файл sub-object.html.

Текст в текстовом поле обновляется с помощью сценария JavaScript.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Что еще?

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

для разделения элементов в имени можно использовать символ подчеркивания. Для соединения подобъектов с их "родителями" в синтаксисе JavaScript используется точка. Если в имени подобъекта использовать пробел, родительский объект не будет идентифицирован.

|docuneiit.forpi1.raiHo1.crii>ckpd-t>

Ц Откройте с помощью -И В дескрипторе программы Блокнот файл <script> поместите js-skeleton.html. ссылку на подобъект, который отображает -И Добавьте перед метку в одном из дескриптором <script> переключателей. формул двумя -И Сохраните файл элементами наподобие под именем независимого переключателя. sub-object2.html.

—И Откройте в окне броузера файл sub-object2.html.

Один из переключателей отмечен (©) с использованием JavaScript.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ПРЕДОПРЕДЕЛЕННЫХ ОБЪЕКТОВ

числу предопределенных объектов JavaScript относятся объекты для работы с форматами дат и времени, математическими функциями, а также для организации взаимодействия с различными элементами Web-страницы. Одни предопределенные объекты, такие как form, button и frame, позволяют работать с существующими элементами Web-страницы. Они рассматривались выше, в разделе "Использование объектов-элементов Web-страницы". Другие предопределенные объекты, такие как String, Date и Math, позволяют работать с различными типами данных. Каждый из этих объектов обладает свойствами и методами, которые можно использовать для по-

лучения информации об объекте или выполнения определенного задания. Более подробному рассмотрению этих объектов, их свойств и методов посвящены главы 10-14. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ПРЕДОПРЕДЕЛЕННЫХ ОБЪЕКТОВ : Помет

Орав"» .

Moc любимое жив E зоопарке - тигр

. -

Q Откройте с помощью -Q Добавьте еще одну программы Блокнот файл строковую переменную js-skeleton.html. и присвойте ей в качестве значения -Я Добавьте в сценарий подстроку первой строковую переменную строки. и присвойте ей значение (см. главу 9). —И Для отображения значения второй строки | —Я Для отображения вновь используйте метод строкового значения document.write(). используйте метод document.write(). —И Сохраните файл под именем string.html.

Откройте в окне броузера файл string.html.

• В окне броузера отображаются строка и ее подстрока. Замечание. Подстрока — это просто часть исходной строки. Она начинается с символа, номер которого задается параметром метода substr (в нашем примере — 20).

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Г Что еще? АД

Многие из объектов JavaScript, их свойств и методов рассматриваются в главах 9-11, в частности рассматриваются объекты Array, Date,Math и String. Объект Array используется для создания массивов переменных и манипулирования ими. Объект Date используется для создания данных, представляющих даты и время, а также для манипулирования ими. Объект Math используется для представления математических величин, например логарифмов и математических выражений. Объект String позволяет работать со строками. Вот примеры каждого из этих объектов.

MyArray = new A r r a y ( 2 0 ) ; MyDate = new Date(20); Area = Math.PI * Math.pow(radius, 2 ) ; MyString = "Welcome to here."; Предопределенные объекты существуют практически для всех элементов Web-страниц, включая журнал броузера, элементы привязки (анкеры), ссылки, надстройки, переключатели и кнопки сброса. Многие из них доступны через общие объекты броузера. Более подробно этот вопрос обсуждается в главах 12 и 14.

- 3!вйй

*•

'6И*С

EJMW-»

В"0 'Цэбрэгпм

н.

VSE'irpw+spb-f

Сдави;

.т^ва

СфМка

11споль:-ова>«е

ойьек

Lii roJ1

л^*-

з ! 4^ htrtl

з - "

^ПарвМ»

Ссыпки 5 *

ии

JB] Готою

Ц Откройте с помощью -Q Воспользуйтесь программы Блокнот файл методом d o c u m e n t . w r i t e ( ) для js-skeleton.html. отображения —|Я Для отображения результатов вычисления некоторого текста значения, полученного используйте метод с использованием document.write(). свойства Math и метода Math. —И Сохраните файл под именем math. html.

—И Откройте в окне броузера файл math.html.

;3JMo6>wntn:Bp

В В окне броузера отображаются вычисленные значения.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СОЗДАНИЕ НОВЫХ ОБЪЕКТОВ дни объекты, как объект string, создаютнеявно при объявлении строки в программе. Например, после присваивания переменной строкового значения strl = "Привет всем" можно получить доступ к свойствам и методам этого объекта, ссылаясь на имя переменной следующим образом: s t r l . length. Для создания других объектов, например таких, как объект Date, необходимо использовать ключевое слово new и функцию конструктора. Скажем, для создания нового объекта Date с именем myDate необходимо отождествить имя переменной с оператором JavaScript, состоящим из ключевого слова new и функции конструктора для объекта Date, например myDate = new D a t e ( ) .

Для создания пользовательского объекта (объекта, не встроенного в JavaScript) применяется ключевое слово new с конструктором Obj ect ( ) . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

СОЗДАНИЕ НОВЫХ ОБЪЕКТОВ Ф(ЙЯ

|)РМ(4

Пс«»

UWB«*

<hF4d> </he«d> <ODdsi> (script

Stl"'t

UnqU«..-iJ»«crlpf>

toda^.qstMonth^'1) * "-го месяца " I; </scrlpt> «eoaj> </htwl>

Ц Откройте с помощью -И Для отображения программы Блокнот файл значений текущего дня и месяца воспользуйтесь j s-skeleton.html. методом -И Добавьте переменную document .write ( ) . и отождествите ее г. ттгтктлт nfi'KPKTmvT

<Date>.

Замечание. Этот новый объект Date позволяет получить значение текущей даты с помощью метода toLocaleString() (см. главу 10).

— f t Ппхпяните гЬямтт ттгт

именем new. html.

Откройте в окне В окне броузера броузера файл new. html, отображаются текущий день и месяц.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Пользователь может создать собственный объект с помощью функции, которая определяет объект. Переменные, входящие в эту функцию, играют роль свойств, а другие функции — методов объекта. Например, функция _ function helloObject (varl, var2, var3 ) { helloObject .name = varl; helloObject .birthdate = var2 ; helloObject . age = var3; helloObject .welcome = printObject; } function printObject (name) { document .write ( "Привет " + name); создает новый объект с именем helloObject, где переменные name, birthdate и age выступают как свойства, а функция welcome ( ) — как метод.

.Поис* Спреем •

--. -

'.--.-:

Оетаяовнги

Обммига

ЙС* I*' S'-,' ? 8' 'Ута-тчп~.'Ч -imf;

(script langiage-"jai.ascript"> toitaji - ne» Dated; docunent.wrlt«C'CerDMH " * today.getOattO

Дяья^

fflt-'JE

Сегодня 26-Й день 12-го месяча^нта^ врекя 12/26/2000 2;

И Откро11те с помощью И Сохраните файл под программы Блокнот файл именем new2 . html, new.html. -Я Для отображения значения текущего времени добавьте еще один оператор document.write().

3 Откройте в окне броузера файл new2 .html.

.Теперь в окне броузера отображается и текущее время.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБРАЩЕНИЕ К ТЕКУЩЕМУ ОБЪЕКТУ

ключевое слово this для ссылки на эти переменные. Например, на переменную функции function h e l l o ( s t r l ) в теле этой функции можно сослаться следующим образом: this . name == strl.

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

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

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

В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

При использовании переменных, передаваемых функции в качестве параметров, можно применить ОБРАЩЕНИЕ К ТЕКУЩЕМУ ОБЪЕКТУ

mctian m-slnnlcoloM

'if

tJ «яой

Лдай»

-if

Ййоамо

IЦвет страницы #1 голубой Цвет страницы #2 оранжявк

document .writ

и-ч

Ц Откройте с помощью -Н С помощью оператора программы Блокнот файл new создайте еще один j s-skeleton.html. объект. -Я Создайте функцию с параметрами. -И Для каждого параметра создайте свойство и присвойте ему значение параметра.

-И Воспользуйтесь методом document .write () для вывода на экран значений свойств объекта. Сохраните файл под именем this .html.

-ft Откройте в окне броузера файл this.html.

В окне броузера отображаются значения экземпляров объекта.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Попробуй!

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

<form name="forml"> <input type="text" name="textl" onclick="makeBold (this.value)" </form>.

function makeBold(textl) { document .write ( "<b>" + textl + "</b>" ) ;

В приведенном фрагменте программы обработчик событий onclick передает значение текущего элемента функции. В нашем примере передается значение текстового поля.

Впоследствии в HTML-элементе form ее можно вызвать из обработчика событий следующим образом.

<&й*

f-.fisr-t

<htm>!

Отек

Справка

|^'г^'цр-'

: Осг«япить Обитель Дамой flew» 1 'i^jstji- С . '! у •• - ,. ' -л.., " .' - д.луд-иеобыж-^'Ьк;

Изйн»«е

™ Ж$ри*л

-з

IB Hill HJrHMHI ЯМ |~"

( i n p u t ti/pe-"texr- nane-'4ext1- u d l u p - ' ' П ж и

«gg

Пе-wt, Прв»а м ») ^Лймл» ::Сеыял ;

</ht«l>

1 Ц Откройте с помощью -Q Отождествите программы Блокнот файл событие onclick с методом this j s-skele ton . html. select ( ) . -И Добавьте в страницу -И Сохраните файл под форму с текстовым именем this2 . html. полек. к текстовому полю обработчик события onclick.

'«] Гоц*о

-И Откройте в окне броузера файл this2.html.

i ^МИ4«0«»*Т^

Q Щелкните на текстовом поле. Я Теперь текст в текстовом поле выделен.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРОСМОТР СВОЙСТВ ОБЪЕКТОВ

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

отобразить значения свойств, можно также использовать оператор window [prop].

Чтобы "заглянуть" в объект и просмотреть все его свойства, можно воспользоваться специальным вариантом оператора цикла for. Этот оператор содержит ключевое слово in и имя объекта.

Все эти операторы применимы только к тем объектам, которые были определены в программе. Если объект не существует, то никакие свойства не отображаются.

Например, оператор for (prop in window) "обходит" в цикле все свойства объекта window. Чтобы вывести свойства на экран, можно включить в цикл for оператор document .write. Чтобы • ПРОСМОТР СВОЙСТВ ОБЪЕКТОВ | :

• ,I

аи

«1>1 dd>

-- 'scrlpt> </D )dji>

: Ч

!«. щ« „ „*~~ с^ Намд

'••••-:—,

.^Jpecjel

Остановил;

'-JiEVlfJHMettAf

£то,

Обновить

ива

Яомэл

Поиск

И'.-югьмеэнн-

tfadpawo* . Журнал

j^twiof

.»induw*i|iT

»!

Гк-ити

£^П»ов1КО

Правке

|С<*1ЯИ*

window document = [object] wmdow event = null wmdow. external = wmdow frames = [object] window history = window Image = [object] window length = 0 window location = file ///EyjSE^BMepb!/rnaEa%207%20-%20H[:noflb3t>BaHHc%20o6kekTOB/wmdow html window narfie = window navigator = wmdow. offscreenBuffering = кЛо window onafterprint = null window, onbeforepnnt = nuB window. onJ>efo! eunload = nuD window onbfor = null wmdcw on error = nuB ;ИЗГет»>о

Замечание. Для предопределенных объектов нет необходимости -И Включите в сценарий создавать новый объект. цикл for с ключевым словом in и именем '— Н Сохраните файл под объекта. именем window.html. Ц Откройте файл с помощью программы Блокнот.

методом document.write() для вывода на экран свойств объекта и их значений.

window clientbformation = wmdow clipboardDala ~ [object] window closed = false

-И Откройте в окне броузера файл window . html .

' -i"""

.^Мб*ммп«о«р .

• В окне броузера отображаются свойства и их значения для объекта window.

да

ГЛАВА 7, ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

_~, Попробуй!

Чтобы упростить процедуру просмотра свойств объектов, ее можно включить в виде компонента в функцию и передать ей имя объекта в качестве параметра. Полностью функция может выглядеть примерно так. function displayObjectProperties (obj ) { objName = obj + " " ; for (prop in o b j ) { document .write (objName + " . " + prop + " = " + obj [prop] + " < b r > " ) ; Впоследствии ее можно вызвать с именем объекта и в результате отобразить его свойства и их значения. Оператор вызова функции может выглядеть, например, следующим образом. displayObjectProperties

(window) ;

;adonhash = location Ьоя = location hostname = location href = file /Iff. ЯЗБ/Прн* location pathname = f£ USb'flf и fton.port = non protocol = file

Откройте с помощью И Сохраните файл под программы Блокнот файл именем location.html. window.html. —И Замените объект в операторе цикла for.

8-1747

—И Откройте в окне броузера файл location.html.

В окне броузера отображаются свойства для нового объекта.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА ARRAY

главе 2 вы познакомились с понятием массИва и узнали, как создать массив переменных. После того как массив создан, можно работать с объектом Array. Объект Array обладает свойством length, которое возвращает в качестве своего значения длину данного массива. Если, например, с помощью оператора array I == new Array ( 3 0 ) создать новый массив, то свойство a r r a y l . length будет равно 30. (Как мы помним из главы 2, при объявлении массива заранее указывать количество его элементов необязательно. Это показано в приведенном ниже примере. Поэтому под длиной массива подразумевается просто текущее количество элементов массива. — Прим. ред.)

Объект Array включает также несколько методов, которые можно использовать для манипулирования элементами массива. Так, метод j o i n t ) соединяет все элементы массива в одну строку, при этом разделителем элементов в строке служит значение, передаваемое в метод в качестве параметра. Например, если к массиву arrayl применить оператор a r r a y l . j o i n ( " а также " ) , в результате получим строку из всех элементов массива, разделенных фразой а также. Элементы массива можно упорядочить и с помощью метода sort ( ) . Метод reverse ( ) изменяет порядок следования элементов массива на обратный. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА ARRAY

Д Откройте с помощью —Q Для отображения программы Блокнот файл длины массива j s-skeleton.html. воспользуйтесь методом document.write(). Создайте новый объект Array. —И Сохраните файл под именем array. html. -И Присвойте массиву несколько значений.

—И Откройте в окне броузера файл array.html.

В окне броузера отображается длина массива.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

. Попробуй!

arrayl = lew A r r a y ( 5 ) a r r a y l [ 0 ] = "Томас"; arrayl[1] = "Дэйв"; arrayl[2] = "Сью"; arrayl[3] = "Адам"; arrayl[4] = "Ричард"; array2 = a r r a y l . s l i c e ( 1 , 2 ) ;

Помимо методов, упомянутых в данном разделе, объект Array включает метод s l i c e ( ) . Его можно использовать для задания вырезки существующего массива и получения этой вырезки для создания нового массива. Метод slice () получает два параметра: первый представляет собой индекс первого элемента массива, который должен быть включен в новый массив, а второй — последний элемент, включаемый в новый массив. Операторы, использующие метод si ice ( ) , могут иметь, например, следующий вид.

Эта последовательность операторов создает массив с именем arrayl, в котором хранятся пять элементов. Затем на основе этого массива создается новый массив, array2, который включает два элемента — Дэйв и Сью. (Напомним, что нумерация элементов в JavaScript начинается с нуля. — Прим, ред.)

*>;-•;> . ъ vf з • ,

3>аЛл

Цравка

Мазав

Виз

Цавраним

. ••

ЙДМс]« : Е \JSfc',npi*.*pfciU"iaea

:rlpt 1 anguage = "JdUdicripf> « Array(1 В); "кора"; "жяокд"; array 2 - "туманность";

Cflpew:

Остаммито 7

£f»aeta

ОЯновш»

^ \ a

X'jpmj]

ЛЕЧ^Ц.

"""Я

j . "

ПЕ-зв»й

^j ^Поо*ед

хколсгня Уп^о^о^енный массив coofae.Kopa.TfXHOfloni.n.TVHaH

ССЫЛУ."

-: . .'-Г-.УО.ЦЦ|

onent .Hril ТрГГ"~

)

Q Откройте с помощью —И Для упорядочения программы Блокнот файл и отображения массива array.html. добавьте в сценарий еще один оператор -И Для отображения document .write ( ) , содержимого массива который использует добавьте в сценарий еще метод sort ( ) . один оператор document.write(), Сохраните файл под именем array2 . html. который использует метод j o i n ( ) .

HS&IJU-W

Использ-.вание обье-^.ачц/2 ^jj

docunent.»rite("3Ti «««итокиг»"!:

Пысл

Депсй

•^ roi'cei"""1''"'

""••

—

"-V""

~„^-,~.

-ГО Откройте в окне броузера файл array2 .html. Замечание. По определению массив может хранить 10 элементов, но фактически заполнено только 5 элементов, поэтому пустые "ячейки" показаны с помощью дополнительных запятых.

-И Метод j o i n t ) перечисляет элементы массива в их первоначальном порядке. Метод sort ( ) выводит отсортированный список элементов массива. значение длины массива равно не 5, а 10.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА IMAGE бъект image существует для любой Webстраницы, которая включает хоть одно изображение. Элементы Web-страницы наподобие изображений, форм, аплетов и ссылок включаются в массив, и к ним можно обратиться с помощью индекса, который совпадает с их позицией в файле Web-страницы. Например, если Web-страница содержит два изображения, то на первое из них можно сослаться, как на document . images [ 0 ], а на второе — как на d o c u m e n t . i m a g e s [ 1 ] . Еще раз напоминаем, что нумерация элементов массивов начинается с нуля (0).

С помощью индекса можно получить информацию об изображении, например о ширине рамки, габаритах, имени, источнике и атрибутах расположения. В JavaScript не предусмотрены специальные методы для работы с объектами image, однако свойства изображения можно изменить динамически. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА IMAGE

<htnl>|

<С

«пять.

</hcad>

Семей

! п не»

Ийе»«м

Ждои*'|

-•^""•атЕт Я""

H<inq b r f - l r - p d i l y . i i i f ' d l l ' " f - | i f a n H «1ЛЛ

b..rdt-г- 1 1 l r > < l > r / > ]

O o c u t w n t . i R a g p ^ l i J . J l t . -<br/>-); nocumnt .и-ир("1одв«Мй pdM4H " ' uot-unrlK 1 iMgf -.1 « 1 -Hut-air) ; | </sci-ipt> </в.«11> </h!pl>

•It ^*NT

иеч*

Я ...,-,'

Пив*»

^ ! ^Песеяи i йяля* "

•—

...га

£,nwwe

г'-/'; У . -'"„JL. t а . ' • '£.

^S^-l/-^

Толщишр.ихи-10

Ц Откройте с помощью -И Для отображения программы Блокнот файл значений атрибутов изображения j s- skeleton .html. воспользуйтесь методом -Q Добавьте в Webdocument .write ( ) . страницу изображение и присвойте значения его -Н Сохраните файл под атрибутам alt и border, именем image . html.

Фредди Фрог

igjforw

-И Откройте в ок

броузера файл image.html.

£j Мей «очоыогао

.-4,.'

Я 1 В окне броузера выводятся изображение и значения его атрибутов.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

ПРЕДВАРИТЕЛЬНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ

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

щим образом: m y l m a g e . s r c = " h o u s e . g i f " , mylmage.border= " 2 0 " H m y l m a g e . h s p a c e = " 1 0 " . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

Чтобы создать новый объект image, необходимо задать имя изображения и воспользоваться оператором new, например my Image = newlmage ( ) . После того как новый объект image создан, можно установить значения его атрибутов, используя для этого свойства объекта image, например, следую-

ПРЕДВАРИТЕЛЬНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ

1з

OSnoewB

Ц Откройте с помощью —Q Присвойте свойству программы Блокнот файл src объекта image имя js -skeleton. html. файла изображения. — Q Добавьте в Webстраницу дескриптор —И В дескрипторах <script> создайте новый объект image.

—И В дескриптор <body> включите обработчик события onload, который загружает новый файл — источник изображения в объект image. -И Сохраните файл под именем image2 .html.

Откройте в окне броузера файл image2.html.

Ламой

-а

Поиск

зг ' <э • I «>

Набранное

Журнал

•

Л*ип>

Прожл

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗМЕНЕНИЕ ИЗОБРАЖЕНИЙ

се свойства объекта image аналогичны атрибутам дескриптора <img/>, таким как bjorder, width, hspace и src. При изменении !этих свойств с помощью операторов JavaScript изображение в Web-странице изменяется динамически. Таким образом, эти свойства позволяют динамически изменять атрибуты изображения с помощью сценариев JavaScript. Помимо изменения атрибутов, относящихся собственно к текущему изображению, можно установить новое значение для атрибута src объекта image и сменить само существующее изображение, загружаемое в Web-страницу. Прежде чем вносить изменения в изображение, необходимо так предварительно загрузить новое изображе-

ние, чтобы его можно было немедленно отобразить в Web-странице (см. раздел "Предварительная загрузка изображений"). Например, к первому изображению в Web-странице можно обратиться следующим образом: document. images [0]. Поэтому, если значение атрибута document. images [ 0 ] . src установлено так, что оно ссылается на новое изображение, изображение в Web-странице сменится. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИЗМЕНЕНИЕ ИЗОБРАЖЕНИИ •Райл

ПнёГа | Поиск

Сфмк*

." '

<h ad> </ ead> <b ay> script ] j i i g l l a g e « " J J u a ^ c r l p f > /scrio > - Lmq sr -'•fr*ddu.niPY><br/> j ^Гоги n we-'^onffT™"™ "

lonel ckjloocunent.lliaqes B] . s r c - ' d u d l e g . q i

</Eoay> </ht"l>

'"*':£

1 |

-И В правой части обработчика события onclick задайте -И Добавьте в Webв качестве значения страницу простую форму свойства source имя с одной кнопкой. файла другого изображения. -И Добавьте в Webстраницу изображение.

-Я Сохраните файл под именем changelmage.html.

-r)«..~«~.

±1 Ц Откройте с помощью — Q Присоедините программы Блокнот файл к кнопке обработчик j s-skeleton.html. события onclick.

—И Откройте в окне броузера файл changelmage.html.

В окне броузера появляются изображение и кнопка.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

'опробуй!

Еще одно любопытное свойство объекта image свойство complete. Оно представляет собой булево значение, которое остается равным f a l s e до тех пор, пока изображение полностью не загрузится. После полной загрузки изображения свойство complete устанавливается равным true. Используя именно это значение, можно проверить, загрузилось ли изображение полностью, прежде чем приступать к его изменению. Например, можно включить в сценарий оператор проверки свойства complete, который прежде, чем разрешить другим операторам изменять изображение, проверит, загрузилось ли это изображение полностью. Предложение JavaScript, осуществляющее проверку факта загрузки изображения, может иметь, например, следующий вид. function changelmage() { if (document.images[0].complete) document.images[0].src = "newlmage.gi £" ;

;

Q Щелкните на кнопке Web-страницы.

• В окне броузера появляется новое изображение.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ LINK И ANCHOR

налогично объекту image объекты link и anchor организуются в виде массива, так что ссылку на них можно использовать в операторах JavaScript. Порядок, в котором гипертекстовые ссылки появляются в Web-странице, определяет индекс элементов в массиве. Гипертекстовые ссылки и элементы привязки подсчитываются независимо друг от друга. Например, если на странице имеются два элемента привязки и три гипертекстовые ссылки, ссылка на первый элемент привязки выглядит, как document . anchors i 0 i , а ссылка на первую гипертекстовую ссылку — как document . l i n k s [ 0 ] . Объект l i n k включает свойства h r e f и target, которые можно использовать для динамического

изменения гипертекстовой ссылки. Объект anchor включает свойство name, позволяющее динамически изменять имя элемента привязки. Другие свойства объекта link используются для описания компонентов гипертекстовой ссылки. Свойство host содержит имя сетевого домена, свойство protocol регистрирует протокол, такой как http :, а свойство pathname регистрирует путь как часть URL в формате UNC (Uniform Naming Convention — соглашение об универсальном именовании). В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ LINK И ANCHOR i • £**" OP <""* йч» И ***•*•*>* Сни>« £r***j

I <•'' •-;

;

:МОвфН ^ = 3\ПуЛ.ври1Г-чв4? .^по/ьхе^е ttfws

<»•«»>

|<а ««.••„„ch.rl"».»,. 11<Ы/>

"5Г! П•и *; • Ое«*нОв«ГВ '& Овив»"» ''S """ Дол* •ягя

•."":-•;

И *р*мчм

3 : i»

> «тел

,^м,м|

;

Пд-чдаь

• т

3 - •:

ГТрввка

»| f>{\ftaavA ; :Се*4.*« **

Анкер #1 ArJrn abets . с 021

^^S^S^^Ei! ""*; »»1Г.»11,с-к. .,.* »ь с,ри..„, • . »

OHNNews Анкер #2 i unfiit .,iii( iiui-s- l e n g t h • "

</s гГ^ТТ </bod > </htnl>

J Ц Откройте с помощью -Я Для отображения программы Блокнот файл длины массивов j s- s k e l e t o n . html. гипертекстовых ссылок и элементов привязки •Я ПРПРЯ ТТРГКПИПТОПОМ включите в дескриптор <script> добавьте < s c r i p t > операторы в Web-страницу document . w r i t e ( ) . несколько гипертекстовых ссылок Сохраните файл под и элементов привязки. именем l i n k s . h t m l .

$j7i££

:~ •

••

-И Откройте в окне броузера файл links.html.

d i

Щ Mo>«S™>l^' "

.' "' ^;,

* 1 В окне броузера отображаются сами гипертекстовые ссылки и их количество.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Г Что еще?

**&1 f !рМК« . ПОИТ* CnpiBW*

С помощью свойств объекта link гипертекстовые ссылки можно разложить на составные части. Свойство protocol возвращает первую часть URL, которая указывает метод доступа (например, http: или f t p : ) . Свойство hostname содержит имя домена или IP-адрес URL, а свойство pathname указывает путь к Web-файлу. Свойство port возвращает номер порта для Web-страницы, а свойство host объединяет значения hostname и port. Завершающая часть URL — имя элемента привязки, которое может

быть получено из свойства hash. Полностью URL можно получить с помощью следующего выражения JavaScript. myLink.protocol + myLink.hostname + myLink.pathname + myLink.port + myLink.hash. Объект anchor не обладает всеми теми же свойствами, что и объект link; он включает только одно свойство — name.

;

Ом**)

:;,'. ;

</l>ead> <body>

:'• •• ..

Оствнптпь ййшиигн

Дл«а<

Ясм*

Hafp*»<oe

Жирная

Ч*ч*тв

Прете

^] ^?Пч*«а с^мки " 'd

Anchor *t

ссылки. <br/)"); аяененг,. пр. вязки. <Ы/>") ; document .игНеС'Сснлка K1 protocol: " * docunen t.links[e]. protocol • Xbr ");

"<br

Ссылка rfl protocol file Ссылка #1 pathname EUSB\npHMepHTjnafia%207H,20-%20Hcnoflb30BaHHC%20o6t.eKToB\www.anirnabet! com • ' Ссылка #1 href Ые///ЕОЗЕ'ПримфЫ/Глава%207%20-0/о20Испол^оеанис%20объектов,'«л^ arcinabets com . '

");

•чы ••>; ~?7~ГТрП </body> </tltHl>

i ±1

Откройте с помощью И Сохраните файл под программы Блокнот файл именем Iinks2 . html, links.html. —И Для отображения информации об одной из гипертекстовых ссылок включите в дескриптор <script> несколько операторов document.write().

£\ f^,^

-И Откройте в окне броузера файл Iinks2.html.

У|)ш«»п*»и

1 1 В окне броузера о тображается и нформация по г иперссылке.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗМЕНЕНИЕ ГИПЕРТЕКСТОВЫХ ССЫЛОК

пертекстовую ссылку на странице выглядит так: document.links[0 ] . Объект link обладает многими свойствам, присущими объекту location, включая такие свойства, как host, hostname, h r e f , pathname, port и protocol.

ногие объекты содержат все элементы IWeb-страницы, например объект l i n k ;хранит все гипертекстовые ссылки, включенные в Web-страницу. Отдельные гипертекстовые ссылки можно идентифицировать, задав значение индекса для гипертекстовой ссылки. Этим индексам присваиваются последовательные номера, начиная с индекса 0 для первой гипертекстовой ссылки. Подсчет гипертекстовых ссылок ведется вдоль страницы сверху вниз. Значение индекса задается в квадратных скобках непосредственно после имени объекта гипертекстовой ссылки. Например, ссылка на первую гиИЗМЕНЕНИЕ ГИПЕРТЕКСТОВЫХ ССЫЛОК

; : 3>«t QfMen fi« Из*-»»*» Саи»; £гр«в "-•-"*

/tiea ьооу

о^

~^4Гис|?' : vjSe"VK. b ..

им]

oe^L

ЕЯ • ^"

*-**

п**

" "

-} о*Пвв»яя. .;&*атм ":

'. у ьзобд.^ j&M»raf.cti^>

±1

ГТЬ!ЛГ^*1

.Смена ссычкн

iP-sSi- : Д Откройте с помощью —Q Присоедините программы Блокнот файл к кнопке обработчик j s-skeleton.html. событий onclick и установите связь -И Включите в Webсобытия с изменением страницу гипертекстовую свойства href ссылку. гипертекстовой ссылки. —И Включите в Webстраницу форму с одной кнопкой.

Замечание. Изменение свойства href на шаге 4 фактически приводит к изменению ссылки. '-И Сохраните файл под именем changeLink.html.

"" ~ '

-И Откройте в окне

броузера файл changeLink.html.

•—----.

gf^j^Sw

1 1 В окне броузера

отображаются одна гипертекстовая ссылка и кнопка.

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Можно создать генератор случайных гипертекстовых ссылок. Для этого создается несколько гипертекстовых ссылок, которые помещаются в массив, после чего производится случайный выбор гипертекстовой ссылки и замена исходной ссылки случайной. Программа для такого генератора может выглядеть, например, так. function randomLink ( ) { randomLink = new Array ( ) ; randomLink [0] = "www.animabets.com"; randomLink [ 1 ] = "www.microsoft.com"; randomLink [2] = "www.cnn.com"; randNo = Math. floor (randomLink. length * Math. random ( ) ) ; document . links [0] .href = randomLink [randNo] ; В этом примере использован метод Math . floor ( ) , поскольку он выполняет округление числа до ближайшего целого.

И !<*!

+•

Q»**-*

fee

a>SW"«

<Э

Ся*«

ШШ

£tiwa

4 . &

г^ц

• йюк»]*:?. ^еГ[.«,.....!.>Г.аеаГ-Исгтслылн««с*ье..тов^(,*1В-Ьг*.Ыя1|

~|^|%«* 1-». a*MWs м^|

LiJ

5Г.."

Печать

Г"~! " '^|'«1й«омпыетгр'

"~ 'л

-И Установите указатель | 1 Щелкните на мыши на гипертекстовую к нопке Web-страницы. ссылку. ~Ш Обратите внимание, что URL гипертекстовой ссылки выводится в строке состояния, располэженной внизу окна.

Л*и*п .

_^j ^0«р*яй • : Ссбм** *>

—И Вновь установите указатель мыши поверх гипертекстовой ссылки inks2 .html.

1Обратите внимание на

изменение URL гипертекстовой ссылки, который выводится в строке состояния внизу окна. Замечание. Неплохим применением для приведенного в примере способа изменения гипертекстовых ссылок может быть случай, когда пользователя нужно "отправить" по случайной гиперссылке.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

^ПОЛЬЗОВАНИЕ ОБЪЕКТА HISTORY бъект history позволяет продублировать нопки броузера Вперед (Forward) и Назад (Back) для перемещения между просмотреннМми Web-страницами. Чтобы просмотреть длину текущего списка, хранящегося в журнале броузера, можно воспользоваться свойством length объекта history. Объект history включает несколько методов. Метод back ( ) может привести к появлению в окне броузера предыдущей загруженной Web-страницы. Метод forward ( ) отображает следующую страницу из списка броузера. (Чтобы двигаться вперед, пользователь должен сначала вернуться к предыдущим страницам.) Метод до ( ) получает численный параметр, значение которого может быть положительным или от-

рицательным целым числом. Метод позволяет перемещаться вперед или назад по списку журнала броузера. Например, оператор document .history . go ( -2 ) отображает Web-страницу, "перелистывая" журнал броузера на две страницы назад. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА HISTORY

«"« 1 </tiee > cbodj)

а. . а ;

пэвлъ

Д;м:-й

;

ГЦ«оъ

' Правив

<sc ipt Ijngudge---jd0as[;t-ipl- > </S

riDt>

Cfo a naw'for«1">

• —4 o n c H c k t l w i n d o u . h i s t o r g . q o ( - ? ) : - /> 1

</hrJ>

iV^r^l-

d Ц Откройте с помощью -И Дайте обработчику программы Блокнот файл события onclick j s-skeleton.html. указание переместиться на две страницы назад по •fj Добавьте в Webсписку журнала. страницу форму с одной —Q Присоедините к кнопке обработчик события onclick.

именем history.html.

!€K"™w

_____

-И Откройте в окне броузера файл history.html.

| Для просмотра списка журнала щелкните на стрелке, расположенной справа от кнопки Назад (Back).

ГЛАВА 7. ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ

Г Что еще?

Метод history .go ( ) можно использовать для перезагрузки текущей страницы. Если индекс равен 0, то текущая страница - - единственная загруженная страница по списку журнала. Следовательно, это эквивалентно обновлению страницы. Соответствующее предложение JavaScript выглядит следующим образом.

мы, например в выпадающий список или текстовое поле. Соответствующий фрагмент программы может, например, выглядеть так. document.history(document. forml.textl.value); Вы можете воспрепятствовать возврату пользователя на предыдущие страницы с помощью кнопки Назад (Back). Для этого следует применить метод window, location.replace() . Он позволяет заменить текущий элемент списка журнала адресом URL, который передается как параметр.

document.history(0); Количество позиций, на которое требуется вернуться по списку, можно задать с помощью значения, которое пользователь вводит в элемент фор-

j £4М !Ьи*а g4ft й*5м»И* 1

:.!

ч1 «* Мама [^ •' • •".

С#мгг

I ДО"

^°"2a-'XX'k : л .&"£ . ^ А ™

Щ|

. w j Допей Пони Ост**иип> О**» ть oms-.".e->,-...^htn1

И;бр«мм

Жфпвл

П*4ть -

РМ*>Л

3 ^nwwde ^Cc^wo,"

..„.••Г,.,1-исп.л.к.».<А>.п«.;Н^

<>Пп»«»

iC«l»«»

Сегодня 27-й день 12-го месяца Текущее время 12/27/20000011:23

, :.

[Гвтаёо •

1 1 Список журнала выводится в виде выпадающего списка. 0 Щелкните в любом месте окна броузера, чтобы список исчез.

J Щелкните на кнопке.

• В окно броузера загружается Webстраница, соответствующая возврату на две позиции относительно текущей позиции в списке.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ WINDOW И DOCUMENT

ерархия объектов JavaScript включает два родительских объекта верхнего уровня, которые используются для управления видом и формой окна броузера. Это объекты window и document. Объект window является родительским объектом верхнего уровня для всех объектов и включает в качестве подобъектов такие объекты, как document, l o c a t i o n и history. Объект window включает также свойства и методы для управления внешним видом окна броузера. Одни из них описаны в данной главе, а другие рассматриваются в оставшихся главах. Объект document обеспечивает доступ к различным HTML-элементам, которые составляют Web-

страницу. Одним из методов объекта document является метод w r i t e ( ) , который используется для вывода обычного текста и HTML-текста в окно броузера. Например, предложение JavaScript document . w r i t e ( ' < b > h e l l o < / b > ' , name) выводит в окно броузера полужирным шрифтом слово hello, за которым следует значение переменной JavaScript name.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТОВ WINDOW И DOCUMENT Jat-n

Дравка

Внп

йэйраиюа

Сдакс

£пывк»

. ОЛизамть

fio"*4t

flwa-

',<stp*H»rrt

Жэдчню

Пмдаь

Прюк»

,^В\ПрддерьЛГа»д В-Работа с окмамУ^* ntirj]

docunent .uril docutwnt.wril

Приветствуем всех

.• i *

Ц Откройте с помощью программы Блокнот файл js-skeleton.html. —И Добавьте в дескриптор <script> несколько операторов document.write().

Замечание. О некоторых особенностях HTML можно узнать из приложения. В качестве более полного руководства по HTML можно назвать книгу М. Р. Браун, Дж. Хоникатт. Использование HTML 4.

—И В качестве параметра передайте методу document.write() —Q Сохраните файл под HTML-текст, именем write . html. заключенный в одинарные кавычки.

-И Откройте в окне броузера файл write.html.

В окне броузера отображается HTML-

ГЛАВА 8. РАБОТА С ОКНАМИ

Г то еще?

Помимо метода document .write ( ) , который уже рассматривался и использовался в многочисленных примерах, JavaScript включает еще один аналогичный метод, document . writeln ( ) . Он также отображает переданные ему параметры в окне броузера и отличается тем, что в конце каждой строки помещает символ перевода строки. Например, в конце каждой строки операторов document.writeln("Hello " ) ; document .writeln ("and welcome " ) ; document.writeln("to my p a g e . " ) ;

рует текст, как HTML-текст, символы перевода строки интерпретируются, как пробелы, и игнорируются им. (HTML игнорирует символ перевода строки, за исключением случаев, когда он используется внутри дескриптора <PRE>. — Прим. ред.) Если предложение JavaScript записано с использованием в качестве префикса объекта window, оно попрежнему будет работать нормально. Например, оператор window, document . w r i t e ( ) работает точно так, как оператор document .write().

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

а •ipt l.(/,guagp-"jauascfipf> icuwen .иг11е('<Ш>Привстетвуем в с е х < / П 1 > - ) : .write('<р>Л*»и во всех угонках Вселен*

чщ <Kcript>

Приветствуем всех Лк>ди во Беек уголках Вселенной, нынешние и грядущие

f"n"ir

ДОБАВЛЕНИЕ ПЕРЕМЕННОЙ Ц Откройте с помощью программы Блокнот файл write .html. -Я Добавьте определение переменной и присвойте ей значение.

Под определением переменной добавьте еще один оператор document.write() для отображения значения переменной. Q Сохраните файл под именем write2.html.

приветствуем вас, гле бы вы ни

uJ.-i'|-

-И Откройте в окне броузера файл write2.html.

В окне броузера отображается HTMLтекст вместе со значением переменной.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ВЙВОД ТЕКСТА В СТРОКЕ СОСТОЯНИЯ БРОУЗЕРА

трока состояния окна броузера расположена внизу окна между полем документа и краем окна. Она используется для отображения полезной информации. Например, если установить указатель мыши на гипертекстовую ссылку, в строке состояния отобразится адрес ссылки. С помощью свойства window, s t a t u s можно задать текст, который будет отображаться в строке состояния.

Для этого нужно просто отождествить свойство window, status со строкой текста. Важно заметить, что этот текст может включать предложения

JavaScript. Например, оператор window.status="привет и добро пожаловать" выводит в строке состояния текущего окна фразу "привет и добро пожаловать". Если свойство window, status используется для отображения некоторого текста в строке состояния, а затем указатель мыши передвигается на гипертекстовую ссылку, текст заменяется адресом этой ссылки. В приведенном ниже примере используется файл s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ВЫВОД ТЕКСТА В СТРОКЕ СОСТОЯНИЯ БРОУЗЕРА

Has»

Г-::-.

Ост*«в1чь

Обновить

Ч«|»|?имЬ»Чп.-та.'.г.«В Р»я,.г».аД

Д Откройте с помощью программы Блокнот файл skeleton.html. -И В открывающий дескриптор <body> добавьте обработчик события onload.

Чтобы вывести текст в строке состояния, отождествите обработчик события onload со свойством window. status, которому присвойте значение выводимой строки. Сохраните файл под именем status .html.

ЧИ Откройте в окне броузера файл

status.html.

<*L~ л2, •

ЭГ

j] С Птяжя \\Слье*н

В строке состояния отображается заданный текст.

ГЛАВА 8. РАБОТА С ОКНАМИ

г~

Что еще?

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

Для этого используется свойство w i n d o w . d e f a u l t S t a t u s . Например, задание значения window.defaultStatus = "Обработка" приводит к отображению слова "Обработка", как текста, выводимого по умолчанию, когда не происходит никаких событий.

bodu onIojil-"»indim.stjtus*'npnBeTCTBiien все*.'";> a nrff-"u^^.animbets.con">ftni»iabets.con</a> I /body>

И Откройте с помощью программы Блокнот файл status .html. -И Добавьте в Webстраницу гипертекстовую ссылку.

•И Сохраните файл под именем status2 . html.

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

-0 Откройте в окне броузера файл status2 . html.

Ш Текст в строке состояния заменяется адресом гипертекстовой ссылки.

9-1747

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ЗМЕНЕНИЕ ЦВЕТА ФОНА

редачи, в которой нужный цвет получается смешением световых излучений трех первичных цветов. — Прим. ред.) Представление цвета в системе RGB включает символ номера (#), за которым следуют шестнадцатеричные значения оттенков красного, зеленого и синего цветов в диапазоне от 00 до FF. Например, красный цвет представляется кодом # F F O O O O , синий - - # O O O O F F , а пурпурный #FFOOFF. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

стандартном HTML фоновый цвет окна можнЬ установить с помощью атрибута bgcolor дескриптора <body>, однако JavaScript позволяет'изменять цвет фона динамически.

Свойство объекта document .bgcolor хранит значение текущего цвета фона; поэтому, присвоив объекту новое значение, можно изменить цвет фона. Например, если задать в качестве значения свойства document .bgcolor синий цвет, при отображении документа фон станет синим. Значения цветов можно представлять двумя способами. Цветовые значения могут быть именами цветов, понятными броузеру, например такими, как red, blue и orange. С другой стороны, цвета могут быть представлены в виде шестнадцатеричных чисел в модели RGB. (RGB - - red-greenblue — красный-зеленый-синий. Модель цветопе1 ИЗМЕНЕНИЕ ЦВЕТА ФОНА | **йл ££!$,*

"•***• с*1**"

•

' - -

: : ' 4;«йг

</body> </ht«il>

£на

** V,-« it:

<Ь

<Т' t i n "I lDt"> _ -Ojocu^t. bgcolor - "„rang,"; | JscripU

Омв*л

Узвраинсре

•

^Э

П ОтКПГШТА О. ТТПМПТГТТ-.ТО i-

j s-skeleton.html.

В дескриптор <script> добавьте свойство document.bgColor и присвойте ему в качестве значения имя цвета.

^пмвм

Ш:'-'<:(&'\*&

-i^

'-3

. JSB :...--«.-ры^ГлвваЗ Рабстве окнвм^:,.^» й"чпЛ

«^

-j <v П«*Ж» - : Ссы^и "

;

•••

-J

-—

> (Syf^otiP"

программы Блокнот файл

Сдоис

— fcl P,rtVr>flHMTP fhflMTT ТТП7Т

именем bgColor .html.

-И ОТКППТДТР R HWHP

броузера файл bgColor.html.

" "

1 Фпи ЛЛТ^рЬ-птпямиттт-.т

окрашивается в заданный цвет.

^J '

ГЛАВА 8. РАБОТА С ОКНАМИ

Что еще?

Конструкции языка JavaScript зависят от используемого регистра клавиатуры. Это, в частности, значит, что при написании имен объектов следует строго придерживаться использования прописных букв там, где это требуется, например использования прописной буквы С в имени свойства bgColor. Попытка использования строчной буквы с в имени свойства document.bgcolor приведет к тому, что броузер возвратит сообщение об ошибке наподобие object not recognized (объект не распознан). Это может служить провоцируемой ошибкой при отладке, особенно с учетом того, что синтаксис HTML не зависит от регистра клавиатуры.

Например, предложение document.bgColor= "#80FFCC" устанавливает цвет фона при выполнении оператора, однако цвет фона можно изменить в любой момент, воспользовавшись обработчиком событий. Например, операторы onclick= "document.bgColor= document.forml.textl.value" динамически устанавливают значение цвета фона в соответствии со значением текстового поля при срабатывании события.

з » з

Остановит

Ofroewn-

а ; - а а

Домой

;

Поиск

Иавваннев

Ж-дачп

; . -Печать

:olcr="gr-een">1

•.спрпзпццлде- laual document.ni-ite("lleei lunent.bgcolor * ••)");

Q Откройте с помощью программы Блокнот файл js-skeleton.html.

[ Цвет фйн

В дескрипторы <script> добавьте оператор document.write(), который отображает значение свойства document.bgColor.

—И В дескриптор <body> добавьте атрибут bgColor и присвойте ему в качестве значения -Н Сохраните файл под название цвета. именем bgColor2 .html.

—И Откройте в окне броузера файл bgColor2.html.

В окне отображается значение цвета фона.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗМЕНЕНИЕ ЦВЕТА ТЕКСТА И ГИПЕРТЕКСТОВЫХ ССЫЛОК

бъект document также включает свойства для установки цвета текста переднего плана и цвета гипертекстовых ссылок. В HTML эти цвета можно установить с помощью атрибутов text, link, alink и vlink дескриптора <body>. Однако JavaScript позволят динамически изменять эти цвета при взаимодействии пользователя со страницей. Цвет текста переднего плана хранится в свойстве объекта document. f gColor. Это свойство задает цвет текста для Web-страницы. Необходимо внимательно следить за тем, чтобы этот цвет отличался от цвета фона, иначе текст просто нельзя будет прочесть.

как к тексту, так и к изображению. Кроме того, можно задать цвет активной гипертекстовой ссылки и цвет посещенной ссылки с помощью свойств document.alinkColor и document.vlinkColor соответственно. В приведенном ниже примере используется файл bgColor.html, созданный в разделе "Изменение цвета фона", однако описанные действия применимы к любому файлу.

Цвет гипертекстовой ссылки хранится в свойстве объекта document. linkColor. Это свойство задает цвет гипертекстовых ссылок применительно ИЗМЕНЕНИЕ ЦВЕТА ТЕКСТА И ГИПЕРТЕКСТОВЫХ ССЫЛОК $ойл

t>se»a

Виз

&з>Ь«гн<и

CEWWC

Сярв*кл

*• . -»^" : э' ; а

»а.ча

-..:. ..

Qirt «twite Ойновшь

4 ' a

£«маб

fta-cn

" ^ ёдр« |*S' L мЧч'.гЬим^^Гплва 8 - РгАпч, с с*н»-4\1зСо1с1

<script 1

.•"""•'"

t1j"5p*"«? rt№j|

.л

Л.'ь-^ш

ЕЭ

J "'f. "

П«*иъ

^вaв^л

_^j f lepastOB ' < Сеыякя •*'

M^^t; я» иа мышь .довить сома? J-

•_ - •

Ц Откройте с помощью программы Блокнот файл bgColor.html.

Добавьте в страницу некоторый текст.

Сохраните файл под именем f g C o l o r . h t m l . -И В дескрипторы <script> добавьте свойство объекта document.fgColor и присвойте ему в качестве значения цвет, отличный от цвета фона.

-И Откройте в окне броузера файл fgColor.html.

1 1 В окне броузера о тображаются цвет фона и цвет переднего плана.

ГЛАВА 8. РАБОТА С ОКНАМИ

(

Попробуй!

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

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

document.fgColor= "#80FFCC" v

function colors (background, textCol, linkCol, vlinkCol) { document .bgColor = background; document . fgColor = textCol; document . linkColor = linkCol ; document . vlinkColor = vlinkCol;

Кроме того, значение цвета текста или ссылки можно задавать динамически, используя для этого значение из текстового поля формы. Например, операторы onclick = "document.fgColor = document.forml.textl.value" динамически устанавливают цвет текста в соответствии со значением, взятым из текстового поля. Поскольку эти операторы выполняются как часть обработчика события, пользова-

Д Откройте с помощью программы Блокнот файл fgColor.html.

Добавьте в страницу гипертекстовую ссылку.

—И Сохраните файл -И В дескрипторы под именем linkColor.html. <script> добавьте свойство объекта document.linkColor и присвойте ему в качестве значения цвет, отличный от цвета фона и цвета переднего плана.

Вызвав ее с заданными значениями цветов, можно установить цветовую схему Web-страницы. Например, оператор colors ( " b l a c k " , "red" , "orange" , "purple " ) задает цвета четырех компонентов Web-страницы: фона, текста, гипертекстовых ссылок и посещенных ссылок.

-Я Откройте в окне броузера файл linkColor.html.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗМЕНЕНИЕ ЗАГОЛОВКА ДОКУМЕНТА

аголовок документа выводится в строке заголовка текущего окна броузера. Обычно д#я задания заголовка используется дескриптор <title>, который помещается в дескрипторах <head> Web-страницы, JavaScript включает свойство объекта-документа document . t i t l e , которое предоставляет большие возможности управления заголовками по сравнению с дескрипторами <title>. Свойство document. t i t l e хранит заголовок текущего документа. Присвоив этому свойство новое значение, можно изменить заголовок, отображаемый при загрузке документа. Например, чтобы вывести заголовок документа в виде "Добро пожаловать к Джо", можно присвоить переменной name значение Джо, а затем установить свойство document. t i t l e равным

"Welcome to " + name. В результате для текущего документа будет динамически генерироваться заголовок. Следует различать заголовок документа и имя окна. У каждой Web-страницы может быть заголовок, который выводится в строке заголовка окна. В то же время каждое окно может обладать именем, которое используется JavaScript для идентификации окна. Имя окна не отображается броузером и служит, в основном, для внутреннего использования. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИЗМЕНЕНИЕ ЗАГОЛОВКА ДОКУМЕНТА J

ОДскзя '

мау> '

»a№l«' t - "lib»"; I

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html. —И В дескрипторы <script> добавьте переменную и присвойте ей строковое значение. -И Задайте заголовок документа с помощью свойства document. title.

та^-м^г».

i•г

Печать

3 •

Пвзека

3 «> ••«•« !i О»*"

[Доброnt:

Q Для вывода заголовка воспользуйтесь оператором document.write(). —И Сохраните файл под именем title.html.

-П Откройте в окне броузера файл title.html.

I В строке заголовка выводится заданный заголовок документа.

ГЛАВА 8. РАБОТА С ОКНАМИ

ОТОБРАЖЕНИЕ ДАТЫ ПОСЛЕДНЕГО ИЗМЕНЕНИЯ WEB-СТРАНИЦЫ

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

еще?

Именно свойство document. lastModif led позволяет получить информацию о том, когда документ модифицировался в последний раз. Формат даты последнего изменения включает месяц, число и год, а также время. Объект, предназначенный для работы с форматами для представления и отображения значений дат и времени (Date), более подробно рассматривается в главе 10. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Объект document включает два дополнительных свойства, которые также могут оказаться весьма полезными. Свойство document .URL хранит строку текущего URL. Оно может применяться для отображения текущего URL при его выводе на печать. Еще одно полезное свойство — document.referrer; оно отображает URL документа, содержащего ссылку, которая указывает на текущую страницу. Иначе говоря, указанное свойство содержит URL документа, который "привел" к текущему документу. Это свойство отлично от журнала, который хранит ссылку на предыдущую посещенную страницу.

ОТОБРАЖЕНИЕ ДАТЫ ПОСЛЕДНЕГО ИЗМЕНЕНИЯ WEB-СТРАНИЦЫ

$>.; -a

Димой -

:ript lanouagp= 4ai игмг .1 ,i*t M o d i f i e d ) ;

Р^...-

•

Поиск

нДм|ю

№

.страница е посланий раз изменилась 12/31У2000 00-J6 25|

. :,:L:^; Ц Откройте с помощью программы Блокнот файл js-skeleton.html. -И Для отображения даты изменения документа с помощью свойства document.lastModified воспользуйтесь оператором document.write().

"—И Сохраните файл ^О Откройте в окне под именем броузера файл lastModified.html. lastModified.html.

• В окне броузера выводится дата последнего изменения документа.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРОСМОТР URL ТЕКУЩЕГО ДОКУМЕНТА

есьма полезной информацией, которую Можно разместить внизу каждой Web-страМицы, является текущий URL. Одно из преимуществ включения URL в Web-страницу заключается в том, что адрес Web-страницы выводится при ее печати. Свойство, хранящее адрес Web-страницы, представляет собой часть объекта document. Оно так и называется — URL. А поместить значение этого свойства внизу Web-страницы можно с помощью оператора document .URL. Свойство URL предназначено только для чтения; им нельзя воспользоваться дляз изменения TJRL текущей Web-страницы. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

Что еще?

Если URL отображается в окне броузера с помощью оператора document .URL, значит, URL закодирован. Это делается для того, чтобы избежать проблем, связанных с использованием пробелов или специальных символов. Декодировать URL можно с помощью оператора unescape ( ) , который рассматривается в главе 14.

ПРОСМОТР URL ТЕКУЩЕГО ДОКУМЕНТА ; Фгйя

QtMm.a

EMU

йзбмнное

£ЕР»ИС

" * Г •*""".' &~

; .

•:•—

' '•;.,:•:•

Ост*«импг

£рц>даа

_л

ООяО*чяо

4- ""«ОТ- а

Дс**й

flow.»

Иайс**«г

i» ; i

*fn&:

')»"etn

<sbt-ipt

Адогс ШО.ДЛЛ >той страницы а=Ж«5ВЧЬи«ериТла».%208%20-%20Ра6о™%2Сс% 20окнами\ЦБ1Ыт1

Ц Откройте с помощью программы Блокнот файл js-skeleton.html. -И Для отображения текущего URL воспользуйтесь оператором document.write().

—И Сохраните файл под именем URL . html.

ёг«««' ] Откройте в окне

Г Г JSi*«u-»««c>

1 В окне броузера ? броузера файл URL .html, выводится URL для 1

текущей Web-страницы.

ГЛАВА 8. РАБОТА С ОКНАМИ

ПРОСМОТР ССЫЛОЧНЫХ СТРАНИЦ

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

Что еще?

При работе с броузером Internet Explorer могут возникнуть проблемы, связанные со свойством document.referrer, в зависимости от используемой операционной системы. Поэтом нужно быть готовым к тому, что в зависимости от конфигурации компьютера это свойство будет содержать URL текущей Webстраницы или вообще ничего небудет содержать.

Объект document обладает свойством, которое можно использовать для просмотра ссылочной Web-етраницы: referrer. Это свойство позволяет отображать ссылочный URL, представленный в закодированном виде. С помощью свойства document. referrer можно определить гипертекстовую ссылку, использованную для того, чтобы отправизть пользователя к своей Web-странице. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу. ПРОСМОТР ССЫЛОЧНЫХ СТРАНИЦ '. 1 £»йл :

;

'--.-.

J3f»e*i

Ечя

•"•-.-•.,

"•*

K^fcawo*

СИР»*

Осг»нзвигь

,;A«Wcfs' F j.f'.'b.-v.v.V-.i.'.j

Е.поа»в

Ойполть

Длмел

Пес*.

Vijfcerwce

Ждоим

П»*гь

•$ - " Пожил

Ч 'ir'flepwaa ; Ссылки1*

[ y_v J e ;..h,.-,J.'»ieri«MryV

Адрес URL для этой страницы ЫеУ/Е и2&\Прнмеры\Глава9^2[)ЗЯз20-%20Ра6ота*о^Ос':/о

20cKHaMHVe£bnk html

Seffitiii"

Q Откройте с помощью программы Блокнот файл js-skeleton.html. —И Для отображения ссылочного URL воспользуйтесь оператором document.write(). -И Сохраните файл под именем referrer.html.

Q Откройте еЩе один HTML-файл. р| Добавьте гипертекстовую ссылку на страницу referrer.html. Q Сохраните Webстраницу под именем reflink.html.

__il

;

Q Откройте в окне броузера файл reflink.html.

Загружается страница qf errer .html.

отображается ссылочная Щелкните на гипертекстовой ссылке. Web-страница (reflink.html).

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОТКРЫТИЕ НОВОГО ОКНА БРОУЗЕРА

о;

бращали ли вы внимание на то, что при просмотре Web некоторые ссылки порождают новое окно? Подобного эффекта можно дрстичь в JavaScript с помощью метода window . o p e n ( ) . Метод window. open ( ) получает три параметра. Первый параметр — URL-адрес страницы, которую нужно загрузить в новое окно. Второй параметр — имя нового окна. Впоследствии это имя можно использовать для обращения к новому окну; оно, как мы помним, отличается от заголовка документа. Третий параметр определяет такие свойства окна, как ширина, высота, панель инструментов, строка состояния, панель меню, полосы прокрутки и возможность изменения размеров. Эти свой-

(

ства задаются с помощью следующих атрибутов: width, height, toolbar, status, menubar, scrollbars и resizable. Всем атрибутам, за исключением первых двух, может быть присвоено значение yes либо по. Например, предложение JavaScript window . o p e n ( " m y p a g e . h t m l " , " m y w i n d o w " , "width=200, height=400, toolbar=no, status= no, resizeable=yes") ; открывает новое окно размером 200x400 пикселей с изменяемыми размерами без панели инструментов и строки состояния и загружает в него файл mypage. html. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОТКРЫТИЕ НОВОГО ОКНА БРОУЗЕРА

•а

а - з

синовая*' С6ядаи=

Low*

а «а,

Изфзнгое

з... -л. ^

Жденвп -

Пемп

Пр«

a»udji>

I <seript lai

Д Откройте с помощью программы Блокнот файл js-skeleton.html.

Также добавьте в качестве параметров набор атрибутов width, height и resizable.

-И В дескрипторы —И Сохраните файл под <script> добавьте оператор window, open ( ) . именем open. html. L

-H В качестве параметров метода window. open ( ) укажите в скобках имя открываемой Webстраницы, заключенное в кавычки, и имя нового окна.

—И Откройте в окне броузера файл open.html.

• В окне броузера отображается Webстраница.

ГЛАВА 8. РАБОТА С ОКНАМИ

Что еще?

Можно поместить текст в новое окно из исходной Web-страницы. При создании нового окна один из параметров предназначен для его именования. Это имя можно использовать, чтобы направить вывод в новое окно. Например, функция document .write ( ) записывает вывод в текущую Web-страницу, а функция mywindow. w r i t e ( ) записывает текст в новое окно с именем mywindow.

Имя окна хранится в свойстве JavaScript window, name. Для получения имени окна, которое породило новое окно, можно использовать свойство window, opener. Доступ к текущему окну можно также получить с помощью свойства window, s e l f .

.НШ

Приветствуем всех

4»

J 3 -. . 1

Приветствуем всех

е<"1тс ]

Пзвям

^Певемо

[Сскпкм ".

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

'!}

Лоднвое

приветствуем вас, где бы вы ни находились

Й'г<™Г

Я Открывается новое окно с заданными размерами и отображается указанная Web-страница.

-• Если атрибуту resizable присвоено значение yes, можно щелкнуть мышью и перетащить угол или сторону нового окна, чтобы изменить его размеры.

I— —\

tfgfore'

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

;

1АКРЫТИЕ УДАЛЕННОГО ОКНА • лишком большое количество одновременно открытых окон броузера загромождает эк>ран и создает беспорядок. Можно, конечно, всегда закрыть окно, просто щелкнув на кнопке закрытия окна (X) в правом верхнем углу, однако в JavaScript также имеется метод для закрытия удаленных окон. Для закрытия текущего удаленного окна можно воспользоваться функцией window, c l o s e ( ) . При попытке использовать функцию winclow, close () для закрытия исходного окна броузера появляется диалоговое окно с предупреждающим сообщением, в котором пользователя просят подтвердить намерение закрыть окна броузера. Ок-

на, открытые при помощи метода window. open ( ) , функция закрывает автоматически, не запрашивая подтверждения у пользователя. В приведенном ниже примере используются файлы write.html и open.html, однако описанные действия применимы к любому файлу.

ЗАКРЫТИЕ УДАЛЕННОГО ОКНА

<bodji> (script language-"jaudscripf>

pt language-"iauascript"> 1 ;ltm.jgpn(TclDbpTht»il] ,-rfm

</ЬоЛу^

Q В дескриптор <input/> добавьте обработчик события onclick, отождествив его с функцией window.close().

Ц Откройте с помощью программы Блокнот файл write.html. —И Под дескрипторами <script> добавьте набор дескрипторов <form>. —И Используя дескриптор <input/>, создайте кнопку в форме.

-H Сохраните файл под именем close.html.

П Откройте в окне броузера файл open.html. —Q Измените URL для нового окна на close.html.

-И Сохраните файл под именем open2 .html.

ГЛАВА 8. РАБОТА С ОКНАМИ

с~

Что еще?

.w'-^ '

Если на экране открыто несколько окон, для переключения между ними можно воспользоваться методом window, focus ( ) . Можно также принудительно лишить окно фокуса с помощью метода window, blur ( ) . Окно, получившее фокус, можно определить, взглянув на строку заголовка. Цвет строки заголовка окна, получившего фокус, отличается от цвета других окон. Заменить окно, обладающее фокусом, другим окном, можно, просто щелкнув мышью внут-

• uj. 1

"3 ; >а"

е1^1!Щад!Й?КириГр «1

Приветствуем всех

£й - ^

О'

--i

ри окна, которому требуется передать фокус. Переключить фокус между окнами можно также с помощью комбинации клавиш <Alt+Tab>. В примере данного раздела в удаленное окно добавляется кнопка Закрыть (Close). Если добавить кнопку Закрыть в исходное окно, то в отличие от первого случая закрытие исходного окна приведет к завершению сеанса и появлению диалогового окна с просьбой подтвердить команду.

)

Овнсдать

'- j

Лиди во всех уголках грлдущие поколения, мы пркБгтстауем вас, где бы вы аи

:.|

-И Откройте в окне броузера файл open2.html. Ш На экране открываются и отображаются Webстраница и новое окно.

[ 2 Щелкните на кнопке Закрыть (Close) удаленного окна.

• Удаленное окно закрылось, однако породившее его окно осталось.

Ля-вв

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПЕЧАТЬ WEB-СТРАНИЦЫ

а основной панели инструментов броузера имеется кнопка, которая позволяет вывести на печать текущую Web-страницу. Аналогичное средство также доступно в JavaScript. Метод JavaScript w i n d o w . p r i n t () позволяет пользователю вывести текущую Web-страницу на печать. В результате вызова метода открывается диалоговое окно Печать (Print), в котором можно выбрать принтер, количество копий и задать другие опции печати. Если принтер не подключен к компьютеру, с которым работает пользователь, метод window, p r i n t ( ) игнорируется. При открытии нового окна с использованием метода window, open ( ) один из параметров управ-

ляет отображением панели инструментов. Этот параметр может быть задан таким образом, что панель инструментов нового окна окажется скрытой. Если панель инструментов не отображается, кнопка Печать также недоступна. В этом случае можно включить средства печати в Webстраницу с помощью метода window.print ( ) . В приведенном ниже примере используется файл c l o s e . h t m l , созданный в разделе "Закрытие удаленного окна", однако описанные действия применимы к любому файлу.

ПЕЧАТЬ WEB-СТРАНИЦЫ С окнаий\р1Ш1 html - Micioxott M«not £xplor«t §на

избранное

' Сбнсвнть

ЕоиоЛ '

Пэчск

Иэбо^шм

П Откройте с помощью В копии дескриптора программы Блокнот файл <input/> замените close.html. атрибут value для кнопки атрибутом -И Скопируйте Print, а обработчик дескриптор <input/>, события — обработчиком чтобы создать еще одну window. print ( ) . кнопку для Webстраницы. Сохраните файл под именем print .html.

Приветствуем всех

—Я Откройте в окне броузера файл print.html. I В Web-странице появляется кнопка для запуска функции печати.

Щелкните на кнопке Печать Web-страницы.

ГЛАВА 8. РАБОТА С ОКНАМИ

Г Что еще?

Кнопка, реализуемая методом w i n d o w . p r i n t ( ) , приводит к тому же результату, что и кнопка Печать панели инструментов окна броузера. Помимо рассмотренного метода, JavaScript включает несколько методов, соответствующих средствам панели инструментов. К ним относятся методы window.back() и window.forward ( ) , которые выполняют функции, аналогичные функциям кнопок Назад (Back) и Вперед (Forward). JavaScript включает также метод window . home ( ) , который загружа-

ет начальную страницу броузера аналогично кнопке Домой (Ноте) панели инструментов. С помощью JavaScript в Web-страницу можно добавить и функцию кнопки Остановить (Stop). Ее реализует метод window, stop ( ) . Если создать кнопку на основе метода window, pr int ( ) , а затем щелкнуть на ней и при этом окажется, что к вашему компьютеру не подключен принтер, будет выведено диалоговое окно с сообщением о том, что необходимо подключить принтер, прежде чем приступить к печати документа.

•ИИШЖаШ :

: О

«у •*»

•J •:• -J&

Приветствуем всех риЕ (тствуем вас.где 6к вы н

Ш Появляется Q Щелкните на кнопке диалоговое окно Печать. ОК. -Я Выберите принтер и опции печати.

• Проверьте, подключен ли принтер.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПЕРЕМЕЩЕНИЕ ОКОН БРОУЗЕРА

бъект window содержит пару методов, Предназначенных для перемещения текущего окна и изменения его размеров. Метод window. moveTo ( ) получает два параметра для задания расстояния, на которое должен быть перемещен верхний левый угол окна броузера. Расстояние измеряется в пикселях от левой кромки и верхнего края экрана. Например, оператор w i n d o w . m o v e T o ( 2 0 0 , 4 0 0 ) размещает верхний левый угол броузера на расстоянии 200 пикселей от левой кромки экрана и 400 пикселей от верхнего края экрана. Метод window.moveBy ( ) также получает два параметра, которые используются для задания рас-

стояния, на которое должен быть перемещен броузер по вертикали и по горизонтали. Расстояние измеряется в пикселях. Например, оператор window.moveBy (10 , 5 0 ) перемещает текущее окно вправо на 10 пикселей и вниз на 50 пикселей. Причем перемещение совершается при каждом выполнении оператора. Параметры могут быть как положительными, так и отрицательными величинами. Отрицательные значения соответствуют перемещению окна влево и вниз, а положительные — вправо и вверх. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПЕРЕМЕЩЕНИЕ ОКОН БРОУЗЕРА '" ; **

*,z >

яипь

uf- 5 ":3 ' 5 ci "

Ойняпть '

Яемвй

JJapwcp'E М59\Пг*»*»ЛГлвваВ Работа с Q»HabJji№

Псих

Идбришоа

Жмм>л

j" " з " .

П«чкъ

.Пртк* .

")" ^? lejwwM

' Сетей

«) rot(*v

Q Откройте с помощью Q Установите значения программы Блокнот файл параметров метода js-skeleton.html. window.moveTo() равными значениям Добавьте форму текстовых полей. с двумя текстовыми полями и кнопкой. —И Сохраните файл под именем moveTo. html. -И Добавьте обработчик событий onclick и отождествите его с оператором window.moveTo().

•

Зм^"»"»*пвр

;

-И Откройте в окне броузера файл moveTo.html. -Q Щелкните формы.

на кнопке

1 Окно броузера полностью перемещается в позицию с заданными координатами,

ГЛАВА 8. РАБОТА С ОКНАМИ

Г~ Что еще?

Одно из преимуществ использования JavaScript для перемещения окна броузера состоит в возможности контроля. В случае нескольких открытых окон методы window .moveTo и window.moveBy позволяют точно позиционировать вновь открываемое окно. Например, при открытии удаленное окно по гиперссылке можно сместить к краю главного окна. Еще один полезный прием использования описанных методов состоит в динамическом об-

Откройте с помощью программы Блокнот файл movoTo.html.

Измените наименование кнопки.

Сохраните файл под именем moveBy. html. -И Замените метод window.moveTo() методом window.moveBy().

Ю-Г'47

новлении значений координат х и у метода window. moveBy ( ) для анимации перемещения окна, например, таким образом. function moveDiagO { for (i=l;I<100;I++) window . moveBy ( i , i ) Эта функция заставляет окно перемещаться окно вправо и вниз на 1 пиксель в цикле, пока переменная цикла не достигнет значения 100.

Откройте в окне броузера файл moveBy.html. Щелкните на кнопке формы.

• Окно броузера перемещается на заданное расстояние.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИЗМЕНЕНИЕ РАЗМЕРОВ ОКОН

ак уже упоминалось, объект window также содержит пару методов, предназначенных для изменения размеров текущего окна, которые аналогичны методам перемещения move. Метод window. resizeTo ( ) получает два параметра для задания ширины и высоты окна броузера в пикселях. Например, оператор window. resizeTo (2 0 0 , 4 0 0 ) изменяет ширину окна броузера до 200 пикселей, а высоту — до 400. Метод window. resizeBy ( ) увеличивает ширину и высоту текущего окна броузера. Например, функция window. resizeBy (10 , 50} увеличивает ширину окна на 10 пикселей, а высоту — на 50.

Параметры метода window. resizeBy () могут быть отрицательными величинами. Ясно, что отрицательные значения уменьшают размеры окна. В приведенном ниже примере используется файл moveTo.html, созданный в разделе "Перемещение окон броузера", однако описанные действия применимы к любому файлу.

ИЗМЕНЕНИЕ РАЗМЕРОВ ОКОН

Ж» Ж

Лито. 1 Со»»«

lpt>

nan*'"for>1">

по горизонтали: <input lype-"text" no вертикали: <input typt~"ttxt' <: noor t u p p ' - b u t t o n " ualofftjaMeHHTb Ji-i*--|Minii t n t . r esizf-Tcti1ocu№nt.forHT.x.uaHje.doi:oro4

Ц Откройте с помощью программы Блокнот файл moveTo.html.

ir«1.y.valuO:"/>

Измените значения текстовых полей и наименование кнопки.

-И Замените метод window. moveTo ( ) методом — Н Сохраните файл window. resizeTo ( ) . под именем resizeTo.html.

-И Откройте в окне броузера файл resizeTo.html. -И Щелкните на кнопке формы.

• Размеры окна броузера изменяются в соответствии с заданными значениями.

ГЛАВА 8. РАБОТА С ОКНАМИ

Что еще?

JavaScript включает еще пару методов, которые позволяют управлять окнами и очень схожи с методами window. resizeTo ( } и window.resizeBy(). Это методы w i n d o w . s c r o l l T o ( ) и w i n d o w . s c r o l l B y ( ) . Они позволяют управлять функцией прокрутки страниц броузера. Например, оператор window. s c r o l l T o ( 1 0 , 2 0 0 ) прокручивает окно вправо на 10 пикселей и вниз на 200 пикселей. Эти методы работают толь-

ко в том случае, если размеры Web-страницы требуют скроллинга. Если окно броузера максимизировано с помощью кнопки Развернуть (Maximize), расположенной в левом верхнем углу окна броузера, метод r e s i z e B y ( ) просто не срабатывает.

;':.•• !Э ,: .а

htnl> head>

Ос^лме".

Обнсель

-а

Ло»ой

Пот '

(!эйр**«*

& ' а

Жцмаа '

Пвчеть

Пцяг.а

body>

по вертикал» |50П

/for*? </body> </htnl>

Ц Откройте с помощью программы Блокнот файл resizeTo.html.

_ Измените наименование кнопки.

Сохраните файл -И Замените метод window.resizeTo() методом под именем window.resizeBy(). resizeBy.html.

LQ'

—И Откройте в окне броузера файл resizeBy.html. —И Щелкните на кнопке формы.

• Размеры окна броузера увеличиваются в соответствии с заданными значениями.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИНФОРМИРОВАНИЕ ПОЛЬЗОВАТЕЛЕЙ С ПОМОЩЬЮ ОКОН ПРЕДУПРЕЖДЕНИЯ

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

держит всего одну кнопку — ОК. Само сообщение задается в качестве параметра методу a l e r t ( ) , при передаче параметра текст сообщения заключается в кавычки. Например, оператор w i n d o w . a l e r t ( " П р и в е т " ) создает диалоговое окно, отображающее слово Привет. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИНФОРМИРОВАНИЕ ПОЛЬЗОВАТЕЛЕЙ С ПОМОЩЬЮ ОКОН ПРЕДУПРЕЖДЕНИЯ

</sjnpT /body} /t!tnl>

Ц Откройте с помощью *~И Сохраните файл под 43 Откройте в окне программы Блокнот файл именем alert. html. броузера файл js-skeleton.html. alert.html. -Я Чтобы отобразить сообщение, в дескрипторы <script> добавьте метод window.alert().

Ш В окне броузера появляется диалоговое окно с сообщением.

Щелкните на кнопке

ОК.

ГЛАВА 8. РАБОТА С ОКНАМИ

Г Что еще?

Диалоговые окна предупреждения можно использовать для отладки. Например, рассмотрим следующую функцию, предназначенную для проверки переменных. f u n c t i o n checkVariable(varName, varl) window.alert("The value of " + • varName + " is " + varl); I

{

Обратиться к ней можно с помощью следующей функции. checkVariable("blink", blink); При вызове этой функции появляется диалоговое окно, содержащее имя переменной и ее значение. Подобная возможность контроля значений переменных может быть весьма полезной при отладке сценариев. После завершения отладки сценария функцию и все соответствующие вызовы можно просто удалить из программы.

Печать

Лря»а

•'Т

|нвет. еие раз! • J";

Чтобы отобразить 0 Откройте с помощью программы Блокнот файл сообщение, отождествите обработчик события js-skeleton.html. onload с методом -Я В дескрипторы window.alert. <body> добавьте -И Сохраните файл под обработчик события именем alert2 .html. onload.

Замечание. Диалоговые окна предупреждения можно открыть, поместив оператор window, alert • В окне броузера е дескрипторы <script> появляется диалоговое или присоединив его окно с сообщением. к обработчику события.

Откройте в окне броузера файл alert2.html.

-П1 Щелкните на кнопке ОК.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОЛУЧЕНИЕ ИНФОРМАЦИИ ЧЕРЕЗ ЩШУ1АШЕНИЕ ДЛЯ ВВОДА

сли вам необходимо о чем-либо проинформировать пользователя, то диалоговое окно ^предупреждения — именно то, что нужно. Однако оно не допускает обратной связи — через него нельзя ввести информацию в сценарий. Этой цели служит другой тип диалоговых окон — диалоговое окно с приглашением для ввода. Оно позволяет пользователю ввести информацию в текстовое поле. Объект window включает метод для создания диалоговых окон приглашения. Такое диалоговое окно содержит, как правило, кнопку ОК, кнопку Отмена (Cancel) и текстовое поле, в которое пользователь вводит информацию.

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

ПОЛУЧЕНИЕ ИНФОРМАЦИИ ЧЕРЕЗ ПРИГЛАШЕНИЕ ДЛЯ ВВОДА .

. • с ipt Ianguage-"j4ua script">

fU-E..»».^.'». и..,....'^

document. write (' ныне </body> </htnl>

Д Откройте с помощью Q Для отображения программы Блокнот файл значений переменной добавьте несколько j s-skeleton.html. операторов -И В дескрипторах document .write ( ) . <script> объявите npnpMPHHVTo и ттпиоиойте — И Сохпаните Лайл поп именем prompt .html. ей значение, возвращаемое в качестве результата методом window.prompt().

-И Откройте в окне броузера файл prompt .html.

М В окне броузера появляется диалоговое окно приглашения с сообщением.

ГЛАВА 8. РАБОТА С ОКНАМИ

Г Что еще?

Чтобы не включать в текстовое поле сообщение, которое выводится 'по умолчанию при открытии диалогового окна, можно присвоить второму параметру метода prompt ( ) в качестве значения пустую строку (""). Если второй параметр отсутствует, в качестве значения, выводимого по умолчанию в текстовом поле диалогового окна, используется текст <undefined>.

Ойн.ччт

3 i" "™»

Диалоговое окно приглашения обычно содержит кнопки ОК. и Отмена. Если щелкнуть на кнопке ОК, значение, введенное в текстовом поле диалогового приглашения, передается в сценарий. Однако если щелкнуть на кнопке Отмена, в сценарий возвращается значение null. Проверить значение null можно с помощью оператора if (window.prompt("Введите значение" , " 10 " ) ! = n u l l ) .

Г . н

Гоне*.

Приветствуем вас, Георгий^ а также

Логлой

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

s^ej th*j яттечмнлаа Як/Д:^УДрч^Ч»^ 'mittt? ЦЙйй'с&Ш* «"•«А'ршВ

-0 Введите в текстовое поле имя.

-«"Я1

"i f э»^«-~>^ ' ' •:

• - ,4

^fl Щелкните на кнопке ОК.

•• В окне броузера отображается "персонифицированная" Web-страница.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ДИАЛОГОВОЕ ОКНО ДЛЯ ПОДТВЕРЖДЕНИЯ РЕШЕНИЯ ПОЛЬЗОВАТЕЛЯ

иалоговое окно приглашения позволяет ввести в сценарий строку текста, а другой тип диалогового окна — подтверждения — позволяет задать пользователю вопросы. Диалоговое окно подтверждения также представляет собой компонент объекта window. Оно включает кнопки ОК и Отмена (Cancel) и может использоваться для того, чтобы предоставить пользователю возможность ответить на вопросы. Диалоговое окно подтверждения реализуется с помощью метода c o n f i r m ( ) . Метод confirm)) получает всего один параметр, который используется для отображения сообщения в диалоговом окне.

в случае выбора кнопки Отмена. Присвоив некоторой переменной значение, возвращаемое методом window, confirm ( ) , можно зафиксировать ответ пользователя, выбранный им в диалоговом окне подтверждения. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

Метод confirm ( ) возвращает значение true, если была выбрана кнопка ОК, и значение false — ДИАЛОГОВОЕ ОКНО ДЛЯ ПОДТВЕРЖДЕНИЯ РЕШЕНИЯ ПОЛЬЗОВАТЕЛЯ

111.""- "г",

"»•••' ••

Ц Откройте с помощью программы Блокнот файл js-skeleton.html.

Для контроля значения, возвращаемого диалоговым окном -И Объявите переменную подтверждения, и присвойте ей значение, и отображения возвращаемое методом соответствующего текста window.confirm(). добавьте в сценарий оператор if-else. —Q Сохраните файл под именем confirm.html.

—И Откройте в окне броузера файл confirm.html. • В окне броузера появляется диалоговое окно подтверждения с вопросом.

Щелкните на кнопке ОК.

ГЛАВА 8. РАБОТА С ОКНАМИ

По:пробуй!

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

if (check) document.forml.resetl.click();

} <form name="forml"> <input type="reset" name="resetl" onclick="confirmReset()"> </form> После нажатия кнопки сброса вызывается функция confirmReset ( ) и на экране отображается диалоговое окно подтверждения. Если затем пользователь щелкает на кнопке ОК, осуществляется сброс формы страницы. Если же пользователь щелкает на кнопке Отмена, сброс формы отменяется.

function confirmReset() { check = window.confirm("Вы уверены, что хотите выполнить сброс формы?");

fl»«*

£»йл

Остановил,

Обноаиг»

В*

Ц**""™ Са»»с ЕПРИК.

,- •> '-V.

Осгамяигь 0*«в«

т-4г'" ; •+' .' ^ "" з

^ ^ П^ ч

., .эгйгпИ&л!

^Пжими iiCosn»*

Добро пожаловать в клуб любителей тыквенного а пирога

•••- ,v.

$ ;""^:".""о|7- ^" v ; : "d*

Домой

Пене*

Кздикнм

Жда«я :

.• ' Е Ч5В^Л(илероЛГл*а8 . Работ* с OKn**H^w*tr МН

IWwa

.• ЩЩ

5'"", -

Пвавч

•] ^Вареяж

CcefM- *

Добро пожаловать в клуб противников тыквенного пирога

л-,-..™.,.

полсржительное сообщение.

Обновить (Refresh) для перезагрузки Web-страницы.

иг™.

;

"_( «о--»«лпв(;

J Щелкните на кнопке 1 1 Отображается Отмена. противоположное сообщение.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ШПОЛЬЗОВАНИЕ ОБЪЕКТА STRING

бъект string включает свойства и методы, Предназначенные для работы с текстом.

Однб из самых простых свойств объекта string — свойство length, которое возвращает количество символов в строке. Эта информация весьма полезна при работе со строками, поскольку позволяет узнать, сколько символов содержится в строке. Объект string обеспечивает также ряд методов работы с текстом. Некоторые из них можно использовать для форматирования текста с помощью дескрипторов HTML. Например, метод b o l d ( ) возвращает строку текста, заключенную между открывающим и закрывающим дескрипторами <bold>. К другим методам формати-

рования строк относятся такие методы, как big(), fontcolor(color), fontSize(size), italics(), link(href), small(), str_ke(), s u b ( ) , s u p ( ) , toLowerCase() и toUpperCase(). Примеры их использования приводятся ниже в этой главе, в разделе "Форматирование строковых переменных". Другие методы объекта string позволяют объединять, искать и выделять фрагменты текста. К ним относятся char At (index), concat ( t e x t ) , replace(textl, text2) и substring(indexl, index2). В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА STRING

•

t language-"lJuascrlpt"> TTrig" "Петь под радио - i

Q Откройте с помощью Q Добавьте оператор программы Блокнот файл document .write ( ) , js-skeleton.html. чтобы отобразить строку, отформатированную —Q Создайте строковую с помощью метода переменную и присвойте bold( ). ей значение. Сохраните файл под -И Чтобы отобразить именем string.html. значение строки, воспользуйтесь оператором document.write().

Домой

.Т.«-'

Пенс*

Петь под радио - неплохой метод терапии, особенно, если вас к Пт ппд радар - ннимавй штод теридш. особщно, если в я

—И Откройте в окне броузера файл string.html.

«буяь.яли о-инбуд» к

В окне броузера отображается строка, выведенная обычным и полужирным шрифтами.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Что еще?

Объекты string создаются по умолчанию всякий раз при объявлении строковой переменной. Строка присваивается любой переменной, в определении которой имеется пара кавычек. Объект string можно также создать с помощью оператора new, однако в этом, как правило, нет необходимости. Для этого требуется указать имя строки и присвоить переменной с данным именем ссылку на объект, порожденный оператором new S t r i n g O . Например, предложение JavaScript stringl =

new String ( ) ; создает новый строковый объект, а оператор stringl .bold ( ) ; вызывает для этой строки метод bold ( ) . Вместо двойных кавычек можно использовать одинарные кавычки. В некоторых случаях может потребоваться использовать и те, и другие кавычки. Например, при задании оператора docum e n t . w r i t e внутри описания события кавычки для оператора document .write должны отличаться от кавычек для обработчика события.

: ] 3>«я

:ntni> :/hrad> lbodu> <script language-"jawascrlpt"> •jlStrlng - "Петь поя раит - неплохой иетов терапии, особенно, не Kfn-H*6ijHb в и д и т . < Ы / > " ; decuM>nt.«rite(HyString);

Оояюв

В1*.

Узбрагноа

Сдоен:

* - . " * , Cj"'»«Mtm> Э

::^ЯРРС^'Е

У36\Л р1 .м.ры^^амЧ

Сгюввк*

Ш •Ji»*»! 3 'i . Поив' SJ' i !&**-!*. Рдб^а

с^

стр»

ам|

jil

Й5«С**1М

^Шпд?

Ьы)

Ж1С-ИМ

Петь под радио - неплохой метод терапии, особенно, если вас кто-нибудь видит

Я !.

ПвЧГв

^Пврввв

ПмвКЯ

Ссылки

-ig.i:g:asiife;a:5ia]^.t.:i <Kcnpb>

и* ;•

| IfSSS™

Д Откройте с помощью программы Блокнот файл stririg.html.

Добавьте оператор document .write ( ) , чтобы: отобразить строку, все буквы в которой преобразованы в прописные.

Сохраните файл под именем string2 . html.

-И Откройте в окне броузера файл string2.html.

1 1 В окне броузера отображается строка, состоящая из прописных букв.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

н ЭДСТРОКИ и РАБОТА С НИМИ ;^™ одстрока — это часть строки. Для выделения фрагмента строки можно воспользоваться методом substring ( ) . Метод substring ( ) получает два параметра, соответствующих первому и последнему символам, которые требуется выделить из основной строки. Например, если строка определена как strl = " u s e f u l handbook", оператор s t r l . s u b s t r i n g ( 0 , 10) эквивалентен строке " u s e f u l hand". JavaScript включает еще один полезный метод выделения подстроки, substг ( ) , который также получает два параметра: первый указывает начало подстроки в строке, а второй — длину выделяемой подстроки. Например, если строка

определена как str2 = "boring dialogue", результатом выполнения оператора s t r 2 . s u b s t r ( 7 , 4 ) будет подстрока " d i a l " . Следует помнить, что пробелы считаются символами, а нумерация строки начинается с нуля (0). В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПОДСТРОКИ И РАБОТА С НИМИ '•'Я >:Х:3"; «оме* ИУкьням воа»)

• icript '

Д Откройте с помощью Q Добавьте оператор программы Блокнот файл d o c u m e n t . w r i t e ( ) , чтобы отобразить j s-skeleton.html. подстроку,созданную ~Н Создайте строковую с помощью метода переменную и присвойте s u b s t r i n g ( ) . ей значение. —И Сохраните файл под -И Чтобы отобразить именем значение строки, substring.html. воспользуйтесь оператором document.write().

Дождь апреля Дождь апреля

Замечание. Подстрока начинается с первой позиции в соответствии со значением первого -• В окне броузера параметра (0) отображаются строка и заканчивается и подстрока, выделенная в позиции 13 (пробел), из этой строки. как задано вторым параметром. Откройте в окне броузера файл substring.html.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Г Что еще?

JavaScript включает еще один метод, который работает аналогично методу substring(), но при этом обладает некоторыми дополнительными возможностями. Метод slice() работает со строками так же, как с массивами. Методу передаются два параметра. Первый параметр — значение начального номера позиции, с которой должна вырезаться строка. Второе значение — конечный номер позиции, на которой должна заканчиваться выреза-

tscript language-" jai>ascrlpt"> stn * "Лождь • апреле - цвету в ни document .M-itr(strl): enciMMtt •rltefstM.substrinafi.H»

емая часть. Отличие этого метода от метода substring () состоит в том, что значение второго параметра метода s l i c e t ) может быть отрицательным числом. Отрицательное значение просто означает, что отсчет символов, вырезаемых в подстроке, ведется от конца строки к началу. Например, для строки, определенной оператором присваивания strl = "ближе к ленчу", оператор вызова метода s t r l . s l i c e ( 5 , -2) возвращает подстроку " к лен".

Дождь в апреле - цветы в Дождь в апреле

Q Откройте с помощью *-И Сохраните файл под программы Блокнот файл именем substring.html. substring2.html. -И Чтобы отобразить другую подстроку, созданную с помощью метода substr ( ) , добавьте: в сценарий еще один ошфатор document.write().

-Ц] Откройте в окне броузера файл substring2.html. -• В окне броузера отображаются строка и подстроки, выделенные из этой строки.

Замечание. Подстрока начинается с позиции, заданной первым параметром (20), а ее длина задана вторым параметром. — 11 символов.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

1ЦЕШ1ШИЕ СТРОК

етоды substring ( ) и substr ( ) использу•ются для разделения строк на части, одна;ко JavaScript включает также метод для соединения строк (иногда эту операцию называют сцеплением или конкатенацией строк). Метод concat ( ) прикрепляет вторую строку к концу первой. Вторая, присоединяемая, строка указывается в качестве параметра метода concat ( ) . Например, если одна строка определена как strl = "Спасибо за ", а другая — как str2 = "хорошо проделанную работу.", эти две строки могут быть соединены с помощью оператора strl. concat ( s t r 2 ) . Еще один простой способ сцепления строк заключается в использовании оператора присваивания

со сложением (+=). Он во многом аналогичен рассмотренным операторам; чтобы добавить вторую строку в конец первой, необходимо просто поместить между этими двумя строками оператор + = . Например, строки strl и str2 можно соединить с помощью оператора strl += str2. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

СЦЕПЛЕНИЕ СТРОК

Псчпь

гщэеы

•ipt langujqe-'Mauascripf'>

document-4t-il

мир. счастье и процветание

<7?СТТРГ <rtoOii> </htnl>

Ц Откройте с помощью Q Добавьте оператор программы Блокнот файл document.write(), чтобы отобразить js-skeleton.html. строки, сцепленные -0 Создайте две с помощью метода строковые переменные concat(). и присвойте им —И Сохраните файл под значения. именем concat .html. -И Чтобы отобразить значения обеих строк, воспользуйтесь оператором document.write().

-И Откройте в окне броузера файл concat.html.

• В окне броузера отображаются строки по отдельности и после сцепления.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Что еще?

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

strl = "Он воскликнул \ "Урр-ра\ " , когда закончил работу. ''

Этот оператор отображает слово в кавычках, как это обычно делается при цитировании. К другим управляющим символам относятся одинарная кавычка (\ '), обратный слэш (\\), символ возврата на одну позицию (\Ь), символ табуляции (\t), символ новой строки (\п), символ возврата каретки (\г) и символ подачи формы (\f). Например,оператор str2 = "Файл расположен в каталоге С: \ \ t e m p \ \ t e s t . " ; правильно отображает символы обратных слешэй.

!ian]i^c\-SB^^^^^,3-f^mt,am^a--Mnal ~

ир, счастье и процв

Д Откройте с помощью *—И Сохраните файл под программы Блокнот файл именем concat2 .html. js-skeleton.html. —Q Добавьте оператор document.write(), чтобы отобразить строки,сцепленные с помощью оператора + = .

-И Откройте в окне , Замечание. Метод concat ( ) не дает явных преимуществ броузера файл по сравнению с оператором concat2.html. присваивания со сложением. "• Теперь в окне броузера отображается вторая сцепленная строка.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ФОРМАТИРОВАНИЕ СТРОКОВЫХ [РЕМЕННЫХ 1

помощью" JavaScript можно создавать f функции, которые позволяют форматировать строки с использованием дескрипторов IjITML, однако многие основные возможности форматирования обеспечиваются непосредственно методами объекта string. Принцип работы этих методов форматирования строк очень прост — они просто добавляют необходимые дескрипторы в начало и в конец строки. Например, для строки strl = "Маленький Джон" результатом применения оператора strl. big ( ) будет HTML-предложение <Ыд>Маленький Джон</Ыд>. К другим методам форматирования строк относятся b i g ( ) , b o l d ( ) , i t a l i c s f ) , s m a l l ( ) ,

strike ( ) , sub ( ) и sup ( ) . Методы sub ( ) и sup ( ) используются для форматирования символов строк как подстрочных и надстрочных индексов. Можно также изменить размер шрифта с помощью метода font size ( } , который получает в качестве параметра размер шрифта. Этот параметр может принимать целочисленное значение в пределах от 1 до 7, при этом 7 — наибольшее значение. Цвет шрифта можно установить с помощью метода fontcolor!), который получает параметр цвета, представленный в виде имени цвета или шестнадцатеричного значения цвета. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ФОРМАТИРОВАНИЕ СТРОКОВЫХ ПЕРЕМЕННЫХ a JL. ni.*г»~

S^SS^i^S

«jjElEtl

-.. Лсмсб

а " ji . j

И >*>

Нэ6(>»*ч1в

*•#•»"

Пвчда

а' .

Пивка

•j i'nwMiHCBwui*

ow^torr.iMm.l

Где твой источник вдохновенья''' Где твой HCTO'DfliK вдохновенья? 1

M-ttt(strl.bnldO); nritt(strl.ltaUcto);

Где яой источник WuBioitButf Гд« Т*ОЙ ИГТОЧНЧК КДОХНОК*Н1.Я?

Где твой источник tdoxnottHM? Гяе TBCI* •кет^яиквдожн'мсяня?

S0F(»»iiiiii-

Д Откройте с помощью Q Добавьте несколько программы Блокнот файл операторов j s-skeleton.html. document.write(), чтобы отобразить -И Создайте строковую результаты применения переменную и присвойте различных методов ей значение. форматирования к одной и той же строке. —И Чтобы отобразить строковое значение, -И Сохраните файл под воспользуйтесь именем format.html. оператором document.write().

•

-ч

броузера файл format .html.

сначала отображается обычная строка, а затем — эта же строка после форматирования.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Что еще?

Если методы s u b ( ) и s u p ( ) применяются для форматирования всей строки, довольно сложно определить, насколько отформатированная строка отличается от обычной, пока ее нельзя сравнить с какой-нибудь другой строкой Web-страницы. Более целесообразный способ применения метода s u b ( ) состоит в построении, например, следующей строки. water = "Н" + " 2 " . s u b ( ) + " О " ; Этот оператор создает строковую переменную с именем

</head> <body>

<№r,fn

squared = "х" + " 2 " . s u p ( ) ;

doc i men w dDCLiwn wr docinen иг

docunen MT docuiwn .tolaoci,nen ,»r

water, которая включает символ Н, строку для цифры 2, возвращаемую методом s u b ( } , и символ О. В результирующей строке номер отображается как нижний индекс буквы Н. (В результате выполнения этого примера получается химическая формула воды, Н20, в соответствии с именем переменной — water. — Прим. ред.) Ниже приводится пример использования метода sup.

): .bigO); ы<м11О);

e s r

Помп —

пшТр»«и1 '

^ а .

Лечяс

Правка

Где твой источник вдохновенья" Где твой источник вдохновгньл''

italicsO); striken): f ontsiie(4)} ;

—

Оечкжтк Обновить Помой ; ч f^Vrr "n*~ 1 ~'.V4

Где твой источник вдохновенья?

</htnl>

Q Откройте с помощью -И Сохраните файл под программы Блокнот файл именем f ormat2 .html. forrr.at .html. Q Добавьте несколько операторов document.write(), чтобы отобразить строку с различными размерами и цветами шрифта.

11-1747

—ПП Откройте в окне броузера файл format2.html.

В окне броузера отображается строка с различными размерами и цветами шрифта.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

СОЗДАНИЕ ЭЛЕМЕНТОВ ПРИВЯЗКИ ГИПЕРТЕКСТОВЫХ ССЫЛОК и

роизвольный объект string может быть Преобразован в элемент привязки (иногда называемый анкером или якорем) либо в гипертекстовую ссылку с помощью методов anchor ( ) H l i n k ( ) объекта string. Метод anchor ( ) получает в качестве параметра имя, которое используется для задания имени элемента привязки. Метод l i n k ( ) получает параметр href, определяющий адрес, на который указывает ссылка. Например, если определить строку с помощью оператора s t r l = "This is the s t a r t " , можно превратить ее в элемент привязки, именованный

как " s t a r t " с помощью следующего предложения JavaScript. str1.anchor("start") Рассмотрим следующий пример использования метода link ( ) . Пусть задана строка str2 = " fun for kids". Тогда для ее преобразования в гиперссылку можно применить следующий оператор. str2.link("www.animabets.com") В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

СОЗДАНИЕ ЭЛЕМЕНТОВ ПРИВЯЗКИ И ГИПЕРТЕКСТОВЫХ ССЫЛОК

> - id . a ГИГИ

ОБНОВИТЬ

language-"i4Mascript">

Домой

шийиии— "" "'^1

ПОИСК

dKd на начало<Ьг/>"

document.wr docunent.wr docunent .w ilocunent ,ur-

t J*(Link("«вtar inkC'itenrt11)!

Ц Откройте с помощью Q Создайте несколько программы Блокнот файл элементов привязки и гипертекстовых js-skeleton.html. ссылок с помощью —0 Создайте несколько методов anchor ( ) строковых переменных и link ( ) . Установите и присвойте им в качестве адресов значения. ссылок элементы привязки, расположив -И Чтобы отобразить перед каждым из них строковые значения, символ номера #. воспользуйтесь оператором —И Сохраните файл под document.write(). именем link.html.

-П Откройте в окне броузера файл link.html.

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

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Что еще?

Методу anchor ( ) можно передать в качестве имени анкера любую строку или значение переменной. Параметры, передаваемые методу l i n k ( ) , должны представлять собой правильный URL или адрес. Использование метода l i n k ( ) с неверным URL не приведет к ошибке сценария, однако, если щелкнуть на ссылке, не последует никакой реакции.

При использовании имени анкера в качестве параметра метода link ( ) ссылка будет указывать на анкер. Необходимо, чтобы имени анкера-параметра предшествовал символ номера (#). Параметр href, передаваемый методу l i n k ( ) , может быть либо относительным, либо абсолютным URL. При этом абсолютный URL должен содержать протокол наподобие http.

*: s?2 .~~ ™^ ™™ ^ • ^ е адоее}0'Е ЛВ^Лримеры^ яма 9 -Р*^а со строками^ html

щ:* 3 Г*Л«~«

Cm*."

Это конг ^ страницы. и:аи*Ааь *ач*й1

S"Sp^'f*^^I^^^^W*^^^SW^^^^3

j j ^Пережо ; i Ссыяш *

»то начало страницы

(

• £: -• г ^з """4 a S ^

! •

LL-I

!^*^*«м«-и™р

мыши на первую ссылку, строку состояния: гипертекстовая ссылка указывает на первый элемент привязки.

... Это конец страницы.

мыши на вторую ссылку, строку состояния: гипертекстовая ссылка указывает на второй элемент привязки.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ ДЛИНЫ СТРОК бъект s t r i n g обладает единственным Свойством — length. Это свойство можно Использовать в качестве компонента опе1 ратора for для посимвольного просмотра строки. Например, для строки, определенной как strl = "hello", свойство strl. length равно 5. При определении значения свойства length учитываются все символы, заключенные в кавычки, в том числе пробелы и любой код HTML. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Г~ Что еще?

При использовании свойства length управляющие символы наподобие символов \ " и \ t считаются одним символом.

ОПРЕДЕЛЕНИЕ ДЛИНЫ СТРОК

Остановить ЗДмммг* . Домой

Почет

Иэбмию»

Ждо*л

Течет.

let 1||паил»-"И»«ч:г1М"> строки равна 16Г

Ц Откройте с помощью программы Блокнот файл js-skeleton.html. В дескрипторы <script> добавьте строковую переменную и присвойте ей значение.

Чтобы отобразить строку и значение длины строки, воспользуйтесь операторами document.write(). —О Сохраните файл под именем length.html.

—И Откройте в окне броузера файл length.html.

• В окне броузера отображаются строка и значение длины строки.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

ИЗМЕНЕНИЕ РЕГИСТРА

JavaScript при вводе строки в сценарий, набранный только строчными (или только про- IJ-pO цисными) буквами, можно преобразовать все её символы в прописные (строчные) буквы.

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

Метод toLowerCase (} можно использовать для преобразования всех символов строки в строчные. При этом следует помнить о том, что даже начальные буквы (каждое слово начинается с прописной буквы) изменяются на строчные. Метод toUpperCase ( ) можно использовать для преобразования всех символов строки в прописные. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИЗМЕНЕНИЕ РЕГИСТРА

<bady> crip

:"--;

i:"\V .-,

ОсТ*>ЮВ1ЛЪ

ОЙИОвнП>

Дом»

ПшСК

[йаввС 1* ; Е У5ВФримм>ьЛГлавв 9 -Работает гтт» *Л\с*1е1^1

ИЛМННОв

ЖэСивя

Пвчат» ..

ПрМКД

'| ^П^ииоа

Ссыиил м

ПИСАТЬ ПРОПИСНЫМИ БУКВАМИ - УМОРИТЕЛЬНО |

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html.

Чтобы отобразить строку в ее первоначальном виде, а затем после преобразова-И В дескрипторы ния — прописными и <scripit> добавьте строчными буквами, строковую переменную и воспользуйтесь присвойте ей значение. операторами document . write ( ) . Сохраните файл под именем case .html.

—И Откройте в окне броузера файл case.html.

• В окне броузера отображаются первоначальная строка и эта же строка, набранная строчными и прописными буквами.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОИСК ФРАГМЕНТОВ СТРОК

a|vaScript позволяет выполнять поиск фрагмейтов текста. Эта возможность играет весьма Существенную роль при синтаксическом разборе текста. Для поиска фрагментов текста в JavaScript используется метод search ( ) объекта string. Параметром для этого метода служит искомая строка. Метод возвращает номер позиции искомой подстроки в строке. Например, если строка определена как strl = "Ваше имя хорошо известно. ", вы можете отыскать слово известно с помощью оператора strl. search ("известно"). В качестве результата метод возвращает значение 16. Напомним, что нумерация символов в строке всегда начинается с нуля (0).

Если искомую подстроку нельзя выделить внутри строки, метод возвращает значение -1. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

поиск ФРАГМЕНТОВ СТРОК

Это конец строки

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html.

~Н Создайте строковую переменную и присвойте ей значение.

Q Чтобы отобразить номер позиции, с которой начинается слово в строке, добавьте в сценарий еще один оператор document.write().

~Н Чтобы отобразить L-0 Сохраните файл под значение строки, именем search. html. воспользуйтесь оператором document.write().

-И Откройте в окне броузера файл search.html.

• В окне броузера отображаются строка и начальная позиция слова в строке.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

Попробуй!

Если Web-страница обладает средствами поиска, у вас появляется возможность проверить наличие определенной строки в тексте, прежде чем продолжить поиск. Такую проверку можно осуществить с помощью метода search ( ) , например, так, как показано ниже. function checkSearch(searchString, text) { if (text.search(searchString) == -1) document.write("Искомая строка отсутствует в этом фрагменте текста.") else { searchlndex = text.search(searchString); return searchlndex;

}

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

i-lM».»^..

Q Откройте с помощью программы Блокнот файл search.html. -И Измените значение параметра, передаваемого методу search ( ) , таким образом, чтобы выполнялся поиск несуществующего фрагмента строки.

-pi Сохраните файл под именем search2 . html.

-ПЛ Откройте в окне броузера файл search2.html.

Метод search ( ) возвращает значение позиции,равное —1.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ЛОКАЛИЗАЦИЯ СИМВОЛОВ В СТРОКЕ avaScript, помимо метода search ( ) , включает Другие методы точной локализации символов и строк. Метод indexOf ( ) , аналогично методу search ( ) , можно использовать для обнаружения первого вхождения строки, однако в дополнение к этому можно задать место, с которого метод должен начинать поиск. Напомним, что значение первой позиции в строке равно нулю (0).

Например, если строка определена как s t r l = "Я люблю спагетти, а также фрикадельки, а также чесночный х л е б " , первое вхождение строки "а т а к ж е " можно обнаружить с помощью опера-

тора s t r l . i n d e x O f ( " а т а к ж е " ) . Затем можно отыскать второе вхождение слов "а т а к ж е " в строке с помощью оператора s t r l . indexOf ( " a также" , 2 5 ) . Этот оператор начинает поиск подстроки "а т а к ж е " с 25-го символа в строке. В JavaScript существует также возможность поиска в обратном направлении — от конца к началу строки. Эта возможность реализуется методом lastlndexOf ( ) . Если указан второй параметр, метод осуществляет поиск от конца к началу строки с позиции, заданной вторым параметром.

ЛОКАЛИЗАЦИЯ СИМВОЛОВ В СТРОКЕ £вй"

* ••-•,

0<мв«

8 **

Цэбршм

СВРОНС

•* '•:•':'& '.'VJy.;' •'- ОсТ»«Жип,

. — . „.

...

£пр»кв

Л ОвновиЧ.

4 '; £1

Домой • Л ал». . | ^.,1 |„» —

-^ •

Иа&анюс

;

JS . •-»> Печать

Жа&.ш

SA • • "''

Помял

?Пда«,Нй»»«» 3 X

ВЕСКОЙ появляются цветы н зеленые листья и зайчата 1

</sci-ipt:

/tiodji> /htnl>

еГгв«*в'

Чтобы отобразить Ц Откройте с помощью программы Блокнот файл строку и номер позиции второй подстроки " и " , j s-skeleton.html. воспользуйтесь В дескрипторы операторами <script> добавьте document.write() . строковую переменную и присвойте ей значение. Q Сохраните файл под —именем indexOf .html.

-И Откройте в окне броузера файл indexOf.html.

; £& Wsfl Koi^iwrneu

1 1 В окне броузера отображаются строка и начальная позиция второй подстроки "и" в тексте.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

г~

Попробуй!

Используя метод indexOf ( ) , можно написать функцию для поиска всех вхождений определенной строки в тексте. Для этого можно воспользоваться операторами if и while. Подобная функция выглядит следующим образом. function findAll(searchString, text) { num = 0; index = 0; pos = new A r r a y ( ) ; while text.indexOf(searchString) != -1) {

Uocuiwn . M r i t e ( s t H ) :

Функция запоминает позицию каждой поисковой строки в массиве. Всякий раз при прохождении очередного цикла while метод indexOf ( ) начинает поиск с номера поисковой строки, обнаруженной последней. Поиск продолжается до тех пор, пока в тексте не будет обнаружено ни одной поисковой строки.

<l)tNl>

- 5 гпл«ип ^г!"лГКС

pos [num] = text . indexOf (searchString, pos [ index = pos [num] ; num++;

• равен " • 1 |

</bodji> </htnl>

Д Откройте с помощью -И Сохраните файл по; программы Блокнот файл именем js-skeleton. html. Iastlndex0f.html.. —И Для вывода номера позиции второй строки "и" в тексте воспользуйтесь методом lastlndexOf().

Откройте в окне броузера файл Iastlndex0f.html.

В окне броузера отображаются строка и начальная позиция второй подстроки " и " в тексте.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ЗАМШАТЕКСТА В СТРОКЕ ногда найти позицию поисковой строки неДостаточно. Вам может потребоваться заменить одну строку другой. Это можно сделать вручную, однако JavaScript включает метод, позволяющий осуществить подобную операцию. Метод replace ( ) можно использовать для замены существующей строки другой строкой. В качестве первого параметра методу replace ( ) передается искомая строка. Вторым параметром служит строка, которая должна заменить искомую. Например, если строка определена как s t r l = " Я люблю спагетти, а также фрикадельки, а также чесночный хлеб", вы можете заменить все

строки ' а также ' словом или с помощью оператора s t r l . r e p l a c e ( " а т а к ж е " , " и л и " ) . Описанный метод позволяет заменить один экземпляр поисковой строки, а не все ее вхождения в текст. Для замены всех вхождений необходимо применить метод несколько раз. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ЗАМЕНА ТЕКСТА В СТРОКЕ : "?**» OP**1* B«« iJwfca*«» с<р*нс C"iw»f.5 Vhejdi ьоау> &

: :

Нш»л

:'"'•-'

ОСЧГЮЯНГЬ

Ойнзеигв

»№ЙиЖгггвЬ',-г!,5 ip-to- ss.ftsatE

,« hmjl

ВЕс..,„о»,»„™ц.„„и,„,„«„«с™и ft

. ia

^ n3. • "

-j .^П«*в«й : Ow*» " 1

Ц Откройте с помощью Q Чтобы заменить слово программы Блокнот файл и запятой, используйте j s-skeleton.html. метод r e p l a c e ( ) внутри оператора Создайте строковую document.write(). переменную и присвойте ей значение. Q Сохраните файл под ^-именем replace.html. -И Чтобы отобразить значение строки, воспользуйтесь оператором document . write ( ) .

-0 Откройте в окне броузера файл replace.html. отображаются начальная строка и строка после замены.

Замечание. Поскольку метод replace ( ) применялся всего один раз, было заменено

ГЛАВА 9. РАБОТА СО СТРОКАМИ

„ „... г~

Попробуй!

Все искомые строки в тексте можно заменить одновременно с помощью цикла while, например, следующим образом. strl = "стандартная строка"; searchStr = "стр"; repStr = "тр",while (strl . search (searchStr) !=-!) { strl. replace (searchStr, repStr) ; Этот фрагмент программы проверяет существование в тексте искомой строки и, если она обнаружена, использует метод replace ( ) для ее замены. Если искомая строка в тексте не обнаружена, условие цикла не выполняется и выполняется оставшаяся часть программы.

: "Щ :i

• 'ч-

?'•'. ;.-•

-Осипович"

ОЙновил

Оймой

li^pecJS^E УЗВ'Лри^етчТ'МВаЭ-РаОстасостияам/^е^^^.

inen:.*rite(str1);

€]{•«•<*«

Q Откройте с помощью '~О Сохраните файл под программы Блокнот файл именем replace2 . html. replace.html. —И Чтобы отобразить строку с другим типом замены, добавьте еще один оператор document.write().

^ft*e»«ft . Ссмли *

Весной появляются цветы и зеленые листья и зайчата.

-ПП Откпойте в окне

броузера файл replace2.html.

1 - - i£| Ыойк(»**юг*<1

1 В окне бооузеоа отображается обновленная строка.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАЗДЕЛЕНИЕ СТРОК

Д(Жощью JavaScrlptlwbjKHO разделить строky на массив строк. Это может оказаться полезным, например, для вычленения всех отдельных слов в строке. Операция разделения строк осуществима при помощи метода split ( ) . Он получает один параметр, который представляет собой разделитель, используемый для разделения. Метод возвращает массив строк, который можно запомнить, присвоив значение результата переменной. Элементы массива не содержат разделителя. Например, если строка определена как vocab = "исключение парадигмы искривления", метод

split (), использующий в качестве разделителя пробел, может превратить эти слова в массив строк. Оператор вызова метода может, к примеру, выглядеть как myArray = vocab. split ( " " ) , а результирующий массив включает три элемента. Строки помещаются в массив myArray в том порядке, в котором они встречаются в строке. Например, myArray [ 0 ] будет соответствовать слову "исключение". В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

РАЗДЕЛЕНИЕ СТРОК

и) ody> <script

зГ

'i M

Крокодил по имени Гена. 4f бурашиа. Старуха Шапокляк Чебурашка Стар уха Шапскляк

docui№nt.w-ite<strlftrray[1] • :/script>

Ц Откройте с помощью программы Блокнот файл js-skeleton.html. -И Создайте строковую переменную и присвойте ей значение. —И Чтобы отобразить значение строки, воспользуйтесь оператором document.write(). -Q Разделите строку с помощью метода split О, воспользовавшись в качестве разделителя запятой.

'И Чтобы отобразить отдельные элементы строки, воспользуйтесь операторами document.write(), которые выводят элементы результирующего массива. —И Сохраните файл под именем split .html.

-И Откройте в окне броузера файл split.html.

В окне броузера отображаются начальная • строка и строка, разделенная на элементы.

ГЛАВА 9. РАБОТА СО СТРОКАМИ

,.,......,. Попробуй!

Чтобы получить список некоторых элементов, можно использовать текстовую область (объект textarea). Если предложить пользователям помещать символ наподобие звездочки (*) перед каждым элементом списка в окне текстовой области, можно использовать метод split ( ) для разделения списка элементов в виде массива. Функция, выполняющая такие действия, может, например, иметь следующий вид.

Эта простая функция разделяет список элементов с помощью метода split () и помещает каждый элемент в качестве элемента массива. Теперь список элементов можно просмотреть с помощью такого фрагмента программы. for (j=0;j<listArray.length;j++) { document .write ("Элемент списка " + j + "; " + listArraytj]) ;

function t e x t L i s t ( t e x t ) { listArray = t e x t . s p l i t { " * " ) ;

. <script nngmg*-"jju*scrijit"> stn - "KpoNgjuM no имени Гена, Чевурлика, Старука Иапоклж<Ьг/>", documnt.M-lte<str ); '>**) -.

Крокодил п Кроко.ш

• -.••• i

• --'Ч',.

и Гена, Чебурашка. Старуха Шапокляк

</stript> t>oay> </htHl>

"Г 'iii**™™™

Откройте с помощью •—|Q Сохраните файл под программы Блокнот файл именем split2 .html. split.html. -0 Замените разделитель пробелом.

—Щ Откройте в окне броузера файл split2.html. HI Теперь в окне броузера выводятся другие элементы массива.

Замечание. В действительности строка в этом примере разделена на больше элементов, чем в предыдущем, поскольку содержит больше пробелов, чем запятых. При этом отображаются только первые три элемента, поскольку используется всего три оператора document.write().

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА DATE

бъект Date не связан с элементами Web-страНицы; он просто является встроенным объектом JavaScript. Иначе говоря, этот объект по умолчанию включен в синтаксис JavaScript. Прежде чем использовать объект Date, его необходимо создать. Объект Date создается так же, как все другие объекты в JavaScript. Для этого применяется оператор присваивания, в левой части которого указывается имя переменной, а в правой — ключевое слово new, за которым следует имя конструктора Date ( ) . Имя переменной становится именем вновь порожденного объекта. Например, оператор myDate = new Date (} создает новый объект Date с именем myDate. Определяя параметры функции-конструктора объекта Date ( ) , можно задать формат для даты тремя способами. При первом способе формат указывается в кавычках следующим образом: "месяц день, год часы:минуты:секунды".

Второй способ задания формата даты предполагает указание численных параметров для года, месяца и дня. Третий способ аналогичен второму, но определение даты включает значения для часов, минут и секунд, например D a t e ( " J u l 2 9 , 1 9 8 2 0 6 : 3 0 : 0 0 " ) , Date(1993, 4, 17) для 17 мая 1993 года и Date ( 1 9 9 7 , 3, 4 , 10, 3 7 , 0 0 ) для 4 апреля 1997 года 10:37 утра. Отсчет месяцев начинается с нуля, так что 0 соответствует январю, 1 — февралю и т.д. (Если при создании объекта Date опустить компонент, указывающий время, оно по умолчанию будет установлено равным 00:00:00. — Прим. ред.) В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА DATE

*• jut

-ф

г а - . . . -а

Домой

Пои;*.

.а ..:с*

•F4)^'.n.:...^W-^.,': Г- u^, , t-.-.,«-.. ..^.^^..^h.rrJ^

WeJAug 2 12 30 ПО UTC-H)300 1

Ц Откройте с помощью —И Чтобы отобразить программы Блокнот файл дату, воспользуйтесь j s-skeleton.html. оператором document.write(). —Q Создайте новый объект Date, —Q Сохраните файл под включающий задание именем new. html. параметров формата. Замечание. В данном примере используется первый способ задания формата даты.

-И Откройте в окне Ш В окне броузера броузера файл new. html, отображаются дата и время.

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

Что еще?

Если при создании объекта Date не задать формат, то он будет хранить только фрагмент данных -- целое число. Это целое число представляет собой количество миллисекунд, прошедших до текущего момента с 1 января 1970 года. На сегодняшний день это довольно большое число. (На первое января 2000 года его значение было равно приблизительно 946 684 800 000. Прим. ред.) Чтобы сравнить два объекта Date, их необходимо привести к стандартному формату объек-

<body> «cript

та Date, который представляет собой количество миллисекунд, прошедших с января 1970 года. Любой новый объект Date, созданный автоматически, принимает данный формат. Преобразовать любую дату в этот формат можно с помощью метода Date. UTC ( ) . Ему можно передать параметры в том же формате, что и новому объекту Date. Например, в результате применения к объекту Date метода Date.UTC(86, 2, 16, 8, 45, О 0 ) его значение будет соответствовать 8 часам 45 минутам 00 секундам 16 марта 1986 года.

S.ta»cF.EVSeWpt*iepbi'.

Tu«Feb ^ 1200UOUTO02002000 </script> </h<Mly> </ht«l>

BIS

\ Сохраните файл под И Откройте с помощью программы Блокнот файл именем new2 . html. new.html. -Я Измените формат объекта Date ( ) . Замечание. В данном примере используется третий способ задания формата даты.

—И Откройте в окне броузера файл new2 . html.

В окне броузера отображаются новые дата и время. Замечание. Нумерация месяцев начинается с нуля, так что 0 соответствует январю, 1 — февралю и т.д. Поэтому в данном примере объект Date ( ) возвращает значение, соответствующее февралю.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОТОБРАЖЕНИЕ МЕСТНОГО ВРЕМЕНИ

осле создания нового объекта Date можно Воспользоваться одним из нескольких мет^одов для получения информации о текущих |дате и времени. Один из наиболее полезных методов объекта Date — метод toGMTString ( ) , который возвращает текущее среднее время по Гринвичу (Greenwich mean time — GMT). Среднее время по Гринвичу представляет часовой пояс, относительно которого измеряется время во всех остальных часовых поясах. Еще один полезный метод — toLocaleString ( ) . Он возвращает текущие дату и время для местного часового пояса. Формат, используемый в этом методе для представления даты и времени, включает день неде-

ли, число, месяц и год. После информации о дате следует запись для времени суток. Время указывается в часах, минутах и секундах; в конце записи приводится часовой пояс. Например, Wed, 12 Apr 2 0 0 0 03 : 37 : 38 UTC соответствует 3 часам 37 минутам и 38 секундам вторника 12 апреля 2000 года. UTC — это Universal Time Coordinated (всеобщее скоординированное время), которое служит другим названием для GMT. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОТОБРАЖЕНИЕ МЕСТНОГО ВРЕМЕНИ И ДАТЫ <htnl>

;]

|docimtnt.M-itp("cpeKHee время no Гринвнчч(БН1>:". c D d t e . t o G H T S t r i n b ( ) )T1 !/scrtpt> </Bo<J> </hti»l>

Д Откройте с помощью ~Н Чтобы отобразить программы Блокнот файл среднее время по Гринвичу (GMT), j s-skeleton.html. воспользуйтесь Q Создайте новый оператором объект Date. document . write ( ) . — Q Сохраните файл под именем date .html.

*•

•*

Ur»«iV

-И Откройте в окне броузера файл date.html.

jft

•

•it '

-d

aooirsi-oOTcl

: *:

:£JMta*<'~<»»mp

1 1 В окне броузера о тображается среднее в ремя по Гринвичу ( ЗМТ).

. ; ^

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

.с

Что еще?

Формат объекта Date, используемый методом toGMTString ( ) , был приведен выше; он включает день недели, число, время и часовой пояс. Этот метод отображает день недели и месяц с использованием трех символов, например Fri для Friday и Apr для April. Пример этого формата выглядит следующим образом: Fri, 14 Apr 2000 19:01:54 UTC. Формат даты для метода toLocaleStringO несколько отличается от приведенного выше. Этот метод отображает сначала дату, а затем время только в виде числа. Символы слэша (/) помещаются между цифрами, представляющими дату. Пример этого

формата выглядит следующим образом: 0 4 / 1 4 / 2 0 0 0 13:05:13. Для отображения объекта Date можно также использовать метод toString ( ) . Этот формат отличается от предыдущих тем, что год приводится в нем в конце строки. Пример этого формата выглядит следующим образом: Fri Apr 14 13:06:23 MDT 2000. Если вам необходимо ввести собственный пользовательский формат, то для формирования представления даты и времени можете воспользоваться методами get, о которых идет речь в следующем разделе, "Получение значений времени и даты".

Jloww*

<scrlpt language-"javascript'•> coat» • при Paten; document м-itgf Местное Bp 'script> |

cpatpftol

Ц Откройте с помощью Сохраните файл под программы Блокнот файл именем date2 . html. date.html. -И Замените метод toGMTString() методом toLocaleString() и обновите текст, который выводится в окне броузера.

12-1747

Помс*.

евреця 01/03/2001 19:3-3:06J.

Откройте в окне броузера файл date2.html.

В окне броузера отображаются местное время и дата.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПОЛУЧЕНИЕ ЗНАЧЕНИИ ВРЕМЕНИ

идагы

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

Метод getDate ( ) возвращает текущее число месяца, так что 24 января этот метод возвращает значение 24. Метод getDay ( ) возвращает целое число, представляющее день недели, так что 1 соответствует понедельнику, 2 — вторнику и т.д. до числа 7, соответствующего воскресенью. Значение, возвращаемое методом getHours ( ) , представляет время суток в часах, выраженное в 24-часовом или, как его еще называют, военном

формате времени. Например, значение 15 соответствует 3 часам пополудни (или, если использовать сокращения, принятые в США, 3:00 p.m.). Соответственно методы getMinutes() и getSeconds() возвращают количество минут и секунд. Метод getMonth ( ) возвращает целое число, представляющее месяц года. При этом отсчет месяцев начинается с нуля (январь), так что для июля метод возвращает значение 6, а для декабря — 11. Метод getYear ( ) возвращает значение для года, представленное двумя последними цифрами, так что для 1996 года метод возвращает значение 96. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ПОЛУЧЕНИЕ ЗНАЧЕНИЙ ВРЕМЕНИ И ДАТЫ 0

<htM>

<мм>

Ш .......... 5

D&eemu

</head> <Kody> <scriot lan«ua« t -"laujseripf>

Сдал*

ГЬно».

Нзвмито*

Журнал

аошвеШ.м-КеС'Значенше текунего месяца: • • cDate.getrtonthO ' 1 ЧЬг/>"); Xbr/>"); 1

•<Ьг/>-): TKStfB— </bodu> </htnl>

Ц Откройте с помощью -И Для отображения программы Блокнот результатов получения значения текущей даты файл j s-skeleton.html. с помощью методов

-И Создайте новый объект Date.

группы get воспользуйтесь операторами document . w r i t e ( ) .

Сохраните файл под именем getDate . html.

—И Откройте в окне броузера файл getDate.html.

В окне броузера отображаются значения текущей даты.

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

Lnj»№<*

J5SS, cD»tt '

lit* D tp();

docunen -wr

i wii * - "* -.

— docuwn .»r

" екушй месяц: " * coate .getMon ti() • "<br/ "I;

" екушя жиата: " * cOjte.getHi o t e s ( ) * "< г/У);

Текуший де ь 3 Текущий и яц 0 Текущая дата. 3 Текущий го 2001 Текущий ча 19 Текущая ми ута- 57 Текущая секунда 5

йп»«й' Ц Откройте с помощью программы Блокнот файл getDate.html. -Я Для отображения результатов получения значений текущего времени с помощью методов группы get добаньте в сценарий дополнительные операторы document-write() .

f | Сохраните файл п од именем g etDate2 .html.

U. ;

(tone*

Q Откройте в окне нэроузера файл getDate2.html.

х U.

tifHeu

!•;

Файл

С помощью get-методов можно соФункция clock ( ) создает новый здать простые часы. Их основу сообъект Date, получает значение ставляет метод setTimeout(},котекущего времени, выраженное торый запрограммирован так, чтов часах, минутах и секундах, и выбы каждые 1 000 миллисекунд выводит это значение в текстовом позывать функцию clock. Эта функле. Затем эта же функция снова ция позволяет выводить значение вызывается через 1 000 миллисевремени в текстовом поле textl, кунд и значение времени, которое помещенном в форму f orml. показывают "часы", обновляется. function clock() { cTime = new D a t e ( ) ; cHours = cTime.getHours() ; cMinutes = cTime.getMinutes() ; cSeconds = cTime.getSeconds() ; document.forml.textl.value = cHours + " : " + cMinutes + " : " + cSeconds; s e t T i m e o u t ( " c l o c k ( ) " , 1000);

j§

Попробуй!

• В окне броузера отображаются значения текущего времени.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

| |

УСТАНОВКА ЗНАЧЕНИЙ ДАТЫ ИВРЕМЕНИ

ри работе с объектом be-.' t имеется также возможность устанавливать дату и время с помощью группы методов, имена которых начинаются; со слова set (установить). Эти методы работают аналогично методам группы : ; ,только set-методы позволяют не получать, а записывать целочисленные значения в объект Dat e. Эти значения передаются set-методам в качестве параметров. Так, метод setDate ( ) устанавливает для объекта Date дату, которая принимает значение в пределах от 1 до 31. Метод setMonth ( ) задает значение месяца. Метод получает в качестве параметра значения от 0 до 11, и значение 0 соответствует январю. Поэтому для записи в объект Date значения, соответствующего июлю, следует передать методу setMonth ( )

в качестве параметра число 6, а для декабря — 11. Метод setYear ( ) может получить в качестве параметра значение года в виде двух или четырех цифр, так что параметр 96 установит год 1996. Метод setHours ( ) устанавливает время суток в часах, выраженное в 24-часовом, или военном, формате времени. Например, оператор setHours (15) установит значение времени равным 15-ти или 3-м часам пополудни (для США это значение соответствует 3:00 p.m.). Методы setMinutes!) и setSeconds ( ) позволяют установить количество минут и секунд соответственно. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

УСТАНОВКА ЗНАЧЕНИИ ДАТЫ И ВРЕМЕНИ

documn .writ

Q Откройте с помощью программы Блокнот файл js-skeleton.html.

-Ц С помощью setметодов измените значения месяца, дня и года и выведите -Я Создайте новый объект результат в окно Date и укажите в скобках броузера. некоторую начальную дату. -И Сохраните файл под именем setDate.html. -И Для отображения начальной даты воспользуйтесь оператором document.write().

установлена равной Tue Dec 25 00 00 00 UTC+0200 1984 а изменено Sun Nov 25 00 00 00 UTC+0203 1984 пменено Sal Nov 17 OO'OO 00 UTC+0200 1984 зменеко Mon Nov 17 00 00 00 UTC-W200 1997

-И Откройте в окне броузера файл setDate.html.

• В окне броузера отображаются значения даты до и после изменения.

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

Попробуй!

Иногда, если вы предоставляете пользователю возможность ввода некоторой даты, например дня его рождения, с помощью формы Web-страницы, целесообразно создать и сохранить объект Date. Впоследствии можно манипулировать объектом Date и использовать его так, как потребуется. Например, вы можете подсчитать, сколько дней осталось до дня рождения пользователя, или вывести страницу, специально посвященную этому событию. Функция, предназначенная для отображения дат, посвященных подобным памятным дням, может иметь следующий вид. function birthday() { myBirthday = new D a t e ( ) ; myBirthday.setMonth(document.forml.text1.value);. myBirthday.setDate(document.forml.text2.value);. myBirthday.setYear(document.forml.text3.value); document.write("Ваш день рождения" + myBirthday); Приведенная функция создает новый объект Date и устанавливает значения для месяца, дня и года, исходя из значений трех текстовых полей, размещенных в форме гогга! Web-страницы.

tMl>

* • - • * , •• • .

</nead:

Оетвмвмть ОА*мип>

Домой

Пае*

-LI

itiecan«e

script linguag.-"] docuiwnt.wri docuittnt.w document, Mr docuwnt.ur ct>at

cOate + "<br/>") ;

setMinut

Ц Откройте с помощью Ц Сохраните файл под программы Блокнот файл именем setDate2 .html. set.Date.html. —И С помощью setметодов измените значения для часов, минут и секунд и выведите результат в окне броузера.

V т а н о ь л е н а равной Tue DeL 2*1С'''00 CIOIUTC+020Q 19 la изменено Sun Nov 25 00 00 ОС 'JTCni200 1984 юиенено Sat Nov 17 ОС 00 01) DTC«200 1984 сменено Мог, Nov 17 ОШХ'' г -.л '-.Г^ОО 1997 •ни изменено Mon N.-.V ;7|:' 4^ :: : fTC^0200 1997

—Q Откройте в окне броузера файл setDate2.html.

В окне броузера • отображаются значения времени до и после изменения.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

[РАБОТА С ПРЕДСТАВЛЕНИЕМ ВРЕМЕНИ . бъект Date, помимо get- и set-методов, ис[пользуемых для управления значениями месяца, дня, года, часов, минут и секунд, обладает еще двумя методами для контроля времени. Метод getTime ( ) возвращает целочисленное значение, равное количеству миллисекунд, прошедших с полуночи 1 января 1970 года. Это стандартный формат для дат и времени. Чтобы установить значение времени для объекта Date, можно также воспользоваться методом setTime ( ) . Он получает в качестве параметра количество миллисекунд, прошедших с полуночи 1 января 1970 года. Дату можно также преобразовать в этот стандартный формат с помощью метода Date. parse ( ) .

Он получает в качестве параметров значения месяца, дня и года, например, в виде "February 14, 1980" либо в расширенном формате, в таком, как Mon Nov 17 1997 1 3 : 4 7 : 2 3 MST, и возвращает все то же количество миллисекунд, прошедших с 1 января 1970 года. И наоборот, чтобы преобразовать количество миллисекунд, прошедших с 1 января 1970 года, в некоторый распознаваемый формат, можно воспользоваться методом toGMTString ( ) . В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

РАБОТА С ПРЕДСТАВЛЕНИЕМ ВРЕМЕНИ £*п

Сэа*.

ЙМр««е

Сдоис

£"ДО*

* - :.'•* - *з. " Ж.ТйГ ••& i з

i. !#

' 4йР«": 1-5? '

-••--•

С1ст**ач(» 0*иж*ги

Ломсй

Пси*

иэвр**-сл

JS ' '• •'-•,-. . " 14-1 " ! •'• -it f Фгрмвта™дат и «(имв^ЧдвИчие M-ril|

Жцрмп

ШШ

~* ^.. *

nwi*

~рти

"j ^Пед^оа '• 1 Семям **!

|С 1-го января 1970 года прошло 978548403730 мнллнсекунв |

'fnfssr "

Q Откройте с помощью Для отображения программы Блокнот файл результатов применения j s- skeleton . html. метода getTime ( ) воспользуйтесь Создайте новый оператором объект Date. document.write(). —Q Сохраните файл под именем getTime . html.

броузера файл getTime.html.

•'_ 2ZISI

'""'

Г";"»ГМ'й*-*.1ОГ«

—

отображаются результаты применения метода getTime ( ) .

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

,„ .,,,.

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

Попробуй!

function compDates (datel , date2) { diff Milliseconds = date2 - datel; diffSeconds = dif fMilliseconds / 1000; d i f f M i n u t e s = diffSeconds / 60; diffHours = diffMinutes / 60; diff Days = d i f f H o u r s / 24; return d i f f Days; Приведенная функция получает в качестве параметров две даты и возвращает в качестве результата разницу между ними, выраженную в днях.

Vafcl lipawa <п1я1> (M*d>

Пенек T^***1-*

</h*ad:

tbody> <scr pt language-" jav*script">

cp.it«

n'-JWF.U; _ — ,

'" !-г:. чне^.я 1970 гсдд г.рошло 973^^0563630 мидян. Между 1. мялг.н:»!

do :unent . M r i t r C ' L 1-го Sieap» TT7B годя ' • " проели " » cDdlP^ j e t l i n p n * " ипллисекчна.<Ьг7>"): "\"" ' " повило" * D a t e . p a r s e ( n O j t e ) * " иил/ мсе».ун*.<Ьг/>"); (УГг.'1рП </body> </htnl>

прошв с-148165200000"!

]

Q Откройте с помощью -И Для отображения программы блокнот количества миллисекунд, файл getTime .html. прошедших с 1 января 1970 года, объект Date и установите для него значение даты.

Date.parse() и оператором document.write(). L

-C1 Сохраните файл под именем parse . html.

-СИ Откройте в окне броузера файл

parse.html.

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

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАБОТАВ ЧАСОВЫМИ ПОЯСАМИ avaScript включает метод, который можно испоЛьзовать для вычисления разницы во времени для различных часовых поясов. Время во всех| часовых поясах вычисляется по отношению к среднему времени по Гринвичу (Greenwich Mean Time — GMT). GMT также часто называют UTCвременем, что означает Universal Time Coordinated (всеобщее скоординированное время).

Метод getTimezoneOf f set ( ) возвращает в качестве значения выраженную в минутах разницу между GMT-временем и местным временем. Полученное значение может быть положительным или отрицательным в зависимости от долготы данного места по отношению к Гринвичскому меридиану. Например, если компьютер пользователя расположен в пределах стандартного Тихоокеанского ча-

сового пояса, для объекта Date с именем rayDate оператор rayDate . getTimezoneOf f set ( ) возвращает значение 480. Это значение отражает разницу между местным временем и GMT на 8 часов. (Стандартный синтаксис представления даты выглядит следующим образом: " T h u , 11 Jan 1996 0 6 : 2 0 : 0 0 GMT". Можно использовать сокращения, принятые в США, однако универсальный способ — указание сдвига часового пояса относительно Гринвичского меридиана. Например, в записи "Thu, 11 Jan 1 9 9 6 0 6 : 2 0 : 0 0 G M T + 0 5 3 0 " указан часовой пояс, расположенный на 5 часов 30 минут к западу от Гринвича. — Прим. ред.) В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

РАБОТА С ЧАСОВЫМИ ПОЯСАМИ - *вйл

*•

i между местным времен*

Sw ' &Эбр*«Ов . ЙЙвие

£прл№«

.'•*".. "а" а '5

'••••:.

••:.•

Ocrawcxre

Осилить

Домой

'а ' ;з ГЪис*

Иэбраиюе

vi»

Ждоэл

4д«к|*^Е USSvnb-Met^'rkea'O Рзбла с .гоч.чг *.*. tar * BUEMiM^gelTmie.-crgOKM' Nrt|

Печен.

з .

~~.*ае«а

^j ^П*т» i ! Ccw *

Мутное время н дата 01/03/2001 220238. Сдвиг часовых поясов Mtucfly ыеггным Бременем н GlvfT-120 MtfH |

«JT'OTMSU

Для отображения Q Откройте с помощью программы сдвига по времени данного Блокнот файл часового пояса добавьте j s-skeleton.html. еще один оператор document.write(). -Я Создайте новый —И Сохраните файл объект Date. под именем -И Для отображения getTimezoneOffset.html. текущей местной даты и времени воспользуйтесь оператором document.write().

Срлюье

М M£*'Kt»i»*w«

-|3 Откройте в окне 1 1 В окне броузера броузера файл о тображаются местные getTimezoneOffset.html. дата и время, а также с цвиг часового пояса.

ГЛАВА 10. РАБОТА С ФОРМАТАМИ ДАТ И ВРЕМЕНИ

Г Что еще?

Метод g e t T i m e z o n e O f f s e t ( ) не требует непосредственного контроля летнего времени, так как переход на летнее время вычисляется и контролируется операционной системой. Поскольку JavaScript обращается за этой информацией к системе, он автоматически преобразует установки даты и времени таким образом, чтобы учесть изменения, вызванные переходом на летнее время. Значение сдвига часового пояса, возвращаемое методом getTimezoneOf f set ( ) , вычис-

</head> <Dodji> crlpt iangu.ige-"]avascrlpt"> cDafp • npw D * t p f ) ; llDCUnwr 1 . w r i t t C ' M P C I H d t - Вр«ИЯ I

."9" •

docunert.Hi-lte("CHHr часовых поясов между нес)

Q Откройте с помощью программы Блокнот файл getTinezoneOffset.html. -И Дл*: отображения времени в соседнем часовом поясе добавьте еще од ин оператор document.write().

ляется, исходя из внутренней системы контроля времени компьютера пользователя. Для Windows-ориентированных систем источником этого значения служат системные установки, которые настраиваются с помощью приложения Дата/Время (Date/Time) панели управления. Если дата и время, установленные с помощью этого системного приложения, неверны, методы объекта Date также будут возвращать неверные значения для объекта Date.

[Местное время и датз_0_{/03/2001 22 ОНО t"

и сит •

Замечание. Для отображения времени в соседнем часовом поясе, как правило, просто необходимо добавить или отнять один час. -И Сохраните файл под именем getTimezoneOf fset2.html.

-4ТП Откройте в окне броузера файл getTimezoneOffset2.html.

• В окне броузера отображаются время местного и соседнего часовых поясов.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБЪЕКТМАТН бъект Math включает свойства и методы, ко1 торые позволяют работать с математическийи формулами и выполнять вычисления. Объект Math включает свойства для представления различных математических постоянных, таких как основание натуральных логарифмов е, (Е), десятичный логарифм числа е (LOG10E), натуральный логарифм числа 10 (LN10), число я (PI) и квадратный корень из 2 (SQRT2). Методы объекта Math включают разнообразные элементарные и некоторые более сложные математические функции. К ним относятся такие функ-

ции, как abs(x), a c o s ( x ) , asin(x), atan(x), ceil(x), cos(x), exp(x), floor(x), log(x), m i n ( x ) , m a x ( x ) , p o w ( x , y ) , random(), r o u n d ( x ) , sin ( x ) , sqrt (x) и tan ( x ) , где хку — числа. Объект Math не требуется специфицировать как подобъект объектов document или window, однако его имя необходимо писать с прописной буквы. Например, чтобы задать значение числа л, следует использовать запись Math. PI. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОБЪЕКТ MATH Омом

йив

Йэбрлио*

Сервис

Радиус круга]

<nn r

- -H^^=;j:S=:S:;:r^S!^;'> - "-" "- 1 c/bidy>

</htnl>

Площадь кругам

с] г от

Ц Откройте с помощью -Q Присоедините программы Блокнот файл к обработчику события js-skeleton.html. onclick оператор, вычисляющий площадь -И Добавьте форму круга на основе значения с двумя текстовыми радиуса, заданного полями и кнопкой. в текстовом поле.

—И Присоедините к кнопке обработчик события onclick.

~И Сохраните файл под именем math.html.

-И Откройте в окне броузера файл math.html.

• В окне броузера отображается форма с двумя текстовыми полями и кнопкой.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

Что еще?

Каждый метод объекта Math возвращает значение, вычисляемое на основе передаваемых методу численных параметров. Эти параметры могут быть реальными числами или другими объектами. Например, метод Math.pow (2 , 3 ) возвращает значение 8, которое есть не что иное, как число 2, возведенное в степень 3. Предложение JavaScript Math.cos(document . f o r m l . t e x t l . v a l u e ) возвращает значение косинуса

'. £ • а и : а ш з .• Сст»нсвлв Обпми»

toec|«'£

и=В\ЛримввыЧГ«ваП

£a*u)

Лож*.

Иэйзам*

Хфпзп

числа, введенного в текстовом поле textl формы forml. Еще раз напомним, что ключевое слово, обозначающее объект Math, которое предшествует имени свойства или метода, всегда должно начинаться с прописной буквы. Синтаксис JavaScript зависит от регистра клавиатуры, и неверное употребление строчных и прописных букв приводит к ошибкам.

Печ

. j a а. ;• <а • • ш ••; >з: в*, и Остановив

Обкямть

fltr-ort

-Рвйсггв!

—Я Введите число Q Щелкните на кнопке в первом текстовом поле, формы.

HI Ответ, вычисленный с помощью формулы, отображается в окне броузера.

Поиск.

Нафомюе ' Ж*о«ал

Пв*п-в

Прдвк*

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ГЕНЕРАТОР СЛУЧАЙНЫХ ЧИСЕЛ

лучайные числа находят в JavaScript широкое применение. Их, например, можно использовать с целью случайного выбора варианта; продолжения сценария для пользователя. Метод Hath. random ( ) возвращает в качестве результата случайное число, принадлежащее интервалу от 0 до 1. Если умножить этот результат на некоторый множитель, получится случайное число, которое будет находиться в интервале от 0 до любого заранее заданного числа. Естественно, что число-множитель должно быть специально подобрано. Например, оператор Math. random ( ) * 5 генерирует случайное число из интервала [0, 5].

dom ( ) , — не целое число. Однако из него можно получить целое число с помощью метода Math. floor ( ) . Он отбрасывает цифры числа-аргумента после десятичной точки и возвращает ближайшее целое число, меньшее или равное аргументу. Например, оператор Math, floor (Math, random ( ) * 5) возвращает случайное целое число в интервале от 0 до 4. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Очевидно, что случайное число, непосредственно сгенерированное с помощью метода Math. ranГЕНЕРАТОР СЛУЧАЙНЫХ ЧИСЕЛ Файл

Омеле

Ёед

а****"*"

Саовче

С^чив '

«• . •* . э 1 ii , л

• '• .V

/head> body>

'••••••.-.

Осглисеип! 0&га*од

Сомой

'а 1 за ' з

Пзнси | Ияйо»*вв

Йдетн:!** Е М5В\ГЪ"«(*/Ггим 11 • Srfo-sс ойъ*«том МА"4''Ш*1-,гг Nn

— номер 3, •раза нон Р| •раза номер 5,

Эта фрота намер 3, номфр три |

Ж»«п

Печать' '

a .

Пмекв

j j ' f^rhdeice ; \ С**««и **.

опер три.".

33J3-

«Гета»

Ц Откройте с помощью — Q Присвойте программы Блокнот файл переменной значение, j s-skeleton.html. полученное с помощью методов Math . f loor ( ) —И В дескрипторы и Math . random ( ) . <script> добавьте При этом функция новый массив Math. random ( ) с помощью оператора умножается на длину new Array ( ) . массива. —И Поместите в массив -0 Выведите несколько значений предложения с помощью в виде предложений, оператора заключенных в кавычки document .write ( ) . и разделенных запятыми. Сохраните файл под именем random.html.

~Н Откройте в окне броузера файл random.html. отображается одно из предложений.

;д5мя>«омпьвг«р .-...••.

- ^

I | Щелкните на кнопке С эновить окна броузера.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

Попробуй!

В качестве структуры, обеспечивающей выбор вариантов продолжения программы на основе случайных чисел, можно использовать последовательность операторов if и else i f . Рассмотрим, например, следующую функцию. function threeOptions ( ) { rand = Math. floor (Math. random ( ) if (rand == 1) { document . write ( "вариант 1 " ) ; } else if (rand == 2) { document .write ( "вариант 2 " ) ;

else { document .write ( "вариант 3 " ) ;

Первый оператор генерирует случайные числа в интервале от 1 до 3. Операторы, соответствующие каждому из вариантов вывода, помещаются в раздел, ограниченный фигурными скобками.

и +- , •*'••••. Ф

.'.:

'•.•>:

••

•- •

ОеТв<О««Г»

£Мп Дрмпл gi«

_3_гч £ ; -St и«2« -i2L пй, я2. '

ОЙЮТЛЙ

£»«й

1 :Т Л

Поис.

| .г) ...^??»?' it?!!Sr."

£"^«н*

|4№«toEV;SB^»»^M>r«.l1;P,to.coe^:»,W»THV.rt0mh«

Это фра^я н< мер I. ыом«р яка.

^»uaar<«o« Си**

'Ч-*.-. 'иоЭ^ГвеШп.^ »Й» • liS. 'м£м i*i

л™.

riH. '

^^ГТ<^«*

U»™. »

Это фрячя номер 5. ном*р пять I

> |

, :г<ло«о

±1 :

^jM^iOMttMitip

1 Вновь щелкните на • Страница перезагружается, и в окне кнопке Обновить окна броузера отображается броузера, другое предложение.

) Готом

• Страница вновь перезагружается, и в окне броузера отображается другое предложение.

^ Чой -^MTtniep

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

НЕКОТОРЫЕ МАТЕМАТИЧЕСКИЕ ПОСТОЯННЫЕ

войства объекта Math используются для Дредставления математических постоянных, которые часто используются в уравнениях. К этим постоянным относятся основание натуральных логарифмов или постоянная Эйлера (Math. Е), натуральный логарифм числа 10 (Math.LNIO), натуральный логарифм числа 2 (Math. LN2), десятичный логарифм постоянной Эйлера (Math. LOG10E), двоичный логарифм постоянной Эйлера (Math.LOG2E), число п (Math. PI), квадратный корень из '/2 (Math. SQRT1_2) и квадратный корень из 2 (Math.SQRT2). Эти свойства просто подставляются на место соответствующих констант в уравнениях. JavaScript

вычисляет приближенные значения констант с точностью до 17 знаков. Использование этих констант обеспечивает высокую точность вычислений и избавляет пользователя от необходимости вводить их вручную. Например, для вычисления периметра окружности можно воспользоваться следующим предложением JavaScript: perimeter = 2 * radius * Math. PI. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

НЕКОТОРЫЕ МАТЕМАТИЧЕСКИЕ ПОСТОЯННЫЕ 3 </hea >

document, uritef3rt«poee постоянная: " • Hath.E * "<br/>"); •XbrVV): docunent.uriteC 1 Eec4TM4HuH логарифм постоянной Эй пера: " * Math . IOG1 К •Xbr/V);

document .write ("корень квадратный из одной второй : " • Hath.SQRT1_2 *

|вд Зэ****** 'Сдал* £nw«<s ' •••. •.'••: • ' DCT»«»<n> 06«««т* • Дпжй

Математические постоянные Эйлерова постоянная; 2.718281828459045 10. 2 3025850929WCM6 аркфм 20.6931471805599453 гарнфм пост иной Эйлера 04342944819032518 арифм постоя ной Эйлера- 1 442695040 3SSS< 633 41592653589 93 второй. 0.7071067S11S63476 квадратный из двух 4142135623730951

</htnl>

Ц Откройте с помощью И Сохраните файл программы Блокнот файл под именем j s-skeleton.html. constants.html. -0 С помощью оператора document.write() выведите в окно броузера заголовок и значения всех математических постоянных, встроенных в JavaScript.

-Q Откройте в окне броузера файл constants.html.

В окне броузера отображаются все постоянные объекта Math.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

Что еще?

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

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

<b dy>

script l^nguag*-"ja«ascript"> /script> for* rum-'"forpi1">

Обьсп c«*pu:<input type-"tpxf лаи*-"аг|>а"/><Ьг/> <input 1 ypp-"tlutrnn" n a n e - " m i t t o n t " ил1ие-"Вычис лить Объем" </Гоги>

</ntnl>

•<. Ц Откройте с помощью -Н Присоедините программы Блокнот файл к обработчику события js-skeleton. html. оператор, который вычисляет объем сферы •0 Добавьте форму на основе значения с двумя текстовыми радиуса, заданного полями и кнопкой. в текстовом поле. к обработчику события onclick.

именем sphere.html.

*И*"-"

-И Откройте в окне броузера файл sphere.html.

-Q Щелкните на кнопке формы.

1 Во втором текстовом поле выводится —Я Введите число в первом текстовом поле, полученный ответ.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ТРИГОНОМЕТРИЧЕСКИХ ФУНКЦИЙ

ным угловым измерениям в градусах, умножив значение угла в радианах на 57,3. JavaScript включает также один дополнительный тригонометрический метод, предназначенный для преобразования значений обычных прямоугольных координат х и у в угловые величины. Это метод atan2 ( ) , который получает в качестве параметров значения координат. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ы помните тригонометрические функции из школьного курса геометрии? JavaScript поддерживает их как методы объекта Math, включая косинус, синус и тангенс. JavaScript также поддерживает обратные им функции: арккосинус, арксинус и арктангенс. Этим функциям соответствуют методы cos ( ) , s i n ( ) , t a n ( ) , acos() и a t a n ( ) . Первые три функции получают в качестве параметра угловую величину в радианах, а возвращают числовое значение. Остальные три функции получают значение единственного параметра и возвращают угловую величину в радианах. Радианы представляют собой математическую меру угловых величин. 360° соответствует 2л радианам. Можно перейти к более распространенИСПОЛЬЗОВАНИЕ ТРИГОНОМЕТРИЧЕСКИХ ФУНКЦИЙ

•я

<htni>

*'. ' ,** ' ooiL» asiL, я2« itoi n=<si» жД,., nsL . «sL • *;

</head> <body> <script language-" jawascript"> p.

Прямоугольный треугольник

I. hyp. value ;docuMent. form .tan .ualue -document -fornl .upp.yalue/doc unent.f о •*1 .adj .value ;"/><br/>

••l.adJ.ualue;'VXbr/>

С»яу.|о Кос„»ус|0 Т.игенс|0

</for*> </btnl>

i Q Откройте с помощью программы Блокнот файл j s- skeleton . html. -fm Побяиктй R r/rnaHHTTv

-И К каждому текстовому полю присоедините обработчик события onchange. —И ОтОЖЛЙГТКИТР КЯЖ1ГОР

заголовок и форму, из событий onchange включающую шесть с тригонометрическим текстовых полей. Три уравнением для текстовых поля должны вычисления значений хранить размеры сторон углов. треугольника, а еще три — величины углов. —И Сохраните файл под именем trig.html.

^] Гэтов!

^"''

"''.'v:~

Qj Откройте в окне броузера файл trig . html.

.^Mt*-w«wmip' ' ' "

• В окне броузера отображается форма с шестью текстовыми полями.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

,.,,„, г~

Попробуй!

Для преобразования в градусы значений углов, измеренных в радианах, можно, например, воспользоваться следующей функцией. function radiansToDegrees(rads) { degrees = (360- * rads / (2 * M a t h . P I ) ) ; return degrees; Функция получает в качестве аргумента значение в радианах и возвращает эквивалентное значение в градусах. Можно построить аналогичную функцию для обратного преобразования — из градусов в радианы. Подобная функция может, к примеру, выглядеть так. function degreesToRadians(degrees) radians = (2 * Math.PI return radians;

degrees) / 360) ;

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

-:-..-*"

• ' . -

•:<^

• ,-p UJ

IM .

• \

i^\£^-r<-sf.,.,.:.rS,.t*n-Pe6™c0^0«MAl*W>»'

'-M

• •• j

-S3 -

'Л

\У

•• i

" --l

!=J

££

ij ""*• "- . * . в

» .

• " ••

;|бчр*е|^;е .

Д ^Л»*« ;i&-rt« H

Прямоугольный треугольник Противолеж:1щая сторона |3

Противолежащая сторона |2 Прилгжащая сторсна|3

Сину^Об

Дс-мо)

(1«ск

•-•jji Йэйраичо*

- --..TH^hw

'-*У : Хдо«м

-iJ Пвчгга

j"v4 Пмеч

3;;^?*!^]МЙ*.

]

Прямоугольный треугольник

Прилежащая сторона-Н Гиао-генуэа.-!?

а : и" :"'si'.

Осгвнмиь ййтвкгь

Г»п»«н,я.|36 C»^|OS55555S5S5555556

Тангенс |о 6Ш6666Ш66Й66

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

13-1747

текстовых полях выводятся значения углов треугольника.

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

! i ,:.a *»••»»•

Вычисленные значения углов обновляются и выводятся в соответствующих текстовых полях

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ МЕТОДОВ ВЫЧИСЛЕНИЯ ЛОГАРИФМА И ЭКСПОНЕНТЫ avaScript включает два метода для работы с; натуральными логарифмами и показательными функциями, в основе которых лежит постоянная Эйлера. Метод log ( ) получает в качестве параметра некоторое число и возвращает натуральный логарифм (по основанию е) этого числа. Метод ехр ( ) получает в качестве параметра некоторое число и возвращает значение постоянной Эйлера, возведенной в степень, равную этому числу. Два этих метода взаимно дополняют друг друга при log (х) = у и ехр (у) = х.

В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу. I

Что еще?

Свойства Math.LNIO и Math.LN2 представляют собой константы для значений, возвращаемых функциями Math.log(10) и Math. log (2 ) . Метод Math. log ( ) можно использовать для получения натурального логарифма любого числа.

ИСПОЛЬЗОВАНИЕ МЕТОДОВ ВЫЧИСЛЕНИЯ ЛОГАРИФМА И ЭКСПОНЕНТЫ htni> hea /he >

аченме;<1при1 ' g(значение) :<i\

-4П Присоедините к обработчику события j s-skeleton.html. onclick оператор, вычисляющий -И Добавьте форму с тремя логарифм и текстовыми полями и экспоненту для кнопкой. введенного значения. Ц Откройте с помощью программы Блокнот файл

Присоедините к кнопке L-|j| Сохраните файл обработчик события под именем 1 og. html. onclick.

-0 Откройте в окне броузера файл log.html. -Я Введите число в первом текстовом поле.

-И Щелкните на кнопке формы. 41 В двух других текстовых полях отображаются результаты вычислений.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

ИСПОЛЬЗОВАНИЕ МЕТОДА ИЗВЛЕЧЕНИЯ КВАДРАТНОГО КОРНЯ avaScript включает также метод для вычисления квадратного корня числа с помощью метода s q r t ( ) . Метод sgrt ( ) получает в качестве параметра число, а возвращает квадратный корень этого числа. Примером применения метода sqrt ( ) могут служить вычисления по теореме Пифагора (сумма квадратов катетов прямоугольного треугольника равна квадрату гипотенузы).

Что еще?

Свойства Math.SQRT1_2 и Math.SQRT2 представляют константы для величин, возвращаемых методами Math, sqrt (1/2) и Math.sqrt(2). Метод Math. sqrt () можно использовать для вычисления квадратного корня любого числа.

ИСПОЛЬЗОВАНИЕ МЕТОДА ИЗВЛЕЧЕНИЯ КВАДРАТНОГО КОРНЯ <htnl> <hvad>

<b dy>

script Unguage-"jjuascript"> /script> f o r * nanf"fornV>

•^F;;

___________ ,; i Н \П мдвры f пае в 1

; ,. ' ',.->..

. с

sqrt(3H.neHHe):<input type-" text" nam»-"sqrt •YMbr/> <input t jge--'button" ПЛГИР -"button)" ил!ие="В

.€]'"•

Ц Открюйте с помощью -И Присоедините программы Блокнот файл к обработчику события onclick оператор, j s-skeleton.html. который вычисляет -И Добавьте форму квадратный корень для с двумя текстовыми значения, введенного полями и кнопкой. в первом текстовом поле. -И Присоедините к кнопке обработчик QJ Сохраните файл под события onclick. именем sqr t . html .

13'

—И Откройте в окне броузера файл sqrt.html. —И Введите число в первом текстовом поле.

-И Щелкните на кнопке формы. -И Во втором текстовом поле отображается результат вычислений.

_____

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

•КРУШЕЙИЕ ЧИСЕЛ есятичные числа с плавающей точкой с помощью метода round ( ) можно преобразо|вать в ближайшее целое число. Если дробная Часть числа не превосходит 0,5, то число преобразуется в ближайшее целое меньшее исходное число, поскольку цифры после запятой просто отбрасываются. Если дробная часть десятичного числа равна или больше 0,5, то число округляется до ближайшего большего целого.

,,_

Что еще?

Например, число 4,45 округляется в меньшую сторону до 4, а значение 4,50 округляется в большую сторону до 5.

JavaScript включает также два метода, которые позволяют округлять числа до ближайшего целого как в большую, так и в меньшую стороны. Это соответственно методы ceil () и floor ( ) . Например, следующие операторы округляют два различных числа до значения 5. ceil(4.65); floor(5.76);

ОКРУГЛЕНИЕ ЧИСЕЛ

•Chtnl

<$" а ..... и .......... а"

ст^евигь

CM < <

Овнжигь

Домой

Пгмс».

a11 • Работа .с объектом HATiVrgjidl Urn

' -J . я ' . Пачагь

По«к«

1*' Hww = ^ СсЫЧлИ

ripf/ n narw-'TornTP^ ачение:<1при* type-"text" папе-"иа1"/><1

</forp> </bodu> </htnl>

; .

Ц Откройте с помощью ~Н Присоедините программы Блокнот файл к обработчику события js-skeleton.html. onclick оператор, производящий операцию -И Добавьте форму округления числа. с двумя текстовыми полями и кнопкой. —И Сохраните файл под именем round.html. Присоедините к кнопке обработчик события onclick.

—Q Откройте в окне броузера файл round.html.

-И Щелкните на кнопке формы.

НИ Во втором текстовом —И Введите число поле отображается в первом текстовом поле. округленное значение.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

ВОЗВЕДЕНИЕ ЧИСЕЛ В СТЕПЕНЬ | ajvaScript включает еще один метод объекта I

Ma4b, который можно использовать для возведения одного числа в степень, равную другому; числу.

С Что еще?

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

Это метод pow ( ) . Он получает два параметра: первый параметр — основание, а второй — показатель степени. Например, оператор Math.pow(5, 2 ) возводит число 5 в степень 2, а результирующее значение равно 25. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу. ВОЗВЕДЕНИЕ ЧИСЕЛ В СТЕПЕНЬ J </Леа<1>

: • «attrt

Правке

Вин

И»*мм«в

Еювие

. <- . * . -з

£ге>«м

-л

-а

о»

jAapcc JC ' !: ц5^с«^ре|Тл^? п . Patoa с ^Ом.-^. ^ДТ^ло^. и^1|

л »j ^Первйв

зз ." Ссьии, "

</scriot> _|lH.4CKHtl'"

Р"т«!"С?К-"«£"^«»"А

iff

_=J

Ь|3

П"""" |ч531г5|

Ц Откройте с помощью -Q Присоедините программы Блокнот файл к обработчику события j s - s k e l e t o n . html. onclick оператор, который вычисляет ~Н Добавьте форму значение первого с тремя текстовыми текстового поля, полями и кнопкой. возведенное в степень, представленную во -И Присоедините втором текстовом поле. к кнопке обработчик события onclick. -И Сохраните файл под именем pow . html .

е; rtroe^

—И Откройте в окне броузера файл pow.html. __

первых текстовых поля.

•

5J м..,. ..»гмл«?

—И Щелкните на кнопке формы. ^Ш В третьем текстовом результирующее значение.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

НАХОЖДЕНИЕ МАКСИМАЛЬНЫХ И МИНИМАЛЬНЫХ ЗНАЧЕНИЙ

)сли вам когда-либо потребуется определить, какое из двух чисел больше, можете, разумеется, воспользоваться последовательностью фпёраторов i f , но существует и более простой способ установить это - - использовать методы min ( ) и max ( ) объекта Math. Эти методы получают два параметра и возвращают в качестве результата число, которое соответственно меньше или больше другого. Например, оператор min (3 , 4) возвращает значение 3, поскольку 3 — меньшее из двух чисел. Оператор тах(3, 4) возвращает значение 4, поскольку 4 больше, чем 3.

Попробуй!

Для определения максимального значения с помощью оператора if-else можно воспользоваться такой последовательностью операторов JavaScript. functionmaximum(vall, va!2) { if (vail > va!2) return vail; else return va!2;

НАХОЖДЕНИЕ МАКСИМАЛЬНЫХ И МИНИМАЛЬНЫХ ЗНАЧЕНИИ 3

<ht 1 <he a

£Цмека

S1*

Цэйрмнм

Сервис

Cnpeons

< с ipt ] ^ n g u a g e - " j a o j s t r i p t " > < 5 riPt>

< ~ мне- for.1 •> ,„-„„„..2:<1„р« ,5рт-"1.«" n,»,-"»,

-/> <ьг/>

наксинум:<1при1 type-"text" пам>-"яах <input tgpe-"t>utton" nanp-'-buttonl" v

><t Г/> ue- "Вкчисяить"

:и-ум:(з<

•"""'

Ц Откройте с помощью -Н Присоедините программы Блокнот файл к обработчику события onclick оператор, j s - skeleton . html . который определяет •И Добавьте форму максимальное с четырьмя текстовыми и минимальное значения полями и кнопкой. величин в первых двух текстовых полях. Я Присоедините события onclick.

именем min-max.html.

—И Откройте в окне броузера файл min-max.html.

—И Щелкните на кнопке формы.

В третьем —И Введите числа в первых и четвертом текстовых двух текстовых полях. полях отображаются минимальное и максимальное значения.

ГЛАВА 11. РАБОТА С ОБЪЕКТОМ MATH

ИСПОЛЬЗОВАНИЕ АБСОЛЮТНЫХ ЗНАЧЕНИЙ • ;avaScript включает еще один любопытный | метод объекта Math, который можно испОльзс>врть для получения абсолютного значения числя. Абсолютное значение любой величины всегда есть число положительное. Чтобы получить абсолютное значение отрицательного числа, достаточно просто отбросить его знак "минус". Метод, который проделывает эту операцию в JavaScript, называется abs ( ) . Он получает единственный численный параметр и возвращает абсолютное значение этого числа. Например, оператор Math. abs (-25) возвращает положительное значение 25.

В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Что еще?

Метод abs ( ) применим к любым числам: как к целым, так и к числам с плавающей точкой; однако, если методу передать строку, он возвратит значение NaN.

ИСПОЛЬЗОВАНИЕ АБСОЛЮТНЫХ ЗНАЧЕНИИ |

vSto

РрвИ!

.ПфМЖ

Cflpa»»,*

<flt»l

(bead </hea > (bodii <sc ipt ljnguage-"javascript"> </s ript> p

з ачеимс :< input typc-'-texl." rMne-"val1'Y><br/> а со.«Мтмов »*ч«И|ге:<1пр1* type--t«t" n^-"abS"/><br/> </for*> </bt>(fy> </htnl>

zJ Ц Откройте с помощью — Q Присоедините программы Блокнот файл к обработчику события onclick оператор, j s -skeleton. html. который вычисляет Q Добавьте форму абсолютное значение с двумя текстовыми величины в первом полями и кнопкой. текстовом поле. -р! Присоедините к кнопке обработчик события onclick.

-Я Сохраните файл под именем abs . html.

.*) («га.

—И Откройте в окне броузера файл abs.html. —Я Введите число в первом текстовом поле.

П Щелкните на кнопке формы. НИ Во втором текстовом поле отображается абсолютное значение.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ТЕКСТОВЫХ ПОЛЕЙ

аботая с HTML, можно организовать взаимодействие с пользователем с помощью форм. Формы предоставляют пользователю возможность вводить простые типы данных с помощью таких элементов, как текстовые поля, кнопки-переключатели и кнопки-флажки, а также списки типа меню. С помощью JavaScript можно, кроме того, динамически изменять содержимое элементов формы, таких как текстовые поля. Текстовые поля определяются в HTML с помощью дескриптора < input > и установки атрибута type равным text. Текстовые поля включают также атрибуты name и value.

Для обращения к текстовому полю в JavaScript необходимо указать имя формы и имя текстового поля. Например, можно получить значение текстового поля с именем textl в форме с именем forml с помощью следующей синтаксической конструкции:document.forml.textl.value. К свойствам объекта — текстового поля относятся такие свойства, как defaultValue, enabled, form, name, size, type и value. К методам объектов этого типа относятся методы f o c u s ( ) , blur() и select(). В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ТЕКСТОВЫХ ПОЛЕЙ J

|нформация

VP </for.> <scrlpt language-" jauascript"> docuiwnt .urifer'"«i пвдн: •• * docunent .f or docuMnt .wite("l*n зтого поля: •' + docunc t.fot-m -tpKtl.naup *

Иш того пол» textl Значение этого пол* информация Длина >того аоля: 20

docu«*nt .«-Це<"3начви*« эюго none: " . d cun«nt.for*i1.t*xt1.vdlut * •<ы/>"): •<»/>••):

</Uddy> </htnl>

Д Откройте с помощью ~Н Для отображения программы Блокнот файл некоторых свойств объекта — текстового js-skeleton.html. поля добавьте несколько -Q Перед дескрипторами операторов <script> добавьте document . write ( ) . форму с одним текстовым полем. -0 Сохраните файл под именем text .html.

-И Откройте в окне броузера файл text .html.

I В окне броузера

отображаются текстовое поле, а также его свойства.

ГЛАВА 12. РАБОТА С ФОРМАМИ

г- "::i^rk "^ -J. ^ ; .„-. а '• :&ipwj«T'.'-r^ ,.., . , ^.'' ---,,,- тTJ..,.JC^*7

Ц Откройте с помощью -0 Присоедините программы Блокнот файл к текстовому полю js-skeleton.html. обработчик события onfocus() -Я Добавьте в Webи отождествите его страницу форму с методом select ( ) . с текстовым полем. -И Сохраните файл под именем text2 . html.

-И Щелкните на текстовом поле. текстового поля выделен.

:,,\iL

IllM'f Flll)li|B j |

-И Откройте в окне броузера файл text2 .html.

Сс*мы, "

_^j г^П«^нш

:ripf>

первоначальное значение поля можно через свойство def a u l t V a l u e . Текстовое поле вполне может не содержать никакого значения по умолчанию. Если значение атрибута value не установлено, то текстовое поле будет пустым. С помощью метода select () можно автоматически выбрать содержимое текстового поля.

Свойство d e f a u l t V a l u e объекта text отличается от свойства value. Свойство d e f a u l t V a l u e представляет собой значение, которое составляет часть дескриптора <input/>. Свойство value -- это текстовое значение, которое хранится в текстовом поле. Первоначально этот текст совпадает со значением свойства defaultValue, однако пользователь может его изменить. Если пользователь изменил значение, то получить

i • I

Г Что еще?

202

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

>АБОТА G ИЮЛЯМИ ПАРОЛЯ

оля паролей аналогичны текстовым полям, но при вводе в поля пароли символов отображаются в виде звездочек (*). Подобное маскирование пароля не только полезно, но зачастую просто необходимо, поскольку позволяет скрыть такую секретную информацию, как пароль, от людей, заглядывающих вам через плечо во время его ввода. Объект поля-пароля включает такие свойства, как defaultValue,. enabled, form, name, size, type и value. Он также включает методы f o c u s ( ) , b l u r ( ) и select(). В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Что еще?

Необходимо быть внимательным при вводе пароля и держать содержимое поля пароля в секрете от посторонних лиц. При просмотре содержимого поля пароля с помощью оператора document . forml .passwordl.value пароль можно увидеть. Для соблюдения безопасности вы должны передавать любые пароли только непосредственно серверу.

• РАБОТА С ПОЛЯМИ ПАРОЛЯ |

*- ", •> """"^'

Ж . " Ж 1 ^ и -й. jy nJ

фиисЬ.гчото^вЛг™!: SJ7^^2aS5]

л3,-*'

^J <*nw«i

F=== (script language'" javascript '•> document .иг1СР("1ил поля: " • Oocunent . i-ornl.pwl .type * 'Tbi-/?^ ; document .write ("!*гя этого поля: " * document .fom1.p*1 .ntme * •<»,-/>••> ;

ЧЬг/>-1: <«cVIft> </bodu>

Имя этого поля pwl Значение этого попя светотень Длин» того по»« 20

-И Для отображения некоторых свойств объекта password добавьте несколько —И Перед дескрипторами операторов <script> добавьте форму document .write ( ) . с одним полем пароля. Ц Откройте с помощью программы Блокнот файл js-skeleton .html.

— 14 ППХПЯНИТР rtiawn

под именем password.html.

ilferoi>

~"~"

0 Откройте в окне зроузера файл password.html.

~"Г' "1$*£>^п**:*с

• В окне броузера отображаются поле пароля, а также его свойства.

uu»."

203

ГЛАВА 12. РАБОТА С ФОРМАМИ

РАБОТА СО СКРЫТЫМИ ПОЛЯМИ KJpbiTbie поля представляют собой специальн|ый тип элементов формы. Их создают с noМощью дескриптора < i n p u t / > и установки атрибута type равным hidden. Скрытые поля не отображают информации в окне броузера, однако их можно использовать для передачи данных в сценарий обработки формы.

Г Что еще?

Объект hidden содержит всего три свойства name, type и value. Методов у этого объекта нет.

Скрытые поля не видны в окне броузера, однако их можно просмотреть как часть программы в файле Web-страницы. Применяя опцию броузера В виде HTML (View Source), можно просмотреть любые скрытые поля и их значения.

В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

РАБОТА СО СКРЫТЫМИ ПОЛЯМИ ВЧ1

ДОрап.»

Сдрвде

a., a .

А*«гй

—

;

Поиск

И*¥*иим

Ж^иал

ГЬнвг»

Ч£1^^5В\Лм«врыТ(1*л^^вво

kfOt-Й ПИ <input

fc/Fprj»

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html. —Я Перед дескрипторами <script> добавьте форму с полем hidden.

-И Для отображения некоторых свойств скрытого объекта добавьте несколько операторов document.write(). -0 Сохраните файл под именем hidden.html.

-0 Откройте в окне броузера файл hidden.html.

В окне броузера отображаются свойства скрытого объекта.

204

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАБОТА € ОКНАМИ TEXTAREA

кна текстовых областей подобны текстовым полям, дополненным возможностью многострочного ввода. Объекты типа textjafea создаются с помощью открывающих и закрывающих дескрипторов <textarea>. Их можно использовать для вывода фрагментов текста, например целых абзацев. Размер текстовой области можно задать с помощью атрибутов rows и cols. Атрибут cols аналогичен атрибуту size текстового поля. Он определяет ширину элемента формы в символах. С помощью атрибута rows можно также задать количество строк текста, которое можно вести в текстовую область. К этим атрибутам можно обращаться, как к свойствам объекта textarea.

Объект textarea во многом подобен объекту text. Он включает свойства для атрибутов defaultValue, enabled, form, name, rows, cols, type и value. Объект textarea так же, как объект text, включает методы focus ( ) , blur ( ) и select ( ) . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

РАБОТА С ОКНАМИ TEXTAREA &йл Сдо* £«и Обнэвигв

Дв-tr* '

П.зи

га - Фц{ил j\ieytar«7hi'-jr|'

~j»j .^Перянсв ! [Ctbuwii *i

-| этого поля: " * docuntnt.Form -tan .лапе • Имя этсго поля, tal Зкачекиг этого поля Так сколы Значение этого пиля. 2

Д Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств объекта textarea js-skeleton.html. добавьте несколько -Я Перед дескрипторами операторов <script> добавьте document.write(). форму с окном текстовой —Н Сохраните файл под области. именем textarea.html.

Откройте в окне броузера файл textarea.html.

. В окне броузера отображаются окно textarea, а также его свойства.

205

ГЛАВА 12. РАБОТА С ФОРМАМИ

Попробуй!

Свойства объекта textarea можно присоединять к обработчикам событий для обновления текста в текстовой области. Представьте, например, форму, содержащую загадку. Когда пользователь щелкает на текстовом поле, в нем выводится ответ. Фрагмент программы, реализующий эту возможность, имеет следующий вид. <form name="forml"> <textarea name=" tal" rows="4" onfocus="document.forml.tal.value='Я тебя покрыл.'">Что ковер сказал полу?</textarea> </form> Эта форма представляет текстовую область, в которой отображается список загадок. Когда пользователь щелкает на окне текстовой области или когда это окно получает фокус, срабатывает событие onfocus и выполняется предложение JavaScript, заменяющее вопрос соответствующим ответом.

<htnl <head </ht* > <йойу <sc i)t lar>guage-"Jaoascripf> </s r i n t >

3 Qunowffk

--- .—

uffaa

Пен»

а*

Il»eiu

Граем

</Ц"-и> </body> </htnl>

Ц Откройте с помощью -0 Присоедините , программы Блокнот файл к текстовому полю js-skeleton.html. событие onf-ocus и отождествите его -Н Добавьте в Webс методом select ( ) . страницу форму с окном именем textarea2.html.

—И Откройте в окне броузера файл textarea2.html.

-О Щелкните на текстовой области. -• В окне броузера отображается текстовая область с выделенным в ней текстом.

206

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ ''--,

ИСПОЛЬЗОВАНИЕ КНОПОК TML позволяет создавать кнопки двумя способами. Первый способ состоит в использовании дескриптора <input/> и установлении значения атрибута type равным одному из типов объектов button,reset или submit. Второй способ заключается в использовании дескриптора <button>. Кнопкам Сброс (Reset) и Подача запроса (Submit) соответствуют собственные объекты. Эти кнопки рассматриваются ниже в этой главе, в разделах "Использование кнопки Сброс" и "Использование кнопки Подача запроса". JavaScript включает объект button, который обладает свойствами и методами для управления кнопками формы. Объект button обладает такими свойствами, как enabled, form, name, type и value. Атрибут value определяет текст надписи (но не имя!) кнопки.

Объект button обладает такими методами, как click ( ) и focus ( ) . С помощью метода click () можно сымитировать щелчок пользователя мышью на кнопке. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ КНОПОК Cktnl (held </Пел > <bejg <fo n na«e=-'for-ni"^

3 Помт,

'ЛаЗеанное

Тип поля button Имя этого поля, button!

•чьс/>" ;

d o c u r w n t . f o r n l . h u t t o n l . u a l u * ' "<br/>"): </Dodil> </htnl>

Ц Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств js-skeleton.html. объекта button добавьте несколько операторов ~Н Перед дескрипторами document .write ( ) . <script> добавьте -0 Сохраните файл под форму с кнопкой. именем button.html.

—И Откройте в окне броузера файл button.html.

• В окне броузера отображаются объект button, а также его свойства.

207

ГЛАВА 12. РАБОТА С ФОРМАМИ

г~

[опробуй!

В общем случае первый способ создания кнопок (с использованием дескриптора <button>) отличается от второго способа (с помощью дескриптора «cinput />), однако иногда применение того и другого способов может дать один результат. Приведенный ниже фрагмент использует дескриптор <button> для создания кнопки, после щелчка на которой текст в текстовом поле обновляется. <form name="forml"> <input type="text" name="textl"> </br> <button name="button1" onelick="document.forml.textl.value= 'Сядьте, сосчитайте до десяти и сделайте глубокий вдох.'">Panic Button</button> </form> Описанная здесь кнопка работает так же, как кнопка, созданная с помощью дескриптора <input/>.

:titm> Chead> :/head> :bodjj <s Ipt

•

Остановит» ОСкдоть

Домой

•

Поиск

ll^fruwMip^p^r...!': р^.с^р,..^^^ | |с„ь,е СК-И.Т.Р.ТВ ло IS ^ саелм,. гя а бо № й шюх

ИаС^янпое

->,я*ми

П(*-вгь

Пр**а

-](*!>«•« -се»»».

^П

'х

Ц Откройте с помощью -И Присоедините программы Блокнот файл к текстовому полю событие onclick js-skeleton.html. и отождествите его Добавьте в Webс оператором, страницу форму выполняющим с текстовым полем обновление текста. и кнопкой. ЧП Сохраните файл под именем button2 .html.

-И Откройте в окне броузера файл

-0 Щелкните на кнопке. выводится текст, заданный с помощью обработчика события onclick.

208

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ КНОПКИ СБРОС

нопка Сброс (Reset) представляет собой специальный тип кнопки, которая сбрасывает установки всех элементов формы до их первоначальных значений, принятых по умолчанию. Кнопки Сброс можно создать с помощью дескриптора <input/>, установив значение атрибута type равным reset. Объект reset включает свойства для атрибутов enabled, form, name и value. Точно так же, как объект button, он обладает методами click () и focus ( ) . В приведенном ниже примере используется файл j s-skeleton. html, однако описанные действия применимы к любому файлу.

Что еще?

Объект form включает метод reset ( ) . Этот метод можно использовать для имитации работы кнопки Сброс, которая возвращает форму в начальное состояние.

ИСПОЛЬЗОВАНИЕ КНОПКИ СБРОС

ftowoF

.У

ИзДмнива

Жщ>гвп

docuggnt.fornVj

—И Для отображения некоторых свойств объекта reset добавьте несколько —И Перед дескрипторами операторов <script> добавьте форму document.write(). с кнопкой Сброс. —Q Сохраните файл под именем reset.html. Ц Откройте с помощью программы Блокнот файл j s-skeleton.html.

-0 Откройте в окне броузера файл reset.html.

В окне броузера отображаются кнопка Сброс, а также ее свойства.

209

ГЛАВА 12. РАБОТА С ФОРМАМИ

ИСПОЛЬЗОВАНИЕ КНОПКИ ПОДАЧА ЗАПРОСА

нрпка Подача запроса (Submit) управляет отправкой данных формы серверу. Место назначения данных определяется атрибутом actiprl дескриптора <f orm>. Кнопку Подача запроса можно создать с помощью дескриптора < input/>, установив атрибут type равным submit.

Г Что еще?

Объект submit обладает свойствами enabled, form, name и value, а также методами c l i c k ( ) и focus(). В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Кнопку Подача запроса можно использовать для отправки данных по электронной почте. Чтобы активизировать эту функцию, следует добавить ключевое слово mail to : и адрес электронной почты в атрибут action дескриптора <f orm>. Объект form обладает также методом submit ( ) . Этот метод можно использовать для имитации работы кнопки, которая подает запрос на отправку данных формы.

ИСПОЛЬЗОВАНИЕ КНОПКИ ПОДАЧА ЗАПРОСА

астаномлъ

Подача запроса

Ойиовып.

<br/ "); document. wtte("H«« ! ocuiwnt.f or«1 .suDnitt .n, document .«г1ге("3нач<

• : '.ч*.

—И Для отображения некоторых свойств объекта submit добавьте несколько —И Перед дескрипторами операторов <script> добавьте форму document.write(). с кнопкой Подача запроса. —Q Сохраните файл под именем submit.html. Q Откройте с помощью программы Блокнот файл js-skeleton.html.

14-1747

-И Откройте в окне броузера файл

submit.html.

В окне броузера отображаются кнопка Подача запроса, а также ее свойства.

210

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ФЛАЖКОВ

нопки флажков (или независимых перек|лючателей) представляют собой ячейки, которые могут быть отмечены или не отмечены. Обычно говорят, что флажок выставлен или снят. Как правило, эти кнопки используются для установки или отмены опций. Элементы флажков создаются с помощью дескриптора <input/>, значение атрибута type которого установлено равным checkbox. Объект checkbox идентифицирует каждый отдельный элемент независимого переключателя с помощью его атрибута name. Например, на значение флажка с именем checkl, расположенного в форме f o r m l , можно сослаться с помощью предложения document. forml. checkl. value.

Объект checkbox обладает такими свойствами, как checked, defaultchecked, enabled, form, name, type и value. Свойство checked представляет собой булево значение, равное true, если флажок выставлен. Методами этого объекта click() и focus().

являются

методы

В приведенном ниже примере используется файл js'-skeleton.html, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ФЛАЖКОВ U

tie*d> /ft«dd> <boflu>

Пуча-

<lnput type-"che<

document.wlteC'Tun «лажка; "" * dociment .fornl -qbl .type

^T^

Ц Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств j s- skeleton . html. объекта checkbox добавьте несколько -И| Перед дескрипторами операторов <script> добавьте document.write(). форму с флажком. -Q Сохраните файл под именем checkbox.html.

-И Откройте в окне броузера файл checkbox.html.

В окне броузера отображаются флажок, а также его свойства.

ГЛАВА 12. РАБОТА С ФОРМАМИ

Попробуй!

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

щий вид.

function check() { if (document.forml.checkl.checked == true) document.write("Выбран флажок 1 " ) ; if (document.forml.check2.checked == true) document.write("Выбран флажок 2 " ) ; if (document.forml.checkS.checked == true) document-write("Выбран флажок З " ) ; Приведенная функция выполняет предложения, связанные с каждым из выставленных флажков. Если выбраны все три флажка, броузер отображает все три предложения.

Э <lnput <lnput <input <input

e-"checkbcx" паие-"

JQ Откройте с помощью -И Присоедините программы Блокнот файл к текстовому полю событие onclick js-skeleton.html. и отождествите его -И Добавьте в Webс набором операторов страницу форму для каждого из с несколькими флажков, проверяющих флажками и кнопкой. состояние флажка. —Q Сохраните файл под именем checkbox2.html.

: •'

—И Откройте в окне броузера файл checkbox2.html.

-И Щелкните на кнопке. -• Все флажки выставлены (В).

212

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ПЕРЕКЛЮЧАТЕЛЕЙ ^"Ч ереключатели (называемые также селекI тивньши кнопками или радиокнопками) | используются группами. При этом одновременно из группы можно выбрать только один переключатель. Все переключатели одной группы именуются одинаково. Каждый отдельный переключатель нумеруется в соответствии с порядком его появления в форме. Первый переключатель имеет нулевой номер (0). Например, группу переключателей myradio можно перечислить в следующем порядке: myradio [ 0 ] , m y r a d i o [ 1 ] , m y r a d i o [ 2 ] и m y r a d i o [ 3 ] . Аналогично другим элементам Web-страницы свойства объекта radio соответствуют атрибутам дескриптора < input/> и включают такие свойства, как checked, d e f a u l t C h e c k e d , enabled,

form, length, name и value. Свойство length возвращает количество элементов переключателей в группе. Объект radio обладает также методами click ( ) и focus(). В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ПЕРЕКЛЮЧАТЕЛЕЙ

'""•*

• .•;.-,

'*ДОвс1^'

fori» nane input type input typ,

document.Fornl nent.Fornl

1 t ("Второй idiolp]. ch '

* "<Oi-/>">; ра перркнича

'йГ а

Оетяямить О&шмт*

JStMiwt^nA'rvedi:

Рабдтз

Поиск . 'Ичбраииое

Форм

JKi

JIM

-з

Домчи •

adio

гиг7|

Ждапал

.j "я7,-.

Печет*

П«**И

Пьаечл

Св*«и

Первый переключатель выбран tmc Второй переключатель выбран talse Имя5Т'!Го набора переключателей tadiol Длина пого набора переюнсчателей 2

•nqth * "<br/>"l:

^jTrnW'"

Д Откройте с помощью -И Для отображения программы Блокнот файл некоторых свойств j s-skeleton.html. объекта radio добавьте

несколько операторов —И Перед дескрипторами document .write ( ) . <script> добавьте форму с набором Сохраните файл под именем radio . html. переключателей.

броузера файл radio.html.

^Mnu'.:*«fcW*u

отображаются переключатели, а также их свойства.

213

ГЛАВА 12. РАБОТА С ФОРМАМИ

Попробуй!

Можно построить функцию, которая выбирает оператор для выполнения, исходя из того, какой переключатель выбран. Подобная функция имеет следующий вид. function r a d i o ( ) { if (document.forml.radiol.checked == true) document.write("Выбран переключатель 1"); else if (document.forml.radio2.checked == true) document.write("Выбран переключатель 2 " ) ; else document.write("Выбран переключатель 3 " ) ; Эта функция несколько отличается от той, которая приводилась в качестве примера работы с флажками, поскольку переключатели взаимно исключают друг друга. Это означает, что одновременно может быть выбран только один переключатель.

!).*-_.^.^..«-г=-_«^.^ . .

а м

Понснч <fom oa«e-"Forn1"> <lnput typp-"radio" na(4e-"radio1" oncllck*"do

Мгбеанкх

' !6др<е|* : Е «ЗЛоиигаЛГ..,, IJ "ЛСТ.С ф:.р,.Н'"«^»-!

Жумм . i

& . з.-.г ' H»«i)Tv

Лрама

3 i^nt^iBiM'' : Ссылки *

Г Тюльпан <"П^Г,ННЯ T-caHJ ^Львиный 3fp| ~ Розы |»в тве^ющиг- fan летний цветов рЪнооирсзной р асмветки

<infut type.'Yadio" nam*-"radio1" onclick-"docunent .fornl .t 'не тсеоуммй ухода, стойкий, осенний цветок, укранает дон, юголе! ний' ">герань <iniut type-"radio" п-WYadioT" onclick-"dociinent .form .ti

</script> /body> YhtMl>

Ц Откройте с помощью Присоедините программы Блокнот файл к текстовому полю j s-skeleton.html. событие onclick и отождествите его Добавьте в Webс оператором, который страницу форму обновляет текст с несколькими в текстовом поле. переключателями и текстовым полем. —Q Сохраните файл под именем radio2 .html.

~И Откройте в окне броузера файл radio2 .html. -Q Щелкните на переключателе.

^И Текст в текстовом поле обновляется.

214

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАБОТА СО СПИСКАМИ ТИПА МЕНЮ

бъект select используется для создания выпадающих списков альтернативных значений типа меню. Каждый элемент списка создается с помощью дескриптора < o p t i o n / > . JavaScript включает как объект select, так и объект option, с помощью которых можно управлять списками типа меню. Объект select включает свойства name, length, s i z e и selectedlndex. Свойство length для этого объекта возвращает количество вариантов в списке выбора, а свойство selectedlndex хранит номер выбранного элемента списка. Объект option представляет собой подобъект объекта select. Этот объект — массив, к каждому элементу которого можно обратиться с помо-

щью значения его индекса, при этом первая альтернатива из списка имеет номер 0. Например, к первой опции списка меню mylist, расположенного в форме f orml, можно обратиться следующим образом: document. forml . m y l i s t . option [ 0 ]. Объект option также обладает свойствами. Они рассматриваются ниже в этой главе, в разделе "Работа с отдельными элементами списков типа меню". Объект select включает также методы blur ( ) и focus ( ) . В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

РАБОТА СО СПИСКАМИ ТИПА МЕНЮ . Зспис**

:seuect nane-"select1" • <option паяе-''optionr <option nj*e-"option2' :/selpct> .<fiurm>

("Номер текущего виер.

Список альтернатив называется selectl Длина списка альтернатив 2 Номер текущего выбранного элемента сп Длина набора переключателей; 4

*>ш—

t . w i t ("Длина набора перекимчатеяей:

Ц Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств js-skeleton.html. объекта select добавьте несколько операторов -И Перед дескрипторами d o c u m e n t . w r i t e ( ) . <script> добавьте форму со списком —Q Сохраните файл под альтернатив. именем select.html.

—И Откройте в окне броузера файл select.html. • В окне броузера отображаются список альтернатив, а также значения его свойств. —И Щелкните на одном из элементов списка.

—Q Щелкните на копке броузера Обновить. НИ Значения свойств выбранных элементов списка обновляются.

ГЛАВА 12. РАБОТА С ФОРМАМИ

Что еще? *

Попытка обратиться к элементу по несуществующему номеру приводит к ошибке в работе броузера, который прекращает выполнение сценария JavaScript. Сообщение об ошибке выводится в строке состояния броузера. Если ни один из элементов списка не выбран, свойство selectedlndex возвращает значение -1. Это значение можно использовать для проверки

того, выбрал ли пользователь какой-либо из элементов. Свойство selectedlndex можно использовать для указания элемента списка, который выбирается по умолчанию. Например, если значение свойства selectedlndex установлено равным 2, то по умолчанию из списка будет выбираться третий элемент.

htnl> htad> :/h*ad>__

<uptlon nane-"optlon1" ualue- йвИ'^Ионжин, Англня^р11оп> <uption naiW'optionZ" иа1ие-"ЛОК">аувлин. Ирланяия</ор11ап>

.„ник 9:12 Нтра": t H:1* атра";

Ц Откройте с помощью —Q Добавьте в сценарий программы Блокнот файл функцию, которая js-skeleton.html. обновляет текстовое поле в соответствии с тем, -И Добавьте в Webкакой из элементов стрг.ницу форму со списка выбран. списком альтернатив -И Сохраните файл под и текстовым полем. именем s e l e c t 2 . h t m l . —И Присоедините к текстовому полю событие onchange и отождествите его с функцией.

Откройте в окне броузера файл select2.html.

-И Щелкните на одном из элементов списка. НИ Текст в текстовом поле обновляется.

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАБОТА С ОТДЕЛЬНЫМИ ЭЛЕМЕНТАМИ СПИСКОВ ТИПА МЕНЮ

бъект option представляет собой подобъ0кт объекта select. Каждый элемент списка альтернатив -- это элемент массива, к которому можно обратиться с помощью значения его индекса. Нумерация элементов всегда начинается с нуля (0). Объект option включает также несколько свойств, относящихся непосредственно к отдельным элементам списка. Свойство def aultSelected возвращает номер элемента списка, который отмечен, как выбираемый по умолчанию. Свойство s e l e c t edlndex указывает на текущий выбранный элемент списка, а свойство selected — это булево зна-

чение, которое указывает, выбран ли текущий элемент списка. Свойство text возвращает в качестве значения текст, размещенный между открывающим и закрывающим дескрипторами <option>. Свойства можно применять к отдельным элементам списка с помощью значений их индексов в массиве. Например, если в списке выбран третий элемент, то оператор document.forral.selectl.options[2]. selected возвращает значение true.

РАБОТА С ОТДЕЛЬНЫМИ ЭЛЕМЕНТАМИ СПИСКОВ ТИПА МЕНЮ . ЗстЧИОВЛЪ '••'&.

CflHOWIb

[select nawe="select1" siz*-"ii"> <optlon na«e-"option1" да1ие-"ЛОН">Лоняан, йнглиЖ/ор(1оп> (option nd>p-"option2" 1м1ие-"Диб">Дубямн, нряаняиж/uptiDii:

Вариант, выбираемый по умолчанию' false Номер первого элемента списка: О Имя первого элемента списка орпоп! Первый элемент списка выбран. False Текст для первого элемента списка Лондон, А: Значение ««я первого элемента списка. ЛОН document, foi icu*ent.write("3 аченне

П Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств j s-skeleton.html. объекта option добавьте несколько операторов -Q Перед дескрипторами d o c u m e n t . w r i t e ( ) . <script> добавьте форму со списком -Q Сохраните файл под альтернатив. именем option .html.

—И Откройте в окне броузера файл option.html.

• В окне броузера отображаются список альтернатив, а также значения свойств для одного из его элементов в соответствии с оператором document.write(), использованным в данном примере.

217

ГЛАВА 12. РАБОТА С ФОРМАМИ

Г Что еще?

Объект option обладает и рядом других свойств, таких как index, length, name и value. Какие-либо методы у объекта option отсутствуют. Обычный список альтернатив допускает выбор только одного варианта. Если в дескриптор <select> добавить атрибут multiple, то в списке альтернатив можно будет выбирать одновременно несколько элементов. Чтобы выбрать несколько элементов в списке альтернатив, необходимо в процессе выбора нажать и удерживать клавишу <Ctrl> или

<Shift>. Атрибут multiple рассматривается в следующем разделе, "Работа со списками множественных альтернатив". Если атрибут s i z e не задан, то первоначально отображается только один элемент списка. При этом справа от списка отображается стрелка. Если щелкнуть на этой стрелке, список раскрывается и отображается оставшаяся часть его элементов. Поскольку список альтернатив нельзя прокрутить по горизонтали, ширина всего списка определяется шириной самого длинного из его элементов.

: i £Л)'

! "*• j

Llpewe fem Иайр**ое Сииис

£лр«* »

•* .' з ' ' s

» , :v,

,'• ;•--.

Останова

Мнаакт.

Лз»»>

'Лона

Ждечю

Пвч«в

a .

Правив

J ^Rw«« • ^Сся«* «

| ^йар*,-^ F V'.a^r»*rb \Г«и 12 • Р-ЙОТ. с «оом*^«г*п: N-ы j

a : i*

№х5р«»тае

Лондон. вылет:Понедельнмк9.12 утра nanp."opt оп2" «й1ие-"ЦУЬ">аунлнн, ирландия</ор(1оп> ipt on nara?""opt опЗ" оа1ие-"ЙНС">Япетерпап, ГолландиЖ/optiol opt on nane-"opt on*" иа1ие-"ПЙР">Париж, «рэлциж/орь1оп> ' t><or/>

Амсгердем, вылет. с'менен Париж, вылет Четверг 3 47 чтрв

Д Откройте с помощью -И Присоедините программы Блокнот файл к текстовому полю событие onclick js-skeleton.html. и отождествите его —Я Добавьте в Webс функцией. страницу форму со списком альтернатив —Q Добавьте в сценарий функцию, которая и кнопкой. обновляет элементы списка альтернатив. —И Сохраните файл под именем option2 .html.

-И Откройте в окне броузера файл option2 .html.

Jlu

<tl fnr«o

Я 1

pt lanquaqe="|ai

~Н Щелкните на кнопке формы.

списка обновляется.

218

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

РАБОТА СО СПИСКАМИ МНОЖЕСТВЕННЫХ АЛЬТЕРНАТИВ

ожно настроить окно выбора альтернатив -таким образом, что оно будет допускать выбор одновременно нескольких вариантов из списка. Для этого следует добавить атрибут m u l t i p l e в дескриптор <select>. Свойства объектов select и option в случае множественного выбора работают точно таким же образом, как для списка с возможностью выбора единственного варианта. Свойство selectedlndex, которое для единичного выбора отображает номер выбранного элемента, возвращает наименьший номер выбранного элемента списка. Пусть, к примеру, имеется список альтернатив, включающий семь элементов. И пусть пользователь выбрал одновременно второй, третий и чет-

вертый элементы. Тогда свойство selectedlndex возвращает номер для второго элемента списка, который равен 1, поскольку нумерация элементов начинается с нуля (0). В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

РАБОТА СО СПИСКАМИ МНОЖЕСТВЕННЫХ АЛЬТЕРНАТИВ

3 el*ct tii»iw"5el*crl" slze»"V nultlplO option naw-"optionl" иа1ие-"Ш1Н">Лридон, йигяиК/ар(1оп> tion r»«e-"optionZ- ил1ие-"аУБ">аубдин, Нрманяия</ов11сш> tion лам-"options" ия1ие-"А1С">Амстердам, Гоялан«мя</ор11оп> Mon na*e-"optlonV иа!и*-"ПйР">Париж. Франинч</орС1ап> ect>

•о рои элемент списк.

Пандан Англия ДуВлик Ирландия Амстердам. Голлвнди* Париж Франция Выбран первый элемент списка false Выбран втс-рок элемент списка, false |6ран третий элемент списка false бранутаертыЯ элемент списка. ials<

'nt.urit ("Выбран третий элемент списка: " * armi.se ect!,options[2] .selected * "<br/>"); •nt.write("Выбран четверти) элемент списка: " </bodj| </htnl

-'•' "

Ц Откройте с помощью —Q Для отображения программы Блокнот файл свойств selected j s-skeleton.html. каждого из элементов списка добавьте -И Перед дескрипторами несколько операторов <script> добавьте document.write(). форму со списком множественных —Q Сохраните файл под альтернатив. именем multiple.html.

Откройте в окне броузера файл multiple .html.

НИ В окне броузера отображается список альтернатив, при этом ни один из его элементов не выбран.

ГЛАВА 12. РАБОТА С ФОРМАМИ

г~

Попробуй!

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

function list ( ) { if (document . forml .selectl. options [0] .selected == true) document .write ( "Выбран вариант 1 из списка выбора"); if (document . forml. selectl. options [1] .selected == true) document .write ( "Выбран вариант 2 из списка выбора " ) ; if (document .forml. selectl. options[2] .selected == true) document .write ( "Выбран вариант 3 из списка выбора " ) ; Приведенная функция выполняет различные наборы операторов применительно к каждому выбранному элементу списка.

; ; £йЙЯ :

Q ммм

6*1

ЙэйР*«НО«

Сдави:

Спрд-д

.*- .• -* •::•, . Остапоемп & ! Овнвмя^ "'ki Дп»*й 5 ' Л - - ,-

-i!

. "

_^j (? Уловки . : CchtfKt "*

Г П о н ' п и \н'"лиё

LilLUUL.

V-.:.-..-

Остаяямг^ З&юви!^ [ Доьий

Псн17

;ii

Иэбсвчное

XJJCHBR

Owdis

Я . "

Проем

_•] .^Пвряед

Ссмлки1* jj

]

11жтеН \

Выбран '-ретвй элемент списка: false

• - -

|&Ч»с|(;-;Е'и5В\П1и*оС^.1*а12 Работа: рорма™\гг,иМе WT

Вы6р»,.4.н,л,«.,с„,с„и

5| lf<& i и-шыггвр

-J

П Выберите несколько -Я Щелкните на кнопке броузера Обновить элементов списка, (Refresh). удерживая клавишу <Ctri>. selected для выбранных элементов списка принимает значение true.

i€J f»"*o

Я Выберите все элементы списка, удерживая клавишу

-И Щелкните на кнопке броузера Обновить. selected для всех элементов списка принимает значение true.

220

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

БЛОКИРОВКА ЭЛЕМЕНТОВ ФОРМЫ

сли к элементам формы добавить атрибут ^disabled, то их можно заблокировать. Заблокированные элементы формы удаляются из сйиска порядка перехода по клавише табуляции, который управляет переносом фокуса в окне броузера с одного элемента на другой. Кроме того, эти элементы затеняются и становятся недоступными для использования до тех пор, пока они не будут разблокированы. Почти все элементы формы обладают свойством disabled. Оно возвращает булево значение, равное true, если элемент заблокирован, и f a l s e в противном случае. Например, если форма forml содержит текстовое поле textl, которое заблокировано, то оператор

d o c u m e n t . f o r m l . t e x t l . d i s a b l e d возвращает значение true. К элементам формы, обладающим свойством disabled, относятся такие объекты, как button, checkbox, combo, password, radio, reset, select,submit, text и textarea. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

БЛОКИРОВКА ЭЛЕМЕНТОВ ФОРМЫ

Пои*

•

/>");

шровано: dnciimfllt.fol-n1.rpxn. isabled * "<br/У); document.w-itu 1 -»

Ц Откройте с помощью -Q Для отображения программы Блокнот файл свойства disabled

добавьте несколько операторов -Я Перед дескрипторами document.write(). <script> добавьте форму со списком —И Сохраните файл под альтернатив,текстовым именем disabled.html. полем и флажком. j s-skeleton.html.

-И Ко всем элементам формы добавьте свойство disabled.

1а6локирован ttue стовое поле эабяо жок заблокнрова!

—И Откройте в окне броузера файл disabled.html.

•• Все элементы формы заблокированы.

ГЛАВА 12. РАБОТА С ФОРМАМИ

Попробуй!

С помощью свойства disabled можно динамически блокировать элементы формы. Если, к примеру, форма f orml содержит текстовое поле textl и кнопку buttonl, то приведенное ниже предложение JavaScript блокирует эти два элемента формы. function disableElements() { document.forml.textl.disabled = true; document. f orml .buttonl .disabled = true,-

Эта функция блокирует элементы формы, свойство disabled которых установлено равным true. Элементы формы можно снова разблокировать, установив свойство disabled равным false.

in, Йкглня</ор11ол> w-"option2" «а1ие-"ДУБ">Давл IH. ирланянж/optlon 1

l<l[>put tupe*атнв заблокирован: " • .farptl.selcctl.disabled * '•<br/>">; nent.w-lteC'TeKCTOBoe поя* заблокирована: " * Логя1.textl.disabled * "<or/>"): iwnt.BrilPfefldMlK заблокирован: " * -for*1.cb1.disabled * 'ЧЫ/Э 1 '); pt>

Q Откройте в окне броузера файл disabled.html. -0 Удалите из некоторых элементов формы атрибут disabled.

Сохраните файл под именем disabled2 .html.

-iM Откройте в окне броузера файл disabledS.html.

Некоторые из прежде заблокированных элементов теперь разблокированы.

222

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПЕРАЦИИ СБРОСА И ПОДАЧИ ЗАПРОСА ДЛЯ ФОРМЫ

бъект form включает свойства и методы, относящиеся к форме в целом, в том числе методы для сброса информации, введенной в форму, и отправки данных серверу. К свойствам объекта form относятся action, elements, length, method и target. Свойства action и method определяют место назначения и способ передачи данных формы серверу. Свойство elements позволяет обращаться к любому элементу формы с помощью индекса или номера, соответствующего порядку, в котором элементы появляются в форме. Свойство length возвращает количество элементов в форме. Свойство target

указывает имя окна, в которое будет помещен ответ после отправки данных формы серверу. Более подробно это свойство рассматривается в главе 13. Методы reset ( ) и submit ( ) объекта f o r m работают аналогично кнопкам Сброс (Reset) и Submit (Подача запроса), т.е. соответственно сбрасывают все установки формы и отправляют данные формы серверу. Эти операции можно присоединить к любому событию JavaScript. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОПЕРАЦИИ СБРОСА И ПОДАЧИ ЗАПРОСА ДЛЯ ФОРМЫ

arm na*e-"formr- act ion-"cgT^bin/u,il lff.iTe.pl" м>11ш<1-"раъГ <input type-"text" naiw-"t«xt1" иа1ир-"икоормация"> </Югя>

i VnethodV «ормы pdi t .form . Pttlull

/>");

Свойство "асйоп" формы равно1 cgi-tWvakdatc pi Свойство "nirthod" формы равно post Свойство 4fngth~ формы равно 1

i \"l*ngth\" *opr«J \IAI

;

Ц Откройте с помощью —И Для отображения программы Блокнот файл некоторых свойств j s-skeleton.html. объекта form добавьте несколько операторов -0 Перед дескрипторами d o c u m e n t . w r i t e ( ) . <script> добавьте форму с текстовым —Q Сохраните файл под именем form.html. полем.

—И Откройте в окне броузера файл form.html.

4i*»>«^«ir

В окне броузера отображаются форма, а также ее свойства.

ГЛАВА 12. РАБОТА С ФОРМАМИ

Что еще?

Объект form может воспринимать события onReset и onSubmit. С их помощью можно перезаписать функции обычных кнопок Сброс и Подача запроса. Объект form хранит массив всех элементов формы. Объект form позволяет непосредственно управлять всеми элементами формы. Значения индексов для элементов формы определяются порядком, в котором они по-

223

являются в форме. Например, если единственная форма f orml включает два текстовых поля и кнопку, то ссылка на первое текстовое поле будет выглядеть как document.forml.elements [ 0 ] , на второе текстовое поле -- как document. f orml. e l e m e n t s [ l ] , а обратиться к кнопке можно по следующей ссылке: document.forml.elements [ 2 ] .

' nethod""past":

.[•J.nai» . "<br/>~>; ipent.w p ( ' - T n первого элемента «о| for«1. lenentsfm.tuoe • "<ьг/>'

ШЙ

jj Откройте с помощью -И Для отображения программы Блокнот файл свойств первого элемента формы добавьте j s-skeleton.html. несколько операторов —Q Добавьте в Webdocument.write(). страницу форму с текстовым полем. —Q Сохраните файл под именем f o r m 2 . h t m l .

-И Откройте в окне броузера файл form2.html.

I В окне броузера отображаются значения свойств первого элемента формы.

224

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ПРОВЕРКА КОРРЕКТНОСТИ ФОРМ

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

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

ПРОВЕРКА КОРРЕКТНОСТИ ФОРМ 3

(Ъаеы

Uert{'Пожалуйста. Пожалуйста, оиекиг; услуги Q-4]

П Откройте с помощью —Q Присоедините программы Блокнот файл к текстовому полю js-skeleton.html. событие onchange и отождествите его —Я Добавьте в сценарий с функцией. форму с текстовым полем. —И Сохраните файл под именем validate . html. -И В дескрипторах <script> создайте функцию, которая отображает диалоговое окно предупреждения, если значение текстового поля неприемлемо.

—И Откройте в окне броузера файл validate.html.

В окне броузера отображается одно текстовое поле с текстом.

ГЛАВА 12. РАБОТА С ФОРМАМИ

Г Что еще?

Некоторые операторы JavaScript участвуют в математических операциях. Помимо обычных символов математических операций для сложения (+), вычитания (-), умножения (*) и деления (/), символ != означает "не равно", && означает логическую операцию "и", I I означает логическое "или", <= означает "меньше или равно" и >= означает "больше или равно".

Некоторые строковые функции также можно использовать для проверки данных. Например, если требуется установить, содержится ли определенное слово в текстовом поле или текстовой области, можно воспользоваться функцией i n d e x O f ( ) для поиска строкового значения в строке текста.

Я aX2fc

Пеж*луаст». оцемнте услуги (1-4): )5

ожалу* ал, оцените услуги (1-4)|р_

Q Введите в текстовом поле неверное значение.

15-1747

И Нажмите клавишу <Enter>.

• В окне броузера появляется окно предупреждения с сообщением для пользователя.

225

226

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

УПРАВЛЕНИЕ ФОКУСОМ ФОРМЫ

огда определенный элемент формы получае* фокус, пользователь может вводить значения в форму с помощью клавиатуры. Например, если фокус передан текстовому полю, можно водить в него данные с помощью клавиатуры, при этом вводимые символы появляются в текстовом поле. Метод focus ( ) можно использовать для передачи фокуса от одного элемента формы другому. Например, если форма forml включает текстовое поле textl, можно передать фокус этому текстовому полю с помощью оператора document. forml. t e x t l . focus().

Существует еще один метод, подобный методу f o c u s ( ) . Это метод blur ( ) . С его помощью можно удалить фокус из элемента формы. С указанными двумя методами связаны два события, предназначенные для отслеживания действий по управлению фокусом: onFocus и onBlur. Эти события рассматриваются в разделе "Использование событий, связанных с фокусом". В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

УПРАВЛЕНИЕ ФОКУСОМ ФОРМЫ

|Л1че-"Гяе iBori *окисТ"/ХЬг/> ialue-''Илм, может, эдесь?"/хьг/> 11" ualue-''Текстовое поле If

П Откройте с помощью —Q Установите событие программы Блокнот файл onclick таким образом, чтобы при его j s-skeleton.html. срабатывании фокус -И Добавьте форму передавался одному из с несколькими текстовых полей. текстовыми полями и кнопками. —И Сохраните файл под именем f o c u s . h t m l . —И Присоедините к каждой кнопке по событию onclick.

—И Откройте в окне броузера файл focus.html.

Q Введите некоторый текст.

Текст появляется —Я Щелкните на кнопке, в текстовом поле, получившем фокус.

227

ГЛАВА 12. РАБОТА С ФОРМАМИ

Что еще?

Такие элементы формы, как переключатели и флажки, не обладают методом blur ( ) , поскольку каждый отдельный переключатель или флажок принадлежит группе и броузер не в состоянии определить, когда теряет отдельный элемент группы. При этом оба типа элементов формы — и переключатели, и флажки — обладают методом focus ( ) , и нажатие клавиши <Enter> в тот момент, когда пе-

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

•&

Й№«]г [ . ' . г . , ,.,^.. : г ~ . 1 ,

rip > • n м-"forirl"> npu ype-"t npu уре*"Ъ oncl ck-- о intent.

4 '; а '•'•'" за

Димой

-'.--M'. юомэм4\ЫыИ

Пине*

ИЛР»«Ж

з ' • • 1*" 'я :.

» э£*«л

fit-'llt

Прмм

-| .^Пеива

CCWK!."

|Где твой фокус'

«окцс?"/><Ьг/>

" лап,*-"1ек1Э" value "Или, ножет, заесь?"/ХЫ/> on" пи '"button*!" и ue-''Текстовое поле Ш" •! j t e x t l ПлП^ )"/>< Ь >

[Ипи может здесь?

Текстовое none fl Текстовое поте Я

</ orn> </bodu> </htnl>

Д Откройте с помощью Ц Сохраните файл под програ.ммы Блокнот файл именем b l u r . h t m l . focus.html. ~Н Замените метод focus } методом blur ( }.

И Откройте в окне 5роузера файл э!иг . html. 3 Щелкните на одной из кнопок.

Q Введите некоторый текст. • Текст не появляется ни в одном из текстовых полей, поскольку они потеряли фокус.

228

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИДПОЛЬЗрВАНИЕ СОБЫТИЙ, СВЯЗАННЫХ С ФОКУСОМ

о!гда элемент формы получает фокус, в форму можно вводить данные с помощью клавиатуры. Любому элементу формы можно передать фокус, щелкнув на нем мышью или нажав клавишу табуляции. При нажатии клавиши <ТаЬ> фокус переходит от одного элемента формы к другому. Порядок передачи фокуса, принятый по умолчанию, соответствует порядку появления элементов в форме. Однако можно установить порядок, в котором каждый элемент формы получает фокус, с помощью атрибута tabindex. Установить моменты получения или потери фокуса элементом формы можно с помощью собы-

тий onFocus и onBlur. Обработчик события onFocus применим к любому элементу формы, однако обработчик события onBlur можно применять только к элементам формы select, option, text,password и textarea.

ИСПОЛЬЗОВАНИЕ СОБЫТИЙ, СВЯЗАННЫХ С ФОКУСОМ .I '"'&

3ctai»*jwn,

C&wawrb

""и

Ломсй

Пм

'.v.,~~"'7~7"Z^ii|-,.* ......и|

: Ц Откройте с помощью — Q Установите событие программы Блокнот файл onFocus таким образом, js-skeleton.html. чтобы при его срабатывании текст Н Добавьте форму в текстовом поле с несколькими изменялся. текстовыми полями. Сохраните файл под —Q Присоедините именем onFocus . html . к каждому из текстовых полей по событию onFocus.

—И Откройте в окне броузера файл onFocus.html.

Щелкните в одном из текстовых полей. • Текст появляется в текстовом поле, получившем фокус.

229

ГЛАВА 12. РАБОТА С ФОРМАМИ

Попробуй!

Одним из наиболее распространенных способов использования обработчика события onFocus является выделение текста в текстовом поле при получении этим полем фокуса. Если для выделения текста в текстовом поле используется событие onFocus, то пользователю не требуется удалять существующий текст; существующий текст просто заменяется новым текстом, как только пользователь начинает ввод. Функции выделения текста при получении текстовым полем фокуса можно поместить в элементы формы наподобие текстового поля или текстовой области, например, следующим образом. < f orm name ="fоrml"> <input type="text" name="textl" value="default text" onf ocus= "document, forml. textl. select ( ) " />

<textarea name="tal" value="default text" onfocus="document.forml.tal.select ( ) " </form> При получении фокуса различными элементами формы срабатывает событие onf ocus и инициируется выполнение метода select (), который и выделяет текст в текстовом поле.

Обчм»яъ

Домой

Пенс*

Иэбо*«ое

Журнал

Печагв

ГЦмагв

«script lai </script>

.-,,„

Q Откройте с помощью Q Сохраните файл под программы Блокнот файл именем onBlur. html. onFocus.html. —Я Замените события onfocus событиями onblur и замените отображаемый текст.

Откройте в окне броузера файл onBlur.html.

-0 Щелкните в другом текстовом поле.

В текстовом поле, Щелкните в одном из которое потеряло фокус, текстовых полей. отображается сообщение.

230 1'"~

Г* Т

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ :.-...-,

•

....

РАБОТА С ОБЪЕКТОМ FRAME

реймы предоставляют возможность разделять Web-страницу на несколько отдельных панелей. Эта глава посвящена приемам работы с фреймами; в ней рассматривается, как фреймы получают фокус и какое действие оказывает применение операторов JavaScript на фреймы. Объект frame обладает многими свойствами, которые определяют многообразие фреймов. К ним относятся такие свойства, как frames, onBlur, onFocus,parent, s e l f , t o p и window.

Свойство frames представляет собой массив всех фреймов, входящих в набор фреймов. Эти фреймы являются подобъектами родительского объекта, и к ним можно обратиться по индексу или номе-

ру. Значения индексов фреймов соответствуют порядку, в котором они появляются в HTML-файле. Например, если набор фреймов содержит три фрейма, к первому из них можно обратиться с помощью составного имени document. frames [0], ко второму — с помощью document. frames [1] и к третьему — с помощью document. frames [ 2 ]. Объект frame обладает и такими методами, как open ( ) и close ( ) , которые совпадают с методами объекта document. В приведенном ниже примере используются файлы s k e l e t o n . h t m l и j s - s k e l e t o n . h t m l , о д н а к о описанные действия применимы к любому файлу.

РАБОТА С ОБЪЕКТОМ FRAME

»е src-"left.htnl" naw?-"left"> fraiw src-"right.htBl" nane-"rlght":

fl Откройте с помощью программы Блокнот файл skeleton.html. —И Замените дескрипторы <body> дескрипторами <frameset>, определяющими страницу для набора фреймов из двух фреймов.

)рейма:

Сохраните файл под именем frameset . html.

Q Откройте с помощью —Q Для отображения программы Блокнот файл имени фрейма добавьте в дескрипторы <script> j s- skeleton .html. оператор ~И Добавьте заголовок. document.write(). L

-Q Сохраните файл под именем l e f t . html.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

Г о еще?

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

но из нескольких окон, которые отображаются в главном окне броузера, объект frame может использовать все свойства и методы, присущие объектам document и window. Например, доступ к свойствам первого фрейма страницы как к свойствам документа можно получить с помощью следующего составного имени: parent.frame[0] .document .title.

"^5В\Л|

'fSo'" '""""''I'1** </,crl"> '"

• mr.iit.fi-.., m

й мир

Новый мир

1с8

Q Откройте с помощью -ПЯ Для отображения программы Блокнот файл имени фрейма добавьте js-skeleton.html. в дескрипторы <script> оператор —Q Добавьте заголовок. document .write ( ) . Сохраните файл под именем right .html.

| Откройте в окне броузера файл frameset.html.

• В окне броузера отображаются два фрейма со своими именами. Замечание. Левый фрейм отображает файл lef t. html, а правый фрейм отображает файл right.html.

232

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБРАЩЕНИЕ К ФРЕЙМУ ПО ИМЕНИ

фреймам можно обращаться не только по индексу (например, следующим образом: parent. frames [ 0 ]), но и по имени, определеннрму в атрибуте имени дескриптора <f rame>. Например, если вы назвали фрейм framel, к нему можно обратиться следующим образом: parent . f r a m e l . К фрейму можно, также получить доступ с помощью массива frames, заменив при этом значение индекса значением имени в кавычках, например, так:parent.frames["framel"].

ment, а также все свойства и методы обычного объекта document. Например, ссылка на заголовок фрейма с именем f r a m e l может выглядеть следующим образом: p a r e n t . f r a m e l . document . t i t l e . В приведенном ниже примере используются файлы skeleton.htmlи j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

После создания фрейм функционирует, как обычное окно. При этом доступны объекты docuОБРАЩЕНИЕ К ФРЕЙМУ ПО ИМЕНИ

и cunent.wi

Ц Откройте с помощью программы Блокнот файл skeleton.html. -Q Замените дескрипторы <body> дескрипторами <f rameset>, определяющими страницу для набора фреймов из двух фреймов.

| Сохраните файл под именем frameset2.html.

Q Откройте с помощью —Q Для отображения программы Блокнот файл цвета фона фрейма js-skeleton.html. добавьте в дескрипторы <script> оператор —И Задайте цвет фона document.write(). в дескрипторе <body>. -И Сохраните файл под —И Добавьте заголовок. именем I e f t 2 .html.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

Г Что еще?

Свойства строки состояния доступны только для родительского фрейма. Если их задать для других фреймов, то свойства строки состояния будут проигнорированы. Хотя фреймы являются производными от родительского объекта, можно обратиться из любого порожденного объекта-фрейма к любому другому порожденному объекту-фрейму. Например, если страница содержит три фрейма, framel, frame2 и f r a m e s , то из файла, загруженного в фрейм framel, можно получить доступ к свойству t i t l e фрейма frame2 с помощью составного имени

233

parent.frame2.document.title;, а к свойству заголовка фрейма frame3 можно обратиться, воспользовавшись синтаксической конструкцией parent.frame3.document.title;. С помощью подобного метода можно использовать один из фреймов Web-страницы для управления другими фреймами той же Web-страницы.

<scriDt Uni»iaa«-"UM*crii bocun*iv:.write("UeeT мн; jrntt.riqhi.dDcjiHgnt-liiiColoj

Новый мир Цвет фона фрейма, желтый!

И Откройте с помощью Для отображения программы Блокнот файл цвета фона фрейма js-skeleton.html. добавьте в дескрипторы <script> оператор •ПО Задайте цвет фона document.write(). в дескрипторе <body>. -ПП Сохраните файл под -Щ Добавьте заголовок. именем right2 .html.

Откройте в окне броузера файл frameset2.

• В окне броузера отображаются два фрейма со своими цветами фона. Замечание. Левый фрейм отображает файл lef t2 .html, а правый фрейм отображает файл right2.html.

234

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

КОЛШЕСТВО ФРЕЙМОВ В НАБОРЕ Гфеделить количество фреймов, входящих |в заданный набор фреймов, можно с помо{цью свойства length. Получить доступ к этому свойству можно из родительского объекта. Это свойство просто возвращает количество фреймов. Например, в случае набора фреймов, состоящего из трех фреймов, свойство parent. frames . length возвращает значение 3. В приведенном ниже примере используются файлы f r a m e s e t 2 . h t m l и r i g h t 2 . h t m l , созданные в разделе "Обращение к фрейму по имени", однако описанные действия применимы к любому файлу.

С'

Что еще?

Свойство length можно использовать для определения количества фреймов-потомков, содержащихся в текущем фрейме. Например, если фрейм myFrame содержит три дополнительных фрейма, то оператор self . length возвратит значение 3.

КОЛИЧЕСТВО ФРЕЙМОВ В НАБОРЕ Э

ftie d> •.Ни у bgcolor-"y*llpw"> < 2>Ho«u* »*p</h3> docuMnt.w-lteC'KOJMiMecTBo «рейхов • эТом нморе: рас nt.Fr«iw«.l»nqth); </scriptT <гь*ау> </htRl>

программы Блокнот файл frameset2.html.

Q Замените файл right2 .html файлом rights.html.

с помощью программы Блокнот файл right2.html.

—И Измените оператор document.write() таким образом, чтобы Q Сохраните файл под он отображал именем framesets .html. количество фреймов. -И Сохраните файл под именем rights.html.

Откройте в окне броузера файл framesets.html.

• В окне броузера отображаются два фрейма и количество фреймов.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

235

ССЫЛКА НА ТЕКУЩИЙ ФРЕЙМ

текущему фрейму всегда можно обратиться с!помощью объекта s e l f . Свойство parent ссылается на объект frameset, который ссылается на текущий фрейм, однако объект s e l f прямо ссылается на текущий фрейм. Например, если вы создаете сценарий для фрейма f ramel, можете получить доступ к заголовку этого фрейма с помощью оператора self .document, t i t l e , а не использовать оператор parent . ::ramel. document. t i t l e . Использование объекта self интуитивно более понятно и требует более короткой записи.

в разделе "Обращение к фрейму по имени", однако описанные действия применимы к любому файлу.

Г Что еще?

В приведенном ниже примере используются файлы f r a m e s e t 2 . h t m l и I e f t 2 . h t m l , созданные

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

ССЫЛКА НА ТЕКУЩИЙ ФРЕЙМ

<head </h«a > (body Bgi:o or-"orangp"> (ti? Claput Mlp</h2> <sc lot . anaiiaof"1auascrlpt"> d cunent.wlteC'Ueer «она «рейма:

^] ^Пер^оч

* "аранкевый'1

Стары!) мщ>

Ссыяк». "

Новый мир

•

• Отт-'ППМТР Р. ТТПМПТТТТ-.ТП

программы Блокнот файл' frameset2.html. Q Замените файл Ieft2 .html файлом Ieft4.html.

F1 Пткппйтр

с помощью программы Блокнот файл Ieft2 .html.

-И Измените оператор document.write{) таким образом, чтобы 0 Сохраните файл под он отображал цвет именем frameset4 .html. фона с помощью объекта s e l f . Сохраните файл под именем Ieft4.html.

-Я Откройте в окне броузера файл f rameset4 . html.

• В окне броузера отображаются два фрейма и значения цветов фона для каждого из них.

236 !

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ .

;

•• -

[ЁРЕКРЕ(?ТНЫЕ ССЫЛ1СИ МЕЖДУ Црмощыо массива фреймов можно полурфить доступ ко всем элементам, располо> Ценным на отдельной Web-странице, таким как элементы формы. Например, если набор фреймов содержит два фрейма, framel и frame2, вы можете получить доступ к текстовому полю, содержащемуся в фрейме framel, из фрейма frame2 с помощью, например, такого оператора. parent.framel.document.forms[0].textl.value |

ся ключевым словом parent, поскольку этот набор содержит все свои фреймы-потомки. Для доступа к фреймам вне текущего набора фреймов можно воспользоваться ключевым словом top, чтобы обратиться к набору фреймов высшего уровня. Из этого набора фреймов высшего уровня можно получить доступ к фреймам-потомкам. В приведенном ниже примере используются файлы s k e l e t o n . h t m l и js-skeleton.html,однако описанные действия применимы к любому файлу.

Для вложенных наборов фреймов здесь требуется небольшая хитрость. Для доступа к фреймам одного и того же набора фреймов можно воспользоватьПЕРЕКРЕСТНЫЕ ССЫЛКИ МЕЖДУ ФРЕЙМАМИ

<b«dy> <scr pt Iangu9ge-"jjuasci-ipt"> </Sc ipt> __

<"» I i ~ 1 </f.

Д Откройте с помощью Замечание. В данном программы Блокнот файл примере атрибут rows используется skeleton.html. в дескрипторе Замените <frameset>, чтобы дескрипторы <body> расположить один дескрипторами фрейм поверх другого. <frameset>, определяющими —Q Сохраните файл под страницу для набора именем crossref . html. фреймов из двух фреймов.

put type»"text"

•••tentl" ил1цр-11илчл(1ь«1

Q Откройте с помощью Q Сохраните файл под программы Блокнот файл именем topform.html. j s-skeleton . html. Добавьте форму с текстовым полем.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

..С

Что еще?

Новому открытому окну можно присвоить имя. Затем можно использовать это имя для доступа к свойствам и методам нового окна. Например, если вы открыли новое окно windowl, можете получить его заголовок с помощью оператора windowl. document . t i t l e . С другой стороны, фреймы содержатся в наборах фреймов. Поэтому для доступа к фреймам требуется использовать их родительские наборы фреймов. Это достига-

ется с помощью, например, такого предложения JavaScript. parent.framel.document.title Расположение фреймов рядом друг с другом или один над другим зависит от атрибутов rows и cols, включенных в дескриптор <frameset>. Первый фрейм всегда расположен в верхней строке, определяемой атрибутом rows, и в первом левом столбце, определяемом атрибутом cols.

eejg' Е 'JSB'J'ipH

ript">

Q Откройте с помощью -0 Присоедините программы Блокнот файл обработчик события f rames;et2 . html. onclick к кнопке и настройте его на -И Добавьте форму осуществление доступа с текстовым полем к тексту из верхнего и кнопкой. фрейма. -ГИ Сохраните файл под именем bottomform.html.

237

'"'r

Френма^\г.1п8»гв1 Uml |

Откройте в окне броузера файл crossref.html.

Введите некоторый текст в текстовое поле верхнего фрейма. Щелкните на кнопке в нижнем фрейме. 41 В текстовом поле нижнего фрейма появляется текст.

238

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ - -

••

i1.1.'

;-™МЯйщ,.

ВЫВОД ИНФОРМАЦИИ ФРЕЙМ

О сих пор во всех примерах, приведенных в этой книге, оператор document .write использовался для отображения текста в окне броузера. Этот текст появлялся в текущем окне документа, однако с помощью ссылок на фреймы текст можно вывести в другом окне. Например, если набор фреймов состоит из двух фреймов, framel и frame2, в программе для фрейма framel можно использовать выражение parent.frame2.document.write("привет") . Результатом выполнения этого оператора будет вывод слова привет во втором фрейме. Для вывода текста в текущем фрейме можно попрежнему воспользоваться выражением document .write.

В приведенном ниже примере используются файлы frameset2.html и I e f t 2 . h t m l , созданные в разделе "Обращение к фрейму по имени", однако описанные действия применимы к любому файлу.

Что еще?

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

ВЫВОД ИНФОРМАЦИИ В ОТДЕЛЬНЫЙ ФРЕЙМ Ч'»»я

Правке

Нот*

Пваёкв

<htwl> <М«4Э </k*dd> <Dody bgcoior-"i>range"> <П2>Старый мир</П2>

Гз 1

Старый мир

</scripf> </bodii> </htwl>

'**••

*1 П Откпойте с. ттомотп

программы Блокнот файл frameset2.html. Q Замените файл l e f t 2 .html файлом writeframe.html. Q Сохраните файл под именем write. html.

Это nposqiKs лварипноП системы оповещения. Это тапько проверка.

Откпойте

с помощью программы Блокнот файл Ieft2.html. —И Измените оператор document.write() таким образом, чтобы он ссылался на другой фрейм. -И Сохраните файл под именем writeframe.html.

СФ^С»Й1.П^М<

Откройте в окне броузера файл write.html.

В окне броузера появляются два фрейма, при этом оператор из левого фрейма отображает текст в правом фрейме.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

239

КОНТРОЛЬ ИЗМЕНЕНИЯ РАЗМЕРОВ ФРЕЙМА

бъекты frame отождествляются с обычны-Й-й- событиями, такими как onBlur и onFocus. Их можно также использовать с двумя уникальными событиями, характерными для окон, — onMove и onResize. Соответствующие обработчики событий следует размещать в дескрипторах <f rame> файла набора фреймов. При обращении к фреймам из файла набора фреймов следует использовать свойство self и имя фрейма, поскольку файл набора фреймов является родительским объектом. В приведенном ниже примере используется файл frameset2 .html, созданный в разделе "Обращение к фрейму по имени", однако описанные действия применимы к любому файлу.

Г" Что еще?

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

КОНТРОЛЬ ИЗМЕНЕНИЯ РАЗМЕРОВ ФРЕЙМА

3 1

ifft2.htnl ' паяе-''left"

Эн, хвапп юткагься!

Новый мир Цвет фона фрейма

П Откройте с помощью программы Блокнот файл frameset2.html. Присоедините обработчик события onResize к первому фрейму и настройте его на отображение некоторого текста в левом фрейме.

Сохраните файл под именем onresize.html.

Откройте в окне броузера файл onresize.html.

—И Измените размеры фреймов, перетаскивая строку, которая их разделяет. "• В левом фрейме появляется текст.

240

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

АДАНИЕ ЦЕЛЕВОГО ФРЕЙМА Ы лементы Web-страницы, включая формы 1 и гипертекстовые ссылки, могут содержать атрибут target. Он представляет собой имя фрейма в котором отображаются результаты обработки сервером данных формы. Для гипертекстовой ссылки target возвращает строку, указывающую имя окна, в котором будет отображаться содержимое выбранной гипертекстовой ссылки. С помощью JavaScript можно просмотреть значение атрибута target, используя свойство target. объекта frame. Кроме того, можно установить значение target динамически. В приведенном ниже примере используются файлы c r o s s r e f . h t m l и topform.html, созданные

в разделе "Перекрестные ссылки между фреймами", однако описанные действия применимы к любому файлу.

Что еще?

При работе с гипертекстовыми ссылками свойство target может быть использовано для просмотра или изменения URL гиперссылки. Это особенно полезно для создания навигационной панели в одном фрейме, атрибут target которого указывает на другой фрейм, в который загружаются страницы связей.

ЗАДАНИЕ ЦЕЛЕВОГО ФРЕЙМА Cht«i>

jj •..QfHOlum

</for*> <script l*nqit»«-"j*vascript"> EVll.DDciikriil.M-ltFi ЗТШРП1? для ППЯВЛШртИТ! Dcuiwnt .Fornl .target ) ;

V ; •

Оомий

' ritM»

|иачальный т a bottomr-

.. k Q Откройте с помощью программы Блокнот файл crossref .html. 0 Замените файл topform.html файлом targetframe.html. U Сохраните файл под именем target .html.

дескрипторами <scripts>. -И Добавьте в форму атрибут target. ~H Для отображения значения атрибута target добавьте оператор document .write ( ) .

Q Откройте с помощью программы Блокнот файл topform.html.

—И Переместите форму, расположив ее перед

именем targetframe.html.

—И Откройте в окне броузера файл target.html.

В окне броузера отображаются два фрейма и значение атрибута target. Замечание. Имя в атрибуте target указывает окно, в которое будет загружена Webстраница по ссылке из другого фрейма.

ГЛАВА 13. РАБОТА С ФРЕЙМАМИ

ВЫВОД ФРЕЙМОВ НА ПЕЧАТЬ

ще один полезный метод объекта f r a m e метод print ( ) . Он позволяет выводить на печать отдельные фреймы. Метод print ( ) открывает диалоговое окно печати для вашей системы. Чтобы фактически отправить страницу на принтер, щелкните на кнопке ОК диалогового окна печати. В приведенном ниже примере используются файлы c r o s s r e f . h t m l и bottomf orm. html, созданные в разделе "Перекрестные ссылки между фреймами", однако описанные действия применимы к любому файлу.

Что еще?

Для печати страницы, включающей все фреймы, можно воспользоваться следующим оператором. parent.print();

ВЫВОД ФРЕЙМОВ НА ПЕЧАТЬ

;

•&•

a-^s

ipl Idnqudgp-"jau4script">

ript>

я nane-"forpi2"> «put tjppe-"texr• 1UK--U» nput tupp-"b»tton" пляр.right.print(rv>t_

Тип

НРЬм«Ма.Ра.

</body>

Уш-

ivuC

-Ч

jjjl^ajj ™*~

)

th».

'apssiS»»""'' Ц Откройте с помощью программы Блокнот файл crossref.html.

0 Замените файл bottomf orm. html файлом print frame.html. Qj Сохраните файл под именем print .html. Д Откройте с помощью программы Блокнот файл bottomform.html.

16-1747

—И Измените надпись на кнопке. Присоедините обработчик события onclick к кнопке и настройте его на печать фрейма. —Я Сохраните файл под именем printframe.html.

0 Откройте в окне броузера файл print.html.

С| Щелкните на кнопке. • В окне броузера открывается диалоговое окно Печать (Print).

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗрВАНИЕ ОБЪЕКТА )ЛЬЗО NAVIGATOR

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

Объект navigator обладает многими свойствами и методами, необходимыми для определения типа системы пользователя. К свойствам объекта n a v i g a t o r относятся следующие свойства: appCodeName, appName, appVersion, p l a t f o r m и userAgent.

Например, некоторые возможности JavaScript отличаются для броузеров Microsoft Internet Explorer и Netscape Navigator.

Объект navigator содержит один метод j a v a E n a b l e d ( ) . Свойства объекта navigator рассматриваются в разделе "Определение типа броузера, с которым работает пользователь".

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

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА NAVIGATOR <htnl>

<sc ipt lanyuaqp-"jauascript"> Сиойпва объект NavtealDi Коаобое имя броузера (appCodeName). МоаПа Имя броузера (appName)- Microsoft Intemfi Explorer Версия броузера (appVerswn). 4 0 (compatible, MSIE 5,0; Wmdews 98; DigExt) Язык (language) ucdefined Платформа (platforro) Win32 Тип клиента (userAgent) Monua/4 0 f compatible, MSIE 5 0. Windows 93. DigExr}

oc wnt.wr tp "Нчч вродзера (аррнаме): " » nauigator.appNane * ос Hent.wr tf "Версия вроуэера (appuersion) : •' » naui at r.appue si п • "<tir/>"); oc •ent.iw IP "Ялик (language): " * navigator. language ' ocueent.wr tc "гиаттерма (platform): " * navigator. platforn * •чьг >••): ociiMnt.wr tp "1яп клиента <u&erngent ) : " • naoigator.uspi-Agent

"<Dr >'• :

</ er- pt> </Bo s> </ntnl>

Ц Откройте с помощью Q Сохраните файл программы Блокнот файл под именем js-skeleton.html. navigator.html. —И Для отображения свойств объекта navigator добавьте несколько операторов document.write().

-Q Откройте в окне броузера файл navigator.html.

• В окне броузера отображаются все свойства объекта navigator. Замечание. Internet Explorer версии 5 попрежнему возвращает в качестве номера версии значение 4.0, поскольку оно соответствует последней редакции основного Webпроцессора Microsoft.

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

Что еще?

Web-среда пользователя состоит из множества компонентов, таких как компьютер, операционная система, броузер и Web-страница. Каждый из этих компонентов можно в некоторой степени контролировать с помощью объектов JavaScript. Тип компьютера, операционной системы и броузера можно установить с помощью объекта navigator, a URL Web-страницы можно выяснить с помощью объекта loca-

разрешен i ян использование язь* a Java</b><br/>");

tion. Эти объекты рассматриваются в разделах "Использование объекта navigator" и "Использование объекта location". Некоторые свойства объекта navigator, например свойство language, предназначены только для чтения. Если бы свойство language не обладало атрибутом "только для чтения", язык сценариев можно было бы изменить в любой момент, что привело бы броузер в замешательство.

243

елшии! <огЛ р я т р р ш и н п jnl НСПОЛЫв

javaEnabledQ tnje

</scri jt>

Откройте в окне броузера файл navigator.html. —И Замените определение свойства с помощью метода navigator.

Д Сохраните файл под именем

3 Откройте в окне броузера файл

navigator2.html.

. В окне броузера отображается значение, возвращаемое методом объекта navigator.

244

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ ТИПА БРОУЗЕРА, С [КОТОРЫМ РАБОТАЕТ ПОЛЬЗОВАТЕЛЬ

ная тип броузера, с которым работает пользователь, можно изменить содержимое Web-страниц в соответствии со специфическим^ требованиями, предъявляемыми к их формату броузером. Например, большая часть синтаксиса Dynamic HTML отличается для различных типов броузеров. Объект navigator включает три свойства, которые возвращают в качестве значения тип броузера. Свойство appCodeName возвращает строку с кодовым именем броузера. Чаще всего это имя Mozilla, которое представляет собой стандартный кодовый базис. Свойство appName возвращает строку с фактическим именем броузера, таким как Microsoft Internet Explorer. Свойство appVersion

возвращает строку с информацией о версии или номер версии броузера, например такой, как 5 . 0 .

Что еще?

Два основных типа броузеров — это броузеры Internet Explorer от Microsoft и Navigator от Netscape, однако существуют и другие броузеры, например такие, как чисто текстовый броузер Lynx и настраиваемый броузер от AOL. Идентификационные имена этих других броузеров будут отличны от первых двух, однако кодовое имя, скорее всего, будет таким же.

ОПРЕДЕЛЕНИЕ ТИПА БРОУЗЕРА, С КОТОРЫМ РАБОТАЕТ ПОЛЬЗОВАТЕЛЬ ш

<htnl> Cltea» C/htad> <bodjt>

• CdHoewb

. Д: fiowttf

'4* Пои»

rrr

document. Mt-lteC'BH используете вроуэер Internet E x p l o r e r от Microsoft"}; else if (navigator. appHane.indexQf ("Netscape") •- -1) < document. write<"Bu используете броузер Coiwunlcator от

Netscape") ;|

</script> </bodj|> </ht»il>

1 Ц Откройте с помощью —И Включите в сценарий программы Блокнот файл оператор else i f , который в случае, если j s~skeleton.html.

слово Microsoft не

оператор if, чтобы проверить наличие слова Microsoft в строке значения, возвращаемого методом navigator.appName.

наличие в той же строке слова Netscape. Замечание. Если броузер не является продуктом Microsoft или Netscape, то JavaScript ничего не показывает. —Q Сохраните файл под именем appName . html.

—И Откройте в окне броузера файл appName.html.

• В окне броузера отображается установленный тип броузера.

245

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

ОПРЕДЕЛЕНИЕ ВЕРСИИ БРОУЗЕРА

азличные версии броузера одного типа поддерживают различные уровни HTML. Например, ранняя версия броузера Microsoft Internet Explorer 3.0 поддерживала только версию 3,2 HTML. Более поздние версии поддерживают более поздние спецификации HTML. Если вы используете некоторое средство более поздней версии HTML, которое броузер не поддерживает, результат может быть непредсказуемым. Чтобы избежать этой проблемы, вы можете проверить номер текущей версии броузера с помощью свойства navigator.appVersion.

В приведенном ниже примере используется файл j s ~ s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

Г Что еще?

Самыми ранними версиями броузеров, в которых использовался JavaScript, были броузеры Netscape версии 2.0 и Internet Explorer версии 3.0. Более ранние версии броузеров не были способны интерпретировать программы JavaScript.

ОПРЕДЕЛЕНИЕ ВЕРСИИ БРОУЗЕРА ] £<йл Ода<« В-я

<tltn >

</he d>

;

<bod > i

Иа*им«в

I *-.,"», ^ ' .

'..

vr;:-.'

Сйя»с Ствавгл

Остановив ОЛ«ввь

-и. . a

Пои»

Лвмзд

juap^jg' f Via J!c.**.-c"J.iagi 1Д w-ь^н^л плтг..сятвт|'.'<]оуя;.>1 h.nl|

(nauigator.appUersior.indexQf C'U.D") !* -1)

^ЭЙС*«(*

Ж^»ия

Печать ^j

з .

Правгл

f^fbpaHK : Счижс

Вы используете броузгр. совместимый с версией 4 0 |-|

e s* <

/script> </bodji> </htnl>

±1

Ц Откройте с помощью программы Блокнот файл js-skeleton. html. оператор i f , чтобы проверить определенный номер версии.

-И Включите в сценарий оператор else, который выполняется, если определенный номер версии не обнаружен (включая версии с более высоким номером). —Q Сохраните файл под именем appVersion.html.

-fl Откройте в окне броузера файл appVersion.html.

• В окне броузера отобраясается установленный номер версии вместе с сообщением.

246

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ ОПЕРАЦИОННОЙ СИСТЕМЫ, С КОТОРОЙ РАБОТАЕТ ПОЛЬЗОВАТЕЛЬ

ная операционную систему, с которой работает пользователь, можно понять, какой трп интерфейса будет для него наиболее удобным и привычным. Интерфейс операционной системы Macintosh отличается от Windows и UNIX. Установить тип операционной системы можно с помощью свойства platform объекта navigator. Оно возвращает строку с названием платформы, для которой был скомпилирован броузер. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

ЧТО еще?

JavaScript может идентифицировать наиболее распространенные операционные системы, такие как Win32, включающая компьютеры, которые работают под управлением Windows 95, Windows 98, Windows Me, Windows NT и Windows 2000; Macintosh, которая включает более старые системы, Power PC и более поздние версии; а также UNIX, которая включает популярные версии Linux.

ОПРЕДЕЛЕНИЕ ОПЕРАЦИОННОЙ СИСТЕМЫ, С КОТОРОЙ РАБОТАЕТ ПОЛЬЗОВАТЕЛЬ

ОЙнпамгь

Да*я>

Поиск ' Иайс-»чод

Жирная

П*чвтн

или старшей версии Windows docunent.wite("3TDT коильитер не работает поя управлением windows ли старнен версии windoNs.");

Ц Откройте с помощью программы Блокнот файл js-skeleton.html. и

-И Добавьте в сценарий оператор if, чтобы проверить определенный тип платформы и установить тип операционной системы.

1-Й Включите в сценарий оператор else, который выполняется, если тип платформы не совпадает с заданным. Сохраните файл под именем platform.html.

Откройте в окне броузера файл platform.html.

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

247

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

СВОЙСТВО USERAGENT

войство userAgent объекта navigator возвращает заголовок, пересылаемый в виде части HTTP-протокола от клиента к серверу д.1я идентификации типа клиента. Заголовок содержит ту же информацию, что и свойство appVersion, плюс информацию из свойства appCodeName. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

"ЦтО

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

СВОЙСТВО USERAGENT <МЯ]

'. "*": '".' "о1|Г "~1Г

^ HE

.-Ж.

^.' Ж

•IJetels'E^BT.pm.n.Vw.u -ur-cpummitijIuiAgMIMI

3,"- "

j f j j»f4»w« ' '«"•«" "

Bu нсполыут М]С,о.ой Internet Bxpbrcr «a KoMntiompt поя Windows 98 |

(nauigator.usei-Hgent.lndexOfc'ulndows 98") (- -1» < клмпьнтере пои Windows 98.");

else < no* winnows 98.");

(/scripts </bodu> </ht«l>

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html. •И Добавьте в сценарий оператор i f , чтобы проверить определенные ркпй.^тпя ГПРЯКТ ДЛГрЬ-

броузера.

-И Включите в сценарий оператор else, который выполняется, если заданные свойства не установлены. —•И Сохпаните Лайл под именем userAgent.html.

;й?«™«

—И Откройте в окне броузера файл userAgent.html.

!$м<А««**т£

•'

1 1 В окне броузера о тображается у становленный тип операционной системы и броузера.

" „-••

248

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОПРЕДЕЛЕНИЕ РАЗРЕШЕНИЯ НА ИШОЛЬЗОВАНИЕ ЯЗЫКА JAVA ava — это язык программирования, который позволяет разрабатывать программные приложения, работающие под управлением бро! узер0в в сети Web.

Что еще?

Броузеры включают опцию, которая разрешает или запрещает применять эту возможность. Если использовать Java запрещено, броузер не сможет выполнить приложения, написанные на Java. Объект navigator включает метод для определения того, разрешено ли броузеру использовать Java. Это метод j a v a E n a b l e d ( ) . Он возвращает одно из двух значений — true или f a l s e . В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

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

ОПРЕДЕЛЕНИЕ РАЗРЕШЕНИЯ НА ИСПОЛЬЗОВАНИЕ ЯЗЫКА JAVA £*Йп

0р*в*а

*. - .

&«

#9ф**«м - Сервис

•*

•'"$ w ScrtHMMTk

&^*eta

"'l ^J Обновить

^ _U Домой

-3 • » Пли«

i'J -As 'HMiMmn

•' 4 ^<У Ж.даяад

""V -../» ~peef»

-t T==» Печеч,

П Откройте с помощью —И Включите программы Блокнот файл в сценарий оператор j s-skeleton.html. else, который выполняется, если Добавьте в сценарий использование Java не оператор i f , чтобы разрешено. проверить, разрешено ли использование Java. —Q Сохраните файл под именем javaEnabled.html.

—И Откройте в окне броузера файл j avaEnabled.html.

1 Для зтего браузера нспйльзованне Java разрешено |_

*) Гокео

^МвР-омпы.» р

-i

1 1 Сценарий проверяет, разрешено ли использование Java, и отображает результат проверки в окне броузера.

249

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

ОПРЕДЕЛЕНИЕ КОДОВОГО ИМЕНИ

войство appCodeName возвращает строку GT кодовым именем броузера. Это значение представляет базовую функциональность броузера. Как броузеры Internet Explorer компании Microsoft, так и броузеры Navigator компании Netscape обладают одним и тем же кодовым именем — M o z i l l a . Это имя разработчика программы броузера. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

Что еще?

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

ОПРЕДЕЛЕНИЕ КОДОВОГО ИМЕНИ <htnl> <мрла> </head>

if (navigator.dppCodeN4nt.indexGF("Hozillj") r- -1} (

•' „**

Кодовое имя этсго броузер, - МсзД. [-

/script) fboOy>

Q Откройте с помощью программы Блокнот файл js-skeleton.html. —Я Добавьте в сценарий оператор i f , чтобы проверить кодовое имя.

—И Включите в сценарий оператор else, который выполняется, если заданное кодовое имя не обнаружено. —Н Сохраните файл под именем appCodeName.html.

—И Откройте в окне броузера файл appCodeName.html.

II Сценарий проверяет и отображает кодовое имя.

250

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА LOCATION

войства объекта location хранят все компоненты, составляющие URL. Эти свойства во Цногом аналогичны свойствам объекта link.

К свойствам объекта location относятся hash, host, hostname, h r e f , pathname, port, protocol и search. Все они возвращают информацию о текущем URL. Первая часть URL содержит информацию о протоколе. Свойство protocol возвращает в качестве значения строку с первой частью URL, которая указывает метод доступа, такого как HTTP (Hypertext Transfer Protocol) или FTP (File Transfer Protocol). Свойство hostname возвращает в качестве значения строку с именем домена или IP-адресом URL, а свойство port — с именем порта, если оно включено в URL. Свойство host возвращает в качестве значения информацию

о той части URL, которая идентифицирует Webузел. Эта строка скомбинирована из свойств hostname и port. Свойство pathname возвращает часть URL, содержащую путь. В конце строки URL расположена дополнительная и поисковая информация. Свойство hash определяет имена элементов привязки (анкеров), включенных в URL. Эта порция информации обозначается символом номера (#). Свойство search возвращает в качестве значения любые данные запроса, передаваемого серверу. Эта последняя часть информации URL предваряется знаком вопроса (?). Объект 1 о с a t i on также включает метод г е 1 о ad ( ) , предназначенный для перезагрузки текущего URL. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ОБЪЕКТА LOCATION

</he*< <body> c r i p t languag?'"jauascrlpt"> do г и nen docunen

docuften docunen docunen docunen

и ..1 •н 1

e "hostname: " *

ion. host » "<br/>"); ocation.hostnaiM + "<br/>">;

r "pathnane: " > t "port: " * loca e "protocol: " * f "ьеагйИ: " • lo

ocation.pathnaM » "<br/>"); Ion-port * "<br/>"); ocation. protocol * "<br/>"); «tion. search * "<br/>"J;

Ц Откройте с помощью Сохраните файл под программы Блокнот файл именем location.html. js-skeleton.html. —И Добавьте в сценарий несколько операторов d o c u m e n t . w r i t e ( ) для отображения свойств объекта location.

Свойства объекта Lorabon hash' hostname pathname. /Е\13В\Примери\Глдва 14 - Web-среда п port prctoco! file. search

-Н Откройте в окне броузера файл location.html.

В окне броузера отображаются свойства объекта location.

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

Г~

Попробуй!

С помощью объекта location URL можно разделить на основные компоненты. Это позволяет при необходимости манипулировать URL. Функция, разделяющая URL, может, к примеру, выглядеть следующим образом. function decomposeURLO { address = location. href ; prot = location. protocol ; domain = location. hostname; prt = location. port; path = location. pathname; anchor = location. hash; search = location. search; document .write ( "Текущий URL: " + prot + domain + prt + path + anchor + search) ; Эта функция разделяет URL на отдельные составляющие. При необходимости каждый компонент можно заменить.

Hi-lnlxl

if *•" '"; "•*:•:" э"Т'"!:т 5" ": ' a '

ipt language-"jauascript"> "button" nane-"button1" иа1ие-"перезагрзэи< nput type-"buttp

':-'-~

•:•:•.'.".:

: Cktaww^ta

0&чм*оъ.

Ясмой

Поиск

: :йЧ»СЙ"' Е '.SBTrcwiepDiSr/weaU WeEtrena по/ыова1е J'Ju-.-^ErC ьн 1

|[. . . . nep«Sp«»"'>CTI>0»»«

;

a ' ' ' 3 " . "£

Иайя*ис*

Жриля

Пвчагв

»J

a:".

Прямл

р'Лягилй • Ссвнк^

iik.-u^tTSTm?

iSfSS" '

Ц Откройте с помощью —И Присоедините программы Блокнот файл к кнопке обработчик событий onclick js-skeleton.html. и отождествите его -Я Добавьте в сценарий с методом reload ( ) . форму с кнопкой. -0 Сохраните файл под именем Iocation2.html.

броузера файл Iocation2.html.

• Страница перезагружается.

252

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ИСПОЛЬЗОВАНИЕ ФАЙЛОВ COOKIE ookie — это простая форма хранения данНых, которая помогает поддерживать информацию о статусе клиента. Cookie записыва!ются на компьютер пользователя и индексируются создавшим их узлом. Когда пользователь впоследствии вновь обращается к этому узлу, данные выбираются и используются. Cookie, в частности, используются для хранения информации о пользовательских настройках. Сохранение пользовательских настроек в файлах cookie позволяет броузеру зачитывать их, отсылать серверу при новом посещении и отображать Web-страницу в соответствии с пользовательскими предпочтениями.

Для записи cookie с помощью JavaScript используется объект document. cookie. Данные cookie можно автоматически записать на пользовательский компьютер, присвоив их в качестве значения объекту document. cookie. Каждая порция данных, хранимых в cookie, предваряется именем и знаком равенства, так что впоследствии ее можно идентифицировать и выбрать. В приведенном ниже примере используется файл js-skeleton.ij.tml, однако описанные действия применимы к любому файлу.

ИСПОЛЬЗОВАНИЕ ФАЙЛОВ COOKIE в а Пик* DVMHB <htnl> <head> </head> <body junl oad-"nakeCookie(r>| funct ion Mkecooiiieo <

.' '•

• : ••

. •••:•• • •

••1

I а*и> • prnupt ("Введите, пожалуйста. Наше > MK-J; . ncunent. cookie - "Haw" * Haw * "," :

. d o c u w n t . cookie. substrinqtHewSlai-t • 1. NappEnd) * " < b r / > " ) l

> </bodji> </htnl>

•--- '

Ц Откройте с помощью программы Блокнот файл j s-skeleton.html. Добавьте в дескрипторы <script> функцию. —И В функциональные скобки добавьте оператор i f , чтобы проверить наличие в системе cookie.

-0 Также в тело функции добавьте оператор JavaScript, который создает диалоговое окно приглашения для ввода и присваивает значение объекту document.cookie.

-И Создайте две -И В дескриптор переменные, чтобы <body> добавьте зафиксировать начальную обработчик события и конечную позиции onload и отождествите значения cookie. его с функцией. в броузер cookie добавьте именем cookie.html. оператор JavaScript.

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

еще?

Чтобы запретить хранение cookies на компьютере, можно воспользоваться специальными параметрами броузера. В случае броузера Internet Explorer можно заблокировать применение cookies, выбрав команду Сервис^Свойства обозревателя (ТоolsOlnternet Options). При этом открывается диалоговое окно Свойства обозревателя (Internet Options). Затем следует выбрать вкладку Безопасность (Security) и щелкнуть на кнопке Другой... (Custom Level). После этого нуж-

но выбрать переключатель Разрешить (Disable) в разделе Файлы "cookies" (Cookies) (при этом О изменяется на ®). В состав cookie можно включить любую строку, однако каждый компонент cookie должен иметь имя и значение. Файл cookie ограничен размером 4 Кбайт. Если строка, сохраняемая в качестве cookie, имеет большую длину, часть ее данных будет потеряна.

Ц»Ф*™<*

Обнмявъ

-И Откройте в окне броузера файл cookie.html. Ш Появляется диалоговое окно.

Сервис

Иомэй

Введите текст в текстовое поле. -Щ Щелкните на кнопке ОК.

•Ш В окне броузера выводится имя.

253

254

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

i i

КОДИРОВАНИЕ СИМВОЛОВ

р|и передаче на сервер некоторые символы, •дакие как пробелы, воспринимаются сервером неоднозначно. Это может привести к неверной обработке данных. JavaScript включает два оператора, которые можно использовать для кодирования символов перед их отправкой серверу. После того как символы приняты сервером, их можно декодировать для получения данных. Этот процесс кодирования и декодирования обеспечивает целостность данных. Для кодирования символов служит оператор escape ( ) . Он получает в качестве аргумента одну строку, которая представляет собой текст, подлежащий кодированию.

Текст кодируется за счет последовательного преобразования каждого символа в знак процента (%), за которым следует двузначный ASCII-код этого символа. Например, для представления пробела используется ASCII-код со значением 20, а символ "амперсант" (&) представляется в кодировке ASCII значением 26, поэтому оператор e s c a p e ( " & " ) выдает значение кода " %26%20". Текст, полученный в кодированной форме, может быть декодирован с помощью оператора unescape(). В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

КОДИРОВАНИЕ СИМВОЛОВ

<ntnl>

<t>ody> <script l£nquaqp="jauascri£t"> lsb-1 - "18ги он дор» исмотком по пальцу .

.. С.,,,,.. Ml',-. I.."; I

Ц Откройте с помощью -И Для отображения программы Блокнот файл строкового значения (i и после кодирования js- skeleton. html. добавьте операторы -0 Присвойте document .write ( ) . переменной строковое именем escape.html.

-И Откройте в окне броузера файл escape.html.

В окне броузера появляются строка и ее закодированный эквивалент.

255

ГЛАВА 14. ОПРЕДЕЛЕНИЕ СВОЙСТВ WEB-СРЕДЫ ПОЛЬЗОВАТЕЛЯ

С Что еще?

Если имя файла Web-страницы включает пробелы, это не позволит серверу правильно установить имя Web-страницы в гиперссылке. Если же закодировать URL с помощью оператора escape ( } , это предоставит возможность использовать имена с пробелами. Операторы escape (} и unesсаре ( ) не принадлежат какомулибо объекту; это методы, встроенные в JavaScript. Для пра-

вильной работы им не требуется родительский объект. Операторы escape ( ) и unescaре ( ) можно применять к отдельным символам, строке текста или даже к целому абзацу. Поскольку тип кодирования, используемый оператором escape ( ) , основан на наборе символов ASCII, он не может применяться к символам, представленным в коде Unicode.

<htnl>

;!; j -:••-...-, f , ..;;-,

" ...;

OCrtnoeicit

; jj • Домой' 3 ' Обновить

! !eU*C j«! E -vJSB^pHMepbiTTae^ U

П men

IWpetwOe

Ждон*"

W5b.cp*fl3 ro^S^^^WW

fteime

. flpww

_-j ^fl^ww • Cewr>«< **

s^ssss^^s^* •

Uocuw?nt.nrite(str1 . "<br/>");

IScun-nt.i^HmiheSciptlsMm

uCW 3F%uM 30%uC43B%u044C%u0446%«044 3%2C6/e20V«uC ^3EW«W3D«20Wu0441««043AW«M30% uCM 37%u04 30%uCM 3B%20@%23%21%25%5P/ ^ ^ S ^ ^ S S ^ ^ ^ ^ S ^ S 026*

;icjiV««

Ц Откройте с помощью -И Для отображения программы Блокнот файл строкового значения после декодирования escape.html. добавьте оператор ~Н Присвойте document .write ( ) . переменной ля к п тт стпгтя ннпр

строковое значение.

—•И Сохпяните (Ъяйл пол

именем unescape. html.

броузера файл unescape.html.

J :

.'^JW™-.,TM>^№

появляются закодированная строка и ее декодированный эквивалент.

256

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОБНАРУЖЕНИЕ ОШИБОК

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

ки зрения синтаксиса программа не выполняет предусмотренных функций либо выполняет их неверно. Примером подобной ошибки является использование неверного равенства. Синтаксические ошибки обнаружить проще, поскольку броузер сообщает об их появлении. Ошибки выполнения обнаруживаются сложнее, однако и их можно найти с помощью специальных методов отладки. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ОБНАРУЖЕНИЕ ОШИБОК В JAVASCRIPT 3

<П П1> <h ad>

</ t»a> <e as> script lenguaqe.'-jauasci-ipf)

</fe«dj| </htnl

pt>

' !-.-• • -•

Остановите Обновмъ

-з т a "

Дшлой

;

Лоно,

_^J ^-й 1«-<ов

; ^S . : Ждан»"

i^jjj ' Пила

LJ Печете :

именем error . html.

*j (V-П-лэдя -Ссы»** '

.с o-.K^-ll

—И P.nvn, ттитр гЬяйтт ттптт

"щ J

Ц Откройте с помощью В Чтобы вызвать программы Блокнот файл синтаксическую ошибку, напишите одно из j s-skeleton . html. ключевых слов document Н В дескрипторы с ошибкой. <script> добавьте пару document.write() .

j -:iiU)et;i*1 E vl^e'^Di^^iVJ^rnjealS -Отлвака :иеи»ри« , s.a-.i-uj'.B'nr -irrJJI

ПТТРПЯТПППТ*

Г •'*"•" -" :'1Г а

•;

|^В>^(В»«иР.*й^шиа11<1Й.И«ст[иМ*1«.|

броузера файл error.html.

•{.'.:'.:•

'3( Woet^HrfcjCFnp

..^

в окно броузера, однако в строке состояния выводится сообщение об ошибке. Замечание. Диалоговое окно ошибок содержит флажок Всегда выводить это сообщение, если страница содержит ошибки ("Always Display This Message When a Page Contains Errors). Если установить этот флажок заранее, окно ошибок будет появляться автоматически.

ГЛАВА 15. ОТЛАДКА СЦЕНАРИЕВ JAVASCRIPT

Что еще?

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

257

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

зшиияиааа j* з . "j

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

Щ ГЬкаддгвпзювФв'СТ.еЬ'!

Аи*к fJflL) (fc^/t \;5В\Лр«мвГ*.'-Гя»а IS - О

-И Дважды щелкните мышью на предупреждающей пиктограмме в строке состояния. "И Появляется диалоговое окно сообщений об ошибках JavaScript.

17-1747

Щелкните на кнопке Показать Подробности (после щелчка надпись на кнопке изменяется на Скрыть Подробности (Hide Details)).

В диалоговом окне отображается подробная информация об ошибке.

258

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ОТЛАДКА С ПОМОЩЬЮ КОММЕНТАРИЕВ дна из первых задач отладки сценария со(стоит в том, чтобы установить, что работает, а что нет. Если правильно идентифицировать предложение, которое вызывает ошибку, можно приступить к ее исправлению.

двойного слэша (//). Знаки комментария можно поместить и в средине строки, тогда оставшаяся часть строки будет трактоваться, как комментарий. Действие знака двойного слэша (/ /) распространяется только на строку, в которой он расположен.

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

Чтобы закомментировать сразу несколько строк, можно воспользоваться знаками начала (/*) и окончания (*/) комментария. Они распространяются на любое количество строк, размещенных между ними. В приведенном ниже примере используется файл js-skeleton.html, однако описанные действия применимы к любому файлу.

Комментарий можно добавить в виде отдельной строки сценария, поместив в самом ее начале знак ОТЛАДКА С ПОМОЩЬЮ КОММЕНТАРИЕВ <Рллп

Гдаы

П«*!и

Справка

;hi«>

<he»d> </h*Jd> <bod1i>

•

lisaJSLi:

</tio y> •:/ht il>

• i Ц Откройте с помощью -Щ Чтобы вызвать программы Блокнот файл синтаксическую ошибку, напишите одно из j s-skele'ton . html. ключевых слов document -И В дескрипторы с ошибкой. <script> добавьте пару -Н Закомментируйте операторов document . w r i t e ( } . предложение с ошибкой. -И Сохраните файл под именем comment. html.

L-И Откройте в окне броузера файл comment.html.

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

259

ГЛАВА 15. ОТЛАДКА СЦЕНАРИЕВ JAVASCRIPT

.,.

Что еще?

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

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

П»*ж

Изйр*»юе

XSPHW

;

Печать

Прав**

Е 'ч!5Э\Пр1*«рь'У"|«*л 15-OnaflKfle

•ript langudge-"jл

gfffipr /body> </htnl>

Ц Откройте с помощью —И Закомментируйте программы Блокнот файл операторы j s-skeleton.html. document.write() с помощью знаков -И Добавьте в сценарий многострочного еще один оператор комментария. document.write(). —Q Сохраните файл под именем comment2 .html.

-И Откройте в окне броузера файл comment2.html.

I Страница

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

260

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

ВЫВОД ЗНАЧЕНИИ В ТЕКСТОВЫХ ПОЛЯХ

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

Кроме того, к различным элементам страницы можно присоединить обработчики событий, которые при срабатывании выводят значения в текстовые поля. Это позволяет осуществлять интерактивный контроль переменных при выполнении сценария. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

ВЫВОД ЗНАЧЕНИЙ В ТЕКСТОВЫХ ПОЛЯХ

<htnl> :iwad> f/he^a> boilj|> <script :

Зсгагиехп, Обномг»

. Домсй

Поиск

Избмини

Жя*«л

ГЦчда,

Пгш«,«

•i i и.

<lnp»t tjipe-'te: <inpu( tiipp-"bu1 ick-'-eounU) V>

i*« 'tejitv ualup-'Bpei

I Ц Откройте с помощью -Q В дескриптор программы Блокнот файл <script> добавьте js-skeleton. html. переменную и функцию для подсчета количества Добавьте в сценарий щелчков на кнопке форму с временным и отображения этого текстовым полем количества во временном и кнопкой. текстовом поле. —И Сохраните файл под именем output. html.

Откройте в окне броузера файл output.html. НИ В окно броузера загружается кнопка с временным текстовым полем и кнопкой.

Щелкните на кнопке.

ГЛАВА 15. ОТЛАДКА СЦЕНАРИЕВ JAVASCRIPT

Г~

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

Попробуй!

meters = document.forml.textl.value; millimeters = meters*1000; window.alert("метры, преобразованные в миллиметры = " + millimeters);

После проверки работоспособности сценария можно удалить единственный оператор window, alert.

I-. £*ta

;lw* биа Цтвоапюе Сервис

ГV .

-»

£прмм

. ""э . "13

]~^'"M~jt

ёдрвс}г?- Е М;в'Гри"еры\Гпвва IS Oinaofe cue.**JHeeJavaScfieKoulputMml

'"'lii'

;"п^ J^j

(*Явр««й . ; СсЫЯш **

isr^^ojTi — ('-•it-! M" !4С'ПЧ>••"-•"

_ 5Тг«вЛ«Г' ""-"

В текстовом поле выводится значение переменной count.

— ' — гг^"~"""

__ мм*л»ёр"

Q Продолжайте щелкать на кнопке.

__^J '

.••'v.i

-• После каждого щелчка текстовое поле обновляется.

262

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

НАИБОЛЕЕ РАСПРОСТРАНЕННЫЕ ОШИБКИ ljA\/ASCRIPT

ценарии на JavaScript могут содержать сайые разнообразные ошибки, однако одни ошибки встречаются чаще других. Одна из распространенных ошибок в операторе i f заключается в использовании оператора присваивания (=) вместо оператора равенства (==). Оператор if всегда должен содержать два знака равенства. Зачастую ошибки связаны с пропущенными фигурными скобками, кавычками и круглыми скобками. Следует быть особенно внимательным при размещении одинарных кавычек (') внутри двойных кавычек ("). Имена свойств объектов и мето-

дов зависят от используемого регистра клавиатуры, поэтому свойство, например такое, как bgColor, не будет работать, если вы забыли использовать в его имени прописную букву С. Еще одна распространенная ошибка состоит в использовании свойств, методов и событий, не связанных с определенным объектом. Например, если вы пытаетесь применить событие onclick к объекту form, броузер обнаружит ошибку. В приведенном ниже примере используется файл j s - s k e l e t o n . h t m l , однако описанные действия применимы к любому файлу.

НАИБОЛЕЕ РАСПРОСТРАНЕННЫЕ ОШИБКИ JAVASCRIPT •П •

|Щ

;•--..-.; 1

In-v-a. i'V

rvtiWMsn,

:^J^^U»efe*feF:

BCiHueitb

Домпй

(гж-

И!вр«ч««

Ж1л»«)1

тшткжя

•

Б|

j идо»- 1*0 E ЧБВЧПрмлервЛГп!вл 15- Отладка tuetJ^nsB JjvaSaJ\«fw2 hlml I

Этот сценарий содержи ошибки.

_1Л внячок прадГР*«е««, этнЗ(мивекшй в (троке мегоме*.

'. | . . . QK

| £крьт,3<жроАнс>ст<

оийсп* 1 'Л

•„:•«,., г ..v,,;..,. i •!У Ошнйи пи ст[днцив

Д Откройте с помощью -Щ Включите "по программы Блокнот файл ошибке" в оператор i f js-skeleton.html. только один знак равенства. -И Добавьте в сценарий оператор —И Сохраните файл под document.write(}. именем error2 .html. —И Для проверки и отображения типа броузера добавьте в сценарий оператор i f .

броузера файл error2.html.

" •"' "

;' Щн»

появляется диалоговое окно с сообщением об ошибке.

ГЛАВА 15. ОТЛАДКА СЦЕНАРИЕВ JAVASCRIPT

Г Что еще?

Некоторые текстовые редакторы, например такие, как Allaire HomeSite и Macromedia Dreamweaver, могут контролировать некоторые распространенные ошибки наподобие пропущенных фигурных скобок. Эти редакторы отслеживают каждую введенную кавычку или фигурную скобку, и, если закрывающая кавычка или скобка пропущена, текст при вводе выделяется красным цветом. Можно также выбрать одну из скобок

263

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

iript l*nguagi*-''jav.i^i;ript"> document.write("e.. используете Hierosof t Inict-npt Exptl </script> </body> </htnl>

Д*ННГ1С1Р**<Ц1СЛвЧ»!ИТО||**«И I

ona.-4v5oe*«Tc4ta

::"" Q Откройте с помощью -И Добавьте "по ошибке" программы Блокнот файл одну фигурную скобку в конец оператора i f . error2.html. -И Исправьте оператор i f , добавив в него еще один знак равенства.

•fljj Сохраните файл под именем error3 .html.

-ГП Откройте в окне броузера файл еггогЗ.html.

• В окне броузера появляется диалоговое окно с сообщением об ошибке.

264

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

Предлагаемыйсправочник :по HTML 4.01 основан на'спецификации, опубликованной на Webузле |wvjw.w3с . org. Этот справочник не включает

элементов, признанных устаревшими, равно как и элементов, изъятых из употребления. Также в нем нет определений фреймов.

ОБЩИЕ АТРИБУТЫ

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

Описание

Допустимые значения

Атрибуты ядра

id class style

Элемент идентификатора Определяет класс листа стиля Определяет листы встроенных стилей

title

Задает заголовок элемента

lang

Указывает базовый язык сценариев

dir

Определяет направление текста

Атрибуты языка

Атрибуты событий onclick

Щелчок мышью на элементе

ondblclick

onmousedown

Двойной щелчок мышью на элементе Нажатие кнопки мыши

onmouseup

Освобождение кнопки мыши

orimouseover

Размещение указателя мыши на элементе

onmousemove onmouseout

Перемещение указателя

onkeypress

Нажатие клавиши на клавиатуре

onkeydown

Удержание клавиши на клавиатуре

onkeyup

Освобождение клавиши на клавиатуре

Перемещение указателя с элемента

I t r и rtl

ПРИЛОЖЕНИЕ. СПРАВОЧНИК ПО HTML 4.01

265

ЭЛЕМЕНТЫ СТРУКТУРЫ ДОКУМЕНТА Приведенные ниже элементы составляют основные разделы Web-страницы, включая корневые дескрипторы <html>, ее заголовок и тело. Атрибут

Описание <HTML> . . . </HTML> (поддерживает общие атрибуты языка)

version

Задает DTD (Document Type Definition — определение типа документа) <HEAD> .. . </HEAD> (поддерживает общие атрибуты языка)

profile

Указывает на отдельный файл метаданных <BODY> . . . </BODY> (поддерживает общие атрибуты ядра, языка и событий)

onload

Документ загружен

onunload

Документ выгружен

ЭЛЕМЕНТЫ ЗАГОЛОВКА ДОКУМЕНТА Следующие дескрипторы могут быть включены в раздел заголовка Web-страницы. В разделе заголовка они могут повторяться неоднократно. Допустимые значения

Описание

Атрибут <TITLE> .

</TITLE> (поддерживает общие атрибуты языка)

<BASE/> Адрес базы (полный URL текущего документа)

href

<МЕТА/> (поддерживает общие атрибуты языка) http-equiv

Определяет свойство элемента

name

Имя метаинформации

content

Указывает значение свойства

scheme

Схема интерпретации метаданных <LINK/> (поддерживает общие атрибуты ядра, языка и событий)

charset

Набор символов броузера

href

Указывает URL другого документа

hreflang

Язык связанного документа

type

Тип и параметры связанного листа стилей

rel

Взаимосвязь между каким-либо документом HTML и текущим документом

rev

Взаимосвязь между текущим документом и его создателем

media

Задает тип среды '

266

JAVASCRIPT: НАГЛЯДНЫЙ КУРС СОЗДАНИЯ ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

: ЭЛЕМЕНТЫ ЗАГОЛОВКА ДОКУМЕНТА (ОКОНЧАНИЕ) трибут

Описание

Допустимые значения

<SCRIPT> . . . </SCRIPT> charset

Набор символов броузера

type

Тип языка сценариев

src

Адрес внешнего файла сценария

defer

Разрешает отложенное выполнение сценария

defer

<NOSCRIPT> . . . </NOSCRIPT> (поддерживает общие атрибуты ядра, языка и событий) <STYLE> . . . </STYLE> (поддерживает общие атрибуты языка) type

Тип языка листов стилей

media

Задает тип среды

title

Заголовок стиля <OBJECT> . . . </OBJECT> (поддерживает общие атрибуты ядра, языка и событий)

declare

Флаг объявления

classid

Определяет идентификатор класса

codebase

Адрес объекта

data

Данные, передаваемые объекту

type

Тип Internet Media Type для данных

codetype

Тип Internet Media Type кода