JavaScript ćwiczenia, przykłady

Ćwiczenia z JavaScript dla początkujących (i nie tylko)

jak korzystać »

Wprowadzenie

  1. ... jak korzystać
  2. Przy użyciu JS wyświetl w tzw. konsoli przeglądarki tekst "Witaj świecie!". Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Zdefiniuj zmienną tekst o wartości "Witaj świecie!". Wyświetl w konsoli wartość zmiennej. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Zdefniuj stałą o nazwie e i wartości liczby Eulera czyli 2.718228. Stałą e wyświetl przy użyciu wyskakującego okienka. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Przypisz zmiennej o nazwie zmienna najpierw wartość liczbową 12, wyświetl typ w konsoli, następnie wartość tekstową "Język Java Script" i znowu wyświetl typ w konsoli. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Zdefiniuj zmienną o nazwie opis i wartości "JavaScript to język programowania.". Wypisz do konsoli tekst Informacja: i treść zmiennej opis. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Zdefiniuj zmienną a o wartości 21 i b o wartości 17. W oknie alert() wypisz działanie dodawania tych zmiennych tj. np 2 + 5 = 7. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Pobierz za pomocą instrukcji prompt() wartość liczbową i wyświetl w konsoli komunikat Pobrana wartość: pobrana liczba. W razie problemu odśwież stronę. Rozwiązanie: Code Pen Strona WWW Pobierz

