Co můžete dělat s javascriptem. K čemu je Javascript a k čemu slouží?

V této poznámce jsem chtěl mluvit o tom, proč je Javascript potřebný a co s ním můžete dělat.

Jako každý programovací jazyk je hlavním úkolem Javascriptu vytvořit sekvenci akcí, které povedou ke konkrétnímu výsledku.

Mohou to být podmínky „když-pak“, smyčky, které vytvářejí určitou sekvenci akcí, matematické výpočty atd.

Nejdůležitější je, že všechny tyto operace lze provádět na webových stránkách, v okně prohlížeče. Kromě toho může javascript fungovat i bez připojení k internetu.

Podívejme se tedy na řadu příkladů, které demonstrují schopnosti, kterých lze pomocí Javascriptu dosáhnout. Podmínečně jsem je seřadil do několika skupin, abyste měli určité pochopení toho, co Javascript dělá a proč je potřeba.

1) Matematické operace

Na webových stránkách je často potřeba provést určité výpočty.

Například existují dvě textová pole a ve třetím textovém poli je třeba zobrazit součet dvou čísel, která jsou zadána v prvních dvou.

Pomocí Javascriptu můžete vytvořit kalkulačku a umístit ji na webovou stránku.

Zde je příklad takové kalkulačky:

Jiná situace, vezmeme nějaký textový řetězec na webové stránce, potřebujeme zvětšit její velikost 1,5krát. To lze také provést pomocí matematických výpočtů, vynásobením aktuální velikosti faktorem 1,5.

Úloh, které v praxi vyžadují výpočty, je spousta. To vše vám Javascript umožňuje.

2) Zpracování dat ve formulářích HTML bez připojení k internetu a bez použití programovacích jazyků na straně serveru.

Javascript vám umožňuje zkontrolovat, zda jsou vyplněna všechna povinná pole a zda údaje, které obsahují, odpovídají požadovanému formátu (například pokud jsou vyžadována čísla, pak by tam měla být pouze čísla a žádná písmena).

Před odesláním dat na server jsou data předem zkontrolována v Javascriptu. To snižuje zatížení serveru.

3) Uživatelské interakce a události

Na webové stránce se mohou objevit různé efekty v závislosti na tom, jaké akce uživatel provádí.

Rozbalovací nabídka na webu při najetí kurzorem myši.

Když kliknete na tlačítko, skryjete nebo zobrazíte nějaký prvek na stránce.

Když se kurzor myši přesune mimo okno prohlížeče, objeví se vyskakovací okno.

Efekty stmívání pozadí a zatmívání prvků jsou implementovány v JavaScriptu.

4) Interakce s prvky HTML na stránce a manipulace s jejich obsahem a styly.

Když dojde k určité události (například kliknutí myší nebo jakákoli jiná), můžete změnit vzhled (styly CSS) prvků na stránce.

To vše se děje programově.

Můžete k nim také přidat nějaké HTML tagy nebo atributy, také když nastane určitá událost.

5) Přidání animací a různých grafických efektů na webové stránky.

Padající a pohybující se předměty

Hladký vzhled a skrytí předmětů

Odpočítávadlo

A další efekty jsou implementovány v Javascriptu

Uvedl jsem zde jen malý seznam funkcí Javascriptu. Abyste vše viděli přehledně a s reálnými příklady, zde je seznam stránek, kde jsou zveřejněny fungující příklady v javascriptu:

Možnosti a rozsah Javascriptu jsou ve skutečnosti velmi rozsáhlé. Vše bude omezeno pouze vaší fantazií a kreativitou.

Uživatelé navštěvující různé webové zdroje často narážejí na zajímavá nestandardní řešení a chtějí to samé udělat na svých stránkách. Nejčastěji taková řešení zahrnují použití JavaScriptu.

V tomto článku vám povím o JavaScriptu, skriptovacím jazyce určeném pro vytváření interaktivních webových stránek, a o tom, co můžete dělat s JS. Podíváme se na příklady použití JavaScriptu a uvidíme, jak nám může pomoci.

