JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu...

84
JavaScript mgr inż. Remigiusz Pokrzywiński

Transcript of JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu...

Page 1: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

JavaScript

mgr inż. Remigiusz Pokrzywiński

Page 2: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Czym jest JavaScript

JavaScript – to skryptowy język umożliwiający rozbudowę dokumentów HTML o możliwość interakcji z użytkownikiem oraz sprawdzania poprawności wprowadzanych danych.

JavaScript – język interpretowany przez wbudowany interpreter przeglądarki, na komputerze klienta. (brak kodu maszynowego – „010011011101”)

Page 3: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

SERWER

1. Zapytanie o stronę GET

Nasłuchuje Port :80

2. Odpowiedź w postaci plik z kodem

.html + .js

3. Wykonanie Kodu przez klienta

Page 4: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Umieszczanie skryptu w treści HTML (osadzony)

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

Kod skryptu

</script>

<head>

<body>

<script type="text/javascript">

Kod skryptu

</script>

</body>

</html>

określenie rodzaju języka skryptowego

Page 5: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Umieszczanie skryptu w pliku .js (skrypt zewnętrzny)

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript” src=”lokalizacja/nazwa.js”>

</script>

<head>

<body>

</body>

</html>

Page 6: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Instrukcja document.write()

document.write(”Tekst”);

obiekt.metoda(argument metody);

Page 7: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Wyrażenia

Każdy język programowania pozwala na wykonanie różnych obliczeń tzw. wyrażeń.

Zapisuje się je stosując typowe symbole matematyczne np.:

(1 + 2)*(4 - 3)

operatory arytmetyczne

- różnego rodzaju operatory

- nawiasy okrągłe do określania kolejności działań

Page 8: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Wyrażenia cd.

Liczbami w wyrażeniach mogą być:

- liczby całkowite np.: 1, 4, 2345, -15, -1000;

- liczby zmiennoprzecinkowe (rzeczywiste) np.: 3.24, 8.34

część ułamkową od części całkowitej oddzielamy kropką

<script>

document.write( (1 + 2.54) / (3 + 4) );

</script>

Page 9: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zmienne

Zmienna - konstrukcja programistyczna posiadająca trzy podstawowe atrybuty: symboliczną nazwę, miejsce przechowywania i wartość.

Zmienna służy do przechowywania wartości np.: zmienna wynik

var wynik = 5;

nazwa zmiennej wartość zmiennej

słowo kluczowe

Page 10: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Nazewnictwo zmiennych

Reguły:

- pierwszy znak musi być literą (alf. łacinskiego) lub podkreśleniem „ _ „

- Kolejne znaki mogą być literami łacińskimi, cyframi lub znakiem podkreślenia

- nie mogą być zarezerwowanym słowem kluczowym np.: break, case itd.

Przykłady poprawnych: Przykłady błędnych:

• abc • Moja_Zmienna_5 • ___test___ • JeStWeSola

• 5test • ilość • moja zmienna • for • zmienna$a

Page 11: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Nazewnictwo zmiennych cd.

Wielkość liter ma znaczenie:

mojazmienna to nie to samo co mojaZmienna

Page 12: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Deklarowanie i inicjalizacja zmiennych

Deklaracja zmiennych

var suma; lub var suma; var ilosc;

var ilosc;

Przypisywanie wartość

var n1 = 1, n2 = 2;

var suma;

suma = n1 + n2 + 4;

Page 13: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Typy danych

• liczby (Number); • ciągi znaków (String); var hello = "Hello"; var world = 'World';

document.write(hello + " " + world + "!");

• wartości logiczne (Boolean); true; false; • obiekty (Object); • tablice (Array); • dwa typy/wartości specjalne: Null i Undefined.

typy złożone

if (typeof(zmienna) == "undefined") alert("Niezdefiniowana zmienna!");

Page 14: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory arytmetyczne

+ dodawanie; 3 + 2 = 5;

- odejmowanie; 3 - 2 = 1;

* mnożenie; 3 * 2 = 6;

/ dzielenie; 3 / 2 = 1.5;

% dzielenie modulo (reszta z dzielenia); np. 7 % 3 = 1;

Page 15: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory jednoargumentowe

- minus k = -n; - zmiana wartości

- inkrementacja

var n = 5;

n++; // n = 6

++n; // n = 7

- dekrementacja

n--; // n = 6

--n; // n = 5

Page 16: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory jednoargumentowe

Prefix a postfix

var n1 = 1, n2 = 2;

