JavaScript.

JavaScript

Technologie Informacyjne
2 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 Informacyjne JS <SCRIPT> Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML <SCRIPT> i </SCRIPT>. 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 <BODY>. Znacznik ten powinien zawierać parametr LANGUAGE z wartością JavaScript. Np. <HTML> <HEAD> </HEAD> <SCRIPT language = "JavaScript"> </SCRIPT> <BODY> </BODY> </HTML>

4 Technologie Informacyjne JS document.write() Instrukcja document.write() pozwala na wyprowadzenie tekstu na ekran przeglądarki. Np. <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=iso "> </HEAD> <SCRIPT language = "JavaScript"> document.write ("znowu wykład") </SCRIPT> <BODY> </BODY> </HTML> document to obiekt, który reprezentuje aktualną stronę write to tzw. metoda, czyli pewna funkcja działająca na obiekcie

5 Technologie Informacyjne JS Okno dialogowe Np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </HEAD> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> <BODY> </BODY> </HTML>

6 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 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 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 Informacyjne JS Operatory Operatory przypisania

10 Technologie Informacyjne JS Operatory Operatory porównania

11 Technologie Informacyjne JS Operatory Operatory logiczne

Instrukcja warunkowa if Instrukcja warunkowa if…else
12 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

Instrukcja warunkowa if Instrukcja warunkowa if…else
13 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("<br><a href=\"adult.html\">Wejście dla dorosłych</a>") } 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 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 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 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 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. <a href=„ onMouseOver=„window.status=‘to jest onet’; return true”> onet</a> 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. <a href=” onMouseOver=”window.status=‘to jest onet’; return true;” onMouseOut= =”window.status=‘ ’; return true” > onet</a>

18 Technologie Informacyjne Zdarzenia

Zdarzenia onLoad i onUnload
19 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. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </HEAD> <BODY onUnload = "alert ('Odwiedz mnie jeszcze kiedys!')"> </BODY> </HTML>

Zdarzenia onLoad i onUnload
20 Technologie Informacyjne JS Zdarzenia onLoad i onUnload np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = JavaScript> 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!<BR>"); else{ document.write ("Miło, że jestes z nami " + imie + "!<BR>"); return imie; </SCRIPT> </HEAD> <BODY onLoad = "powitanie(imie)"> var imie = podaj_imie(); <BODY> </HTML>

Zdarzenia onMouseOver i onClick
21 Technologie Informacyjne JS Zdarzenia onMouseOver i onClick np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <H2><CENTER> <P onMouseOver = "alert('Najechałes mysza na tekst Hellllloooooooooo!')">Hellllloooooooooo!</P> </H2></CENTER> </BODY> </HTML> </HEAD> <BODY> <A HREF="#" onClick="window.close()";> Zamknij okno</A>

22 Technologie Informacyjne JS Formularze <FORM NAME = ”nazwa” TARGET = ”okno” ACTION = ”url” METHOD = ”metoda” ENCTYPE = ”typ kodowania”> </FORM> nazwa - nazwa formularza TARGET - podaje nazwę okna, w którym ma się pojawić odpowiedź. ACTION - podaje lokalizację serwera, do którego mają zostać wysłane dane zebrane z formularza. METHOD - podaje sposób wysłania informacji do serwera, ENCTYPE - podaje sposób kodowania MIME. MIME, czyli Multipurpose Internet Mail Extension - Wielozadaniowe rozszerzenie poczty w Internecie, jest standardem pozwalającym przesyłać w sieci Internet wszelkie dane (teksty, grafikę, zdjęcia, dźwięki, muzykę, programy) za pomocą standardowych narzędzi, takich jak poczta, newsy czy WWW.

23 Technologie Informacyjne JS Formularze np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = "JavaScript"> function przetwarzaj_dane (formularz){ if (formularz.imie.value == "") alert ("Może jednak podasz swoje imię?"); else alert ("Czesc " + formularz.imie.value + "! Co slychac?"); } </SCRIPT> </HEAD> <BODY> <H2> <FORM NAME = "formularz1"> Tu wpisz swoje imię: <BR> <INPUT TYPE = "text" NAME = "imie" > <BR><BR> <INPUT TYPE = "button" VALUE = "Kliknij tutaj" onClick = "przetwarzaj_dane(this.form)"> </H2> </BODY> </HTML>

24 Technologie Informacyjne JS Formularze <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = JavaScript> 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); </SCRIPT> </HEAD>

