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
•	JSP
•	inne
Wstęp - wybrane zagadnienia związane z HTML 
•	Arkusze stylów CSS
•	DHTML - Warstwy
•	XHTML
Arkusze stylów CSS
•	Narzędzie do formatowania stron WWW
•	CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów
•	Zalety: 
•	Krótszy, bardziej przejrzysty dokument, 
•	Łatwość reedycji (szczególnie przy zewnętrznych arkuszach stylów), 
•	Możliwość wprowadzania hierarchi właściwości - bazującej na drzewie dokumentu
CSS - selekcja obiektów opisywanych (I)
•	Bazuje na drzewie dokumentu, uwzględniając relację rodzic-potomek
•	Różne metody specyfikowania obiektów:
•	Nazwa: BODY { color: red }
•	Cechowanie wszystkiego: * { color: red }
•	Cechowanie potomka w drzewie HTML (po spacji): 
		BODY TABLE { color: lightgreen } 
•	Cechowanie potomka potomka:
		BODY TABLE UL { color: lightgreen } 
			- w tym przypadku: lista w tabeli
CSS - selekcja obiektów opisywanych (II)
•	Różne metody specyfikowania obiektów (cd):
•	Cechowanie grupy (po przecinku)
		TABLE, UL { color: lightgreen } 
•	Cechowanie klasy obiektów (po kropce):
		*.klasa1 { color: lightgreen }
		.klasa1 { color: lightgreen }
	- będzie cechowało dowolny obiekt klasy “klasa1” 
		A.klasa2 { color: lightgreen }
	- będzie cechowało obiekt definiowany np. kodem:
		<a class=”klasa2”>link</a>
CSS - selekcja obiektów opisywanych (III)
•	Różne metody specyfikowania obiektów (cd):
•	Cechowanie obiektu po jego ID (czyli unikatowego):
		A#id1 { color: lightgreen } 
	- będzie cechowało obiekt definiowany np. kodem:
		<a id=”id1”>link</a> 
•	Cechowanie pseudoelementu (po dwukropku):
		A:first-letter { color: blue }
		A.klasa2:first-letter { color: lightgreen }
•	Cechowanie pseudoklasy - kilka możliwości: visited, active, focus, hover, 
		A:visited { color: lightgreen }
		*:hover { color: brown }
Tryby importu stylów CSS (I)
•	Styl lokalny (inline) - charakteryzuje jednorazowo zawartość bloku:
	<td style="color: green"> Treść bloku</td>

•	Warstwy wydzielone (DIV) lub rozciąganie stylu (SPAN) - możliwość zdefiniowania grupy bloków/warstw, wewnątrz których będzie obowiązywał styl:
	<span style="color: green">
		<b>Tekst 1</b>
		Tekst 2
		<u>Tekst 3</u>
	</span>
Tryby importu stylów CSS (II)
•	Wewnętrzny arkusz stylów - wydzielone sekcje dokumentu, definiujące symbolikę i właściwości stylu.
Przykład:
<html> 
	<head>
		<style type="text/css">
			body { color: red }
			.st1  { color: blue } 
		</style>
	</head>
	<body>
		<span class="st1"> To jest tekst typu st1.</span>
		To jest tekst typu body.
	</body>
</html>
Tryby importu stylów CSS (III)
•	Zewnętrzny arkusz stylów - definicje stylów w odrębnym pliku. Przykład HTML:
<html>
	<head>
 	<link rel="Stylesheet" href="stylzewnetrzny.css" type="text/css">
 	</head>
	<body>
		<span class="st1"> To jest tekst typu st1</span>.
		<code2> To jest tekst typu body</code2>.
	</body>
</html>
treść pliku ”stylzewnetrzny.css”:
	body { color: red }
	.st1  { color: blue } 

