Transcript Slajd 1
Mechatronika
PWSW
Informatyka
Wykład 4
Definicja i wykonanie własnej funkcji
Funkcje definiowane zawierają pewien kod,
który może być wielokrotnie wykonywany z
różnymi argumentami wejściowymi.
Zwykle umieszczamy je między znacznikami <SCRIPT>
</SCRIPT> w sekcji HEAD. Pozwala to na załadowanie ich
na samym początku, aby dowolny skrypt na stronie mógł
rozpocząć pracę, gdy użytkownik zacznie przeglądać stronę.
Można jednak definiować funkcje w ramach jednego
znacznika <SCRIPT> i tam je wykorzystywać.
Mogą być również zapisane w osobnym pliku,
wówczas należy w dokumencie HTML w sekcji HEAD
umieścić zapis z adresem i nazwą pliku zawierającego
funkcje:
<SCRIPT src="funkcje.js" type="text/javascript"></SCRIPT>
Przykład wykorzystania funkcji
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
//definicja funkcji
function dodaj(s1,s2) {
s3=s1+s2; //to już liczby więc konwersja niepotrzebna
alert(s3);
}
</SCRIPT></HEAD>
<BODY style="font-size:28px">
<SCRIPT LANGUAGE="JavaScript">
dodaj(3,5);
//wykonanie funkcji
//wykonanie funkcji
dodaj(13,2.5);
</SCRIPT>
</BODY>
nazwa
argumenty formalne
<SCRIPT LANGUAGE="JavaScript">
function srednia(a,b){
x=(a+b)/2;
return x;
co ma zwrócić funkcja
}
//a teraz dwukrotne wykonanie funkcji
document.write("Średnia wynosi:",srednia(5, 9),"<BR>");
x=2.5;
y=2.7;
document.write("Średnia wynosi:",srednia(x, y),"<BR>");
</SCRIPT>
argumenty aktualne
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 - czyli wynik funkcji
Zwróconą wartość funkcji wyświetlamy np.
z wykorzystaniem document.write.
document.write("Średnia wynosi:",srednia(x, y),"<BR>");
Argumenty aktualne (w instrukcji
wykonania funkcji) przenoszą wartości
na argumenty formalne (w definicji
funkcji) zgodnie z ich kolejnością
Musi się zgadzać liczba argumentów
aktualnych i formalnych , a także ich
typ: numeryczne, tekstowe
Metoda pobrania danej z pola edycyjnego
<HTML> <HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pobierz(s) {
alert("Cześć "+ s+"!");
}
</SCRIPT> </HEAD>
<BODY>
Wpisz swoje imię:
<FORM>
<input type="text" name="pole">
<input type="button" name="Button1" value="Naciśnij"
onclick="pobierz(pole.value)">
</FORM>
</BODY>
Instrukcja warunkowa if...else
Instrukcja if wykorzystywana jest wówczas, gdy chcemy podjąć alternatywną
akcję. Powoduje ona wykonanie pewnych instrukcji tylko wtedy, gdy warunek
logiczny jest spełniony.
Jeżeli zostanie użyty poszerzony wariant instrukcji if, to po spełnieniu warunku
zostanie wykonany pewien blok instrukcji, w przeciwnym wypadku zostanie
wykonany inny.
if (warunek) {
instrukcje wykonywane jeżeli warunek
spełniony
}
else {
instrukcje wykonywane jeżeli warunek nie
spełniony
}
blok else opcjonalny
(niekonieczny)
Przykład dla instrukcji warunkowej
<HTML><HEAD></HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write ("Sprawdzenie<BR>");
x=Math.log(1); //przypisujemy wartość zmiennej
// .. i wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x+"<BR />");
if (x>0)
document.write("liczba dodatnia"); // warunkowo
else document.write("ujemna lub 0");
</SCRIPT>
</BODY></HTML>
można zagnieżdżać instrukcje if…
x=Math.log(1.1); //przypisujemy wartość zmiennej
// .. i wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x+"<BR />");
if (x<0)
document.write("liczba ujemna"); // warunkowe wykonanie
else
if (x==0)
document.write("liczba równa 0"); // jak wyżej
else
document.write("dodatnia");
a=prompt("Podaj a");
b=prompt("Podaj b");
c=prompt("Podaj c");
delta= b*b-4*a*c;
if (delta<0)
document.write("delta ujemna");
else
if (delta==0)
document.write("x=",-b/2/a);
else
{
x1=(-b-Math.pow(delta,1/2))/2/a;
x2=(-b+Math.pow(delta,1/2))/2/a;
document.write("x1=",x1);
document.write("x2=",x2);
}
Przykład badania kilku warunków:
<HTML><HEAD></HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
x=Math.round(Math.random()*10);//losowanie – l. całk. od 0 do 10
if (x<5) {
document.write("Mniejsze od 5");
}
else if ((x>=5)&&(x<=8) ){// koniunkcja
document.write("W przedziale [5, 8]");
}
else if ((x>8) &&(x<10)){// inny przedział
document.write("W przedziale (8,10) więc tylko 9");
}
else
{//pozostałe
document.write("Pozostało tylko 10");
}
document.write("<BR />Sprawdzam :",x);
</SCRIPT>
</BODY></HTML>
Instrukcja for
ITERACJA – "pętla"
ma za zadanie powtarzać instrukcje
wnętrza pętli aż do momentu, gdy testowany
warunek staje się fałszywy.
W JavaScript pętla for jest podobna do pętli w Java, C++,
PHP i innych językach
Pętla for posiada następującą składnię:
for ( inicjalizacja licznika; test_logiczny; inkrementacja )
instrukcja;
lub
for ( inicjalizacja licznika; test_logiczny; inkrementacja )
{
instrukcja1;
instrukcja2;
...
}
w klamrach { } instrukcje
wewnętrzne
Przykład dla iteracji for
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<11; i++)
{
document.write(i+"<BR>");
}
</SCRIPT>
</BODY></HTML>
Przykłady:
for ( i=0; i<=20; i++)
document.write('Napis');
for ( i=0; i<=20; i++)
document.write(i+"<BR />");
for ( i=0; i<=20; i++)
document.write(i+" ");
for ( i=30; i<=0; i--)
{
y=Math.sin(i*Math.PI/180);
document.write(i+" "+y+"<BR />");
}
jaki jest błąd w tej "pętli"
i co zrobić by działała
prawidłowo
11
Przykład pętli zagnieżdżanej
12
13
<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<=3; i++)
for (k=1; k<=4; k++)
document.write(i+" "+k+"<BR />");
</SCRIPT>
14
21
22
23
24
jedna
spacja
31
32
33
dla każdego kroku pętli zewnętrznej
wykonywana jest pętla wewnętrzna, czyli
instrukcja wykona się 3*4=12 razy
wykorzystuje się np. w tablicach dwuwymiarowych
34
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<91; i++)
{
document.write(i," ",Math.sin(i*Math.PI/180)+"<BR />");
}
</SCRIPT>
Pętla while
while (warunek) {
instrukcje
}
Pętla wykonuje iterację (powtarza instrukcję) gdy
warunek spełniony, gdy nie, to przechodzi dalej.
Sprawdzenie warunku na początku.
n = 0;
x = 0;
while( n < 10 ) {
n ++;
x += n;
document.write(x+"<BR>");
}
Pętla do while
do
instrukcja
while (warunek);
Wykonuje iterację (powtarza instrukcję) gdy warunek
spełniony, gdy nie, to przechodzi dalej. Sprawdzenie
warunku na końcu.
n = 0;
x = 0;
do {
n ++;
x += n;
document.write(x+"<BR>");
} while ( n < 10 )
Pętle while i do.. while różnią się tym, że:
- w pętli while warunek może być od razu fałszywy i
instrukcja nigdy się nie wykona,
- w pętli do.. while instrukcja zawsze jest co najmniej
raz wykonana.
W obu pętlach konieczne jest, aby instrukcje wpływały
na warunek tak, aby kiedyś stał się fałszywy – inaczej
pętla będzie nieskończona, np.:
x=1;
while (x>0) x++;
wartość x rośnie i zawsze będzie >0
Problem…
Ile liczb naturalnych trzeba zsumować aby suma była
większa od 1000
Którą iterację wykorzystać?
Sprawdzenie sumy po każdym dodaniu, a więc:
<SCRIPT LANGUAGE="JavaScript">
ile=0;suma=0;
do { //wykonuj dopóki suma<=1000
ile++;
suma+= ile;//zwiększenie sumy o ile
document.write(suma+"<BR>");
} while ( suma <= 1000 )
document.write(ile+"<BR>");
</SCRIPT>