http://www.vsl.sk/vyuka/ajax10/
História
Značkovací jazyk HTML ako základ pre World Wide Web vznikol v roku 1991. HTML umožnilo vytvárať
dokumenty s prepojeniami na ďalšie dokumenty a obsahovalo aj jednoducho použiteľné značky a ich
atribúty pre úpravu vzhľadu textu, vkladanie obrázkov, tabuliek a podobne.
V roku 1995 vznikol jazyk JavaScript ako súčasť WWW prezerača Netscape Navigator 2.0. JavaScript
umožnil cez tzv. „Document object model“ dynamickú manipuláciu s prvkami HTML dokumentu
zobrazeného v prezerači. Tým umožnil tvorcom HTML dokumentov doplniť do HTML dokumentu
interaktivitu, t.j. zobrazená stránka mohla reagovať na akcie používateľa. Tvorcovia web stránok
rýchlo zistili ako pomocou skriptu zatraktívniť svoje diela po vizuálnej aj praktickej stránke.
Štandard CGI od roku 1993 umožnil programátorom dynamicky generovať www stránky a
spracovávať dáta z HTML formulárov. Tak vznikali prvé webové aplikácie.
Programovanie na strane prezerača v JavaScripte otvorilo programátorom nové možnosti pre
webové aplikácie. Mohli vytvárať interaktívne formuláre a aj úplne nové formulárové komponenty
vytvorené kombináciou HTML a JavaScriptu.
Ďalšie možnosti pre webové aplikácie priniesli rôzne techniky pre získanie dát zo servera bez potreby
prekreslenia stránky. Princíp týchto techník je v tom, že skriptová funkcia získa na pozadí dáta zo
servera a potom ich vyplní do prvkov, ktoré sú už zobrazené na stránke. Tým odpadá prekresľovanie
celej stránky po jej získaní zo servera a ďalej sa zvyšuje pre používateľa komfort ovládania webovej
aplikácie. Tieto techniky dostali v roku 2005 pekný názov AJAX.
V súčasnosti www prezerače podporujú aj iné skriptovacie jazyky (napríklad Visual Basic) a z druhej
strany JavaScript nie je využívaný už len vo www prezeračoch (ale napríklad aj v MS Office).
http://www.vsl.sk/vyuka/ajax10/
HTML
Štruktúra a vzhľad webovej stránky je popísaná kombináciou dvoch štandardizovaných jazykov:
HTML, značkovací jazyk navrhnutý pre web, ktorý popisuje štruktúru a obsah stránky a CSS,
zovšeobecnený jazyk pre popis štýlov, ktorý určuje vizuálnu stránku stránky.
HTML dokument pozostáva z HTML elementov, ktoré vo všeobecnosti majú tri časti:
1. dvojicu značiek (tagov) elementu, otváracia značka a koncová značka
2. atribúty elementu, ktoré sa zapisujú ako súčasť otváracej značky (nepovinné)
3. obsah elementu medzi otváracou a koncovou značkou
HTML elementom sú značky a všetko medzi nimi. Značky sú ohraničené ostrými zátvorkami.
<tag attribute1="value1" attribute2="value2">content to be rendered</tag>
Meno elementu je použité v značke. V koncovej značke je pred menom lomítko /.
V obsahu HTML elementu môžu byť použité HTML elementy. Celý dokument je element s názvom
html.
Príklad jednoduchého html dokumentu:
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Obsah elementu title bude zobrazený v titulku okna prezeača. Obsah elementu p ako paragraf bode
vypísaný do plochy prezerača ako jednoduchý text v prednastaveným fontom prezerača.
<p bgcolor=’blue’>Hello World!</p>
„Vylepšený“ príklad pridal elementu atribút bgcolor. Historický atribút bgcolor vyjadruje štýl textu
a preto je prekonaný a správne je použiť štýl. Jednoduché použitie štýlu by bolo:
<p style=’backgroung-color: blue’>Hello World!</p>
Pincípom štýlov je však opakované použitie, preto je vhodnejšie definovať štýly pre triedy elementov.
<p class=‘zvyraznenyOdstavec‘>Hello World!</p>
V tomto príklade sme paragraf označili triedou zvyraznenyOdstavec a jeho vizuálne vlastnosti budú
definované inde pomocou kaskádnych štýlov v elemente style alebo pripojené k HTML dokumentu
z externého súboru.
http://www.w3.org/html/wiki/Specifications
http://www.vsl.sk/vyuka/ajax10/
Kaskádne štýly
Pre oddelenie vzhľadu HTML elementov od ich štruktúry a obsahu sa používa štandardizovaný jazyk
štýlov CSS (Cascading Style Sheets).
CSS popisuje štýly použitím pravidiel. Pravidlo je tvorené selectormi a blokom s deklaráciami.
Deklarácia pozostáva z mena vlastnosti (property), dvojbodky, hodnoty vlastnosti a bodkočiarky na
konci.
Selektor určuje skupinu elementov, na ktoré sa uplatní deklarácia hodnôt vlastností z pravidla.
Formálny zápis syntaxe pravidiel:
selector [, selector2, ...][:pseudo-class] {
property: value;
[property2: value2;
...]
}
Príklad z predošlej kapitoly doplnený o definíciu jedného štýlu:
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
<style>
p.zvyraznenyOdstavec {
background-color: blue;
foreground-color: white;
}
</style>
</head>
<body>
<p class=‘zvyraznenyOdstavec‘>Hello World!</p>
</body>
</html>
http://www.w3.org/Style/CSS/
http://www.vsl.sk/vyuka/ajax10/
HTML formulár
HTML formuláre umožňujú jednoducho vyžiadať údaje od používateľa a poslať ich na server. HTML
formulár posiela dáta z HTML elementu input.
Príklad HTML formulára:
<HTML>
<BODY>
<FORM action="/demo/servlets/DemoServlet">
<P><B>Meno</B> <INPUT name="meno">
<P><B>Priezvisko</B> <INPUT name="priezvisko">
<P><INPUT value="Zápis" name="zapisButton" type="submit">
<INPUT name="op" value="pridanie" type="hidden">
</FORM>
</BODY>
</HTML>
Pri stlačení tlačítka „Zápis“ typu „submit“ formulár vyzbiera hodnoty zo vstupných prvkov a pošle ich
na server použitím URL, ktoré je uvedené v atribúte action.
http://www.w3.org/TR/html401/interact/forms.html
http://www.vsl.sk/vyuka/ajax10/
Dynamické HTML
Pre dynamickú manipuláciu s HTML elementmi po ich zobrazení v prezerači vznikol skriptovací jazyk
JavaScript.
<html>
<head>
<title>Hello HTML</title>
<style>
p.zvyraznenyOdstavec {
background-color: blue;
color: white;
}
p.zvyraznenyOdstavec2 {
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
function handleMouseOver(ev, element) {
element.className = "zvyraznenyOdstavec2";
}
function handleMouseOut(ev, element) {
element.className = "zvyraznenyOdstavec";
}
</script>
</head>
<body>
<p onmouseover="handleMouseOver(event, this)"
onmouseout="handleMouseOut(event, this)"
class="zvyraznenyOdstavec">Hello World!</p>
</body>
</html>
http://www.ecma-international.org/publications/standards/Ecma-262.htm
http://www.w3schools.com/jsref/default.asp
https://developer.mozilla.org/en/JavaScript/Reference
http://msdn.microsoft.com/en-us/library/aa155073.aspx
http://www.vsl.sk/vyuka/ajax10/
DOM
Aby mohol skrípt manipulovať s elementmi webovej stránky vznikol objektový model stránky nazvaný
Document Object Model (DOM).
<html>
<head>
<title>Klávesnica</title>
<link rel='stylesheet' href='numkey.css'/>
<script type="text/javascript">
var textFieldElement = null;
function init() {
textFieldElement = document.getElementById("textField");
textFieldElement.value = "";
}
function handleNumberClick(ev, value) {
textFieldElement.value += value;
}
</script>
</head>
<body onload="init()">
<table cellpadding="4" cellspacing="0" style='border-width: 0px;'>
<tr>
<td colspan="3" style="text-align: center;">
<input type="text" id="textField"/></td>
</tr>
<tr>
<td><button onclick="handleNumberClick(event, 1)">1</button></td>
<td><button onclick="handleNumberClick(event, 2)">2</button></td>
<td><button onclick="handleNumberClick(event, 3)">3</button></td>
</tr>
...
<tr>
<td></td>
<td><button onclick="handleNumberClick(event, 0)">0</button></td>
<td></td>
</tr>
</table>
</body>
</html>
https://developer.mozilla.org/en/Gecko_DOM_Reference
http://msdn.microsoft.com/en-us/library/ms533050(v=vs.85).aspx
http://www.vsl.sk/vyuka/ajax10/
AJAX
Objekt XMLHttpRequest umožnil programátorom interaktívnych web stránok jednoducho vykonať
HTTP požiadavku z JavaScriptu a použiť vrátené dáta pre dynamickú zmenu obsahu stránky.
<html>
<head>
<script>
var url;
function sendRequest(mesto) {
var outElement = document.getElementById("output");
if (mesto == ' ') {
outElement.value = "Nevybrali ste žiadne mesto...";
return;
}
outElement.value = "Získavam údaje ...";
url = "http://meteo.azet.sk/predpovede/europa/slovenska_republika/"+mesto;
var http=new XMLHttpRequest();
http.open("GET", url,false);
http.send();
var resp = http.responseText;
var textID = '<span style="display:block;float:left;margin-left:21px;">';
var index = resp.indexOf(textID);
var startPos = index + textID.length;
outElement.value = "Posledne zaznamenaná teplota pre mesto '" + mesto + "': " +
resp.substring(startPos, startPos+4);
}
</script>
</head>
<body>
<select onChange="sendRequest(this.options[this.selectedIndex].value);">
<option value=" " selected="selected"></option>
<option value="kosice">Košice</option>
<option value="bratislava">Bratislava</option>
<option value="zilina">Žilina</option>
</select>
<input type="text" id="output" style="width:500px"/>
</body>
</html>
http://www.w3.org/TR/XMLHttpRequest/
https://developer.mozilla.org/en/XMLHttpRequest
http://msdn.microsoft.com/en-us/library/ms535874(v=vs.85).aspx
Download

História