Wstęp do jQuery - Instytutu Informatyki UJ

Programowanie w Sieci Internet
— jQuery - nowy aromat kawy
— angular.js
Kraków, 24 października 2014 r.
mgr Piotr Rytko
Wydział Matematyki i Informatyki
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.
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:
http://jquery.com/download/
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.
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() -->
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’);
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.
$.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.
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,
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,
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();
!
}
});
Wstęp do AngularJS
Aby rozpocząć pracę z AngularJS, podobnie jak w przypadku jQuery, wystarczy
zainkludoać bibliotekę angular.js, np. poprzez kod:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
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 }}
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">
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.
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>
Dziękuję za uwagę!