Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Technologie internetowe Wykład 4 Skrypty klienckie JavaScript.

Podobne prezentacje


Prezentacja na temat: "Technologie internetowe Wykład 4 Skrypty klienckie JavaScript."— Zapis prezentacji:

1 Technologie internetowe Wykład 4 Skrypty klienckie JavaScript

2 Skrypty klienckie 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 Programy osadzone w kodzie HTML

3 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

4 Osadzanie JavaScript Bezpośrednio w znaczniku HTML, w atrybucie definiującym zdarzenie.

5 Osadzanie JavaScript W nagłówku strony. Umieszczamy w nim własne definicje funkcji. Przykład function Moja() { alert("Hello”); }

6 Osadzanie JavaScript W ciele strony. Możemy z jego pomocą dynamicznie generować zawartość. Przykład for (i=1;i<=7;i++) document.write(i+’ ’);

7 Osadzanie JavaScript Dołączanie zewnętrznego pliku skryptowego. Uwaga ! W pliku.js znajduje się tylko kod JS, bez znaczników HTML. function Suma(a,b) { return Number(a)+Number(b); } funkcje.js

8 Operatory Arytmetyczne: +,-,*,/,++,-=,+=,*=,/= Porównań: ==,!=,, = Logiczne: &&, ||, !

9 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

10 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* ; // deklaracja niejawna zmiennej, zmienna liczbowa

11 Wartość globalne NaN – wynik nie jest liczbą Infinity – nieskończoność undefined – wartość niezdefiniowana

12 Niejawne konwersje var a='2'; var b='3'; document.write(a+b); document.write(' '); document.write(a*b); 23 6

13 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*/};}

14 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

15 Funkcje globalne - wykorzystanie var s=1; eval('for (i=1;i<=5;i++) s*=i;'); document.write(s); document.write(eval('5*3+2')); var a=0; var b=1/a; document.write(b+' '); if (isFinite(b)) document.write(b); else document.write('nieskończoność'); Infinity nieskończoność document.write(parseFloat(‘Hello’)); document.write(parseFloat(‘123.3ala’)); document.write(parseFloat(‘123’)); true false document.write(isNaN(‘Hello’)); document.write(isNaN(‘123’)); document.write(isNaN(123)); NaN document.write(parseInt(‘Hello’)); document.write(parseInt(‘123.3ala’)); document.write(parseInt(true)); NaN 123 NaN document.write(Number(‘Hello’)); document.write(Number(‘123’)); document.write(Number(ture)); NaN 123 1

16 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();

17 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);

18 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);

19 Funkcja ze zmienną liczbą argumentów 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)); 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));

20 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ść

21 Klasa Number - przykłady var a= ; 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); e+3 1.2e e+308 5e-324

22 Klasa Math 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 a n max(x 1,x 2,…,x n ) 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))

23 Klasa String Właściwości: length – długość łańcucha Metody: charAt(i) – znak z pozycji (pierwszy znak i=0) concat(s 1,s 2,…,s n ) – 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(s 1,s 2 ) – podmień podłańcuch s 1 na s 2 slice(i 1,i 2 ) – wytnij podłańcuch od i 1 do i 2 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

24 Klasa String - przykłady var str="Hello world!" document.write(str.indexOf("Hello") + " ") document.write(str.indexOf("World") + " ") document.write(str.indexOf("world")) document.write(str.charAt(str.length-1)); 0 6 d

25 Klasa Date var d = new Date() document.write(d.toLocaleString())

26 Klasa Array 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 + " ") document.write(arr.sort()) Jani,Hege,Stale,Kai Jim,Borge,Tove Borge,Hege,Jani,Kai Jim,Stale,Tove Metody: concat – połącz pop – ściągnij z góry push – wstaw na górę reverse – odwróć kolejność sort - posortuj

27 Document Obiect Model Opisuje hierarchiczną strukturę obiektów tworzących stronę HTML Window Frame Document Location History Navigatior Link Image Anchor Form Textarea Text Hidden Submit Reset Radio Checkbox Select Option

28 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 !’;

29 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

30 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');

31 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)

32 Zegar window.setInterval(‘window.status=Date().toLocaleString()’,1000); Zegar window.setTimeout("alert('Na co czekasz?')",10000); Obiekt Window - przykłady

33 Animacja var y=100; function Przesun() { y+=5; document.getElementById('bohater').style.top=y; } window.setInterval('Przesun()',500); Animacja var y=100; function Przesun() { y+=5; document.getElementById('bohater').style.top=y; } window.setInterval('Przesun()',500);

34 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);

35 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’); }

36 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

37 Obiekt Location 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’);

38 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

39 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’;

40 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

41 Obiekt Document for (i=1;i<=7;i++) document.write(' Tekst '); Jak się masz if (Math.random()>0.5) document.getElementById('napis').style.color='red'; else document.getElementById('napis').style.color='green'; var pola=document.getElementsByTagName(‘input'); for (i=0;i

42 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

43 Zdarzenia myszy - przykład Myszka function Przesun() { if (event.button==1) { document.getElementById('bohater').style.left=event.clientX; document.getElementById('bohater').style.top=event.clientY; } document.onmousedown=Przesun; Myszka function Przesun() { if (event.button==1) { document.getElementById('bohater').style.left=event.clientX; document.getElementById('bohater').style.top=event.clientY; } document.onmousedown=Przesun;

44 Zdarzenia klawiatury Zdarzenia klawiatury: onkeypress – naciśnięcie klawisza onkeydown – wciśnięcie klawisza onkeyup – puszczenie klawisza Atrybuty zdarzeń myszy w obiekcie Event: keyCode – kod klawisza

45 Zdarzenia klawiatury - przykłady Gra 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;

46 Obiekt Form Właściwości: action method target Metody: submit() reset() Zdarzenia: onSubmit onReset Objętości brył 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; }

Nazwisko Wiek Dodaj

47 Obiekt Input Właściwości: value size maxLength type readOnly Metody: blur() click() focus() select() Klawiatura function Sprawdz() { var znak= String.fromCharCode(event.keyCode); if (znak>='0' && znak<='9') return true; else return false; } Zdarzenia: onBlur onChange onClick onFocus onKeyDown onKeyPress onKeyUp onSelect onSelectStart

48 Obiekt Select Właściwości: value selectedIndex size options[] Metody: add() blur() focus() remove() Zdarzenia onBlur onFocus onChange onClick Klawiatura 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; } Warszawa Paryż Berlin

49 Obiekt HtmlElement Właściwości: style innerHTML innerText attributes[] childNodes[] Metody appendChild() insertBefore() removeChild() replaceChild() hasChildNodes() Klawiatura function Pisz() { switch(document.getElementById('lista').selectedIndex) { case 0: document.getElementById('opis').innerHTML=" Warszawa to stolica Polski"; break; case 1: document.getElementById('opis').innerHTML=" Paryż to stolica Francji"; break; case 2: document.getElementById('opis').innerHTML=" Berlin to stolica Niemiec"; break; } Warszawa Paryż Berlin

50 Obiekt HtmlElement Klawiatura 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); } x x 2

51 Wyrażenia regularne var wyrazenie = /[a-z]*/g var wyrazenie = new RegExp("[a-z]*","g") Modyfikatory: g – wszystkie fragmenty i – ignoruj wielkość znaków SymbolOpisPrzykładCiągi zgodneCiągi niezgodne ^Początek ciagu^kotkot, kotka, kotwapies, pokot $Koniec ciągu$aAnia, kotkaJan, kot.Jeden dowolny znak.asiaKasia,BasiaEla, 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]tkit,ketkat, kot, kotek […|...]Jeden z ciągów[B||Jo|Mich]Basia, MichasiaKasia, Ela ?Zero lub jeden znaklist?owylisowy, listowylisty, lisa + Jeden lub wiele znaków [A-Z][a-z]+Joanna, Kamilanna, 123, kot *Zero lub wiele znakówko*tkt,kot,kooootlot,gyy {n}Dokładnie n znaków[0-9]{2}-[0-9]{7} , 997 {n,}Co najmniej n znaków[A-Z][a-z]{3,}Janek,AniaOla, Ela {n,m} Pomiędzy n i m znaków [0-9]{2,4}12, 432, 42234, \dCyfra\d{3}123, 223A21, 1234 \DZnak niebędący cyfrą\D+Asad, adaSdd1, 123 \wLitera, cyfra, _\w{3}A12,123, 1_21+3 \W Znak niebędący literą, cyfrą, _ \W{3}+!!, ---Ala, 123 \s Spacja, tabulacja, nowa linia Jan\sKowalskiJan KowalskiJan-Kowalski \S Każdy znak niebędący spacją, tabulacją i nl \S+Jan, 1234, JaksJan Kowalski (…)Blok znaków([A-Z][a-z]+)(-[A- Z][a-z]+)* Kowalski, Kowalski-Nowak Kow2, Kowalski—Nowak \.\*\ /\\\?\:\^\+\\\=\|

52 Metody klasy RegExp Metoda test() var tekst = "^ $"; var wyrazenie = /\d{11}/; if (wyrazenie.test(tekst)) { alert(‘PESEL poprawny') } else { alert(‘PESEL nieporawny'); } Metoda replace() var tekst = "Ala ma kota."; document.write(tekst + " "); var wyrazenie = /ma/g document.write(tekst.replace(wyrazenie,"posiada")); Metoda match() var tekst = "Mój pesel to a twój to "; var wyrazenie = /\d{11}/g; var a = tekst.match(wyrazenie); if (a) for (x=0; x

53 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

54 Konfiguracja Pobranie biblioteki ze strony Dołączenie biblioteki do strony

55 Definiowanie zdarzeń $(document).ready(Zarejestruj); function Zarejestruj() { $("a").click(Przywitaj); } function Przywitaj() { alert("Dzień dobry"); } Przywitaj

56 Funkcja anonimowa $(document).ready(function() { $("a").click(function() { alert("Dzień dobry!"); }); Przywitaj Funkcja anonimowa

57 Selektory CSS $(document).ready(function(){$("p.wazny").css("background-color","Yellow");}); Akapit 1 Akapit 2 Akapit 3

58 Dodawanie elementów $(document).ready(function(){ for (i=1;i<=10;i++) $("#lista").append(" "+i+" "); });

59 Efekty $(function(){ $("#przycisk").click(function(){ $("#napis").fadeOut(3000); }); Przykładowy efekt $(document).ready()

60 Animacja $(function(){ $("#przycisk").click(function(){ $("#napis").animate({left:'+=100px'}); }); Przykładowy efekt

61 Callback $(function(){ $("#przycisk").click(function(){ $("#napis").animate({left:'+=100px'},"slow",function(){$("#napis"). hide();}); }); Przykładowy efekt Callback

62 JSON JavaScript Object Notation Format wymiany danych { "dane" : { "uzytkownik" : [ { "imie" : "Jan", "nazwisko" : "Kowalski" }, { "imie" : "Piotr", "nazwisko" : "Nowak" }] }

63 LITERATURA

64 KONIEC


Pobierz ppt "Technologie internetowe Wykład 4 Skrypty klienckie JavaScript."

Podobne prezentacje


Reklamy Google