Podstawy programowania w języku JavaScript

Transkrypt

1 Podstawy programowania w języku JavaScript Część pierwsza Wprowadzenie koncepcja, geneza, podstawowe elementy języka Autor Roman Simiński Kontakt roman.siminski@us.edu.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.

2 Geneza powstania i krótka historia Na początku lat 90-tych najpopularniejsze były dwie przeglądarki: Internet Explorer i Netscape Navigator. Ówczesne WWW było statyczne konstruowanie stron z wykorzystaniem samego języka HTML było wiedzą tajemną. Twórcy przeglądarek dostrzegają konieczność rozszerzenia stron o elementy umożliwiające interakcję z użytkownikiem oraz elementy rozszerzające funkcjonalność i atrakcyjność wizualną stron. W wersji 2 Navigatora, firma Netscape wprowadza interpreter języka programowania, który może być wstawiony w kod HTML język nazywa się początkowo LiveWire, potem LiveScript a następnie JavaScript. Nazwa JavaScript powstała w wyniku porozumienia firmy Netscape i Sun, ta ostatnia promuje języka Java. Niestety te zbieżność nazw dwu różnych języków powoduje wiele rozgardiaszu. Copyright Roman Simiński Strona : 2

3 Geneza powstania i krótka historia, cd.... Firma Microsoft chce odebrać rynek firmie Netscape. W wersji 3 przeglądarki Internet Explorer, Microsoft wprowadza interpretery dwóch języków programowania VBScript bazujący na języku VisualBasic oraz JScript, mocno przypominającym język JavaScript. Języki JavaScript i JScript rozwijają się niezależnie i coraz bardziej się różnią. Pisanie kodu interpretowanego poprawnie w obu typach przeglądarek staje się coraz trudniejsze. Firma Netscape przekazuje kontrolę nad standaryzacją języka JavaScript do European Computer Manufacturers Association ECMA. Stowarzyszenie to standaryzuje język JavaScript i nadaje mu nazwę ECMAscript. Jednocześnie World Wide Web Consortium W3C pracuje nad standardem dla DOM Document Object Model, który ma pozwolić językom programowania na pełny dostęp do zawartości dokumentu HTML. Copyright Roman Simiński Strona : 3

4 Geneza powstania i krótka historia, cd.... Ciągle istnieją różnice pomiędzy JavaScript zgodnym z ECMAscript a JScript. Microsoft forsuje rozszerzenia pozwalające na obsługę ActiveX oraz dostęp do zasobów lokalnych komputera. Całe szczęście, znakomita większość typowych zastosowań internetowych może być zaprogramowana bez dbania o to, czy aktualnie interpretuje je przeglądarka Microsoft czy innych producentów. Rozwój języka JavaScript oraz DOM doprowadził do powstania tworu zwanego DHTML oraz do rozwoju technologii AJAX. Języki JavaScript i Java nie mają ze sobą nic wspólnego poza elementem nazwy i podobnymi elementami składni odziedziczonymi po językach C i C++. Copyright Roman Simiński Strona : 4

5 Czym jest JavaScript (ECMAscript)? JavaScript to język programowania, którego kod jest interpretowany i wykonywany przez przeglądarkę dokumentów HTML zwykle przeglądarkę internetową. JavaScript umożliwia zatem programowanie akcji, jakie mają się rozegrać po tzw. stronie klienta (ang. client side programming). Kod programu w języku JavaScript jest ściągany razem z kodem HTML, jest interpretowany i wykonywany w obrębie ściągniętej strony JavaScript działa tylko w obrębie aktualnie oglądanej strony. JavaScript jest językiem zorientowany obiektowo pozwala na manipulowanie zdefiniowanymi obiektami lub tworzenie obiektów zdefiniowanych klas. JavaScript jest językiem skryptowym nie pozwala na tworzenie samodzielnych aplikacji, działa w środowisku przeglądarki i posługuje się jej zasobami. Copyright Roman Simiński Strona : 5

6 Jakie możliwości daje JavaScript? Pozwala na odczytywanie zawartości dokumentu HTML oraz na jego modyfikowanie. Umożliwia programowanie sterowane zdarzeniami na stronie HTML to główny element realizacji interakcji z użytkownikiem. Pozwala na weryfikację danych w formularzach przed ich wysłaniem. Pozwala na wykrywanie informacji o wykorzystywanej przez użytkownika przeglądarce. Pozwala na tworzenie i odczytywanie informacji zapisanych na komputerze użytkownika (ang. cookies). Pozwala na manipulowanie wizualną formą dokumentu HTML. Copyright Roman Simiński Strona : 6

7 Wstawianie kodu JavaScript w dokument HTML znacznik script Kod JavaScript wstawiany może być do dokumentu HTML na kilka sposobów. Zawsze jednak wpisywany jest pomiędzy w obrębie znacznika script: <script informacja_o_wstawianym_kodzie >... </script> Informacja o wykorzystywanym kodzie Tu kod, jeżeli wstawiamy go bezpośrednio do dokumentu HTML Copyright Roman Simiński Strona : 7

8 Wstawianie kodu JavaScript w dokument HTML znacznik script Informację o zawartości skryptu określa się atrybutem type: <script type="text/javascript" >... </script> Znacznik script pozwala na wstawienie zewnętrznego pliku o zadanej nazwie: <script type="text/javascript" src="nazwapliku.js" ></script> Aktualnie skrypt powinien być określony wartością application/x-javascript: <script type="application/x-javascript" >... </script> Jednak tak określony typ skryptu nie będzie działał z przeglądarkami używającymi JScript zamiast JavaScript zatem bezpiecznie jest używać text/javascript. Copyright Roman Simiński Strona : 8

9 Wstawianie kodu JavaScript w dokument HTML znacznik script Uwaga niektóre źródła zalecają stosowanie przestarzałego atrybutu language: <script language="javascript" >... </script> Czasem z określeniem wersji: <script language="javascript1.2" >... </script> Atrybut language został zdeprecjonowany, nie używa się go już. Większość aktualnie stosowanych przeglądarek akceptuje standard 1.2, zatem jego podawanie nie ma większego sensu. Zamiast informować przeglądarkę o wykorzystywanej wersji lepiej w kodzie programu zidentyfikować przeglądarkę i dostosować do niej działanie działanie programu. Copyright Roman Simiński Strona : 9

10 Wstawianie kodu JavaScript w dokument HTML gdzie umieszczać Kod skryptu można umieszczać w sekcji body, zostanie wtedy wykonany w trakcie przetwarzania przez przeglądarkę tej właśnie sekcji. <html> <body> <script type="text/javascript"> document.write( "Tu programik w JavaScript!" ); </script> </body> </html> Obiekt document reprezentuje aktualnie przetwarzany dok. HTML Metody write i writeln umożliwiają zapis do aktualnego dokumentu <html> <body> <script type="text/javascript" src="hellofromjs.js" ></script> </body> </html> document.write( "Tu programik w JavaScript!" ); Zawartość hellofromjs.js Copyright Roman Simiński Strona : 10

11 Wstawianie kodu JavaScript w dokument HTML gdzie umieszczać Kod skryptu można umieszczać w sekcji head, zwykle w postaci definicji funkcji. Takie funkcje mogą być następnie wywoływane z wykorzystaniem mechanizmu programowania sterowanego zdarzeniami. <html> <head> <script type="text/javascript"> function hello() { document.write( "Tu programik w JavaScript!" ); } </script> </head> <body onload="hello()" > </body> </html> Wywołaj funkcję hello gdy ładowana jest sekcja body dokumentu Funkcja hello zdefiniowana w sekcji nagłówkowej dokumentu. Copyright Roman Simiński Strona : 11

12 Wstawianie kodu JavaScript w dokument HTML uwagi dodatkowe Zwyczajowo zabezpieczało się kod skryptów przez przeglądarkami, nieznającymi lub nieprawidłowo obsługującymi znacznik script (d0 HTML 3). <script type="text/javascript"> <!-- document.write( "Tu programik w JavaScript!" ); --> </script> Aktualnie pewnie nikt nie używa tak starych lub prymitywnych przeglądarek, zatem stosowanie komentarzy HTML nie wydaje się celowe. W skryptach w języku JavaScript można stosować komentarze znane z C++: jednoliniowe // i wieloliniowe /**/: <script type="text/javascript"> // Komentarz jednoliniowy /* Komentarz wieloliniowy */ </script> Copyright Roman Simiński Strona : 12

13 Podstawowe elementy języka zmienne JavaScript jest językiem ze słabą kontrolą typów. Oznacza to, że zmienna nie posiada sztywno określonego typu wartości może przechowywać wartości dowolnego typu. Taka dowolność może prowadzić do niespodziewanych rezultatów w przypadku nieostrożnego posługiwania się zmiennymi. <script type="text/javascript"> var zmienna = 5; document.write( zmienna ); zmienna = "Jestem tekstem"; document.write( zmienna ); zmienna = true; document.write( zmienna ); </script> Copyright Roman Simiński Strona : 13

14 Podstawowe elementy języka definiowanie zmiennych Zmienne można definiować i nadawać im wartość początkową dobra praktyka! var kwotapodatku = 1200; var nazwadnia = "Wtorek"; W momencie przypisywania wartości do zmiennej, która nie została wcześniej zdefiniowana, zmienna ta jest automatycznie definiowana: kwotapodatku = 1200; nazwadnia = "Wtorek"; W przypadku definiowania zmiennej bez inicjatora, jej wartość jest nieokreślona, dokładnie zmienna zawiera wartość undefined. var kwotapodatku; document.write( kwotapodatku ); undefined Copyright Roman Simiński Strona : 14

15 Podstawowe elementy języka definiowanie zmiennych W przypadku redefinicji zmiennej, jej wartość nie jest tracona: var kwotapodatku = 1200; var kwotapodatku; document.write( kwotapodatku ); Jeżeli chcemy, aby wartość zmiennej była niezdefiniowana albo pusta, można wykorzystać literały undefined lub null: var zmienna = undefined; document.write( zmienna ); undefined var zmienna = null; document.write( zmienna ); null Copyright Roman Simiński Strona : 15

16 Podstawowe elementy języka definiowanie zmiennych Nazwy zmiennych budowane są wg typowych zasad powinny być ciągiem liter, i cyfr, rozpoczynającym się od litery, przy czym w miejscu litery wystąpić może również znak podkreślenia '_' lub symbol dolara '$'. var $kwotapodatku = 100; document.write( $kwotapodatku ); document.write( "<br /\>" ); var $stopa$podatku$vat = 0.22; document.write( $stopa$podatku$vat ); Oczywiście słowa kluczowe języka JavaScript nie mogą być wykorzystywane jako nazwy identyfikatory zmiennych, funkcji itp.. Copyright Roman Simiński Strona : 16

17 Podstawowe elementy języka zmienne numeryczne Zmienne numeryczne obejmują typ całkowitoliczbowy i rzeczywisty. Literały mogą być zapisywane w postaci dziesiętnej, ósemkowej, szesnastkowej, przecinkowej, wykładniczej. <script type="text/javascript"> var zmienna = 5; document.write( zmienna );... zmienna = 5.5; document.write( zmienna );... zmienna = 077; document.write( zmienna );... zmienna = 0xff; document.write( zmienna );... </script> Copyright Roman Simiński Strona : 17

18 Podstawowe elementy języka predefiniowane wartości numeryczne Math.E Stała Eulera. Math.LN2 logarytm naturalny z 2. Math.LN10 logarytm naturalny z 10. Math.LOG2E logarytm binarny ze stałej Eulera. Math.LOG10E logarytm dziesiętny ze stałej Eulera. Math.PI wartość liczby PI. Math.SQRT2 pierwiastek kwadratowy z dwóch. Math.SQRT1_2 pierwiastek kwadratowy z 1/2. Copyright Roman Simiński Strona : 18