Co můžete dělat pomocí JavaScriptu?

Upravujte stránku, pište na ni text, přidávejte a odebírejte značky, měňte styly prvků.

Reagovat na události: skript může čekat, až se něco stane (kliknutí myší/najetí myší, dokončení načítání stránky) a reagovat provedením funkce.
Když například najedete myší na odkaz nebo obrázek, můžete zobrazit nápovědu. Kliknutím myši můžete přepínat obsah bloku. Po načtení stránky zobrazte vyskakovací okno s reklamou. Vzhled stránky můžete změnit v závislosti na denní době.

JavaScript. Rychlý start

Provádět požadavky na server a načítat data bez opětovného načítání stránky.
Pokud například uživatel zanechá komentář na webové stránce nebo v knize návštěv, pak se tento komentář okamžitě zobrazí bez opětovného načítání stránky. Můžete také nahrávat soubory na server a zobrazovat průběh stahování v procentech.

Nastavujte a čtěte soubory cookie, ověřujte data, zobrazujte zprávy a mnoho dalšího.
Například při první návštěvě webu se uživateli zobrazí vyskakovací okno a nastaví se cookie. A při dalších návštěvách tohoto zdroje se vyskakovací okno nezobrazí, protože soubory cookie jsou již nastaveny.
Můžete si také zkontrolovat správnost zadaného e-mailu, zkontrolovat zadané telefonní číslo, zda odpovídá požadovanému formátu a rovnou zobrazit hlášení o správnosti či nesprávnosti zadaných údajů.

Příklady JavaScriptu

Využití JavaScriptu je tak široké a rozmanité, že lze uvést tisíce příkladů použití, a přesto výčet nebude úplný, protože každý den se píší nové skripty. Jsem si jist, že jste na různých stránkách narazili na mnoho níže uvedených příkladů. A to vše je implementováno pomocí JavaScriptu.

Galerie uvedená v příkladu samozřejmě není jediná. Podobných galerií byly stovky, jako všechno ostatní, co si lze představit. A abych seznam nenafukoval do nekonečna, uvedl jsem jeden příklad z nejoblíbenějších skupin skriptů.

Co nám to dává?

1. Pohodlná víceúrovňová navigace

Pomocí JavaScriptu můžete vytvořit víceúrovňové nabídky a víceúrovňovou navigaci v bočních panelech kompaktní. Podpoložky nabídky se otevírají buď kliknutím nebo najetím myší.

Mnoho online obchodů má rozbalovací navigaci na bočním panelu. Vezměme si jako příklad shop.by. Představte si, jak moc by se to protáhlo, kdyby podpoložky nevypadly při najetí myší nebo kliknutím, ale byly viditelné všechny najednou!

2. Použití galerií a sliderů nám dává možnost ukázat fotografie, obrázky dalších typů produktů a pohodlně a kompaktně uspořádat portfolio fotografa.

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickým příkladem, jak vytvořit webovou aplikaci.

Galerie jsou relevantní zejména pro detailní prohlížení produktů v internetových obchodech, kdy potřebujete ukázat různé druhy zboží. S jejich pomocí můžeme uživateli zobrazit všechny obrázky v malém bloku najednou, což poskytuje malé i zvětšené obrázky k prohlížení.

Kolik místa by bylo potřeba pro galerii zobrazenou na obrázku níže?

3. Poslední dobou se v postranních sloupcích webů zobrazuje spousta widgetů. Jedná se o widgety pro oblíbené sociální sítě, kategorie, archivy příspěvků, kalendáře, nejnovější komentáře na blogu, oblíbené příspěvky a mnoho dalšího.

Je třeba poznamenat, že na mnoha stránkách lze některé widgety jednoduše smazat, protože nemají žádný význam a zabírají místo.

Ale co když stále potřebujete kompaktně umístit spoustu widgetů?

Zde přichází na pomoc řešení JavaScript s „kartami“.

S jejich pomocí všechny widgety dobře vměstnáte do postranních sloupců webu. Pro lepší vnímání můžete widgety seskupit do „záložek“.

Můžete například umístit widgety sociálních sítí na jednu „kartu“, kategorie a archivy na druhou atd. To ušetří místo a usnadní používání webu.

4. Pomocí JavaScriptu můžete také výrazně vylepšit kontaktní stránku pro váš web nebo weby vašich klientů.

vkládat popisky do polí formuláře;

kontrolovat údaje zadané do polí formuláře a zobrazovat chybová hlášení;

odeslat data formuláře bez opětovného načtení stránky;

umístit mapu s trasou.

5. Pro ty, kteří na stránky umísťují tabulková data, bude velmi užitečné využít třídění dat v tabulce.

6. Pro ty, kteří na stránky zveřejňují jakékoli statistiky ve formě grafů a tabulek, bude velmi užitečná možnost vytvářet interaktivní tabulky a grafy v JavaScriptu.

Také pomocí JavaScriptu můžete na webu vytvářet nejrůznější efekty – jako je plynulé posouvání prvků, jejich pohyb, postupné objevování a mizení a vše, co vaše fantazie dokáže.

To vše může učinit stránky pohodlnějšími pro návštěvníky, interaktivnějšími a technologicky vyspělejšími.

Závěr

Jak vidíte, rozsah JavaScriptu je velmi široký. Patří mezi ně galerie, posuvníky, záložky, nejrůznější interaktivní prvky, mapy, grafy, práce s formuláři a mnoho, mnoho dalšího.

Myslím, že každý může najít užitečné využití pro JavaScript a použít jej na svých stránkách nebo na stránkách svých klientů.

Doufám, že se vám článek líbil a dozvěděli jste se z něj o nových funkcích, které lze díky JS implementovat.

Používáte na svých stránkách JavaScript? Jaké jsou vaše hlavní problémy při používání JavaScriptu?

Řekněte nám o tom v komentářích k článku.

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickým příkladem, jak vytvořit webovou aplikaci.

Klientské aplikace

JavaScript lze použít k vývoji kompletní klientské aplikace. Přestože JavaScript není tak komplexní jazyk jako Java, má významné možnosti při práci se značkami HTML a jejich přidruženými objekty. Jedna z nejznámějších JavaScript aplikací, hJdaho Design's ColorCenter (http://v.e-du.ru/?http://www.hidaho.com/c3), je zobrazena na obr. 1.12 Tato aplikace se používá k výběru barvy prvků , viditelné v prohlížeči, s možností jejich náhledu v samostatném rámci Vytvoření podobné aplikace pomocí Java je spojeno s mnohem větší složitostí spojenou s nutností interakce s HTML. Je zřejmé, že v některých případech JavaScript poskytuje téměř ideální rámec pro vývoj aplikací.

Ověření dat

JavaScript poskytuje webovým vývojářům možnost provádět ověření uživatelského vstupu, aniž by museli kontaktovat server. V kódu JavaScript můžete určit, zda jsou hodnoty zadané uživatelem správné, nebo řekněme, zda odpovídají požadovanému formátu. Je mnohem efektivnější provádět ověřování dat v JavaScriptu, než předávat serveru neúplná data. Tento druh přístupu je efektivní nejen pro uživatele zadávajícího data, ale i pro server. Zároveň existuje jistota, že data přenášená na server ke zpracování jsou zcela správná.

Vytváření interaktivních formulářů

JavaScript se také používá k oživení formulářů HTML. Jeden z úkolů revitalizace souvisí s kontrolou spolehlivosti dat. Další zahrnuje implementaci dalších funkcí, které nejsou k dispozici v HTML, jako je podpora informací ve stavovém řádku, otevření druhého okna prohlížeče pro zobrazení například informací nápovědy atd.

Klientské vyhledávací tabulky