25 Technologie Informacyjne JS Formularze <BODY> <H2> <FORM NAME = "formularz1"> Proszę podać swoje dane: <FONT SIZE = "-1"><I><BR> (Pola oznaczone * musza zostać wypełnione) </FONT></I><BR><BR> <TABLE> <TR><TD><B> Dane personalne:</B> </TD><TD></TD></TR> <TR><TD> imię:</TD><TD> <input type = "text" name = "imie">*</TD></TR> nazwisko:</TD><TD> <input type = "text" name = "nazwisko">*</TD></TR> Adres:</B></TD><TD> </TD> ulica:</TD><TD> <input type = "text" name = "ulica"></TD></TR> nr domu:</TD><TD> <input type = "text" name = "nrdomu"></TD></TR>

26 Technologie Informacyjne JS Formularze <TR><TD> miasto:</TD><TD> <input type = "text" name = "miasto"></TD></TR> tel.:</TD><TD> <input type = "text" name = "tel">*</TD></TR> </TD><TD ALIGN = "right"> </H2> <input type = "button" name = "wyslij" value = " Wyslij! " onClick = "przetwarzaj_dane()"> </TD></TR> </TABLE> </BODY> </HTML>

Technologie Informacyjne 27
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

28 Technologie Informacyjne JS Elementy button <INPUT TYPE = ”button” NAME = ”nazwa przycisku” VALUE = ”wartość na przycisku” [onClick = ”obsługa zdarzenia”]> np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = "JavaScript"> function przetwarzaj_dane (){ alert ("Dzięki, bardzo to lubię! :)"); } </SCRIPT> </HEAD> <BODY> <BR><BR> <FORM NAME = "formularz1"> <INPUT TYPE = "button" NAME = "przycisk1" VALUE = " Kliknij mnie " onClick = "przetwarzaj_dane()"> </FORM> </BODY> </HTML>

29 Technologie Informacyjne JS Element checkbox <INPUT TYPE = ”checkbox” NAME = ”nazwa pola” VALUE = ”wartość” [CHECKED] [onClick = ”obsługa zdarzenia]> np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = "JavaScript"> 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(); </SCRIPT> </HEAD>

30 Technologie Informacyjne JS Element checkbox cd. <BODY> <BR> <FORM NAME = "formularz1"> <B> imię: </B> <INPUT TYPE = "text" NAME = "imie" SIZE = "15"> <INPUT TYPE = "checkbox" NAME = "imie_duze" onClick = "imie_przetwarzaj_duze(formularz1)"> duże litery NAME = "imie_male" onClick = "imie_przetwarzaj_male(formularz1)"> małe litery </FORM> </BODY> </HTML>

31 Technologie Informacyjne JS Element hidden Jest to obiekt niewidoczny w dokumencie HTML. Stosowany do przechowywania wprowadzonych przez użytkownika wartości. <INPUT TYPE="hidden” NAME="nazwa obiektu” [VALUE="wartość"]> Wyzerowanie formularza - przypisanie wszystkim polom ich wartości domyślnych. <INPUT TYPE = "reset” NAME = "nazwa” VALUE = "tekst” [onClick = "obsługa zdarzenia"]> Element reset

32 Technologie Informacyjne JS Element select Element select tworzy listę wyboru w formularzu. <SELECT NAME = "nazwa” [SIZE = "wielkość"] [MULTIPLE] [onBlur = "procedura obsługi"] [onChange = "procedura obsługi "] [onFocus = " procedura obsługi "]> <OPTION VALUE = "wartość" [SELECTED]> tekst [ ... <OPTION> tekst] </SELECT> 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. <OPTION> - 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.

33 Technologie Informacyjne JS Element select Element select tworzy listę wyboru w formularzu. <SELECT NAME = "nazwa” [SIZE = "wielkość"] [MULTIPLE] [onBlur = "procedura obsługi"] [onChange = "procedura obsługi "] [onFocus = " procedura obsługi "]> <OPTION VALUE = "wartość" [SELECTED]> tekst [ ... <OPTION> tekst] </SELECT> 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. <OPTION> - 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.

34 Technologie Informacyjne JS Element select np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = JavaScript> function obsluga_zdarzenia (obj){ alert ("wybrales opcje numer " + (obj.selectedIndex + 1)); } </SCRIPT> </HEAD> <BODY> <BR> <FORM NAME = "lista"> <SELECT NAME = "songs" SIZE = "5" MULTIPLE onChange = "obsluga_zdarzenia(this)"> <option> We are the champions <option> Show must go on <option> Barcelona <option> One year of love <option> Innuendo </select> </FORM> </BODY> </HTML>

