INTERNETOVÉ TECHNOLOGIE

Evropský polytechnický institut, s.r.o. 1. soukromá vysoká škola na Moravě Kunovice INTERNETOVÉ TECHNOLOGIE Ing. Jindřich Petrucha, Ph.D. Ing. Juraj Duďák, Ph.D. 2011

Evropský polytechnický institut, s.r.o. Osvobození 699, Kunovice Internetové technologie Ing. Jindřich Petrucha, Ing. Juraj Duďák 2011

Název: Internetové technologie 2. aktualizované vydání Autor: Ing. Jindřich Petrucha, Ph.D. Ing. Juraj Ďuďák, Ph.D. Vydavatel: Evropský polytechnický institut, s.r.o. Kunovice, 2011 Neprošlo jazykovou úpravou ISBN: 978-80-7314-264-3

Obsah: 1 JAVASCRIPT, CHARAKTERISTIKA A LEXIKÁLNÍ ELEMENTY... 7 1.1 ÚVOD... 7 1.2 ZÁKLADNÍ CHARAKTERISTIKY... 8 1.2.1 Strukturované datové prvky a objekty... 8 1.3 SAMOSTATNÁ PRÁCE... 14 1.4 KONTROLNÍ OTÁZKY... 14 1.5 SHRNUTÍ... 14 2 JAVASCRIPT VSTUP A VÝSTUP DAT... 15 2.1 OBJEKTY TLAČÍTEK A FUNKCÍ ALERT... 16 2.2 VĚDECKO TECHNICKÝ VÝPOČET... 18 2.3 PRÁCE S OBJEKTEM TEXTOVÉHO POLE... 19 2.4 SAMOSTATNÁ PRÁCE... 26 2.5 KONTROLNÍ OTÁZKY... 27 2.6 SHRNUTÍ... 27 3 APLIKACE PHP A JAVASCRIPT... 29 3.1 PHP SOUBORY A JAVASKRIPT... 29 4 APLIKACE AJAX TECHNOLOGIE... 35 4.1 ZÁKLADNÍ PRINCIPY... 35 4.2 PŘÍKLAD AJAX TECHNOLOGIE... 37 4.3 SHRNUTÍ KAPITOLY... 49 4.4 OTÁZKY KE KAPITOLE... 49 5 REDAKČNÍ SYSTÉMY... 51 5.1 REDAKČNÍ SYSTÉM JOOMLA... 52 5.2 REDAKČNÍ SYSTÉM WORDPRESS... 53 5.3 PLUGINY REDAKČNÍCH SYSTÉMŮ... 54 5.4 SHRNUTÍ KAPITOLY... 55 5.5 OTÁZKY KE KAPITOLE... 55 6 GOOGLE API... 57 6.1 GOOGLE CHART TOOLS... 57 6.1.1 Image Charts... 57 6.1.2 Google Chart Tools... 63 6.2 GOOGLE MAPS API FAMILY... 70 6.2.1 Google Maps JavaScript API V3... 70 6.2.2 Pridávanie obsahu do máp... 73 6.2.3 Static Maps API... 75 6.3 SAMOSTATNÁ PRÁCA... 76 6.4 SHRNUTÍ... 76 6.5 OTÁZKY KE KAPITOLE... 77 7 XML TECHNOLOGIE... 79 7.1 XML ZNAČKY... 79 7.2 UNIVERZÁLNOSŤ XML... 80 7.2.1 XML oddeľuje dáta od ich prezentácie... 80 7.2.2 Pravidlá tvorby XML dokumentu... 81 7.3 SPRACOVANIE XML DOKUMENTU... 83 7.4 NAČÍTANIE XML SÚBORU POMOCOU PHP... 87 7.5 SHRNUTÍ KAPITOLY... 88 7.6 OTÁZKY KE KAPITOLE... 88 LITERATURA... 89

1 JAVASCRIPT, charakteristika a lexikální elementy Obsah kapitoly 1.1 Úvod 1.2 Základní charakteristiky 1.2.1 Strukturované datové prvky a objekty 1.3 Samostatná práce 1.4 Kontrolní otázky 1.5 Shrnutí Cíle kapitoly: Seznámit studenty se základními objekty prostředí javascriptu, tak aby byly schopni pracovat se základními objekty a dokázali z nich vytvořit systém pracující v prostředí internetu. Pomocí objektů realizovat dynamické chování WWW stránek podle zadaných požadavků. Klíčová slova: Albert; array; date; math; událost; objekt; metoda. Další informace http://www.w3s chools.com/js/de fault.asp 1.1 Úvod JavaScript Javascript je scriptovací jazyk, který dovoluje rozšíření HTML stránky o programovací možnosti. Veškerá komunikace s objekty probíhá na straně klienta a není nutná na různé události od uživatele. Dovoluje vytvářet funkce které zpracovávají data získaná převážně z formuláře HTML stránky a provádět s nimi potřebnou manipulaci jako jsou výpočty nebo získání potřebných informací pro další rozhodování. Projekt javascript základní schema rozložení HTML stránky s vložením javascriptu Jednotlivé objekty vytvářejí hierarchii na kterou se odkazujeme tečkovou notací. Práce s proměnnými je zjednodušená v tom, že není nutné provádět deklaraci proměnných a je možné s nimi okamžitě pracovat. Nevýhodu je, že se jedná o interpretační jazyk a ne o kompilační jazyk a proto není rychlost zpracováná scriptu vysoká. Vložení scriptu do HTML stránky se provádí v části HEAD hlavičky stránky: <html> <head> <script language="javascript">  </script> </head>... 7

Z příkladu je zřejmé, že jednotlivé funkce jsou vloženy mezi tagy <script>... </script> Značka v HTML <!- ignorování pokud prohlížeč neumí javascript //-> - ukončení Jinou variantou je vložení scriptu do samostatného souboru: <SCRIPT SRC="PROG1.JS"></SCRIPT> 1.2 Základní charakteristiky příkazy na jednom řádku odděleny středníkem ASCII kod vestavěné objekty tvoří jádro systému řízeného událostmi 1.2.1 Strukturované datové prvky a objekty pole - práce s prvky studenti = new Array(30) studenti[0]="petr" studenti[1]="pavel"... index od 0 do 29 objekt různého datového typu podle přiřazení pocet = studenti.length zjistí počet prvků pole Vložení elementů javascriptu a jejich aplikace v programu for(i=0;i<pocet;i++) document.write(studenti[i]+"<p>" pole inicializace studenti=new Array("Petr","Pavel","Jirka") různé datové typy v jediném poli, jazyk rozezná typ podle druhu vkládané hodnoty x=new Array("Petr",14.02,prom1,"Pavel") x[4]=prom2 vložení dalšího prvku pole Práce s datumem var Den = new Date() dnes = Den.getDay() Práce s matematickými funkcemi výpočty funkcí Objekt Math x=math.sin y=math.cos trigonometrické funkce 8

z=math.sqrt druhá odmocnina k=math.random() -nahodne číslo l=math.round -odřízne desetinou část čísla Další funkce objektu MATH jsou v tabulkách Metody: Metoda význam příklad abs(x) absolutní hodnota exp(x) e na ixtou x=1; y = Math.exp(x) // vrátí e log(x) přirozený logaritmus z x max(x,y) maximum, větší ze dvou hodnot a = Math.max(20,50);//vrátí 50 min(x,y) minimum, menší ze dvou hodnot pow(a,x) a na ixtou random() náhodné číslo mezi 0 a 1 kostka = Math.ceil(Math.random()*6) sqrt(x) odmocnina zaokrouhlování Metoda význam příklad ceil(x) zaokrouhlení nahoru dan = Math.ceil(314.19) // vrátí 315 floor(x) zaokrouhlení dolů plat = Math.floor(7123.47) // vrátí 7123 round(x) zaokrouhlení aritmetické cestina = round(3.503) // vrátí 4 goniometrické funkce Metoda acos(x) asin(x) atan(x) význam arcus cosinus arcus sinus arcus tangens atan2(x,y) úhel v radiánech od osy x do bodu x,y cos(x) sin(x) tan(x) cosinus sinus tangens Všechny úhly jsou naštěstí v radiánech. 9

Matematické konstanty konstanta Math.E Math.LN10 Math.LN2 Math.LOG10E Math.LOG2E Math.PI Math.SQRT2 význam e, Eulerova konstanta přirozený logaritmus z deseti přirozený logaritmus ze dvou desítkový logaritmus z e dvojkový logaritmus z e pí, Ludolfovo číslo odmocnina ze dvou Math.SQRT1_2 odmocnina z jedné poloviny objekt Image - obrázek imagejmeno=new Image([sirka],[vyska] <IMG parametry> přístup k vlastnostem o obrazek=new Image o obrazek.src="karta.gif" možnost použití polí o document.images[0]... objekt Area vytvoření obrazové mapy události použité ve formuláři při zjištění akce uživatele onmouseover jsme-li kurzorem nad definovanou oblastí onmouseout - akce jsme-li mimo oblast HREF - odkaz na URL pokud klikneme myší na aktivní plochu COORDS="x1,y1,x2,y2,..." - rozměr aktivní plochy <AREA SHAPE=RECT COORDS="25,0,50,25" HREF="mapa.html" onmouseover="window.status=jste na mape,;return true"> Formuláře - práce s nimi funkce ošetřující události umístit vždy do hlavičky <HEAD> akce a udalosti jsou v poli <INPUT> Události onclick - tlačítko,(i zaškrtávací) onblur,onfocus,onchange 10

Seznamy,textové pole, pole textové plochy onselect - textové pole, pole text plochy Příklad: function prazdne(pole) if (pole.value=="")return true; else return false;... HTML soubor obsahuje <FORM NAME="formular" <INPUT TYPE="Text" NAME="datum" onblur="prazdne(this.form.datum)" > </FORM> Další události jsou uvedeny v tabulce použit zdroj www.jakpsatweb.cz/javascript Přehled uživatelských událostí Události okna a dokumentu: Událost Popis Lze použít na onload při úplném načtení stránky body, img IE3 Nefunguje v Události javascriptu na HTML stránce onunload při opouštění stránky body IE3 onresize při změně velikosti okna body IE3, NN3 onscroll při skrolování, posouvání obsahu body, textarea, cokoli s overflow IE3 Události myši Událost Popis Lze použít na Nefunguje v při kliknutí na prvek onclick nebo při přednastavené akci všechny elementy, ondblclick při dvojkliku na prvku v 4. verzích prohlížečů IE3, NN3 ale jenom některé onmouseover při najetí myší na prvek IE3 onmouseout při odjetí z prvku IE3 11

onmousemove onmousedown onmouseup při pohybu myši nad prvkem při stisknutí tlačítka nad prvkem při uvolnění tlačítka nad prvkem IE3, NN3 IE3, NN3 IE3, NN3 Události klávesnice Událost Popis Lze použít na Nefunguje v onkeypress při stisknutí klapky ve chvíli, kdy je element aktivní IE3, NN3 onkeydown při stlačení klapky ve chvíli, kdy je element aktivní asi cokoliv IE3, NN3 onkeyup při uvolnění klapky ve chvíli, kdy je element aktivní IE3, NN3 Události formuláře a formulářových polí Událost Popis Lze použít na Nefunguje v onsubmit těsně před odesláním formuláře, form IE3 onreset při vynulování formuláře tlačítkem reset form IE3 onfocus při aktivaci políčka (okna) input, select, textarea, window onblur při deaktivaci políčka (okna) input, select, textarea, window onchange při změně hodnoty políčka input, textarea select, onselect při výběru jiné hodnoty v selectu nebo při vybrání textu myší select, body (výběr textu) výběr textu nefunguje v IE3 a NN* Další události Událost Popis Lze použít na Popora onabort při přerušení načítání imb IE3 12

Další události pro Internet Explorer 4 a vyšší (možná fungují v Mozille, ale v Netsapu určitě ne): onback - při stisknutí tlačítka "ZPĚT" oncopy - při kopírování do schránky "Ctrl+C" oncut - při vyjmutí do schránky "Ctrl+X" onforward - při stisknutí tlačítka "VPŘED" onhelp - při volání nápovědy, např "F1" onmousedrag - při pohybu myši se stisknutým tlačítkem onmousewheel - při rolování kolečkem onmove - při pohybu okna prohlížeče onpaste - při vkládání ze schránky "Ctrl+V" Události okna a dokumentu Událost Popis Lze použít na Nefunguje v onload při úplném načtení stránky se všemi objekty body, img IE3 onunload při opouštění stránky body IE3 onresize při změně velikosti okna body IE3, NN3 onscroll při skrolování, posouvání obsahu body, textarea, cokoli s overflow IE3 COOKIES trvalé baličky dat uložené na počítači klienta s možností pozdějšího volání ze strany serveru Výhody: identifikace hesla informace o zákazníkovi výsledky testů pro pozdější použití Konstrukce Cookies: Set-Cookies: NAME=Value; EXPIRES=Date; PATH=Path; DOMAIN=Domain-Name; Secure NAME - znakový identifikační řetězec EXPIRIES - datum odstranění COOKIES ze souboru PATH - místo uchování dokumentu DOMAIN - jméno domény serveru secure - nepovinný parametr - zabraňuje přenosu přes bezpečnostní kanál Vkládání a získávání informací ze souboru COOKIES: funkce SetCookies() GetCookies() s parametry SetCookie(Cookiel.form.UserName.value,xDate) - vlastní proměnné formuláře data jsou uložena v souboru cookie.txt (MagicCookie) adresář WINDOWS textový soubor s možností editace form.name.value=getcookieval("cookiel"); 13

1.3 Samostatná práce Navrhněte, které prvky použijete pro tvorbu stránky, která se bude zabývat matematickými výpočty charakteru výpočtu matic a jejich základními operacemi. Navrhněte datovou strukturu a způsob výpočtu. Nakreslete vývojový diagram pro násobení dvou matic. 1.4 Kontrolní otázky 1) Jaké události vznikají na formuláři oři práci uživatele. 2) Jak definujeme pole a jak jsou realizovány indexy pole. 3) Které funkce jsou použity pro práci s datumem. 4) Které funkce lze použít pro výpočet goniometrických funkcí. 1.5 Shrnutí Javascript je interpretační jazyk, který dovoluje pracovat s objekty formuláře pomocí jednotlivých metod a událostí od uživatele. Pro práci se strukturovaným typem proměnných používáme pole. Pro matematické výpočty je k dispozici skupina funkcí objektu MATH, které jsou uvedeny v tabulce. 14

2 JAVASCRIPT vstup a výstup dat Obsah kapitoly 2.1 Objekty tlačítek a funkcí alert 2.2 Vědecko technický výpočet 2.3 Práce s objektem textového pole 2.4 Samostatná práce 2.5 Kontrolní otázky 2.6 Shrnutí Cíle kapitoly: Ukázat student různé varianty vstupů a výstupů, které jsou realizovány pomocí WWW stránek. Pro práci s jednotlivými hodnotami jsou použity funkce, které ukazují na možnosti zpracování dat číselného charakteru i dat ve tvaru textových řetězců. Postupně na příkladech se studenti seznámí s objekty formuláře a metodami, které s těmito objekty pracují. Klíčová slova: Alert; confirm; onclick; while; for; if; else; write; parsefloat; check; radio. Vstup a výstup je realizován pomocí objektů, kterými jsou nejčastěji samotné okno prohlížeče s jednotlivými prvky, nebo objekty formuláře k tomu určené, např. editační okno, rozbalovací okna a podobně. Výpis dat v okně dokumentu - ukázka povelů document.writeln("ahoj") -výpis textu na obrazovku formuláře document.write("text <P>") -využití formátovacích tagů HTML jazyka Výpis textu v dialogovém okně alert("vypis dat") OK button - výpis v dialogovém okně confirm("souhlas A/N") - vypis s možností vběru buď OK nebo CANCEL vrací hodnotu true nebo false Vstup a výstup dat z programu v javascriptu využívá okna windows ret=window.prompt(string,input) window.status="akce projekt" - vstup řetězce s nápovědou - vložení textu do okna status /dole/ Funkce JavaScriptu Funkce jsou hlavní částí jazyka a dovolují realizovat běh programu, který je řízen aktivitou uživatele. Způsob zápisu funkce: function nazev(prom) povely provedení podprogramu reagujícího na určitou událost komunikuje s formulářem pomocí událostí od uživatele - volá funkce 15

Příklad události kliknutí myši na tlačítku: onclick= "funkce(this.form)" ukázka zápisu funkce bez použití vstupních parametrů function tlacitko1() alert("prvni!"); 2.1 Objekty tlačítek a funkcí alert Výukový cíl: Obr. 3.1: jednotlivých objektů tlačítek Schopnost studenta porozumět zpracování funkcí a vyvolání jednotlivých funkcí. Popis příkladu: Program je tvořen dvěma událostmi, ktré vyvolávájí dvě funkce. Jedná se o stisk tlačítka. Ve formuláři HTML stránky je zapsán tento text, který definuje tlačítka s akcí, která se má vykonat. <INPUT TYPE="button" VALUE="Stiskni prvni" onclick="tlacitko1()"> <BR> <INPUT TYPE="button" VALUE="Stiskni druhe" onclick="tlacitko2()"> Každé tlačítko vyvolá samostatnou funkci, která je definována v části hlavičky HTML stránky. Ve funkci se pouze zobrazí dialogové okno s nápisem "prvni!" nebo "druhe!". Je zde znázorněna vazba tlačítka a funkce. <html> <head> <title>projekt javascript jp1</title> <script language="javascript">  </script> </head> <body> 16

<h1> tlacitka </h1> <FORM NAME="HODNOTY"> <INPUT TYPE="button" VALUE="Stiskni prvni" onclick="tlacitko1()"> <BR> <INPUT TYPE="button" VALUE="Stiskni druhe" onclick="tlacitko2()"> </FORM> </body> </html> Řízení běhu programu v JavaScriptu - řídící příkazy Tyto příkazy dovolují vytvořit potřebný algoritmus pro zpracování dat. Dovolují větvit program a provádět opakovanou činnost. Zpracování podmínky má tutot syntaxi jazyka: v programu if (podm) povely else povely if (x == 10) x=y+5; else x=y-9; Zpracování cyklu vypadá následovně: cyklus typu for pro opakovanou činnost for (i=0;i < 10; i++) povely cyklus typu while while(podminka) povely Použití break; continue pro ovládání běhu cyklu (jakoc jazyk) Použití operátorů a převody dat operátory / podobné jako C - jazyk/ + - * / % ~ aritmetické && == < >! logické priorita s použitím závorek pozor na porovnávací operátor převod řetězce na číslo se provede funkcí x=parsefloat( 345.2 ) proměnnou nemusíme deklarovat hodnota v závorce je textový řetězec samotný výpočet plochy kruhu plocha=x*x*3.14/4 17

2.2 Vědecko technický výpočet Výukový cíl: Schopnost pochopit způsob práce s proměnnými a realizovat výpočet hodnot na obrazovku ve formě tabulky. Obr.3.2. Zobrazení výstupu do okna tabulky výpočtu průměru plochy kruhu Ukázka programového řešení výpočtu je vytvořením algoritmu v tomto jazyce Popis příkladu: Program používá pouze jednu funkci kruh() ve které je naprogramován cyklus pro výpis tabulky, nejprve se tiskne průměr kruhu a pak jeho plocha. Výpočet je proveden přímo ve funkci, která tiskne hodnoty na obrazovku.výpis hodnoty se provede pomocí metody document.write v okně html stránky. for (i=0;i<10;i++) document.write(i+" -> "+ i*i*3.14/4 +"<BR>") Všimnětě si, že je možné vložit tag +"<BR>", který provede zalomení řádku a provede tak určité formátování, které je podporováno HTML stránkou. Spuštění výpisu se provede kliknutím na tlačítku: <INPUT TYPE="button" VALUE="10 vypocet" onclick="kruh()"> Nápis na tlačítku je v příkazu VALUE a kterou funkci zavoláme je napsáno za textem oncllick=... Celý HTML zápis vypadá následovně: <html> <head> <title>projekt javascript jp</title> <script language="javascript"> <!-- Hiding function kruh() for (i=0;i<10;i++) document.write(i+" -> "+ i*i*3.14/4 +"<BR>") 18

// --> </script> </head> <body> <h1> Kruh </h1> <FORM NAME="HODNOTY"> <BR> <BR> <INPUT TYPE="button" VALUE="10 vypocet" onclick="kruh()"> </FORM> </body> </html> 2.3 Práce s objektem textového pole Výukový cíl: Schopnost pochopit způsob práce s textovým polem.. Dále pochopit vazbu mezi názvem pole a proměnnou používanou ve funkci. Obr. 3.3 Zobrazení vstupního editačního okna Popis příkladu: Program používá dvě funkce kde první ukazuje na způsob práce s povelem alert a confirm. function tlacitko1() alert("prvni tlacitko"); povel=confirm(" pracujes A/N ") if (povel) alert ("to je dobre") else alert ("to je spatne pokud spis") Do proměnné povel se dostane hodnota, kterou uživatel vložil při povelu confirm což je standardní dialogové okno ve WINDOS. V této funkci nejsou použity žádné hodnoty ze vstupního formuláře. Druhá funkce pracuje s editačním polem, které je definaváno ve formuláři povelem: <INPUT TYPE="button" VALUE="akce2" onclick= "tlacitko2(this.form)"> Všimněte si zvýrazněného parametru, který ukazuje, že funkci předáváme 19

všechny objekty formuláře. Popis funkce pak vypadá následovně: function tlacitko2(f) alert(f.edice1.value); Zvýrazněná část f.edice1.value ukazuje na způsob páce s hodnotou v editačním poli s názvem edice1. Hodnota je považována za text. Celá část HTML kódu vypadá následovně: Výukový cíl: <html> <head> <title>projekt javascript jp1</title> <script language="javascript">  </script> </head> <body> <h1> tlacitka a vstupy dat </h1> <FORM NAME="HODNOTY"> <INPUT TYPE="button" VALUE="Stiskni prvni" onclick="tlacitko1()"> <BR> Zadani textu v okne <INPUT TYPE="text" NAME="edice1" > <INPUT TYPE="button" VALUE="akce2" onclick= "tlacitko2(this.form)"> </FORM> </body> </html> Cílem je seznámit se s možnostmi práce s více editačními poli a předávání dat mezi nimi 20

