Wykład 6 Informatyka MPDI 3 semestr JavaScript cd.

Prezentacja na temat: "Wykład 6 Informatyka MPDI 3 semestr JavaScript cd."— Zapis prezentacji:

1 Wykład 6 Informatyka MPDI 3 semestr JavaScript cd.

2 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. Instrukcje iteracyjne Pętla for (dla)

3 for ( inicjalizacja licznika; test_logiczny; inkrementacja ) instrukcja; Pętla for posiada następującą składnię: w klamrach { } instrukcje wewnętrzne jeśli jest ich więcej niż jedna, jeśli jedna to nawiasy klamrowe można pominąć for ( inicjalizacja licznika; test_logiczny; inkrementacja ) { instrukcja1; instrukcja2;... } lub

4 for (i=0; i<=10; i++) { document.write( i," "); } Przykład dla prostej iteracji for można wykorzystywać licznik w instrukcji 0 1 2 3 4 5 6 7 8 9 10

5 for (i=0; i<=90; i++) { y= Math.round(Math.sin(i*Math.PI/180)*1E4)/1E4 document.write("sin(",i," stopni)=",y, " "); } Przykład 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 ….

6 for ( i=0; i<=20; i++) document.write('Napis'); for ( i=0; i<=20; i++) document.write(i," "); 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," "); } Przykłady: dlaczego ta pętla jest nielogiczna i co zrobić by działała prawidłowo

7 for (i=1; i<=50; i++) { document.write(Math.round(Math.random()*100)," "); } for (i=100; i>0; i-=3) { document.write(i," "); } spacja

8 for (i=1; i<10000; i*=3) { document.write(i," "); } Przyrost geometryczny licznika:

9 for (i=1; i<=3; i++) for (k=1; k<=4; k++) document.write(i," ",k," "); Przykład pętli zagnieżdżanych 1 1 2 1 3 1 4 2 1 2 2 3 2 4 3 1 3 2 3 3 4 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 jedna spacja P1

10 for (k=1; k<=1000; k++) { x= Math.round(Math.random()*1000) if (x%2==0) document.write(x," jest parzyste "); } 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 W każdym kroku pętli sprawdzamy warunek parzystości

11 Podstawowe różnice Javascript vs. Matlab JavaScriptMatlab operatory składania ++ -- += -= /= *= %= nie ma instrukcja warunkowa if if (warunek) {instrukcje} else {instrukcje} Dla wielu warunków zagnieżdżanie if if warunek1 instrukcje1 elseif warunek2 instrukcje2 elseif warunek_n itd… else instrukcje end instrukcja for for (inicjacja; warunek, inkrementacja) {instrukcje} for licznik=inicjacja:krok:wartosc_koncowa instrukcje end wiele bloków elseif

12 n = 0; x = 0; while( n "); } Pętla while 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. while (warunek) { instrukcje } 1 2 3 3 6 4 10 5 15 6 21 7 28 8 36 9 45 10 55 Ostatnie n równe 10 !!!!

13 n = 0; x = 0; do { n ++; x += n; document.write(x+" "); } while ( n < 10 ) Pętla do while Wykonuje instrukcję i sprawdza warunek – gdy spełniony ponawia, gdy nie, to przechodzi kończy pętlę. Sprawdzenie warunku po wykonaniu instrukcji! do instrukcja while (warunek); 1 3 6 10 15 21 28 36 45 55

14 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

15 Problem: Ile liczb naturalnych trzeba zsumować aby suma była większa od 1000 Którą iterację wykorzystać while czy do while? O bie możliwe! Sprawdzenie sumy po każdym dodaniu: 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(" Ostatnio dodano:",ile," "); document.write("Suma "); document.write("Ile liczb trzeba dodać:",--ile," "); --ilezmniejsz o1 i wypisz (predekrementacja) ile--wypisz i zmniejsz o 1 (postdekrementacja)

16 ile=0;suma=0; while ( suma <= 1000 ) { ile++; suma+= ile;//zwiększenie sumy o ile document.write(suma+" "); } document.write(" Ostatnio dodano:",ile," "); document.write("Suma "); document.write("Ile liczb trzeb dodać:",--ile," "); Ale można też wykorzystać pętlę while….

17 a=4*11; b=9*11; document.write("Liczby :",a," i ", b," "); 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); Przykładowe zastosowanie: Algorytm Euklidesa – znaleźć największy wspólny podzielnik dwóch liczb

18 Funkcje definiowane przez użytkownika zwykle umieszczamy między znacznikami: definicje funkcji 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ę. 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.

19 function nazwa (lista argumentów formalnych) { instrukcje; } function nazwa (lista argumentów formalnych) { instrukcje; return zmienna; //zwrot rezultatu } Schematy definiowania funkcji Jeśli funkcja ma zwracać jakiś rezultat wykorzystujemy frazę: return zmienna Argumenty formalne w definicji funkcji to lista nazw zmiennych (oddzielanych przecinkami) potrzebnych do wykonania instrukcji wewnątrz definicji funkcji

20 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.

21 Jak to działa… function pokaz(a, b){ alert (a*b); } //dwukrotne wykonanie funkcji pokaz(3, 5) ; pokaz(9, 6); Uwaga: brak return osobne instrukcje przekazanie danych

22 function srednia(a, b){ x=(a+b)/2; return x; } //dwukrotne wykonanie funkcji document.write(srednia(5, 9)," "); y= 3.8 document.write(srednia(3.6, y)); Inny przykład funkcja zwraca obliczone x rezultaty wykonania funkcji wypisujemy na stronie przekazanie danych zwrot wyniku Argumenty aktualne Argumenty formalne

23 function pole_kola(R) { pole=Math.PI*R*R; return pole; } //dwukrotne wykonanie funkcji document.write("Obliczenie pól dwóch okręgów ") document.write("r=5.9 pole=",pole_kola (5.9)," "); document.write("r=3.6 pole=",pole_kola (3.6)); Przykład użytkowy

24 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). 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

25 Funkcja z reguły zwraca jedną, elementarną wartość. Możliwy jest zwrot wielu wartości, trzeba wykorzystać tablicę.

26 function tab2(a,b){ var x=new Array( ) x[1]=(a+b)/2; x[2]=(a-b)/2; return x; } //teraz wykonanie funkcji a= tab2 ( 10, 8 ) ; //wykonanie funkcji, wynik przechowaj w zmiennej a document.write(a[1]," "); document.write(a[2]); definicja działania funkcji

27 Funkcje mogą być zapisane w osobnym pliku, np. plik.js Wówczas należy w dokumencie HTML w sekcji HEAD umieścić zapis: plik z funkcjami (w bieżącym folderze)

28 document.write( dlugosc('Politechnika')," "); function dlugosc(a){ x=a.length return x;} /* i inne funkcje */ Plik funkcje.js Plik index.html

29 function nacisnij(x ) alert(x); Interakcyjne wykonywanie funkcji Można wykonać funkcję w reakcji na zdarzenie, np. umieszczając ją w atrybucie onclick dowolnego elementu (znacznika): przekazanie tekstu do funkcji

30 function nacisnij(a) { alert(a*a); } To samo, lecz z interakcyjnym wprowadzaniem danych dla funkcji obiekt INPUT o identyfikatorze in1 ma właściwość value, która zawiera wpisaną w pole tekstowe wartość użycie troszkę bardziej skomplikowane

31 function nowy(kolor) { document.bgColor=kolor; //ustaw kolor tła strony } input{font-size:24px} Istnieje możliwość zarządzania elementami strony przy pomocy JavaScript Prosty przykład