JavaScript объекты


В javaScript существует несколько видов объектов:

  • встроенные объекты
  • объекты браузера
  • объекты, которые программист создает самостоятельно (пользовательские)

Встроенные объекты — это предопределенные объекты number, string, array… Большинство из которых уже были рассмотрены в предыдущих уроках.

Об объектах браузера в javaScript речь пойдет в дальнейших уроках.

А сейчас время познакомиться с пользовательскими объектами в javaScript.

  • Object(объекты)
  • Number (обработка чисел)
  • String (обработка строк)
  • Array (массивы)
  • Math (математические формулы, функции и константы)
  • Date (работа с датами и временем)
  • RegExp
  • Global (его свойства Infinity, NaN, undefined)
  • Function

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

Существует 2 способа создания объектов:

  1. Использование инициализатора объекта (или создание объектов-коллекций)
  2. Использование конструктора объектов (создание классов-конструкторов)
  1. Создание объектов-коллекций 
var имя_объекта = {свойство:значение, свойство:значение,...};


или
 

var имя_объекта = new Object();
имя_объекта.свойство = значение;// точечная нотация
имя_объекта["свойство"] = значение;// скобочная нотация

Стоит заметить, что в качестве значения нельзя использовать цифру.

Пример: Создать объект myBrowser со свойствами name (значение “Microsoft Internet Explorer”) и version (значение «9.0»)

 

1
2
3

var myBrowser = {name: "Microsoft Internet Explorer", version: "9.0"};
alert(myBrowser.name);
alert(myBrowser.version);

или

1
2
3

var myBrowser = new Object();
myBrowser.name= "Microsoft Internet Explorer";
myBrowser["version"]= "9.0";

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var car = new Object();
car.color = "Белый";
car.maxSpeed=220;
car.brand = "Nissan";
 
document.write("У машины цвет: " + car.color);
 
var moto = {
	color: "Синий",
	horsePower: 130,
	brand: "Yamaha"
	};
 
document.write("У мотоцикла производитель: " + moto.brand);

Цикл «для каждого» for in при работе с объектами в javascript

Совсем немного об этой конструкции уже было сказано в одном из предыдущих уроков.
Цикл for in в javascript предназначен для прохода по массивам, коллекциям и объектам.

Рассмотрим пример использования for in:

1
2
3
4
5
6
7
8

var myBrowser = new Object();
myBrowser.name= "Microsoft Internet Explorer";
myBrowser["version"]= "9.0";
for (var a in myBrowser)
{
	alert(a); // Перебирает свойства объекта myBrowser. Выдаст name, version
        alert(myBrowser[a]); // Выдаст значения свойств
}

  1. Создание классов-конструкторов

Создание класса объектов с помощью конструктора (создание классов-конструкторов):

1
2
3
4

function Имя_класса_объектов(св-во1, св-во2){
	this.св-во1 = значение;
	this.св-во2 = значение;
}

Создание нового объекта на основе конструктора для класса объектов:

1

var имя_объекта = new имя_класса("значение_св-ва1","значение_св-ва2");

или

1
2
3

var имя_объекта =new имя_класса();
имя_объекта.св-во1="значение_св-ва1";
имя_объекта.св-во2="значение_св-ва2";

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

Пример: Создание конструктора для класса объектов и создание объекта на основе этого класса: создать объект myBrowser со свойствами name (значение “Microsoft Internet Explorer”) и version (значение «9.0»)


Итак, сравненим еще раз с первым способом создания объектов:

1
2
3
4
5

var myBrowser = {name: "Microsoft Internet Explorer", version: "7.0"};
alert(myBrowser.name);
alert(myBrowser.version);
// следующая строка недопустима!
var myBrowser1 = new myBrowser ("MozillaFirefox","3.5"); // НЕ ВЕРНО! !!

 

Доступ к свойствам объектов в javaScript


имя_объекта.имя_свойства
 

1
2

agent007.Имя = "Бонд";
alert(agent007.Имя);

Свойства по умолчанию

Функция-конструктор позволяет наделить объект свойствами по умолчанию. Эти свойства будут у каждого создаваемого экземпляра объекта

1
2
3
4
5
6
7
8
9
10

function Student(name, phone) {
this.name=name;
this.phone="22-22-22"; // свойство по умолчанию!
}
var ivanov = new Student("Ivan","33-33-33");
alert (ivanov.name); // выдаст "Ivan"
alert (ivanov.phone); // выдаст "22-22-22"
 
ivanov.phone="33-33-33"; //меняем св-во по умолчанию
alert (ivanov.phone); // выдаст "33-33-33"

Добавление свойств к классу объектов

Добавление свойств к конкретному (экземпляру) объекту:

имя_объекта.имя_свойства = значение

function Student(biology, phisics) {
  this.biology=biology;
  this.phisics=phisics; 
}
var ivanov = new Student();
ivanov.biology = "отлично";

 

Добавление свойств к классу объектов:

имя_класса.prototype.имя_свойства=значение

Student.prototype.biology = "отлично";

 
1
2

Student.prototype.email="jb@gmail.com";
alert(ivanov.email); // выдаст jb@gmail.com


 
1
2
3
4
5
6
7
8
9

var summerTour={
	turkey : 2000,
	spain : 3000,
	egypt : 1000
};
var option;
for (option in summerTour){
	document.write(option + ':' + summerTour[option] + '<br/>');
}

Javascript прототипы (введение)

Рассмотрим пример того, как строятся javascript классы на прототипах

Пример: Создать класс объекта саr (автомобиль) с тремя свойствами : name(название), model(модель), color (цвет). Создать экземпляр класса с конкретными значениями свойств. Затем через созданный экземпляр добавить к классу свойство owner (владелец) с конкретным значением по умолчанию (Иванов). Вывести все значения свойств созданного экземпляра


 

1
2
3
4
5
6
7
8
9
10
11
12
13

function car(name, model, color) { /* конструктор объекта car*/
  this.name = name; 
  this.model = model; 
  this.color = color; 
}
 
var myCar=new car;
myCar.name="Мерс";
myCar.model="600";
myCar.color="green";
 
car.prototype.owner = "Иванов"; /* добавляем новое свойство*/
alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);

 

JavaScript методы объектов

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

Пример: Добавить к конструктору объектов Browser метод aboutBrowser, который будет выводить на экран обозревателя информацию о свойствах этого объекта


 

  1. Методы объекта создаются на основе функции и добавляются в конструктор класса 

1
2
3
4
5
6
7
8
9
10
11
12
13

function showBrowser() {
  document.write("Обозреватель: " + this.name +
" " + this.version);
}
 
 function Browser(name, version) {
  this.name = name;
  this.version = version;
  this.aboutBrowser = showBrowser;
}
 
var myBrowser=new Browser("Microsoft Internet Explorer",8.0);
myBrowser.aboutBrowser();

  1. Методы объекта создаются на основе функции и добавляются в конструктор класса
1
2
3
4
5
6
7
8
9

function Browser(name, version) {
  this.name = name;
  this.version = version;
  this.aboutBrowser = function(){
	document.write("Обозреватель: " + name + " " + version);
  }
}
var myBrowser=new Browser("Microsoft Internet Explorer",8.0);
myBrowser.aboutBrowser();

 

Javascript прототипы (Prototype) встроенных объектов

Добавление свойств и методов к встроенным объектам (прототип)

JavaScript — язык ООП (объектно-ориентированного программирования), базирующийся на прототипах.
Прототип — объект, определяющий структуру

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*  Изменение прототипа */
// Добавление свойства по умолчанию  к  встроенному объекту
String.prototype.color = "black";
// Добавление  (изменение) метода  к встроенному объекту
String.prototype.write = stringWrite;
function stringWrite(){
	document.write('<span style="color:' + this.color + '">');
	document.write(this.toString());
	document.write('</span>');
}
// используем измененный класс
var s = new String("Это строка");
s.color = "red";
s.write();

 
1
2
3
4
5
6
7
8

String.prototype.uroven="1";
...
function printZagolovok (){
...
...
}
var s=new ...;
...

Резюме: сравним еще раз два варианта использования пользовательских объектов в JavaScript:

  1. Создание объектов-коллекций 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myBook=new Object();
myBook.title="книга";
myBook.price="200";
 
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
 
function myBookShow()
{
	for (var i in myBook)
	{
		document.write(i+": "+myBook[i]+"<br>"); // Перебор свойств
	}
}
myBook.show=myBookShow;
myBook.show();

  1. Создание классов-конструкторов

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function myBook(title,price){
//  определение свойств
this.title = title;
this.price = price;
// определение метода
this.show = show;
	function show()
	{
			document.write("Название: " + this.title);
			document.write("Цена: " + this.price);
	}
}
var book = new myBook("Книга", 200);
book.show();

 

Объекты javaScript Location, Navigator, Screen

JAVASCRIPT NAVIGATOR

Рассмотрим использование объекта Navigator в javaScript на примере:

Пример: Написать функцию, которая выводит на экран:

  • название браузера
  • язык браузера
  • название ОС
  • включены ли куки
  • подключен ли пользователь к интернету
  • разрешение экрана
  • глубину цвета
  • адрес загруженной страницы

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var option;
// вывод всех свойств объекта navigator
for (option in navigator){
	document.write(option + ' : ' + navigator[option]+ ' <br />');
}
// функция выовда конкретных свойств объекта navigator
function userDetails (){
	document.write("<br><br>Название браузера: " + navigator.userAgent + "<br />");
	document.write("Язык браузера: " + navigator.language + "<br />");
	document.write("Название ОС: " + navigator.oscpu + "<br />");
	document.write("Включены ли куки: " + navigator.cookieEnabled + "<br />");
	document.write("Подключен ли Интернет: " + navigator.nLine + "<br />");
}
 
userDetails();

ОБЪЕКТ JAVASCRIPT SCREEN

Рассмотрим использование объекта Screenв javaScript на примере:

1
2
3
4
5

function userDetails (){	
	document.write("Разрешение: " + screen.width + " x " + screen.height + "<br />");
	document.write("Глубина цвета: " + screen.colorDepth + " x " + screen.height + "<br />");
}
userDetails();

ОБЪЕКТ JAVASCRIPT LOCATION

Рассмотрим использование объекта Locationв javaScript на примере:

1
2
3
4

function userDetails (){
	document.write("Адрес загруженной страницы: " + location.href + "<br />");	
}
userDetails();

 

Регулярные выражения javaScript

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

СОЗДАНИЕ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ (2 СПОСОБА)

  1. Конструктор RegExp() 
    var firstName = new RegExp("John");

    В представленном примере создается объект RegExp с именем firstName, содержащий шаблон John

  2. Присваивание шаблона переменной 
    var firstName=/John/;
    СИНТАКСИС РЕГУЛЯРНЫЙ ВЫРАЖЕНИЙ

Рассмотрим символы поиска по шаблону в javaScript:


\w Любой символ в слове (алфавитно-цифровой)
\W Неалфавитно-цифровой символ (?, *, & …)
 

 
var a=/\w\W/; // шаблон регулярного выражения
var str="?b"; // строка, в которой осуществляется поиск
if(str.search(a)==-1) 
  alert("неверно")
else
  alert("верно");


Метод search(regExp) – возвращает позицию символа с которого начинается соответствие. Возвращает -1 если строка не соответствует регулярному выражению


\s Любой пробельный символ (символы табуляции, новой строки, возврата каретки)
\S Непробельный символ
 

 
var pattern=/\s\S/;


\d Цифровой символ
\D Нецифровой символ
 

 
var pattern=/\d\D/;


[\b] Используется для поиска символа забоя (backspace)
[...] Любой символ, указанный в скобках
[^...] Любой символ, за исключением перечисленного в скобках
 

 
var pattern=/[abc] [^def]/;


[х-у] Символы в промежутке от х до у
[^х-у] Символы, не входящие в промежуток от х до у
 

 
var a=/[a-d][^d-f]]/;
var str="ad";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");


{х,у} Предыдущий элемент должен быть найден не менее храз, но не более у раз
{х,} Предыдущий элемент должен быть найден не менее х раз
 

 
var pattern=/cho{1,2}se/;


? Предыдущий элемент должен быть найден однажды или вообще не найден
+ Предыдущий элемент должен быть найден хотя бы один раз
* Предыдущий элемент должен быть найден неограниченное количество раз или вообще не найден
 

 
var pattern=/ab?c/;


| Должно быть совпадение либо в выражении справа, либо слева от символа |
 

 
var a=/cat|dog/;
var str="sdfcatsdf";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");


(...) Группировка всех элементов в круглых скобках в подшаблон
 

var a=/f(a|o)r/;
var str="sdffarsdf";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");


^ Поиск с начала строки или же с начала первой строки в многострочных данных
$ Поиск с конца строки или с конца последней строки в многострочных данных
 

 
var pattern=/^The/;

\b Позиция между знаком, входящим в слова, и не входящим в слова
\B Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова

 
var pattern=/cat\b/;

Теперь рассмотрим действительно серьезный и часто используемый пример использования регулярных выражений javascript:

Пример: Осуществить проверку правильности ввода в текстовое поле электронного адреса:
Sername-name.mymail@aaa-net.tri.com.ru

 


  1. var a = /^[a-zA-Z0-9_]{1,}([\.-]{0,1}[a-zA-Z0-9_]{1,}){0,}@[a-zA-Z0-9_]{1,}([\.-]{0,1}[a-zA-Z0-9_] {1,}){0,}(\.[a-zA-Z0-9_]{2,4}) {1,}$/;


  2. var a = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;

Эти два примера эквивалентны. Фрагменты кода одного цвета выполняют одно и то же действие.

Показать решение:

ТЕСТЕР РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ JAVASCRIPT

Рассмотрим также вариант примера того, как разработать Тестер регулярных выражений javaScript:

Сценарий:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Функция осуществляет поиск по шаблону в searchstr 
function searchForPattern(searchstr, pattern, REattributes, theResult) 
{
//Создание объекта регулярного выражения 
var regExpObj = new RegExp(pattern,REattributes); 
//Заполнение поля результата результатами поиска 
theResult.value = regExpObj.exec(searchstr); 
} 
// Эта функция заменяет на replaceStr все вхождения шаблона в searchstr 
function replacePattern(searchstr,replaceStr, pattern,REattributes,theResult) 
{
//Создание объекта регулярного выражения 
var regExpObj = new RegExp(pattern,REattributes); 
//Заполнение поля результата результатами поиска. 
theResult.value = searchstr.replace(regExpObj,replaceStr); 
}
// Эта функция очищает все поля страницы 
function clearFields(field1, field2, field3, field4, field5) 
{
field1.value	= "";
field2.value	= "";
field3.value	= "";
field4 .value	= "";
field5.value	= "";
}

Продолжение html-кода:

<h3>Тестер регулярных выражений</h3> 
<form name="myForm"> 
<table board=0> 
<tr align=right> 
<td>Строка поиска:</td> 
<td><input type="text" name="searchString" /></td> 
</tr> 
<tr align=right> 
<td>Строка замены:</td> 
<td> <input type="text" name="replaceString"/></td> 
</tr> 
<tr align=right> 
<td>Атрибуты:</td> 
<td><input type="text" name="REattributes"/><td> 
</tr> 
<tr align=right> 
<td>Образец: </td> 
<td><input type="text" name="pattern"/><td> 
</tr> 
</table> 
<br> 
<input type="button" value="Search for pattern" onClick="searchForPattern(searchString.value, pattern.value, REattributes.value, result)"> 
<input type="button" value="Replace pattern" onClick="replacePattern(searchString.value, replaceString.value, pattern.value, REattributes.value, result) "> 
<input type="button" value="Clear" onClick="clearFields(searchString, replaceString, pattern, REattributes, result)"> 
<br /><hr /><br> Result: <input type="text" name="result"/></form>

 

Объект Date для работы с датой и временем в javaScript

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

  • Object(объекты)
  • Number (обработка чисел)
  • String (обработка строк)
  • Array (массивы)
  • Math (математические формулы, функции и константы)
  • Date (работа с датами и временем)
  • RegExp
  • Global (его свойства Infinity, NaN, undefined)
  • Function


var myDate = new Date();
  

СОЗДАНИЕ ОБЪЕКТА DATE

  1. Создание объекта с текущей датой и временем

    var имя_переменной = new Date();

  2. Создание объекта со значением, заданным в виде строки определенного формата

    var имя_переменной = new Date("month, day, year [hours:minutes:seconds])

    var d1 = new Date("December 15, 1997 16:57:00");
var d2 = new Date("2000 jan 23 10:20"); /* сокращенный вариант */
  3. Создание объекта со значением, заданным с помощью числовых параметров:

    var имя_переменной = new Date(year, month, day [,hours,minutes,seconds])

    var d2 = new Date(1995,4,9,13,30,00);
document.writeln(d2);

Примеры использования объекта Date в javaScript:

var today = new Date(); /* объект даты today содержит информацию о текущей дате */
var date=today.getDate();
alert (date);// текущее число
var day=today.getDay();
alert (day);// значение дня недели (0..6)
var year=today.getFullYear();
alert(year); //2010
var month=today.getMonth();
alert(month);// текущий месяц
var hours=today.getHours();
alert(hours);//текущий час, например 19
var minutes=today.getMinutes();
alert(minutes);//текущие минуты

 
var now=new Date();
var hours=now.getHours();
...
var seconds=...;
 
if(minutes < 10){
	...;
}
if(...){
	...;
}
 
document.write("Текущее время: " + hours + ":" + minutes + ":" + seconds);

 
var d = new Date(); 
...

МЕТОДЫ ОБЪЕКТА DATE

Метод getTime() объекта Date в javascript
Метод getTime() возвращает время в миллисекундах, прошедшее с 1 января 1970 г.
Рассмотрим конкретный пример с использование метода getTime().

Пример: Требуется узнать количество минут и часов, прошедших с 1970 г.


 

var now = new Date();
var from1970 = (now.getTime() / (1000 * 60)); // минут
document.write(from1970);
 
var from1970 = (now.getTime() / (1000 * 60 * 60)); // часов
document.write("<br>"+from1970);

* Делим на 1000 чтобы получить из миллисекунд секунды

Еще один пример:

Пример: Определить количество дней до Нового года


 

// год, месяц, день, час, мин, сек:
var ny = new Date(2017,0,1,0,0,0);// 0-й месяц след года
var now = new Date();
// Кол-во дней с 1970
var from1970 = (now.getTime() / (1000 * 60 * 60 * 24));
document.write (from1970+"<br>");
// Кол-во дней с 1970 до Нового года
var from1970ToNy = (ny.getTime() / (1000 * 60 * 60 * 24));
document.write (from1970ToNy+"<br>");
document.write(Math.round(from1970ToNy) - Math.round(from1970));

 

function viewDate(n){
	var now = ...;
	var nowMilli = now. ...;
 
	var nowPlus79 = new Date(...);
	var milli79 = ...;
 
	var summaMilli = ...;
	var itogMoment = new ... (...);
 
	var myDays = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
	var myMonths = ...;
	document.write("День недели: " + ...);
	document.write("Число: " + ...);
	...
	...
}
var userDays = prompt(...);
...
...
...
...
viewDate(...);

Метод parse() объекта Date()
Метод parse() в javascript — преобразует строку даты типа «Jan 11,1996» в количество миллисекунд, прошедших с полуночи 1 января 1970:

Пример: Выведет на экран обозревателя примерно такую строку: Wednesday, May 21, 1958 10:12:00


 

var d = new Date();
d.setTime(Date.parse("21 May 1958 10:12"));
document.write(d.toLocaleString());

Метод UTC (год, месяц, день, час, минута, секунда) объекта Date()
UTC (год, месяц, день, час, минута, секунда) — возвращает количество миллисекунд для даты на базе универсального координированного времени (UTC), прошедших с полуночи 1 января 1970 года.

Пример: Определить количество дней между двумя датами, например 10 февраля 2003 и 5 марта 2003


 

var date1 = new Date(2003,01,10);
document.write(Date.parse(date1)+" "); //1044824400000
var date2 = new Date(2003,02,5);
document.write(Date.parse(date2)+" "); //1046811600000
document.write(Date.parse(date2) - Date.parse(date1)+" "); //1987200000
var days = (Date.parse(date2) - Date.parse(date1))/1000/60/60/24;
document.write(days); // результат: 23