Języki programowania wysokiego poziomu. JavaScript jquery

Transkrypt

1 Języki programowania wysokiego poziomu JavaScript jquery

2 JavaScript JavaScript skryptowy, obiektowy język programowania, stworzony przez Netscape w celu dodania "interaktywności" stronom WWW. Zastosowania: Elementy animowane i interaktywne (np. galerie zdjęć, okna pop-up, ) Sprawdzanie poprawności formularzy (ale również pomoc przy ich wypełnianiu, np. data-kalendarz) Tworzenie i obsługa elementów nawigacyjnych (wielopoziomowe rozwijane menu) AJAX zmiana treści strony bez jej przeładowania RDW tworzenie stron responsywnych

3 JavaScript Mozilla, wzorując się na języku Java, chciała dać użytkownikom niezalezne od platformy (OS) środowisko do uruchamiania apletów, jednak rozwiązanie nie było adresowane do profesjonalnych programistów (jak Java, konkurująca wtedy z C++) Język początkowo nazywał się LiveScript, jednak nazwę szybko zmieniono na JavaScript (w tym czasie dodano możliwość komunikacji między JavaScript a Java).

4 JavaScript Microsoft dodał obsługę skryptów (JScript i VBScript) do IE3.0, zaledwie pół roku po premierze JavaScript (rok po pierwszej wersji LiveScript) IE3.0 pojawił się w poprawce do Win 95 (Win95 SR 2). Była to również pierwsza wersja IE z obsługą CSS Aż do IE8 włącznie model DOM w IE istotnie różnił się od modelu DOM w NN (później FF) skrypty NN nie działały w IE i na odwrót MS włączył JScript do.net (ok r.) wykorzystują go dynamiczne serwisy tworzone w Visual Web Developer

5 JavaScript Od 1996 r. ECMA (European Association for Standardizing Information and Communication Systems) zajmuje się specyfikacją języka. Nosi on nazwę ECMAScript. Pierwsza wersja była zbliżona do JavaScript 1.1, potem ECMAScript wyprzedzał JavaScript. Po kilu latach zastoju ( ) prace wznowiono, najnowsza wersja ECMAScript (edycja 6.) - ECMAScript 2015, albo ECMAScript Harmony, pochodzi z czerwca 2015 ECMA to standard (semantyka) języka (JavaScrpt i JScript to jego implementacje), natomiast dostępne np. w przegląderce obiekty, jak DOM, definiują inne organizacje (głównie W3C)

6 JavaScript Historia JavaScript 1996: JS 1.0 (marzec - NN 2.0) JS 1.0 (sierpień - IE 3.0, Win95 SR 2) 1997: JS 1.2 (NN 4.0) JS 3.0 (IE 4.0, ECMA 1.0) 1998: JS 1.3 (NN 4.06, implementacja standardu ECMA 2.0) 1999: JS 5.0 (IE 5.0, ECMA 2.0) DOM, AJAX 2000: JS 5.5 (IE 5.5, ECMA 3.0) JS 1.5 (Mozilla App., ECMA 3.0) DOM 2005: JS 1.6 (FF 1.5) 2006: JS 5.7 (IE 7)

7 JavaScript Wojny przeglądarek Pierwsza wojna przeglądarek: MS Internet Explorer vs Netscape Navigator Niestandardowe rozszerzenia ("fajniejsze" strony WWW); Druga wojna przeglądarek: 2002-? MS Internet Explorer vs (Firefox + Safari + Opera) Zgodność ze standardami i likwidacja monopoli; HTML XHTML PHP JavaScript

