Tento článek se zabývá vytvořením online chatu s využitím JavaScriptu. Pro správné fungování aplikace je klíčové pochopit zpracování událostí a správné rozdělení kódu do více souborů. JavaScript je moderní skriptovací klientský jazyk, který se používá k programování webových stránek. Při jeho použití hovoříme o tzv. JavaScriptu.
Zpracování událostí v JavaScriptu
Zpracování událostí je základem interaktivních webových aplikací. V JavaScriptu pracujeme s posluchači pro zpracování událostí. Metoda addEventListener() slouží k připojení obslužných funkcí ke stejné události na jednom elementu.
Načítání DOM a externích zdrojů
Posluchače jsme nastavili na událost load. Dialogové okno se zprávou „Ahoj!“ se zobrazí až po načtení úplně celé stránky včetně všech externích objektů - čeká se tedy například na načtení obrázků. Naopak dialogové okno se zprávou „Ahoj!“ se zobrazí ihned po načtení objektového modelu dokumentu (DOM) - nečeká se tedy například na načtení zdrojů. Při umístění skriptu na konci těla dokumentu není kontrola načtení DOM modelu nutná, neboť v tomto okamžiku je již DOM model načten. Pokud skript vkládáme do části HTML, je kontrola načtení DOM modelu nutná, neboť není jisté, kdy bude DOM model načten.
Příklad načítání DOM
Zde je příklad, jak zajistit, aby se kód spustil až po načtení DOM:
<script>document.addEventListener('DOMContentLoaded', function() { // Kód se spustí po načtení DOM console.log('DOM načten.');});</script>Struktura a organizace kódu
Je důležité vědět, jak aplikaci správně rozdělit do více souborů. Kód, který dříve patřil do tagů <script>, nyní píšeme samostatně a z HTML se na něj poté odkazuje. Například obsah kalkulačky (bez tagů <script>) můžeme uložit do samostatného souboru. Aplikace funguje stejně dobře jako předtím.
Čtěte také: Průběžný šnek New Holland: Klíč k lepší sklizni
Komentáře a proměnné
Komentáře používáme obecně v programování za účelem popsání kódu a vložení vlastních poznámek. To se nám velmi hodí například při testování stránek a ke zpětnému pochopení logiky kódu. Víceřádkový komentář je ohraničen /* ... */. Proměnná je místo v paměti, kam se mohou ukládat data, se kterými dále pracujeme.
Implementace chatu
Funkce OnLineForm
Funkce OnLineForm očekává čtyři parametry: $meno, $sprava, $odhlasit a $dvojnik. První tři jsou jasné, $dvojnik je negovaná hodnota proměnné $chatar, což znamená, že pokud je $chatar prázdný řetězec, $dvojnik je pravdivá hodnota.
// vstupy jsou okelse { // vrátí řetězec s online chatujícími $new_online = OnLineForm($meno,$sprava,$odhlasit,!$chatar); // pokud $chatar == "" kontroluj dvojníka if(!$chatar){ // obsahuje vrácený řetězec dvojníka? }}Stručně řečeno, pokud uživatel přichází poprvé (což víme podle prázdné proměnné $chatar) a chce napsat své jméno a zprávu, provedeme kontrolu, zda takové jméno již nechatuje. Funkce vrátí řetězec online chatujících oddělených znakem „>“. Nic nám tedy nebrání zjistit, zda vrácený řetězec neobsahuje $meno. Pokud ano (uživatel s takovým jménem již existuje), vypíšeme o tom zprávu a nastavíme $meno na prázdný řetězec, jako když jsme na chat přišli poprvé. Jinak přidáme $meno do řetězce online chatujících, protože na základě změny $new_online oproti $old_online budeme obnovovat rámec online.
Principy fungování OnLineForm
Funkce OnLineForm pracuje následovně:
- Do proměnné $doteraz se uloží počet sekund od 1.1.1970.
- Oba soubory se přejmenují, čímž se dá ostatním najevo, že s nimi právě pracujeme.
- Obsah celého souboru online uživatelů se načte do pole, kde každý prvek pole bude obsahovat jeden řádek ze souboru.
- Potom se otevřou oba soubory a postupně pomocí cyklu while se projdou všechny prvky pole.
- Do $nick se uloží jméno chatujícího a do $idle počet sekund od 1.1.1970 do času přidání poslední zprávy.
- Potom na základě několika podmínek se zapisují do obou souborů potřebné údaje.
Práce se soubory není časově náročná, proto se tento cyklus v praxi vykoná pravděpodobně pouze jednou. Jméno je přidáno tehdy, pokud se $meno nenachází mezi online chatujícími a ještě musí být splněna jedna z těchto dvou podmínek: $meno se nechce odhlásit, nebo se dělá kontrola, zda existuje dvojník. Nakonec se soubory zavřou, přejmenují na původní a vrátí se seznam právě online chatujících. Tato funkce se však spustí pouze tehdy, pokud vyhovují vstupní hodnoty a odešle se formulář.
Čtěte také: uspořádejte si ikony na Windows liště
Automatické odstranění starých uživatelů
Toto by byl víceméně statický chat, proto, jako v prvním článku o jednoduchém chatu, se každých HEAD_RELOAD_TIMER sekund obnoví rámec head, ve kterém pracuje skript head.php, který se stará o automatické odstranění starých uživatelů.
Rozlišování velikosti písmen
Pozorný čtenář možná postřehl, že při porovnávání proměnných $meno a $nick rozlišujeme velikosti písmen, proto se na chatu mohou objevit např. jména „Barborka“ i „BARBORKA“. Kdo má něco proti, nechť nahradí toto porovnávání funkcí StrCaseCmp(), která není citlivá na velikost písmen. Také bude potřebná změna funkce StrStr() na StrIStr().
JavaScriptové menu
Naše menu bude kulaté a vysouvací. Všimněte si, že jsem menu přidal atribut data-radial-menu. V konstruktoru bude přijímat jeden parametr - element. Metoda querySelectorAll vrátí pole elementů, které těmto pravidlům vyhovují. Hned na začátku máme self, do kterého si ukládáme this instanci (i když jsme třeba poskočili výš).
Struktura menu
Nyní si projdeme všechny potomky našeho elementu. Budou jen dvě. Potomky procházíme cyklem. Celkem nás tam mohou potkat dva - span a ul. span je název menu a ul je submenu. U ul to bude trochu složitější.
Velikost podpoložek
Podpoložkám musíme nastavit velikosti. Pokud neexistuje atribut data-size, nastavíme 25% velikosti z předka. Submenu si skript zjistí sám a to tak, že to bude přesně 25% z předka.
Čtěte také: Nastavení velikosti písma Firefox
Metoda SetPositions
Vytvořte na prototypu objektu metodu SetPositions. Budeme proházet všechny submenu a každé umisťovat pomocí 360° / početSubmenu.
Základy cyklů v programování
V programování chceme často docílit toho, aby se vykonával stejný kód stále dokola. Cyklus se vykonává v programu tak dlouho, dokud bude splněna nějaká podmínka. Při programování cyklu musíme dbát na to, aby byl cyklus vždy konečný.
| Funkce / Proměnná | Popis | Příklady použití |
|---|---|---|
| OnLineForm($meno, $sprava, $odhlasit, $dvojnik) | Zpracovává online uživatele, kontroluje duplicity, ukládá zprávy a vrací seznam online uživatelů. | Kontrola nového uživatele, aktualizace seznamu online. |
| $chatar | Proměnná indikující, zda je uživatel přihlášený (prázdná hodnota znamená nového uživatele). | Rozpoznání prvního přihlášení uživatele. |
| $dvojnik | Negovaná hodnota $chatar, používá se pro kontrolu duplicitních jmen. | Určení, zda je nutné provést kontrolu duplicitního jména. |
| addEventListener() | Připojí obslužnou funkci k události na elementu. | document.addEventListener('DOMContentLoaded', function(){...}) |
| StrCaseCmp() | Porovnání řetězců bez citlivosti na velikost písmen. | Nahrazení standardního porovnání jmen pro větší flexibilitu. |
| StrIStr() | Vyhledání podřetězce v řetězci bez citlivosti na velikost písmen. | Vyhledání jména v seznamu online uživatelů. |
| data-radial-menu | Vlastní atribut pro identifikaci menu. | <nav data-radial-menu>...</nav> |
| SetPositions() | Metoda pro umístění submenu v kruhovém menu. | Dynamické nastavení pozic submenu. |
tags: #javascriptova #chat #v #liste #návod