Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy.

Prezentacja na temat: "Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy."— Zapis prezentacji:

1 Wykład 2 Programowanie obiektowe

2 Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy definiować metody obiektowe.. Zwykle umieszczamy je między znacznikami: w sekcji HEAD dokumentu HTML. Pozwala to na załadowanie ich na samym początku, aby dowolny skrypt wykorzystujący funkcję w jodzie strony na stronie mógł od razu być wykonywany przez przeglądarkę. Funkcje są definiowane przez określenie ich nazwy, argumentów i sposobu działania. Definicja i wykonanie funkcji

3 function srednia(a, b){ x=(a+b)/2; return x; } //teraz dwukrotne wykonanie funkcji document.write(srednia(5, 9)," "); document.write(srednia(3.6, 3.8)); Przykład 1

4 W ramach skryptu w bloku HEAD można oczywiście zdefiniować wiele funkcji, muszą mieć unikalne nazwy. Funkcje mogą mieć wiele argumentów (różnych typów). To co funkcja ma zrobić po wywołaniu, jest zdefiniowane między nawiasami { }. Po słowie kluczowym return określamy co ma zwrócić wykonanie funkcji (tu:obliczoną wartość x), stąd w dalszej części skryptu zwróconą wartość funkcji wyświetlamy z wykorzystaniem document.write

5 Funkcja z reguły zwraca jedną, elementarną wartość. Możliwy jest zwrot wielu wartości, trzeba wykorzytać tablicę.

6 function tab2(a,b){ var x=new Array( ) x[1]=(a+b)/2; x[2]=(a-b)/2; return x; } //teraz wykonanie funkcji a= tab2 (10, 8 ) ; //wykonanie funkcji, wynik przechowaj w zmiennej a document.write(a[1]," "); document.write(a[2]); definicja działania funkcji Przykład 2

7 Tworzenie pustej tablicy: nazwaTablicy = new Array() lub nazwaTablicy = [ ] Ustalenie rozmiaru tablicy: Tablica = new Array(10) Możemy też utworzyć tablicę, od razu wstawiając do niej wartości: NazwaTablicy = new Array("Marek","Ania","Agnieszka") lub NazwaTablicy = ["Marek","Ania","Agnieszka"] Tab_licz=[1,2,3,4,5,6,7,8,9,10] Tablice – przypomnienie…

8 Możemy też tworzyć tablice wielowymiarowe - czyli tablice w tablicach. Możemy wtedy stworzyć tablicę, w której w każdym elemencie będzie inna tablica przykładowo: Tablice wielowymiarowe Tablica = [ ]; Tablica[0] = [1, 183, 7]; Tablica[1] = [2, 173, 17]; Tablica[2] = [3, 170, 23]; Przykład3

9 function dlugosc(a){ x=a.length return x; } document.write(dlugosc("Wschodnioeuropejska")," "); Argument tekstowy funkcji Tak jak Math jest obiektem wbudowanym, jest nim też String – posiada metodę length

10 Funkcje mogą być zapisane w osobnym pliku, np. plik.js Wówczas należy w dokumencie HTML w sekcji HEAD umieścić zapis: plik z funkcjami (w bieżącym folderze)

11 document.write( dlugosc('Wschodnioeuropejska')," "); function dlugosc(a){ x=a.length return x;} /* i inne funkcje */ Plik funkcje.js Plik index.html przykład

12 Można wykonać funkcję w reakcji na zdarzenie, np. umieszczając ją w atrybucie onclick dowolnego elementu (znacznika): function nacisnij(x ) {alert(x); } Interakcyjne wykonywanie funkcji Przykład 5

13 function nacisnij(a) { document.write(a); } To samo, lecz z przekazaniem danych do funkcji obiekt o identyfikatorze in1 ma właściwość value, która zawiera wpisaną w pole tekstowe wartość Przykład 6 użycie troszkę bardziej skomplikowane

14 Jednak jest tu pewna pułapka, ze względu na tekstowy typ danych function nacisnij(a,b) { alert(a+b); } Odbędzie się "sumowanie" tekstów, czyli tzw. konkatenacja 22"2"+"2" Przykład 7

15 Ratunek – konwersja tekstów na liczbę function nacisnij(a,b) { document.write(Number(a)+Number(b)); } 42+2 Zatem trzeba uważać na typ danych, szczególnie przy dodawaniu!! obiekt document ma metodę Number – konwersja typu tekstowego na typ liczbowy (jeśli się to da zrobić!)

