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, , 123e3, 123e-4, e-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ę: wykonamy ( )+325 czy 132+( ).

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)

<TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> x=12*34 document.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;I2 I3 I4 I5;i6 }

<TITLE>My first script</TITLE> </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> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { x=2 y=1+1/x z=1+1/y } document.write("z="+z) </SCRIPT></H1> </BODY> </HTML>

Instrukcja alternaty if (w) {…} if (w) {…} else {…}
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

<TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { x=5 if (x<10) { document.write("Liczba jest mniejsza od 10") } </SCRIPT></H1> </BODY> </HTML>

<TITLE>My first script</TITLE> </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") </SCRIPT></H1> </BODY> </HTML>

<TITLE>My first script</TITLE> </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>") document.write("dobry wieczór<BR>") </SCRIPT></H1> </BODY> </HTML>

Przykład Można prościej. Tam gdzie jest jedna instrukcja możemy opuścić nawiasy klamrowe (oznaczają one instrukcję złożoną). <HTML> <HEAD> <TITLE>My first script</TITLE> </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>") document.write("dobry wieczór<BR>") } </SCRIPT></H1> </BODY> </HTML>

Instrukcja switch Konstrukcja switch
Jeś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ść wartosc1 break case wartosc2: kod wykonywany, gdy zmienna ma wartość wartosc2 // ... itd case wartoscX: kod wykonywany, gdy zmienna ma wartość wartoscX 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ład var 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"); case 0: document.write("Śpiąca niedziela"); 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: Działanie: while (warunek)
{ Instrukcje } Działanie: Obliczany jest warunek, Jeśli jest prawdziwy, to wykonujemy instrukcje i powrót do 1, Jeśli nie jest prawdziwy, to koniec

<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>
<TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <SCRIPT> { // while (w) {…} var cotydzien= new Date(2011,10,2) // var i=1 while (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ładnia do { Działanie: 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

<TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <SCRIPT> { for (i=1; i<=10; i++) document.write(i+"<BR>") } </SCRIPT> </BODY> </HTML>

For zagnieżdżone <HTML> <HEAD>
<TITLE>My first script</TITLE> </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 ==, !=, <, <=, >=, >

<TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <SCRIPT> { document.write("operatory relacyjne+<BR>") x=5 y=6 if (x==y) document.write("równe<BR>") else document.write("różne<BR>") if (x!=y) if (x<y) document.write("mniejsze<BR>") document.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

Tablice 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 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 Można i tak
max=a[0] for (i=1;i<n;i++) if (a[i]>max) max=a[i] Można i tak i_max=0 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]=i document.write("Tablica przed operacja") document.write(a[i]) document.write("Tablica po operacji") a.reverse() b=new Array(3) b=a.reverse() document.write("Tablica po jeszcze kolejnej operacji") 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 String Metoda charAt(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

<SCRIPT LANGUAGE="JAVASCRIPT">  </SCRIPT> </head> <body> <FORM> <Script> 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>") </Script> </form> </BODY> </HTML>

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)

<SCRIPT LANGUAGE="JAVASCRIPT">  </SCRIPT> </head> <body> <FORM> <Script> 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 ="+Math.max(4,5,8,3,5)+"<BR>") </Script> </form> </BODY> </HTML>

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 funkcji Definicja funkcji:
function nazwa_funkcji(parametry formalne) { instrukcje return wyrażenie } lub //bez return Wywołanie funkcji - przykłady: y=nazwa_funkcji(parametry aktualne) nazwa_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 szybciej 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: udzielanie odpowiedzi:
alert(”tekst_ostrzeżenie”) przykład: alert(”nie wprowadziłeś wartości n>=0”) udzielanie odpowiedzi: zm=prompt(”Podpowiedź”,”w_domyślna”) 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ład var 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 zdarzenia 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,

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

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 , parse(data) - zwraca ilość milisekund, które upłynęły od 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

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,

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,

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,

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

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.

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.

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,

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,

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: Nazwa to nazwa ciasteczka,
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. 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,

<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 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><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><INPUT TYPE=”Submit” Value=”Prześlij wyniki”> <INPUT TYPE=”Reset” Value=”Wyczyść formularz” onClick=”0”> </FORM> </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 "?> <!DOCTYPE baza SYSTEM "baza.dtd"> <baza> <osoba> <imie>Łukasz</imie> <imie>Jerzy</imie> <imie>Izydor</imie> <nazwisko>Budnik</nazwisko> <data_ur> </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 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 "?> 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 DTD
Rozszerzmy nasze wiadomości na temat DTD. Przykład dokumentu: <?xml version="1.0" encoding="ISO "?> <!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> </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> <data_ur> </data_ur> <miejsce_ur>Poznań</miejsce_ur> </baza>

Pierwsza linia DTD ddd.dtd standardowo: <?xml version="1.0" encoding="ISO "?> 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*)>

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.

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 "?> <!ELEMENT baza (osoba+)> <!ELEMENT osoba (imie+, nazwisko, data_ur, miejsce_ur, info*)>

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, , 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

Podobne prezentacje

Prezentacja na temat: "Projektowanie stron WWW"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

Projektowanie stron WWW

Podobne prezentacje

Prezentacja na temat: "Projektowanie stron WWW"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres