SCRIPT
Transkrypt
SCRIPT
Informatyka PDF Wykład 5 Javascript c.d. Sekwencja obliczeń: <SCRIPT LANGUAGE="JavaScript"> //Pierwiastki równania kwadratowego a=5; b=5; c=1; delta=b*b-4*a*c; pdelta=Math.sqrt(delta); x1:-0.7236067977499789 x1=(-b-pdelta)/2/a; //albo …/(2*a) x2:-0.276393202250021 x2=(-b+pdelta)/2/a; document.write('x1:'+x1+"<BR />"); document.write('x2:'+x2+"<BR />"); </SCRIPT> Oczywiście gdy delta będzie ujemne, to błąd! NaN – nieokreślone Jak przeciwdziałać? Instrukcja badania warunku if (test, sprawdzenie!) Przykład pisania wyrażeń y= sin x − 3 ( x − 3 )x 2 zapis w skrypcie JavaScript x −3 +4 x=Math.PI; //musimy określić wartość x y= (Math.pow(Math.sin(x),2) - Math.pow((x-3)*x,1/3)) /(Math.abs(Math.pow(x,-3))+4); document.write(y); łatwo o błędy (dużo nawiasów!) Uwaga: wolno spacje, ale nie wewnątrz nazw wolno przenieść do następnego wiersza jak sobie ułatwić? wprowadzać zmienne pomocnicze liczymy etapami…. y= sin x − 3 ( x − 3 )x 2 x −3 <SCRIPT language="JavaScript"> x=Math.PI; //jak poprzednio L1= Math.pow(Math.sin(x),2); L2=Math.pow((x-3)*x,1/3); L= L1- L2;//licznik M= Math.abs(Math.pow(x,-3))+4; //mianownik y= L/M; //wynik document.write(y); </SCRIPT> +4 Inna metoda wyprowadzenia danych wyświetlanie w dodatkowym okienku alert Metoda dla obiektu window, tworząca okienko dialogowe z napisem informacyjnym lub wartością numeryczną. <SCRIPT language="JavaScript"> raz=2; alert("Witaj!"); alert("Witaj "+raz+"-gi raz"); </SCRIPT> dokładniej window.alert , ale domyślny obiekt to window Instrukcja warunkowa if...else Instrukcja if powoduje wykonanie kodu źródłowego instrukcja1 tylko wtedy, gdy warunek logiczny jest spełniony. Jeżeli zostanie użyty poszerzony wariant instrukcji if, to po spełnieniu warunku zostanie wykonany kod instrukcja1 lecz w przeciwnym wypadku zostanie wykonany kod instrukcja2. if (warunek) { kod wykonywany jeżeli warunek spełniony } else { kod wykonywany jeżeli warunek nie spełniony } opcjonalnie czyli można opuścić-wówczas przy niespełnionym warunku nic nie jest wykonywane Prosty przykład dla instrukcji warunkowej <HTML><HEAD></HEAD><BODY> <SCRIPT LANGUAGE="JavaScript"> x=5; //przypisujemy wartość zmiennej if (x>0) document.write("tak"); // warunkowo else document.write("nie"); </SCRIPT> </BODY></HTML> tak Najogólniejsza postać instrukcji warunkowej – jeśli mamy kilka warunków if (warunek1) { kod wykonywany jeżeli warunek spełniony } else if (warunek2){ instrukcje wykonywane jeżeli warunek2 spełniony } else if (warunek3){ instrukcje wykonywane jeżeli warunek2 spełniony } else { instrukcje wykonywane jeżeli warunki powyższe niespełnione } 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 iteracyjna - "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. W JavaScript pętla for jest podobna do pętli w Java i C. 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 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> można wykorzystywać licznik 0 1 2 3 4 5 6 7 8 9 10 Przykład <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<91; i++) { document.write(i+" "+Math.sin(i*Math.PI/180)+"<BR />"); } </SCRIPT> metoda write może też być wieloargumentowa (argumenty oddzielane plusami lub przecinkami) document.write(i," ",Math.sin(i*Math.PI/180),"<BR />"); Przykład pętli zagnieżdżanej <SCRIPT LANGUAGE="JavaScript"> for (i=1; i<=3; i++) for (k=1; k<=4; k++) jedna spacja document.write(i+" "+k+"<BR />"); </SCRIPT> 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 11 12 13 14 21 22 23 24 31 32 33 34 Pętla while while (warunek) { instrukcje } Wykonuje iterację (powtarza instrukcje) gdy warunek spełniony, gdy nie, to 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(x+"<BR />"); } 1 3 6 10 15 21 28 36 45 55 Pętla do while do instrukcja while (warunek); 1 Wykonuje iterację (powtarza instrukcję) gdy warunek 3 spełniony, gdy nie, to przechodzi dalej. Sprawdzenie 6 warunku na końcu. 10 15 n = 0; x = 0; 21 do { 28 n ++; 36 x += n; 45 document.write(x+"<BR />"); 55 } 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 Funkcje Definiowane w bloku HEAD <script type="javascript"> function nazwa (argumenty){ instrukcje } </script> Wykorzystywane w skryptach w bloku BODY Możliwe też umieszczenie w osobnym pliku *.js i wtedy w bloku HEAD informujemy o tym: <script type="text/javascript" src="./js/plik.js"></script> Przykład wykorzystania funkcji <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function dodaj(s1,s2) { s3=s1+s2; alert(s3); } definicja funkcji </SCRIPT> <BODY style="font-size:28px"> <SCRIPT LANGUAGE="JavaScript"> dodaj(3,5); dodaj(13,2.5); </SCRIPT> wykorzystanie </BODY> 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 Wykonanie funkcji na kliknięcie przycisku <HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"> function pobierz(s1,s2) { s3=Number(s1)+Number(s2);//konieczne bo inaczej 2+2=22 document.getElementById('d1').innerHTML = s3; // tu pobrano element o identyfikatorze d1 i wstawiono mu zawartość } </SCRIPT> </HEAD> <BODY style="font-size:28px"> Wpisz dwie liczby: <FORM> <INPUT type="text" name="pole1" style="font-size:28px" /><BR /> <INPUT type="text" name="pole2" style="font-size:28px" /><BR /> <INPUT type="button" name="Button1" value="Naciśnij" onclick="pobierz(pole1.value, pole2.value)" style="font-size:28px"> </FORM> <P id="d1" style="font-size:50px;color:red;"> <!--pusty akapit--></P> </BODY> UWAGI: - wbudowana funkcja: Number(tekst) konwertuje tekst na liczbę (o ile się da!), bo w polu INPUT wpisujemy ZNAKI! - liczby dziesiętne piszemy z kropką! 30.56 a nie przecinkiem jak jest domyślnie w Excelu