JavaScript

Pierwsze kroki w JavaScript

Rozpocznijmy zabawę z JavaScriptem. Od czego zacząć? Od najprostszego szablonu html np. jak ten poniżej:

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”);

Ważne aby nasz skrypt otwierał się i zamykał.

Teoretycznie powinniśmy napisać na początku

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.

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

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

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.

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”);

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”);

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.

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.

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:

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
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ę.

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:


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

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

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

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.

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.