docCw.12 JAVAScript w dokumentach HTML
download 
Reklamacja Transkrypt
Cw.12 JAVAScript w dokumentach HTML
Cw.12 JAVAScript w dokumentach HTML
Wstawienie skryptu do dokumentu HTML
JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.Skrypty JavaScript mogą być zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami
<SCRIPT> i </SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
instrukcje Javascript oddzielane średnikami
</SCRIPT>
Przykład:
Najprostsze wykorzystanie skryptu Javascript w dokumencie HTML:
<HTML><HEAD><TITLE>Cw. Javascript</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//to jest komentarz – do końca wiersza
//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 wiersz");
document.write ("<BR />"); // wysyłamy znacznik 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ść
document.write("Wartość zmiennej <I>suma</I> : "+suma);
document.write ("<P>To jest liczba PI:"+Math.PI+"</P>");
</SCRIPT>
<P style="color:navy;font-size:17px">A to jest zwyczajny HTML poza skryptem</P>
</P>
</BODY>
</HTML>
Zadanie
Wykonać w przeglądarce test powyższego kodu Javascript i zrozumieć jego działanie.
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
Zasady tworzenia skryptów JavaScript
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 w ciele funkcji, instrukcjach warunkowych i iteracyjnych.
Komentarze:
• od znaków // do końca wiersza,
• pomiędzy znakami /* i */
Wypisanie informacji na stronie
document.write (elementy)
Przykłady:
document.write ("Tekst");
document.write (z); //wartość zmiennej z
document.write (3*z); //wartość wyrażenia
document.write ("<BR />Wartość zmiennej:", z);// tekst (też znaczniki HTML) i wartość zmiennej
Uwaga: elementy w nawiasie oddzielamy przecinkami lub znakami +
Wypisanie informacji w okienku
alert (elementy)
Przykłady:
x=12345;
alert ("Tekst");
alert (x); //wartość zmiennej x
alert ("Wartość x wynosi:"+ x);// tekst i wartość (połączone znakiem +)
Interaktywne podawanie wartości
zmienna = prompt ("Tekst zachęty");
Metoda prompt powoduje otwarcie okienka do wpisania wartości. Wartość zmiennej jest typu tekstowego,
aby wykonywać działania arytmetyczne należy skonwertować ją na liczbę wykorzystując funkcję Number.
Prześledzić i zrozumieć przykład:
<SCRIPT LANGUAGE="JavaScript">
x= prompt ("Podaj x:");
y= prompt ("Podaj y:");
z=x+y;
document.write(z, "<BR>"); //tu zadziała "sklejenie"
v=Number(x)+Number(y);
document.write(v, "<BR>");//tu dodawanie arytmetyczne
</SCRIPT>
Nadawanie wartości zmiennym
Instrukcja przypisania (nadania wartości) zmiennej:
zmienna operator przypisania wyrażenie;
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ń
+
*
/
% (reszta z dzielenia)
x= (y+1)*3.5;
Uwaga: znak + uzywany jest też do łączenia (konkatenacji) tekstów.
/=
Operatory porównania
==
!=(nierówne) <=
<
>
>=
Przykładowo:
x>3
y!=(x+2)
Porównanie dwóch wyrażeń arytmetycznych (wyrażenie logiczne - warunek) przyjmuje wartość logiczną: true
(prawda) lub false (fałsz).
Operatory logiczne
koniunkcja
&&
alternatywa
||
negacja
!
Tymi operatorami łączymy dwa lub więcej warunków.
Przykładowo:
document.write((x>5)&&(y<=8));
/*prawda, jeśli obydwa warunki prawdziwe, czyli jeśli wartość zmiennej x należy do przedziału (5, 8]
*/
Funkcje arytmetyczne wbudowane (metody obiektu Math)
Math.sin (kąt w radianach)
Math.cos (kąt w radianach)
Funkcje trygonometryczne
Math.tan (kąt w radianach)
Math.sqrt(wyrażenie)
Math.pow(podstawa, wykładnik)
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 ewykładnik
Logarytm naturalny
Wartość bezwzględna
Generator liczby losowej 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)
Zadanie
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 i dołączyć do projektu strony wykonywanego
w czasie poprzedniego ćwiczenia.
2. 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>
3. Wykonać w skrypcie JavaScript obliczenia dla x=1.345 i wyświetlić wynik:
3
3− + √+3
10 +5−1
4. 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ę.
Instrukcja warunkowa
Stosowana do podejmowania decyzji – alternatywne operacje w zależności od wartości sprawdzanego
warunku(-ów).
Postać instrukcji warunkowej if
if (warunek1) {
kod wykonywany jeżeli warunek1 spełniony
}
else {
kod wykonywany jeżeli warunek2 spełniony
}
Można zagnieżdżać if w innym if celem sprawdzenia kilku warunków.
<SCRIPT LANGUAGE="JavaScript">
liczba= Math.log(3);
if ((liczba>0)&&(liczba<1))
document.write(">0");
else if ((liczba>=1)&&(liczba<2))
document.write(">=1 i < 2");
else
document.write(">=2");
</SCRIPT>
Sprawdzić i zrozumieć działanie powyższego skryptu.
Instrukcja iteracyjna ("pętla") for
Umożliwia wielokrotne wykonanie bloku instrukcji – liczba powtórzeń uzależniona od zmian wartości zmiennej będącej licznikiem
Schemat uproszczonej postaci instrukcji:
for (licznik=wart_pocz; warunek kontynuacji; sposób zmiany licznika)
{instrukcje powtarzane}
Sprawdzić i zrozumieć działanie skryptu:
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<20; i++)
{
document.write(i+"<BR />");
}
</SCRIPT>
Zagnieżdżanie pętli for:
<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<6; i++)
for( k=1; k<4; k++)
{
document.write(i*k+"<BR />");
}
</SCRIPT>
Sprawdzić i zrozumieć działanie powyższych skryptów.
Zadania do wykonania
1. Dla dowolnych wartości współczynników równania kwadratowego: a, b, c obliczyć deltę i
wypisać na ekranie komunikat czy jest ona ujemna, równa zero czy dodatnia (wykorzystać
instrukcję if).
2. Wykonać pętlę w której na stronie wypisywane są liczby parzyste od 0 do 100.
3. Wykonać pętlę która utworzy przy pomocy znaczników HTML obramowaną tabelę o 1 wierszu i 20 komórkach w wierszu. W komórkach umieścić liczby naturalne od 1 do 20.
4. Wykonać pętlę wypisującą wszystkie wartości funkcji sin(x) dla kątów od 0 d 900 z krokiem 10
spełniające warunek sin(x)∈(0.3, 0.6).
Przykładowe pomoce internetowe do JavaScript
http://www.java2s.com/Tutorial/JavaScript/CatalogJavaScript.htm
http://kursy.skryptoteka.pl/kurs.php?kurs=javascript&strona=0
http://webmade.org/kursy-online/kurs-javascript.php
i inne
