Open
Close

Де формується об'єкт data js. Як я можу отримати доступ та обробити вкладені об'єкти, масиви чи JSON? Що робити, якщо "глибина" структури даних мені невідома

07.12.2023 -
Аналітика

У мові JavaScript є три типи об'єктів: вбудовані об'єкти, об'єкти браузера та об'єкти, які програміст створює самостійно (рис. 2.1).

Мал. 2.1. Об'єкти у сценаріях JavaScript

Кожен із цих типів має своє призначення та свої особливості.

Вбудовані об'єкти

Нижче ми перерахували вбудовані об'єкти, властивості та методи яких доступні у сценаріях JavaScript без попереднього визначення цих об'єктів:

Тут символом * відзначені вбудовані об'єкти, визначені мовою Microsoft JScript версії 3.0. Ця версія реалізована у браузері Microsoft Internet Explorer версії 4.0.

Вбудовані об'єкти дуже зручні для виконання різних операцій із рядками, календарними датами, масивами, числами тощо. Вони звільняють програміста від різних рутинних операцій на кшталт перетворення рядків чи обчислення математичних функцій.

Як працювати із вбудованими об'єктами?

Досить просто. Програма створює реалізації (instance) об'єктів, а потім звертається до властивостей та методів об'єктів.

Як приклад, що має практичне значення, розглянемо документ HTML, у якому відображається поточна дата та час. Вихідний текст цього документа ви знайдете у лістингу 2.1.

Лістинг 2.1. Файл chapter2/date/date.html

Show date and time Show date and time

Тут сценарій JavaScript створює об'єкт Data, застосовуючи для цього ключове слово new, знайоме всім шанувальникам мови С++, та конструктор Date без параметрів:

var dt; dt = New Date();

Об'єкт Data, що створюється таким чином, ініціалізується поточною локальною датою, встановленою у користувача (а не на сервері Web, з якого був завантажений відповідний документ HTML).

У наступному рядку формується текстовий рядок дати:

szDate = "Date: " + dt.getDate() + "." + dt.getMonth() + "." + dt.getYear();

Значення календарного числа, номера місяця та року тут виходить за допомогою методів getDate, getMonth та getYear відповідно. Ці методи викликаються об'єкту dt, що містить поточну дату.

Текстовий рядок дати виводиться до документа HTML за допомогою методу write, визначеного в об'єкті document:

document.write(szDate);

Цей спосіб ми вже використовували на прикладах сценаріїв, наведених у першому розділі нашої книги.

Зауважимо, що об'єкт Date містить інформацію про поточний час. Ця інформація витягується для відображення за допомогою методів getHours, getMinutes та getSeconds (відповідно, години, хвилини та секунди):

