Wykład 6 Informatyka MPDI 3 semestr JavaScript cd.

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)

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

for (i=0; i<=10; i++) { document.write( i," "); } Przykład dla prostej iteracji for można wykorzystywać licznik w instrukcji

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)= sin(2 stopni)= sin(3 stopni)= sin(4 stopni)= sin(5 stopni)= sin(6 stopni)= sin(7 stopni)= sin(8 stopni)= sin(9 stopni)= ….

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

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

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

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

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

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

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 } Ostatnie n równe 10 !!!!

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);

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? 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)

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

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

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.

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

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… function pokaz(a, b){ alert (a*b); } //dwukrotne wykonanie funkcji pokaz(3, 5) ; pokaz(9, 6); Uwaga: brak return osobne instrukcje przekazanie danych

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

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

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

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

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

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)

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

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

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

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