Manuál. pro tvorbu webu. HTML CSS JavaScript

Transkript

1 Manuál pro tvorbu webu HTML CSS JavaScript

2 Obsah HTML... 3 Struktura stránky... 3 Práce s textem... 3 Obrázky a barvy... 4 Odkazy... 4 Seznamy... 5 Tabulky... 5 Formuláře... 6 CSS... 7 Selektory... 7 Písmo a text... 8 Velikosti... 8 Okraje a rámečky... 9 Pozadí... 9 Zobrazení a poloha...10 Efekty v CSS JavaScript...12 Proměnné...12 Čísla a počty...13 Řetězce...13 Práce s poli...14 Operátory...15 Podmínky a cykly...15 Funkce

3 HTML HyperText Markup Language je značkovací programovací jazyk, který se používá při tvorbě webových stránek. Jazyk vznikl v roce 1990 a jeho poslední vydanou variantou je HTML 5.0, jehož finální verze vyšla v říjnu roku Dokument HTML je soubor s příponou.html (případně.htm), který obsahuje text spolu se značkami jazyka HTML. Značky (neboli tagy) jsou vždy zabaleny v ostrých závorkách <, >. Většina tagů je párová. To znamená, že kromě této <značky> se dále v dokumentu musí nacházet i tato </značka>. Princip tagů si můžeme ukázat na následujícím příkladu. <h1>nadpis</h1> <p>libovolný text</p> K vytváření stránek budete potřebovat nějaký textový editor. Může jím být i poznámkový blok. Doporučujeme však použití speciálních programů, které umí barevně zvýrazňovat syntaxi nebo počítat řádky a znaky. Takovými editory jsou například Notepad++ nebo PSPad. Výsledky své práce si zobrazíte v některém z internetových prohlížečů. Protože každý prohlížeč může zdrojový kód zobrazovat odlišně, je dobré své stránky testovat ve více prohlížečích. Struktura stránky Základní struktura dokumentu HTML má dvě části: hlavičku (head) a tělo stránky (body). Hlavička obsahuje především titulek webu (title). Dále zde najdeme například odkazy na externí soubory CSS nebo JavaScriptu. Ve značkách <body> se potom ukrývá celý obsah stránky. Základní šablona HTML může vypadat nějak takto: <!DOCTYPE html> <html> <head> <title>název webu</title> </head> <body>obsah stránky</body> </html> Práce s textem K formátování textu je zapotřebí použít značek HTML, neboť prohlížeč ignoruje více mezer mezi slovy i prázdné řádky ve zdrojovém kódu. Větší mezeru mezi slovy vytvoříte pomocí této sekvence znaků:. Řádkování potom provedete za pomoci nepárového tagu <br>. K lepší orientaci ve zdrojovém kódu poslouží 3

4 poznámky, které se ohraničují těmito znaky: . Další formátovací značky shrnuje následující tabulka. Značka Význam Značka Význam h1, h2,.., h6 nadpis (od největšího) u podtržení div oddíl i kurzíva p odstavec sub dolní index b tučné písmo sup horní index Obrázky a barvy Obrázek vložíte na stránky pomocí nepárového tagu <img>, do kterého přidáváte další atributy. Jediným povinným parametrem je cesta k souboru (src). Dále můžete přidat popisku obrázku (alt), umístění (align) nebo ohraničení (border). Další parametry (jako jsou rozměry obrázku nebo okraje) lze nahradit kaskádovými styly, proto je zde nebudeme uvádět. Uvedené vlastnosti obrázku mohou vypadat například takto: <img src="obr/obrazek.png" alt="popiska obrázku" align="left" border="0"> Tento obrázek najdeme ve složce obr, je zarovnaný doleva a nemá ohraničení. Barvy na web dostanete za pomoci parametru color. Hodnoty parametru můžete zadávat slovy (anglickými názvy barev) nebo v hexadecimálním vyjádření. Barva v hexadecimální (šestnáctkové) soustavě je například tato: #ff0000. Každá dvojice znaků reprezentuje velikost složky jedné ze tří základních barev: červené, zelené a modré (model RGB: red, green, blue). Uvedená barva je tedy sytě červená. Odkazy Váš web bude mít určitě více než jednu stránku. K jejich propojení slouží odkazy, které se ohraničují párovým tagem <a>. Uvnitř této značky se může nacházet text i obrázek. Hlavním parametrem je href, který definuje stránku otevřenou po kliknutí na odkaz. Dalšími atributy odkazu jsou title (komentář) nebo target, který určuje, do jakého okna se má odkazovaná stránka otevřít. Následující odkaz ukazuje použití těchto parametrů. <a href="stranka.html" title="komentář" target="_blank">odkaz</a> Tento odkaz otevře do nového okna stránku s názvem stranka.html. Máte-li dlouhý dokument, jako je tento, hodí se rozdělit ho na několik částí. Na každou z těchto částí, která je jednoznačně určena parametrem id, potom povede odkaz se speciálním znakem #. 4

