Zmienne w Javascript

Typy zmiennych

W Javascript (tak jak w wielu współczesnych językach skryptowych) każda zmienna jest typu dynamicznego. Oznacza to, że zmienna "a" może być w jednej chwili typu number ( liczba ), a za chwilę typu string ( łańcuch znaków). O tym jakiego typu jest to zmienna decyduje interpreter języka. Zobaczmy to na przykładzie:

a = 5;
alert(typeof(a));
// wynik: number
a = a + "ala ma kota"
alert(typeof(a));
// wynik: string

W linii 4 powyższego kodu zaszła konwersja typu number na typ string, a to wszystko dzięki operatorowi +. Teraz zmienna a ma wartość typu string "5ala ma kota".

Na co uważać?

Bardzo częstym błędem jest zapominanie o tym, że zmienna nie jest typu number tylko typu string. Przykładem gdzie ten błąd często występuje są pola formularza z których chcemy pobrać dane. Oto prosty przykład z formularzem, gdzie wpisujemy dwie liczby i chcemy je do siebie dodać.

<form name="test">
<input name="pierwsza" type="text" />
<input name="druga" type="text" />
<input value="wynik" type="button" onclick="wynik()" />
</form>

I odpowedni do tego błędny kod Javascript:

function wynik(){
  pierwsza = document.forms['test']['pierwsza'].value;
  druga = document.forms['test']['druga'].value;
  alert(pierwsza+druga);
}

Gdy w pola formularza wpiszemy "1", a w drugie "2" i naciśniemy przycisk pokaże nam się w wyniku "12". Dlaczego? "1" i "2" są łańcuchami znakowymi ( zmiennymi typu string), a operator + działając na zmiennych typu string złącza je ze sobą (konkatenacja). Jak tego uniknąć i sprawić by nasz kod działał prawidłowo? Mamy dwa sposoby:

function wynik(){
  pierwsza = parseInt( document.forms['test']['pierwsza'].value );
  druga = parseInt( document.forms['test']['druga'].value );
  alert(pierwsza+druga);
}

Wywołując funkcję parseInt zmieniamy łańcuch znakowy na liczbę (wykonujemy konwersję między typami). Funkcja parseInt() zwraca nam liczbę całkowitą (parseInt(3.14) zwróci nam 3).
Drugim sposobem jest wymuszenie na interpreterze automatycznej konwersji w ten oto sposób:

function wynik(){
  pierwsza =document.forms['test']['pierwsza'].value * 1;
  druga = document.forms['test']['druga'].value * 1;
  alert(pierwsza+druga);
}

Mnożąc łańcuch znakowy przez 1 interpreter zakłada, że w tym łańcuchu znakowym musi być liczba i stara się przekonwertować automatycznie łańcuch znakowy na typ number. To rozwiązanie też działa, ale jest trochę mniej czytelne niż pierwsze.
Co jeśli ktoś wpisze w pierwsze pole literkę "a"? No cóż, w obu przypadkach interpreter przekonwertuje łańcuch na typ number. Pytanie tylko, jaka wartość znajdzie się w zmiennej "pierwsza"? Otóż znajdzie się tam wartość NaN (Not a Number), która będzie informować, że mimo zmienna jest typu number to jej wartość nie jest poprawną liczbą. Wywołując operacje matematyczne z NaN w wyniku otrzymamy zawsze NaN:

alert(NaN + 1); // wynik: NaN
alert(NaN * 2); // wynik: NaN
alert(NaN - NaN); // wynik: NaN
alert(NaN / NaN); // wynik: NaN

To jeszcze na koniec tego krótkiego kursu napiszę jak zapobiegać takim sytuacjom:

function wynik(){
  pierwsza =document.forms['test']['pierwsza'].value * 1;
  druga = document.forms['test']['druga'].value * 1;
  if( isNaN(pierwsza) || isNaN(druga)  ){
   alert("Wpisz liczby");
 } else {
   alert(pierwsza+druga);
 }
}

W linii 4 sprawdzamy czy znajduje się w zmiennej NaN za pomocą funkcji isNaN() (zwraca prawdę, gdy w środku jest NaN, gdy jest poprawna liczba) i odpowiednio reagujemy na to wyświetlając komunikat, aby użytkownik wpisał nam liczby.
W następnym odcinku napiszę trochę o zasięgu i deklarowaniu zmiennych w Javascript.

Javascript.net.pl

Typy zmiennych

Na co uważać?

Dodaj nową odpowiedź

Kurs Javascript

Logowanie