![Online kódové editory]()
Programátor nemá vždy po ruce speciální software, pomocí něhož pracuje s kódem. Pokud se tak stane, že potřebujete upravit kód a odpovídající software není po ruce, můžete využít bezplatných služeb online. Dále budeme vyprávět o dvou takových místech a podrobně analyzovat princip práce v nich.
Úprava kódu programu online
Vzhledem k tomu, že existuje velký počet takových redaktorů a jednoduše je nepovažujeme za všechny, rozhodli jsme se zaměřit se pouze na dva online zdroje, které jsou nejoblíbenější a představují základní soubor potřebných nástrojů.
Viz též: Jak psát program Java
Metoda 1: CodePen
Na webu CodePen mnoho vývojářů sdílí vlastní kódy, ukládá a pracuje s projekty. Není nic těžkého vytvořit váš účet a okamžitě začít psát, ale toto se děje takto:
Přejděte na webové stránky CodePen
- Otevřete hlavní stránku webu CodePen pomocí výše uvedeného odkazu a pokračujte v vytváření nového profilu.
![Přejděte na registraci na webu CodePen]()
- Zvolte vhodný způsob, jak se zaregistrovat a podle pokynů vytvořte svůj vlastní účet.
![Dokončete registrační proceduru na webu CodePen]()
- Vyplňte informace o vaší stránce.
![Vyplňte osobní údaje na webu CodePen]()
- Nyní můžete přejít na záložky, rozbalit rozbalovací nabídku "Vytvořit" a vybrat položku "Projekt" .
![Vytvořte nový projekt na webu CodePen]()
- V okně vpravo uvidíte podporované formáty souborů a programovací jazyky.
![Podporované typy souborů ve službě CodePen]()
- Začněte úpravy výběrem jedné z šablon nebo standardního značkování HTML5.
![Používání šablon na službě CodePen]()
- Veškeré vytvořené knihovny a soubory budou zobrazeny vlevo.
![Používání šablon na službě CodePen]()
- Kliknutí levým tlačítkem na objekt aktivuje. V okně vpravo se zobrazí kód.
![Úpravy souborů ve službě CodePen]()
- V dolní části jsou tlačítka, která umožňují přidat vlastní složky a soubory.
![Přidání nových souborů do služby CodePen]()
- Po vytvoření vytvořte název objektu a uložte změny.
![Nastavte nový název souboru ve službě CodePen]()
- Klepnutím na tlačítko "Nastavení" můžete kdykoli přejít na nastavení projektu.
![Přejděte na nastavení služby CodePen]()
- Zde můžete nastavit základní informace - název, popis, značky, stejně jako parametry náhledu a kódování.
![Změna a uložení nastavení služby CodePen]()
- Pokud nejste spokojeni s aktuálním zobrazením pracovního prostoru, můžete jej změnit kliknutím na tlačítko "Změnit pohled" a výběrem požadovaného okna pro prohlížení.
![Změňte vzhled služby CodePen]()
- Když upravíte potřebné řádky kódu, kliknutím na tlačítko "Uložit vše + spustit" uložte všechny změny a spustíte program. Zkompilovaný výsledek je zobrazen níže.
![Proces kompilace kódu v službě CodePen]()
- Uložte projekt do svého počítače kliknutím na tlačítko "Exportovat" .
![Příprava projektu ke stažení programu CodePen]()
- Počkejte, dokud nebude dokončeno zpracování, a stáhněte archiv.
![Stáhněte si projekt služby CodePen]()
- Vzhledem k tomu, že uživatel nemůže mít ve volné verzi kódu CodePen více než jeden aktivní projekt, bude nutné jej odstranit, pokud potřebujete vytvořit nový. K tomu klikněte na "Smazat" .
![Přejděte k odstranění projektu ve službě CodePen]()
- Zadejte kontrolní slovo a potvrďte odstranění.
![Potvrďte smazání projektu ze služby CodePen]()
Dále jsme přezkoumali základní funkce online služby CodePen. Jak můžete vidět, je vhodné nejen upravovat kód, ale také jej napsat od začátku a sdílet je s ostatními uživateli. Jedinou nevýhodou stránky jsou omezení ve volné verzi.
Metoda 2: LiveWeave
Nyní bych se chtěl zabývat webovým zdrojem LiveWeave. Obsahuje nejen vestavěný editor kódu, ale i další nástroje, o kterých budeme diskutovat níže. Práce s webem začíná takto:
Přejděte na webovou stránku služby LiveWeave
- Postupujte podle výše uvedeného odkazu, abyste se dostali na stránku editoru. Zde uvidíte ihned čtyři okna. První je psaní kódu v HTML5, druhý je JavaScript, třetí je CSS a čtvrtý ukazuje výsledek kompilace.
![Čtyři aktivní okna služby LiveWeave]()
- Jedna z funkcí této stránky může být při psaní štítků považována za nápovědu. Umožňují vám zvýšit rychlost psaní a vyhnout se chybám v pravopisu.
![Zobrazte tipy na službu LiveWeave]()
- Ve výchozím nastavení se kompilace provádí v živém režimu, tj. Zpracovává se okamžitě po provedení změn.
![Živá kompilace na LiveWeave]()
- Chcete-li tuto funkci deaktivovat, musíte přesunout posuvník naproti požadované položce.
![Zakázat automatickou kompilaci služby LiveWeave.]()
- Blízké dostupné zapnutí a vypnutí nočního režimu.
![Vypněte noční režim služby LiveWeave]()
- Můžete jít pracovat s řadiči CSS kliknutím na odpovídající tlačítko na panelu vlevo.
![Přejděte do editoru CSS služby LiveWeave]()
- V nabídce, která se otevře, se štítek upraví přesunutím posuvníků a změnou určitých hodnot.
![Upravte službu CSS služby LiveWeave]()
- Dále doporučujeme věnovat pozornost determinantu barev.
![Přejděte na barvy prohlížeče na LiveWeave]()
- Máte k dispozici rozsáhlou paletu, kde můžete zvolit jakýkoli odstín a jeho kód bude zobrazen nahoře, což se později používá při psaní programů s rozhraním.
![Práce s barevným prohlížečem na LiveWeave]()
- Přejděte do nabídky "Editor vektorů" .
![Přejděte do vektorového editoru služby LiveWeave]()
- Pracuje s grafickými objekty, které budou někdy také užitečné při vývoji softwaru.
![Pracujte ve vektorovém editoru služby LiveWeave]()
- Otevřete rozbalovací nabídku Nástroje . Zde si můžete stáhnout šablonu, uložit soubor HTML a textový generátor.
![Přejděte na uložení služby LiveWeave]()
- Projekt je stažen jako jeden soubor.
![Otevřete uložený dokument ze služby LiveWeave]()
- Pokud chcete uložit práci, nejprve musíte projít registrační procedurou v této online službě.
![Uložte projekt do služby LiveWeave]()
Nyní víte, jak upravit kód v aplikaci LiveWeave. Můžeme bezpečně doporučit použití tohoto internetového zdroje, protože na něm existuje mnoho funkcí a nástrojů, které umožňují optimalizovat a zjednodušit proces práce s programovým kódem.
To uzavírá náš článek. Dnes jsme vám poskytli dva podrobné pokyny pro práci s kódem využívajícím on-line služby. Doufáme, že tyto informace byly užitečné a pomohly určit výběr nejvhodnějšího webového zdroje pro práci.
Viz též:
Výběr programovacího prostředí
Programy pro vytváření aplikací pro Android
Vyberte program pro vytvoření hry