JavaScript informatyka + JavaScript, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW Internet Explerer Opera Safari Firefox Google Chrome Konqueror Tak naprawdę, to JavaScript składa się z kilku elementów. Jednym z nich jest język programowania ECMAScript (standard ECMA-262). Drugim elementem jest interfejs programistyczny (API) służący do obsługi HTML. Dodatkowo są w nim biblioteki standardowe (np. Math) i API do obsługi przeglądarki (back, forward, history, ...) JavaScript jest wykorzystywany nie tylko w przeglądarkach, ale również w innych zastosowaniach. Można go na przykład wykorzystywać po stronie serwera tworząc serwisy WWW, działa wtedy podobnie do PHP. Nie wszystkie przeglądarki implementują pełną specyfikację JavaScriptu, a na dodatek specyfikacja ta nie jest precyzyjna. Do tego wykładu dołączone jest kilkanaście przykładów. Sugeruję przeplatać je ze slajdami. Sprawdzałem działanie przykładów na Firefoksie 3.5. Fajnie by było mieć podczas wykładu jakiś edytor tekstu lepszy niż notatnik. informatyka + 2
Na co pozwala? informatyka + JavaScript (JS) pozwala m. in. na: dynamiczne modyfikowanie zawartości stron reagowanie na akcje podejmowane przez użytkownika (kliknięcie, wpisanie tekstu, ruch myszką) przeprowadzanie obliczeń Podczas tych zajęć pokażemy wykorzystanie wszystkich tych elementów JS pozwala na wiele więcej, ale są to zaawansowane wiadomości. Można w nim m.in. ustawiać ciasteczka, wykonywać asynchroniczne żądania HTTP, obsługiwać wtyczki, tworzyć animacje (np. animując SVG), wyświetlać filmy (w połączeniu z tagiem video), itd. Nie można za pomocą JS bez użycia dodatkowych wtyczek zapisywać plików na dysku, obsługiwać baz danych (to się zmieni wraz z rozwojem HTML5 i technologii typu Google Gears) wysyłać maili bez pośredniego serwera przechwytywać video z kamerki internetowej przechwytywać audio z mikrofonu informatyka + 3
informatyka + Wykorzystajmy JS jako kalkulator: <html> <head><title>kalkulator</title></head> <body> <script type="text/javascript"> document.write(3*(2+1)); alert(3*(2+1)); </script> </body> </html> To jest przykład p1.html. Na następnym slajdzie jest opis tego skryptu. Ciekawe rzeczy dzieją się w momencie kiedy dopiszemy coś do HTML przed lub po skrypcie. To co jest po pokaże się dopiero w momencie kiedy zamkniemy okienko z wynikiem obliczeń. Na tym slajdzie należy zwrócić uwagę na to, że instrukcje oddzielamy średnikami, ale tak nie musi być. W JS przejście do nowego wiersza oznacza to samo co średnik, więc można by te średniki ominąć i program nadal by działał. Można poeksperymentować z wcięciami i sprawdzić, że białe znaki nie mają wpływu na zachowanie programu. Można wpisać inną formułę używająć +,-,*,/,%(modulo) i nawiasów. informatyka + 4
Jak działa? informatyka + Jak to działa? przeglądarka próbuje wyświetlić stronę napisaną w HTML napotyka na znacznik script zaczyna interpretować program zawarty w znaczniku script funkcja document.write – wpisuje argument do wyświetlanego okienka funkcja alert – pokazuje nowe okienko Oczywiście w rzeczywistości wszystko jest dużo bardziej skomplikowane. Interpretacja skryptu powinna zacząć się niezwłocznie po jego napotkaniu, ale z jednym wyjątkiem. Jeśli znacznik skrypt ma atrybut defer to przeglądarka może zacząć interpretować ten skrypt później. W ten sposób cała strona załaduje się szybciej. Skrypty są interpretowane w kolejności ich występowania w HTML document jest obiektem i udostępnia wiele metod, jedną z nich jest write tak naprawdę, to document jest polem obiektu window, który reprezentuje okienko przeglądarki (trochę tu upraszczamy), ale wszystkie skrypty działaja w kontekście window podobnie alert jest metodą window informatyka + 5
Znacznik script informatyka + Popatrzmy na znacznik script type = 'text/javascript' – czyli program jest w javascripcie, ale czy mógłby być w innym języku? teoretycznie tak, np. konqueror pozwala na dołączanie programów w pythonie a co zrobić z przeglądarką, która nie obsługuje javascriptu? użyć znacznika noscript Przeglądarka nie musi obsługiwać JS. Jeśli go nie obsługuje, to powinna wyświetlić zawartość znacznika <noscript>. Aby użyć nowych funkcji udostępnianych przez JS 1.7 lub wyższe do skryptu należy dopisać numer wersji w postaci: <script type="application/javascript;version=1.7"> informatyka + 6
Dołączanie zewnętrznych JS Niekiedy chcemy oddzielić programy w JS od stron HTML. Czy program w JS może być w oddzielnym pliku? Tak. Używamy w tym celu atrybutu src: <script type="text/javascript" src="skrypt.js"> </script> Jeśli mamy jeden często wykorzystywany skrypt (np. podczas tego wykładu będziemy używać jQuery), to sensownie jest, aby był on pobierany z serwera WWW tylko raz, a później aby przeglądarka odczytywała go ze swojego cache. W tym celu możemy go umieścić w oddzielnym pliku. Istnieją programy, które „zaciemniają” JS, w sytuacji kiedy nie chcemy aby inni mogli go modyfikować. Istnieją programy, które skracają JS (np. zamieniają nazwy zmiennych i funkcji na krótsze). informatyka + 7
CSS Będziemy chcieli pokazać, jak wykorzystać JS do zmian wyglądu strony internetowej, ale najpierw musimy zastanowić się jak w ogóle opisywać wygląd stron? Do opisywania wyglądu stron służy język CSS. Podobnie jak JavaScript, CSS jest obsługiwany przez większość przeglądarek WWW. CSS (kaskadowe arkusze styli ang. Cascading Style Sheets) To jest temat na oddzielny wykład, i to zapewne nie jeden. Uważa się powszechnie, że HTML służy do przygotowania treści dokumentu, a CSS służy do przygotowania formy dokumentu. CSS dość intensywnie się rozwija, pozwala m.in. na: przygotowanie oddzielnego (automatycznie wybieranego przez przeglądarkę) formatu dla wydruku przygotowanie alternatywnego formatu dla niedowidzących (wybiera się go z menu, w firefoksie z menu Widok) podział strony WWW na bloki, kolumny, przygotowanie menu, ... opis czcionek, kolorów, obrazków, tła, etc. informatyka + 8
Jak wygląda? informatyka + <link rel="stylesheet" href="p2.css" type="text/css"> <body> <h1>Duże</h1> <h2>Średnie</h2> <h3>Małe</h3> </body> Ale czy na pewno? Na tym obrazku widzimy jak wygląda HTML który ma domyślny arkusza stylu przeglądarki. H1 jest większe od H2, a H2 jest większe od H3. Każdy z tych elementów wypełnia cały wiersz. Tekst jest czarny na przezroczystym tle. No ale nie widzieliśmy co jest w pliku p2.css. Na następnym slajdzie zobaczymy co się tam dzieje. informatyka + 9
Co można nim zrobić? informatyka + A może to będzie wyglądać tak? Za pomocą CSS można uzyskać taki efekt. Mamy tu przykład z plików p2.html i p2.css zmieniliśmy: rozmiary czcionek (font-size) kolory tła (background-color) podkreślenie (text-decoration) pozycję (position: absolute) elementu H1, który wyświetla się od punktu (120,100) element H2 umieszczony został na prawym marginesie informatyka + 10
opis elementu {właściwości} CSS - budowa Plik CSS składa się z par opis elementu {właściwości} opis elementu (selektor) może być m.in: nazwą znacznika (np. h1) i wtedy pasuje do wszystkich znaczników h1 nazwą klasy poprzedzoną kropką (np. .czerwone) i wtedy pasuje do elementów tej klasy (np. <h1 class='czerwone'>) identyfikatorem elementu poprzedzonym znakiem # (np. #x1) i wtedy pasuje tylko do tego elementu (np. <h1 id='x1'>) O ile selektor będący nazwą znacznika (h1, a, li, strong, ...) nie powinien sprawiać kłopotów, o tyle pozostałe mogą być mylące. Klasa, jest to po prostu etykieta nadawana elementowi. Element może mieć wiele klas (class='klasa1 klasa2'). Ich nazwy są oddzielane spacjami i nie jest istotna ich kolejność. Nazwę klasy w selektorze poprzedzamy kropką. Wiele elementów może być tej samej klasy. Identyfikator zachowuje się podobnie do klasy, ale w jednym dokumencie powinien być tylko jeden element o danym identyfikatorze. Identyfikator podaje się jako wartość atrybutu id i nie należy go mylić z atrybutem name. Identyfikatory poprzedzamy w selektorze haszem (#). Sensowne pytanie będzie takie, jeśli mamy zdefiniowane selektory p i .klasa, to jak będzie wyglądał element p o klasie klasa? Z grubsza mówiąc, będą brane pod uwagę właściwości bardziej specyficzne. Czyli najważniejsze są dla identyfikatora, mniej ważne dla klasy a jeszcze mniej ważne dla znacznika. Jeśli klasa definiuje kolor czerwony, a znacznik czcionkę podkreśloną i kolor żółty, to element będzie zarówno czerwony jak i podkreślony (bo nie może być jednocześnie czerwony i żółty). informatyka + 11
CSS - przykład informatyka + właściwości są opisywane w postaci: nazwa: wartość; np. color: red; background-color: green; Popatrzmy na przykład: p3.html Tu widzimy przykład p3.html Ten przykład jest dość prosty i można na nim poeksperymentować ze specyficznością, np. zamieniając w stylu znacznik b na p (nic się nie stanie). W przykładzie widzimy, że można wpleść styl w treść HTML za pomocą znacznika style (poprzednio styl był w oddzielnym pliku). informatyka + 12
CSS możliwości informatyka + zmiana atrybutów wizualnych (kolory, czcionki, odstępy, podkreślenia, pogrubienia, tło, ...) zmiana pozycji (wyżej, niżej, względem innego elementu) wyświetlanie elementów w postaci bloków wyświetlanie elementów pływających ... i wiele innych ... Za pomocą CSS można nie tylko zmieniać rozmiary i kolory, ale również ustalać czy element ma być widoczny czy nie. Jaki ma być jego kształt (pod warunkiem, że jest to prostokąt). Jeśli kilka elementów jest w tym samym miejscu to w jakiej kolejności powinny się wyświetlić. Itd. informatyka + 13
CSS – różne właściwości background-color: kolor tła lista kolorów: http://www.w3schools.com/css/css_colornames .asp kolory można podawać w formacie #FFFFFF font-weight: czy czcionka ma być pogrubiona (bold) text-decoration: możliwość podkreślenia margin: cztery (top, bottom, left, right) marginesy border: ramki (np. border-top: 2px solid red) padding: odstęp od ramki width, height: szerokość i wysokość elementu Mamy tutaj wymienione podstawowe właściwości CSS. Niestety nie uda się nam opisać wszystkich z nich. Warto aby zapamiętać, że od zewnątrz element ma margines, ramkę (border) i wypełnienie (padding) jak na obrazku: http://www.w3.org/TR/CSS2/images/boxdim.png Kolory można podawać albo szesnastkowo w postaci RGB, albo używać ich angielskich nazw (z listy). informatyka + 14
CSS w życiu informatyka + Tak naprawdę, CSSy są bardziej skomplikowane: selektory pozwalają więcej wyrazić istnieją reguły skrótowe reguły mogą być sprzeczne istnieje hierarchia ważności CSS ale dla naszych potrzeb to wystarcza Zainteresowanym polecam setki artykułów w internecie. No niestety selektory są dużo bardziej skomplikowane. Można w nich wykorzystywać hierarchie (a b – elementy b będące potomkami a) sąsiedztwo (a + b) b będące sąsiadami a i inne. Niestety wcześniej należałoby powiedzieć w jaki sposób HTML konwertuje się na drzewo, a na to nie starczy czasu. Dodatkowo CSS pozwala na modyfikację wyświetlanej treści, udostępnia pseudoklasy (np. element nad którym jest kursor myszy, itp.) CSS opisuje w jaki sposób właściwości wykluczają się nawzajem (co jest ważniejsze) i w jaki sposób dziedziczą się w drzewie HTML (jak to się dzieje, że jeśli akapit jest zielony, to wytłuszczenie w nim też jest zielone). informatyka + 15
$(selektor).funkcja(...) CSS + JS Jak połączyć CSS i JS? można pisać w „czystym” JS, ale może nam to sprawić kłopoty z kompatybilnością przeglądarek można wykorzystać jedną z wielu dostępnych bibliotek, my użyjemy jQuery Użyjemy jedynie podstawowej biblioteki jQuery. Nie będziemy korzystać z interfejsu użytkownika dostępnego w bibliotece jQueryUI. Bibliotek podobnych do jQuery są dziesiątki, jeśli nie setki, ale ta jest dość popularna i nieduża (kilkanaście kB po skompresowaniu). Podstawowa instrukcja jQuery ma następującą postać ($ to nazwa funkcji) $(selektor).funkcja(...) Oznacza ona, że na wszystkich elementach odpowiadających selektorowi należy uruchomić określoną funkcję. Na kolejnych slajdach zobaczymy jak to zrobić. informatyka + 16
Przykład 1 informatyka + Popatrzmy na przykład jq1.html $(document).ready(function(){ ... } W miejsce trzech kropek wstawiamy funkcję, która zostanie wywołana automatycznie po załadowaniu dokumentu. $(”a”).click(function(event){ ... } W miejsce trzech kropek wstawiamy funkcję, która zostanie wywołana po kliknięciu na dowolny link. Zamiast ”a” możemy napisać dowolny selektor CSS! Przykład jq1.html Pierwszy slajd i wyjątek :) $(document). - zrób coś na dokumentcie $(document).ready() - uruchom funkcję w momencie, kiedy dokument jest w całości załadowany, to jest forma autostartu normalnie w JS uzyskujemy ten efekt ustawiając własność body.onload Przeglądając przykład należy zwrócić uwagę na składnię: w nawiasach podajemy parametry klamry służą do budowy bloków programu informatyka + 17
function(parametry) {kod } Przykład 1 c.d. $(”a”).click(function(event){ ... } Przyjrzyjmy się funkcji. Dostaje ona parametr. Tym parametrem jest opis zdarzenia, które wywołało kliknięcie. Większość zdarzeń można zatrzymać za pomocą metody preventDefault(). Spróbujmy dodać event.preventDefault(); do naszej funkcji. Co się stanie? Używamy na razie funkcji anonimowych (bez nazwy). Składnia jest następująca function(parametry) {kod } Spróbujmy zobaczyć co się stanie z przykładem jeśli w funkcji obsługującej zdarzenie kliknięcia zablokujemy jego przetwarzanie za pomocą .preventDefault(). informatyka + 18
function wypisz (tekst) Funkcje w JS funkcję oznacza słowo kluczowe function() funkcje mogą przyjmować parametry funkcje mogą być nazwane: function wypisz (tekst) parametry funkcji nie są sprawdzane, więc poprawne zarówno wypisz() jak i wypisz(1, ”a”) Funkcje nie sprawdzają liczby przekazanych im parametrów, ani też ich typów Parametry, które nie zostały przekazane mają wartość undefined (np. wywołanie wypisz() sprawi, że tekst == undefined) Wewnątrz funkcji dostępny jest obiekt (tak, JS jest językiem obiektowym, ale nie będziemy z tego korzystać), z którego można korzystać jak z tablicy argumentów. Funkcje można tworzyć jak obiekty za pomocą new Function() informatyka + 19
Przykład 1 c.d. informatyka + $(”a”).click(function(event){ ... } Widzimy teraz, że używamy funkcji nienazwanej. Funkcję tą, stosujemy do wszystkich elementów ”a”, czyli do wszystkich odnośników, ale gdybyśmy napisali: $(”#a1”).click(function(event){ ... } to okazałoby się, że funkcja ta jest stosowana jedynie do elementów pasujących do ”#a1”, czyli do elementu o identyfikatorze a1. Możemy zaobserwować pierwszą zaletę jQuery. Daje nam ono dostęp do właściwości wszystkich obiektów za pomocą selektorów css. Moglibyśmy napisać $(”ul li”).click(..) i mielibyśmy funkcję, która się wykona po kliknięciu elementów listy ul Nie musimy się martwić o to, czy na element #a1 można kliknąć, czy też nie. Jeśli można na niego kliknąć, to jQuery przypisze temu kliknięciu odpowiednią funkcję, jeśli nie, to nic się nie stanie (nie będzie błędu ani wyjątku). Nie musimy się martwić o to, czy selektor zwraca jeden element czy wiele. Jeśli zwraca wiele, to funkcja zostanie przypisana wszystkim. informatyka + 20
Ustawianie klas CSS informatyka + $("#tu").removeClass("green"); $("#tu").addClass("red"); ten fragment programu usuwa z elementu o identyfikatorze tu klasę green i ustawia temu samemu elementowi klasę red. Jeśli element nie ma wcześniej klasy green, to nic złego się nie dzieje. W ten sposób element tu stanie się czerwony. Tym razem patrzymy na przykład jq2.html. Kliknięcie na jeden z dwóch odnośników zmieni kolor elementu tu. Nie zmieni się to, czy jest on podkreślony, czy też nie. Ciekawym doświadczeniem jest usunięcie wiersza z removeClass i sprawdzenie co się stanie? informatyka + 21
Ustawianie zawartości $("#tu").html("No i<hr><strong>Udało się</strong>"); ten fragment programu ustawia zawartość elementu tu na wartość No....się. Zwróćmy uwagę na to, że ten fragment jest napisany w HTML i są zachowanie zarówno formatowanie (belka pozioma) jak i własności CSS jeśli są ustawione. Przykład jq3.html. jQuery daje łatwy dostęp do zawartości elementów w postaci HTML. Służy do tego funkcja html(), która potrafi zarówno ustawiać jak i zwracać zawartość elementu. informatyka + 22
$("#toggle").click(function(event){ Efekciarstwo $("#toggle").click(function(event){ $("#tu").toggle(); } po kliknięciu przycisku toggle uruchamia się efekt toggle (czyli na przemian show i hide). W ten sposób możemy pokazywać i ukrywać elementy. Pozostałe efekty działają podobnie ale bardziej widowiskowo. przykład jq4.html Programowanie w JS często polega na przygotowaniu elementów na początku pracy programu, a następnie na ich pokazywaniu i ukrywaniu. Pokazywanie to można zrobić na różne sposoby (wjazd, wyjazd, ściemnienie, zjaśnienie), a jQuery udostępnia kilka z nich. informatyka + 23
Ustawianie właściwości $("#p1").click(function(event){ $("#tu").css('margin-left', '200px'); }); wcześniej dowiedzieliśmy się jak ustawiać elementom klasy. Teraz możemy zobaczyć w jaki sposób elementom można ustawiać pojedyncze własności. W tym przypadku ustawiamy lewy margines na 200px co sprawia, że element odsuwa się w prawo. przykład jq5.html Możemy tu zaobserwować kilka rzeczy. Po pierwsze za pomocą funkcji css, która bierze dwa parametry, ustawiamy właściwości css. Po drugie mamy jednostkę px, która odpowiada pikselowi. Są inne jednosktki, takie jak punkt, cal, czy em, ale nie będziemy się nimi zajmować. 0 nie potrzebuje jednostki. Po trzecie własność border, czyli ramka, ma trzy części rozmiar, rodzaj, kolor (2px solid red) Możemy zmienić przykład i zamiast margin-left napisać padding-left. Zobaczmy co się stanie. informatyka + 24
Podsumowanie manipulacji wyglądem i zawartością Potrafimy już: Potrafimy już dynamicznie: obsługiwać kliknięcia myszki nadawać elementom klasy ustawiać elementom właściwości zmieniać zawartość elementów stosować proste efekty Wydaje się to być bardzo niewielką wiedzą, ale jak się przekonamy na warsztatach wystarczy do napisania całkiem skomplikowanej aplikacji. Jeśli przyjrzymy się prawdziwym stronom internetowym, to okaże się, że bardzo rzadko korzystają one z czegoś więcej niż to, czego się już nauczyliśmy. informatyka + 25
Czas na programowanie informatyka + Będziemy chcieli się nauczyć częściowo o: zmiennych obsłudze napisów niektórych instrukcjach używaniu tablic To pozwala na pisanie całkiem skomplikowanych programów, chociaż jest tylko niewielkim wstępem do możliwości oferowanych przez JS. Niestety zakładamy, że słuchacze znają podstawy programowania. Nie jesteśmy w stanie w tak krótkim czasie nauczyć ich tego czym jest zmienna czy funkcja. JS jest językiem obiektowym, i to takim w którym nawet funkcja jest obiektem, ale nie będziemy z tego korzystać. Skupimy się na podstawowych elementach wykorzystywanych przez każdego programistę, czyli zmiennych, pętlach, napisach i tablicach. informatyka + 26
Zmienne Zmienne przechowują wartości dowolnych typów. Jeśli zmienna nie została użyta w programie to ma wartość undefined Problemem sprawiającym dużo kłopotów jest to, iż wszystkie zmienne są globalne, chyba że zostaną zadeklarowane wewnątrz funkcji za pomocą słowa kluczowego var. Popatrzmy na przykład na następnym slajdzie. Niestety zasięg zmiennych w JS jest sprawą trudną. Zmiennej nie trzeba deklarować za pomocą słowa kluczowego var, ale ma ona wtedy zasięg globalny. Zmienne, których nie ustawiliśmy mają specjalną wartość undefined. informatyka + 27
Lokalność zmiennych informatyka + function a() { var i = 1 } function b() { i = 2 } i = 3; a(); alert(i); // wypisuje 3 b(); alert(i); // wypisuje 1 Przykład jq6.html Należy zwrócić uwagę na składnię (klamerki jak w C lub Javie) Przed instrukcją i=3 wartość zmiennej i to undefined (to nie ważne, że globalna zmienna i pojawiła się w funkcji b()) W funkcji a() zmienna i ma zasięg lokalny i nie ma nic wspólnego z globalną zmienną i. W funkcji b() zmienna i ma zasięg globalny. Należy bardzo uczulić wszystkich na takie zachowanie JavaScriptu. Jest ono nieintuicyjne przede wszystkim dla programistów PHP, którzy są przyzwyczajeni do deklarowania właśnie zmiennych globalnych za pomocą: global $a; informatyka + 28
Typy zmiennych informatyka + Liczby różnią się od napisów. Napisy zapisujemy ”w cudzysłowach” lub 'tak' Nie musimy przejmować się konwersją liczb całkowitych i zmiennoprzecinkowych. Operator ”+” dodaje liczby ale łączy (konkatenuje) napisy. JS sam domyśla się, czy coś powinno być liczbą czy napisem. Istnieje prawda (true) i fałsz (false). Zmienne w JS mają typy, ale nie są one sprawdzane w trakcie operacji przypisania. Czyli można napisać: zmienna = 'a' zmienna = 12 Typ liczbowy jest jeden a konwersji z liczb zmiennoprzecinkowych na całkowite dokonuje się za pomocą obiektu Math. Typy użyte na slajdzie to: napis (String), liczby (Integer i Number), wartość logiczna (Boolean). Istnieją inne, np. object, Array, Function. informatyka + 29
Różne wyrażenia informatyka + alert(1+2); // 3 alert("1"+'2a3'); // "12a3" alert(1/2); // 0.5 alert(3%2); // 1 (reszta z dzielenia 3 przez 2) alert(1+2*3); // 7 alert(1+"2"); // 12 (zamienił 1 na "1") alert(1+2==3); // true alert(3>=4); // false Przykład jq7.html Należy zwrócić uwagę na wyrażenia. Jeśli napis dodajemy do liczby, to liczba jest najpierw konwertowana do napisu. % to operator modulo (przyda się na warsztatach) Wyrażenia zachowują wyższą wagę wiązania * i / nad + i -. Operator porównania to == (podwójne =) informatyka + 30
Instrukcja for informatyka + Instrukcja for służy do wielokrotnego powtarzania tego samego fragmentu programu (pętla) s = '' l = 0; for(i = 2; i < 10; i = i + 2) { s = s + i; l = l + i; } alert(s); // '2468' - napis alert(l); // 20 - liczba przykład jq11.html Pętla for zachowuje się tak jak w C i Javie. Najpierw jest ewaluowany pierwszy blok. Potem jest sprawdzany drugi blok, i jeśli jet on spełniony to: wykonywany jest kod ewaluowany jest trzeci blok i skaczemy do sprawdzenia drugiego bloku Należy zwrócić uwagę na to, że gdyby tą pętlę zawrzeć w funkcji do działałaby on ana globalnej zmiennej i! To bardzo częsty błąd. Należy zwrócić też uwagę na różne zachowanie zmiennych l (liczba) i s (napis). pomimo że wykonujemy na nich podobne operacje, wynik jest zupełnie różny. informatyka + 31
Instrukcja if informatyka + Instrukcja if służy do wykonania fragmentu programu w zależności od tego czy coś jest prawdą, czy nie. i = 2; if (i > 2) { alert('więcej') } else if (i < 2) {alert('mniej')} else {alert('równo')} przykład jq12.html if zachowuje się tak, jak w C i Javie. Nie ma w nim nic nadzwyczajnego. informatyka + 32
Instrukcja return informatyka + Instrukcja ta służy do zwrócenia wartości funkcji function ustaw() { var a = 2 + 3; return a; } x = ustaw(); alert(x); //5 przykład jq10.html Funkcje mogą zwracać wartości. Mogą też kończyć się bez zwrócenia wartości za pomocą: return; Zwróćmy uwagę na zmienną a. Ona jest lokalna. informatyka + 33
Inne instrukcje informatyka + JavaScript obsługuje wszystkie instrukcje typowe dla języków podobnych do C, C++ i Javy: while (warunek) {} switch (wyrazenie) { case wartosc: } break continue try catch Nie zdążymy nauczyć się tu wszystkich :( Ale to co umiemy wystarczy nam do programowania JS obsługuje wszystkie „normalne” instrukcje, a dodatkowo: wyjątki wyrażenia regularne obiekty dziedziczenie realizowane przez prototypy (nie ma klas) filtry na tablicach domknięcia generatory .... informatyka + 34
Napisy informatyka + napis[3] – czwarta litera napisu napis.length – długość napisu napis.indexOf('b')) – pierwsze wystąpienie b lub -1 jeśli b w napisie nie występuje napis.lastIndexOf('a') – ostatnie wystąpienie a napis.substr(1,3) – fragment napisu od drugiej litery zawierający trzy znaki Napisy zachowują się jak obiekty, bo w rzeczywistości są obiektami klasy String. Można na nich wykonywać wszystkie standardowe operacje, scalania, wycinania, wyszukiwania, zastępowania, itd. Na następnym slajdzie zobaczymy przykłady. informatyka + 35
Przykłady użycia napisów napis = "ab" + "ca"; alert(napis); //abca alert(napis == 'abca'); //true alert(napis[3]); // a alert(napis.length); // 4 alert(napis.indexOf('b')); // 1 alert(napis.indexOf('e')); // -1 alert(napis.lastIndexOf('a')); // 3 alert(napis.substr(1,2)); // bc Przykład jq9.html Tworzymy napis za pomocą operatora +. Dokonujemy porównania (< i > też działają) Napisy są indeksowane od zera, więc napis[0] to pierwsza litera. Jeśli wyszukiwanie nie znajduje elementu, to zwraca -1. indexOf szuka pierwszego wystąpienia podciągu, lastIndexOf szuka ostatniego wystąpienia podciągu length zwraca dgługość substr zwraca podciąg informatyka + 36
Obsługa liczb informatyka + Math.abs(a) // wartość bezwzględna a Math.ceil(a) // sufit a Math.floor(a) // podłoga a Math.max(a,b) // maksimum z a i b Math.min(a,b) // minimum z a i b Math.pow(a,b) // a do potęgi b Math.random() // pseudolosowa liczba od 0 to 1 Math.round(a) // zaokrąglenie a Math.sqrt(a) // pierwiastek kwadratowy z a Do obsługi matematyki służy obiekt math. Wartość bezwzględna, z liczby ujemnej to minus ta liczba, a z liczby dodatniej to dokładnie ta sama liczba. Sufit to najmniejsza liczba całkowita większa lub równa danej. Podłoga to największa liczba całkowita mniejsza lub równa danej. Zaokrąglenie 3.2=>3, 3.8=>4 informatyka + 37
Obsługa tablic informatyka + new Array(6) – stworzenie tablicy o sześciu elementach a[3] – czwarty element tablicy a.length – rozmiar tablicy a.push('cd') – dodanie elementu cd na koniec tablicy a.pop() - usunięcie elementu z końca tablicy i jego zwrócenie a.indexOf('ab') – szukanie elemenu ab w tablicy a.splice(2,5) – usunięcie pięciu elementów począwszy od trzeciego elementu z tablicy Tablice w JS są dynamiczne. Mogą przechowywać dowolne elementy. Indeksowane są liczbami naturalnymi (i zerem jeśli ktoś uważa, że ono nie jest naturalne). Operacje push i pop robią z tablicy stos. informatyka + 38
Przykłady użycia tablic a = new Array(3); a.push('a'); alert(a.length); //4 alert(a.pop()); a alert(a.length); //3 a[0] = 'o'; a[2] = 2; alert(a.toString()); // o,,2 a.splice(1,1); alert(a.indexOf(2)); // 1 Przykład jq13.html Tworzymy tablicę o trzech elementach. Dodajemy na koniec (element czwarty) napis 'a' Sprawdzamy długość Pobieramy ostatni element Ustawiamy element pierwszy na 'o' (napis) Ustawiamy element trzeci na 2 (liczba) Wypisujemy tablicę (użyteczne przy debuggowaniu) Usuwamy element drugi Sprawdzamy na której pozycji mieści się dwa informatyka + 39
Koniec. Dziękujemy. Pytania? informatyka + 40