JavaScript.

Slides:



Advertisements
Podobne prezentacje
Programowanie w języku Visual Basic
Advertisements

Wprowadzenie do języka skryptowego PHP
Wprowadzenie do języka skryptowego PHP – cz. 2
Narzędzia internetowe Paweł Rajba ttp://pawel.ii.uni.wroc.pl/
Języki programowania C++
typy całkowite (całkowitoliczbowe)
PROGRAMOWANIE STRUKTURALNE
Polsko-Japońska Wyższa Szkoła Technik Komputerowych
Materiały do zajęć z przedmiotu: Narzędzia i języki programowania Programowanie w języku PASCAL Część 7: Procedury i funkcje © Jan Kaczmarek.
Materiały do zajęć z przedmiotu: Narzędzia i języki programowania Programowanie w języku PASCAL Część 8: Wykorzystanie procedur i funkcji © Jan Kaczmarek.
Kurs Pascala – spis treści
Komunikacja z arkuszem. Iteracje. Funkcje.
Programowanie obiektowe. Obiekty. Metody. Właściwości.
Wykład 2 struktura programu elementy języka typy zmienne
Made by Mateusz Szirch Kilka słów o JavaScript.
PODSTAWY <HTML>
Podstawy programowania
A ctive S erver P ages Technologia dostępu do danych.
© A. Jędryczkowski – 2006 r. © A. Jędryczkowski – 2006 r.
Wstęp do JavaScriptu Marek Magiera Październik 2003r.
ZESTAW DO NAUKI JAVASCRIPT
Wprowadzenie do HTML, CSS, JavaScript, PHP
PHP: warunki, pętle, switch, break, continue
Pliki Pojęcie i rodzaje plików Definicja typu plikowego Operacje wykonywane na plikach elementowych.
Tworzenie stron internetowych
ANNA BANIEWSKA SYLWIA FILUŚ
Uniwersytet Mikołaja Kopernika Wydział Fizyki, Astronomii i Informatyki Stosowanej Podyplomowe Studium Programowania i Zastosowań Komputerów Paweł Abramczyk.
INTERNETOWE USŁUGI INFORMACYJNE
Technologie internetowe II
JAVA c.d.. Instrukcji wyboru SWITCH używamy, jeśli chcemy w zależności od wartości pewnego wyrażenia wykonać jeden z kilku fragmentów kodu. Jest to w.
XML – eXtensible Markup Language
Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 8.
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML Część 4 Prowadzący: Dariusz Jaruga
MICROSOFT Access TWORZENIE MAKR
Temat 5: Pozycjonowanie elementów
Temat 12: Formularze.
Projektowanie stron WWW
Aplikacje internetowe
Temat 7: Instrukcje warunkowe
Wykład 3 Programowanie obiektowe. Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document,
Aplikacje internetowe Grafika na stronach WWW ciąg dalszy Atrybuty znacznika body.
J A V A S C R I P T Obiekty Opracowała: Anna Śmigielska.
Temat 4: Typy danych.
Projektowanie Aplikacji Internetowych
PHP Formularze Damian Urbańczyk. Do czego służą? Formularze to bardzo ważne elementy stron internetowych, dzięki nim dochodzi do wymiany danych pomiędzy.
Temat 3: Okno dialogowe.
Technologie internetowe Wykład 5 Wprowadzenie do skrytpów serwerowych.
Portal edukacyjny A.Ś. FORMULARZE W JĘZYKU HTML. Portal edukacyjny A.Ś. Obiekty umieszczane na stronach www Teksty Obrazy Odnośniki Tabele Ramki pływające.
C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów.
Obiekty DOM.
Opracowanie mgr Karol Adamczyk
Wprowadzenie do PHP SYSTEMY TELEINFORMATYCZNE Wykład 5 AiR 5r.
PHP. PHP obiektowy, skryptowy język programowania zaprojektowany do generowania stron internetowych w czasie rzeczywistym.
Kurs WWW – wykład 6 Paweł Rajba
Wykład 4 Dr Aneta Polewko-Klim Dr Aneta Polewko-Klim
Podsumowanie wiedzy MPDI2 sem.3 INFORMATYKA. tworzenie nowego pliku i katalogu, nawigacja po katalogach, listowanie zawartości katalogu, zmiana nazw,
Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy.
Seminarium Dyplomowe: Metodyka i Techniki Programowania Autor: Bartłomiej Fornal.
Instrukcje warunkowe w php. Pętla FOR Czasem zachodzi potrzeba wykonania jakiejś czynności określoną ilość razy. Z pomocą przychodzi jedna z najczęściej.
Portal edukacyjny J A V A S C R I P T JĘZYK PROGRAMOWANIA STRON HTML Opracowała: Anna Śmigielska.
Wstęp do programowania Wykład 2 Dane, instrukcje, program.
Dominik Benduski Michał Mandecki Podstawy Visual Basic w Excelu.
P ASCAL Definicje, deklaracje, podstawowe instrukcje 1.
C++ mgr inż. Tomasz Turba Politechnika Opolska 2016.
Wykład 4 Dr Aneta Polewko-Klim Dr Aneta Polewko-Klim
Czym jest PHP? ● Językiem programowania przeznaczonym do tworzenia i generowania dynamicznych stron WWW. Działa po stronie serwera: Klient Żądanie strony.
Typy wyliczeniowe, kolekcje
Programowanie Obiektowe – Wykład 2
Aplikacje i usługi internetowe
Dane, zmienne, instrukcje
Zapis prezentacji:

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.

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

