JavaScript урок 6. Javascript объекты

На уроке будет рассмотрена темы Javascript объекты. Речь пойдет о пользовательских объектах: создание объекта в javaScript, работа со свойствами и методами объекта, а также javascript прототипами. Кратко излагается работа с объектами Location, Navigator, Screen

Задача сайта labs-org.ru — получение пользователями практических навыков работы с языком. Лабораторные работы по javaScript, изложенные по мере увеличения их сложности и подкрепляемые наглядными решенными примерами, позволят с легкостью воспринять изучаемый материал и научиться самостоятельно создавать «живые», динамические веб-страницы.

JavaScript объекты


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

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

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

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

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

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

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

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

  1. Использование инициализатора объекта (или создание объектов-коллекций)
  2. Использование конструктора объектов (создание классов-конструкторов)

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

     
    или
     

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

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

    myObg.rost = 2 // НЕЛЬЗЯ!
    
    myObg.rost = "2" // можно
    

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

    ✍ Решение 1:
     

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

    или
    ✍ Решение 2:
     

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

    Пример: Создать два объекта-коллекции (car и moto) со свойствами color и brand. Вывести значение свойства color у объекта car и свойства brand у объекта moto.

    ✍ Решение:
     

      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]); // Выдаст значения свойств
    }
  3. Создание классов-конструкторов


Создание классов-конструкторов осуществляется в два этапа:

  1. сначала создается класс с помощью конструктора;
  2. затем создается новый объект на основе конструктора.

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

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
6
7
8
function Browser (name, version){
	this.name = name;
	this.version = version;
}
var myBrowser = new Browser("Microsoft Internet Explorer","9.0");
 
alert(myBrowser.name);
alert(myBrowser.version);

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

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

Важно: В случае создания объекта-коллекции нельзя создавать экземляр класса, так как это не класс

Задание js 6_1. Создать объект Сотрудник, который содержит сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата (использовать функцию-конструктор и ключевое слово this). Создать экземпляр объекта

Доступ к свойствам объектов в 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 = "отлично";

Важно: В примере свойство (по умолчанию) задается для класса объектов! Это сделано при помощи prototype ; прототип — объект, определяющий структуру

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 классы на прототипах

Пример: Создать класс объекта Cа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);

Задание js 6_2. Для задания js 6_1 через созданный экземляр объекта Сотрудник добавьте новое свойство адрес к классу объектов

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

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

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

  1. Методы объекта создаются на основе функции и добавляются в конструктор класса
  2. 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();
  3. Методы объекта создаются на основе функции и добавляются в конструктор класса
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();

Задание js 6_3. Создать класс объектов (Tour) для работы туристической фирмы с методом подсчета стоимости поездки из расчета: количества человек * количество дней * тариф страны. Создать экземпляр объекта turkeyTour со значениями свойств. Вывести все свойства объекта на экран. Метод объекта расчет создавать на основе функции.

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();

Важно: К объекту Math нельзя добавлять свойства и методы

Задание js 6_4. Дополните код программы для выполнения задания: К встроенному классу String добавить метод printMe(), который выводит слово «Ура!» как заголовок (тег h…), указанного пользователем уровня (prompt).
Уровень заголовка (1, 2 … 6) можно добавить в виде свойства класса String.
Вспомним, как должны выглядеть теги заголовков в HTML:

Заголовок

Дополните код:

1
2
3
4
5
6
7
8
String.prototype.uroven="1";
...
function printZagolovok (){
...
...
}
var s=new ...;
...

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

  1. Создание объектов-коллекций
  2. 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();
  3. Создание классов-конструкторов
  4. 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();

Задание js 6_5. Создать объект-коллекцию Сотрудник, который содержит сведения о сотруднике некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата и отображает данные об этом сотруднике (создать метод объекта для отображения данных)

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

Задание js 6_6. Создать меню из пунктов-гиперссылок:

  • Определить класс MenuItem.
  • Определить свойства: title (название пункта меню или текст гиперссылки), url (значение атрибута href для гиперссылки), метод show (вывод на экран созданного меню).
  • Добавить 4 пункта меню в виде списка (тег li)

Вспомним код html для создания пунктов меню:

<li><a href="labs-org.ru">Перейти на главную страницу</a></li>
<li> ... </li>
<li> ... </li>

*Сложное: количество пунктов меню, их названия и url необходимо запрашивать у пользователя

Совет: для вывода в методе show() строки на экран воспользуйтесь методом document.write()

Объекты 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();


Выводы:

  • С помощью выражений с ключевым словом new вы можете создавать экземпляры объектов, то есть их конкретные воплощения.
  • Более того, благодаря свойству javascript prototype имеется возможность добавлять к объектам новые свойства и методы, придуманные пользователем и отсутствовавшие в исходных встроенных объектах.
  • Создание объектов можно использовать для создания баз данных.

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить