niedziela, 5 września 2010

Kurs JavaScript cz.3

3. Zmienne c.d/Instrukcja warunkowa if.


Zmienianie wartości zmiennych oraz jej typu:

var zmienna = "Szymon";
document.write("Masz na imię: " + zmienna + " i masz: ");
zmienna = 18;
document.write(zmienna + " lat.");

Wyświetlanie zmiennych:

var imie = "Szymon":
document.write("Twoje imię to:" + imie + "\n");

Pobieranie danych:

prompt("Podaj swoje imię: ");

Przypisywanie pobranego tekstu do zmiennej:

var zmienna = prompt("Podaj swoje imię: ");
document.write("Masz na imię: " + zmienna + "!");

Można również tak:

document.write("Siema: " + prompt("Podaj imię: ") + "!");

Nie jest to zbyt czytelny zapis, ale uzyskujemy bardziej zwięzły zapis i nie musimy używać zmiennej pomocniczej.

Operacje na zmiennych

Operacje na zmiennych możemy podzielić na:
- operacje arytmetyczne
- operacje logiczne
- operacje bitowe
- operacje przypisania
- operacje na łańcuchach znaków
- operacje porównania

Operacje arytmetyczne to nic innego jak: dodawanie, odejmowanie, możenie, dzielenie. Zapisujemy je za pomocą znaków znanych z matematyki: +,-,*,/.

Oto przykład:

var zmienna1 = 12;
var zmienna2 = 30;
var suma = zmienna1 + zmienna2;
document.write("Suma liczb wynosi:" + suma);
zmienna1 = zmienna2 + 7;
zmienna2 = zmienna1 + 9;
suma = zmienna1 + zmienna2;
document.write("A teraz suma wynosi:" + suma);
document.write("Można również zrobić tak: " + (suma+10) + " !");
zmienna1 = zmienna2 * suma;
zmienna2 = suma / zmienna1;
suma = zmienna2 - zmienna1;
zmienna1 = 5;
document.write("A teraz troszkę pomieszane: " + (suma*zmienna1) + " ale cóż, trzeba mieszać żeby coś z tego wyszło!");

Tak, więc widzisz, że można dodawać, odejmować, mnożyć i dzielić zmienne przez siebie jak i przez liczby, pamiętajmy jednak o jednym, gdy chcemy wykonać operacje na zmiennych w document.write() musimy umieścić je w nawiasie tak by nie wynikły z tego błędy. I pomiędzy dwa znaki plusa. Plus umożliwia nam "sklejenie" dwóch ciągów znaków lub zmiennych.

Inkrementacja i dekrementacja

Przekładając to na chłopski rozum: inkrementacja to zwiększanie wartości o 1, a dekrementacja to zmniejszenie wartości o 1. Trudne? Nie przejmuj się z czasem się przyzwyczaisz :D A teraz wypadało by podać jakiś przykład(UWAGA! Spróbuj się domyślić jaki będzie wynik!):

var jeden = 1;
var dwa = 2;
var trzy = 3;
var cztery = 4;
document.write("Jeden: " + (jeden++) + "<br>");
document.write("Dwa: " + (++dwa) + "<br>");
document.write("Trzy: " + (trzy--) + "<br>");
document.write("Cztery: " + (--cztery) + "<br>");
document.write("Czy już wiesz jak to działa?");

Jeśli nie wiecie jak to działa, należy wam się wytłumaczenie:
dwa plusy(++) - inkrementacja(zwiększanie o 1)
dwa minusy(--) - dekrementacja(zmniejszanie o 1)

Jest jednak różnica pomiędzy znakami z przodu zmiennej a po niej, jeśli umieścimy znak ++ lub -- przed nazwą zmiennej, jej wartość zostanie od razu zmieniona i wynik można zobaczyć od razu, a gdy umieścimy znak ++ lub -- po nazwie zmiennej wartość zmiennej zostanie zmieniona, lecz nie zostanie ona wyświetlona od razu, a dopiero w następnej instrukcji z użyciem nazwy tej zmiennej, dla zobrazowania tych słów przykład:

var x = 1;
var y = 1;


y = x++;
document.write("Wartość y: " + y + "<br>"); // w tej chwili wartość zmiennej y wynosi 1
document.write("Wartość x: " + (++x) + "<br>"); // w tej chwili wartość zmiennej x wynosi 3? dlaczego?
document.write("Wartość y: " + (y++) + "<br>"); // i tutaj wartość y zostanie wyświetlona jako 1!
document.write("Wartość y:" + y + "<br>"); // a teraz 2!

Czy wiesz już jak to działa? Mam nadzieję, że tak :D Druga instrukcja wypisania może co niektórych zadziwić, ale jak ktoś jest bystry to może zauważyć, że instrukcja przypisania y = x++; zwiększa wartość zmiennej x o 1, a zmiennej y nie modyfikuje, ponieważ wartość zmiennej x dostępna będzie dopiero w następnej instrukcji(nie jest zmieniana w tym dokładnie w tej instrukcji)!. Mam nadzieję, że wszyscy zrozumieli o co w tym chodzi.


Operacje na bitach


Rodzaj działania
Symbol w JavaScript
bitowe AND
&
bitowe OR
|
XOR
^
przesunięcie bitowe w lewo
<< 
przesunięcie bitowe w prawo
>> 
przesunięcie bitowe w prawo z wypełnieniem zerami
>>> 


Operacje przypisania


Argument 1
Operator
Argument 2
Znaczenie
X
+=
Y
X = X +Y
X
–=
Y
X = X – Y
X
*=
Y
X = X * Y
X
/=
Y
X = X / Y
X
%=
Y
X = X % Y
X
<<=
Y
X = X << Y
X
>>=
Y
X = X >> Y
X
>>>=
Y
X = >>> Y
X
&=
Y
X = X & Y
X
|=
Y
X = X | Y
X
^=
Y
X = X ^ Y


Operacje logiczne i porównania

Argumentami operacji logicznych tego typu muszą być wyrażenia posiadające wartość logiczną(TRUE lub FALSE). Przykład:

10 < 20 zwróci TRUE ponieważ 10 jest mniejsze od 20


Operator
Znaczenie
==
Zwraca TRUE, jeśli argumenty są sobie równe.
!=
Zwraca TRUE, jeśli argumenty są różne.
< 
Zwraca TRUE, jeśli argument prawostronny jest większy od lewostronnego.
> 
Zwraca TRUE, jeśli argument prawostronny jest mniejszy od lewostronnego.
>=
Zwraca TRUE, jeśli argument prawostronny jest mniejszy lub równy lewostronnemu.
<=
Zwraca TRUE, jeśli argument prawostronny jest większy lub równy lewostronnemu.


W grupie logicznych operatorów wyróżniamy:
- operator AND(&&) - np. 10 < 20 && 20 < 30 - daje wynik TRUE - 2 argumenty muszą być prawdziwe
- operator OR(||) - np. 10 < 20 || 20 > 30 - wystarczy że 1 argument jest prawdziwy
- operator NOT(!) - negacja - zmienia wartość argumentu na odwrotny

Czas na jakiś przykład:

var imie = prompt("Podaj imię: ");
if(imie == null) || (imie == "")
{
    document.write("Dlaczego nie podałeś imienia?");

else
{
   document.write("Witaj: " + imie + "!");
}

Przy okazji opiszę instrukcję warunkową if. Instrukcja warunkowa if sprawdza czy podane warunki w nawiasach są prawdziwe(w tym wypadku wystarczy tylko jeden prawdziwy warunek), jeśli tak wykona się blok kodu pomiędzy klamrami, jeśli jest fałszywy(w tym wypadku oby dwa argumenty muszą być fałszywe) wykona się blok kodu po słowie else(słowo oznacza: w przeciwnym wypadku). Jeśli czegoś nie rozumiesz nie martw się tym, z czasem zrozumiesz o co w tym wszystkich chodzi.

Operacje na łańcuchach znaków

Aby połączyć dwa łańcuchy znaków używamy znaku plusa lub dajemy nazwę zmiennej po niej przecinek po przecinku dwa cudzysłowy, pokażę to na przykładzie:

var zmienna1 = "Ala ma";
var zmienna2 = "kota";


document.write(zmienna1 + " " + zmienna2 + "<br>");
document.write(zmienna1, " ", zmienna2, "<br>");


var zmienna3 = 4;
var zmienna4 = 10;


document.write("Suma zmiennych: ", zmienna3+zmienna4, "<br>");
document.write("Suma zmiennych podejście drugie: " + (zmienna3+zmienna4));

W czwartej instrukcji wypisania nie musimy używać nawiasów podczas dodawania zmiennych, ponieważ mogłyby wyniknąć z tego błędy(znak plus przed i po nazwie pierwszej zmiennej).

Za niedługo ukaże się kolejna część kursu JavaScript dla początkujących.

Zapraszam do komentowania.

P.S Jeśli tekst zawiera jakieś błędy lub o czymś zapomniałem to proszę o kontrakt.

Brak komentarzy:

Prześlij komentarz