Programowanie w Sieci Internet jquery - nowy aromat kawy angular.js. Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki

Transkrypt

1

2 Programowanie w Sieci Internet jquery - nowy aromat kawy angular.js Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki

3 Co będzie dziś jquery - nowy aromat kawy, czyli biblioteka do programowania w Java Script po stronie klienta / programowanie dla przeglądarki, oraz co nieco o angular.js Wstęp do jquery, składnia, pisanie w jq, $.ajax(), kilka przydatnych funkcji, przykłady, wstęp do AngularJS składnia, pisanie w angularze, przykłady.

4 Wstęp do jquery Aby zacząć programować w jquery nie trzeba nam dużo. Po pierwsze musimy zdobyć jakąś świeżą (jak poranne bułeczki) bibliotekę jquery. Najświeższe biblioteki można zawsze znaleźć na stronie: lub jeśli masz dostęp do Git a, to możesz pobrać go z repository: git clone git://github.com/jquery/jquery.git Następnie należy umieścić odpowiedni link do biblioteki w kodzie strony która ma zostać obsłużona przez nasz skrypt (najlepiej zrobić to w sekcji nagłówkowej, aczkolwiek w dowolnym miejscu na stronie będzie to działać). <script src=jquery.js></script> <!-- zgodne z html5 --> I już możesz rozpocząć działanie w skrypcie.

5 Wstęp do jquery c.d. jquery umożliwia: manipulację kodem HTML / DOM, manipulację kodem CSS, obsługę eventów HTML, animacje i efekty wizualne, obsługę AJAX, oraz wiele innych. Aby wykonać akcję na obiekcie wystarczy umieścić ją po kropce za selektorem obiektu: $(selector).action(); np.: $(.initiallyhiddenclass ).show( slow ); $(this) odnosi się do bieżącego elementu w aktualnym kontekście. Funkcje callback wykonywane są po zakończeniu działania eventu np: $(selector).show(2000,myfunction); <!-- Po zakończeniu animacji efektu show() trwającego 2000 milisekund zostanie wywołana funkcja myfunction() -->

6 Składnia Większość programów w JS jeśli miała się uruchomić po załadowaniu strony wykorzystywało kod: window.onload = function(){... } W jquery można to zrobić na kilka sposobów: $(document).ready(function() {... }); $().ready(function() {... }); $(function() {... }); jquery(document).ready(function($) {... }); Składnia jquery jest bardzo podobna do CSS. Selektory są definiowane tak jak w CSS. Akcje bindowane do elementów mogą definiować własne działanie przez definiowanie funkcji: $(selector).dblclic(function() {... }); funkcje te mogą też przyjmować eventy i operować na nich: $( a ).click(function(e) { e.preventdefault(); alert( Locked ); }); jquery ma bardzo zwięzłą składnię łańcuchową. Każdy łańcuch rozpoczyna się od znaku $, a kolejne polecenia dopinane są do łańcucha za pomocą kropki. $(selektor).css( color, red ).click(function(){ alert( ha, ha ); }).hide( slow ).show( fast );

7 Pisanie w jq Aby debugować kod jquery można wypisywać nieznane wartości przez alert(info); lub mniej inwazyjnie dla użytkownika (w przypadku gdybyśmy zapomnieli usunąć debugu z kodu przed wdrożeniem projektu) poprzez konsolę: console.log(info); Konsola jest dostępna przez firebug a, dragonfly a czy inspektora. Zamiast pisać pętli for in można wykorzystać wbudowaną akcję.each(), w której można zadeklarować funkcję, która ma zostać wykonana na każdym obiekcie zwróconym przez selektor. Jako, że niektóre akcje zwracają nowy obiekt a w jquery akcje można umieszczać łańcuchowo, nie zawsze chcemy się odwołać do nowo zwróconego obiektu. Wtedy możemy skorzystać z metody.end() aby wrócić do poprzedniego elementu jquery.

8 $.ajax() AJAX służy do pobierania danych z zewnętrznego źródła i obrabiania go przez kod bez konieczności przeładowywania strony. $.ajax(argumenty); argumenty: url - adres źródła danych (np.: rss.xml ), type - typ zapytania (np.: GET ), data - obiekt z danymi do wysłania w zapytaniu, async - czy zapytanie ma być przetwarzane asynchronicznie (domyślnie true), beforesend - callback przed wysłaniem wiadomości, success - callbac na wypadek powodzenia, error - callback na wypadek niepowodzenia, complete - callback wykonywany po zakończeniu success lub error, i wiele innych.

9 Przydatne funkcje Najczęściej przydają się funkcje automatyzujące animacje czy inne efekty na stronie. show() - rozwija element od górnego lewego rogu, hide() - chowa element zwijając go do górnego lewego rogu, toggle() - działa zamiennie tak jak show() i hide(), fadein(), fadeout(), fadetoggle() - ukrywanie i pokazywanie elementu, fadeto() - zmienia opacity elementu do zadanej wartości, slideup(), slidedown(), slidetoggle() - zwijanie w górę, w dół i zamienne, animate({parametry},speed,callbackfunction) - do animacji obiektów za pomocą manipulacji stylami, np.: $("div").animate({ }); height: +22px, width: +22px,left: -11px,top: -11px stop() - zatrzymuje akcje animacji i efektów,

