5 SKRIPTNI PROGRAMSKI JEZIK JAVASCRIPT
5.4 KNJIŢNICA JQUERY
//programska koda }
Glava funkcije je sestavljena iz imena function, ki pove, da gre za funkcijo, imena funkcije, ki je lahko poljubno, vendar v skladu s sintakso ter argumenti. Funkcija lahko sprejme poljubno argumentov, ki so ločeni z vejicami. Funkcija lahko vrednost tudi vrne, za kar uporabimo ukaz return.
5.4 KNJIŢNICA JQUERY
jQuery je brezplačna knjiţnica z JavaScript funkcijami. Dosegljiva je uradni spletni strani jQuery-ja, www.jquery.com (10.7.2010). Omogoča izbiro xhtml elementov in manipulacijo z njimi, obravnavo CSS stilov, xhtml dogodke, JavaScript efekte in animacije, Ajax …
Knjiţnica z jQuery funkcijami je zbrana v eni sami datoteki, ki jo lahko brezplačno snamemo z njihove spletne strani in vključimo v dokument na sledeč način:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Primer skrivanja odstavkov
Spodnji primer prikazuje način kako lahko skrijemo vsebino, ki se nahaja v odstavku (značka
<p>).
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>To je naslov</h2>
<p>To je odstavek.</p>
<p>Še en odstavek.</p>
<button>Klikni</button>
</body>
</html>
jQuery vključujemo na enak način kot JavaScript. Priporočljivo je, da ga vključimo v <head>
ali zunanjo datoteko. V danem primeru imamo dva odstavka, en naslov in en gumb. Ţelimo, da se s klikom na gumb skrijeta oba odstavka.
Če ţelimo, da se jQuery izvede, ga moramo dati v $(document).ready(function(){});, s čimer povemo, da bomo vse to izvajali takrat, ko se naloţi celoten dokument.
$(document).ready(function(){
});
Da se določena akcija izvede ob nekem dogodku poskrbi ukaz
$("button").click(function(){
});
Z njim sporočimo, da se naj izvede koda, ko pritisnemo na značno <button>. Znotraj te kode pa povemo, da se naj vse značke <p> skrijejo,kar storimo z ukazom $("p").hide();.
Namesto $("p") lahko uporabimo katerokoli značko, razred, id in podobno. Prav tako obstaja mnoţica efektov, selektorjev, dogodkov ipd, ki so zbrani in opisani na spletni strani jQuery-ja (http://docs.jquery.com/Main_Page) (10.7.2010).
Raziščite ukaz show(), ki je nasprotje ukaza hide(). Ustvarite še en gumb in s klikom na njega omogočite, da odstavka p znova prikaţeta.
Rešitev naloge:
Naloga je zahtevala, da izdelamo spletno stran z dvema povezavama, ki naj omogočata da s klikom na njiju spremenimo barvo ozadja. Prva povezava naj spremeni barvo ozadja na modro, druga pa na sivo.
Najprej ustvarimo xhtml dokument, ki vsebuje dve povezavi, kar storimo s kodo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprememba ozadja</title>
Priporočljivo je, da nato ustvarimo funkcijo SpremeniBarvo(barva), ki bo sprejela tip barve in jo nastavila za ozadje. Funkcijo deklariramo v področju <head> in sicer:
function SpremeniBarvo(barva) {
document.bgColor = color;
}
Za spreminjanje barve ozadja se uporablja document.bgColor.
Funkcijo je nato potrebno le še vključiti v povezavo, kot dogodek na klik. Za to bomo uporabili onclick() iz česar sledi, da povezava izgleda kot je prikazano:
<a href="#" onClick="SpremeniBarvo('blue')">Modro ozadje</a>
Celotna izvorna koda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprememba ozadja</title>
Povzetek:
JavaScript daje dinamičnost spletnim stranem in oblikovalcem omogoča, da v xhtml
dokument vnesejo interaktivnost kot so dogodki ipd. Dogodki so lahko različno kot npr. klik miške, pomik miše, pritisk tipke … JavaScript lahko vključimo v <head>, <body>, oboje ali v zunanjo datoteko. V <head> in <body> pišemo programsko kodo tako, da jo damo med znački
<script> in </script>. Ti dve znački pa ne uporabljamo pri zunanjih datotekah. Priporočljivo je, da pri delu uporabljamo funkcije, ki jih deklariramo z besedo function. JavaScript Vsebuje tudi krmilne stavke kot so if, while, do while, for, break ipd.
Mnoţica ţe napisanih JavaScript funkcij je zbranih v datoteki jQuery. Te funkcije omogočajo različne animacije, dogodke, izbire, spremembe CSS-jev ipd.
Naloge:
1. Izdelajte spletno stran v katero vstavite dve sliki. Omogočite, da ko se spremeni barva ozadja ko se z miško pomaknemo prek ene sli druge slike. Prva slika naj spremeni barvo ozadja na rumeno, druga pa na rdečo.
2. Ka jomogoča dogodek onblur()? Kje bi ga uporabili?
3. JavaScript ukaz za zpis na zaslon se imenuje ________________________________?
4. Znotraj katere značke vstavljamo JavaScript kodo?
5. Kako z JavaScript kodo izpišemo "Hello world!" (izpis je brez narekovajev) v novem oknu?
6. Katera jQuery metoda se uporablja za skrivanje izbranih elementov?
7. Z jQuery napišemo sledeč selektor: $("div.intro"). Kaj izbere?
◦ vse div-e z razredom intro
◦ vse div-e z id-jem intro
◦ prvi div z razredom intro
◦ prvi div z id-jem intro