Formulár a základné spracovanie údajov z neho pomocou JavaScript (Úloha 3)

Ciele

• Doplniť vašu stránku o formulár, kde návštevník môže vyjadriť názor o vašej stránke. Zabezpečiť validáciu formulára pomocou HTML a vytvoriť pre neho vhodný CSS štýl (Úloha 3).
• Oboznámiť sa so základmi jazyka JavaScript a základnou manipuláciou s Document Object Model, ktorý predstavuje dokument zobrazený v prehliadači.
• Vyskúšať si jednoduché spracovanie údajov z formulára a prácu s localStorage na poskytnutom príklade.
• Aplikovať jednoduché spracovanie údajov z formulára a prácu s localStorage na váš formulár, vytvorený pri plnení cieľa 1 (Úloha 3).

Úvod

Na tomto cvičení prejdeme od HTML a CSS k JavaScript. Vytvoríte formulár pre príspevky (názory) návštevníkov vašej stránky a pomocou jednoduchého JavaScript kódu údaje z tohto formulára spracujete a uložíte v window.localStorage. Popri tom sa oboznámite aj so základnými prvkami jazyka JavaScript.

Objekt window.localStorage slúži na dočasné uchovávanie údajov v prehliadači. Zvykne sa používať aj pri vývoji webových aplikácii ako dočasná náhrada úložiska na strane servera. Takto ho v tomto a nasledujúcom cvičení použijeme aj my.

Poznámka: Všetko potrebné na splnenie dnešných úloh ste sa dozvedeli na prednáškach 4 až 6 ([1], [2], [3]). Na podrobné oboznámenie sa s jazykom JavaScript odporúčame zdroje [5] a [6]. S JavaScript-ovskou časťou problematiky, ktorú máte dnes zvládnuť vás podrobne oboznámia aj úlohy v bodoch 3 a 4 tohto cvičenia.

Postup

Úloha 1: Na vhodnom mieste úvodnej stránky vášho blogu (index.html), ktorý ste tvorili na predchádzajúcich cvičeniach, vytvorte formulár pomocou ktorého budú návštevníci môcť vyjadriť názor o vašej stránke.

Formulár má obsahovať nasledujúce riadiace elementy:

• jednoduché textové pole (input typu text) pre meno návštevníka,
• textové pole (input typu email) pre e-mail návštevníka,
• textové pole (input typu url), pre URL obrázka ktorým môže návštevník doplniť svoj príspevok,
• Skupina aspoň dvoch zaškrtávacích polí typu radio button.
• Aspoň jedno zaškrtávacie pole typu checkbox.
• veľké viacriadkové textové pole (textarea) pre text názoru návštevníka.
• tlačidlá pre odoslanie (button type='submit') a zresetovanie (button type='reset') obsahu formulára.
• Riadiace elementy prepojte s vhodnými popismi pomocou elementov label . Význam zaškrtávacích polí zvoľte sami, tak aby súviseli s témou vašej stránky.

Povinné polia nech sú

• meno návštevníka,
• e-mail návštevníka a
• text názoru návštevníka.

Úloha 2: Doplňte do formulára pole, kde návštevník môže zadať kľúčové slová, ktoré sa podľa neho hodia na vašu stránku. Pole prepojte s vhodným zoznamom hodnôt. Pole na zadávanie kľúčových slov nech je input typu text. Zoznam slov nech súvisí z obsahom vašej stránky. Vytvorte ho s použitím elementov datalist a option.

Poznámka: Ako takýto formulár zakomponovať do vašej stránky, môžete vidieť v príklade 55myTreesFormLStorageConsole.html. Stiahnuteľná verzia tohto príkladu je v archíve 55myTreesFormLStorageConsole.zip, dostupnom TU.

Úloha 3: CSS štýl vašej stránky doplňte o nastavenie rôzneho zobrazenia pre povinné a nepovinné a validné a nevalidné prvky formulára.

