JavaScript v praxi: Sokoban (5. přednáška)

Save this PDF as:
 WORD  PNG  TXT  JPG

Rozměr: px
Začít zobrazení ze stránky:

Download "JavaScript v praxi: Sokoban (5. přednáška)"

Transkript

1 JavaScript v praxi: Sokoban (5. přednáška)

2 Sokoban... Cíl Přesunout krabice tak, aby každá krabice byla na žlutém poli. Pravidla 1. Panáček se může pohybovat nahoru, dolů, doprava, doleva 2. Panáček může posunout krabicí ve směru pohybu, pokud je v tomto směru za krabicí volné místo.

3 Sokoban: Návrh Budeme potřebovat: Objekt reprezentující mapu Objekt reprezentující stav hry (hru) Funkci, která vykreslí mapu/aktuální stav Funkci, která bude upravovat stav v závislosti na uživatelském vstupu

4 Mapa 1 var level = { 2 0:[ W, W, W, W, W, W, W, W, W, W, 0 ], 3 1:[ W, 0, 0, X, X, X, X, 0, 0, W, 0 ], 4 2:[ W, 0, B, X, B,X, X, B,X, 0, 0, W, W ], 5 3:[ W, W, B, W, W, W, W, W, 0, 0, W ], 6 4:[ W, 0, 0, 0, 0, B, 0, 0, 0, 0, W ], 7 5:[ W, 0, 0, B, 0, B, 0, B, 0, S, W ], 8 6:[ W, 0, 0, W, W, W, W, W, W, W, W ], 9 7:[ W, W, W, W, 0, 0, 0, 0, 0, 0, O ], 10 } W stěna, 0 nic, X žluté políčko, B krabice, S panáček

5 Stav Hry Budeme chtít: uměl načíst mapu uměl vykreslit mapu 1 function game () { 2 this. loadmap = function ( mapa ) {... }; 3 this. drawplan = function ( htmlelement ) {... }; 4 this. moveleft = function () {... }; 5 this. moveright = function () {... }; 6 this. moveup = function () {... }; 7 this. movedown = function () {... }; 8 }

6 Kreslení Idea Zvolíme si nějaký div element (herní plán) do kterého budeme kreslit Každé prvek na mapě (krabice, stěna,...) bude odpovídat nějakému div elementu, který bude potomkem herního plánu. Umístění na plán zajistíme pomocí position:absolute; a css-vlastností top, left. O grafiku se bude starat css. <div id= HerniPlan style= position:relative; > <div class= stena style= position:absolute;top:0px; left:0px;width=10px;height=10px ></div> <div class= stena style= position:absolute;top:0px; left:10px;width=10px;height=10px ></div> <div class= stena style= position:absolute;top:10px; left:0px;width=10px;height=10px ></div> <div class= krabice style= position:absolute;top:10px; left:10px;width=10px;height=10px ></div> </div>

7 Intermezzo: Scripting the DOM Jak se v JavaScriptu pracuje s html prvky stránky (objekt document) getelementbyid( id ) getelementsbyclassname( css_class ) createelement( tagname ) Html prvky (které získáme pomocí předcházejích funkcí) jsou také objekty, mají různé vlastnosti (a metody): appendchild( element ) removechild( element ) children innerhtml id, classname, style onclick,...

8 Stav Hry: herní prvky stav si budeme udržovat jako seznam jednotlivých prvků (divů) na herním plánu u každého prvku si budeme pamatovat jeho pozici a jeho typ (W,0,X,B,S) 1 function prvek ( typ ) = { 2 this. typ = typ ; 3 this. div = document. createelement (" div "); 4 this. div. style. width =10+ px ; 5 this. div. style. height =10+ px ; 6 this. setxy = function (x, y) { 7 this.x = x; this.y = y; 8 this. style. top = this.y *10+ px ; 9 this. style. left = this.x *10+ px ; 10 } 11 this. placeonboard = function ( element ) { 12 element. appendchild ( this. div ); }; 13 this. removefromboard = function ( element ) { 14 element. removechild ( this. div ) ;}; 15 }

9 Stav Hry: načtení mapy 1 this. loadmap = function ( map ) { 2 this. herniprvky = []; 3 this. height = 0; 4 this. length = len ( map [0]) ; 5 this. panacek = null ; 6 for ( y in map ) { 7 this. height ++; 8 for (x in map [y] ) { 9 prvky = map [y][x]. split (, ); 10 for ( i in prvky ) { 11 var p = new prvek ( prvky [ i] ); 12 p. setxy ( parseint (x), parseint (y)); 13 this. herniprvky. push (p); 14 if ( prvky [i] == S ) { 15 this. panacek = p; 16 } 17 } 18 } 19 } 20 }

10 Stav Hry: kreslení 1 this. drawplan = function ( herniplan_ div ) { 2 for ( i in this. herniprvky ) { 3 this. herniprvky [i]. placeonboard ( herniplan_div ); 4 } 5 }

11 Stav Hry: moveleft 1 this. moveleft = function () { 2 // Nesmime vylezt z mapy 3 if ( this. panacek. x == 0) return false ; 4 var sousedi = this. prvkyatxy ( this. panacek.x -1, 5 this. panacek.y); 6 // Nesmime projit zdi 7 if ( this. contains ( sousedi, W ) ) return false ; 8 9 // Krabici muzeme posunout pouze, pokud je misto 10 if ( this. contains ( sousedi, B ) ) { 11 // Ani krabici nesmime vysunout z mapy 12 if ( this. panacek. x == 1 ) return false ; 13 ns= this. prvkyatxy ( this. panacek.x -2, this. panacek.y) 14 if ( this. contains (ns, W ) 15 this. contains (ns, B )) return false ; 16 krabice = this. gettype ( sousedi, B ); 17 krabice. setxy ( this. panacek.x -2, this. panacek.y); 18 } 19 // Posuneme panacka 20 this. panacek. setxy ( this. panacek.x -1, this. panacek.y); 21 }

12 Sta Hry: co chybí? funkce contains(list, typ) která vrátí true, pokud seznam list herních prvků obsahuje prvek typu typ funkce gettype(list,typ) herní prvek typu typ která vrátí ze seznamu list funkce, která si pamatuje, kolik tahů už bylo provedeno (skóre) funkce, která si udržuje přehled o tom, kolik krabic ještě chybí přesunout

13 Interakce s uživatelem vlastnosti jednotlivých prvků (onclick, onblur, onfocus,...) vlastnosti objektu document (onkeypress, onkeydown, onkeyup) metody objektu window (settimeout( "javascript code", msec ), setinterval, clearinterval)

14 Stav Hry: ošetření uživatelského vstupu 1 this. keyuphandler = function () { 2 var me = this ; 3 return function ( e ) { 4 if ( me. keysenabled ) return false ; 5 e = window. event e; 6 switch (e. keycode ) { 7 case 37: 8 me. moveleft (); break ; 9 case 38: 10 me. moveup (); break ; 11 case 39: 12 me. moveright (); break ; 13 case 40: 14 me. movedown (); break ; 15 default : 16 return true ; 17 } 18 return false ; 19 } 20 }

15 Dáme to dohromady 1 function startgame () { 2 var level = {... }; 3 var g = new game (); 4 g. loadmap ( level ); 5 herniplandiv = document. getelementbyid ( HerniPlan ); 6 g. drawplan ( herniplandiv ); 7 window. onkeyup = g. keyuphandler (); 8 } 9 10 window. onload = startgame ;

Tlačítkem Poskládej jiný počítač se hra vrátí na úvodní obrazovku a lze zvolit jiný obrázek.

Tlačítkem Poskládej jiný počítač se hra vrátí na úvodní obrazovku a lze zvolit jiný obrázek. PUZZLE POČÍTAČE Hra Puzzle počítače je psána pomocí příkazů Javascriptu, skriptovacího jazyka PHP a standardních příkazů HTML. Před vlastním spuštěním hry je možné seznámit se s nejznámějšími komponenty

Více

Formuláře. Internetové publikování

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

Více

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení

Více

Javascript. Javascript - jazyk

Javascript. Javascript - jazyk Návrh a tvorba WWW stránek 1/30 Javascript skripty provádí prohlížeč - klient dynamicky generovaný obsah stránek, efekty, interakce nejrozšířenější klientský skriptovací jazyk (VBScript a další) nesouvisí

Více

název stránky v titulkovém pruhu prohlížeče

<!DOCTYPE html> <html lang=cs> <head> <meta charset=utf-8 /> <title>název stránky v titulkovém pruhu prohlížeče</title> </head> 1. HTML5 Technologie HTML5 zavádí a vylepšuje širokou škálu funkcí, zahrnující pokročilé nástroje pro práci s formuláři, multimédii, strukturami a sémantikou, aby poskytla autorům více flexibility a interoperability

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

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

Více

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ Fakulta Stavební Katedra mapování a kartografie SEMESTRÁLNÍ PROJEKT Webová aplikace pro efektivnější vyhledávání realit skupina F Praha květen 2012 Vedoucí semestrálního projektu:

Více

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 14 VY 32 INOVACE 0101 0314

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 14 VY 32 INOVACE 0101 0314 Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 14 VY 32 INOVACE 0101 0314 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor

Více

Skriptování na straně serveru a klienta

Skriptování na straně serveru a klienta 4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2012/03/29 21:34:27 $ Obsah Úvod... 3 Nová platforma... 4 Výhody webové platformy... 5 Nevýhody webové platformy... 6 Přístupy

Více

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC Charakteristika: soubor skriptů, obrázků a popisů k implementaci komunikace s API služby obalkyknih.cz, verze 3.0 pro ALEPH OPAC. Balíček souvisejících

Více

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Grafika pro web Funkce grafiky na webu Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Funkce grafiky na webu Sekundární grafická informace Dekorace Zvýraznění Šipky Oddělovače Funkce

Více

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

Více

JavaScript je často zaměňován s Javou. Java je samostatný programovací jazyk. Má s JavaScriptem pouze podobnou syntaxi.

JavaScript je často zaměňován s Javou. Java je samostatný programovací jazyk. Má s JavaScriptem pouze podobnou syntaxi. Co je je programovací jazyk, který se používá v internetových stránkách. Zapisuje se přímo do HTML kódu, což je velká výhoda, protože je to jednoduché. je klientský skript. To znamená, že se program odesílá

Více

První kapitola úvod do problematiky

První kapitola úvod do problematiky První kapitola úvod do problematiky Co je to Flex Adobe Flex je ActionSript (AS) framework pro tvorbu Rich Internet Aplications (RIA), tedy knihovna AS tříd pro Flash. Flex používáme k vytvoření SWF souboru

Více

Postřehová hra. Zadání projektu. 1 Moje cíle

Postřehová hra. Zadání projektu. 1 Moje cíle Gymnázium, Praha 6, Arabská 16 předmět Programování, vyučující Tomáš Obdržálek Postřehová hra ročníkový projekt Matouš Jokl, 1E květen 2014 Obsah 1 Moje cíle...1 2 Kód...2 1.Objekty a ArrayList...2 2.Jpanel

Více

Začínáme s vývojem her a DOM

Začínáme s vývojem her a DOM KAPITOLA 2 Začínáme s vývojem her a DOM V předchozí kapitole jsme získali představu o tom, co nás v této knize čeká a co se dozvíme. Počínaje touto kapitolou zahájíme naše seznamování s problematikou na

Více

Grafika na webu. Lukáš Bařinka barinkl@fit.cvut.cz

Grafika na webu. Lukáš Bařinka barinkl@fit.cvut.cz 4 TVEZE WXYHMNR LS TVSKVEQY -RJSVQEXMOE NI TSHTSVSZ RE TVSNIOXIQ RERGSZERÀQ ^ )ZVSTWO LS WSGM PR LS JSRHY E VS^TSÐXY LPEZR LS QÞWXE 4VEL] 4VELE )9 -RZIWXYNIQI HS ZE% FYHSYGRSWXM Web a MultiMédia Lukáš

Více

Rozhraní pro práci s XML dokumenty. Roman Malo

Rozhraní pro práci s XML dokumenty. Roman Malo Rozhraní pro práci s XML dokumenty Roman Malo Práce s XML dokumenty Datově a dokumentově orientované XML dokumenty Problém preference elementů a atributů Strom elementů Strom uzlů Základní zpracování dokumentů

Více

NA CO SI DÁT POZOR V JAVASCRIPTU? Angular.cz

NA CO SI DÁT POZOR V JAVASCRIPTU? Angular.cz NA CO SI DÁT POZOR V JAVASCRIPTU? Milan Lempera @milanlempera Víťa Plšek @winsik Angular.cz STRICT MODE volitelně aktivovatelná omezenější varianta JS 'use strict'; a = 11; // strict mode pro celý soubor

Více

Přidávání animací do programů

Přidávání animací do programů Přidávání animací do programů Posouvání objektů se dá zařídit, pomocí prvků, které jsou vypsány v následující tabulce: Klíčové slovo Popis Left Tato vlastnost se dá využít k vodorovnému posunu objektu

Více

Tvorba klientských skriptů v jazyce Java Script

Tvorba klientských skriptů v jazyce Java Script Tvorba klientských skriptů v jazyce Java Script Publikace vznikla v rámci projektu OPVK Vyškolený pedagog záruka kvalitní výuky na Střední odborné škole veterinární, mechanizační a zahradnické a Jazykové

Více

Vážení zákazníci, dovolujeme si Vás upozornit, že na tuto ukázku knihy se vztahují autorská práva, tzv. copyright. To znamená, že ukázka má sloužit výhradnì pro osobní potøebu potenciálního kupujícího

Více

Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot.

Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot. PEXESO Hra Pexeso je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je vytvořena na základě známého pexesa. Úkolem hráče je najít 2 stejné karty (nebo 2 karty se stejnou tématikou ve

Více
119.
120.
121.
122. kresba Droga a</a>
    </h3>
    <p>
        <img alt= 119.
120.
121.

V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru

V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru Příloha 1: Struktura XML dokumentu V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru /mapa/map.xml. Obsah

Více

Komponenty pro ArcGIS API for JavaScript

Komponenty pro ArcGIS API for JavaScript Komponenty pro ArcGIS API for JavaScript Mgr. Jiří Čtyroký Mgr. Josef Beneš Mgr. Michal Schneider Proč komponenty vznikly? Mapové podklady a služby ESRI Aplikace MČ, MHMP a dalších městských organizací

Více

ČSFD.cz - technická specifikace reklamních formátů

ČSFD.cz - technická specifikace reklamních formátů 1. Bannery 1. banner musí být ve formátu jpg, png, gif (sekce 1.2), HTML5 (sekce 1.3), swf, swc (sekce 1.3) nebo jako externí script, který banner vykreslí (sekce 1.4) 2. rozměry bannerů musí být následující

Více

Proč Angular JS framework?

Proč Angular JS framework? Angular JS Proč Angular JS framework? Open Source vytvořený a spravovaný Googlem Vhodný pro tvorbu formulářových aplikací Dodá aplikaci základní architekturu a udržovatelnost Deklarativní způsob práce

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Tvorba

Více

PREPROCESOR POKRAČOVÁNÍ

PREPROCESOR POKRAČOVÁNÍ PREPROCESOR POKRAČOVÁNÍ Chybová hlášení V C# podobně jako v C++ existuje direktiva #error, která způsobí vypsání chybového hlášení překladačem a zastavení překladu. jazyk C# navíc nabízí direktivu #warning,

Více

20. Projekt Domácí mediotéka

20. Projekt Domácí mediotéka Projekt Domácí mediotéka strana 211 20. Projekt Domácí mediotéka 20.1. Základní popis, zadání úkolu V projektu Domácí mediotéka (Dome) se jednoduchým způsobem evidují CD a videa. Projekt je velmi jednoduchý

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

+ knihovna funkcí usnadňujících práci v javascriptu

+ knihovna funkcí usnadňujících práci v javascriptu framework pro javascript jquery + knihovna funkcí usnadňujících práci v javascriptu Možnosti: o manipulace s prvky HTML o změna vlastností objektů o podpora události o práce s CSS, podpora selektorů o

Více

MQL4 COURSE. By Coders guru www.forex-tsd.com. -5 Smyčky & Rozhodnutí Část 2

MQL4 COURSE. By Coders guru www.forex-tsd.com. -5 Smyčky & Rozhodnutí Část 2 MQL4 COURSE By Coders guru www.forex-tsd.com -5 Smyčky & Rozhodnutí Část 2 Vítejte v šesté lekci mého kurzu MQL 4. Doufám, že se vám předchozí lekce líbily. V předchozí lekci jsme se bavili o smyčkách.

Více

Content Security Policy

Content Security Policy Content Security Policy Nový přístup v boji proti XSS 2011.cCuMiNn. Cross Site Scripting (XSS) XSS je všudypřítomné výskyt cca v 80% webových aplikací Webový browser nevidí rozdíl mezi legitimním skriptem

Více

Č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. Č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

Více

5 Rekurze a zásobník. Rekurzivní volání metody

5 Rekurze a zásobník. Rekurzivní volání metody 5 Rekurze a zásobník Při volání metody z metody main() se do zásobníku uloží aktivační záznam obsahující - parametry - návratovou adresu, tedy adresu, kde bude program pokračovat v metodě main () po skončení

Více

PŘETĚŽOVÁNÍ OPERÁTORŮ

PŘETĚŽOVÁNÍ OPERÁTORŮ PŘETĚŽOVÁNÍ OPERÁTORŮ Jazyk C# podobně jako jazyk C++ umožňuje přetěžovat operátory, tj. rozšířit definice některých standardních operátorů na uživatelem definované typy (třídy a struktury). Stejně jako

Více

Specifikace reklamních formátů HTML 5 pro nasazení do ibillboard Ad Server Verze 2/2015

Specifikace reklamních formátů HTML 5 pro nasazení do ibillboard Ad Server Verze 2/2015 Specifikace reklamních formátů HTML 5 pro nasazení do ibillboard Ad Server Verze 2/2015 Stránka 1 z 5 Datová velikost HTML 5 bannerů Záleží na formátu banneru. Dle specifikace SPIR, má každý formát banneru

Více

Kreslíme do webu. Canvas

Kreslíme do webu. Canvas Kreslíme do webu Canvas Počítačová grafika Bitmapy vs Vektory Bitmapy: - obraz je složen z bodů (pixelů), které mají definované vlastnosti Vektory: - obraz je složen z grafických prvků (primitiv), které

Více

!!Via!AUREA,!s.r.o.!

!!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

Více

Databáze Caché CSP Custom Tags

Databáze Caché CSP Custom Tags CSP custom tags Databáze Caché CSP Custom Tags vlastní značky vývoj vlastních tagů pro CSP stránky možnost přidat novou funkcionalitu, ale zachovat stejnou syntaxi možnost vyvíjet znovupoužitelné komponenty

Více

ů š š ů Ú ů š É š š ů ť É Ž ů Í ó ň š š É Ú š Ů Ž Í š ů ňš Í ů ů š Š Š ó ů Í Ž Č š š š Č Č š Ů Í Í Í Í š š š Ž Ů š Š ů Ů Í Š Š š Č Ž ů Ž š Ú ó É Ž É Ú Ž Í š Í Ú ů Ú š Ú š Ú ů Ž Ú ů Ž š š š ů Í Ů š Ů Ú

Více

Vývojařská Plzeň AngularJS

Vývojařská Plzeň AngularJS Vývojařská Plzeň AngularJS Milan Lempera @milanlempera Víťa Plšek @winsik PHP -> Javascript PHP -> Java -> Javascript www.angular.cz ? Psal se rok 2009 ano 2009... Jak se tehdy tvořili webové aplikace?

Více

Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / 2012. Ročník: 3

Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / 2012. Ročník: 3 Název: VY_32_INOVACE_PG4102 Základní HTML značky Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení s nejdůležitějšími

Více

Pravidla tvorby pístupného webu. Zpracovala Kristýna Knapová. Obrázky. Kaskádové styly CSS. Javascript. Obrázky dekoraní

Pravidla tvorby pístupného webu. Zpracovala Kristýna Knapová. Obrázky. Kaskádové styly CSS. Javascript. Obrázky dekoraní Pravidla tvorby pístupného webu Zpracovala Kristýna Knapová V tomto dokumentu bych cht1la popsat pravidla tvorby p3ístupného webu. Pro7 v8bec takové stránky vytvá3et jste se mohli dozv1d1t v minulé kapitole.

Více

novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers

novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers HTML5 1 novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers 2 nové tagy 3 nové tagy 4 nové tagy IE 7, IE 8 nebude

Více

HTML Kapesní přehled. Lukáš Honek. w w w. h o n e k. b i z. Pravidla psaní kódu. Abecední přehled tagů, atributů, entit, konstant a událostí

HTML Kapesní přehled. Lukáš Honek. w w w. h o n e k. b i z. Pravidla psaní kódu. Abecední přehled tagů, atributů, entit, konstant a událostí HTML Kapesní přehled Lukáš Honek 2004 Pravidla psaní kódu Abecední přehled tagů, atributů, entit, konstant a událostí HTML versus XHTML Podpora v prohlížečích w w w. h o n e k. b i z HTML Kapesní přehled

Více

:6pt;font-style:normal;color:grey;font-family:Verdana,Geneva,Kalimati,sans-serif;text-decoration:none;text-align:center;font-variant:no = = < p s t y l e = " p a d d i n g : 0 ; b o r d e r : 0 ; t e

Více

KIV/PIA 2012 Ing. Jan Tichava

KIV/PIA 2012 Ing. Jan Tichava KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

SkautIS Remote Components absolventská práce

SkautIS Remote Components absolventská práce MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.

Více

České vysoké učení technické v Praze Fakulta elektrotechnická. Remote Flash Usability testing

České vysoké učení technické v Praze Fakulta elektrotechnická. Remote Flash Usability testing České vysoké učení technické v Praze Fakulta elektrotechnická Semestrální práce z předmětu Návrh uživatelského rozhraní Remote Flash Usability testing Autor: Email: skrivl1@fel.cvut.cz Datum: 28.5.2006

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

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

Více

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a

Více

Abstraktní datové typy: zásobník

Abstraktní datové typy: zásobník Abstraktní datové typy: zásobník 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 Abstraktní datové typy omezené rozhraní

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a

Více

API pro práci s XML. Jirka Kosek. Poslední modifikace: $Date: 2014/12/17 17:15:28 $ Copyright 2001-2014 Jiří Kosek

API pro práci s XML. Jirka Kosek. Poslední modifikace: $Date: 2014/12/17 17:15:28 $ Copyright 2001-2014 Jiří Kosek Jirka Kosek Poslední modifikace: $Date: 2014/12/17 17:15:28 $ Obsah Úvod... 3 Parsery XML... 4 Rozhraní pro přístup k dokumentu XML... 5 Další charakteristiky parseru... 6 Sekvenční čtení... 7 Push parsery...

Více

Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot.

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í

Více

Teoretické minimum z PJV

Teoretické minimum z PJV Teoretické minimum z PJV Pozn.: následující text popisuje vlastnosti jazyka Java zjednodušeně pouze pro potřeby výuky. Třída Zavádí se v programu deklarací třídy což je část programu od klíčových slov

Více

Generické programování

Generické programování Generické programování Od C# verze 2.0 = vytváření kódu s obecným datovým typem Příklad generická metoda, zamění dva parametry: static void Swap(ref T p1, ref T p2) T temp; temp = p1; p1 = p2; p2 =

Více

Jazyk C# (seminář 9)

Jazyk C# (seminář 9) Jazyk C# (seminář 9) Pavel Procházka KMI 19. listopadu 2014 Motivace proč GTK# Moderní přístup k psaní GUI Základ (GTK+) je napsaný v C, ale podporuje celou řadu jazyků (Vala, Python, JavaScript, C#,...

Více

public static void main(string[] args) { System.out.println(new Main().getClass().getAnnotation(Greet.class).text());

public static void main(string[] args) { System.out.println(new Main().getClass().getAnnotation(Greet.class).text()); Anotace a Hibernate Aleš Nosek, Ondřej Vadinský, Daniel Krátký Anotace v Javě Anotace jsou novinkou v Javy verze 5. Anotace umožňují doplnit kód Javy o dodatečné informace. Zapisují se přímo do zdrojového

Více

X36 WWW Šablony Martin Klíma xklima@fel.cvut.cz Čtryřvrstvá architektura Server Klient Prezentační logika Aplikační Logika Databáze 2 Výhody Jednotlivé vrstvy jsou nezávislé Lze je samostatně spravovat

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 7 Vývoj Internetových Aplikací HTML 5 a CSS 3 Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5 http://htmlfiverocks.appspot.com/en/resources

Více

Dokumentový sklad. Dokumentový sklad v.1. Dokumentový sklad v.2. Koncepce skladu v.2. Petr Lampa

Dokumentový sklad. Dokumentový sklad v.1. Dokumentový sklad v.2. Koncepce skladu v.2. Petr Lampa Dokumentový sklad v.1 Dokumentový sklad Petr Lampa První verze (2002): Ukládání diplomových prací a ročníkových projektů v PDF a PostScriptu Požadavky: Archivace dokumentů Malá četnost prohlížení Žádná

Více

Programování jako nástroj porozumění matematice (seriál pro web modernivyuka.cz)

Programování jako nástroj porozumění matematice (seriál pro web modernivyuka.cz) Programování jako nástroj porozumění matematice (seriál pro web modernivyuka.cz) Autor: Radek Vystavěl Díl 12: Algebra Lineární transformace MATEMATIKA Lineární transformace, neboli přeet hodnoty x podle

Více

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového

Více

Skriptovací jazyky. Obsah

Skriptovací jazyky. Obsah Skriptovací jazyky 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 Co je to skriptovací jazyk? Výhody a nevýhody

Více

JSR 184 - tutorial 2 Transformace v JSR-184

JSR 184 - tutorial 2 Transformace v JSR-184 JSR 184 - tutorial 2 Transformace v JSR-184 Cíl tutorialu: - naučit vás měnit pozici/ rotaci/ velikost objektu Tak jdeme na to: V minulém tutorialu (Úvod do JSR-184) jsme si ukázali, jak námi vytvořenou

Více

Plnohodnotné kreslení

Plnohodnotné kreslení Plnohodnotné kreslení KAPITOLA 6 V této kapitole: Odbočka (terminologická): Yak Shaving HTML Klíčové slovo this a pseudoprivátní vlastnosti Příprava canvasu a mřížka Buňky a atomy v nich Ostatní

Více

KAPITOLA 6. XML, XPath a XSLT. Podpora XML v prohlížečích. XML DOM v IE

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

Více

Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky. Framework pro vývoj matematických webových her

Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky. Framework pro vývoj matematických webových her Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky Diplomová práce Framework pro vývoj matematických webových her Plzeň 2012 Luboš Hanzík Prohlášení Prohlašuji,

Více

Webové služby a XML. Obsah přednášky. Co jsou to webové služby. Co jsou to webové služby. Webové služby a XML

Webové služby a XML. Obsah přednášky. Co jsou to webové služby. Co jsou to webové služby. Webové služby a XML Obsah přednášky Webové služby a XML Miroslav Beneš Co jsou to webové služby Architektura webových služeb SOAP SOAP a Java SOAP a PHP SOAP a C# Webové služby a XML 2 Co jsou to webové služby rozhraní k

Více

Objektově orientované programování v PHP 5. Martin Klíma

Objektově orientované programování v PHP 5. Martin Klíma Objektově orientované programování v PHP 5 Martin Klíma OOP & PHP 5 V PHP 5 konečně značné rozšíření OOP Blíží se to moderním programovacím jazykům jako Java nebo C# Výhody OOP Zapouzdření (nové modifikátory

Více

Obsah. SEZNÁMENÍ S HRAMI V HTML5...19 Nové funkce HTML5... 20. Nové funkce CSS3... 23

Obsah. SEZNÁMENÍ S HRAMI V HTML5...19 Nové funkce HTML5... 20. Nové funkce CSS3... 23 ÚVOD.................................................13 Co v této knize najdete................................... 13 Co budete v této knize potřebovat.......................... 14 Pro koho je tato kniha

Více

Java - Kresba. 2/28/11 1/8 Java - kresba

Java - Kresba. 2/28/11 1/8 Java - kresba Java - Kresba Základní entity a jejich kresba ve třídě Graphics nemůžeme nastavit linii, šířku a typ, z grafických atributů jí můžeme nastavit pouze barvu Linie (čára)... drawline(int x1, int y1, int x2,

Více

Část 1 Moderní JavaScript

Čá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......................................

Více

KAPITOLA 9. Formuláře

KAPITOLA 9. Formuláře KAPITOLA 9 Formuláře Nejen Web 2.0 aplikace, ale ani žádná stránka generující obsah přizpůsobený uživateli (anglicky User Generated Content) si nevystačí bez formulářů. Internetové stránky musí svým uživatelům

Více

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.

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

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Vytváříme aplikace využívající Ajax

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

Více

UNIVERZITA PARDUBICE

UNIVERZITA PARDUBICE UNIVERZITA PARDUBICE Fakulta elektrotechniky a informatiky Zobrazení polohy kolejového vozidla Jan Molnár Bakalářská práce 2010 1 2 3 Prohlášení autora Prohlašuji, ţe jsem tuto práci vypracoval samostatně.

Více

Univerzita Pardubice. Centrální správa dokumentů

Univerzita Pardubice. Centrální správa dokumentů Univerzita Pardubice Fakulta ekonomicko-správní Centrální správa dokumentů Martina Bendová Bakalářská práce 2010 Prohlášení autora Prohlašuji: Tuto práci jsem vypracovala samostatně. Veškeré literární

Více

(X)HTML, CSS a jquery

(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

Více

Obrázek. Základní popis, zadání úkolu. Struktura tříd,

Obrázek. Základní popis, zadání úkolu. Struktura tříd, Obrázek Základní popis, zadání úkolu Pracujeme na projektu Domecek, který je ke stažení na http://java.vse.cz/. Po otevření v BlueJ vytvoříme instanci třídy Obrazek a zavoláme metodu kresli(). Výsledkem

Více

PRG036 Technologie XML

PRG036 Technologie XML PRG036 Technologie XML Přednáší: Irena Mlýnková (mlynkova@ksi.mff.cuni.cz) Martin Nečaský (necasky@ksi.mff.cuni.cz) LS 2010 Stránka přednášky: http://www.ksi.mff.cuni.cz/~mlynkova/prg036/ 1 Osnova předmětu

Více

Tutoriál grafiky pomocí Xlib

Tutoriál grafiky pomocí Xlib Tutoriál grafiky pomocí Xlib Projekt do GZN Radek Brich Fakulta informačních technologií Vysoké učení technické v Brně 2006 Radek Brich (FIT VUT Brno) Tutoriál grafiky pomocí Xlib 2006 1 / 26 X Window

Více

Zápis programu v jazyce C#

Zápis programu v jazyce C# Zápis programu v jazyce C# Základní syntaktická pravidla C# = case sensitive jazyk rozlišuje velikost písmen Tzv. bílé znaky (Enter, mezera, tab ) ve ZK překladač ignoruje každý příkaz končí ; oddělovač

Více

Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot.

Tlačítko Teachers Guide obsahuje odkaz na stručný popis hry a její účel v projektu Ingot. DOMINO Hra Domino je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je vytvořena na základě principu dominových kostek. Jednotlivé kostky zobrazují loga nejznámějších internetových prohlížečů.

Více

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

Více

Počítačové šachy. Otakar Trunda

Počítačové šachy. Otakar Trunda Počítačové šachy Otakar Trunda Hraní her obecně Hra je definovaná pomocí: Počáteční situace Funkce vracející množinu přípustných tahů v každé situaci Ohodnocení koncových stavů Našim cílem je najít strategii

Více

PROJEKT 4. Elektronické haiku s trochou zábavy s mixováním zvuku. Aria Danika. společně s Chrisem Normanem, autorem Geishy

PROJEKT 4. Elektronické haiku s trochou zábavy s mixováním zvuku. Aria Danika. společně s Chrisem Normanem, autorem Geishy PROJEKT 4 Elektronické haiku s trochou zábavy s mixováním zvuku Aria Danika společně s Chrisem Normanem, autorem Geishy Aria Danika je interaktivní designérka a vývojářka, senior moderátorka ve Flashkit.com

Více

III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Jazyk Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět Cílová skupina (ročník) Úroveň

Více

Scrapping stránek prakticky: Dívka dne na TN.cz

Scrapping stránek prakticky: Dívka dne na TN.cz Scrapping stránek prakticky: Dívka dne na TN.cz Obsah Scrapping stránek prakticky: Dívka dne na TN.cz...1 Praktický příklad scrapping-u v Python-u...1 Analýza galerie Dívky dne...2 Krok 1: zjištění URL

Více