--- ## Příklady použití JavaScriptu - validace dat zadaných uživatelem do formuláře, která se provede _před_ jeho odesláním na server (kontrolu provede prohlížeč, a proto odpadá HTTP dotaz + čekání na odpověď v případě chybně zadaných dat) - reakce na události přicházející od uživatele (např. se schová či odkryje nějaký text, otevře se nové okno, ...) - tvorba jednostránkových aplikací pro webový prohlížeč (AJAX)
--- ## Zajímavosti k formulářům I JavaScriptem lze skrýt některé prvky formuláře. Pak ale jejich hodnoty nebudou odeslány na server! Validace dat z formuláře: 1. Vytvoříme funkci pro kontrolu jednotlivých položek formuláře (funkci zapíšeme např. do samostatného souboru, který připojíme ke stránce). 2. V atributu `onsubmit` značky `form` uvedeme kód, kde použijeme vytvořenou funkci a předáme jí objekt `this` (toto klíčové slovo zastupuje aktuální objekt). 3. Pokud chceme znemožnit odeslání chybných dat na server, tak v atributu `onsubmit` můžeme vrátit `false`. Např. pokud `kontrola` vrací `true`/`false`: ```html <form onsubmit="return kontrola(this)"> ``` Viz také atributy a metody objektu [form](https://www.w3schools.com/jsref/dom_obj_form.asp). --- ## Zajímavosti k formulářům II Tipy k funkci pro kontrolu dat ve formuláři: - vstupem funkce může být objekt, který zastupuje celý formulář (ten pak funkci předáme při jejím volání) - funkce by měla vracet `true` nebo `false` - přístup k hodnotám elementů `input` poskytuje atribut `value` - pro pokročilejší kontroly textových údajů lze využít regulární výrazy
--- ## Interakce s uživatelem JavaScript může být s uživatelem v interakci prostřednictvím: - formulářů v HTML (JavaScript slouží pro kontrolu dat před odesláním na server, pro doplnění položek formuláře na žádost uživatele, ...) - dialogových oken (viz dále) - změny objektového modelu dokumentu (DOM) – lze např. přidávat a odebírat elementy, měnit jejich atributy a obsah (text) --- ## Dialogová okna v JavaScriptu Pomocí JavaScriptu lze uživateli zobrazit tři typy dialogových oken: 1. funkce `alert()`: informační okno se zprávou (uživatel jej uzavře kliknutím na OK), např. `alert("Hello, world!");` 2. funkce `confirm`: okno s otázkou a volbou ano/ne (resp. OK/Storno), např. ```js let vysledek = confirm("Chcete pokračovat?"); ``` 3. funkce `prompt`: okno pro zadání textu s výchozí hodnotou, např. ```js let jmeno = prompt("Zadej jméno: ", "John"); ```
--- ## Back-endové frameworky Téměř každý programovací jazyk (včetně C++) má svůj web framework pro „skriptování“ na straně serveru (_back-end_). Viz např. [srovnání na Wikipedii](https://en.wikipedia.org/wiki/Comparison_of_server-side_web_frameworks). Umožňují rychlý vývoj udržitelnějších a bezpečnějších webových aplikací. Nejznámější/nejpoužívanější frameworky jsou: - ASP.NET Core (C#) - CakePHP, Fat-Free, FuelPHP, Nette, Drupal, Wordpress, [a další...](https://kinsta.com/blog/php-frameworks/) (PHP) - [Ruby on Rails](https://rubyonrails.org/) (Ruby) - [Django](https://www.djangoproject.com/), [Flask](https://palletsprojects.com/p/flask/), [FastAPI](https://fastapi.tiangolo.com/), [JupyterLab](https://jupyter.org/), [Voilà](https://voila.readthedocs.io/en/stable/) (Python) - Node.js (JavaScript) - ve skutečnosti kompletní prostředí včetně JavaScript enginu umožňující programovat libovolné, nejen webové aplikace
TODO: https://fastapi.tiangolo.com/alternatives/
TODO: Advanced JavaScript: - https://thecodebarbarian.com/the-80-20-guide-to-maps-in-javascript.html - https://javascript.info/fetch-crossorigin - https://thecodebarbarian.com/async-functions-in-javascript.html - https://github.com/pcpl2/infinite-scroll-mithril/blob/main/src/infinityScroll.js - https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event