Podstawy programowania Podstawy programowania w jw języku JavaScript ęzyku JavaScript

(1)

Podstawy programowania Podstawy programowania w j

w języku JavaScript ęzyku JavaScript

Funkcje i programowanie sterowane zdarzeniami

Część trzecia

Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa.

Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne.

Roman Simiński

roman.siminski@us.edu.pl www.us.edu.pl/~siminski Autor

Kontakt

(2)

Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych

alert( "Tu okno powiadomie , naci nij OK" );ń ś alert( "Tu okno powiadomie , naci nij OK" );ń ś

Funkcja alert ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst

i przycisk OK, którym użytkownik zamyka okno.

(3)

Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych

if( confirm( "Naci nij OK aby poznać nasz ofert "ś ą ę ) ) document.write( "Zapraszamy do przegl du oferty"ą );

else

document.write( "Szkoda, mo e kiedy indziej"ż );

if( confirm( "Naci nij OK aby poznać nasz ofert "ś ą ę ) ) document.write( "Zapraszamy do przegl du oferty"ą );

else

document.write( "Szkoda, mo e kiedy indziej"ż );

Funkcja confirm ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst oraz przyciski OK i Cancel (Anuluj).

Rezultatem jest true gdy naciśnięto OK, false gdy naciśnięto Cancel.

(4)

Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych

var surferName = prompt( "Jak Ci mam nazywać:"ę , "" );

if( surferName != null && surferName != "" )

document.write( "Witaj " + surferName + "!" );

else

document.write( "Witaj nieznajomy!" );

else

Funkcja prompt ( tekstPodpowiedzi, tekstDomyślny ) wyprowadza okno wczytywania danych wyświetlające tekstPodpowiedzi oraz pole tekstowe o wartości domyślnej tekstDomyślny.

Rezultatem funkcji jest wprowadzony tekst po naciśnięciu przycisku OK,

wartość null po naciśnięciu przycisku Cancel (Anuluj).

(5)

Definiowanie funkcji Definiowanie funkcji

function nazwaFunkcji( parametr1, parametr2, ..., parametrN ) {

kod funkcji }

function nazwaFunkcji( parametr1, parametr2, ..., parametrN ) {

kod funkcji }

function powitanie() {

alert( "Witaj serferze :)" );

}

alert( "Witaj serferze :)" );

}

else

}

else

}

Proste funkcje bezparametrowe o charakterze procedur Proste funkcje bezparametrowe

o charakterze procedur

(6)

Wywoływanie funkcji Wywoływanie funkcji

Funkcje można wywoływać w zwykły sposób — podając nazwę i ewentualne parametry.

powitanie();

Bardzo często wywołanie funkcji jest wynikiem zaistnienia pewnego zdarzenia na stronie.

Funkcja wywoływana po zaistnieniu zdarzenia nazywana jest funkcją obsługi zdarzenia (ang. event handler).

Typowe — ale nie wszystkie — obsługiwane zdarzenia:

onclick, onload,

onmouseover,

onmouseout,

onunload.

(7)

Wywoływanie funkcji — obsługa onload Wywoływanie funkcji — obsługa onload

Funkcja obsługi zdarzenia onload jest wywoływana po kompletnym

załadowaniu strony (znacznik body), rysunku (znacznik img) lub ramki (znacznik frame).

<html>

<head>

else

}

</script>

</head>

</body>

</html>

<html>

<head>

else

}

</script>

</head>

</body>

</html>

(8)

Wywoływanie funkcji — obsługa onunload Wywoływanie funkcji — obsługa onunload

Funkcja obsługi zdarzenia onunload jest wywoływana natychmiast po akcji opuszczenia strony.

<html>

<head>

var surferName;

// . . .

function pozegnanie() {

alert( surferName + " pa, pa!" ) }

</script>

</head>

</body>

</html>

<html>

<head>

var surferName;

// . . .

</script>

</head>

</body>

</html>

(9)

Wywoływanie funkcji — obsługa onload i onunload Wywoływanie funkcji — obsługa onload i onunload

Teoretycznie to powinno działać — ale nie działa :(

<html>

<head>

var surferName = "";

surferName = prompt( "Jak Ci mam nazywać:"ę , "" );

else

}

</script>

</head>

</body>

</html>

<html>

<head>

var surferName = "";

surferName = prompt( "Jak Ci mam nazywać:"ę , "" );

else

}

</script>

</head>

</body>

</html>

(10)

Wywoływanie funkcji — obsługa onmouseover i onmouseout Wywoływanie funkcji — obsługa onmouseover i onmouseout

Wykorzystanie zdarzeń mouseover i mouseout:

<html>

<head>

function darkColor() {

document.bgColor='#9f9f9f';

}

function lightColor() {

document.bgColor='#ffffff';

}

</script>

</head>

<body>

Ten link jest wyj tkowyą </a>

</body>

</html>

<html>

<head>

function darkColor() {

}

function lightColor() {

}

</script>

</head>

<body>

</body>

</html>

(11)

Wywoływanie funkcji — obsługa onmouseover i onmouseout Wywoływanie funkcji — obsługa onmouseover i onmouseout

Mało roztropne wykorzystanie zdarzeń mouseover i mouseout:

<html>

<head>

function uwazaj() {

alert( "Je eli tam wejdziesz, Twoje ycie ju nie b dzie takie samo!"ż ż ż ę );

}

function zaluj() {

alert( "Je eli tam nie wejdziesz, b dziesz ałował!"ż ę ż );

}

</script>

</head>

<body>

</body>

</html>

<html>

<head>

function uwazaj() {

alert( "Je eli tam wejdziesz, Twoje ycie ju nie b dzie takie samo!"ż ż ż ę );

}