19 Podstawowe elementy języka pięć użytecznych właściwości liczbowych Number.MAX_VALUE największa wartość dostępna w JavaScript ( e+308). Number.MIN_VALUE najbliższa zeru liczba dodatnia dostępna w JavaScript (5e-324), każda mniejsza jest już równa zero. Number.NaN wartość używana do określenia, że mamy do czynienia z czymś, co nie jest wartościa numeryczną (NaN Not A Number). Żadna liczba nie jest równa NaN, NaN nie jest również równa sobie! Testowanie czy liczba jest równa NaN realizuje funkcja isnan. Number.POSITIVE_INFINITY wartość ta jest wynikiem obliczeń, jeżeli prawdziwy rezultat przekracza swą wartością Number.MAX_VALUE. Number.NEGATIVE_INFINITY wartość ta jest wynikiem obliczeń, jeżeli prawdziwy rezultat jest mniejszy od najmniejszej wartości ujemnej. Przykłady wykorzystania przedstawione zostaną w dalszej części wykładu. Copyright Roman Simiński Strona : 19

20 Podstawowe elementy języka zmienne łańcuchowe Każdy znak lub ciąg znaków ograniczony apostrofami lub cudzysłowami uznawany jest za literał łańcuchowy. Można je stosować zamiennie. <script type="text/javascript"> var zmienna = "Ję zyk JavaScript" ; document.write( zmienna );... zmienna = '"Ję zyk JavaScript"' ; document.write( zmienna );... zmienna = "\"Ję zyk JavaScript\"" ; document.write( zmienna );... zmienna = "'Ję zyk JavaScript'" ; document.write( zmienna );... zmienna = '\'J zyk JavaScript\'' ę ; document.write( zmienna );... </script> Copyright Roman Simiński Strona : 20

21 Podstawowe elementy języka zmienne łańcuchowe W języku JavaScript występują znaki specjalne (wzorowane na C), sensownie da się wykorzystać '\n', '\t', '\\' oraz ' \/'. Uwaga '\n' i '\t' nie formatują dokumentu HTML! Znak '\\' jest potrzebny: var zmienna = "c:\mojeskrypty\pierwszy"; document.write( zmienna );... zmienna = "c:\\mojeskrypty\\pierwszy"; document.write( zmienna );... Znak '\/' jest również potrzebny w przypadku błędów na stronie użycie znaku '/' w napisie może zostać zinterpretowanie jako zamknięcie jakiegoś znacznika. var zmienna = "<h1>uwaga<\/h1><p>znak \/ jest potrzebny<\/p>"; document.write( zmienna ); Copyright Roman Simiński Strona : 21

22 Podstawowe elementy języka zmienne łańcuchowe Długie napisy można łączyć operatorem +: var zmienna = "<p>to jest początek paragrafu, " + "a to jego koniec<\/p>"; document.write( zmienna ); Powyższe rozwiązanie jest pewniejsze niż następująca kontynuacja napisu: var zmienna = "<p>to jest początek paragrafu, \ a to jego koniec<\/p>"; document.write( zmienna ); Przeglądarki często niepoprawnie przetwarzają spacje przed i po znaku połączenia linii. Copyright Roman Simiński Strona : 22

23 Operatory arytmetyczne W języku JavaScript wolno używać wielu operatorów arytmetycznych znanych z C/C++: Operator Znaczenie + Dodawanie - Odejmowanie * Mnożenie / Dzielenie % Reszta z dzielenia ++ Inkrementacja (pre, post) -- Dekrementacja (pre, post) - Zmiana znaku + Zachowanie znaku Znane z C/C++ operatory arytmetyczne działają w JavaScript analogicznie, za wyjątkiem / oraz %. Copyright Roman Simiński Strona : 23

24 Operatory arytmetyczne Mimo podobieństwa do C/C++ nie wszystkie operatory nie działają tak samo: var x = 5; var y = 2; var z = x / y; 2.5 document.write( z ); var x = 5.2; var y = 2; var z = x % y; document.write( z ); Copyright Roman Simiński Strona : 24

25 Operator + działa również dla łańcuchów znaków Tego należy się spodziewać: var x = "Java"; var y = "Script"; var z = x + y; JavaScript document.write( z ); Do tego służy np. wartość NaN: var x = "Java"; var y = "Script"; var z = x / y; NaN document.write( z ); Copyright Roman Simiński Strona : 25

26 Operator + działa również dla łańcuchów znaków A to może być zaskakujące: var x = "5"; var y = "2"; var z = x / y; 2.5 document.write( z ); Chociaż to działa inaczej: var x = "5"; var y = "2"; var z = x + y; 52 document.write( z ); Copyright Roman Simiński Strona : 26

27 Operator + działa również dla łańcuchów znaków i liczb W przypadku dodawania łańcuchów znaków i liczb, rezultatem jest łańcuch znaków: var x = "5"; var y = 2; var z = x + y; document.write( z ); 52 var x = "5"; var y = 2; var z = y + x; document.write( z ); 25 var x = 5; var y = "2"; var z = x + y; document.write( z ); 52 var x = 5; var y = "2"; var z = y + x; document.write( z ); 25 Copyright Roman Simiński Strona : 27

28 Przy obliczeniach przydają się też funkcje Math.abs() Math.acos() Math.asin() Math.atan() Math.ceil() Math.cos() Math.exp() Math.floor() Math.max() Math.min() Math.pow() Math.random() Math.round() Math.sin() Math.sqrt() Math.tan() Math.log() We większości przypadku funkcje te działają analogicznie do ich odpowiedników z C/C++. Copyright Roman Simiński Strona : 28

29 Operatory porównania i relacji W języku JavaScript występują znane z C/C++ operatory porównania i relacji, oraz dodatkowe === i!==: Operator Znaczenie == Równe wartości === Identyczne wartości i typy!= Różne wartości!== Nieidentyczne wartości i typy < Mniejsze <= Mniejsze lub równe > Większe >= Większe lub równe Uwaga ze względu na luźną typizację języka JavaScript, porównanie wartości nie jest tak proste jak w językach ze ścisła typizacją. Copyright Roman Simiński Strona : 29

30 Reguły rządzące porównaniem Wartość true przekształcana jest w wartośc 1 a false w wartość 0 przed porównaniem. Jeżeli jeden z argumentów posiada wartość NaN rezultatem porównania jest wartość false. Przy porównaniu łańcucha znaków i liczby, łańcuch jest przekształcane w odpowiednia liczbę, jeżeli to nie jest możliwe rezultatem jest NaN. Przy porównaniu obiektu i liczby, następuje próba przekształcenia obiektu w liczbę, jeżeli to nie jest możliwe rezultatem jest NaN. Przy porównaniu dwóch obiektów, porównywane są ich adresy rezultatem porównania jest true, jeżeli są one równe, false w przeciwnym przypadku. Copyright Roman Simiński Strona : 30

31 Operatory porównania i relacji wykorzystanie === i!== Operatory === i!== w trakcie porównania biorą pod uwagę nie tylko wartości ale również typy porównywanych argumentów. Operatory te stwierdzają identyczność lub nieidentyczność argumentów. var x = "5";... x == 5 Prawda var x = "5";... x === 5 Fałsz var x = "5";... x == "5" Prawda var x = "5";... x === "5" Prawda var x = "5";... x!= 5 Fałsz var x = "5";... x!== 5 Prawda var x = "5";... x!= "5" Fałsz var x = "5";... x!== "5" Fałsz Copyright Roman Simiński Strona : 31

32 Operatory bitowe słowo wstępne Zwykle operatory bitowe działają na danych całkowitoliczbowych. Dlatego język JavaScript będzie przekształcał argumenty takich operatorów do postaci 32-bitowej liczby całkowitej. Dopiero po przekształceniu będzie wykonywana określona operatorem operacja bitowa. Wynik jest 32-bitową liczbą całkowitą. Operatory bitowe działają analogicznie do znanych z C/C++. Copyright Roman Simiński Strona : 32

33 Operatory bitowe Operator Znaczenie & Koniunkcja bitowa Alternatywa bitowa ^ XOR różnica symetryczna ~ Negacja bitowa << Przesunięcie w lewo >> Przesunięcie w prawo >>> Przesunięcie w prawo z wypełnieniem zerami W przypadku operatora << następuje wypełnienie zerami od strony prawej. W przypadku operatora >> następuje wypełnienie zerami od strony lewej, jeżeli argument jest ujemny a jedynkami jeżeli argument jest dodatni. W przypadku operatora >>> następuje zawsze wypełnienie zerami od strony lewej, niezależnie od tego czy argument jest ujemny czy dodatni. Copyright Roman Simiński Strona : 33

34 Operatory bitowe różne przypadki var x = 1; var y = x << 1; 2 document.write( y ); var x = 1; var y = x >> 1; 0 document.write( y ); var x = 0xffffffff; document.write( x ); document.write( "<br \/>" ); var y = x << 1; document.write( y ); var x = -1; document.write( x ); document.write( "<br \/>" ); -1-2 var y = x << 1; document.write( y ); Copyright Roman Simiński Strona : 34

35 Operatory bitowe różne przypadki var x = 0xffffffff; document.write( x ); document.write( "<br \/>" ); var y = ~x; document.write( y ); var x = 0; document.write( x ); document.write( "<br \/>" ); 0-1 var y = ~x; document.write( y ); Copyright Roman Simiński Strona : 35

36 Operatory bitowe różne przypadki, cd.... var x = 0xffffffff; document.write( x ); document.write( "<br \/>" ); var y = x >>> 1; document.write( y ); var x = 0xffffffff; document.write( x ); document.write( "<br \/>" ); var y = x >> 1; document.write( y ); var x = -1; document.write( x ); document.write( "<br \/>" ); var y = x >> 1; document.write( y ); -1-1 var x = -1; document.write( x ); document.write( "<br \/>" ); var y = x >>> 1; document.write( y ); Copyright Roman Simiński Strona : 36

37 Operatory bitowe dziwactwa var x = "JavaScript"; document.write( x ); document.write( "<br \/>" ); var y = ~x; document.write( y ); JavaScript -1 var x = "1"; document.write( x ); document.write( "<br \/>" ); var y = x << 1; document.write( y ); 1 2 var x = "1dwatrzy"; document.write( x ); document.write( "<br \/>" ); 1dwatrzy 0 var y = x << 1; document.write( y ); var x = 1.1; document.write( x ); document.write( "<br \/>" ); var y = x << 1; document.write( y ); Copyright Roman Simiński Strona : 37

38 Operatory przypisania W języku JavaScript wolno używać operatorów przypisania znanych z C/C++ (działają one analogicznie): Operator Przykład Działanie = x=5 x==5 += x += 5 x = x + 5 -= x -= 5 x = x - 5 *= x *= 5 x = x * 5 /= x /= 5 x = x / 5 %= x %= 5 x = x % 5 >>= x >>= 5 x = x >> 5 >>>= x >>>= 5 x = x >>> 5 <<= x <<= 5 x = x << 5 &= x &= 5 x = x & 5 = x = 5 x = x 5 ^= x ^= 5 x = x ^ 5 Copyright Roman Simiński Strona : 38

39 Operatory logiczne Znane z języka C/C++ operatory logiczne: Operator Znaczenie && Koniunkcja logiczna Alternatywa logiczna! Negacja logiczna Copyright Roman Simiński Strona : 39

40 Operator warunkowy Znane z języka C/C++ operatory warunkowy: var x = 1; var y = 2; var z = x > y? x : y; document.write( z ); 2 var x = "Ala"; var y = "Ela"; var z = x > y? x : y; document.write( z ); Ela var przychod = 1000; document.write( przychod > 0? "Zarobek" : "Strata" ); Zarobek Copyright Roman Simiński Strona : 40