Manuál. pro tvorbu webu. HTML CSS JavaScript



Podobné dokumenty
Přehled základních html tagů

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba webových stránek

Tvorba webových stránek

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

CSS Kaskádové styly. formátování webových stránek

Úvod do jazyka HTML (Hypertext Markup Language)

HTML Hypertext Markup Language

Tvorba webových stránek

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

CSS Stylování stránek. Zpracoval: Petr Lasák

Blokový model v CSS:

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.

Tvorba fotogalerie v HTML str.1

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Základy HTML. Autor: Palito

Základy CSS (3. přednáška)

22. Tvorba webových stránek

TVORBA WEBOVÝCH STRÁNEK

Vývoj Internetových Aplikací

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

tvoříme web HTML/CSS

Kaskádové styly (CSS) Cascading Style Sheets

12. Základy HTML a formuláře v HTML

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Úvod do tvorby internetových stránek v jazyce HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML

CSS styly. Cascading Style Sheets kaskádové styly

HTML - Úvod. Zpracoval: Petr Lasák

Tvorba stránek v HTML ve Wordu

O CSS podrobněji. Box model Document flow Layout

13. Vytváření webových stránek

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Rozměry, okraje a rámečky

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

Ukázka knihy z internetového knihkupectví

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

TNPW1 Cvičení

Návrh a tvorba WWW stránek 1/8. Formuláře

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera lekce č. 2

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

Styly odstavců. Word Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Tomáš Herout

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Tvorba webových stránek

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Výukový materiál KA č.4 Spolupráce se ZŠ

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

CSS - stručná reference kaskádových stylů

IE1 jazyk HTML a kaskádové styly

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

(X)HTML, CSS a jquery

TNPW1 Cvičení aneta.bartuskova@uhk.cz

INTERSTENO 2015 Budapest World championship professional Word Processing

XHTML 1. Formuláře. Element form. <form>... </form>

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.

Formuláře. Internetové publikování. Formuláře - příklad

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

TVORBA WEBOVÝCH STRÁNEK

Káskádové styly = CSS

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

1. lekce. do souboru main.c uložíme následující kód a pomocí F9 ho zkompilujeme a spustíme:

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

Manuál k editoru TinyMCE

Stránka se dá otevřít dvěma způsoby

EVROPSKÝ SOCIÁLNÍ FOND. Úvod do PHP PRAHA & EU INVESTUJEME DO VAŠÍ BUDOUCNOSTI

1. lekce. do souboru main.c uložíme následující kód a pomocí F9 ho zkompilujeme a spustíme:

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Kaskádové styly základy grafiky

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC

Nová struktura souborů a složek

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

Atribut Význam Hodnoty

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití

IE1 jazyk HTML a kaskádové styly

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Tematický celek Proměnné. Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace Deklarace proměnných

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

02. HODINA. 2.1 Typy souborů a objektů. 2.2 Ovládací prvky Label a TextBox

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Administrace webu Postup při práci

DUM 14 téma: Interakce s uživatelem

Mgr. Stěpan Stěpanov, 2013

Inovace bakalářského studijního oboru Aplikovaná chemie

Transkript:

Manuál pro tvorbu webu HTML CSS JavaScript

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 CSS3...10 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...16 2

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 2014. 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

poznámky, které se ohraničují těmito znaky: <!-- text poznámky -->. 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

<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

</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

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 } <!-- v dokumentu HTML musí být jméno třídy přiděleno parametru class: --> <p class="trida">text...</p> 7

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 } <!-- v dokumentu HTML musí být jméno identifikátoru přiděleno parametru id: --> <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

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

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

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

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"> <!-- obsah skriptu // --> </SCRIPT> <SCRIPT Type="text/javascript" src="soubor_skriptu.js"></script> Uzavření obsahu skriptu do <!-- komentáře HTML //--> 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

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 () 0.69665601 6... abs vrátí absolutní hodnotu Math.abs(-10) 10 pow (a, x) vrátí a na x-tou Math.pow (10,3) 1 000 Ř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

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

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

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(); } <!-- v HTML se musí nacházet kód pro formulář: --> <form action="mailto:name@na.cz" method="post" name="formular"> Jméno: <input type="text" name="jmeno"> 16

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ý e-mail. 17