Home

1#Hodina – První stránka

Značkovací jazyk (anglicky markup language) slouží k obohacení textu o dodatečné informace – nejčastěji o významu, struktuře a způsobu zobrazování jednotlivých částí textu. Dodatečné informace se vkládají přímo do textu v podobě značek (tags), příkazů (commands) nebo direktiv (značky se používají od vynálezu knihtisku, autor dával tiskařovi značkou na vědomí, že bude změna typu písmen, že má vynechat místo na obrázek, atd.). Výsledný zdrojový text je stále obyčejný textový soubor, často v kódování ASCII, což umožňuje jeho editaci i nejjednoduššími textovými editory, jako je například Poznámkový blok v MS Windows nebo vi v Unixu. Nejznámějšími značkovacími jazyky jsou HTML (HyperText Markup Language) a XML, ve kterých je vytvořena většina WWW stránek.

Pro vymezení řídicích konstrukcí – značek či příkazů – slouží znaky se speciálním významem. V nroffu a troffu je to znak tečka (.) na začátku řádku, v PostScriptu lomítko (/), v TeXu a RTF zpětné lomítko (\), v HTML a XML znaky „menší než“ (<) a „větší než“ (>), jež ohraničují značky. Text mezi nimi je chápán jako instrukce, kterou využije zpracovávající software. Zdrojový text může vypadat například takto:

<h1>Nadpis</h1>
<p>Text prvního odstavce se <em>zvýrazněným</em>
slovem.</p>

Dvojice značek – zahajující <h1> a ukončující </h1> – označuje nadpis nejvyšší (první) úrovně.

Značkovací jazyk musí obsahovat speciální konstrukce pro zobrazení znaků, které mají zvláštní význam. Obvykle obsahuje i konstrukce pro zápis znaků, které se nevyskytují ve znakové sadě použité pro zápis zdrojového textu souboru. V HTML a XML lze speciální znaky “<“, “>”, “&” a znaky “á” a “€” vložit do textu následujícím způsobem:

Speciální znak	Způsob zadání
<	`<`
>	`>`
&	`&`
á	`á`
€	`€` příp. `€`

zdroj:wikipeda

Co budeme na hodinách potřebovat?

Prohlížeč

Tady to je celkem jasná položka. Jak by jsme si prohlíželi naše výsledky, když nebudeme mít na čem??? A jestli si myslíte, že IE vám bude stačit tak se pletete! Doporučuji si na flash disk dát portable verzi nějakého normálního prohlížeče, ideálně FireFox nebo Chrome.

Textový editor

Všechny webové stránky jsou tvořené prostým textem a tak by nám na všechno stačil poznámkový blok, ale pravděpodobně by jsme se v kódu brzy ztráceli. Proto existuje řada textových editorů učených pro psaní HTML, CSS a JS. Nejlepší možnost je Visual Studio Code.

FTP klient

Přes FTP (File transfer protokol) klienty můžeme nahrávat soubory na servery. Aby se váš projekt mohl dostat na internet. S ohledem na minulý rok, kdy většina bojovalo s hostingy zdarma jsem se rozhodl, že všichni dostanete prostor na mé sub doméně (např. neco.senpai.cz). Tam nebudete mít reklamy, nebudete omezeni velikostí vašeho projektu a já budu vám moci snadno pomoct, když narazíte na nějaký problém. Později, když budete chtít vám pomůžu založit vlastní hosting zdarma s doménou, aby jste si zažili jaké cena je “zdarma” 😉 Málem jsem to zapomněl napsat, budeme používat program FileZilla.

HTML Template

Template

Párové tagy / Nepárové tagy

<p> … </p> odstavec

<h1> … </h1> nadpis (Další možné h1-h6)

<b> …</b> Tučný text

<i> … </i> Kurzíva

<u> … </u> Podtržený text

Neutrální tagy

Vstupy

<input> Textové pole

<button> … <button> Tlačítko *duh*

JavaScript

Přímo do HTML kódu přes tag <script> … </script> nebo zvláštního souboru .js

V naše případě budeme pro zjednodušení psát první JavaScript přímo do kódu. V další případech budeme JavaScript oddělovat do samostatného souboru a soubory mezi sebou propojíme.

Kalkulačka

.. teda bude to sčítat takže “Kalkulačka”

V JS (JavaScript) bude vytvářet proměnné do kterých budeme ukládat čísla se kterými budeme počítat a nějaké to místo pro mezivýsledky a výsledky. V našem případě “kalkulačky” budeme potřebovat 3 proměnné.

Jako většina matematiky je v pc trochu obráceně máme to samé i tady. Pro ty co vědí co je Excel tak ví, že když chci sečíst pole A1 a A2 do pole B1, tak do pole B1 dám “=A1+A2”. Něco podobného nás čeká i zde. Jen si proměnné pojmenujeme sami.

Takže si můžeme říct že první číslo se bude jmenovat cislo1, druhé číslo bude cislo2 a výsledek vysledek. NEPOUŽÍVEJTE HÁČKY A ČÁRKY! Nyní si do proměnných dáme napevno nějaká čísla a později použijeme “input”.

cislo1 = 60;

cislo2 = 606;

Proměnou proměnné se vytvoří sami 🙂 Nyní vytvoříme příklad, kdy chceme, aby se nám výsledek uložil do proměnné vysledek.

vysledek = cislo1 + cislo2;

Ty středníky (;) na konci nejsou jen tak. Je to způsob ukončení části kódu. … Najdete ho pod klávesou “ESC”

Když to dáme dohromady s naší částí template (ke stažení výše) Měli by jsme se dostat k něčemu jako je toto:

Nyní uživatel ještě nic nevidí. Nedáváme totiž nic do stránky. Proto přidáme místo kam se má náš výsledek napsat. Použijeme pro to tag <span>…<span>. Ale to samo nestačí. Musíme našemu spanu dát jméno. Protože by se mohlo stát, a dřív nebo později stane, že budeme muset mít na stránce víc spanů. Náš span se může jmenovat “vysledek”. Jsou ale dva způsoby jak něco ve webové stránce pojmenovat.

První možnost je Class. Tu použijeme třeba na tlačítka, když budeme chtít měnit jak vypadají a to u všech najednou. Protože jeden Class se může vyskytovat u libovolného počtu prvků na stránce. Třeba class “CoolBtn” může být u všech tlačítek.

Druhý způsob je ID. To použijeme na stránce vždy jednou je to jméno pro jeden konkrétní prvek ve stránce. Třeba naše místo pro výsledek. Náš span tedy bude vypadat takto:

Pokaždé se zapisuje Class, ID i další parametry do počátečního tagu (tam kde není /) a mají tvar slovo=”něco”.

Stále ještě nemáme příkaz pro vypsání do stránky a náš výsledek zůstává pouze jako proměnná. Pokud chceme něco vypisovat z JS do HTML použijeme innerHTML, pomocí kterého můžeme měnit obsah HTML bloků, konkrétně našeho spanu (ve kterém není nic, pokud by tam něco bylo bude to přepsáno). První částí najdeme co chceme upravit document.getElementById(“vysledek”). Co to znamená asi pochopí každý se základními schopnostmi AJ “Get Element By ID” a za tím jméno našeho spanu (elementu). Druhá část říká že budeme zapisovat do HTML innerHTML. To bude následováno = a tím co chceme aby se nám vypsalo do stránky. Pokud chcete vypsat proměnnou stačí napsat její jméno. Pokud chcete vypsat slovo musíte jej ohraničit uvozovkami. Dá se udělat i kombinace kdy mezi jednotlivé části dáte +.

Tady bych rád zdůraznil, že v JS záleží na velkých a malých písmenech!

Nyní naše “kalkulačka” počítá úžasný jeden příklad. Pokusíme se to rozšířit o možnost zadávání přes input. Ten opět bude potřebovat nějaké ID, aby jsme ho mohli identifikovat. Naše inputy tudíž mohou vypadat třeba takto:

Ty začadíme do našeho kódu. Ideálně před výsledek.

Náš script však zatím neví o tom, že jsou zde nějaké vstupy a tak mu o nich řekneme. Přesněji, necháme ho načíst vstup do proměnných, které již v kódu máme a to “cislo1” a “cislo2”. Použijeme pro to kousek kódu který již známe a to document.getElementById(“____”). Ale nebude upravovat nic v HTML ale chceme získat hodnotu daného pole. Na to použijeme slovo “Value” (z EN. Hodnota … prostě budete potřebovat angličtinu…). Dohromady to bude vypadat takto document.getElementById(“_____”).value s tím, že mezi uvozovky dáte ID daného inputu.

