docx=5
download 
Reklamacja Transkrypt
x=5
Mechatronika
PWSW
Informatyka
Wykład 3
JavaScript
Język programowania:
• interpretowany,
• zorientowany obiektowo,
• skryptowy.
JavaScript jest oddzielnym językiem, nie jest uproszczoną
wersją Javy.
Osadzany w innych programach, na przykład w plikach
HTML, interpreter zaimplementowany we wszystkich
przeglądarkach
Ma dostęp do obiektów otoczenia (np. modelu
obiektowego przeglądarki internetowej – DOM – Dynamic
Object Model), można sprawować nad tym otoczeniem
kontrolę
Porównanie
JavaScript
Interpretowany przez klienta
Java
Wykonywany przez klienta
Tworzy skrypty, które mogą
Tworzy "aplety", które są
być bezpośrednio wstawiane wywoływane ze strony HTML
do stron HTML
Łatwy
Wymaga doświadczenia
programistycznego
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach HTML.
Skrypt JavaScript umieszczane są między znacznikami
<SCRIPT> i </SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
treść skryptu
</SCRIPT>
Treść skryptu stanowią instrukcje wykonawcze (pisane w
osobnych wierszach)
Można pisać dwie instrukcje w jednym wierszu (trzeba je
wtedy oddzielać znakiem ;
Instrukcje wykonywane są po kolei – od pierwszej do
ostatniej
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// obiekt document i jego metoda write - wypisanie tekstu
document.write ("To jest zwykły tekst<BR/>");
document.write ("<BR/>"); // wysyłamy znacznik html
//przypisujemy wartość zmiennej
x=5;
// ... i wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : ",x);
document.write ("<BR>To jest liczba PI:",Math.PI);
</SCRIPT>
</BODY></HTML>
obiekt
Zasady tworzenia skryptów JavaScript
Komentarze
Komentarz o kilku wierszach,
/*
treść komentarza
*/
Jednowierszowy komentarz
// tekst
Można tu tworzyć zmienne przechowujące wartości
(liczbowe, tekstowe, logiczne i inne)
Nazwa zmiennej musi się zaczynać od litery – potem ciąg liter
lub cyfr (bez spacji) – dopuszczalny w nazwie znak _
Ważne duże i małe litery.
Najczęściej zmienną tworzy tzw. instrukcja przypisania (nadania
wartości)
zmienna = wyrażenie
np.
x=5
y=12
z= x+y
v=x/z+(1-x)/y
Zamiast = mogą być też inne
operatory przypisania
Wyrażenia po prawej stronie znaku = budujemy bardzo podobnie jak w
Excelu
Operatory
Arytmetyczne: +
*
/ %(reszta z dzielenia)
Przypisania:
=
++
-+=
x+=5 odpowiada x=x+5, zwiększ o 5
–=
x–=2 odpowiada x=x–2, zmniejsz o 2
*=
x*=3 odpowiada x=x*3, pomnóż x przez 3
/=
x/=5 odpowiada x=x/5, podziel x przez 3
%=
x%=5
odpowiada
x=x%5
(reszta z dzielenia x przez 5)
Przykładowo:
x = 7;
x++;
x += 4;
x - -;
x %= 10;
+ też konkatenacja (łączenie tekstów)
"Mateusz" + "Kowalski"
stałe tekstowe
" lub '
Operatory porównania
==
!=(nierówne)
<=
<
>
>=
Przykładowo:
4==5
3>=x
3!=4
(x=2)<(3*y+50);
Porównania używane są w instrukcji if i pętlach
warunkowych
Można też przypisywać ich wartość wartość do
zmiennej typu Boolean
Operatory logiczne
• koniunkcja (i)
&&
• alternatywa (lub)
||
• negacja
!
true && false daje false
!false daje true
Instrukcja wypisania na ekranie
document.write (elementy);
document to wbudowany obiekt w JavaScript, a write (pisz) to jedna z
jego funkcji (tzw. metoda)
identyfikator obiektu i identyfikator jego metody oddzielamy kropką
Przykład
<SCRIPT LANGUAGE="JavaScript">
document.write ("To jest zwykły tekst<BR />");
x=5; //przypisujemy wartość zmiennej
// wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : ",x,"<BR />");
napis="Mateusz " + 'Kowalski';
document.write(napis);
</SCRIPT>
Jak widzimy można wysyłać do przeglądarki znaczniki HTML(dla pozycjonowania,
formatowania itp.)
W document.write elementy w nawiasie okrągłym
oddzielamy przecinkami , (lub znakiem +)
teksty piszemy otoczone znakami " " lub ' '
elementami mogą być nazwy zmiennych lub
wyrażenia – wtedy wyświetlana jest ich wartość
x=6;
y=8;
document.write("Wartość zmiennej <I>x</I> : " , x , "<BR />");
document.write("Stosunek x do y wynosi : " ,x/y , "<BR />");
document.write("Suma x i y wynosi : " ,(x+y) , "<BR />");
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(x).
<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>
Obiekt Math
Obiekt Math przechowuje wartości matematyczne,
jako właściwości i metody.
Są tutaj przechowywane pewne stałe i funkcje
matematyczne.
Składnia:
Math.stała (właściwość)
lub
Math.funkcja (metoda)
gdzie property lub method
podanych niżej elementów.
jest
jednym
z
właściwości
E
e - stała Eulera, która wynosi ok. 2.718
PI
wartoŚĆ liczby π, czyli ok. 3.14159
i inne np. LN2
metody
abs(wyrażenie)
wartość bezwzględna liczby
cos(wyrażenie)
sin(wyrażenie)
tan(liczba)
funkcje trygonometryczne (argument w
radianach)
ceil(liczba)
zaokrąglenie do całkowitej w górę
floor(liczba)
zaokrąglenie do całkowitej w dół
round(liczba)
zaokrąglenie do najbliższej całkowitej
exp(liczba)
ex
log(liczba)
logarytm naturalny liczby !
pow(liczba1,liczba2)
wartość liczby1 podniesionej do potęgi
liczby2
random()
wartość pseudolosowa z przedziału
(0,1)
sqrt(liczba)
pierwiastek kwadratowy liczby
Instrukcje
Instrukcje języka oddzielamy średnikami (jeśli zapisujemy
w tym samym wierszu). Blok instrukcji otaczamy klamrami
{ } – zazwyczaj w ciele funkcji, instrukcjach warunkowych i
iteracyjnych (np. if, for, while)
Jeszcze raz przypomnijmy……..
Ważne są duże i małe litery w identyfikatorach (nazwach)
zmiennych, obiektów, metod, funkcji!!!!
Instrukcja przypisania
zmienna operator_przypisania [wyrażenie];
Po lewej stronie operatora tylko nazwa zmiennej!!! inicjowanej (pierwszy raz
definiowanej) lub istniejącej i przedefiniowywanej.
Po prawej stronie operatora piszemy wyrażenie (bardzo podobne jak w
Excelu), zawierające liczby, operatory, nawiasy okrągłe, funkcje – metody
obiektów, oraz zmienne o ZNANYCH WARTOŚCIACH
Wyrażenie jest obliczane i jego wartość przechowana w zmiennej
Wyrażenie jest opcjonalne (pomijamy w przypadku operatorów ++ i --) –
opcjonalność określają nawiasy [ ]
Przykłady:
x=5;
alfa= 3*x;
b15=(3-x)+2.7/alfa;
b15++;
x+=4;
stałe - liczby dziesiętne z
KROPKĄ!!!
Oczywiście ważna jest kolejność instrukcji przypisania!
a=5;
a++; //to ma sens
b++; //jeśli nieznane b - błąd
b=5;
a=78
a= a+4; //zmiana wartości a
a+=4 ; //tak też można zapisać zwiększenie wartości a o 4
Przykład pisania wyrażeń
y=
sin x − 3 ( x − 3 )x
zapis w skrypcie JavaScript
2
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
Debugging – detekcja błędów kodu JavaScript
Przykładowo:
…
document.write("log(5)<br />");
document.write(math.log(5)/Math.log(10)+"<br />");
…
W IExplorerze – Menu Narzędzia (Narzędzia developerskie - F12) –
w oknie konsoli klikamy menu Skrypt
Po odświeżeniu strony w konsoli pojawi się komunikat:
SCRIPT5009: Brak definicji „math”
