JavaScript ćwiczenia, przykłady, zadania

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

jak korzystać »

Rabaty i Cashback dla Ciebie

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

Tablice cz.2

  1. Sprawdź czy definicja osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"] to tablica, jeśli tak wyświetl na stronie tekst: "osoby to tablica" jeśli nie: "osoby to nie tablica". Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"] Odwróć tablicę, pierwszy element ma być ostatnim, itd. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"]. Wyświetl jej elementy w jedenj lini rozdzielone przecinakmi. Poniżej wyświetl jej elementy w kolejnych akapitach. Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Na podstawie danej tablicy osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"]. utwórz nową tablicę osobyImiona, która będzie zawierała tylko imiona osób z tablicy osoby. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. a) Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"], Wyświetl zawartość tablicy w konsoli, ale z powodu RODO nie chcesz wyświetlać nazwisk i imion osób, tylko zamiast nich tekst "aaa bbb".
    b) Masz dane: samochody=["Fiat","Skoda","Volvo","Mercedes","Kia","Opel","Citroen"], wyświetl je w konsoli, ale zamiast elementów 2,3 wyświetl słowo "tajne".     Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"]. Wytnij fragment tablicy, który będzie zawierał dwa pierwsze elementy. Wyświetl wycięte elementy. Wyświetl tablicę po operacji wycinania. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"]. Usuń z danych osobę: "Ewa Mocek", dodaj 2 osoby: "Maria Kapik","Elżbieta Konf". W konsoli wyświetl usuniety element i tablicę po wprowadzeniu zmian. Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Podany tekst: "JavaScript jest językiem programowania od zawsze związanym z tworzeniem aplikacji WWW." podziel na wyrazy, każdy wyraz wyświetl jako osobny element z żółtym tłem. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Utwórz 3 akapity z tekstem. Odczytaj drugi z akapitów odwołując się do niego jak do tablicy. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Wykorzystaj podaną tablicę osoby=["Jan Nowak","Kazimierz Zyga","Stefan Koc","Ewa Mocek","Mariusz Abramski"]. Nazwiska osób z tablicy, wyświetl jako nagłówki 3 stopnia, które będą posortowane alfabetycznie. 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

Tablica z obiektów (JSON)

  1. Wyświetl w konsoli tablicę wycieczki, wyświetl 1 element tablicy i określi "czym on jest". Rozwiązanie: Code Pen Strona WWW Pobierz
  2. Wyświetl w konsoli nazwy wszystkich wycieczek z tablicy wycieczki. Rozwiązanie: Code Pen Strona WWW Pobierz
  3. W kodzie HTML umieść diva z id="oferty". Napisz funkcję wyswietlOferte, która jako argument otrzymuje obiekt - ofertę wycieczki - zwraca zaś kod HTML. Zwrócony kod HTML wyświetla: div-a z klasą "oferta" o wymiarach 250 x 150px oraz informacje o wycieczce: nazwę, kraj, rejon, cenę. Ilustracja przedstawiająca działanie skryptu Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Wyświetl wycieczki, które odbywają się w Polsce. Skorzystaj z przygotowanej funkcji wyswietlOferte. Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Ze zbioru danych usuń wycieczkę z ido = 5. Wyświetl wycieczki. Skorzystaj z przygotowanej funkcji wyswietlOferte. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Do wycieczki dodaj nową ofertę o następujących parametrach. Wyświetl wycieczki. Skorzystaj z przygotowanej funkcji wyswietlOferte.
    const nowaWycieczka = {
       "ido":"20",
       "potwierdzenie":"1",
       "kraj":"Polska",
       "rejon":"Wybrzeże",
       "nazwa":"Gdańsk i ptasie zakątki",
       "cena":"499"
    }     Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Do każdej wycieczki - każdego obiektu - dodaj nowy klucz o nazwie rok i wartości 2022. Wyświetl w konsoli zbiór po modyfikacji. Rozwiązanie: Code Pen Strona WWW Pobierz