5 <a href="#kapitola1">odkaz</a>... <h2 id="kapitola1">nadpis1</h2> Seznamy Existují dva typy seznamů: netříděný a tříděný. Netříděný seznam používá tagy <ul> a <li>, tříděný seznam vytvoříme pomocí značek <ol> a <li>. Požití těchto tagů vypadá následovně: <ul> <li>položka seznamu</li> <li>položka seznamu</li>... </ul> Tímto kódem získáme netříděný seznam. Zanořením tagu do sebe dostaneme víceúrovňový seznam. Styl odrážek určuje parametr type, který má u nečíslovaného seznamu hodnoty: disc (plné kolečko), square (čtverec) a circle(prázdné kolečko). Pro tříděný seznam jsou hodnoty atributu type následující: Parametr Hodnota n Význam styl číslování (type="n") a malá písmena (a, b, c,...) A velká písmena (A, B, C,...) i malé římské číslice (i, ii, iii,...) I velké římské číslice (I, II, III,...) 1 arabské číslice (1, 2, 3,...) Tabulky Tabulku ohraničuje párový tag <table> a tvoří se podobně jako seznam použitím značek <th>, <tr> a <td>. <th> definuje hlavičku tabulky, značkou <tr> se vytváří řádky a <td> určuje jednotlivá políčka tabulky. Jednoduchou tabulku ukazuje následující příklad. <table> <tr> <td>1. sloupec 1. řádku</td><td>2. sloupec 1. řádku</td> </tr> <tr> <td>1. sloupec 2. řádku</td><td>2. sloupec 2. řádku</td> 5

6 </tr> </table> Téměř všechno formátování tabulky zvládají kaskádové styly, zde si proto uvedeme jen to základní. Barvu pozadí tabulce i jednotlivým řádkům a buňkám přiřadíte parametrem bgcolor. Název tabulky můžete vložit mezi tagy <caption>. Atribut colspan spojí zadaný počet buněk přes více sloupců, zatímco rowspan udává počet řádků, přes něž bude jedna buňka natažena. Formuláře V HTML se formuláře vyskytují mezi párovou značkou <form>. Vstupní pole formuláře se tvoří pomocí tagů <input> (viz dále), <select> (rozbalovací nabídka) a <textarea> (víceřádkové textové pole). Nejdůležitější vlastnosti pole <input> shrnuje následující tabulka. Atribut Význam Atribut Význam type druh pole autofocus pole s kurzorem name jméno Doplňování známých autocomplete hodnot value hodnota pole size délka pole placeholder předvyplněná hodnota checked Zaškrtnuté pole Tag <select> může obsahovat parametr multiple, který umožňuje z rozbalovací nabídky vybrat více hodnot. Uvnitř značky <textarea> se používají parametry pro zadání velikosti pole: rows (počet řádků) a cols (délka řádku). Značka <input> obsahuje různé druhy polí (pole pro text, hesla, tlačítka, přepínače aj.), jak ukazuje další tabulka. Type (druh Type (druh Význam pole) pole) Význam text text checkbox zaškrtávací políčko password heslo submit odesílací tlačítko hidden skryté pole reset mazací tlačítko radio přepínač file pole k zadání souboru HTML 5 přináší celou řadu nových hodnot atributu type. Jedná se o pole e- mailové, telefonní či vyhledávací, pole pro datum a čas, pro adresu URL, barvu nebo číslo. Podpora těchto nových hodnot ze strany prohlížečů zatím není vysoká. Pokud prohlížeč daný prvek nezná, zobrazuje jej jako type text. 6

7 CSS CSS je zkratkou pro Cascading Style Sheets (česky kaskádové styly). Jedná se o jazyk, který je určen k popisu vzhledu dokumentů vytvořených v HTML, XHTML nebo XML. Kaskádové styly vznikly již v roce 1996, dnes je již krátce před dokončením finální verze CSS3. Hlavním úkolem CSS je oddělit vzhled webu od jeho obsahu. Existují tři způsoby, jak dokument HTML doplnit o CSS. Jednak se můžeme odkazovat na externí soubor s příponou.css. Dále je možné vložit kód CSS přímo do hlavičky dokumentu mezi párové tagy <style>. Třetí možností je vložení CSS vlastností přímo do těla stránky. Všechny tři možnosti shrnuje následující příklad. <link rel="stylesheet" href="styly.css" type="text/css"> <style type="text/css"> p { color: blue } </style> <p style="color: blue">tento text bude modrý</p> Vřele však doporučujeme používat první způsob. S externím souborem CSS totiž můžeme různým webovým stránkám přiřadit stejný styl jednoduše tak, že do každé stránky vložíme odkaz na CSS soubor. Komentáře vytvoříte těmito znaky: /* text poznámmky */. Selektory Selektor v CSS zastupuje element HTML. Existují tři základní selektory: typový selektor, třída a identifikátor. Pro typový selektor platí, že jeho název je shodný s názvem elementu (viz úvodní příklad). Jeden styl je možné použít pro více elementů současně, stačí je oddělit čárkou: h1, h2 { font-family: Arial } Uvedený kód přiřadí nadpisům první a druhé úrovně písmo Arial. Stejně tak lze selektoru přiřadit více vlastností. Jednotlivé vlastnosti se oddělují středníkem. Ukážeme si to na příkladu selektoru třída..trida { font-style: italic; color: red }  <p class="trida">text...</p> 7

8 Tato třída způsobí, že text v odstavci opatřený parametrem class bude červený a psaný kurzívou. Aby prohlížeč třídu rozpoznal, musí její název začínat tečkou. Stejnou třídu můžeme přiřadit libovolnému počtu elementů. Naproti tomu identifikátor lze na stránce použít pouze jednou a jeho název začíná znakem #. #nadpis { font-family: Arial; color: black }  <h1 id="nadpis">nadpis</h1> Písmo a text Vlastnosí pro formátování textu jsou desítky. Zde si ukážeme jen ty nejpoužívanější, které jsou využity i na tomto webu. Jedná se většinou o vlastnosi začínající slovy font a text. Vlastnost Hodnota Význam Ukázka font-size viz velikosti velikost písma 17px, 13pt font-family písmo, písma druh písma Calibri, Arial normální, KAPITÁLKY color jakákoliv barva barva textu tmavě červená text-align font-style normal, italic styl písma normální, kurzíva tloušťka font-weight normal, bold normální, tučné písma normal, smallcaps font-variant kapitálky textdecoration line-height text-indent left, right, center, justify none, underline, overline, linethrough normal, výška, násobek, procento délka, procento zarovnání textu dekorace textu výška řádku odsazení 1. řádku doleva, doprava, na střed, do bloku žádná, podtržení, čára nad textem, přeškrtnutí normální, 20px, 2, 200% odsazení o 40px Velikosti Velikost elementu zadáváme pomocí vlastností width (šířka) a height (výška). Lze zadat také minimální nebo maximální velikost, stačí před uvedené vlastnosti 8

9 přidat min- či max-. Existuje celá řada délkových jednotek, kterými můžeme velikost stanovit (viz tabulka). Značka Absolutní jednotka Značka Relativní jednotka mm milimetr px pixel (obrazovkový bod) cm centimetr em výška jednoho řádku in palec (1 in = 2,54 cm) ex výška malého x pt typografický bod (1 pt = 1/72 in) % procenta Okraje a rámečky Okraje přidělíme elementu pomocí vlastností padding (vnitřní okraj) a margin (vnější okraj). Lze zadávat všechny okraje najednou (po směru hodinových ručiček: horní, pravý, dolní a levý okraj), nebo každý okraj zvlášť přidáním přípony -top, -right, -bottom, -left. /* zápis: */ margin: 20px 0px 15px 0px; /* je stejný jako: */ margin-top: 20px; margin-bottom: 15px; Podobně se chová vlastnost border (rámeček). Šířku rámečku (border-width) můžeme opět zadat najednou nebo zvlášť. Barvu rámečku přiřadíme parametrem border-color a druh rámečku pomocí border-style, jehož hlavními hodnotami jsou: Border-style Ukázka Border-style Ukázka solid plný rámeček dotted tečkovaný rámeček double dvojitý rámeček dashed čárkovaný rámeček Pozadí Pozadí elementu můžeme buď vybarvit, nechat průhledné nebo na pozadí vložit obrázek. Všechny tři možnosti shrnuje následující tabulka, která ukazuje vlastnosti parametru background. 9

