160 kb

Języki programowania
wysokiego poziomu
JavaScript
jQuery
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
http://rainbow.arch.scriptmania.com/scripts/mouse_clock.html
http://randomibis.com/coolclock/
https://jqueryui.com/datepicker/ http://jquery.com/
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).
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. 2000 r.) – wykorzystują go
dynamiczne serwisy tworzone w Visual Web Developer
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 (1999-2009) 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)
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)
JavaScript
Wojny przeglądarek
• Pierwsza wojna przeglądarek: 1997-1999
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
2.0 3.0 4.0 4.1
5.0
1.0 1.1
XHTML
PHP
JavaScript
1.0
2.0 3.0
4.0
1 1.2 1.3
1.5
5.0
1.6
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!)
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="http://domena.com/js/skrypt.js">
</script>
JavaScript
Dodawanie skryptu do dokumentu HTML
…
• Atrybuty zdarzeń HTML:
<div onclick="foo();">
</div>
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
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
= += -= *= /=
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 + " ");
}
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);
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
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>
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>
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
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
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 )
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")
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)
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
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>
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)")
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
});
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();
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();
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");
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();
});
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 );
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()
AJAX
Fukcja get():
• Deklaracja:
$.get( URL [,data] [,success(data)]);
• Przykład
$("#getIt").click( function() {
$.get("getIt.php", function(data) {
$("#showIt").html(data);
});
});
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() {
// ???
});
});
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() {
});
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: