10 myšlienok projektu JavaScript pre začiatočníkov

JavaScript je jedným z najcennejších programovacích jazykov, ktoré sa dnes používajú pri vývoji webových aplikácií. S príchodom Express.js, backendového zásobníka JavaScriptu spojeného s množstvom existujúcich a vyvíjajúcich sa front-end rámcov, sa zdá, že jazyk bude stále revolučný vo webovom programovaní.

Ak ste teda začiatočník v JavaScripte, sadnite si. Tieto nápady na projekty JavaScript posilnia vaše schopnosti a zoznámia vás so základnými konceptmi JavaScriptu. Začnime.

1. Jednoduchá aplikácia Zoznam úloh

Pri zostavovaní zoznamu úloh pomocou JavaScriptu sa naučíte základnú logiku akcií CRUD a preskúmate funkcie spracovania JavaScriptu. V zásade si skript vytvoríte tak, aby ste vytvárali úlohy, čítali ich, aktualizovali a potom ich odstraňovali.

Pomocou obslužných nástrojov udalostí vytvoríte inštanciu formulárov na zadanie každej úlohy a zobrazíte ich pri odoslaní. Hneď ako začne fungovať kód JavaScript na ovládanie funkcií vašej aplikácie, môžete na organizáciu jednotlivých úloh použiť metódu zobrazenia mriežky CSS. Potom im priraďte prioritu pomocou

Podmienené vyhlásenie JavaScript a metódy dátumu.

Súvisiace: Ako vytvoriť základnú aplikáciu Zoznam úloh pomocou JavaScriptu

Napriek tomu, že to nie je povinné, môžete to posunúť ďalej uložením úloh do lokálnej databázy. Uloženie každého vstupu do súboru JSON na vašom lokálnom počítači vám napríklad poskytne predstavu o tom, ako vykonávať operácie CRUD pri práci s reálnym objektom JSON, poľom alebo databázou NoSQL.

2. Vytvorte jednoduchý časovač

Časovač je jedným z najľahších projektov, ktoré je možné rýchlo vykonať pomocou JavaScriptu. Aj keď to znie celkom jednoducho, naučí vás to automaticky meniť stav prvku v intervaloch pomocou JavaScriptu.

Aby to bolo ešte unikátnejšie, môžete si vytvoriť odpočítavanie, ktoré sa zastaví na hodnote zadanej používateľom. Nemusíte ukladať žiadny záznam do databázy alebo do objektu JSON, pretože toto je inštancia, ktorú si používateľ môže vyladiť podľa vlastného uváženia.

Pri kódovaní časovača sa zoznámite s funkciami JavaScript. Navyše sa naučíte písať kód JavaScript pre základné matematické konverzie, pretože budete možno potrebovať previesť niektoré časové parametre.

3. Postavte obrazový kolotoč od začiatku

Kolotoč je jedným z vizuálne najpríťažlivejších doplnkov používateľského rozhrania webovej stránky. V spojení so skvelým UX dodáva vášmu používateľskému rozhraniu elegantný efekt. Navyše vám umožňuje jedinečne zobrazovať obrázky alebo položky.

Na vybudovanie funkčného a reaktívneho kolotoča si budete musieť znečistiť ruky slučkou JavaScript. Svoje obrázky môžete získať z DOM a vložiť ich do prázdneho poľa JavaScript. Potom pridáte udalosti kliknutia k ďalšiemu a predchádzajúcemu tlačidlu, aby sa obrázky postupne zobrazovali buď vpravo alebo vľavo.

Nie je to však striktný prístup. Môžete použiť akúkoľvek metódu, ktorá vám najlepšie vyhovuje.

Ak ste zvedaví a chcete ísť o krok ďalej, môžete na svoj displej pridať animácie, aby to bolo realistickejšie a jednoduchšie na používanie.

4. Webová kalkulačka

JavaScript, rovnako ako ostatné programovacie jazyky, podporuje množstvo matematických operácií. Pri kódovaní tohto projektu sa teda naučíte, ako pridať udalosti kliknutia k vlastným tlačidlám alebo súborom div a usporiadať ich tak, aby sa stali responzívnou kalkulačkou, ktorá sa zobrazí v prehliadači.

Ak ich ešte nepoznáte, možno by ste sa mali začať hrať s operátormi JavaScript. A potom si zabaľte ruky okolo obsluhy udalostí, aby ste lepšie porozumeli konceptu za nimi.

Súvisiace: Ako vytvoriť jednoduchú kalkulačku pomocou HTML, CSS a JavaScript

Aj keď je to podrobnejšie, môžete začať tým, že napíšete skript procedurálne. Keď však kalkulačka začne fungovať, zvážte jej premenu na funkcie. Môžete k tomu pristúpiť vytvorenie CSS flexboxu. Potom im pomocou HTML priraďte hodnoty a operátory. Potom môžete zavolať svoju funkciu spracovania udalostí na každý prvok v flexboxe pomocou slučky JavaScript.

5. Generátor životopisov s JavaScriptom

Aj keď by ste mohli byť trochu zmätení z toho, ako začať s týmto, existuje niekoľko webových aplikácií na vytváranie životopisov, kde môžete chytiť svoj nápad.

Nakoniec z vás urobí opakovane použiteľný nástroj na tvorbu životopisov, ktorý dokáže prijímať nové informácie a odstraňovať alebo aktualizovať tie existujúce.

Vymyslieť viac šablón životopisov nie je ťažké, ak porozumiete základnej logike. Môžete teda začať s jednou šablónou a postupom času sa môžete venovať ešte pútavejším návrhom. Samozrejme, chcete tiež pridať tlačidlo sťahovania, aby používatelia mohli získať svoj životopis vo formáte PDF.