Nyní ale náš kód nebude fungovat … hlavně proto, že se pustí dřív než něco stihneme napsat. Musíme proto udělat tlačítko, které spustí script, až když budeme potřebovat/chtít. Budeme potřebovat Tag <button>…</button> prostě tlačítko. To si dáme za náš input a mezi tagy napíšeme co bude na tlačítku napsáno třeba Počítej!. Také budeme muset přidat to, že tlačítko bude něco dělat poté co na něj klikneme. Samotný tag button vytváří tlačítko, to ale tak pouze vypadá a nic nedělá. Musíme přidat “onclick”. … prostě AJ. A za to si napíšeme jméno funkce, tu si vytvoříme za chvíli. Bude se jmenovat pocitej(). Ty závorky tam nejsou náhodou. Výsledek bude vypadat takto:

V našem <script> již máme funkci vytvořenou jen ji musíme pojmenovat a “zabalit”. Zápis je “function” za tím následuje jméno funkce (v našem případě “pocitej()”) a ve složených závorkách {…} máme funkci jako takovou. Po úpravě bude náš kód vypadat takto.

FIX

V tento moment se nám může stát jen jedna věc. JavaScript nemusí pochopit čísla jako čísla ale jako text. V ten moment by počítal 5+5=55. Prostě by spojil dva řetězce. Aby to fungovalo dobře musíme přidat jeden malý kousek kódu. Number(*něco*) donutí JS chápat danou věc jako číslo. Tímto kouskem obalíme náš zápis do proměnné.

Kalkulačka je hotová!

BONUS z hodiny

Toto bylo asi poprvé co jsme na hodině stihli víc než jsem plánoval 🙂 Jestli to takhle půjde dál myslím, že na konci školního roku napíšete úplně cokoliv 🙂

Naše kalkulačka dostala doplnění o další funkce a to o odčítání násobení a dělení. Dělení bylo asi nejvíc náročně 😉 Ale k tomu se dostaneme až na konci. První věc, kterou jsme udělali, bylo vytvoření dalších tlačítek. Pro každou mat. úlohu vlastní a přidali jsme jim funkce scitej(), odcitej(), nasob() a del().

Poté jsme naší funkci mezi tagem <script> </scirpt> zkopírovali 4x a přejmenovali je na scitej(), odcitej(), nasob() a del(). Tím jsme docílili toho, že máme 4 tlačítka, která sice volají různé funkce, ale dělají to samé a to sčítání.

První funkce už je hotová a to sčítání, u druhé (odčítání) a třetí (násobení) je oprava jednoduchá. Prostě změníte znamínka 🙂

Dělení je náročnější. V JS máme dva druhy dělení. Jedno je takové, které známe z kalkulačky. Prostě nám to vrátí výsledek a pokud to není přesné, bude to číslo s desetinnou čárkou. Druhý způsob dělení je, že nám kalkulačka dá pouze zbytek. Když tyto dvě věci propojíme, můžeme vytvořit funkci dělení, která nám dá celé číslo a zbytek. Ještě k tomu budeme potřebovat, ale jednu funkci z matematické knihovny JS. Ta funkce se jmenuje Floor (konkrétně Math.floor) a ta zahodí čísla za desetinou čárkou. NEJEDNÁ SE O KLASICKÉ ZAOKROUHLOVÁNÍ! Na zaokrouhlování je Math.round , která funguje tak jak jí známe v matematice. Prostě číslo 1,6 nám změní na 2. Ale v našem případě by to úplně změnilo výsledek. Proto použijme funkci Math.Floor , která i z čísla 1.99999999 udělá 1 , to 0.9999999 vyjádříme zbytkem.

Znamínka pro naše funkce dělení jsou / a %. / je klasické dělení, % vypíšou zbytek. Budeme ale potřebovat další proměnnou na náš zbytek. Já si ji nazvu … “zbytek”. Zápis je stejný jako u násobení a dělení