Obiekty i wyrażenia regularne

Obiekty

 

Obiekty są specjalnym typem danych, na którym dość mocno operuje język JavaScript. Ponieważ oprócz typów prymitywnych (Numbers, Strings, Boolean), chodź i tak te wartości zachowują się podobnie jak obiekty, wszystkie inne są już obiektami.

Tworzenie obiektów:

Możemy je stworzyć na dwa sposoby

 

var obj1 = {};

var obj2 = new Object();

 

Można spróbować opisać ten typ danych odwołując się do życia codziennego. Załóżmy, przechodząc rano po świeże bułki idziemy najczęściej do specjalnego miejsca w którym są wypiekane, czyli piekarni. Ten konkretny budynek możemy potraktować jako obiekt. Każdy z obiektów ma właściwości które w jakiś sposób go opisują. Piekarnia do której chodzę ma żółty kolor elewacji, brązowe drzwi, od frontowej części 2 wielkie okna, posiada komin, oferuje zakup bułek grahamek, sznytek i kajzerek. Ponadto mogę przyjąć że mieści się na

ulicy Sezamkowej. Spróbujmy to zapisać w JS:

 

var piekarnia = {

kolorElewacji: 'żółty',

kolorDrzwi: 'brązowy',

iloscOkien: 2,

komin: true,

ofertaBulek: ['Grachamka', 'Sznytka', 'Kajzerka'],

adres: 'ul. Sezamkowa'

};

 

Stworzyliśmy nowy obiekt który opisuje moją piekarnię i w świecie JS możemy przyjąć że nią jest. To co również dodaliśmy to właściwości tego obiektu, na zasadzie klucz – wartość. Przykładowo jeśli chciałbym teraz by JS zwrócił mi informacje na temat koloru elewacji, mogę to zrobić odwołując się do nazwy obiektu i właściwości oddzielając je kropką.

 

piekarnia.kolorElewacji

 

Jeśli umieściłem to w konsoli, powinna mi zwrócić wartość czyli ‘żółty’.

Przyszła jednak wiosna i szef piekarni stwierdził że należy ją przemalować. Więc żeby zaktualizować tą wartość mogę zrobić to w następujący sposób:

 

piekarnia.kolorElewacji = 'czerwony';

 

Właśnie zaktualizowaliśmy wartość właściwości kolorElewacji. Możemy również zrobić to samo za pomocą innej notacji:

 

piekarnia.['kolorElewacji'] = 'czerwony';

 

Rozpatrzmy kolejny przypadek, właściciel piekarni postanowił dodać nowy element do budynku, załóżmy że skrzynkę na listy. By rozszerzyć obiekt o kolejną właściwość odwołujemy się w bardzo podobny sposób jak przy aktualizowaniu już istniejącej, czyli:

 

piekarnia.skrzynkaNaListy = true;

 

Spróbuj wykonać te operacje w przeglądarce i zaobserwuj że obiekt posiada tą właściwość wywołując jego nazwę w konsoli.

Programowanie obiektowe (OOP)

Jednym z najbardziej podstawowych styli tworzenia kodu, są programowanie strukturalne i obiektowe. Strukturalne polega na zapisywaniu kodu linijka po linijce według działania interpretera. Czasami jednak może się okazać że potrzebujemy czegoś więcej, że nasz projekt składa się z większej ilość plików z rozszerzeniem js, chcemy zapewnić też by kod nie był kilkukrotnie powielany. Do tego właśnie służy programowanie obiektowe. Polega ono na opisywaniu poszczególnych funkcjonalności za pomocą klas i obiektów.

O tym czym jest obiekt już wspominaliśmy, teraz zajmiemy się klasą. Otóż możemy ją porównać do foremki za pomocą której pieczemy ciastka, czyli obiekty. Foremka opisuje kształt, wielkość i do niej wlewa się ciasto, czyli dane.

Żeby utworzyć klasę w JavaScript potrzebujemy do tego funkcji. Dobrą praktyką jest zapisywanie je z dużej litery.

 

function Ciastko(ksztalt, nadzienie, posypka) {
this.ksztalt = ksztalt;

this.nadzienie = nadzienie;

this.posypka = posypka;
}

 

Aby utworzyć teraz obiekt na podstawie tej klasy stosujemy parametr new:

 

var muffinka = new Ciastkto('babeczka', 'czekolada', 'cukier puder');

 

W ten sposób pod zmienną muffinka mamy obiekt, który jako właściwości przyjmuje kształt, nadzienie, posypka, a wartości tych właściwości to te które przekazywaliśmy przy wywołaniu funkcji ciastko.

Widzimy że właściwości zostały dopisane do this. Jest to ciekawa zmienna która odpowiada zakresowi naszego bloku w której się do niej odwołujemy. Czym jest zakres? Zakres to poziom na którym deklarujemy zmienne które są dostępne w jego obszarze. Każda funkcja posiada swój odrębny zakres, przez co zadeklarowane w niej zmienne są dostępne tylko w niej. Więc dodając te właściwości bezpośrednio do this, dopisujemy je do kontekstu i ten kontekst jest potem wykorzystywany przy tworzeniu obiektu.

Oprócz dopisywaniu prymitywnych typów danych, mamy możliwość tworzenia funkcji w obiekcie. W przypadku OOP takie funkcje określa się jako metody.

W pierwszym przypadku dopisujemy przy deklaracji klasy:

 

function Ciastko(ksztalt, nadzienie, posypka) {
this.ksztalt = ksztalt;

this.nadzienie = nadzienie;

this.posypka = posypka;

this.metoda = function () {
// kod
}
}

 

Służą one najczęściej do wykonywania operacji na obiekcie, czyli np. zmiany wartości, wyliczeń na podstawie wartości obiektu itp. Przykładowo, metoda która zwróci nadzienie będzie wyglądała w następujący sposób:

 

function Ciastko(ksztalt, nadzienie, posypka) {
this.ksztalt = ksztalt;

this.nadzienie = nadzienie;

this.posypka = posypka;

this.jakieNadzienie = function () {
return this.nadzienie;
}
}

 

Przy wywołaniu obiektu stworzonego za pomocą tej funkcji widzimy że jakieNadzienie stało się również jego właściwością. W JS każdy obiekt również posiada swoją wartość __proto__.

Dokonajmy eksperymentu, wywołaj w konsoli nową tablicę. Jak zapewne zauważysz ta tablica ma wartość proto. Pod nią znajdują się te metody które wyszczególniliśmy powyżej.

Żeby dodać metodę za pomocą proto, należy wykorzystać następujący zapis:

 

function Ciastko(ksztalt, nadzienie, posypka) {
this.ksztalt = ksztalt;

this.nadzienie = nadzienie;

this.posypka = posypka;

this.jakieNadzienie = function () {
return this.nadzienie;
}
}

Ciastko.prototype.jakieNadzienie = function () {

return this.nadzienie;

}

 

Poniższy przykład zadziała w takim sam sposób jak poprzedni z tym że ta metoda będzie już do znalezienia w wartości proto.

 

Wyrażenia regularne

 

Wyrażenia regularne stanowią doskonały sposób na badanie i modyfikowanie tekstu. Dzięki swej olbrzymiej elastyczności pozwalają w łatwy sposób pobierać pasujące fragmenty tekstu. To tyle książkowej teorii. A czym są wzorce w praktyce? Powiedzmy, że mamy kod pocztowy. Kod taki można opisać w następujący sposób: na początku są 2 dowolne cyfry, potem znak myślnika, po czym występują trzy dowolne cyfry (np. 02-380). Powyższy opis kodu pocztowego to właśnie wzorzec. Powiedzmy, że w jakimś tekście chcielibyśmy znaleźć takie kody pocztowe. Problem w tym, że nie wiemy jakie one mają numery... I tutaj właśnie pomogą nam wzorce.

Przykładowy wzorzec może mieć np postać:

 

/^[a-zA-Z]{2,}\s[a-zA-Z]{2,}$/

 

Aby w Javascript korzystać z wyrażeń regularnych, musimy utworzyć obiekt RegExp(wyrażenie, flaga), który przyjmuje 2 argumenty: wyrażenie, którym będziemy testować, oraz dodatkowe flagi, które poznamy w tym rozdziale.

 

var reg = new RegExp("pani?" , "gi")

lub

var reg = /pani?/gi

 

Metaznaki

Każdy wzorzec składa się z meta znaków, czyli specjalnych znaków, które opisują jak mają wyglądać wyszukiwane fragmenty tekstu. Przykładowo wzorzec składający się z meta znaków p.p. będzie pasował do słowa "popo", ale równie dobrze będzie pasował do słowa "papi".

Flagi

Poza wymienionymi meta znakami istnieją specjalne parametry (flagi), które oddziałują na wyszukiwanie wzorców.:

Klasy znaków

Dodatkowo Javascript udostępnia specjalne klasy znaków. Zamiast wyszukiwać wszystkie litery za pomocą [a-zA-Z_] możemy skorzystać z klasy znaków \w.