Kurs Javascript - zmienne

STRONA POCZĄTKOWA
Wybierz temat
Zmienne
Zmienne to coś w rodzaju "pudełek" w których możemy przechowywać pewne wartości. Każda zmienna powinna mieć zadeklarowaną
swoją nazwę. Deklaracja zmiennej ma postać:
1
2
3
4
5
6
7
8
9
var nazwa_zmiennej = wartość
//np:
var liczba = 38
var zmienna = 'to jest zmienna'
var Maksimum = Number.MAX_VALUE
var x, y, i = 0 //deklarowanie kilku zmiennych w 1 linii (wszystkie mają wartość 0)
x = y = i = 0 //deklarowanie kilku zmiennych w 1 linii (wszystkie mają wartość 0)
zmienna2 = 'przykładowy tekst'; //krótka deklaracja z pominięciem operatora var
?
Stosowanie zmiennych
Po co w ogóle stosować zmienne? Poniżej przedstawiam bardzo prosty skrypt wypisujący kilka razy wynik dodawania pewnych liczb:
1
2
3
4
5
6
<script type="text/javascript">
document.write(9 + 5 + 1 + "<br />");
document.write(9 + 5 + 2 + "<br />");
document.write(9 + 5 + 3 + "<br />");
</script>
?
Program ten wypisze nam wyniki dodawania umieszczone kolejno pod sobą: 15, 16, 17, itp. Przypuśćmy, że teraz chcieli byśmy zmienić
cyfrę 5 tak, aby równanie miało postać 9 + 7 + 1 itp. Dla tak małego programiku zmiana tej cyfry nie jest wielkim problemem.
Jednakże co by się stało gdybyśmy takich równań w naszym przykładzie mieli na przykład tysiąc lub nawet hmm milion? Wtedy zmiana
każdej linii była by dość uciążliwa. I tu przychodzą nam z pomocą zmienne:
1
2
3
4
5
6
7
<script type="text/javascript">
var cyfra = 5;
document.write(9 + cyfra + 1 + "<br />");
document.write(9 + cyfra + 2 + "<br />");
document.write(9 + cyfra + 3 + "<br />");
</script>
?
Kilka przykładów:
1
2
3
4
5
6
<script type="text/javascript">
var liczba = 5;
liczba = liczba + 2;
document.write(liczba); //wypisze sie 7
</script>
?
1
2
3
4
5
6
<script type="text/javascript">
var liczba = 5;
var liczba2 = 3;
document.write(liczba + liczba2); //wypisze sie 8
</script>
?
Podstawianie pod zmienne obiektów na stronie
converted by Web2PDFConvert.com
Poza wykonywaniem działań na zmiennych możemy je wykorzystać do poprawienia czytelności skryptów poprzez zmniejszenie
rozmiarów odwołań do obiektów.
Przykładowo, aby się odwołać do wartości jakiegoś pola z formularza musielibyśmy używać zapisu:
1
2
document.write("Tekst " + document.getElementById('formularz').poleTekstowe.value + " pochodzi z pola? formularza"
Wystarczy jednak, że w powyższym kodzie zastosujemy zmienną i od tej pory będziemy mogli się odwoływać do tej zmiennej:
1
2
3
var pole = document.getElementById('formularz').poleTekstowe.value;
document.write("Tekst " + pole + " pochodzi z pola formularza");
?
Przyznacie, że jest to o wiele łatwiejszy sposób - zwłaszcza gdy spojrzycie na poniższy przykład:
Bez zastosowania zmiennej:
1
2
3
4
document.write("Tekst " + document.getElementById('formularz').poleTekstowe.value + " pochodzi z pola? formularza"
document.write("Czy jestem pewien ze " + document.getElementById('formularz').poleTekstowe.value + " pochodzi z fo
document.write(document.getElementById('formularz').poleTekstowe.value + " - wszystko wskazuje, że tak jest!"
i z zastosowaniem zmiennej:
1
2
3
4
5
var pole = document.getElementById('formularz').poleTekstowe.value;
document.write("Tekst " + pole + " pochodzi z pola formularza");
document.write("Czy jestem pewien ze " + pole + " pochodzi z formularza?");
document.write(pole + " - wszystko wskazuje że tak jest");
?
Oczywiście nie są to jedyne zastosowania zmiennych. Możemy je dynamicznie uaktualniać, wykorzystywać w pętlach, sprawdzać ich
wartości, przyrównywać, wykonywać na nich przeróżne obliczenia itp. - oczywiście wszystko za pomocą operatorów. Można powiedzieć,
że bez zmiennych nie mógł by istnieć żaden język programowania - czyli co za tym idzie - także i Javascript.
Nazewnictwo zmiennych
Nazwy zmiennych które deklarujemy nie mogą być obojętne. Istnieją pewne zasady których musimy się trzymać. I tak:
każda nazwa zmiennej musi się zaczynać od litery (A-Z, a-z), lub znaku podkreślenia ("_"),
nazwa zmiennej nie może się zaczynać od cyfry (0-9),
nazwa zmiennej nie może zawierać spacji (można zamiast spacji używać podkreślenia),
nazwa zmiennej nie może zawierać polskich liter,
nazwą zmiennej nie może być słowo kluczowe zarezerwowane przez JavaScript.
Poprawnie nazwane zmienne mogą mieć przykładowo nazwy:
1
2
3
4
5
var
var
var
var
liczba = 5;
imie = 7,0;
ile_rzeczy = 65;
to_jest_zmienna = '10';
?
A teraz źle nazwane zmienne:
1
2
3
4
5
var
var
var
var
moja zmienna = 4;
kółeczka = 21;
var = 3;
90_zmienna = 9;
//użyta spacja w nazwie zmiennej
//polskie litery w nazwie zmiennej
//słowo kluczowe jako nazwa zmiennej
//nazwa rozpoczynająca się od cyfry
?
Rodzaje zmiennych:
converted by Web2PDFConvert.com
W JavaScripcie możemy rozróżnić następujące rodzaje zmiennych:
Liczbowe - czyli zawierające wartość liczbową
Przykład:
1
2
3
4
var zmienna = 10.5;
var zmienna = 100;
var zmienna = 25e-2 //czyli 25/100
?
Szczególną uwagę trzeba zwrócić na reprezentację liczb zmiennoprzecinkowych w Javascripcie. Więcej na temat możesz dowiedzieć się
tutaj.
Logiczne (boolean) - zawierające wartość będącą prawdą lub fałszem
Przykład:
1
2
3
var zmienna = true;
var zmienna = false;
?
Znakowe - zawierające wartość będącą ciągiem znaków (stringiem)
Przykład:
1
2
3
4
var zmienna = "Moje imie to Marcin";
var zmienna = "Jakiś tekst";
var zmienna = "--to jest tekst--";
?
Null - zawierające wartość pustą czyli null. Wartość null nie jest ani 0, ani pustym ciągiem znaków ''. Null to nic - po prostu nic.
JavaScript rozróżnia wielkość liter, tak więc null nie jest równoznaczne z Null czy NULL (i z każym innym wariactwem tego słowa).
Przykład:
1
2
var zmienna = null;
?
undefined - zmienna niezadeklarowana. Ten typ zmiennej służy do sprawdzania, czy zmienna w ogóle istnieje.
Zastosujmy powyższe informacje w prostym przykładzie:
1
2
3
4
5
6
var napis = "Ala ma kota, a kot ma Ale...";
var napis2 = "Ala go kocha, a kot Ją wcale...";
?
document.write(napis + "<br />" + napis2);
Za pomocą metody document.write() wypisujemy zmienne rozdzielając je przy okazji <br />.
Kolejny przykład:
1
2
3
4
5
6
var liczba = 10;
var liczba2 = 5;
?
document.write(liczba + "+" + liczba2 + "=" + (liczba+liczba2)); //wypisze się 10 + 5 = 15
Tworzymy dwie zmienne: liczba oraz liczba2 . Następnie wypisujemy równanie.
Jako że chcieliśmy pokazać na ekranie całe równanie (zawierające także operatory czyli "+" i "="), tak więc musieliśmy odpowiednio je
dodać do naszego wyprowadzanego napisu. Rozpatrzmy to w kolejnym przykładzie:
1
2
3
4
5
6
var liczba = 10;
var liczba2 = 5;
?
document.write(liczba + liczba2); //wypisze się 15
Gdybyśmy chciel pokazać na ekranie jak wygląda równanie tych zmiennych musimy powyższy skrypt nieco przekształcić:
converted by Web2PDFConvert.com
1
2
3
4
5
6
var liczba = 10;
var liczba2 = 5;
?
document.write(liczba + "+" + liczba2); //wypisze się 10 + 5
obiekt Number
Javascript udostępnia nam obiekt Number , który zawiera takie wartości jak:
MAX_VALUE - maksymalna wartość
MIN_VALUE - minimalna wartość
NaN - nie liczba
NEGATIVE_INFINITY - specjalna wartość nieskończoności (zwracana w przypadku overflow)
POSITIVE_INFINITY - specjalna ujemna wartość nieskończoności (zwracana w przypadku overflow)
Zastosowanie tego obiektu może mieć postać:
1
2
3
var Max = Number.MAX_VALUE;
document.write('Maksimum = ' + Max)
?
Maksimum = 1.7976931348623157e+308
Typy danych
Javascript udostępnia metodę typeof(), dzięki której możesz sprawdzać typ danych:
1
2
3
4
5
6
7
8
9
10
11
12
var n = 3;
document.write( typeof(n) ) //wypisze się "number"
?
var s = "napis";
document.write( typeof(s) ) //wypisze się "string"
var b = true;
document.write( typeof(b) ) //wypisze się "boolean"
var u;
document.write( typeof(u) ) //wypisze się "undefined"
//tutaj nie definiujemy zmiennej
document.write( typeof(inna_zmianna) ) //wypisze się "undefined"
Więcej typów danych możesz zobaczyć tutaj.
Zasięg zmiennych
Deklarowane zmienne możemy podzielić na globalne i lokalne.
Zmienne globalne deklarowane są poza funkcjami i są dostępne dla całego skryptu. Zmienne lokalne są deklarowane wewnątrz
funkcji i dostęp do nich ma tylko funkcja, w której dana zmienna została zadeklarowana. Do zmiennych globalnych dostęp z wnętrza
funkcji jest możliwy, do zmiennych lokalnych dostęp z poza funkcji nie jest możliwy. Dzięki temu deklarując zmienną wewnątrz
funkcji, nie musimy się martwić czy przypadkiem nie będzie ona kolidowała z którąś zmienną globalna (zarówno nazwą jak i zwracaną
wartością).
1
x = 10;
?
converted by Web2PDFConvert.com
1
2
3
4
5
6
7
8
9
10
11
x = 10;
//tutaj zmienna x = 10
function zmiana() {
var x = 20;
//...tutaj zmienna x = 20;
}
zmiana(); //funkcja zmiana zmienia lokalna x, wiec nie wpływa na zmienna x z poczatku skryptu
alert(x); //wypisze 10
Zauważyłeś, że przy deklaracji zmiennej wewnątrz funkcji użyliśmy przedrostka var?. Co się stanie, jeżeli taki operator pominiemy?
Jeżeli poza funkcją znajduje się zmienna o takiej samej nazwie, wówczas zamiast deklaracji nowej zmiennej, zmienimy tylko wartość
zmiennej spoza funkcji. Dlatego też deklarując zmienną wewnątrz funkcji zawsze używajmy operatora var .
1
2
3
4
5
6
7
8
9
10
var x = 10;
?
function zmiana() {
x = 20; //pomineliśmy operator var
}
zmiana();//po odlaleniu funkcji zmiana wartosc zmiennej x zadeklarowanej na poczatku skryptu zmieni się na 20
alert(x); wypisze 20
Konwersja danych
JavaScript nie wymaga od ciebie abyś deklarował typ zmiennych. Przykładowo możesz utworzyć zmienną typu liczbowego o nazwie np.
zmienna:
1
var zmienna = 10;
?
a następnie przypisać jej wartość znakową:
1
zmienna = "to jest napis";
?
Jeżeli byśmy chcieli dodać do zmiennej typu znakowego zmienną typu liczbowego wówczas otrzymalibyśmy wynik typu znakowego:
1
2
3
var zmienna = "to jest napis " + 20; //zwróci "to jest napis 20"
var zmienna = "20" + 1; //zwróci "201"
?
Gdy od zmiennej typu znakowego w której skład wchodzą tylko znaki cyfr odejmiemy zmienną typu liczbowego wówczas wykonamy
normalne równanie:
1
2
var zmienna = "21" - 1; //zwróci 20
?
Gdy od zmiennej typu znakowego w krórej skład wchodzą nie tylko znaki cyfr ale i liczb odejmiemy zmienną typu liczbowego wówczas
otrzymanym wynikiem będzie NaN (Not-A-Number)
1
2
var zmienna = "20a" - 1; //zwróci NaN
?
Podobna zasada działa w drugą stronę. Jeśli od zmiennej typu znakowego odejmiemy zmienną typu liczbowego, to w zależności czy
pierwsza zmienna zawiera litery czy też nie - otrzymamy wynik liczbowy lub typu NaN:
1
2
3
var zmienna = 10 - "5"; //zwróci 5
var zmienna = 10 - "a3"; //zwróci NaN
?
Ogólnie więc bardzo łatwo dostrzec, że powyższą konwersją danych kieruje pewna zasada:
Gdy zmienna typu znakowego zawiera prawidłowy zapis liczb (np. "-3", "2", "20", ale już nie "2-", "2a", "ac"), wówczas możemy ją
wykorzystać razem ze zmiennymi typu liczbowego, i tym samym możemy na za jej pomocą przeprowadzić równanie odejmowania,
mnożenia i dzielenia.
converted by Web2PDFConvert.com
Powyższa zasada tyczy się także operatorów inkrementacji (++) i dekrementacji (--).
1
2
3
4
5
6
7
8
9
10
11
12
var zmienna = "37";
zmienna = zmienna + 1
zmienna = zmienna - 1
zmienna++
zmienna--
?
//zwróci
//zwróci
//zwróci
//zwróci
"371"
36
38
36
var zmienna2 = "37a";
zmienna2 = zmienna2 + 1 //zwróci NaN
zmienna2 = zmienna2 - 1 //zwróci NaN
zmienna2++
//zwróci NaN
zmienna2-//zwróci NaN
Powyższe konwersje JS wykonywała automatycznie. Możemy też wymusić konwersję poprzez rzutowanie wartości na dany typ danych
za pomocą funkcji: parseInt(), parseFloat(), String()
1
2
3
4
5
6
7
var s = "100";
parseInt(s); //typeof = integer
parseFloat(s); //typeof = float
?
var liczba = 52;
String(liczba); //typeof = string
eval
Javascript udostępnia metodę eval(). Służy ona do wykonywania kodu zapisanego w formie tekstu.
Dowolny kod przekazany tej metodzie zostanie wykonany.
1
2
3
4
5
6
<script type="text/javascript">
var zmienna = "10 + 2 * 4";
document.write(zmienna); //wypisze się "10 + 2 * 4"
document.write( eval(zmienna) ); //wypisze się 18
</script>
?
Zastosowanie tej funkcji jest o wiele większe. Częstokroć tuż przed wykonaniem kodu funkcji musimy go utworzyć. Tworzymy kod,
wstawiając między kod odpowiednie zmienne, a następnie wykonujemy całość poprzez eval. Funkcja eval tak jakby wstawiała kod w
miejsce gdzie została wykonana:
1
2
3
4
eval("enemy" + x + ".energia = 0") //dla x == 1
//będzie równoznaczne z kodem Javascript:
enemy1.energia = 0
?
Powyższy przykład jest tylko przykładem. Takich technik nigdy nie powinniśmy stosować. Poza tym funkcja eval jest wolna w działaniu, i
jeżeli zależy nam na optymalnym działaniu naszych skryptów powinniśmy wybrać inne rozwiązanie.
converted by Web2PDFConvert.com