1 / 41

JavaScript

JavaScript. JavaScript , 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?. JavaScript (JS) pozwala m. in. na: dynamiczne modyfikowanie zawartości stron

bill
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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

  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

  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

  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

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

  8. Jak wygląda? • <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? informatyka + 9

  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

  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. 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'>) informatyka + 11

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

  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

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

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

  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 jQuery informatyka + 16

  16. Przykład 1 • 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! informatyka + 17

  17. 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? informatyka + 18

  18. 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”) informatyka + 19

  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: • $(”#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. informatyka + 20

  20. Ustawianie klas CSS • $("#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. informatyka + 21

  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

  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

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

  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

  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

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

  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

  28. Typy zmiennych • 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). informatyka + 29

  29. Różne wyrażenia • 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 informatyka + 30

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

  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

  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

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

  34. Napisy • 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 informatyka + 35

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

  36. Obsługa liczb • 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 informatyka + 37

  37. Obsługa tablic • 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 informatyka + 38

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

  39. Dziękujemy. Pytania? Koniec. informatyka + 40

More Related