var w1 = ++n1 + ++n2; // w1 = 5, n1 = 2, n2 = 3

var k1 = 1, k2 = 2;

var w2 = k1++ + k2++; // w2 = 3, k1 = 2, k2 = 3

Page 17: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Nawiasy

• Do grupy operatorów arytmetycznych zaliczają się też nawiasy ( ),

• służą do zmiany priorytetu wykonywanych działań.

• stosuje się tylko i wyłącznie nawiasy okrągłe, także gdy trzeba je zagnieżdżać (inne typy nawiasów są zarezerwowane do innych celów).

• var n = ((2 + 3) * 4) +5; // n = 25

Page 18: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Konkatenacja

Łączenie ciągów znaków: var s1 = "Witaj"; var s2 = "na stronie"; var s3 = s1 + " " + s2; // s3 = "Witaj na stronie„ Konwersje w konkatenacji: • suma liczby (Number) i ciągu znaków (String) - liczba zostanie

zamieniona na ciąg znaków, wynik będzie ciągiem znaków;

• suma wartości logicznej (Boolean) i ciągu znaków (String) - wartość logiczna zostanie zamieniona na ciąg znaków (będzie to "true" lub "false"); wynik będzie ciągiem znaków;

• suma liczby (Number) i wartości logicznej (Boolean) - wartość logiczna zostanie zamieniona na liczbę (0 dla false i 1 dla true); wynik będzie liczbą.

Page 19: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Konwersja typów danych

var n1 = "1"; var n2 = "2.5"; var n3 = "3"; n1 = parseInt(n1); // n1 = 1 n2 = parseFloat(n2); //n2 = 2.5 n3 = n3 * 1; // n3 = 3 var suma = n1 + n2 + n3; // suma = 6.5 Aby szybko zamienić wartość na ciąg znaków, możesz dodać do niej pusty ciąg znaków

var n = 123; n = n + ""; // n = "123"

Page 20: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operator równości „==”

Porównanie wartości (automatyczna konwersja

typów danych)

1 == 2; // false

2 == 2; // true

Czy różne?

1 != 2; // true

2 != 2; // false

Page 21: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Przyrównanie typów danych

1 === 1; // true

"1" === "1"; // true

1 === "1"; // false

1 === 2; // false

1 !== 1; // false

"1" !== "1"; // false

1 !== 2; // true

1 !== "1"; // true

Page 22: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory porównania

< mniejszy niż;

> większy niż;

<= mniejszy lub równy;

>= większy lub równy.

1 > 2; // false

2 > 1; // true

"abc" > "def"; // false

"abc" < "def"; // true

1 < "2"; // true

Page 23: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory logiczne

Negacja logiczna

!true; // false !false; // true Operator iloczynu logicznego służy do sprawdzenia czy obydwie wartości są prawdziwe (true).

false && false; // false false && true; // false true && false; // false true && true; // true

Page 24: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory logiczne cd.

Operator sumy logicznej służy natomiast do sprawdzenia czy co najmniej jedna z wartości jest prawdziwa (true).

false || false; // false

false || true; // true

true || false; // true

true || true; // true

(a > 0) && (b > 0) && (c > 0);

Page 25: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory bitowe

Operator negacji bitowej ~ (znak tylda) służy do negacji poszczególnych bitów w liczbie var n = 10; //0000000000001010 n = ~n; //1111111111110101 Operator iloczynu bitowego & sprawdza wartości poszczególnych bitów w liczbie, i na tej podstawie ustala wynik var n1 = 12; // 12 = 1100 var n2 = 10; // 10 = 1010 var n3 = n1 & n2; // 8 = 1000

Page 26: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory bitowe cd.

Operator sumy bitowej | var n1 = 12; // 12 = 1100 var n2 = 10; // 10 = 1010 var n3 = n1 | n2; // 14 = 1110 Operator różnicy symetrycznej XOR var n1 = 12; // 12 = 1100 var n2 = 10; // 10 = 1010 var n3 = n1 ^ n2; // 6 = 0110

Page 27: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory bitowe cd.

Operator przesunięcia bitowego w lewo <<

var n = 12; // 12 = 001100

n = n << 2; // 48 = 110000

Operator przesunięcia bitowego w prawo >>

var n = 48; // 48 = 110000

n = n >> 2; // 12 = 001100

Page 28: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Operatory przypisania

Podstawowy operator przypisania var zmienna = 1234; Operator postaci OP=

