JavaScript

JavaScript – potyczki

Pierwsze kroki w JavaScript

Rozpocznijmy zabawę z JavaScriptem.

Od czego zacząć? Od najprostszego szablonu html np. jak ten poniżej:

<!doctype html>

<html lang=”pl”>

<head>

                <meta charset=”utf-8″>

                <title>Potyczki z JavaScriptem</title>

</head>

<body>

 

</body>

</html>

 

A wynik jest następujący:

Zwróćcie uwagę, że nadałem tytuł, który jest widoczny w zakładce.

Na początek nasze skrypty będę zamieszczał bezpośrednio w dokumencie, później pokażę jak wykorzystywać zewnętrzne skrypty. Zewnętrzne skrypty mają zasadniczą zaletę, że raz napisany skrypt można wykorzystywać w dowolnej ilości dokumentów.

 

Napiszmy coś w sekcji body. Polecenie document.write(„tekst, który ukaże się na ekranie”);

<script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

</script>

Ważne aby nasz skrypt otwierał się i zamykał. <script> … </script> . Teoretycznie powinniśmy napisać na początku <script type=”text/javascript”> ale nowe przeglądarki już nie mają problemu z krótszą (i mniej elegancką) formą.

Wyobraźmy sobie, że chcemy dołożyć trochę tekstu. Nic trudnego. Skopiujmy część z document.write… i zobaczmy co się stanie.

<script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

</script>

Chyba nie o to chodziło. JS (JavaScript) widzi to jako jeden ciąg. Jak to przerwać? Podobnie jak w htmlu. Użyj <br> tylko wpisz to w zdaniu, które miało się pojawić na ekranie np.:

<script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt. <br>”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

</script>

A teraz na chwilkę dajmy <br> gdzieś w mniej logicznym miejscu np.:

<script>

                document.write(„Witaj świecie! To jest nasz <br> pierwszy skrypt.”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

</script>

Widać różnicę? Oczywiście tych <br> możemy powstawiać do woli. A kto nam zabroni, jeśli taki mamy zamysł. W podobny sposób możemy przemycić i inne funkcje htmla jak kolor czcionki, zdjęcie itd.

 

Aby nawiązać kontakt z użytkownikiem nie wystarczy tekst na monitorze – jak to zrobiliśmy przed chwilą. Trzeba czegoś więcej. Do tego służą okna dialogowe.

 

Okna dialogowe

Mamy trzy rodzaje okien, pierwsze informacyjne. Niezależnie co zrobimy, pójdziemy dalej bez naszego wpływu. Z nurtem niejako.

<script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt. <br>”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

                alert(„To jest pierwsze okno dialogowe. Za chwilę zobaczysz tekst, który napisaliśmy wcześniej:)”);

</script>

 

Jak klikniemy OK naszym oczom ukaże się wcześniejszy obraz:

Fajnie. Prawda? Używamy polecenia alert(„tekst, który ma być widoczny w okienku dialogowym”);

No to czas na kolejne okno dialogowe decyzyjne. No i robi się ciekawie. Jakie to decyzje możemy mieć w zanadrzu? Albo się zgadzamy albo nie. Użyjmy polecenia confirm(„tekst, który ma być widoczny w okienku dialogowym „);

 <script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt. <br>”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

                confirm(„Czy chcesz zobaczyć to, co napisaliśmy wcześniej?”);

</script>

W naszym przypadku, niezależnie czy naciśniemy OK czy Anuluj zobaczymy dokładnie to samo. Tylko dlatego, że nie przypisaliśmy jeszcze żadnej funkcji.

No i ostatnie okno dialogowe tekstowe. Używamy polecenia prompt(„nasze pytanie”,”nasz odzew”);

<script>

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt. <br>”);

                document.write(„Witaj świecie! To jest nasz pierwszy skrypt.”);

                prompt(„JS to”,””);

</script>

Teraz w oknie dialogowym wpiszmy np. Ciekawy i interesujący język.

Treść naszego odzewu została dopisana do wcześniej napisanego tekstu. Gdzie to można wykorzystać?

