Java Script Java Script to jzyk programowania obsugiwany

Java. Script • Java. Script, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW – Internet Explerer – Opera – Safari – Firefox – Google Chrome – Konqueror informatyka + 2

Na co pozwala? • Java. Script (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 informatyka + 3

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> informatyka + 4

Jak działa? • 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 informatyka + 5

Znacznik script • 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 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> 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 Java. Script, CSS jest obsługiwany przez większość przeglądarek WWW. informatyka + 8

Jak wygląda? <link rel="stylesheet" href="p 2. css" type="text/css"> <body> <h 1>Duże</h 1> <h 2>Średnie</h 2> <h 3>Małe</h 3> </body> Ale czy na pewno? informatyka + 9

Co można nim zrobić? A może to będzie wyglądać tak? Za pomocą CSS można uzyskać taki efekt. informatyka + 10

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. h 1) i wtedy pasuje do wszystkich znaczników h 1 – nazwą klasy poprzedzoną kropką (np. . czerwone) i wtedy pasuje do elementów tej klasy (np. <h 1 class='czerwone'>) – identyfikatorem elementu poprzedzonym znakiem # (np. #x 1) i wtedy pasuje tylko do tego elementu (np. <h 1 id='x 1'>) informatyka + 11

CSS - przykład • właściwości są opisywane w postaci: nazwa: wartość; np. color: red; background-color: green; Popatrzmy na przykład: p 3. html informatyka + 12

CSS możliwości • 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. . . informatyka + 13

CSS – różne właściwości • background-color: kolor tła – lista kolorów: http: //www. w 3 schools. com/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: 2 px solid red) • padding: odstęp od ramki 14 informatyka + • width, height: szerokość i wysokość elementu

CSS w życiu • 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. informatyka + 15

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 j. Query informatyka + 16

Przykład 1 • Popatrzmy na przykład jq 1. 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! informatyka + 17

Przykład 1 c. d. $(”a”). click(function(event){. . . } Przyjmy 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 prevent. Default(). Spróbujmy dodać event. prevent. Default(); do naszej funkcji. Co się stanie? informatyka + 18

Funkcje w JS • funkcję oznacza słowo kluczowe function() • • funkcje mogą przyjmować parametry • parametry funkcji nie są sprawdzane, więc poprawne zarówno wypisz() jak i wypisz(1, ”a”) funkcje mogą być nazwane: function wypisz (tekst) informatyka + 19

Przykład 1 c. d. $(”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: $(”#a 1”). click(function(event){. . . } to okazałoby się, że funkcja ta jest stosowana jedynie do elementów pasujących do ”#a 1”, czyli do elementu o identyfikatorze a 1. informatyka + 20

Ustawianie klas CSS $("#tu"). remove. Class("green"); $("#tu"). add. Class("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. 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. informatyka + 22

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. informatyka + 23

Ustawianie właściwości $("#p 1"). click(function(event){ $("#tu"). css('margin-left', '200 px'); }); 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 200 px co sprawia, że element odsuwa się w prawo. 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 informatyka + 25

Czas na programowanie 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. informatyka + 26

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. informatyka + 27

Lokalność zmiennych function a() { var i = 1 } function b() { i = 2 } i = 3; a(); alert(i); // wypisuje 3 b(); alert(i); // wypisuje 1 informatyka + 28

Typy zmiennych • • • Liczby różnią się od napisów. • 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). Napisy zapisujemy ”w cudzysłowach” lub 'tak' Nie musimy przejmować się konwersją liczb całkowitych i zmiennoprzecinkowych. informatyka + 29

Różne wyrażenia alert(1+2); // 3 alert("1"+'2 a 3'); // "12 a 3" 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 informatyka + 30

Instrukcja for • 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 informatyka - liczba + 31

Instrukcja if • 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')} informatyka + 32

Instrukcja return • Instrukcja ta służy do zwrócenia wartości funkcji function ustaw() { var a = 2 + 3; return a; } x = ustaw(); alert(x); //5 informatyka + 33

Inne instrukcje • Java. Script 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 informatyka + 34

Napisy • • • napis[3] – czwarta litera napisu • • napis. last. Index. Of('a') – ostatnie wystąpienie a napis. length – długość napisu napis. index. Of('b')) – pierwsze wystąpienie b lub -1 jeśli b w napisie nie występuje napis. substr(1, 3) – fragment napisu od drugiej litery zawierający trzy znaki 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. index. Of('b')); // 1 alert(napis. index. Of('e')); // -1 alert(napis. last. Index. Of('a')); // 3 alert(napis. substr(1, 2)); // bc informatyka + 36

Obsługa liczb • • • Math. abs(a) Math. ceil(a) // wartość bezwzględna 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 informatyka + 37

Obsługa tablic • new Array(6) – stworzenie tablicy o sześciu elementach • • • a[3] – czwarty element tablicy • a. pop() - usunięcie elementu z końca tablicy i jego zwrócenie • • a. index. Of('ab') – szukanie elemenu ab w tablicy a. length – rozmiar tablicy a. push('cd') – dodanie elementu cd na koniec tablicy a. splice(2, 5) – usunięcie pięciu elementów począwszy od trzeciego elementu z tablicy 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. to. String()); // o, , 2 a. splice(1, 1); alert(a. index. Of(2)); // 1 informatyka + 39

Koniec. Dziękujemy. Pytania? informatyka + 40