docJAVAScript w dokumentach HTML
download 
Reklamacja Transkrypt
JAVAScript w dokumentach HTML
Programowanie obiektowe– ćw.1
JAVAScript w dokumentach HTML - przypomnienie
JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.
Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Instrukcje JavaScript umieszczane są między
znacznikami <SCRIPT> i </SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
instrukcje Javascript oddzielane średnikami
</SCRIPT>
Przykład:
Dokument HTML wyposażony w skrypt Javascript:
<HTML><HEAD><TITLE>Cw. Javascript</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//to jest komentarz
//obiekt document i jego metoda write pozwalają na
// wypisanie tekstu w dokumencie html
document.write ("To jest zwykły tekst<BR />");
document.write("wiersz <BR /> kolejny <I>wiersz</I>");// w tekście znaczniki HTML
x=5; //przypisujemy wartość zmiennej
y=3.5;
z=3e5;// a to jest zmienna o wartości 350000
suma=x+y+z;
// ... i wyświetlamy jej wartość na stronie
document.write("Wartość zmiennej <I>suma</I> : ",suma);
// ... albo w okienku
alert("Wartość zmiennej <I>suma</I> : "+suma);
</SCRIPT>
<P style="color:navy;font-size:17px">A to jest zwyczajny HTML poza skryptem</P>
</BODY>
</HTML>
Uwagi:
•
•
Internet Explorer wymaga potwierdzenia pierwszego wykonania skryptu.
Błędy w skryptach można obejrzeć w konsoli błędów po kliknięciu w ikonkę
ekranu (lub F12 – Narzędzia developerskie/Skrypt).
w lewym dolnym rogu
Zadanie
1. Wykonać test powyższego kodu Javascript i zrozumieć jego działanie.
2. Napisać skrypt, który po nadaniu długości dla podstawy i wysokości trójkąta obliczy i wypisze
na ekranie jego pole powierzchni.
Uwagi:
JavaScript rozróżnia wielkość liter. Zmienna o nazwie x i zmienna X to dwie różne zmienne. W nazwach
obiektów i metod (Math, PI, document, write) nie wolno zmieniać wielkości liter.
Instrukcje wykonawcze języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu).
Blok instrukcji otaczamy klamrami { } – zazwyczaj zestaw instrukcji definicji funkcji, instrukcjach warunkowych i iteracyjnych.
Komentarze:
• jednowierszowy - od // do końca wiersza,
• wielowierszowy - /* komentarz */
Instrukcja przypisania (nadania wartości) zmiennej
zmienna operator przypisania [wyrażenie];
(Wyrażenie jest pomijane dla operatorów ++ i ==).
Obliczane jest wyrażenie (wszystkie jego elementy powinny być znane) i jego wartość nadawana zmiennej.
Zmienną o określonej wartości można użyć w kolejnych wyrażeniach. Wyrażenia tworzymy podobnie jak w
Excelu – stałe liczbowe, zmienne o wcześniej określonych wartościach, funkcje matematyczne – wszystko powiązane operatorami działań, dodatkowo nawiasy OKRĄGŁE.
Operatory przypisania
Podstawowym operatorem przypisania jest znak
=
ale też operatory dwuznakowe: ++ -- += -=
Przykładowo:
*=
/=
x = 7;
y = –45.78;
x++; //zwiększ x o 1
x–=4; //zmniejsz x o 4
y*=3; //pomnóż y przez 3
Arytmetyczne operatory działań w wyrażeniu arytmetycznym
+
*
/
% (reszta z dzielenia)
Uwaga: znak + używany jest też do łączenia (konkatenacji) tekstów.
Operatory porównania wyrażeń arytmetycznych (dla konstrukcji warunków)
==
!=(nierówne) <=
<
>
>=
Przykłady warunków:
x>0
2*x<=y
x!=6
Warunki dają wartość logiczną (true lub false).
Operatory logiczne (złączenie warunków)
koniunkcja
&&
alternatywa
||
negacja
!
Instrukcje
Istrukcja if...else
Instrukcja if sprawdza warunek - jeśli jest on prawdziwy wykonywane są instrukcje; używamy (opcjonalnie,
może nie występować) klauzuli else aby wykonać inne instrukcje jeśli warunek jest fałszywy.
Instrukcja if ma postać:
if (warunek)
{
instrukcje
}
else
{
inne instrukcje
}
Przykład:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
x=5;
if (x==0)
x++;
else
document.write("x różne od 0");
if (x==5)
x--;
document.write(x);
</SCRIPT>
</BODY>
</HTML>
Instrukcja for
Pętla for jest powtarzana aż do momentu, kiedy testowany warunek staje się fałszywy.
W JavaScript pętla for jest składniowo podobna do pętli w Java i C. Instrukcja pętli for wygląda następująco:
for (przypisanie; warunek; zmiana)
{ Instrukcje }
Wykonywane są kolejno:
1. Inicjalizacja wyrażenia przypisanie.
2. Obliczenie wyrażenia warunek. Jeśli wartość warunek jest prawdziwa, instrukcja jest wykonana. Jeśli
wartość warunek jest fałszywa, pętla for jest przerwana.
3. Wykonywanie instrukcji wewnętrznych.
4. Aktualizacja wyrażenia zmiana, i przejście do kroku drugiego.
Przykład:
Wykonać i zrozumieć działanie skryptu:
for (i=1;i<11;i++)
document.write( (i%3) ,"<BR>");
for (i=10;i>=0;i--)
document.write( (i%2) ,"<BR>");
Instrukcja while
Działa identycznie jak pętla while w Pascalu. Instrukcja while wykonuje instrukcje tak długo, dopóki warunek
będzie prawdziwy. Instrukcja pętli while wygląda następująco:
while (warunek) {
instrukcje
}
Test warunku ma miejsce przed wykonaniem instrukcji. Jeśli warunek będzie prawdziwy, instrukcje są wykonywane i ponownie jest badany warunek. Jeśli warunek będzie fałszywy, wykonywanie pętli jest zatrzymanie i
następuje przejście o następnej instrukcji po instrukcji while.
Przykład
Następująca pętla while wykonuje iterację (powtarza) gdy warunek jest spełniony (n jest mniejsze od 10):
n = 0;
x = 0;
while( n < 10 ) {
n ++;
x += n;
document.write(x+"<BR>");
}
Obiekt Math
Obiekt Math przechowuje wartości matematyczne, gromadzone jako właściwości i metody. Są tutaj przechowywane pewne stałe i funkcje matematyczne.
Składnia: Math.property lub Math.method, gdzie property lub method jest jednym z podanych niżej elementów.
Właściwości (stałe):
E
e - stała Eulera, która wynosi ok. 2.718
LN2
logarytm naturalny dwóch, tj. ok. 0.693
LN10
logarytm naturalny z dziesięciu, tj. ok. 2.302
LOG2E
logarytm o podstawie 2 z liczby Eulera, czyli ok. 1.442
LOG10E
logarytm o podstawie 10 z liczby Eulera, czyli ok. 0.434
PI
wartość liczby π, czyli ok. 3.14159
SQRT1_2
pierwiastek kwadratowy z 0.5, czyli ok. 0.707
SQRT2
pierwiastek kwadratowy z 2, czyli ok. 1.414
Funkcje arytmetyczne (metody predefiniowanego obiektu Math)
Math.sin (kąt w radianach)
Math.cos (kąt w radianach)
Math.tan (kąt w radianach)
Math.sqrt(wyrażenie)
Math.pow(podstawa, wykładnik)
Funkcje trygonometryczne
Math.exp(wykładnik)
Math.log(wyrażenie)
Math.abs(wyrażenie)
Math.random()
Math.round(wyrażenie)
Math.ceil(wyrażenie)
Math.floor(wyrażenie)
Pierwiastek kwadratowy
Potęga (uwaga: posiada dwa argumenty, może też służyć do
wyznaczania pierwiastków wyższych stopni
Funkcja ex
Logarytm naturalny
Wartość bezwzględna
Generator losowy - losuje liczbę z przedziału (0, 1)
Zaokrąglenie do najbliższej całkowitej
Zaokrąglenie do całkowitej w kierunku +∞
Zaokrąglenie do całkowitej w kierunku -∞
Number (tekst)
Zamiana tekstu na liczbę (o ile poprawny jest zapis liczby)
Wypróbować w skrypcie i przeanalizować jego działanie:
<SCRIPT LANGUAGE="JavaScript">
x=2;
y=4;
document.write(x,"<BR />");
z= Math.sin(30*Math.PI/180);
document.write("Wartosc sin(30 stopni):",z,"<BR />");
document.write((x==y),"<BR />");
document.write((x>y),"<BR />");
document.write(((x<=y)&&(x<1)) ,"<BR />");
document.write(!(y!=4),"<BR />");
x++;
zet=Math.pow(y,1/2);
alert("zet=",zet);
tekst="125.678";
liczba=Number(tekst);
wynik=Math.ceil(liczba);
document.write("Wartosc obliczona: ",wynik);
czy=wynik>zet;
document.write("<BR />wynik>zet ? ",czy);
</SCRIPT>
Zadania do wykonania
1. Wykonać testy powyższych kodów JavaScript.
2. Wypróbować właściwości (stałe) obiektu Math – E, LOG2E, LN10 i inne.
3. Wypróbować funkcje zaokrąglania round, ceil i floor. Sprawdzić działanie skryptu:
<SCRIPT LANGUAGE="JavaScript">
liczba= 123.1234567;
document.write(Math.round(liczba)+"<BR/>");
document.write(Math.round(1E2*liczba)/1E2+"<BR/>");
document.write(Math.round(1E6*liczba)/1E6+"<BR/>");
</SCRIPT>
4. Wykonać w skrypcie JavaScript obliczenia dla x=1.345 i wyświetlić wynik:
3
3− + √+3
10 +5−1
5. Napisać skrypt, w który losowana jest liczba całkowita z przedziału 100 do 200. Każde odświeżenie strony daje inną liczbę.
Definicja i wykonanie własnej funkcji
Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy definiować metody obiektowe.
Funkcje definiowane zawierają pewien kod, który może być wielokrotnie wykonywany z różnymi argumentami. Zwykle umieszczamy je między znacznikami <SCRIPT> </SCRIPT> w sekcji HEAD. Pozwala to na załadowanie ich na samym początku, aby dowolny skrypt na stronie mógł rozpocząć pracę, gdy użytkownik zacznie
przeglądać stronę. Można jednak definiować funkcje w ramach jednego znacznika <SCRIPT> i tam je wykorzystywać. Mogą być również 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" />
Funkcje są definiowane przez określenie ich nazwy, argumentów i sposobu działania.
Przykład
Funkcja o nazwie srednia ma obliczyć średnią arytmetyczną podanych ogólnie liczb a i b:
<SCRIPT LANGUAGE="JavaScript">
function srednia(a,b){
x=(a+b)/2;
return x;
}
//a teraz dwukrotne wykonanie funkcji
document.write(srednia(5, 9));
document.write(srednia(3.6, 3.8));
</SCRIPT>
To co funkcja ma zrobić po wywołaniu, jest zdefiniowane między nawiasami { }. Po słowie kluczowym return
określamy co ma zwrócić wykonanie funkcji (tu:obliczoną wartość x), stąd w dalszej części skryptu zwróconą
wartość funkcji wyświetlamy z wykorzystaniem document.write.
Funkcja może oczywiście niczego nie zwracać, jedynie wykonać jakąś akcję, np.:
<SCRIPT LANGUAGE="JavaScript">
function komunikat(a){
alert(a);
}
document.write(komunikat("UWAGA!!"));
</SCRIPT>
Tu odbyło się przekazanie tekstu do funkcji.
Zadanie
Utworzyć skrypt, którego zadaniem będzie wykorzystanie własnej funkcji obliczającej sumę kolejnych N liczb naturalnych. Obliczyć te sumy dla N=20 i N=40;
Interakcyjne wykonywanie funkcji
Można wykonać funkcję na rozkaz użytkownika, umieszczając ją w atrybucie onclick dowolnego elementu
(znacznika):
Przykład
Sprawdzić działanie skryptu wykorzystującego własną funkcję nacisnij, wykonywaną bez argumentów .
<HTML> <HEAD>
<SCRIPT language="JavaScript"> //definicja funkcji
function nacisnij( )
{ document.write("Witaj!"); }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
//wykorzystanie funkcji
<INPUT type="button" name="Button1" value="OK" onclick="nacisnij( );">
</FORM>
</BODY> </HTML>
Zwróćmy uwagę na przypisanie wykonania funkcji do atrybutu onclick obiektu INPUT.
Zadanie
Wypróbować powyższy przykład oraz wzbogacić definicję funkcji dowolny argument (tekstowy,
numeryczny) przekazywany do funkcji i stworzyć dwa przyciski wykorzystujące funkcję z różnymi
wartościami argumentów. Metoda alert powinna wyświetlać wartość przekazanego argumentu.