n += 2; // n = n + 2 n -= 2; // n = n - 2 n *= 2; // n = n * 2 n /= 2; // n = n / 2 n %= 2; // n = n % 2 n &= 2; // n = n & 2 n |= 2; // n = n | 2 n ^= 2; // n = n ^ 2 n <<= 2; // n = n << 2 n >>= 2; // n = n >> 2 n >>>= 2; // n = n >>> 2

Page 29: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Priorytety operatorów

Page 30: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Priorytety operatorów cd.

Page 31: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Instrukacja warunkowa if

Podstawową instrukcją warunkową jest instrukcja if.

Wygląda ona następująco:

if (warunek)

instrukcja;

if (a > 0) {

alert("a jest większe od zera");

} - inst. złożona

Page 32: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Instrukacja warunkowa if else

if (a == 0) alert("a jest równe zero"); else alert("a jest różne od zera"); if (a == 0) alert("a jest równe zero"); else if (a == 1) alert("a jest równe jeden"); else if (a == 2) alert("a jest równe dwa"); else if (a == 3) alert("a jest równe trzy"); else alert("a ma inną wartość");

Page 33: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Instrukcja switch

switch (a) { case 0: alert("a jest równe zero"); break; case 1: alert("a jest równe jeden"); break; case 2: alert("a jest równe dwa"); break; case 3: alert("a jest równe trzy"); break; default: alert("a ma inną wartość"); break; }

Page 34: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Pętla for

Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany warunek zostanie spełniony. for ( inicjalizacja; test_logiczny; inkrementacja ) instrukcja; • inicjalizacja - instrukcja wykonywana tylko raz na samym początku pętli.

Zwykle używa się jej do przypisania wartości początkowej do zmiennej która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest też licznikiem pętli;

• test_logiczny - dowolny warunek który będzie sprawdzany przed każdym obiegiem pętli (także tym pierwszym). W momencie gdy będzie on fałszywy, wykonywanie pętli zostanie przerwane;

• inkrementacja - instrukcja która będzie wykonywana po każdym obiegu pętli, a która ma za zadanie np. zwiększenie wartości zmiennej pełniącej rolę licznika pętli.

Page 35: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Przykłady pętli for

for (n = 0; n <= 9; ++n)

document.write(n);

for (n = 1; n <= 10; ++n)

zrob_cos_ciekawego();

Page 36: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Pętla zagnieżdżona

for (n = 0; n < 10; ++n) for (k = 0; k < 10; ++k) document.write(n * k); for (n = 0; ; ++n) { if (n == 10) break; document.write(n); }

Page 37: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Pętla while

Powtarza się, aż test logiczny będzie fałszywy

while ( test_logiczny ) {

instrukcja1;

instrukcja2;

...

}

Page 38: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Pętla do/while

Powtarza się, aż test logiczny będzie fałszywy do { instrukcja1; instrukcja2; ... } while ( test_logiczny );

Page 39: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Funkcje

Funkcja to zamknięty fragment skryptu oznaczony odpowiednią nazwą, który można wywołać, wielokrotnie odwołując się do tej nazwy. function nazwa_funkcji(argument1, argument2, …, argumentn){ instrukcje1; instrukcje2; … } function Witaj(imie) { document.write("Witaj, " + imie); } Witaj("Daniel");

Page 40: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Elementy funkcji

nazwa funkcji – dowolna nazwa spełniająca takie same wymogi jak nazwy zmiennych

(czyli pierwszym znakiem może być litera lub znak podkreślenia; kolejne znaki nazwy mogą być literą, cyfrą lub znakiem podkreślenia; nazwa nie może też być zarezerwowanym słowem kluczowym).

parametry (argumenty)– informacje przekazane do funkcji. Lista parametrów może być pusta, wówczas między nawiasami nic nie zostaje wpisane (nazwy parametrów również muszą spełniać wspomniane wcześniej wymagania).

Page 41: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Elementy funkcji cd.

W ciele funkcji może być umieszczona dowolna liczba instrukcji. Nawiasy klamrowe są obowiązkowe i nie można ich pominąć, nawet jeżeli funkcja zawiera tylko jedną instrukcję

Własne funkcje wywołuje się identycznie jak funkcje wbudowane - po prostu podaje się nazwę funkcji i w nawiasach okrągłych wartości parametrów.

Funkcje mogą też zwracać pewną wartość. Do zwrócenia wartości z funkcji używa się komendy return, po której podaje się wartość która ma zostać zwrócona z funkcji:

Page 42: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Elementy funkcji cd.

