Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

JavaScript 2 informatyka + JavaScript, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW –Internet Explerer –Opera –Safari.

Podobne prezentacje


Prezentacja na temat: "JavaScript 2 informatyka + JavaScript, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW –Internet Explerer –Opera –Safari."— Zapis prezentacji:

1

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

3 Na co pozwala? 3 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

4 4 informatyka + Wykorzystajmy JS jako kalkulator: kalkulator document.write(3*(2+1)); alert(3*(2+1));

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

6 Znacznik script 6 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

7 Dołączanie zewnętrznych JS 7 informatyka + 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:

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

9 Jak wygląda? 9 informatyka + Duże Średnie Małe Ale czy na pewno?

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

11 CSS - budowa 11 informatyka + 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. ) –identyfikatorem elementu poprzedzonym znakiem # (np. #x1) i wtedy pasuje tylko do tego elementu (np. )

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

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

14 CSS – różne właściwości 14 informatyka + background-color: kolor tła – lista kolorów: – 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

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

16 CSS + JS 16 informatyka + 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

17 Przykład 1 17 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!

18 Przykład 1 c.d. 18 informatyka + $(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?

19 Funkcje w JS 19 informatyka + 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)

20 Przykład 1 c.d. 20 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.

21 Ustawianie klas CSS 21 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.

22 Ustawianie zawartości 22 informatyka + $("#tu").html("No i Udało się "); 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.

23 Efekciarstwo 23 informatyka + $("#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.

24 Ustawianie właściwości 24 informatyka + $("#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.

25 Podsumowanie manipulacji wyglądem i zawartością 25 informatyka + 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

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

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

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

29 Typy zmiennych 29 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).

30 Różne wyrażenia 30 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

31 Instrukcja for 31 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

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

33 Instrukcja return 33 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

34 Inne instrukcje 34 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

35 Napisy 35 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

36 Przykłady użycia napisów 36 informatyka + 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

37 Obsługa liczb 37 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

38 Obsługa tablic 38 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

39 Przykłady użycia tablic 39 informatyka + 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

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

41


Pobierz ppt "JavaScript 2 informatyka + JavaScript, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW –Internet Explerer –Opera –Safari."

Podobne prezentacje


Reklamy Google