Interaktywne WWW
•	Wykład

•	© Michał Turek, AGH Kraków
Przeglądarki WWW
•	Klient protokołu HTTP
•	Analiza HTML, generowanie widoków graficznych
•	Przestrzeń nazw obiektów dynamicznych towarzyszących dokumentowi HTML

Interaktywne WWW - technologie (I)
•	Aktywność po stronie klienta:
•	JavaScript/DHTML
•	Obiekty osadzone: np. flash, Applet Java
•	Dedykowane wtyczki (plugins) instalowane w przeglądarce WWW
Interaktywne WWW - technologie (II)
•	Aktywność po stronie serwera:
•	Aplikacje internetowe:
•	PHP
•	ASP, ASP.NET
•	Java Beans
•	CGI
Część I - JavaScript
•	Skrypty osadzone w pliku HTML lub pobierane z bibliotek
•	Dostęp do obiektów reprezentujących środowisko tworzone przez przeglądarkę dla prezentacji dokumentu HTML

Osadzanie JavaScript
 w HTML
•	Tagi <script> i </script>:
•	Skrypt w zewnętrznym pliku:
<SCRIPT LANGUAGE = "JavaScript" SRC = "kody.js"> </SCRIPT> 
Taki plik nie zawiera już żadnych tagów, jedynie kod JavaScript
•	Z tym samym pliku:
<SCRIPT LANGUAGE = "JavaScript”> 
 	document.write(”Uruchomiony.") 
</SCRIPT>

Struktura języka (I)
•	Wykonanie sekwencyjne
•	Bloki analogiczne do C czy Javy:
	{ blok#1 { blok2 } koniec bloku #1}
•	Komentarze:
•	// comment
•	/* comment
comment */

Struktura języka (II)
•	Znak ‘;’ na końcu instrukcji jest opcjonalny
•	Ważniejsze escape sequentions:
	\n - nowa linia,
	\t - tabulacja,
	\r - powrót karetki,
	\\ - backslash,
	\b - backspace,

Instrukcje warunkowe
•	Postać pełna:
	if (warunek) {instrukcje1} else {instrukcje2}
•	Postać skrótowa: 
	(warunek) ? {instrukcje1} :{instrukcje2}
•	Wybór wielokrotny:
	switch(x)
	{ 
		 case 1: instrukcja1; break; 
		 case 2: instrukcja2; break; 
		default:  instrukcja3; break; 
	}
Pętle
•	for:
	for(Indeks; Warunek; Zmiana Indeksu) { instrukcje; }
	for(indeks in Tablica) {instrukcje; }
•	while:
	while(warunek) {instrukcje;}
•	do..while:
	do {instrukcje;} while(warunek)
•	instrukcje break i continue	

Konstrukcja With
•	Ustalenie obiektu domyślnego, na którym wykonuje się czynności:

•	with(document.images[2]) 
{ 
	src=”info.gif”
} 

Typy danych
•	Zmienne nie są zobligowane co do typu (do chwili ich uwartościowania)
•	Nazwy zmiennych - case sensitive
•	Typy danych:
•	łańcuchy znaków 
•	liczby (zarówno całkowite jak i zmiennoprzecinkowe) 
•	zmienne logiczne (boolowskie) 
•	stałe i wartości specjalne: null, infinity, 
NaN (not a number), undefined

Typy danych - przykłady przypisań i konwersje (I)
•	Deklaracje:
•	var x=100 
•	var z = ””
•	var y = true
•	Najprostsza konwersja typów:
•	z = x.toString(podstawa_systemu)
	gdzie podstawa_systemu = 2,8 lub 16
•	v = ”12”
z = y.toInt()

Typy danych - przykłady przypisań i konwersje (II)
•	Obliczanie wartości liczbowych:
	x1 = "10+2*4”;
	x2 = eval(x1);
	x3 = parseInt (”-17.5”)
	x4 = parseFloat("-12.1")
•	Kontrola typu:
	isNaN(aa1); - czy aa1 nie jest liczbą
	isFinite(aa2); - czy aa2 jest liczbą o skończonej 		wartości
•	O wynikowym typie zmiennej decydują zastosowane operatory, np. dodając łańcuch do liczby otrzymujemy łańcuch, dodając dwie liczby - liczbę.

Operatory
•	równość, różność == !=  
•	porównanie < <= > >=  
•	przypisania = += -= *= /=
•	mnożenie, dzielenie, reszta z dzielenia * / %  
•	dodawanie, odejmowanie + -  
•	wywołanie funkcji, odwołanie do elementu tablicy: () [] .  
•	negacja, inkrementacja, dekrementacja ! - ++ --  
•	przesunięcia bitowe << >> >>>  
•	bitowa koniunkcja i alternatywa & | 
•	logiczna koniunkcja i alternatywa && ||  
•	operator warunkowy ? : 

Deklarowanie funkcji
•	Wywołanie za pomocą unikatowej nazwy
•	Deklaracja:
function nazwa_funkcji (param1,param2,..)
 {
 	 instrukcja1 
 	 instrukcja2 
 	 instrukcja3 
} 

Zdarzenia
•	Zdarzenia dotyczą głównie akcji ze strony użytkownika. 
•	Przypisywanie zdarzeń do obiektów, na których mają wystąpić.
•	Obsługa zdarzenia konfigurowana jest przez przypisanie nazwy zdefiniowanej funkcji danemu zdarzeniu na danym obiekcie, np:
	<BODY onMouseMove=”doMove()”>
	<A HREF=”x.html" onClick=”doRequest()”>
•	Możliwe jest też bezpośrednie użycie kodu:
	<P onmousemove="style.color= 					Math.floor(Math.random()*0xffffff);">
		Tekst paragrafu</P>

Rodzaje zdarzeń (I)
•	Zdarzenia myszy:
•	onMouseDown (przycisk wciśnięty)
•	onMouseMove (przemieszczenie nad obiektem)
•	onMouseOut (zejście kursora z obiektu)
•	onMouseOver (wejście kursora na obiekt)
•	onMouseUp (przycisk puszczony)
•	onClick (naciśniecie i puszczenie przycisku)
•	onDblClick (dwukrotne naciśniecie i puszczenie)
•	onDragDrop (przesunięcie obiektu myszką)

Rodzaje zdarzeń (II)
•	Zdarzenia klawiatury:
•	onKeyDown (wciśniecie klawisza)
•	onKeyUp (puszczenie klawisza)
•	onKeyPress (onkeydown + onkeyup)
•	Inne zdarzenia - na dokumencie, innych obiektach, w sytuacjach wyjątkowych:
•	onBlur, onError, onFocus, onLoad, onReset, onScroll, onSelect, onSubmit, onMove, onReset, onResize, onUnload, onChange, onError

Obiekt event (I)
•	Modyfikowany z chwilą wystąpienia przechwytywanego zdarzenia
•	Dostęp do obiektu z funkcji obsługującej zdarzenie, poprzez nazwę kolekcji event, bez konieczności jego przekazywania do funkcji
•	Atrybuty:
•	SrcElement -obiekt, na którym zdarzenie miało miejsce
•	Type - typ zdarznia (łańcuch z nazwą)
•	clientX - pozycja X kursora myszy względem okna
•	clientY - pozycja Y kursora myszy względem okna 

Obiekt event (II)
•	Atrybuty (cd): 
•	offsetX - pozycja X kursora myszy względem obiektu SrcElement 
•	offsetY - pozycja Y kursora myszy względem obiektu SrcElement
•	button - przycisk myszy (1,2,4 - lewy,prawy,środkowy)
•	keyCode - kod klawisza klawiatury (unicode)
•	altKey, ctrlKey, shiftKey - flagi, wartość true gdy wciśnięciu towarzyszył alt, ctrl, shift

Zdarzenia - przykład
•	<HTML><HEAD>
•	<SCRIPT>
•	function zdarzenie() {
•	 	obiekt = (event.srcElement)?event.srcElement.id:'?'
•	 	status=’Obiekt: ' + obiekt + ’, zdarzenie: ' + event.type;}
•	</SCRIPT>
•	</HEAD>
•	<BODY onload="zdarzenie();">
•	 	<FORM ID="MAINFORM” 
	onmouseout ="zdarzenie();"STYLE="height:50;width:200">
•	 	<INPUT TYPE="TEXT" ID="TEXT1" onfocus="zdarzenie();"  
	 	onclick ="zdarzenie();" onkeypress="zdarzenie();">
•	 	</FORM>
•	</BODY></HTML> 

Operator void
•	Zdarzenia wywołane poprzez odwołanie href z tagu <a> standardowo powodują przejście pod adres będący wartością href. Zastosowanie operatora void pozwala na anulowanie takiej akcji:
•	<a href="javascript:void (document.bgColor=’red')">
Link</a> 

Słowa zarezerwowane
•	abstract extends interface synchronized boolean false long this break final native throw byte finally new throws case float null transient catch for package true char function private try class goto protected var const if public void continue implements return while default import short with do in static double instance of super else int switch

Wyjątki
•	Możliwe jest testowanie wystąpienia wyjątku i przechwytywanie wyjątku:
•	try { 
	if(warunek_wystąpienia_wyjątku)
		 throw ”nazwa_wyjatku" 
} 
catch(wyjatek)
{
if(wyjatek == "nazwa_wyjatku") {obsluga_wyjatku; } 
} 

Funkcje Top level (I)
•	escape(string) /unescape(string) - dokonują konwersji łańcucha z postaci przenośnej (stosowanej np. w URL) na ASCII.
•	W postaci przenośnej dozwolone są tylko następujące znaki:
	ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 
	abcdefghijklmnopqrstuvwxyz @*-_+./ 
Wszystkie inne konwertowane są na postać “%??”
•	Przykład:
	escape("$%^&*()_+") daje: %24%25%5E%26*%28%29_+

Funkcje Top level (II)
•	eval(object) - obliczenie i wcześniej ewentualne wykonanie wyrażenia zadanego parametrem
•	eval zawsze zwraca jakąś wartość z wykonania, będącą albo statusem albo efektem operacji arytmetycznej czy wykonania funkcji wewnętrznej
•	przykład:
	eval(”a=100; b=151; document.write(a+b);"); 
	daje wynik: 251

Funkcje Top level (III)
•	Number(object) - tworzy (w miarę możliwości) reprezentację liczbową podanego obiektu. W przypadku niepowodzenia zwraca NaN.
	obiekt = new Boolean("true")
	document.write(Number(obiekt)) 
	daje wynik: ‘1’
•	String(object) - tworzy reprezentację łańcuchową podanego obiektu.
	document.write(String(obiekt))
	daje wynik: ”true” 

Funkcje Top level (IV)
•	Pozostałe funkcje (omawiane wcześniej)
•	parseInt (string)
•	parseFloat (string)
•	isFinite (testnumber)
•	isNaN (testvalue)
Operatory new i delete
•	Dynamiczne tworzenie i niszczenie obiektów:
•	var im = new Image;
•	delete im,
•	Własne obiekty
•	fruit = new Object; 
•	fruit.name = 'apple'; 
•	fruit.color = 'green'; 
•	delete fruit.color; 

Tworzenie obiektów poprzez funkcję
•	Operator new może też tworzyć obiekt definiowany przez funkcję, pełniącą role konstruktora:
•	<script language="JavaScript1.2">
•	function obiekt(opis, cena) 
•	{ 
•	   this.opis = opis 
•	   this.cena = cena 
•	} 
•	var towar = new obiekt("Krzesło", 20);
•	document.write(towar.opis + " " + (towar.cena + 10)); 
•	</script>

Ważniejsze obiekty wbudowane (I)
•	navigator - dostęp do informacji dotyczących przeglądarki 
•	window - bieżące okno przeglądarki 
•	document - informacje o bieżącym dokumencie HTML
•	location - bieżący adres URL 
•	history - lista historyczna przeglądarki 

Ważniejsze obiekty wbudowane (II)
•	form - formularz 
•	link - odsyłacz 
•	image - obrazek 
•	frame - ramka 
•	String - operacje na łańcuchach znakowych 
•	Math - operacje matematyczne
•	Date - przetwarzanie daty 
•	Array - operacje tablicowe

Obiekt Window (I)
•	Składowe:
•	frames[] - ramki potomne w oknie; porządek w macierzy odpowiada porządkowi definiowania w dokumencie 
•	frames.length - liczba zdefiniowanych ramek
•	parent - okno rodzicielskie 
•	top - okno najwyższego rzędu, które jest właścicielem wszystkich widocznych ramek; 
•	status - komunikat pojawiający się w pasku stanu 
•	name - wewnętrzny identyfikator okna otwartego metodą window.open()

Obiekt Window (II)
•	Metody:
•	alert("komunikat”) - wyświetla ostrzeżenie z komunikatem	
•	confirm("komunikat")	- wyświetla okno dialogowe ”Pytanie”. Zwraca TRUE lub FALSE w zależności od naciśniętego w oknie przycisku	
•	prompt("komunikat")	- wyświetla okno dialogowe "Prompt" z podanym komunikatem, które oczekuje na wprowadzenie przez użytkownika tekstu.
•	open("URL","nazwa")	- otwiera na ekranie nowe okno z dokumentam o adresie “URL” , nadaje mu wewnętrzny identyfikator “nazwa" 	
•	close() - zamyka okno z dokumentem	

Obiekt Document (I)
•	Informacje o aktualnie otwartym dokumencie. Ważniejsze składowe to:
•	title - tytuł dokumentu
•	location - pełny adres URL aktualnie otwartego dokumentu
•	lastModified - data ostatniej modyfikacji dokumentu źródłowego lub 0
•	referrer - adres URL, spod którego wywołany został bieżący dokument
•	kolory (format #RRGGBB) : fgColor, linkColor, alinkColor, vlinkColor

Obiekt Document (II)
•	forms[] - tablica formularzy w dokumencie (indeksowana także w kolejności wstawiania formularzy do HTML), np.
	- document.forms["form_1"]
	- document.forms[0]
forms.length - ilości formularzy w dokumencie 
•	links[] - tablica odsyłaczy w dokumencie
•	links.length - ilość odsyłaczy w dokumencie
•	anchors[] - tablica odsyłaczy do innych dokumentów
•	anchors.length - ilość odsyłaczy do innych dokumentów
•	layers[] (Netscape) - warstwy zgromadzone w dokumencie. Każda warstwa zawiera dalsze atrybuty

Obiekt Document (III)
•	Uwaga - w przypadku przeglądarki IE (wersja 4.0 lub nowsza) wszystkie kolekcje podobiektów Document (takie jak links, layers, forms) zostały zgromadzone w nowej tablicy o nazwie all[] i są identyfikowane przez nazwę, np.:
	document.all[warstwa1].style.visibility="hidden"; 
•	Metody:
•	write(“lancuch”), writeln(“lancuch”)
•	close()
•	clear()
Obiekt Location
•	Informacje o adresie źródłowym dokumentu 
•	href - cały adres URL 
•	protocol - początek adresu URL wraz z pierwszym dwukropkiem; 
•	host - nazwa serwera (i domeny)
•	hostname - pełna nazwa serwera łącznie z numerem portu
•	port - używany przez serwer port TCP
•	hash - nazwa zakotwiczenia w dokumencie
•	search - zapytanie w adresie URL (parametry skryptu)
Obiekt String (I)
•	Jest automatycznie tworzony z chwila inicjowania zmiennej łańcuchem tekstowym
•	Atrybuty: 
•	length - długość
•	Metody:
•	seria metod formatujących, analogicznie jak to ma miejsce w HTML, przykładowo: blink(), bold(), fixed(), fontColor().
Gdy taki łańcuch zostanie wypisany do dokumentu metoda write() automatycznie dołączone zostanie stosowne formatowanie.
•	charAt(index) - zwraca znak spod wskazanej pozycji

Obiekt String (II)
•	Metody (cd):
•	toLowerCase() - konwertuje znaki w łańcuchu na małe litery
•	toUpperCase() - konwertuje znaki w łańcuchu na wielkie litery
•	substring(indeksA, indeksB) - pobiera podłańcuch, zgodnie z wartoscią indeksów 
•	indexOf(podłańcuch [,indeks]) - przeszukuje łańcuch w poszukiwaniu podłańcucha, ewentualnie od pozycji index
•	lastindexOf(podłańcuch [,indeks]) - jak poprzednia, jednak przeszukując w przeciwnym kierunku

Obiekt Math
•	Niektóre metody:
•	abs(x) - wartość bezwzględna x 
•	max(x, y) - większa z liczb x, y 
•	min(x, y) - mniejsza z liczb x, y 
•	ceil(x) - najmniejsza liczba całkowita większa niż lub równa x 
•	floor(x) - największa liczba całkowita mniejsza niż lub równa x 
•	round(x) - x zaokrąglone do najbliższej liczby całkowitej
•	log(x) - logarytm naturalny x 
•	exp(x) - e (stała Eulera) podniesione do potęgi 
•	pow(x, y) - x do potęgi y 
•	sqrt(x) - przekazuje pierwiastek kwadratowy z x 
•	random() - generuje liczbę losową 0..1

Obiekt Date (I)
•	Przykładowa konstrukcja obiektu:
	d= new Date(); // bieżąca data i czas
	new Date(milisekundy) //liczone od 00:00:00, 1 stycznia 1970
	new Date(rok, miesiąc, dzień [, godzina, minuta, sekunda,milisekunda]);
•	Metody:
•	getDay() - dzień tygodnia 
•	getDate() / setDate() - dzień miesiąca 
•	getHours() / setHours() - godzina 
•	getMinutes() / setMinutes() - minuty 
•	getMonth() / getMonth() - numer miesiąca 
•	getSeconds() / setSeconds() - sekundy 
•	getTime() / setTime() - czas wyrażony w milisekundach 
•	getYear() / setYear() - rok

Obiekty HTML (I)
•	Obiekty JavaScript, odzwierciedlające składniki osadzone w dokumencie HTML:
•	Anchor
•	Applet
•	Area
•	Button
•	Checkbox
•	FileUpload
•	Form
•	Frame
•	Hidden

Obiekty HTML (II)
•	Ponieważ obiekt string posiada metody formatujące HTML, można go użyć do generowania składników dokumentu, które będą następnie interpretowane jako obiekty
•	Anchor:
•	var str1 = ”OK" 
document.write(str1.Anchor(”a1"))
•	Odpowiednik HTML:
<A NAME=”a1">OK</A>

Obiekty HTML (III)
•	Link:
•	Obiekt link będzie figurował zarówno w kolekcji links jak i anchors obiektu document -> link jest specjalnym przypadkiem anchor.
•	Document.write(”OK".link("Authors.htm#author"))
•	Odpowiednik HTML:
<a href=”index.html#a1">OK</a>
•	Area:
•	Obiekt analogiczny do link, czy anchor. Odpowiednik obszaru aktywnego w obrazie graficznym.
Obiekty HTML (IV)
•	Frame:
•	Obiekt odpowiadający ramce (<FRAME>) HTML, zawartej w tagu <FRAMESET>
•	Składnik obiektu Window, posiadający także kilka analogicznych do Window składników (np. document ramki)
•	Przykładowa definicja HTML:
•	<FRAMESET cols="20%,80%">
•	<FRAME src=”1.html" name=”ramka1">
•	<FRAME src=”2.html" name=”ramka2">
•	</FRAMESET>

Obiekty HTML (V)
•	Image:
•	Przechowywany w kolekcji images obiektu document
•	Przykład:
	Im1= new Image() 
	Im1.src = "C:/Personal/Mountain.gif" 
•	Ważniejsze artybuty:
•	src - ściażka (URL) do źródła wyświetlanej grafiki 
•	height, width, hspace, vspace - parametry ułożenia obiektu
•	border - szerokość ramki (w pixelach)
•	complete - flaga ustawiana na true gdy obraz został już w całości załadowany

Obiekt Form
•	Atrybuty: 
•	name  - nazwa formularza; 
•	method - sposób wysyłania formularza do serwera
•	action - adres docelowy URL, pod który zostanie wysłane zapytanie z formularza
•	target łańcuch określający nazwę okna do którego zostanie przesłana odpowiedź
•	elements[indeks] - obiekty (formatki) formularza 
•	length - ilość elementów w formularzu
•	Metody: 
•	submit(), reset()
•	Zdarzenia: 
•	onSubmit(), onReset()

Składniki w obiekcie Form
•	Formatki:  Text, Checkbox, Radio, Select, Button, Password, FileUpload, Hidden, Textarea - reprezentowane są przez osobne obiekty, zabrane w kolekcji obiektu form.
•	Niezależnie od typu posiadają 
•	Atrybut:
•	name - nazwa danego elementu formularza (formatki)
•	Metody:
•	focus() - uaktywnia element (nie wywołuje zdarzenia onFocus!) 
•	blur() - usuwa aktywność elementu (nie wywołuje zdarzenia onBlur!)
•	Zdarzenia: onFocus, onBlur
Obiekty Text, Textarea
•	Okienko do wpisywania tekstu
•	W przypadku Textarea -tekst może być rozwijany do wielu linii
•	Atrybuty: 
•	value - bieżąca treść
•	defaultValue - tekstowa wartość domyślna 
•	Metoda:
•	select() - podświetlenie tekstu w okienku
•	Zdarzenia:
•	onSelect() 
•	onChange() - gdy zmieniono tekst

Obiekt Checkbox
•	Formatka wyboru typu TAK/NIE
•	Atrybuty: 
•	checked - bieżące ustawienie
•	defaultChecked - domyślne ustawienie
•	Metoda:
•	click() - zmiana ustawienia na przeciwne
•	Zdarzenia:
•	onClick() 
Obiekt Radio
•	Obiekt reprezentujący jedną opcję spośród kilku do wyboru. Zawarty z reguły w tablicy, gromadzącej wszystkie opcje wyboru w grupie radio.
•	Relacja wykluczenia pomiędzy obiektami Radio jest realizowana poprzez zbieżność ich nazw (analogicznie do HTML)
•	Atrybuty: 
•	checked- bieżące ustawienie
•	defaultChecked - domyślne ustawienie
•	Metoda:
•	click() - zmiana ustawienia na przeciwne
•	Zdarzenia:
•	onClick() 
Obiekt Select
•	Formatka wyboru elementów z listy
•	Atrybuty: 
•	length - ilość elementów na liście
•	selectedIndex - wartość wybranej pozycji z listy
•	options[].text - łańcuchy wyświetlane w liście wyboru jako nazwy pozycji w liście	
•	options[].value - wartości przesyłane do serwera jako wybrane
•	options[].selected - stan wyboru pozycji listy wyboru (wartość bool)	
•	options[].defaultSelected	- czy pozycja domyślnie jest zaznaczona/odznaczona(bool)
•	Zdarzenie: onChange() 

Obiekty 
Button, Reset, Submit
•	Przycisk w formularzu: zwykły, kasujący lub wysyłający formularz
•	Atrybuty: 
•	value - napis na przycisku
•	type - wartości “SUBMIT”, “RESET” lub “BUTTON”
•	Metoda:
•	click() -wcisnięcie
•	Zdarzenia:
•	onClick() - gdy wciśnięto przycisk

Obiekt Password
•	Okienko do wpisywania tekstu ukrytego
•	Atrybuty: 
•	value - bieżąca treść
•	type - tekst “PASSWORD”
•	Metoda:
•	select() - podświetlenie tekstu w okienku
•	Zdarzenia:
•	onSelect() 

Obiekt FileUpload
•	Formatka pliku pobieranego przez użytkownika. Nazwa jest pobierana do formularza
•	W przypadku formularza komunikującego się z serwerem, plik jest wysyłany na serwer (upload)
•	Atrybuty: 
•	value - ustawiona ścieżka do pliku
•	type - tekst “FILE”

Obiekt Hidden
•	Używany to przekazywanie par nazwa/wartość do serwera, gry formularz HTML jest wysyłany
•	Formatka hidden nie jest widoczna w formularz na ekranie
•	Atrybuty: 
•	value - bieżąca treść
•	type - tekst “HIDDEN”

Obiekt Applet
•	Reprezentuje applet osadzony w dokumencie
•	Applety udostępniane są w formie kolekcji w obiekcie document, np. document.applets[1], lub (dla przykładu poniżej) document.applets[”Zegar”]:
	<APPLET CODE=”Zeg.class" WIDTH=150 		HEIGHT=80 NAME=”Zegar" >
•	(!) Metody i atrybuty publiczne klasy osadzonego appletu są dostępne w obiektach kolekcji applets
Obiekt Layer
•	Odpowiednik warstwy HTML definiowanej tagiem <DIV>
•	Ważniejsze atrybuty:
•	clip.height, clip.width, clip.right, clip.left, clip.top, clip.bottom - wymiary obszaru widocznego warstwy
•	document - obiekt osadzony w wartswie w celu reprezentowania kolekcji innych obiektów zawartych w danej warstwie
•	above - warstwa leżąca powyżej bieżącej
•	below  - warstwa leżąca poniżej bieżącej
•	visibility - flaga widoczności warstwy

Tablice (I)
•	Tworzenie tablic - o dowolnej wielkości, o zdefiniowanej wielkości, wypełnionych danymi:
•	Tablica=new Array();
•	Tablica=new Array(10);
•	Tablica=new Array(”Poland", ”Germany", ”France")
•	Przypisywanie i pobieranie wartości:
•	Tablica[1]=”Poland";
•	Podstawa indeksacji w tablicy: 0

Tablice (II)
•	Tablice są obiektami. Posiadają funkcje, można też kopiować wskazania na tablice (nie oznacza to przepisania całego obiektu!) np: 
	t1 = new Array(2);
	t2 = t1; 
	t2[1] = 5; - jest równoważne t1[2] = 5;	
•	Tablice możemy zagnieżdżać i używać adresacji wielowymiarowej:
	t1 = new Array(2);
	t1[0] = new Array(5);
	t1[2] = new Array(5);
wtedy t1[x][y] określa pole w tablicy, gdzie x jest w przedziale 0..1 a y w przedziale 0..4

Tablice (III)
•	Ważniejsze metody i atrybuty obiektu Array:
•	join(”separator”) - zwraca tablicę w formie łańcucha połączonych wszystkich wartości komórek
•	split(”string”) - operacja odwrotna do join
•	reverse() - przepisuje tablicę w odwrotnym kierunku
•	sort() - sortuje tablice
•	length - wielkość tablicy

JavaScript

•	Przykłady skryptów 

JavaScript - 01
•	Adres źródłowy pliku (document.location): 

•	<script language="JavaScript" type="text/javascript">
•	<!--
•		document.write("Adres: " + document.location);
•	// -->
•	</script>

JavaScript - 02
•	Czas modyfikacji dokumentu pliku
	(document.lastModified): 

•	<script language="JavaScript">
•	<!--
•	 document.write("Aktualizacja: " + document.lastModified);
•	// -->
•	</script>

JavaScript - 03
•	Komunikat do użytkownika (Alert), zdarzenie onLoad: 

•	<body OnLoad="alert(’Ładowanie zakończone');">
•	<FORM>
•	<INPUT TYPE="button" VALUE=”OK" onClick="alert(’ Wysłano zapytanie ...')")>
•	</FORM></body>

JavaScript - 04
•	Zapis do dokumentu odpowiednikiem kodu HTML, detekcja typu przeglądarki, przykład - obiekt osadzony: 

•	<SCRIPT language="JavaScript"> 
if (navigator.appName == "Microsoft Internet Explorer") {
	document.write('<EMBED SRC="plik.mp3"  		HIDDEN=true AUTOSTART=TRUE LOOP=FALSE>  	</EMBED>') 
}
</SCRIPT>

JavaScript - 05
•	Window.external - Dodawanie do ulubionych: 

•	<script language="JavaScript1.2">
•	function bookmarkit(){
•	window.external.addFavorite(’http://www.google.pl,’X’)
•	}
•	document.write('<a href="#" onClick="bookmarkit()"> Dodaj Google do ulubionych jako ‘X’</a>')
•	</script>

JavaScript - 06
•	Lista wyboru, dostęp do niej:
•	<script language="javascript">
•	function go(){
•	location=document.form1.list1.options[document.form1.list1. selectedIndex].value
•	}
•	</script>
•	<form name=”form1">
•	<select name=”list1" onchange="go();" size="1">
•	<option value="http://www.wp.pl">WP</option>
•	<option value="http://www.onet.pl">ONET</option>
•	<option value="http://www.interia.pl">INTERIA</option>
•	</select></form>

JavaScript - 07
•	Otwieranie nowego okna, akcja JavaScript wywołana przez HREF: 

<SCRIPT>
•	function displayWindow(url) {
•	var Win = window.open(url,”Nazwa1",'width=300,height=200,
resizable=no,scrollbars=yes,menubar=no');
•	}
•	</SCRIPT>
•	<A HREF="javascript:displayWindow(‘1.htm')">link</a>

JavaScript - 08
•	Operacje na dacie, zwracanie wartości funkcji: 

•	<script language="javascript">
•	function data(mode)
•	{
•	   var now = new Date();
•	   var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
•	   var MonthDayYear =(dayNr+"/"+(now.getMonth()+1)+"/"+now.getYear());
•	   return MonthDayYear;
•	}
•	document.write(data());</script>

JavaScript - 09
•	Kontrola źródła nawigacji: 

•	<script>
•	<!--
•	var zrodlo="http://mojastrona.pl/index.html"
•	if (document.referrer != zrodlo){
•	history.go(-1)
•	}
•	</script>

JavaScript - 10
•	Timery, tablicowana kolekcja forms[].elements[] 

•	<script language="javascript">
•	var s = "Tekst wypisywany";a = "";i=0
•	function scroll() {
•		i++
•		if(i > s.length) {
•			i = 1
•		 }
•		a = s.substring(0,i)
•		document.forms[0].elements[0].value = a+"_"
•		setTimeout("scroll()",100)
•	}
•	</script><body onLoad="scroll()">
•	<form><input type="text" size=100></form></body>
JavaScript - 11
•	Przejście do lokalizacji na bazie historii przeglądarki WWW i wskazanej strony: 

•	<form name="Historia">
•	<input type="button" value=”back" onClick="history.back()">
•	<input type="button" value=”ONET"  		onClick="parent.location.href='http://www.onet.pl'"> 
•	<input type="button" value=”forward" onClick="history.forward()">
•	</form>

JavaScript - 12
•	Rzucanie i przechwytywanie wyjątków: 
•	<script language="JavaScript1.2">
•	try { 
•	   if(z == 1) 
•	      throw "Err 1”; 
•	   else if(z == 3)
•	      throw "Err 3”;
•	} 
•	catch(e) {
•	   if(e == "Err 1") alert("Wystąpił błąd 1");
•	   if(e == "Err 3") alert(”Wystąpił błąd 3");
•	} 
•	</script>

JavaScript - 13
•	Test obiektu hidden: 
<form action="" method="POST" id=”f1">
<input type="Hidden" name=”h1" value="" id=”h1">
<input type="Button" name="" value=”Wartość hidden" id=”go" onClick=getHidden()> 

<script language="JavaScript">
		f1.h1.value=(”h1 = (hidden)")
	function getHidden() {
		y=f1.h1.value
		self.alert(”Watość: " + y)
	}
</script> </form>

WWW - osadzenie obiektów multimedialnych (I)
•	Tag <EMBED>, przykład:
	<EMBED 
	  SRC="a.avi”
	  HEIGHT=200 WIDTH=200>
	</EMBED>
•	Parametry:
•	SRC: URL do źródła obiektu
•	WIDTH: szerokość pola obiektu
•	HEIGHT: wysokość pola obiektu
•	ALIGN:(ABSBOTTOM | ABSMIDDLE | MIDDLE | TEXTTOP | RIGHT | LEFT | BASELINE | CENTER | BOTTOM | TOP) - ułożenie 
•	NAME: nazwa (do użycia na zewnątrz obiektu)

WWW - osadzenie obiektów multimedialnych (II)
•	PLUGINSPAGE: nazwa (strona) dostawcy modułu odtwarzania dla obiektu
•	PLUGINURL: adres modułu odtwarzania dla obiektu
•	HIDDEN: (TRUE | FALSE) - czy ma być widoczny
•	HREF: - link uruchamiany po naciśnięciu na obszarze obiektu 
•	TARGET: ramka docelowa dla linku
•	AUTOSTART: (TRUE | FALSE) - automatyczne odtwarzanie
•	LOOP: (TRUE | FALSE) - czy obiekt będzie odtwarzany “w kółko”
•	PLAYCOUNT: - ile razy obiekt będzie odtwarzany
•	VOLUME: (0 .. 100) - siła dźwięku
•	CONTROLLER: (TRUE | FALSE) - wyświetlanie interfejsu 		kontrolującego odtwarzanie obiektu

WWW - osadzanie apletów (I)
•	Przykład HTML:
•	<HTML><HEAD><TITLE> Aplet testowy</TITLE></HEAD>
•	 <BODY>Miejsce osadzenia:
•	 <APPLET CODE="Hello.class" WIDTH=150 				HEIGHT=25></APPLET>
•	 </BODY>
•	 </HTML>
•	Tag applet - parametry:
•	CODE - nazwa pliku z kodem bajtowym apletu (plik .class) 
•	WIDTH, HEIGHT- wymiary okna appletu
•	CODEBASE - ścieżkę (URL) do pliku z kodem bajtowym apletu, 

WWW - osadzanie apletów (II)
•	Efekt (WWW):

•	Aplet - posiada kontekst graficzny o zadanych wymiarach. W oknie możliwe jest osadzanie formatek z biblioteki AWT
•	Obszar Apletu jest prostokątem, jednak z reguły wiąże się jego szatę graficzną z otoczeniem. 

WWW - parametry apletów (I)
•	W aplecie parametry są identyfikowane nazwą symboliczną zamiast kolejności w linii komend
•	Przykład:
•	<APPLET CODE="Graf.class" WIDTH="670" HEIGHT="430">
•	 	<PARAM NAME=param1 VALUE="zielony">
•	 	<PARAM NAME=param2 VALUE="czerwony">
•	</APPLET>

WWW - parametry apletów (II)
•	Metoda getParameter(nazwa) klasy Applet:	
•	String argument1, argument2;
•	argument1=getParameter("param1");
•	argument2=getParameter("param2");
•	Przypomnienie dla wariantu aplikacji:
•	public static void main (String [] args) {
•	 	String argument1, argument2; 	
•		argument1 = String.valueOf(args[0]);
•		argument2 = String.valueOf(args[1]);
•	}
Java 
- podstawowe narzędzia
•	java - maszyna wirtualna
•	java nazwa_klasy
•	javac - Java Compiler
•	javac nazwa_pliku.java
•	jar - Java Archiver
•	appletviewer - przeglądarka apletów
•	appletviewer plik_z_osadzonym_apletem.html

Java - Najprostszy program
•	Przykład aplikacji:
•	class HelloWorld { 
•	 	 	public static void main(String args[]) 
•	 		{ 
•	 		 	System.out.println("Hello!"); 
•	 	 	} 
•	}
•	Klasa aplikacji (zapisana w pliku o tej samej nazwie) posiada metodę main(), od które rozpoczyna się wykonanie

Biblioteki Javy
•	Podstawowymi pakietami obiektów Javy są:
•	java.lang - podstawowa funkcjonalność, import domyślny dla każdej klasy, 
•	java.applet - klasy potrzebne do tworzenia apletów
•	java.awt - Abstract Window Toolkit - pakiet zawierający niezależny od platformy systemowej zestaw klas do projektowania aplikacji w środowisku graficznym
•	java.net -  pakiet zawierający klasy służące do realizacji operacji wejścia/wyjścia w sieci
•	java.util - klasy narzędziowe
•	java.io - klasy implementujące operacje wejścia / wyjścia 

Biblioteka AWT (I)
•	Podstawowa biblioteka służąca do realizacji interfejsu okienkowego i grafiki
•	Dostępna w pakietach Javy każdej przeglądarki WWW
•	Składa się z kolekcji klas o strukturze hierarchicznej drzewiastej, możliwe jest importowanie dowolnego fragmentu takiego drzewa klas
•	Główną klasą pakietu ATW jest Component. 

Biblioteka AWT (II)
•	Component jest specjalizowany na poszczególne komponenty interfejsu (np. formatki) oraz klasę Container, której obiekty mogą agregować w sobie kolejne.
•	Container jest specjalizowany na Window, Panel i ScrollPanel
•	Window jest klasą nadrzędną dla Dialog i Frame
•	Panel jest klasą nadrzędną dla Applet
Biblioteka AWT (III)
AWT - Panel Layout (I)
•	Rozmieszczanie komponentów interfejsu okienkowego jest realizowane za pomocą tzw. menedżerów ułożenia. Wyróżnić można 6 sposobów ułożenia:
•	null - ułożenie bez zadanego porządku, każdy komponent układany jest na bazie indywidualnie podanych współrzędnych ekranowych
•	FlowLayout - rozmieszczenie ciągłe, zgodnie z wierszami. Gdy dany komponent nie mieści się w wierszu, przenoszony jest do następnego wiersza. 
AWT - Panel Layout (II)
•	Rozmieszczanie komponentów (cd):
•	BorderLayout - rozmieszczenie komponentów na obrzeżach i w środku pojemnika; miejsca umieszczenia w pojemniku zadane są przy pomocy symboli: West, East, North, South, Center
•	GridLayout - komponenty rozmieszczone w prostokątnej siatce o podanej liczbie kolumn i wierszy. Wszystkie klatki tej siatki mają identyczne rozmiary
•	GridBagLayout - jak GridLayout, jednak wymiary pól nie muszą być identyczne, definiuje to dodatkowy obiekt GridBagConstraints 
•	CardLayout - - komponenty rozmieszczane są na wzajemnie zasłaniających się zakładkach. Możliwe jest przełączanie miedzy tymi zakładkami

Java - najprostszy aplet (I)
•	Aplet jest klasą wywiedzioną z java.applet.Applet
•	Specjalizacja takiej klasy następuje poprzez przeciążanie metod pochodzących z klasy nadrzędnej, sterujących np. wyświetlaniem, obsługą zdarzeń, sterowaniem stanami apletu itp.
•	Przeciążenie metody paint, pobierającej obiekt kontekstu graficznego apletu typu Graphics umożliwia realizację operacji graficznych w tworzonym aplecie
Aplet - cykl życia
•	Cykl życia zbieżny z czasem prezentacji strony WWW
•	Sterowanie poprzez wywołanie metod apletu:
•	init() - inicjalizacja apletu zaraz po jego załadowaniu na stronie WWW
•	start() - uruchomienie apletu (może następować wielokrotnie, np. jak wrócimy na stronę z uruchomionym apletem - Naviation Forward/Back)
•	stop() - zatrzymanie apletu, podobnie jak start()
•	destroy() - aplet definitywnie kończy działanie

Konstrukcja komponentów apletu
•	Zawartość apletu jest zwyczajowo budowana w metodzie init(), wywoływanej automatycznie podczas tworzenia apletu:

•		public void init()
•		{
•			this.setLayout(new BorderLayout());
•			this.add(new DrawCanvas(), "Center");
•		}

Java - najprostszy aplet (II)
•	Przykład apletu: 
•	import java.applet.Applet;
•	import java.awt.Graphics;
•	public class HelloWorld extends Applet 
•	{
•	 		public void paint(Graphics g) 
•		 	{
•	  	 	g.drawString("Hello!", 50, 25);
•	 		}
•	}

Aplet - 
metody paint i update
•	Metoda paint jest wywoływana w celu odbudowania widoku apletu (np. po wysunięciu okna na pierwszy plan)
•	Metoda update jest wywoływana w celu przygotowania podkładu pod malowanie - standardowo wypełnia widok graficzny kolorem tla.
Kontekst graficzny
•	Realizowany przez obiekt Graphics
•	Podawany automatycznie do wywoływanej z zewnątrz metody paint (Graphics g)
•	Wszystkie obiekty dziedziczące z klasy Component mają własny kontekst graficzny, który można pobrać -metodą getGraphics() w przypadku programowo wywołanego rysowania. Należy jednak pamiętać, że odmalowanie okna spowodowane przez system usunie efekty rysowania.

Ustawienia obiektu graficznego
•	Obiekt graficzny bazuje na następujących ustawienia operacji rysowania:
•	translation - przesunięcie (X,Y) rysowania
•	current clip - prostokąt ograniczający rysowanie
•	current color - kolor rysowania
•	current font - czcionka dla rysowania tekstu
•	current logical pixel function - rysowanie lub XOR tła
•	current XOR color - kolor operacji XOR dla tła

Graphics - przegląd metod rysujących (I)
•	Modyfikacja ustawień Graphics:
•	void setColor(Color c1) - ustawienie bieżącego koloru, np.:
g.setColor(new Color(100,100,100));
•	void setPaintMode() - ustawienie current logical pixel function na rysowanie normalne (nie XOR)
•	void setXORMode(Color c1) - ustawienie current logical pixel function na rysowanie XOR zadanym kolorem 

Graphics - przegląd metod rysujących (II)
•	Modyfikacja ustawień Graphics (cd):
•	void setFont(Font font) - ustawienie bieżącej czcionki, przykładowo:
g.setFont (new Font(”Arial”,BOLD,10));
•	void setClip (int x, int y, int width, int height) - ustawienie prostokąta ograniczającego rysowanie, przykładowo:
g.setClip (10,10,200,200)
•	void translate(int X, int Y) - przesunięcie współrzędnych rysowania

Graphics - przegląd metod rysujących (III)
•	void draw3DRect(int X, int Y, int width, int height, boolean raisedOrDown) - równoległościan 3D
•	void drawArc(int X, int Y, int width, int height, int startAngle, int arcAngle) - łuk
•	void drawBytes(byte[] dane, int dataStart, int dataCount, int X, int Y) - liczby z tablicy
•	void drawChars(char[] dane, int dataStart, int dataCount, int X, int Y) - znaki z tablicy

Graphics - przegląd metod rysujących (IV)
•	void drawLine(int X1, int Y1, int X2, int Y2) - rysowanie linii
•	void drawOval(int X, int Y, int width, int height) - rysowanie okręgów
•	void drawPolygon(int[] daneX, int[] daneY, int count), void drawPolygon(Polygon obiekt) - rysowanie wielokątów wypukłych na podstawie tablic współrzędnych wierzchołków
•	void drawPolyline(int[] daneX, int[] daneY, int count) rysowanie linii łamanej na podstawie tablicy współrzędnych wierzchołków

Graphics - przegląd metod rysujących (V)
•	void drawRect(int X, int Y, int width, int height) - rysowanie prostokątów
•	void drawRoundRect(int X, int Y, int width, int height, int arcWidth, int arcWidth) - rysowanie prostokątów z zaokrąglonymi narożnikami
•	void drawString(String dane, int X, int Y) - rysowanie tekstu, zgodnie z wybraną czcionką
•	Analogicznie do metod rysujących obrzeża zdefiniowano metody rysujące obiekty wypełnione kolorem:
fill3DRect, fillOval, fillPolygon, fillRect, fillRoundRect, fillArc
Operacje na bitmapach (I)
•	Do przechowywania bitmap służy obiekt Image
•	Metoda renderująca Graphics
drawImage(Image dane, int X, int Y, int width, int height, Color kolorTla, ImageObserwer interfejsParamterów)
•	Możliwość operowania na standardzie gif i jpeg
•	Możliwość renderowania bitmap z kolorem tła
Operacje na bitmapach (II)
•	Ładowanie bitmap - inna metoda w przypadku aplikacji i apletu (w aplecie bitmapa musi zostać pobrana przez HTTP z hosta macierzystego):
•	if (aplet) {
•	 	    img = getImage (getCodeBase(), ”x.gif");
•	} else {
•	      img = Toolkit.getDefaultToolkit().getImage(”x.gif”);
•	}

Operacje na bitmapach (III)
•	Przykład wyświetlenia pliku .gif w aplecie:	
•	image img;
•	public void init () {
•	 		img = getImage (getCodeBase(), ”x.gif");
•	}	
•	public void paint (Graphics g) {
•			 g.drawImage(img,40,40,40,40,this);
•	}

Śledzenie ładowania komponentów apletu (I)
•	Klasa MediaTracker - kontroluje przebieg ładowania zarejestrowanych komponentów apletu, np. bitmap.
•	Umożliwia przykładowo wstrzymanie uruchomienia apletu do chwili, kiedy wszystkie komponenty będą załadowane.
•	Rejestracja komponentu w obiekcie MediaTracker przy użyciu (przykładowo) metody 
addImage(Image komponent, int ID) oraz oczekiwanie na kompletne pobranie danych - metoda waitForID(0)
•	Oczekiwanie na ID musi przechwytywać wyjątek InterrupdedException

Śledzenie ładowania komponentów apletu (II)
•	public void init(){
•	 	MediaTracker tracker;
•	 	tracker = new MediaTracker(this);
•	 	if (aplet) {
•	      	 	img = getImage (getCodeBase(), ”x.gif");
•	 	} else {
•	        	img = Toolkit.getDefaultToolkit().getImage(”x.gif");
•	 	}
•	 	tracker.addImage(img, 0);
•	 	try {
•			tracker.waitForID(0);
•	 	} catch (InterruptedException e) {return;}
•	}
Buforowanie wyświetlania (I)
•	Eliminowanie efektów ubocznych (np. migotanie obrazu) przy realizacji wyświetlania ciągłego (animacja)
•	Procedura realizacji:
•	W pamięci tworzony jest bufor graficzny, reprezentujący obszar o wymiarach buforowanego fragmentu ekranu,
•	Funkcje graficzne wykonywane są na buforze w pamięci
•	Po zakończeniu rysowania zawartość ekranu jest przelewana na ekran

Buforowanie wyświetlania (II)
•	Bufora graficzny, rozmiar bufora, kontekst graficzny bufora:
•	private Image buff; 
•	private Dimension buffSize; 
•	private Graphics buffGraf; 
•	Inicjalizacja:
•	public void init () {
•	 	buffSize = this.size();
•	 	buff = createImage(buffSize.width, buffSize.height); 
•	 	buforGraf = buff.getGraphics(); 
•	}

Buforowanie wyświetlania (III)
•	Zawartość paint() przenosimy do update():
•	public void paint(Graphics g) {  
•	 	update(g); 
•	} 
•	Rysowanie:
•	public void update(Graphics g) { 
•	 	buffGraf.setColor(Color.black); 
•	 	buffGraf.fillRect(10,10,110,110); // rysowanie w buforze ...
•	 	g.drawImage(buffGraf, 0, 0, this); // przelanie bufora na ekran
•	}

Obsługa zdarzeń - 
model tradycyjny (I)
•	Wszystkie zdarzenia, występujące w czasie wykonywania apletu powodują wywołanie jednej z dwóch metod:
•	action - zdarzenie wywołane przez użytkownika (np ruch kursora myszki)
•	handleEvent - zdarzenie wywołane przez komponent graficzny (np. zmiana tekstu formatce, naciśnięcie przycisku)

Obsługa zdarzeń - 
model tradycyjny (II)
•	Przykład:
•	public class MojAplet extends Applet { 
•	  	Button b1;
•	public void init() {
•	 	b1 = new Button(”Funkcja 1"),
•	 	add(b1);  // dodanie do apletu
•	}
•	public boolean action(Event e, Object arg) {
•	 	if (e.target == b1) { 
•	 		 // Gdy naciśnięto ten przycisk  ...
•	 	}
•	}