CSS: wśród selektorów część 1.
23 października, 2024Przykład kodu CSS: Kod HTML do przykładu: Elementy języka html możemy modyfikować za pomocą wielu znaczników klas, które mogą być...
Czytaj dalejWe wcześniejszym wpisie omówiliśmy już wprowadzenie do programowania obiektowego. Jednak były to dopiero początki naszej przygody z OOP. Dzisiaj chciałem poruszyć temat konstruktorów czyli funkcji budujących nasz obiekt. Następnie na ich podstawie chciałem wyjaśnić czym jest przeciążanie i jak można je wykorzystać.
Konstruktorem nazywamy funkcję, która wykonuje się podczas tworzenia obiektu. Jej zadaniem jest ustawienie wartości cech (zmiennych wewnątrz obiektu). Dzięki takiemu podejściu możemy zabezpieczyć funkcję przed błędnym ustawianiem wartości. Jednak na razie wróćmy do konstruktora. Deklarujemy go za pomocą słowa kluczowego constructor(), oczywiście umieszczonego wewnątrz klasy. Następnie podajemy nawiasy klamrowe (tzw. wąsy) i w nich umieszczamy kod który się wykona. Podczas ustawiania zmiennych w konstruktorze, poprzedzamy je słowem kluczowym this. Opowiem o nim w innym wpisie, gdyż jest on jednym z trudniejszych tematów w JS’ie. Oto przykładowa implementacja konstruktora.
<script> class Czlowiek { constructor(imie, nazwisko,wiek) { this.imie = imie; this.nazwisko = nazwisko; this.wiek = wiek; } } const adam = new Czlowiek("Adam", "Kowalski", 35); alert(JSON.stringify(adam)); </script>
Użyta tutaj metoda JSON.stringify() służy do przekształcania obiektu na tekst. Jak widać udało nam się utworzyć obiekt z konstruktorem. Jednak do czego nam to potrzebne? Dzięki użyciu konstruktora możemy sprawdzać poprawność wprowadzonych danych. Imię chociażby musi być tekstem a wiek musi być liczbą nie mniejszą od zera. Przeróbmy więc nasz konstruktor tak, aby realizował te założenia. Oto moja przykładowa implementacja:
<script> class Czlowiek { constructor(imie, nazwisko,wiek) { if(typeof imie === 'string') this.imie = imie; else this.imie = null; if(typeof nazwisko === 'string') this.nazwisko =nazwisko; else this.nazwisko = null; if(wiek>=0) this.wiek = wiek; else this.wiek = null; } } const adam = new Czlowiek(0, "Kowalski", -35); alert(JSON.stringify(adam)); </script>
Użyte w kodzie słowo null oznacza zmienną pustą, nieposiadającą wartości. Pozwoli to w logice strony łatwiej obejść brak wymaganej zmiennej. Alternatywnie można po prostu zdefiniować wartość domyślną zmiennej.
Aby ustawić wartość domyślną możemy użyć zapis wykorzystującego spójnik lub. Zapisujemy wówczas instrukcję przypisania wartości zmiennej, następnie wartość oraz dodajemy symbol || po którym umieszczamy wartość domyślną. Zapis będzie wyglądał tak:
<script> class Czlowiek { constructor(imie, nazwisko,wiek) { this.imie = imie || "No-Name"; this.nazwisko = nazwisko || "No-Surname"; this.wiek = wiek || 0; } } const adam = new Czlowiek("adam"); alert(JSON.stringify(adam)); </script>
Uzyskaliśmy spodziewane rezultaty. Oczywiście zachęcam do poszerzania wiedzy z użyciem dokumentacji czy chociażby mdn.
Przykład kodu CSS: Kod HTML do przykładu: Elementy języka html możemy modyfikować za pomocą wielu znaczników klas, które mogą być...
Czytaj dalejWstęp Pętle to kluczowy element każdego języka programowania, i Python nie jest wyjątkiem. Pomimo skomplikowanego wyglądu, są one narzędziem ułatwiającym...
Czytaj dalejWstęp Instrukcje warunkowe są kluczowym narzędziem do kontrolowania przepływu programu w świecie programowania. W języku Python, pozwalają one programiście wykonać...
Czytaj dalej