Metóda 1: PlayCode
PlayCode je pokročilý editor kódov, ktorý podporuje JavaScript a všetky základné funkcie plnohodnotného vývojového prostredia. V ňom môžete kombinovať vývoj HTML, CSS a JS a prepínať medzi dokumentmi kedykoľvek.
Prejdite do online služby PlayCode
- Editor spustíte kliknutím na tlačidlo „Otvoriť editor“.
- Vytvorí sa základná šablóna, ktorú je možné v prípade potreby vymazať a v rovnakom bloku editora začať od nuly písať skripty.
- K dispozícii je zmena veľkosti všetkých existujúcich blokov, ktorá sa vykonáva posunutím krajného rámu. Pripravte si pracovný priestor vopred, aby ste uľahčili ďalší vývoj.
- Všetky vykonané zmeny sa okamžite prejavia na obrazovke, pretože režim Live je predvolene aktivovaný.
- Deaktivujte ho deaktiváciou príslušného tlačidla vpravo hore. Potom bude treba kompiláciu spustiť nezávisle kliknutím na ikonu s trojuholníkom.
- Pomocou zabudovaných rád môžete rýchlo zadávať dôležité príkazy. Stačí napísať iba pár písmen a zvyšok obsahu sa nahradí automaticky. To isté platí pre úvodzovky alebo zátvorky, ktoré sa ukladajú automaticky.
- Konzola je zobrazená vľavo dole. Ak sa počas spracovania kódu vyskytnú chyby, okamžite sa zobrazí upozornenie s analýzou nepresností.
- Na ľavom paneli môžete prepínať medzi súbormi JS, HTML a CSS.
- V PlayCode sú navyše aj ďalšie šablóny, ktoré sa zobrazujú ako jednoduché skripty alebo dokonca hry s interakciou používateľa. Prejdete na ne kliknutím na tlačidlá vpravo.
- S výsledkom výstupu budete okamžite oboznámení a kód budete môcť manuálne upraviť a použiť v budúcom projekte.
- Ak plánujete s PlayCode ďalej pracovať, odporúča sa vytvoriť nový účet. Potom budú k dispozícii nástroje na ukladanie, publikovanie a distribúciu projektov.
Metóda 2: JsFiddle
Online služba JsFiddle má svoje vlastné charakteristiky: napríklad používateľ sa môže pripojiť k populárnym rámcom, ako aj rýchlo prepínať medzi jazykmi, ktoré sa používajú na písanie kódu.
Prejdite na službu JsFiddle Online
- Na hlavnej stránke JsFiddle si môžete vybrať jednu zo šablón pre ďalšie programovanie alebo začať písať kód od nuly.
- Editor JS je v dolnej časti a jeho veľkosť sa dá podľa potreby zmeniť posunutím okrajov oblasti. To je miesto, kde prebieha hlavný proces kódovania.
- Ak chcete prepnúť na starú verziu jazyka alebo zvoliť iný jazyk, použite rozbaľovaciu ponuku.
- V hornej časti sú editory HTML a CSS rozdelené do dvoch blokov a môžete s nimi kedykoľvek komunikovať jednoduchým prepínaním medzi nimi.
- Na kontrolu kódu použite tlačidlo „Spustiť“... Bohužiaľ JsFiddle nepodporuje kompiláciu v reálnom čase.
- V malom okne konzoly vpravo sa zobrazia informácie o úspešnej kompilácii alebo informácie o chybách, ktoré sa vyskytli počas tohto procesu.
- Samotný výsledok sa zobrazí v samostatnej oblasti nad konzolou.
- Použite rozbaľovaciu ponuku "Nastavenie"ak chcete zmeniť vzhľad editora, prispôsobte konzolu, parametre reťazcov a správanie online služieb.
- V rovnakej rozbaľovacej ponuke, ktorá je zodpovedná za výber programovacieho jazyka, môžete rámec prepojiť na osobné účely.
Ak chcete projekt uložiť alebo získať ďalšie funkcie editora, budete sa musieť zaregistrovať v JsFiddle. Potom si prečítajte tarifné plány a vyberte si jeden z nich v prípade, že plánujete využívať možnosti online služby priebežne bez akýchkoľvek obmedzení.
Metóda 3: DirtyMarkup
Na záver by sme chceli hovoriť o online editore DirtyMarkup, ktorý sa výrazne líši od tých diskutovaných vyššie v tom, že nie je určený na písanie kódu od nuly, ale slúži na jeho uvedenie do normálneho formátovania v automatickom režime.
Prejdite na online službu DirtyMarkup
- Na webe DirtyMarkup prepnite na „JS“kliknutím na príslušné tlačidlo.
- Teraz môžete vložiť všetok kód, ktorý je potrebné naformátovať, do samotného editora.
- Zaškrtnutím označte zarážku tabulátora, dĺžku riadku, typ zložených zátvoriek a ďalšie parametre.
- Kliknutím na ikonu môžete použiť možnosti úprav „Vyčistiť“.
Zostáva len skopírovať výsledný obsah do správneho formátovania, aby ste ho mohli ďalej použiť vo vývojovom prostredí alebo v inom online editore JavaScriptu.