Twój pierwszy program
Zanim zaczniesz: po kliknięciu w poniższe linki zadań i przykładów wybierz plik index.js (po lewej stronie) i naciśnij „Run” (nad okienkiem kodu), aby wygenerować kod.
Na czym polega zadanie...
Wykorzystując już nabytą wiedzę możemy stworzyć prostą, aczkolwiek przydatną aplikację. Jeśli nie pamiętasz kolejności planet w Układzie Słonecznym to nasza aplikacja ją Ci przypomni. Gdy użytkownik ją uruchomi, będzie mógł podać cyfrę planety, czyli jej miejsce w kolejności od Słońca. Następnie użytkownik naciska ‘wyszukaj’ i dowiaduje się, która to planeta. Np. użytkownik wpisuje cyfrę 3 i wyświetlamy mu informację, że trzecią planetą od Słońca jest Ziemia. Nic prostszego, prawda?
Zadanie wykonaj tutaj:
1. Zbudujmy na początek tablicę składającą się z nazw (stringów) planet. Planety powinny być w kolejności, takiej samej jak w Układzie Słonecznym. Dla przypomnienia kolejność planet to: 'Merkury', 'Wenus', 'Ziemia', 'Mars', 'Jowisz', 'Saturn', 'Uran', 'Neptun’
2. Przypisz naszą tablicę do zmiennej planets.
3. Następnie stworzymy funkcję, która docelowo będzie wyświetlać odpowiednią planetę. Nazwijmy ją searchPlanet.Nie musimy przejmować się podpięciem tej funkcji do guzika „Wyszukaj” (część HTML i CSS jest już na tym etapie wykonana).
3. Skopiuj dwie poniższe linijki kodu i wklej je na początku naszej funkcji. , Służą one do połączenie naszego JSa z HTML-em - do odczytania cyfry wpisanej przez użytkownika aplikacji oraz do wyświetlenia rezultatu użytkownikowi.
var userInput = document.getElementById("userText").value;
var result = document.getElementById("result");5. Pod powyższymi linijkami (nadal w naszej funkcji) stwórz pętlę.. Po co nam pętla? Dzięki niej możemy automatycznie sprawdzać i przyporządkować planety danej cyfrze. Pamiętaj o odpowiedniej ilości iteracji. Ilości iteracji zależna jest od długości naszej tablicy. Jeśli nie możesz zrobić tej części zerknij do lekcji o pętlach, szczególnie do przykładu, w którym wskazujemy ilość powtórzeń pętli za pomocą długości tablicy.
6. W naszej pętli będziemy sprawdzać, czy wpisana przez użytkownika cyfra odpowiada którejś z planet w tablicy.Dlatego użyjemy instrukcji warunkowej if. Nasza logika wygląda następująco: jeśli wpisana przez użytkownika cyfra (pamiętajmy, że przypisaliśmy ją do zmiennej userInput) równa się licznikowi naszej pętli, czyli i (a właściwie i+1, o czym niżej), to do naszego rezultatu przypisujemy (pamiętajmy, że przypisaliśmy go do zmiennej result) odpowiednią planetę.
7.Zwróć uwagę na warunek, który konstruujemy, a dokładniej na operator równania. Dla przypomnienia, pojedyncze równanie „=” przypisuje wartość, podwójne równanie „==” sprawdza czy dane elementy są równe pod względem wartości i ignoruje różnice w typie danych (np. 2==’2’ zwróci true), potrójne równanie „===” dodatkowo sprawdza, czy dane elementy są takie same pod względem typu (np. 2===’2’ zwróci false). Czy user wpisując w pole cyfrę wpisuje stringa czy number?
8.zwróć uwagę na to, że jeśli licznik naszej pętli początkowo wynosi 0 to nasze równanie musi być dostosowane.Nie będziemy zatem porównywać tego, co wpisał użytkownik z licznikiem, lecz z licznikiem + 1, ponieważ nie chcemy, aby użytkownik liczył planety od zera.
9.jeśli wykorzystujemy naszą zmienną result do wyświetlenia planety to powinniśmy opatrzyć ją dodatkową metodą innerText (czyli result.innerText).
Gratulacje!
Twój pierwszy program masz już za sobą.
Jeśli utknąłeś/łaś gdzieś kliknij w poniższy link i przeanalizuj kod:
