• Введение
  
  
• Часть I. Знакомство с JavaScript
  Глава 1. Введение в JavaScript
  Глава 2. Внедрение JavaScript в HTML-документ
  
  
• Часть II. Уроки языка
  Глава 3. JavaScript в действии
  Глава 4. Управление данными с помощью переменных
  Глава 5. Массивы JavaScript и Escape-последовательности
  Глава 6. Выражения, условия, операции, строки и числа
  Глава 7. Использование операторов в языке JavaScript
  Глава 8. Создание сценариев с помощью функций и событий
  Глава 9. Наилучшее использование объектов
  Глава 10. Выявление и исправление ошибок
  
  
• Часть III. Варианты размещения сценария
  Глава 11. Расширение кругозора
  
  
• Часть IV. JavaScript и динамический HTML
  Глава 12. Динамический HTML
  Глава 13. Каскадные таблицы стилей
  Глава 14. Объектная модель документа
  Глава 15. Примеры, примеры, примеры
  

• Что такое объекты
  
• Объекты и браузеры
  
• Более близкое знакомство с объектами JavaScript
  
• Объект Math
  
• Объект Date
  
• Объект String
  
• Оператор with
  
• Методы и свойства объектов
  

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

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

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

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

Если рассматривать объекты, свойства и методы как единое целое, вы начнете лучше понимать, что такое объект. В языке JavaScript объекты и соответствующие им свойства и методы объединяются с помощью символа точки (.). И если бы реальный мир управлялся языком JavaScript, можно было бы записать следующее:

компьютер.монитор
машина.колесо
ножницы.резать()

Заметьте, что такая запись позволяет подробнее описать объект (особенно компьютер. монитор) или процесс (ножницы. резать). Символ точки позволяет охарактеризовать объект точнее:

машина.колесо.заднее.правое

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

Вы можете столкнуться с тем, что одни и те же объекты поддерживаются не всеми браузерами. Чаще всего это происходит по вине производителей браузеров, каждый из которых стремится добавить что-то свое к версии языка JavaScript, поставляемой вместе с браузером. Но благодаря существованию стандарта ECMAScript и отчасти общему происхождению языков JScript (компания Microsoft) и JavaScript (компания Netscape) большинство объектов доступны в обоих браузерах.

Стандарт ECMAScript поддерживает следующие объекты:

• Array - позволяет создать новый массив;
• Boolean - создает новое булево выражение;
• Date — позволяет сохранять в памяти и восстанавливать дату и время;
• Function - создает новую функцию;
• Global - соединяет глобальные методы (например, eval) в одном объекте;
• Math - обеспечивает основные математические функции и константы;
• Number - представляет собой числовые данные;
• Object - обеспечивает общие функции всех объектов языка JavaScript;
• RegExp - будучи глобальным, сохраняет информацию о результатах совпадений с шаблоном регулярного выражения (при поиске текстовых строк);
• String - позволяет форматировать и изменять текстовые строки и указывать расположение частей строки.

Но в версии языка JScript 5.5, поддерживаемой браузером Internet Explorer 5.5, имеются еще и такие объекты:

• Enumerator;
• RegularExpression;
• VBArray;
• ActiveXObject;
• GetObject.

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

Некоторые объекты, представленные в языке JavaScript, предназначены для опытных пользователей и поэтому не будут рассматриваться в книге (хотя в конце данной главы приводится полный список свойств и методов для всех объектов стандарта ECMAScript). В этой главе речь пойдет о наиболее интересных объектах языка JavaScript:

• объекте Math;
• объекте Date;
• объекте String.

Объект Math обеспечивает использование в языке JavaScript математических функций и констант.

Давайте взглянем на объект Math в действии.

Использование свойства PI

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

Пример. В данном примере свойство PI используется для вычисления площади круга по математической формуле S = яР2(см. рис. 9.1).РИСУНОК!!!!!!!