Ważną cechą instrukcji return jest to iż powoduje ona natychmiastowe przerwanie wykonywania funkcji i powrót do miejsca w skrypcie z którego funkcja była wywołana. Z tego też powodu możliwe jest także użycie komendy return bez podawania wartości która ma zostać zwrócona z funkcji, co jest użyteczne gdy piszemy funkcję która ma tylko coś zrobić (np. wypisać jakiś napis), ale nie ma zwracać żadnej wartości.

Poniższa funkcja drukuje wszystkie wartości z przedziału określonego parametrami, ale kończy drukować jeżeli przekroczy liczbę 100.

Page 43: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Iteracja i rekurencja

Iteracja i rekurencja są to dwa sposoby rozwiązywania problemów gdzie występuje konieczność wielokrotnego wykonywania pewnych operacji.

Z iteracją mamy do czynienia gdy do rozwiązania problemu jest zastosowana pętla wewnątrz której prowadzone są właściwe obliczenia.

Z kolei rekurencja polega na tym że funkcja wywołuje samą siebie i w ten sposób wykonywane są obliczenia.

W tym drugim przypadku należy też pamiętać aby określić warunek kiedy funkcja powinna bezpośrednio zwrócić wartość a nie wywoływać się po raz kolejny.

Bez tego obliczenia nie mogłyby się zakończyć!

Page 44: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Przykład iteracji

Funkcja licząca silnię w sposób iteracyjny:

Page 45: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Przykład rekurencji

Funkcja licząca silnię w sposób rekurencyjny:

Page 46: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty

Tablice i obiekty są złożonymi strukturami danych. Oznacza to że wewnątrz nich można przechowywać więcej niż jedną wartość.

JavaScript pozwala odwoływać się do obiektu tak jak do tablicy, i odwrotnie.

Obiekty w programowaniu służą do reprezentowania pewnych obiektów pochodzących ze świata rzeczywistego (np. drzwi), bądź też pewnych pojęć wirtualnych które istnieją tylko w pamięci komputera, takich jak np. ciąg znaków (String).

Page 47: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty cd.

Obiekt najłatwiej sobie można wyobrazić jako "pojemnik", wewnątrz którego umieszczone są zmienne i funkcje.

Zarówno do jednych i drugich można się odwołać podobnie jak do "zwykłych" zmiennych i funkcji, trzeba tylko przed ich nazwą umieścić obiekt którego są elementami i kropkę.

np.:

• obiekt_1.liczba = 200; • obiekt_1.wypisz();

Page 48: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty cd.

Aby utworzyć nowy pojedynczy obiekt możemy skorzystamy z poniższej konstrukcji:

Page 49: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty cd.

Aby odwołać się do danego obiektu z jego wnętrza stosujemy instrukcję this. Dzięki temu możemy w łatwy sposób wywoływać z wnętrza inne metody danego obiektu lub korzystać z jego właściwości:

Page 50: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty cd.

Gdy nasz obiekt już istnieje, możemy do niego dodawać nowe metody lub właściwości, tak samo jak to robimy normalnie dla obiektu window.

Page 51: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Obiekty cd.

Podobnie właściwości i metody możemy deklarować dla nowych obiektów:

Page 52: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tworzenie obiektu za pomocą konstruktora

Aby utworzyć kilka podobnych obiektów należy posłużyć się klasą obiektu. Klasa to rodzaj foremki, która opisuje nam jak będą wyglądać tworzone na jej podstawie nowe obiekty. W JS klasę tworzymy za pomocą zwykłej funkcji:

Page 53: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tworzenie obiektu za pomocą konstruktora cd.

Aby utworzyć nowy obiekt na podstawie istniejącej klasy stosujemy instrukcję new:

Page 54: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Usuwanie właściwości obiektu

Aby usunąć właściwość obiektu, skorzystamy z operatora delete:

Page 55: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tablice

Tablice w JavaScript są obsługiwane przez klasę Array. Obiekt tej klasy można utworzyć na trzy sposoby, poprzez wywołanie odpowiedniego konstruktora:

Page 56: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tablice cd.

Tworzenie tablicy przez umieszczenie w niej kolejnych elementów:

Page 57: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tablice cd.

Każdy element w tablicy posiada przypisaną pozycję (indeks w tablicy). Numeracja indeksów zaczyna się od zera. Do każdego elementu w tablicy można się odwołać podając w nawiasach kwadratowych indeks elementu.

Poniższy przykład pokazuje jak stworzyć tablicę, wypisać jedną z wartości która jest w niej zapisana, zmodyfikować ją i wypisać jeszcze raz:

Page 58: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Tablice cd.

Obiekt Array posiada także właściwość length, która zwraca indeks ostatniego elementu tablicy powiększony o 1 (czyli zwykle ilość elementów w tablicy). Można użyć tej właściwości do wypisania kolejnych elementów tablicy:

Page 59: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia

Zdarzenia w JavaScript jest to ogólny mechanizm pozwalający na uruchomienie dowolnego fragmentu skryptu JavaScript w momencie gdy wystąpi określone zdarzenie, np. przycisk zostanie kliknięty.

Zdarzenia które są dostępne dla skryptów JavaScript zazwyczaj są atrybutami znaczników, o nazwach rozpoczynających się od "on", np. zdarzenie kliknięcia myszką nazywa się onclick.

Page 60: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia myszy

Przeglądarka może wygenerować następujące zdarzenia związane z użyciem myszki na stronie WWW:

• onclick - pojedyncze kliknięcie (naciśnięcie i zwolnienie klawisza myszki);

• ondblclick - podwójne kliknięcie;

• onmousedown - wciśnięcie klawisza myszki;

• onmouseup - zwolnienie klawisza myszki;

• onmouseover - kursor myszki znalazł się w obszarze obiektu;

• onmousemove - kursor myszki został przesunięty;

• onmouseout - kursor myszki opuścił obszar obiektu.

Page 61: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia myszy cd.

Zdarzenia myszy posiadają następujące parametry dostępne poprzez obiekt event:

• clientX, clientY - względne współrzędne kursora myszki (względem obiektu który dostarczył procedurę obsługi zdarzenia);

• screenX i screenY - ekranowe (bezwzględne) współrzędne kursora myszki;

• button - numer klawisza myszki który był wciśnięty;

• altKey - czy klawisz Alt jest wciśnięty;

• ctrlKey - czy klawisz Control jest wciśnięty;

• shiftKey - czy klawisz Shift jest wciśnięty.

Page 62: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia klawiatury

Lista zdarzeń klawiatury jest krótka i zawiera tylko trzy pozycje:

• onkeypress - klawisz alfanumeryczny został wciśnięty;

• onkeydown - klawisz został naciśnięty;

• onkeyup - klawisz został zwolniony.

Zdarzenia klawiatury posiadają parametry altKey, ctrlKey oraz shiftKey określające czy dany klawisz specjalny był wciśnięty czy nie (analogicznie jak przy zdarzeniach myszy).

Page 63: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia formularza

Każdy formularz na stronie może wygenerować następujące dwa zdarzenia:

• onsubmit - formularz będzie wysłany.

• onreset - zawartość formularza jest czyszczona.

Pierwsze z tych zdarzeń (onsubmit) jest generowane w momencie gdy użytkownik wysyła formularz, czyli po naciśnięciu przycisku submit formularza lub naciśnięciu klawisza Enter na klawiaturze.

Page 64: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia formularza cd.

Page 65: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia kontrolek formularza

Zdarzenia mogą być także generowane przez kontrolki formularza. Oprócz wymienionych wcześniej zdarzeń myszy i klawiatury, kontrolki formularza mogą dodatkowo wygenerować następujące zdarzenia: • onfocus - kontrolka otrzymała fokus (dane z klawiatury będą trafiać właśnie do

niej); • onblur - kontrolk straciła fokus; • onselect - kontrolka została wybrana (wybranie kontrolki nie zawsze wiąże się z

przekazaniem jej fokusu); • onchange - zawartość kontrolki się zmieniła.

W praktyce zdarzenie onfocus można wykorzystać np. do podświetlenia za pomocą JavaScript pola do którego właśnie można wprowadzać dane, a zdarzenie onblur do usunięcia tego podświetlenia. To drugie zdarzenie można także wykorzystać do sprawdzenia czy dane wprowadzone do pola są poprawne - w przypadku błędnych danych skrypt może wyświetlić odpowiedni komunikat i ponownie przenieść fokus do pola, tak aby zablokować przejście do kolejnego pola formularza.

Page 66: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia kontrolek formularza cd.

Page 67: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Zdarzenia dokumentu

Zdarzenia dokumentu: • onload - strona została załadowana;

• onunload - strona jest zamykana;

Page 68: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Formularze

Formularze na stronach WWW są używane zazwyczaj do zebrania danych od osób odwiedzających stronę, a następnie ich wysłanie do serwera WWW.

Page 69: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Dostęp do obiektu formularza