10 Przydatne funkcje c.d. text() - zwraca wartość jedynie tekstową elementu (pomijając tagi HTML), html() - zwraca wartość zachowując wewnątrz strukturę drzewa DOM, val() - pobiera zawartość atrybutu value elementu, jeśli podano wartość jako atrybut, to akcje te ustawią odpowiednio zawartości elementu attr(name,val) - jeśli brak val podaje wartość atrybutu name, wpp ustawia go na val, append() - dopina wartość z argumentu na koniec zawartości elementu, prepend() - jak wyżej, ale przed zawartością elementu, after() - dopina zawartość za danym elementem, before() - dopina zawartość przed danym elementem, remove() - usuwa dany element z drzewa DOM wraz z wszystkimi dziećmi, empty() - usuwa z drzewa DOM zawartość wraz z wszystimi dzieci danego elementu, addclass(), removeclass(), toggleclass(), css() - dodaje, usuwa ulasy i zmienia css, width(), height(), innerwidth(), innerheight(), outerwidth(), outerheight() - zwracają szerokości i wysokości elementu,

11 Przykłady Kod jquery: $("div").animate({left:'200px',fontsize:'3em',width:'+=110px',height:'-=46px'},3000); element do manipulacji na stronie: <div style="height:100px;width:200px;">animate ME</div> $.ajax({! type: "GET",! url: "time.xml",! success: function(data) {!! T = $(data).find( time );!!!! $('.now').children().remove();!! $('#schooltable').children().remove();!! var tmp = 0;!! var i = 0;!! $(.rows ).each(function(){!!! if(t > ++i)!!!! tmp = i;!!! $('#schooltable').append($(this));!! }!! if(t > S && T < E)!!! $('.now').append($(.rows:nth-child( +i+ ) ).show();!! else!!! $('.now').hide();! } });

12 Wstęp do AngularJS Aby rozpocząć pracę z AngularJS, podobnie jak w przypadku jquery, wystarczy zainkludoać bibliotekę angular.js, np. poprzez kod: <script src=" ng-dyrektywy umieszczane w tagach HTMLowych rozszeżają je i definiują ich działanie. Aby kod był w pełni walidowalny do kodu HTML5, należy dodać przedrostek data- data-ng-app definiuje aplikację AngularJS (element jest zarządcą aplikacji), data-ng-model łączy wartość elementu HTML (textarea, input, select) do danych aplikacji, data-ng-bind łączy wartość danych aplikacji do widoku HTML (wypełnia innerhtml), data-ng-init inicjalizuje aplikację (ustawia dane wejściowe itp.), data-ng-controller definiuje kontroler, data-ng-repeat zapętla wstawianie elementów HTMLowych do kodu strony. Wyrażenia można wrzucać bezpośrednio do zawartości tagów HTML poprzez umieszczenie ich w podwójnych nawiasach wąsiastych {{ expression }}

13 Składnia Swoistym konstruktorem aplikacji angular.js jest controller (data-ng-controller). Jest to funkcja JS przyjmująca w atrybutach $scope - objekt aplikacji. <div ng-app="" ng-controller="carcontroller"> Make: <input type="text" ng-model="make"><br> Model: <input type="text" ng-model="model"><br> <br> Parameters: {{ findparameters() }} </div> <script> function carcontroller($scope, $http) { $scope.make = "BMW", $scope.model = "325i", $scope.findparameters = function() { $http.get(./carsparameters.php?make= +$scope.make+ &model= +$scope.model).success(function(response){ return response; }); } } </script> zamiast wypisywania ciała kontrolera w kodzie strony możemy go wyrzucić do osobnego pliku i zainkludować kawałkiem kodu: <script src="carcontroller.js"></script> Można użyć kilku kontrolerów w aplikacji o różnym scope (zakresie). Wystarczy umieścić deklarację kontrolera w odpowiednim elemencie drzewa DOM w HTMLu. <div ng-controller="myctroller">

14 Pisanie w angularze W przypadku gdy chcemy przerzucić część kodu modułu aplikacji, lub nawet do zewnętrznych plików js, możemy nadać aplikacji nazwę. <div ng-app="myapp" ng-controller="myctrl"> {{ model + " " + make }} </div> <script> var app = angular.module("myapp", []); app.controller("myctrl", function($scope) { $scope.make = "Ferrari"; $scope.model = "ff"; }); </script> W tan sposób tworzymy moduł aplikacji i możemy w nim stworzyć controller etc. Aby osadzić kod strony, np. z aplikacją angular.js, przy pomocy samego angulara, możemy wykorzystać dyrektywę data-ng-include: <div class="container"> <div ng-include="'supercars.htm'"></div> <div ng-include="'hypercars.htm'"></div> </div> Filtrowanie nie koniecznie znaczy wybieranie danych ze zbioru na podstawie wyrażenia logicznego. Filtrowanie w angularze odbywa się poprzez znak pipeline Zamiana znaków na duże lub małe, formatowanie waluty czy sortowanie jest filtrowaniem w AngularJS.

15 Przykłady Filtrowanie poprzez zmianę znaków na duże litery: <p>uppercase string {{ str uppercase }}, lowercase string {{ str lowercase }}</p> Formatowanie waluty jako filtrowanie: <p>total = {{ (quantity * price) currency }}</p> Sortowanie jako filtrowanie: <ul> <li ng-repeat="x in cars orderby:'make'"> {{ x.make + ' ' + x.model }} </li> </ul> lub nawet filtrowanie na podstawie wpisywanych danych: <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in cars filter:test orderby:'make'"> {{ (x.make uppercase) + ' ' + x.model uppercase }} </li> </ul>

16 Dziękuję za uwagę!