<script language="JavaScript">
<!-- Маскируемся!
inpRadius = prompt (" Введите радиус круга"," Радиус - в числовом виде!") ;
alert(Math.PI * ((inpRadius)*(inpRadius)));
// Снимаем маскировку. -->
</script>

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

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function calcArea()
{
inpRadius = prompt ("Введите радиус круга", "Радиус - в числовом виде!") ;
alert(Math.PI * ((inpRadius)*(inpRadius)));
}
function calcPeri:()
{
inpRadius = prompt (" Введите радиус окружности"," Радиус - в числовом виде!") ;
alert(2 * Math.PI * (inpRadius));
}
function calcVol()
(
inpRadius = prompt ("Введите радиус сферы", "Радиус - в числовом виде!");
alert(Math.PI * ((inpRadius)*(inpRadius)*(inpRadius)) * (4/3));
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl>Bce о кругах, окружностях и сферах!</h1>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcArea()"> чтобы вычислить площадь круга!</р>
<br>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcPeri()"> чтобы вычислить длину окружности!</р>
</br>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcVol()"> чтобы вычислить объем сферы!</р>
</body>
</html>

Использование методов max и min

Объект Math обладает двумя очень интересными методами - max и min. Они позволяют найти наибольшее и наименьшее из заданных числовых значений.

Пример. Вот простой пример с использованием указанных методов:

<script language="JavaScript">
<!-- Маскируемся!
inpl = prompt("Введите число","Число");
inp2 = prompt("Введите число","Число");
inp3 = prompt("Введите число","Число");
alert("Наибольшее из введенных чисел "+ Math.max(inpl, inp2, inp3));
alert("Наименьшее из введенных чисел "+ Math.min(inpl, inp2 , inp3));
// Снимаем маскировку. -->
</script>

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

Использование метода round

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

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

• 1.45 округляется до 1;
• 6.93 округляется до 7;
• 7.5 округляется до 8;
• 0.5 округляется до 1;
• 0.49 округляется до 0.

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function calcArea()
{
inpRadius = prompt (" Введите радиус круга" , " Радиус - в числовом виде! ") ;
alert(Math.round(Math.PI * ((inpRadius)*(inpRadius) )));
}
function calcPeri()
{
inpRadius = prompt ("Введите радиус окружности", "Радиус - числовом виде!") ;
alert(Math.round(2 * Math.PI * (inpRadius)));
}
function calcVol()
{
inpRadius = prompt ("Введите радиус сферы" , "Радиус - в числовом виде!") ;
alert(Math.round(Math.PI * ((inpRadius)*(inpRadius)*(inpRadius)) * (4/3)));
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl>Bce о кругах, окружностях и сферах!</hl>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcArea()"> чтобы авычислить площадь круга!</р>
</br>
<рgt;Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcPeri()"> чтобы авычислить длину окружности!</р>
</br>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcVol()"gt; чтобы авычислить объем сферы!</р>
</body>
</html>

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

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function calcArea()
{
inpRadius = prompt ("Введите радиус круга","Радиус - в числовом виде!");
ans = ((Math.PI * ((inpRadius)*(inpRadius))) * 100);
alert((Math.round(ans)) / 100);
}
function calcPeri()
{
inpRadius = prompt ("Введите радиус окружности", "Радиус - в числовом виде!") ;
ans = ((2 * Math.PI * (inpRadius)) * 100);
alert((Math.round(ans)) / 100);
}
function calcVol()
{
inpRadius = prompt (" Введите радиус сферы", "Радиус - в числовом виде!") ;
ans = ((Math.PI * ( (inpRadius)*(inpRadius)*(inpRadius)) * (4/3)) * 100) ;
alert((Math.round(ans)) / 100);
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl>Bce о кругах, окружностях и сферах!</h1>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcArea()"> чтобы вычислить площадь круга!</р>
</br>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcPeri()"> чтобы вычислить длину окружности!</р>
</br>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="calcVol()"> чтобы вычислить объем сферы!</р>
</body>
</html>

Использование метода random

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

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

Пользоваться методом random очень легко:

<script language="JavaScript">
<!-- Маскируемся!
alert(Math.random() ) ;
// Снимаем маскировку. -->
</script>

Пример. Если вы хотите получить случайное целое число, лежащее в промежутке от нуля до десяти, нужно умножить сгенерированное число на десять и округлить его с помощью метода round (результат представлен на рис. 9.6):

<script language="JavaScript">
<!-- Маскируемся!
rndNum = Math.random();
rndNum = rndNum * 10;
alert(Math.round(rndNum));
// Снимаем маскировку. -->
</script>

Пример. Для получения случайного целого числа, лежащего в промежутке от нуля до ста, можно использовать следующий код (результат представлен на рис. 9.7):

<script language="JavaScript">
<!-- Маскируемся!
rndNum = Math.random();
rndNum = rndNum * 100;
alert(Math.round(rndNum)};
// Снимаем маскировку. -->
</script>

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

Объект Date обеспечивает вас значительным количеством свойств и методов, связанных с датами.

Чтобы воспользоваться объектом Date, сначала нужно присвоить значение переменной (как это делалось с объектом Array):

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
// Снимаем маскировку. -->
</script>

Примечание Выражение new Date () без аргументов возвращает текущую системную дату и время.

Примечание Диапазон дат, которые могут быть представлены в объекте Date, приблизительно составляет 285 616 лет до и после 1 января 1970 г.

Использование метода getFullYear

Пример. Первое, что вы можете попробовать сделать, это указать текущий год с помощью метода getFullYear (результат показан на рис. 9.8):

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
alert(dateVar.getFullYear()) ;
// Снимаем маскировку, -->
</script>

Данный метод возвращает любой год в виде четырехзначного числа, исключая тем самым «проблему двухтысячного года». С другой стороны, метод getYear представляет годы, попадающие в промежуток от 1900 до 1999 года, в виде двузначного числа. Для дат, выходящих за пределы этого периода, возвращается четырехсимвольное значение года. Так, например, для 1995 года будет возвращено значение 95, а годы 1825 и 2025 будут представлены в четырехзначном виде.

Использование метода getMonth

Пример. С помощью метода getMonth можно указать и текущий месяц. Этот метод возвращает число, лежащее в промежутке от 0 до 11 и соответствующее названию месяца от января до декабря. На рис. 9.9 приведен результат использования этого метода.

Предупреждение Не забудьте, что счет месяцев начинается с нуля, а не с единицы!

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
alert(dateVar.getMonth());
// Снимаем маскировку. -->
</script>

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

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
monthNow = dateVar.getMonth();
if (monthNow == 0)
{
txtMonth = "Январь";
}
if (monthNow == 1)
{
txtMonth = "Февраль";
}
if (monthNow == 2)
{
txtMonth = "Март";
}
if (monthNow == 3)
{
txtMonth = "Апрель";
}
if (monthNow == 4)
{
txtMonth = "Май";
}
if (monthNow == 5)
{
txtMonth = "Июнь";
}
if (monthNow == 6)
{
txtMonth = "Июль";
}
if (monthNow == 7)
{
txtMonth = "Август";
}
if (monthNow == 8)
{
txtMonth = "Сентябрь";
}
if (monthNow == 9)
{
txtMonth = "Октябрь";
}
if (monthNow == 10)
{
txtMonth = "Ноябрь";
}
if (monthNow == 11)
{
txtMonth = "Декабрь";
}
alert("Сейчас на дворе " + txtMonth);
// Снимаем маскировку. -->
</script>

Использование метода getDay

Пример. Метод getDay подобен методам getMonth и getYear. Он возвращает число, лежащее в промежутке от нуля до шести и соответствующее дню недели от воскресенья до субботы (см. рис. 9.11).

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
alert(dateVar.getDay());
// Снимаем маскировку. -->
</script>

Предупреждение Очень важно помнить, что воскресенью в данном примере соответствует нуль.

Часы, минуты, секунды... и даже миллисекунды

Не менее легкой задачей является указание текущего времени с помощью объекта Date.

Пример. В данном случае применяются методы: getHours, getMinutes, getSeconds и getMilliseconds.

<script language="JavaScript">
<!-- Маскируемся!
dateVar = new Date();
alert("Время на вашем компьютере с точностью до миллисекунд: " + dateVar.getHours() + ":" + dateVar.getMinutes() + ":" + dateVar.getSeconds()+ ":" + dateVar.getMilliseconds());
// Снимаем маскировку. -->
</script>

Этот сценарий JavaScript позволяет получить очень точное значение времени (но не точнее показаний часов на вашем компьютере). Результат приводится на рис. 9.12

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

Объект String позволяет изменять и форматировать текстовые строки и выделять внутри них части строки.

Методы toUpperCase и toLowerCase

Пример. Двумя наиболее простыми методами объекта String являются методы toUpperCase и toLowerCase. В данном примере текст, записанный в окне запроса, переводится в верхний регистр (см. рис. 9.13).

<script language="JavaScript">
<!-- Маскируемся!
inpTxt = prompt("Введите любой текст","ЗДЕСЬ!");
alert(inpTxt.toUpperCase());
// Снимаем маскировку. -->
</script>

Пример. В следующем примере текст переводится в нижний регистр:

<script language="JavaScript">
<!-- Маскируемся!
inpTxt = prompt("Введите любой текст","ЗДЕСЬ!");
alert(inpTxt.toLowerCase());
// Снимаем маскировку. -->
</script>

На рис. 9.14 представлен результат выполнения данного сценария.

Метод substring

Данный метод используется для выделения части строки на указанных пози1нях внутри объекта String.

Пример. Перед вами пример использования метода substring (см. рис. 9.15). В данном случае из существующей строки выделяется ее часть:

<script language="JavaScript">
<!-- Маскируемся!
inpTxt = "Привет всем";
alert(inpTxt.substring(0, 6));
// Снимаем маскировку. -->
</script>

Два числа, заключенные в круглые скобки, используются в методе substring для указания местоположения части строки. Первое число соответствует начальной позиции, считая от начала строки (нумерация ведется с нуля). Второе число - конечная позиция.

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

Примечание Следует отметить, что метод substring всегда воспринимает меньшее число как начальную позицию. То есть переменные inpTxt.substring(0, 4) и inpTxt.substring(4, 0) возвращают одну и ту же часть строки.

Упражнение Поэкспериментируйте с объектом String. Обратите особое внимание на извлечение части строк. Учитесь управлять текстовыми строками с помощью сценариев.

И снова вернемся к операторам. Оператор with облегчает применение объектов в языке JavaScript. Он позволяет указать объект, используемый в операторе по умолчанию, тем самым значительно упрощая сценарий.

Пример. Ниже приводится пример употребления оператора with:

<script language="JavaScript">
<!-- Маскируемся!
inpl = prompt("Введите число","Число");
inp2 = prompt("Введите число","Число");
inp3 = prompt("Введите число","Число");
alert ("Наибольшее из введенных чисел " + Math.max (inpl, inp2 , inp3));
alert ("Наименьшее из введенных чисел " + Math.min(inpl, inp2 , inp3));
// Снимаем маскировку. -->
</script>

С помощью оператора with можно упростить использование объекта Math:

<script language="JavaScript">
<!-- Маскируемся!
inpl = prompt("Введите число","Число");
inp2 = prompt("Введите число","Число");
inp3 = prompt("Введите число","Число"};
with (Math)
{
alert("Наибольшее из введенных чисел " + max(inpl, inp2, inp3));
alert("Наименьшее из введенных чисел " + min(inpl, inp2, inp3));
}
// Снимаем маскировку. -->
</script>

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

Объект Array

Свойства: constructor | length | prototype.

Методы: concat | join | pop | push | reverse | shift | slice | sort | splice | toLocaleString | toString | unshift | valueOf.

Объект Boolean

Свойства: constructor | prototype.

Методы: toString | valueOf.

Объект Date

Свойства: constructor | prototype.

Методы: getDate | getDay | getFullYear | getHours | getMilliseconds | getMinutes | getMonth | getSeconds | getTime | getTimezoneOffset | getUTCDate | getUTCDay | getUTCFullYear | getUTCHours | getUTCMilliseconds | getUTCMinutes | getUTCMonth | getUTCSeconds | getVarDate | getYear | setDate | setFullYear | setHours | setMilliseconds | setMinutes | setMonth | setSeconds | setTime | setUTCDate | setUTCDay | setUTCFullYear | setUTCHours | setUTCMilliseconds | setUTCMinutes | setUTCMonth | setUTCSeconds | setYear | toGMTString | toLocaleString | toUTCString | toString | valueOf | parse | UTC.

Объект Function

Свойства: arguments | caller | constructor | prototype.

Методы: toString | valueOf.

Объект Global

Свойства: Infinity | NaN.

Методы: escape | eval | isFinite | isNaN | parseFloat | parselnt | unescape.

Объект Math

Свойства: E | LN2 | LN10 | LOG2E | LOG10E | PI | SQRT1_2 | SQRT2.

Методы: abs | acos | asin | atan | atan2 | ceil | cos | exp | floor | log | max | min | pow | random | round | sin | sqrt | tan.

Объект Number

Свойства: MAX_VALUE | MIN_VALUE NaN | NEGATIVE_INFINITY | POSITIVE_INFINITY |constructor | prototype.

Методы: toLocaleString | toString | valueOf.

Объект Object

Свойства: prototype | constructor.

Методы: toLocaleString | toString | valueOf.

Объект RegExp

Свойства: $l-$9 |index | input | lastlndex | lastMatch | lastParenleftContext | rightContext.

Методы: у объекта RegExp нет методов.

Объект String

Свойства: constructor | length | prototype.

Методы: anchor | big | blink | bold | charAt | charCodeAt | concat | fixed | fontcolor | fontsize | fromCharCode | indexOf | italics | lastIndexOf | link | match | replace | search | slice | small | split | strike | sub | substr | substring | sup | toLowerCase | toUpperCase | toString | valueOf.