JavaScript
Transkrypt
JavaScript
JavaScript mgr inż. Remigiusz Pokrzywiński 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”) 1. Zapytanie o stronę GET SERWER Nasłuchuje Port :80 .html + .js 3. Wykonanie Kodu przez klienta 2. Odpowiedź w postaci plik z kodem Umieszczanie skryptu w treści HTML (osadzony) <!DOCTYPE html> określenie rodzaju języka skryptowego <html> <head> <script type="text/javascript"> Kod skryptu </script> <head> <body> <script type="text/javascript"> Kod skryptu </script> </body> </html> 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> Instrukcja document.write() obiekt.metoda(argument metody); document.write(”Tekst”); 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ń 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> 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; słowo kluczowe nazwa zmiennej wartość zmiennej 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: • • • • abc Moja_Zmienna_5 ___test___ JeStWeSola Przykłady błędnych: • • • • • 5test ilość moja zmienna for zmienna$a Nazewnictwo zmiennych cd. Wielkość liter ma znaczenie: mojazmienna to nie to samo co mojaZmienna Deklarowanie i inicjalizacja zmiennych Deklaracja zmiennych var suma; lub var ilosc; Przypisywanie wartość var n1 = 1, n2 = 2; var suma; suma = n1 + n2 + 4; var suma; var ilosc; 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); typy złożone tablice (Array); dwa typy/wartości specjalne: Null i Undefined. if (typeof(zmienna) == "undefined") alert("Niezdefiniowana zmienna!"); 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; 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 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 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 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ą. 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" 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 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 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 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 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); 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 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 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 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 Priorytety operatorów Priorytety operatorów cd. 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 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ść"); 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; } 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. Przykłady pętli for for (n = 0; n <= 9; ++n) document.write(n); for (n = 1; n <= 10; ++n) zrob_cos_ciekawego(); 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); } Pętla while Powtarza się, aż test logiczny będzie fałszywy while ( test_logiczny ) { instrukcja1; instrukcja2; ... } Pętla do/while Powtarza się, aż test logiczny będzie fałszywy do { instrukcja1; instrukcja2; ... } while ( test_logiczny ); 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"); 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). 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: 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. 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ć! Przykład iteracji Funkcja licząca silnię w sposób iteracyjny: Przykład rekurencji Funkcja licząca silnię w sposób rekurencyjny: 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). 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(); Obiekty cd. Aby utworzyć nowy pojedynczy obiekt możemy skorzystamy z poniższej konstrukcji: 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: 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. Obiekty cd. Podobnie właściwości i metody możemy deklarować dla nowych obiektów: 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: Tworzenie obiektu za pomocą konstruktora cd. Aby utworzyć nowy obiekt na podstawie istniejącej klasy stosujemy instrukcję new: Usuwanie właściwości obiektu Aby usunąć właściwość obiektu, skorzystamy z operatora delete: Tablice Tablice w JavaScript są obsługiwane przez klasę Array. Obiekt tej klasy można utworzyć na trzy sposoby, poprzez wywołanie odpowiedniego konstruktora: Tablice cd. Tworzenie tablicy przez umieszczenie w niej kolejnych elementów: 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: 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: 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. 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. 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. 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). 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. Zdarzenia formularza cd. 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. Zdarzenia kontrolek formularza cd. Zdarzenia dokumentu Zdarzenia dokumentu: • onload - strona została załadowana; • onunload - strona jest zamykana; 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. 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. Indeks 0,1,2…n; Odwołanie przez atrybut „name” lub „id” dla „name” możliwe odwołanie 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 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: 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: Przykład Sprawdzanie poprawności formularzy 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. 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. 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”. 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). 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(); 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. 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. 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. 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. 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).