projektowanie stron www

Projektowanie stron WWW

JavaScript jako język programowania

Co to jest Java-script

• JavaScript jest językiem programowania• jest opisywany jako język skryptowy,

• jest językiem obiektowym:– używa obiektów, metod, zdarzeń, zmiennych, itd.

• Tworzony przez Netscape (wcześniej był znany jako LiveScript),

• JavaScript jest programem, który jest umieszczany na stronie HTML

– znaczniki: <SCRIPT> , </SCRIPT>

– Powinny się znaleźć w sekcji <HEAD> a nie powinny być umieszczane w sekcji <BODY>, ale to nie jest regułą.

Przykład<HTML><HEAD>

<TITLE>My first script</TITLE>

</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>

document.write("Hello, world!")

</SCRIPT></H1></BODY></HTML>

Dlaczego używamy JavaScript?

• Język HTML nie umożliwia wielu czynności, a niektóre są trudne do uzyskania,

• JavaScript umozliwia pracę interaktywną, oraz tworzenie dynamicznych witryn,

• JavaScript umożliwia sprawdzanie poprawnosci danych przekazywanych przez skrypty CGI,

• JavaScript został zaprojektowany z myślą o jego użytkowaniu przez osoby, które nie umieją programować,

Dlaczego używamy JavaScript?

• Potrafi lepiej wykorzystac możliwości serwera, odciążyć jego pracę,

• umożliwia lepsze zarzadzanie okienkami, przyciskami, ramkami (ogólnie elementami witryny),

• umożliwia stosowanie różnych efektów specjalnych jak np. animację, przewijania, uzależnienie wyświetlania witryny od preferencji użytkownika.

Tryby działania JavaScript

• JavaScript działa w dwóch trybach:– Podczas ładowania strony– W reakcji na zdarzenia (zwykle kliknięcia elementu

ekranu)

• Postać użycia JavaScript:– <SCRIPT LANGUAGE=”JavaScript” SRC=”URL”>

UWAGA: W JAVASCRIPT OBOWIAZUJE ZASADA: JEDNA INSTRUKCJA TO JEDEN WIERSZ (chyba że średnikiem oddzielimy dwie instrukcje w jednym wierszu. Ale jedna instrukcja nie może się ciągnąć przez kilka wierszy)

Java Script – język obietowy

• Własności,

• Metody,

• Zdarzenia.

Właściwości• Właściwościami są zmienne przechowujące

atrybuty obiektów stosowanych w języku. Dostęp jest możliwy poprzez polecenie postaci: obiekt.własność

• Przykładowe właściwości:– document.color - kolor dokumentu– document.fgcolor - kolor tekstu, – document.lastModyfied - data ostatniej

modyfikacji

Metody• Metoda jest funkcją, która wykonuje czynności

związane z obiektem. Wywołujemy poprzez podanie obiekt.nazwa. Po nazwie metody podajemy parę nawiasów.

• Przykłady:– document.write(string) - wpisujemy do dokumetu tekst,

– form.submit() - wysyłamy formularz,

– window.alert() - wyświetla okienko dialogowe z zawartością string,

– window.open(URL, nazwa) - otwiera dokument.

Przykład „własnej”: wyświetlanie daty

<SCRIPT LANGUAGE="JAVASCRIPT1.1"></SCRIPT>

Zdarzenia• Zdarzeniami są specjalne akcje, wywoływane

podczas czynności zachodzących w systemie, np. otwarcie okna, wysłanie formularza.

• Przykłady:– onBlur - wykonywane, gdy użytkownik opuszcza

stronę

– onChange - wykonywane, gdy użytkownik zmieni zawartość aktywnego pola,

– onClick - wykonywane, gdy użytkownik kliknie określony przycisk,

Elementy języka Java Script• Do pisania programów korzystamy z liter alfabetu

łacińskiego (angielskiego): małe i duże litery (są rozróżniane), cyfry, znaki specjalne: [, ], (, ), ,(przecinek), …

• Liczby: 123, 123.45, 123e3, 123e-4, -123.45e-4, • Identyfikatory: ciąg liter i cyfr zaczynający się od litery,

do liter zaliczamy znak „_”, • Słowa kluczowe: słowa, które mają specjalne znaczenie,

nie należy ich używać do innych celów, • Instrukcje: połączenia identyfikatorów, liczb, znaków

specjalnych i słów kluczowych, instrukcje są z góry ustalone, nie jest ich dużo, – Np. for(i=1;i<=10;i++)

• Funkcje: zbiór instrukcji+pewne dodatkowe zasady, • Biblioteki: zbiór funkcji+pewne dodatkowe zasady.

Instrukcje• Instrukcje dzielą się na:

– Instrukcje podstawienia, – Instrukcje wywołania funkcji, – Instrukcje bloku, – Instrukcje warunkowe, – Instrukcje pętli, – Instrukcje przerywające wykonywanie

sekwencji.

Instrukcje podstawienia

• Używamy ich wtedy, gdy chcemy pewną złożoną wartość czymś prostszym (oczywiście zmienną), – Np. x=12.34+y+12/y

• Ogólna postać:– identyfikator=wyrażenie

Wyrażenie

• Wyrażenie jest to złożony zapis wykonywanych operacji zgodnie z pewnymi regułami. Te reguły to przede wszystkim znaczenie operatorów i kolejność wykonywania operacji.

• Np.. Nie jest obojętne, czy operację: 132+456+325 wykonamy (132+456)+325 czy 132+(456+325).

Wyrażenie

• Wyrażenie dzielą się na wyrażenia proste (bez operatorów) i złożone – wyrażenia proste połączone operatorami.

• Przykład wyrażeń prostych: – 1– c,

• I złożonych– 1+c, – 2+4– 2+4+3/4+5– 2+(3*5+1)/(3+1)



</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>

x=12*34document.write("x="+x) //mogę napisać: document.write("x="+12*34)

</SCRIPT></H1></BODY></HTML>

Instrukcja bloku (sekwencji)

Instrukcji bloku używamy wtedy, gdy chcemy by pewna grupa instrukcji była traktowana jako jedność. Ważne w połączeniu z innymi instrukcjami. Możemy także stosować, gdy chcemy wydzielić pewne operacje (przykład)

Ogólna postać:{

I1;I2I3I4I5;i6

}

Przykład

<HTML><HEAD>


</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{ x=12*38

document.write("x="+x)}</SCRIPT></H1></BODY></HTML>

Instrukcje złożone (bloki) zagnieżdżone

