Programování I (19/20)

01 HTML

L.Zolta@seznam.cz (Super User) — Thu, 17 Oct 2019 06:02:39 +0000

HTML dokument je dokument, který má odkazy.

Odkazem rozumíme něco na co můžeme kliknout a pošle nás to někam jinam.

HTML dokument si můžeme představit jako popsaný papír s obrázky a odkazy. Jediné co to umí je, podstrčit nám do ruky jiný papír. (*)

HTML dokument se otevírá v internetových prohlížečích jako například Firefox, Chrome, či Internet Explorer.

Vytvoření HTML dokumentu

HTML dokument je soubor s koncovkou .html a obsahuje HTML tágy.

Tágy jsou značky ohraničené ostrými závorkami . Tyto závorky najdete vpravo dole vedle klávesy M (viz. obrázek vpravo). Na české klavesnici musíte podržet Alt (pod nimi), na anglické klávesnice Shift.

Každý HTML dokument by měl mít na začátku tág a na konci , dále pak a hlavičkové tágy. Jak vidíte na obrázku níže. Více o tom:

První HTML dokument (jakpsatweb.cz) - český manuál (trochu zastaralý)

HTML Tutorial (w3schools.com) - anglický manuál (možnost vyzkoušet kod online)

HTML tedy můžeme vytvořit v Notepadu (Poznámkovém bloku) či jiném textovém editoru jako například PSPad. Při ukládání souboru, nezapomeňte za název přidat .html. Případně ještě vypnout automatické přidání koncoky .txt, aby z toho nebyl pokus1.html.txt Tak jak to vidíte na obrázku.

Použitím dalších tágů, můžeme zvýrazdňovat text, nebo vytvořit odkazy.

text který se zobrazí tučně

nakloněný text

Odkaz na e-skolu

Nadpis

Odsekne nový řádek

Přehled dalších tágů najdete zde (jakpsatweb.cz).

Zobrazení HTML dokumentu

Pokud se vám podařilo správně uložit soubor s koncovkou .html. Měli byste to vidět ve správci souboru, buďto na ikoně souboru, nebo v názvu (viz. obrázek vpravo)

Pak už stačí soubor (pokus1.html) jen spustit a otevře se v prohlížeči. V mém případě v Chromu (viz. obrázek dole). Jiný způsob je, že napíšeme URL adresu přímo do prohlížeče, kam zvykneme psát webové adresy. Na obrázku dole vidíte že URL cesta k mému dokumentu pokus1.html je D:/Lucka/krouzky/lekce1/pokus1.html.

02 Proměnná a komentáře

L.Zolta@seznam.cz (Super User) — Thu, 17 Oct 2019 07:31:15 +0000

V dnešní lekci začneme konečně programovat. Nejdříve si vysvětlíme co jsou to komentáře, které jsou nepostradatelným pomocníkem každého programátora. Ukážeme se výpisy z programu (ze skriptu). A nakousneme proměnné.

Komentáře

Komentáře jsou část zdrojového kódu, který počítač nevidí. Do komentářu si tedy můžeme psát různé poznámky, například význam příkazů apod.

Většina programovacích jazyků používá na označení komentářů dvě lomítka nebo lomítka s hvězdičkou:

// odsaď až nakonec řádků je to komentář a můžu si tu psát co chci
/* mezi těmito znaky je komentář */ tohle už by komentář nebyl a program by chtěl tyto kecy vykonat.

Aby to nebylo tak jednoduché, tak HTML má své vlastní komentáře a tím je toto:

Ukázky různých kódů s komentáři (obrázky):

Zdojáky k obrazkům

Zdroják k bombě

Příkaz

Program je tvořen příkazy, které postupně vykonává. Příkazy jsou odděleny střdníky ; Mohou se tedy psát vedle sebe, ale pro lepší přehlednost se zvyknout psát pod sebe.

Na obrázcích výše jsou ukázky různých zdrojových kódů. Dokážeš z nich zjistit, co vykoná tento příkaz:

document.write("Ahoj");

Nevíš? Tak si zkus vytvořit JavaScriptový prográmek tímto příkazem ve svém HTML dokumentu. Programovou část musíme vyčlenit pomocí tágů

