Ćwiczenia z JS

Wstęp

Wykonaj poniższe ćwiczenia w tym dokumencie: albo pisząc skrypt lokalnie w znaczniku <script>, albo podłączając skrypt zewnętrznie. Pamiętaj o komentarzach objaśniających działanie programu. Skrypty "podepnij" do przycisków poprzez "onclick()" (w pierwszym zadaniu jest przykład jak to zrobić).

Zadanie 1.

Korzystając z polecenia "for()" i "console.log()" zapisz pętlę, która wypisze w konsoli przeglądarki liczby od 1 do 10.

Zadanie 2.

Zapisz pętlę "for()", która pobierze od użytkownika (dzięki "prompt()") i przypisze do zmiennych ("let") trzy wartości: startową, ilość powtórzeń oraz "krok". Niech pętla wypisze w konsoli wynik dodawania "wartość startowa" + "krok" tyle razy, ile wynosi liczba powtórzeń. Do każdego kolejnego wykonania pętli, jako wartość startowa wybierz wynik poprzedniego wykonania pętli (np. 'startowa = startowa + krok').

Wykorzystaj metodę "parseInt()" aby wartości pobrane poprzez "prompt()" zamienić na wartości liczbowe (domyślnie są one rozumiane jako łańcuchy znaków, a nie liczby).

Przykład:
Wartość startowa: 2;
Liczba powtórzeń: 4;
Krok: 5;
Wynik pętli: 7, 12, 17, 22.

Zadanie 3.

Zapisz pętlę "for()" liczącą kolejne wartości ciągu Fibonacciego, która pobierze od użytkownika ilość liczb do wypisania i wyświetli wartości w konsoli przeglądarki.

Ciąg Fibonacciego to taki ciąg liczb, którego dwie pierwsze wartości to "1" i "1", a każda kolejna wartość jest sumą dwóch poprzednich.

Zatem kolejne wartości tego ciągu to:

Przypisz dwie pierwsze wartości tego ciągu do dwóch zmiennych (np. x, y).

Do trzeciej zmiennej przypisz (pamiętaj o "parseInt(prompt())") ile liczb ma zostać wypisane (np. "iloscPowtorzen").

W pętli zastosuj warunek: jeżeli pętla jest na pierwszym powtórzeniu (np. i = 0), to po prostu wyświetl wartość pierwszej zmiennej (powinna zawierać po prostu jedynkę). W przeciwnym wypadku: wyświetl wartość pierwszej zmiennej, dodaj do pierwszej zmiennej drugą zmienną (np. x = x + y), a wartość drugiej zmiennej ustal na "pierwsza zmienna" - "druga zmienna" (np. y = x - y)

Zadanie 4.

Zapisz pętlę "for()", która pobierze od użytkownika pewną (określ z góry) liczbę słów (np. nazw owoców). Zapisz te wartości w tablicy (np. "owoce[]" - możesz skorzystać z metody "owoce.push('wartość')"). Następnie napisz pętlę "for()", która wypisze te słowa jako tekst wewnętrzny ("innerText()") bloku <div> o id = "wyswietlacz" (stwórz taki blok poniżej, przed przyciskiem "Wykonaj" - możesz także nadać mu jakiś styl, np. obramowanie).

Wskazówka: możesz skorzystać z konkatenacji (złączeń) łańcuchów tekstowych, aby poprawić czytelność wyświetlanego tekstu - niech z każdym powtórzeniem pętli wyświetlającej, doklej najpierw pusty łańcuch tekstowy (" ") do zawartości "wyświetlacza", zanim dołączysz kolejną wartość tablicy (np. "ekran.innerText += ' ' + owoce[i]").

Zadanie 5.*

Utwórz funkcję, która będzie rysowała prostokąty (bloki <div>) o zadanych wymiarach i wybranych kolorach. Pobierz od użytkownika ilość powtórzeń wykonania funkcji, wymiary (w pikselach) każdego z prostokątów oraz pozwól wybrać kolor poprzez podanie trzech wartości RGB (od 0 do 255) - skrypt powinien sprawdzić, czy wprowadzone wartości są poprawne (możesz użyć zapisu typu "lub" w warunku sprawdzającym - ma on postać || (np. "R < 0 || R > 255 || G < 0...")).

Utwórz najpierw blok początkowy (zwykły, pusty <div> przed skryptem - nadaj mu id, np. "zadanie5") i przypisz go do zmiennej (np. "let blokStartowy = document.getElementById('zadanie5')").

W każdym wykonaniu pętli twórz nowy obiekt (metoda document.createElement() "np. let nowyKlocek = document.createElement('div')"). Przypisz mu wartości stylu (np. "nowyKlocek.style.width = szerokosc+'px'; nowyKlocek.style.height = wysokosc+'px'").

Na zakończenie każdego wykonania pętli (zakładając, że użytkownik podał poprawne wartości kolorów) skorzystaj z metody "appendChild()" aby dodać nowy blok-dziecko do już istniejącego bloku (np. "blokStartowy.appendChild(nowyKlocek)").

Wskazówka: reguła stylu dotycząca koloru tła powinna mieć postać np. 'nowyKlocek.style.backgroundColor = "rgb("+R+", "+G+", "+B+")"', gdzie R, G i B to wartości intensywności kolorów pobrane od użytkownika.