Zmienne

Zmienne to coś w rodzaju "pudełek" w których możemy przechowywać pewne dane:


<script>
    var someVar1 = 'Przykładowy tekst';
    var someVar2 = 230;
    var someVar3 = Number.MAX_VALUE;
</script>

Stosowanie zmiennych

Po co w ogóle stosować zmienne? Rozpatrzmy prosty przykład dodawania liczb:


<script>
    console.log(9 + 5 + 1);
    console.log(9 + 5 + 2);
    console.log(9 + 5 + 3);
<script>

Przypuśćmy, że teraz chcielibyśmy zmienić cyfrę 5 tak, aby równanie miało postać 9 + 7 + 1 itp.
Dla tak małego skryptu zmiana tej cyfry nie jest wielkim problemem. Co by się stało gdybyśmy takich równań w naszym przykładzie mieli na przykład tysiąc lub nawet sto tysięcy?
Zmiana każdej linii była by dość uciążliwa. I tu przychodzą nam z pomocą zmienne. Wystarczy cyfrę 5 podstawić pod zmienną:


<script>
    var myVar = 5;

    console.log(9 + myVar + 1);
    console.log(9 + myVar + 2);
    console.log(9 + myVar + 3);
</script>

<script>
    var superVar = 5;
    superVar = superVar + 2;
    console.log(superVar); //wypisze sie 7

    var superVar = 5;
    var superVar2 = 3;
    console.log(superVar + superVar2); //wypisze sie 8
</script>

Wiesz już, że skrypty umieszczamy w znacznikach scripts. W większości przykładów w tym kursie będę pomijał te znaczniki skupiając się na samym kodzie.

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:


