Transcript Slajd 1
Informatyka
MPDI 3 semestr
Wykład 6
JavaScript cd.
Instrukcje iteracyjne
Pętla for (dla)
Instrukcja wykorzystywana do wielokrotnego
wykonania pewnego zestawu instrukcji.
Pętla for powtarza instrukcje wnętrza pętli aż do
momentu, kiedy testowany warunek staje się fałszywy.
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 jeśli jest ich więcej niż jedna, jeśli jedna to
nawiasy klamrowe można pominąć
Przykład dla prostej iteracji for
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<=10; i++)
{
document.write(i,"<BR />");
}
</SCRIPT>
</BODY></HTML>
można wykorzystywać
licznik w instrukcji
0
1
2
3
4
5
6
7
8
9
10
Przykład
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<=90; i++)
{
y= Math.round(Math.sin(i*Math.PI/180)*1E4)/1E4
document.write("sin(" ,i," stopni)=",y, "<BR />");
}
</SCRIPT>
sin(0 stopni)=0
sin(1 stopni)=0.0175
sin(2 stopni)=0.0349
sin(3 stopni)=0.0523
sin(4 stopni)=0.0698
sin(5 stopni)=0.0872
sin(6 stopni)=0.1045
sin(7 stopni)=0.1219
sin(8 stopni)=0.1392
sin(9 stopni)=0.1564
….
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+=3)
document.write(i+" ");
for ( i=30; i<=0; i--)
{
y=Math.sin(i*Math.PI/180);
document.write(i," ",y,"<BR />");
}
dlaczego ta pętla jest
nielogiczna i co zrobić by
działała prawidłowo
<SCRIPT LANGUAGE="JavaScript">
for (i=100; i>0; i-=3)
{
document.write(i," ");
}
</SCRIPT>
spacja
<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<=50; i++)
{
document.write(Math.round(Math.random()*100)," ");
}
</SCRIPT>
Przyrost geometryczny licznika:
<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<10000; i*=3)
{
document.write(i," ");
}
</SCRIPT>
11
Przykład pętli zagnieżdżanych
12
<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<=3; i++)
for (k=1; k<=4; k++)
document.write(i," ",k,"<BR />");
</SCRIPT>
jedna
spacja
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
P1
13
14
21
22
23
24
31
32
33
34
Sprawdzanie parzystości wielu liczb (zagnieżdżane if w pętli)
Zadanie: wylosuj 100 liczb całkowitych z przedziału (0, 1000) i wypisz
tylko wartości parzyste
<SCRIPT LANGUAGE="JavaScript">
for (k=1; k<=1000; k++)
{
x= Math.round(Math.random()*1000)
if (x%2==0)
document.write(x," jest parzyste<BR />");
}
</SCRIPT>
W każdym kroku pętli sprawdzamy warunek parzystości
Podstawowe różnice Javascript vs. Matlab
operatory
składania
instrukcja
warunkowa
if
JavaScript
Matlab
++ -- += -= /= *= %=
nie ma
if (warunek)
if warunek1
{instrukcje}
else
{instrukcje}
instrukcje1
elseif warunek2
instrukcje2
elseif warunek_n itd…
else
instrukcje
end
Dla wielu warunków
zagnieżdżanie if
instrukcja
for
for (inicjacja; warunek, inkrementacja)
{instrukcje}
wiele
bloków
elseif
for licznik=inicjacja:krok:wartosc_koncowa
instrukcje
end
Pętla while
while (warunek) {
instrukcje
}
Wykonuje iterację (powtarza instrukcje) gdy warunek spełniony, gdy
nie, to pętla się kończy i program przechodzi dalej. Sprawdzenie
warunku odbywa się przed wykonaniem instrukcji.
n = 0;
x = 0;
while( n < 10 ) {
n++; //zwiększ n o 1
x += n; // zwiększ x o n
document.write(n+" "+x+"<BR />");
}
Ostatnie n równe 10 !!!!
1 1
2 3
3 6
4 10
5 15
6 21
7 28
8 36
9 45
10 55
Pętla do while
do
instrukcja
while (warunek);
Wykonuje instrukcję i sprawdza warunek – gdy spełniony ponawia, gdy
nie, to przechodzi kończy pętlę. Sprawdzenie warunku po wykonaniu
instrukcji!
n = 0;
x = 0;
do {
n ++;
x += n;
document.write(x+"<BR />");
}
while ( n < 10 )
1
3
6
10
15
21
28
36
45
55
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ć while czy do while? Obie możliwe!
Sprawdzenie sumy po każdym dodaniu:
<SCRIPT LANGUAGE="JavaScript">
ile=0;suma=0;
do { //wykonuj dopóki suma<=1000
ile++;
suma+= ile;//zwiększenie sumy o ile
document.write(suma+" ");
} while ( suma <= 1000 )
document.write("<BR>Ostatnio dodano:",ile,"<BR>");
document.write("Suma<1000:",suma-=ile,"<BR>");
document.write("Ile liczb trzeba dodać:",--ile,"<BR>");
</SCRIPT>
--ile
ile--
zmniejsz o1 i wypisz (predekrementacja)
wypisz i zmniejsz o 1 (postdekrementacja)
Ale można też wykorzystać pętlę while….
<SCRIPT LANGUAGE="JavaScript">
ile=0;suma=0;
while ( suma <= 1000 )
{
ile++;
suma+= ile;//zwiększenie sumy o ile
document.write(suma+" ");
}
document.write("<BR>Ostatnio dodano:",ile,"<BR>");
document.write("Suma<1000:",suma-=ile,"<BR>");
document.write("Ile liczb trzeb dodać:",--ile,"<BR>");
</SCRIPT>
Przykładowe zastosowanie: Algorytm Euklidesa –
znaleźć największy wspólny podzielnik dwóch liczb
<SCRIPT language="javascript">
a=4*11;
b=9*11;
document.write("Liczby :",a," i ", b,"<BR>");
while (b != 0) // dopóki b różne od zera
{
c = a % b; //reszta z dzielenia
a = b;
b = c;
}
document.write("NWP obu liczb:",a);
</SCRIPT>
Definicja i wykorzystanie własnych funkcji
Tworzenie definicji funkcji to zapis pewnego algorytmu
działań na danych ogólnych (argumentach formalnych).
Oczywiście istnieje możliwość wielokrotnego wykorzystania
funkcji dla różnych zestawów danych szczegółowych
(argumentach aktualnych).
Funkcje są definiowane przez określenie ich nazwy,
argumentów i sposobu działania.
Funkcje definiowane przez użytkownika zwykle umieszczamy
między znacznikami:
<SCRIPT language="JavaScript"> definicje funkcji </SCRIPT>
w sekcji HEAD dokumentu HTML.
Pozwala to na załadowanie ich na samym początku, aby dowolny skrypt
wykorzystujący funkcję w kodzie JavaScript na stronie mógł od razu być
wykonywany przez przeglądarkę.
Schematy definiowania funkcji
function nazwa (lista argumentów formalnych)
{
instrukcje;
}
function nazwa (lista argumentów formalnych)
{
instrukcje;
return zmienna; //zwrot rezultatu
}
Argumenty formalne w definicji funkcji to lista nazw zmiennych
(oddzielanych przecinkami) potrzebnych do wykonania instrukcji
wewnątrz definicji funkcji
Jeśli funkcja ma zwracać jakiś rezultat wykorzystujemy frazę:
return zmienna
Wykonanie funkcji
•
jeśli funkcja nic nie zwraca (brak return), wykonanie funkcji jest najczęściej
osobną instrukcją, przykładowo:
nazwa_funkcji (lista argumentów aktualnych)
•
jeśli funkcja zwraca rezultat (występuje return), używamy funkcję w
kontekście rezultatu (np. możemy rezultat wypisać na stronie lub przypisać
do zmiennej), przykładowo:
document.write (nazwa_funkcji (lista argumentów aktualnych))
x = nazwa_funkcji (lista argumentów aktualnych)
Argumenty aktualne wykonania to: stałe, zmienne o znanych
wartościach lub obliczalne wyrażenia, oddzielane przecinkami.
Ich liczba i kolejność (a często także typ) powinna być taka sama
jak argumentów formalnych w definicji funkcji.
Jak to działa…
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pokaz(a, b){
alert (a*b);
}
Uwaga: brak return
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
//dwukrotne wykonanie funkcji
pokaz(3, 5) ;
osobne instrukcje
pokaz(9 , 6);
</SCRIPT>
</BODY></HTML>
Inny przykład
Argumenty formalne
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function srednia(a, b){
x=(a+b)/2;
return x;
funkcja zwraca obliczone x
}
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
//dwukrotne wykonanie funkcji
document.write(srednia(5, 9) ,"<BR>");
y= 3.8
rezultaty wykonania funkcji
document.write(srednia(3.6, y));
wypisujemy na stronie
</SCRIPT>
Argumenty aktualne
</BODY></HTML>
Przykład użytkowy
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pole_kola(R)
{
pole=Math.PI*R*R;
return pole;
}
</SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
//dwukrotne wykonanie funkcji
document.write("Obliczenie pól dwóch okręgów<BR/>")
document.write("r=5.9 pole=",pole_kola (5.9) ,"<BR>");
document.write("r=3.6 pole=",pole_kola (3.6));
</SCRIPT>
</BODY></HTML>
To co funkcja ma wykonać po wywołaniu, jest
zdefiniowane w instrukcjach między nawiasami { }.
Po słowie kluczowym return określamy co ma zwrócić
wykonanie funkcji (rezultat wykonania funkcji - w
przykładzie 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
wykorzystać 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>
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 */
Plik index.html
<HTML><HEAD>
<SCRIPT type="text/javascript" src="./funkcje.js" ></SCRIPT>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write( dlugosc('Politechnika'),"<BR>");
</SCRIPT>
</BODY></HTML>
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);
przekazanie tekstu do funkcji
</SCRIPT>
</HEAD><BODY>
<INPUT type="button" value="OK" onclick="nacisnij( 'Hello');">
</BODY> </HTML>
To samo, lecz z interakcyjnym wprowadzaniem danych
dla funkcji
<HTML><HEAD>
<SCRIPT language="JavaScript">
użycie troszkę
function nacisnij(a)
bardziej
{ alert(a*a); }
skomplikowane
</SCRIPT>
</HEAD><BODY>
<FORM>
<INPUT type="text" id="in1">
<INPUT type="submit" value="OK" onclick="nacisnij(in1.value);">
</FORM>
</BODY> </HTML>
obiekt INPUT o identyfikatorze in1
ma właściwość value, która zawiera
wpisaną w pole tekstowe wartość
Istnieje możliwość zarządzania elementami strony przy pomocy JavaScript
Prosty przykład
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function nowy(kolor)
{
document.bgColor=kolor; //ustaw kolor tła strony
}
</SCRIPT>
<STYLE type="text/css">input{font-size:24px}</STYLE>
</HEAD><BODY>
<DIV style="text-align:center"><FORM>
<INPUT type="button" value="Purpura" onclick="nowy('purple');">
<INPUT type="button" value="Niebieski" onclick="nowy('blue');">
<INPUT type="button" value="Zieleń" onclick="nowy('#339966');">
<INPUT type="button" value="Żółty" onclick="nowy('yellow');">
<INPUT type="button" value="Czarny" onclick="nowy('black');">
</FORM></DIV>
</BODY>
</HTML>