Mezi těmito tágy, používáme příkazy JavaScriptu, nikoli HTML tágy. Potřebujeme-li uvnitř scriptu použít html tág, nápříklad
pro odsazení nového řádku. Musíme jej vypsat jako text, příkazem pro výpis.

První program

Chceme-li zjistit co dělá výše uvedený příkaz JavaScriptu, napíšem jej mezi tágy , které umístíme do těla HTML.

 

    Muj 1. program

             
          Pozor teď se stane program:

Proměnná

Takže už víme jak udělat výstup z programu. Vypisovat text, můžeme ale i bez programování jen v HTML, takže pouze s tímto příkazem si moc nezaprogramujeme. Co už HTML neumí, je vypisovat proměnné, respektive hodnotu proměnných.

Proměnná je něco jako hrníček s etiketou. Na etiketu si napíšeme název a do hrníčku můžeme něco strkat a vybírat (kamínky, vodu, papírky s textem). A stejně tak proměnná má nějaký název a můžeme do ní něco strkat (čísla, text, logické hodnoty - boolean).

Proměnnou jménem sklenka obsahující hodnotu 6 vytvoříme (deklarujeme) takto:

var sklenka = 6;

A nyní vyíšeme sklenku již známým příkazem:

document.write(sklenka);
document.write("
");
document.write("sklenka");

Všiměte si rozdíl mezi prvním a třetím příkazem document.write. Zatímco první vypsal hodnotu promenne, třetí vypsal text v uvozovkách. A to je rozdíl mezi výpisem textu a výpisem proměnné. Chceme-li vypsat text, musíme jej vždy dát do uvozovek. Pokud tím textem je tag, jako v druhém příkazu a script je umístěn v html dokumentu, bude se tento text v důsledku chovat jako html tág. Tágy samy o sobě uvnitř scriptu nemají co dělat.

K čemu proměnná

S proměnnou můžeme dělat všelico. Máme-li v ní čísla můžeme provádět různé výpočty. Máme-li v ní text, můžeme jej různě spojovat, rozdělovat a jinak zpracovávat. Na zpracování a vyhodnocování textů jsou založeny všechny vyhledávače, sociální sítě, kontextové reklamy a v podstatě celý Internet.

Na závěr si pojďme vyzkoušet sčítání proměnných:

var kuk = 4;
var huhu = 12;
var plusik = kuk + huhu;

kuk = kuk + 1;
huhu = huhu + 2;

document.write(kuk);
document.write(huhu);
document.write(plusik);

Víte proč tento program vypsal šílené číslo 51416? Protože jsme jednotlivé výpisy neoddělili ani novým řádkem ani mezerou. Všechny tři výpisy jsou tedy těsně za sebou. Nový řádek vypsat umíme. Místo tagu
, samozřejmě můžeme vypsat jiný oddělovač čárku nebo mezeru " ". Vložíme-li tyto výpisy mezi výpisy proměnných, výstup hned bude srozumitelnější.

document.write(",");

Ještě zkusme, co se stane když sečtu dva texty.

var osloveni = "Ahoj ";
var jmeno = "Lucka";
var pozdrav = osloveni + jmeno;

document.write(pozdrav);

A nebo to můžeme nakombinovat rovnou:


document.write("
Čago belo"+jmeno);

Operátor + má tedy pro text význam slepovače :)

03 HTML a styly

L.Zolta@seznam.cz (Super User) — Thu, 24 Oct 2019 07:19:07 +0000

Samotný HTML dokument se nemusí skládat jen z HTML tágů. Může obsahovat části které používají jiný než HTML jazyk. Například programová části požívá příkazy JavaScriptu a je ohraničená tágy . Podobně můžeme do HTML dokumentu umístit kaskádové styly, tedy část v které definujeme vzhled dokumentu. Ty umístíme mezi tágy .

Tyto speciální tágy, fungují jako hranice - překročíme-li je, jsme v jiné zemi a musíme používat jiný jazyk (JavaScript, nebo CSS). Překročíme-li koncový tág , nebo zase jsme tuto zemi opustili a můžeme zase vesele používat jen HTML.

MujWeb.html - tuto šablonu můžeš využít jako základ k vytvoření vlastního webu.

CSS - kaskádové styly

Kaskádové styly slouží k nastylování (načačání) webu. Zatím co HTML samotné řeší jen obsahovou část, pomocí stylů dáváme webu vzhled. Můžeme tedy nastavit barvy textů, pozadí, velikost obrázku, odsazení, pozice, atd. atd.

Chceme-li nastylovat například velikost a barvu nadpisu

, umstíme do hlavičky HTML dokumentu následující:

...

Tímto se nám všechny nadpisy označené tágem

, zobrazí modře a budou mít velikost 20pixel. Vzhled jednotlivých tágů tedy definujeme:

název_tágu { název_vlastnosti : hodnota ; název_vlastnosti : hodnota; }

vlastnosti jsou ve složených závorkách odděleny středníkem.

Více o kaskádových stylech najdete například tady: https://www.jakpsatweb.cz/css/. Najdete tam mimo jiné seznam vlastností, které můžete při stylování webu používat.

Pro rychlé vyzkoušení stylů, doporučují tento online editor css - poměň hodnoty v kódu vlevo a klikni na zelené tlačítko Run (hodnoty css_vlastností jsou zvýrazněné modře).

04 Funkce a Události

L.Zolta@seznam.cz (Super User) — Thu, 31 Oct 2019 09:31:36 +0000

Funkce

Funkce je takový podprogram, který můžeme zavolat, kdykoli se nám zlíbí.

Př.1:

var cislo1 = 4;
var cislo2 = 10;
var cislo3 = 0;
var text1 = "bububu";

vypisPromenne();               // volání funkce jménem vypisPromenne

cislo3 = cislo2 + cislo1;

vypisPromenne();             // volání funkce jménem vypisPromenne

function vypisPromenne ()             // definice funkce vypisPromenne
{
     document.write("
cislo1 = "+cislo1);
     document.write("
cislo2 = "+cislo2);
     document.write("
cislo3 = "+cislo3);
     document.write("
text1 = "+text1);
    document.write("
");

}

Událost

Událost je vlastnost html_tágu, která umožňuje propojit tág se skriptem (nejlépe zavoláním nějaké funkce). Událost je něco co provede uživatel. Například najede myší, či klikne na nějaký html objekt (obrázek, tlačítko, text,...).

Př.2:

 ...

...

V příkladu 2 jsme k obrázku definovali událost onClick (kliknutí myši). Klikneme-li myší na obrázek se zavolá funkce klik(), která je definovaná v části skriptu. Funkce klik() obsahuje jediný příkaz, který prohledá document, najde tág s id="obrazek" a tomuto tágu nastaví vlastnost src na oblicej2.jpg. Jinými slovy funkce klik, změní obrázek.

Seznam událostí: https://www.jakpsatweb.cz/javascript/udalosti.html

tlacitko.html

ksichty.html

images/krprog/lekce4/DSC066??.JPG , přičemž ?? = 24 - 52

05 Webhosting a templaty

L.Zolta@seznam.cz (Super User) — Thu, 07 Nov 2019 10:46:39 +0000

Statické webovky si může udělat rychle a snadno s použitím již hotových šablon, které jednoduše přepíšeme.

Jak najít webovou šablonu?

Z čeho se skládá webovka (šblona)?

Jak přepsat šablonu?

Jak zprovoznit menu?

Proč se nemohu dostat na svůj html dokument přes Internet?

Ve škole na počítači jsme si do svých adresářů uložili, několik html dokumentů a pokusili jsme se k ním dostat doma. Zadali jsme stejnou URL adresu, která se nám zobrazila v prohlížeči ve škole...

... ale nefunguje :( Proč?

Je to výborný nápad a fungovalo by to, kdyby byl disk Z: na serveru, který je připojený k Internetu. Pak bychom se na něj mohli dostat přes veřejnou adresu (například přes doménové jméno školy).

Protože nám však škola neposkytuje webhosting, pracujeme se soubory lokálně (odříznutě od světa). Mám-li něco uložené lokálně, mám to uložené pouze na svém počítači a mohu s tím zase pracovat jen na svém počítači. Chceme-li se dostat ke svým souborům doma máme několik možností:

Poslat si je na mejl v příloze a doma si je stáhnout a dál na nich pracovat lokálně
Přenést na flashce a doma na nich pracovat lokálně
Nahrát je na Internet, tedy využít nějakého webhostingu. Tím si vlastně vytvoříme své stránky, na které se dostaneme odkudkoli, kde je Internet.
- sweb.cz - seznam nabízí hosting souborů zdarma na sweb.cz. Máte-li e-mail na seznamu, pak se tam přihlásíte jednoduše přihlašovacími údaji k e-mailu a hned můžete kopírovat své soubory.
- webzdarma.cz - další možnost webhostingu zdarma.
- onebit.cz - placený webhosting. Webhostingy zdarma přidávají do stránek reklamy. Kdo se chce těmto reklamám vyhnout, musí si buď vytvořit vlastní server, nebo zaplatit webhostig. Já využívám webhostingu u onebit.cz s kterým mám dobré zkušenosti.

Na hostingu můžeme mít mnoho html dokumentů. Aby prohlížeč věděl, který má spustit. Musíme ten první úvodní dokument nazvat index.html.

Pěkný web snadno a rychle

Rozhodneme-li se vytvořit si vlastní stránky, nemusíme začínat od píky (tedy od prázdného notepadu). V dnešní době existuje mnoho šablon, které můžeme využívat zdarma, ale pozor většinou jen pro soukromé účely! Je tedy dobré věnovat pozornost licenci. Zadáte-li do vyhledávače "free website template" (zdarma webové šablony), naleznete spoustu, spoustu odkazů. Např.:

https://www.w3schools.com/w3css/w3css_templates.asp

https://freewebsitetemplates.com/

Pak si stačí jen vybrat stránky které se vám líbí, stáhnout, přepsat texty, poměnit obrázky a finální webovky nahrát na nějaký webhosting.

06 Datové typy (Ceasarová šifra)

L.Zolta@seznam.cz (Super User) — Tue, 12 Nov 2019 10:46:00 +0000

Datové typy

Aneb typy proměnných. Ačkoli se JavaScript tváří, že má jeden typ proměnné na všechno (na čísla i texty), není tomu tak. Na rozdíl od ostatních programovacích jazyků, si přetypopává proměnné podle potřeby (podle toho co tam zrovna cpeme).

Základní typy dat s kterými pracujeme jsou:

čísla (Numeric) = 1, 2, 3, 3.14, -5,...
řetězec (String) = "ahoj", " ", "Jakýkoli text dlouhý či krátky.",...
boolean (Boolean) = True, False, 0, 1.

Operace

Nad čísly můžeme provádět základní matematické operace jako je:
+ sčítání
- odčítání
* násobení
/ dělení

Př.1:
        var prom1 = 12;
        var cislo = 4;

        var vysled = prom1 + cislo;
        var rozd = prom1 - cislo;
        var nasobinek = prom1 * cislo;
        var delenak = prom1 / cislo;

Asi vás nepřekvapí že proměnná vysled bude obsahovat 16, v proměnné rozd bude 8, atd.

Řetězce můžeme rovněž sčítat. Plusko v tomto případě funguje jako lepidlo, které nám slepí dva řetězce do jednoho.

Př.2:
        var pozdrav = "Ahoj";
        var jmeno = "Horymír";

        var veta = pozdrav+jmeno;

        document.write(veta);

Mezera je to samé co písmeno, či jakýkoli jiný znak. Není-li v uvozovkách napsaná, nevypíše se. Víš jak upravit skript v př.2, aby se vypaslo "Ahoj Horymír!"?

Problém s mícháním typů

A tím se dostáváme k situaci, kdy nakombinujeme numerický typ proměnné se stringem (řetězcem, textem). Jinde by vám to neprošlo. Ale JavaScript to vyřeší jednoduše tak, že všechny proměnné typu Numeric, přetypuje pro účely sčítání na String (z 6 udělá "6") a pak to pospojuje jako řetězce. A tak se nám snadno stane, že 6+4=64

Př.3:

            var cisilko = 6;
            var textik = "to je:";
            var mismas = textik+cisilko+4;

            document.write(mismas);

            document.write("
");
            document.write(cisilko+4);

            document.write("
"+cisilko+4);

V jednom řádku tedy nemůžeme mít operátor plus jako sčítání a zároveň jako slepování řetězců.

Další operace, aneb JavaScriptovské funkce

Kromě základních operací, které jsme si popsali výše, má JavaScript už předdefinované funkce, které můžeme využívat. Mimo jiné:

Všechna data s kterými pracujeme jsou nakonec převedena na nuly a jedničky. Protože počítač (hardware) pracuje v binární soustavě (je signál/není signál). Takže jakýkoli znak ať už číslo, nebo písmeno se musí převést na číslo (ASCII kód), které se převede do binární soustavy a počítač jej pak může uložit, nebo s ním počítat. Jak to vypadá v praxi, vidíte vpravo v ASCII tabulkce.

A my si teď uděláme jednoduchý ASCII převodník. Využijeme k tomu příkaz

String.fromCharCode(100);

který převede ascii kód v závorce do znaku (v tomto případě na "d").

Naopak funkce charCodeAt() převádí znaky na číslo ascii kodu:

var znak = "m";
znak.charCodeAt(0);

Př. 5: Vytvoř ASCII převodník, který převede číslo na znak. Můžeš využít tuto univerzální šablonu:

Šablona - univerzální formulář - inout.html

Př.6: Vytvoř šifrovací program pro Galia Julia Ceasara.

Známý římský vojevůdce Ceasar, šifroval vojenské zprávy jednoduchou šifrou, která dodnes po něm nese jméno. Princip této šifry je jednoduchý - posunout jednotlivé písmenka textu o několik pozic.

"cezar" -> "dfabs"

Vytvoř program který převede zadané písmeno na zašifrované (posunute o několik znaku dopředu či dozadu).

Šablona - univerzální formulář - inout.html

Tip: využij ascii tabulku.

07 Funkce s parametrem

L.Zolta@seznam.cz (Super User) — Wed, 13 Nov 2019 07:46:00 +0000

Funkce s parametry

Minule jsme si řekli, že funkce je jakýsi podprogram. Dnes si vysvětlíme funkci z pohledu matematiky a využijeme ony závorky, které jsme zatím nechávali prázdné. Funkce s parametrem je v podstatě to samé co matematická funkce. Tu si můžeme představit jako černou skříňku, do kteřé z jedne strany něco cpeme (x) a z druhé nám něco vypadává (y). V té černé skříňce se provede nějaký výpočet a vyplivne to výsledek.

Př.4: Ukázka funkcí v matematice

f(x) = y

f(x) = x + 2;        // definice funkce v matematice

f(1) = 1 + 2 = 3;    // funkce f(x) udělala z jedničky trojku...
f(2) = 4;        // ... z dvojky čtyřku
f(3) = 5;        // ... z trojky pětku

Př.5: Funkce s parametrem v JavaScriptu

    var hoho = mojeFunkcniFunkce(3);
    document.write(hoho);

    function mojeFunkcniFunkce (vstupniPromenna)
    {
        var vysledek = vstupniPromenna + 2;
        return vysledek;            //vyplivni vysledek z funkce
    }

09 Podmínky

L.Zolta@seznam.cz (Super User) — Thu, 05 Dec 2019 07:46:00 +0000

Podmínka, neboli ify slouží k větvení programu.

Je-li podmínka splněná provede se tělo if{...}.

V opačném případě pak tělo else{...}, je-li definováno.

Př.1: Syntaxe podmínky v JavaScriptu, aneb jak se zapisuje if.

if (mojeCislo > 5)

{

alert("Podminka splnena.");

}

else

{

alert("Proběhlo ELSE.");

}

Bude-li mojeCislo=7, pak vyskočí okono s nápisem Podmínka splněna. Bude-li mojeCislo=4, pak se vykoná část else a vyskočí okno s nápisem Proběhlo ELSE.

Př.2. Vyzkoušej si, zda umíš správně zapsat podmínku. Doplň kód v následujících příkladech tak, aby měla podmínka smysl.

a) příklad 1

b) příklad 2

*své řešení si ověř kliknutím na zelené tlačítko

V dávných dobách, kdy počítače ještě neměly žádnou grafiku existovaly textové hry. Scény se popisovaly a hráči si vybírali z několika možností. Vytvoř si takovouto hru:

pohadka.html

Zobrazíš-li si kód (ctrl+u) této pohádky, zjistíš že je v kódu jen hromada ifů ošetřujících jednotlivé situace.

10 Shrnutí + odklizení sněhu 1

L.Zolta@seznam.cz (Super User) — Thu, 05 Dec 2019 07:46:00 +0000

Pojďme si všechno přehledně shrnout na jednom místě. Aneb kopírovací příručka.

HTML tágy

odstavec

kousek textu

nadpis

Seznam formulářových tágů (www.jakpsatweb.cz)

Seznam HTML tágů (www.jakpsatweb.cz)

Propojení HTML části s programovou části (SCRIPT)

Jak propojit viditelnou HTML část (...) s programovou části () a vytvořit z webu program.

1. Události (HTML -> SCRIPT)

To co nás hodí z HTML do scriptu jsou události (events). Události se přiřazují jednotlivým html tágům podobně jako vlastnosti. Události obsahují část scriptu, ideálně když se jen zavolá nějaká funkce do scriptové části.

Seznam některých událostí

onClick

kliknutí myší na prvek

onMouseOver

najetí myší nad prvek

onMouseOut

odjetí myši z prvku

onDblClick

dvojitý klik myší

onLoad

načtení stránky

onKeyPress

stisknutí klávesy

... a další na jakpsatweb.cz

Oba tlačítka výše odchytávají události onClick. K té dojde po kliknutí na tlačítko. První tlačítko zavolá při této události funkci baf() a druhé volá funkci au(). Další události které můžeme použít vidíte u druhého tlačítka. Jejich význam vidíte v zeleném rámečku vpravo.

Př.1: Poznáš z chování ukázkových tlačítek (výše) jaké příkazy obsahuje funkce uf()?

document.document.getElementById("idd").style.left = "300px";

document.document.getElementById("ustrasenec").style.background = "green";

document.document.getElementById("ustrasenec").value = "Uf";

document.document.getElementById("obrazek1").src = "logo-goole.jpg";

document.document.getElementById("ustrasenec").style.background = "red";

document.document.getElementById("ustrasenec").style.color = "red";

document.document.getElementById("ustrasenec").value = "Co mi chceš udělat?";

document.document.getElementById("ustrasenec").style.background = "gray";

2. Identifikátor id=""

Ve skritpu potřebujeme pracovat zase s HTML prvky, takže se k ním potřebujeme nějak dostat. Abychom přesně určili (identifiovali) prvek s kterým chceme pracovat, musíme jej opatřit IDčkem. ID znamená jednoznačné identifikační číslo. Například jako ID člověka (občana) se používá rodné číslo. Nemohou (neměli by) existovat dva lidé se stejným rodným číslem. Pomocí inventárního čísla můžeme zase jednoznačně určit konkrétní stůl ve škole, jde tedy o ID nábytku.

V HTML a JavaSriptu můžeme použít jako ID nejen čísla, ale libovolný text. A to tak, že html tág opatříme vlastností id:

Ve skriptu se pak k těmto prvkům (které jsou opatřeny vlastnosti id) dostaneme pomocí tohoto příkazu (defaultní funkce JavaScriptu):

document.getElementById("obrazek1");

Tato funkce vrací objekt s daným id, v tomto případě tedy objekt obrázku. Můžeme mu tedy nastavovat vlastnosti typické pro obrázek jako třeba src. A to buďto rovnou, nebo si jej vložit do proměnné. To je výhodné, zejména chceme-li s tímto objektem pracovat více.

document.getElementById("tlacitko").value = "Ťukni si";

var obr = document.getElementById("obrazek1");

obr.src = "nit.jpg";

obr.style.width = "50px";

Př.2: Hra odklízení sněhu

hra.html

12 Formuláře + Robot

L.Zolta@seznam.cz (Super User) — Thu, 09 Jan 2020 19:05:01 +0000

Doposud jsme řešili obsluhu uživatelských akcí pomocí událostí. Tlačítku jsme nastavili onClick událost, která nás odkázala na funkci v skriptové části. Na podnět Toma si dnes představíme formuláře a vytvoříme si svůj vlastní "vyhledávač":

Vyhledej videa na téma:

Proč formuláře?

Jak už jsem zmínila dříve, v rámci výuky bastlíme všechno dohromady - styly, skripty, html - vše v jednom dokumentu. Protože děláme "jednoduché" věci na několik málo řádku, je tento způsob přehledný. V praxi, kdy třeba jen styly jsou na sto řádků, bychom se v takovém zdrojáku uskrolovali k smrti. No a stejně jako můžeme styly vypreparovat do zvláštního souboru s koncovkou .css, můžeme i programovou část řešit zvlášť. Formuláře slouží k tomuto způsobu, kdy ve formuláři jen sesbíráme data a pošleme je na zpracování někam pryč.

Jak na to?

Všechny ovládací prvky (tlačítka, kolonky, zaškrtávátka,...), tedy tágy , strčíme do formuláře.

action="https://www.youtube.com/">
    name="tema">
    type="submit">

Každý formulář by měl mít tlačítko k odeslání type="submit">, kterým dojde k odeslání formuláře.

? Kam se formulář odešle určuje atribut formuláře action. V ukázce jsme zadali zadali, že chceme formulář odeslat ke zpracování na youtube.

? Co vlastně posíláme na youtube?? Posíláme tam vyplněná data z našeho formuláře. Jednotlivé prvky formuláře proto musíme mít pojmenovány. Naše jediná kolonka z ukázky má jméno tema name="tema". Je to v podstatě to samé jako id, které jsme používali dříve. Proč formuláře neumí pracovat s id, fakt netuším.

? Jak se odešle formulář? Existují dvě metody k odeslání formuláře výchozí metoda get, která pošle data v URL adrese. V podstatě nastartuje stránky podobně jako odkaz, jen za otazník přilepí vyplněná data. Další metoda post se používá, nechceme-li aby byly odesílané data vidět.

Jdeme zkoušet

Vyzkoušej si formulář z ukázky výše, napiš do kolonky třeba "pes" a klikni na tlačítko. Nic zvláštního se nestalo. Jen se nastartoval jůtub. Ale přece jen se něco povedlo. Mrkni do url adresy. Na konci je ?tema=pes. Tedy název textboxu z tvého vyhledávače a vyplněná hodnota. Povedlo se ti tedy odeslat formulář na youtube. A kdyby youtube rozuměl tvému formuláři, určitě by ti vyhledal videa o psovi.

Jenže youtube tvému formuláři nerozumí. Pojmenoval si svůj textbox jinak než ty. Když zjistíš jak, podaří se ti podstrčit mu svůj formulář tak, že mu bude rozumnět. Zadej nyní do standardního vyhledávače na youtubu třeba toho psa a podívej se, do URL adresy.

Vidíš rozdíl?

1) Vyhledáváš-li přes youtube, jeho textbox se jmenuje search_query, nikoli tema jako u tebe

2) Vyhledáváš-li přes youtube, odešle se formulář na adresu https://www.youtube.com/results

Upravíš-li svůj vlastní vyhledávač, tak aby se formulář odeslal na správnou adresu a přejmenuješ li svou kolonku na stejné jméno jako má youtube, budeš mít svůj vlastní youtube-vyhledávač.

Podobně můžeš udělat vyhledávač na seznam, nebo google. Stačí jen odpozorovat, jaké názvy textboxů používají tyto vyhledávače a ty použít i ve svém.

PS.: Tohle sice vypadá jako těžká frajeřina. Hele naprogramoval jsem google vyhledávač. Ale ve skutečnosti jen využíváš službu googlu. Vyhledávače samy o sobě, mají prográmky (roboty), kteří každý den procházejí Internet, projíždějí všechny odkazy, které najdou, zpracovávají text, ukládají jej do svých databází a pak vyhledávají ve svých vlastních datech. Jde o složitý proces, který nikomu nepoví, neboť je to jejich přísně tajné know how.