JavaScript jQuery

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 type=“text/javascript”> // javascript kodas</script> • <script type=“text/javascript” 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 write one 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>

Vardą turintis objektas, kurio reikšmę galima keisti programos vykdymo metu. Kintamojo reikšmė gali būti: tekstas, Skaičius Data/laikas objektas Kintamieji

Vykdo pirmą arba antrą instrukcijų grupę, priklausomai nuo to, ar tenkinama sąlyga ar ne Sąlygos : if () {} else {}

jQuery • Iš Google: • https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js • Arba parsisiųsti: • http://jquery.com/ Įterpiama HTML dokumento <head> dalyje

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() • .toggle(a[,b,c,...]) – paspaudus vykdomas vis kitas veiksmas • .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(){ $(this).css(); }); }); </script>

Pavyzdys <script type=“text/javascript”> $(document).ready(function(){ $(‘p.aktyvus’).hover( 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į

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ą

JavaScript jQuery