Kurs JavaScript - Zmienne  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-13

Język JavaScript, podobnie jak każdy język programowania, pozwala na tworzenie zmiennych. Dzięki nim możliwe jest zapamiętanie pośrednich wartości, co wpływa na uproszczenie kodu. Po co powtarzać te same obliczenia wielokrotnie? Lepiej raz wyznaczyć pewną wartość i zapisać pod nią określoną zmienną, którą można następnie używać do dalszych obliczeń.

Wykonanie poniższych zadań nie wymaga dodatkowej wiedzy.

Po wykonaniu zadań nauczysz się:

• jak używać zmiennych w języku JavaScript oraz jaka jest różnica między zmiennymi globalnymi i lokalnymi.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, jak posługiwać się zmiennymi w języku JavaScript.

Informacja

Przed przystąpieniem do zadań zwróć uwagę na to, że każdą zmienną identyfikuje jej nazwa, która powinna odzwierciedlać rolę jaką pełni. Istnieją także określone reguły, dotyczące nazewnictwa.

Działania na zmiennych i konwersja typów

Język JavaScript nie przechowuje typów zmiennych, dlatego też ta sama zmienna może przechowywać zarówno liczby jak i napisy.

1. Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
2. W oknie, które się otworzy, kliknij na zakładkę Script (oznaczoną 1 na Rys. 1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var show = document.getElementById("pokaz");
var val1 = 10;
var html = "Typ: " + typeof(val1) + "<br/>";
html += val1 + "5" + "<br/>";
html += val1 - "5" + "<br/>";
val1 = "abc";
html += "Typ: " + typeof(val1) + ", wartość: " + val1 + "<br/>";
show.innerHTML = html;

Rys. 1. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

3. Wciśnij Enter
4. Na ekranie powinien pojawić się wynik:

Rys. 2 Zmiana typu zmiennej w JavaScript

Informacja

Zmienna val1 posiada na początku typ liczbowy. Wykonując dodawanie zmiennej liczbowej i znakowej, w wyniku otrzymasz zawsze ciąg znaków (10 + "5" = "105"), a zmienna liczbowa zostanie potraktowana jako zmienna znakowa. Nie dotyczy to pozostałych operacji, jak odejmowanie, dzielenie, czy mnożenie (10 – "5" = 5), gdzie zmienna znakowa zostaje poddawana konwersji na liczbę. Jak pokazuje przykład, nic nie stoi na przeszkodzie, aby do zmiennej val1 wpisać ciąg znaków. Typ takiej zmiennej zostaje wtedy automatycznie zmieniony na typ znakowy. Aby sprawdzić, jakiego typu w danej chwili jest zmienna, używaj funkcji typeof().

Zasięg zmiennych

W języku JavaScript zmienne mogą mieć zasięg globalny bądź lokalny. Zmienne globalne tworzone są poza funkcją, a dostęp do nich jest możliwy z dowolnego miejsca w skrypcie. Z kolei zmienne lokalne tworzone są w ciele funkcji i tylko tam jest możliwy dostęp do nich.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var val1 = 10;
document.write("Poza funkcją: val1=" + val1 + "<br />");

function change() {
    var val1 = 5;
    var val2 = 4;
    document.write("Wewnątrz funkcji: val1="+ val1+", val2="+val2+"<br />");
}
change();
document.write("Poza funkcją: val1=" + val1+"<br />");

2. Wciśnij Enter.
3. W wyniku strona powinna zostać usunięta, a w jej miejscu powinien pojawić się napis, jak na Rys.3.

Rys. 3. Wynik wyświetlania zmiennych po wykonaniu skryptu.

Informacja

Zauważ, że w momencie użycia funkcji document.write() cała strona została usunięta, a w jej miejscu pojawił się ciąg znaków, umieszczony jako parametr wywołania tej funkcji. Kolejne wywoływanie tej funkcji nie usuwa poprzedniego wpisu, a jedynie dodaje kolejny ciąg znaków.

4. Zmodyfikuj kod, usuwając słowo kluczowe "var" sprzed zmiennej val1, z ciała funkcji change():

function change() {
    val1 = 5;
    var val2 = 4;
    document.write("Wewnątrz funkcji: val1=" + val1 + ", val2="+val2+"<br />");
}

5. Wciśnij Enter.
6. W wyniku powinien pojawić się napis, jak na Rys. 4.

Rys. 4. Wynik wyświetlania zmiennych po wykonaniu skryptu.

7. Zmodyfikuj kod, dodając do ostatniej linii wyświetlenie zawartości zmiennej val2:

document.write("Poza funkcją: val1=" + val1+ ", val2="+val2+"<br />");

8. Wciśnij Enter.
9. W wyniku powinien pojawić się napis, jak na Rys.5.

Rys. 5. Wyświetlenie informacji o braku zdefiniowania zmiennej.

Informacja

W pierwszym wariancie zadania zostały zadeklarowane dwie zmienne val1 –jedna poza funkcją (zasięg globalny) oraz druga, wewnątrz funkcji (zasięg lokalny). Ponieważ w funkcji użyto słowa "var", są to, mimo tej samej nazwy, dwie różne zmienne. Inaczej wygląda sytuacja w drugim wariancie. Bez słowa kluczowego "var" zmienna w funkcji jest traktowana jak ta sama zmienna, zadeklarowana przed funkcją (czyli zmienna globalna), a jej zmiany są widoczne po zakończeniu funkcji. W trzecim wariancie pojawiła się informacja o błędzie, ponieważ dostęp do zmiennych lokalnych możliwy jest tylko w ciele funkcji, dla której została utworzona dana zmienna.

W zadaniu utworzyłeś funkcję change(). Więcej o tym,. w jaki sposób tworzyć funkcje w JavaScript oraz jak one działają, znajdziesz w samouczku Funkcje.

Informacja

Zawsze deklaruj zmienne za pomocą słowa kluczowego "var". Inaczej stają się one automatycznie zmiennymi globalnymi, narażając tym samym na nadpisanie już istniejących wartości, co nie zawsze jest pożądanym efektem. Pamiętaj, że deklarowanie zmiennych przyczynia się do zwiększenia czytelności kodu.

Podsumowanie

W tym samouczku nauczyłeś się, jak używać zmiennych w JavaScript oraz jakie znaczenie ma słowo kluczowe "var". Poznałeś też różnicę między zmiennymi globalnymi i lokalnymi.

W kolejnym samouczku nauczysz się, jak tworzyć i używać tablic.

 

---