JS:Obiekty, tablice, JSON

Transkrypt

1 1 JS:Obiekty, tablice, JSON SYSTEMY SIECIOWE Michał Simiński

2 2 Obiekty i takblice Jak to wygląda z tymi obiektami? Tablice w JS Tablice w JS, czyli obiekty Tablice w JS metody Tablice w JS sortowanie

3 Jak to wygląda z tymi obiektami? vol.1 3 Obiekt w programowaniu, to struktura prezentująca okrojone dane na temat pewnego obiektu istniejącego w rzeczywistości. Zmienna w JS jest kontenerem do przechowywania wartości. Obiekt w JS jest zmienną, która pozwala przechowywać wiele wartości. Wartości w obiektach są nazwane, są prezentowane poprzez pary klucz:wartość. Każda taka para oddzielona jest od następnej przecinkiem. Te pary nazywane są własnościami obiektu. Pusty obiekt definiujemy: var obiekt = {};

4 Jak to wygląda z tymi obiektami? vol.2 4

5 Jak to wygląda z tymi obiektami? vol.3 5 Na odczytanie danych z własności obiektów istnieją dwa sposoby: I - obiekt.własność II- obiekt[ własność ] Wartościami zapisanymi w obiekcie mogą być także obiekty, tablice, tablice obiektów. Obiekty mogą także posiadać metody. Metoda, to własność, która jako wartość ma przypisaną definicję funkcji. Aby wykonać zapisaną metodę korzysta się z: obiekt.metoda() Jeżelk pominiemy po nazwie metody nawiasy, to zwrócona zostanie definicja metody.

6 Jak to wygląda z tymi obiektami? vol.4 6

7 Tablice w JS vol.1 7 Tablica, to zmienna, która pozwala na przechowywanie wielu wartości w postaci jednej zmiennej. Wartościami przechowywane są w osobnych, indeksowanych numerycznie komórkach. Deklaracja pustej tablicy: I var tablica = []; II var tablica = new Array(); Deklaracja tablicy z wartościami: I var tablica = [ Janusz, Andrzej, 23]; II var tablica = new Array( Janusz, Andrzej, 23); Jednakże odradza się wykorzystywanie konstruktora new Array().

8 Tablice w JS vol.2 8 Dodawanie nowych elementów do tablicy może dobywać się przez przypisanie elementu do konkretnego indeksu tablicy: tablica[5] = element. Należy jednak pamiętać, iż może to spowodować powstawanie pustych komórek tablicy, które mogą wywoływać błędy np. przy iteracji w pętli. Zamiast tego można skorzystać z petody push(), która zostanie omówiona w dalszej części prezentacji. Dla tablic można tworzyć pętle iteracyjne. Własność tablicy, length, pozwala na sprawdzenie wielkości tablicy: tablica.length

9 Tablice w JS, czyli obiekty 9 Tablice w JS są zaimplementowane, jako obiekty szczególnego rodzaju. Obiekt posiada własności nazywane (łańcuchy znaków), natomiast tablisa posiada własności indeksowane numerycznie. Wykonianie takiego kodu spowoduje, że zadeklarowana tablica w pierwszej lini, zostanie przekształcona w klasyczny obiekt. Spowoduje to niemożność korzystania z metod dostępnych dla tablic. Spowoduje to chaos. Dwa pierwsze elementy będą dostępne pod indeksem numerycznym, natomiast trzeci, tylko pod nazwą własności lastname.

10 Tablice w JS metody vol.1 10 Dla tablic w JS dostępny jest szereg metod. W dalszej części prezentacji zostaną omówione najpowszechniejsze z metod. Wszystkie metody i własności można znaleźć tutaj.

11 Tablice w JS metody vol.2, konwersja na string a Metoda tostring() tworzy ciąg znaków z elementów tablicy, oddzielając elementy od siebie przecinkiem. Metoda join() tworzy ciąg znaków z elementów tablicy, oddzielając je znakiem, który zostanie przekazany jako parametr metody. Jeżeli metoda zostanie wywołana bez parametru, to domyślnym znakiem będzie przecinek, jak w metodzie tostring(). 11

12 Tablice w JS metody vol.3, dodawanie i wyciąganie Metoda push() dodaje nowy element do tablicy na ostatniej pozycji. Metoda ta zwraca nową długość tablicy. 12 Metoda pop() usuwa z tablicy ostatni element. Metoda ta zwraca wartość usuniętego elementu.

13 Tablice w JS metody vol.4, dodawanie i wyciąganie Istnieją także metody pozwalające na operowanie na pierwszych elementach tablic. Metoda unshift() dodaje do tablicy nowy element na pierwszej pozycji. Metoda ta zwraca nową długość tablicy. 13 Metoda shift() usuwa z tablicy element na pierwszej pozycji. Metoda ta zwraca wartość usuniętego elementu.