console.log("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 field = document.getElementById('formularz').poleTekstowe;
console.log("Tekst: " + field.value);
console.log("Pochodzi z pola: " + field);

Przyznacie, że jest to o wiele łatwiejszy sposób - zwłaszcza gdy spojrzycie na poniższy przykład:

Bez zastosowania zmiennej:


console.log("Tekst " + document.getElementById('formularz').poleTekstowe.value + " pochodzi z pola formularza");
console.log("Czy jestem pewien ze " + document.getElementById('formularz').poleTekstowe.value + " pochodzi z formularza?");
console.log(document.getElementById('formularz').poleTekstowe.value + " - wszystko wskazuje, że tak jest!");

//i z zastosowaniem zmiennej:

var field = document.getElementById('formularz').poleTekstowe.value;
console.log("Tekst " + field + " pochodzi z pola formularza");
console.log("Czy jestem pewien ze " + field + " pochodzi z formularza?");
console.log(field + " - 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. Od dzisiaj przestajemy się bać zmiennych w matematyce.

Nazewnictwo zmiennych

Nazwy zmiennych które deklarujemy nie mogą być byle jakie. 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.

Tak naprawdę nie musisz wkuwać powyższych punktów na pamięć. Po prostu nie zaczynaj nazw od cyfr. Tyle. Jest jednak ważniejsza sprawa, którą zapamiętaj.
Nazywaj swoje zmienne tak, by dało się zrozumieć do czego się odnoszą.
elementsCount jest bardziej czytelne, niż aaa.

Typy danych

W Javascript dane dzielą się na 2 typy: typy proste oraz referencje. Dane typu prostego reprezentują proste typy danych - liczby, teksty, wartości boolowskie (prawda/fałsz), niezidentyfikowane (undefined) oraz null.


//przykład danych typu prostego
var varNr = 20; //prosta liczba
var text = 'To jest tekst'; //prosty łańcuch znaków
var varBol = true; //logiczny - prawda/fałsz
var someVar = null; //nic

undefined //zmienna nie określona, nie istniejąca

Powyższe typy danych jak sama nazwa wskazuje są prostymi bytami, które poza wartością nic w sobie nie mają. Żeby wykonywać na nich jakieś operacje (np. pobrać długość tekstu) musiałbyś albo za każdym razem używać na nich osobnych funkcji (tak jak w starszych PHP), albo musiałby by one być skonwertowane na obiekty, które dawały by dostęp do odpowiednich metod i właściwości.
Na szczęście podczas pracy JS poza sceną dokonuje automatycznej tymczasowej konwersji typu prostego na obiekt, odpala użytą właściwość lub metodę, a następnie przywraca daną zmienną do typu prostego:


    var ourText = 'Przykładowy tekst'; //deklarujemy prostą zmienną
    ourText.length //17 //js poza sceną skonwertowało ourText na obiekt String, sprawdziło jego długość i przywróciło zmienną do typu prostego

Dzięki powyższej konwersji w javascript wszystko zachowuje się jak obiekt. Zasada ta nie dotyczy się tylko undefined i null, które nie potrzebują mieć właściwości i metod.

Powyższe wymienione typy w większości mają też odpowiedniki w konstruktorach, które od razu robią z nich pełnoprawne obiekty:


var varNr = new Number(20); //liczba
var text = new String('To jest tekst'); //łańcuch znaków
var varBol = new Boolean(true); //logiczny - prawda/fałsz

Poza powyższym zmienne typu prostego charakteryzują się tym, że ich wartości są przypisane bezpośrednio do zmiennych (są oddzielnymi bytami). Zobaczmy przykład:


var ourVar1 = 12;
var ourVar2 = ourVar1; //do zmiennej ourVar2 przypisujemy wartość 12

ourVar1 = 15;

console.log(ourVar1); //15
console.log(ourVar2); //12

Wszystkie zmienne nie będące typem prostym są obiektami i są typu referencyjnego (są obiektami). Ten typ danych charakteryzuje sie tym, że zmienne nie mają przypisanej bezpośrednio wartości, a tylko wskazują na miejsce w pamięci, gdzie te dane są przetrzymywane.


var arr1 = [1, 2, 3];
var arr2 = arr1; //zmienna arr2 wskazuje na tablicę [1, 2, 3]

arr1.push(4);
console.log(arr1); //1, 2, 3, 4
console.log(arr2); //1, 2, 3, 4

Powyższy wywód może wydawać się skomplikowany, ale to tylko zapis teorii. Ogólnie: typy proste są proste. To co nie jest typem prostym jest obiektem. Cała reszta przyjdzie w praktyce :)

Konwersja typów prostych

JavaScript nie wymaga od ciebie abyś deklarował typ zmiennych. Przykładowo możesz utworzyć zmienną typu liczbowego o nazwie np. someVar, a następnie przypisać jej wartość znakową:


var someVar = 10;
someVar = "to jest napis";

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


var someVar = "to jest napis " + 20;
console.log(someVar); //zwróci "to jest napis 20"

var someVar = "20" + 1;
console.log(someVar);  //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 someVar = "21" - 1;
console.log(someVar); //zwróci 20

Gdy od zmiennej typu znakowego w której skład wchodzą nie tylko znaki cyfr ale i litery odejmiemy zmienną typu liczbowego wówczas otrzymanym wynikiem będzie NaN (Not-A-Number)


var someVar = "20a" - 1;
console.log(someVar); //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 someVar zawiera litery czy też nie - otrzymamy wynik liczbowy lub typu NaN:


var someVar = 10 - "5";
console.log(someVar);  //zwróci 5

var someVar = 10 - "a3";
console.log(someVar); //zwróci NaN

Ogólnie więc bardzo łatwo dostrzec, że powyższą konwersją danych kieruje pewna zasada:
Gdy someVar 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. W praktyce jednak wcale nie musisz się takich zasad uczyć. Kto by chciał się uczyć jakiś dziwnych zasad automatycznej konwersji. Dobry programista dokonuje rzutowania ręcznego :)

Sprawdzanie typu danych

Do sprawdzenia typu danych korzystamy z instrukcji typeof:


var n = 10; //liczba
var s = 'tekst'; //tekst
var a = []; //tablica
var o = {}; //obiekt
//zmienna x nie została zadeklarowana

//wypisujemy typy zmiennych
console.log(typeof(n)); //"number"
console.log(typeof(s)); //"string"
console.log(typeof(a)); //"object"
console.log(typeof(o)); //"object"
console.log(typeof(x)); //"undefined"

//sprawdzamy typy zmiennych
if (typeof n === "number") {...}
if (typeof s === "string") {...}
if (Array.isArray(a)) {...}
if (typeof o === "object") {...}
if (typeof x === "undefined") {...}

Zwróć uwagę, że przy sprawdzaniu tablicy korzystamy z nieco innej metody. W JS tablica jest typu obiekt, dlatego musimy posiłkować się inną metodą. Więcej na ten temat możesz dowiedzieć się tutaj.
Inną kluczową rzeczą którą powinieneś tutaj zapamiętać to sposób sprawdzania nieistniejących zmiennych. Nie raz będziesz tego używał.