Spis treści1. Z serii JavaScript1.01 Parser kanałów Atom1.02 Parser kanałów Atom - demo 1.03 Pokaż/Ukryj zawartość 1.04 Pokaż/Ukryj zawartość - demo 1.05 Prosty slider 1.06 Prosty slider - demo 1.07 Prosty multislider 1.08 Prosty multislider - demo 1.09 Zabawa w klasy 1.10 Walidacja formularzy - JS 1.11 Walidacja formularzy - JS/PHP |
Zabawa w klasy.1. WstępJak już w wspominaliśmy w artykule 1.01 Parser kanałów Atom w JavaScript nie istnieje pojęcie klasy, choć istnieją obiekty. Jak zatem powoływać do życia i pracować z obiektami, kiedy nie ma klas. Otóż, jest na to sposób. Z pomocą przychodzi nam zwykła funkcja, której zlecamy rolę konstruktora i ewentualnie funkcja pełniącą rolę prototypu. Konstruktor wykorzystywany jest do tworzenia obiektu, natomiast prototyp (którego wartością początkową jest właściwość: konstruktor) umożliwia dodawanie metod i właściwości, dostępnych dla wszystkich obiektów. Oczywiście, możemy to robić w konstruktorze, wtedy jednak metody i właściwości są za każdym razem kopiowane do nowotworzonego obiektu, co stanowi zwykłe marnotrawstwo pamięci. Wszystko to prawda, ale nie do końca - w JavaScript istnieje więcej sposobów tworzenia obiektów, np. wykorzystując literał. Cztery najczęściej stosowane to:
Sposoby te przedstawia poniższy skrypt. Są one na tyle proste, że nie wymagają omówienia. Listing 1. Tworzenie obiektów w JavaScript. <script type="text/javascript"> // 1 sposob - za pomoca konstruktora function Konstruktor_1() { this.Metoda_1 = function() { document.write("Obiekt utworzony za pomoca konstruktora"); }; } // Tworzenie obiektu i wywolanie jego metody var Obiekt_1 = new Konstruktor_1(); Obiekt_1.Metoda_1(); // 2 sposob - za pomoca konstruktora z wykorzystaniem prototypu function Konstruktor_2() { }; Konstruktor_2.prototype.Prototyp_1 = function() { document.write("<br />Obiekt utworzony za pomoca konstruktora z wykorzystaniem prototypu"); }; // Tworzenie obiektu i wywolanie jego prototypu var Obiekt_2 = new Konstruktor_2(); Obiekt_2.Prototyp_1(); // 3 sposob - za pomoca literalu z wykorzystaniem JSON // Tworzenie obiektu i wywolanie jego metody var Obiekt_3 = { Metoda_1: function() { document.write("<br />Obiekt utworzony za pomoca literalu z wykorzystaniem JSON"); } }; Obiekt_3.Metoda_1(); // 4 sposob - za pomoca wzorca fabryki obiektow function UtworzObiekt() { var NowyObiekt = {}; // var NowyObiekt = new Object; NowyObiekt.Metoda_1 = function() { document.write("<br />Obiekt utworzony za pomoca wzorca fabryki obiektow"); }; return NowyObiekt; }; // Tworzenie obiektu i wywolanie jego metody var Obiekt_4 = UtworzObiekt(); Obiekt_4.Metoda_1(); </script> Przykład. Wynik działania skryptu z Listingu 1. Zapis var NowyObiekt = {}; jest równoważny z var NowyObiekt = new Object;. Pierwszy z nich działa szybciej. 2. Metody i właściwości obiektówPo utworzeniu obiektów chcielibyśmy mieć nieograniczony dostęp do ich metod i właściwości. Poniższy skrypt nie ma wprawdzie żadnego zastosowania praktycznego, przedstawia jednak w jaki sposób wywoływać metody obiektów, przekazywać im argumenty, uzyskiwać dostęp do właściwości obiektów i zmieniać wartości tych właściwości. Listing 2. Dostęp do metod i właściwości obiektów w JavaScript. <script type="text/javascript"> // 1 sposob - za pomoca konstruktora function Konstruktor_01(Argument_01) { this.Wlasciwosc_01 = Argument_01; this.Metoda_01 = function() { document.write(this.Wlasciwosc_01 + "<br />"); }; this.Metoda_02 = function(Argument_02) { this.Wlasciwosc_02 = Argument_02; document.write(this.Wlasciwosc_02 + "<br />"); }; this.Metoda_03 = function() { document.write(this.Wlasciwosc_02 + "<br />"); }; this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora - Tekst 3A"; this.Metoda_04 = function() { document.write(this.Wlasciwosc_03 + "<br />"); }; } // Tworzenie oraz dostęp do metod i wlasciwosci obiektu var Obiekt_01 = new Konstruktor_01("Obiekt utworzony za pomocą konstruktora - Tekst 1A"); Obiekt_01.Metoda_01(); Obiekt_01.Wlasciwosc_01 = "Obiekt utworzony za pomocą konstruktora - Tekst 1A zmieniony na 1B"; Obiekt_01.Metoda_01(); Obiekt_01.Metoda_02("Obiekt utworzony za pomocą konstruktora - Tekst 2A"); Obiekt_01.Wlasciwosc_02 = "Obiekt utworzony za pomocą konstruktora - Tekst 2A zmieniony na 2B"; Obiekt_01.Metoda_03(); Obiekt_01.Metoda_04(); Obiekt_01.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora - Tekst 3A zmieniony na 3B"; Obiekt_01.Metoda_04(); // 2 sposob - za pomoca konstruktora z wykorzystaniem prototypu function Konstruktor_02(Argument_01) { this.Wlasciwosc_01 = Argument_01; // this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A"; }; Konstruktor_02.prototype.Prototyp_1 = function() { this.Metoda_01 = function() { document.write(this.Wlasciwosc_01 + "<br />"); }; this.Metoda_02 = function(Argument_02) { this.Wlasciwosc_02 = Argument_02; document.write(this.Wlasciwosc_02 + "<br />"); }; this.Metoda_03 = function() { document.write(this.Wlasciwosc_02 + "<br />"); }; this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A"; this.Metoda_04 = function() { document.write(this.Wlasciwosc_03 + "<br />"); }; }; // Tworzenie oraz dostęp do metod i wlasciwosci obiektu var Obiekt_02 = new Konstruktor_02("Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 1A"); Obiekt_02.Prototyp_1(); Obiekt_02.Metoda_01(); Obiekt_02.Wlasciwosc_01 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 1A zmieniony na 1B"; Obiekt_02.Metoda_01(); Obiekt_02.Metoda_02("Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 2"); Obiekt_02.Wlasciwosc_02 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 2A zmieniony na 2B"; Obiekt_02.Metoda_03(); Obiekt_02.Metoda_04(); Obiekt_02.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A zmieniony na 3B"; Obiekt_02.Metoda_04(); // 3 sposob - za pomoca literalu z wykorzystaniem JSON var Obiekt_03 = { Metoda_01: function(Argument_01) { this.Wlasciwosc_02 = Argument_01; document.write(this.Wlasciwosc_01 + "<br />"); }, Metoda_02: function() { document.write(this.Wlasciwosc_01 + "<br />"); }, Metoda_03: function() { document.write(this.Wlasciwosc_02 + "<br />"); }, Wlasciwosc_03: "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 3A", Metoda_04: function() { document.write(this.Wlasciwosc_03 + "<br />"); } }; // Tworzenie oraz dostęp do metod i wlasciwosci obiektu Obiekt_03.Wlasciwosc_01 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 1A"; Obiekt_03.Metoda_01(); Obiekt_03.Wlasciwosc_01 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 1A zmieniony na 1B"; Obiekt_03.Metoda_02(); Obiekt_03.Wlasciwosc_02 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 2A"; Obiekt_03.Metoda_03(); Obiekt_03.Wlasciwosc_02 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 2A zmieniony na 2B"; Obiekt_03.Metoda_03(); Obiekt_03.Metoda_04(); Obiekt_03.Wlasciwosc_03 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 3A zmieniony na 3B"; Obiekt_03.Metoda_04(); // 4 sposob - za pomoca wzorca fabryki obiektow function UtworzObiekt_01() { var NowyObiekt = {}; NowyObiekt.Metoda_01 = function() { document.write(this.Wlasciwosc_01 + "<br />"); }; NowyObiekt.Metoda_02 = function(Argument_01) { NowyObiekt.Wlasciwosc_02 = Argument_01; // lub // this.Wlasciwosc_02 = Argument_01; document.write(this.Wlasciwosc_02 + "<br />"); }; NowyObiekt.Metoda_03 = function() { document.write(this.Wlasciwosc_02 + "<br />"); }; NowyObiekt.Wlasciwosc_03 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 3A"; NowyObiekt.Metoda_04 = function() { document.write(this.Wlasciwosc_03 + "<br />"); }; return NowyObiekt; }; // Tworzenie oraz dostęp do metod i wlasciwosci obiektu var Obiekt_04 = UtworzObiekt_01(); Obiekt_04.Wlasciwosc_01 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 1A"; Obiekt_04.Metoda_01(); Obiekt_04.Wlasciwosc_01 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 1A zmieniony na 1B"; Obiekt_04.Metoda_01(); Obiekt_04.Metoda_02("Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 2A"); Obiekt_04.Wlasciwosc_02 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 2A zmieniony na 2B"; Obiekt_04.Metoda_03(); Obiekt_04.Metoda_04(); Obiekt_04.Wlasciwosc_03 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 3A zmieniony na 3B"; Obiekt_04.Metoda_04(); </script> Przykład. Wynik działania skryptu z Listingu 2. 3. Obiekty w obiektachRozdział w przygotowaniu... 4. DziedziczenieRozdział w przygotowaniu... |