MTDI
Wykład 9
JavaScript w dokumentach HTML
JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.
JavaScript jest oddzielnym językiem (nie jest
uproszczoną wersją Javy).
Moż
o e
ż
e b
y
b ć
ć o
sa
o
d
sa za
d
n
za y
n w
w in
i n
n ych
n
ych pr
p og
o r
g am
a ach
a
,
ch na
n
a pr
p zykła
zykł d
a
d w
w
przeglądarce internetowej. Kod JavaScript wykonuje przeglądarka (po stronie klienta)
Łatwo można wykonać podgląd kodu (źródło strony).
Javascript jest łatwy w nauce i pozwala na pewne
„zdynamizowanie” stron internetowych.
Przeglądarka IE pyta o zezwolenie na wykonanie skryptu.
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między
znacznikami <SCRIPT> i </SCRIPT>.
<SC
S RIP
I T
P
T L
A
L N
A GUAG
A E=
E "Jav
a aS
a c
S ri
r p
i t
p "
t >
treść skryptu
</SCRIPT>
<HTML><HEAD></HEAD>
<BODY>
<P> To jest tekst 1</P>
<SCRIPT LANGUAGE="JavaScript">
treść skryptu 1
</SCRIPT>
<P>
P T
o
T
o j
es
e t
s t
ek
e s
k t
s 2<
2 /P>
P
<SCRIPT LANGUAGE="JavaScript">
treść skryptu 2
</SCRIPT>
</BODY></HTML>
Może istnieć wiele skryptów naprzemiennie z
pozostałym kodem HTML
Aby tworzyć działające skrypty JavaScript wymagane są:
- jakaś metoda wprowadzania i
przechowania danych (liczb, tekstów)
- jakieś instrukcje, które umożliwią
obliczenia w
y
w ników
- jakieś metody pokazania wyniku
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// obiekt document i jego metoda write - wypisanie tekstu i obliczonych wartości document.write ("To jest zwykły tekst");
// wysyłamy też do przeglądarki znaczniki HTML
document.write ("<BR />");
//nadajemy 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>
<P> a to już akapit poza skryptem</P>
</BODY></HTML>
właściwość
obiektu Math
Komentarze
Komentarz o kilku wierszach,
/*
treść komentarza
*/
Jednowierszowy komentarz
// tekst
Wykorzystywane są w celu:
- opisy wyjaśniające
- dezaktywowanie instrukcji (testy, błędy)
Są to nazwy elementów (zmiennych, obiektów, funkcji) Zmienne służą do przechowania wartości określonego typu Jednym z podstawowych sposobów nadania wartości zmiennej jest instrukcja przypisania (nadania wartości)
Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!) Mu
M si
i s
ię
i z
aczyn
y ać o
d l
ilt
i e
t ry
Ważne duże i małe litery ! (w odróżnieniu od innych języków) Przykłady identyfikatorów dla zmiennych:
x
alfa
Alfa
mojaZmienna
B11
c_33
to dwie różne
styl
zmienne
"wielbłądzi"
Liczby
2
34
-5
34.6
1.3e-4
Teksty
"Kowalski " albo 'Kowalski'
Lo
L g
o i
g czn
i
e
czn
true
false
Arytmetyczne: +
-
*
/ %(reszta z dzielenia)
Przypisania:
=
+= x+=5 odpowiada x=x+5,
–= x–=5 odpowiada x=x–5,
*= x*=5 odpowiada x=x*5,
/=
x
/
x =5
5
o
d
o p
d o
p w
o i
w a
i d
a a
d
a x
=
x x/
x 5,
5
++
inkrementacja – zwiększenie o 1 (x++ odpowiada x=x+1)
--
dekrementacja – zmniejszenie o 1 (x-- odpowiada x=x-1)
%= reszta z dzielenia (x%=5 odpowiada x=x%5) operator + służy też do konkatenacji (łączenia tekstów)
"Mateusz " + 'Kowalski'
Przykładowe wykorzystanie operatorów:
<SCRIPT LANGUAGE="JavaScript"> a=34; //instrukcja nadania wartości (przypisania) x = 7; //początkowo x ma wartość 7
x++; //zwiększamy x o 1
x += 4; //dodajemy 4 do x (lub:
x=x+4 )
x
x %
= 1
0
1 ;
0 //reszt
e
a
a z
d
z zi
d e
zi l
e e
l n
e i
n a
a z p
z r
p zez
ze 10
1 ,
0 a
a wi
w ę
i c
ę ….. 2
b=2*a;
b--;
c=b+x;
//tu trzeba by wypisać wartości na ekranie, zaraz się nauczymy
</SCRIPT>
wyrażenie operator wyrażenie
== !=(nierówne)
<= < > >=
Przykładowo:
x==5 x>=3 a+b> 3*y
jest to pytanie: czy jest spełnione?
odpowiedź: tak lub nie (true /false)
Wynik porównania może być wstawiony i przechowany w zmiennej: z34 = 5<=6 //zmienna z34 będzie miała wartość true
Używane też w innych instrukcjach (np. warunkowej) – o tym za chwilę
• koniunkcja (i)
&&
• alternatywa (lub)
||
• negacja
!
true &&
&
& false da
d j
a e false
!false daje true
Przykład:
x=9;
y = (x>0) && (x<=10);
zmienna y będzie miala wartość true
Instrukcje języka oddzielamy średnikami (jeśli
zapisujemy w tym samym wierszu).
Czasem blok kilku instrukcji otaczamy klamrami { }
zazwyczaj we wnętrzu instrukcji warunkowych i
iteracyjnych (np. if, for, while) – o nich za chwilę
<SCRIPT LANGUAGE="JavaScript">
instrukcja1;
{
instrukcja2;
traktowany w
instrukcja3;
całości jako
instrukcja4;
blok instrukcji
}
</SCRIPT>
- przypisania (nadania wartości);
- warunkowe
- pętle
- wykonania funkcji (metody obiektu)
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 po
p d
o o
d b
o n
b e
n
e j
ak
a
k w
E
x
E c
x e
c l
e u)
u , za
w
za i
w e
i r
e aj
a ące
ą
ce lilczb
i
y
czb ,
y op
o e
p r
e at
a or
o y,
y n
a
n w
a i
w a
i sy
a
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 i je pomijamy w przypadku operatorów ++ i –
opcjonalność podkreślono nawiasami [ ]
Przykłady instrukcji przypisania
x=5;
stałe - liczby dziesi
alfa= 3*x;
ętne z
b15=(3-x)+2.7/alfa;
KROPKĄ!!!
b15++;
x+=4;
napis = 'Uwaga';
czy = x>0;
Jak
Ja w
k i
w d
i zi
d m
zi y
m zmi
zm e
i n
e n
n e
e mo
m g
o ą
g
ą by
b ć
y róż
ó n
ż ych
n
ych typó
yp w
ó :
w l
ilczb
i
y
czb
(całkowite, dziesiętne), teksty, wartości logiczne.
TYP zmiennej zależy od typu wartości – nie musimy definiować typu zmiennej.
Rodzi to czasem problemy:
a=2 + 2;
4
b= '2'+ '2'
22
c= 2 +'2'
???
Oczywiście ważna jest kolejność instrukcji przypisania!
a=5; //nadajemy wartość
a++; //dodajemy 1 - to ma sens
a+
a +; /
/ni
n e
i zn
e
a
zn n
a e
n
e a – bł
b ą
ł d
ą !
d
a=5;
Instrukcja wypisania na ekranie
document.write (elementy);
Elementy (stałe, zmienne, wyrażenia, stałe tekstowe) od
o d
d zi
d e
zi l
e a
l m
a y pr
p zeci
ze n
ci ka
n
m
ka i
i lu
l b
u
b zna
zn ka
a
m
ka i
i +
document to wbudowany obiekt w JavaScript, write ( pisz) to jedna z jego funkcji (tzw. metoda) identyfikator obiektu i identyfikator jego metody oddzielamy kropką
<SCRIPT LANGUAGE="JavaScript"> document.write ("To jest zwykły tekst<BR />"); dana = 5; //przypisujemy wartość zmiennej
x = dana/3;//niech x będzie równe dana podzielone przez 3
// wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : ",x,"<BR />"); na
n pi
p s
i ="M
" a
M te
t usz "
"
+
'
Ko
K wals
l ki'i;
document.write(napis);
</SCRIPT>
Jak widzimy można wysyłać do przeglądarki znaczniki HTML(dla pozycjonowania, formatowania itp.)
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ą.
<SC
S R
C I
R PT
P
T l
an
a g
n u
g a
u g
a e
g =
e "Ja
J v
a a
v S
a c
S r
c ipt
p ">
raz=2;
alert("Witaj!");
alert("Witaj "+raz+"-gi raz");
</SCRIPT>
dokładniej window.alert , ale domyślny obiekt to window
Obiekt Math (uwaga! duża litera M) Wbudowany obiekt Math zawiera wartości
matematyczne, jako właściwości (ang. property) i funkcje standardowe jako metody (ang. method).
Są tutaj przechowywane pewne stałe matematyczne: Ma
M th.
h pr
p op
o e
p rty
lub gotowe funkcje
Math. method
gdzie property lub method jest jednym z podanych niżej elementów.
E
e - stała Eulera, która wynosi ok. 2.718
PI
war
a toś
o ć
ś
ć l
iczb
c
y
zb
y π,
π c zy
c
l
zy i ok
o .
k 3
.
3 14
1 1
4 5
1 9
5
document.write(Math.E);
abs(wyrażenie)
wartość bezwzględna liczby
cos(wyrażenie)
funkcje trygonometryczne (argument w
sin(wyrażenie)
radianach!!!)
tan(liczba)
ceil(liczba)
zaokrąglenie do całkowitej w górę
floor(liczba)
zaokrąglenie do całkowitej w dół
rou
o n
u d
n (
d li
l c
i zba
b )
zaok
o rągl
g e
l ni
n e
i d
o
d
o n
a
n jb
j l
b i
l ż
i szej
j c
ałk
ł ow
o it
i ej
e
exp(liczba)
ex UWAGA!!!
log(liczba)
logarytm naturalny liczby !
wartość liczby1 podniesionej do potęgi pow(liczba1,liczba2)
liczby2 (UWAGA – 2 argumenty)
wartość pseudolosowa z przedziału
random()
(0,1) – bez argumentu
sqrt(liczba)
pierwiastek kwadratowy liczby
<SCRIPT LANGUAGE="JavaScript"> document.write(Math.sin(4*Math.PI/180)+"<BR />");
</SCRIPT>
lub wykorzystując zmienną:
<SC
S R
C I
R PT
P
T L
A
L N
A G
N UA
U G
A E=
E "Ja
J v
a a
v S
a c
S r
c ipt
p ">
wynik=Math.sin(3*Math.PI/180);
document.write(wynik);
//można też
alert ("Wynik=:"+wynik); //w dodatkowym oknie
</SCRIPT>
<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
x =
1 (-b-
b pd
p e
d l
e ta)
a /2/
2 a;
a //al
a bo
b
o …/
(2*
2 a)
a
x2=(-b+pdelta)/2/a;
x2:-0.276393202250021
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!)
2
sin x
3
− ( x − 3 x
)
y =
x−3 + 4
zapis w skrypcie JavaScript
x=Math.PI; //musimy określić wartość x
y=
y (Mat
a h.
h po
p w
o (Ma
M t
a h.
h s
. i
s n(
n x)
x ,2
, )
2 -
Mat
a h.
h po
p w
o ((x
( -
x 3)
3 *x,
x 1/
1 3)
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
wprowadzać zmienne
2
sin x
3
− ( x − 3 x
)
pomocnicze
y =
liczymy etapami….
x−3 + 4
<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>
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 klikamy menu
Skrypt
Po odświeżeniu strony w konsoli pojawi się komunikat: SCRIPT5009: Brak definicji „math”
Jeszcze jeden prosty przykład:
<SCRIPT LANGUAGE="JavaScript">
//przeciwprostokątna
a=3;
b=4;
c=Math.sqrt(a*a+b*b);// albo c=Math.pow(a*a+b*b,1/2) document.write("Wynik:",c);
</SC
S R
C I
R PT
P >
T