javascript jquery
DESCRIPTION
JavaScript jQuery. Kas yra JavaScript?. Programavimo kalba, skirta interneto aplikacij ų kūrimui Vykdoma vartotojo kompiuteryje ( client-side ), o ne interneto serveryje. - PowerPoint PPT PresentationTRANSCRIPT
JavaScriptjQuery
Kas yra JavaScript?
Programavimo kalba, skirta interneto aplikacijų kūrimui
Vykdoma vartotojo kompiuteryje (client-side), o ne interneto serveryje.
Leidžia manipuliuoti HTML dokumentu, atlikti įvairius skaičiavimus, gauti papildomų duomenų iš serverio neperkraunant viso puslapio
Problema – naršyklės
Skirtingos naršyklės naudoja skirtingus JavaScript variklius, kurie skiriasi tiek sparta, tiek galimybėmis.
Šiek tiek skiriasi ir sintaksė, todėl sudėtinga rašyti visoms naršyklėms vienodai “suprantamą” kodą.
jQuery
Viena iš JavaScript bibliotekų– Pagerina tarpnaršyklinį suderinamumą– Supaprastina darbą– Prideda papildomo funkcionalumo
JavaScript įterpimas
<script> // javascript kodas</script>
<script src=“kodas.js”></script>
JavaScript pavyzdys
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
JavaScript komentarai
Viena eilutė:// komentaras
Kelios eilutės:/* komentaras prasideda,tesiaisiir baigiasi */
Instrukcijų atskyrimas - ;
<html><body>
<script type="text/javascript">/*The code below will writeone heading and two paragraphs*/document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>
</body></html>
Kintamieji
Vardą turintis objektas, kurio reikšmę galima keisti programos vykdymo metu.
Kintamojo reikšmė gali būti:
– tekstas,– Skaičius– Data/laikas– objektas
Sąlygos : if () {} else {}
Vykdo pirmą arba antrą instrukcijų grupę, priklausomai nuo to, ar tenkinama sąlyga ar ne
jQuery
Iš Google:– https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Arba parsisiųsti:– http://jquery.com/
Įterpiama HTML dokumento pabaigoje, prieš </body>.Visi kiti skriptai, naudojantys jQuery įterpiami po
jQuery įterpimo.
jQuery pavyzdys
Paaiškinimas
$(document).ready( );– Kodas viduje bus vykdomas, kai HTML elementas
bus įkeltas iki galo.
$("p").click( );– Kodas viduje bus vykdomas, kai bus paspausta
pele ant bet kurios pastraipos dokumente.
$(this).hide(); – Elementas, ant kurio paspausta, bus paslėptas
jQuery pavyzdys
Selektorius
$(...) arba jQuery(...)– document - HTML dokumentas– this - elementas, su kuriuo susijęs vykdomas įvykis– kintamasis – CSS:
‘#id’ ‘.class’ ‘p’ ‘a:hover’ ‘#container div.str h1 a:hover’
Įvykiai
.ready( ) .click() .hover(a[,b]) – pelės užvedimas, patraukimas nuo
elemento .change() – reikšmės pasikeitimas .focus() ir .blur() – elementui
suteikiamas/panaikinamas fokusas
Veiksmai
.hide() ir .show() .html(‘<p>dfdf</p>’) – pakeičia HTML
elemento viduje .append(‘ddd’) ir .prepend(‘ddd’) – kaip
ir .html(), tik nepakeičia, o prideda prie esamo turinio – iš galo arba iš priekio
.css(‘color’,’blue’) – pakeičia elemento CSS
Pavyzdys
<script type=“text/javascript”>
$(document).ready();
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){});
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
});
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click();
});
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){ });
});
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){
});
});
</script>
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){
$(this).css();
});
});
</script>
Pavyzdys
<script type=“text/javascript”> $(document).ready(function(){ $(‘p.aktyvus’).click( function(){ $(this).css(‘color’,’red’); }); });</script>
Užduotis
Parašyti jQuery funkciją, kuri užvedus pelę ant pastraipos jos spalvą pakeistų į raudoną, o patraukus pelę – į juodą.
Užduotis 2
Parašyti jQuery funkciją, kuri, paspaudus ant bet kurios pastraipos, jas visas paslėptų.
Užduotis 3
Parašyti jQuery funkciją, kuri, paspaudus ant vienos pastraipos pakeistų greta esančios pastraipos turinį į paspaustosios pastraipos turinį
.next() .prev()
Praktinė užduotis
jQuery, HTML ir CSS pagalba sukurti veikiantį kalkuliatorių, kuris galėtų būti valdomas pele ir atliktų šiuos veiksmus:– Sudėtį– Atimtį– Daugybą– Dalybą