8 JavaScript Podstawowe cechy: Działa po stronie przeglądarki Możliwość wykonania zależy od przeglądarki i użytkownika (można wyłączyć obsługę JavaScript!) Język skryptowy Nie jest kompilowany, ale "na bieżąco" interpretowany i wykonywany - nie wymaga specjalistycznych narzędzi, jednak przydaje się wsparcie ze strony IDE (NetBeans je ma!) Język obiektowy Dziwaczny (brak definicji klasy, jak C++, Java, C#, PHP, ), ale zaawansowany (ma np. dziedzicznie, mech. refleksji, ) Działa w przestrzeni ograniczonej przez przeglądarkę Tylko bieżący dokument i nieliczne obiekty przeglądarki, nie ma np. wglądu do systemu plików (ale są dziury!)

9 JavaScript Dodawanie skryptu do dokumentu HTML Określenie języka skryptowego, sekcja head: <meta http-equiv="content-script-type" content="text/javascript"> Skrypt osadzony: <script type="text/javascript" charset="utf-8"> //treść skryptu </script> Kodowanie (atr. charset) jest opcjonalne Skrypt można umieścić w dowolnej części dokumentu (tj. zarówno w head, jak i body); może być kilka skryptów Skrypt zewnętrzny: <script type="text/javascript" src=" </script>

10 JavaScript Dodawanie skryptu do dokumentu HTML Atrybuty zdarzeń HTML: <div onclick="foo();"> </div>

11 JavaScript Zmienne Zmienne mają typ, choć może on się zmienić; Nie trzeba deklarować, są tworzone przez nadanie wartości: x = 7; s = "Hello!"; Deklaracja ze słowem kluczowy var pozwala tworzyć zmienne lokalne (tego nie ma w PHP) var x = 13; var y = 7; function foo () { var x = 99; y = 14; } foo(); // x lokalne // y globalne // y zmieniło wartość, x nie

12 JavaScript Operatory Operatory są C-podobne, podobna jest też ich hierarchia: - inkrementacja i dekrementacja, negacja, tworzenie obiektu ++ --! new - mnożenie i dzielenie * / % - dodawanie i odejmowanie op. relacji i równości > >= < <= ==!= === - iloczyn logiczny && - suma logiczna - przypisania = += -= *= /=

13 JavaScript Instrukcje Instrukcje również są C-podobne: - grupująca (blok) - warunkowa if oraz if-else - wyboru switch - iteracyjne for, while oraz do-while (nowa wersja ECMAScript definiuje też instrukcję foreach) for (var i = 1; i <= 20; i++) { } if (i % 2 == 0) document.write(i + " ");

14 JavaScript Funkcje Trochę podobne do funkcji PHP nie określa się typów argumentów i typu rezultatu; w przeciwieństwie do PHP mają dostęp do zmiennych globalnych function suma (a, b) { var s = a + b; return s; } var w = suma (7, 13);

15 JavaScript Standardowe obiekty, DOM Przeglądarka udostępnia obiekty: - window bieżące okno (zakładka) przeglądarki oraz jego cechy, np. innerwidth, innerheight, status - document elementy wyświetlane na stronie (<body>) oraz wiele dodatkowych właściwości (np. cookie) i metod (np. getelementbyid() często używana w skryptach) - history historia ostatnio odwiedzanych stron (tylko w bieżącym oknie/zakładce!) - navigator informacje o przeglądarce - location informacja o aktualnie wyświetlanej stronie - screen informacje o ekranie

16 JavaScript Przykład 1 wyświetlenie/ukrycie elementu function Toggle (id) { var node = document.getelementbyid(id); if (node.style.display == 'none') node.style.display = 'block'; else node.style.display = 'none'; } <div onclick='toggle("help")'>pokaż/ukryj pomoc</div> <div id='help'> <p>pomoc </div>

17 JavaScript Przykład 2 walidacja formularza function isok () { var form = document.forms.nf1; var login = form.login.value; if (login=="") { alert("error!"); return false; } else return true; } <form id='if1' name='nf1' onsubmit='return isok()'> <input type='text' name='login'> <input type='submit'> </form>

18 jquery jquery darmowa biblioteka JavaScript, hiper-obiektowa, łatwa w użyciu, elastyczna, wydajna. Znacznie ułatwia tworzenie skryptów: Wybieranie elementu (grupy elementów) DOM Manipulowanie elementami DOM (treść, klasa, styl, ) Funkcje obsługi zdarzeń AJAX

19 jquery jquery linie wydań: 1.xx z obsługą IE 6-8 (obecnie 1.12) 2.xx bez (ocecnie 2.2) jquery zwalnia z konieczności poznawania niuansów implementacji JavaScript w różnych przeglądarkach

20 jquery jquery sposób użycia Manipulacja DOM: WybierzEl. FiltrujWybór. ZmieńEl Zdarzenia WybierzEl. Dowiąż ( funkcja ) AJAX Żądanie ( parametry, funkcja ).Sukces ( funkcja ).Porażka (funkcja )

21 Funkcja fabryczna jquery() albo $() - funkcja fabryczna, wybiera element(y) do dalszych działań Można stosować wszystkie selektory i kombinacje selektorów znane z CSS: $("div") <div> $(".post") <? class="post"> $("#menu") <? id="menu"> $("div.post > p") $("#menu a")

22 Funkcja fabryczna jquery() albo $() - funkcja fabryczna, wybiera element(y) do dalszych działań Można stosować pseudoklasy jquery, np.: :first pierwszy znaleziony element (albo :last ostatni) :first-child pierwsze dziecko :nth-child() n-te dziecko (numeracja od jeden) :nth-child(odd) nieparzyste (albo even parzyste) :first-of-type pierwszy tego typu :nth-of-type() n-ty tego typu, np. p:nth-of-type(1) :not() niespełniający kryterium, np. :not(:first-child)

23 Funkcja fabryczna jquery() albo $() - funkcja fabryczna, wybiera element(y) do dalszych działań Są też pseudoklasy dotyczące formularzy: :input :text input type="text" (oraz :password, :radio, :submit, ) :checked :disabled

24 Funkcja fabryczna Posługiwanie się funkcją fabryczną wymaga wprawy oraz precyzji Np. czym różnią się: $("div:first-child") $("div :first-child") $("div p:first-child") $("div > p:first-child") Przydaje się dobry punkt zaczepienia w strukturze html, np.: <div class="post"> <h2> <div class="text"> <p> <p> <ul> <p> <table> <p>

25 Filracja i/lub zmiana wyboru jquery dostarcza funkcje do tego służące, m.in.: children() dzieci każdego wcześniej wybranego add() dodaj wg selektora not() usuń wg selektora next() następny nextall() wszystkie następne dzieci tego samego elementu first() tylko pierwszy el. ze zbioru parent() rodzic wybranego andself() dodaje poprzedni zbiór do obecnego filter() filtruje zbiór wg selektora $("h2").parent() $("p:nth-child(2)").nextall() $("p").add("li").filter(":nth-child(odd)")

26 Filracja i/lub zmiana wyboru Niejawna i jawna iteracja Wszystkie operacje są wykonywane jako pseudo-pętla: jeżeli funkcja fabryczna zwróci zbiór elementów (a nie jeden), to czynności są wykonywane na każdym elemencie ze zbioru: $(".tip").hide(); Jeżeli potrzebna jest jawna iteracja, należy użyć funkcji each(). Element DOM, na rzecz którego iteracja jest wykonywana, jest dostępny jako this; Aby użyć funkcji jquery, trzeba użyć funkcji fabrycznej: $("this") $(".tip").each( function() { this.innerhtml = "!"; // DOM $(this).html("!"); // jquery });

27 Zmiana wyglądu/treści elementu jquery dostarcza funkcje do tego służące, m.in.: addclass(klasa) dodaje klasę CSS (musi być zdefiniowana) removeclass(klasa) usuwa klasę css(właściwość, wartość) zmienia styl html(treść) podmienia zawartość elementu empty() opróżnia element z zawartości append(treść) dodaje treść na końcu elementu prepend(treść) na początku elementu after(treść) dodaje treść za elementem $("tr:nth-child(odd)").addclass("gray"); $("#menu").append("<a href='xxx'>xxx</a>"); $("#log").append("<p>" + message); $("#err").empty();

28 Zmiana wyglądu/treści elementu jquery dostarcza więcej takich funkcji, m.in.: hide() ukrywa show() pokazuje toggle() ukrywa/pokazuje fadetoggle() jw. z efektem animacji classtoggle() dodaje/usuwa klasę $("#err").hide();

29 Sekwencje funkcji Każda funkcja jquery, służaca do manipulacji elementami DOM zwraca jako rezultat zbiór, na którym działała; Dzięki temu funkcje można łączyć w sekwencje $("#err").show().addclass("red"); Funkcje wyboru elementów i manipulacji nimi można łączyć: $("div.post").show().find("h2").addclass("big").nextall().removeclass("gray").andself().addclass("red");

30 Zdarzenia jquery dostarcza funkcje ułatwiające dowiązywanie funkcji obsługi zdarzeń click(funkcja) obsługa onclick -- podobnie focus, hover, keypress, keydown, mousedown, on("zdarzenie", funkcja) $("h2").next().hide(); $("h2").click( function() { $(this).next().fadetoggle(); });

31 Zdarzenia Dowiązywać można funkcje anonimowe albo nazwane Funkcja anonimowa: $("h2").click( function() { $(this).next().fadetoggle(); }); Funkcja nazwana: function Foo () { $(this).next().fadetoggle(); } $("h2").click( Foo );

32 AJAX jquery dostarcza funkcje pobierające dane z serwera na kilku poziomach abstrakcji: ajax niskopoziomowy, nawiększe możliwości dostosowania, ale najbardziej złożony (~20 parametrów) get i post (~4 parametry) load (1/2 parametry, get albo post zależnie od drugiego) Oprócz tego są globalne zdarzenia ajaxstart() ajaxerror() ajaxsuccess() ajaxcomplete()

33 AJAX Fukcja get(): Deklaracja: Przykład $.get( URL [,data] [,success(data)]); $("#getit").click( function() { $.get("getit.php", function(data) { $("#showit").html(data); }); });

34 AJAX Fukcja get(): Funkcja get (podobnie post) zwraca obiekt jqxhr, dzięki czemu można precyzyjniej określić działania po jej zakończeniu: $("#getit").click( function() { $.get("getit.php").done(function(data) { $("#showit").html(data); }).fail(function() { $("showit").html("<p>błąd!"); }).always(function() { //??? }); });

35 Zdarzenie ready Użycie ready zapewnia bezpieczne działanie skryptu Skrypt jest zazwyczaj dodawany na początku dokumentu html; Funkcja ready jest wykonywana po wczytaniu całego html, dzięki czemu istnieją już wszystkie potrzebne obiekty: $(document).ready(function() { });

36 JavaScript, jquery i NetBeans Warto zapisać skrypty JavaScript i jquery w oddzielnym pliku, wówczas NetBeans właściwie koloruje składnię i wskazuje ew. błędy: