Technologie internetowe w programowaniu

Transkrypt

1 Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński Podstawy języka JavaScript

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. 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. 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++. 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. 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. 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 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. 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. 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 </script> </body> </html> w JavaScript!" ); Obiekt document reprezentuje aktualnie przetwarzany dok. HTML Metody write i writeln umożliwiają zapis do aktualnego dokumentu <html> <body> </body> </html> <script type="text/javascript" src="hellofromjs.js" ></script> document.write( "Tu programik w JavaScript!" ); Zawartość hellofromjs.js 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. 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> 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> 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 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 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.. 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 = 077; document.write(... zmienna = 0xff; document.write(... </script> zmienna ); zmienna ); zmienna ); 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. 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. 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> 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 ); 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. 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 %. 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 ); 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 ); 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 ); 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 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++. 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ą. 29

30 Reguły rządzące porównaniem Wartość true przekształcana jest w wartośc a false w wartość 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. 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 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 -bitowej liczby całkowitej. Dopiero po przekształceniu będzie wykonywana określona operatorem operacja bitowa. Wynik jest -bitową liczbą całkowitą. Operatory bitowe działają analogicznie do znanych z C/C++. 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. 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 ); 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 ); 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 );

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 );

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 38

39 Operatory logiczne Znane z języka C/C++ operatory logiczne: Operator Znaczenie && Koniunkcja logiczna Alternatywa logiczna! Negacja logiczna 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 40

41 Instrukcja warunkowa i alternatywy if( W ) I if( W ) I1 else I2 if( W ) I if( W ) I1 else I2 W tak nie W tak nie I I2 I1 Instrukcja warunkowa i alternatywy obejmują swoim zasięgiem jedną, następną instrukcję. Jeżeli instrukcja warunkowa ma obejmować więcej niż jedną instrukcję, należy ująć je w, tworząc instrukcję złożoną. 41

42 Instrukcja warunkowa przykłady var hour = 0; // Ustal godzinę i zapisz w zmiennej hour if( hour < 11 ) document.write( "<b>jaki piękny poranek!</b>" ); var hour = 0; // Ustal godzinę i zapisz w zmiennej hour if( hour < 11 ) document.write( "<b>jaki piękny poranek!</b>" ); else if( hour >= 11 && hour < 15 ) document.write( "<b>godziny południowe są piękne!</b>" ); else document.write( "<b>popołudnie i wieczór to czas na odpoczynek!</b>" ); 42

43 Instrukcja przełączająca switch( wyrażenie ) case wyrażenie : instrukcje case wyrażenie : instrukcje... default : instrukcje Instrukcja switch: sprawdza czy wartość wyrażenia jest równa jednemu z kilku przypadków określonych wyrażeniem umieszczonym po słowie case, wykonuje skok do instrukcji zapisanych za owym wyrażeniem. Jeżeli nie znaleziono przypadku pasującego do wartości wyrażenia, wykonywane są instrukcje zapisane po frazie default. Instrukcja służy do podejmowania decyzji wielowariantowych. 43

44 Instrukcja przełączająca klasyczny przykład var day = 0; // Ustal dzień tygodnia i zapisz w zmiennej day switch( day ) case 5 : document.write( "Piątek zaczynamy \"łikend\"!" ); break; case 6 : case 0 : document.write( "\"Łikend\" trwa!" ); break; case 1 : document.write( "Do roboty :(" ); break; default : "Roboczy tydzień trwa!" ); document.write( break; Zakładamy, że kolejne dni tygodnia są ponumerowane od.. począwszy od niedzieli. 44

45 Instrukcja przełączająca mniej klasyczny przykład var loginname = "henio"; // Ustal nazwę zalogowanej osoby To nie jest zmienna o zawartości będącej liczbą całkowitą switch( loginname ) case "ola" : document.write( "Witaj Oleńko, miło że break; jesteś :)" ); case "aga" : document.write( "Aguś, jak miło że się zalogowałaś!" ); break; case "henio" : document.write( "Joł Ziom :)!" ); break; default "Witaj" ); : document.write( break; To nie są literały całkowitoliczbowe W przeciwieństwie do języków kompilowanych typu Pascal, C/C++, wyrażenie we frazie zawierającej case nie musi być typu całkowitoliczbowego. 45

46 Instrukcja przełączająca drugi mniej klasyczny przykład var vat = 0; // Ustal mnożnik dla podatku VAT switch( vat ) case 0.22 : document.write( "VAT 22%" ); break; case 0.07 : document.write( "VAT 7%" ); break; default : document.write( "Nieprawidłowy podatek VAT" ); break; W przeciwieństwie do języków kompilowanych typu Pascal, C/C++, wyrażenie we frazie zawierającej case nie musi być typu całkowitoliczbowego. 46