10 Background Hodnota -color -image -repeat -position transparent, barva url(cesta_k_obrazku) repeat, no-repeat, repeat-x, repeat-y left, center, right top, center, bottom Význam vlastnosti barva pozadí obrázek na pozadí opakování obrázku pozice obrázku Význam hodnot průhledné, červené šipka na pozadí opakovat, neopakovat, opakovat v ose x či v ose y horizontální umístění vertikální umístění Zobrazení a poloha Zobrazení elementu nastavujeme vlastnostmi display a visibility. Zajímavá je především možnost skrytí prvku. K umístění prvku slouží parametry position, left, top, float a z-index. Použití těchto vlastností ukazuje následující tabulka. Vlastnost display visibility position left, top float z-index Hodnota block, inline, none visible, hidden absolute, relative, fixed, static délka, procento left, right celé číslo 10 Význam vlastnosti zobrazení prvku pozicování prvku posunutí elementu plovoucí umístění překrývání prvků Význam hodnot blokový, řádkový a nezobrazený prvek viditelný, skrytý prvek absolutní, relativní, fixní a normální pozicování posun doprava, dolu vlevo, vpravo vyšší číslo překryje nižší Rozdíl mezi display: none a visibility: hidden spočívá v tom, že při použití visibility zůstane po elementu prázdné místo. Naproti tomu display: none prvek úplně skryje tak, že po něm nezůstane volné místo. Efekty v CSS3 Nová verze CSS přináší nové efekty, které vylepší vzhled Vašeho webu. Elementům lze nově přidat stín nebo kulaté rohy. Elementy je možné zprůhlenit, přidat barevný přechod nebo je nechat rotovat. Stín přidáme elementu

11 vlastností box-shadow, která má čtyři parametry: vodorovné a svislé posunutí, rozsah rozmazání a barva stínu. Vlastnost border-radius přidělí elementu kulaté rohy. Každému ze čtyř rohů lze zaoblení zadat zvlášť v pořadí: levý horní, pravý horní, pravý dolní a levý dolní roh. Použití obou uvedených vlastností ukazuje tento zdrojový kód: box-shadow: 4px 6px 5px #333; směrem dolů */ /* šedý stín posunutý o 4px doprava a o 6px border-radius: 10px 10px 0px 0px; /* horní rohy budou kulaté s poloměrem 10px, spodní zůstanou hranaté */ Další užitečnou funkcí je rgba. První tři hodnoty jsou z intervalu 0 až 255 a jedná se o klasické míchání barev v hexadecimálním vyjádření. Funkce rgba má však ještě čtvrtý parametr s hodnotami od 0 do 1, který udává průhlednost. Nula znamená zcela průhlednou barvu, 1 je úplně neprůhledná. Přechod přidáme vlastností linear-gradient, u které zadáváme počáteční bod přechodu, počáteční barvu a koncovou barvu. Rotaci elementu provedeme pomocí vlastnosti transform: rotate, jejíž jediným parametrem je úhel rotace. Přesnou syntaxi těchto funkcí shrnuje následující příklad. background-color: rgba (255, 255, 255, 0.9); průhledný */ /* bílý element, který je částečně background-image: linear-gradient (90deg, #d8d8d8, #ffffff) /* barevný přechod zleva doprava od šedé k bílé */ transform: rotate (15deg); ručiček */ /* prvek otočený o 15 stupňů po směru hodinových Všechny tyto funkce bohužel nepodporuje Internet Explorer ani v osmé verzi. Vyjma barevného přechodu Explorer podporuje ostatní čtyři vlastnosti od 9. verze. 11