Tryby importu stylów CSS (IV)
•	Import arkusza stylów - umożliwia pobranie arkusza stylów z innego hosta niż stronę WWW:
	<STYLE TYPE="text/css">
		@import url(http://domena/stylzewnetrzny.css);
	</STYLE>
•	Możliwość importu wielu arkuszy stylów równocześnie -  pierwszeństwo ma ostatnia
•	Możliwość uzupełniania importowanego stylu innymi deklaracjami - nawet w tym samym bloku <STYLE> 
Priorytet stylu CSS
•	Priorytet ważności stylów (pierwszeństwo) jest następujący (kolejno od góry): 
•	Styl lokalny (inline) 
•	Bloki wydzielone (DIV) oraz rozciąganie stylu (SPAN)
•	Wewnętrzny arkusz stylów 
•	Zewnętrzny arkusz stylów oraz import arkusza stylów 
•	Pierwszeństwo w oddziaływaniu ma wyższa pozycja na przedstawionej liście (to zapewnia kaskadowość stylów)
•	Możliwe jest wymuszenie zmiany kolejności znacznikiem !important:
st1 { color: red !important; font-size: 10pt; }
CSS - wybrane style (I)
•	 !important - ważna deklaracja styli 
•	 active - właściwości naciskanych odnośników 
•	 after - wstawia za elementem dowolną zawartość 
•	 background-attachment - przewijanie graficznego tła 
•	 background-color - kolor tła 
•	 background-image - adres tła graficznego 
•	 background-position - położenie tła graficznego 
•	 background-repeat - powtórzenie tła graficznego 
•	 background - właściwości tła 
•	 before - wstawia przed elementem dowolną zawartość 
•	 border-bottom-color - kolor dolnej ramki 
•	 border-bottom-style - wygląd dolnej ramki 
•	 border-bottom-width - szerokość dolnej ramki 
•	 border-bottom - właściwości dolnej ramki 
•	 border-color - kolor ramki 
•	 border-left-color - kolor lewej ramki 
•	 border-left-style - wygląd lewej ramki 
•	 border-left-width - szerokość lewej ramki 
•	 border-left - właściwości lewej ramki 
•	 border-right-color - kolor prawej ramki 
•	 border-right-style - wygląd prawej ramki 
•	 border-right-width - szerokość prawej ramki 
•	 border-right - właściwości prawej ramki 
•	 border-style - styl i wygląd ramki 
•	 border-top-color - kolor górnej ramki 
•	 border-top-style - wygląd górnej ramki 
•	 border-top-width - szerokość górnej ramki 
•	 border-top - właściwości górnej ramki 
•	 border-width - szerokość ramki 
•	 border - właściwości ramki 
•	 bottom - odległość od dolnej krawędzi 
•	 caption-side - położenie tytułu tabeli 
CSS - wybrane style (II)
•	 color - kolor tekstu 
•	 content - określa tworzenie zawartości dokumentu 
•	 cursor - wygląd kursora 
•	 direction - kierunek wyświetlania tekstu 
•	 display - sposób wyświetlania elementu 
•	 empty-cells - typ obramowania pustych komórek tabeli 
•	 first-child - właściwości pierwszego elementu w hierarchii 
•	 first-letter - właściwości pierwszej litery elementu 
•	 first-line - właściwości pierwszej linii elementu 
•	 float - kierunek oblewania elementu 
•	 focus - właściwości elementu aktualnie używanego 
•	 font-family - rodzaj oraz rodzinę czcionki 
•	 font-size-adjust – proporcje (szer./wys.) znaku 

•	 font-size - wielkość czcionki 
•	 font-stretch - rozstrzelenie liter 
•	 font-style - styl czcionki 
•	 font-weight - grubość (wagę) czcionki 
•	 font - właściwości czcionki 
•	 height - wysokość elementu 
•	 hover - właściwości odnośników pod kursorem
•	 left - odległość od lewej krawędzi 
•	 letter-spacing - odstępy pomiędzy literami 
•	 line-height - odstęp pomiędzy liniami 
•	 link - właściwości nie odwiedzonych odnośników 
•	 list-style-image - graficzny znak wypunktowania listy 
•	 list-style-position - pozycję znaku wypunktowania listy 
•	 list-style-type - typ listy 
•	 list-style - właściwości listy 

CSS - wybrane style (III)
•	 margin-bottom - wielkość dolnego marginesu 
•	 margin-left - wielkość lewego marginesu 
•	 margin-right - wielkość prawego marginesu 
•	 margin-top - wielkość górnego marginesu 
•	 margin - wielkość marginesu 
•	 max-height - maksymalną wysokość elementu 
•	 max-width - maksymalną szerokość elementu 
•	 min-height - minimalną wysokość elementu 
•	 min-width - minimalną szerokość elementu 
•	 orphans - minimalną ilość wierszy na końcu strony 
•	 outline-color - kolor obramowania 
•	 outline-style - styl i wygląd obramowania 
•	 outline-width - szerokość obramowania 
•	 outline - właściwości obramowania 

•	 padding-bottom - wielkość dolnego dopełnienia 
•	 padding-left - wielkość lewego dopełnienia 
•	 padding-right - wielkość prawego dopełnienia 
•	 padding-top - wielkość górnego dopełnienia 
•	 padding - wielkość dopełnienia 
•	 play-during - dźwięk w tle 
•	 position - sposób określenia współrzędnych elementu 
•	 right - odległość od prawej krawędzi 
•	 size - wielkość i orientację strony dokumentu 
•	 table-layout - algorytm rozmieszczania komórek tabeli 

CSS - wybrane style (IV)
•	 text-align - wyrównanie poziome tekstu 
•	 text-decoration - wygląd tekstu 
•	 text-indent - wcięcie pierwszej linii elementu 
•	 text-shadow - cień dla tekstu 
•	 text-transform - wielkość liter (małe/duże)
•	 top - odległość od górnej krawędzi 
•	 vertical-align - wyrównanie w pionie 
•	 visibility - widoczność elementu 
•	 visited - właściwości odwiedzonych odnośników 
•	 white-space - sposób wyświetlania białych znaków 

•	 widows - minimalną ilość wierszy na początku strony 
•	 width - definiuje szerokość elementu 
•	 word-spacing - odstępy pomiędzy wyrazami 
•	 z-index - kolejność ułożenia elementów na stosie

DHTML - warstwy (I)
•	Znaczniki definiowania warstwy:
		<div> treść warstwy </div>
•	Rozróżnianie poprzez identyfikatory:
		<div id=”warstwa1”> treść warstwy </div>
•	Ważniejsze style, definiowanie dla warstwy
•	formatowanie pozycji, np.:	position:absolute
•	pozycja, np:	 		left: 900px; top: 300px;
•	wielkość, np.:			width: 260; height: 100px;
•	kolejność, np.: 	 	z-index: 1
•	czy widoczna, np.: 	 	visibility:hidden
DHTML - warstwy (II)
•	Przykład zdefiniowania warstwy:
<div style="position: absolute; width: 100; height: 100px; z-index: 1; left: 61px; top: 70px; visibility:visible" id="layer1">
	Tu jest treść warstwy
</div>
•	Zarządzanie warstwami z poziomu skryptu daje możliwość stworzenia wielu efektów aktywności strony WWW - wyłącznie po stronie klienta
•	Prezentacja kodu #1
•	Prezentacja kodu #2

XHTML
•	Extensible Hypertext Markup Language
•	Kontynuacja HTML (po wersji 4.01)
•	HTML został znormalizowany aby mógł być zgodny z językiem XML, który określa zasady tworzenia innych języków używanych w elektronicznych publikacjach
•	Uporządkowanie HTML pod kątem składni, przestrzeni nazw i zawartości
•	Możliwość łatwego wprowadzania nowych elementów i atrybutów - rozszerzenia

XML
•	XML - Extensible Markup Language
•	Język znaczników umożliwiający, tworzenie swoich własnych znaczników formatujących w tzw. schematach XML
•	Model dokumentu jako drzewa z węzłami - elementami i liśćmi - polami tekstowymi 
•	Metajęzyk, czyli klasa języków zwanych zastosowaniami XML
•	Do definiowania zastosowań danego dokumentu XML służy blok DTD (Document Type Definition) - część standardu XML.

XML, warstwy 
dokumentu (I)
•	Dokument XML można interpretować na różnych poziomach abstrakcji (warstwach):
•	Warstwa logiczna - treść zasadnicza:dokument jest drzewem, w którym występują węzły elementów i węzły tekstowe (liście). Składniki:
•	Element - ma swoją nazwę, może posiadać dzieci (elementy lub węzły tekstowe),
•	Atrybut - jest identyfikowany przez nazwę, jego wartością jest tekst

XML, warstwy
 dokumentu (II)
•	Warstwa logiczna - treść pomocnicza: dodatkowe typy węzłów, w których zapisywane są informacje nie będące właściwą treścią dokumentu
•	Instrukcje przetwarzania (processing instructions) - dodaktowe informacje skierowane do programów odczytujących dany dokument,
•	Komentarze.
•	Warstwa fizyczna - encje: spójne ciągi znaków i definiowane do nich referencje. 5 encji predefiniowanych:
& = &amp; < = &lt; > = &gt; " = &quot; ' = &apos;
DTD może definiować kolejne

XML, przykład
•	<?xml version="1.0" encoding="iso-8859-2"?>
•	<!-- Komentarz-->
•	<element>
•	  <?instrukcja parametr="Wartosc"?>
•	  <podelement atrybut="Wartosc">
•	    Zawartosc tekstowa <elem> tresc elementu</elem>
•	    <element_nie_zamykany_tagiem atrybut="wartosc"/>
•	  </podelement>
•	  Referencja do znaku: &#082;
•	  <![CDATA[w < 12 & y > 23]]>
•	</element>

XHTML - wymagania (I)
•	Dokumenty XHTML muszą spełniać ograniczenia podane w DTD (Document Type Definition - Definicja Typu Dokumentu).
•	Elementem podstawowym (root) w dokumencie musi być HTML.
•	Element podstawowy (HTML) musi zawierać deklarację xmlns identyfikującą przestrzeń nazw XHTML, która stanowi zbiór nazw używanych w dokumencie jako typy elementów i nazwy atrybutów:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 

XHTML - wymagania (II)
•	Dokument musi zawierać odpowiednią definicję DTD określającą reguły języka:
•	Strict (sztywna): 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
•	Transitional (“z odstępstwami”)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> 
•	Frames (dokument segmentowany w ramkach)=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
XHTML - przykład poprawnego dokumentu
•	<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 			Transitional//EN" "DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<title>Tytuł strony</title> 
	</head> 
	<body> 
		<p>Przykładowy akapit</p> 
	</body> 
</html> 

XHTML - dalsze reguły (I)
•	Zagnieżdżanie - w języku XHTML jest ściśle wymagana prawidłowa kolejność otwierania i zamykania tagów. 
•	Zamykanie znaczników - każdy znacznik musi być zamknięty, nawet jeżeli nie ma znaczników zamykających - metoda na nie zamykane znaczniki HTML: <br> zapisać jako <br /> itp..
•	Wielkość liter - wszystkie elementy i atrybuty muszą być zapisywane z małych liter.
•	Cudzysłów - wszystkie atrybuty muszą być zapisane w cudzysłowach, czyli <tr align=top> należy zapisać jako <tr align=“top”>
XHTML - dalsze reguły (II)
•	Brak atrybutów pustych - wszystkim atrybutom w tagach muszą być przypisane wartości. <element atrybut> należy zapisać jako <element atrybut =”atrybut”>
•	Encje XML - nie jest możliwe otwarte stosowanie znaków specjalnych zbieżnych z encjami XML, czyli: 
& = &amp; < = &lt; > = &gt; " = &quot; ' = &apos;
•	Atrybut ID - powinien całkowicie wyprzeć stosowanie atrybutu name dla identyfikacji obiektów

XHTML - dalsze reguły (III)
•	Skrypty - definiowane są w sekcji XML CDATA:
<script language="javascript"> 
	<![CDATA[ 
		tutaj treść skryptu
	]]> 
</script> 
•	Nie wolno zagnieżdżać (umieszczać jeden w drugim) następujących znaczników: a, pre, button, label, form
•	Wartości atrybutów domyślnych są zawsze definiowane małymi literami. Na przykład jeśli nie podamy jawnie atrybutu type dla znacznika input, zostanie dla niego przyjęta wartość type="text", a nie type="TEXT".
XHTML - dołączanie arkuszy stylów (I)
•	Zewnętrzne arkusze - dołączane poprzez formułę:
	<?xml-stylesheet href=”plik.css" type="text/css"?>
•	Wewnętrzne - konieczność zapowiedzi arkusza formułą:
	<?xml-stylesheet href="#styl" type="text/css"?>
a następnie - tworzone w definicji:
	<style type="text/css" id=”styl">
		 styl1 {
			color: red;
			font-weight: bold;
		}
	</style>

XHTML - dołączanie arkuszy stylów (II)
•	Przykład:
<?xml-stylesheet href=”plik.css" type="text/css"?>
<?xml-stylesheet href="#styl" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
	<head>
		<style type="text/css" id=”styl">
			code {color: red;font-weight: bold;}
		</style>
	</head>
	<body>
		<p>
			<code> To jest tekst typu styl1</code>.
		</p>
	</body>
</html>

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">
•	document.write("'<a href=\"#\"  	     		   onClick=\"bookmarkit()\"> Dodaj Google do ulubionych jako 'X'</a>")
•	function bookmarkit(){ window.external.addFavorite('http://www.google.pl','X')
•	}
•	</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;}
•	}
Dźwięk w apletach
•	Ładowanie:
•	AudioClip sound = null;
•	sound = getAudioClip( getDocumentBase(), ”plik1.au");
•	Uruchomienie
•	sound.play(); 
•	Zatrzymanie:
•	sound.stop();

Obiekty składujące dane
•	Klasy i interfejsy służące do szeregowania obiektów w kolekcjach
•	Collection, Set, List, Map, SortedSet, SortedMap, HashSet, TreeSet, ArrayList, LinkedList, Vector, Collections, Arrays, AbstractCollection

Ładowanie plików w aplecie przez HTTP
•	 public Vector loadURLLineFile(String fileName) {
•	   	try {
•			Vector v = new Vector();
•		    	URL url = new URL(getCodeBase() + fileName);
•			URLConnection urlCon = url.openConnection();
•	  		urlCon.setUseCaches(true);
•		 	BufferedReader d = new BufferedReader(new  	 		InputStreamReader(urlCon.getInputStream())); 
•		        	String tmp = d.readLine();
•		        	while(tmp != null) {
•		           		v.addElement(new String(tmp));
•		          		tmp = d.readLine();
•			}
•	 		return v;
•	 	} catch(Exception e) { return null; }
•	}

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  ...
•	 	}
•	}

Obsługa zdarzeń 
- model delegacyjny (I)
•	Polega na rozszerzeniu danej klasy o implementację interfejsu tzw. klasy nasłuchującej
•	Zdefiniowano szereg interfejsów, pozwalających na nasłuch pod kątem wystąpienia określonego typu zdarzeń
•	Przykład deklaracji klasy implementującej interfejs nasłuchujący:
	public class Aplet1 extends Applet 
	implements ActionListener{ .....}

Obsługa zdarzeń 
- model delegacyjny (II)
•	Programowanie obsługi zdarzeń wymaga następujących kroków (przykład dla ActionListener):
•	Deklaracja klasy implementującej interfejs:
•	public class Aplet1 extends Applet implements ActionListener
•	Rejestracja źródeł zdarzeń (np. formatek) w klasie implemetującej interfejs:
•	formatka.addActionListener(this); 
•	Implementacja wszystkich metod danego interfejsu:
•	public void actionPerformed(ActionEvent e)
•	{
•		// obsługa zdarzenia
•	}
Obsługa zdarzeń 
- model delegacyjny (III)
•	Obsługa zdarzeń - jeżeli zostało zarejestrowane tylko jedno źródło danego typu zdarzenia można od razu przejść do jego obsługi, w innym przypadku często trzeba ustalić który z zarejestrowanych obiektów jest faktycznym źródłem zdarzenia:
•	public void actionPerformed(ActionEvent e)
•	{
•	 	if (e.getSource() == formatka1)
•	 	{
•	 		// obsługa zdarzenia na formatka1
•	 	}
•		
•	}

Interfejsy nasłuchujące (I)
Interfejsy nasłuchujące (II)
Interfejsy nasłuchujące (III)
Implementacja interfejsu nasłuchującego
•	Przykład klasy z Canvas i interfejsu MouseListener:
•	import java.awt.*;
•	import java.awt.event.*;
•	public class MCanvas extends Canvas implements MouseListener
•	{
•			public void mouseClicked(MouseEvent e){;}
•			public void mouseEntered(MouseEvent e){;}
•			public void mouseExited(MouseEvent e){;}
•			public void mousePressed(MouseEvent e){;}
•			public void mouseReleased(MouseEvent e){;}
•			public MCanvas()
•			{
•				this.addMouseListener(this);
•			}
•	}
Przeciążanie metod obsługujących zdarzenia
•	Przykład rozszerzający poprzednią klasę MCanvas:
•	import java.awt.*;
•	import java.awt.event.*;
•	public class ChildCanvas extends MCanvas
•	{
•			public ChildCanvas(){;}
•			public void mousePressed(MouseEvent e)
•			{
•				int x = e.getX();
•				int y = e.getY();
•				Graphics g = this.getGraphics();
•				// ... obsługa zdarzenia z dostępem 
•	 			// do funkcji graficznych
•			}
•	}
Ograniczenia apletu (I)
•	Ograniczenia dotyczą przede wszystkim bezpieczeństwa systemu klienta, w którym wykonywany jest osadzony aplet:
•	Aplety mogą używać tylko swego własnego kody Javy oraz elementów Java API.
•	Aplety nie mogą w zwykły sposób czytać i zapisywać plików na komputerze, na którym są uruchomione. Posiadają jedynie dostęp do plików swojego serwera macierzystego, zgodnie z polityką zabezpieczeń tego serwera.

Ograniczenia apletu (II)
•	Ograniczenia (cd):
•	Aplety nie mogą tworzyć połączeń sieciowych (np. TCP) z hostem innym niż serwer macierzysty. Jeżeli istnieje taka konieczność niezbędne jest napisanie aplikacji pośredniczącej, działającej się na hoście macierzystym.
•	Aplety mają ograniczony dostęp do informacji o systemie w którym zostały uruchomione.
•	Aplety nie mogą uruchamiać żadnych programów w systemie w którym zostały uruchomione.

Dodatki funkcjonalne do apletu
•	Aplet posiada dodatkowe możliwości, których nie posiada aplikacja. Możliwości te dostarcza przeglądarka WWW:
•	Odtwarzanie dźwięków z użyciem kodeków przeglądarki: klasa AudioClip 
•	Wyświetlanie dokumentów HTML, metoda:getAppletContext().showDocument()
•	Dostęp do klas publicznych innyh apletów osadzonych w tej samej stronie WWW, 
metoda getAppletContext().getApplet()

Java - programowanie obiektowe, przypomnienie
•	Klasa - wzorzec do tworzenia nowych obiektów i innych klas
•	Struktura hierarchiczna deklaracji klas,
•	Prefiksowanie klas ("dziedziczenie”) - umożliwia tworzenie hierarchii typu:ogół - szczegóły
•	Deklaracja klasy:
[modyfikatory] class NazwaKlasy 
[extends NazwaNadklasy] 
[implements NazwyInterfejsów] { //ciało klasy// }

Java - składowe klas (I)
•	Pola danych klasy:
•	modyfikator_Pola typ_Pola nazwa_Pola;
•	Metody klasy:
•	modyfikator_Metody typ_Wyniku nazwa_Metody (lista_Parametrow);

Java - modyfikatory klas, metod, pól (I)
•	Dostęp:
•	public - wszystkie klasy mają dostęp 
•	private - dostęp posiadają jedynie inne metody tej samej klasy, 
•	protected - dostęp mają jedynie metody tej samej klasy oraz metody wszystkich klas pochodnych, 
•	package - jest to modyfikator domyślny, dostęp mają wszystkie klasy pakietu

Java - modyfikatory klas, metod, pól (II)
•	Właściwości metod:
•	abstract - metoda abstrakcyjna, do zaimplementowania
•	static - metoda statyczna, wspólna dla wszystkich obiektów klasy
•	final - brak możliwości przesłaniania metody w procesie dziedziczenia
•	synchronized - sekcja krytyczna przetwarzana przez wiele wątkówBłąd! Nieprawidłowy odsyłacz typu hiperłącze.
Java - modyfikatory klas, metod, pól (III)
•	Właściwości pól:
•	final - wartość pola może zostać przypisana tylko podczas tworzenia obiektu 
•	static - pole wspólne dla wszystkich obiektó klasy
•	volatile - zezwolenie na asynchroniczną modyfikację w różnych wątkach 

Klasa lokalna
•	Definiowana bezpośrednio w bloku kodu
•	Ma dostęp do zasobów widocznych z tego bloku kodu
•	Definiowane obiekty mogą być wyłącznie lokalnymi w bloku
•	Przykład:
•	class Cl1
•	{
•		void metoda()
•		{
•			class Lokalna
•			{ }
•			Lokalna l = new Lokalna();
•		}
•	}
Klasa anonimowa
•	Definiowana za pośrednictwem wywołania konstruktora (definicja od razu tworzy jeden potrzebny obiekt)
•	public class Cl1 
•	{
•	 	private Cl2 cl2; 
•	 	metoda() { 
•	 		this.cl2 = new Cl2() {
•	 		 	public void metoda(int i) {
•	 		 	}
•	 		}  //Cl2
•	 	} }
Klasa wewnętrzna
•	Zdefiniowana obok pól i metod w innej klasie
•	Posiada dostęp do składowych prywatnych klasy zewnętrznej
•	Przykład:
•	public class Cl1 
•	{
•	 		class Cl2
•	 	 	}
•	}
•	Tworzenie obiektu spoza klasy zewnętrznej:
•	obiektCl1.new Cl2(arg, arg, ...)
Słowo kluczowe this 
•	Oznacza referencję do "samego siebie", czyli do obiektu właściwego dla źródła wywołania
•	Typowy przykład zastosowania - kolizja nazw zmiennych:
•	public class Cl1{ 
•	 	public int X; 
•		public Cl1(int X) 
•	 	{ 
•	 		this.X=X; 
•		} 
•	}

Konstruktor kopiujący
•	Stosowany do duplikowania obiektów
•	Wywołanie
•	public class Cl1{ 
•	 		int X;
•	 		Cl1(Cl1 dane)
•	 	 	{
•	 			X = dane.X;
•	 		}
•	}
•	Użycie:
•	ob1 = new Cl2(ob2); 

Inicjator static
•	Służy do inicjalizacji danych statycznych
•	Definiuje wartości zmiennych statycznych gdy nie utworzono jeszcze żadnego obiektu
•	class Cl1 { 
•	 		static Cl2 dane[] = new Cl2[10]; 
•	 		static 
•	 		{ 
•	 			for (byte i = 0; i <10; i++) 
•	 				 dane[i] = new Cl2(); 
•	 		}
•	}

Słowo kluczowe super 
•	Gwarantuje dostęp do metod zdefiniowanych przez nadklasę i przesłoniętych w procesie specjalizacji klasy wydziedziczonej
•	Przykład:
•	class Cl1 { 
•	 		public void metoda(){}
•	}
•	class Cl2 extends Cl1 { 
•	 		public void metoda(){
•	 			super.metoda(); 		
•	 		}
•	}

Usuwanie obiektów
•	Automatyczne - garbage collector
•	Możliwość sterowania usuwaniem obiektu danej klasy (np. konieczność zamykania strumieni komunikacyjnych obiektu) poprzez zdefiniowanie w tej klasie specjalnej metody składowej o nazwie finalize() - odpowiednik destruktora z C++
•	Możliwość wymuszenia przeprowadzenia sesji garbage collector’a poprzez wywołanie metody: System.gc();
Metoda finalize - przykład
•	Obiekty poniższej klasy będą wymagały zamknięcia blokowanych plików przed ich usunięciem:
•	class PlikEditor
•	{
•		FileInputStream m_plik = null;
•		openPlik(String nazwa) 
•		{
•		 	try { 
•	 		 	m_plik = new FileInputStream(nazwa); } 
•		 	catch (java.io.FileNotFoundException e) { }
•		} // open
•	 	protected void finalize () throws Throwable 
•	 	{
•		 	if (m_plik != null) 
•		 	{
•			 	m_plik.close();
•			 	m_plik = null;
•		 	}
•	 	} // filnalize
•	} //class

Klasa abstrakcyjna
•	Zadeklarowana słowem kluczowym abstract
•	Każda klasa posiadająca przynajmniej jedną metodą abstrakcyjną lub nie implementująca metod abstrakcyjnych dziedziczonych z nadklasy, musi być zadeklarowana jako klas abstrakcyjna
•	Przykład:
•	abstract class Cl1
•	{
•			void metoda1(int X){}
•			abstract void metoda2();
•	}	

Użycie klasy abstrakcyjnej
•	Należy zdefiniować klasę dziedziczącą z klasy abstrakcyjnej i implementującą wszystkie jej metody abstrakcyjne. Wtedy możliwe będzie tworzenie instancji takiej klasy.
•	Dla poprzedniego przykładu:
•	class Nowa extends Cl1
•	{
•			private byte dane;
•			void metoda2()
•			{
•				//instrukcje
•			}
•	}

Interfejs
•	Interfejs to kolekcja metod abstrakcyjnych
•	Może być publiczny lub prywatny
•	Składnia definicji interfejsu: 
•	[modyfikator] interface nazwa [extends listaInterfejsów] { ... }
•	Opisuje zbiór właściwości, które klasa musi implementować
•	Może dziedziczyć z innych interfejsów, ale nie może dziedziczyć z klas
•	Każda klasa, która implementuje interfejs, musi posiadać definicję wszystkich metod zadeklarowanych w interfejsie

Przykład - interfejs klasy (I)
•	Słowo kluczowe “interface’
•	Deklaracja podobna do deklaracji klasy

•	interface Licznik 
•	{
•	  		int liczbaMax = 200;
•		 	void dodaj(int ile);
•			int policz();
•	}

Przykład - interfejs klasy (II)
•	Implementacja klasy:
•	class Zliczanie implements Licznik
•	{
•		private int licznik = 0;
•		private int suma = 0;
•		public void dodaj(int ile)
•		{
•			if (licznik < liczbaMax) {
•	 			licznik++;
•	 			suma += ile;
•		}
•		public int policz()
•		{
•			return suma;
•		}
•	}

Przykład - interfejs klasy (III)
•	Użycie klasy implementującej interfejs:
•	class ZliczanieTest {
•	 	public static void main(String[] args) throws Exception
•	 { 
•	 		Zliczanie l = new Zliczanie(); 
•	 		l.dodaj(5); 
•	 		l.dodaj(7); 
•	 		System.out.println("Zliczono: "+l.policz()); 
•	}

Obsługa wyjątków (I)
•	Wyjście z sytuacji krytycznych z hierarchicznym odróżnieniem przyczyny.
•	Klasy wyjątku, w nich mechanizm dziedziczenia.
•	Klasy wyjątku dziedziczą z interfejsu Throwable (“rzucalny”).
•	Specjalna podklasa wyjątków to RunTimeException (wyjątki występujące podczas wykonania programu, związane np. z wyczerpaniem zasobów, niewłaściwym odwołaniem do obiektu itd.).
Generowanie wyjątków
•	Tworzone wewnątrz metody, która będzie “rzucała wyjątki”:
•	class Pamiec
•	{
•			int pamiec = 0;
•			int zapamietaj(float i) throws Exception
•			{
•				if (i > 3)
•					throw new Exception("Liczba za duza");
•				if (i < -3)
•					throw new Exception(”Liczba za mala");
•	 			pamiec = i;
•				return; 
•			}
•	}

Przechwytywanie wyjątków (I)
•	Dostęp do przechwytywanego obiektu wyjątku:
•	try { ... } 
catch (Exception e){
•	 		e.? // <- wywoływanie metod wyjątku
•	}
•	Przydatna metoda klasy Exception:
 printStackTrace(); - wypisanie stosu wywołań metod

Przechwytywanie wyjątków (II)
•	Przykład przechwycenia wyjątku z metody klasy Pamiec:
•	static public void main(String args[]) throws Exception
•	{
•			Pamiec p = new Pamiec();
•			try
•			{ 
•	  			liczba.zapamietaj(-10);
•			}
•			catch (Exception e)
•			{
•	 			e.printStackTrace(); 
•	 		}
•	}

Bloki obsługi wyjątków (I)
•	Można wyróżnić następujące bloki:
•	try - blok instrukcji gdzie może wystąpić wyjątek 
•	catch (<Obiekt Implementujacy Interfejs Throwable> nazwa) - blok instrukcji obsługujących wystąpienia sytuacji wyjątkowej. Jest wykonywany tylko, gdy wystąpi wyjątek typu takiego jak typ zmiennej będącej parametrem bloku catch
•	finally - blok opcjonalny. Jest wykonywany przed opuszczeniem sterowania, nawet jeśli blok try zawiera instrukcję return lub spowodował wystąpienie wyjątku

Bloki obsługi wyjątków (II)
•	Przykład:
•	try
•	{ 
•			//blok instrukcji gdzie może wystąpić wyjątek 
•	}
•	catch (IOException  e1) { 
•	}
•	catch (Exception e2) {
•	} 
•	finally { 
•	 		// dalsze instrukcje	
•	}

Wielokrotne bloki catch
•	Należy uważać na kolejność bloków - wywołany będzie pierwszy jaki pasuje do wyjątku (także ten z przechwytywanym obiektem nadklasy):
•	try
•	 	{	...	}
•	catch (Exception e)
•	 	{	... 	}
•	catch (SpecException1 e1)
•	 	{	... 	}
•	catch (SpecException2 e2)
•	 	{	... 	}
Definiowanie klasy wyjątków (I)
•	Przykład definicji klasy:
•	class NowyWyjatek extends Exception 
•	{
•			NowyWyjatek() 
•			{
•	 		}
•			NowyWyjatek(String s) 
•			{ 
•				super(”Tekst z naszego wyjątku” + s); 
•			}
•	}

Definiowanie klasy wyjątków (II)
•	Metoda generująca wyjątek
•	int wygeneruj() throws NowyWyjatek { 
•	 		throw new NowyWyjatek("Test sie powiodl");
•	}
•	Przechwytywanie wyjątku:
•	try { 
•	 		wygeneruj(); 
•	}
•	catch (Exception e) {
•	 		System.out.println(”Wystapil wyjatek: " + e.getClass()  		+ "\n Z informacja: " + e.getMessage());
•	} 

Tablice (I)
•	Są obiektami (podklasa klasy Object)
•	Pole length informuje o długości tablicy
•	Deklaracja (dwa sposoby) nie definiuje tablicowanych obiektów i nie alokuje dla nich pamięci:
•	int Tab[];
•	int[] Tab;
•	Deklaracja z zadaną długością:
•	Tab = new int[10]; 
•	Możliwa bezpośrednia definicja zawartości:
•	int Tab[] = {1, 2, 3};

Tablice (II)
•	Tablice obiektów - konstrukcja i wypełnianie:
•	Cl1 Tab[] = new Cl1[20]; 
•	for (int i = 0; i < 20; i++ )
•	{
•			Tab[i] = new Cl1(); 
•	}
•	Tablice wielowymiarowe (tablice kolejnych tablic): 
•	Cl1 Tab[][] = new Cl1[10][];
•	for(int i = 0; i < 10; i++)
•	{
•			Tab[i] = new Cl1[10];
•			for(int j = 0; j < 10; j++)
•				Tab[i][j] = new Cl1();
•			
•	}
Programowanie wielowątkowe
•	Program może składać się z wielu przepływów sterowania, zwanych wątkami (ang. thread). 
•	Program wielowątkowy definiujemy, na dwa sposoby: 
•	jako podklasę klasy Thread; 
•	implementując interfejs Runnable. 
•	Każdy wątek ma początek, sekwencje instrukcji i koniec. 
•	Wątek nie jest niezależnym programem, jest wykonywany jako część programu. 

Wątek jako rozszerzenie klasy
•	Wątek tworzymy rozszerzając klasę java.lang.Thread
•	Zaleta: bezpośredni dostęp do wszystkich metod kontrolujących wątek, zdefiniowanych w klasie Thread. 
•	Wątki są uruchamiane jako instancje rozszerzonej klasy thread. 
•	Na bazie jednej klasy można uruchomić wiele wątków.
•	Przeciążenie metody run() umożliwia zdefiniowanie ciała wykonawczego wątku.

Wątek jako rozszerzenie klasy - przykład (I)
•	class Watek extends Thread 
•	{
•		int ktory = "";
•		public Watek(int ktory) 	{
•			this. ktory = ktory;
•		}
•		public void run() {
•			for (int i = 0; i < 100; i++) {
•				try {
•	 				 sleep( (int)(Math.random() * 1000) ); }
•				catch ( InterruptedException e ) 
•				{ e.printStackTrace(); }      
•	 		} // for
•			System.out.println("" + ktory);
•		} // run
•	} //class

Wątek jako rozszerzenie klasy - przykład (II)
•	Użycie klasy Watek:
•	class ProgramWielowatkowy 
•	{
•		 	public static void main (String[] args) throws Exception
•		 	{
•		 		new Watek(1).start();
•	 			new Watek(2).start();
•			 	new Watek(3).start();
•		 	}
•		}
Wątek jako implementacja interfejsu - przykład (I)
•	Interfejs Runnable ma tylko jedną metodę: run
•	class Watek2 extends java.applet.Applet implements Runnable
•	{
•	 		int ktory = "";
•		 	public Watek2(int ktory) 	{
•				this. ktory = ktory;
•		 	}
•	 	 	public void run()
•		 	{
•			 	//analogicznie - ciało metody run
•		 	}
•		
•	}

Wątek jako implementacja interfejsu - przykład (II)
•	Użycie klasy Watek2:
•	class ProgramWielowatkowy2 
•	{
•		 	public static void main (String[] args) throws Exception
•		 	{
•		 		Watek2 w1 = new Watek2(1);
•	 			new Thread(w1).start(); 
•		 		Watek2 w2 = new Watek2(2);
•	 			new Thread(w2).start(); 
•		 	}
•		}

Stany wątku (I)
•	Utworzony -> Wykonywany: start()
•	Wykonywany -> Wstrzymany: sleep(), suspend(), wait()
•	Wstrzymany -> Wykonywany
•	Wykonywany -> Zakończony: stop() lub koniec run()
•	Wstrzymany -> Zakończony: stop()
•	Utworzony -> Zakończony: stop()
Stany wątku (II)
•	Wątek może wstrzymać wykonanie gdy:
•	wywołano jego metodę sleep, 
•	wywołano jego metodę suspend, 
•	wątek wykonuje swoją metodę wait, 
•	wątek jest zablokowany przy operacji wejścia / wyjścia (ang. I/O). 
•	Przykład:
•	try 
•	{ 
•	 	Thread.sleep(5000); 
•	}
•	catch (InterruptedException e)
•	{ }

Stany wątku (III)
•	Wyjątek IllegalThreadStateException jest generowany gdy próbujemy wywołać metodę wątku a wątek znajduje się w takim stanie, który nie pozwala na wywołanie tej metody
•	Metoda isAlive() - zwraca wartość true, gdy wątek został uruchomiony a nie został jeszcze zakończony
•	Priorytet wątku jest liczbą typu integer o wartości większej lub równej MIN_PRIORITY i niewiększej niż MAX_PRIORITY. Te dwie wartości definiowane są odpowiednio na 1 i 10. 

Grupowanie wątków (I)
•	Klasa Thread ma trzy konstruktory pozwalające ustawić nową grupę wątków: 
•	public Thread(ThreadGroup grupaWatkow, Runnable target) 
•	public Thread(ThreadGroup grupaWatkow, String name) 
•	public Thread(ThreadGroup grupaWatkow, Runnable target, String name)
•	Przykład:
•	ThreadGroup grupa1 = new ThreadGroup(”Grupa watkow");  
•	Thread Watek1 = new Thread(grupa1, "watek w grupie");

Grupowanie wątków (II)
•	Rozpoznanie grupy:
•	grupa = watek1.getThreadGroup(); 
Wynikiem wykonania tej metody jest referencja do obiektu reprezentującego grupę wątków
•	Sterowanie grupą:
•	grupa.suspend();
•	Obiekt klasy ThreadGroup może zawierać nie tylko wątki ale także inne obiekty klasy ThreadGroup (struktura hierarchiczna)

Wątki w apletach
•	Mechanizm obsługi zdarzeń w aplecie, ładowanie grafik, metody paint(), update() są realizowane z założenia przez osobne często współbieżnie wykonywane wątki.
•	Wątki są często wykorzystywane do tworzenia animacji, nie blokującej wykonania programu komunikacji w sieci, wykonywania obliczeń w tle, odmierzania czasu itp.
•	Przykład realizacji grafiki z wątków wymaga współdzielonego dostępu do kontekstu graficznego z metody run() 

Wątki w apletach - przykład 
•	public class Punkty extends Applet 
•	{
•		Thread watek1, watek2;	
•		public void start() {
•			try {
•				Rysuj r1 = new Rysuj(this, 100,10);
•				watek1 = new Thread(r1);
•				watek1.start();
•				Rysuj r2 = new Rysuj(this, 100, 100);
•				watek2 = new Thread(r2);
•				watek2.start();
•			}
•			catch (Exception e) { e.printStackTrace(); }
•		}
•	}

Wątki w apletach - przykład (cd)
•	class Rysuj implements Runnable
•	{
•		static int randomSeek = 0; 
•		Random rand = new Random(randomSeek+=10);	
•		Punkty parent  = null;
•		int x,y;
•		Rysuj(Punkty p, int x, int y) {
•			parent = p; this.x = x; this.y = y;
•		}
•		public void run() {
•			while (true) {
•				try {Thread.sleep(100);} 
•				catch (InterruptedException e){}
•				Graphics g = parent.getGraphics();
•				g.setColor(Color.black);
•				g.drawLine(x, y, rand.nextInt(), rand.nextInt());     
•	 			g.dispose();
•			}       
•		}   
•	}

Komunikacja w sieci - klient-server
•	Pakiet narzędzi: java.net
•	Komunikacja TCP/IP: Rozróżnienie na klasy gniazda serwera i klienta:
•	ServerSocket
•	Socket
•	Uproszczony schemat programu serwera:
•	Założenie gniazda serwera (z podaniem do konstruktora numeru portu TCP)
•	Nasłuch - wywołanie blokującej wykonanie metody accept()
•	Po zgłoszeniu się klienta utworzenie strumieni z użyciem klasy gniazda klienta (Socket)
•	Po zakończeniu zamknięcie strumieni i dalszy nasłuch

Komunikacja w sieci - przykład serwera (I)
•	public class Server{
•	 	static ServerSocket socket;
•	 	static Socket klient;    
•	 	static BufferedReader net_in;
•	 	static PrintWriter net_out;
•	 	public static void main (String args[]) {
•	 	try {	
•	 	 	socket = new ServerSocket (2222);
•		 	while (true) {	
•	     	 		klient = socket.accept ();
•	     	 		net_in = new BufferedReader (new 							InputStreamReader(klient.getInputStream()));
•	     		 	net_out = new PrintWriter (new 							OutputStreamWriter(klient.getOutputStream())); 	    	
Komunikacja w sieci - przykład serwera (II)
•	 			String s =  net_in.readLine ();
•				System.out.println(klient.getInetAddress().  					getHostAddress()+ ":"+klient.getPort()+": "+s);
•	     			net_out.println ("Przyslales: " + s);
•	     			net_out.flush ();
•	     			net_in.close ();
•	     			net_out.close ();
•	   		}// while
•	 	} catch (IOException e) { System.out.println ("Blad: " + e);}
•	 	} //main
•	}//class

Komunikacja w sieci - przykład klienta (I)
•	class Klient{
•	 	static Socket socket;    
•	 	static BufferedReader net_in;
•	 	static PrintWriter net_out;
•	 	public static void main (String args[]) {
•	 	try {	
•	    		socket = new Socket ("128.0.0.4", 2222);
•	    		net_in = new BufferedReader (new  					InputStreamReader(socket.getInputStream ()));
•	    		net_out = new PrintWriter (new OutputStreamWriter( 				socket.getOutputStream()),true);
•	   		
Komunikacja w sieci - przykład klienta (II)
•	 		net_out.println ("Komunikat klienta");
•	  		net_out.flush ();
•	   		String s = net_in.readLine();
•	   		System.out.println ("Odebrana odpowiedz: " + s);
•	   		net_in.close ();
•	   		net_out.close ();
•	  		socket.close ();
•	 	} catch (IOException e) { System.out.println ("Blad: " + e);}
•	 	} // main
•	}

Model wielowątkowy serwera (I)
•	Klasa netReader - wątek czytający do komunikacji z pojedynczym klientem:
•	public class netReader extends Thread {
•	 	Server s;
•	 	public netReader (Server param) {
•	 		this.s=param;
•	    	}
•	    	public void run () {
•	  		while (true) {
•	         			try {
•	 				s.przetworz (s.net_in.readLine ()); }
•	  	       		catch (IOException e) {
•	          			if (s.connected) s.closeConnection ();
•	 				break;
•	 			} // catch
•	 		}//while
•	  	 } //run
•	}

Model wielowątkowy serwera (II)
•	Użycie klasy netReader:
•	class Server{
•	 	netReader watek [];
•	 	BufferedReader net_in [];
•	 	PrintWriter net_out []; 
•	 	public Server() {
•	 		watek = new Chatreader[NUMBER];
•	 		socket = new ServerSocket (2222);
•	 		while (true) {
•	 			Socket klient = socket.accept ();
•	 			net_in[wolne_miejsce] = new BufferedReader (new 					InputStreamReader(klient.getInputStream()));
•	     		net_out[wolne_miejsce] = new PrintWriter (new 						OutputStreamWriter(klient.getOutputStream())); 
•	 			watek[wolne_miejsce] = new netReader (this);
•	 			watek[wolne_miejsce].start();
•	 		} // while
•	}