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.

• Obiekty Wbudowane – są wbudwane w JS. można na ich podstawie tworzyć własne obiekty, niektóre mogą być używane tylko w standardowej postaci – Date, Array, String, Math
• Obiekty DOM – pozwalają na interakcję skryptów ze stronami www
• Obiekty Użytkownika – tworzone

• window – bieżące okno
• document – odnosi się do strony www
• Array właściwość: length
• Image()

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:

• lista – zbiór zagnieżdżonych obiektów, z których 1 zawiera odniesienie do 2, 2 zawiera odniesienie do 3, itd. Mogą one współdzielić część swojej struktury

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

• join – łączenie elementów tablicy w łańcuch oddzielone przecinkiem lub innym wskazanym znakiem
• reverse – odwrócona wersja tablicy
• sort – posortowana wersja tablicy. Sortowanie alfabetyczne, z użyciem własnej metody sortowania możemy wskazać procedurę porównującą.

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:

• location – zawiera lokalizację (url) dokumentu wyświetlonego w oknie,
• document – informacje o bieżącej stronie www
• history – lista adresów odwiedzonych przed i po aktualnej stronie

właściwości:

• window.close – wskazuje czy okno zostało zamknięte
• window.defaultstatus, window.status – (domyślny) komunikat umieszczenia w pasku stanu
• window.frames[] – tablica obiektów ramek jeśli okno je posiada
• window.name – nazwa ramki, okna otwartego przez skrypt
• window.open(„url”, „WindowName”, „WindowProperties”) – do właściwości należą:
  • width – szerokość w px
  • height – wysokość w px
  •  toolbar (yes – 1, no – 0)
  • lacation (yes – 1, no – 0)
  • directories (yes – 1, no – 0)
  • status (yes – 1, no – 0)
  • menubar (yes – 1, no – 0)
  • scrollbars (yes – 1, no – 0)
  • resizeable (yes – 1, no – 0)
• window.opener – w oknie otwartym przez skrypt, wskazuje okno zawierające skrypt który je otworzył
• window.parent – dla ramki, odwołanie do okna nadrzędnego, które zawiera tę ramkę
• window.screen – obiekt potomny zawierający informacje o ekranie, na którym okno się znajduje – rozdzielczość, głębia kolorów itp, właściwości:
  • height – wysokość
  • width – szerokość
  • availHeight – wysokość dostępna (bez paska zadań)
  • availWidth – szerokość dostępna
  • colorDepth – głębia kolorów 8 – kolory 8-bitowe, 32 – kolory 32-bitowe
• window.self – bieżący obiekt window
• window.top – odwołanie do okna najwyższego poziomu, gdy używane są ramki

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:

• window.moveBy() – przesuniecie okna w nowe położenie względem obecnego X Y
• window.moveTo() – przesuniecie okna w nowe miejsce X Y
• window.resizeBy() – zmiana rozmiaru okna w stosunku do obecnego, width, height
• window.resizeTo() – zmiana rozmiaru okna na wskazane, width, height
• window.setTimeout(’instruction', time) – opóźnienie czasowe dla danego polecenia, czas podany w milisekundach (30000 = 30s)
• window.clearTimeout(zmienna) – zatrzymanie czasu bezczynności

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:

• document.URL – url dokumentu jako proste pole tekstowe
• document.title – tytuł bieżącej strony zdefiniowany przez znacznik <title>
• document.lastModified – data ostatniej modyfikacji
• document.referrer – adres url strony która była wyświetlona przed
• document.bgColor – kolor tła
• document.fbColor – kolor tekstu
• document.linkColor, document.alinkColor, document.vlinkColor – kolory łączy w dokumencie odpowiadają atrybutom link, alink, vlink znacznika <body>
• document.cookie – pozwala odczytać lub ustawić cookie dla dokumentu – info

obiekty potomne obiektu document:

• document.image
  • właściwości:
    • complete – znacznik kreślajacy czy obraz został załadowany w pełni (true, false)
    • hight, width – rozmiar, wartość do odczytu
    • hspace, vspace – reprezentują atrybuty obrazu o tych samych nazwach, wartość do odczytu
    • name – nazwa
    • src – źródło obrazu, wartość do modyfikacji
  • funkcje obsługi zdarzeń
    • onLoad – zakończenie ładowania obrazu
    • onAbort – przerwanie ładowania strony przez użytkownika przed załadowaniem się obrazu
    • onError – nie znaleziono obrazu lub jest on uszkodzony
• document.forms – zbiór formularzy
• document.link – zbiór linków
• document.anchors –  zbiór kotwic
• document.applets – zbiór odwołań do apletów Java osadzonych na stronie

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:

• document.links.length – liczba łączy na stronie
• href – kompletny url pierwszego łącza z tablicy – links[0].href

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:

• document.anchors.length – liczba kotwic na stronie

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ść:

• history.length – długość listy historii

metody:

• history.back – powrót do poprzedniej lokalizacji
• history.forward – przejście do kolejnej lokalizacji
• history.go – przejście na wskazaną przez przesunięcie pozycję listy historii

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

• current – przechowuje url obecnej strony
• previous – przechowuje url poprzedniej strony
• next – przechowuje url następnej strony

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:

• navigator.appCodeName – wewnętrzna nazwa kodowa przeglądarki, (zazwyczaj Mozilla)
• navigator.appName – nazwa przeglądarki, (MIE, Netscape)
• navigator.appVersion – wersja przeglądarki
• navigator.userAgent – nagłówek agenta użytkownika, kompletne informacje o wersji
• navigator.language – język przeglądarki, (pl, en_US)
• navigator.platform – platforma komputerowa przeglądarki (Win, Mac)
• plugIns – zbiór informacji o dostępnych wtyczkach
• mimeTypes – zbiór elementów dostępnych typów MIME

Obiekt location

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

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

• location.href – kompletny url
• location.protocol – protokół, metoda url (http)
• location.host – połączenie nazwy hosta i portu
• location.hostname – nazwa hosta w url (www.webscene.pl)
• loaction.port – numer portu
• location.pathname – nazwa pliku ze ścieżką
• location.search – zapytanie w adresie url
• location.hash – nazwa kotwicy
• location.query – łańcuch zapytania
• loaction.target – atrybut TARGET łącza dzięki któremu jesteśmy na bieżącej lokacji

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

• substring – zwraca fragment tekstu
• toUpperCase – konwersja liter na wielkie
• toLowerCase – konwersj aliter na małe
• indexOf – wyszukuje wystąpienie ciągu znaków
• lastIndexOf – wyszukuje od końca wystąpienie wskazanego ciągu znaków
• link – tworzy łącze HTML z użyciem tekstu z łańcucha
• anchor – tworzy na bieżącej stronie kotwicę

metody zmieniające wygląd

• string.big – wyświetla dużą czcionka – znacznik <big>
• string.blink – wyświetla tekst migający – znacznik <blink>
• string.bold – wyświetla tekst pogrubiony – znacznik <b>
• string.fixed – wyświetla tekst czcionką o stałej szerokości – znacznik <tt>
• string.italics – wyświetla tekst kursywą – znacznik <i>
• string.small – wyświetla mały tekst – znacznik <small>
• string.sub – wyświetla tekst w indeksie dolnym – znacznik <sub>
• string.sup – wyświetla tekst w indeksie górnym – znacznik <sup>

Obiekt potomny

• obiekt będący właściwością innego obiektu
• utworzone poprzez dodanie  – this.nick = new Nickname();

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