Strona początkowa

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ć: 

	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 linni (wszystkie mają wartość 0)
	x = y = i = 0 //deklarowanie kilku zmiennych w 1 linni (wszystkie mają wartość 0)
	zmienna2 = 'przykladowy 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: 

	<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 linni była by dość uciążliwa. I tu przychodzą nam z pomocą zmienne: 

	<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: 

	<script type="text/javascript">
		var liczba = 5;
		liczba = liczba + 2;
		document.write(liczba); //wypisze sie 7
	</script>
	
	<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

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: 

	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: 

	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: 

	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 formularza?");
	document.write(document.getElementById('formularz').poleTekstowe.value + " - wszystko wskazuje, że tak jest!");

i z zastosowaniem zmiennej: 

	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:

Poprawnie nazwane zmienne mogą mieć przykładowo nazwy: 

	var liczba = 5;
	var imie = 7,0;
	var ile_rzeczy = 65;
	var to_jest_zmienna = '10';

A teraz źle nazwane zmienne: 

	var moja zmienna = 4; 	//użyta spacja w nazwie zmiennej
	var kółeczka = 21; 		//polskie litery w nazwie zmiennej
	var var = 3; 			//słowo kluczowe jako nazwa zmiennej
	var 90_zmienna = 9; 	//nazwa rozpoczynająca się od cyfry

Rodzaje zmiennych:

W JavaScripcie możeme rozróżnić następujące rodzaje zmiennych:

Liczbowe - czyli zawierające wartość liczbową
Przykład: 
	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: 
	var	zmienna = true;
	var	zmienna = false;
Znakowe - zawierające wartość będącą ciągiem znaków (stringiem)
Przykład: 
	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: 
	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: 

	
	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: 

	
	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: 

	
	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ć: 

	
	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:

Zastosowanie tego obiektu może mieć postać: 

	var Max = Number.MAX_VALUE;
	document.write('Maksimum = ' + Max)

Typy danych

Javascript udostępnia metodę typeof(), dzięki której możesz sprawdzać typ danych: 

	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ą). 

	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. 

	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: 

var zmienna = 10;

a następnie przypisać jej wartość znakową: 

zmienna = "to jest napis";

Jeżeli byśmy chcieli dodać do zmiennej typu znakowego zmienną typu liczbowego wówczas otrzymalibyśmy wynik typu znakowego: 

	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: 

	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) 

	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: 

	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.

Powyższa zasada tyczy się także operatorów inkrementacji (++) i dekrementacji (--). 

	var zmienna = "37";
	zmienna = zmienna + 1	//zwróci "371"
	zmienna = zmienna - 1	//zwróci 36
	zmienna++				//zwróci 38
	zmienna--				//zwróci 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() 

	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. 

	<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: 

	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.