Technologie Informacyjne 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-8859-2"> </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

Technologie Informacyjne 5 Technologie Informacyjne JS Okno dialogowe Np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </HEAD> <SCRIPT LANGUAGE = "JavaScript"> <!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScriptu alert("To jest okno dialogowe"); // Koniec kodu JavaScript --> </SCRIPT> <BODY> </BODY> </HTML>

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

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

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

Technologie Informacyjne 9 Technologie Informacyjne JS Operatory Operatory przypisania

Technologie Informacyjne 10 Technologie Informacyjne JS Operatory Operatory porównania

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

Technologie Informacyjne 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?!"); }

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

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

Technologie Informacyjne 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=„http://www.onet.pl/” 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=”http://www.onet.pl/” onMouseOver=”window.status=‘to jest onet’; return true;” onMouseOut= =”window.status=‘ ’; return true” > onet</a>

Technologie Informacyjne 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-8859-2"> </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-8859-2"> <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-8859-2"> <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>

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

Technologie Informacyjne 23 Technologie Informacyjne JS Formularze np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <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>

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

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

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

Technologie Informacyjne 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-8859-2"> <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>

Technologie Informacyjne 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-8859-2"> <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>

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

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

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

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

Technologie Informacyjne 34 Technologie Informacyjne JS Element select np. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <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>

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

Technologie Informacyjne 36 Technologie Informacyjne JS Element text <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <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>

Technologie Informacyjne 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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2"> <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>

Technologie Informacyjne 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-8859-2" /> <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>

Technologie Informacyjne 41 Technologie Informacyjne JS Menu <script type="text/javascript"> <!-- function Pokaz(nazwa) { document.getElementById(nazwa).style.visibility = 'visible'; } function Ukryj(nazwa) document.getElementById(nazwa).style.visibility = 'hidden'; //--> </script> </head> <body> <div id="menu" class="menu"> <hr /> <div onmouseover="Pokaz('SubMenu1')" onmouseout="Ukryj('SubMenu1')"> <div id="SubMenu1" class="submenu"> <a href="http://www.onet.pl">Onet</a> <a href="http://republika.onet.pl">Republika</a> </div>

Technologie Informacyjne 42 Technologie Informacyjne JS Menu <p> Strony</p> </div> <div onmouseover="Pokaz('SubMenu2')" onmouseout="Ukryj('SubMenu2')"> <div id="SubMenu2" class="submenu"> <hr /> <a href="http://poczta.onet.pl">Poczta</a> <a href="http://czat.onet.pl">Czat</a> Serwisy</p> <br/><br/><br/><br/><br/><br/><br/> </body> </html>