10 idej o projektih JavaScript za začetnike

JavaScript je eden najdragocenejših programskih jezikov, ki se danes uporablja v spletnem razvoju. S prihodom Express.js, zalednega sklada JavaScripta, skupaj z obilico obstoječih in razvijajočih se okvirjev za sprednji del, se zdi, da bo jezik še naprej revolucioniral spletno programiranje.

Torej, če ste začetnik JavaScripta, mirno sedite. Te ideje o projektih JavaScript bodo povečale vaše znanje in vas seznanile z osnovnimi koncepti JavaScript. Začnimo.

1. Preprosta aplikacija s seznamom opravil

Med sestavljanjem seznama opravil z uporabo JavaScripta se boste naučili osnovne logike dejanj CRUD in raziskali funkcije za upravljanje dogodkov JavaScript. V bistvu boste ustvarili skript za ustvarjanje nalog, branje, posodabljanje in jih nato izbrisali.

Z upravljavci dogodkov boste ustvarili primerke za vnos vsakega opravila in jih prikazali ob oddaji. Ko koda JavaScript za nadzor funkcionalnosti vaše aplikacije deluje, lahko za prikaz vsake naloge uporabite način prikaza mreže CSS. Nato jim z Pogojni stavek JavaScript in datumske metode.

Povezano: Kako z JavaScriptom sestaviti osnovno aplikacijo s seznamom opravil

Čeprav to ni obvezno, lahko to nadaljujete tako, da naloge shranite v lokalno bazo podatkov. Shranjevanje vsakega vnosa v datoteko JSON na vašem lokalnem računalniku vam na primer daje idejo, kako izvajati operacije CRUD pri obravnavi resničnega predmeta JSON, matrike ali baze podatkov NoSQL.

2. Ustvarite preprost časovnik

Časovnik je eden najlažjih projektov, ki jih lahko hitro izvedete z uporabo JavaScripta. Čeprav se to sliši precej osnovno, vas uči, kako samodejno spremenite stanje elementa v presledkih z uporabo JavaScripta.

Če želite, da je edinstven, lahko sestavite odštevalnik časa, ki se ustavi pri vrednosti, ki jo določi uporabnik. Ni vam treba shraniti nobenega vnosa v bazo podatkov ali predmet JSON, saj je to primerek, ki ga lahko uporabnik popravi, kot želi.

Med kodiranjem časovnika se boste seznanili s funkcijami JavaScript. Poleg tega se boste naučili, kako napisati kodo JavaScript za osnovne matematične pretvorbe, saj boste morda morali pretvoriti nekatere časovne parametre.

3. Ustvarite slikovni vrtiljak iz nič

Vrtiljak je eden najbolj vizualno privlačnih dodatkov v uporabniškem vmesniku spletnega mesta. V kombinaciji z odličnim uporabniškim vmesnikom uporabniškemu vmesniku doda eleganten učinek. Poleg tega vam omogoča edinstven prikaz slik ali predmetov.

Če želite zgraditi funkcionalen in reaktiven vrtiljak, si morate umazati roke z zanko JavaScript. Slike lahko dobite iz DOM -a in jih potisnete v prazno matriko JavaScript. Nato boste naslednjemu in prejšnjemu gumbu dodali dogodke klika za zaporedni prikaz slik na desni ali levi strani.

Vendar to ni strog pristop. Uporabite lahko katero koli metodo, ki vam najbolj ustreza.

Če ste radovedni in želite narediti še več, lahko na zaslon dodate animacije, da bo ta bolj realističen in enostaven za uporabo.

4. Spletni kalkulator

JavaScript, tako kot drugi programski jeziki, podpira številne matematične operacije. Med kodiranjem tega projekta se boste naučili dodajanja dogodkov klikov gumbom ali div -jem po meri in jih organizirali, da postanejo odzivni kalkulator, ki se prikaže v brskalniku.

Če jih še ne poznate, se boste morda začeli igrati z operaterji JavaScript. Nato zavijte roke okoli vodnikov dogodkov, da boste bolje razumeli koncept, ki stoji za njimi.

Povezano: Kako zgraditi preprost kalkulator z uporabo HTML, CSS in JavaScript

Čeprav je bolj podroben, lahko začnete s postopkovnim pisanjem skripta. Toda razmislite o preoblikovanju v funkcije, ko začne kalkulator delovati. K temu se lahko približate ustvarjanje flexbox -a CSS. Nato jim dodelite vrednosti in operatorje z uporabo HTML. Nato lahko pokličete svojo funkcijo upravljanja dogodkov za vsak element v flexboxu z uporabo zanke JavaScript.

5. Generator življenjepisov z JavaScript

Čeprav ste morda nekoliko zmedeni, kako začeti s tem, obstaja nekaj spletnih aplikacij za ustvarjanje življenjepisov, kjer lahko zgrabite svojo idejo.

Na koncu boste naredili graditelja življenjepisov za večkratno uporabo, ki bo sprejel nove podatke in odstranil ali posodobil obstoječe.

Ko razumete osnovno logiko, ni težko pripraviti več predlog za življenjepis. Tako lahko začnete z eno samo predlogo in sčasoma povečate do bolj privlačnih modelov. Seveda želite dodati tudi gumb za prenos, da lahko uporabniki dobijo svoj življenjepis kot PDF.

