1 JavaScript
2 Technologie Informacyjne2 Technologie Informacyjne JS JavaScript (JS) – obiektowy skryptowy język programowania, wspomagający tworzenie stron www. Skrypty służą przede wszystkim do zapewnienia interaktywności poprzez reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. W języku JavaScript można także pisać pełnoprawne aplikacje. Program napisany w języku skryptowym nie musi być poddany procesowi kompilacji. Wykonywaniem poleceń zajmuje się program zawierający interpreter komend. Dla JS jest nim przeglądarka internetowa.
3 Technologie Informacyjne3 Technologie Informacyjne JS . Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak przyjmuje się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML przed znacznikiem . Znacznik ten powinien zawierać parametr LANGUAGE z wartością JavaScript. Np. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/3/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "3. Technologie Informacyjne. JS. Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML i . Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak przyjmuje się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML przed znacznikiem . Znacznik ten powinien zawierać parametr LANGUAGE z wartością JavaScript. Np.
4 Technologie Informacyjne4 Technologie Informacyjne JS document.write() Instrukcja document.write() pozwala na wyprowadzenie tekstu na ekran przeglądarki. Np. document to obiekt, który reprezentuje aktualną stronę write to tzw. metoda, czyli pewna funkcja działająca na obiekcie
5 Technologie Informacyjne5 Technologie Informacyjne JS Okno dialogowe Np.
6 Technologie Informacyjne6 Technologie Informacyjne JS Zmienne var nazwa_zmiennej np. var imie="Janek" // zmienna typu string var wiek=20 // zmienna typu integer document.write("Nasz gość ma na imie "+imie+".") document.write(imie+" ma "+wiek+" lat") JavaScript posiada cztery typy danych: liczby, łańcuchy tekstowe, wartości logiczne oraz specjalny typ null. Liczby oznaczają wszystkie liczby zmiennoprzecinkowe i całkowite. Nie ma podziału na rzeczywiste, integer, itd.. Każdy tekst można nazwać łańcuchem. Odróżnienie tekstu od liczby jest związane z zastosowaniem znaku ””. NaN (Not a Number) wartość, która może wskazywać, że dana zmienna nie jest liczbą. Metodą na określenie, czy zmienna jest liczbą, jest funkcja logiczna isNan(zmienna) Typ null reprezentuje wartość pustą (nie mylić z 0 ani łańcuchem pustym ””. Jest wykorzystywany lub zwracany przez funkcję najczęściej w przypadku nie znalezienia jakiegoś elementu. nazwy zmiennych powinny zaczynać się od litery lub znaku_. Wielkość liter ma znaczenie. W przeciwieństwie do większości języków programowania, nie musimy wprowadzać deklaracji na początku programu. Definiowanie zmiennych może odbywać się bezpośrednio przed jej użyciem w programie.
7 Technologie Informacyjne7 Technologie Informacyjne JS Tablice var tablica = new Array (); np. var tablica = new Array (); - definicja obiektu tablica[0]=„Rok”; - zapisywanie danych Tablice są zbiorem zmiennych połączonych wspólną nazwą. Odróżnianie poszczególnych elementów tablicy odbywa się za pomocą indeksu. Tablicę można tworzyć przy pomocy konstruktora new oraz metody Array(). W ten sposób powstaje schemat tablicy o niezdefiniowanej długości. Ponieważ tablica jest obiektem można ominąć new, ale zaleca się jego stosowanie. Numerowanie elementów zaczyna się od 0.
8 Technologie Informacyjne8 Technologie Informacyjne JS Operatory Operatory arytmetyczne Operatorem jest znak lub sekwencja znaków zmieniająca wartość zmiennej. Ostatnie dwa operatory są obustronne. Jeżeli zapiszemy je po lewej stronie zmiennej – zmienna zostanie powiększona lub zmniejszona przed wykonaniem instrukcji przypisania, jeśli z prawej – po wykonaniu się instrukcji. s=5; s=6 s=5; s=6 t=++s; t=6 t=s++; t=5
9 Technologie Informacyjne9 Technologie Informacyjne JS Operatory Operatory przypisania
10 Technologie Informacyjne10 Technologie Informacyjne JS Operatory Operatory porównania
11 Technologie Informacyjne11 Technologie Informacyjne JS Operatory Operatory logiczne
12 Instrukcja warunkowa if Instrukcja warunkowa if…else12 Technologie Informacyjne JS Instrukcja warunkowa if Instrukcja jest wykonywana jeśli warunek jest spełniony. if (warunek) { instrukcja } if (warunek_1) { blok instrukcji 1 } else { blok instrukcji n } Instrukcja warunkowa if…else
13 Instrukcja warunkowa if Instrukcja warunkowa if…else13 Technologie Informacyjne JS Instrukcja warunkowa if np. wiek=prompt("W jakim jestes wieku?") if (wiek>18) { document.write("Jestes pelnoletni, więc możesz wejsc dalej.") document.write("
Wejście dla dorosłych") } wiek=prompt("W jakim jestes wieku") document.write("Jestes pelnoletni") else { alert(„Fatalnie!!!") document.write("Nie mozesz tu wejsc") Instrukcja warunkowa if…else
14 Technologie Informacyjne14 Technologie Informacyjne JS Instrukcja switch Instrukcja switch zwana jest także instrukcją wyboru. Pozwala uzależnić wykonywany kod od wartości wyrażenia. Jeżeli żadna wartość całkowita nie będzie odpowiadać wartości wyrażenia, zostanie wykonana instrukcja znajdująca się po słowie kluczowym default. Użycie break jest opcjonalne, jeśli nie występuje program przechodzi do instrukcji po następnym case. switch (wyrazenie) { case wartosc1: dzialanie1; break; case wartosc2: dzialanie2; break; …. default: dzialanie; } np. var dzis=new Date() // tworzony jest obiekt z datą dzien=dzis.getDay() // wiemy jaki jest dzien na podstawie daty switch (dzien) { case 5: document.write("wreszcie piątek"); break; case 0: document.write("śpiąca niedziela"); default: document.write("kiedy wreszcie będzie weekend?!"); }
15 Technologie Informacyjne15 Technologie Informacyjne JS Pętla while Instrukcja w pętli while jest wykonywana przez cały czas, gdy warunek jest spełniony while (warunek) { instrukcja } np. litera="a" while(litera!="z") { document.write(litera) kodLitery=litera.charCodeAt() // pobierany jest kod ASCII litery kodLitery++ // zwiększamy kod o 1 litera=String.fromCharCode(kodLitery) // tworzymy litere z kodu ASCII }
16 Technologie Informacyjne16 Technologie Informacyjne JS Pętla do while Pętla musi być wykonana co najmniej 1 raz: nawet, gdy warunek nie będzie spełniony. Jest to związane z tym, że warunek jest sprawdzany na końcu: do { instrukcja } while (warunek) Pętla for może być wykorzystana do wykonania pewnych instrukcji określoną ilość razy. for(inicjalizacja_zmiennej; warunek; zmiana_zmiennej) { instrukcje } Pętla for
17 Technologie Informacyjne17 Technologie Informacyjne JS Zdarzenia onMouseOver Zdarzenie jest wywoływane jednorazowo, gdy najedziemy na obiekt posiadający obsługę tego zdarzenia. Zdarzenie jest aktywne do momentu opuszczenia obszaru. np. onet onMouseOut Zdarzenie jest wywoływane jednorazowo, gdy opuszczamy kursorem obiekt posiadający obsługę tego zdarzenia. Zdarzenie jest aktywne do momentu umieszczenia kursora na jakimś obszarze. onMouseOut= =”window.status=‘ ’; return true” > onet
18 Technologie Informacyjne18 Technologie Informacyjne Zdarzenia
19 Zdarzenia onLoad i onUnload19 Technologie Informacyjne JS Zdarzenia onLoad i onUnload Procedury onLoad onUnload zostają wykonane odpowiednio, po załadowaniu strony do przeglądarki i po opuszczeniu strony. Możemy je zastosować np. do powitania, lub pożegnania użytkownika. np.
20 Zdarzenia onLoad i onUnload20 Technologie Informacyjne JS Zdarzenia onLoad i onUnload np. var imie = podaj_imie(); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/20/Zdarzenia+onLoad+i+onUnload.jpg", "name": "Zdarzenia onLoad i onUnload", "description": "20. Technologie Informacyjne. JS. Zdarzenia onLoad i onUnload. np. function powitanie (imie){ alert ( Czesc! Witamy na naszej stronie + ((imie== brak ) :imie) + ! ); } function podaj_imie (){ imie = prompt ( Podaj nam swoje imię , ); if (imie == null || imie == ){ imie = brak ; document.write ( Miło, że jestes z nami! ); else{ document.write ( Miło, że jestes z nami + imie + ! ); return imie; var imie = podaj_imie(); ", "width": "1024" } 21 Zdarzenia onMouseOver i onClick21 Technologie Informacyjne JS Zdarzenia onMouseOver i onClick np. Hellllloooooooooo!
{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/23/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "23. Technologie Informacyjne. JS. Formularze. np. function przetwarzaj_dane (formularz){ if (formularz.imie.value == ) alert ( Może jednak podasz swoje imię ); else. alert ( Czesc + formularz.imie.value + ! Co slychac ); } Tu wpisz swoje imię: ", "width": "1024" } 24 Technologie Informacyjne24 Technologie Informacyjne JS Formularze { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/24/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "24. Technologie Informacyjne. JS. Formularze. function przetwarzaj_dane (){ var brakuje_danych = false; var formularz = document.forms[0]; var napis = ; if (formularz.imie.value == ){ napis += imie\n brakuje_danych = true; } if (formularz.nazwisko.value == ){ napis += nazwisko\n if (formularz.tel.value == ){ napis += telefon\n if (!brakuje_danych) formularz.submit(); else. alert ( Nie wypełniłes następujacych pól:\n + napis); ", "width": "1024" } 25 Technologie Informacyjne25 Technologie Informacyjne JS Formularze Proszę podać swoje dane:
(Pola oznaczone * musza zostać wypełnione)
{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/26/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "26. Technologie Informacyjne. JS. Formularze. miasto: tel.: * ", "width": "1024" } 27 Technologie Informacyjne 27JS Elementy formularzy Elementami formularza mogą być następujące obiekty: button - przycisk checkbox - pole wyboru hidden - element ukryty password - pole do wpisywania haseł radio - pole wyboru reset - przycisk reset select - lista wyboru submit - przycisk submit text - pole tekstowe textarea - rozszerzone pole tekstowe { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/27/Technologie+Informacyjne+27.jpg", "name": "Technologie Informacyjne 27", "description": "JS. Elementy formularzy. Elementami formularza mogą być następujące obiekty: button - przycisk. checkbox - pole wyboru. hidden - element ukryty. password - pole do wpisywania haseł. radio - pole wyboru. reset - przycisk reset. select - lista wyboru. submit - przycisk submit. text - pole tekstowe. textarea - rozszerzone pole tekstowe.", "width": "1024" } 28 Technologie Informacyjne28 Technologie Informacyjne JS Elementy button np. Dane personalne: imię: * * Adres: ulica: nr domu: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/25/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "25. Technologie Informacyjne. JS. Formularze. Proszę podać swoje dane: (Pola oznaczone * musza zostać wypełnione) Dane personalne: imię: * nazwisko: * Adres: ulica: nr domu: ", "width": "1024" } 26 Technologie Informacyjne26 Technologie Informacyjne JS Formularze miasto: *
NAME = "przycisk1" VALUE = " Kliknij mnie " onClick = "przetwarzaj_dane()"> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/28/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "28. Technologie Informacyjne. JS. Elementy button. np. function przetwarzaj_dane (){ alert ( Dzięki, bardzo to lubię! :) ); } ", "width": "1024" } 29 Technologie Informacyjne29 Technologie Informacyjne JS Element checkbox np. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/29/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "29. Technologie Informacyjne. JS. Element checkbox. np. function imie_przetwarzaj_duze (formularz1){ if (formularz1.imie_duze.checked){ formularz1.imie.value = formularz1.imie.value.toUpperCase(); if (formularz1.imie_male.checked){ formularz1.imie_male.click(); } function imie_przetwarzaj_male (formularz1){ formularz1.imie.value = formularz1.imie.value.toLowerCase(); formularz1.imie_duze.click(); ", "width": "1024" } 30 Technologie Informacyjne30 Technologie Informacyjne JS Element checkbox cd.
imię: NAME = "imie" SIZE = "15"> NAME = "imie_duze" onClick = "imie_przetwarzaj_duze(formularz1)"> duże litery NAME = "imie_male" onClick = "imie_przetwarzaj_male(formularz1)"> małe litery { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/30/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "30. Technologie Informacyjne. JS. Element checkbox. cd. imię: duże litery. NAME = imie_male onClick = imie_przetwarzaj_male(formularz1) > małe litery. ", "width": "1024" } 31 Technologie Informacyjne31 Technologie Informacyjne JS Element hidden Jest to obiekt niewidoczny w dokumencie HTML. Stosowany do przechowywania wprowadzonych przez użytkownika wartości. Wyzerowanie formularza - przypisanie wszystkim polom ich wartości domyślnych. Element reset { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/31/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "31. Technologie Informacyjne. JS. Element hidden. Jest to obiekt niewidoczny w dokumencie HTML. Stosowany do przechowywania wprowadzonych przez użytkownika wartości. Wyzerowanie formularza - przypisanie wszystkim polom ich wartości domyślnych. Element reset.", "width": "1024" } 32 Technologie Informacyjne32 Technologie Informacyjne JS Element select Element select tworzy listę wyboru w formularzu. wielkość - liczba pozycji na liście, które mają być wyświetlane. SIZE = „wielkość” - liczbę widocznych elementów listy. OnBlur, onChange i onFocus - procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus. Parametr VALUE znacznika OPTION podaje wartość, jaka zostanie zwrócona do serwera po wybraniu danej opcji i wysłaniu formularza. SELECTED - dana pozycja na liście opcji ma być domyślnie zaznaczona. MULTIPLE - przewijana lista wielokrotnego wyboru. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/32/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "32. Technologie Informacyjne. JS. Element select. Element select tworzy listę wyboru w formularzu. tekst [ ... tekst] wielkość - liczba pozycji na liście, które mają być wyświetlane. SIZE = „wielkość - liczbę widocznych elementów listy. OnBlur, onChange i onFocus - procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus. - wartości na liście wyboru. Parametr VALUE znacznika OPTION podaje wartość, jaka zostanie zwrócona do serwera po wybraniu danej opcji i wysłaniu formularza. SELECTED - dana pozycja na liście opcji ma być domyślnie zaznaczona. MULTIPLE - przewijana lista wielokrotnego wyboru.", "width": "1024" } 33 Technologie Informacyjne33 Technologie Informacyjne JS Element select Element select tworzy listę wyboru w formularzu. wielkość - liczba pozycji na liście, które mają być wyświetlane. SIZE = „wielkość” - liczbę widocznych elementów listy. OnBlur, onChange i onFocus - procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus. Parametr VALUE znacznika OPTION podaje wartość, jaka zostanie zwrócona do serwera po wybraniu danej opcji i wysłaniu formularza. SELECTED - dana pozycja na liście opcji ma być domyślnie zaznaczona. MULTIPLE - przewijana lista wielokrotnego wyboru. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/33/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "33. Technologie Informacyjne. JS. Element select. Element select tworzy listę wyboru w formularzu. tekst [ ... tekst] wielkość - liczba pozycji na liście, które mają być wyświetlane. SIZE = „wielkość - liczbę widocznych elementów listy. OnBlur, onChange i onFocus - procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus. - wartości na liście wyboru. Parametr VALUE znacznika OPTION podaje wartość, jaka zostanie zwrócona do serwera po wybraniu danej opcji i wysłaniu formularza. SELECTED - dana pozycja na liście opcji ma być domyślnie zaznaczona. MULTIPLE - przewijana lista wielokrotnego wyboru.", "width": "1024" } 34 Technologie Informacyjne34 Technologie Informacyjne JS Element select np.
{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/34/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "34. Technologie Informacyjne. JS. Element select. np. function obsluga_zdarzenia (obj){ alert ( wybrales opcje numer + (obj.selectedIndex + 1)); } We are the champions. Show must go on. Barcelona. One year of love. Innuendo. ", "width": "1024" } 35 Technologie Informacyjne35 Technologie Informacyjne JS Element text Element ten służy do wprowadzania przez użytkownika krótkiego ciągu znaków. [onBlur = ”procedura obsługi”] [onChange = ”procedura obsługi”] [onFocus = ”procedura obsługi”] [onSelect = ”procedura obsługi”] > VALUE - wartość początkowa, czyli tekst, który ukaże się domyślnie w oknie tekstowym. SIZE - wielkość okna tekstowego. OnSelect - procedura obsługi zdarzenia polegającego na zaznaczeniu fragmentu tekstu. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/35/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "35. Technologie Informacyjne. JS. Element text. Element ten służy do wprowadzania przez użytkownika krótkiego ciągu znaków. VALUE - wartość początkowa, czyli tekst, który ukaże się domyślnie w oknie tekstowym. SIZE - wielkość okna tekstowego. OnSelect - procedura obsługi zdarzenia polegającego na zaznaczeniu fragmentu tekstu.", "width": "1024" } 36 Technologie Informacyjne36 Technologie Informacyjne JS Element text
Podaj liczbę w pierwszym oknie: NAME = "okno_tekstowe" VALUE = "" onChange = "obsluga_zdarzenia(this)" > { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12287043/72/images/36/Technologie+Informacyjne.jpg", "name": "Technologie Informacyjne", "description": "36. Technologie Informacyjne. JS. Element text. function obsluga_zdarzenia (obj){ if (isNaN (obj.value)){ alert ( To nie jest liczba ); obj.focus(); obj.select(); } Podaj liczbę w pierwszym oknie: ", "width": "1024" } 37 Technologie Informacyjne37 Technologie Informacyjne JS Element textarea Element ten służy do wprowadzania przez użytkownika dłuższego tekstu.