
Žádný php programátor se dnes bez znalosti JavaScriptu neobejde. Naštěstí už dávno není potřeba dávat tolik pozor na to, aby JS fungoval v každém prohlížeči stejně, protože o toto se stará rozšíření jQuery. Tvoříme tedy příkazy JS, ale pomocí nadstavby jQuery.
jQuery knihovna
Chcete-li nepatrně ušetřit zátěž vašeho serveru, můžete knihovnu načítat třeba z Google API’s
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Knihovnu je dnes již vhodné načíst v podstatě vždy. Kód umístěte do hlavičky stránky. Načítáme minimalizovanou verzi bez mezer, protože není potřeba se ve zdrojovém kódu hrabat.
Selektory
Vybírání prvků stránky je srdcem jQuery. Oproti standardnímu výběru prvků přímo v JavaScriptu je jQuery jednodušší.
document.getElementById("nadpis") v.s. $('#nadpis')
Nejběžněji se používají následující selektory:
$('#nadpis')
… výběr prvku kde id=“nadpis“
$('.nadpis')
… výběr prvků kde class=“nadpis“
$('p')
… cyklický výběr všech tagů p (paragraf)
$(this)
… aktuální prvek
$('tr:even')
… výběr všech sudých řádků tabulky
$('tr:odd')
… výběr všech lichých řádků tabulky
$(':button[id="tlacitko1"]')
… tlačítko id=“tlacitko1″
Selektory lze zobecnit, resp. rozčlenit na výběr podle tagu, třídy, id, názvu atributu, hodnoty atributu a filtry.
Existují rozmanité způsoby výběrů prvků stránky.
$('p,div')
… zde vybíráme všechny p a div tagy na stránce
$('p a')
… a tag uvnitř p tagu
$('p > a'
… a je bezprostřední potomek p
$('input[required]')
… input tagy s atributem „required“
$('a[href^="https://"]')
… tag a kterého „href“ začíná na „https://“
$('a[href*="jQuery"]')
… atribut „href“ obsahující „jQuery“
= je rovno
!= je různé od
^= začíná na
$= končí s
*= obsahuje
~= obsahuje slovo
|= začíná prefixem (např. |= "prefix" tj. "prefix-...")
Filtry – trochu zjednodušují práci, ale působí na začátku zmatečně.
:button … stejné jako input[type=submit], input[type=reset], input[type=button], button
:submit … stejné jako input[type=submit], button[type=submit]
:input
:text … input[type=text]
:checkbox … input[type=checkbox]
:checked
:radio
:selected
:enabled
:disabled
:visible
:hidden
:file
Manipulace s prvky stránky
funkce | popis | |
---|---|---|
.html() |
získej vnitřní HTML, včetně vnořených prvků | |
.html(novýObsah) |
nahraď vnitřní HTMLhodnotou novýObsah |
|
.text() |
získej text bez tagů | |
.text(novýText) |
nahraď obsah hodnotou novýText ; (nelze vložit tagy) |
|
.append(val) |
připoj za vnitřní HTML val |
|
.prepend(value) |
vlož val před vnitřní HTML |
|
.before(val) |
vlož val před tag aktuálního prvku; val může být HTML prvek |
|
.after(val) |
přidej val za uzavírací tag |
|
.remove() |
odstraň daný prvek | |
.empty() |
odstraň vnitřní HTML | |
.replaceWith(value) |
nahraď prvek hodnotou val |
|
.wrap(tag) |
uzavři dané prvky mezi tag |
|
.warpInner(tag) |
uzavři vnitřní HTML mezi tag |
|
.unwrap() |
odstraň vnější uzavírací tag daného prvku |
Obsluha událostí
Údálostí je celá řada. Jmenovitě například dokončení načítání prvků stránky, kliknutí uživatele na prvek stránky, přejetí myší nad prvek, odetí myší z prvku, odeslání formuláře, stisknutí klávesy …
.ready()
.click()
.mouseover()
.mouseout()
.submit()
.keypressed()
…
Když už víte, jak vybrat nějaký prvek na stránce, můžete k němu přiřadit událost.
$('#akce').click()
… zde u prvku s id=“akce“ dojde po kliknutí na tento prvek ke spuštění funkce; funkce se většinou vepisuje přímo do kulatých závorek
Události lze vázat na selektor též pomocí .on()
1 2 3 4 5 6 7 8 |
$('#formular').on('submit', function() { .... }); <span class="color-comment">// anonymní funkce bez jména (nelze volat odjinud)</span> $('#formular').submit(function() { .... }); <span class="color-comment">// stejné jako předchozí řádka</span> $('#formular').on('submit', Validace); <span class="color-comment">// zde voláme pojmenovanou funkci "Validace" (viz níže)</span> function Validace() { .... }; $('#klikatko').on('click', function() { .... }); // anonymní funkce bez jména $('#klikatko').click(function() { .... }); <span class="color-comment">// stejné jako předchozí řádka</span> |
Přehled událostí a k čemu se vztahují
document | .ready() | DOM struktura stránky byla sestavena. |
.load() | Byla nahrána kompletně celá stránka včetně obrázků. | |
.unload() | Uživatel kliknul na odkaz nebo zavřel panel se stránkou. | |
window | .resize() | Uživatel mění velikost okna. |
.scroll() | Uživatel scrolluje. | |
mouse | .click() .dblClick() |
Kliknutí nebo dvojité kliknutí. |
.mousedown() .mouseup() |
Tlačítko myši bylo stisknuto, resp. uvolněno. |
|
.mouseover() .mouseout() |
Ukazatel myši je nad daným prvkem, resp. z něj odešel. |
|
.mousemove() | Myš šmejdí v rozsahu daného prvku. Získáváme (x, y) souřadnice ukazatele. | |
key | .keypress() | Datel stisknul klávesu. |
.keyup() .keydown() |
Stisknutí resp. uvolnění konkrétní klávesy. Chcete-li vědět, o kterou se jedná … var key = String.fromCharCode(event.which); |
|
form | .submit() | Odeslán formulář <input type="submit"> |
.reset() | Resetován formulář <input type="reset"> |
|
.change() | Změna výběru – týká se těchto formulářových prvků: checkbox, radio, drop-down menu | |
.focus() .blur() |
Vstupní prvek získává, resp. ztrácí zaměření na formulářové políčko. |
Zjednodušení mouseover() a mouseout() pomocí hover()
hover() sjednocuje obě události do jedné a sice tímto způsobem: .hover(function(), function()). První funkce obstarává mouseover událost, druhá funkce mouseout.
1 2 3 4 5 6 7 8 |
$('#menu').hover( function() { <span class="color-comment">// mouseover</span> $('#submenu').show(); }, function() { <span class="color-comment">// mouseout</span> $('#submenu').hide(); } ); |
Objekt událost
1 2 3 4 5 |
$('#nejaky_prvek').click(function(e) { var x = e.pageX; var y = e.pageY; }); |
target |
Zdrojový prvek spustil událost. |
pageX, pageY |
(x, y) okna prohlížeče |
screenX, screenY |
(x, y) monitoru |
which |
Číselný kód stisknuté klávesy.String.fromCharCode(evt.which) |
shiftkey |
true pokud je stisknutý shift |
data |
data předaná z .on(events, selector, data, handler) . |
Vykonání výchozí fukce prvku stránky lze zamezit použitím příkazu event.preventDefault()
.
Řekněme, že máme odkaz, ale po kliknutí na něj nechceme nikam přejít, nýbrž zobrazit třeba div tag s nějakým obsahem.
1 2 |
<a id="odkaz" href="https://www.phpdeveloper.cz/">php</a> <div id="info" style="display: none;"></div> |
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function() { $('#odkaz').click(function(e) { e.preventDefault(); $('#info').html('Jste v pasti! Nyní nelze nikam odejít.').show(); }); }); </script> |
Po kliknutí na odkaz je nejprve vložen text a následně pomocí příkazu show() zviditelněný tag s obsahem.
Vizuální efekty
zobrazit v.s. skrýt |
.hide() |
skrýt zvolený prvek | |
.show() |
zobrazit zvolený prvek | ||
.toggle() |
přepnout stav (je-li skrytý, zobrazit, je-li zobrazený, skrýt) | ||
postupná změna |
.fadeIn() |
zobrazit skrytý element přechodem | |
.fadeOut() |
skrýt | ||
.fadeToggle() |
přepnout stav | ||
.fadeTo() |
přechod na konkrétní úroveň průsvitnosti (0 až 1) | ||
posun | .slideDown() |
zobrazit prvek přesunem dolů | |
.slideUp() |
skrýt prvek přesunem nahoru | ||
.slideToggle() |
přepnout stav |
Funkce pro vizuální efekty mají dva argumenty:
1) doba animace v milisekundách
2) callback funkce (funkce, která se má vykonat po dokončení animace)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8"> <title>Vizuální efekty</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ var pocet=0; $('#para').click(function(){ $('p').fadeToggle(2000,hotovo); }); function hotovo() { pocet = pocet + 1; $('#info').html('Počet volání funkce "hotovo": '+pocet); }; }); </script> </head> <body> <div id="para" style="padding:5px; border:1px solid black; width:120px; cursor: pointer;">Klikněte zde!</div> <div id="info"></div> <p>To je první paragraf.</p> <p>A tohle je druhý paragraf.</p> <p>A tohle je třetí paragraf.</p> </body> </html> |
V příkladu výše si povšimněte, že selektor $(‚p‘) provádí cyklický výběr všech tagů p. Každý tak volá zvlášť, takže je funkce „hotovo“ aktivována jedním řádkem kódu 3x. Na to pozor. Je to v praxi trochu matoucí.
AJAX
Nastudování a praktické vyzkoušení následujícího příkladu vám ušetří hodně nervů při prních hrátkách s AJAXem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8"> <title>AJAX test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { // vybereme prvek stránky s id = akce, na který když klikneme, odešle se zpráva na url $('#akce').click(function (event) { var data_k_odeslani = $(':text[name="vypocet"]').val(); //zprávu získáme z hodnoty textového pole console.log("data:"+data_k_odeslani); // pro kontrolu co se děje odesíláme zprávy také do logu (F12 -> konzole) $.ajax({ type: 'POST', url: 'https://www.printia.eu/ajaxtest.php', data: { zprava: data_k_odeslani } }) .done( function (odezva) { // stavový kód je: 200 (OK) $('#vysledek').html('Výsledek je: ' + odezva); }) .fail( function (jqXHR, status, error) { // není-li stavový kód 200, potom se spustí fail console.log(jqXHR.odezva); }) }); }); </script> </head> <body> <p>AJAX test</p> Zadej číslo: <input type="text" name="vypocet"><br> <div id="akce" style="width:60px; cursor: pointer; border:1px solid black;">Odeslat</div> <p id="vysledek"> </p> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 |
<?php // php soubor většinou pracuje s databází, // my však pro jednoduchost provedeme pohttps://www.phpdeveloper.cz/wp-admin/post.php?post=330&action=edit#uze výpočet // a odešleme nazpět výsledek $vysledek = $_POST['zprava'] * 20; echo $vysledek; // cokoliv co pošleme v php souboru na výstup // bude předáno do volajícího skriptu zpět // přes funkci .done() v parametru odezva ?> |
V php souboru se většinou zpracovávají dotazy na databázi. Bylo by samozřejmě hloupé provádět výpočty tak jako v ukázce výše. Příklad však skvěle odhaluje, jak probíhá komunikace pomocí AJAXu.
Jak předávat objekty? … JSON
JavaScript Object Notation slouží primárně k přenosu serializovaných dat/objektů. Data je nejprve nutné převést na řetězec a po přenosu zpět na objekt. Řetězec lze jednoduše předat v jedné proměnné a na druhé straně deserializovat zpět na objekt. JSON je pouze syntaktický rámec pro přenos dat.
Příklad 1
var data_k_odeslani = [{ "jméno" : "Larry", "příjmení" : "Page", "web" : "google.com", "hodnota" : "∞" }];
Příklad 2
var data_k_odeslani = [{
"id": "1",
"název": "kalendář 1",
"obrázek":
{
"url": "obrazky/1.jpg",
"width": 1200,
"height": 1200
},
"náhled":
{
"url": "obrazky/nahledy/1.jpg",
"width": 48,
"height": 48
}
}];
Uvnitř se též mohou vyskytovat pole hodnot uzavřená do hranatých závorek [].
Předání dat serveru
Jednou z možností je načtení všech dat zadaných ve formuláři $('#form').serialize()
a serializace do řetězce včetně kódování dat pro přenos odkazem.
Také se používá serializeArray()
$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
});
Jak přesně serializeArray() používat se podívejte do manuálu.
JSON.stringify
1 2 3 4 5 6 7 8 |
function sendData() { $.ajax({ url: '/ajax-skripty/zpracuj.php', type: 'POST', data: { json: JSON.stringify(data_k_odeslani)}, dataType: 'json' }); } |
Získání JSON dat ze severu
1 2 3 4 |
<?php header('Content-Type: application/json'); echo json_encode($jsonData); ?> |
var objekt = JSON.parse(json_text); …
Ladění
Tak asi nejlépe přes F12 v Chrome a ve FireFoxu.
Je dobré posílat při ladění zprávy do logu (konzole).
1 2 3 4 |
$(document).ready(foo); function foo() { <span class="color-comment">// function can be defined later</span> console.log("foo"); } |
Procvičte se: https://www.w3schools.com/jquery/exercise_jq.asp
www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jQuery_Basics.html