14 Tablice w JS metody vol.5, dodawanie elementu Metoda splice() pozwala na dodanie do tablicy dowolnej ilości elementó na wyznaczonych pozycjach. Umożliwia także, określenie ile elementów powinno zostać usuniętych, co pozwala na wykonanie podmiany elementów na konkretnych pozycjach tabeli. Metoda splice(x, Y, Z): X jest parametrem liczbowym, określa pozycję, od której będą wstawiane nowe elementy Y jest parametrem liczbowym, określa ilość elementów, które mają zostać usunięte z tablicy Z jest to element, który ma zostać dodany do tablicy. Elementów może być wiele, oddziela się je przecinkami, jako osobne parametry. 14

15 Tablice w JS metody vol.5, dodawanie elementu 15 Dodawanie elementu Dodawanie elementu z podmianą

16 Tablice w JS metody vol.6, usuwanie elementu W JS isniteje polecenie delete, które można wykorzystać do usunięcia tablicy. Jego użycie może pozostawić w tablicy puste komórki, co może doprowadzić do błędów w działaniu aplikacji. Zamiast niego zaleca używanie sie metod pop() oraz shift(). Ale co w przypadku, gdy jednak chcemy usunąć element ze środkowych komórek tablicy, a nie którejś skrajnej? 16

17 Tablice w JS metody vol.6, usuwanie elementu Można wykorzystać wcześniej opisywaną metodę splice() do usunięcia dowolnego elementu tablicy. W tym celu określa się tylko swa pierwsze parametry metody. Pierwszym parametrem określamy, od której komórki chcemy rozpocząć usuwanie. Drugim parametrem określamy liczbę elementów, które chcemy usunąć. Brak reszty parametrów, spowoduje, że metoda nie wstawi żadnych, nowych elementów do tablicy. 17

18 Tablice w JS metody vol.7, łączenie tablic Metoda concat() pozwala na połączenie kilku tablic w jedną. Metodę wykonujemy na jednej, wybranej tablicy. Jako parametry metody przekazujemy tablice, które chcemy połączyć z tablicą, na której wykonywana jest metoda. Metoda zwraca nową tablicę, która jest połączeniem wszystkich tablic biorących udział w wykonywanej metodzie. 18

19 Tablice w JS metody vol.8, tworzenie podtablicy Metoda slice() pozwala na stworzenie podtablicy pewnej tablicy. Metodę wykonujemy na tablicy, z której chcemy wydzielić fragment. Metoda może zostać wykonana jako jedno lub dwuparametrowa. Pierwszy parametr określa, od którego elementu ma nastąpić podział. Drugi parametr określa, do którego elementu ma nastąpić podział. Jeżeli drugi parametr zostanie pominięty, to podział nastąpi do końca tablicy. Metoda zwraca nową tablicę. 19

20 Tablice w JS sortowanie vol.1, alfabetyczne Metoda sort() pozwala na alfabetyczne sortowanie elementów w tablicy. Metoda reverse() pozwala na odwrócenie zawartości tabeli, czyli sortowanie alfabetyczne malejące. Obydwie metody wykonywane są na tablicy, która ma być posortowana. 20

21 Tablice w JS sortowanie vol.2, numeryczne Metoda sort() pozwala także na sortowanie numeryczne. W tym celu nizbędna jest funkcja porównawcza, która jest przekazywana, jako parametr metody. Funkcja jako parametr otrzymuje dwa elementy tablicy i wykonuje na nich operację odejmowania. Rodzaj wyniku (ujemny, dodatko, zero) determinuje, który z elementów jest większy lub, czy są one sobie równe. 21

22 Tablice w JS sortowanie vol.2, numeryczne Zamienienie miejscami w odejmowaniu zmiennych a i b pozwala na zamianę sortowania rosnącego na malejące. 22

23 Tablice w JS sortowanie vol.3, elementy naj Sposobem na znalezienie w tablicy wartośći największej lub najmniejszej, jest posortowanie elementów tablicy. Gdy dokonamy sorotowania numerycznego rosnącego, to pod indeksem zerowym (tablica[0]) będziemy posiadali wartość najmniejszą. Gdy dokonamy sortowania numerycznego malejącego, to pod indeksem zerowym (tablica[0]) będiemy posiadali wartość największą. 23

24 Tablice w JS sortowanie vol.3, obiekty W momencie, gdy posiadamy tablicę obiektów, możemy także dokonać sortowania takiej tablicy. Sortowanie takiej tablicy odbywa się względem jednj z własności obiektów. W przypadku, gdy własność jest wartością numeryczną, sortowanie jest bardzo zbliżone do numerycznego, korzystającego z funkcji porównawczej. Różnicą jest to, że do funkcji, jako parametry przekazywane są obiekty, tak więc działanie odejmowania nie może być wykonane na parametrach a i b, a na jednej z ich włsności numerycznej. 24

25 Tablice w JS sortowanie vol.3, obiekty 25

26 Tablice w JS sortowanie vol.3, obiekty W przypadku, gdy własność jest ciągiem znaków, również wykorzystuje się funkcję porównawczą. Jest ona jednak trochę bardziej złożona. Własność obiektó należy sprowadzić do postaci z literami o jednakowej wielkośći. Następnie dokonać porównań i zwrócić wartości: -1, gdy a powinien być przed b 1, gdy b powinien być przed a 0, gdzy są one jednakowe pod względem wybranej własności 26

