AJAX. 1 Prvky AJAXu. 2 DOM model na klientovi. 3 Techniky založené na JavaScriptu
|
|
|
- Aneta Marková
- před 5 lety
- Počet zobrazení:
Transkript
1 AJAX Asynchronous JavaScript and XML, jméno AJAX vzniklo v roce 2005 směs již existujících technologií JavaScriptu na straně klienta umožňuje volat v pozadí server a podle potřeby tak získat potřebná data (aktualizace stránek bez nutnosti opětovného načítání celé stránky) klient zasílá http žádost (request) na server, uživatel může pracovat souběžně s rozhraním na klientovi, zatímco server zpracovává jeho požadavek problémy: nefunguje v prohlížečích bez JavaScriptu špatně se vkládají do oblíbených položek špatně spolupracují s vyhledávacími stroji vznik velkého množství nových knihoven vývoj AJAXu podporován Microsoftem v projektu Atlas 1 Prvky AJAXu HTML, XHTML, CSS JavaScript manipulující s částmi HTML stránky pomocí DOM DOM (Document Object Model) = model internetových stránek pro jejich dynamickou změnu objekt XMLHttpRequest (vyvinutý firmou Microsoft v roce 1999), dnes součástí moderních prohlížečů, snahy o standardizaci na straně serveru je zapotřebí něco na zpracování požadavků, např. PHP server posílá data ve formátu, který je pak parsován JavaScriptem v klientovi, doporučeným formátem je XML nabo JSON (JavaScript Object Notation) 2 DOM model na klientovi při interpretaci HTML stránky vzniká objektový model dokumentu DOM objekty vytváří strom dokumentu lze vytvářet dynamicky nové uzly nebo je rušit, mazat jejich obsah důležité vlastnosti objektů DOM: nodetype = typ uzlu (12 typů), nejčastěji ELEMENT_NODE nebo TEXT_NODE (listový) id = jedinečný identifikátor tagname = název HTML tagu vlastnosti pro pohyb ve stromu: childnodes = pole ukazatelů na nejbližší potomky parentnode = ukazatel na rodiče metody: getelementbyid(id) = vrátí ukazatel na prvek s daným id getelementbytagname(tagname) = vrátí pole ukazatelů na prvek s daným jménem směrem od uzlu, na kterém byla metoda volána createelement(tagname) = vrátí ukazatel na nově vytvořený element createtextnode(text) = vrátí ukazatel na nově vytvořený textový uyel appendchild(uzel) = připojí uzel do seznamu potomků removechild(uzel) = odstraní uzel ze seznamu potomků 3 Techniky založené na JavaScriptu JavaScript a DOM DOM má schopnost manipulovat s dokumenty založenými na XML (včetně HTML) na straně klienta: manipulace s HTML stránkou během práce s ní /18 Ajax
2 čtení a parsování souborů XML získaných ze serveru tvorba nových dokumentů XML na straně serveru: vytváření nových dokumentů XML (a jejich následné zaslání klientovi) čtení XML dokumentů kód JavaScriptu se provádí před parsováním ostatního kódu HTML, jeho výstup se zobrazí nejdřív *** pozdrav.html *** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="pspad editor, <title>ajax: JavaScript a DOM</title> <script type="text/javascript" src="pozdrav.js"></script> </head> <body> <body> <p>přeji krásný den!</p> </body> </html> *** pozdrav.js *** // JavaScript Document var date = new Date(); var hour = date.gethours(); if (hour>=22 hour<5) document.write("dobrou noc, už je ", hour, " hodin"); else document.write("dobrý den, je právě ", hour, " hodin"); *** výstup *** Dobrou noc, už je 23 hodin Přeji krásný den! nebo lze v JavaScriptu uložit to, co se má udělat, do nějaké funkce a její volání svázat s nějakou událostí v dalším příkladě je volána javascriptovská funkce při kliknutí na odesílací tlačítko formuláře funkce zmena() provede tyto změny stránky = DOM vytvoří element <ul> přidá do něj položky = vytvoří element <li> a vloží text smaže obsah textového vstupu jmeno zruší odesílací tlačítko *** adresar.html *** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="pspad editor, <title>adresář</title> <script type="text/javascript" src="adresar.js"></script> </head> <body> <h1>adresář</h1> <div id="adresar"></div> <form> <label for="jmeno">jméno:</label> /18 Ajax
3 <input type="text" id="jmeno" name="jmeno" value="karel Novák"> <input type="button" id="odesli" name="odesli" value="odešli" onclick="zmena();"> </form> </body> </html> *** adresar.js *** // JavaScript Document var zmena = function() { var adresar = document.getelementbyid("adresar"); var jmeno = document.getelementbyid("jmeno"); var seznam = document.createelement("ul"); pridejpolozku(seznam, jmeno.value); pridejpolozku(seznam, "Eva Bílá"); pridejpolozku(seznam, "Pepa Zdepa"); adresar.appendchild(seznam); jmeno.value = ""; var odesli = document.getelementbyid("odesli"); odesli.parentnode.removechild(odesli); var pridejpolozku = function(seznam, text) { var polozka = document.createelement("li"); seznam.appendchild(polozka); polozka.appendchild(document.createtextnode(text)); *** před stiskem Odešli *** *** po stisku Odešli *** 4. JavaScript, DOM a CSS pomocí DOM můžeme manipulovat i se styly JavaScript přiřadí elementům tabulky odpovídající styl <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" " /> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="pspad editor, <title>ajax: JavaScript, DOM a CSS</title> <script type="text/javascript" src="jsdom5.js"></script> <noscript>vypnutý JavaScript</noscript> <link href="styl5.css" type="text/css" rel="stylesheet" /> </head> <body> /18 Ajax
4 <table id="table"> <tr> <th id="tablehead">název výrobku</th> </tr> <tr> <td id="tablefirstline">letadlo</td> </tr> <tr> <td id="tablesecondline">náklaďák</td> </tr> </table> <br /> <input type="button" value="nastav styl 1" onclick="setstyle1();" /> <input type="button" value="nastav styl 2" onclick="setstyle2();" /> </body> </html> // JavaScript Document // nastavení stylů tabulky na styl č.1 function setstyle1() { // získání odkazů na elementy HTML otable = document.getelementbyid("table"); otablehead = document.getelementbyid("tablehead"); otablefirstline = document.getelementbyid("tablefirstline"); otablesecondline = document.getelementbyid("tablesecondline"); // nastavení stylů otable.classname = "Table1"; otablehead.classname = "TableHead1"; otablefirstline.classname = "TableContent1"; otablesecondline.classname = "TableContent1"; // nastavení stylů tabulky na styl č.1 function setstyle2() { // získání odkazů na elementy HTML otable = document.getelementbyid("table"); otablehead = document.getelementbyid("tablehead"); otablefirstline = document.getelementbyid("tablefirstline"); otablesecondline = document.getelementbyid("tablesecondline"); // nastavení stylů otable.classname = "Table2"; otablehead.classname = "TableHead2"; otablefirstline.classname = "TableContent2"; otablesecondline.classname = "TableContent2"; /* CSS Document */.Table1 { border: DarkGreen 1px solid; background-color: LightGreen;.TableHead1 { font-family: Verdana, Arial; font-weight: bold; font-size: 10pt;.TableContent1 { font-family: Verdana, Arial; font-size: 10pt;.Table2 { border: DarkBlue 1px solid; background-color: LightBlue; /18 Ajax
5 .TableHead2 { font-family: Verdana, Arial; font-weight: bold; font-size: 10pt;.TableContent2 { font-family: Verdana, Arial; font-size: 10pt; 5 Objekt XMLHttpRequest objekt umožňující JavaScriptu vytvářet asynchronní požadavky na server vytvořen firmou Microsoft v roce 1999 objekt je ve všech novějších webových prohlížečích, ale není standardem W3C objekt se vytváří v různých prohlížečích různě ale pak už se používá stejně, instance ve všech prohlížečích budou stejné posloupnost operací při práci s XMLHttpRequest: vytvoření instance XMLHttpRequest použití objektu k vytvoření asynchronního volání stránky na serveru + definice funkce zpětného volání (automaticky se provede při odpovědi od serveru) práce s odpovědí serveru ve funkci zpětného volání další použití objektu XMLHttpRequest Vytvoření objektu XMLHttpRequest pro nové prohlížeče: xmlhttp = new XMLHttpRequest(); pro Internet Explorer 6 a staší: xmlhttp = new ActiveXObject("Microsoft.XMLHttp"); před vytvářením objektu mohu nejdříve zkotrolovat, zda je XMLHttpRequest podporován daným prohlížečem: if (typeof XMLHttpRequest!= "undefined")... vlastnosti a metody objektu XMLHttpRequest: abort() = ukončí aktuální požadavek getallresponseheaders() = vrátí hlavičky odpovědi jako řetězec getallresponseheaders("headerlabel") = vrátí jednu hlavičku odpovědi jako řetězec open("method", "URL" [, asyncflag [, "username" [, "password"]]]) = konfiguruje požadavek a nastavuje jeho parametry send(content) = provede požadavek HTTP setrequestheader("label", "value") = nastaví dvojici label/value požadavku onreadystatechange = používá se pro funkci zpětného volání, která ovládá změny stavu požadavku readystate = vrátí stav požadavku responsetext = vrátí odpověď serveru jako řetězec responsexml = vrátí odpověď serveru jako dokument XML status = vrátí stavový kód požadavku (bez chyby = 200) statustext = vrátí zprávu stavu požadavku *** vytvorenixmlhttprequest.js *** var xmlhttp = vytvorxmlhttprequestobject(); //uchovava instanci /* vytvoření instance XMLHttpRequest */ function vytvorxmlhttprequestobject() { var xmlhttp; try { /18 Ajax
6 xmlhttp = new XMLHttpRequest(); // pro všechny prohlížeče mimo IE6 a starší catch(e) { // pro prohlížeče IE6 a starší var verze = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); for (var i=0; i<verze.length &&!xmlhttp; i++) { try { xmlhttp = new ActiveXObject(xmlHttpVersions[i]); catch(e) { alert("chyba při vytváření objektu XMLHttpRequest"); if (!xmlhttp) alert("objekt XMLHttpRequest se nepodařilo vytvořit"); else return xmlhttp; 5.2. Inicializace požadavků na server pomocí XMLHttpRequest před tím, než pošleme požadavek na server, musíme provést jeho inicializaci a nastavit mu patřičné hlavičky pro inicializaci HTTP požadavku slouží metoda open() objekt XMLHttpRequest vytváří standardní požadavek http, rozdíl je jen v tom, že je asynchronní open()= pouze nastavuje volby serveru, nevyvolává spojení se serverem, má argumenty: method: GET, POST, PUT (= atribut method formuláře) url: (= atribut action formuláře), kam se má požadavek poslat, adresa relativní nebo absolutní (pokud není URL pomocí http, je první argument ignorován) async: true = zpracovávání skriptu pokračuje po ukončení metody send() bez čekání na odpověď false = před pokračováním se čeká na odpověď username, password = nepovinné, používá se při přihlašování na server, který vyžaduje autentizaci když se provádí požadavek asynchronně, je před voláním send() potřeba nastavit událost onreadystatechange na metodu zpětného volání, která se provede při změně stavu požadavku = základní mechanismus AJAXu při inicializaci požadavku jsou automaticky nastaveny patřičné hlavičky, můžeme hlavičky také přidat, např. hlavičku XML: XMLHttpRequest.setRequestHeader("Content-type", "text/xml"); 5.3. Odeslání požadavku na server k odeslání dat slouží metoda send() parametr metody = tělo požadavku tělo požadavku může být ve formátu: textový řetězec zaslaný metodou GET textový řetězec zaslaný metodou POST XML dokument zaslaný metodou POST *** volání stránky serveru *** function process() { if (xmlhttp) { // volání stránky serveru pro spuštění serverové operace pro metodu GET try { xmlhttp.open("get", "async.txt", true); xmlhttp.onreadystatechange = handlerequeststatechange; //metoda zpětného volání xmlhttp.send(null); /18 Ajax
7 catch(e) { alert("chyba při připojování na server" + e.tostring()); /* pro metodu POST xmlhttp.open("post", " true); xmlhttp.onreadystatechange = handlerequeststatechange; xmlhttp.send("param1=x¶m2=y"); */ DOM model můžeme uplatnit i na XML dokument na rozdíl od HTML musíme nejdříve vytvořit kořen dokumentu, vytvoření závisí opět na typu prohlížeče použijeme metodu createdocument(jmenný prostor, kořenový element, typ dokumentu) *** vytvorenixml.js *** var vytvorxml = function() { var xml; if (document.implementation && document.implementation.createdocument) { xml = document.implementation.createdocument("","",null); else if (ActiveXObject) { xml = new ActiveXObject("Microsoft.XMLDOM"); return xml; 5.4. Stavy požadavku a zpracování odpovědi serveru můžeme získat informaci o stavu zpracování požadavku readystate = vrátí stav požadavku: 0 = neinicializovaný... uninitialized 1 = zavádí se... loading 2 = je zaveden... loaded 3 = přechodný... intermediate (část. přijata) 4 = kompletní... complete některé prohlížeče nepodporují všechny stavy sledujeme jen stav 4, ten je podporován vždy musíme ještě ověřit, že během zpracování nedošlo k chybě: vlastnost status je rovna hodnotě 200 popis stavu je uložen v proměnné statustext, můžeme použít při vypsání chyby *** stav zpracování požadavku *** XMLHttpRequest.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { try { // zpracování odpovědi catch(e) { alert("chyba čtení odpovědi" + e.tostring()); else { alert("při zpracování na serveru došlo k chybě: "+ XMLHttpRequest.statusText); /18 Ajax
8 při vytváření asynchronního požadavku nezpůsobí vykonání xmlhttp.send() zamrznutí prohlížeče nastavíme metodu zmenapozadavku tak, aby ošetřila změnu stavu požadavku /* funkce ošetřuje odpověď HTTP response */ function zmenapozadavku() { // získání reference na element <div> na stránce mydiv = document.getelementbyid("mujdivelement"); // zobrazování stavu požadavku if (xmlhttp.readystate == 1) mydiv.innerhtml += "Request status: 1 (loading) <br />"; else if (xmlhttp.readystate == 2) mydiv.innerhtml += "Request status: 2 (loaded) <br />"; else if (xmlhttp.readystate == 3) mydiv.innerhtml += "Request status: 3 (interactive) <br />"; // pokračuj, je-li proces kompletní else if (xmlhttp.readystate == 4) { // pokračuj pouze, je-li status HTTP "OK" if (xmlhttp.status == 200) { try { // čti zprávu ze serveru response = xmlhttp.responsetext; // zobraz zprávu mydiv.innerhtml += "Request status: 4 (complete). Server odpovídá:<br />"; mydiv.innerhtml += response; catch(e) { alert("chyba čtení odpovědi" + e.tostring()); else { // zobraz zprávu o stavu alert("problém s daty: " + xmlhttp.statustext); Celý příklad vytvoříme soubor async.txt s textem např: Pozdrav ze serveru!!! vytvoříme soubor async.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, <title>ajax: JavaScript a XMLHttpRequest</title> <script type="text/javascript" src="async.js"></script> </head> <body onload="vytvorpozadavek()"> <p> Servere, řekni mi, jaké jsou tvoje oblíbené knihy? <br /> <div id="mujdivelement"> </p> </body> </html> vytvoříme soubor async.js: /18 Ajax
9 var xmlhttp = createxmlhttprequestobject(); // uchovává instanci XMLHttpRequest function vytvorxmlhttprequestobject() {... // vytvoří instanci XMLHttpRequest function vytvorpozadavek() {... // vytváří požadavek na server function zmenapozadavku() {... // volá se při změně stavu HTTP požadavku zadáme adresu v prohlížeči se nám pak zobrazí: Ahoj, servere! Request status: 1 (loading) Request status: 2 (loaded) Request status: 3 (interactive) Request status: 4 (complete). Server odpovídá: Pozdrav ze serveru!!! 6. Práce se strukturami XML ze serveru nebudeme číst řetězec, ale soubor XML soubor XML: <?xml version="1.0" encoding="windows-1250" standalone="yes"?> <knihy> <kniha> <autor>rastislav Škultéry</autor> <titul>javascript</titul> </kniha> <kniha> <autor>cristian Darie</autor> <titul>ajax a PHP</titul> </kniha> <kniha> <autor>rudolf Pecinovský</autor> <titul>návrhové vzory</titul> </kniha> </knihy> v souboru HTML změníme v rámci logiky příkladu pouze obsah těla: <body onload="vytvorpozadavek()"> <p> Servere, jaké jsou tvoje oblíbené knihy? <br /> <div id="mujdivelement"> </p> </body> v souboru s JavaScriptem změníme v metodě vytvorpozadavek(): xmlhttp.open("get", "knihy.xml", true); // čte soubor xml v souboru s JavaScriptem změníme metodu zmenapozadavku(), budeme v ní volat metodu zpracujodpovedserveru(), do ní přesuneme veškerou funkčnost: /* funkce se volá při změně stavu HTTP požadavku */ function zmenapozadavku() { // pokračuj, je-li proces kompletní if (xmlhttp.readystate == 4) { /18 Ajax
10 if (xmlhttp.status == 200) { try { // zpracování odpovědi ze serveru zpracujodpovedserveru(); catch(e) { alert("chyba čtení odpovědi" + e.tostring()); else { // zobraz zprávu o stavu alert("problém s daty: " + xmlhttp.statustext); metoda zpracujodpovedserveru() přečte zprávu ze serveru a generuje odpověď HTML: přečte zprávu ze serveru: var xmlzprava = xmlhttp.responsexml zabalí přijatou odpověď jako dokument DOM (případně zobrazí chybu) získáme odkaz na kořen dokumentu: korenxml = xmlresponse.documentelement pak už můžeme procházets tromem dokumentu a získávat potřebná data funkce getelementsbytagname() parsuje celý dokument a vrací elementy se zadaným jménem (nebo můžeme použít jazyk XPath) vytvoříme výstupní pole z těchto polí vytvoříme strukturu HTML dokumentu ošetření dalších chyb a generování výjimek: pokud je chyba v XML souboru, žádný prohlížeč kromě Internet Exploreru ji nezachytí, přidáme kontrolu: v metodě zpracujodpovedserveru() přidáme zachycení možných chyb u různých prohlížečů /* zpracování odpovědi serveru */ function zpracujodpovedserveru() { // přečte zprávu ze serveru var xmlresponse = xmlhttp.responsexml; // zachycení možných chyb u IE a Opery if (!xmlresponse!xmlresponse.documentelement) throw("špatná XML struktura:\n" + xmlhttp.tesponsetext); // zachycení možných chyb u Firefoxu var rootnodename = xmlresponse.documentelement.nodename; if (rootnodename == "parsererror") throw("špatná XML struktura:\n"); // nastaví nový obsah HTML novyobsahhtml(xmlresponse); /* získání nového obsahu html ze souboru xml zaslaného serverem */ function novyobsahhtml(xmlresponse) { // získá element dokumnentu XML xmlroot = xmlresponse.documentelement; // získá pole autorů a titulů autorarray = xmlroot.getelementsbytagname("autor"); titularray = xmlroot.getelementsbytagname("titul"); // generuje výstup HTML var html = ""; for (var i=0; i<titularray.length; i++) /18 Ajax
11 html += autorarray.item(i).firstchild.data + ": " + titularray.item(i).firstchild.data + "<br />"; // získání reference na element <div> na stránce a změní obsah html mydiv = document.getelementbyid("mujdivelement"); mydiv.innerhtml = "Server odpovídá: <br />" + html; 7. Techniky na straně serveru s PHP a MySQL XML může být generováno také dynamicky napíšeme PHP skript, který bude generovat XML dynamicky HTML se nezmění v JavaScriptu se změní v process(): xmlhttp.open("get", "phpxml.php", true); soubor phpxml.php (pozor, implicitně vyžaduje kódování utf-8): <?php header('content-type: text/xml'); // nový dokument XML $dom = new DOMDocument(); $knihy = $dom->createelement("knihy"); $dom->appendchild($knihy); $kniha = $dom->createelement("kniha"); $knihy->appendchild($kniha); $autor = $dom->createelement("autor"); $kniha->appendchild($autor); $autortext = $dom->createtextnode("rastislav Škultéry"); $autor->appendchild($autortext); $titul = $dom->createelement("titul"); $kniha->appendchild($titul); $titultext = $dom->createtextnode("javascript"); $titul->appendchild($titultext); $kniha = $dom->createelement("kniha"); $knihy->appendchild($kniha); $autor = $dom->createelement("autor"); $kniha->appendchild($autor); $autortext = $dom->createtextnode("cristian Darie"); $autor->appendchild($autortext); $titul = $dom->createelement("titul"); $kniha->appendchild($titul); $titultext = $dom->createtextnode("ajax a PHP"); $titul->appendchild($titultext); $kniha = $dom->createelement("kniha"); $knihy->appendchild($kniha); $autor = $dom->createelement("autor"); $kniha->appendchild($autor); $autortext = $dom->createtextnode("rudolf Pecinovský"); $autor->appendchild($autortext); $titul = $dom->createelement("titul"); $kniha->appendchild($titul); $titultext = $dom->createtextnode("návrhové vzory"); $titul->appendchild($titultext); $xmlstring = $dom->savexml(); // výstup řetězce echo $xmlstring; /18 Ajax
12 ?> 8. Práce s MySQL definice dat potřebných pro připojení k databázi připojení k databázi načtení dat z databáze vytvoření souboru xml pomocí php a DOM z dat získaných z databáze 9. Ověřování formulářových dat pomocí AJAXu dříve ověřování na straně serveru po odeslání formuláře pomocí php nebo na straně klienta pomocí JavaScriptu pomocí AJAXu lze reagovat na událost, kdy libovolné pole formuláře ztratí fokus (onblur) hodnota pole pak bude odeslána na server, který ověří data a vrátí výsledek pokud má klient zkázáno používat JavaScript, kontrola pomocí AJAXu se neprovede vždy je proto nezbytné provedení finální kontroly na straně serveru Princip kontroly dat pomocí AJAXu Zdroj obrázku (autor Petr Láslo ): Bezpečnost vůči vláknům asynchronní požadavek na server se vykoná pokaždé, když uživatel opustí nějaké pole pokud se uživatel rychle přesune přes několik vstupníchpolí nebo je-li spijení se serverem pomalé, může se stát, že objekt XMLHttpRequest je ještě zaměstnán čekáním na odpověď předchozího požadavku výsledkem může být chyba vedoucí k ukončení aplikace /18 Ajax
13 tento problém můžeme řešit několika způsoby: vytvoříme pokaždé novou instanci XMLHttpRequest (může snížit výkon serveru) uložíme zprávu do fronty a odešleme ji později (zachovává se pořadí zpráv) naplánujeme po uplynutí nějaké doby automatický pokus o vytvoření nového požadavku (nezachovává pořadí zpráv) zprávu ignorovat Příklad 1 validace formuláře: vytvoříme formulář s těmito položkami: přezdívka jméno příjmení . prohlížeči musíme zakázat ukládání dat do cache: <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, must-revalidate" /> <meta http-equiv="expires" content="0" /> ukazatel nastavíme na první položku formuláře: <body onload="document.getelementbyid('nick').focus()"> k odpálení požadavku použijeme událost onblur <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="cs"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="content-language" content="cs" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, must-revalidate" /> <meta http-equiv="expires" content="0" /> <meta name="generator" content="pspad editor, /> <meta name="author" content="all: Petr 'plasmo' Láslo; mailto: plasmo@plasmo.cz; web: /> <script src="js.js" type="text/javascript"></script> <title>registrace uživatele</title> </head> <body onload="document.getelementbyid('nick').focus()"> <fieldset> <legend>registrace uživatele</legend> <form action="#" method="post"> <table border="0"> <tr> <td><label for="nick">nick:</label></td> <td><input type="text" name="nick" id="nick" value="" onblur="vytvorpozadavek(this.id,this.value)" /></td> <td><div id="nickzprava"></div></td> </tr> <tr> <td><label for="jmeno">jméno:</label></td> <td><input type="text" name="jmeno" id="jmeno" onblur="vytvorpozadavek(this.id, this.value)" /></td> <td><div id="jmenozprava"></div></td> </tr> <tr> <td><label for="prijmeni">přijmení:</label></td> <td><input type="text" name="prijmeni" id="prijmeni" onblur="vytvorpozadavek(this.id, this.value)" /></td> <td><div id="prijmenizprava"></div></td> </tr> <tr> /18 Ajax
14 <td><label for=" "> </label></td> <td><input type="text" name=" " id=" " onblur="vytvorpozadavek(this.id, this.value)" /></td> <td><div id=" zprava"></div></td> </tr> </table> </form> </fieldset> </body> </html> soubor async.js bude obsahovat opět tyto funkce a proměnné: var xmlhttp = createxmlhttprequestobject(); // uchovává instanci XMLHttpRequest var cache = new Array(); // třída Array JavaScriptu může sloužit jako fronta, pomocí metod push() a shift() do ní přidáváme a z ní odebíráme. V případě, že bude objekt xmlhttp zaneprázdněný, uložíme požadavek do fronty a počkáme, až bude mít xmlhttp na tyto požadavky čas function vytvorxmlhttprequestobject() {... // vytvoří instanci XMLHttpRequest function vytvorpozadavek() {... // vytváří požadavek na server function zmenapozadavku() {... // volá se při změně stavu HTTP požadavku, pomocí XML zajistí komunikaci se scriptem na straně serveru funkce vytvorpozadavek() bude přebírat dva parametry: id prvku a hodnotu prvku funkce bude kontrolovat existenci prvku id, pokud se kontrola vyhodnotí jako pravda, přidá požadavek do fronty přidání podmínky do části try, díky které vytvoříme požadavek jen v případě, že xmlhttp nemá zrovna nic na práci a zároveň jen tehdy, když fronta není prázdná další změnou je použití metody xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded"); objektu XHR pro nastavení MIME typů poslední malou změnou je předání cache jako parametru metody xhr.send(cachevstup);. Funkce bude vypadat následovně: /* vytváří požadavek na server */ function vytvorpozadavek(id,hodnota){ if(xmlhttp) { if(id){ //zakoduji hodnoty id = encodeuricomponent(id); hodnota = encodeuricomponent(hodnota); //vložím hodnoty do fronty cache.push("id="+id+"&hodnota="+hodnota); try{ //pokračovat budu jen v případě že cache není prázdná a objekt XHR nemá co na práci if((xmlhttp.readystate == 4 xmlhttp.readystate == 0) && cache.length > 0){ //z cache načtu další hodnotu var cachevstup = cache.shift(); xmlhttp.open("post","./validace.php",true); xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded"); xmlhttp.onreadystatechange = zmenapozadavku; xmlhttp.send(cachevstup); catch(e){ alert("nelze se připojik k serveru:\n" + e.tostring()); else alert("funkce \"precitsoubor()\": chybí objekt XMLHttpRequest"); /18 Ajax
15 funkce zmenapozadavku() opět přečte dokument XML a zobrazí jej na webové stránce obsah funkce se změní jen přidáním: settimeout("vytvorpozadavek();", 500); /* funkce se volá při změně stavu HTTP požadavku */ function zmenapozadavku() { // pokračuj, je-li proces kompletní if (xmlhttp.readystate == 4) { // pokračuj pouze, je-li status HTTP "OK" if (xmlhttp.status == 200) { try { // zpracování odpovědi ze serveru zpracujodpovedserveru(); settimeout("vytvorpozadavek();", 500); catch(e) { alert("chyba čtení odpovědi: " + e.tostring()); else { // zobraz zprávu o stavu alert("problém s daty: " + xmlhttp.statustext); nezmění se ani funkce zpracujodpovedserveru() změní se funkce novyobsahhtml(xmlresponse) /* získání nového obsahu html ze souboru xml zaslaného serverem */ function novyobsahhtml(xmlresponse) { // získá element dokumnentu XML xmlroot = xmlresponse.documentelement; odpoved = xmlroot.getelementsbytagname("odpoved")[0].firstchild.data; stav = xmlroot.getelementsbytagname("stav")[0].firstchild.data; id = xmlroot.getelementsbytagname("id")[0].firstchild.data; zprava = document.getelementbyid(id+"zprava"); //alert(odpoved+" "+id+" "+zprava); zprava.innerhtml = stav; soubor validace.php nahradí soubor phpxml.php přibudou: hlavičky, které zamezí ukládání dat do cache logika pro ověření zadaných údajů, kontrola probíhá nejdřív dle id prvku rozhodneme, který prvek budeme kontrolovat (zda nick, jméno,...), pak přiřadíme hodnoty proměnným $hodnota a $zprava <?php header("expires: Wed, 23 Dec :30:00 GMT"); header("last-modified:".gmdate("d, d M Y H:i:s")." GMT"); header("cache-control: no-cache, must-revalidate"); header("pragma: no-cache"); switch ($_REQUEST['id']) { case "nick": /18 Ajax
16 //pokud nick obsahuje hodnotu vracím 1 == true jinak 0 == false if($_request['hodnota']){ $hodnota = 1; $zprava = "OK"; else{ $hodnota = 0; $zprava = "Musíte zadat nick!"; break; case "jmeno": if(empty($_request['hodnota'])){ $hodnota = 0; $zprava = "Musíte zadat jméno!"; else{ $hodnota = 1; $zprava = "OK"; break; case "prijmeni": if(empty($_request['hodnota'])){ $hodnota = 0; $zprava = "Musíte zadat přijmení!"; else{ $hodnota = 1; $zprava = "OK"; break; case " ": if(!eregi("^[a-z0-9_.-]+@([a-z0-9_-]+\.)+[a-z]{2,4$",$_request['hodnota'])){ $hodnota = 0; $zprava = " ová adresa musí být v platném tvaru!<br />"; else{ $hodnota = 1; $zprava = "OK"; break; //výstup je XML dokument, proto odešlu správný mime-type header("content-type: text/xml"); //tvořím nový XML $xml = new DOMDocument("1.0","utf-8"); //vytvočím kořenový element validace $validace = $xml->createelement("validace"); $xml->appendchild($validace); $vysledek = $xml->createelement("vysledek"); //vytvorim element odpoved a vložím do něj data $odpoved = $xml->createelement("odpoved"); $odpoveddata = $xml->createtextnode($hodnota); $odpoved->appendchild($odpoveddata); //vytvorim element zprava a vložím do něj data $stav = $xml->createelement("stav"); $stavdata = $xml->createtextnode($zprava); $stav->appendchild($stavdata); //vytvorim element id a vložím do něj data $id = $xml->createelement("id"); $iddata = $xml->createtextnode($_request['id']); $id->appendchild($iddata); $vysledek->appendchild($odpoved); $vysledek->appendchild($stav); /18 Ajax
17 $vysledek->appendchild($id); $validace->appendchild($vysledek); //uložím XML výstup $vystup= $xml->savexml(); //zobrazím echo $vystup;?> /18 Ajax
18 Příklad 2: napíšeme formulář pro vstup dat: uživatelské jméno jméno a příjmení pohlaví datum narození, zvlášť měsíc - den - rok (select) zaškrtávací políčko, že klient souhlasí odesílací tlačítko budeme implementovat frontu zpráv FIFO tabulka uživatelé user_id user_name v pomocném souboru si nastavíme hodnoty některých pomocných polí pohlaví měsíce pole $_SESSION V příkladu 2 budeme pomocí PHP i AJAXu ověřovat: uživatelské jméno nesmí být už v databázi pole pro jméno nesmí být prázdné musí být vyplněno pohlaví musí být vybrán měsíc narození kotrola platného dne narození (1 až 31) kontrola platného roku narození (1900 až 2005) kontrola dnů podle měsíců kontrola ové adresy telefonní číslo odpovídá tvaru xxx xxx xxx musí být zatrženo. že se klient seznámil s podmínkami použití /18 Ajax
Ajax - úvod. Klíčové pojmy: Ajax, skriptování na straně klienta a serveru, objekt XMLHttpRequest, DOM model.
Ajax - úvod Kapitola má seznámit se základy technologie Ajax, připomene základy JavaScriptu a seznámí s vytvořením objektu XMLHttpRequest. Obsahuje některé jednoduché příklady. Klíčové pojmy: Ajax, skriptování
Základy HTML, URL, HTTP, druhy skriptování, formuláře
Základy HTML, URL, HTTP, druhy skriptování, formuláře Skriptování na straně klienta a serveru Skriptování na straně klienta se provádí pomocí programovacího jazyka JavaScript, který je vkládán do HTML
Formuláře. Internetové publikování. Formuláře - příklad
Formuláře Internetové publikování Formuláře - příklad 1 Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
Vytváříme aplikace využívající Ajax
Vytváříme aplikace využívající Ajax Je na čase začít používat Ajax V této kapitole se dozvíte, jak vytvářet kompletní Ajaxové aplikace od podlahy až po střechu V prvé řadě uvidíte, jak se vytváří a pracuje
XSLT pomocí JavaScriptu v Mozille (... Opeře a Safari)
XSLT a JavaScript Autor: Petr Dvořák (http://joshis.iprofil.cz/) Úvod Dokumenty XML (můžeme rovnou říct, že narozdíl od dokumentů (X)HTML) nenesou žádnou informaci, která by prohlížeči sdělila, jakým způsobem
Internet cvičení. ZS 2009/10, Cvičení 4.,15.12.2009 PHP. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz
Internet cvičení ZS 2009/10, Cvičení 4.,15.12.2009 PHP Tomáš Pop DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz CHARLES UNIVERSITY PRAGUE Faculty of Mathematics and Physics Generování tabulky
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
Název Live prez Sear enta Maps
Vladimír Jarotek Název Live Search prezentace Maps Nadpis Obsah 1. Co je to Live Search Maps 2. API 3. Závěr 4. Literatura Nadpis 1 Co je to a co nabízí Live Search Maps Jedná se o projekt (službu) prohledávání
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Dědičnost objektů BI-JSC Evropský sociální fond
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
NSWI096 - INTERNET. Úvod do HTML
NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup
Internet cvičení. ZS 2009/10, Cvičení 3.,8.12.2009. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz
Internet cvičení ZS 2009/10, Cvičení 3.,8.12.2009 Tomáš Pop DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz CHARLES UNIVERSITY PRAGUE Faculty of Mathematics and Physics Java Script obecně Moc
NSWI096 - INTERNET JavaScript
NSWI096 - INTERNET JavaScript Mgr. Petr Lasák JAVASCRIPT JAK SE DNES POUŽÍVÁ Skriptovací (interpretovaný) jazyk Umožňuje interaktivitu Použití: Dialogy Kontrola dat ve formulářích Změny v (X)HTML dokumentu
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Syntaxe 1. část BI-JSC Evropský sociální fond
Návrh a tvorba WWW stránek 1/8. Formuláře
Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 18.4.2016 Webové aplikace JSON, AJAX/AJAJ, zpracování na straně JS, JSONP, proxy, REST strana 2 JSON objekt JavaScript Object Notation { "nazev": hodnota, "cislo":
AJAX. Dynamické změny obsahu stránek
AJAX Dynamické změny obsahu stránek Co je AJAX Co je AJAX Co je AJAX Co je AJAX Co je AJAX AJAX = Asynchronous JavaScript And XML XHR = XMLHttpRequest Ajax je sada technik a nástrojů, které umožňují dynamické
Aja j x a x v v P H P P
Ajax v PHP Martin Klíma AJAX co to je? Asynchronous Javascript And XML Webový klient komunikuje s webovým serverem asynchronně. Výsledkem je jen částečná aktualizace stránky Blíží se návrhu klasické desktopové
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Anonymní funkce BI-JSC Evropský sociální fond
Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí!
Formuláře Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve
Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni
Webové aplikace Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni Harmonogram Dopolední blok 9:00 12:30 Ing. Dostal Úvod, XHTML + CSS Ing. Brada,
Formuláře. Internetové publikování
Formuláře Internetové publikování Formuláře - příklad Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
Úvod do tvorby internetových aplikací
CVT6 01a Úvod do tvorby internetových aplikací Osnova předmětu (X)HTML a tvorba webu pomocí přímého zápisu kódu Tvorba web designu a skládání stránek z kousků Skriptovací jazyky na webu Návrh software
NSWI142 Webové aplikace Zkouškový test
NSWI142 Webové aplikace Zkouškový test Jméno: 24.12.2016 U každé otázky může být více správných odpovědí, ale také nemusí být správná žádná. Zaškrtávejte pouze odpovědi, které jsou zcela pravdivé. Z čistě
1. Úvod do Ajaxu 11. Jak Ajax funguje? 13
Obsah Úvodem 9 1. Úvod do Ajaxu 11 Jak Ajax funguje? 13 Popis 13 Ukázky 13 Jaké jsou možnosti tvorby interaktivních webových aplikací? 15 Co je třeba znát? 16 Jak fungují technologie Ajaxu 16 Jak funguje
Úvod do aplikací internetu a přehled možností při tvorbě webu
CVT6 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu BI-JSC Evropský sociální
Mgr. Vlastislav Kučera lekce č. 2
Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se
Třídy a objekty. Třídy a objekty. Vytvoření instance třídy. Přístup k atributům a metodám objektu. $z = new Zlomek(3, 5);
Programovací jazyk PHP doc. Ing. Miroslav Beneš, Ph.D. katedra informatiky FEI VŠB-TUO A-1007 / 597 324 213 http://www.cs.vsb.cz/benes Miroslav.Benes@vsb.cz Obsah Třídy a objekty Výjimky Webové aplikace
Tvorba internetových aplikací pomocí Rich Internet Application AJAX
Tvorba internetových aplikací pomocí Rich Internet Application AJAX Bakalářská práce Ondřej Ašenbryl Vedoucí závěrečné práce: PaeDr. Petr Pexa Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptovani browseru BI-JSC Evropský sociální
Po stisku Next se nám objeví seznam dostupných tříd (naše zkompilovaná třída User.KBI), viz následující obrázek.
Cvičení 2 Vytvoření webového formuláře pro danou třídu pomocí jazyka Caché Server Pages (CSP) prostřednictvím Caché Web Form Wizard. Činnosti potřebné pro zvládnutí úlohy : 1. Mít z předchozího cvičení
Tvorba webu. Úvod a základní principy. Martin Urza
Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto
Tvorba webových stránek
Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou
Printris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.
Printris Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je založena ne principu Tetrisu. Úkolem hráče je umístit tři stejné tiskárny vodorovně nebo svisle do jedné řady.
1 Webový server, instalace PHP a MySQL 13
Úvod 11 1 Webový server, instalace PHP a MySQL 13 Princip funkce webové aplikace 13 PHP 14 Principy tvorby a správy webového serveru a vývojářského počítače 14 Co je nezbytné k instalaci místního vývojářského
(X)HTML, CSS a jquery
Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje
WWW a HTML. Základní pojmy. Ivo Peterka
WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní
Úvodem 9. Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10. Než začneme 11
Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 Kapitola 1 Než začneme 11 Dynamické vs. statické stránky 11 Co je a k čemu slouží PHP 12 Instalace potřebného softwarového
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Události (events) BI-JSC Evropský sociální fond
Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675
Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu - DOM 2 BI-JSC Evropský
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování
Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie
Mgr. Vlastislav Kučera přednáška č. 2
Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS
KAPITOLA 6. XML, XPath a XSLT. Podpora XML v prohlížečích. XML DOM v IE
KAPITOLA 6 XML, XPath a XSLT S rostoucí popularitou XML chtěli vývojáři tuto technologii použít na obou stranách jak na straně serveru, tak i na straně uživatele. Microsoft a Mozilla, počínaje Internet
DUM 14 téma: Interakce s uživatelem
DUM 14 téma: Interakce s uživatelem ze sady: 2 tematický okruh sady: Tvorba statických www stránek s použitím CSS ze šablony: 08 Internet určeno pro: 3. ročník vzdělávací obor: 18-20-M/01 Informační technologie
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
XHTML 1. Formuláře. Element form. <form>... </form>
XHTML 1 Formuláře Činnost: - zadávání informací do elektronického obchodu; - odesílání jména a dalších informací pro on-line službu; - nákup letenek a cestovních služeb; - nákup dalšího zboží a služeb,
13. Vytváření webových stránek
13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací
!!Via!AUREA,!s.r.o.!
ViaAUREA,s.r.o. Lidická48,60200Brno IČ:26257700 DIČ:CZ26257700 Posledníaktualizace:25.9.2015 tel.:+420511110431 ehmail:info@viaaurea.cz 1 SPECIFIKACE%HTML%KREATIVY%...%3 1.1 COJEHTMLBANNER...3 1.2 DEFINICEPROKLIKU...4
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
Internet 2 css, skriptování, dynamické prvky
Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní
WWW technologie. HTTP protokol
WWW technologie HTTP protokol HTTP protokol Princip - klient server - klient zašle požadavek (request), obdrží odpověď (response). klient request server response Verze - HTTP protokol HTTP 0.9 HTTP 1.0
Uživatelská příručka 6.A6. (obr.1.)
Uživatelská příručka 6.A6 Na stránky se dostanete zadáním URL adresy: http://sestasest.tym.cz do vašeho prohlížeče. Teď jste se dostali na úvodní stránku, na které vidíte fotku, přivítání, odkaz na Uživatelskou
PHP. Čtvrtek 8. září. Čtvrtek 15. září. Anonymní test znalostí
Čtvrtek 8. září Anonymní test znalostí Čtvrtek 15. září PHP je programovací jazyk, který pracuje na straně serveru. S PHP můžete ukládat a měnit data webových stránek. PHP původně znamená Personal Home
Protokol HTTP 4IZ228 tvorba webových stránek a aplikací
4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2006/11/23 15:11:51 $ Obsah Úvod... 3 Co je to HTTP... 4 Základní model protokolu... 5 Struktura požadavku v HTTP 1.0 a
K práci budeme využívat souborového manažeru Unreal Commander alespoň si ho procvičíme
PHP je programovací jazyk, který pracuje na straně serveru. S PHP můžete ukládat a měnit data webových stránek. PHP původně znamená Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami
PHP a Large Objecty v PostgreSQL
PHP a Large Objecty v PostgreSQL Pavel Janík ml. http://www.janik.cz PHP a Large Objecty v PostgreSQL 1 Jazyk PHP je velmi mocným jazykem pro vývoj webových aplikací. Má podporu snad všech velkých i menších
Maturitní projekt do IVT Pavel Doleček
Maturitní projekt do IVT Pavel Doleček CO FILMBOOK JE Filmbook je uzavřená webová aplikace pro celkovou správu informací a dat souvisejících se sledováním filmů. Primárně je zaměřen na uchovávání a spravování
1. Webový server, instalace PHP a MySQL 13
Úvod 11 1. Webový server, instalace PHP a MySQL 13 Princip funkce webové aplikace 13 PHP 14 Principy tvorby a správy webového serveru a vývojářského počítače 14 Co je nezbytné k instalaci místního vývojářského
Uspořádání klient-server. Standardy pro Web
Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Operátory a příkazy BI-JSC Evropský sociální fond
Vývoj Internetových Aplikací
2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info
Artlingua Translation API
Artlingua Translation API Dokumentace Jan Šváb, Artlingua, a.s. 2015 Revize: 2015-09-22 - verze API : v1 Obsah Obsah... 2 Předávání dokumentů k překladu... 3 Implementace klientské aplikace pro Translation
ČERV. Hra Červ je psána pomocí příkazů Javascriptu a standardních příkazů HTML.
ČERV Hra Červ je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra napodobuje pohyb viru-červa v počítačové síti. Úkolem hráče je napadat (požírat) počítače a snaží se vyhnout srážce s
Sada 1 - PHP. 09. Formuláře
S třední škola stavební Jihlava Sada 1 - PHP 09. Formuláře Digitální učební materiál projektu: SŠS Jihlava šablony registrační číslo projektu:cz.1.09/1.5.00/34.0284 Šablona: III/2 - inovace a zkvalitnění
Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN
Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940
Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot.
CATCHER Hra Catcher je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Úkolem hráče je rozeznat volný a placený software. Objekty s názvem a logem software se nepravidelně objevují a pohybují
Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.
ESCAPE OF VIRUSES Hra Escape of viruses je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra se spouští tlačítkem Start game. Úkolem hráče je eliminovat viry na hrací ploše kliknutím kurzoru
jquery - úvod Zdroj: Jiří Zralý:
jquery - úvod Zdroj: Jiří Zralý: http://citron.blueboard.cz/clanek-331-jquery-pro-zacatecniky-zaklady.html 1 Úvod je to framework pro javascript Stáhnete si jeden.js soubor (to je ten framework, celé hezky
INFORMAČNÍ SYSTÉMY NA WEBU
INFORMAČNÍ SYSTÉMY NA WEBU Webový informační systém je systém navržený pro provoz v podmínkách Internetu/intranetu, tzn. přístup na takový systém je realizován přes internetový prohlížeč. Použití internetového
Obsah. Úvodem 9. Kapitola 1 Než začneme 11. Kapitola 2 Dynamické zobrazování obsahu 25. Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10
Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 Kapitola 1 Než začneme 11 Dynamické vs. statické stránky 11 Co je a k čemu slouží PHP 12 Instalace potřebného softwarového
Část 1 Moderní JavaScript
Obsah Část 1 Moderní JavaScript Kapitola 1 Moderní programování v JavaScriptuh.................... 13 Objektově orientovaný JavaScript................................13 Testování zdrojového kódu......................................
Využití OOP v praxi -- Knihovna PHP -- Interval.cz
Page 1 of 6 Knihovna PHP Využití OOP v praxi Po dlouhé teorii přichází na řadu praxe. V následujícím textu si vysvětlíme možnosti přístupu k databázi pomocí různých vzorů objektově orientovaného programování
Bottle -- příklad. Databáze. Testovací data. id Jedinečný identifikátor řádku: Bude typu INT s AUTO_INCREMENT a nastavíme ho jako primární klíč
Bottle -- příklad V tomto příkladu se pokusíme vytvořit malou aplikaci umožňující psát jednoduché poznámky. Databáze Nejprve je třeba vytvořit v databázovém serveru uživatele (pokud už není vytvořen) a
Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací
HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy
V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World
Základy webových aplikací ZWA Přednáška č. 3 tvorba formulářů na klientské straně. Martin Klíma
Základy webových aplikací ZWA Přednáška č. 3 tvorba formulářů na klientské straně Martin Klíma FORMULÁŘE Formuláře Formuláře se používají k odesílání dat na server Omezená sada formulářových polí Není
Koláčky, sezení. Martin Klíma
Koláčky, sezení Martin Klíma UDRŽOVÁNÍ STAVU APLIKACE Udržování stavu aplikace 1. Pomocí skrytých polí (viz příklad wizard) 2. Pomocí obohacování odkazů 3. Pomocí cookies 4. Pomocí sessions Obohacování
3 MOŽNÉ PŘÍSTUPY K TVORBĚ APLIKACÍ NAD SVG DOKUMENTY
3 MOŽNÉ PŘÍSTUPY K TVORBĚ APLIKACÍ NAD SVG DOKUMENTY 3.1 Tenký a tlustý klient Klientské aplikace nad XML dokumenty v prostředí internetu se dají rozdělit na dvě skupiny: tenký klient a tlustý klient.
24 Uživatelské výběry
24 Uživatelské výběry Uživatelský modul Uživatelské výběry slouží k vytváření, správě a následnému používání tématicky seskupených osob a organizací včetně jejich kontaktních údajů. Modul umožňuje hromadnou
VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA
Metodický list č. 1 Způsob zakončení : Úvod Technologie webových aplikací Protokol HTTP Po zvládnutí tématického celku bude student mít základní přehled o problematice programování internetových (webových)
12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat
Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v HTML method metoda, kterou klient předává data serveru
TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz
6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky Sémantická - pomocí HTML Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu,
Nová struktura souborů a složek
Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Funkce podrobněji BI-JSC Evropský sociální fond
Obsah přednášky. Představení webu ASP.NET frameworky Relační databáze Objektově-relační mapování Entity framework
Web Jaroslav Nečas Obsah přednášky Představení webu ASP.NET frameworky Relační databáze Objektově-relační mapování Entity framework Co to je web HTTP protokol bezstavový GET POST HEAD Cookies Session HTTPS
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
BI-AWD. Administrace Webového a Databázového serveru Virtualizace HTTP serveru
BI-AWD Administrace Webového a Databázového serveru Virtualizace HTTP serveru Příprava studijního programu Informatika je podporována projektem financovaným z Evropského sociálního fondu a rozpočtu hlavního
1 Uživatelská dokumentace
1 Uživatelská dokumentace Systém pro závodění aut řízených umělou inteligencí je zaměřen na závodění aut v prostředí internetu. Kromě toho umožňuje testovat jednotlivé řidiče bez nutnosti vytvářet závod
Uživatelská dokumentace
Uživatelská dokumentace Verze 14-06 2010 Stahování DTMM (v rámci služby Geodata Distribution) OBSAH OBSAH...2 1. O MAPOVÉM SERVERU...3 2. NASTAVENÍ PROSTŘEDÍ...3 2.1 Hardwarové požadavky...3 2.2 Softwarové
PODMÍNKY POSKYTOVÁNÍ PŘÍSTUPU K PORTÁLU NAMĚŘENÝCH DAT POMOCÍ WEBOVÝCH SLUŽEB SPOLEČNOSTI ČEZ DISTRIBUCE, A. S.
PODMÍNKY POSKYTOVÁNÍ PŘÍSTUPU K PORTÁLU NAMĚŘENÝCH DAT POMOCÍ WEBOVÝCH SLUŽEB SPOLEČNOSTI ČEZ DISTRIBUCE, A. S. 1 ÚVOD... 5 2 POPIS VÝMĚNY DAT... 6 2.1 KOMUNIKAČNÍ SCÉNÁŘE... 6 2.2 TECHNOLOGIE KOMUNIKACE...
Parsování HTML. Pro účely testování jsem vytvořil stránku parsovani.html. Zdrojový kód:
Parsování HTML představuje slangový výraz pro syntaktickou analýzu obsahu webové stránky. Lidově řečeno porcujeme zdrojový kód stránky a vyzobáváme potřebný obsah. Webovým vývojářům není neznámý pojem
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie RIA, JSON, REST, AngularJS strana 2 RIA - rich internet application chová se podobně jako desktopová aplikace velké množství logiky
Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
Tvorba informačních systémů
Tvorba informačních systémů Michal Krátký, Miroslav Beneš Katedra informatiky VŠB Technická univerzita Ostrava Tvorba informačních systémů, 2005/2006 c 2006-2007 Michal Krátký, Miroslav Beneš Tvorba informačních
Dokumentace k nevizuálnímu rozhraní aplikace DopisOnline
Dokumentace k nevizuálnímu rozhraní aplikace DopisOnline Rozhraní slouží k automatizovanému podání listovních zásilek elektronickou cestou z aplikací třetích stran. Veškerá komunikace s naším serverem