Что такое HTTP 18 страница

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

ПРИМЕЧАНИЕ

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

Объект String

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

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

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

Strlen = mystring.length

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

mystring - mystring.toUpperCase()

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

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

Метод	Назначение	Пример
anchor	Создает целевой якорь	mystring. апсhor(имя_секции)
big	Выводит строку как большой текст	mystring. big()
blink	Выводит строку как моргающий текст	mystring. blink()
bold	Выводит строку жирным шрифтом	mystring. bold()
charAt	Выбор отдельного символа	mystring. charAt(2)
fixed	Выводит строку шрифтом телетайпа	mystring. fixed()
fontcolor	Задает цвет шрифта	mystring. fontcolor("red")
fontsize	Задает новый размер шрифта	mystring. fontsize(2)
indexOf	Находит номер буквы в строке	mystring. indexOf("w")
italics	Выводит строку курсивом	mystring. italics
lastlndexOf	Находит номер последнего вхождения символа	mystring. Iastlndex0f("w")
link	Делает из строки ссылку	mystring. link()
small	Выводит строку как уменьшенный текст	mystring. small()
strike	Эффект зачеркнутого текста	mystring.strike()
sub	Выводит текст шрифтом нижнего индекса	mystring.sub()
substring	Выбирает часть строки	mystring.substring(0,7)
sup	Выводит текст шрифтом верхнего индекса	mystring.sup()
toLowerCase	Выводит всю строку строчными буквами	mystring,toLowerCase()
toUpperCase	Выводит всю строку заглавными буквами	mystring.toUpperCase()

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

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

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

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

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

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

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

Подумайте.

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

Как дела?
012345678

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

Объект Math

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

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

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

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

Свойство	Значение
PI	Число п (примерно 3,1416)
Е	Число в, число Эйлера (примерно 2, 718)
LN2	Натуральный логарифм 2 (примерно 0,693)
LN10	Натуральный логарифм 10 (примерно 2,302)
LOG10E	Десятичный логарифм е (примерно 0,434)
SQRT1_2	Корень квадратный от 1/2 (примерно 0,707)
SQRT2	Корень квадратный от 2 (примерно 1,414)

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

Math.asin(0.239);

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

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

Метод	Результат	Синтаксис
abs	Модуль числа	Math.abs (число)
acos	Arccos	Math.acos (число)
asin	Arcsin	Math.asin (число)
atan	Arctg	Math.atan (число)
cos	Cos	Маth.соs (число)
sin	Sin	Маth.sin (чиспо_радиан)
tan	Tg	Маth.tan (число_радиан)
ceil	Ближайшее целое «сверху»	Math.ceil (число)
floor	Ближайшее целое «снизу»	Math.floor (число)
exp	Экспонента (е в степени числа)	Маth.ехр (число)
log	Ln	Маth.log (число)
pow	Основание показательной функции	Math.pow (число)
max	Наибольшее из двух чисел	Маth.тах (число)
min	Наименьшее из двух чисел	Math.min (число)
round	Округление до ближайшего целого	Math.round (число)
sqrt	Корень квадратный	Math.sqrt (число)

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

Объект Date

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

todayDate = new Date():

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

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

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

Thu Aug 22 19:09:02 CST 2002

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

<script type="text/javascript">

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

Результат:

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

Резюме

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

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

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

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

Глава 18. JavaScript и пользовательский ввод

• События Java Script
• Типы обработчиков ошибок
• Указатель this
• Объектная модель документа
• Область действия и указатели
• Работа с объектами верхних уровней
• Java Script и формы HTML
• Объекты form
• Обработка ошибок на форме с помощью Java Script
• Java Script на клиентской машине
• Переадресация, фреймы и Java Script
• Переадресация браузера
• Как написать меню ссылок на Java Script
• Java Script и фреймы
• Резюме

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

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

Наконец, мы рассмотрим некоторые интересные методы автоматизации работы с сайтом, реализуемые на JavaScript. Среди них автоматическая переадресация, загрузка страниц и работа с фреймами под управлением скриптов.

В этой главе вы найдете следующие разделы:

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

События JavaScript

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

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

Выгрузка страницы — это, разумеется, тоже событие.

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

В общем случае формат следующий:

<element обработчик="код JavaScript или вызов функции">
</element>

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

Элементы <form> имеют множество обработчиков событий.

Мы рассмотрим пример, который позволяет по нажатию кнопки подтверждать не форму целиком, а только данные, передаваемые в функцию JavaScript:

<Н1>ОбраОотка введенных данных</H1>
<form>
Введите число: <input type="text" name=
"userEntry" size="4" /> <br />
Результат обработки: <input <type="text" name=
"result" size="5" /> <br />
<input type="button" уа!ие="Счет" onclick=
"result.value = compute(userEntry)" />
</form>

Что делает этот отрывок кода? Просит пользователя ввести число в поле, расположенное в начале формы. После этого ему нужно нажать кнопку «Счет». При этом будет запущен обработчик события onclick. В нем происходит вызов некоторой функции под названием compute. Ей передается указатель на значение, каковым является объект <input> по имени userEntry. Из него функция извлечет данные, обработает их и возвратит результат, присвоив его переменной result. Эта переменная выводится в текстовом поле на форме. Именно для этого второе текстовое поле имеет то же значение атрибута name, что и переменная, хранящая нужную информацию. В браузере при загрузке такой страницы вы увидите то, что представлено на рис. 18.1. (Обратите внимание на то, что сама функция в примере не показана, но все, что она делает, — это добавляет к исходному значению число 100.)

Рис. 18.1. Используя обработчики ошибок и элементы формы, JavaScript может возвращать значения, не заботясь о CGI-скриптах

Типы обработчиков ошибок

События, относящиеся в значительной степени к формам, представляющие собой атрибуты скриптов, у которых в то же время отсутствуют формальные требования элемента <script>, называются внутренними. Тем не менее они могут работать не только с элементами <form>. Некоторые события бывают связаны с какими-то определенными элементами HTML, а другие — с целым рядом элементов. И те и другие представлены в табл. 18.1.

Таблица 18.1. Обработчики событий

Обработчик	Событие
onfocus	Заполнение (получение фокуса) элемента формы (ввод данных, нажатие при помощи клавиатуры или мыши). Элементы <input>, <select>, <textarea> и <button>, а также некоторые другие: <а>, <label>
onblur	«Выход» из элементов (потеря фокуса), перечисленных в предыдущем описании событий, с помощью мыши или клавиатуры
onclick	Пользователь щелкает на элементе
ondbclick	Двойной щелчок
onchange	Изменение значения и выход из элемента формы (только для <input>, <select> и <textarea>)
onkeypressed	Нажатие клавиши, когда элемент в фокусе (то есть выбран)
onkeydown	Удерживание клавиши, когда элемент в фокусе
onkeyup	Отпускание клавиши, когда элемент в фокусе
onload	Загрузка страницы (используется только с <body> и <frameset>)
onunload	Выгрузка страницы (используется только с <body> и <frameset>)
onmouseover	Наведение указателя мыши на элемент
onmousedown	Нажатие кнопки мыши, когда ее указатель находится на элементе
onmouseup	Отпускание кнопки мыши, когда ее указатель находится на элементе
onmousemove	Перемещение мыши, когда ее указатель находится на элементе
onmouseout	Перемещение мыши, связанное с уходом с элемента
onselect	Выбор поля <input> или <textarea>
onreset	Очистка формы (используется только с элементом <form>)
onsubmit	Подтверждение формы (используется только с элементом <form>)

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

<body onunload="alert('Спасибо за визит! Приходите еще!')">

В этом примере показано, что в JavaScript можно использовать как одинарные, так и двойные кавычки. Думаю, понятно, почему и зачем. Если в приведенном примере везде использовать одинаковые кавычки, то "al ert" закроется слишком быстро.

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

СОВЕТ

Если хотите, чтобы в окне сообщений было больше одной строки, используйте спецсимвол перевода каретки (\n).

Помимо встроенных функций типа alert() можно, разумеется, вызывать и собственные:

<input type="text" name="phoneNumber"
onchange="checkPhone (this.value)" />

В этом примере вызывается функция checkPhone(), ей передается значение, хранящееся в поле ввода <input>.c именем phoneNumber. Как именно передается? Вопрос хороший, поскольку на самом деле передается не само значение, а указатель на него. Причем не простой, а служебный указатель this, речь о котором пойдет далее.

Указатель this

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

<form name="myForm">
<input type="text" name="phoneNumber"
onchange="checkPhone (this.value)" />
</form>

Здесь буквально говорится с помощью this: «Этот элемент ввода (input)», value является свойством, хранящим значение, ассоциированное с данным i nput, то есть то, что ввел пользователь. Можно получить доступ к этому значению (с целью его передачи) и по-другому:

<form name="myForm">
<input type="text" name="phoneNumber"
onchange="checkPhone
(document.myForm.phoneNumber.value)" />
</form>

Вот чтобы не запутываться в этом длинном «пути» (document.myForm.phoneNumber), и используется указатель this.

Объектная модель документа

