JavaScript - Programowanie

Transkrypt

Podstawy programowania
w języku
języku JavaScript
Część trzecia
Funkcje i programowanie
sterowane zdarzeniami
Autor
Roman Simiński
Kontakt
[email protected]
www.us.edu.pl/~siminski
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.
Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.
Podstawy programowania w JavaScript
Funkcje i programowanie sterowane zdarzeniami
Zanim zaczniemy — przydatne funkcje obsługi okien dialogowych
Funkcja alert ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst
i przycisk OK, którym użytkownik zamyka okno.
alert(
alert( "Tu
"Tu okno
okno powiadomie
powiadomieńń,, naci
naciśśnij
nij OK"
OK" );
);
Copyright © Roman Simiński
Strona : 2
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.
if(
if( confirm(
confirm( "Naci
"Naciśśnij
nij OK
OK aby
aby poznać
poznać nasz
nasząą ofert
ofertęę"" )) ))
document.write(
document.write( "Zapraszamy
"Zapraszamy do
do przegl
przegląądu
du oferty"
oferty" );
);
else
else
document.write(
document.write( "Szkoda,
"Szkoda, mo
możżee kiedy
kiedy indziej"
indziej" );
);
Strona : 3
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).
var
var surferName
surferName == prompt(
prompt( "Jak
"Jak Ci
Cięę mam
mam nazywać:"
nazywać:",, ""
"" );
);
if(
if( surferName
surferName !=
!=
document.write(
document.write(
else
else
document.write(
document.write(
null
null &&
&& surferName
surferName !=
!= ""
"" ))
"Witaj
"Witaj "" ++ surferName
surferName ++ "!"
"!" );
);
"Witaj
"Witaj nieznajomy!"
nieznajomy!" );
);
Strona : 4
Definiowanie funkcji
function
function nazwaFunkcji(
nazwaFunkcji( parametr1,
parametr1, parametr2,
parametr2, ...,
..., parametrN
parametrN ))
{{
kod
kod funkcji
funkcji
}}
function
function
{{
alert(
alert(
}}
powitanie()
powitanie()
"Witaj
"Witaj serferze
serferze :)"
:)" );
);
Proste
Proste funkcje
funkcje bezparametrowe
bezparametrowe
oo charakterze
charakterze procedur
procedur
function
function powitanie()
powitanie()
{{
var
var surferName
prompt( "Jak
"Jak Ci
Cięę mam
mam nazywać:"
nazywać:",, ""
"" );
);
}}
if(
if( surferName
surferName !=
!=
document.write(
document.write(
else
else
document.write(
document.write(
null
null &&
&& surferName
surferName !=
!=
"Witaj
"
+
surferName
"Witaj " + surferName
""
"" ))
++ "!"
"!" );
);
"Witaj
"Witaj nieznajomy!"
nieznajomy!" );
);
Strona : 5
Wywoływanie funkcji
Funkcje można wywoływać w zwykły sposób — podając nazwę i ewentualne
parametry.
powitanie();
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.
Strona : 6
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>
<html>
<head>
<head>
<script
<script type="text/javascript">
type="text/javascript">
function
powitanie()
{{
var
var surferName
prompt( "Jak
"Jak Ci
Cięę mam
mam nazywać:"
nazywać:",, ""
"" );
);
}}
if(
if( surferName
surferName !=
!=
document.write(
document.write(
else
else
document.write(
document.write(
null
null &&
&& surferName
surferName !=
!=
"Witaj
"
+
surferName
""
"" ))
++ "!"
"!" );
);
"Witaj
"Witaj nieznajomy!"
nieznajomy!" );
);
</script>
</script>
</head>
</head>
<body
<body onload
onload == "powitanie()">
"powitanie()">
</body>
</body>
</html>
</html>
Strona : 7
Wywoływanie funkcji — obsługa onunload
Funkcja obsługi zdarzenia onunload jest wywoływana natychmiast po akcji
opuszczenia strony.
<html>
<html>
<head>
<head>
<script
var
var surferName;
surferName;
//
// .. .. ..
function
function
{{
alert(
alert(
}}
pozegnanie()
pozegnanie()
surferName
surferName ++ "" pa,
pa, pa!"
pa!" ))
</script>
</script>
</head>
</head>
<body
<body onunload
onunload == "pozegnanie()">
"pozegnanie()">
</body>
</body>
</html>
</html>
Strona : 8
Wywoływanie funkcji — obsługa onload i onunload
Teoretycznie to powinno działać — ale nie działa :(
<html>
<html>
<head>
<head>
<script
var
var surferName
surferName == "";
"";
function
powitanie()
{{
surferName
prompt( "Jak
"Jak Ci
Cięę mam
mam nazywać:"
nazywać:",, ""
"" );
);
}}
if(
if( surferName
surferName !=
!=
document.write(
document.write(
else
else
document.write(
document.write(
null
null &&
&& surferName
surferName !=
!=
"Witaj
"
+
surferName
""
"" ))
++ "!"
"!" );
);
"Witaj
"Witaj nieznajomy!"
nieznajomy!" );
);
function
function pozegnanie()
pozegnanie()
{{
alert(
alert( surferName
surferName ++ "" pa,
pa, pa!"
pa!" ))
}}
</script>
</script>
</head>
</head>
<body
<body onload="powitanie()"
onload="powitanie()" onunload="pozegnanie()"
onunload="pozegnanie()" >>
</body>
</body>
</html>
</html>
Strona : 9
Wywoływanie funkcji — obsługa onmouseover i onmouseout
Wykorzystanie zdarzeń mouseover i mouseout:
<html>
<html>
<head>
<head>
<script
function
function darkColor()
darkColor()
{{
document.bgColor='#9f9f9f';
}}
function
function lightColor()
lightColor()
{{
document.bgColor='#ffffff';
}}
</script>
</script>
</head>
</head>
<body>
<body>
<a
<a href="#"
href="#" onmouseover="darkColor()"
onmouseover="darkColor()" onmouseout="lightColor()">
onmouseout="lightColor()">
Ten
Ten link
link jest
jest wyj
wyjąątkowy
tkowy
</a>
</a>
</body>
</body>
</html>
</html>
Strona : 10
Wywoływanie funkcji — obsługa onmouseover i onmouseout
Mało roztropne wykorzystanie zdarzeń mouseover i mouseout:
<html>
<html>
<head>
<head>
<script
function
function uwazaj()
uwazaj()
{{
alert(
alert( "Je
"Jeżżeli
eli tam
tam wejdziesz,
wejdziesz, Twoje
Twoje żżycie
ycie ju
jużż nie
nie bbęędzie
dzie takie
takie samo!"
samo!" );
);
}}
function
function zaluj()
zaluj()
{{
alert(
alert( "Je
"Jeżżeli
eli tam
tam nie
nie wejdziesz,
wejdziesz, bbęędziesz
dziesz żżałował!"
ałował!" );
);
}}
</script>
</script>
</head>
</head>
<body>
<body>
<a
<a href="#"
href="#" onmouseover="uwazaj()"
onmouseover="uwazaj()" onmouseout="zaluj()">
onmouseout="zaluj()">
Ten
link
jest
wyj
ą
tkowy
Ten link jest wyjątkowy
</a>
</a>
</body>
</body>
</html>
</html>
Strona : 11
Wywoływanie funkcji — obsługa onclick
W przeglądarce użytkownicy zwykle
używają pojedynczego kliknięcia.
<html>
<html>
<head>
<head>
<script
function
function info()
info()
{{
alert(
alert( "A
"A figa
figa śświnko,
winko, nic
nic tu
tu nie
nie zobaczysz!"
zobaczysz!" );
);
}}
</script>
</script>
</head>
</head>
<body>
<body>
<input
<input type="button"
type="button" name="hl"
name="hl" value="Tylko
value="Tylko dla
dla dorosłych!"
dorosłych!" onclick="info()"
onclick="info()" />
/>
</body>
</body>
</html>
</html>
Strona : 11
Wywoływanie funkcji — ondblclick
Uwaga — zdarzenie click zawsze
wystąpi przed dblclick.
<html>
<html>
<head>
<head>
<script
function
function
{{
alert(
alert(
}}
info()
info()
"A
"A figa
figa śświnko,
winko, nic
nic tu
tu nie
nie zobaczysz!"
zobaczysz!" );
);
</script>
</script>
</head>
</head>
<body>
<body>
<p>Dla
<p>Dla tego
tego przycisku
przycisku uużżyj
yj podwójnego
podwójnego klikni
kliknięęcia:</p>
cia:</p>
<input
type="button" name="hl"
name="hl" value="Tylko
value="Tylko dla
dla dorosłych!"
dorosłych!"
ondblclick="info()"
/>
ondblclick="info()" />
</body>
</body>
</html>
</html>
Strona : 12
Wywoływanie funkcji — obsługa onfocus i onblur
Czyli obsługa złapania i zgubienia „fokusa”:
<html>
<html>
<head>
<head>
<script
function
function inColor()
inColor()
{{
}}
function
function outColor()
outColor()
{{
}}
</script>
</script>
</head>
</head>
<body>
<body>
<input
<input type="text"
type="text" id="test"
id="test" onfocus="inColor()"
onfocus="inColor()" onblur="outColor()"
onblur="outColor()" />
/>
</body>
</body>
</html>
</html>
Strona : 13
Wywoływanie funkcji — obsługa onfocus i onblur
Wykorzystując onblur można np. weryfikować dane, tutaj jedynie ostrzeżenie:
<html>
<html>
<head>
<head>
<script
function
function outInfo()
outInfo()
{{
alert(
alert( "Je
"Jeżżeli
eli uużżyłe
yłeśś innych
innych liter
liter ni
niżż du
dużże,
e, to
to masz
masz problem."
problem." );
);
}}
</script>
</script>
</head>
</head>
<body>
<body>
Napisz
Napisz
<input
<input
<input
<input
du
dużżymi
ymi literami<br
literami<br />
/>
type="text"
id="test1"
type="text" id="test1" onblur="outInfo()"
onblur="outInfo()" /><br
/><br />
/>
type="text"
type="text" id="test2"
id="test2" onblur="outInfo()"
onblur="outInfo()" />
/>
</body>
</body>
</html>
</html>
Strona : 14
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
var timeObject
timeObject == setTimeout(
setTimeout( "kod
"kod ww jjęęzyku
zyku JavaScript",
JavaScript", czas_w_milisekundach
czas_w_milisekundach );
);
Funkcja clearTimeout() zeruje ostawienia dla obiektu będącego rezultatem
funkcji setTimeout():
clearTimeout(
clearTimeout( timeObject
timeObject );
);
Strona : 15
Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 1
<html>
<html>
<head>
<head>
<script
function
function odliczanie()
odliczanie()
{{
var
var timeoutObject
timeoutObject == setTimeout(
setTimeout( 'alert(
'alert( "Czas
"Czas min
minąął"
ł" )'
)',, 5000
5000 );
);
}}
</script>
</script>
</head>
</head>
<body
<body onload="odliczanie()">
onload="odliczanie()">
<p>Masz
<p>Masz 55 sekund
sekund na
na podj
podjęęcie
cie decyzji!</p>
decyzji!</p>
</body>
</body>
</html>
</html>
Strona : 16
Zdarzenia sterowane czasem — setTimeout i clearTimeout, przykład 2
<script
var
var timeoutObject;
timeoutObject;
var
var sek
sek == 0;
0;
function
start()
function start()
{{
document.getElementById(
document.getElementById( "txt"
"txt" ).value
).value == sek++;
sek++;
timeoutObject
=
setTimeout(
"start()",
1000
timeoutObject = setTimeout( "start()", 1000 );
);
}}
function
function stop()
stop()
{{
clearTimeout(
clearTimeout( timeoutObject
timeoutObject );
);
}}
function
function zeruj()
zeruj()
{{
"txt" ).value
).value == sek
sek == 0;
0;
}}
</script>
</script>
.. .. ..
<h1>Głupiutki
<h1>Głupiutki stoper</h1>
stoper</h1>
<input
type="button"
<input type="button" value="Start"
value="Start"
<input
<input type="text"
type="text" id="txt"
id="txt" />
/>
<input
type="button" value="Stop"
value="Stop"
<input
type="button"
value="Zeruj"
<input type="button" value="Zeruj"
onclick="start()"
onclick="start()"
/>
/>
onclick="stop()"
onclick="stop()" />
/>
onclick="zeruj()"
onclick="zeruj()" />
/>
.. .. ..
Strona : 17
Zdarzenia sterowane czasem — setTimeout i clearTimeout
JavaScript pozwala na asynchroniczne, wielokrotne wykonywanie wskazanego
kodu po upływie zadanego czasu. Służą do tego funkcje:
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:
var
var timeObject
timeObject == setInterval(
setInterval( "kod
"kod ww jjęęzyku
zyku JavaScript",
JavaScript", czas_w_milisekundach
czas_w_milisekundach );
);
Funkcja clearInterval() zeruje ostawienia dla obiektu będącego rezultatem
funkcji setInterval():
clearInterval(
clearInterval( timeObject
timeObject );
);
Strona : 18
Zdarzenia sterowane czasem — setInterval i clearInterval, przykład
<script
var
timeoutObject;
var timeoutObject;
var
var sek
sek == 0;
0;
function
function display()
display()
{{
"txt" ).value
).value == sek++;
sek++;
}}
function
function start()
start()
{{
display();
display();
timeoutObject
timeoutObject == setInterval(
setInterval( "display()",
"display()", 1000
1000 ))
}}
function
function stop()
stop()
{{
clearInterval(
clearInterval( timeoutObject
timeoutObject );
);
}}
function
function zeruj()
zeruj()
{{
"txt" ).value
).value == sek
sek == 0;
0;
}}
</script>
</script>
.. .. ..
<h1>Głupiutki
<h1>Głupiutki stoper</h1>
stoper</h1>
<input
type="button" value="Start"
value="Start" onclick="start()"
onclick="start()" />
/>
<input
<input type="text"
type="text" id="txt"
id="txt" />
/>
<input
type="button" value="Stop"
value="Stop" onclick="stop()"
onclick="stop()" />
/>
<input
type="button"
value="Zeruj"
onclick="zeruj()"
<input type="button" value="Zeruj" onclick="zeruj()" />
/>
.. .. ..
Strona : 19

JavaScript - Programowanie

Transkrypt

Podobne dokumenty

Strona internetowa w systemach unix

JAVAScript w dokumentach HTML (2)

Podstawy JavaScript – ćwiczenia

Wstęp Wymagania sprzętowe Javascript vs Java

JavaScript - sosw.poznan.pl

JavaScript- Podstawy programowania na potrzeby

1 - szkolaporonin.pl

Krótki kurs JavaScript