Kromě ověřování dat je jedním ze způsobů, jak snížit potřebu přístupu k serveru, použití JavaScriptu ke generování a údržbě vyhledávacích tabulek na straně klienta. Je třeba mít na paměti, že v tomto případě musí být data vložena do samotného HTML dokumentu, takže použití vyhledávacích tabulek by mělo být omezeno na malé informační databáze pouze pro čtení.

Státní podpora

Ve webovém prostředí, které nepodporuje koncept stavu, se JavaScript používá k udržování stavu v komunikaci mezi serverem a klientem. Hlavní způsob

Stavová podpora je spojena s používáním sad cookies (informace uložené prohlížečem na straně klienta). JavaScript se stará o vyhledávání i ukládání souborů cookie na straně klienta.

Práce s Java applety, ovládacími prvky ActiveX a zásuvnými moduly

Jak se JavaScript vyvíjí, zvyšuje se schopnost pracovat s rozšířeními na straně klienta, včetně Java appletů, ovládacích prvků ActiveX a zásuvných modulů Netscape. Je snadné přistupovat k vlastnostem objektů Java a ActiveX a také vyvolávat jejich metody. Stejně tak není obtížné určit, zda je nainstalován konkrétní plug-in. Díky této schopnosti se JavaScript stává lepidlem, které drží HTML, applety a klientská rozšíření pohromadě.

Zdroj "JavaScript v příkladech"

Na internetu jsou miliony webových stránek hostovaných na stránkách, které slouží různým účelům. Některé z nich jsou atraktivní a jiné ne.

Ty, které vypadají dobře, snadno se používají a jsou dostatečně interaktivní, aby vás zaujaly na dlouhou dobu, jsou ty, které používají JavaScript. K čemu to je? Pojďme to zjistit.

Je to multiparadigmatický jazyk, což znamená, že podporuje objektově orientované, funkční a imperativní programování. Ačkoli jeho název naznačuje Javu, jeho syntaxe je odvozena z jazyka C.

Většina webových stránek je vytvořena ve formátu HTML kódu. Jedná se o velmi jednoduchý jazyk, který umožňuje přidávat na webovou stránku různé prvky, které ji činí atraktivní a zlepšují její čitelnost. HTML kód umožňuje používat pro webové stránky vložené obrázky, barvy a základní animace, čímž vylepšuje jejich vzhled. Použití CSS (Cascading Style Sheets) poskytuje větší flexibilitu a snižuje celkové množství kódu a složitost webových stránek. To usnadňuje prezentaci obsahu stránky na různých zařízeních, jako jsou mobilní telefony, tablety a stolní počítače. JavaScript se primárně používá k přidávání interaktivních prvků na webové stránky, díky čemuž jsou uživatelsky přívětivější a atraktivnější. Pojďme se podívat, co umí a jak se používá.

Co je JavaScript?

Je to programovací jazyk, který se obvykle spouští na straně klienta. Používá se pro interakci s uživatelem. Používá se také při vývoji her, desktopových a mobilních aplikací, vytváření pdf dokumentů a desktopových widgetů. Webové prohlížeče mají integrovanou podporu pro tento jazyk.

Příklad 1

První příklad je poměrně jednoduchý a obvykle se používá v položkách nabídky. Pokud najedete myší na konkrétní odkaz nebo tlačítko nabídky, změní se barva. Tuto změnu barvy na základě akcí uživatele lze použít pro různé vizuální efekty a také zlepšit vzhled webové stránky. V níže uvedeném příkladu umístěte ukazatel myši na požadované tlačítko a uvidíte, jak mění barvu.

