NSWI142 Webové aplikace Zkouškový test

Podobné dokumenty
Formuláře. Internetové publikování. Formuláře - příklad

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace

NSWI096 - INTERNET JavaScript

Maturitní otázky z předmětu PROGRAMOVÁNÍ

Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

Návrh a tvorba WWW stránek 1/8. Formuláře

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Nová struktura souborů a složek

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

1 Webový server, instalace PHP a MySQL 13

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

12. Základy HTML a formuláře v HTML

TNPW1 Cvičení aneta.bartuskova@uhk.cz

(X)HTML, CSS a jquery

HTML - Úvod. Zpracoval: Petr Lasák

Úvodem 9. Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10. Než začneme 11

Internet cvičení. ZS 2009/10, Cvičení 3., Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP

Internet cvičení. ZS 2009/10, Cvičení 4., PHP. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP

Programování v jazyce JavaScript

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);

PHP - úvod. Kapitola seznamuje se základy jazyka PHP a jeho začleněním do HTML stránky.

1. Webový server, instalace PHP a MySQL 13

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

WEBsro.cz. Krok za krokem Založení internetového obchodu. krásné weby pro české podnikatele 1 / 9

Internetové technologie, cvičení č. 5

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY

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.

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Základy WWW publikování

DUM 14 téma: Interakce s uživatelem

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie

Vývoj Internetových Aplikací

MODERNÍ WEB SNADNO A RYCHLE

AJAX. Dynamické změny obsahu stránek

IE1 jazyk HTML a kaskádové styly

1. Úvod do Ajaxu 11. Jak Ajax funguje? 13

43 HTML šablony. Záložka Šablony v systému

13. Vytváření webových stránek

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

Část 1 Moderní JavaScript

IE1 jazyk HTML a kaskádové styly

Obsah. při vyšetření pacienta. GDT souboru do programu COSMED Omnia GDT souboru z programu COSMED Omnia a zobrazení výsledků měření v programu MEDICUS

Informační systém pro e-learning manuál

Tvorba webových stránek

Ředitelství silnic a dálnic CR. odbor Silniční databanky a Národního dopravního informačního centra (ND1C) Slovenská 1142/7, Ostrava-Přívoz, PSČ 70200

Obsah. Předmluva Kapitola 1 Úvod 1. Web v kostce 1 Kdo je webmaster? 4 Doporučená literatura 4. Kapitola 2 Přehled jazyka HTML 5

Databázové aplikace pro internetové prostředí PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku

Tvorba webových stránek

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 informačních systémů

NSWI096 - INTERNET. Úvod do HTML

ZP API V1.0 Návod pro vývojáře SW

Programování v jazyce JavaScript

HTML Hypertext Markup Language

INFORMAČNÍ SYSTÉMY NA WEBU

Počítačová Podpora Studia. Přednáška 5 Úvod do html a některých souvisejících IT. Web jako platforma pro vývoj aplikací.

Software pro vzdálenou laboratoř

Vstupní požadavky, doporučení a metodické pokyny

Platební systém XPAY [

RESTful API TAMZ 1. Cvičení 11

DUM 06 téma: Tvorba makra pomocí VBA

Internet 2 css, skriptování, dynamické prvky

Tvorba stránek v HTML ve Wordu

První přihlášení do Registru zdravotnických prostředků pro novou osobu

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www

Knihovna RecDBXLib ZÁZNAMY V DATABOXU TXV

Úvod do aplikací internetu a přehled možností při tvorbě webu

Webová stránka. Matěj Klenka

XHTML 1. Formuláře. Element form. <form>... </form>

Ajax - úvod. Klíčové pojmy: Ajax, skriptování na straně klienta a serveru, objekt XMLHttpRequest, DOM model.

Střední odborná škola a Střední odborné učiliště, Hořovice

FAKULTA INFORMAČNÍCH TECHNOLOGIÍ SPOLEČNOST DECADIC PROJEKT FRAMETRIX

Uživatelská příručka pro respondenty

Uživatelská příručka 6.A6. (obr.1.)

Pascal. Katedra aplikované kybernetiky. Ing. Miroslav Vavroušek. Verze 7

Úvodem Seznámení s HTML Rozhraní Canvas... 47

Uživatelská příručka pro respondenty

EVROPSKÝ SOCIÁLNÍ FOND. Úvod do PHP PRAHA & EU INVESTUJEME DO VAŠÍ BUDOUCNOSTI

Uživatelská příručka SBOX

Vývoj Internetových Aplikací

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

CSS Stylování stránek. Zpracoval: Petr Lasák

DATABÁZE MS ACCESS 2010

Artlingua Translation API

================================================================================ =====

dovolují dělení velkých úloh na menší = dekompozice

Tvorba webových stránek

WAP. Jirka Kosek. IZI228 tvorba webových stránek a aplikací. Poslední modifikace: $Date: 2004/09/30 09:02:59 $ Copyright Jiří Kosek

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.

Instalace. Produkt je odzkoušen pro MS SQL server 2008 a Windows XP a Windows 7. Pro jiné verze SQL server a Windows nebyl testová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

Reliance 3 design OBSAH

Název Live prez Sear enta Maps

Principy fungování WWW serverů a browserů. Internetové publikování

PHP a Large Objecty v PostgreSQL

Transkript:

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ě formálního hlediska hodnotíme správnost odpovědí vzhledem k HTML5, CSS3, ECMAScriptu verze 5, PHP 5.3 (a novější, ne však PHP 7) a rozhraní, která jsou implementována v aktuálních verzích prohlížečů Firefox a Chrome. Pokud není uvedeno jinak, každá otázka je hodnocena jako celá dobře, nebo celá špatně. Z testu je možné získat až 100 bodů a tyto body jsou sečteny s body ze cvičení. Nejvýše můžete získat 15 bodů k testu navíc, záporné body nemají žádné omezení. Celkový počet bodů určuje výslednou známku takto: 91 bodů a více: výborně, 90 76 bodů: velmi dobře, 75 60 bodů: dobře, 59 bodů a méně: neprospěl(a). 1. Uvažujte následující příklad HTML5 kódu a rozhodněte, která z následujících možností je správně. [3 body] <article><h1>heading A</h1> <section><h1>heading B</h1> <section><h1>heading C</h1></section> <section><h1>heading D</h1></section> </section> </article> Heading A, B, C a D jsou nadpisy první úrovně, nebot je použit element <h1>. Pouze Heading A je nadpis první úrovně. Heading B je nadpis druhé úrovně, C a D jsou nadpisy třetí úrovně. Úroveň totiž určuje počet zanořených elementů <section>. Prohlížeč zobrazující HTML stránku nahlásí chybu, nebot HTML dokument není validní. 2. Uvažme následující HTML formulář. Formulář vhodně doplňte/upravte tak, aby byl obsah vyplněný uživatelem při kliknutí na tlačítko Odeslat odeslán skriptu na adrese http://example.cz/process.php a aby byly vyplněné hodnoty předány přímo v URL. <form> Name: <input type="text" name="firstname" /><br/> Surname: <input type="text" name="surname" /><br/> <input type="submit" value="send" /> </form> 3. Nakreslete, jak bude následující HTML kód zobrazen v prohlížeči. [5 bodů] <table> <tr> <td colspan="2">adult</td><td>2</td> </tr> <tr><td>a1</td><td>34</td> <td rowspan="2">2</td></tr> <tr><td>a2</td><td>32</td></tr> <tr> <td colspan="2">child</td><td>3</td> </tr> <tr><td>c1</td><td>4</td><td>1</td></tr> <tr><td>c2</td><td>8</td> <td rowspan="2">2</td></tr> <tr><td>c3</td><td>12</td></tr> </table>

4. K čemu slouží hodnota hidden atributu type HTML elementu <input>? Taková hodnota neexistuje a nelze ji tedy použít. Definuje vstupní pole formuláře, které není pro uživatele viditelné. Místo něj ukáže obvykle prohlížeč malou ikonku, na kterou uživatel může kliknout a tím dojde ke zobrazení celého pole. Definuje vstupní pole formuláře, které není pro uživatele viditelné a uživatel ani nemůže přímo měnit jeho hodnotu. Ta je přímo zakódována v HTML a může být měněna JavaScriptem na straně klienta. 5. Vyberte všechny fragmenty kódu, které nesplňují pravidla jazyka HTML. <table id=1><tr><td>martin</td></tr><tr><td>newman</td></tr></table> <table id="1"><tr><td>martin</tr></td><tr><td>newman</tr></td></table> <table id="1"><tr><td>martin<tr><td>newman</table> 6. Uvažme následující fragment HTML kódu. Hledáme co nejkratší CSS selektor, který zacílí všechna telefonní čísla uvedená uvnitř buňky tabulky. <ul> <li class="phone">777000000</li> </ul> <table> <tr><td>phone: </td><td><span class="phone">7771111111</span> (alternative: <i class="phone">777222222</i>)</td></tr> <tr><td>e-mail:</td><td class="email">css@guru.cz</td></tr> </table> Selektor: 7. Uvažme CSS selektor.phone. Pro tento selektor platí: [3 body].phone je ekvivalentní s [class~=phone]..phone je ekvivalentní s [class=phone]..phone nelze přímo opsat pomocí jiného CSS selektoru. 8. Která tvrzení platí pro následující CSS selector? tr:not(:nth-child(-n+1)):not(:nth-last-child(-n+1)) Selektor zacílí všechny liché řádky každé tabulky. Selektor zacílí první a poslední řádek každé tabulky. Selektor zacílí všechny řádky každé tabulky kromě prvního a posledního. Selektor nezacílí nic, protože pravidlo obsahuje spor. 9. Uvažme následující CSS pravidlo aplikované na element <div>ahoj</div>. Zakreslete na papír, jak bude tento element vizualizován prohlížečem. Pokuste se zachytit všechny určené okraje a naznačte jejich velikosti v pixelech. div { margin: 10px; padding: 2px 4px 2px 4px; border: 2px solid black; }

10. Napište CSS pravidlo, které posune nápis Hello v následujícím fragmentu HTML kódu o 5px nahoru vůči jeho normální pozici. [5 bodů] <div>let us say <span class="fiveup">hello</span> to everybody</div> CSS (včetně selektoru): 11. Pro proměnné v ECMAScriptu platí: [2 body/odpověd ] Mají pevně definovaný datový typ, který je daný typem hodnoty, která je do nich poprvé přiřazena. Deklarují se klíčovým slovem var. Nevyhrazují konkrétní místo v paměti, ale pouze vytváří pojmenovanou vazbu k existující hodnotě, která vznikla jako literál nebo výsledek výrazu. 12. Uvažme následující fragment ECMAScriptu. Po vykonání tohoto skriptu bude platit: [5 bodů] var foo = 1; function bara() { foo = 2; } function barb() { var foo = 3; } bara(); barb(); Existuje právě jedna proměnná foo, která má globální scope a hodnotu 3. Existuje jedna globální proměnná foo s hodnotou 2 a jedna lokální proměnná foo skrytá v uzávěru (closure) volání funkce barb(), takže k ní není možné nijak přistoupit. Existuje jedna globální proměnná foo s hodnotou 1 a jedna lokální proměnná foo skrytá v uzávěru (closure) volání funkce barb(), takže k ní není možné nijak přistoupit. Existuje jedna globální proměnná foo s hodnotou 2 a jedna lokální proměnná foo asociovaná s funkcí barb() (což je speciální typ objektu), ke které je možné přistupovat přes identifikátor funkce barb (t.j. jakožto k položce objektu barb). Globální proměnná foo při volání funkce bara() zanikne, protože je nahrazena lokální proměnou foo, přičemž lokální foo je odstraněna, protože neexistují reference dovnitř uzávěru (closure) funkce bara(). 13. Uvažme následující fragment HTML kódu. Při kliknutí myší kamkoli do oblasti ohraničené elementem div2, ale mimo element div3, zobrazí prohlížeč uživateli následující zprávy (zaškrtněte všechny možnosti, které jsou přípustné). <div id="div1"> <div id="div2"> <div id="div3">... </div></div></div> <script type="text/javascript"> document.getelementbyid("div1").onclick = function() { window.alert("div1 clicked"); document.getelementbyid("div2").onclick = function() { window.alert("div2 clicked"); document.getelementbyid("div3").onclick = function() { window.alert("div3 clicked"); </script>

div2 clicked div1 clicked, div2 clicked div1 clicked, div2 clicked, div3 clicked div1 clicked, div2 clicked, div3 not clicked div2 clicked, div1 clicked div3 clicked, div2 clicked, div1 clicked div1 clicked, div2 clicked, div1 clicked 14. Uvažme následující fragment HTML kódu. Napište fragment JavaScriptu, který nastaví barvu pozadí (pomocí CSS) elementu <div> s id="text" na červenou barvu. [5 bodů] <div id="text">... </div> JavaScript: 15. Uvažme modelovou situaci: Na webové stránce máme formulář, jehož úkolem je umožnit uživateli vložit novou položku do databáze. Formulář je zpracováván na straně klienta JavaScriptem a údaje z něj jsou odesílány pomocí asynchronního HTTP požadavku (AJAX) na server, kde je zpracuje PHP skript. Která z následujících tvrzení musí bezpodmínečně platit, pokud je celá aplikace naimplementována v souladu s normami? [2 body/odpověd ] Asynchronní HTTP požadavek je prováděn metodou POST (eventuálně PUT). PHP skript musí jako odpověd vygenerovat HTML stránku, která se zobrazí místo formuláře. Odesílaná data musí být kódována bud ve formátu XML, nebo ve formátu JSON. Skript na straně serveru nesmí data přímo uložit, pouze ověří, zda je možné data zapsat. Formulář musí být následně odeslán standardním způsobem (spuštěním jeho události submit). Během zpracování asynchronního požadavku může uživatel se stránkou libovolně interagovat, dokonce může způsobit, že prohlížeč začne načítat jinou stránku (kliknutím na odkaz, na tlačítko zpět,... ). 16. Které z následujících vlastnosti má protokol HTTP 1.1? [3 body] Pro každý požadavek navazuje nové TCP spojení a po obsloužení požadavku spojení ukončí. Protokol je bezstavový, každý požadavek zpracovává nezávisle na předchozích a souběžných dotazech. Protokol obsahuje podporu pro částečné dotazy (specifikující požadovaný rozsah bytů výsledného obsahu), aby bylo například možné navázat na přerušené stahování. 17. Mezi datové typy PHP patří: [1 bod/odpověd ] number integer string function boolean array 18. Řetězcové literály je v PHP možné zapisovat do uvozovek ("") nebo apostrofů ( ), přičemž platí: [2 body/odpověd ] Mezi těmito dvěma zápisy není žádný rozdíl, jedná se čistě o pohodlnost pro programátory. Mezi těmito dvěma zápisy není žádný rozdíl, avšak použití apostrofů je označené jako zastaralé a v některé z budoucích verzí PHP bude odstraněno (nemělo by se již používat). Při zápisu do uvozovek se nahrazují speciální escape sekvence (např. \n, \t,... ), které vkládají znaky, které by bylo obtížné/nemožné vložit jinak. Při zápisu do uvozovek se nahrazují proměnné (zapsané v syntaxi PHP) jejich obsahem.

19. Doplňte informace, které budou platné při spuštění skriptu index.php při zpracování HTTP požadavku s následujícím URL. [3 body/odpověd ] index.php?page=welcome&offset=10&item[0]=a&item[1]=b&item[2]=c&last= Kolik položek obsahuje pole $ GET? Jakého typu je položka/položky $ GET[ item ]? Jakou hodnotu jakého typu má položka $ GET[ last ]? 20. Máte fragment prokládaného HTML a PHP kódu. Jak bude vypadat výsledné HTML poslané klientovi? (Bílé znaky a přesné formátování neřešte.) <html><body> <ul> <?php $data = array("first", "second", "third"); for ($i = 1; $i < count($data); ++$i) {?> <li><?= $data[$i];?></li> <? }?> </ul> </body></html> Celkem bodů z maximálního počtu 100 bodů. Výsledná známka:.