Projekt za ustvarjanje življenjepisov vam pomaga razumeti osnovne operacije CRUD JavaScript. Poleg tega se boste naučili uporabljati zanke, vodnike dogodkov, pogoje in nekatere vgrajene funkcije JavaScript. Podatke uporabnikov lahko shranite tudi v objekt JSON, da se lahko vaš program pozneje sklicuje nanje.

6. Zgradite razširitev brskalnika

Izdelava razširitve brskalnika za začetni projekt bi lahko izgledala zapleteno. Toda ne le, ko razumete zahteve za kodiranje funkcionalne.

To je koristna naloga, še posebej, če že poznate JavaScript in bi se radi poigrali z zahtevnim projektom.

Čeprav bi lahko bilo prilagoditev razširitve za več brskalnikov nekoliko utrujajoče, lahko začnete z razširitvijo, specifično za brskalnik. In ni vam treba zgraditi kompleksnega. Vaš je lahko na primer preprost prenosnik datotek ali spreminjanje velikosti slike.

Med gradnjo razširitve morate omogočiti tudi njeno namestitev v brskalnik. Tu podate podatke o svoji aplikaciji v datoteki "manifest.json", da jih brskalnik prepozna in sprejme.

7. Zgradite aplikacijo za proračun

Vsi želimo spremljati, kako porabljamo denar, da se izognemo prekoračitvi proračuna. S proračunsko aplikacijo lahko spremljate svoje stroške, da ne porabite več, kot ste se pogajali.

Ne glede na to, ali to zgradite zase ali za druge, je to zaklad, vreden shranjevanja v vašem skladišču. Ustvarjanje proračunske aplikacije DIY z JavaScriptom ne samo izboljša vaše znanje o upodabljanju DOM, ampak se boste tudi naučili uporabljati operaterje JavaScript za reševanje težav v resničnem življenju.

Med pisanjem kode boste zbirali vložke obrazca in odšteli stroške iz svojega proračuna. To lahko nadaljujete tako, da napišete kodo, da uporabniku nastavite samodejno opozorilo, ko bo presegel svoj proračun.

8. Pretvornik enot

Želite igrati z osnovnimi operaterji in pogojnimi stavki v JavsScript? Nato vam ustvarjanje pretvornika enot omogoča to prilagodljivost.

Poleg pisanja matematičnih formul za pretvorbo različnih enot naprej in nazaj se boste naučili, kako spremeniti matematične izhode v JavaScriptu in jih upodobiti na strani odjemalca. Ker bo vaša aplikacija verjetno obravnavala več konverzij, lahko ustvarite spustni meni, kjer lahko uporabniki izberejo enote za izbiro.

Logični stavki nato obravnavajo, kako vaš skript pretvori parametre na podlagi izbire uporabnika. Dejansko je pretvornik enot eden najlažjih projektov na seznamu.

9. Ustvarite dnevnik

Tukaj je zelo priročen projekt za tiste, ki radi spremljajo svoj dnevni tek. Dnevnik z JavaScriptom je vsestranski, a preprost projekt, primeren za začetnike.

Ker gre za beleženje in morate glede na dejavnosti določiti datume, lahko shranite svoje vnese v datoteko kot objekt JSON in se nanje pozneje sklicuje, ko morate slediti zgodovini in shraniti vhodi.

Čeprav se lahko izkaže za nekoliko zapletenega, lahko uporabnikom prihranite stres, ko ročno izberete čas za svoje dejavnosti, tako da napišete kodo za samodejno shranjevanje časa. Tako kot aplikacija za opravila vas tudi ta uči, kako z uporabo JavaScripta sestaviti aplikacijo CRUD.

10. Igra Breaker Breaker

Če niste vedeli, lahko z uporabo vanilijevega JavaScripta sestavite preprosto igro. Če poznate 2D igre, ste že morali igrati ali videti prelomno igro.

Čeprav lahko zahteva nekaj predvidevanja in razmišljanja, je ena od pozitivnih strani tega projekta zabava, ki jo prinese na koncu. Čeprav to ni zanesljiv prehod v razvoj iger, boste med delom pri tej nalogi spoznali številne funkcije JavaScript.

Cilj pa je funkcionalnost. Morda boste morali tukaj združiti nekaj CSS -ja z JavaScript -om, da boste svoje opeke razporedili enakomerno. Konec koncev bo vaš program narekoval, kdaj igralec zmaga ali izgubi in kaj se zgodi kasneje.

JavaScript: Učite se z dejanji

Nekaj ​​teh zamisli o projektih bo povečalo vaše znanje JavaScript in vas pripravilo na projekte v resničnem življenju. Kljub temu, da je styling v večini teh projektov bistven, pazite, da se pri tem ne motite iz prve roke. Toda osredotočite se na funkcionalnost, ki jo ponuja JavaScript, in začeli boste graditi odzivna spletna mesta z JavaScript, še preden se zavedate. Veselo kodiranje!

10 idej za projekt Python, primernih za začetnike

Poznate osnove in zdaj ste jih pripravljeni uporabiti. Začnite s temi projekti Python!

Preberite Naprej

O avtorju