27 Tablice w JS sortowanie vol.3, obiekty 27

28 28 JSON Co to ten JSON? Składnia JSON Wartości w JSON JSON to object i na odwrót JSON i PHP

29 Co to ten JSON? 29 JSON JavaScript Object Notation. JSON jest składnią wykorzystywaną do przechowywania danych i ich wymiany poprzez sieć. JSON jest tekstem zapisywanym z wykorzystaniem obiektowej notacji JavaScript. Dane pomiędzy przeglądarką, a serwerem mogą być przesyłane tylko, jako tekst. JSON pozwala na przesłanie danych ze składnią obiektową JS. Dostarcza także łatwe mechanizmy konwersji obiekt JSON, JSON-obiekt. Dane w JSON mogą być zapisywane w osobnych plikach o rozszerzeniu.json.

30 Składnia JSON 30 JSON inspirując się składnią obiektową JS, jest bardzo zbliżony do tej notacji. Obiekty ograniczane są nawiasami klamrowymi { } Tablice ograniczane są nawiasami kwadratowymi [ ] Dane zapisaywane są w postaci klucz:wartość Dane odzielane są od siebie przecinkiem Ważną różnicą pomiędzy JSON, a notacją obiektową JS jest zapisywanie kluczy jak ciągu znaków (string). W JSON klucze i wartości muszą być zapisane w podwójnym cudzysłowiu.

31 Składnia JSON 31 JSON korzysta ze składni JS, więc danymi zapisanymi w tym formacie możeby zarządzać, jak obiektami. Wyciągać dane z poszczególnych własności, dodawać nowe, nadpisywać istniejąc. Z tablicami w JSON możemy pracować w dokładnie taki sam sposób, jak z tablicami w JavaScript.

32 Wartości w JSON jakie typy są dopuszczane w JSON 32 Łańcuchy znaków (string) Wartości numeryczne Obiekty (obiekty JSON) Tablice Wartości boolean null

33 Wartości w JSON jakie typy nie są dopuszczane w JSON 33 Funkcje obiekty JSON nie mogą zawierać metod Daty undefined

34 JSON to object i na odwrót metoda parse() 34 Dane trafiające do przeglądarki z serwera, to zawsze tekst. Metoda JSON.parse() pozwala na zamianę tekstu w obiekt JavaScript Warto upewnić się, czy tekst jest w formacie JSON, bo metoda rzuci wyjątkiem, jeśli tak nie jest.

35 JSON to object i na odwrót kilka wyjątków 35 W JSON nie możemy zapisywać dat, ale możemy je zapisać w postaci stringa, z zachowaniem odpowiedniego formatu i odtworzyć po pobraniu z parsowaniu JSON.

36 JSON to object i na odwrót kilka wyjątków 36 W JSON nie możemy przechowywać funkcji. Podobnie, jak w przypadku dat możemy je zapisać w postaci stringa. Zaleca się tego unikać, bo funkcje tracą swoje zakresy. Aby przekształcić stringową funkcję należy skorzystać z metody eval()

37 JSON to object i na odwrót funkcja reviver 37 Funkcja reviver to funkcją wykonującą się przy sprawdzaniu każdej własności, przed zwróceniem wartości. Pozwala na odpowiednim przystosowaniu wartości do naszych potrzeb Poniższy przykład pokazuje konwersję stringowej daty, do normalnej daty z wykorzystaniem funkcji reviver.

38 JSON to object i na odwrót metoda stringify() 38 Metoda JSON.stringify() pozwala na przekształcenie obiektu JavaScript w JSON. Jako parametr metody przekazujemy obiekt, który chcemy przekształcić.

39 JSON to object i na odwrót kilka wyjątków vol.2 39 W JSON nie wolno przechowywać dat. Wszystkie daty w obiektach zostaną zamienione na stringi. Stringowe daty można spowrotem przekształcić, jak pokazano wcześniej. W JSON nie wolno przechowywać funkcji. Wszystkie funkcje zapisane w obiekcie zostaną usunięte w czasie przekształcenia. Zarówno klucze i wartości. Aby tego uniknąć można zapisać funkcje w postaci stringa przed przekształceniem. Jak wcześniej zostało wspomniane, nie zaleca się jednak przechowywać funkcji w JSON.

40 JSON i PHP 40 Z zakresu języka PHP jeszcze nic nie zostało zrealizowane. Omawiając temat JSON warto wspomnieć, że w języku PHP istnieją metody, które pozwalają przekształcać JSON. json_decode pozwala na przekształcenie JSON w obiekt PHP json_encode pozwala na przekształcenie obiekt PHP w JSON Posiadając tę wiedzę łatwo można zauważyć, iż dzięki wbudowanym metodą po stronie klienckiej i serwerowej, format JSON jest wygodnym sposobem przesyłania danych pomiędzy tymi warstwami.