12 JavaScript JavaScript je skriptovací jazyk, který vznikl v roce 1995 a používá se na HTML stránkách. Skripty se zapisují přímo do zdrojového kódu dokumentu HTML a prohlížečem jsou zpracovány až na klientském počítači. Jedná se o jazyk objektový, lze v něm vytvářet a pracovat s objekty. JavaScript je tzv. case sensitive, takže v něm záleží na velikosti písmen (na rozdíl od jazyka HTML). Kromě přímého zápisu skriptů do stránky je možné se stejně jako u CSS odkazovat na externí soubor. Obě dvě možnosti zápisu JavaScriptu ukazuje následující kód. <SCRIPT Type="text/javascript">  </SCRIPT> <SCRIPT Type="text/javascript" src="soubor_skriptu.js"></script> Uzavření obsahu skriptu do  je zde kvůli starším prohlížečům, které nepodporují JavaScript a skript by jinak zobrazily jako normální text. Jednořádkový komentář v JavaScriptu začíná dvěma lomítky: //, zatímco víceřádkový komentář je stejně jako v CSS uvozen znaky /* text komentáře */. Proměnné V JavaScriptu jsou proměnné netypové, proto se nemusí deklarovat. Deklarace proměnné probíhá pomocí klíčového slova var a vypadá takto: var NazevPromenne = hodnota. Jednoduchými typy proměnné jsou čísla a řetězce. Složité typy se nazývají objekty a patří mezi ně například pole nebo datum. Jednotlivé proměnné se oddělují středníkem například takto: var cislo = 100; // číslo var retezec = "nějaký text"; // řetězec var pole = new Array ('pole1', 'pole2') // pole se dvěma prvky K vypsání textu nebo proměnných slouží metoda document.write(). Text se dává do závorek spolu s uvozovkami. Proměnnou vypíšeme tak, že zadáme její název bez uvozovek. Lze zadat text i proměnnou najednou, v tom případě musíme obě části spojit znaménkem + (viz příklad). 12

13 document.write("text"); // vypíše Text document.write(cislo); // vypíše 100 document.write("<b>číslo:</b>" + cislo) // vypíše Číslo: 100 Čísla a počty S proměnnými typu číslo můžeme provádět různé matematické operace. Kromě základních operací (jako je sčítání, odčítání, násobení a dělení: +, -, * a /) obsahuje JavaScript spoustu matematických funkcí. Ty jsou soustředěny v objektu Math. Některé používané funkce shrnuje následující tabulka. Math.funkce Význam Příklad Výsledek floor zaokrouhlí číslo dolů Math.floor (12.34) 12 ceil zaokrouhlí číslo nahoru Math.ceil (12.34) 13 round zaokrouhlí na nejbližší číslo Math.round (12.34) 12 min vrátí nejnižší číslo Math.min (5, 10, 4, 20) 4 max vrátí nejvyšší číslo Math.max (5, 10, 4, 20) 20 random vrátí náhodné číslo mezi 0 a 1 Math.random () abs vrátí absolutní hodnotu Math.abs(-10) 10 pow (a, x) vrátí a na x-tou Math.pow (10,3) Řetězce Pro práci s řetězci existuje objekt String. Jeho jedinou vlastností je délka řetězce length, jehož použití ukazuje tento kód: var retezec = "Nějaký text"; document.write (retezec.length); // vrátí 11 Řetězce lze spojovat (concat) a rozdělovat (slice, substr). Rovněž se dá v řetězci vyhledávat. K tomu slouží metodyindexof a lastindexof. Pokud zadaný podřetězec není nalezen, vrací metody hodnotu -1. Řetězce můžeme převést na velká písmena metodou touppercase nebo na malá písmena pomocí tolowercase. Zjistit jednotlivé znaky v řetězci lze metodou charat. Znaky řetězce se číslují od nuly. 13

14 Funkce Význam Příklad Výsledek slice (x, y) vrátí podřetězec od x (včetně) do y (vyjma) retezec.slice (2,6) jaký substr (x, y) vrátí podřetězec délky y od znaku x (včetně) retezec.substr (2,7) jaký te concat spojování řetězců retez2.concat ("Jiný", "text") Jiný text indexof vrací pozici prvního výskytu hledaného podřetězce retezec.indexof ("jak") 2 lastindexof vrací pozici posledního výskytu hledaného podřetězce retezec.lastindexof ("t") 10 touppercase převod na velká písmena retezec.touppercase () NĚJAKÝ TEXT tolowercase převod na malá písmena retezec.tolowercase () nějaký text charat (n) vrátí n-tý znak v řetězci retezec.charat (0) N Práce s poli Máme dvě možnosti, jak v JavaScriptu vytvořit pole. Buď můžeme použít již zmiňovaný konstruktor new Array(), nebo stačí využít hranaté závorky. K jednotlivým prvkům pole se přistupuje operátorem [ ]. Prvky pole se opět číslují od nuly (viz příklad). var novepole = new Array ("prvek1", "prvek2", "prvek3",..); var novepole = ["prvek1", "prvek2", "prvek3",..]; // Chceme-li získat druhý prvek pole, použijeme: var druhyprvek = novepole[1]; // čísluje se od nuly K základním metodám pro práci s poli patří length - počet prvků pole, join() - převede prvky pole na řetězec a ty spojí, reverse() - obrátí naopak prvky v poli a sort() - seřadí prvky abecedně. Pokud potřebujeme mít pole vícerozměrné, musíme vytvořit pole polí, jak ukazuje následující kód. K jednotlivým prvkům pole se přistupuje opět přes operátor [ ], jen se musí použít dvakrát. 14

15 var novepole = new Array (); novepole[0] = new Array ("prvek1_1", "prvek1_2", "prvek1_3"); novepole[1] = new Array ("prvek2_1", "prvek2_2", "prvek2_3"); // Chceme-li získat prvek2_3, použijeme: var prvek = novepole[1][2] Operátory Kromě zmíněných početních operátorů (+, -, * a /) existují ještě operátory přiřazení a logické operátory. Jejich význam ukazuje následující tabulka. Operátory přiřazení Význam Logické operátory Význam x++ přičte k x jeničku == rovnost x-- odečte od x jedničku!= nerovnost x+=y k x přičte y <, <=, >, >= srovnání x-=y od x odečte y && logický součin (a zároveň) x*=y vynásobí x ypsilonem logický součet (nebo) x/=y vydělí x ypsilonem! negace Logický součet a součin se často plete. Logický součin dvou hodnot je pravdivý, když jsou obě hodnoty pravdivé. Zatímco logický součet je pravda, když je pravdivá alespoň jedna hodnota. Na co se také zapomíná, je fakt, že operátor rovnosti má dvě = a nikoliv jedno. Podmínky a cykly Za pomoci logických operátorů se vytvářejí podmínky a cykly. Podmínku vložíme do skriptu klíčovým slovem if. Pokud podmínka platí, provede se první příkaz, v opačném případě (pomocí else) se provede příkaz druhý - viz příklad. var promenna = 10; if (promenna < 10) document.write ('proměnná je menší než deset'); else document.write ('proměnná je větší nebo rovna deseti'); Je-li proměnná menší než deset, vypíše se o tom hláška. V našem případě podmínka neplatí, takže se vypíše, že proměnná je větší nebo rovna desesti. Pokud se má provést více příkazů, musíme je dát do složených závorek. Chceme-li 15

16 opakovat určitou proceduru, můžeme použít cykly, které také využívají podmínek. Cykly tvoříme klíčovými slovy while (s podmínkou na začátku), do while (s podmínkou na konci) a for. Jejich použití shrnuje tento kód. var i = 1; while (i<11) { document.write(i+'<br>'); i++; } var i = 1; do { document.write(i+'<br>'); i++; } while (i<10); for (i=1; i<11; i++){ document.write(i+'<br>'); } Všechny tři druhy cyklů vypíší čísla od 1 do 10 (každé číslo na novém řádku). Protože se podmínka u cyklu do while vyhodnotí až po vypsání hodnoty, je třeba použít podmínku i<10, jinak by cyklus vypsal také číslo 11. Funkce Funkci deklarujeme pomocí klíčového slova function. Za ním se nachází název funkce a v kulatých závorkách se mohou skrývat její parametry. Následuje tělo funkce ohraničené složenými závorkami - viz příklad. function NazevFunkce (parametr1, parametr2){ příkaz1, příkaz2,..} JavaScript se často používá na kontrolu formulářů, zdali jsou vyplněna všechna povinná pole. Příklad takové jednoduché kontrolní funkce ukazuje následující kód. function kontrola() { if (document.formular.jmeno.value =="" document.formular.zprava.value =="") alert ('Vyplňte prosím pole označená hvězdičkou.'); else document.formular.submit(); }  <form action="mailto:name@na.cz" method="post" name="formular"> Jméno: <input type="text" name="jmeno"> 16

17 Zpráva: <textarea name="zprava" Rows="9" Cols="60"></textarea> <input type="button" value="odešli data" onclick="kontrola();"> </form> Tlačítko pro odeslání formuláře (předposlední řádek příkladu) spustí funkci kontrola. Ta vyhodnocuje, zda jsou vyplněna pole pro jméno a zprávu. Je-li alespoň jedno pole prázdné (logický součet: ), vrátí funkce hlášku:'vyplňte prosím pole označená hvězdičkou.' V opačném případě (jsou-li obě pole vyplněná) funkce odešle data na zadaný . 17