Morrison M. - Head First JavaScript. Edycja polska

MagicznaKostka - blog miłośników przestrzennych układanek

lub , musi zostać utworzony jako element DOM wraz z odpowiednimi węzłami potomnymi, w których zostanie umieszczona jego zawartość. W takich przypadkach

zastosowanie właściwości innerHTML zapewnia niesłychaną wygodę i znacznie upraszcza kod aplikacji.

P

: Dlaczego obiekt Blog nie ma żadnych metod?

O: Ambitny… to dobrze! Prawda jest jednak

taka, że jest wiele innych aspektów działania strony MagicznaKostka, o które musimy zadbać, zanim implementacja metod w obiekcie Blog nabierze jakiegokolwiek znaczenia. Ale nie przejmuj się, bez wątpienia metody należą do długofalowego planu tworzenia strony. W końcu metody są ważną częścią każdego dobrze zaprojektowanego obiektu, dotyczy to oczywiście także naszego obiektu Blog.

Nieuporządkowany blog Strona MagicznaKostka w wersji 1.0 wygląda całkiem dobrze, nie jest jednak pozbawiona wad. Renia zauważyła, że wpisy są wyświetlane na stronie w niewłaściwej kolejności — na samym początku powinien się bowiem znajdować najnowszy wpis. Obecnie wpisy są wyświetlane w takiej samej kolejności, w jakiej zapisaliśmy je w tablicy, a bynajmniej nie możemy oczekiwać, że będzie ona zgodna z kolejnością chronologiczną.

Właśnie zdałam sobie sprawę z tego, że nie zawsze zapisuję wpisy w blogu w kolejności chronologicznej… To jest pewien problem!

Użytkownicy oczekują, że na samym początku blogu znajdzie się najnowszy wpis.

422

Rozdział 9.

Wpisy w blogu powinny być prezentowane w odwrotnej kolejności chronologicznej — od najnowszego do najstarszego.

Ożywianie danych

Potrzeba sortowania Renia ma pomysł na rozwiązanie problemu kolejności wpisów w blogu — chce posortować tablicę wpisów na podstawie daty. Ponieważ w języku JavaScript dostępne są pętle i mechanizmy porównywania, zatem nie powinno być problemu z przeanalizowaniem w pętli wszystkich wpisów, porównaniem ich dat i posortowaniem w odwrotnej kolejności chronologicznej (zaczynając do najnowszego wpisu). Blog Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko.

1

14/08/2008

Przejrzenie w pętli wszystkich wpisów w tablicy blogu.

2 Porównanie daty każdego wpisu z datą

Blog

Zmieniamy kolejność tych dwóch wpisów, gdyż drugi jest nowszy do pierwszego.

Udało mi się już ułożyć tę nową układankę. Już mnie znudziła, więc szukam czegoś nowego. 19/08/2008

następnego wpisu.

Ten wpis powinien się pojawić jako pierwszy, gdyż jest najnowszy.

Blog Już mnie głowa rozbolała od zabaw tą nową kostką. Muszę sobie odpocząć.

3 Jeśli następny wpis jest nowszy od bieżącego, to należy je

16/08/2008

zamienić miejscami. Taki sposób sortowania wpisów w blogu wydaje się sensowny i powinien działać, zakładając oczywiście, że dopracujemy szczegóły związane z porównywaniem dat.

Blog Znalazłam w internecie układankę 7×7×7. O rany! Zabawa będ zie super. 21/08/2008

Chwileczkę! Skoro daty są zapisywane w postaci łańcuchów znaków, to w jaki sposób możemy je porównywać i określać, która z nich jest najnowsza, a która najstarsza?

Data zapisana w postaci łańcucha znaków tak naprawdę wcale nie jest datą. W strategii sortowania wpisów zaproponowanej przez Renię pojawił się poważny problem wynikający z faktu, że data zapisana jako łańcuch znaków ma niewiele wspólnego z pojęciem czasu. Innymi słowy, nie ma jak porównać łańcuchów znaków ”14/08/2008” i ”19/08/2008”, by przekonać się, który z nich jest bardziej aktualny — w końcu są to tylko łańcuchy znaków. Oczywiście można porównywać łańcuchy znaków, jednak nie będzie brany pod uwagę specyficzny format, w jakim zapisywane są daty, więc wyróżnienie i porównanie liczby dni, miesięcy i lat nie będzie możliwe. A zatem, zanim zaczniemy poważnie myśleć o sortowaniu wpisów w blogu Reni, musimy poważnie zastanowić się nad sposobem przechowywania dat.

jesteś tutaj  423

Czy widziałeś już moje daty?

Obiekt daty w JavaScripcie Tym, na czym obecnie najbardziej zależy Reni, jest możliwość przechowywania dat w taki sposób, by można je było między sobą porównywać. Innymi słowy, data musi wiedzieć, że jest datą, i stosownie do tego się zachowywać. Chwila… z tego wynika, że data powinna być obiektem! Bo właśnie tak jest, a co więcej, okazuje się, że JavaScript udostępnia wbudowany obiekt, który doskonale spełni wymagania Reni. Data pierwszego wpisu w blogu.

Date setMonth() Metody ustawiające informacje o dacie.

getDate() 14 sierpnia 2008

setYear()

Metody zwracające informacje o dacie.

getDay()

getFullYear()

Wbudowany obiekt Date reprezentuje wybrany moment w czasie.

Obiekt Date reprezentuje moment w czasie (z dokładnością do milisekundy). Jest to jeden z wielu wbudowanych obiektów dostępnych w języku JavaScript. Choć bez wątpienia wewnątrz niego są używane jakieś właściwości, to jednak dla programistów, którzy go używają, są one niewidoczne. Zatem wszelkie operacje na obiektach Date są wykonywane przy użyciu metod. Obiekt Date, podobnie jak nasz niestandardowy obiekt Blog, tworzy się przy użyciu operatora new. Poniżej przedstawiliśmy przykład pokazujący, w jaki sposób można utworzyć obiekt Date, reprezentujący aktualny dzień i godzinę:

ny obiekt var teraz = new Date(); Nowo utworzo my je Date zapisu Obiekt Date tworzymy w zmiennej. przy użyciu operatora new.

Czas przechowywany wewnątrz obiektu Date

Przedstawiony powyżej obiekt Date zostaje zainicjowany informacjami o aktualnej dacie i godzinie. Zwróć uwagę, że składnia używana do utworzenia tego obiektu bardzo przypomina wywołanie funkcji lub metody — nie jest to przypadek, gdyż w rzeczywistości wywołujemy konstruktor obiektu. W wywołaniu konstruktora Date() można przekazać łańcuch znaków określający dowolną datę — inną niż aktualna. Na przykład przedstawiony poniżej obiekt reprezentuje datę pierwszego wpisu w blogu Reni1: var blogDate = new Date(”08/14/2008”);

jest wyrażony w milisekundach.

424

Rozdział 9.

Ten obiekt Date reprezentuje aktualną datę i godzinę.

1

Data jest przekazywana do konstruktora w postaci łańcucha znaków.

W związku z tym, że konstruktor obiektu Date, przyjmujący w wywołaniu ciąg znaków, wykorzystuje metodę parse() obiektu Date w celu odczytania z ciągu poszczególnych elementów daty, ciąg ten powinien mieć określony format. Niestety format popularny w Polsce: DD/MM/RRRR nie jest poprawnie rozpoznawany przez tę metodę, dlatego przy konstrukcji obiektów Date będziemy wykorzystywać format MM/DD/RRRR."

Ożywianie danych

Wyliczanie czasu Jednym z najważniejszych aspektów obiektów jest to, że same doskonale wiedzą, co należy robić z zapisanymi w nich informacjami. Zastanów się na przykład, jak złożone byłoby samodzielne wyliczenie liczby dni pomiędzy dwiema datami. W tym celu musiałbyś w jakiś sposób przeliczyć datę na liczbę dni od jakiegoś określonego momentu czasu (uwzględniając przy tym lata przestępne). A przecież wystarczy pozwolić, by to obiekt Date wykonał za nas całą „brudną” robotę… Zresztą sam spójrz na kod poniższej funkcji obliczającej liczbę dni między dwiema podanymi datami: Funkcja wymaga przekazania dwóch obiektów Date.

Wyznaczoną różnicę między data mi konwertujemy najpierw z milisekun d na sekundy, następnie minuty, godziny, a w końcu na dni. O rany !

function dniMiedzyDatami(data1, data2) { var liczbaDni = (data2 – data1) / (1000 * 60 * 60 * 24); return Math.round(liczbaDni); } Wynik zaokrąglamy i zwracamy; round() jest metodą obiektu Mat h, który dokładniej przedstawimy w dalszej części tego rozdziału.

dniMiedzyDatami(data1, data2);

ćwiczenie

Prosty, lecz potężny kod, który robi to, o co nam chodziło.

Powyższa funkcja ukazuje możliwości obiektu Date, a wszystko dzięki zastosowaniu jednego prostego działania — odejmowania. Cała złożoność zagadnienia, a konkretnie wyliczania różnicy pomiędzy datami, jest w bardzo wygodny sposób ukryta wewnątrz obiektu Date. W powyższym przykładzie pozostaje nam jedynie zająć się odpowiednim przetworzeniem uzyskanego wyniku, którym jest różnica pomiędzy dwiema datami wyrażona w milisekundach. Wystarczy zatem przeliczyć milisekundy na dni, zaokrąglić wynik i uzyskamy bardzo wygodną funkcję, której będzie można wielokrotnie używać, gdy potrzebna nam będzie różnica pomiędzy dwiema datami.

Utwórz dwa obiekty Date dla dat pierwszych dwóch wpisów w blogu Reni. Następnie wywołaj funkcję dniMiedzyDatami(), przekazując do niej utworzone wcześniej daty, i w końcu wyświetl uzyskany wynik w informacyjnym okienku dialogowym. ................................................................................................................................................................................ ................................................................................................................................................................................

jesteś tutaj  425

Rozwiązanie ćwiczenia

ćwiczenie Rozwiązanie

Utwórz dwa obiekty Date dla dat pierwszych dwóch wpisów w blogu Reni. Następnie wywołaj funkcję dniMiedzyDatami(), przekazując do niej utworzone wcześniej daty, i w końcu wyświetl uzyskany wynik w informacyjnym okienku dialogowym.

Tworzymy obiekty Date dla dat dwóch pierwszych wpisów w blogu Reni.

var................................................................................................................................................................................ dataBlogu1 = new Date("08/14/2008"); var................................................................................................................................................................................ dataBlogu2 = new Date("08/19/2008"); alert("Różnica między podanymi datami wnosi " + dniMiedzyDatami(dataBlogu1, dataBlogu2) + " dni."); ................................................................................................................................................................................

Funkcja zwraca różnicę.

Jako argumenty wywołania funkcji przekazujemy dwa obiekty Date.

Ponowna analiza zagadnienia dat w blogu To naprawdę super, że JavaScript udostępnia wbudowany obiekt Date, pozwalający na wykonywanie inteligentnych operacji na datach. Szkoda tylko, że na stronie MagicznaKostka obiekty Blog wciąż przechowują daty w formie łańcuchów znaków, a nie obiektów Date. Jeśli chcemy skorzystać z możliwości, jakie udostępniają obiekty Date, musimy zmodyfikować kod strony tak, by daty były przechowywane jako obiekty Date.

Date

Blog "14/08/2008" "Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko."

Wartość właściwości date obiektu Blog musimy przekształcić z łańcucha znaków do postaci obiektu Date.

14 sierpnia, 2008

Oto pytanie, na które musimy znaleźć odpowiedź: „Czy we właściwości date obiektu Blog zamiast łańcucha znaków można zapisać obiekt Date?”.

426

Rozdział 9.

Ożywianie danych

Obiekt w obiekcie Obiekt Blog jest doskonałym przykładem pokazującym, że czasami obiekty muszą zawierać inne obiekty. Obie właściwości obiektu Blog same są obiektami, a konkretnie — obiektami String. Obiekty String może nie wyglądają jak obiekty, gdyż są tworzone przy użyciu literałów obiektowych poprzez podanie tekstu zapisanego w cudzysłowach. Obiekty Date nie są aż tak elastyczne i trzeba je tworzyć przy wykorzystaniu operatora new. Aby we właściwości date wpisu w blogu zapisać datę w postaci obiektu, musimy utworzyć nowy obiekt Date podczas tworzenia obiektu Blog. Jeśli sądzisz, że zadanie to jest czymś koszmarnym, to może niewielki przykład uspokoi Twoje obawy:

Literał łańcuchowy automatycznie tworzy obiekt String.

Obiekt Blog jest tworzo przy użyciu operatora ny new.

var blogEntry = new Blog("Nic się nie dzieje, tylko pogoda jest koszmarna...", new Date("10/31/2008")); jemy Tworzymy obiekt Date i przekazu (); go w wywołaniu konstruktora Blog także w tym przypadku używamy operatora new.

Powyższy kod pokazuje, jak obecnie tworzymy wpisy w blogu na stronie MagicznaKostka. Wpisy te są obiektami zawierającymi dwie właściwości (w pierwszej z nich zapisywany jest obiekt String, a w drugiej obiekt Date). Oczywiście, wciąż musimy utworzyć tablicę obiektów Blog, aby wyświetlić na stronie MagicznaKostka wszystkie wpisy. Właściwość body

Blog

String

"Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko."

Date

14 sierpnia 2008

Operator new tworzy obiekt, korzystając przy tym z pomocy konstruktora.

"Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko." 14/08/2008

Właściwość date

Zaostrz ołówek

Zmodyfikuj kod aplikacji MagicznaKostka, tak by tworzył tablicę obiektów Blog, z których każdy będzie zawierał datę utworzoną jako obiekt Date. Możesz uprościć sobie życie i zapisać tylko kilka początkowych słów z treści poszczególnych wpisów.

.................................................................................................................................................................... .................................................................................................................................................................... .................................................................................................................................................................... ....................................................................................................................................................................

jesteś tutaj  427

Rozwiązanie ćwiczenia

Zaostrz ołówek Rozwiązanie Każdy wpis wciąż jest tworzony jako obiekt Blog.

Zmodyfikuj kod aplikacji MagicznaKostka, tak by tworzył tablicę obiektów Blog, z których każdy będzie zawierał datę utworzoną jako obiekt Date. Możesz uprościć sobie życie i zapisać tylko kilka początkowych słów z treści poszczególnych wpisów.

var blog = [new Blog("Dostałam właśnie nową,…", new Date("08/14/2008")), .................................................................................................................................................................... new Blog("Udało mi się już…", new Date("08/19/2008")), .................................................................................................................................................................... new Blog("Już mnie głowa rozbolała…", new Date("08/16/2008")), .................................................................................................................................................................... new Blog("Znalazłam w internecie…", new Date("08/21/2008")) ]; .................................................................................................................................................................... Literały łańcuchowe doskonale nadają się do podania treści wpisów.

Data każdego wpisu tworzona jest jako nowy obiekt Date.

Nie ma

niemądrych pytań

P: Dlaczego data w obiekcie Date jest

przechowywana w postaci milisekund?

O: Przede wszystkim musisz zrozumieć, że obiekt Date

reprezentuje pewien moment czasu. Gdyby wszechświat posiadał przycisk Pauza i gdybyś mógł go nacisnąć, to zatrzymałbyś wszechświat w pewnym określonym momencie czasu. Jednak bez jakiegoś punktu odniesienia nie byłbyś w stanie powiedzieć innym osobom, kiedy ten moment nastąpił. Dlatego też jako punkt odniesienia w czasie wybrałeś dzień 1 stycznia 1970 roku. Teraz potrzebujesz jeszcze jakiejś miary do określenia przesunięcia względem tego punktu odniesienia, na przykład 38 lat, 8 miesięcy, 14 dni, 3 godziny, 29 minut i 11 sekund. Byłby to jednak dziwny sposób przechowywania informacji o odległości dwóch punktów

na osi czasu. Lepiej będzie zastosować tylko jedną jednostkę miary, za pomocą której będziemy w stanie przedstawić nawet najkrótsze fragmenty czasu. A zatem zamiast tych wszystkich jednostek czasu mam jedną — milisekundy. W przypadku podanego wcześniej okresu jego wartość w milisekundach wyniosłaby 1 218 702 551 000. No tak… to cała masa milisekund, jednak duże liczby nie przysparzają JavaScriptowi równie dużych problemów.

P: Czy stosując obiekt Date, muszę się przejmować dokonywaniem konwersji na milisekundy?

O: To zależy. Obiekt Date udostępnia kilka metod pozwalających na pobieranie przydatnych informacji bez konieczności zawracania sobie głowy milisekundami. Jeśli jednak będziesz musiał skorzystać z różnic między datami, to niemal na pewno zetkniesz się z milisekundami.

Kluczowe zagadnienia 

Standardowy obiekt Date JavaScriptu reprezentuje moment czasu wyrażony w milisekundach.



Obiekt Date jest na tyle mądry, że wie, jak wykonywać matematyczne operacje na datach oraz jak porównywać daty.



Obiekt Date udostępnia kilka metod pozwalających na pobieranie różnych informacji o dacie i godzinie.



Podobnie jak w przypadku wszystkich wcześniejszych obiektów, za wyjątkiem obiektów String, obiekty Date także tworzy się przy użyciu operatora new.

428

Rozdział 9.

Ożywianie danych

Daty nie są przydatne… dla ludzi A zatem po skonwertowaniu dat we wpisach do swojego blogu na obiekty Date Renia jest już gotowa, by zająć się problemem sortowania wpisów na podstawie daty. Cóż… jest prawie gotowa. Okazuje się bowiem, że wprowadzone zmiany spowodowały, iż daty wyświetlane na stronie MagicznaKostka wyglądają bardzo tajemniczo i nieczytelnie. Renia przypuszcza, że osoby oglądające jej blog nie będą zainteresowane informacją o tym, w jakiej strefie czasowej były tworzone poszczególne wpisy, a takie niepotrzebne informacje jedynie utrudnią korzystanie ze strony i sprawią, że stanie się ona mniej czytelna. Okazuje się, że znacznie dokładniej musimy przyjrzeć się efektom zastosowania obiektów Date na stronie blogu Reni. Daty wpisów stały się bardzo tajemnicze i zagmatwane… Zawierają zbyt dużo informacji!

Zastosowanie obiektów Date może i było sensownym rozwiązaniem, jednak teraz daty wyświetlane na stronie wyglądają koszmarnie. A nie przypominam sobie, żebym pisała jakiś kod służący do formatowania dat.

Daty nie tylko wyglądają kiepsko, lecz co gorsza, wpisy w blogu wciąż są wyświetlane w niewłaściwej kolejności — dramat!

Renia jest nieco zaskoczona nowym problemem związanym ze sposobem wyświetlania dat; jest on tym bardziej tajemniczy, że Renia nie przypomina sobie, by pisała jakikolwiek kod służący do prezentowania nowych dat. Jedyną zmianą, jaką wprowadziła, było skonwertowanie łańcuchów znaków na obiekty Date. Czy to jakieś ciemne moce JavaScriptu zmówiły się, by popsuć sposób prezentacji dat na jej stronie?

jesteś tutaj  429

Musi być jakiś lepszy sposób

Konwersja obiektów na łańcuchy znaków Na szczęście za nieatrakcyjnym sposobem wyświetlania dat w nowej wersji strony MagicznaKostka nie stoją żadne ciemne moce. W rzeczywistości jest to przejaw całkiem naturalnej mocy wszystkich obiektów w języku JavaScript — mocy do wyświetlania swojej zawartości w postaci łańcucha znaków. Mechanizm ten działa w następujący sposób: każdy obiekt JavaScriptu posiada metodę toString(), która próbuje wygenerować tekstową reprezentację obiektu. A zatem za tym zagmatwanym sposobem wyświetlania daty stoi domyślna implementacja metody toString() obiektu Date. var blogDate = new Date(”08/14/2008”); alert(blogDate.toString());

Najciekawszym aspektem metody toString() jest to, że jest ona używana automatycznie, w przypadku gdy obiekt zostanie użyty w kontekście, w którym oczekiwano podania łańcucha znaków. Na przykład przedstawiony powyżej kod wyświetlający okienko dialogowe z datą można by zmienić w następujący sposób:

Metoda toString() pokazuje również, w jaki sposób obiekt Date przechowuje także informacje o czasie.

Date

alert(blogDate);

Funkcja alert() oczekuje przekaza łańcucha znaków, a zatem w ukrynia sposób jest wywoływana metoda ty toString(), która generuje tekstową reprezentację obiektu Date.

Metoda toString() generuje tekstową reprezentację obiektu.

430

Rozdział 9.

toString()

Metoda toString() całkiem dobrze radzi sobie z zadaniem dostarczenia tekstowej reprezentacji obiektu Date, jednak jest ona dostępna także w innych obiektach.

14 sierpnia 2008 Północ

Funkcja alert() oczekuje łańcucha znaków, a obiekt Date jest na tyle sprytny, by wiedzieć, że musi wygenerować swoją tekstową reprezentację. Zadanie to jest realizowane właśnie poprzez wywołanie metody toString(). Całe to zamieszanie z metodą toString() nie byłoby większym problemem, gdyby nie to, że strona MagicznaKostka naprawdę wymaga, by daty były wyświetlane w formacie łatwym do zrozumienia dla oglądających ją osób, na przykład w formacie DD/MM/RRRR. Wniosek: wygląda na to, że Renia nie będzie mogła wykorzystać na swojej stronie domyślnej reprezentacji tekstowej obiektów Date, generowanych przez metodę toString().

Ożywianie danych

Pobieranie konkretnych informacji o dacie Renia potrzebuje sposobu, który pozwoliłby jej określić, jak należy wyświetlać daty. Dla zapewnienia takiej możliwości kluczowe znaczenie ma dostęp do szczegółowych informacji o dacie, takich jak numer dnia czy miesiąca bądź rok. Dysponując tymi danymi, będziemy w stanie wyświetlić je w dowolny sposób. Na szczęście obiekt Date udostępnia metody zwracające szczegółowe informacje na temat daty.

Date

14 getDate()

14 sierpnia 2008 Północ

getMonth()

7 2008

Dzień miesiąca zapisany jako liczba z zakresu od 1 do 31.

Miesiąc zapisany jako liczba z zakresu od 0 do 11.

Pełny, czterocyfrowy format zapisu roku.

getFullYear()

W rzeczywistości obiekt Date udostępnia znacznie więcej niż trzy powyższe metody, zapewniając tym samym wiele różnych sposobów pobierania daty i czasu. Jednak trzy przedstawione powyżej metody to wszystko, czego nam potrzeba, by wyświetlać daty na stronie MagicznaKostka w taki sposób, jaki będzie nam odpowiadać.

Oglądaj to!

Zwróć szczególną uwagę na wartości zwracane przez metody obiektu Date.

iąca Metoda getMonth() zwraca numer mies zeń) do wyrażony jako liczba z zakresu od 0 (styc ca zwra ) 11 (grudzień); z kolei metoda getDate( 31. do numer dnia jako liczbę z zakresu od 1

Zaostrz ołówek Rozwiąż problem dziwacznego formatu, w jakim aktualnie wyświetlane są daty na stronie MagicznaKostka. W tym celu przepisz kod, który określa postać wpisu i zapisuje wyniki w zmiennej blogText. Upewnij się, że data zostanie zapisana w formacie DD/MM/RRRR. Poniżej przedstawiliśmy oryginalną postać tego kodu: blogText += "" + blog[i].date + "
"+ blog[i].body + "

"; else blogText += "

"; // Generujemy sformatowany kod HTML blogText += "" + blog[i].date.getDate() + "/" + (blog[i].date.getMonth() + 1) + "/" + blog[i].date.getFullYear() + "
" + blog[i].body + "

"; else blogText += "

";

Konwersja wpisu blogu na sformatowany kod HTML — Blog.toHTML().

// Generujemy sformatowany kod HTML blogText += "" + blog[i].date.getDate() + "/" + (blog[i].date.getMonth() + 1) + "/" + blog[i].date.getFullYear() + "
" + blog[i].body + "

"; blogHTML += highlight ? "

" blogu w wpisu HTML kod owany // Generujemy sformat ate.getMonth() + 1) + "/" + blogHTML += "" + this.date.getDate() + "/" + (this.d "

"; + dy this.bo + />" ng>

Rozdział 9.

Ożywianie danych

Jakie są korzyści użycia obiektów na stronie MagicznaKostka? Dopiero po umieszczeniu nowej wersji obiektu Blog w kodzie strony MagicznaKostka (znajdziesz ją wraz z kodami wszystkich przykładów prezentowanych w książce na serwerze FTP wydawnictwa Helion: ftp://ftp.helion.pl/przyklady/hfjsc.zip) możemy w pełni docenić zalety, jakie zapewnia programowanie obiektowe. Teraz, kiedy kilka istotnych zadań zostało przekazanych do obiektu Blog, skrypty używane na stronie Reni zostały zdecydowanie uproszczone.

Zastosowanie nowego obiektu Blog pozwoliło uprościć kod JavaScript na stronie MagicznaKostka.

// Prezentacja listy wpisów function showBlog(numEntries) { // W pierwszej kolejności sortujemy wpisy w odwrotnej kolejności chronologicznej. blog.sort(function(blog1, blog2) { return blog2.date - blog1.date; }); // W razie konieczności modyfikujemy liczbę wpisów, by wyświetlić pełny blog if (!numEntries) numEntries = blog.length; // Wyświetlamy poszczególne wpisy var i = 0, blogListHTML = ""; while (i < blog.length && i < numEntries) { blogListHTML += blog[i].toHTML(i % 2 == 0); i++; }

Metoda toHTML() jest w całości odpowiedzialna za sformatowanie wpisu w postaci kodu HTML.

// Dodajemy kod HTML z wpisami do strony document.getElementById("blog").innerHTML = blogListHTML; } // Przegląda listę wpisów w poszukiwaniu podanego fragmentu tekstu function searchBlog() { var searchText = document.getElementById("searchtext").value; Metoda containsText() zajmuje for (var i = 0; i < blog.length; i++) { się odnalezieniem w treści wpisu podanego łańcucha znaków. // Sprawdzamy, czy wpis zawiera poszukiwany tekst if (blog[i].containsText(searchText)) { alert(blog[i]); Metoda toString() jest nieco bardziej break; wyrafinowana; jest ona wywoływana automatycznie za każdym razem, gdy } obiekt zostanie użyty w kontekście, } znaków. w jakim oczekiwano łańcucha

// Jeśli nie udało się odnaleźć poszukiwanego tekstu, wyświetlany komunikat if (i == blog.length) alert("Przykro mi, ale żaden wpis nie zawierał poszukiwanego tekstu."); } // Wyświetlamy losowo wybrany wpis z blogu function randomBlog() { // Wybieramy liczbę losową z zakresu od 0 do blog.length – 1 var i = Math.floor(Math.random() * blog.length); alert(blog[i]); }

jesteś tutaj  457

Gotowy na zaszczyty

MagicznaKostka wersja 3.0 Zrobił się z tego całkiem spory projekt, ale Renia w końcu uznała, że trzecia wersja strony MagicznaKostka jest na tyle dobra, że może sobie zrobić przerwę w pracy z JavaScriptem i zająć się tym, co lubi najbardziej — układankami. Poza tym Renia jest bardzo podekscytowana przygotowaniami na imprezkę, na którą została zaproszona… Wpisy w blogu są posortowane i przejrzyście sformatowane…

…poza tym blog można przeszukiwać…

…wpisy można także przeglądać losowo…

…a wszystko to dzięki niestandardowemu obiektowi o nazwie Blog!

Blog body

toString()

Dostałam właśnie toHTML() nową, zamówioną układankę... 14 sierpnia 2008

date

458

Rozdział 9.

containsText()

Kto by się spodziewał, że obiekt Blog stanie się moją ulubioną układanką?

Ożywianie danych

Zaginarka stron Zegnij stronę wzdłuż pionowych linii, tak by oba mózgi się połączyły, a następnie rozwiąż zagadkę.

Co obiekty JavaScript mogą zrobić dla swoich danych? To spotkanie umysłów!

na… Zapraszamy Cię

wą! Imprezę puzzlo Data: Miejsce:

24 października 34 ul. Wy tężonego umysłu 12/ Geniuszowice 12-345 Polska

Stri

ng

Date Math Renia, miłośniczka układanek 23 Aleja Wycinanek 78-098 Łamigłowice Polska

Ar r

ay

Szukaj jeśli chcesz, lecz każde poszukiwanie da ten sam wynik — wykaże, że to obiekty JavaScriptu najlepiej nadają się do takich operacji jak aktualizowanie i sortowanie danych. Pozwalają one nawet na generowanie liczb losowych

jesteś tutaj  459

460

Rozdział 9.

10. Tworzenie własnych obiektów

Zrób to po swojemu, używając własnych obiektów Zdecyduj się już teraz, pomiń wszystkich pośredników, masz gwarancję zwrotu kosztów za jednego dolara… jeśli zamówisz już teraz. Możesz to zrobić po swojemu, kotku!

Gdyby to było takie łatwe, na pewno byś sobie z tym sam poradził. W świecie JavaScriptu nie ma gwarancji zwrotu poniesionych kosztów, jednak nikt nigdy nie będzie Ci bronił robić wszystkiego po swojemu. Niestandardowe obiekty w JavaScripcie są odpowiednikiem świetnej, wielkiej, gorącej, mistrzowskiej, okazyjnej promocji. To jeden niestandardowy kubek kawy! A dzięki własnym obiektom JavaScriptu możesz zaparzyć sobie kawę, która zrobi dokładnie to, co będziesz chciał — a wszystko to dzięki korzyściom, jakie zapewniają właściwości i metody. W efekcie powstaje obiektowy, nadający się do wielokrotnego stosowania kod, który rozszerza możliwości języka JavaScript… tylko i wyłącznie dla Ciebie!

to jest nowy rozdział  461

Metody Blog: och! ach!

Ponowna analiza metod obiektu Blog Kiedy rozstaliśmy się z Renią w poprzednim rozdziale, była niezwykle podekscytowana stworzeniem własnego, obiektowego blogu, który umożliwił jej dzielenie się z innymi swoją pasją do układanek. Choć tworząc obiekt Blog, Renia wykonała całkiem dobrą robotę, to jednak zupełnie nieświadomie przegapiła doskonałą okazję do zastosowania technik obiektowych w pozostałej części skryptów na stronie MagicznaKostka. Co ważniejsze, Renia nie zbadała dokładnie wszystkich możliwości poprawienia wydajności obiektu Blog i poprawienia jego organizacji; innymi słowy, przegapiła okazję, by uprościć sobie późniejsze utrzymanie i rozbudowę obiektu. Ostatnią modyfikacją wprowadzoną przez Renię w obiekcie Blog było dodanie do niego trzech metod, obsługujących kilka operacji związanych z korzystaniem z blogu.

Blog body

date

Najnowszą wersję kodów znajdzie sz na serwerze FTP wydawnictwa Heli ftp://ftp.helion.pl/przyklady/hfjsc. on: zip.

toString()

Spotkałam się z kilkoma innymi zapaleńcami, by porozmawiać o układaniu

Blog Reni na stronie MagicznaKostka działa, jednak nie jest zachwycającym przykładem projektowania i programowania obiektowego. Trzy metody obiektu Blog realizują kilka zadań, które dobrze jest wykonywać z poziomu wpisu do blogu.

toHTML()

29 sierpnia 2008 containsText()

Bardzo mi się podobają metody obiektu Blog.

date) { function Blog(body, wości // Przypisanie właści this.body = body; this.date = date;

su wej reprezentacji wpi // Generowanie teksto "/" + { ) on( cti fun = g e.getMonth() + 1) + this.toStrin te()+ "/" + (this.dat tDa .ge ate s.d thi + return "[" ; () + "] " + this.body this.date.getFullYear }; anego kodu HTML w postaci sformatow // Generowanie wpisu { ) umencie on(highlight li tak zażądano w arg this.toHTML = functi o podświetlenia, jeś jak tła o reg sza y // Używam : "

"; var blogHTML = ""; nd-color:#EEEEEE'>" ? "

" : "

";

};

// Generujemy sformatowany kod HTML wpisu w blogu blogHTML += "" + this.date.getDate() + "/" + (this.date.get Month() + 1) + "/" + this.date.getFullYear() + "
" + this.body + "

"; return blogHTML;

// Sprawdza, czy treść blogu zawiera podany łańcuch znaków Blog.prototype.containsText = function(text) { return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1); };

jesteś tutaj  469

Rozwiązanie ćwiczenia

Zaostrz ołówek Rozwiązanie

Kod obiektu Blog korzysta już z obiektu prototype, dzięki czemu jego metody należą do klasy. Oznacz odpowiedzialny za to kod i wyjaśnij, jak działa.

function Blog(body, date) { // Przypisanie wartości this.body = body; this.date = date; }

Teraz konstruktor zajmuje się jedynie utworzeniem i zainicjowaniem właściwości.

// Generowanie tekstowej reprezentacji wpisu Blog.prototype.toString = function() { return "[" + this.date.getDate() + "/" + (this.date.getMonth()+ 1) + "/" + this.date.getFullYear() + "] " + this.body; Ponieważ metody nie są przypisywane }; ej instancji obiektu do żadnej konkretn

Blog, zatem przypisanie następuje // Generowanie wpisu w postaci sformatowanego kodu HTML poza konstruktorem. Blog.prototype.toHTML = function(highlight) { // Używamy szarego tła jako podświetlenia, jeśli tak zażądano w argumencie var blogHTML = ""; blogHTML += highlight ? "

" : "

";

};

// Generujemy sformatowany kod HTML wpisu w blogu blogHTML += "" + this.date.getDate() + "/" + (this.date.get Month() + 1) + "/" + this.date.getFullYear() + "
" + this.body + "

"; return blogHTML; Każda

metoda jest tworzona jako obiektu prototype, a nie jako metowłaściwość da obiektu określana w jego konstruktorze przy użyciu słowa kluczowego this.

// Sprawdza, czy treść blogu zawiera podany łańcuch znaków Blog.prototype.containsText = function(text) { return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1); };

Bardziej efektywna strona MagicznaKostka Teraz strona MagicznaKostka używa już metod należących do klasy, a zatem — dzięki zastosowaniu prototypu — Renia uniknęła niepotrzebnego powielania kodu. Niezależnie od tego, jak dużo obiektów Blog stworzymy, to i tak będzie istnieć tylko jedna kopia każdej z jego metod. A wszystko dzięki temu, że metody te należą do klasy. Najciekawsze jest jednak to, że z punktu widzenia skryptów korzystających z obiektów Blog na stronie MagicznaKostka najzupełniej nic się nie zmieniło. Klasa Blog.

Instancje obiektu Blog wywołujące metody klasy.

alert(blog[0]);

Blog toString()

blog[2].toHTML();

toHTML() containsText()

470

Rozdział 10.

blog[3].containsText("kostka");

Tworzenie własnych obiektów Kluczowe zagadnienia 



Klasa jest opisem obiektu, natomiast instancje to rzeczywiste obiekty utworzone na podstawie tego opisu. Klasa określa, jakie właściwości i metody będzie mieć obiekt, natomiast instancja określa rzeczywiste wartości tych właściwości, czyli udostępnia dane, na których mogą operować metody.





Słowo kluczowe this zapewnia możliwość odwoływania się do instancji obiektu z poziomu jego własnego kodu. Obiekt prototype pozwala na zapisywanie metod w klasie, dzięki czemu można uniknąć niepotrzebnego powielania ich kodu w instancjach obiektu.

Nie ma

niemądrych pytań

P: Wciąż nie do końca rozumiem

różnicę między klasami i instancjami obiektów. O co w tym chodzi?

O: Klasy mają na celu ułatwienie tworzenia

i wielokrotnego stosowania obiektów. Nic nie stoi na przeszkodzie, byś tworzył obiekty, używając w tym celu literałów. Jedynym problemem będzie niepotrzebny wysiłek, jaki w to włożysz. Takie rozwiązanie jest nieefektywne, gdyż wymaga od ciebie większego nakładu pracy. Można by to porównać do sytuacji, gdy architekt każe rysować plany od nowa za każdym razem, gdy chce wybudować dom według tego samego projektu. A dlaczego nie można by stworzyć szablonu, na podstawie którego później tworzylibyśmy tyle obiektów, ile zechcemy? W ten sposób ograniczylibyśmy nakład pracy koniecznej do ich stworzenia. I to właśnie w tym miejscu na scenę wkraczają klasy — możemy utworzyć klasę, a następnie użyć jej do tworzenia tylu instancji obiektu, ilu nam potrzeba.

P: No dobrze, czyli klasy mają

za zadanie ułatwić tworzenie podobnych do siebie obiektów. A co wspólnego mają z tym this i prototype?

O: Słowo kluczowe this zapewnia dostęp do instancji obiektu z poziomu jego metod. Najczęściej jest ono używane podczas korzystania z właściwości obiektów. Jeśli zatem w kodzie jakiejś metody chcesz skorzystać z właściwości o nazwie x, to możesz to zrobić, używając wyrażenia this.x. Gdybyś użył samej nazwy właściwości (x), to interpreter JavaScriptu

nie wiedziałby, że chodzi ci o pobranie lub określenie wartości właściwości, i uznałby, że chcesz odwołać się do zmiennej lokalnej o nazwie x. To właśnie z tego powodu konieczne jest stosowanie słowa kluczowego this podczas tworzenia i inicjalizacji właściwości w konstruktorach obiektów. Obiekt prototype to coś całkowicie innego. Udostępnia on mechanizm pozwalający na tworzenie klas. JavaScript, w odróżnieniu od wielu innych języków programowania, takich jak C++ lub Java, nie obsługuje tak naprawdę klas jako odrębnego elementu języka. W JavaScripcie klasy są jedynie symulowane, a w tym celu używany jest właśnie prototyp, czyli obiekt prototype. Efekt końcowy jest co prawda podobny, jednak w JavaScripcie tworzenie i określanie struktury „klas” odbywa się właśnie za pomocą obiektów prototype. Każdy obiekt tworzony w języku JavaScript zawiera obiekt prototype, który jest dostępny jako „ukryta” właściwość o tej samej nazwie. Zapisując właściwość lub metodę w obiekcie prototypu, zapewniamy, że będzie ona dostępna jako element klasy, a nie jedynie konkretnej instancji obiektu.

P: A jaki jest związek konstruktora i klasy?

O: Konstruktor jest niezwykle ważnym

elementem związanym z tworzeniem klas w JavaScripcie, gdyż odpowiada za tworzenie nowych instancji obiektów. Możesz wyobrazić sobie, że konstruktor i prototyp to dwa podstawowe elementy układanki, jaką jest klasa. Konstruktor odpowiada za przygotowanie wszystkiego na poziomie instancji obiektu, natomiast prototyp — na poziomie klasy.

Oba te elementy współpracują ze sobą, by zapewnić nam możliwość wykonywania naprawdę ciekawych rzeczy, a wszystko dlatego, że istnieją ważne powody, by niektóre składowe obiektów tworzyć na poziomie instancji, a inne na poziomie klas. W dalszej części rozdziału będziemy bardziej szczegółowo zajmować się tymi zagadnieniami.

P: Mam problemy z konwencjami nazewniczymi stosowanymi w obiektach. Czasami ich nazwy są pisane wielką literą, czasami stosowana jest konwencja lowerCamelCase. Czy jest tu używana jakaś zasada, o której nie wiem?

O: Jedyna zasada jest taka, że nazwy klas

są zapisywane wielką literą, natomiast nazwy instancji zapisuje się zgodnie z konwencją lowerCamelCase. Dzieje się tak z tej prostej przyczyny, że nazwy instancji to nic innego jak zwyczajne zmienne, a identyfikatory zmiennych zapisujemy zgodnie z konwencją lowerCamelCase. Ta niekonsekwencja może wynikać z faktu, że terminu „obiekt” nie zawsze używaliśmy w ścisły i jednoznaczny sposób. A zatem — dla zachowania precyzji — nazwy klas, takie jak Blog, należy zapisywać wielką literą, natomiast nazwy instancji, takie jak blogEntry, zgodnie z konwencją lowerCamelCase. Takie rozwiązanie ma sens, zwłaszcza jeśli przyjrzymy się innym standardowym obiektom, które poznaliśmy we wcześniejszej części książki. A zatem aktualną datę i godzinę można zapisać w zmiennej (instancji) o nazwie teraz, utworzonej jak obiekt (klasa) Date.

jesteś tutaj  471

Proszę o podpis tutaj… i tutaj… i tutaj

Podpisywanie wpisów w blogu Renia pracuje nad poprawą wydajności działania strony oraz organizacji kodu, które zostały uzyskane dzięki zastosowaniu obiektowych technik programowania. Jednak nie interesują jej jedynie poprawki w kodzie, których nikt nie zauważy — Renia chciałaby dodać do swojej strony jakieś nowe możliwości.

Naprawdę bardzo bym chciała dodać podpis, który byłby wyświetlany pod każdym wpisem w blogu… o tutaj!

WYTĘŻ

Renia doszła do wniosku, że jej problem mogłoby rozwiązać stworzenie w klasie Blog nowej właściwości —signature. Wartość tej właściwości mogłaby być określana w konstruktorze i prezentowana w momencie wyświetlania każdego wpisu w blogu… i po problemie!

umysł

Czy Renia powinna utworzyć podpis jako właściwość składową określaną dla każdej instancji obiektu? Czy jesteś w stanie podać jakiś powód uzasadniający, że nie jest to najlepsze rozwiązanie?

472

Rozdział 10.

Tworzenie własnych obiektów

Nie ma

niemądrych pytań

P: Wciąż spotykam się

z określeniem „obiektowy”. Co ono oznacza?

O

: W kręgach osób związanych z programowaniem termin „obiektowy” jest używany (i nadużywany) bardzo często, a co więcej, dla różnych osób może znaczyć coś innego. Ogólnie rzecz biorąc, termin „programowanie obiektowe” (ang. Object-Oriented Programming, w skrócie

We wszystkich wpisach podpis jest taki sam.

OOP) oznacza tworzenie programów w oparciu o obiekty; na takiej zasadzie kod strony MagicznaKostka korzysta z obiektów Date. Wielu programistów uważa, że programowanie obiektowe wiąże się z powszechnym stosowaniem obiektów w kodzie pisanych programów. Teoretycznie rzecz biorąc, prawdziwie obiektowy program stanowi kolekcję wzajemnie ze sobą współpracujących obiektów.

Można spotkać osoby (swoistych obiektowych purystów), które uważają, że JavaScript nie jest prawdziwym obiektowym językiem programowania. Sugeruję, byś nie marnował energii i nie wdawał się z nimi w dyskusje. Można podać rozsądne i ważne argumenty zarówno potwierdzające przynależność JavaScriptu do rodziny języków obiektowych, jak i przeczące tej klasyfikacji. Nie warto się spierać, bo pod koniec dnia i tak nikt nie wygra.

Chwileczkę! Czy Renia nie ma tylko jednego podpisu? Skoro ma, to dlaczego każdy egzemplarz obiektu ma dysponować własną właściwością zawierającą podpis?

14/08/ 2008.............................. .................... .......... .................................................. .......... Dostała m właśni .................... e .......... nową, .......... zamów.......... .......... ioną układa .......... nkę. .......... ........................................ To prawdz .................... cudeńk o. .............................. ..........iwe .......... .......... ........................................ napisał a Renia .................... – .......... miłośn.......... iczka układa .......... .......... ..........nek .................................................. .................................................. .................................................. .................... 19/08/ 2008.............................. .................... .......... .................................................. .......... Udało mi się.......... .................... już ułożyć .......... nową układa nkę. ..........tę ..............................Już mnie.......... znudzi ła, .......... .......... .......... więc.......... szukam .................... czegoś nowego . .............................. .............................. .............................. napisał a Renia .................... – .......... miłośn.......... iczka układa .......... .......... ..........nek .................................................. .................................................. .................................................. .................... 16/08/ 2008.............................. .................... .......... .................................................. .......... Już mnie głowa .................... rozbola ła.......... od zabaw .............................. tą .......... nową kostką. .......... ........................................ Muszę sobie.......... odpoczą .................... ć. .............................. .......... .......... ........................................ napisał a Renia .................... – .......... miłośn.......... iczka układa .......... .......... ..........nek .................................................. .................................................. .................................................. .................... 21/08/ 2008.............................. .................... .......... .................................................. .......... Znalaz łam.......... w internec .................... ie układa .......... nkę 7×7×7 .......... . O rany! Zabaw ........................................ będzie.......... ..........a.......... super............................... .................... .................................................. .................... napisał a Renia .................... – .......... miłośn.......... iczka układa .......... .......... ..........nek .................................................. .................................................. .................................................. .................... 29/08/ 2008.............................. .................... .......... .................................................. .......... Spotkałam się .................... z kilkom a innymi .............................. zapaleń.......... cami, .......... by porozm .................... awiać o .......... .......... .......... układa niu kostki .............................. I szczerz ..........7×7×7 e mówią ........... .......... c, mam mies .......... zane .......... uczucia. .......... .......... .......... .......... napisał a Renia .................... – .......... miłośn.......... iczka układa .......... .......... ..........nek ..................................................

A może jeden podpis wystarczy? Skoro wiemy, że Renia ma tylko jeden podpis, nietrudno jest się domyślić, że nie ma większego sensu, by każda instancja obiektu Blog posiadała własną właściwość signature. A zatem Renia potrzebuje właściwości klasowej — właściwości, która jest tworzona tylko raz i jest przechowywana w klasie, a nie w poszczególnych instancjach obiektów. Blog Właściwość signature powinna być przechowywana w klasie Blog, a nie w instancjach obiektów.

signature

jesteś tutaj  473

Zapisz raz, korzystaj do woli…

Także właściwości klasowe są współdzielone Właściwości klasowe są bardzo podobne do metod należących do klasy — także w ich przypadku właściwość należy do klasy, jest tworzona tylko raz, a wszystkie obiekty danej klasy mają do niej dostęp. Pod pewnym względem tworzenie tylko jednej właściwości ma większe znacznie niż tworzenie jednej metody, gdyż oznacza to, że będzie istnieć tylko jedna wartość, a dostęp do niej będą miały wszystkie obiekty. W przypadku właściwości signature to jest dokładnie to, o co chodziło Reni, gdyż w całym blogu używa ona tylko jednego podpisu. Blog Jeśli zmienisz właściwość Blog.signature, to zmiany te będą miały wpływ na wszystkie instancje obiektu Blog.

Blog Znalazłam w internecie układankę 7×7×7. O rany! Zabawa będzie...

owa Już mnie gł rozbolała nową od zabaw tą kostką... 16 sierpnia

signature = "Renia – miłośniczka układanek";

Właściwość klasowa signature jest przechowywana jedynie w klasie.

Właściwość klasowa jest zapisywana tylko raz, choć wszystkie obiekty mają do niej dostęp.

Jeśli zmienisz wartość właściwości date tego obiektu, to zmiana będzie miała wpływ jedynie na ten obiekt.

umysł

Jak sądzisz, w jaki sposób można utworzyć właściwość klasową?

Rozdział 10.

Blog Spotkałam się z kilkoma inn ymi zapaleńcami , by porozmaw iać o układaniu ... 29 sierpnia 2008

Choć właściwość signature jest przechowywana w klasie Blog, to jednak wszystkie obiekty, które potrzebują podpisu autorki, mają do niej dostęp.

WYTĘŻ

474

2008

Blog

21 sierpnia 2008

Jeśli zmienisz zawartość właściwości body tego wpisu, to nie będzie to miało wpływu na pozostałe wpisy w blogu.

Każda instancja sama przechowuje swoje właściwości składowe.

Tworzenie własnych obiektów

Tworzenie właściwości klasowych przy użyciu prototypu Wziąwszy pod uwagę miejsce przechowywania właściwości klasowych oraz jego wpływ na naszą egzystencję, trzeba zauważyć, że tworzenie właściwości klasowych jest zaskakująco nieciekawe. Okazuje się, że zajmuje ono zaledwie jeden wiersz kodu:

W odwołaniach do właściwości klasowych używany jest operator kropki.

Blog.prototype.signature = "Renia – miłośniczka układanek"; W pierwszej kolejności podaje się nazwę klasy (w naszym przypadku Blog), a po niej obiekt prototype.

Nie trzeba inicjować wartości właściwości klasowych, jednak , gdyż w naszym przypadku ma to sens od podpis autorki blogu jest znany momentu wyświetlenia strony.

Zapewne sam się domyśliłeś, że właściwości kla są zapisywane w sowe obiekcie prototype.

Jedną z najbardziej interesujących rzeczy zawiązanych z powyższym fragmentem kodu jest coś, czego nie możesz zauważyć, patrząc na niego. Chodzi mianowicie o to, że powyższy kod nie jest umieszczony w konstruktorze, jak kod inicjujący właściwości składowe. Wynika to z faktu, że konstruktory służą do tworzenia instancji obiektów i z tego powodu nie są w stanie tworzyć właściwości klasowych. Okazuje się, że właściwości klasowe muszą być tworzone poza konstruktorem.

e Właściwości składow

Właściwość klasowa Blog.prototype.signature = "Renia – miłośniczka układanek";

Właściwości klasowe są tworzone poza konstruktorem obiektu i wymagają nieznacznej pomocy ze strony ukrytej właściwości prototype.

date) { function Blog(body, y; this.body = bod this.date = date; }

Jedna kopia właściwości signature, dostępna dla wszystkich obiektów Blog.

Właściwości składowe są tworzone w konstruktorze obiektu.

Każda instancja obiektu Blog posiada swoją kopię właściwości body i date.

Zaostrz ołówek Poniżej zapisz kod, który wyświetli wartość właściwości signature w informacyjnym okienku dialogowym. Podpowiedź: załóż, że kod ten będzie wykonywany w jednej z metod obiektu Blog. ........................................................................................................................................................

jesteś tutaj  475

Rozwiązanie ćwiczenia

Zaostrz ołówek Rozwiązanie

Poniżej zapisz kod, który wyświetli wartość właściwości signature w informacyjnym okienku dialogowym. Podpowiedź: załóż, że kod ten będzie wykonywany w jednej z metod obiektu Blog. Odwołania do właściwości klasowych alert(this.signature);

niczym się nie różnią od odwołań do normalnych właściwości obiektów — także w nich jest używane słowo kluczowe this.

...........................................................................................................................................

Nie ma

P: Dlaczego w ogóle

przechowujecie podpis we właściwości? Czy nie można by go wpisywać w treści każdego wpisu?

O: Bez wątpienia można by przechowywać podpis jako część treści każdego wpisu, jednak to wymagałoby dodatkowego czasu i zachodu, a także założenia, że jest tylko jedna osoba pisząca blog. Własnoręczne podpisywanie każdego wpisu byłoby zapewne męczące dla Reni; a przecież JavaScript udostępnia znacznie lepszy sposób obsługi podpisu. A poza tym, kto powiedział, że Renia nie mogłaby zrobić jakiegoś prostego błędu typu: „Renia — miłośniczka zakładanek”? I jak by to wyglądało! Innym rozsądnym rozwiązaniem tego zagadnienia byłoby zapisanie podpisu Reni w postaci literału łańcuchowego i dodawanie go do treści każdego z wpisów podczas generowania kodu HTML. Takie rozwiązanie będzie działać bardzo dobrze, lecz ma jedną wadę — ukrywa ważny element danych (podpis autorki blogu) w kodzie metody formatującej, gdzie jest trudny do odnalezienia i utrzymania. Z kolei umieszczając podpis we właściwości klasowej, sprawiam, że będzie łatwo dostępny, a dzięki temu autorka blogu łatwiej go będzie mogła odszukać i w razie konieczności zmienić.

P: Jak trzeba by zmienić

tworzenie wpisu, gdyby podpis był przechowywany we właściwości składowej?

476

Rozdział 10.

niemądrych pytań

O: Pamiętaj, że każda instancja obiektu

posiada własne właściwości składowe, które są inicjalizowane w konstruktorze. Gdyby właściwość signature była właśnie taką właściwością, to konstruktor Blog() musiałby ją tworzyć i określać jej wartość dla każdej instancji. Zapewne z punktu widzenia programowania nie byłby to wielki problem, gdyż wystarczyłoby, by konstruktor zapisał we właściwości łańcuch znaków zawierający podpis. Jednak oznaczałoby to, że w rzeczywistości powstanie tyle kopii podpisu, ile będzie obiektów Blog, a to byłoby niepotrzebnym marnotrawstwem. Co więcej, oznaczałoby to, że można zmienić podpis w jednym wpisie niezależnie od pozostałych.

P: A zatem, gdybym

chciał zmodyfikować stronę MagicznaKostka tak, by mogła obsługiwać więcej osób dodających wpisy do blogu, to powinienem utworzyć podpis jako właściwość składową?

O: Tak. I w takim przypadku byłoby to

rozwiązanie właściwe, gdyż zwróć uwagę, że z założenia właściwość ta powinna mieć możliwość przechowywania różnych wartości w różnych instancjach obiektu Blog. Najprawdopodobniej w takiej sytuacji najlepszym rozwiązaniem byłoby dodanie do konstruktora Blog()kolejnego argumentu, który pozwalałby na określenie łańcucha znaków zawierającego podpis. Łańcucha tego można by następnie użyć do zainicjowania właściwości signature. Innymi słowy, właściwość signature byłaby obsługiwana dokładnie tak samo jak dwie pozostałe właściwości obiektu Blog.

P: Odnoszę wrażenie, że

właściwości klasowe działają podobnie do zmiennych globalnych. Jakie są różnice pomiędzy nimi?

O: W rzeczywistości właściwości klasowe są

bardzo podobne do zmiennych globalnych, gdyż można do nich uzyskać dostęp niemal z dowolnego miejsca skryptu. Podobny jest także sposób tworzenia właściwości klasowych i zmiennych globalnych, a przynajmniej pod względem miejsca, w jakim są one tworzone — na głównym poziomie skryptu poza kodem funkcji i metod. Właściwości klasowe różnią się natomiast od zmiennych globalnych tym, że są ściśle związane z klasą, a tym samym z instancjami obiektów. A to oznacza, że dostęp do właściwości składowych zawsze odbywa się za pośrednictwem instancji obiektów.

P: Zaraz, chwileczkę. Czy dostęp do właściwości klasowych musi odbywać się za pośrednictwem obiektów?

O: Choć właściwości klasowe są tworzone

przy użyciu obiektu prototype (który umożliwia zapisanie ich w klasie), to jednak korzystanie z nich w skrypcie musi się odbywać za pośrednictwem instancji. Oznacza to, że z właściwości klasowej korzystamy dokładnie tak samo jak z właściwości składowych — przy użyciu słowa kluczowego this i operatora kropki (.). Różnica sprowadza się do miejsca przechowywania wartości właściwości — w klasie (w przypadku właściwości klasowych) bądź w instancji obiektu (w przypadku właściwości składowych).

Tworzenie własnych obiektów

Podpisane i dostarczone Skoro właściwość signature została już utworzona, zainicjowana i jest gotowa do użycia, Renia może zastosować ją w skryptach na swojej stronie. Analizując kod obiektu Blog odpowiedzialny za wyświetlanie wpisów w przeglądarce, Renia doszła do wniosku, że metoda toHTML() jest odpowiednim miejscem, w którym podpis powinien zostać dodany do prezentowanego wpisu.

Teraz metoda toHTML() formatuje i wyświetla podpis jako element wpisu.

// Generujemy wpis w postaci sformatowanego kodu HTML Blog.prototype.toHTML = function(highlight) { w argumencie // Używamy szarego tła jako podświetlenia, jeśli tak zażądano var blogHTML = ""; : "

"; blogHTML += highlight ? "

" // Generujemy sformatowany kod HTML wpisu w blogu e.getMonth() + 1) + "/" + blogHTML += "" + this.date.getDate() + "/" + (this.dat "
" + this.signature + this.date.getFullYear() + "
" + this.body + "

"; return blogHTML; };

Teraz podpis Reni jest wyświetlany jako element każdego wpisu.

Teraz nie ma już żadnych niedomówień odnośnie tego, kto jest autorem poszczególnych wpisów.

Odwołanie do właściwości klasowej signature wygląda dokładnie tak samo jak odwołania do pozostałych właściwości obiektu Blog.

Renia zastosowała kolejne techniki obiektowe, by jeszcze bardziej rozszerzyć język JavaScript poprzez dodanie do obiektu Blog właściwości klasowej, zawierającej podpis autorki wpisów. Równie ważne jest jednak to, że Reni udało się nadać stronie MagicznaKostka nieco bardziej osobisty charakter.

jesteś tutaj  477

Właściwość składowa a właściwość klasowa

Pogawędki przy kominku

Temat dzisiejszej pogawędki: Właściwość klasowa i składowa dyskutują na temat posiadania danych i tajnych stowarzyszeń.

Właściwość składowa:

Właściwość klasowa:

A zatem to ty jesteś tą drugą, o której ostatnio tyle się mówi. Muszę przyznać, że w ogóle nie rozumiem, co tutaj robisz. Ja doskonale spełniam swoje zadanie — zapewniam instancjom obiektów unikalność i pozwalam im panować nad wartościami swoich właściwości.

No co ty… aż trudno mi w to uwierzyć. Mów dalej…

Ależ absolutnie w to nie wątpię. Ale czy nie pomyślałaś, że czasami instancje obiektów nie chcą zawracać sobie głowy problemem, jakim są własne dane? Dobrze, a zatem zdarzają się takie sytuacje, gdy jakieś dane są wspólne dla wszystkich instancji pewnego obiektu… No wiesz, coś jak tajne stowarzyszenie, w którym wita się tajemnym uściskiem dłoni. Każda osoba należąca do stowarzyszenia zna tajemny uścisk, lecz jest on „własnością” całego stowarzyszenia, a nie tylko jednej osoby. Jeśli któraś z członkiń stowarzyszenia opracuje własny uścisk dłoni, to wszystko popsuje. Okaże się bowiem, że jakaś inna dziewczyna zaraz będzie chciała wymyślić własny, fajniejszy uścisk i niebawem okaże się, iż jest tyle uścisków, że już nikt nie zna tego właściwego.

Uważasz zatem, że nie byłabym najlepszym miejscem do przechowywania tajemnego uścisku? Owszem. Bez obrazy, ale w takiej sytuacji członkinie klubu muszą mieć tylko jeden uścisk, bez względu na to, że każda będzie go znać. Rozumiem. A co z tajemnym hasłem? Czy mogę je przechowywać? Być może. Jeśli każda osoba ma mieć swoje własne tajemne hasło, które tylko ona powinna znać. W takim przypadku faktycznie będziesz się rewelacyjnie nadawać do przechowywania takiego hasła. Cudownie! A zatem do roboty! W takim razie zaraz powołam do życia nowe tajne stowarzyszenie i obie wybierzemy swoje tajne hasła. Ale nie znasz tajnego uścisku dłoni… I tu cię mam! Dobre! Faktycznie… No to powiedz, jaki on jest… Proszę, mówię poważnie…

478

Rozdział 10.

Tworzenie własnych obiektów

Powielanie kodu jest złe Renia z powrotem wzięła się do roboty. Jako osoba, która nigdy nie spoczywa na laurach, zdecydowała się pójść jeszcze dalej w swoich próbach poprawienia efektywności działania strony MagicznaKostka. Renia zauważyła powtarzający się kod służący do formatowania dat, który, jak przypuszcza, będzie można wyeliminować, stosując jakieś chytre sztuczki obiektowe.

Wydaje mi się, że powielanie tego kodu nie jest potrzebne. W jaki sposób mogę się go pozbyć?

Gotowy do obliczenia średniego IQ.

umysł

Jaki błąd udało się znaleźć Olkowi i pomagającym mu przeglądarkom?

jesteś tutaj  499

To ptak, to samolot… nie, to Firefox

Firefox jest uznawany za przeglądarkę, która najlepiej nadaje się do diagnozowania i poprawiania błędów… przynajmniej na razie.

Firefox spieszy z pomocą Wziąwszy pod uwagę precyzję, z jaką Firefox opisał przyczynę błędu, Olek zdecydował się prowadzić dalsze badania przy użyciu tej przeglądarki. A zatem kliknął łącze wyświetlone w konsoli błędów Firefoksa, co spowodowało, że zostało wyświetlone okno z kodem źródłowym strony, a w nim zaznaczony wiersz poprzedzający ten, w którym pojawiły się problemy.

Dla maniaków

e Firefox nie tylko posiada doskonał nia rywa wyk do a ędzi wbudowane narz ze nie ysta korz na ala błędów, lecz także pozw bug, który specjalnego dodatku o nazwie Fire skryptów na ianie ham uruc i ie wan testo przenosi bezpłatnie pobrać go na całkowicie nowy poziom. Moż tfirebug.com/. w.ge //ww http: y i zainstalować ze stron

Kliknięcie tego łącza wyświetla okno z kodem strony; dodatkowo zostanie w nim zaznaczony wiersz kodu, w którym wystąpił błąd.

Ten kod jest przyczyną problemów.

Dzięki analizie komunikatu o błędzie wyświetlonego w Firefoksie Olek doszedł do wniosku, że numer wiersza, w którym występuje problem, podany przez Safari i Firefoksa (25) jest zgodny z prawdą. Można się o tym przekonać, klikając łącze w konsoli błędów Firefoksa i wyświetlając okno z kodem źródłowym, w którym problematyczny kod będzie wyróżniony. Jednak najważniejsze jest to, że Firefox bardzo trafnie i precyzyjnie opisał, co jest przyczyną problemów. Jak się okazało, problem był całkiem prosty, a jednocześnie z rodzaju tych, które bardzo łatwo przeoczyć.

500

Rozdział 11.

else if average < 50 {

Jak widać, w tej instrukcji if pominięto nawiasy, w których powinien być umieszczony waru nek.

Zabijaj pluskwy — na śmierć!

Nie ma

niemądrych pytań

P: Nie wiem, jak wyświetlić konsolę błędów w mojej przeglądarce. Jak mogę ją otworzyć?

O: Niestety każda przeglądarka jest inna, a w niektórych

odszukanie konsoli błędów JavaScriptu jest prawdziwym wyzwaniem. Aby zatem sprawdzić, jak można wyświetlić konsolę błędów w używanej przeglądarce, i korzystać z niej podczas testowania i uruchamiania skryptów, trzeba przejrzeć dokumentację przeglądarki. Na przykład w polskiej wersji przeglądarki Firefox należy w tym celu otworzyć menu Narzędzia, a następnie wybrać opcję Konsola błędów.

P: Co sprawia, że Firefox jest taki wyjątkowy? O: Twórcy tej przeglądarki wykonali wspaniałą robotę,

implementując jej mechanizmy raportowania błędów. Pod względem określania błędów występujących w skryptach oraz zapewniania pomocy w ich odnajdywaniu Firefox po prostu bije na głowę pozostałe przeglądarki. Nie oznacza to oczywiście, że te inne przeglądarki nie zostaną dopracowane i w przyszłości nie pobiją

Firefoksa pod względem łatwości wykrywania błędów. Jednak Firefox dowiódł, że jeśli chodzi o testowanie i uruchamianie stron zawierających kod JavaScript, jest niezwykle przydatną przeglądarką, zapewniającą ogromne możliwości.

P: O jakim błędzie informował Internet Explorer? O: Tak naprawdę to nikt nie ma stuprocentowej pewności. Wynika to z faktu, że błąd zgłoszony przez Internet Explorera jest związany z problemami z wczytaniem właściwości, które z kolei są efektem błędu napotkanego przez interpreter JavaScriptu. Wiemy, że kod nie jest prawidłowo wczytywany, gdyż interpreter uznał, iż zmienna iqs jest „niezdefiniowana”, co z kolei nie jest zgodne z prawdą, gdyż w kodzie można się przekonać, że zmienna ta jest tworzona. A zatem jedyną sytuacją, w jakiej może to być problemem, jest występowanie jakiegoś innego błędu, który uniemożliwia prawidłowe wczytanie skryptu. Stąd też kolejne pytania: „Czy w kodzie jest jeszcze jakiś inny błąd?” oraz „Co w zasadzie oznacza »niezdefiniowany« (ang. undefined)?”.

Proste sposoby usuwania błędów Olek jest bardzo podekscytowany tak szybkim znalezieniem błędu w skrypcie kalkulatora IQ. A wziąwszy pod uwagę, jak prostą poprawkę musi wprowadzić, Olek uznał, że świetnie sobie poradzi w tej robocie i błyskawicznie zdobędzie tytuł detektywa TPP.

To testowanie i uruchamianie jest łatwe. Dzięki niewielkiej pomocy Firefoksa moja praca będzie prosta, szybka i przyjemna.

else if (average < 50) { Umieszczenie warunku wewnątrz nawiasów rozwiązuje problem.

Dodanie brakujących nawiasów pozwala nam pozbyć się tej pluskwy raz na zawsze.

Czy to możliwe, by Olek po początkowym łatwym sukcesie zbytnio uwierzył we własne siły? Chyba powinien dokładnie sprawdzić działanie skryptu, zanim uzna, że sprawa jest załatwiona, i urwie się z roboty na resztę dnia…

jesteś tutaj  501

Co się tu stało?

Zgłoszony błąd nie zawsze jest przyczyną problemów Niestety Olek jeszcze nie skończył poprawiania skryptu kalkulatora IQ, ponieważ Firefox wciąż zgłasza problemy, choć tym razem uskarża się na coś zupełnie innego. Choć Olka kusi, by także i teraz zastosować tę samą taktykę i z założenia uwierzyć temu, co sugeruje przeglądarka, to jednak teraz Olek ma pewne wątpliwości co do prawidłowości zgłaszanego błędu.

Ten nawias klamrowy otwierający definicję tworzy parę z nawiasem, który według przeglądarki jest źródłem problemów, a zatem — jeśli chodzi o nawiasy klamrowe funkcji — wszystko jest w porządku.

Gotowy do obliczenia średniego IQ.

Nie zawsze można ufać przeglądarce. To prawda, nawiasy klamrowe otaczające kod funkcji są w porządku. A zatem — choć czasami działa rewelacyjnie — to jednak tym razem Firefox najwyraźniej czepia się nie tego kodu, co trzeba. Warto jednak potraktować informację o nawiasach klamrowych jako ważną podpowiedź i dokładniej przyjrzeć się wszystkim nawiasom w kodzie.

502

Rozdział 11.

Zajmujemy się tylko jednym problemem naraz, więc ten komunikat ignorujemy.

Zabijaj pluskwy — na śmierć!

Bądź interpreterem JavaScriptu Twoim zadaniem jest wcielenie się w postać interpretera JavaScriptu i przemierzenie szlaku nawiasów klamrowych umieszczonych w kodzie w celu odszukania źródła problemów.

Gotowy do obliczenia średniego IQ.

jesteś tutaj  503

Rozwiązane ćwiczenia

Bądź interpreterem JavaScriptu Twoim zadaniem jest wcielenie się w postać interpretera JavaScriptu i przemierzenie szlaku nawiasów klamrowych umieszczonych w kodzie w celu odszukania źródła problemów.

Gotowy do obliczenia średniego IQ.

504

Rozdział 11.

błędem w JavaScripcie, którego jednak łatwo można uniknąć, zachowując odpowiednią uwagę i dbałość o szczegóły.

Zabijaj pluskwy — na śmierć!

efiniowane d z e i n Dzikie zmienne Olek nie może sobie zrobić nawet krótkiej przerwy, gdyż pluskwy w kodzie kalkulatora IQ pojawiają się jedna za drugą. Teraz Firefox twierdzi, że zmienna jest „niezdefiniowana”, co bardzo przypomina niewyjaśniony błąd, z którym Olek zetknął się na samym początku w Internet Explorerze. Jednak tym razem kłopotliwa niezdefiniowana zmienna nosi nazwę averag, a nie iqs.

Zwróć uwagę, że drugi błąd zniknął. Czasami poprawienie jednego błędu spowoduje rozwiązanie kilku problemów.

Nie mam pewności, jednak zawsze uważałem, że niezdefiniowana zmienna to taka, która nie została utworzona.

else if (averag < 81) { return "osobami, które powinny skorzystać z ćwiczeń umysłowych"; }

?

averag

niezdefiniowana?

Zaostrz ołówek Poniżej zapisz, co według Ciebie oznacza termin „niezdefiniowana” w kontekście ostatniego błędu wykrytego w trakcie poszukiwań Olka. ..................................................................................................................................................................................................... ..................................................................................................................................................................................................... .....................................................................................................................................................................................................

jesteś tutaj  505

Sprawdź odpowiedź

Zaostrz ołówek Rozwiązanie

Poniżej zapisz, co według Ciebie oznacza termin „niezdefiniowana” w kontekście ostatniego błędu wykrytego w trakcie poszukiwań Olka.

Termin „niezdefiniowana” (ang. undefined) odnosi się do zmiennej, która bądź to nie została utworzona

..................................................................................................................................................................................................... (przy użyciu słowa kluczowego var), bądź została utworzona, lecz jeszcze nie przypisano jej żadnej ..................................................................................................................................................................................................... wartości. W obu przypadkach występuje ten sam problem — zażądano odwołania do zmiennej, choć ..................................................................................................................................................................................................... zmienna ta nie ma jeszcze żadnej wartości. .....................................................................................................................................................................................................

Czasami błąd jest oczywisty

Coś tak trywialnego jak prosta literówka może wprowadzić w skrypcie istny chaos.

W naszym przypadku nie ma wątpliwości, że termin „niezdefiniowana” odnosi się do zmiennej, która została zastosowana, choć wcześniej jej nie utworzono. Nie ma też wątpliwości co do tego, że był to czysty przypadek. Problem został spowodowany przez prostą literówkę, przez co interpreter potraktował identyfikator jako zupełnie nową zmienną. function calcIQ Class(data) { // Obliczenie średniego IQ W przypadku prostych var average = 0; literówek, najtrudniejsze jest for (var i = 0; i < data.length; i++) { ich odnalezienie - poprawienie average += dat a[i]; } takich błędów nie nastręcza average = Math.f żadnych problemów. loor(average / data.length); // Zwracamy kla syfikację średni ego IQ if (average < 20) { return "osobami, które zabijają swoje telewizor } y"; else if (avera ge < 50) { return "osobami, które konieczni e powinny zajrze } ć do książek"; else if (avera ge < 70) { return "osobami, które powinny zajrzeć do ksi } ążek"; else if (avera g < 81) { return "osobami, które powinny skorzystać z ćwi } czeń umysłowyc h"; else if (avera ge < 91) { return "osobami uważanymi za tęp e"; } else if (avera ge < 111) { return "osobami przeciętnymi"; } else if (avera ge < 121) {

averag != average

506

Rozdział 11.

Poprawienie literówki rozwiązuje problem z niezdefiniowaną zm ienną.

else if (average < 81) { return "osobami, które powinny skorzystać z ćwiczeń umysłowych"; }

Zabijaj pluskwy — na śmierć!

Nie ma

niemądrych pytań

P: Czy jest jakaś różnica

pomiędzy komunikatami „undefined” a „not defined”?

O: Nie. Oba oznaczają dokładnie to samo. Po prostu różne przeglądarki używają jednego lub drugiego określenia. Pamiętaj, że określeń tych można używać zamiennie.

P: No dobrze, a zatem

kolejne pytanie: „Czy jest jakaś różnica pomiędzy zmienną niezdefiniowaną („undefined”) a wartością null?”.

O: Odpowiedź na to pytanie jest nieco

trudniejsza. Owszem, z czysto technicznego punktu widzenia istnieje różnica pomiędzy zmienną niezdefiniowaną i wartością null. W odróżnieniu od null „undefined” nie jest wartością, więc nie można nawet pomyśleć o próbie przypisania jej do zmiennej; to typ danych undefined, który zmienna automatycznie przyjmuje, jeśli jeszcze nie została jej przypisana żadna wartość. Z drugiej strony wartość null nigdy nie jest automatycznie przypisywana zmiennym. Czasami warto jednak przypisać właściwościom wartość null w ramach

inicjalizacji obiektu, aby było jasne, że obiekt nie został jeszcze utworzony. Zostawmy jednak te szczegóły techniczne. Najważniejsze jest bowiem to, że zarówno zmienna niezdefiniowana, jak i zmienna zawierająca null po umieszczeniu w kontekście logicznym (czyli na przykład w warunku instrukcji if) odpowiadają wartości false. Dlatego też często przed odwołaniem do zawartości obiektu można zobaczyć fragment kodu if (jakisObiekt), który sprawdza, czy obiekt w ogóle został utworzony.

JavaScript utworzy całkowicie nową zmienną. A ponieważ tej nowej zmiennej dopiero trzeba przypisać wartość, zatem próba porównania jej z inną wartością w instrukcji if stanowi poważny problem. Można by to porównać z próbą napisania recenzji filmu, jeszcze zanim zdecydowaliśmy, jaki film chcemy obejrzeć.

P: Żartujesz sobie ze mnie?

Pisząc teksty w edytorze, cały czas robię literówki, lecz nigdy nie było to przyczyną jakichkolwiek problemów. Dlaczego JavaScript jest taki wrażliwy?

P: Wciąż nie rozumiem, dlaczego O: Weź głęboki oddech i powtarzaj te prosta literówka sprawiła, że zmienna average stała się niezdefiniowana? Dlaczego tak się stało?

O: To fakt, że zmienna o nazwie average

została już wcześniej utworzona i zainicjowana, jednak JavaScript nie ma żadnej możliwości skojarzenia ze sobą zmiennych average i averag, choć ich nazwy są niemal identyczne. Z punktu widzenia JavaScriptu zmienna averag mogłaby równie dobrze nosić nazwę: srednia, shazbot lub lederhosen. W każdym z tych przypadków

cztery słowa tak długo, aż zapamiętasz je do końca życia: PRZYZWYCZAJ SIĘ DO TEGO! Nie piszemy programów, by czytali je ludzie, piszemy je dla komputerów, a te, niezależnie od używanego języka programowania, nie wybaczają nawet drobnych literówek. Nawet jeden znak w niewłaściwym miejscu może doprowadzić do awarii skryptu. Z pewną elastycznością traktowane są jedynie ogólnie pojęte odstępy otaczające kod JavaScript, w tym znaki odstępu oraz nowego wiersza. Jednak sam kod pisany w języku JavaScript musi być bardzo dokładny i precyzyjny.

Przetwarzając wartości IQ Po poprawieniu ostatniej literówki kalkulator IQ poprawiany przez Olka zaczął działać prawidłowo — wylicza średnią wartość IQ na podstawie danych zapisanych w tablicy, a następnie wyświetla wynik w formie tekstowej klasyfikacji. Olek może zatem zamknąć tę sprawę i cieszyć się z dobrze wykonanego zadania… Ale na jak długo?

Poprawienie literówki w nazwie zmiennej pozwoliło „ubić” kolejną pluskwę w kodzie.

Teraz, dzięki testom i poprawkom wprowadzonym przez Olka, kalkulator IQ działa zgodnie z oczekiwaniami.

jesteś tutaj  507

Chcesz wygrać — zadzwoń już teraz Kluczowe zagadnienia 

Choć większość przeglądarek udostępnia konsole błędów, które wyświetlają informacje o błędach napotykanych w skryptach JavaScript, to nie można na nich bezgranicznie polegać i ufać w ich poprawność.



Choć przeglądarki często prezentują ogólnikowe informacje o błędach, to zazwyczaj udostępniają jakieś podpowiedzi ułatwiające określenie miejsca, w którym należy szukać problemów.



Nawiasy klamrowe otaczające bloki kodu są częstym źródłem błędów w kodzie JavaScript — pamiętaj, by zawsze zapisywać pary nawiasów — otwierający i zamykający.



Literówki bardzo łatwo zrobić, lecz czasami trudno odszukać i poprawić — zawsze uważnie sprawdzaj umieszczane w kodzie nazwy identyfikatorów.

Przypadek błędów w połączeniach z radiem Olek niemal nie zdążył nacieszyć się swoim pierwszym sukcesem, kiedy na jego biurku pojawiła się kolejna sprawa. Ten nowy przypadek dotyczy skryptu obsługującego połączenia telefoniczne, w których rozmówcy podają odpowiedzi na ogłaszane w radio konkursy, i określającego zwycięzcę na podstawie numeru połączenia. Skrypt ma przechowywać liczbę odebranych połączeń i ogłaszać zwycięzcę dopiero wtedy, gdy liczba ta przekroczy pewną zadaną wartość, na przykład 7.

Przykro mi, jesteś rozmówcą numer 2.

Przykro mi, jesteś rozmówcą numer 5.

Sprawa nr

…sześć połączeń później…

508

Rozdział 11.

2

Zabijaj pluskwy — na śmierć!

Otwieranie dochodzenia Olek uznał, że przed otwarciem radiowej strony rejestracji rozmów telefonicznych warto zerknąć na jej kod źródłowy (możesz go znaleźć na serwerze FTP wydawnictwa Helion, pod adresem ftp://ftp.helion.pl/przyklady/hfjsc.zip) i przekonać się, jak została napisana. Olek ma nadzieję, że może od razu wpadnie na jakiś błyskotliwy pomysł, a może przynajmniej dowie się, jak skrypty na tej stronie powinny działać.

/title> ęzca konkursu telefonicznego< uthor> 08/14/2008 Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko. 08/19/2008 Udało mi się już ułożyć tę nową układankę. Już mnie znudziła, więc szukam czegoś nowego. 08/16/2008 Już mnie głowa rozbolała od zabaw tą nową kostką. Muszę sobie odpocząć. 08/21/2008 Znalazłam w internecie układankę 7x7x7. O rany! Zabawa będzie super. 08/29/2008 Spotkałam się z kilkoma innymi zapaleńcami, by porozmawiać o układaniu kostki 7x7x7. I szczerze mówiąc, mam mieszane uczucia. dy> 08/01/2008 Zdecydowałam się zamówić tę przerażającą kostkę 7x7x7. Już zaczynam się duchowo przygotowywa ć na jej układanie.

XML

09/3/2008 Brałam udział w wyścigu przed lokalnym sklepem z zabawkami, który przestał sprzedawać układanki. Miłośnicy układanek — moc jest z nami! 08/5/2008 Dostałam zamówioną kostkę 7x7x7 — przez jakiś czas pewnie będę milczeć. 09/19/2008 O rany... zajęło mi to prawie dwa tygodnie, ale w końcu udało mi się ułożyć tę kostkę!cube777.png y> 09/24/008 Śniło mi się dziś w nocy, że goni mnie ogromna kostka... Brrrr! 09/26/2008 Sny stają się coraz dziwniejsze. .. Teraz widzę, że kostka rozpada cubeapart.png się na części. Co to znaczy?

Transakcja handlowa

Lista piosenek

Wpisy w blogu

Czynnikiem, który sprawia, że XML jest tak potężny, jest jego elastyczność. W odróżnieniu od HTML-a, który zawiera ściśle określony zestaw znaczników i atrybutów, XML w ogóle ich nie definiuje — określa natomiast zestaw reguł, według których znaczniki i atrybuty mają być tworzone i używane. To każde zastosowanie (tak zwana aplikacja) XML-a ma określić wszystkie szczegóły znaczników i atrybutów opisujących używane dane.

550

Rozdział 12.

XML to język znaczników, służący do zapisywania dowolnych danych.

Dynamiczne dane

XML pozwala nam opisywać nasze dane po swojemu Prawdziwe piękno XML-a polega na tym, że dzięki niemu każdy może stać się panem i stwórcą własnych znaczników — wystarczy nieco znacznikowej alchemii, by przygotować całkowicie nowy i niepowtarzalny język znaczników, doskonale dostosowany do naszych potrzeb. Bez wątpienia istnieje już dużo gotowych języków XML, utworzonych w celu rozwiązania wielu różnych problemów. Jeśli zdarzy się, że jeden z takich języków spełnia nasze potrzeby, to zastosowanie go wcale nie będzie złym pomysłem. Choć z drugiej strony stworzenie własnego języka znaczników jest niewątpliwie pokusą, której trudno się oprzeć.

dobnie Ten kod XML, po łada się sk , ML HT d jak ko icznej z pewnej hierarch ów. nt me ele struktury

Gleaming the Cube

Każda informacja o filmie jest przechowywana w osobnym znaczniku.

13/01/1989 Graeme Clifford

Skatebordzista bada okoliczności śmierci swojego przyrodniego brata

Chociaż na pewno nigdy wcześniej nie widziałeś takiego przykładu języka XML, gdyż został on wymyślony na potrzeby tej książki, to jednak opisowe znaczniki sprawiają, że zrozumienie zawartości kodu nie jest żadnym problemem. Co ważniejsze, znaczniki bardzo dokładnie odpowiadają informacjom, które są w nich przechowywane — to po prostu samo się narzuca, czy personalia reżysera filmu zapisać w znaczniku !

ćwiczenie

Informacje o filmie są zapisane w znaczniku .

Dopasuj podanie poniżej znaczniki do opisów, a następnie przy każdym ze znaczników zapisz, czy jest to znacznik XML, czy HTML.

.....................



Wytłuszczony tekst na stronie WWW.

.....................



Tytuł internetowego kanału informacyjnego.

.....................

uthor> 08/14/2008 Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko. 08/19/2008 Udało mi się już ułożyć tę nową układankę. Już mnie znudziła, więc szukam czegoś nowego. 08/16/2008 Już mnie głowa rozbolała od zabaw tą nową kostką. Muszę sobie odpocząć. 08/21/2008 Znalazłam w internecie układankę 7x7x7. O rany! Zabawa będzie super. 08/29/2008 Spotkałam się z kilkoma innymi zapaleńcami, by porozmawiać o układaniu kostki 7x7x7. I szczerze mówiąc, mam mieszane uczucia. dy> 08/01/2008 Zdecydowałam się zamówić tę przerażającą kostkę 7x7x7. Już zaczynam się duchowo przygotowywa ć na jej układanie.

XML

09/3/2008 Brałam udział w wyścigu przed lokalnym sklepem z zabawkami, który przestał sprzedawać układanki. Miłośnicy układanek — moc jest z nami! 08/5/2008 Dostałam zamówioną kostkę 7x7x7 — przez jakiś czas pewnie będę milczeć. 09/19/2008 O rany... zajęło mi to prawie dwa tygodnie, ale w końcu udało mi się ułożyć tę kostkę!cube777.png y> 09/24/008 Śniło mi się dziś w nocy, że goni mnie ogromna kostka... Brrrr! 09/26/2008 Sny stają się coraz dziwniejsze. .. Teraz widzę, że kostka rozpada cubeapart.png się na części. Co to znaczy?

552

Rozdział 12.

................................................................................... Znacznik miłośników przestrzennych układa blog tka znaKos >Magic Renia - miłośniczka układanek 08/14/2008 Dostałam właśnie nową, zamówioną układankę. To prawdziwe cudeńko. 08/19/2008 Udało mi się już ułożyć tę nową układankę. Już mnie znudziła, więc szukam czegoś nowego. 08/16/2008 Już mnie głowa rozbolała od zabaw tą nową kostką. Muszę sobie odpocząć. 08/21/2008 Znalazłam w internecie układankę 7x7x7. O rany! Zabawa będzie super. 08/29/2008 Spotkałam się z kilkoma innymi zapaleńcami, by porozmawiać o układaniu kostki 7x7x7. I szczerze mówiąc, mam mieszane uczucia. 08/01/2008 Zdecydowałam się zamówić tę przerażającą kostkę 7x7x7. Już zaczynam się duchowo przygotowywać na jej układanie. 09/3/2008 Brałam udział w wyścigu przed lokalnym sklepem z zabawkami, który przestał sprzedawać układanki. Miłośnicy układanek — moc jest z nami! 08/5/2008 Dostałam zamówioną kostkę 7x7x7 — przez jakiś czas pewnie będę milczeć. 09/19/2008 O rany... zajęło mi to prawie dwa tygodnie, ale w końcu udało mi się ułożyć tę kostkę! cube777.png 09/24/008 Śniło mi się dziś w nocy, że goni mnie ogromna kostka... Brrrr! 09/26/2008 Sny stają się coraz dziwniejsze... Teraz widzę, że kostka rozpada się na części. Co to znaczy? cubeapart.png

Teraz postać blogu w całości zależy od jego danych…

Jednak niektórzy użytkownicy mogą być zaskoczeni tym, że podczas pobierania danych strona jest zupełnie pusta.

Zaostrz ołówek Uzupełnij brakujący wiersz kodu funkcji loadBlog(), który w momencie pobierania danych z serwera wyświetli na stronie obrazek „oczekiwania”, zapisany w pliku wait.gif. Podpowiedź: skorzystaj z głównego elementu div o identyfikatorze ”blog”. function loadBlog() { ....................................................................................... ajaxRequest.send("GET", "blog.xml", handleRequest); }

jesteś tutaj  579

Rozwiązanie ćwiczenia

Zaostrz ołówek Rozwiązanie

Uzupełnij brakujący wiersz kodu funkcji loadBlog(), który w momencie pobierania danych z serwera wyświetli na stronie obrazek „oczekiwania”, zapisany w pliku wait.gif. Podpowiedź: skorzystaj z głównego elementu div o identyfikatorze "blog".

function loadBlog() { document.getElementById("blog").innerHTML = ""; ....................................................................................... ajaxRequest.send("GET", "blog.xml", handleRequest); }

Podczas wczytywania danych blogu z serwera obrazek „oczekiwania” całkowicie zastępuje treści wpisów prezentowane na stronie.

W tym przypadku, kiedy dodajemy znacznik img zawierający dwa atry buty, zastosowanie właściwości innerHTM znacznie prostsze niż korzystanie L jest z DOM.

Animowany obrazek „oczekiwania” jest wyświetlany na stronie zamiast zawartości blogu, by poinformować użytkownika o tym, że strona właśnie wczytuje dane.

wait.gif

Nie ma

niemądrych pytań

P: Ostatni wpis w blogu zawiera znacznik HTML

P: W jaki sposób działa stan gotowości oraz status

O: Pamiętaj, że kod XML może reprezentować dowolne dane.

O: Wartości tych dwóch właściwości są pobierane z obiektu

. Jak to możliwe, skoro plik zawiera dane XML?

W tym przypadku, skoro wiemy, że treść wpisu jest wyświetlana na stronie WWW, nic nie stoi na przeszkodzie (przynajmniej z technicznego punktu widzenia), abyśmy umieścili w niej znaczniki HTML, które określą jej wygląd. Innymi słowy, treść konkretnego wpisu może zawierać znaczniki HTML, które wraz z nią zostaną umieszczone w drzewie węzłów danych XML jako specjalne znaczniki formatujące. Rozwiązanie to jest jednak ryzykowne i kłopotliwe, gdyż zmusza nas do odtworzenia węzłów formatujących w kodzie HTML, który jest przygotowywany na podstawie danych XML, a następnie umieszczany na stronie. W skryptach używanych na stronie MagicznaKostka stosujemy aktualnie prostsze rozwiązanie, w którym zamiast pełnej analizy drzewa DOM pobieramy jedynie zawartość węzłów tekstowych, a wszelkie inne węzły ignorujemy. A zatem Renia może dodawać formatujące znaczniki HTML do treści wpisów, lecz jak na razie nie są one w żaden sposób uwzględniane. Może w przyszłej wersji strony to się zmieni. Najważniejsze jest to, że na stronie wyświetlany jest tekst zawierający treść wpisów.

580

Rozdział 12.

odpowiedzi?

XMLHttpRequest. Pierwsza z nich określa stan żądania, na przykład niezainicjowane (wartość 0) lub wczytane (wartość 4). Z kolei druga właściwość określa status żądania, taki jak 404 (nie znaleziono) lub 200 (OK). Oczywiście można dokładniej sprawdzać te właściwości, jednak nie jest to konieczne. W zupełności wystarczy, jeśli zapamiętasz, że żądanie przesyłane przy użyciu Ajaksa można uznać za zakończone pomyślnie, jeśli jego stan ma wartość 4 (wczytane), a status wartość 200 (OK). To właśnie z tego powodu funkcja handleRequest() przystępuje do działania wyłącznie wtedy, gdy oba te warunki są spełnione.

Dynamiczne dane

Niedziałające przyciski Choć przemiana, jaką przeszła strona blogu Reni, jest w znaczniej mierze niewidoczna dla jej użytkowników, to jednak na pewno zauważą oni pewien poważny problem związany z działaniem jej interfejsu. Konkretnie rzecz biorąc, wygląda na to, że przyciski umieszczone na stronie nie działają tak, jak powinny.

Użytkownicy sygnalizują, że czasami przyciski nie działają tak, jak powinny. Po kliknięciu przycisku nic się nie dzieje. Co więcej, czasami po kliknięciu przycisku znika treść blogu. Co się dzieje?

Z jakiegoś powodu przyciski czasami nie działają, a gdy tak się dzieje, treść blogu staje się niewidoczna.

Zepsute przyciski = niezadowoleni użytkownicy

WYTĘŻ umysł

Dlaczego przyciski na stronie blogu nie działają? Jak sądzisz, w którym momencie procesu wczytywania strony występuje problem z przyciskami?

Renia jeszcze jest spo ale musi szybko zrozumkojna, ieć przyczynę problemu.

jesteś tutaj  581

Kiedy mogę ich używać?

Przyciski potrzebują danych Problem z przyciskami na stronie MagicznaKostka polega na tym, że mogą one działać dopiero wtedy, gdy zostaną wczytane dane blogu. A ponieważ dane blogu są aktualnie wczytywane z zewnętrznego pliku XML, zatem przez pewien czas, na szczęście zazwyczaj bardzo krótki, dane blogu nie będą dostępne. W tym czasie wyświetlanie przycisków na stronie nie ma większego sensu, gdyż i tak nie działają, a jedynie wprowadzają użytkowników w błąd.

A czy nie można by po prostu dezaktywować przycisków, kiedy dane nie są dostępne?

Dezaktywacja przycisków jest doskonałym pomysłem. Dezaktywacja przycisków na czas wczytywania danych blogu jest prostym i eleganckim sposobem rozwiązania problemu z ich działaniem. Ponieważ żądanie pobierające dane blogu jest generowane bezpośrednio po wczytaniu strony, zatem początkowo przyciski mogą być nieaktywne, a ich uaktywnienie może nastąpić wewnątrz funkcji handleRequest(), czyli wtedy, gdy będziemy już wiedzieli, że obsługa żądania została zakończona. Aby dezaktywować przyciski, musimy skorzystać z atrybutu disabled znacznika . Wystarczy umieścić ten atrybut w znaczniku w kodzie HTML strony, a przycisk stanie się nieaktywny. Aby uaktywnić przycisk, wystarczy w kodzie JavaScript przypisać wartość false właściwości disabled elementu reprezentującego przyciski.



buttonElem.disabled = false;

582

Rozdział 12.

Dynamiczne dane

Magnesiki z JavaScriptem Korzystając z magnesików z kodem, uzupełnij kod strony MagicznaKostka, tak by umieszczone na niej przyciski były nieaktywne aż do momentu wczytania danych. Niektórych magnesików będziesz musiał użyć więcej niż jeden raz.

k "; $rawBlog .= "