Poznámka: Štýly pre formulár môžete vidieť v príklade 16formsAttribsCss.html . Stiahnuteľná verzia tohto príkladu je v archíve 16formsAttribsCss.zip, dostupnom TU.

Formulár máte úspešne vytvorený, teraz sa zameriate na jazyk JavaScript, ktorý vám ho umožní oživiť. Najprv si zaexperimentujte s príkladmi ukazujúcimi základy JavaScript-u.

Úloha: Stiahnite a rozbaľte archív s príkladmi 5jsBasicsDom.zip.

Úloha: Experimentujte s príkladmi.

Robte zmeny v kóde a vyskúšajte ich efekt v prehliadači. Viaceré príklady obsahujú zakomentovaný kód s alternatívnymi postupmi. Napríklad:

• 51jsZaklady.html s alternatívnymi zápismi základných príkazov JavaScript-u a
• 56jsJqDomManip.html s alternatívnymi možnosťami načítania skriptov.

Komentáre tiež bližšie vysvetľujú kód príkladov.

Poznámka: Experimentovať môžete aj priamo v prehliadači pomocou vývojárskych nástrojov, spomenutých v predchadzajúcom cvičení.

Teraz si vyskúšate doplniť do formulára v príklade 55myTreesFormLStorageConsole.html nový riadiaci element a rozšíriť JavaScript kód tohto príkladu tak, aby spracovával údaje aj z neho. Tento príklad je už vlastne web aplikáciou, preto ho tak budeme aj označovať. Samozrejme, ak je táto úloha pre vás triviálnou, môžete ju preskočiť a pokračovať ďalšou.

Úloha: Do formulára s id="opnFrm" v aplikácii 55myTreesFormLStorageConsole doplňte element input type="checkbox" s id="willReturnElm". V JavaScript kóde doplňte ukladanie obsahu z tohto elementu do vlastnosti willReturn objektov v poli opinions a tiež do localStorage.myTreesComments.

Úlohu môžete riešiť samostatne. Alebo môžete použiť nasledujúci kompletný postup riešenia:

1. Stiahnite si a rozbaľte archív 55myTreesFormLStorageConsole.zip s aplikáciou. Ďalej budete pracovať s touto rozbalenou verziou aplikácie. Všetky zmeny budete robiť v súbore 55myTreesFormLStorageConsole.html.
2. Pred element pridajte nasledujúci kód: Teraz máte element s novým zaškrtávacím políčkom v html.
3. Do funkcie processOpnFrmData pridajte za príkaz nasledujúci kód: Takto hodnotu z políčka (true pri zaškrtnutom, false pri nezaškrtnutom) načítame z formulára do konštanty nopWillReturn.
4. Vo funkcii processOpnFrmData zmeňte kód na Takto sa hodnota konštanty nopWillReturn zapíše do objektu newOpinion.
Zvyšok kódu funkcie, ktorý zabezpečuje pridanie objektu newOpinion do poľa opinions a tiež do localStorage.myTreesComments už nemusíme meniť.

Keďže už viete, ako spracovanie v príklade 55myTreesFormLStorageConsole funguje, naprogramujte ho aj pre váš formulár.

Úloha: Pre formulár vytvorený pri plnení cieľa 1 naprogramujte v JavaScript-e také spracovanie údajov ako v príklade 55myTreesFormLStorageConsole.

Okrem skupiny zaškrtávacích polí typu radio button nech má údaj z každého riadiaceho elementu formulára samostatnú vlastnosť (položku) v objekte do ktorého sa ukladá (v príklade 55myTreesFormLStorageConsole to bol objekt newOpinion). Skupina zaškrtávacích polí typu radio button bude mať jednu spoločnú položku.

Poznámka: Pre prístup k skupine zaškrtávacích polí typu radio button je lepšie použiť kolekciu elements a atribút name ako atribúty id a checked. Oba prístupy sú ukázané na nasledujúcom obrázku, kde sa pracuje s príkladom 11formsRadioCheck.html.