Wykonanie skryptu JavaScript krok po kroku z podglądem zmiennych
JavaScript wykonuje się w przeglądarce, wiersz po wierszu, od góry skryptu. Każda instrukcja zmienia wartość zmiennej albo dopisuje coś do wyjścia. To narzędzie zatrzymuje się po każdej z nich i pokazuje oba te stany naraz, więc pytanie o wartość zmiennej po zakończeniu pętli przestaje być zgadywanką i staje się kwestią przeklikania kilku kroków.
Zmienną wprowadza let, const albo var. Typu się nie deklaruje: język nadaje go po wartości i zmienia w trakcie działania. W panelu zmiennych stoi nazwa, typ i wartość, dlatego od razu widać, dlaczego dodanie liczby do napisu skleja je w jeden tekst, a odjęcie tej samej liczby daje wynik liczbowy.
Najczęstszą pułapką w zadaniach z ramką kodu jest porównanie. Podwójny znak równości najpierw sprowadza obie wartości do wspólnego typu, potrójny tego nie robi, więc liczba 5 i napis o treści 5 są przy jednym zapisie równe, a przy drugim nie. Krok po kroku widać to natychmiast, bez odtwarzania reguł konwersji z pamięci.
Silnik obsługuje podzbiór języka wystarczający do zadań egzaminacyjnych: zmienne, operatory, warunki, pętle, funkcje, tablice, obiekty, napisy oraz obiekty Math i Date. Nie obsługuje zdarzeń ani sieci, ponieważ skrypt wykonuje się tu raz, od góry do dołu, i nikt w trakcie w nic nie klika.
Przykład: dlaczego "5" + 3 daje 53
1
Napisz przypisanie zmiennej wartości tekstowej o treści 5, a potem dodaj do niej liczbę 3.
2
Po pierwszym kroku panel zmiennych pokazuje typ tekstowy, a nie liczbowy.
3
Operator dodania widzi po jednej stronie tekst, więc zamienia drugi argument na tekst i skleja oba: wychodzi 53.
4
Zmień dodawanie na odejmowanie i przejdź przez skrypt ponownie: tam konwersja idzie w stronę liczby, więc wynik to 2.
Najczęstsze pytania
?
Czym różni się podwójny znak równości od potrójnego w JavaScript?
Podwójny porównuje wartości po sprowadzeniu ich do wspólnego typu, potrójny porównuje wartość i typ naraz. Dlatego liczba 5 i napis o treści 5 są równe przy podwójnym zapisie, a różne przy potrójnym.
?
Czym różni się let od const i var?
let tworzy zmienną, której wartość można później zmienić, i ogranicza jej widoczność do bloku. const tworzy nazwę, do której nie da się ponownie przypisać wartości. var jest starszy i widoczny w całej funkcji, przez co bywa źródłem pomyłek.
?
Dlaczego funkcja zwraca undefined?
Bo nie ma w niej instrukcji return albo wykonanie nigdy do niej nie dociera. Funkcja bez zwróconej wartości oddaje undefined, co widać w panelu zmiennych po powrocie z jej wnętrza.
?
Czy ten interpreter obsługuje kliknięcia i zdarzenia?
Nie. Skrypt wykonuje się jednorazowo, od pierwszego do ostatniego wiersza, więc nie ma tu na czym zawiesić obsługi zdarzeń. Sam model DOM omawia osobna lekcja kursu.
Gdzie ćwiczyć dalej
lekcje kursu o tym zagadnieniu
narzędzia z tej samej rodziny