<HTML><HEAD>


</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{

{x=2y=1+1/xz=1+1/y

}document.write("z="+z)

}</SCRIPT></H1></BODY></HTML>

Instrukcja alternaty

• Używamy wtedy, gdy chcemy warunkowo wykonać pewną operację.

• Są dowstepne dwie wersje alternatywy:

– if (w) {…}– if (w) {…} else {…}

• Semantyka, czyli działanie jest następujące:– W obu przypadkach obliczany jest warunek (coś do daje prawdę lub fałsz)– Jeśli warunek jest prawdziwy, to wykonywana jest instrukcja, może być

złożona i koniec instrukcji if - pierwszy wariant, – Jeśli warunek jest prawdziwy, to wykonywana jest instrukacja, w

przeciwnym razie wykonywana jest duga instrukcja – drugi wariant



</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{ x=5

if (x<10) {

document.write("Liczba jest mniejsza od 10") }




</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{ x=11

if (x<10) {

document.write("Liczba jest mniejsza od 10") }else

{document.write("Liczba jest większa od 10")

}




</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{ var dzis= new Date()

document.write("teraz jest "+dzis.getHours()+"<BR>")if (dzis.getHours()<10) {

document.write("Dzień dobry<BR>") }else

if (dzis.getHours()<18) {

document.write("miłego dnia <BR>") }else

{document.write("dobry wieczór<BR>")

}}</SCRIPT></H1></BODY></HTML>

PrzykładMożna prościej. Tam gdzie jest jedna instrukcja możemy opuścić nawiasy klamrowe (oznaczają one instrukcję

złożoną).

<HTML><HEAD>


</HEAD><BODY BGCOLOR=WHITE><H1><SCRIPT>{ var dzis= new Date()

document.write("teraz jest "+dzis.getHours()+"<BR>")if (dzis.getHours()<10)

document.write("Dzień dobry<BR>") else

if (dzis.getHours()<18) document.write("miłego dnia <BR>")

else document.write("dobry wieczór<BR>")


Instrukcja switchKonstrukcja switchJeśli chcemy mieć jeszcze więcej możliwości określenia zachowania

programu przy zróżnicowanych wartościach wejściowych, użyjemy konstrukcji switch. Pozwala ona wykonać jeden z wielu bloków kodu, w zależności od różnych wartości zmiennej. Jej składnia ma postać:

switch (zmienna) {case wartosc1:

kod wykonywany, gdy zmienna ma wartość wartosc1break

case wartosc2:kod wykonywany, gdy zmienna ma wartość wartosc2break

// ... itdcase wartoscX:

kod wykonywany, gdy zmienna ma wartość wartoscXbreak

default:kod wykonywany, gdy zmienna nie przyjmuje żadnej z powyższych wartości

}

Instrukcja switch

• Instrukcja switch opisuje sytuacje wielowariantowe. • Gdyby nie break, to od momentu wejścia w blok

byłyby wykonywane wszystkie instrukcje do końca bloku.

• Działanie switch:– Obliczamy wartość zmiennej, – Po obliczeniu szukamy wartości w case, – Jak znajdziemy, to jest wykonywany odpowiedni blok

instrukcji, – Gdy nie będzie znaleziony, to wykonywane są instrukcje

przypisan do default.

Przykładvar dzis=new Date() // tworzony jest obiekt z datądzien=dzis.getDay() // wiemy, jaki jest dzień, na podstawie daty

switch (dzien);{

case 5:document.write("Wreszcie piątek!");break;

case 6:document.write("Imprezowa sobota");break;

case 0:document.write("Śpiąca niedziela");break;

default:document.write("Kiedy wreszcie będzie weekend?!");

}

Pętle

• Pętle używamy wtedy, gdy chcemy wykonywać kilka operacji pewną liczbę razy.

• Rodzaj użytej pętli zależy od tego, czy wiemy ile razy pętla będzie się wykonywać (instrukcja for), czy też nie wiemy (pętla while).

Pętla while

• Składnia:– while (warunek)

• {– Instrukcje

• }

• Działanie:1. Obliczany jest warunek, 2. Jeśli jest prawdziwy, to wykonujemy instrukcje i

powrót do 1, 3. Jeśli nie jest prawdziwy, to koniec

Przykład• <HTML>• <HEAD>

• <TITLE>My first script</TITLE>

• </HEAD>• <BODY BGCOLOR=WHITE>• <SCRIPT>• {• x=20*Math.random()• document.write("*** x="+x+"<br>")• while (x>0)• {• x=x-1• document.write(" **x="+x+"<br>")

• }• document.write(" *x="+x+"<br>")• }• </SCRIPT>• </BODY>• </HTML>

Pętla while<HTML><HEAD>


</HEAD><BODY BGCOLOR=WHITE><SCRIPT>{

// while (w) {…}var cotydzien= new Date(2011,10,2) // 2.10.2011var i=1while (i<=15) {

document.write("Wyklad "+i+" będzie "+cotydzien+"<BR>") cotydzien=new Date(cotydzien.getYear(),

cotydzien.getMonth(), cotydzien.getDate()+7)

i++}

}</SCRIPT></BODY></HTML>

Petla do while

• Konstrukcja tej pętli jest bardzo podobna do poprzednio opisanej while, z tym że kod w niej umieszczony zawsze musi być wykonany co najmniej raz – nawet gdy warunek nie zostanie spełniony.

• Jest to związane z tym, że warunek interpreter sprawdza dopiero po wykonaniu poleceń – składnia ma bowiem postać

Instrukcja do while

Składniado {

instrukcje} while (warunek).

• Działanie:– Instrukcje są wykonywana, – Obliczany jest warunek, – Gdy jest prawdziwy, to pętla jest ponownie wykonywana, – Gdy jest nieprawdziwy, to pętla jest przerywana

Pętla for• Pętli for używamy wtedy, gdy wiemy ile razy pętla ma się

wykonać. • Składnia:

– for(zm=wp; warunek;zmiana zm)– {

• Instrukcje

– }

• Semantyka:– Zmiennej zm jest przypisywana wartość początkowa– Następuje sprawdzenie, czy warunek jest prawdziwy, – Jeśli jest prawdziwy, to:

• Wykonywane są instrukcje, • Następuje modyfikacja zmiennej sterującej

– Jeśli jest nieprawdziwy, to następuje koniec instrukcji pętli

Przykład• <HTML>• <HEAD>


• </HEAD>• <BODY BGCOLOR=WHITE>• <SCRIPT>• {• for (i=1; i<=10; i++)• document.write(i+"<BR>")

• }• </SCRIPT>• </BODY>• </HTML>

For zagnieżdżone• <HTML>• <HEAD>


• </HEAD>• <BODY BGCOLOR=WHITE>• <SCRIPT>• {• for (i=1; i<=5; i++)• {• document.write("<BR>")• for (j=5; j>=1; j--)• document.write(i*j+" ")• }

• }• </SCRIPT>• </BODY>• </HTML>

Operatory relacyjne

• ==,

• !=,

• <,

• <=,

• >=,

• >



</HEAD><BODY BGCOLOR=WHITE><SCRIPT>{

document.write("operatory relacyjne+<BR>")x=5y=6if (x==y)

document.write("równe<BR>")else

document.write("różne<BR>")

if (x!=y) document.write("różne<BR>")

elsedocument.write("równe<BR>")

if (x<y) document.write("mniejsze<BR>")

elsedocument.write("wieksze<BR>")

}</SCRIPT></BODY></HTML>

Operatory arytmetyczne• + - dodawanie

• - odejmowanie

• * - mnożenie,

• / - dzielenie,

• % - dzielenie całkowitoliczbowe,

• ++ - incrementacja,

• -- - dekrementacja

• przypisania:– +=, -=, *=, /=, %=

Obiekty

• Własności,

• Metody,

• zdarzenia

Częściej wykorzystywane obiekty

• Tablice,

• Napisy,

• Matematyczny (funkcje, stałe matematyczne),

• Data,

• Inne, np. okna

• array - pozwala na tworzenie tablic i pracę z nimi. Tablice przechowują wielkości tego samego typu. Do przetwarzania tablic wykorzystujemy funkcję indeks. Indeks jest to wyrażenie, które powinno być >= 0 i nie powinno przekraczać liczby elementów.

• tablicę tworzymy za pomocą: nazwatablicy=new array([dlugość])

• Własności: – length - liczba całkowita określająca ilość komórek w

tablicy, np. a.lenght(),

Tablice

Tablice

• Przykład

Obliczanie sumy elementów tablicy

n=5: a=Array(n)

suma=0

for (i=0;i<5;i++)suma=suma+a[i]

Tablice

• Przykład: obliczenie elementu maksymalnego

max=a[0]

for (i=1;i<n;i++)if (a[i]>max) max=a[i]

• Można i taki_max=0

for (i=1;i<n;i++)if (a[i]>a[i_max) i_max=i

Tablice

• Przykład: wypisz elementy maksymalne:

• Obliczamy maksimum (poprzedni slajd)for (i=0;i<n;i++)

If (a[i]==max) document.write(a[i])

Metody dla typu tablicowego• .concat(obiektArray2) - Łączy dwie lub więcej tablic i zwraca nową.• .join("separ") - Zwraca łańcuch znaków elementów tablicy,

przedzielonych separatorem. • .pop() - Usuwa i zwraca ostatni element tablicy. • .push("el1"[,"el2"]) - Dodaje element lub więcej na koniec tablicy i

zwraca nową długość. • .reverse() - Zwraca tablice z elementami w odwrotnej kolejności.

• .slice(indexPocz [,indexKońc]) - Zwraca tablicę utworzoną z części danej.

• .sort([funkcjaPorównawcza]) - Zwraca tablicę posortowaną. • .splice(index,ile [,el1, el2]) - Dodaje i/lub usuwa elementy tablicy.

• .toString() - Zwraca łańcuch znaków, który reprezentuje daną tablicę.

• .unshift("el1"[,"el2"]) Dodaje jeden lub kilka elementów na początek tablicy i zwraca nową długość.

Tablice• // przykład tablicy • var dztyg= new array(8)• dztyg[1]="poniedziałek"• dztyg[2]="wtorek"• dztyg[3]="środa"• dztyg[4]="czwartek"• dztyg[5]="piątek"• dztyg[6]="sobota"• dztyg[7]="niedziela"

Przykład<HTML><head><SCRIPT LANGUAGE="JAVASCRIPT"></SCRIPT></head><body><FORM><Script>

a=new Array(3)for (i=0;i<3;i++)

a[i]=idocument.write("Tablica przed operacja")for (i=0;i<3;i++)

document.write(a[i])document.write("Tablica po operacji")a.reverse()for (i=0;i<3;i++)

document.write(a[i])b=new Array(3)b=a.reverse()document.write("Tablica po jeszcze kolejnej operacji")for (i=0;i<3;i++)

document.write(b[i])

</Script></form></BODY></HTML>

String

• Obiekt String przechowuje napisy.

• Napisy są ważnym typem danych, są wykorzystywane nie tylko do tworzenia i zarządzania tekstów, ale także dynamicznie potrafią przechwowywać dane.

Obiekt StringMetodacharAt(5)

Wyjaśnienie Znak na pozycji

length Liczba znaków w Stringu

indexOf(”ala”) Pozycja pierwszego wystąpienia znaku lub stringu. –1 znaczy brak

lastIndexOf(jw)

j.w. Ale zaczynając od tyłu

Match(”ala”) j.w. Ale zwraca albo zadany string albo „null” zamiast liczby

substr(2,5) Zwraca string od pozycji 2 5 znaków

substring(2,4) Zwraca string od pozycji 2 do pozycji 4-1

toLowerCase()

Zamiana na małe litery

toUpperCase()

Zamiana na duże litery



a="Jan Abacki ul.3-go Maja"document.write("a="+a+"<BR>")document.write("długość napisu="+a.length+"<BR>")document.write("wystapienie A="+a.indexOf("A")+"<BR>")document.write("część napisu od 4 6 znaków="+a.substr(4,6)+"<BR>")


Obiekt Math.

• Obiekt Math zawiera ważne funkcje matematyczne i stałe.

Obiekt Math

Metoda Wyjaśnienie

max(x,y) Zwraca wieksza wartość

min(x,y) Zwraca mniejszą wartość

random() Zwraca liczbę losową z przedziału 0..1

round(x) Zaokragla liczbę do najbiższej całkowitej

a = Math.PI * r*r

y = r*Math.sin(theta)

x = r*Math.cos(theta)



x=Math.random()document.write("x="+x+"<BR>")document.write("sin(x)="+Math.sin(x)+"<BR>")document.write("pierwiastek="+Math.sqrt(x)+"<BR>")document.write("min 4 5="+Math.min(4,5)+"<BR>")document.write("max 4 5 8 3 5="+Math.max(4,5,8,3,5)+"<BR>")


Funkcje

• Kiedy używamy funkcji– Wtedy, gdy chcemy wykonać pewną grupę

poleceń logicznie ze sobą powiązanych, – Kiedy piszemy duży skrypt i chcemy łatwiej

zarządzać kodem, – Kiedy opracowujemy trudny algorytm

Budowa funkcjiDefinicja funkcji:

function nazwa_funkcji(parametry formalne) {

instrukcjereturn wyrażenie

} lub

function nazwa_funkcji(parametry formalne) {

instrukcje//bez return

}

Wywołanie funkcji - przykłady:y=nazwa_funkcji(parametry aktualne)

lubnazwa_funkcji(parametry aktualne)

Uwaga: gdy nie będzie return to wywołanie funkcji nie może wystąpić w wyrażeniu

Parametry formalne i aktualne• Ogólnie można powiedzieć, że dzięki parametrom

funkcję definiujemy raz, a wykorzystujemy wiele razy, • Są to parametry, które pozwalają w sposób ogólny,

abstrakcyjny) opisać rozwiązanie jakiegoś problemu. – Na przykład dla równania kwadratowego parametrami

formalnymi są: a, b i c. • Parametry aktualne pozwalają rozwiązać problem dla

konkretnych danych. – Na przykład dla równania kwadratowego parametrami

aktualnymi są: 2, 3 i 4 (konkretnie to: a=2, b=3 i c=4).

Wywołanie funkcji

• Gdy funkcja zostanie wywołana to:– Nastąpi podstawienie wartości parametrów

aktualnych pod formalne, – Wykonanie instrukcji tworzących funkcję, – Ew. zwrócenie wartości.

• Uwaga: pomijamy tu wszelkie rozważania związane z pracą systemu operacyjnego

Odwołanie do parametrów//Liczba przekazanych parametrów

function cos()

{ Document.write(”Liczba parametrów=”+ arguments.length);

}

//dostęp do parametrów

function f(x)

{

if (arguments.length == 1) document.write(”x=”+x)

}

Instrukcja return

Instrukcji return używamy do przekazania wartości programowi wołającemu

function f(){

x=4+6*Math.sin(Math.Pi)return x

}A można szybciejfunction f(){

return x=4+6*Math.sin(Math.Pi)}

}

Instrukcja return

Możemy zwracać kilka wartości – wtedy grupujemy je w tablicę

Przykład

function cos() {

x=3:y=6

return [x,y,x+y,7]

}

Tworzenie własnych obiektów

• Na przykaład window, document, button itp. to typowe obiekty, które posiadają swoje metody i właściwości – już trochę było.

• Każdy z nich ma np. metodę onclick, właściwość value itp.

Tworzenie własnego obiektu

var obiekt_1 = {

nazwisko: „Abacki",

brutto: 2345,

wypisz : function() {

document.write(this.nazwisko)

}

}

Odwołanie się do obiektu

var obiekt_1 = { liczba: 100, kwadrat : function() {return this.liczba * this.liczba }, wypisz : function() { alert(this.kwadrat()) } } obiekt_1.liczba = 200; obiekt_1.wypisz();

Interfejs

• Komunikacja z użytkownikiem,

• Praca z okienkami

Okna dialogowe

• Okienka z ostrzeżeniem:– alert(”tekst_ostrzeżenie”)– przykład:

• alert(”nie wprowadziłeś wartości n>=0”)

• udzielanie odpowiedzi:– zm=prompt(”Podpowiedź”,”w_domyślna”)– przykład:

• ile=prompt(”Podaj ilość kart”,10)

Przykład<HTML>

<TITLE>

Okienka dialogowe

</TITLE>

<script language="JavaScript" type="text/javascript">

<!--

function okienka()

{

alert("wypełnij wszystkie pola formularza")

var ile=prompt("Podaj nazwisko:","Nowak")

}

//--!>

</Script>

<BODY>

<Input Type="Button" onclick="okienka()">

</BODY>

</HTML>

Podejmowanie decyzji

• Confirm(”komunikat”)

• zwraca wartość logiczną: true (OK) lub false (Anuluj)

• Przykład:– document.write("Zdecydowałeś się na ")

– var decyzja = confirm("Na co się decydujesz ?")

– if (decyzja) { document.write(" TAK! ")}

– else {document.write(" nie, a szkoda ")}

Przykład

Można otworzyć osobne okno

• Definicja okna: – okno= window.open(”prz1.htm","pomoc",

"toolbar=yes,width=350,height=400, scrollbars=1,resizable=1,alwaysRaised");

– Opcja alwaysRaised oznacza, że nowe okienko będzie nad dotychczas otworzonymi

• Miejsce, w którym wstawiamy:– okno.focus();

– gdzie prz1.htm jest dokumentem, który będzie wyświetlony w oknie,

– focus - ustala miejsce wpisywania w aktualnym oknie.

Można otworzyć osobne okno i do niego pisać

• Przykładvar okno1= window.open("","pomoc",

"toolbar=yes,width=350,height=400,scrollbars=1,resizable=1,alwaysRaised")

okno1.focus()okno1.document.open()okno1.document.write('Cześć'); okno1.document.write('<FORM><input type="button"

value="zamknij to okno" onclick="self.close()"></FORM>')

self oznacza odwołanie do aktualnego okna

Przykład: onclick() - odejmowanie<HTML><head><SCRIPT LANGUAGE="JAVASCRIPT"></SCRIPT></head><body><FORM>Wpisz odjemną <input type="text" name="odjemna" value="0"><BR>wpisz odjemnik <input type="text" name="odjemnik " value="0"><BR>Kliknij na polu, by zobaczyć różnicę <input type="text" name="roznica" value="0" onclick="liczWynik(this.form)"><BR></BODY></HTML>

Obsługa zdarzeni

a

Przechwycenie zdarzenia

Zmiana koloru tła<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD><BODY> <form><input type="button" name="Button1" value=„CZERWONY"

onclick="changecolor('red')"> <input type="button" name="Button2" value=„ZIELONY"

onclick="changecolor('green')"> <input type="button" name="Button3" value="NIEBIESKI"

onclick="changecolor('blue')"> <input type="button" name="Button4" value="BIALY"

onclick="changecolor('white')"> </form> </BODY></HTML>

Wynik - -po kliknięciu przycisku niebieski

Dodatkowe okno<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"></SCRIPT>

Dodatkowe okno cd.</HEAD><BODY bgcolor="white” onLoad="this.form1.text1.focus()"> <TABLE BORDER=1 bgcolor="beige"><tr><td><B>Wpisz wiadomość in the box, <br>dzięki której zamkniesz nowe okno.</B><FORM NAME="form1"><INPUT NAME="text1" TYPE=Text SIZE="50"

MAXLENGTH="50"><br><INPUT TYPE=Button VALUE="Stwórz moje okno"

onClick="MeOkno(form.text1.value)"></FORM></TABLE> </BODY></HTML>

efekt

Po kliknięciu tu

Ważniejsze obiekty w JS• Button - odpowiada przyciskom na formularzach na

stronach www,

• Własności:– form - odwołanie do obiektu form, na którym jest umieszczony

przycisk,

– name - łańcuch zawierający nazwę przycisku,

– value - łańcuch zawierający wartość przycisku,

– type - łańcuch zawierający wartość parametru Type znacznika INPUT,

• Zdarzenia:– onClick - kod JS, który będzie wykonany po kliknięciu przycisku,

– onMouseDown - kod JS, który będzie wykonany w momencie wciśnięcia przycisku myszy,

– onMouseUp - kod JS, który będzie wykonany w momencie zwolnienia wciśniętego przycisku myszy,

Ważniejsze obiekty w JS• CheckBox/ radio - pozwala na umieszczanie pól

wyboru/radialnych na formularzu HTML, • Własności:

– checked - wartość logiczna określająca czy pole jest zaznaczone,

– enabled - wartość logiczna określająca, czy przycisk jest aktywny,

– form - odwołanie do obiektu form, na którym umieszczony jest przycisk,

– name, type, value - jak wcześniej (dla button),

• Zdarzenia:– onClick - jak wyżej

Ważniejsze obiekty w JS• Date - udostępnia metody związane z datą i czasem,

• Tworzymy: obiekt=new Date([daneoDacie]), gdzie daneoDacie są postaci: – ”miesiąc dzień, rok godziny: minuty:sekundy”,

– ”rok, miesiąc, dzień”,

– ”rok, miesiąc, dzień, godziny, minuty, sekundy” ,

• Metody:– getDate() - zwraca dzień miesiąca z 1..31,

– getDay() - zwraca dzień tygodnia, 0=n, 1=p, itd.,

– getHours(), getMinutes(), getSeconds(), getMonth(), getYear() - podobnie,

– getTime() - zwraca ilość milisekund, które upłynęły od 01.01.1970,

– parse(data) - zwraca ilość milisekund, które upłynęły od 01.01.1970 godz. 00:00 a podaną datą ,

– setDate(data) - ustawia dzień miesiąca dla obiektu date,

– setHours(dat), setMinutes(data), setMonth(ilośćM), setSeconds(ilesek), setTime(czas) - podobnie

Ważniejsze obiekty w JS• Document - odpowiada aktualnie wyświetlanemu

dokumentowi HTML,

• Własności:– bgColor - kolor tła dokumentu,

– cookie - łańcuch znaków określający cookies dla danego dokumentu,

– fgColor - kolor liter,

– forms - tablica obiektów typu form, obiekty są ułożone w kolejności wystąpienia, ilość ich określamy za pomocą forms.length,

– images - tablica obiektów typu image, w kolejności wystąpienia,

– location - łańcuch znaków określający URL,

– title - łańcuch określający tytuł dokumentu,

Ważniejsze obiekty w JS• Dokument - cd

• Metody:– close() - zamknięcie dokumentu, – write(), writeln() - pisze do dokumentu,

• Zdarzenia:– onKeyDown, onKeyPress, onKeyUp - kod JS,

który zostanie wykonany po wciśnięciu, puszczeniu klawisza,

– onMouseDown, onMouseUp- tak samo, ale dla myszy,

Ważniejsze obiekty w JS• Form- odpowiada formularzom HTML,

• Własności:– action - adres URL, gdzie będą wysłane dane z formularza,

– elements - tablica obiektów, w kolejności ich wystąpienia,

– target - nazwa dokumentu, gdzie będą wyświetlone dane z formularza,

• Metody:– reset() - czyści wszystkie pola,

– submit() - przesyła dane do serwera,

• Zdarzenia:– onReset() - kod JS, który zostanie wykonany w momencie

czyszczenia formularza,

– onSubmit() - jw., ale dla przesłania danych,

Ważniejsze obiekty w JS• Frame - odpowiada zawartości konkretnej ramki,

• Własności:– frames - tablica obiektów reprezentująca ramki w oknie,

– parent - nazwa okna zawierającego ramkę,

• Metody:– alert(wiadomość),

– close()- zamyka okno,

– confirm(wiadomość),

– open(url, nazwa, opcje),

Ważniejsze obiekty w JS

• Cd Frames• gdzie opcje:

– toolbar=[yes,no,1,0] -czy ma być opasek narzędziowy,

– location =[yes,no,1,0] - czy ma być pole służące wpr. Adresu,

– directories =[yes,no,1,0] - czy mają być przyciski umożliwiające poruszanie się między stronami,

– status=[yes,no,1,0] - czy okno ma mieć pasek stanu,

– menubar =[yes,no,1,0] - jw. Pasek menu,

– scrollbars =[yes,no,1,0] - jw. ale paski przewijania,

– resizable =[yes,no,1,0] - czy użytkownik może zmieniać rozmiar,

– width=piksele,

– height=piksele,

– prompt(wiadomosc, odpowiedz),

– setTimeout(wyrażenie, czas) - powoduje wykonanie polecenia podanego za pomocą wyrażenie po upływie czasu (w milisekundach),


• Frame - cd

• Zdarzenia:– onMove- kod JS, gdy ramka zostanie

przesunięta, – onResize - kod JS, gdy zostanie zmieniona

wielkość okna.

Ważniejsze obiekty w JS• Math:

– własności: E (wartość e), LN10 (wartość ln10), LN2 (wartość ln2), LOG10, LOG2E, PI, SQRT1_2 (pierwiastek z 0.5), SQRT2,

• Metody:– abs(liczba), acos, asin, atan, ceil(liczba)

(najmniejsza liczba całkowita >= liczba), cos, exp, floor(liczba) (największa liczba całkowita <= liczba), log, max(liczba1,liczba2), min, random(), round, sqrt, tan.

Ważniejsze obiekty w JS• String - przetwarza tekst

• Właściwości:– length - długość

• Metody:– big(), blink(), bold() - dodaje znaczniki odpowiednio: BIG,

BLINK, B,

– charAt(indeks) - zwraca znak o podanym indeksie,

– indexOf(łańcuch, indeks) - zwraca indeks pierwszego wystąpienia łańcucha począwszy od indeks,

– lastindexOf(łańcuch, indeks) - jw. ale ostatnie wystąpienie,

– replace(szukany, nowy) - zastepuje szukany łańcuch nowym,

– split(separator), tworzy tablicę z elementami podzielonymi przez separator,

– substring(ineksP, indeksK) - zwraca podciąg znaków,

– toLowerCase(), toUpperCase() - zamienia na małe, duże


• Obiekt window - jest to najwyższy obiekt w hierarchii ramki lub okna (zawiera obiekty dokumentu, lokalizacji oraz listy historycznej),

• Właściwości:– defaultStatus - informacje wyświetlane domyślnie na

pasku statusu,

– frames - tablica obiektów odpowiadających ramkom w oknie,

– length - ilość ramek w oknie,

– name - łańcuch z nazwą ramki,

– scrollbars - odwołuje się do pasków przewijania przeglądarki (wartości: scrollbars.visible=flase|true),

– toolbar - jak wyżej,

Ważniejsze obiekty w JS• Window - cd• Metody:

– alert(wiadomość), – back(), forward() - wyświetla poprzednią/następną stronę, – close() - zamyka okno, – confirm(wiadomość), – focus() - ustawia miejsce wprowadzania w aktualnym oknie, – moveBY(x,y) - przesuwa okno o x i y pikseli, – moveTo(x,y) - przesuwa lewy, górny róg przeglądarki do podanych wsp. – Open(url,nazwa, opcje) - otwiera podaną stronę, opcje były już– prompt(wiadomość, odpowiedz), – setInterval(wyrażenie, czas)- powoduje cykliczne wykonanie polecenia co określoną ilość czasu, – setTimeout(wyarżenie, czas) - powoduje wykonanie wyrażenia po upływie czasu, – scroll(x,y) - przewija okno do punktu o podanych współrzędnych,

– stop() - zatrzymuje ładownie dokumentu,

Ważniejsze obiekty w JS• Zdarzenia:

– onError -kod JS wykonywany w przypadku zaistnienia błędów w ładowanym pliku,

– onFocus - kod JS, który będzie wykonany w momencie ustawienia miejsca w oknie,

– onLoad - kod JS wykonywany w momencie załadownia strony,

– onMove -kod JS wykonywany w momencie zakończenia przesuwania strony,

– onResize - kod JS wykonywany w momencie zmiany wielkości okna,

Ciasteczka

• Ogólna postać ciasteczek to:• Cookie Nazwa=cookieWartosc; expires=datawygasniecia; domain=domenaStrony;

path=sciezkaURL; secure • Nazwa to nazwa ciasteczka, • expires to czas, po którym ciasteczko będzie usunięte, • Domain to nazwa domeny ciasteczka, czyli miejsca, gdzie

ono się znajduje. Np. http://uph.edu.pl/~mirek/stpod/programowanie

• secure – zazwyczaj się pomija, oznacza wtedy, że ciasteczka są dostępne dla każdej domeny. Jeśli podamy, to dla niektórych

• Aby utworzyć ciasteczko korzystamy z document.cookie = nazwa_cokie + "=" + wartosc_cookie + "; expires=" + data_Wygasniecia

Uwagi

• Przeglądarka użytkownika może mieć wyłączoną obsługę ciasteczek

• Stosowanie ciasteczek może być bardzo użyteczne przy tworzeniu liczników odwiedzin ,

• Za pomocą ciasteczek możemy na przykład pobrać od użytkownika jego imię, a podczas następnych wizyt za pomocą wartości ciasteczka ustawionego na pewien czas (za pomocą expires) od razu je wypisywać na naszej stronie.

Przykład 1

• Problem - urozmaicenie strony poprzez wprowadzenie losowości wyświetlanej strony,

• Co potrzebujemy:– liczba losowa z zadanego przedziału, – instrukcji warunkowej

Rozwiązanie<HTML>

<HEAD>

<TITLE>Generator losowych połączeń </TITLE>

<SCRIPT LANGUAGE=„JavaScript”>

Rozwiązanie - cd

</SCRIPT>

</HEAD>

<BODY>

<H1>Generator losowych połączeń</H1>

<P> Odwiedź <A HREF=”dummy.htm” onClick=”this.href=polaczenia()”> losowo wybraną </A></P>

</BODY>

</HTML>

Sprawdzanie poprawności danych

• Słowo kluczowe this - powoduje przekazanie do funkcji odwołania obiektu skojarzonego z aktualnym formularzem,

• null - oznacza, że nie ma żadnej wartości,

• ”” - oznacza pusty łańcuch,

Przykład<HTML>

<HEAD>

<TITLE>Sprawdzanie poprawności danych</TITLE>

<SCRIPT LANGUAGE=”JavaScript”>

<!-- poczatek

function checkform(thisform)

{if (thisform.thename.value==null||thisform.thename.value==””)

{

alert(”Wpisz nazwisko”);

thisform.thename.focus();

return false;

}

var selected =false;

for (var i=0; i<=1; i++){

if (thisform.thesex[i].status==true){selected=true}

}

if selected==false)

{alert(”Podaj płeć”);

return false;

}

return true;

}

// koniec skryptu

</SCRIPT>

Przykład - cd</HEAD>

<BODY>

<H1>Ankieta </H1>

<P>Proszę wypełnić ankietę<P>

<P>Użyj przycisku <STRONG>wyślij<STRONG> do wysłania swoich odpowiedzi

<HR>

<FORM METHOD=”POST” ACTION=„URL” onSubmit=return checkform(this)”>

<P> <STRONG> NAZWISKO</STRONG>

<INPUT TYPE=”TEXT” Name=”theName”>

</P>

<P> <STRONG> Płeć:</STRONG>

<INPUT TYPE=”radio” name=„thesex” value=”male”> Mężczyzna

<INPUT TYPE=”radio” name=„thesex” value=”female”> Kobieta

</P>

<P><STRONG>Zainteresowania (zaznacz właściwe odpowiedzi)</STRONG><BR>

<INPUT TYPE=”checkbox” name=”film” >Film

<INPUT TYPE=”checkbox” name=”muzyka” >Muzyka

<INPUT TYPE=”checkbox” name=”teatr” >Teatr

<INPUT TYPE=”checkbox” name=”ksiazka” >Książka

<INPUT TYPE=”checkbox” name=”inne” >Inne

</P>

<P><INPUT TYPE=”Submit” Value=”Prześlij wyniki”>

<INPUT TYPE=”Reset” Value=”Wyczyść formularz” onClick=”0”>

</P>

</FORM>

<HR>

</BODY>

</HTML>

Co to jest XML?• XML to skrót od eXtensible Markup Language, standard W3C do znakowania

(opisu) danych.• Pozwala w pełni wyróżnić i rozdzielić następujące składniki:

– strukturę (opisaną przez DTD lub XSD)– zawartość – styl (opisaną przez XSLT)

• XML może być czytany na dowolnym systemie operacyjnym.• Format XML zaczyna być bardzo szeroko stosowany do przenoszenia danych i

reprezentowania informacji, korzystają z niego m.in. bazy danych, webserwisy, systemy wymiany danych, grafik wektorowych, listingów, serializacji obiektów i wiele, wiele innych.

• W przypadku dokumentów XML mówimy o dwóch rodzajach poprawności dokumentu:

– well formed - każdy znacznik ma swój początek i koniec, znaczniki nie zachodzą na siebie

– valid - dokument XML jest poprawnym dokumentem według pewnego pliku definiującego strukturę dokumentu.

• Początkowo do opisu znaczników (dalej: elementów) XML stosowano DTD (Document Type Definition). Stało się to konieczne, ponieważ każdy mógł stworzyć własne znaczniki i trzeba było je ustandaryzować aby np. dane generowane przez bazę z systemu Linux (np. MySQL ) można było zapisać według odpowiedniego DTD do pliku XML tak, aby później program napisany w C++ pod Win32 mógł bez problemu wczytać dane i wykonać na nich odpowiednie operacje.

• Później stworzono XML Schema (XSD) nowszą wersję DTD o składni XML. • Stworzono także XSL, XSLT do transformacji danych i do ich prezentacji

użytkownikowi.

Przykład dokumentu XML• Załóżmy, że chcemy stworzyć znacznik osoba. Osoba będzie

się składała z: imienia (lub kilku), nazwiska, daty urodzenia, miejsca urodzenia i krótkiego komentarza.

• Powyższe założenia mogą być zrealizowane następująco:<?xml version="1.0" encoding="ISO-8859-2"?> <!DOCTYPE baza SYSTEM "baza.dtd"> <baza>

<osoba> <imie>Łukasz</imie> <imie>Jerzy</imie> <imie>Izydor</imie> <nazwisko>Budnik</nazwisko> <data_ur>1983-03-07</data_ur><miejsce_ur>Wejherowo</miejsce_ur> <info>to ja ;D</info>

</osoba> </baza>

Najważniejsze elementy dokumentu:• Pierwsza linia zawiera informacje o typie dokumentu: jest to dokument XML,

wersja specyfikacji 1.0, kodowanie znaków odbywa się w standardzie ISO-8859-2.

• Druga linia informuje gdzie znajduje się dokument zawierający definicje znaczników tego dokumentu, gdzie <baza> to nasz główny znacznik (główny znacznik występuje tylko raz!), SYSTEM informuje, że plik DTD znajduje się w naszym systemie, później podana jest ścieżka dostępu. Można też korzystać z ustandaryzowanych dokumentów DTD - wtedy podajemy zamiast SYSTEM PUBLIC a zamiast ścieżki dostępu podajemy adres do serwera W3C do odpowiedniego pliku.

• Po otworzeniu znacznika głównego baza podajemy znacznik osoba, który składa się z wcześniej zaproponowanych znaczników.

• Kolejnym krokiem jest opisanie dokumentu i stworzenie do niego odpowiedniego DTD.

Definicja DTD• Definicja DTD dla poprzedniego przykładu (duże i

małe litery są rozróżniane).• Tworzymy plik o nazwie „baza.dtd”.• Podobnie jak dla dokumentu XML w pierwszej linii

wstawiamy: – <?xml version="1.0" encoding="ISO-8859-2"?>

• Definiujemy główny znacznik (element)- <baza>. Element baza jest następujący:– <!ELEMENT baza (osoba)>– <baza> jest elementem złożonym, składa się z

<osoba>. – Elementy, na które składa się <baza>

podawane są w nawiasie.

Definicja DTD - cd• Element <osoba>:

– <!ELEMENT osoba (imie+, nazwisko, data_ur, miejsce_ur, info)>

– Analogicznie element osoba składa się z elementów: <imie>, <nazwisko>, <data_ur>, <miejsce_ur>, <info>.

– Ważna jest kolejność definicji! Jeśli w naszym dokumencie XML zamienimy miejscami <data_ur> z <miejsce_ur> wystąpi błąd.

– Zauważmy jeszcze jedno - po elemencie <imie> występuje znak "+" oznaczający, że dany element musi wystąpić raz, ale może i wystąpić kilka razy.

Definicja DTD - cd• Teraz wystarczy zdefiniować elementy:

<imie>, <nazwisko>, <data_ur>, <miejsce_ur>, <info>. Elementy te są już zwykłymi prostymi typami (nie zawierają innych elementów), definiujemy je wprost:– <!ELEMENT data_ur (#PCDATA)>– <!ELEMENT imie (#PCDATA)>– <!ELEMENT info (#PCDATA)>– <!ELEMENT miejsce_ur (#PCDATA)>– <!ELEMENT nazwisko (#PCDATA)>

Pełny dokument DTD <?xml version="1.0" encoding="ISO-8859-2"?><!ELEMENT baza (osoba)><!ELEMENT osoba (imie+, nazwisko, data_ur,

miejsce_ur, info)><!ELEMENT data_ur (#PCDATA)><!ELEMENT imie (#PCDATA)><!ELEMENT info (#PCDATA)><!ELEMENT miejsce_ur (#PCDATA)><!ELEMENT nazwisko (#PCDATA)>

Rozbudowana definicja DTDRozszerzmy nasze wiadomości na temat DTD.Przykład dokumentu:• <?xml version="1.0" encoding="ISO-8859-2"?>• <!DOCTYPE baza SYSTEM "F:pg_sem/projekt.dtd"> • <baza>

– <osoba plec="M" hobby="samochody" sport="kosz"> • <imie>Łukasz</imie> • <imie>Jerzy</imie> • <nazwisko>Nowak</nazwisko> • <data_ur>1963-03-07</data_ur> • <miejsce_ur>Poznań</miejsce_ur> • <info>ccc</info> • <info>bbbbb</info>

• </osoba> – <osoba plec="K" hobby="komputery" sport="lyzwy">

• <imie>Katarzyna</imie> • <imie>Ewa</imie> • <imie>Jola</imie> • <nazwisko>Nowak</nazwisko> • <data_ur>1983-03-07</data_ur> <miejsce_ur>Poznań</miejsce_ur>

– </osoba> • </baza>

Rozbudowana definicja DTD• Pierwsza linia DTD ddd.dtd standardowo:• <?xml version="1.0" encoding="ISO-8859-2"?> • Deklaracja głównego elementu(ang. root element)

<baza>.• <baza> tym razem może się składać z jednego lub

kilku elementów <osoba>:• <!ELEMENT baza (osoba+)> • Element osoba składa się z: <imie>, <nazwisko>,

<data_ur>, <miejsce_ur>, <info>. <imie> musi wystąpić raz lub kilka razy, czyli "+", info może wystąpić kilka razy lub może nie wystąpić wcale, czyli "*":

• <!ELEMENT osoba (imie+, nazwisko, data_ur, miejsce_ur, info*)>

Rozbudowana definicja DTD• Wprowadziliśmy dodatkowo kilka parametrów do elementu

<osoba>. Parametry nazywane są w DTD atrybutami i definiowane jako ATTLIST (skrót od ang. lista atrybutów) później podajemy element, dla którego definiujemy atrybuty - tu <osoba>.

• Mamy trzy atrybuty, które wystąpiły w obu znacznikach <osoba>. Można potraktować je jako typy wyliczeniowe definiowane jako:– nazwa_atrybutu(wartosc1,wartosc2,...,wartoscN)

• Jeśli wystąpiły w naszych obu elementach możemy założyć, że są one wymagane i zaznaczyć je w definicji jako #REQUIRED.

• W przypadku definicji atrybutu "plec" zamiast #REQUIRED wpisujemy "K" - czyli domyślną wartością atrybutu "plec" jest "K" - to oznacza, że jeśli w dokumencie XML znacznik osoba pojawi się bez atrybutu "plec" będzie on dodany automatycznie i ustawiony na "K".

• Czwarty atrybut jest także typem wyliczeniowym, ale wystąpił tylko przy pierwszym elemencie, więc nie jest wymagany - zaznaczymy go w definicji jako #IMPLIED - to czy wystąpi zależy tylko od użytkownika.

Rozbudowana definicja DTD• Pełna definicja atrybutów znacznika osoba wygląda więc

następująco:– <!ATTLIST osoba plec (K | M) "K" hobby (komputery |

samochody) #REQUIRED sport (kosz | lyzwy) #REQUIRED chory (glowa | brzuch | noga | reka) #IMPLIED >

• Pozostałe elementy są już zwykłymi elementami prostymi:– <!ELEMENT data_ur (#PCDATA)> – <!ELEMENT imie (#PCDATA)> – <!ELEMENT info (#PCDATA)> – <!ELEMENT miejsce_ur (#PCDATA)> – <!ELEMENT nazwisko (#PCDATA)>

• I jeszcze dla pełnej jasności pełny plik ddd.dtd:– <?xml version="1.0" encoding="ISO-8859-2"?> – <!ELEMENT baza (osoba+)> – <!ELEMENT osoba (imie+, nazwisko, data_ur, miejsce_ur,

info*)> – <!ATTLIST osoba plec (K | M) "K" hobby (komputery |

samochody) #REQUIRED sport (kosz | lyzwy) #REQUIRED chory (glowa | brzuch | noga | reka) #IMPLIED >

– <!ELEMENT data_ur (#PCDATA)> – <!ELEMENT imie (#PCDATA)> – <!ELEMENT info (#PCDATA)> – <!ELEMENT miejsce_ur (#PCDATA)> – <!ELEMENT nazwisko (#PCDATA)>

HTML 5• HTML 5 – język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTML 1), opracowywane w ramach prac grupy roboczej WHATWG (Web Hypertext Application Technology Working Group) i W3C.

• Jest to konkurencyjna specyfikacja w stosunku do specyfikacji XHTML 2, której rozwój został porzucony 2 lipca 2009 roku – wsparcie wszystkich środowisk i producentów przeglądarek ukierunkowane jest na HTML 5.

• Zgodnie z obecnymi zapowiedziami (wrzesień 2012) prace nad specyfikacją zostaną ukończone w 2014 roku - wtedy też nowy standard zostanie oficjalnie ogłoszony i zacznie obowiązywać. Dwa lata później - w 2016 roku - ma być gotowy HTML5.1.

HTML cd

• HTML 5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.

• Niejasności co do sposobu, w jaki przeglądarki powinny obsługiwać błędy w kodzie HTML są jedną z podstawowych przyczyn, dla której wiele serwisów internetowych, napisanych z naruszeniem specyfikacji, w różnych przeglądarkach działa w inny sposób – w niektórych działając, w innych nie. Dzięki HTML-owi 5 obsługa błędów ma być ta sama we wszystkich przeglądarkach, czyli zły element będzie działać w każdej przeglądarce albo żadnej.

HTML cd• HTML 5 także stawia na semantykę. Element <div> traci na

znaczeniu na rzecz:– <header /> – <hgroup /> – <article /> – <aside /> – <canvas /> – <figure />– <footer /> – <details /> – <summary /> – <nav /> .

• Element <span> ma być mniej używany na rzecz <output /> <u /> <strike />.

Niektóre różnice w stosunku do HTML 4• Nowe tagi: section, article, header, footer, nav, video, audio,

mark, progress, ...• Nowe typy pól "input": tel, search, url, email, datetime, date,

month, week, time, datetime-local, number, range, color.• Nowe atrybuty elementów formularzy: autofocus, required,

autocomplete, min, max, multiple, pattern, step, ...• Możliwość osadzenia MathML i SVG bezpośrednio w

dokumencie, zupełnie jak w XHTML• HTML 5 nie zawiera żadnych elementów prezentacyjnych

Nowości w API (Application Programing Interface)• Rysowanie 2D z nowym elementem canvas - jest elementem HTML,

który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj JavaScript). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do animacji.

• API dla odtwarzania audio i video,• API dla aplikacji offline,• API, pozwalające zarejestrować aplikację WEB jako protokół lub

media_type,• API edycji z atrybutem contenteditable,• API przeciągnij i upuść, z atrybutem draggable,• API do obsługi przycisku wstecz.• ....

projektowanie stron www

Documents