Home

7#Hodina – DIV

Do jedné prázdné složky!

Vytvořit dokument HTML5
Uložit jako “index.html”
Vytvořit dokument CSS
Uložit jako “main.css”
Propojit přes “link”
Vytvořit dokument JavaScript
Uložit jako “java.js”
Propojit přes “script”

Div:

Div je takzvaný blokový element a používá se vytváření rozložení stránky. Dříve se na to používaly tabulky. Ale ty dnes opravdu nikdo nepoužívá a to už jen proto, že úprava vzhledu stránky napsané přes tabulku je čisté peklo! Dnes proto používáme inteligentní prvek “div”. Sám o sobě nedělá NIC!

Teda pokud s ním obalíte text například takto, tak jeho obsah bude na novém řádku:

text text text text <div>text text text </div>

Ale to není úplně ten důvod, proč se používá.

Hlavní důvod proč se divy používají je proto, že s nimi máte dost neomezené možnosti s pozicováním. To znamená s rozložením prvků na stránce. Něco jakou souhrn není úplně možné, doporučuji si projít tento článek na w3schools. Je tam úplně všechno na pozicování a pokud nebudete něčemu rozumět pište klidně komentáře pod článek.

My aby jsme se trochu naučili pracovat s pozicováním tak na začátek vytvoříme div 600 na 600 px.

V html vytvoříme div který si označíme ID “frame”. Bude to vypadat třeba takto:

<div id=”frame”></div>

Velikost divu se nastavuje v CSS stejným způsobem jako nastavujeme velikost obrázku (tzn width a height). Jeho pozici nastavíme na relativní. To znamená že nová pozice vychází z jeho původní pozice (position: relative). Nyní můžeme nastavit zarovnání našeho divu na střed přes margin. Ten určuje jak daleko je náš prvek od ostatních prvků. My použijeme “margin: 0 auto;”, tím říkáme z hora je mezera 0px a zleva je mezera automatická (zarovnání na střed). Aby jsme viděli nějaký výsledek nastavíme ohraničení (border).

Do CSS definuje velikost a pozici divu a jeho pozici.

#frame{

position: relative;

width: 600px;

height: 600px;

margin: 0 auto;

border: 5px solid rgb(0,0,255);

}

Nyní do divu přidáme tlačítko a ukážeme si, že tlačítko nemusí aktivovat funkci jen pomocí kliknutí (onclick). Druhá používaná možnost je “onmouseover” to znamená při přejetí myší.

Vložené tlačítko do našeho divu:

<div id=”frame”><button class=”button” id=”run”>Klikej</button></div>

Přidáme spuštění funkce při kliknutí a přejetí myší:

<div id=”frame”><button class=”button” id=”run” onclick=”klik()” onmouseover=”prejeti()”> Klikej </button></div>

Jednou ze základních funkcí javascriptu je alert. Ta dává jako odpověď do prohlížeče okno, které musíte potvrdit/ zavřít.

V souboru java.js vytvoříme funkce klik() a prejeti(). Ve funkci klik spustíme funkci alert. Funkci u přejeti si vytvoříme později.

function klik(){

alert(‘Fatal Error … a nebo taky ne’)

}

function prejeti(){

}

Pokud nevíte jak napsat jednoduchou uvozovku, tak na české klávesnici to není tak úplně jednoduché a musíte to psát přes “ALT” (levý) + 39.

Funkce přejetí bude pohybovat tlačítkem po obrazovce a vytvoří tak tlačítko, na které nebude tak úplně jednoduché kliknout. Napřed, ale musíme dát tlačítku pozici absolutní a dát mu úvodní pozici (top: 10px; left: 10px;). JavaScript také dokáže náhodně generovat číslo pomocí funkce Math.random(). Tato funkce generuje náhodné číslo od 0-1. To znamená, že pro běžné použití výsledek násobíme. Také budeme muset tlačítko “uchopit” a upravovat jeho pozici kterou jsme si přes CSS nastavili na 10 a 10. Označili jsme si ho pomocí ID a tak ho také pomocí ID najdeme pomocí řetězce “getElementById(‘run’)“. Zde měníme styl, konkrétně top a left.

Výsledná funkce bude vypadat takto:

function prejeti(){

document.getElementById(‘btn’).style.top=(Math.random()*600)+”px”;

document.getElementById(‘btn’).style.left=(Math.random()*600)+”px”;

}

Tlačítko už by mělo před myší utíkat a mělo by být dost náročné na něj kliknout. Ne nemožné, ale náročné.

Projekty

Už bych vám doporučil si vymyslet nějaké téma na samostatnou práci na druhé pololetí. Na začátek co jde udělat snadno

Nějakou jednoduchou Clicker hru
Textová hra ve stylu GameBook (můžete se inspirovat existujícími GameBooky, třeba v knihovně/online)
Nějaká hra o náhodě (celkem zajímavá může být nějaká hra s kostkami)
Nějaká mini-aplikace na výpočet nějakých matematických úloh (minulý rok jsem viděl bohužel nedokončenou aplikaci na pythagorovu větu)

Toto je jen pár věcí co mě napadlo na základě toho co už by jste měli zvládnout (když tomu přidáme nějaké to Googlení 🙂 ) Nemusíte na projektu pracovat sami, pokud se dohodnete na nějaké skupince (Max 3 ve skupině) nebudu mít problém, ale byl bych rád, aby se ta skupina během roku 4x neměnila, protože pak nic neuděláte.

0 Comments