JavaScript: Pętla do while
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej i zacząć korzystać z nowoczesnych frameworków.
Kolejny rodzaj pętli dostępny w JavaScripcie to pętla do while.
Natomiast na początek utworzę pętlę while
aby móc Ci pokazać czym one się różnią.
Stworzymy sobie zmienną number równa się 20
i będę chciał powiedzieć tak długo, jak number jest większy od 30,
wiemy, że nie jest,
chcemy wyświetlać console.log(number) i zmieniać wartość number na większą.
I teraz zobaczmy czy coś nam się wykona.
Ta pętla w ogóle się nie wykonała, bo już
przy pierwszym sprawdzeniu mamy tutaj false.
Czyli czy 20 jest większa od 30? Nie jest.
Nie wykonujemy tego kodu,
przechodzimy do kolejnej linijki poza pętlą.
Czyli jeżeli warunek jest fałszywy to pętla while nie wykona się ani raz.
Natomiast mamy również taką pętlę jak do while, która mówi nam mniej więcej tyle, że
wykonamy jakiś kod przynajmniej raz, a dopiero potem sprawdzimy warunek.
I czasami może ona okazać się przydatna,
chociaż przyznam, że bardzo rzadko z niej korzystam.
Warto jednak wiedzieć, że taka pętla istnieje.
Ona wygląda tak, że piszemy do i podajemy blok kodu jaki chcemy wykonać, czyli np.
console.log(number) i następnie number++
a potem podajemy while i wstawiamy tutaj warunek. Czyli number większe od 30.
A więc tu mówimy tak, wyświetl nam number to jest 20,
zwiększ to o 1 i następnie dopiero
sprawdź warunek. Będziemy mieli 21 czy 21 jest większe od 30.
Nie jest. Więc nie wykonuj ponownie tego kodu.
Przejdź dalej. A zatem jeżeli warunek od razu jest
fałszywy, podany tutaj kod wykona się przynajmniej jeden raz.
W tym przypadku nie wykona się ani razu. Zobaczmy.
Zobaczyliśmy właśnie ten console.log 20, to jest dokładnie ta linijka, zwiększyliśmy do 21,
warunek okazał się fałszywy, więc wyskakujemy poza pętle,
kontynuujemy wykonywanie kodu, który mógłby się tutaj znaleźć.
Zatem taka subtelna różnica, ale czasami może ona być bardzo przydatna.