16 Wbudowany typ obiektowy Date (podobnie jak i Math) posiada pewne umiejętności - może operować z datą i czasem (lata, dni, godziny, minuty, sekundy i… dokładniej). Poznamy sposoby użycia obiektów klasy Date Klasa już jest zdefiniowana Zasada: JavaScript przechowuje daty jako liczby milisekund, które upłynęły od 1 stycznia 1970, godz. 00:00:00. Obiekt Date

17 var zmienna1 = new Date( ) // jest zwracana bieżąca data var zmienna2 = new Date(r, m, d,g, min, sek, milisekundy) // dowolna data i czas Właściwości klasa Date być może ma (rok, miesiąc, dzień itd.), ale nie ma do nich innego dostępu jak tylko wykorzystując metody. Oto te metody: Tworzymy obiekty typu Date….

18 getDate() pobiera dzień miesiąca dla ustalonej daty (liczba całkowita z zakresu 1-31) getDay() pobiera dzień tygodnia dla ustalonej daty (liczba całkowita, od 0=Niedziela do 6=Sobota) getHours() pobiera godzinę dla ustalonej daty (liczba całkowita z zakresu 0- 23) getMinutes() pobiera minuty dla ustalonej daty (liczba całkowita z zakresu 0- 59) getMonth() pobiera miesiąc dla ustalonej daty (liczba całkowita z zakresu 0..11) getSeconds() pobiera sekundy dla bieżącego czasu (liczba całkowita z zakresu 0-59) getTime()oblicza liczbę milisekund od 1 stycznia 1970 00:00:00 getFullYear()pobiera rok dla ustalonej daty (liczba 4-cyfrowa) getMiliseconds()wyświetla liczbę milisekund od 1/1/70 00:00:00 do podanej daty Metody typu "get" - pobierz

19 setDate()ustawia dzień miesiąca dla aktualnego obiektu Date setHours()ustawia godzinę dla aktualnego obiektu Date setMinutes()ustawia minuty dla aktualnego obiektu Date setMonth()ustawia miesiąc dla aktualnego obiektu Date setSeconds()ustawia liczbę sekund dla aktualnego obiektu Date setTime() ustawia datę i godzinę dla aktualnego obiektu Date, w milisekundach od 1/1/70 00:00:00 setFullYear()ustawia rok dla aktualnego obiektu Date (rok jest liczbą całkowitą większą od 1900) Metody typu "set" - ustaw

20 Jak te metody wykorzystujemy? PrzykładPrzykład var data1 = new Date() //mamy obiekt daty dzisiejszej document.write("Dziś jest:",data1.getDate()," ") document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay()," ") //zmieniamy dzień data1.setDate(31) document.write("Zmiana na 31:", data1.getDate()," ") document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay()," ")

21 A co będzie gdy wstawimy dzień 32? var data1 = new Date() //mamy obiekt daty dzisiejszej document.write("Dziś jest:",data1.getDate()," ") document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay()," ") //zmieniamy dzień data1.setDate(32) document.write("Zmiana na 32:", data1.getDate()," ") document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay()," ")

22 Czyli metody "get" służą do pobierania wartości z pól obiektu, metody "set" służą do nadawania wartości polom obiektu

23 var t1=new Date( ) document.writeln("Czas aktualny: ",t1.getHours(),":",t1.getMinutes( ),":", t1.getSeconds()); var t2 = new Date(1981,11,13,0,0,0) ; //nowy obiekt – uwaga! miesiąc grudzień - 11 document.write(" Stara data to: ", t2.getDate(),"-",t2.getMonth( )+1,"-", t2.getFullYear()); document.write(" Był to dzień tygodnia: "+t2.getDay( )); var inna = new Date( ) ;//nowy obiekt Date inna.setFullYear(2013); inna.setDate(1); inna.setMonth(10);//listopad document.write(" Inna data to: ", inna.getDate( ),"-", inna.getMonth()+1,"- ", inna.getFullYear( )); Przykład Inny przykład

24 var t1=new Date( ) x=t1.getTime (); document.writeln("Czas milisekundowy:",x," "); x/=1000 x/=60 x/=24 x/=365 document.writeln("Od 1970 minęło ok. : ",x," lat); Ile milisekund upłynęło od 1.1.1970?

25 Sterowanie czasowe (prosty stoper) licznik=0;//początkowy licznik function stoper( ) { //wstaw aktualny licznik jako tekst elementu T1 document.getElementById('T1').innerHTML=licznik; //zwiększ licznik o 1 licznik++; // po 1 sekundzie jeszcze raz wykonaj funkcję stoper( ) t=setTimeout("stoper()",1000); } stoper( ) //uruchomienie stopera nauczymy się niebawem dostępu do elementów wizualizacyjnych i manewrowania nimi przykład