Prezentacja programu PowerPoint
Download
Report
Transcript Prezentacja programu PowerPoint
Programowanie obiektowe
Wykład 2
Definicja i wykonanie funkcji
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:
<SCRIPT> </SCRIPT> 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.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function srednia(a, b){
x=(a+b)/2;
return x;
}
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
//teraz dwukrotne wykonanie funkcji
document.write(srednia(5, 9) ,"<BR>");
document.write(srednia(3.6, 3.8));
</SCRIPT>
</BODY></HTML>
Przykład 1
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
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).
Funkcja z reguły zwraca jedną, elementarną
wartość.
Możliwy jest zwrot wielu wartości, trzeba
wykorzytać tablicę.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function tab2(a,b){
var x=new Array( )
x[1]=(a+b)/2;
x[2]=(a-b)/2;
return x;
}
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
//teraz wykonanie funkcji
definicja
działania
funkcji
a=tab2(10, 8); //wykonanie funkcji, wynik przechowaj w zmiennej a
document.write(a[1],"<BR>");
document.write(a[2]);
</SCRIPT>
</BODY></HTML>
Przykład 2
Tablice – przypomnienie…
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 wielowymiarowe
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:
Tablica = [ ];
Tablica[0] = [1, 183, 7];
Tablica[1] = [2, 173, 17];
Tablica[2] = [3, 170, 23];
Przykład3
Argument tekstowy funkcji
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function dlugosc(a){
x=a.length
return x;
}
</SCRIPT>
</HEAD><BODY >
<SCRIPT LANGUAGE="JavaScript">
document.write(dlugosc("Wschodnioeuropejska"),"<BR>");
</SCRIPT>
</BODY></HTML>
Tak jak Math jest obiektem wbudowanym, jest nim też
String – posiada metodę length
Funkcje mogą być zapisane w osobnym pliku,
np. plik.js
Wówczas należy w dokumencie HTML w sekcji HEAD
umieścić zapis:
<SCRIPT type="text/javascript" src="./plik.js" ></SCRIPT>
plik z funkcjami
(w bieżącym folderze)
Plik funkcje.js
function dlugosc(a){
x=a.length
return x;}
/* i inne funkcje */
przykład
Plik index.html
<HTML><HEAD>
<SCRIPT type="text/javascript" src="./funkcje.js" ></SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write( dlugosc('Wschodnioeuropejska'),"<BR>");
</SCRIPT>
</BODY></HTML>
przykład
Interakcyjne wykonywanie funkcji
Można wykonać funkcję w reakcji na zdarzenie, np. umieszczając ją w
atrybucie onclick dowolnego elementu (znacznika):
<HTML><HEAD>
<SCRIPT language="JavaScript">
function nacisnij(x )
{alert(x); }
</SCRIPT>
</HEAD><BODY>
<INPUT type="button" value="OK" onclick="nacisnij( 'Hello');">
</BODY> </HTML>
Przykład 5
To samo, lecz z przekazaniem danych do funkcji
<HTML><HEAD>
<SCRIPT language="JavaScript">
function nacisnij(a)
użycie troszkę
bardziej
{ document.write(a); }
skomplikowane
</SCRIPT>
</HEAD><BODY>
<FORM>
<INPUT type="text" id="in1">
<INPUT type="submit" value="OK" onclick="nacisnij(in1.value);">
</FORM>
</BODY> </HTML>
Przykład 6
obiekt o identyfikatorze in1 ma
właściwość value, która zawiera
wpisaną w pole tekstowe wartość
Jednak jest tu pewna pułapka, ze względu na tekstowy typ danych
<HTML><HEAD>
<SCRIPT language="JavaScript">
function nacisnij(a,b)
{ alert(a+b); }
</SCRIPT>
</HEAD><BODY>
<FORM id="f1">
<INPUT type="text" id="in1">
<INPUT type="text" id="in2">
<INPUT type="submit" value="OK" onclick="nacisnij(in1.value,in2.value);">
</FORM>
</BODY> </HTML>
Odbędzie się "sumowanie" tekstów, czyli
tzw. konkatenacja
"2"+"2"
22
Przykład 7
Ratunek – konwersja tekstów na liczbę
<HTML><HEAD>
<SCRIPT language="JavaScript">
function nacisnij(a,b)
{ document.write(Number(a)+Number(b)); }
</SCRIPT>
</HEAD><BODY>
<FORM>
<INPUT type="text" id="in1">
<INPUT type="text" id="in2">
<INPUT type="submit" value="OK" onclick="nacisnij(in1.value,in2.value);">
</FORM>
</BODY> </HTML>
2+2
4
obiekt document ma metodę Number – konwersja typu
tekstowego na typ liczbowy (jeśli się to da zrobić!)
Zatem trzeba uważać na typ danych, szczególnie przy dodawaniu!!
Obiekt Date
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.
Tworzymy obiekty typu Date….
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:
Metody typu "get" - pobierz
getDate()
getDay()
getHours()
pobiera dzień miesiąca dla ustalonej daty (liczba całkowita z
zakresu 1-31)
pobiera dzień tygodnia dla ustalonej daty (liczba całkowita, od
0=Niedziela do 6=Sobota)
getTime()
pobiera godzinę dla ustalonej daty (liczba całkowita z zakresu 023)
pobiera minuty dla ustalonej daty (liczba całkowita z zakresu 059)
pobiera miesiąc dla ustalonej daty (liczba całkowita z zakresu
0..11)
pobiera sekundy dla bieżącego czasu (liczba całkowita z zakresu
0-59)
oblicza liczbę milisekund od 1 stycznia 1970 00:00:00
getFullYear()
pobiera rok dla ustalonej daty (liczba 4-cyfrowa)
getMinutes()
getMonth()
getSeconds()
getMiliseconds() wyświetla liczbę milisekund od 1/1/70 00:00:00 do podanej
daty
Metody typu "set" - ustaw
setDate()
setHours()
setMinutes()
setMonth()
setSeconds()
setTime()
setFullYear()
ustawia dzień miesiąca dla aktualnego obiektu Date
ustawia godzinę dla aktualnego obiektu Date
ustawia minuty dla aktualnego obiektu Date
ustawia miesiąc dla aktualnego obiektu Date
ustawia liczbę sekund dla aktualnego obiektu Date
ustawia datę i godzinę dla aktualnego obiektu Date, w
milisekundach od 1/1/70 00:00:00
ustawia rok dla aktualnego obiektu Date (rok jest liczbą
całkowitą większą od 1900)
Jak te metody wykorzystujemy? Przykład
<SCRIPT language="JavaScript">
var data1 = new Date()
//mamy obiekt daty dzisiejszej
document.write("Dziś jest:",data1.getDate(),"<BR>")
document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay(),"<BR>")
//zmieniamy dzień
data1.setDate(31)
document.write("Zmiana na 31:", data1.getDate(),"<BR>")
document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay(),"<BR>")
</SCRIPT>
A co będzie gdy wstawimy dzień 32?
<SCRIPT language="JavaScript">
var data1 = new Date()
//mamy obiekt daty dzisiejszej
document.write("Dziś jest:",data1.getDate(),"<BR>")
document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay(),"<BR>")
//zmieniamy dzień
data1.setDate(32)
document.write("Zmiana na 32:", data1.getDate(),"<BR>")
document.write("Dzień tygodnia (0=N do 6=Sob):",data1.getDay(),"<BR>")
</SCRIPT>
Czyli
• metody "get" służą do pobierania
wartości z pól obiektu,
• metody "set" służą do nadawania
wartości polom obiektu
Inny przykład
<SCRIPT language="JavaScript">
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("<BR>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("<BR>Inna data to: ", inna.getDate( ),"-", inna.getMonth()+1,"", inna.getFullYear( ));
</SCRIPT>
Przykład
Ile milisekund upłynęło od 1.1.1970?
<SCRIPT language="JavaScript">
var t1=new Date( )
x=t1.getTime ();
document.writeln("Czas milisekundowy:",x,"<BR>");
x/=1000
x/=60
x/=60
x/=24
x/=365
document.writeln("Od 1970 minęło ok. : ",x," lat);
</SCRIPT>
Sterowanie czasowe (prosty stoper)
<HTML><HEAD>
<SCRIPT language="JavaScript">
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);
}
</SCRIPT></HEAD>
<BODY style="font-size:30px">
<P id="T1"></P>
<SCRIPT language="JavaScript">
stoper( ) //uruchomienie stopera
</SCRIPT>
</BODY>
</HTML>
nauczymy się
niebawem dostępu
do elementów
wizualizacyjnych i
manewrowania nimi
przykład