Technologie internetowe Wykład 4 Skrypty klienckie JavaScript
Skrypty klienckie Języki JavaScript, VBScript, ActionScript Programy osadzone w kodzie HTML Języki JavaScript, VBScript, ActionScript Wykonywane przez przeglądarkę Mogą być nie obsługiwane lub zablokowane Jawne kody źródłowe Brak wymiany danych przez sieć Brak wymagań względem serwera Brak możliwości współpracy z bazami danych i rejestracji danych
Język JavaScript Stworzony przez NETSCAPE Inna składnia i filozofia zapożyczona z języka Java Brak jawnego typowania zmiennych Zaimplementowany w większości przeglądarek
Osadzanie JavaScript Bezpośrednio w znaczniku HTML, w atrybucie definiującym zdarzenie. <input type="button” value="Przywitaj” onClick="alert(‘Hello’)”>
Osadzanie JavaScript W nagłówku strony. Umieszczamy w nim własne definicje funkcji. <html> <head> <title>Przykład</title> <script type="text/javascript" language="JavaScript”> function Moja() { alert("Hello”); } </script> </head> <body> <input type="button” value="Przywitaj” onClick="alert(‘Hello’)”> </body>
Osadzanie JavaScript W ciele strony. Możemy z jego pomocą dynamicznie generować zawartość. <html> <head> <title>Przykład</title> </head> <body> <script language="JavaScript”> for (i=1;i<=7;i++) document.write(i+’<br>’); </script> </body>
Osadzanie JavaScript Dołączanie zewnętrznego pliku skryptowego. <script src="funkcje.js”></script> Uwaga ! W pliku .js znajduje się tylko kod JS, bez znaczników HTML. funkcje.js function Suma(a,b) { return Number(a)+Number(b); }
Operatory Arytmetyczne: +,-,*,/,++,-=,+=,*=,/= Porównań: ==,!=,<,>,<=,>= Logiczne: &&, ||, !
Operator równości wartości i typu var a=5; if (a=='5') document.write('Równy'); else document.write('Różny'); Równy var a=5; if (a==='5') document.write('Równy'); else document.write('Różny'); Różny
Zmienna Zmienne w JavaScript nie mają jawnych typów. var a,b; //deklaracja zmiennych, typ niezdefiniowany var c=6,d="hello”; // deklaracja zmiennych + inicjacja; zmienna c-int, d-string d=7*3.2+4.1; // deklaracja niejawna zmiennej, zmienna liczbowa
Wartość globalne NaN – wynik nie jest liczbą Infinity – nieskończoność undefined – wartość niezdefiniowana
Niejawne konwersje var a='2'; var b='3'; document.write(a+b); document.write('<br />'); document.write(a*b); 23 6
Instrukcje for (wyr1;wyr2;wyr3) { /* blok */} while (warunek) { /* blok */ } do { /* blok */} while (warunek) if (warunek) { /* blok1 */} else { /*blok2*/} switch (zmienna) { case 1: { /*blok1*/};break; case 2: { /*blok2*/};break; default: { /*blok*/};}
Funkcje globalne eval(polecenie) - Wykonuje polecenie podane jako argument isFinite(x) - Sprawdza czy wartość jest skończona isNaN(x) - Sprawdza czy wartość nie jest liczbą Number(x) - Konwertuje obiekt na liczbę parseFloat(x) - Konwertuje tekst na liczbę rzeczywistą parseInt(x) – Konwertuje tekst na liczbę całkowitą String(x) – Konwertuje obiekt na tekst
Funkcje globalne - wykorzystanie document.write(eval('5*3+2')); var s=1; eval('for (i=1;i<=5;i++) s*=i;'); document.write(s); 120 17 var a=0; var b=1/a; document.write(b+'<br />'); if (isFinite(b)) document.write(b); else document.write('nieskończoność'); Infinity nieskończoność NaN 123 1 document.write(isNaN(‘Hello’)); document.write(isNaN(‘123’)); document.write(isNaN(123)); true false document.write(Number(‘Hello’)); document.write(Number(‘123’)); document.write(Number(ture)); document.write(parseInt(‘Hello’)); document.write(parseInt(‘123.3ala’)); document.write(parseInt(true)); document.write(parseFloat(‘Hello’)); document.write(parseFloat(‘123.3ala’)); document.write(parseFloat(‘123’)); NaN 123 NaN 123.3 123
Funkcje proceduralna Bezargumentowa, nie zwracająca wartości Definicja function Witaj() //nagłówek { //ciało var x=5; alert(‘Kwadrat 5^2=‘+(x*x)); } Wywołanie Witaj();
Funkcja proceduralna z parametrami Argumentowa, nie zwracająca wartości Definicja function Sumuj(a,b) //nagłówek { //ciało var wynik=Number(a)+Number(b); alert(‘Suma ‘+a+’ plus ‘+b+’ równa się ‘+wynik); } Wywołanie Sumuj(4,5);
Funkcje zwracająca wartość Argumentowa, zwracająca wartość Definicja function Suma(a,b) //nagłówek { //ciało var wynik=Number(a)+Number(b); return wynik; } Wywołanie d=Suma(4,2)+Suma(Suma(2,45),12);
Funkcja ze zmienną liczbą argumentów function Suma(a,b,c) { var s=0; if(a!=undefined) s+=a; if(b!=undefined) s+=b; if(c!=undefined) s+=c; return s; } document.write(Suma(2,3)); function Suma(a,b,c) { var s=0; if(!isNaN(a)) s+=a; if(!isNaN(b)) s+=b; if(!isNaN(c)) s+=c; return s; } document.write(Suma(2,3));
Klasa Number Metody: toExponettial(x) – konwertuje liczbę na tekst w postaci naukowej toFixed(x) – konwertuje liczbę na tekst z podaną liczbą cyfr po przecinku toPrecision(x) – konwertuje liczbę na tekst zdanej długości toString() – konwertuje liczbę na tekst Właściwości: MAX_VALUE – największa możliwa wartość MIN_VALUE – najmniejsza możliwa wartość NEGATIVE_INFINITY – minus nieskończoność POSIITIVE_INFINITY – plus nieskończoność
Klasa Number - przykłady var a=1234.5678; document.write(a.toString()); document.write(a.toFixed(2)); document.write(a.toFixed(6)); document.write(a.toExponential(2)); document.write(a.toPrecision(2)); document.write(a.toPrecision(10)); document.write(Number.MAX_VALUE); document.write(Number.MIN_VALUE); 1234.5678 1234.56 1234.567800 1.23e+3 1.2e+3 1.7976931348623157e+308 5e-324
Klasa Math Stałe: D=Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)) Metody: abs(x) – wartość bezwzględna ceil(x) – zaokrąglenie w górę floor(x) – zaokrąglenie w dół round(x) – zaokrąglenie do najbliższej liczby całkowitej random() – liczba losowa od 0 do 1 log(x) – logarytm naturalny sqrt(x) – pierwiastek kwadratowy pow(a,n) – potęga an max(x1,x2,…,xn) min(x1,x2,…,xn) sin(rad) cos(rad) tan(rad) acos(x) asin(x) atan(x) atan2(y,x) – kąt wodzący punktu (x,y) Stałe: D=Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
Klasa String replace(s1,s2) – podmień podłańcuch s1 na s2 Właściwości: length – długość łańcucha Metody: charAt(i) – znak z pozycji (pierwszy znak i=0) concat(s1,s2,…,sn) – doklejenie łancuchów indexOf(s) – odszukanie pozycji podłańcucha s zaczynając od początku (fiasko -1) lastIndexOf(s) - – odszukanie pozycji podłańcucha s zaczynając od końca replace(s1,s2) – podmień podłańcuch s1 na s2 slice(i1,i2) – wytnij podłańcuch od i1 do i2 substring(i,n) – wytnij podłańcuch n-znaków od pozycji i split(s) – podziel łańcuch na fragmenty używając separatora s toLowerCase() – konwertuj na małe litery toUpperCase() – konwertuj na duże litery
Klasa String - przykłady -1 6 d var str="Hello world!" document.write(str.indexOf("Hello") + "<br />") document.write(str.indexOf("World") + "<br />") document.write(str.indexOf("world")) document.write(str.charAt(str.length-1));
Klasa Date <script type="text/javascript"> var d = new Date() document.write(d.toLocaleString()) </script>
Klasa Array Metody: concat – połącz pop – ściągnij z góry <script type="text/javascript"> var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge" arr[5] = "Tove„ document.write(arr + "<br />") document.write(arr.sort())</script> Metody: concat – połącz pop – ściągnij z góry push – wstaw na górę reverse – odwróć kolejność sort - posortuj Jani,Hege,Stale,Kai Jim,Borge,Tove Borge,Hege,Jani,Kai Jim,Stale,Tove
Document Obiect Model Opisuje hierarchiczną strukturę obiektów tworzących stronę HTML Window Textarea Frame Link Text Image Hidden Document Anchor Submit Location Form Reset History Radio Navigatior Checkbox Option Select
Obiekt Window Właściwości: document – obiekt dokumentu HTML history – obiekt historii nawigacji location - obiekt lokalizacji navigator - obiekt informacji o przeglądarce frames[] – kolekcja ramek w oknie length – liczba ramek na oknie innerHeight, innerWidth – wewnętrzne wymiary okna outerHeight, outerWidth – zewnętrzne wymiary okna screenLeft, screenTop, screenX, screenY – pozycja okna na ekranie status – tekst na pasku statusowym window.status=‘Czekam na dane !’;
Obiekt Window Metody: alert(tekst) - pokazuje okienko informacyjne) promp(pytanie, domyslna tresc) - pokazuje okienko zapytania i zwraca wpisany tekst confirm (pytanie) - pokazuje okienko potwierdzeni tak/nie i zwraca true/false) close() - zamyka okno open(url,name,spec) - otwiera nowe okno resizeTo() - zmienia rozmiar okna scrollBy(), scrollTo() - przewija okno względnie moveTo(), moveBy – przesunięcie okna na pozycję navigate(url) – przejście do nowego adresu
Obiekt Window if (confirm('Jesteś pewien, że wychodzisz z serwisu')) window.navigate('http://www.onet.pl'); else window.alert('Cieszymy się, że zostałeś !'); window.open('http://wwww.onet.pl','ONET', 'fullscreen=yes');
Obiekt Window Metody obsługi czasu: setTimeout(czas,wyrażenie) (wykonuje wyrażenie po podanej liczbie milisekund) clearTimeout() (anuluje działanie setTimeout) setInterval(czas, wyrażenie) (wywołuje wyrażenie co podany okres czasu) clearInterval() (wyłącza interval)
Obiekt Window - przykłady <html> <head><title>Zegar</title></head> <body> <script language="JavaScript"> window.setInterval(‘window.status=Date().toLocaleString()’,1000); </script> </body> </html> <html> <head><title>Zegar</title></head> <body> <script language="JavaScript"> window.setTimeout("alert('Na co czekasz?')",10000); </script> </body> </html>
<html> <head><title>Animacja</title></head> <script language="JavaScript"> var y=100; function Przesun() { y+=5; document.getElementById('bohater').style.top=y; } window.setInterval('Przesun()',500); </script> <body> <div id="bohater" style="position:absolute; left:100px; top:100px; background-color:yellow"><img src="bohater.gif"</div> </body> </html>
Obiekt Navigator Właściwości: appName – nazw przeglądarki appCodeName – nazwa kodowa przeglądarki (IE: Mozilla) appVersion – wersja kodowa przeglądarki cookieEnabled – dostępność obsługi cookies platform – platforma, system operacyjny userAgent – reprezentacja przeglądarki wysyłana w nagłówku HTTP userLanguage – język użytkownika document.write(navigator.appName);
Obiekt Screen Właściwości: height, width – rozmiary ekranu availHeight, availWidth – rozmiary pulpitu colorDepth – głebia kolorów w bitach (8,16,24,32) if (screen.width<1024) { alert(‘Strona wymaga wyższej rozdzielczości’); navigate(‘http://www.polsl.pl’); }
Obiekt History Właściwości: length – ilość wpisów w historii przeglądania Metody: back() - przejdź do poprzedniej strony forward() – przejdź do następnej strony go(n) – przejdź n stron w przód (+) lub w tył(-) go(url) – przejdź do strony o podanym url
Obiekt Location location.assign(‘http://www.onet.pl’); Właściwości: host –nazwa serwera i port hostname – nazwa serwera href – cały URL pathname – ścieżka URL port protocol – protoków (http, https, file) search – część URL po znaku ? Metody: assign(url) – załaduj nową stronę reload(f) – odśwież stronę HTML, f równe true oznacza pominięcie cache replace(url) – załaduj nową stronę z usunięciem bieżącej z historii location.assign(‘http://www.onet.pl’);
Obiekt Document Kolekcje forms[] - formularze images[] - obrazy links[] – hiperłącza anchors[]- zakładki cookie – cookies danego dokumentu title - tytuł dokumentu URL – adres dokumentu reffer – adres dokumentu, który załadował dokument location – obiekt lokalizacja dokumentu bgColor – kolor tła documentu fgColor - kolor czcionki dokumentu
Obiekt Document var d=new Date(); document.title="Wiadomości studenckie "+data.toLocaleString(); var Kolory=new Array('yellow','blue','green','red','gray'); var NrKoloru=0; window.setInterval("document.bgColor=Kolory[NrKoloru++]; if (NrKoloru>4) NrKoloru=0;",300); document.URL=‘http://www.polsl.pl’;
Obiekt Document Metody open() – otwiera dokument do pisania clear() – czyści zawartość dokumentu close() – zamyka dokument do pisania write(), writeln() – pisze do dokumentu getElementById() – wybiera element wg id getElementsByName() – wybiera elementy według nazwy getElementsByTagName – wybiera elemetny według typu
Obiekt Document for (i=1;i<=7;i++) document.write('<font size="'+i+'">Tekst</font>'); <p id="napis">Jak się masz</p> <script> if (Math.random()>0.5) document.getElementById('napis').style.color='red'; else document.getElementById('napis').style.color='green'; </script> var pola=document.getElementsByTagName(‘input'); for (i=0;i<pola.length;i++) if (pola[i].type==‘text’) pola[i].value=‘’;
Zdarzenia myszy Zdarzenia myszy: onclick – kliknięcie myszką ondblclick – podwójne kliknięcie onmousedown – naciśnięcie przycisku myszy onmouseup- puszczenie przycisku myszy onmousemove – poruszenie myszą onmouseover – wejście kursorem w obszar obiektu onmouseout – opuszczenie obiektu Atrybuty zdarzeń myszy w obiekcie Event: clientX,clientY – położenie kursora na obiekcie screenX,screenY – położenie kursora na ekranie button – numer przycisku myszy
Zdarzenia myszy - przykład <html> <head><title>Myszka</title></head> <script language="JavaScript"> function Przesun() { if (event.button==1) document.getElementById('bohater').style.left=event.clientX; document.getElementById('bohater').style.top=event.clientY; } document.onmousedown=Przesun; </script> <body> <img id="bohater" style="position:absolute; left:100px; top:100px; background-color:yellow" src="bohater.gif"> </body> </html>
Zdarzenia klawiatury keyCode – kod klawisza Zdarzenia klawiatury: onkeypress – naciśnięcie klawisza onkeydown – wciśnięcie klawisza onkeyup – puszczenie klawisza Atrybuty zdarzeń myszy w obiekcie Event: keyCode – kod klawisza
Zdarzenia klawiatury - przykłady <html> <head><title>Gra</title></head> <script language="JavaScript"> function Przesun() { switch(event.keyCode) case 40: y+=5; break; case 38: y-=5; break; case 39: x+=5; break; case 37: x-=5; break; } document.getElementById('bohater').style.left=x; document.getElementById('bohater').style.top=y; var x=100,y=100; document.onkeydown=Przesun; </script> <body> <img id="bohater" style="position:absolute; left:100px; top:100px; background-color:yellow" src="bohater.gif"> </body> </html>
Obiekt Form Właściwości: action method target Metody: submit() reset() <html> <head> <title>Objętości brył</title> <script type="text/javascript"> function SprawdzFormularz() { if (document.getElementsByName('nazwisko')[0].value.length<2) {alert('Zbyt krótkie nazwisko'); return false;} if (document.getElementsByName('wiek')[0].value<18) {alert('Za niski wiek'); return false;} return true; } </script> </head> <body> <form id="form1" action="baza.php" method="post" onsubmit="return SprawdzFormularz();"> Nazwisko <input name="nazwisko" type="text" /><br /> Wiek <input name="wiek" type="text" /><br /> <input type="submit" value="Dodaj" /> </form> </body> </html> Właściwości: action method target Metody: submit() reset() Zdarzenia: onSubmit onReset <a href="javascript:form1.submit();”>Dodaj</a>
Obiekt Input Właściwości: value size maxLength type readOnly <html> <head><title>Klawiatura</title></head> <script language="JavaScript"> function Sprawdz() { var znak= String.fromCharCode(event.keyCode); if (znak>='0' && znak<='9') return true; else return false; } </script> <body> <input type="text" onkeypress="return Sprawdz()"> </body> </html> Zdarzenia: onBlur onChange onClick onFocus onKeyDown onKeyPress onKeyUp onSelect onSelectStart Metody: blur() click() focus() select()
Obiekt Select Właściwości: value selectedIndex size options[] Metody: <html> <head><title>Klawiatura</title></head> <script language="JavaScript"> function Pisz() { switch(document.getElementById('lista').selectedIndex) case 0: document.getElementById('opis').value="Warszawa to stolica Polski"; break; case 1: document.getElementById('opis').value="Paryż to stolica Francji"; break; case 2: document.getElementById('opis').value="Berlin to stolica Niemiec"; break; } </script> <body> <form> <select id="lista" onChange="Pisz()"> <option>Warszawa</option> <option>Paryż</option> <option>Berlin</option> </select> <br /> <textarea id="opis"></textarea> </form> </body> </html> Właściwości: value selectedIndex size options[] Metody: add() blur() focus() remove() Zdarzenia onBlur onFocus onChange onClick
Obiekt HtmlElement Właściwości: style innerHTML innerText attributes[] childNodes[] <html> <head><title>Klawiatura</title></head> <script language="JavaScript"> function Pisz() { switch(document.getElementById('lista').selectedIndex) case 0: document.getElementById('opis').innerHTML="<b>Warszawa</b> to stolica Polski"; break; case 1: document.getElementById('opis').innerHTML="<b>Paryż</b> to stolica Francji"; case 2: document.getElementById('opis').innerHTML="<b>Berlin</b> to stolica Niemiec"; } </script> <body> <form> <select id="lista" onChange="Pisz()"> <option>Warszawa</option> <option>Paryż</option> <option>Berlin</option> </select> <br /> <div id="opis" style="background:yellow; width:200; height:30" /> </form> </body> </html> Metody appendChild() insertBefore() removeChild() replaceChild() hasChildNodes()
Obiekt HtmlElement <html> <head><title>Klawiatura</title></head> <script language="JavaScript"> function Dopisz() { var wiersz=document.createElement('tr'); var komorka1=document.createElement('td'); var komorka2=document.createElement('td'); var los=Math.round(Math.random()*100); komorka1.innerHTML=los; komorka2.innerHTML=los*los; wiersz.appendChild(komorka1); wiersz.appendChild(komorka2); tab1.appendChild(wiersz); } </script> <body> <input type="button" value="Losuj" onclick="Dopisz();" /> <table border="1" cellspacing="0"> <tbody id="tab1"> <tr><td>x</td><td>x<sup>2</sup></td></tr> </tbody></table> </body> </html>
Wyrażenia regularne var wyrazenie = /[a-z]*/g var wyrazenie = new RegExp("[a-z]*","g") Symbol Opis Przykład Ciągi zgodne Ciągi niezgodne ^ Początek ciagu ^kot kot, kotka, kotwa pies, pokot $ Koniec ciągu $a Ania, kotka Jan, kot . Jeden dowolny znak .asia Kasia,Basia Ela, Joasia […] Jeden z wymie- nionych znaków k[oa]t Z[0-5] kot,kat Z2,Z4 kit, koat, kotek Zx,Z9 [^…] Jeden z niewymienionych k[^oa]t kit,ket kat, kot, kotek […|...] Jeden z ciągów [B||Jo|Mich] Basia, Michasia Kasia, Ela ? Zero lub jeden znak list?owy lisowy, listowy listy, lisa + Jeden lub wiele znaków [A-Z][a-z]+ Joanna, Kamil anna, 123, kot * Zero lub wiele znaków ko*t kt,kot,koooot lot,gyy {n} Dokładnie n znaków [0-9]{2}-[0-9]{7} 32-6034111 32-603, 997 {n,} Co najmniej n znaków [A-Z][a-z]{3,} Janek,Ania Ola, Ela {n,m} Pomiędzy n i m znaków [0-9]{2,4} 12, 432, 4223 4, 12345 \d Cyfra \d{3} 123, 223 A21, 1234 \D Znak niebędący cyfrą \D+ Asad, ada Sdd1, 123 \w Litera, cyfra, _ \w{3} A12,123, 1_2 1+3 \W Znak niebędący literą, cyfrą, _ \W{3} +!!, --- Ala, 123 \s Spacja, tabulacja, nowa linia Jan\sKowalski Jan Kowalski Jan-Kowalski \S Każdy znak niebędący spacją, tabulacją i nl \S+ Jan, 1234, Jaks (…) Blok znaków ([A-Z][a-z]+)(-[A- Z][a-z]+)* Kowalski, Kowalski-Nowak Kow2, Kowalski—Nowak Modyfikatory: g – wszystkie fragmenty i – ignoruj wielkość znaków \. \* \ / \\ \? \: \^ \+ \= \|
Metody klasy RegExp Metoda test() Metoda replace() Metoda match() var tekst = "^80120102256$"; var wyrazenie = /\d{11}/; if (wyrazenie.test(tekst)) { alert(‘PESEL poprawny') } else { alert(‘PESEL nieporawny'); } var tekst = "Ala ma kota."; document.write(tekst + "<br />"); var wyrazenie = /ma/g document.write(tekst.replace(wyrazenie,"posiada")); Metoda match() var tekst = "Mój pesel to 80120102256 a twój to 80120102256."; var wyrazenie = /\d{11}/g; var a = tekst.match(wyrazenie); if (a) for (x=0; x<a.length; x++) document.write(a[x]+"<br />");
JQuery Biblioteka JS niezależna od przeglądarki Biblioteka open source Maszyna selekcji elementów niezależna od przeglądarki Modyfikacja dokumentu DOM Możliwość wykorzystania selektrów CSS Biblioteka oparta o zdarzenia Umożliwia uzyskiwanie efektów i animacji Wspiera AJAX
Konfiguracja Pobranie biblioteki ze strony http://jquery.com/download Dołączenie biblioteki do strony <script type="text/javascript" src="jquery.js"></script>
Definiowanie zdarzeń <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(Zarejestruj); function Zarejestruj() { $("a").click(Przywitaj); } function Przywitaj() alert("Dzień dobry"); </script> </head> <body> <a href="">Przywitaj</a> </body> </html>
Funkcja anonimowa <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Dzień dobry!"); }); </script> </head> <body> <a href="">Przywitaj</a> </body> Funkcja anonimowa
Selektory CSS <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){$("p.wazny").css("background-color","Yellow");}); </script> </head> <body> <p>Akapit 1</p> <p class="wazny">Akapit 2</p> <p class="wazny">Akapit 3</p> </body> </html>
Dodawanie elementów <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ for (i=1;i<=10;i++) $("#lista").append("<li>"+i+"</li>"); }); </script> </head> <body> <ul id="lista"> </ul> </body> </html>
Efekty $(document).ready() <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#przycisk").click(function(){ $("#napis").fadeOut(3000); }); </script> </head> <body> <input type="button" id="przycisk" value="Start" /> <div id="napis">Przykładowy efekt</div> </body> </html> $(document).ready()
Animacja <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#przycisk").click(function(){ $("#napis").animate({left:'+=100px'}); }); </script> </head> <body> <input type="button" id="przycisk" value="Start" /> <div id="napis" style="position:absolute;left:200px">Przykładowy efekt</div> </body> </html>
Callback Callback <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#przycisk").click(function(){ $("#napis").animate({left:'+=100px'},"slow",function(){$("#napis").hide();}); }); </script> </head> <body> <input type="button" id="przycisk" value="Start" /> <div id="napis" style="position:absolute;left:200px">Przykładowy efekt</div> </body> </html> Callback
JSON JavaScript Object Notation Format wymiany danych { "dane" : { "uzytkownik" : [ { "imie" : "Jan", "nazwisko" : "Kowalski" }, "imie" : "Piotr", "nazwisko" : "Nowak" }] } }
LITERATURA http://www.w3schools.com/js/ http://www.w3schools.com/jquery http://www.poradnik-webmastera.com/kursy/javascript/
KONIEC