Prezentacja programu PowerPoint

Download Report

Transcript Prezentacja programu PowerPoint 

Informatyka
MPDI 3 semestr
Wykład 4
Język JavaScript
JavaScript
JavaScript jest to interpretowany, zorientowany
obiektowo, skryptowy język programowania.
JavaScript jest oddzielnym językiem (nie jest
uproszczoną wersją języka Java).
JavaScript jest stosunkowo łatwy w nauce i pozwala na
pewne „zdynamizowanie” stron internetowych.
Cechy JavaScript
Może być osadzany jako składnik pliku HTML,
Przeglądarka internetowa "potrafi" zinterpretować i
wykonać instrukcje języka JavaScript
Przeglądarki powinny mieć włączoną obsługę
JavaScript
Internet Explorer pyta o zezwolenie na wykonanie
skryptu.
… a zatem
HTML definiuje zawartość stron internetowych
CSS specyfikuje ich wygląd
może decydować o funkcjonowaniu
elementów strony - mając dostęp do obiektów modelu
obiektowego znaczników na stronie internetowej (tzw. –
DOM, document object model), można sprawować nad tym
otoczeniem kontrolę
JavaScript
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach
HTML. Skrypty JavaScript umieszczane są wewnątrz
znacznika <SCRIPT>
<SCRIPT language="JavaScript">
treść skryptu
</SCRIPT>
<HTML><HEAD></HEAD>
<BODY>
<P> To jest tekst 1</P>
<SCRIPT language="JavaScript">
treść skryptu 1
</SCRIPT>
<P> To jest tekst 2</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,
sprawdzanie warunków itp.,
- jakieś metody pokazania wyniku.
Jak widzimy skrypt składa się z wielu instrukcji
<SCRIPT LANGUAGE="JavaScript">
instrukcja1;
instrukcja2
instrukcja3; instrukcja4;
itd
</SCRIPT>
Instrukcje wykonywane są kolejno od pierwszej do
ostatniej (a zatem istotna jest ich kolejność)
Mogą być zakończone znakiem średnika ; (lub pisane w
osobnych wierszach)
Średnik konieczny do oddzielenia instrukcji pisanych
w tym samym wierszu
… kilka zasad pisania skryptów w języku JavaScript
Komentarze
Jednowierszowy komentarz: od znaków // do końca
wiersza
// tekst
Komentarz o kilku wierszach, pomiędzy znakami /* i */
/*
treść komentarza
treść komentarza
*/
Komentarze wykorzystywane są w celu:
- opisy wyjaśniające dla autora i użytkownika
- dezaktywowanie instrukcji (testy, błędy)
Zmienne przechowują dane !!!
• zmienne nie muszą być deklarowane! – utworzenie
zmiennej przez pierwsze nadanie wartości
• zmienna ma swoją nazwę (identyfikator)
• zmienna ma określony typ (np. liczba, tekst)
• zmienna ma wartość
x23
liczba całkowita
4
identyfikator
(nazwa) zmiennej
typ zmiennej
wartość
zmiennej
Identyfikatory
Identyfikatory 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)
Identyfikator to:
• Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!)
• Musi się zaczynać od litery- UWAGA! 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
to dwie różne
zmienne
mojaZmienna
styl
"wielbłądzi"
B11
c_33
Instrukcje JavaScript – wykonanie akcji!
Instrukcje języka oddzielamy średnikami (konieczne
jeśli zapisujemy kilka instrukcji w tym samym wierszu- jeśli w
osobnych wierszach to średniki można pominąć).
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;
{
traktowany w
instrukcja2
całości jako
instrukcja3;instrukcja4;
blok instrukcji
}
</SCRIPT>
Typy instrukcji
- przypisania (nadania wartości zmiennej)
- warunkowe
- iteracje (pętle)
- wykonania funkcji (metody obiektowej lub
własnej funkcji użytkownika)
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 musi być "obliczalne" – wszystkie jego elementy
muszą być znane, przede wszystkim użyte w nim zmienne.
Obliczona wartość wyrażenia jest przechowana w zmiennej.
[ ] oznaczają, że wyrażenie jest opcjonalne (pomijamy
wyrażenie w przypadku operatorów ++ i --)
Postacie wyrażeń
stała
zmienna
funkcja(wyrażenie)
wyrażenie operator wyrażenie
definicja rekurencyjna
dodatkowo stosujemy nawiasy (okrągłe) dla zmiany
domyślnego priorytetu operatorów
Operatory arytmetyczne
+
*
/
%
dodawanie
odejmowanie (także zmiana znaku)
mnożenie
dzielenie
reszta z dzielenia
addytywne
multipikatywne
Oczywiście operatory * / maja wyższy priorytet od + i –
Uwaga: istnieje operator ^ , ale nie służy do potęgowania
operator + służy też do konkatenacji (łączenia tekstów)
"Mateusz " + 'Kowalski'
para " lub para '
Operatory przypisania
=
+=
–=
*=
/=
++
––
%=
x+=5 odpowiada x=x+5,
x–=5 odpowiada x=x–5,
x*=5 odpowiada x=x*5,
x/=5 odpowiada x=x/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)
Operatory porównania
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)
Porównania mogą być przypisane do zmiennej:
z34 = 5<=6 (zmienna z34 będzie miała wartość true)
Używane też w innych instrukcjach (np. warunkowej) – o
tym dowiemy się później
Operatory logiczne
• koniunkcja (i)
&&
• alternatywa (lub)
||
• negacja
!
true && false daje false
!false daje true
Przykład 1
<SCRIPT language="JavaScript">
x=7
</SCRIPT>
Wykonanie takiej instrukcji:
• inicjuje zmienną o identyfikatorze x
• nadaje jej wartość 7 (typ liczbowy)
• zmienną można wykorzystać w następnych instrukcjach
Przykład 2
<SCRIPT language="JavaScript">
x=5;
alfa= 3*x;
b15=(3-x)+2.7/alfa;
b15++;
x+=4.5;
</SCRIPT>
Stałe liczbowe:
liczby całkowite
liczby dziesiętne z KROPKĄ!!!
Przykład 3:
<SCRIPT LANGUAGE="JavaScript">
x = 7; //początkowo x ma wartość 7
x++; //zwiększamy o 1
(lub:
x=x+4 )
x += 4; //dodajemy 4 do x
x %= 10; //reszta z dzielenia z przez 10, a więc ….. 2
//tu trzeba by wypisać wartość x na ekranie, zaraz się nauczymy
</SCRIPT>
Przykład 4:
<SCRIPT LANGUAGE="JavaScript">
x = 7; //początkowo x ma wartość 7
x /= 2; //dzielimy przez 2 i wynik w tej samej zmiennej x
y = 3*x-1; //nowa zmienna typu liczbowego
z = x>=y //zmienna z będzie typu logicznego (true/false)
napis = "To jest tekst";//zmienna typu tekstowego
</SCRIPT>
Typ zmiennej wynika z typu nadanej wartości
(liczbowy, logiczny, tekstowy)
Są też inne typy
Oczywiście ważna jest kolejność instrukcji
przypisania!
a=5;
a++; //to ma sens – teraz a ma wartość 6
b++; // jeśli nieznana wartość zmiennej b to błąd!
b=2*a; //to ma sens
c= 3*z; //błąd – nieznane x
Instrukcja wypisania na ekranie
document.write (elementy);
document to wbudowany obiekt w JavaScript,
write (pisz) to jedna z jego funkcji (tzw. metoda)
identyfikator obiektu i identyfikator jego
metody oddzielamy kropką
Elementy listy w nawiasie oddzielamy
przecinkami lub znakiem +
document.write (element1, element2, element3);
document.write (element1+element2+ element3);
Elementami mogą być:
- teksty – w " " lub ' ' (także znaczniki HTML)
- wyrażenia obliczeniowe – wyświetlana jest ich
obliczona wartość – wszystkie elementy wyrażenia
muszą być znane i poprawne (wartości zmiennych,
operatory, funkcje matematyczne)
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 o znanej roli,
tu chcieliśmy "złamać" wiersze na stronie
Błędy
Internet Explorer - F12 – narzędzia deweloperskie (konsola)
<SCRIPT LANGUAGE="JavaScript">
document.write ("To jest tekst<BR />);
</SCRIPT>
błąd niedomknięcia cudzysłowu
na stałej znakowej
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY style="font-size:25px">
<SCRIPT LANGUAGE="JavaScript">
document.write ("<P>Obliczenie pola trójkąta</P>");
a=5
h=7.5
P=a*h/2
document.write("Podstawa= ",a,"<BR />")
document.write("Wysokość= ",h,"<BR />")
document.write ("Pole powierzchni=",P)
</SCRIPT>
<P> Koniec </P>
</BODY></HTML>
Inna metoda wyprowadzenia danych wyświetlanie w dodatkowym okienku
alert (wyrażenie typu tekstowego)
dokładniej window.alert , ale domyślny obiekt to window
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>
używamy znaku + do połączenia elementów
(konkatenacja)