Obr. 3.4. Dvě vstupní editační okna Popis příkladu: Ukázka je zaměřena na vysvětlení práce se dvěma editačními poli, jeichž hodnty představují dva txtové řětězce, ktere sečteme dohromady, vznikne jeden spojený řětězec. Jako operátor sečtení se používá znamenko +. Dále jsou oba řětězce porovnávány zda jsou shodné. function secti(f) alert(f.edice1.value + f.edice2.value); if (f.edice1.value == f.edice2.value) alert("jsou stejne") Princip předání parametru funkci je stejný jako v předcházejícím příkladu a funkce je volána opět po stlačení tlačítka. Celá část HTML kódu vypadá následovně: <html> <head> <title>projekt javascript </title> <script language="javascript">  </script> </head> <body> <h1> tlacitka a vstupy dat </h1> <FORM NAME="HODNOTY"> <BR>Prvni <INPUT TYPE="text" NAME="edice1" > <BR>Druhy <INPUT TYPE="text" NAME="edice2" > 21

<INPUT TYPE="button" VALUE="sectu retezce" onclick="secti(this.form)"> </FORM> </body> </html> Úkol: Doplňte další editační boxy a proveďte sečtení 4 textových řetězců. Výukový cíl: Cílem je seznámit se s možnostmi výpočtu prováděného ze vstupního editačního pole a převody dat mezi textem a číslem. Obr 3.5. ukázka výpočtu plochy kruhu Popis příkladu: Příklad ukazuje způsob práce s proměnnými formuláře a provedení výpočtu plochy kruhu při zadáni průměru kruhu. Průměr je zadán v objektu edice1 a výsledek bude vložen do objektu edice2. function kruh(f) x=parsefloat(f.edice1.value) plocha=x*x*3.14/4 alert(plocha) f.edice2.value=plocha Proměnné plocha a x nemusíme definovat. Výslednou hodnotu v proměnné plocha můžeme přímo přiřadit do objektu edice2.value. Celá část HTML kódu vypadá následovně: <html> <head> <title>projekt javascript jp</title> <script language="javascript"> <!-- Hiding 22

function kruh(f) x=parsefloat(f.edice1.value) plocha=x*x*3.14/4 alert(plocha) f.edice2.value=plocha // --> </script> </head> <body> <h1> Kruh </h1> <FORM NAME="HODNOTY"> <BR> Prumer <INPUT TYPE="text" NAME="edice1" > <BR> Plocha <INPUT TYPE="text" NAME="edice2" > <BR> <INPUT TYPE="button" VALUE="vypocet" onclick="kruh(this.form)"> </FORM> </body> </html> Práce s výběrovými objekty dovoluje další varice s prvky ve formuláři Výukový cíl: Cílem je seznámit se s možnostmi zaškrtávacích boxů radiobutton a checkbox. Popis příkladu: Jsou zde dvě skupiny vytvořené ve formuláři. Radiobuttony jsou označeny poloha a pomocí indexu testujeme jednotlivé stavy. CheckBoxy jsou testovány pomocí vlastnosti objektu.checked zda je true nebo false. Obr 3.6. ukázka použití objektů radio a checkbox Důležitou částí je označení objektu radio, který vytváří skupinu. Jednotlivé prvky ve skupině se označují indexem pole. Pro vyhodnocení se používá metoda checked. 23

if( f.poloha[0].checked==true) alert("radio 1"); if( f.poloha[1].checked==true) alert("radio 2"); if( f.poloha[2].checked==true) alert("radio 3"); Ve formuláři je objekt pojmenován stejným jménem a záleží na pořadí řádku pro vytvoření indexů. <INPUT TYPE="radio" name="poloha" value="a1" > akce1<br> <INPUT TYPE="radio" name="poloha" value="a2" > akce2<br> <INPUT TYPE="radio" name="poloha" value="a3" > akce3<br> pro check boxy je situace jiná protože každý má své jméno samostatně <INPUT TYPE="checkbox" name="c1" value="1" > zbozi 1<BR> <INPUT TYPE="checkbox" name="c2" value="2" > zbozi 2<BR> vyhodnocení je také bez použití indexů jen určením jména if( f.c1.checked==true) Celý kód HTML je následující <html> <head> <title>projekt javascript jp1</title> <script language="javascript">  </script> </head> <body> <h1> radio tlacitka a check boxy</h1> <FORM NAME="HODNOTY"> <INPUT TYPE="button"VALUE="Stiskni pro radio" onclick="tlacitko1(this.form)"> <BR> <INPUT TYPE="radio" name="poloha" value="a1" > akce1<br> <INPUT TYPE="radio" name="poloha" value="a2" > akce2<br> <INPUT TYPE="radio" name="poloha" value="a3" > akce3<br> <BR> <INPUT TYPE="button"VALUE="Stiskni pro zbozi" onclick="tlacitko2(this.form)"> <BR> 24

<INPUT TYPE="checkbox" name="c1" value="1" > zbozi 1<BR> <INPUT TYPE="checkbox" name="c2" value="2" > zbozi 2<BR> </FORM> </body> </html> Výukový cíl: Cílem je seznámit se s možnostmi práce s jednotlivými znaky řetězce a porovnávat je mezi sebou případně vyhodnotit. Popis příkladu: Příklad popisuje variantu testování jednotlivých znaků řetězce zadaného v textovém poli v cyklu. for (var i=0; i< delka; i++) znak = ret.substring(i,i+1) if (znak=='a') alert ('a') Dále jsou porovnávány znaky zda obsahuje řetězec písmeno a. Obr 3.7. ukázka použití řetězce pro zjištění počtu znaků Všimněte si způsobu zjištění délky řetězce pomocí vlastnosti objektu length. var ret = f.edice1.value var delka= ret.length Důležitá je funkce provýběr určitého počtu znaků do podřetězce ret.substring(počátek,konec) počátek určuje index počátečního znaku konec určuje index konečného znaku Celý kód vypadá následovně: <html> 25

<head> <title>projekt javascript jp1</title> <script language="javascript">  </script> </head> <body> <h1> Výpočty s řetězcem </h1> <HR> <FORM NAME="HODNOTY"> <INPUT TYPE="text" NAME="edice1" VALUE=""> <INPUT TYPE="button" VALUE="Stiskni" onclick="testuj(this.form)"> </FORM> </body> </html> Popis dalších příkladů k procvičení získaných znalostí: Popis příkladů: JS1 - použití tlačítka a výpis do dial.okna - alert JS2 - sečtení dvou hodnot z edit boxů a porovnání shodnosti JS3 - kopírování mezi dvěma textovými poli JS3x - provedení funkci po opuštění textového pole OnBlur JS4 - výpočet obvodu a plochy kruhu - převod na číslo JS5 - použití radiobuttonu - výběr varianty JS6 - práce s řetězcem - testování jednotlivých znaků JS7 - práce s řetězcem - testování zda obsahuje číslici KALK1 - ukázka kalkulátoru QUIZ - ukázka kvízové otázky s radiobuttony Jednotlivé příklady ukazují jen určitou oblast zpracování skriptů. Pro konkrétní řešení je vhodné nalézt potřebný skript a modifikovat jej podle vlastních potřeb. 2.4 Samostatná práce Ukázat student různé varianty vstupů a výstupů, které jsou realizovány pomocí WWW stránek. Pro práci s jednotlivými hodnotami jsou použity funkce, které ukazují na možnosti zpracování dat číselného charakteru i dat ve tvaru textových 26

řetězců. Postupně na příkladech se studenti seznámí s objekty formuláře a metodami, které s těmito objekty pracují. 2.5 Kontrolní otázky 1) Jak se realizují výstupy do dialogového okna a jak do nového samostatného okna prohlížeče. 2) Jak lze formátovat výsledné výpočty do tabulky s barevným zvýrazněním objektů. 3) Jak se provedou převody mezi čísly a řetězci ze vstupních polí formuláře. 4) Jak se pracuje s objekty radio při vytváření více skupin na WWW stránce. 5) Jak lze kontrolovat vstupní data formuláře po jednotlivých znacích. 2.6 Shrnutí Práce ze vstupem dovoluje poměrně rozsáhlé operace se vstupními objekty formuláře, kterými jsou převážně editační boxy. Lze vyhodnocovat jednotlivé znaky řetězců a provádět mezi nimi řetězové operace sečtení hodnot. Pro číselné operace se používají převodové funkce řetězce na číslo float, které je dostatečně přesné pro výpočet hodnot. 27

3 Aplikace PHP a javascript Obsah kapitoly 3.1 PHP soubory a javaskript Cíl kapitoly: PHP. Popsat vazbu mezi formuláři HTML kodu a PHP skriptu při předávání parametrů. Klíčová slova: HTML form, metoda GET, metoda POST, soubory otevření, soubory čtení, Aplikace PHP jako příklad dynamické WWW stránky 3.1 PHP soubory a javaskript Zadání: Program čte jednotlivé řádky textového souboru a zobrazuje data ve formě tabulky. Jednotlivé položky dat jsou odděleny středníkem. První sloupec představuje jméno a druhý sloupec obrázek. Ukázka souboru jmena.txt Monika;monika.jpg Jana;jana.jpgKarolina;karolina.jpg;150x120 Eva;eva.jpgKlara;klara.jpg Programové řešení soubor jmena.php Obr. Ukázka WWW stránek <?php echo "<table border=1>"; $fd=fopen("jmena.txt","r"); //otevreni pro cteni while(!feof($fd)) //test konce souboru $radek=fgets($fd); //cteni 1 radku 29

$data=split(';',$radek); echo "<tr><td>$data[0] "; echo "<td><a href=$data[1] ><img src= $data[1] width=50> </a> </tr>"; fclose($fd); //uzavreni souboru echo "</table>";?> Aplikace PHP s algoritmem vyhledávání v souboru Důležitá místa programu Přečtení 1 řádku ze souboru $radek=fgets($fd); //cteni 1 radku Rozdělení podle separátoru čárka do pole $data $data=split(';',$radek); Program čte jednotlivé řádky ze souboru dokud není konec souboru Zadání: Upravme předcházející příklad na čtení dat ze souboru tak, že třetí sloupec bude text zakodovaný pomocí qr kodu jako obrázek Ukázka souboru jmena.txt Monika;monika.jpg;monika_je_hezka_slecna Jana;jana.jpg;pomocny_text Karolina;karolina.jpg;text_kodu Eva;eva.jpg;xxx Klara;klara.jpg;xxx Programové řešení soubor jmena_qr.php <?php echo "<table border=1>"; $fd=fopen("jmena.txt","r"); //otevreni pro cteni while(!feof($fd)) //test konce souboru $radek=fgets($fd); //cteni 1 radku 30

$data=split(';',$radek); echo "<tr><td>$data[0] "; echo "<td><a href=$data[1] ><img src= $data[1] width=80> </a>"; echo "<td><img src=http://qrcode.kaywa.com/img.php?s=8&d=$data[2] width=80> </tr>"; fclose($fd); //uzavreni souboru echo "</table>";?> Zadání Doplnění předcházejícího skriptu o zadaní jména, které chceme vyhledat pomocí formuláře v HTML kodu. Vyhledání je tím způsobem, že můžeme zadat počáteční písmena jména, které chceme vyhledat nezávisle zda malá nebo velká písmena. Ukázka Html souboru vloz_jmeno.html <html> <head> <title>projekt</title> </head> <body> <h1> Vyhledani dle jmena </h1> <FORM NAME="HODNOTY" action="jmena_qrs.php" method="post"> <BR> zadej jmeno: <INPUT TYPE="text" NAME="hledej" > <BR> <INPUT TYPE="submit"> </FORM> </body> </html> Soubor skriptu jmena_qrs.php <?php $jmeno=$_post['hledej'];; 31

echo "<table border=1>"; $fd=fopen("jmena.txt","r"); //otevreni pro cteni while(!feof($fd)) //test konce souboru $radek=fgets($fd); //cteni 1 radku $data=split(';',$radek); $pom=substr($data[0],0,strlen($jmeno));//pomoc ret if ( strtolower($jmeno)==strtolower($pom) ) //vyhledani dle jmena echo "<tr><td>$data[0]"; echo "<td><a href=$data[1] ><img src= $data[1] width=80> </a>"; echo "<td><img src=http://qrcode.kaywa.com/img.php?s=8&d=$data[2] width=80> </tr>"; fclose($fd); //uzavreni souboru echo "</table>";?> Zadaní: Doplnění přdcházejícího příkladu o test pomocí javascriptu zda je zadán text <head> <title>projekt</title> <script language="javascript">  </script> </head> <body> <h1> Vyhledani dle jmena </h1> <FORM NAME="HODNOTY" action="jmena_qrs1.php" method="post"> <BR> zadej jmeno: 32

<INPUT TYPE="text" NAME="hledej" > <BR> <INPUT TYPE="button" VALUE="posli" onclick="testuj(this.form)"> </FORM> </body> </html> Ve skriptu php použijeme metodu GET pro přebrání parametru, který dodá javasript ve funkci Windows.open. <?php $jmeno=$_get['hledej'];; echo "<table border=1>"; $fd=fopen("jmena.txt","r"); //otevreni pro cteni while(!feof($fd)) //test konce souboru $radek=fgets($fd); //cteni 1 radku $data=split(';',$radek); $pom=substr($data[0],0,strlen($jmeno));//pomoc ret if ( strtolower($jmeno)==strtolower($pom) ) //vyhledani dle jmena echo "<tr><td>$data[0]"; echo "<td><a href=$data[1] ><img src= $data[1] width=80> </a>"; echo "<td><img src=http://qrcode.kaywa.com/img.php?s=8&d=$data[2] width=80> </tr>"; fclose($fd); //uzavreni souboru echo "</table>";?> Modifikace zadání: skupinový úkol: realizujte projekt evidence knih autor,kniha,cena,obrázek práce s textovým souborem 10 záznamů zobrazení v tabulce,autor,kniha,cena,obrázek knihy,obrázek qr kodu z ceny 33