Zdarzenia - obiekt zdarzenia, wybrane zdarzenia myszy i klawiatury

  1. Utwórz przycisk z atrybutem name="moj-przycisk" i value="1500". Po kilknięciu na przycisk chcemy korzystając z obiektu zdarzenia wyświetlić: przechwycony obiekt zdarzenia, wartośc atrybutu name, wartość atrybutu value. Rozwiązanie: Code Pen Strona WWW Pobierz
  2. W div-ie z id="przyciski" utwórz 5 przycisków z podpisami: przycisk1, przycisk2, przycisk3 ... każdy z nich ma atrybut name o wartości kolejno: przycisk1, przycisk2, przycisk3 ... i atrybut value o wartości kolejno: 100, 200, 300 ... Pod div-em przyciski wstaw pusty element span. Kliknięcie na przycisk ma wyświetlać w elemencie span jego name i value np. "Nazwa: przycisk2 wartość: 200". Rozwiązanie: Code Pen Strona WWW Pobierz
  3. Masz 5 przycisków (można wykorzystać te z poprzedniego ćwiczenia). Po każdym przycisku w kodzie HTML znajduje się akapit z tekstem "Lorem ipsum ...". Akapity są domyslnie ukryte za pomocą CSS display: none; visibility: none; . Po przyciskach i apkapitach wstawiony jest div z id="opis", kilknięcie na przycisk, powoduje wyświetlenie treści akapitu, który jest po przycisku w div-ie z id="opis". Rozwiązanie: Code Pen Strona WWW Pobierz
  4. Utwórz diva i element span. Najechanie myszką na div-a ma w span wyświetlać tekst "najechałeś", opuszczenie div-a - tekst "zjechałeś". Rozwiązanie: Code Pen Strona WWW Pobierz
  5. Utwórz div-a, w środku div-a umieść przycisk z podpisem "Propagacja". Kliknięcie na przycisk ma w oknie alert wyświetlać tekst: "Kliknięto na przycisk", a kliknięcie na div-a tekst: "Kliknięto na DIVa". Zatrzymaj propogację zdarzenia po kliknięciu na przycisk. Rozwiązanie: Code Pen Strona WWW Pobierz
  6. Wstaw etykietę: "Podaj imię:", pole tekstowe z id="imie" i element span z id="imieopis". Po kliknięciu kursorem w pole tekstowe w elemencie span ma się wyświetlać tekst: "Wpisz swoje imię, pierwsza litera duża, pozostałe małe.". Po opuszczeniu pola tekstowego tekst podpowiadzi ma przestać być wyświetlany. Rozwiązanie: Code Pen Strona WWW Pobierz
  7. Utwórz 3 pola tekstowe: imię, email, wiek. Po kliknięciu kursorem w każde pole poniżej ma się wyświetlać komunikat podpowiedzi. Po wyjściu z pola komunikat ma znikać. Treśc komunikatów ma być umieszczona w elemencie input w atrybucie np. data-opis = data-opis="Podaj swój mail. Sprawdź dokładnie.". Rozwiązanie: Code Pen Strona WWW Pobierz
  8. Wstaw pole tekstowe. Napisz skrypt, który będzie wyświetlał liczbę wpisanych znaków i liczbę znaków jaka została jeszcze do wpisania. Zakładamy, że można wpisać 200 znaków. Rozwiązanie: Code Pen Strona WWW Pobierz
  9. Napisz sktypt wyświetlający na środku strony informację o aktualnym rozmiarze okna roboczego. Każda zmiana rozmiaru ma powodować aktualizację wyświetlanych informacji. Rozwiązanie: Code Pen Strona WWW Pobierz
  10. Na środku strony umieść tekst: - Najedź myszką - kręć "kołem" myszki, zmieniaj rozmiar. - napisz skrypt, który będzie powodował zmianę rozmiaru tekstu (zwiększenie / zmniejszenie) zależnie od kierunku obrotu. Rozwiązanie: Code Pen Strona WWW Pobierz
  11. W nagłówkach h1, h3, h6 umieść tekst: Najedź myszką - kręć "kołem" myszki, zmieniaj rozmiar. Najechanie myszką na na którykolwiek z tekstów i kręcenie kołem myszki ma zmieniać jego rozmiar. Rozwiązanie: Code Pen Strona WWW Pobierz

Gorąco polecam !

oferta hostingu

Noclegi w Beskidzie Niskim
Jurta - Wkoło zielono Jurta w Beskidzie Niskim - Wkoło zielono

Kurs JavaScript dla superbohaterów Serwis: Kurs Javascript dla superbohaterów Edytor Visual Studio Code Edytor: Visual Studio Code