1. JavaScript об'єкти

Вбудовані об'єкти - це зумовлені об'єкти number, string, array ... Більшість з яких вже були розглянуті в попередніх уроках.

Про об'єкти браузера в javaScript мова піде в подальших уроках.

А зараз час познайомитися з призначеними для користувача об'єктами в javaScript.

• Object (об'єкти)

• Number (обробка чисел)

• String (обробка рядків)

• Array (масиви)

• Math (математичні формули, функції і константи)

• Date (робота з датами і часом)

• RegExp

• Global (його властивості Infinity, NaN, undefined)

• Function

2. JavaScript створення об'єктів

1. Створення об'єктів-колекцій

   var ім'я_об'екта = {властивість: значення, властивість: значення,...};

   або

   var ім'я_об'екта = new Object();
   ім'я_об'екта.властивість = значення;// точкова нотація
   ім'я_об'екта["властивість"] = значення;// дужковa нотація

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

   myObg.rost = 2 // НЕ МОЖНА!
   
   myObg.rost = "2" // можна

   Приклад: Створити об'єкт  myBrowser  з властивостями  name  (значення "Microsoft Internet Explorer") і  version  (значення «9.0»)

   Рішення 1:

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

   або
   Рішення 2:

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

   Приклад: Створити два об'єкти-колекції ( car  і  moto ) з властивостями  color  і  brand  . Вивести значення властивості color у об'єкта car і властивості brand у об'єкта moto.

   Рішення:

   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  :

   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]); // Видасть значення властивостей
   }

2. Створення класів-конструкторів

   Створення класів-конструкторів здійснюється в два етапи:

   1. спочатку створюється клас за допомогою конструктора;

   2. потім створюється новий об'єкт на основі конструктора.

   Створення класу об'єктів за допомогою конструктора (створення класів-конструкторів):

   function Iм'я_класу_об'єктів(св-во1, св-во2){
       this.св-во1 = значення;
       this.св-во2 = значення;
   }

   Створення нового об'єкта на основі конструктора для класу об'єктів:

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

   або

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

   Назва класу конструктора прийнято писати з великої літери!

   Розглянемо приклад:

   Приклад:  Створення конструктора для класу об'єктів і створення об'єкта на основі цього класу: створити об'єкт  myBrowser  з властивостями  name  (значення "Microsoft Internet Explorer") і  version  (значення «9.0»)

   Рішення:

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

   Отже, порівняємо ще раз з першим способом створення об'єктів:

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

3. Доступ до властивостей об'єктів в javaScript

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

Що таке властивість за замовчуванням

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"

Додавання властивостей до класу об'єктів

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

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

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

Розглянемо приклад того, як будуються javascript класи на прототипах

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

4. JavaScript методи об'єктів

Створення методу об'єкта

1. Методи об'єкта створюються на основі функції і додаються в конструктор класу

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

2. Методи об'єкта створюються на основі функції і додаються в конструктор класу

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

5. Javascript прототипи (Prototype) вбудованих об'єктів

Додавання властивостей і методів до вбудованиx об'єктів (прототип)

Розглянемо роботу з прототипами на прикладі:

/ * Зміна прототипу * /
// Додавання властивості за замовчуванням вбудований об'єкту
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();

Резюме: порівняємо ще раз два варіанти використання об'єктів в JavaScript:

1. Створення об'єктів-колекцій

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

2. Створення класів-конструкторів

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

6. Об'єкти javaScript Location, Navigator, Screen

JAVASCRIPT NAVIGATOR

Розглянемо використання об'єкта  Navigator  в javaScript на прикладі:

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("Mова браузера: " + navigator.language + "<br />");
    document.write("Назва ОС: " + navigator.oscpu + "<br />");
    document.write("Чи включені кукі: " + navigator.cookieEnabled + "<br />");
    document.write("Чи підключений Інтернету: " + navigator.nLine + "<br />");
}

userDetails();

ОБ'ЄКТ JAVASCRIPT SCREEN

Розглянемо використання об'єкта  Screen  в javaScript на прикладі:

function userDetails() {
    document.write("Дозвіл: " + screen.width + " x " + screen.height + "<br />");
    document.write("Глибина кольору: " + screen.colorDepth + " x " + screen.height + "<br />");
}
userDetails();

ОБ'ЄКТ JAVASCRIPT LOCATION

Розглянемо використання об'єкта  Location  в javaScript на прикладі:

function userDetails() {
    document.write("Адреса завантаженої сторінки: " + location.href + "<br />");
}
userDetails();