Наилучшее использование объектов

Теперь вы научились создавать функции, пользоваться параметрами для упрощения ваших сценариев и оператором 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

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

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

Объект Math

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

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

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

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

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

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


Рис. 9.1. Программа вычисления площади круга

Свойство 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>


Рис. 9.2. Улучшенный вариант программы, позволяющей вычислить площадь круга

Использование методов 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.3. Программа вычисления площади круга, округляющая результат

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

Пример. Если вы хотите оставить несколько знаков после запятой, самый простой и быстрый способ добиться этого - умножить исходное значение на десять, если вам нужен один десятичный знак; на сто, если нужны два знака; на тысячу, если нужны три, и т.д. Затем вы округляете полученный результат и делите его на число, которое использовали для умножения исходного значения. Если вам нужно, чтобы программа вычисления площади круга выдавала результат с точностью до сотых, надо сделать следующее (результат представлен на рис. 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>


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

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

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


Рис. 9.5. Псевдослучайное число, сгенерированное методом random

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

Пользоваться методом 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.6. Псевдослучайное число, лежащее в промежутке от нуля до десяти

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

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


Рис. 9.7. Псевдослучайное число, лежащее в промежутке от нуля до ста

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

Объект Date

Объект 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>


Рис. 9.8. Текущий год в окне предупредительных сообщений

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

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

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

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

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


Рис. 9.9. Число, соответствующее текущему месяцу, в окне предупредительных сообщений

Пример. Чтобы вывести на экран вместо числа название месяца, нужно воспользоваться оператором 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>


Рис. 9.10. Выведенное на экран название текущего месяца

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

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

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


Рис. 9.11. Число, соответствующее дню недели, в окне предупредительных сообщений

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

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

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

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

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

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


Рис. 9.12. Часы, минуты, секунды и миллисекунды в окне предупредительных сообщений

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

Объект String

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

Методы toUpperCase и toLowerCase

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

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


Рис. 9.13. Строка текста, переведенная в верхний регистр

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

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

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


Рис. 9.14. Строка текста, переведенная в нижний регистр

Метод substring

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

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

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


Рис. 9.15. Часть, извлеченная из строки текста

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

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

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

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

Оператор with

И снова вернемся к операторам. Оператор 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.



Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz