obiekty JavaScript

Obiekty JavaScript

złożone typy zmiennych. Grupowanie powiązanych ze sobą danych i funkcji do ich przetwarzania.

 

składają się z właściwości (zbiór własności) i metod.

 

podczas pracy na więcej niż jednym oknie lub korzystając z frame możemy mieć kilka obiektów window z których każdy będzie miał własny obiekt document. Aby sprecyzować należy użyć nazwy okna i nazwy dokumentu.

znak . łączy obiekt z jego właściwościami / metodami

 

Wartości typu łańcuchowego, liczbowego, logiczne nie są obiektami. Wartości te są niezmienne.

 

Tworzeni obiektu poprzez {}


var myObject = {
wlasnosc1: true,
wlasnosc2: ['e1', 'e2'],
"inna wlasnosc": "wartość własności"
};

myObject.newWlasnosc = true;

console.log(myObject.wlasnosc1);
// true

 

Pobranie wartości obiektu poprzez [”] lub (notacja kropkowa)


myObject['wlasnosc1];

myObject.wlasnosc1;

Odczytanie nie istniejących własności – undefined

 

Listę wszystkich kluczy w obiekcie uzyskujemy poprzez metodę Object.keys():


Object.keys(myObject);

 

Przypisanie wartości do własności poprzez = – myObject.wlasnosc3 = true;

Usunięcie własności z obiektu poprzez delate – delate myObject.wlasnosc3;

 

Zapytanie o istnienie własności poprzez in – „wlasnosc3” in myObject; – jeśli jest otrzymujemy true, jeśli nie ma otrzymujemy false

Dwuargumentowy operator in stosuje się do obiektów i łańcuchów.

 

Z obiektów można tworzyć struktury danych np:


var list {
  value: 1,
  addition: {
    value: 2,
    addition: {
      value: 3,
      addition: null
    }
  }
};

Array, Tablica – rodzaj obiektu przystosowany do przechowywania sekwencji elementów.

musi być zadeklarowana.

Pozycje tablicy indeksowane od 0. Odwołanie do elementu poprzez podanie nazwy tablicy i indeksu elementu.

 

właściwość – length – bieżąca liczba elementów tablicy

metody

 

typeof[1,2] -> zwraca łańcuch ‚object’

 

Tablica obiektów:


  var journal = [
    {events: ["job", "walk", "pineapple", "jogging", "sleeping"],
    happines: false},
    {events: ["job", "walk", "watermelon", "cycling", "forest", "bath"],
    happines: false},
    {events: ["sauna", "cycling", "yoga", "mango", "beer"],
    happines: true},
  ];

Korelacja – miara zależności między zmiennymi (statystycznymi, nie programistycznymi). Wyrażona najczęściej jako współczynnik z przedziału -1 do 1.

0 – zmienne w żaden sposób nie powiązane

1 – idealnie powiązane

-1 – idealna, odwrotna korelacja

 

Zmienne binarne (logiczne) – miara korelacji poprzez współczynnik fi (φ) – dla jego obliczenia potrzebna tabela n z informacjami ile razy zaobserwowano różne kombinacje dwóch zmiennych

 

Konstrukcja pętlowa do przeglądania własności obiektów:


for (var event in map) {
  text += "wynik dla <b>" + event + "</b> wynosi " + map[event] + "</br>";
}

Obiekt window

okno przeglądarki.

odnosi się do bieżącego okna (zawierającego skrypt) – słowo kluczowe self.

 

jego obiekty potomne:

 

właściwości:

 


window.location.host : you'll get sub.domain.com:8080 or sub.domain.com:80
window.location.hostname : you'll get sub.domain.com
window.location.protocol : you'll get http:
window.location.port : you'll get 8080 or 80
window.location.pathname : you'll get /virtualPath
window.location.origin : you'll get http://sub.domain.com *****

 

metody:

 


myWin=window.open('','myWin','toolbar=0,status=0,width=100,height=100');

myWin.close();

 

odwołanie do ramek – parent.nemOfFrame lub parent.frames[0]

 

Obiekt document

obiekt potomny (właściwość) obiektu window. Bieżący dokument w oknie.

właściwości:

 

obiekty potomne obiektu document:

 

Obiekt link

dokument może zawierać wiele takich obiektów z których każdy zawiera informację o łączu wskazującym adres.

Obiekty link dostępne są w tablicy links. Każdy obiekt link (czyli element tablicy links) ma właściwości.

właściwości:

 

Obiekt anchor

Obiekty anchor dostępne są w tablicy anchors. Każdy obiekt anchor (czyli element tablicy anchors) ma właściwości.

właściwości:

 

Obiekt history

obiekt potomny (właściwość) obiektu window.

Zawiera info o adresach url odwiedzanych przed i po bieżącym, zawiera metody pozwalające przejść do wcześniejszej lub następnej lokalizacji.

właściwość:

 

metody:

 

właściwości które z uwagi na bezpieczeństwo nie są dostępne w przeglądarkach:

 

Obiekt navigator

Zawiera informacje dotyczące przeglądarki, nazwa, wersja, język, system operacyjny na którym została uruchomiona.

Nie należy do modelu DOM – odwołanie do niego wprost.

właściwości:

 

Obiekt location

obiekt potomny (właściwość) obiektu window.

info o bieżącym adresie url otwartym w oknie.

 

Obiekt arguments

podczas wywoływania funkcji do środowiska dodawana jest zmienna arguments – obiekt zawierający wszystkie argumenty przekazane do funkcji.

posiada własność length – ile argumentów zostało przekazanych do funkcji. Zawiera po jednej własności dla każdego argumentu o nazwach 0, 1, 2

 

Obiekt Math

przestrzeń nazw utrzymująca wszystkie funkcje i wartości w jednym pakiecie zamiast jako zmienne globalne.

metody obiektu Math

 

Obiekt Date

nie ma właściwości, aby ustawić lub pobrać wartość należy użyć jego metod.

Daty są przechowywane jako liczba milisekund od północy 1 stycznia 1970r – tzw Epoką (en. epoch). Daty przed tym dniem są reprezentowane przez liczby ujemne. We wcześniejszych wersjach JS nie były one dozwolone.

 

dostępne formaty tworzenia obiektu Date:


var myDate = new Date();
var myDate1 = new Date('April 13, 2009 09:09:09');
var myDate2 = new Date('4, 13, 2009');

 

Ustawienie:

setDate – ustawia dzień miesiąca,

setMonth – ustawia miesiąc – 01 – January, 12 – December, 0 – December rok wcześniej,

setFullYear – ustawia rok,

setTime() – ustawia datę i czas poprzez liczbę milisekund które minęły od 01.01.1970

setHours() – ustawia godzinę,

setMinutes() – ustawia minuty,

setSeconds() – ustawia sekundy,

 


var myDate4 = new Date();
myDate4.setFullYear(2001);

 

Pobranie:

getDate – pobiera dzień miesiąca,

getMonth – pobiera miesiąc,

getFullYear – pobiera rok,

getTime() – pobiera datę i czas poprzez liczbę milisekund które minęły od 01.01.1970

getHours() – pobiera godzinę,

getMinutes() – pobiera minuty,

getSeconds() – pobiera sekundy,

getTimezoneOffset() – przesunięcie lokalnej(lokalizacja przeglądarki www) strefy czasowej względem UTC

getUTCString() – konwertuje wartość czasu na tekst, używa czasu UTC

toLocalString() – konwertuje wartość czasu na tekst, używa czasu lokalnego

Date.parse – konwertuje łańcuch na obiekt Date (zmienia tekst na liczbę ms od 01.01.1970)

Date.UTC() – konwertuje wartość czasu (milisekundy) na czas UTC.

 

 


var myDate5 = new Date();
myDate6 = myDate5.getTimezoneOffset();

 

Obiekt globalny

Zakres globalny, przestrzeń zawierająca zmienne globalne. Każda zmienna globalna jest jedną z własności obiektu globalnego.

Obiekt globalny w przeglądarce to zmienna window

 

 

Obiekt String

JS przechowuje łańcuchy jako obiekty string.

 

variable = ‚this is text’;

variable = new String(‚this is text’);

 

właściwość – length – długość łańcucha, właściwość tylko do odczytu,

var name = „Agnieszka”;

name.length;
„Agnieszka”.length;

 

metody przetwarzania łańcucha

 

metody zmieniające wygląd

 

Obiekt potomny

 

Konstruktor obiektu

funkcja do tworzenia nowych obiektów

przyjmuje parametry dla zainicjowania nowego obiektu i przypisuje je do odpowiednich właściwości. Nazwa funkcji = nazwa obiektu.

 

tworzenie właściwości i metod obiektu z wykorzystaniem this odwołującego się do obiektu:


function myNewObject(v1, v2, v3, v4) {
  this.name1 = v1;
  this.name2 = v2;
  this.name3 = v3;
  this.name4 = v4;
  this.PrintMyNewObject = printMyNewObject;
}

function printMyNewObject() {
  line1 = "parametr1: " + this.name1 + "\n";
  line2 = "parametr2: " + this.name2 + "\n";
  line3 = "parametr3: " + this.name3 + "\n";
  line4 = "parametr4: " + this.name4 + "\n";

  document.write(line1, line2, line3, line4);
}

asia = new myNewObject('Mount Everest', 'K2', 'Kanczendzonga', 'Lhotse');

 

Dodanie nowego obiektu z danymi – instancja (instance) obiektu myNewObject.

może istnieć kilka egzemplarzy zdefiniowanego obiektu.

 

Można stworzyć pierw pusty obiekt a potem przypisać wartości:

europe = new myNewObject();
europe.v1 = 'Mont Blanc';
europe.v2 = 'Matterhorn';
europe.v3 = 'Eiger';
europe.v4 = 'Jungfrau';

 

wywołanie: europe.PrintMyObject();

 

konstruktor obiektu i tworzenie nowego obiektu:


function Mountain(name, height) {

this.name = name;

this.height = height;

}

mtEverest = new Mountain ("Mount Everest", "8848");

with – wskazuje obiekt który jest domyślny dla grupy instrukcji. Właściwości bez kompletnego odwołania do obiektu odwołują się do niego.

 

deklaracja zmiennej i jej typ

var x = „John”;
var y = new String(„John”); – definicja string jako obiektu

var x = 123;
var y = new Number(123);

typeof x // return string
typeof y // return object

 

Rozszerzanie istniejących obiektów

rozbudowanie o nowe właściwości i metody (np obiekt Array) poprzez słowo kluczowe prototype. Pozwala na zmianę definicji obiektu na zewnątrz jego funkcji konstruktora.

 

prototyp – nazwa dla definicji obiektu lub funkcji konstruktora.

 

rozszerzenie tylko jednego egzemplarza obiektu:

mtEverest.firstAscent = „Edmund Hillary”;

 

rozszerzenie dla całego obiektu poprzez prototype z ustaleniem wartości domyślnej

Mountain.prototype.firstAscent = „name surname”;

 

#JavaScript

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.