Projekt vytvárania životopisu vám pomôže porozumieť základným operáciám JavaScript CRUD. Okrem toho sa naučíte používať slučky, obsluhy udalostí, podmienky a niektoré vstavané funkcie JavaScriptu. Informácie o používateľoch môžete uložiť aj do objektu JSON, aby na ne váš program mohol neskôr odkazovať.

6. Vytvorte rozšírenie prehliadača

Vytvorenie rozšírenia prehliadača pre štartovací projekt môže vyzerať zložito. Ale to nie je raz, keď porozumiete požiadavkám na kódovanie funkčného.

Prevzatie tejto úlohy je užitočné, najmä ak už máte základné znalosti jazyka JavaScript a chceli by ste sa pohrať s náročným projektom.

Aj keď to môže byť trochu únavné doladiť rozšírenie tak, aby fungovalo vo viacerých prehliadačoch, môžete začať s rozšírením pre konkrétny prehliadač. A nemusíte stavať komplexné. Váš môže byť napríklad jednoduchý nástroj na stiahnutie súborov alebo nástroj na zmenu veľkosti obrázku.

Pri vytváraní rozšírenia musíte tiež zabezpečiť, aby sa dalo nainštalovať do prehliadača. Tu zadáte informácie o svojej aplikácii do súboru „manifest.json“, aby ich prehliadač mohol rozpoznať a prijať.

7. Zostavte si aplikáciu na tvorbu rozpočtu

Všetci chceme sledovať, ako míňame svoje peniaze, aby sme sa vyhli prekročeniu rozpočtu. Rozpočtová aplikácia vám umožňuje sledovať výdavky, aby ste neutratili viac, ako ste vyjednávali.

Či už to vytvoríte pre seba alebo pre ostatných, je to poklad, ktorý stojí za to uložiť do úložiska. Vytvorenie aplikácie pre svojpomocný rozpočet pomocou JavaScriptu nielenže zlepší vaše znalosti o vykresľovaní modelu DOM, ale tiež sa naučíte používať operátory JavaScript na riešenie problémov v reálnom živote.

Pri písaní kódu budete zbierať vstupy do formulárov a odpočítať výdavky z rozpočtu. Môžete to posunúť ďalej tak, že napíšete kód a nastavíte automatické upozornenie pre používateľa vždy, keď sa chystá prekročiť rozpočet.

8. Prevodník jednotiek

Chcete sa pohrať so základnými operátormi a podmienenými príkazmi v jazyku JavsScript? Vytvorenie prevodníka jednotiek vám potom poskytne flexibilitu.

Okrem písania matematických vzorcov na prevod rôznych jednotiek tam a späť sa naučíte, ako vyladiť matematické výstupy v jazyku JavaScript a vykresliť ich na strane klienta. Pretože vaša aplikácia pravdepodobne zvládne viac konverzií, môžete vytvoriť rozbaľovaciu ponuku, kde si používatelia môžu vybrať svoje jednotky výberu.

Logické príkazy potom zvládnu, ako váš skript prevádza parametre na základe voľby používateľa. Prevodník jednotiek je skutočne jedným z najľahších projektov v zozname.

9. Vytvorte si denník

Toto je celkom užitočný projekt pre tých, ktorí si radi uchovávajú prehľad o svojich každodenných chodoch. Diárová aplikácia s JavaScriptom je všestranný, ale jednoduchý projekt vhodný pre začiatočníkov.

Pretože je to aplikácia na zapisovanie si poznámok a podľa aktivít si musíte určiť dátumy, môžete si uložiť svoje vstupy do súboru ako objekt JSON a potom ich neskôr použiť, keď potrebujete sledovať svoju históriu a uložiť ju vstupy.

Aj keď sa to môže zdať trochu komplikované, môžete používateľom ušetriť stres z manuálneho výberu času pre ich činnosti napísaním kódu na automatické uloženie času. Rovnako ako to-do aplikácia, aj táto vás naučí, ako vytvoriť aplikáciu CRUD pomocou JavaScriptu.

10. Hra Breaker Breaker

Ak ste nevedeli, môžete si vytvoriť jednoduchú hru aj pomocou vanilkového JavaScriptu. Ak poznáte 2D hry, určite ste už predtým hrali alebo videli odlomovú hru.

Aj keď to môže vyžadovať určitý nadhľad a premýšľanie, jedným z pozitív tohto projektu je zábava, ktorú nakoniec prináša. Aj keď to nie je istá brána do vývoja hier, pri práci na tejto úlohe sa dozviete o mnohých funkciách JavaScriptu.

Cieľom je však funkčnosť. Možno tu však budete musieť skombinovať niektoré CSS s JavaScriptom, aby ste svoje tehly usporiadali rovnomerne. Váš program bude nakoniec diktovať, kedy hráč vyhrá alebo prehrá a čo sa stane potom.

JavaScript: Neustále sa učte

Praktické niektoré z týchto nápadov na projekty posilnia vaše znalosti jazyka JavaScript a pripravia vás na projekty v reálnom živote. To znamená, že hoci je štýl vo väčšine týchto projektov zásadný, dávajte si pozor, aby ste sa ním nerozptyľovali z prvej ruky. Zamerajte sa však na funkcionalitu, ktorú JavaScript ponúka, a začnete vytvárať responzívne webové stránky pomocou JavaScriptu skôr, ako sa nazdáte. Šťastné kódovanie!

10 myšlienok projektu Python vhodných pre začiatočníkov

Poznáte základy a teraz ste pripravení ich uplatniť. Začnite s týmito projektmi Pythonu!

Čítajte ďalej

O autorovi