Červená Zelená Modrá funkce color(el, color) ( el.style.color = "#FFFFFF"; el.style.backgroundColor = barva; ) funkce uncolor(el) ( el.style.color = "#000000"; el. style.backgroundColor = "#E6E6E6" ;

Příklad 2

Toto je dokonalý příklad události. Něco podobného jsem viděl na několika stránkách. Po stisknutí tlačítka se na displeji zobrazí zpráva. Může vám říct, co dělat dál, nebo něco užitečného. V níže uvedeném příkladu se po kliknutí na tlačítko zobrazí jednoduchá zpráva.

Knoflík

Přestože je JavaScript hojně využíván, uživatel by na něm neměl být zcela závislý. Má určité bezpečnostní problémy, protože kdokoli může duplikovat kód. Různé prohlížeče jej interpretují odlišně podle svých vykreslovacích modulů, což může mít za následek nekonzistenci zobrazení. Navzdory obavám, jako jsou tyto, je JavaScript velmi populární a široce používaný na celém internetu.

Abstrakt: Přednáška pojednává o nevýhodách a výhodách JavaScriptu. Běžná použití jazyka. . Moderní využití JavaScriptu.

Úvod

Nyní, když jste se seznámili se základními koncepty programování, musíte udělat krok zpět od detailů a pokusit se získat obecnou představu o tom, co vlastně můžete s JavaScriptem dělat – proč se obtěžovat trávit čas učením se složité téma a jeho použití na webových stránkách?

Nyní se nacházíme v době, kdy se používání JavaScriptu během posledních několika let posunulo z okrajů znalostí do běžné sady nástrojů pro vývoj webu. Nyní je obtížné získat práci webového vývojáře bez znalosti a schopnosti používat JavaScript.

Pojďme vpřed – tato přednáška má následující strukturu:

  • Jak jsem se zamiloval do JavaScriptu
  • Nevýhody JavaScriptu
  • Co umí JavaScript
  • Běžná použití JavaScriptu
    • Úvod do DOM skriptování
  • Závěr
Jak jsem se zamiloval do JavaScriptu

Když jsem se poprvé setkal s JavaScriptem, počítače byly pomalé, prohlížeče jej špatně interpretovaly a zdálo se mi to jako špatný nápad. Pocházím ze světa vývoje na straně serveru – podpořte všechny funkce v Perlu a budete v bezpečí.

Na druhou stranu rychlost internetu byla velmi pomalá a náklady na zpracování a ukládání souborů na serveru byly velmi vysoké a zde nastoupil JavaScript. Jazyk běžel na počítačích koncových uživatelů a vše, co bylo možné provést v JavaScriptu, nevytvářelo na serveru žádné další procesní zatížení. Díky tomu byly stránky rychlejší pro koncového uživatele a levnější pro vlastníka, pokud jde o provoz na serveru.

Rychle vpřed k dnešku a prohlížeče se zlepšily ve zpracování JavaScriptu a počítače se zrychlily a šířka pásma je mnohem levnější, takže většina nedostatků je nyní méně kritická. Snížení množství tam a zpět komunikace se serverem při používání JavaScriptu však stále vede k rychlejšímu výkonu webových aplikací a lepšímu uživatelskému dojmu z webu.

Nevýhody JavaScriptu

I přes všechna nedávná vylepšení stále existuje úskalí: JavaScript je nepředvídatelný. Ne jazyk samotný, ale prostředí, ve kterém je implementován. Neexistuje žádný způsob, jak předpovědět, jaký typ počítače má uživatel požadující webovou stránku, není žádný způsob, jak zjistit, jak je počítač zaneprázdněn jinými úkoly, a žádný způsob, jak zjistit, zda to nezpůsobuje nějaký jiný skript JavaScriptu otevřený na jiné kartě prohlížeče. mlít až do zastavení. Dokud prohlížeče obecně nezačnou věnovat samostatné výpočetní zdroje různým kartám a oknům (známým jako vlákna), bude to i nadále problém. Multithreading se však do určité míry stal dostupným v HTML5 prostřednictvím webových pracovníků a má určitou podporu v prohlížečích.

JavaScript je navíc v prohlížečích často deaktivován z bezpečnostních důvodů nebo proto, že JavaScript se často používá ke zbytečnému obtěžování uživatelů, spíše než ke zlepšení prostředí. Stále můžete například najít mnoho webů, které se snaží vytvořit nová okna proti vůli uživatele nebo zakrýt obsah webu reklamou, dokud uživatel neklikne na odkaz, aby se ho zbavil.

Co umí JavaScript

Vraťme se o krok zpět a vyjmenujme výhody JavaScriptu:

  • JavaScript se velmi snadno implementuje. Stačí vložit kód do dokumentu HTML a sdělit prohlížeči, že se jedná o JavaScript.
  • JavaScript běží na počítačích uživatelů webu – i když jsou offline!
  • JavaScript vám umožňuje vytvářet responzivní rozhraní, která vylepšují uživatelské prostředí a poskytují dynamické funkce, aniž byste museli čekat na odpověď serveru a vykreslovat další stránku.
  • JavaScript může načíst obsah do dokumentu, když a pokud to uživatel požaduje, aniž by znovu načítal celou stránku – což se běžně nazývá Ajax.
  • JavaScript může zkontrolovat, co lze v prohlížeči udělat, a odpovídajícím způsobem reagovat – říká se tomu Unobtrusive JavaScript Principles (viz Unobtrusive JavaScript Principles) nebo někdy bezpečné skriptování.
  • JavaScript může pomoci opravit problémy s prohlížečem nebo zacelit mezery v podpoře prohlížeče – například opravit problémy s rozložením CSS v některých prohlížečích.

To už je hodně na jazyk, který byl donedávna zesměšňován programátory, kteří jsou přívrženci „programovacích jazyků vyšší úrovně“. Jedním z důvodů oživení JavaScriptu je, že dnes vznikají stále složitější webové aplikace a vysoká interaktivita vyžaduje použití Flashe (nebo jiných pluginů) nebo skriptování. JavaScript je možná nejlepší způsob, protože je standardní pro web, je nativně podporován různými prohlížeči (víceméně - některé věci se mezi prohlížeči liší a tyto rozdíly jsou popsány na vhodných místech v následujících přednáškách) a je kompatibilní s další open source webové standardy.

Běžná použití JavaScriptu

Rozsah JavaScriptu se v průběhu let, kdy byl používán, měnil. Zpočátku byla interakce JavaScriptu s webem většinou omezena na interakci s formuláři, poskytování zpětné vazby uživatelům a sledování, kdy provedli určité věci. Použité funkce byly alert() pro upozornění uživatele na něco (viz obrázek 2.1), potvrzení() pro vyžádání povolení k provedení nějaké akce a prompt() nebo pole formuláře pro příjem vstupu od uživatele.


Rýže. 2.1.

To vedlo především k ověřovacím skriptům, které uživateli bránily v odeslání formuláře s chybami na server, a jednoduchým převodníkům a kalkulačkám. Kromě toho bylo možné vytvořit i zcela zbytečné věci, například vyzvat uživatele k zadání svého jména a ihned jej následně zobrazit.

K přidání obsahu do dokumentu byla navíc použita funkce document.write(). Také jsme pracovali s vyskakovacími okny a rámečky a strávili jsme spoustu nervů a vytrhali spoustu vlasů, abychom je přiměli ke vzájemné komunikaci. Pouhé pomyšlení na většinu těchto technologií by mělo každého vývojáře přimět znechuceně zamumlat „nechte je odejít“, takže se v takových věcech nezdržujme – existují lepší způsoby, jak používat JavaScript!

Úvod do DOM skriptování

Když prohlížeče začaly podporovat a implementovat Document Object Model (DOM) (http://www.w3.org/DOM/), který umožňuje mnohem pokročilejší interakci s webovými stránkami, JavaScript se začal stávat zajímavějším.

DOM je objektová reprezentace dokumentu. Předchozí odstavec by například v jazyce DOM byl prvek uzel, jehož název_uzlu by byl p . Obsahuje tři podřízené uzly – textový uzel obsahující „Když prohlížeče začaly podporovat a implementovat“ a jeho hodnotu nodeValue, uzel prvku s nodeName rovným a další textový uzel s nodeValue rovný „což umožňuje mnohem pokročilejší interakci s webem. stránky ,JavaScript začal být zajímavější." Podřízený uzel má také atributový uzel nazvaný href s hodnotou "http://www.w3.org/DOM/" a podřízený uzel, což je textový uzel s nodeValue rovným "Document Object Model - DOM".

Tento odstavec lze také zobrazit vizuálně pomocí stromového diagramu na obrázku 2.2.

Lidskou řečí můžeme říci, že DOM vysvětluje typy, hodnoty a hierarchii celého dokumentu – nic dalšího v tuto chvíli vědět nepotřebujete. DOM bude podrobněji probrán v "Navigace v DOM", Obecný úvod do DOM tohoto kurzu.

S DOM můžete:

  • Získejte přístup k libovolnému prvku v dokumentu a změňte jeho vzhled, obsah a atributy.
  • Vytvořte nové prvky a obsah a vložte je do dokumentu, kdykoli a když je budete potřebovat.

To znamená, že již nemusíte používat okna, rámce, formuláře nebo ty obávané varovné zprávy a můžete uživateli poslat dobře naformátovanou odpověď na dokument, jak je znázorněno na obrázku 2.3.

Spolu se zpracováním událostí se z toho stává výkonný arzenál pro vytváření interaktivních a poutavých rozhraní.

Zpracování událostí znamená, že kód reaguje na události, které se dějí v prohlížeči. Mohou to být události, které se dějí automaticky – například dokončení načítání stránky – ale většinou se odezva vztahuje k tomu, co uživatel dělá v prohlížeči.

Uživatelé mohou změnit velikost okna, posouvat stránku, stisknout určité klávesy nebo klikat na odkazy, tlačítka a prvky pomocí myši. Se zpracováním událostí můžete počkat, až tyto události nastanou, a dát webové stránce pokyn, aby na tyto akce reagovala požadovaným způsobem. Zatímco v minulosti by kliknutí na jakýkoli odkaz přesměrovalo návštěvníka webu na jiný dokument, nyní je možné tyto akce nahradit a udělat něco jiného, ​​například zobrazit a skrýt panel nebo extrahovat informace z odkazu a použít je k připojení k Webová služba.

Události jsou podrobně popsány v části "Zpracování událostí pomocí JavaScriptu", Práce s událostmi v JavaScriptu, dále v tomto kurzu.

Další moderní použití JavaScriptu

To je v podstatě to, co dnes lidé s JavaScriptem dělají. Vylepšuje stará, osvědčená webová rozhraní – klikání na odkazy, zadávání informací a odesílání formulářů atd. - rychleji reagovat na požadavky koncových uživatelů. Například:

  • Registrační formulář může během psaní kontrolovat, zda je uživatelské jméno dostupné, a vyhnout se tak frustrující frustraci z opětovného načítání stránky.
  • Vyhledávací pole může při psaní nabízet návrhy na základě toho, co již bylo zadáno (například zadání „bi“ může vyvolat návrhy slov obsahujících tento řetězec, jako je „pták“, „velký“ a „kolo“) . Tento model použití se nazývá automatické doplňování.
  • Informace, které se neustále mění, lze periodicky načítat bez nutnosti interakce uživatele, jako jsou výsledky sportovních utkání nebo kotace na burze.
  • Informace, které by bylo hezké mít a u kterých hrozí, že budou pro některé uživatele nadbytečné, mohou být staženy, když se k nim uživatel rozhodne získat přístup. Například navigační nabídka na webu může mít 6 odkazů, ale na vyžádání poskytne odkazy na hlubší stránky, když uživatel aktivuje položku nabídky.
  • JavaScript může opravit problémy s rozložením. Pomocí JavaScriptu můžete zjistit polohu a oblast libovolného prvku na stránce a také rozměry okna prohlížeče. Pomocí těchto informací můžete předejít překrývajícím se prvkům a dalším podobným problémům. Předpokládejme například, že máte nabídku s několika úrovněmi. Kontrola před zobrazením, zda je prostor pro zobrazení podnabídky, může zabránit posuvníkům nebo překrývajícím se položkám nabídky.
  • JavaScript může vylepšit rozhraní, která HTML poskytuje. I když je vhodné mít pole pro zadávání textu, ještě lepší je mít pole pro zadávání, které vám umožní vybrat si ze seznamu předdefinovaných hodnot nebo zadat vlastní. Pomocí JavaScriptu můžete odpovídajícím způsobem vylepšit běžné vstupní pole.
  • JavaScript lze použít k animaci prvků na stránce – například k zobrazení a skrytí informací nebo zvýraznění určitých částí stránky – lze tak vytvořit ještě uživatelsky přívětivější a bohatší uživatelské rozhraní. Další informace o těchto funkcích naleznete v části Animace v JavaScriptu, JavaScript Animace, dále v tomto kurzu.
Používejte JavaScript moudře a zodpovědně

Není toho mnoho, co byste s JavaScriptem nezvládli – zvláště v kombinaci s jinými technologiemi, jako je Canvas nebo SVG. S velkou příležitostí však přichází i velká zodpovědnost a při používání JavaScriptu byste měli mít vždy na paměti následující.

  • JavaScript nemusí být k dispozici – to lze snadno zkontrolovat, takže to není problém. Věci, které závisí na JavaScriptu, však musí být vytvořeny s ohledem na JavaScript a je třeba dbát na to, aby web nepřestal fungovat (tj. základní funkce nebudou dostupné), pokud JavaScript nebude dostupný.
  • Pokud použití JavaScriptu nepomůže uživateli dosáhnout jeho cíle rychleji a efektivněji, pak pravděpodobně není používán správně.
  • Používání JavaScriptu často porušuje konvence, na které si lidé za ta léta používání webu zvykli (například kliknutím na odkaz přejdete na jinou stránku a ikonou košíku, která znamená „nákupní košík“). I když mohou být tyto vzorce používání zastaralé a neúčinné, jejich změna přesto nutí uživatele změnit své návyky – a to způsobuje, že se lidé cítí nesví. Rádi se kontrolujeme, a když už jsme na něco přišli, může být někdy těžké se se změnou vypořádat. JavaScriptová řešení by měla být přirozeně lepší než předchozí zkušenost, ale ne tak odlišná, aby to uživatel nemohl vnímat prostřednictvím své předchozí zkušenosti. Pokud se vám podaří přimět návštěvníka webu, aby řekl: „Aha – to znamená, že nemusím čekat“ nebo „Skvělé – teď už nemusím dělat ten extra otravný krok“ – našli jste skvělé využití pro JavaScript .
  • CSS. S pomocí vhodných doplňků prohlížeče (jako jsou Google Gears nebo Yahoo Browser Plus) můžete dokonce použít JavaScript ke zpřístupnění online systémů offline a automatické synchronizaci, když je váš počítač online.

    JavaScript není omezen ani na prohlížeče. Rychlost JavaScriptu a nízké nároky na paměť ve srovnání s jinými programovacími jazyky umožňují jeho použití stále novými způsoby, od automatizace opakujících se úloh v programech, jako je Illustrator, až po jeho použití jako jazyka na straně serveru se samostatným analyzátorem. Budoucnost je široce otevřená; Bez ohledu na to, co se jako webový vývojář chystáte v blízké budoucnosti dělat, jsem si docela jistý, že dříve nebo později budete muset pracovat s JavaScriptem.

    o autorovi

    Chris Hileman je webový vývojář deset let, od té doby, co opustil rozhlasovou žurnalistiku. Funguje pro Yahoo! ve Velké Británii jako školitel a hlavní vývojář, který dohlíží na kvalitu front-end kódu pro Evropu a Asii.

    Chris má blog na webu Wait till I come (http://wait-till-i.com/) a je dostupný na mnoha sociálních sítích pod přezdívkou „codepo8“.

    Foto s laskavým svolením: Bluesmoon (