"Wstrzykiwanie" kodu HTML do wybranego elementu

  1. Do treści strony wstaw div-a z id="wynik". Zdefiniuj dwie zmienne a o wartości 15 i b o wartości 5. Tekst wynik: i wynik dodawanie zmiennych wstrzyknij do div-a z id="wynik". Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Do treści strony wstaw div-a z id="wynik". Zdefiniuj dwie zmienne a o wartości 75 i b o wartości 123. Do div-a zid="wynik" wstrzyknij działanie dodawania zmiennych jako nagłówek 1 stopnia. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Użyj konstrukcji ${zmienna} i odwróconych apostrofów ` (na klawiszu ~) są to tzw. template strings. Zdefiniuj dwie zmienne a o wartości 75 i b o wartości 123. Do div-a zid="wynik" wstrzyknij działanie dodawania zmiennych jako nagłówek 1 stopnia. Rozwiązanie: Code Pen Strona WWW Pobierz

Pętle

  1. Napisz kod JS który w div-ie z id=wynik wyświetli liczby od 1 do 100 rozdzielone przecinkami. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Skorzystaj z operatora += by uprościć kod. Napisz kod JS który w div-ie z id=wynik wyświetli liczby od 1 do 100 rozdzielone przecinkami. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Napisz kod HTML, który wyświetli tabelę z dwoma kolumnami. W pierwszej kolumnie mają być liczby od 0 do 9. W drugiej kolumnie mają się znajdować drugie potęgi liczb z pierwszej kolumny. Napisz, kod CSS, który wyświetli krawędzie. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Zapoznaj się z przykładem przedstawiającym działanie pętli do while i do. Choć podobne różnie je kluczowy szczegół. Rozwiązanie: Code Pen Strona WWW Pobierz

Instrukcje warunkowe

  1. Zdefiniuj zmienną nazwij ją liczba. Jeśli będzie dodatnia w div-ie z id="opis"ma się wyświetlić np. tekst "21 - Liczba większa od zera."napisany jako nagłówek 1 stopnia. Jeśli nie ma się pokazać np. tekst: "-3 - Zero lub liczba ujemna.". Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Zdefiniuj zmienną nazwij ją liczba. Jeśli będzie dodatnia w div-ie z id="opis"ma się wyświetlić np. tekst "dodatnia". Jeśli nie ma się pokazać np. tekst: "0/ujemna". Wykorzystaj instrukcję warunkową if ze składnią wykorzystującą symbole ? :. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Zdefiniuj zmienną nazwij ją liczba. Jeśli będzie dodatnia w div-ie z id="opis"ma się wyświetlić np. tekst "21 - Liczba większa od zera."napisany jako nagłówek 1 stopnia. Dla liczb ujemnych ma się pokazać np. tekst: "-3 - Liczba ujemna.". Dla zera ma się wyświetlać tekst "- Zero".. Skorzystaj z instrukcji if - else if. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Napisz kod, który dla zdefiniowanej szkolnej oceny (1,2,3,4,5,6) - zmienna ocena - wypisze jej opis słowny np. dostateczny. Informacja ma być wypisana w div-ie id="opisoceny". Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Zbadaj wartość logiczną wyrażeń: "",0,null,undefined,"abc"," ",7,-45 Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Napisz skrypt, który dla 0, wypisze w konsoli tekst "Zero", dla innych liczb tekst "Liczba różna od zera". Rozwiązanie: Code Pen Strona WWW Pobierz

Obsługa zdarzeń cz. I

  1. Napisz kod, który po naciśnięciu przycisku z podpisem Powitaj!. wyświetli tekst - nagłówek 1 stopnia - "Witaj świecie!" a sam przycisk zniknie. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Napisz kod, wstawi suwak o zakresie 0 do 100 z id="suwak" wartość domyślna 0. Pod suwakiem w div id="liczba" ma się wyświetlać aktualnie ustawiona wartość. Rozwiązanie: Code Pen Strona WWW Pobierz

this, metoda .querySelectorAll(), pętla for-of

  1. Napisz kod, który wyświetli trzy przyciski, podpisane jeden, dwa, trzy. Kliknięcie na każdy z nich ma wyświetlić napis, kliknąłeś na przycisk. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Utwórz 3 elementy, przycisk z id="przycisk", div-a z id="element_div" i span z id="element_span". Kliknięcie na którykolwiek z nich ma wypisywać identyfikator klikniętego elementu do utworzonego div-a z id="opis". Użyj this. Rozwiązanie: Code Pen Strona WWW Pobierz

Obsługa zdarzeń cz. II, elementy formularzy

  1. Napisz kod, który po naciśnięciu przycisku z podpisem Pokaż. Przepisze wartość z pola tekstowego type="number" do div id="wynik". Liczbę wypisz jako nagłówek 1 stopnia. Sprawdź w konsoli typ odczytanej wartości. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Jak wyżej. Zmodyfikuj kod tak by wypisywała się 2 potęga wpisanej liczby. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Utwórz prosty "dodawacz" liczb, który będzie wyglądał w sposób następujący: Ilustracja przedstawiająca działanie skryptu
    Dodawanie liczb, ma uruchmić naciśnięcie przycisku z symbolem =.
    Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Utwórz listę select z nazwami pasm górskich, wybranie danego pasma ma wyswietlać nazwę i wysokość najwyższego szczytu.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Utwórz listę select z nazwami pasm górskich i ich najwyższych, szczytów. Wybranie danego pasma ma wyswietlać zdjęcie danego pliku. Są to pliki: babia.jpg, rysy.jpg, sniezka.jpg i wybierz.jpg.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Strona WWW Pobierz
  6. Wstaw trzy elementy typu radio, mają przypisane odpowiednio wartości 200, 300, 500. Wybranie, którejś z opcji, wyświetla jej wartość w div-ie poniżej (patrz zrzut poniżej). Ilustracja przedstawiająca działanie skryptu Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Użyj pola typu checbox. Obok pola ma być teskt Zapoznałem się z regulaminem. Jego zaznaczenie ma poniżej wyświetlać jako nagłówek 2 stopnia tekst Pamiętaj! Koniecznie przeczytaj nasz regulamin.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Fragment strony (patrz poniżej), która pozwala skonfigurować zamówienie w barze szybkiej obsługi. Wybranie danej opcji, powoduje wyświetlenie poniżej np. Ostatnio wybrano:woda Ilustracja przedstawiająca działanie skryptu Rozwiązanie: Code Pen Strona WWW Pobierz

Zmiana, odczytywanie właściwości CSS

  1. Napisz skrypt, który będzie powodował, że naciśnięcie przycisku z napisem Zmień tło będzie zmieniało kolor tła na żółty. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Utwórz div-a 300 na 300px z czarnym obramowaniem. Dodaj dwa przyciski Czerwone tło Zielone tło, kliknięcie na przycisk ma zmieniać kolor div-a na dany. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Utwórz stronę wg. wzoru. Suwak ma umożliwiać zmianę rozmiaru div-a w zakresie od 0 do 500. Wartość początkowa 300. Obok suwaka ma się wyświetlać informacja o aktualnym rozmiarze div-a.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Utwórz stronę wg. wzoru. Suwak ma umożliwiać zmianę rozmiaru czcionki w zakresie od 0 do 250px. Wartość początkowa 14px.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Utwórz stronę która ma czarne tło i zawiera suwak. Na suwaku można ustawić wartość od 0 do 255, domyślnie 0. Suwak ma umożliwiać zmianę składowej R, koloru tła strony. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Wstaw 3 suwaki odpowiedzialne za 3 składowe koloru (patrz zrzut poniżej), zmiana położenia ma zmieniać daną składową. Wyświetlana ma być aktualnie zmieniana wartość. Wartości początkowe - 255 - kolor biały.
    Ilustracja przedstawiająca działanie skryptu
    Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Wstaw 3 słowa w kolorze czerwonym, zielonym i niebieskim. Napisz skrypt, który po kliknięciu na dane słowo będzie wyświetlał kolor, którym zostało on napisane na . Rozwiązanie: Code Pen Strona WWW Pobierz

Tablice cz.1

  1. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę w konsoli (jako całość). Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do div z id="tablicaDane" za pomocą pętli for. Dane rozdziel przecinakami. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Jak wyżej ale skorzystaj z właściwości .length. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do div z id="tablicaDane" za pomocą pętli for. Dane rozdziel przecinakami. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do div z id="tablica" za pomocą pętli for-of. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Dodaj do tablicy 2 liczby 201 i 1. Ponownie tablicę do konsoli. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Dodaj do tablicy 2 liczby 33 i 44. Zrób to w jednej instrukcji. Wypisz do konsoli długość tablicy i zawartość tablicy. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Usuń ostatni element z tablicy. Wypisz do konsoli długość tablicy i jej aktualną zawartość. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Dodaj na początku tablicy dwie liczby 7 i 77. Wypisz do konsoli długość tablicy i jej bieżącą zawartość. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Usuń z tablicy pierwszy element. Wypisz do konsoli długość tablicy i jej bieżącą zawartość. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 5,12,17,23,123,45,54. Wypisz tablicę do do konsoli. Odwróć zawartość tablicy i ponownie ją wyświetl. Rozwiązanie: Code Pen Strona WWW Pobierz
  11. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 'Zenek', 'Tomasz', 'Adam', 'Ewa', 'Krzysztof'. Posortuj ją, ponownie ją wyświetl. Rozwiązanie: Code Pen Strona WWW Pobierz
  12. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 'Zenek', 'Tomasz', 'Adam', 'Ewa', 'Krzysztof'. Wykorzystaj fętlę for-each i wypisz w konsoli wszystkie argumenty funkcji wywołanej w for-each tj. element, indeks elementu, tablicę. Rozwiązanie: Code Pen Strona WWW Pobierz
  13. Zdefiniuj prostą tablicę, która będzie zawierała liczby: 'Zenek', 'Tomasz', 'Adam', 'Ewa', 'Krzysztof'. Wykorzystaj fętlę for-each wypisz w div-ie tabelę, która będzie miała dwie kolumny. Pierwsza będzie zawierała indeks tablicy, druga wartość umieszczoną w tablicy "pod tym indeksem". Rozwiązanie: Code Pen Strona WWW Pobierz

Funkcje (metody) tekstowe

  1. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Pod tekstem do div-a o id=dane wypisz długość tekstu i słowo znaków np. 120 znaków. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja wypisz z podanego tekstu 2 znaki począwszy od 22 znaku tekstu. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Do div-a id=dane wypisz fragment tekstu do 42 do 72 znaku. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Do div-a id=dane wypisz tekst począwszy od 42 znaku. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Słowo Netscape zamień na Netscape Communications Corporation. Ponownie wypisz tekst, tym razem do div-a id=dane. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Wykorzystaj metodę .split i do konsoli wypisz pojedyńcze wyrazy - przyjmij, że wyrazy rozdziela spacja. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Ponownie wypisz tekst, tym razem do div-a id=dane, ale ma się on składać tylko z dużych liter. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Ponownie wypisz tekst, tym razem do div-a id=dane, ale ma się on składać tylko z małych liter. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Poniżej do div-a id=dane, wypisz: słowo Netscape zaczuna się od ... znaku. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Do zmiennej tekst przypisz wartość "JavaScript (w skrócie JS) – język został opracowany przez firmę Netscape w połowie lat 90. Jego twórcę jest Brendan Eich.". Tekst wypisz do div-a id=informacja. Poniżej do div-a id=dane, wypisz: ostatnia spacja to znak nr.: .... Odczytaj pozycję ostatniej spacji. Rozwiązanie: Code Pen Strona WWW Pobierz

Funkcje matematyczne - obiekt Math

  1. Do zmiennej liczba1 przypisz 216.7621. Wyświetl część całkowitą tej zmiennej w konsoli Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Do zmiennej liczba1 przypisz 216.7621 do zmiennej liczba2 201.12. Wykorzystaj metodę .round() zakokrągl obie zmienne, wyniki wyświetl w konsoli. Jak działa ta metoda? Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Wyświetl w konsoli 6 przypadkowych liczb z zakresu od 1 do 49. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Wyświetl na ekranie 6 przypadkowych liczb całkowitych rozdzielonych przecinkami. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Skorzystaj z metody prompt(). Napisz program, który w kółko dla podanego promienia >0 oblicza pole koła i jego obwód. Rozwiązanie: Code Pen Strona WWW Pobierz

Definiowanie funkcji, rodzaje funkcji

  1. Napisz prostą funkcję, która nie posiada, żadnych arguemntów, wypisuje do konsoli tekst: "Funkcja działa". Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Napisz prostą funkcję o nazwie poleKola(), funkcja dla podanego promienia: np. poleKola(1), ma wypisać w konsoli tekst: Pole koła o promieniu: 1 wynosi: 3.141592653589793. Wywołaj funkcję z argumentami 1,2,10. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Napisz prostą funkcję o nazwie poleProstokata(), funkcja dla podanych argumentów - boki a i b. np. poleProstokata(2,5), ma wypisać w konsoli tekst: Pole prostokąta o bokach: 20 i 50 wynosi: 1000. Wywołaj funkcję z argumentami 2 i 5 oraz 20 i 50. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Napisz funkcję ze zdefiniowanymi wartościami domyślnymi. Funkcja ma się nazywać: poleProstokata(), funkcja dla podanych argumentów - boki a i b. np. poleProstokata(2,5), ma wypisać w konsoli tekst: Pole prostokąta o bokach: 20 i 50 wynosi: 1000. Wywołaj funkcję z argumentami domyślnymi oraz 20 i 50. Wartości domyślne ustaw na 0. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Napisz funkcję, która wypisze w konsoli liczby podane jako argumenty - dowolną ich liczbę. Skorzystaj z właściwości arguments. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Napisz funkcję, która wypisze w konsoli liczby podane jako argumenty - dowolną ich liczbę. Skorzystaj z tzw. rest parametr. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Napisz funkcję sumator. Do funkcji można przekazać dowolną liczbę argumentów. W div-ie ma wypisywać podane argumenty i ich sumę. Skorzystaj z tzw. rest parametr. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Jak wyżej napisz funkcję sumator. Do funkcji można przekazać dowolną liczbę argumentów. Skorzystaj z tzw. rest parametr. Funkcja w miejscu wywołania ma zwracać podane argumenty i ich sumę. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Zdefiniuj wyrażenie funkcyjne o nazwie witaj(), które wypisuje do konsoli tekst "Witaj świecie!". Wywołaj je po definicji wyrażenia a potem przed. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Utwórz stronę, przycisk Wstaw tekst ma powodować wyświetlenie w divie tekstu "Funkcja anonimowa". Wykorzystaj funkcję anonimową. Rozwiązanie: Code Pen Strona WWW Pobierz
  11. Utwórz wyrażenie funkcyjne poleProstokata, podawane są dwa argumenty a i b. Wynik ma być wypisywany do konsoli. Skorzystaj z tzw. funkcji strzałkowych. Wywołaj funkcję z argumentami 2 i 5 oraz 20 i 50. Rozwiązanie: Code Pen Strona WWW Pobierz
  12. Utwórz wyrażenie funkcyjne poleKwadratu, argumentem jest bok a. Wynik ma być wypisywany do konsoli. Skorzystaj z tzw. funkcji strzałkowych. Wywołaj funkcję z argumentami 5 oraz 50. Rozwiązanie: Code Pen Strona WWW Pobierz
  13. Utwórz bezargumentowe wyrażenie funkcyjne powitanie, które wypisuje do konsoli tekst 'Witaj'; Rozwiązanie: Code Pen Strona WWW Pobierz
  14. Utwórz wyrażenie funkcyjne poleKwadratu, argumentem jest bok a. Funkcja ma zwracać wynik w miejscu wywołania. Skorzystaj z tzw. funkcji strzałkowych. Wywołaj funkcję z argumentami 5 oraz 50, tekst wypisz do div-a wynik. Rozwiązanie: Code Pen Strona WWW Pobierz

Obiekty cz.1

  1. Zdefiniuj obiekt o nazwie oferta, z następującymi właściwościami: marka : "Kia", model : "Carens", cena : 60000 i metodą o nazwie koszt100km(), która zwraca wartość 37 zł. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Jak wyżej, zdefiniuj dodatkowo właściwość spalanie przypisz jej wartość 8 (8 litrów/100km). "Przed obiektem" zdefiniuj zmienną pb95 przypisz jej wartość 4 (4 zł./litr). Zmodyfikuj metodę koszt100km() tak by zwracała koszt, przy założenej cenie paliwa i spalaniu danego samochodu. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Do obiektu dodaj metodę wiekSamochodu(), która zwraca jego wiek na podstawie podanego rocznika. Obiekt wyświetl w konsoli. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Zmodyfikuj metodę wiekSamochodu(), tak by zwracała odpowiednio 1 rok, 2 lata, 3 lata, 4 lata, 5 lat, 6 lat .... Sprawdź działania dla kilku możliwych roczników. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Zdefiniuj konstruktor o nazwie Oferta. Zdefiniuj za jego pomocą obiekt o nazwie oferta1. Wyświetl jego zawartość w konsoli. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Zawartość obiektu wypisz do div-a od id="spisofert". Wyróznij: markę, model, cenę. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Obiekty klasy Oferta, uczyń częściami składowymi obiektu Komis. Wypisz obiekt Komis do konsoli. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Wypisz do konsoli klucze obiektu Komis. Wcześiej zdefiniuj funkcje wypiszOferte(idOferty), i to ją w pętli wykorzystaj do wypisywania kluczy. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Wypisz do konsoli poszczególne oferty. Oferty ma wypisywać funkcja wypiszOferte(idOferty), użyta w pętli. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Zdefiniuj funkcję wypiszOferte(idOferty), ma ona w miejscu wywołania zwracać kod HTML ofertę. Rozwiązanie: Code Pen Strona WWW Pobierz
  11. Zdefiniuj funkcję wypiszOferte(idOferty), ma ona w miejscu wywołania zwracać kod HTML ofertę. Funkcja ma być wywołana w pętli przez funkcję wypiszWszystkieOferty(). Rozwiązanie: Code Pen Strona WWW Pobierz
  12. Zdefiniuj funkcję usunOferte(idOferty), ma ona usuwać obiekt - ofertę - z podanym identyfikatorem. Zdefiniuj zewnętrzny arkusz styli dla strony. Rozwiązanie: Code Pen Strona WWW Pobierz
  13. Dodaj nową ofertę: Suzuki, Vitara, 80500 zł,9 l./100km.,2019 rok Rozwiązanie: Code Pen Strona WWW Pobierz
  14. Zdefiniuj funkcję dodajOferte(marka, model, przebieg, spalanie, rocznik). Klucz - identyfikator ogłoszenia - ma być definiowany ręcznie. Rozwiązanie: Code Pen Strona WWW Pobierz
  15. Zdefiniuj funkcję dodajOferte(marka, model, przebieg, spalanie, rocznik). Klucz - identyfikator ogłoszenia - ma być tworzony automatycznie, na podstawie kluczy już istniejących. Rozwiązanie: Code Pen Strona WWW Pobierz
  16. Zdefiniuj funkcję zmienOferte(idOferty, marka, model, cena, spalanie, rocznik). Wypisz w konsoli ogłosznie po zmianie danych. Rozwiązanie: Code Pen Strona WWW Pobierz
  17. W każdym ogłoszeniu utwórz aktywny element - słowo - Usuń. Kliknięcie na nie ma powodować usunięcie oferty. Rozwiązanie: Code Pen Strona WWW Pobierz
  18. W każdym ogłoszeniu utwórz aktywny element - słowo - Edycja. Kliknięcie na nie ma powodować przepisanie zawartości oferty do formularza. Po zmianie informacji i naciśnięciu przycisku Zmień, dane mają ulec zmianie - nastąpić ma odświeżenie treści. Rozwiązanie: Code Pen Strona WWW Pobierz
  19. Do formularza dodaj przycisk Dodaj, naciśnięcie przycisku ma dodać ofertę na podstawie danych z formularza. Nastąpić ma także odświeżenie treści strony. Rozwiązanie: ? Code Pen Strona WWW Pobierz
  20. Zmodyfikuj dotychczasowe funkcje, uprość kod. Link do przykładowego rozwiązania poniżej. Rozwiązanie: Code Pen Strona WWW Pobierz

Obiekty cz.2

  1. Zdefiniuj obiekt wg. poniższego opisu:
    Ilustracja przedstawiająca działanie skryptu
    Wykorzystaj destrukturyzację i przypisz wartość kluczy obiektu do zmiennych o nazwach marka, model, cena. Zmienne wypisz w konsoli.
    Rozwiązanie: Strona WWW Pobierz
  2. Zdefiniuj najpierw zmienne marka, model, cena. Na tej podstawie zdefiniuj obiekt Oferta. Obiekt ma posiadać metodę koszt100km. Wykorzystaj skrócony zapis tzw. literały obiektowe ES6. Rozwiązanie: Strona WWW Pobierz
  3. Zapoznaj się z przykładem dynamicznego tworzenia nazw kluczy. Rozwiązanie: Strona WWW Pobierz
  4. Zdefiniuj obiekt wg. wzoru. Wypisz jego zawartość tak jak na rysunku. Ilustracja przedstawiająca działanie skryptu Rozwiązanie: Strona WWW Pobierz