Ключевое слово this является скрытым предвестником целой концепции, которую нужно изучить, прежде чем продолжить разговор об обработке форм. Эта концепция сокращенно называется DOM (Document Object Model) и является своеобразным расширением и продолжением объектно-ориентированного подхода, речь о котором мы вели еще в главе 17. Она касается документов, которые создаются на XHTML и с которыми приходится работать при написании программ на JavaScript.

По определению DOM является стандартом консорциума W3C, определяющим приемы управления объектами и изображениями на одной веб-странице.

Вы только что рассмотрели пример работы этой модели. В самом последнем примере в качестве обработчика событий элемента <i nput> указывалось следующее:

onchange="checkPhone
(document.myForm.phoneNumber.value)"

Вся ссылка, начинающаяся со слова document, — это ссылка на объектную модель документа. Она начинается с самого общего, что есть в этой модели, — слова document, затем «закапывается» в глубь элементов, имеющихся в составе веб-страницы. Самым общим элементом из нужных нам является форма — объект myForm, а уже внутри него находятся все остальные объекты. phoneNumber содержит набор свойств конкретного <input>; свойство value является одним из них и хранит введенное пользователем значение. Оно-то нам и нужно. Таким образом мы прошли от самого общего к частному и построили указатель на требуемое значение.

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

Листинг 18.1. Непосредственная работа с объектами веб-документа

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/
DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title> Передача значений по ссылке </title>
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<script>
<!-- прячем код скрипта от нерадивых браузеров
function compute()
var myNum = document.myForm.userEntry.value:
myNum = eval(myNum):
var myResult = myNum + 100:
document.myForm.result.value = myResult:
return:
/ Закончили прятаться -->,
</script>
</head>
<body>
<h1>Обработка введенных данныx</hl>
<form name="myForm">
Введите число: <input type="text" name=
"userEntry" size="4" /> <br />
Результат обработки: <input type="text"
name="result" size="5" /> <br />
<input type="button" name="Calc" vаluе=
"Счет" onclick="compute()" l>
</form>
</body>
</html>

Можете просто записать этот код в HTML-файл и убедиться в том, что все действительно работает. Каким же образом это происходит?

1. Пользователь вводит число в поле ввода userEntry.

2. При нажатии кнопки «Счет» запускается функция compute().

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

4. Производятся какие-то арифметические операции, ответ сохраняется в переменной myResult.

5. Значение myResult присваивается свойству value текстового поля result, расположенного на второй строке формы. Ответ появляется в поле автоматически. (В браузере это выглядит точно так же, как на рис. 18.1.)

Существует один момент, за которым нужно следить при работе над такого рода скриптами. Он касается того, когда следует использовать свойство value, а когда нет. Обычно если вы хотите присвоить какое-то значение элементу формы, то вам оно просто необходимо. Потому что с поименованным элементом (например, userln-put) связано больше чем просто значение. У него есть, например, type, установленный в элементе <i nput>. Поэтому нельзя просто так взять и написать document. form, user Input = x, поскольку userlnput — это объект, а не свойство.

ПРИМЕЧАНИЕ

Стандарт DOM был принят консорциумом WWW совсем недавно, поэтому Internet Explorer, Netscape и другие браузеры несколько по-разному реализуют его. В тексте этой главы я буду стараться использовать только кросс-платформенные средства объектной модели документов (ну, по крайней мере те, которые работают и в IE, и в Netscape). Тем не менее в главе 19 будут обсуждаться различные платформозависимые элементы DHTML.

Область действия и указатели

Один из вопросов, традиционно вызывающих затруднения при использовании DOM, является написание полных путей к объектам. В общем случае нужно начинать, как уже говорилось, с самого общего, что может быть, и затем продвигаться до нужного элемента, не пропуская ничего. Уровни объектов отделяются при этом точками. Но на самом деле мы уже видели пример использования более короткого пути. Объектом самого высокого уровня обычно является окно, window. Поэтому, если бы мы честно использовали самый полный путь, нам следовало бы во всех предыдущих примерах начинать именно с него. Тогда указатели выглядели бы еще длиннее. Например: window. document. myForm. userEntry.value.

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

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

function computed()
{
var theForm = document.myForm;
var Num = theForm.userEntry.value;
Num = eval(Num);
var Result = Num + 100;
theForm.result.value = Result;
return;
}

Мы немного изменили листинг 18.1 и определили объект theForm для document.myForm во всех ссылках на объекты.

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

<form name="myForm">
...другие элементы...
«input type="button" name="Calc" value-
''Счет" onclick="compute(myForm)" />
</form>

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