35 Technologie Informacyjne JS Element text Element ten służy do wprowadzania przez użytkownika krótkiego ciągu znaków. <INPUT TYPE = ”tekst” NAME = ”nazwa obiektu” VALUE = ”tekst” SIZE = liczba [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.

36 Technologie Informacyjne JS Element text <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <SCRIPT LANGUAGE = JavaScript> function obsluga_zdarzenia (obj){ if (isNaN (obj.value)){ alert ("To nie jest liczba"); obj.focus(); obj.select(); } </SCRIPT> </HEAD> <BODY> <BR> <H2> Podaj liczbę w pierwszym oknie: <FORM NAME = "przyklad 69a"> <INPUT TYPE = "text" NAME = "okno_tekstowe" VALUE = "" onChange = "obsluga_zdarzenia(this)" > <INPUT TYPE = "text"> </FORM> </H2> </BODY> </HTML>

37 Technologie Informacyjne JS Element textarea Element ten służy do wprowadzania przez użytkownika dłuższego tekstu. <TEXTAREA NAME = ”nazwa obiektu” ROWS = ”liczba rzędów” COLS = ”liczba kolumn” [onBlur = ”obsługa zdarzenia”] [onChange = ”obsługa zdarzenia”] [onFocus = ”obsługa zdarzenia”] [onSelect = ”obsługa zdarzenia”]> tekst </TEXTAREA>

Zmiana koloru tła strony przez użytkownika
38 Technologie Informacyjne JS Zmiana koloru tła strony przez użytkownika <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso "> <script type="text/javascript" language="JavaScript"> function changeBgColor (color, id) { document.bgColor = color; makeSelectProperties (id); return 0; } function makeSelect (id) { values = new Array ("#FF0000", "#FFFF00", "#008000", "#000000", "#FFFFFF"); texts = new Array ("Czerwony", "Żółty", "Zielony", "Czarny", "Biały"); output = "<select id='" + id + "' style='background-color: #f0f0f0;' onChange='changeBgColor (this.options[this.selectedIndex].value, this.id);'>"; for (i = 0; texts[i]; i++) output += "<option value='" + values[i] + "' style='color: " + values[i] + ";'>" + texts[i] + "</option>"; output += "</select>"; write (output);

Zmiana koloru tła strony przez użytkownika
39 Technologie Informacyjne JS Zmiana koloru tła strony przez użytkownika function makeSelectProperties (id) { x = document.getElementById (id); for (i = 0; x.options[i]; i++) if (x.options[i].value == document.bgColor) { x.selectedIndex = i; break; } x.style.color = x.options[x.selectedIndex].value; return 0; function write (text) { if(document.getElementById) document.getElementById("place").innerHTML= text; else if(document.all) document.all.place.innerHTML=text; else if(document.layers) { document.layers.place.document.open(); document.layers.place.document.write(text); document.layers.place.document.close(); </script> </head> <body bgcolor="#000000" onLoad="makeSelect ('colorSelect');"> <div id="place"></div> </body> </html>

40 Technologie Informacyjne JS Menu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso " /> <style type="text/css"> div.menu { position: absolute; height: auto; width: 100px; background-color: Teal; padding: 10px 10px 10px 10px; } div.submenu left: 90px; visibility:hidden; background-color:Teal; </style>

41 Technologie Informacyjne JS Menu <script type="text/javascript">  </script> </head> <body> <div id="menu" class="menu"> <hr /> <div onmouseover="Pokaz('SubMenu1')" onmouseout="Ukryj('SubMenu1')"> <div id="SubMenu1" class="submenu"> <a href=" <a href=" </div>

42 Technologie Informacyjne JS Menu <p> Strony</p> </div> <div onmouseover="Pokaz('SubMenu2')" onmouseout="Ukryj('SubMenu2')"> <div id="SubMenu2" class="submenu"> <hr /> <a href=" <a href=" Serwisy</p> <br/><br/><br/><br/><br/><br/><br/> </body> </html>

JavaScript.

Podobne prezentacje

Prezentacja na temat: "JavaScript."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

JavaScript.

Podobne prezentacje

Prezentacja na temat: "JavaScript."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres