Prezentacja programu PowerPoint
Download
Report
Transcript Prezentacja programu PowerPoint
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
x
3
4
zapis w skrypcie JavaScript
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