Np. przy typowym dialogu. To już za chwilę.

 

Zmienne

 

Zmienna w JS musi mieć nazwę, musi być oznaczona, że jest zmienną (var) ale nie musi mieć określonego typu.

<script>

                var x=”To może być tekst lub „;

                var y=102;

                document.write(x+y);

</script>

Tu, zmienne były dość statyczne, to znaczy, że w treści JS wartości x i y były ustalone. Pozwólmy użytkownikowi na zabawę. Połączymy zmienne i okno dialogowe typu tekstowego.

<script>

                var x=prompt(„Witaj! Jak masz na imię?”,””);

                document.write(„Cześć  „+x+” !”);

</script>

Przeanalizujmy to. Mamy zmienną x (var). Zmienna x jest oknem tekstowym (prompt). W pierwszym cudzysłowie jest treść a później jest przecinek i puste cudzysłowy – a to będzie dokładnie to co zostanie wprowadzone z klawiatury.

Dalej wydaliśmy polecenie aby pokazać (document.write) treść włącznie ze spacjami w cudzysłowie i teraz kazaliśmy dołączyć (kontaminacja) naszą zmienną x. Aby to zrobić użyliśmy znaku plus. Po zmiennej też pojawił się plus a następnie w cudzysłowie spacja i wykrzyknik.

 

Działania matematyczne

Kilka prostych działań matematycznych przeprowadzonych na dwóch statycznie wprowadzonych danych:

<script>

                var x=20;

                var y=5;

                document.write(„Zmienna x = „+x+”<br>”);

                document.write(„Zmienna y = „+y+”<br>”);

                document.write(„Suma x+y = „+(x+y)+”<br>”);

                document.write(„Różnica x-y = „+(x-y)+”<br>”);

                document.write(„Iloczyn x*y = „+(x*y)+”<br>”);

                document.write(„Iloraz x/y = „+(x/y)+”<br>”);

                document.write(„Reszta z dzielenia x%y = „+(x%y)+”<br>”);

</script>

Użyliśmy zmiennych (var), nadaliśmy im nazwy x i y oraz przydzieliliśmy wartości 20 i 5. Następnie poleciliśmy pokazanie naszych działań (document.write). W cudzysłowie daliśmy tekst i dołączyliśmy dane wraz z operacjami matematycznymi a na koniec nasz lubiany <br> aby przełamać wiersz.

 

Instrukcje warunkowe

Zaczniemy od najprostszej instrukcji warunkowej. Tak <==> Nie. Jeśli się zgadzamy to każemy JS wykonać instrukcję A jeśli się nie zgadzamy każemy wykonać instrukcję B.

Instrukcja zaczyna się od pytania if (warunek) koniecznie w zwykłych nawiasach i jeśli ten warunek jest spełniony to trzeba wykonać instrukcję A w nawiasach klamrowych w przeciwnym wypadku else też w klamrach podajemy kolejną instrukcję.

<script>

                var x=prompt(„Podaj liczbę”,””);

                if (x=(x%2==0))

                                {document.write(„Liczba x jest liczbą parzystą”);}

                else

                                {document.write(„Liczba x jest liczbą nieparzystą”);}

</script>

To samo można załatwić krócej pisząc w nawiasach zwykłych i znakiem zapytania – nasz warunek a następnie w nawiasach klamrowych oddzielonych od siebie dwukropkiem dwóch warunków. Przy czym pierwszy jest zgodny a drugi nie. Zobaczmy to samo:

<script>

                var x=prompt(„Podaj liczbę”,””);

                var x=(x%2==0)?”parzystą”:”nieparzystą”;

                document.write(„Liczba x jest liczbą „+x);                         

</script>

 

Pętle

Właściwie po co one są? Najprościej to ujmując do powtarzania instrukcji. Zanim przejdziemy do schematu blokowego – przewrotnie przejdę przez dwa proste przykłady.

Pętla for składa się z for i nawiasu, w którym obok siebie (oddzielane średnikiem) pojawiają się w następującej kolejności: wartość początkowa; wartość końcowa; instrukcja. Do dzieła. Załóżmy, że mamy wypisać wszystkie liczby parzyste od zera do dwudziestu – nasz zapis wyglądałby mniej więcej tak: for(x=0;x<=20;x=x+2).

 