function zaluj() {

alert( "Je eli tam nie wejdziesz, b dziesz ałował!"ż ę ż );

}

</script>

</head>

<body>

</body>

</html>

(12)

Wywoływanie funkcji — obsługa onclick Wywoływanie funkcji — obsługa onclick

<html>

<head>

function info() {

alert( "A figa winko, nic tu nie zobaczysz!"ś );

}

</script>

</head>

<body>

</body>

</html>

<html>

<head>

function info() {

}

</script>

</head>

<body>

</body>

</html>

W przeglądarce użytkownicy zwykle

używają pojedynczego kliknięcia.

(13)

Wywoływanie funkcji — ondblclick Wywoływanie funkcji — ondblclick

Uwaga — zdarzenie click zawsze wystąpi przed dblclick.

<html>

<head>

function info() {

}

</script>

</head>

<body>

<p>Dla tego przycisku u yj podwójnego klikni cia:</p>ż ę

<input type="button" name="hl" value="Tylko dla dorosłych!"

ondblclick="info()" />

</body>

</html>

<html>

<head>

function info() {

}

</script>

</head>

<body>

<p>Dla tego przycisku u yj podwójnego klikni cia:</p>ż ę

<input type="button" name="hl" value="Tylko dla dorosłych!"

ondblclick="info()" />

</body>

</html>

(14)

Wywoływanie funkcji — obsługa onfocus i onblur Wywoływanie funkcji — obsługa onfocus i onblur

Czyli obsługa złapania i zgubienia „fokusa”:

<html>

<head>

function inColor() {

}

function outColor() {

}

</script>

</head>

<body>

</body>

</html>

<html>

<head>

function inColor() {

}

function outColor() {

}

</script>

</head>

<body>

</body>

</html>

(15)

Wywoływanie funkcji — obsługa onfocus i onblur Wywoływanie funkcji — obsługa onfocus i onblur

Wykorzystując onblur można np. weryfikować dane, tutaj jedynie ostrzeżenie:

<html>

<head>

function outInfo() {

alert( "Je eli u yłe innych liter ni du e, to masz problem."ż ż ś ż ż );

}

</script>

</head>

<body>

Napisz du ymi literami<br />ż

</body>

</html>

<html>

<head>

function outInfo() {

alert( "Je eli u yłe innych liter ni du e, to masz problem."ż ż ś ż ż );

}

</script>

</head>

<body>

Napisz du ymi literami<br />ż

</body>

</html>

(16)

Zdarzenia sterowane czasem — setTimeout i clearTimeout Zdarzenia sterowane czasem — setTimeout i clearTimeout

JavaScript pozwala na asynchroniczne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje:

setTimeout() —

wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu;

clearTimeout()

— anulowanie ustawień określonych funkcją

setTimeout()

.

Funkcja

setTimeout()

wykonuje przypisaną jej akcję tylko raz. Forma wywołania:

var timeObject = setTimeout( "kod w j zyku JavaScript", czas_w_milisekundach );ę var timeObject = setTimeout( "kod w j zyku JavaScript", czas_w_milisekundach );ę

Funkcja

clearTimeout()

zeruje ostawienia dla obiektu będącego rezultatem funkcji

setTimeout()

:

clearTimeout( timeObject );

(17)

Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 1 Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 1

<html>

<head>

function odliczanie() {

var timeoutObject = setTimeout( 'alert( "Czas min ł" )'ą , 5000 );

}

</script>

</head>

<p>Masz 5 sekund na podj cie decyzji!</p>ę </body>

</html>

<html>

<head>

function odliczanie() {

var timeoutObject = setTimeout( 'alert( "Czas min ł" )'ą , 5000 );

}

</script>

</head>

<p>Masz 5 sekund na podj cie decyzji!</p>ę </body>

</html>

(18)

Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 2 Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 2

var timeoutObject;

var sek = 0;

function start() {

document.getElementById( "txt" ).value = sek++;

timeoutObject = setTimeout( "start()", 1000 );

}

function stop() {

clearTimeout( timeoutObject );

}

function zeruj() {

document.getElementById( "txt" ).value = sek = 0;

}

</script>

. . .

<h1>Głupiutki stoper</h1>

. . .

var timeoutObject;

var sek = 0;

function start() {

timeoutObject = setTimeout( "start()", 1000 );

}

function stop() {

clearTimeout( timeoutObject );

}

function zeruj() {

}

</script>

. . .

(19)

Zdarzenia sterowane czasem — setTimeout i clearTimeout Zdarzenia sterowane czasem — setTimeout i clearTimeout

setInterval() —

wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu;

clearInterval()

— anulowanie ustawień określonych funkcją

setInterval()

.

Funkcja

setTimeout()

wykonuje przypisaną jej akcję tylko raz. Forma wywołania:

JavaScript pozwala na asynchroniczne, wielokrotne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje:

var timeObject = setInterval( "kod w j zyku JavaScript", czas_w_milisekundach );ę var timeObject = setInterval( "kod w j zyku JavaScript", czas_w_milisekundach );ę

Funkcja

clearInterval()

zeruje ostawienia dla obiektu będącego rezultatem funkcji

setInterval()

:

clearInterval( timeObject );

(20)

Zdarzenia sterowane czasem — setInterval i clearInterval, przykład Zdarzenia sterowane czasem — setInterval i clearInterval, przykład

var timeoutObject;

var sek = 0;

function display() {

}

function start() {

display();

timeoutObject = setInterval( "display()", 1000 ) }

function stop() {

clearInterval( timeoutObject );

}

function zeruj() {

}

</script>

. . .

var timeoutObject;

var sek = 0;

function display() {

}

function start() {

display();

timeoutObject = setInterval( "display()", 1000 ) }

function stop() {

clearInterval( timeoutObject );

}

function zeruj() {

}

</script>

. . .