47 Instrukcja przełączająca trzeci mniej klasyczny przykład var vat = 0.22; var v22 = 0.22; var v07 = 0.07; To nie są wyrażenia stałe! // Ustal mnożnik dla podatku VAT switch( vat ) case v22 : document.write( "VAT 22%" ); break; case v07 : "VAT 7%" ); document.write( break; default : document.write( "Nieprawidłowy podatek VAT" ); break; W przeciwieństwie do języków kompilowanych typu Pascal, C/C++, wyrażenie we frazie zawierającej case nie musi być typu wyrażeniem stałym. 47

48 Instrukcja wiążąca x = Math.round( Math.pow( Math.LN2 * y + Math.E, 4 ) ); with( Math ) x = round( pow( LN2 * y + E, 4 ) ); Stosowanie instrukcji wiążące with pozwala na skrócenie kodu. W obrębie instrukcji with występuje przesłanianie, działające na normalnych zasadach. 48

49 Instrukcja iteracyjna while Gdy iterowana jest jedna instrukcja: while( wyrażenie ) instrukcja Gdy iterowany jest ciąg instrukcji: while( wyrażenie ) ciąg instrukcji prawda instrukcja wyrażenie fałsz Instrukcja stanowiąca ciało iteracji while może nie wykonać się wcale. Wyrażenie występujące w nawiasach określa warunek kontynuacji, zatem iteracja kończy się gdy wartość wyrażenia będzie zerowa. 49

50 Instrukcja iteracyjna while przykład var potega2 = 1; while( potega2 <= ) document.write( potega2 + "<br \/>" ); potega2 *= 2; 50

51 Instrukcja iteracyjna while przykład var dopotegi = 0; while( dopotegi <= 16 ) document.write( 2 + "<sup>" + dopotegi + "<\/sup> = " ); document.write( Math.pow( 2, dopotegi++ ) + "<br \/>" ); 51

52 Instrukcja iteracyjna while co gdy wpadnie w pętlę? var dopotegi = 0; Powinno być: dopotegi++ while( dopotegi <= 16 ) document.write( 2 + "<sup>" + dopotegi + "<\/sup> = " ); document.write( Math.pow( 2, dopotegi ) + "<br \/>" ); MSIE Opera FireFox 52

53 Instrukcja iteracyjna do-while Gdy iterowana jest jedna instrukcja: do instrukcja while( wyrazenie ); instrukcja Gdy iterowany jest ciąg instrukcji: do ciag instrukcji while( wyrazenie ); prawda wyrażenie fałsz Instrukcja stanowiąca ciało iteracji do-while wykona się przynajmniej raz. Wyrażenie występujące w nawiasach określa warunek kontynuacji, zatem iteracja kończy się gdy wartość wyrażenia będzie zerowa. 53

54 Instrukcja iteracyjna do-while przykład var dopotegi = 0; document.write( "<table border>" ); do document.write( "<tr><td>" "<sup>" + dopotegi + "<\/sup><\/td>" ); document.write( "<td>" + Math.pow( 2, dopotegi++ ) + "<\/td><\/tr>" ); while( dopotegi <= 16 ); document.write( "<\/table>" ); 54

55 Instrukcja iteracyjna for inicjalizacja; while( warunek ) ciało_iteracji modyfikacja for( inicjalizacja; warunek; modyfikacja ) ciało_iteracji var dopotegi = 0; while( dopotegi <= 16 ) document.write( 2 + "<sup>" + dopotegi + "<\/sup> = " ); document.write( Math.pow( 2, dopotegi ) + "<br \/>" ); dopotegi++; for( var dopotegi document.write( document.write( = 0; dopotegi <= 16; dopotegi++ ) 2 + "<sup>" + dopotegi + "<\/sup> = " ); Math.pow( 2, dopotegi ) + "<br \/>" ); 55

56 Instrukcje break i continue var dopotegi = 0; while( true ) document.write( 2 + "<sup>" + dopotegi + "<\/sup> = " ); document.write( Math.pow( 2, dopotegi++ ) + "<br \/>" ); if( dopotegi > 16 ) break; // Tylko nieparzyste potęgi dwójki for( var dopotegi = 0; dopotegi <=16; dopotegi++ ) if( dopotegi % 2 == 0 ) continue; document.write( 2 + "<sup>" + dopotegi + "<\/sup> = " ); document.write( Math.pow( 2, dopotegi ) + "<br \/>" ); 56

57 Instrukcje w języku JavaScript W języku JavaScript występują wszystkie podstawowe instrukcje sterujące z języka C. Występuję dodatkowa instrukcja iteracyjna for in, która zostanie omówiona wraz z tablicami. W odniesieniu do języka C zachowano zarówno syntaktykę (składnię) jak i semantykę (znaczenie) poszczególnych instrukcji. Jedynie instrukcja switch posiada wyraźnie rozszerzoną syntaktykę wolno dokonywać wyboru również dla typów niecałkowitoliczbowych. W język JavaScript wbudowano również mechanizm obsługi wyjątków, występują zatem słowa kluczowe try catch finally oraz throw ten mechanizm zostanie omówiony osobno. 57

58 Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja alert ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst i przycisk OK, którym użytkownik zamyka okno. alert( "Tu okno powiadomień, naciśnij OK" ); 58

59 Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja confirm ( tekst ) wyprowadza okno powiadomienia wyświetlający tekst oraz przyciski OK i Cancel (Anuluj). Rezultatem jest true gdy naciśnięto OK, false gdy naciśnięto Cancel. if( confirm( "Naciśnij OK aby poznać naszą ofertę" ) ) document.write( "Zapraszamy do przeglądu oferty" ); else document.write( "Szkoda, może kiedy indziej" ); 59

60 Zanim zaczniemy przydatne funkcje obsługi okien dialogowych Funkcja prompt ( tekstpodpowiedzi, tekstdomyślny ) wyprowadza okno wczytywania danych wyświetlające tekstpodpowiedzi oraz pole tekstowe o wartości domyślnej tekstdomyślny. Rezultatem funkcji jest wprowadzony tekst po naciśnięciu przycisku OK, wartość null po naciśnięciu przycisku Cancel (Anuluj). var surfername = prompt( "Jak Cię mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); 60

61 Definiowanie funkcji function nazwafunkcji( parametr1, parametr2,..., parametrn ) kod funkcji function powitanie() alert( "Witaj serferze :)" ); Proste funkcje bezparametrowe o charakterze procedur function powitanie() var surfername = prompt( "Jak Cię mam nazywać:", "" ); if( surfername!= null && surfername!= "" ) document.write( "Witaj " + surfername + "!" ); else document.write( "Witaj nieznajomy!" ); 61

62 Wywoływanie funkcji Funkcje można wywoływać w zwykły sposób podając nazwę i ewentualne parametry. powitanie(); Bardzo często wywołanie funkcji jest wynikiem zaistnienia pewnego zdarzenia na stronie. Funkcja wywoływana po zaistnieniu zdarzenia nazywana jest funkcją obsługi zdarzenia (ang. event handler). Typowe ale nie wszystkie obsługiwane zdarzenia: onclick, onload, onmouseover, onmouseout, onunload. 62

63 Wywoływanie funkcji obsługa onload Funkcja obsługi zdarzenia onload jest wywoływana po kompletnym załadowaniu strony (znacznik body), rysunku (znacznik img) lub ramki (znacznik frame). <html> <head> <script type="text/javascript"> function powitanie() var surfername = prompt( "Jak Cię mam nazywać:", "" ); if( surfername!= document.write( else document.write( null && surfername!= "" ) "Witaj " + surfername + "!" ); "Witaj nieznajomy!" ); </script> </head> <body onload = "powitanie()"> </body> </html> 63

64 Wywoływanie funkcji obsługa onunload Funkcja obsługi zdarzenia onunload jest wywoływana natychmiast po akcji opuszczenia strony. <html> <head> <script type="text/javascript"> var surfername; //... function pozegnanie() alert( surfername + " pa, pa!" ) </script> </head> <body onunload = "pozegnanie()"> </body> </html> 64

65 Wywoływanie funkcji obsługa onload i onunload Teoretycznie to powinno działać ale nie działa :( <html> <head> <script type="text/javascript"> var surfername = ""; function powitanie() surfername = prompt( "Jak Cię mam nazywać:", "" ); if( surfername!= document.write( else document.write( null && surfername!= "" ) "Witaj " + surfername + "!" ); "Witaj nieznajomy!" ); function pozegnanie() alert( surfername + " pa, pa!" ) </script> </head> <body onload="powitanie()" onunload="pozegnanie()" > </body> </html> 65

66 Wywoływanie funkcji obsługa onmouseover i onmouseout Wykorzystanie zdarzeń mouseover i mouseout: <html> <head> <script type="text/javascript"> function darkcolor() document.bgcolor='#9f9f9f'; function lightcolor() document.bgcolor='#ffffff'; </script> </head> <body> <a href="#" onmouseover="darkcolor()" onmouseout="lightcolor()"> Ten link jest wyjątkowy </a> </body> </html> 66

67 Wywoływanie funkcji obsługa onmouseover i onmouseout Mało roztropne wykorzystanie zdarzeń mouseover i mouseout: <html> <head> <script type="text/javascript"> function alert( function alert( uwazaj() "Jeżeli tam wejdziesz, Twoje życie już nie będzie takie samo!" ); zaluj() "Jeżeli tam nie wejdziesz, będziesz żałował!" ); </script> </head> <body> <a href="#" onmouseover="uwazaj()" onmouseout="zaluj()"> Ten link jest wyjątkowy </a> </body> </html> 67

68 Wywoływanie funkcji obsługa onclick W przeglądarce użytkownicy zwykle używają pojedynczego kliknięcia. <html> <head> <script type="text/javascript"> function info() alert( "A figa świnko, nic tu nie zobaczysz!" ); </script> </head> <body> <input type="button" name="hl" value="tylko dla dorosłych!" onclick="info()" /> </body> </html> 68

69 Wywoływanie funkcji ondblclick Uwaga zdarzenie click zawsze wystąpi przed dblclick. <html> <head> <script type="text/javascript"> function info() alert( "A figa świnko, nic tu nie zobaczysz!" ); </script> </head> <body> <p>dla tego przycisku użyj podwójnego kliknięcia:</p> <input type="button" name="hl" value="tylko dla dorosłych!" ondblclick="info()" /> </body> </html> 69

70 Wywoływanie funkcji obsługa onfocus i onblur Czyli obsługa złapania i zgubienia fokusa : <html> <head> <script type="text/javascript"> function incolor() document.bgcolor='#5f5f5f'; function outcolor() document.bgcolor='#ffffff'; </script> </head> <body> <input type="text" id="test" onfocus="incolor()" onblur="outcolor()" /> </body> </html> 70

71 Wywoływanie funkcji obsługa onfocus i onblur Wykorzystując onblur można np. weryfikować dane, tutaj jedynie ostrzeżenie: <html> <head> <script type="text/javascript"> function outinfo() alert( "Jeżeli użyłeś innych liter niż duże, to masz problem." ); </script> </head> <body> Napisz dużymi literami<br /> <input type="text" id="test1" onblur="outinfo()" /><br /> <input type="text" id="test2" onblur="outinfo()" /> </body> </html> 71

72 Zdarzenia sterowane czasem settimeout i cleartimeout JavaScript pozwala na asynchroniczne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje: settimeout() wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu; cleartimeout() anulowanie ustawień określonych funkcją settimeout(). Funkcja settimeout()wykonuje przypisaną jej akcję tylko raz. Forma wywołania: var timeobject = settimeout( "kod w języku JavaScript", czas_w_milisekundach ); Funkcja cleartimeout()zeruje ostawienia dla obiektu będącego rezultatem funkcji settimeout(): cleartimeout( timeobject ); 72

73 Zdarzenia sterowane czasem settimeout i cleartimeout, przykład 1 <html> <head> <script type="text/javascript"> function odliczanie() var timeoutobject = settimeout( 'alert( "Czas minął" )', 5000 ); </script> </head> <body onload="odliczanie()"> <p>masz 5 sekund na podjęcie decyzji!</p> </body> </html> 73

74 Zdarzenia sterowane czasem settimeout i cleartimeout, przykład 2 <script type="text/javascript"> var timeoutobject; var sek = 0; function start() document.getelementbyid( "txt" ).value = sek++; timeoutobject = settimeout( "start()", 1000 ); function stop() cleartimeout( timeoutobject ); function zeruj() document.getelementbyid( "txt" ).value = sek = 0; </script>... <h1>głupiutki stoper</h1> <input type="button" value="start" <input type="text" id="txt" /> <input type="button" value="stop" <input type="button" value="zeruj" onclick="start()" /> onclick="stop()" /> onclick="zeruj()" />... 74

75 Zdarzenia sterowane czasem settimeout i cleartimeout JavaScript pozwala na asynchroniczne, wielokrotne wykonywanie wskazanego kodu po upływie zadanego czasu. Służą do tego funkcje: setinterval() wykonuje wskazany kod JavaScript po upłynięciu zadanego czasu; clearinterval() anulowanie ustawień określonych funkcją setinterval(). Funkcja settimeout()wykonuje przypisaną jej akcję tylko raz. Forma wywołania: var timeobject = setinterval( "kod w języku JavaScript", czas_w_milisekundach ); Funkcja clearinterval()zeruje ostawienia dla obiektu będącego rezultatem funkcji setinterval(): clearinterval( timeobject ); 75

76 Zdarzenia sterowane czasem setinterval i clearinterval, przykład <script type="text/javascript"> var timeoutobject; var sek = 0; function display() document.getelementbyid( "txt" ).value = sek++; function start() display(); timeoutobject = setinterval( "display()", 1000 ) function stop() clearinterval( timeoutobject ); function zeruj() document.getelementbyid( "txt" ).value = sek = 0; </script>... <h1>głupiutki stoper</h1> <input <input <input <input... type="button" value="start" onclick="start()" /> type="text" id="txt" /> type="button" value="stop" onclick="stop()" /> type="button" value="zeruj" onclick="zeruj()" /> 76