document.write("Time: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());

Зовнішній вигляд документа HTML при перегляді у вікні браузера Microsoft Internet Explorer версії 4.0 показаний на рис. 2.2.

Мал. 2.2. Перегляд локальної дати та часу

Застосування інших вбудованих об'єктів ми продемонструємо пізніше за вивчення матеріалу.

Об'єкти браузера

З погляду сценарію JavaScript браузер є ієрархічно організованим набором об'єктів. Звертаючись до властивостей та методів цих об'єктів, можна виконувати різні операції над вікном браузера, завантаженим у це вікно документом HTML, а також над окремими об'єктами, розміщеними в документі HTML. Наприклад, можна створювати нові вікна браузера, завантажуючи документи HTML, динамічно формувати текст документа HTML, звертатися до полів форм, визначених у документі HTML тощо.

Об'єкти браузера є інтерфейсом, за допомогою якого сценарій JavaScript взаємодіє з користувачем і документом HTML, завантаженим у вікно браузера, а також із самим браузером. У сценаріях JavaScript ви не можете створювати нові класи на базі класів, які відповідають цим об'єктам, проте властивості та методи об'єктів браузера вам доступні.

Ієрархія об'єктів браузера

Ієрархія об'єктів браузера схематично показано на рис. 2.2.

Мал. 2.2. Ієрархія об'єктів браузера

Об'єкт window знаходиться в корені ієрархії. Коли вікно браузера завантажується документ HTML, всередині цього об'єкта створюються інші об'єкти - document, parent, frame, location і top.

Якщо у вікно браузера завантажується документ HTML з кадрами, для кожного кадру створюється окреме вікно, причому це вікно створюється як об'єкт window.

Об'єкт document містить інші об'єкти, склад яких повністю визначається документом HTML, завантаженим у вікно браузера. Це можуть бути форми, посилання на інші документи HTML або локальні посилання всередині одного документа, об'єкти, що визначають адресу URL документа тощо.

Якщо документі є форми, всі вони також представляються як ієрархічного набору об'єктів. Об'єкт-форма може містити такі об'єкти, як кнопки, перемикачі, поля для введення текстової інформації.

Звертаючись до властивостей наведених вище об'єктів, сценарій JavaScript може визначити різні характеристики документа HTML, такі як, наприклад, заголовок. Йому доступні всі посилання, які розміщені в документі, а також вміст полів форм, визначених у документі HTML.

Події, пов'язані з об'єктами

Зробимо ще одне дуже важливе зауваження щодо об'єктів браузера.

З кожним таким об'єктом пов'язується певний набір подій, обробка яких можлива у сценарії JavaScript.

Наприклад, з об'єктом window пов'язані події onLoad і onUnload. Перша з цих подій виникає, коли браузер завершує завантаження вікна та всіх розташованих у ньому кадрів (якщо ці кадри визначені у вікні). Друга подія виникає, коли користувач завершує роботу з документом, закриваючи вікно браузера або перемикаючись на інший документ.

Сценарій JavaScript може, наприклад, під час обробки події onLoad виводити для користувача вітальне повідомлення або запитувати додаткову інформацію. При завершенні роботи з вікном (якщо виникає подія навиключення) сценарій може звільняти будь-які ресурси, пов'язані з цим вікном, або виводити повідомлення на екран монітора.

З іншими об'єктами браузера також пов'язані події. Ми розповімо про них під час опису цих об'єктів.

Об'єкти з урахуванням класів, створюваних програмістом

Численні книги для початківців, присвячені мові програмування С++, пропонують уявити клас як структуру даних, де крім звичайних полів визначені функції-методи для роботи з цими даними. Так ось, у мові JavaScript для створення власних класів використовується прямо протилежний метод.

Клас JavaScript створюється як функція, в якій визначено властивості, що відіграють роль даних. Що ж до методів, то вони теж визначаються як функції, але окремо.

Наведемо конкретний приклад.

Нехай нам потрібно створити клас, призначений для зберігання запису уявної телефонної бази даних. У цьому класі нам потрібно передбачити властивості зберігання імені, прізвища, номера телефону, адреси, а також спеціальної ознаки для записів, закритих від несанкціонованого доступу. Додатково потрібно розробити методи, призначені для відображення вмісту об'єкта в табличному вигляді, як показано на рис. 2.3.

Мал. 2.3. Перегляд вмісту записів

Насамперед займемося створенням власного класу під назвою myRecord. Нехай поки в ньому не буде методів, ми додамо їх пізніше.

Шуканий клас створюється так:

function myRecord(name, family, phone, address) ( this.name = name; this.family = family; this.phone = phone; this.address = address; this.secure = false; )

Неважко помітити, що опис нашого класу є нічим іншим, як функцією конструктора. Параметри конструктора призначені для встановлення властивостей об'єкта під час його створення з урахуванням класу.

Властивості визначаються простими посиланнями на їхні імена із зазначенням ключового слова цього. Це ключове слово тут вказує, що в операторі виконується посилання на властивості об'єкта, для якого викликаний конструктор, тобто для створюваного об'єкта.

Зверніть увагу, що наш конструктор ініціалізує властивість з ім'ям secure, записуючи значення false. Відповідний параметр у конструкторі не передбачено, що цілком допустимо.

Як користуватись певним класом?

На базі цього класу можна створити довільну кількість об'єктів. Нижче ми привели фрагмент сценарію JavaScript, де на базі класу myRecord створюється два об'єкти rec1 та rec2:

var rec1; var rec2; rec1 = new myRecord("Іван", "Іванов", "000-322-223", "Мала Велика вул., буд. 225, кв. 226"); rec2 = new myRecord("Петро", "Петрів", "001-223-3334", "Велика Мала вул., буд. 552, кв. 662"); rec2.secure = true;

Об'єкти створюються за допомогою оператора new, знайомого тим, хто складав програми мовами С++ та Java. Тут ми передаємо конструктору параметри для ініціалізації властивостей об'єктів, що створюються.

Що ж до властивості з ім'ям secure, то в об'єкті rec2 воно ініціалізується вже після створення останнього. До нього записується значення true. Ми не змінювали властивість secure об'єкта rec1, тому в ньому зберігається false.

Тепер наше завдання - додавання до визначеного нами класу нових методів з іменами printTableHead, printTableEnd і printRecord. Перші два з цих методів виводять документ HTML, відповідно, початковий і кінцевий фрагмент таблиці, а третій - рядки таблиці, що відображають вміст записів.

У скороченому вигляді нове визначення класу myRecord представлене нижче:

function printTableHead() ( . . . ) function printTableEnd() ( . . . ) function printRecord() ( . . . ) function myRecord(name, тел. ;this.phone = this.address = address;

Тут перед визначенням конструктора ми розташували визначення функцій-методів нашого класу. Крім цього, до конструктора додано визначення нових властивостей:

this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;

Після такого визначення класу ви можете створювати об'єкти та звертатися до певних методів:

rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();

Повертаючись до документа, наведеного вище на рис. 2.3 наведемо його повний вихідний текст (листинг 2.2).

Лістинг 2.2. Файл chapter2/NewObject/NewObject.html

Перегляд записів Перегляд записів

Визначення нового класу myRecord та його методів ми розташували в області заголовка документа HTML, як це заведено робити.

Метод printTableHead виводить у документ HTML заголовок таблиці. Зовнішній вигляд заголовка залежить від вмісту властивостей об'єкта.

Насамперед метод printTableHead перевіряє властивість secure, отримуючи його значення за допомогою ключового слова this:

var szSec = ""; if(this.secure) szSec = "(Secure)"; else szSec = "(Unsecure)".fontcolor("red");

Тут це ключове слово означає, що необхідно використовувати властивість об'єкта, для якого був викликаний метод printTableHead.

Якщо вміст властивості secure дорівнює true, у текстову змінну szSec записується рядок "(Secure)". Якщо воно дорівнює false, в цю змінну заноситься рядок "(Unsecure)", причому для рядка встановлюється червоний колір.

Оскільки JavaScript всі текстові рядки (зокрема і літерали) є об'єктами вбудованого класу String, то їм можна викликати певні у цьому класі методи. Зокрема, метод fontcolor дозволяє встановити колір рядка, ніж ми скористалися.

Далі метод printTableHead виводить у документ HTML оператор

з параметром BORDER, з якого починається визначення таблиці з рамкою. Напис над таблицею задається за допомогою оператора, що динамічно формується. Цей напис включає ім'я та прізвище, витягнуті з відповідних властивостей об'єкта, для якого був викликаний метод printTableHead. Потім цей метод виводить написи для стовпців таблиці.

Метод printTableEnd виводить у документ HTML оператор

, завершальний визначення таблиці, і навіть порожній параграф відділення таблиць, наступних друг за другом:

function printTableEnd() ( document.write(""); document.write("

"); }

Останній метод, визначений у нашому класі, називається printRecord. Він друкує вміст перших чотирьох властивостей об'єкта як рядок таблиці, визначеної у документі HTML щойно описаної функцією printTableHead.

Зауважте, що вміст властивостей об'єкта друкується похилим шрифтом, для чого ми викликаємо метод italics:

document.write(" Name:" + this.name.italics() + "");

Визначення класу myRecord ми вже описали вище.

Перейдемо тепер до другої частини нашого сценарію, що знаходиться в тілі документа HTML.

Тут ми створюємо два об'єкти rec1 та rec2 на базі класу myRecord, а потім встановлюємо властивість secure об'єкта rec2 у стан true.

Як бачите, застосування власного класу дозволило сильно спростити завдання ініціалізації та відображення вмісту записів нашої уявної телефонної бази даних. Фактично ми порушили це завдання до викликів кількох методів, визначених заздалегідь у нашому класі.

У цьому розділі:

У мові JavaScript є низка наперед визначених об'єктів, якими можна користуватися при написанні сценаріїв. До них відносяться такі об'єкти, як Array, Boolean, Date, Function, Math, Number, RegExp і String, а також примітивний об'єкт Object. У ранніх версіях мови до нього були також включені об'єкти документа (window, document), проте зараз вони виключені з ядра мови JavaScript, і належать до визначення об'єктної моделі документа (DOM), про яку йтиметься пізніше. Тим не менш, деякі властивості цих об'єктів (document та window) нам уже знайомі.

Втім, повернемося до вбудованих об'єктів JavaScript у сучасному понятті. Всі вбудовані об'єкти, крім Math та Date, мають такі властивості, як constructor та prototype. Вони використовуються для додавання нових властивостей до існуючих об'єктів та описуються в контексті об'єкта Function.

Об'єкт Object

Усі об'єкти JavaScript є спадкоємцями об'єкта Object. Отже, всі властивості та методи цього об'єкта є і будь-якого іншого об'єкта JavaScript.

Для об'єкта Object визначено лише 2 властивості – constructor і prototype. Властивість конструктора визначає функцію, що створює прототип об'єкта – саме всю функцію повністю, а не тільки її назву. Інакше кажучи, розглянемо варіант, коли визначено деякий об'єкт test і створено екземпляр цього об'єкта tmp:

Function test(version) (this.version = version;) tmp = new test(1);

У такому разі, скориставшись властивістю конструктора, можна побачити вихідний код об'єкта test (рис. 4.6):

Alert(tmp.constructor);

Мал. 4.6.

Для цієї властивості, щоправда, є одне обмеження: воно не може вивести код вбудованих об'єктів мови JavaScript: у таких випадках інформація, що виводиться, обмежується ім'ям функції прототипу і рядком «».

Що стосується властивості prototype, воно дозволяє отримати доступ до функції прототипу поточного об'єкта. Використання цієї властивості дозволяє змінювати характеристики прототипу об'єкта. Наприклад, можна додати нову властивість для об'єкта типу test, скориставшись властивістю prototype:

Test.prototype.comment = "Нова властивість comment";

Тепер всі об'єкти типу test, включаючи вже створений екземпляр tmp, матимуть властивість comment, у чому нескладно переконатися, застосувавши таку перевірку:

Alert(tmp.comment);

Більш того, подібним чином дозволяється модернізувати і вбудовані об'єкти JavaScript. Наприклад, якщо нам потрібно додати до масивів таку властивість як опис, то можна це зробити (зрозуміло, тільки в рамках поточного сценарію!), пославшись на прототип об'єкта Array і додавши до нього відповідну властивість:

Array.prototype.description = "";

Що стосується методів, то їх для об'єкта Object визначено трохи більше – 5 штук. Це Source, toString, watch, unwatch і valueOf, їх короткий опис наведено в таблиці 4.10.

Методи toString і valueOf застосовуються практично до всіх вбудованих об'єктів JavaScript, і, як правило, викликаються інтерпретатором автоматично, коли виникає необхідність зробити перетворення. Що стосується методу toSource, то він, фактично, просто виконує роботу для якості конструктора.

Методи watch і unwatch, що залишилися, - фірмові розширення, введені ще в браузер Netscape 4 (зараз підтримуються так само Mozilla), - призначені для налагодження сценаріїв. Оскільки в рамках цього видання питання налагодження програм не розглядатиметься, то й описувати ці методи немає сенсу. Але про всяк випадок, можете взяти собі на замітку, що Sea Monkey (але не в браузері Firefox) є відладчик сценаріїв - JavaScript Debugger.

Об'єкт Array

Змінні масиви містять упорядковані набори значень, для зручності представлені у вигляді однієї змінної. Ми не раз уже стикалися з масивами (згадайте хоча б масиви аргументів), тепер настав час розібратися з усіма їхніми властивостями та тонкощами застосування.

На відміну від інших мов програмування, JavaScript немає такого типу даних, як масив. Але це обмеження обходиться тому, що можна використовувати зумовлений об'єкт масиву – Array. Для створення об'єкта-масиву можна використовувати один із наступних варіантів синтаксису:

Ім'яМассива = new Array(елемент1, елемент2, ... елементN) Ім'яМассива = new Array(ДовжинаМассива)

У першому випадку перераховуються всі складові масиву, у другому просто вказується кількість елементів. Допускається також використання літералів при оголошенні масиву:

Computers = ["PC", "Mac", "Sun"];

Для заповнення елементів масиву значеннями, як і взагалі звернення до елементів масиву, можна використовувати індекс елемента. При цьому слід враховувати, що індекс елементів масиву починається з нуля:

Var colors = новий Array(3); colors = "Червоний"; colors = "Синій"; colors = "Зелений";

Досить часто буває зручно використовувати JavaScript, що надається мовою, можливість заповнення масиву безпосередньо при його оголошенні:

Var colors = new Array ("Червоний", "Синій", "Зелений");

Щоб дізнатися довжину масиву (кількість елементів, з яких складається масив), слід використовувати властивість length:

Var NumColors = colors.length;

Крім властивості length, JavaScript передбачено також цілий ряд інших властивостей і методів для роботи з масивами. Зокрема, до властивостей об'єкта Array, крім length, ставляться універсальні всім об'єктів constructor і prototype, а як і призначені використання масивів разом із регулярними висловлюваннями властивості index і input.

Що ж до методів, крім стандартних toSource, toString і valueOf, масиви наділені ще десятком власних, перелічених у таблиці 4.11.

Таблиця 4.11. Методи об'єкту Array Метод Опис
concatОб'єднує два масиви і повертає новий
joinПоєднує всі елементи масиву в один рядок
popВидаляє останній елемент з масиву і повертає його
pushДодає один або більше елементів у кінець масиву та повертає його нову довжину
reverseПереміщує елементи масиву таким чином, що перший стає останнім, і навпаки
shiftВидаляє перший елемент масиву та повертає його
sliceВидаляє частину елементів масиву та повертає новий масив.
spliceДодає та (або) видаляє елемент з масиву
sortСортує елементи масиву за абеткою
unshiftДодає один або більше елементів на початок масиву, і повертає нову довжину масиву (в MSIE 5.5 і 6 цей метод нічого не повертає)

Розглянемо деякі методи докладніше. Так, використовуючи метод concat можна об'єднати 2 масиви в одному:

Var a = new Array("A1", "A2"); var b = новий Array("B1", "B2"); var ab = a.concat(b);

Тут змінна ab стане масивом, що містить всі 4 елементи двох масивів, що склеюються. Якщо тепер до такого масиву застосувати метод join, то результатом буде рядок, що містить всі елементи цього масиву, перераховані через кому:

Str = ab.join (); // Отримаємо str = "A1, A2, B1, B2"

Що стосується методу pop, то застосувавши його до цього ж масиву, ми отримаємо в «B2» як відповідь, а масив буде урізаний до трьох перших значень. А метод shift, навпаки, повертає перший елемент (у нашому випадку – «A1») і робить те саме з масивом з тією лише різницею, що елементи, що залишилися, зсуваються вперед.

Щоб краще зрозуміти, як працюють ці та інші методи з масивами, звернімося до наступного прикладу, наведеного у лістингу 4.3.

Лістинг 4.3. Робота з масивами

Цей приклад можна подивитися у файлі array.html, заодно можна буде переглянути всі результати його роботи в браузері (див. рис. 4.7).

Мал. 4.7. Результат застосування методу splice: масив, що повертається, і зміни

Масиви також може бути багатовимірними, тобто. елементом масиву може бути інший масив. У такому випадку для звернення до елемента масиву використовують наступний синтаксис:

Array2D="Елемент 0,0" Array2D="Елемент 0,1" ... Array2D[N][N]="Елемент N,N"

Приклад заповнення та виведення двовимірного масиву можна знайти у файлі arrays.html, там же знаходиться інтерактивний приклад практично для всіх методів масиву.

Об'єкт Boolean

Об'єкт Boolean – оболонка для однойменного типу даних. Для визначення об'єкта типу Boolean використовується наступний синтаксис:

BooleanObj = New Boolean (значення)

Тут значення – ініціалізуючий вираз, який, у разі потреби, буде приведений до true або false. Якщо ви вкажете таке значення, як 0, null, false, NaN, undefined або порожній рядок, то результатом ініціалізації об'єкта типу Boolean буде false, а в разі будь-якого іншого значення – true.

Не слід плутати примітивні логічні значення true та false з типами даних true та false об'єкта Boolean. Наприклад, якщо оголосити змінну x і надати їй значення об'єкта Boolean, ініціалізованого за допомогою значення false, вона все одно при порівнянні буде являти собою значення істини (true):

X = новий Boolean (false); // при порівнянні if(x) отримаємо true

У той же час, якщо просто присвоїти змінній примітивний тип даних false, то вона саме його й отримає:

X = false; // при порівнянні if(x) отримаємо false

Що стосується застосування цього об'єкта, на практиці, то його можна використовувати, як функцію для того, щоб перетворювати значення будь-яких інших типів в булевські:

A = 100; x = Boolean (a); // x отримає true if (x) (...)

Але, насправді, навряд чи ви це робитимете, оскільки при необхідності подібні перетворення виробляються інтерпретатором JavaScript автоматично – у прикладі вище можна було б одразу написати «if(a)…», а необхідне в даному випадку перетворення буде зроблено у будь-якому випадку .

Об'єкт Date

Для роботи з датами в мові JavaScript не передбачено спеціального типу даних, однак, як і у випадку з масивами, є спеціальний об'єкт Data. Для створення об'єкта дати можна скористатися будь-яким із наступних способів:

New Date() new Date(Міллісекунди) new Date("Дата_у_виді_рядка")

У першому випадку створюється об'єкт Date з поточним часом, у другому слід вказати кількість мілісекунд, що пройшли з 1 січня 1970 року. Якщо вказується дата у вигляді рядка, вона має бути виду «Feb 28, 2005». Допустимо також задати дату, використовуючи цілі значення для року, місяця, дня і т.п.:

New Date(Рік, Місяць, День [, Година, Хвилина, Секунда, Мілісекунда])

Зрозуміло, у цьому випадку можна уникати вказівки секунд і мілісекунд, тим більше, що мілісекунди навіть не підтримувалися у старих версіях браузерів. Крім того, JavaScript до версії 1.3 не підтримуються дати раніше 1 січня 1970 року. Що стосується формату значень, які вказують у рядку, то рік – це будь-яке 4-значне число (якщо вказати 2-значне, то до нього додасться 1900), місяць число – від 0 (січень) до 11 (грудень), а день – від 0 до 31. Відповідно, значення часу так само обмежені: для годинника це буде ціле від 0 до 23, для секунд і хвилин – від 0 до 59, а для мілісекунд – від 0 до 999. Таким чином, щоб як значення об'єкта типу Date вказати 9 травня 2005 року, слід написати:

Var anyday = New Date (2005, 5, 9);

А якщо потрібно отримати поточне значення дати та часу, то жодних параметрів не потрібно зовсім:

Var now = New Date();

Починаючи з JavaScript 1.3, діапазон дат може бути в межах 100 мільйонів днів до і після 01.01.1970 (у сумі це майже 550 тисяч років!). У цій же версії з'явилася вимога завжди вказувати рік у чотиризначному форматі, щоб уникнути помилок, пов'язаних зі зміною сторіч.

p align="justify"> Для роботи з об'єктом Date передбачено 2 властивості - constructor і prototype, а так само безліч методів, що дозволяють виділяти потрібну частину дати (рік, місяць, число, час), виводити її в тому чи іншому форматі і т.д. Усі вони перелічені у таблиці 4.12.

Таблиця 4.12. Методи об'єкту Date Метод та його синтаксис Опис
getDate()Повертає день місяця у локальному часі
getDay()Повертає день тижня у локальному часі
getFullYear()Повертає рік у локальному часі
getHours()Повертає поточний час (годинник) у локальному часі
getMilliseconds()Повертає поточний час (мілісекунди) у локальному часі
getMinutes()Повертає поточний час (хвилини) у локальному часі
getMonth()Повертає поточний час (місяць) у локальному часі
getSeconds()Повертає поточний час (секунди) у локальному часі
getTime()Повертає поточний час у кількості в локальному часі
getTimezoneOffset()Повертає зсув часу в хвилинах щодо часу за Гринвічем у локальному часі
getUTCDate()Повертає день місяця в універсальному часі
getUTCDay()Повертає день тижня у універсальному часі
getUTCFullYear()Повертає рік в універсальному часі
getUTCHours()Повертає поточний час (годинник) в універсальному часі
getUTCMilliseconds()Повертає поточний час (мілісекунди) в універсальному часі
getUTCMinutes()Повертає поточний час (хвилини) в універсальному часі
getUTCMonth()Повертає поточний час (місяць) в універсальному часі
getUTCSeconds()Повертає поточний час (секунди) в універсальному часі
getYear()Застарілий. Повертає рік у короткому (двозначному) форматі в універсальному часі
parse(рядок_дати)Повертає кількість мілісекунд, що пройшли з 1 січня 1970 року до значення, вказаного у параметрі, у локальному часі
setDate(день)Встановлює день місяця у локальному часі
setFullYear(рік)Встановлює рік у локальному часі
setHours(годинник)Встановлює час (годинник) у локальному часі
setMilliseconds (мілісекунди)Встановлює час (мілісекунди) у локальному часі
setMinutes(хвилини)Встановлює час (хвилини) у локальному часі
setMonth(місяць)Встановлює час (місяць) у локальному часі
setSeconds (секунди)Встановлює час (секунди) у локальному часі
setTime (мілісекунди)Встановлює час у мілісекундах для певної дати у локальному часі
setUTCDate(день)Встановлює день місяця в універсальному часі
setUTCFullYear (рік)Встановлює рік в універсальному часі
setUTCHours(годинник)Встановлює час (годинник) в універсальному часі
SetUTCMilliseconds(мілісекунди)Встановлює час (мілісекунди) в універсальному часі
setUTCMinutes (хвилини)Встановлює час (хвилини) в універсальному часі
setUTCMonth(місяць)Встановлює час (місяць) в універсальному часі
setUTCSeconds (секунди)Встановлює час (секунди) в універсальному часі
setYear(рік)Застарілий. Встановлює рік у локальному часі, як значення року допустимо двозначний формат
toGMTString()Застарілий. Перетворює дату в рядок, що відповідає часу за Гринвічем
toLocaleString()Повертає дату та час у вигляді рядка, що відповідає за форматом установкам локальної системи
toLocaleDateString()Повертає дату у вигляді рядка, що відповідає за форматом установок локальної системи
toLocaleTimeString()Повертає час у вигляді рядка, що відповідає за форматом установкам локальної системи
toSource()Повертає об'єкт дати у поданні літералу
toString()Повертає об'єкт дати у поданні рядка
toUTCString()Перетворює дату в рядок у форматі, що відповідає універсальному часу
UTC(параметри)Повертає кількість мілісекунд, що відбулися з 1 січня 1970 року в універсальному часі. Як параметри вказують рік, місяць і день, а також (опціонально) – години, хвилини, секунди та мілісекунди
valueOf()Повертає дату у вигляді примітивного значення

Незважаючи на таку різноманітність методів, працювати з об'єктом Date досить просто: слід тільки зрозуміти принцип найменування методів:

  • методи, що починаються з "set", призначені для встановлення дати та часу в об'єктах Date;
  • методи, що починаються з «get», призначені для отримання дати, часу або їх частин з об'єктів Date;
  • методи, що починаються з «to», повертають дату та час (або їх частини) у вигляді рядкових значень;
  • методи, що містять «UTC», відрізняються від аналогічних лише тим, що працюють з форматом універсального часу (тобто відображає час за Грінвічем, з урахуванням усунення щодо поточного часового поясу).

Таким чином, залишається тільки додавати до get або set назву необхідної частини дати або часу, щоб отримати або встановити потрібний параметр, використовуючи при необхідності ще й UTC. Ну а коли потрібно отримати результат у людському вигляді, використовують методи to. Також слід запам'ятати, що для роботи з роком треба завжди використовувати тільки повноформатні функції (тобто getFullYear або getUTCFullYear, а не getYear).

Строкове подання дати JavaScript має такий формат:

ДеньТижня Місяць Число Рік Години:Хвилин:Секунд GMT±Зміщення

Щоб наочно побачити подання дат, а заразом і розглянути, як це працюють функції на кшталт toString, розглянемо те, що вони повертають на висновок. При цьому перше, що може прийти на думку для перегляду роботи тієї чи іншої функції, - це використовувати виведення тексту в документ:

Document.writeln(DateObject.toString()); document.writeln(DateObject.toGMTString()); // і т.д.

Але, насправді, оскільки функцій багато, було б добре заздалегідь писати, що за дію було виконано:

Document.writeln("DateObject.toString()" + DateObject.toString());

А тепер знову подумаємо про те, скільки ж рядків ми хочемо вивести у такий спосіб насправді. Навіть якщо враховувати можливості методу «скопіюй і встав», що підтримується всіма текстовими редакторами, це не застрахує від подібних до таких помилок:

Document.writeln("DateObject.toLocaleString()" + DateObject.toString());

Але, як говорить девіз IBM, люди повинні думати, а машини працювати. Так що подумаємо, як змусити працювати комп'ютер, заодно позбавивши себе необхідності вводити зайві байти коду, для чого звернімося до лістингу 4.4.

Лістинг 4.4. Виведення різних типів дат та функція eval

Методи об'єкту Date

Насамперед, у ньому визначено функцію printDate, яка, власне, і виводить у документ дату у тому чи іншому вигляді. Вірніше, вона виводить дату в нашому випадку, але в принципі вона може виводити все, що завгодно – головне, щоб аргумент, який вона приймає, був закінченим фрагментом коду JavaScript. При цьому код спочатку виводиться як є (тобто друкується рядкова змінна у вихідному вигляді), а потім виводиться результат виконання, для чого використовується функція eval. В результаті, написавши один раз таку функцію, можна надалі по ходу всього документа звертатися до неї, позбавивши себе необхідності двічі вводити практично один і той же текст.

Після функцією виведення розташовано створення об'єкта типу Date, якому присвоюється значення 2005 рік, 3 місяць (квітень, т.к. січень – нульовий), 1 число, 14 годин, 30 хвилин, 45 секунд. Далі відкривається запис документ і послідовно викликається функція printDate для 6 різних методів об'єкта Date. Результатом роботи цього сценарію буде 6 рядків, що містять пари значень із методу та результату його роботи, розділених двокрапкою (рис. 4.8).

Мал. 4.8. Висновок однієї й тієї ж дата різними методами

Слід зазначити, що метод toSource, що виводить дату у внутрішньому поданні програми, підтримується лише Mozilla-браузерами. Крім того, формат виведення дат усіма іншими методами також може дещо відрізнятися в різних браузерах. Ви можете завантажити такий приклад у різні програми перегляду та самостійно подивитися, що вони видадуть (файл date.html).

Об'єкт Function

Обумовлений об'єкт Function визначає рядок коду на JavaScript, який має бути виконаний, як функція. Для оголошення об'єкта Function використовується наступний синтаксис:

Ім'яФункції = new Function([аргумент1, аргумент2, ...аргументN], ТілоФункції)

В даному випадку як ім'я функції може бути використане ім'я будь-якої змінної, або властивість вже існуючого об'єкта. Також можна вказувати об'єкт типу Function як значення для обробника подій об'єкта. Допустимо, якщо ми хочемо зробити власний обробник події типу «завершення завантаження документа» (document.onload), то можемо написати так:

Document.onload = new Function([Аргумент1, ...аргументN], ТілоФункції);

Аргументи в даному випадку - це параметри, що передаються функції, а тіло функції - власне код, який повинен бути виконаний при зверненні до об'єкта-функції. Наприклад, можна написати такий варіант об'єкта, який буде використовуватися для зведення числа у квадрат:

Var SquareObj = новий Function("x", "return x*x");

Тут SquareObj – ім'я змінної, x – аргумент, а «return x*x» – тіло функції. Зверніть увагу на той факт, що не тільки тіло функції, але й аргументи, що приймаються їй, укладені в лапки, а також і на те, що ім'я типу об'єкта, як це прийнято в JavaScript, пишеться з великої літери (Function).

Використання створених у такий спосіб змінних аналогічно використанню змінних будь-яких інших типів:

Var a = 5 + SquareObj(2); // Отримаємо 9

Фактично, об'єкт типу Function завжди можна уявити і як звичайної функції, оголошеної з допомогою ключового слова function. Так, те саме зведення на другий ступінь можна описати так:

Function SquareFunc(x) ( return x*x; )

Відповідно, і використовувати оголошену таким методом функцію (в даному випадку – саме функцію у «чистому» вигляді, а не процедуру), можна аналогічним способом:

Var a = 5 + SquareFunc(2); // теж отримаємо 9

Таким чином, присвоєння змінної значення у вигляді функції з використанням об'єкта Function є аналогічним до оголошення функції як такої. Але при цьому у цих підходів є і відмінність: якщо SquareObj - це змінна, значення якої є посиланням на об'єкт, створений за допомогою об'єкта Function, SquareFunc - це ім'я функції. Відповідно, при виконанні програми вони поводяться теж по-різному: для об'єкта типу функція інтерпретатор щоразу, коли йому попадеться змінна (у нашому випадку – SquareObj) буде повністю оцінювати весь код функції, а для оголошених звичайним способом функцій код оцінюється лише за першого прохід. Ця відмінність може бути непринциповою, якщо функція виконує разову роботу, однак використання змінних, створених на основі об'єкта Function, суттєво знижує ефективність роботи програми у циклах. Тому на практиці використання об'єктів-функцій – велика рідкість, проте іноді вони можуть бути зручними, наприклад, для додавання методів іншим об'єктам.

Об'єкт Function має стандартні для JavaScript властивості constructor і prototype, а також ряд власних:

Arguments – масив, який відповідає параметрам функції arguments.callee – відповідає тілу функції. arguments.caller (застаріле) – вказує на ім'я функції, з якої відбулося звернення до об'єкта; arguments.length – вказує на кількість параметрів функції. length – вказує на кількість аргументів, очікуваних функцією (а не на число, що надійшло, як у випадку з argument.length);

УВАГА
Всі властивості arguments можуть бути видно лише «зсередини» функції, причому, починаючи з JavaScript 1.4, arguments більше не є властивістю об'єкта Function, а є самостійною локальною змінною, яка неявно присутня в будь-якій функції. Фактично, для Function залишається всього одна власна властивість - length.

Крім властивостей, об'єкт Function має кілька методів. Так, метод apply дозволяє застосувати метод одного об'єкта до іншого, а метод call викликати метод іншого об'єкта в контексті поточного. На жаль, реалізація цих методів практично явно залишає бажати кращого. Так що залишається лише згадати про стандартні для JavaScript методи toString, toSource і valueOf, що є так само й у об'єкта Function.

Об'єкт Math

Math – вбудований об'єкт мови JavaScript, що має як методи та властивості основні математичні константи та функції. Наприклад, властивість PI об'єкта Math містить значення числа Пі (π), що дорівнює 3,1416, а метод sin повертає синус зазначеного числа.

Крім числа π, об'єкт Math має такі властивості:

  • E – основа натуральних логарифмів (приблизно 2,718)
  • LN10 – натуральний логарифм 10 (приблизно 2,302)
  • LN2 – натуральний логарифм 2 (приблизно 0,693)
  • LOG10E – десятковий логарифм E (приблизно 0,434)
  • LOG2E – двійковий логарифм E (приблизно 1,442)
  • SQRT1_2 – квадратний корінь із 0,5 (приблизно 0,707)
  • SQRT2 – квадратний корінь із 2 (приблизно 1,414)

Оскільки всі властивості об'єкта Math є зумовленими константами, то створювати інші об'єкти типу Math не тільки не потрібно, а й неприпустимо, а звертатися до них треба завжди одним і тим самим способом, наприклад:

Var CircleLength = diameter * Math.PI;

Крім властивостей, для об'єкта Math визначено також методи, що відповідають основним математичним функціям. Усі вони перелічені у таблиці 4.13.

Таблиця 4.13. Математичні методи JavaScript Метод та його синтаксис Опис
abs(число)Повертає абсолютне значення аргументу
atan2(y, x)Повертає число у діапазоні від -? до?, що представляє кут (радіани) між віссю X і точкою (x, y). Зверніть увагу, що першим аргументом є Y-координата
exp(число)Повертає E у зазначеному ступені (експонентний логарифм)
ceil(число), floor(число)Повертає значення, яке є найближчим великим (ceil) або меншим (floor) цілим числом
min(число1, число2), max(число1, число2)Повертають менше (min) або більше (max) число двох порівнюваних аргументів
sin(число),cos(число), tan(число),asin(число), acos(число),atan(число)Повертають результат виконання стандартних тригонометричних функцій – синуса, косинуса, тангенсу, арксинусу, арккосинусу та арктангенсу.
pow (база, експонента)Повертає базу у ступені експоненти
random()Повертає псевдовипадкове число від 0 до 1
round(число)Повертає значення, заокруглене до найближчого цілого
sqrt(число)Повертає квадратний корінь числа

Як і у випадку з властивостями, для використання методів об'єкта Math слід посилатися безпосередньо на об'єкт, а не на його копії. Для прикладу напишемо функцію, яка повертатиме діаметр виходячи з площі кола:

Function CircleDiam(Square) ( Radius = Math.sqrt(Square / Math.PI) ; )

Щоб скористатися нею на практиці, можна вдатися до допомоги методів prompt та alert:

Var sq = prompt("Введіть площу",1); var di = CircleDiam (sq); alert("Діаметр кола: "+di);

Роботу цих та інших методів об'єкта Math можна переглянути у файлі math.html.

Об'єкт Number

Об'єкт Number є уявленням простих числових типів. Він має спеціальні властивості для числових констант, таких як «максимальне число», «не число» і «нескінченність». Для створення нового об'єкта типу Number використовують наступний синтаксис:

New Number(Значення)

На практиці використання об'єкта Number найчастіше зводиться до використання його констант під час перевірки аргументів на допустимість та відстеження помилок часу виконання. Наприклад, щоб перевірити, чи є змінною числом чи ні, можна використовувати такий спосіб:

If (x! = Number.NaN);

У разі умова буде істинним, якщо змінна x містить число, оскільки він порівнюється зі спеціальним значенням – NaN, що означає «не число». Крім NaN, можна використовувати інші спеціальні значення – всі вони є властивостями об'єкта Number:

  • MAX_VALUE – максимальне можливе число
  • MIN_VALUE – мінімальна можлива кількість
  • NaN - не число (Not a Number)
  • NEGATIVE_INFINITY – «негативна нескінченність», спеціальне значення, що повертається у разі переповнення
  • POSITIVE_INFINITY – «позитивна нескінченність», спеціальне значення, що повертається у разі переповнення

Всі ці властивості є константами, тому їх використання створювати новий об'єкт типу Number не требуется. Крім перерахованих вище властивостей, для Number визначені так само стандартні властивості constructor і prototype

Крім властивостей, об'єкт Number, очевидно, має методи. Крім стандартних методів toSource, toString і valueOf, в JavaScript 1.5 з'явилися 3 нових власних методи об'єкта Number - toExponential, toFixed і toPrecision. Всі вони призначені для перетворення чисел на рядки на основі того чи іншого формату. Так, метод toExponential перетворює число у рядок у вигляді числа з експонентою, метод toFixed – у рядок, що містить число з фіксованою кількістю знаків після коми, а метод toPrecision використовує один із цих способів, залежно від числа та виділеної кількості знаків.

Досліджуємо ці методи докладніше, навіщо розглянемо їх синтаксис:

Метод([ЧислоЗнаків])

Очевидно, що для всіх методів число знаків позначає число знаків після коми, проте якщо для методу tofixed значенням за замовчуванням (тобто якщо нічого не вказано) буде 0, то для toExponential і toPrecision – кількість знаків, необхідне для виведення числа повністю. Щоб краще розібратися з роботою та відмінностями всіх цих методів, розглянемо їх на прикладі лістингу 4.5:

Лістинг 4.5. Методи toExponential, toFixed і toPrecision

Методи об'єкта Number

Тут ми знову (як і в лістингу 4.4) скористалися функцією, що виводить спочатку вираз, а потім результат його інтерпретації, тільки назвали її в даному випадку printNumber. Далі слідує власне оголошення змінної, над якою будуть проводитися обчислення. В даному випадку ми оголосили її як об'єкт типу Number, хоча насправді можна було б обмежитися і простим оголошенням змінної (x = 12.45678). Нарешті, документ відкривається для запису і в нього спочатку виводиться значення змінної x без будь-яких явних перетворень (але ми вже знаємо, що насправді тут автоматично застосовується метод toString()), після чого всі три методи, що досліджуються, викликаються спочатку без вказівки числа знаків, а потім – з параметрами 2 та 4. Результатом роботи цього сценарію буде 10 рядків, що містять пари «вираз: результат обробки» (рис. 4.9).

Мал. 4.9.

На закінчення залишається ще раз відзначити, що дані методи з'явилися лише у JavaScript 1.5 і, відповідно, не працюють у браузерах Netscape 4, MSIE 4/5 та Opera до версії 7.0. У той же час вони забезпечують більш гнучкі можливості форматування чисел при виведенні, ніж, скажімо, метод round() об'єкта Math.

2011-08-01 // Чи є питання, пропозиції, зауваження? Ви можете

Давним-давно, за часів XHTML/HTML4 у розробників було лише кілька можливостей, якими могли користуватися у тому, щоб зберігати довільні дані, які стосуються DOM. Ви могли винаходити власні атрибути, але це було ризиковано - ваш код не був би валідним, браузери могли ігнорувати ваші дані, і це могло викликати проблеми, якщо назва збігалася зі стандартними атрибутами HTML.

Тому більшість розробників зав'язувалися на атрибути class або rel, оскільки вони були єдиним розумним способом зберігати додаткові рядки. Наприклад, припустимо, що ми створюємо віджет для відображення повідомлень типу тимчасової лінії повідомлень у Twitter. В ідеалі JavaScript повинен мати можливість конфігурування без необхідності переписувати код, тому ми визначаємо ідентифікатор користувача в атрибуті class, наприклад:

Наш JavaScript код буде шукати елемент з ID msglist. За допомогою скрипту ми будемо шукати класи, що починаються з user_ , а bob у нашому випадку буде ідентифікатором користувача, і ми відобразимо всі повідомлення цього користувача.

Скажімо, ми хотіли б також задати максимальну кількість повідомлень, і пропускати повідомлення старше шести місяців (180 днів):

Наш атрибут class дуже швидко захаращується - простіше припуститися помилки, а розбір рядків на JavaScript стає все складнішим.

Data-атрибути HTML5

На щастя, в HTML5 була введена можливість використовувати атрибути користувача. Ви можете використовувати будь-яке ім'я в нижньому регістрі з префіксом data-, наприклад:

Користувальницькі data-атрибути:

  • це рядки - у них ви можете зберігати будь-яку інформацію, яка може бути подана або закодована у вигляді рядка, наприклад, JSON. Приведення типів має здійснюватись за допомогою JavaScript
  • повинні використовуватися в тих випадках, коли немає відповідних елементів HTML5 або атрибутів
  • відносяться лише до сторінки. На відміну від мікроформатів, вони повинні ігноруватися зовнішніми системами, типу пошукових систем та пошукових роботів.
Приклад №1 обробки на JavaScript: getAttribute та setAttribute

Всі браузери дозволяють вам отримати та змінити data-атрибути з використанням методів getAttribute та setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Це працює, але має використовуватися лише для сумісності зі старими браузерами.

Приклад №2 обробки JavaScript: метод data() бібліотеки jQuery

Починаючи з версії jQuery 1.4.3, метод data() обробляє data-атрибути HTML5. Вам немає необхідності явно вказувати префікс data-, так що подібний код працюватиме:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

Але як би там не було, майте на увазі, що jQuery намагається конвертувати значення таких атрибутів у підхідні типи (булеві значення, числа, об'єкти, масиви або null) і торкнеться DOM. На відміну від setAttribute метод data() фізично не замінить атрибут data-list-size - якщо ви перевірите його значення поза jQuery - воно все ще залишиться рівним 5.

Приклад №3 обробки на JavaScript: API для роботи з наборами даних

І, нарешті, ми маємо API для роботи з наборами даних HTML5, яке повертає об'єкт DOMStringMap. Необхідно пам'ятати, що data-атрибути відображаються в об'єкт без префіксів data- , з назв забираються знаки дефісу, а самі назви конвертуються в camelCase, наприклад:

Ім'я атрибуту Ім'я API набору даних
data-user user
data-maxage maxage
data-list-size listSize

Наш новий код:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Цей API підтримується всіма сучасними браузерами, але не IE10 і нижче. Для таких браузерів існує обхідний шлях, але, напевно, куди практичніше використовувати jQuery, якщо ви пишете для старих браузерів.

При роботі з датою та часом у JavaScript використовується об'єкт Date. Думаю, що не треба пояснювати, як часто доводиться працювати з датою та часом. І в цій статті Ви дізнаєтеся, як це робити у JavaScript .

Почнемо, за традицією, з конструкторів об'єкту Date. Їх цілих чотири. Перший конструктор без параметрів, і він повертає поточний час та дату:

Var date = New Date();
document.write(date);

В результаті, Ви побачите щось у цьому дусі: "Thu Oct 14 2010 11:42:06 GMT+0400".

Другий конструктор об'єкта Date – це конструктор з одним параметром. Цей параметр містить кількість мілісекунд, що пройшли з 01.01.1970 (зародження епохи Unix). Наприклад, так:

Var date = New Date (135253235);
document.write(date);

В результаті Ви побачите наступне: "Fri Jan 02 1970 16:34:13 GMT+0300".

Наступний конструктор дозволяє створити об'єкт Date із завданням наступних параметрів: року, місяця та числа:

Var date = New Date (2010, 0, 12);
document.write(date);

Результат: "Tue Jan 12 2010 00:00:00 GMT+0300 ". Також зауважте, що 0-ий місяць – це січень, а 11-ий – це грудень.

І останній конструктор класу Date JavaScript дозволяє створити об'єкт Date з усіма параметрами дати і часу: рік, місяць, число, години, хвилини і секунди.

Var date = New Date (2010, 0, 12, 23, 45, 12);
document.write(date);

Вийде ось такий рядок: "Tue Jan 12 2010 23:45:11 GMT+0300". Ось і всі конструктори об'єкта Date в JavaScript, які нам надали розробники.

Особливих властивостей у класу Date немає, тому одразу переходимо до методів. Почнемо відразу з групи методів, які працюють абсолютно однаково, але кожен із них повертає свій елемент дати та часу:

Var date = New Date();
document.write("Рік - " + date.getFullYear() + "
");
document.write("Місяць -" + date.getMonth() + "
");
document.write("Кількість -" + date.getDate() + "
");
document.write("День тижня -" + date.getDay() + "
");
document.write("Година -" + date.getHours() + "
");
document.write("Хвилина -" + date.getMinutes() + "
");
document.write("Секунда - " + date.getSeconds() + "
");
document.write("Міллісекунда - " + date.getMilliseconds() + "
");
document.write("Кількість мілісекунд минулих з 01.01.1970 - " + date.getTime() + "
");

Запустивши цей скрипт, Ви миттєво зрозумієте, що кожен із цих методів робить. Єдине, що хочеться помітити, що нумерація днів тижня починається також із нуля. Причому неділя має індекс 0, а субота – 6.

Є аналогічні методи, але що показують дату і час за Гринвічем. Давайте напишемо такий код:

Var date = New Date();
document.write("Рік - " + date.getUTCFullYear() + "
");
document.write("Місяць - " + date.getUTCMonth() + "
");
document.write("Кількість -" + date.getUTCDate() + "
");
document.write("День тижня -" + date.getUTCDay() + "
");
document.write("Година -" + date.getUTCHours() + "
");
document.write("Хвилина -" + date.getUTCMinutes() + "
");
document.write("Секунда - " + date.getUTCSeconds() + "
");
document.write("Міллісекунда - " + date.getUTCMilliseconds() + "
");

Запустивши цей скрипт, Ви дізнаєтесь про поточну дату та час на Грінвічі .

Протилежними методами get() є методи - set() . Якщо перші повертають певні значення, останні, навпаки, їх змінюють. Власне, цей скрипт я міг би не наводити, але щоб не залишилося жодних питань, давайте це зроблю:

Var date = New Date();
date.setFullYear(1990);
date.setMonth(11);
date.setDate(15);
date.setHours(9);
date.setMinutes(20);
date.setSeconds(0);
date.setMilliseconds(10);
document.write(date);

Сподіваюся, Ви звернули увагу, що методу setDay() немає. Це говорить про те, що день тижня підбирається залежно від року, місяця та числа.

Існує також аналогічні методи для Грінвіча. Тільки додається приставка UTC, наприклад, для зміни місяця використовується метод setUTCMonth().

І останній метод - це setTime(). Приймає як параметр число мілісекунд минулих з 01.01.1970:

Date.setTime(39293012);
document.write(date);

В результаті Ви побачите ось це: "Thu Jan 01 1970 13:54:53 GMT+0300".

Ось і всі конструктори та методи об'єкта Date у JavaScript.

На уроці буде розглянуто теми Javascript об'єктів. Йтиметься про об'єкти користувача: створення об'єкта в JavaScript, робота з властивостями і методами об'єкта, а також JavaScript прототипами. Коротко викладається робота з об'єктами Location, Navigator, Screen


Завдання сайту сайт – отримання користувачами практичних навичок роботи з мовою. Лабораторні роботи з JavaScript, викладені в міру збільшення їх складності і підкріплювані наочними прикладами, дозволять з легкістю сприйняти матеріал, що вивчається, і навчитися самостійно створювати «живі», динамічні веб-сторінки.


У javaScript існує кілька видів об'єктів:

  • вбудовані об'єкти
  • об'єкти браузера
  • об'єкти, які програміст створює самостійно (користувацькі)

Більшість з яких вже були розглянуті в попередніх уроках.

Про об'єкти браузера в JavaScript йтиметься в подальших уроках.

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

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

Існує 2 способи створення об'єктів:

  • Використання ініціалізації об'єкта (або створення об'єктів-колекцій)
  • Використання конструктора об'єктів ()
  • Створення об'єктів-колекцій

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

    Важливо: Варто зауважити, що значення не можна використовувати цифру: myObg.rost = 2 // НЕ МОЖНА! myObg.rost = "2" // можна

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


    ✍ Рішення 1:

      var myBrowser = новий 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);

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

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

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

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

  • спочатку створюється клас з допомогою конструктора;
  • потім створюється новий об'єкт з урахуванням конструктора.

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

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

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

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

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

    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 = новий myBrowser ("MozillaFirefox","3.5"); // НЕ ВІРНО! !!

    Важливо: У разі створення об'єкта-колекції не можна створювати екземляр класу, оскільки це не клас


    Завдання js 6_1. Створити об'єкт Співробітник, який містить відомості про співробітників певної фірми, такі як Ім'я, Відділ, Телефон, Зарплата (використовувати функцію-конструктор та ключове слово this). Створити екземпляр об'єкта

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

    Ім'я_об'єкта. ім'я_властивості

    1 2 agent007.Ім'я = "Бонд" ; alert(agent007.Ім'я);

    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(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"

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

    Значення властивості можна додати для:

    • конкретного екземпляра об'єкта;
    • цілого класу об'єктів

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

    ім'я_об'єкта. ім'я_властивості = значення

    ivanov.biology = "відмінно";

    Важливо: У прикладі властивість визначається для конкретного об'єкта, а не для класу об'єктів!

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

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

    Student.prototype.biology = "відмінно";

    Важливо: У прикладі властивість (за замовчуванням) задається класу об'єктів! Це зроблено за допомогою prototype; прототип - об'єкт, що визначає структуру

    1 2 Student.prototype .email = " [email protected]" ; alert(ivanov.email ) ; // видасть " [email protected]"

    Student.prototype.email=" [email protected]"; alert(ivanov.email); // видасть " [email protected]"

    Приклад: Приклад виведення всіх властивостей об'єкта зі значеннями

    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] + "
    " ) ; }

    var summerTour=( turkey: 2000, spain: 3000, egypt: 1000); var option; for (option in summerTour)( document.write(option + ":" + summerTour + "
    "); }

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

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

    Приклад: Створити клас об'єкта Car (автомобіль) із трьома властивостями: name (назва), model (модель), color (колір). Створити екземпляр класу із конкретними значеннями властивостей. Потім через створений екземпляр додати до класувластивість owner (власник) з конкретним значенням за замовчуванням ( Іванов). Вивести всі значення властивостей створеного екземпляра

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

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

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

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

    • 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. Створити клас об'єктів для роботи туристичної фірми з методом підрахунку вартості поїздки з розрахунку: кількості осіб * кількість днів * тариф країни. Створити екземпляр об'єкта 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(""); document.write(this .toString()); document.write("");) // використовуємо змінений клас var s = new String ("Це рядок"); s.color = "red"; s.write();

    /* Зміна прототипу */ // Додавання якості за промовчанням до вбудованого об'єкта String.prototype.color = "black"; // Додавання (зміна) методу до вбудованого об'єкту String.prototype.write = stringWrite; function stringWrite()( document.write(""); document.write(this.toString()); document.write(""); ) // використовуємо змінений клас var s = new String("Це рядок"); s.color = "red"; s.write();

    Важливо: До об'єкта Math не можна додавати властивості та методи


    Завдання js 6_4. Доповніть код програми для виконання завдання: До вбудованого класу String додати метод printMe() , який виводить слово "Ура!"як заголовок (тег h ...), вказаного користувачем рівня ().
    Рівень заголовка (1, 2 … 6) можна додати як властивості класу String .
    Згадаймо, як мають виглядати теги заголовків у HTML:

    Заголовок

    Доповніть код:

    1 2 3 4 5 6 7 8 String .prototype .uroven = "1"; ... функція printZagolovok () ( ... ... ) var s = new ...; ...

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

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

  • Створення об'єктів-колекцій
    • 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] + "!}
    "); // Перебір властивостей)) myBook.show = myBookShow; myBook.show();

    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]+"!}
    "); // Перебір властивостей)) myBook.show=myBookShow; myBook.show();

  • Створення класів-конструкторів
    • 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 ) ; book.show();

    function myBook(title,price)( // визначення властивостей this.title = title; this.price = price; // визначення методу this.show = show; function show() ( document.write(" Назва: " + this.) title); document.write("Ціна:" + this.price); book.show();> Перейти на головну сторінку ... ...

  • Перейти на головну сторінку
  • ...
  • ...

    • *Складне: кількість пунктів меню, їх назви та 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] + "
    " ) ; ) // функція виовда конкретних властивостей об'єкта navigator function userDetails () ( document.write ( "

    Назва браузера: + navigator.userAgent +
    " ) ; document.write ("Мова браузера: " + navigator.language + "
    " ) ; document.write (" Назва ОС: " + navigator.oscpu + "
    " ) ; document.write ("Чи включені куки: " + navigator.cookieEnabled + "
    " ) ; document.write ("Чи підключено Інтернет: " + navigator.nLine + "
    " ) ; ) userDetails() ;

    var option; // виведення всіх властивостей об'єкта navigator for (option in navigator)(document.write(option + ":" + navigator+ "
    "); ) // функція виведення конкретних властивостей об'єкта navigator function userDetails ()( document.write("

    Назва браузера: " + navigator.userAgent + "
    "); document.write("Мова браузера: " + navigator.language + "
    "); document.write("Назва ОС: " + navigator.oscpu + "
    "); document.write("Чи включені куки: " + navigator.cookieEnabled + "
    "); document.write("Чи підключено Інтернет: " + navigator.nLine + "
    "); ) userDetails();

    Об'єкт javaScript Screen

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

    function userDetails ()( document.write("Роздільна здатність: " + screen.width + " x " + screen.height + "
    "); document.write("Глибина кольору: " + screen.colorDepth + " x " + screen.height + "
    "); ) userDetails();

    Об'єкт javaScript Location

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

    1 2 3 4 function userDetails() ( document.write ("Адреса завантаженої сторінки: " + location.href + "
    " ) ; ) userDetails() ;

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

    Висновки:

    • За допомогою виразів із ключовим словом new ви можете створювати екземпляри об'єктів, тобто їх конкретні втілення.
    • Більш того, завдяки властивості javascript prototype є можливість додавати до об'єктів нові властивості та методи, придумані користувачем і відсутні у вбудованих вихідних об'єктах.
    • Створення об'єктів можна використовувати для створення бази даних.
    Мережі та комунікації
    Онлайн-сервіси