Wszystkie formularze znajdujące się na stronie (może ich być więcej niż jeden) znajdują się w kolekcji „document.forms”.

Odwołanie się do formularza przez indeks = 0.

Odwołanie przez atrybut „name” lub „id”

dla „name” możliwe odwołanie

Indeks 0,1,2…n;

Page 70: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Dostęp do obiektu formularza cd.

W celu uproszczenia kodu skryptu warto przypisać sobie to odwołanie do formularza, do zmiennej. Przyspieszy to również pisanie kodu:

lub

Page 71: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Dostęp do kontrolek formularza

Wszystkie kontrolki formularza znajdują się w kolekcji elements w obiekcie formularza. Można się do nich odwoływać po indeksie lub po nazwie, analogicznie jak w przypadku odwołania do formularza:

Page 72: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Dostęp do kontrolek formularza cd.

Każda kontrolka formularza też jest obiektem. Posiada on m.in. właściwości odpowiadające atrybutom których można użyć w języku HTML. Przykładowo każda kontrolka posiada właściwość value, która przechowuje bieżącą wartość. Można ją wyświetlić np. w taki sposób, korzystając z JavaScript:

Możliwa jest oczywiście zmiana wartości pola:

Page 73: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Przykład

Page 74: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Sprawdzanie poprawności formularzy

Page 75: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków - łączenie

Innym sposobem łączenia stringów w jeden jest skorzystanie z

metody concat() - zwraca ona ciąg znaków składający się z połączonych: obiektu na którym wywołana została ta metoda, oraz wszystkich przekazanych parametrów.

Metoda ta może przyjąć dowolną ilość parametrów.

Page 76: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków - porównanie

Wartości typu string można też porównywać ze sobą. Służą do

tego standardowe operatory porównania:

== === != !== < <= > >=

Porównanie dokonywane jest wg porządku alfabetycznego.

Page 77: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – ilość znaków

Do pobierania ilości znaków w stringu, czyli jego długości,

służy właściwość „length”.

Page 78: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – operacje na znakach

Aby pobrać pojedynczy znak z ciągu znaków, należy użyć funkcji „charAt()”. Jako parametr podaje się indeks znaku (od zero do N, gdzie N to długość stringu minus jeden).

Page 79: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – zmiana wielkości znaków

Do zmiany znaków ma małe służy metoda toLowerCase(), a do zmiany na duże - metoda toUpperCase(). Metody te zwracają string w którym wszystkie znaki są zamienione na małe lub na duże (w zależności od użytej metody).

str.toUpperCase();

str.toLowerCase();

Page 80: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – wyszukiwanie podciągów

Do tego celu najlepiej jest wykorzystać gotową metodę „indexOf()” - zwraca ona pozycję w stringu, pod którą znajduje się przekazany jako parametr ciąg znaków (a dokładnie jego pierwszy znak).

W przypadku gdy nie uda się go odnaleźć, zwracana jest wartość -1.

Page 81: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – zmiana podciągów na inne

Klasa String udostępnia odpowiednią metodę do tego celu – „replace()”. Metoda ta przyjmuje dwa parametry - wyszukiwany ciąg znaków oraz ciąg znaków na który on ma zostać zamieniony.

Page 82: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – pobieranie podciągów

Do tego celu służą dwie metody: „slice()” i „substring()”.

Obydwie przyjmują dwa parametry: indeks pierwszego znaku zwracanego podciągu, oraz indeks znaku znajdującego się za ostatnim znakiem zwracanego podciągu. Można też wywołać te metody podając tylko jeden parametr - w takim przypadku zwrócony zostanie podciąg od podanego znaku do końca stringa.

Page 83: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – pobieranie podciągów cd.

Różnica pomiędzy tymi funkcjami jest jedynie w przypadku gdy poda się jako parametry wartości spoza zakresu [0, ilosc_znakow). W takim przypadku funkcja substring() zamieni je - ujemne na zero, a te większe od długości stringu na (ilosc_znakow - 1). Funkcja slice() przyjmie natomiast że liczby ujemne są to indeksy znaków liczone od końca stringu.

Page 84: JavaScript - rpzsp.cba.pl · Pętla for Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany

Ciągi znaków – podział na tokeny

Jest to operacja polegająca na podziale stringu na części w miejscach gdzie znajduje się np. określony znak, przykładowo średnik. To wykonania tej operacji najlepiej jest wykorzystać gotową metodę, „split()”do której jako parametr przekazuje się używany separator. Zwraca ona tablicę, której poszczególnymi elementami są rozdzielone podciągi (tokeny).