<script type=”text/javascript”>

                for(x=0;x<=20;x=x+2)

                document.write(x);                      

</script>

Wygląda nieciekawie? To zmodyfikujmy polecenie document.write w nawiasie:

<script type=”text/javascript”>

                for(x=0;x<=20;x=x+2)

                document.write(x+”, „);                            

</script>

Lepiej, prawda? Inną pętlą jest pętla while. Spróbujmy osiągnąć to samo co wcześniej.

<script type=”text/javascript”>

                var x=-2;

                while(x<=18){

                (x=x+2)

                document.write(x+”, „);             

                }

</script>

Musimy rozpocząć od podania wartości początkowej, później podajemy jak długo ma być wykonywana pętla – czyli najwyższa wartość a w klamrach podajemy instrukcje. Zanim skupimy się nad pętlami ich zastosowaniem przyjrzyjmy się się jeszcze jednej pętli do / while.

 

<script type=”text/javascript”>

                var x=-2;

                do { (x=x+2)

                document.write(x+”, „);             

                }                             

                while(x<=18)

</script>

Co takiego ciekawego zachodzi w pętli for? Właściwie jednym tchnięciem mówimy kiedy ma zacząć (0), kiedy ma skończyć (20) i co ile ma powtarzać (zwiększać o 2). Następnie chwila oddechu i mamy drugie „zdanie”, wskazujące, że ma to pokazać na ekranie (document.write).

Komputer otrzymuje na dzień dobry zero i je pokazuje na ekranie. A skoro wartość jest mniejsza od 20 to w kolejnym kroku dodaje dwa i rzeczywiście mamy 0+2 czyli 2. Dalej mniejsze od 20 więc komputer powtarza krok dodając do tej dwójki kolejną dwójkę uzyskując 4. I tak dalej aż do momentu, gdy do 18 dodano 2 i uzyskano wartość 20 – wartość ta zostanie wydrukowana na ekranie. Pętla for dalej jednak działa. Wraca do naszych warunków i instrukcji. Do 20 próbuje dodać 2 i co? Otrzymuje wartość przekraczającą założony warunek kończąc pętlę.

 

W przypadku pętli while aby uzyskać podobny efekt trzeba podać dane bardziej sprytnie. Przede wszystkim najpierw musimy podać wartość początkową, która jest zmienną (var). I teraz podajemy warunek końcowy a następnie instrukcję. A dalej to samo co poprzednio (document.write). No dobrze. Dlaczego tak dziwnie zacząłem od minus dwa? Już wyjaśniam. Otóż, komputer otrzymuje minus dwa a następnie „wchodzi” w pętlę, która sprawdza czy wartość nie przekracza 18-stu. Nie przekracza to dodaje dwa. Stąd: -2+2=0. Później do zera, które dalej jest mniejsze równe od 18 kolejna dwójka i proszę mamy 2. I tak dalej, aż dojdziemy do 18. Dalej sprawdza się zgodność z <=18 więc dodajmy dwójkę i ciach jest 20 – druk na ekran – wracamy do pętli i tu zonk. Nasza dwudziestka jest większa od 18 – przerywamy pętlę.

 

A pętla do / while? Podobnie jak poprzednia też potrzebuje odrobinę „sprytu”. Zaczynamy podobnie od wartości początkowej a następnie wydajemy instrukcje do wykonania. Gdy instrukcja jest wykonana, wówczas sprawdzamy czy to co otrzymaliśmy spełnia zadany warunek. Jeśli warunek nie jest spełniony – pętla natychmiast zostaje przerwana ale dane na ekranie widnieją. Do wartości początkowej -2 zostaje dodana 2 otrzymujemy zero. Wydruk. Spełnia warunek <=18. Powtarzamy. 0+2=2, wydruk, warunek spełniony, od początku, 2+2=4, warunek spełniony, od początku. I tak dalej. 18+2=20, wydruk, nie spełnia warunku, koniec.