JavaScript on yksi arvokkaimmista ohjelmointikielistä, jota käytetään nykyään verkkokehityksessä. Express.js: n, JavaScript-taustapakkauksen ja lukuisten olemassa olevien ja kehittyvien käyttöliittymäkehysten myötä näyttää siltä, että kieli mullistaa jatkuvasti web-ohjelmointia.
Joten jos olet JavaScript -aloittelija, istu tiukasti. Nämä JavaScript -projektiideat parantavat taitojasi ja perehdyttävät JavaScriptin peruskäsitteisiin. Aloitetaan.
1. Yksinkertainen tehtäväluettelosovellus
Kun rakennat tehtävälistaa JavaScriptin avulla, opit CRUD-toimintojen peruslogiikan ja tutustu JavaScriptin tapahtumakäsittelytoimintoihin. Pohjimmiltaan luot käsikirjoituksesi tehtävien luomiseen, lukemiseen, päivittämiseen ja poistamiseen.
Tapahtumakäsittelijöiden avulla voit luoda lomakkeet jokaiseen tehtävään ja näyttää ne lähetettäessä. Kun JavaScript -koodi sovelluksesi toimintojen ohjaamiseen toimii, voit sitten järjestää kunkin tehtävän CSS -ruudukon näyttömenetelmän avulla. Määritä sitten heille etusija käyttämällä JavaScript -ehdollinen lause ja päivämäärämenetelmät.
Aiheeseen liittyviä: Perustehtäväluettelosovelluksen luominen JavaScriptin avulla
Vaikka se ei ole pakollista, voit viedä tätä eteenpäin tallentamalla tehtävät paikalliseen tietokantaan. Jokaisen syötteen tallentaminen esimerkiksi paikallisen koneesi JSON-tiedostoon antaa sinulle käsityksen siitä, miten CRUD-toiminnot suoritetaan, kun käsitellään tosielämän JSON-objektia, matriisia tai NoSQL-tietokantaa.
2. Luo yksinkertainen ajastin
Ajastin on yksi helpoimmista projekteista, jotka voit suorittaa nopeasti JavaScriptin avulla. Vaikka tämä kuulostaa melko yksinkertaiselta, se opettaa sinulle, kuinka muuttaa elementin tilaa automaattisesti aikavälein JavaScriptin avulla.
Jotta se olisi ainutlaatuisempi, voit rakentaa ajastimen, joka pysähtyy käyttäjän määrittämässä arvossa. Sinun ei tarvitse tallentaa mitään tietokantaan tai JSON -objektiin, koska tämä on tapaus, jota käyttäjä voi muokata haluamallaan tavalla.
Kun koodaat ajastinta, tutustu JavaScript -toimintoihin. Lisäksi opit kirjoittamaan JavaScript -koodin matemaattisille perusmuunnoksille, koska saatat joutua muuntamaan joitain aikaparametreja.
3. Rakenna kuvakaruselli tyhjästä
Karuselli on yksi visuaalisesti houkuttelevimmista lisäyksistä verkkosivuston käyttöliittymään. Yhdistettynä upeaseen käyttökokemukseen se lisää käyttöliittymään tyylikkään vaikutelman. Lisäksi sen avulla voit näyttää kuvia tai kohteita ainutlaatuisesti.
Toimivan ja reaktiivisen karusellin rakentamiseksi sinun on saatava kätesi likaiseksi JavaScript -silmukalla. Voit hakea kuvasi DOMista ja työntää ne tyhjään JavaScript -taulukkoon. Lisää sitten napsautustapahtumat seuraavaan ja edelliseen painikkeeseen näyttääksesi kuvat peräkkäin joko oikealle tai vasemmalle.
Se ei kuitenkaan ole tiukka lähestymistapa. Voit käyttää mitä tahansa sinulle parhaiten sopivaa menetelmää.
Jos olet utelias ja haluat mennä pidemmälle, voit lisätä näyttöön animaatioita, jotta tämä olisi realistisempaa ja helppokäyttöisempi.
4. Web -laskin
JavaScript, kuten muutkin ohjelmointikielet, tukee lukuisia matemaattisia toimintoja. Joten kun koodaat tätä projektia, opit lisäämään napsautustapahtumia mukautettuihin painikkeisiin tai diviin ja järjestämään niistä reagoiva laskin, joka näkyy selaimessa.
Jos et ole jo tutustunut niihin, sinun kannattaa aloittaa leikkimällä JavaScript -operaattoreiden kanssa. Kierrä sitten kätesi tapahtumien käsittelijöiden ympärille ymmärtääksesi paremmin niiden takana olevan käsitteen.
Aiheeseen liittyviä: Yksinkertaisen laskimen rakentaminen HTML: n, CSS: n ja JavaScriptin avulla
Vaikka se on enemmän sanallista, voit aloittaa kirjoittamalla käsikirjoituksesi menettelyllisesti. Mutta harkitse sen muokkaamista funktioiksi, kun laskin alkaa toimia. Voit lähestyä tätä CSS -flexboxin luominen. Määritä sitten arvot ja operaattorit heille HTML -koodilla. Voit sitten kutsua tapahtumakäsittelytoiminnon jokaiseen flexbox -elementtiin käyttämällä JavaScript -silmukkaa.
5. Jatka generaattoria JavaScriptillä
Vaikka saatat olla hieman hämmentynyt siitä, miten aloittaa tämä, siellä on pari jatkoa rakentavaa verkkosovellusta, joissa voit tarttua ideasi.
Lopulta teet uudelleenkäytettävän ansioluettelon rakennustyökalun, joka voi hyväksyä uusia tietoja ja pudottaa tai päivittää olemassa olevia tietoja.
Lisää ansioluettelomalleja ei ole vaikeaa, kun ymmärrät peruslogiikan. Joten voit aloittaa yhdellä mallilla ja skaalata entistä houkuttelevampiin malleihin ajan myötä. Tietenkin haluat myös lisätä latauspainikkeen, jotta käyttäjät voivat saada ansioluettelonsa PDF -tiedostona.
Jatkarakennusprojekti auttaa sinua ymmärtämään JavaScript CRUD -toiminnot. Lisäksi opit käyttämään silmukoita, tapahtumakäsittelijöitä, ehtoja ja joitain JavaScriptin sisäänrakennettuja toimintoja. Voit myös tallentaa käyttäjien tiedot JSON -objektiin, jotta ohjelmasi voi viitata niihin myöhemmin.
6. Luo selainlaajennus
Selainlaajennuksen luominen aloitusprojektille saattaa näyttää monimutkaiselta. Mutta vasta kun ymmärrät toiminnallisen koodauksen vaatimukset.
Se on kannattava tehtävä, varsinkin jos sinulla on jo perustiedot JavaScriptista ja haluat leikkiä haastavan projektin parissa.
Vaikka laajennuksen säätäminen toimisi useilla selaimilla hieman väsyttäväksi, voit aloittaa selainkohtaisella laajennuksella. Ja sinun ei tarvitse rakentaa monimutkaista. Sinun voi olla esimerkiksi yksinkertainen tiedostojen lataaja tai kuvan koonmuuttaja.
Kun rakennat laajennustasi, sinun on myös tehtävä se asennettavaksi selaimeen. Tässä voit määrittää sovelluksesi tiedot manifest.json -tiedostossa, jotta selain voi tunnistaa ja hyväksyä ne.
7. Luo budjettisovellus
Me kaikki haluamme seurata, miten käytämme rahamme, jotta budjetti ei ylity. Budjetointisovelluksen avulla voit seurata kulujasi, jotta et kuluta enemmän kuin olet neuvonut.
Rakennatko tämän itsellesi tai muille, se on aarre, joka kannattaa sijoittaa arkistoosi. DIY-budjettisovelluksen luominen JavaScriptilla parantaa paitsi tietojasi DOM-renderoinnista, mutta opit myös soveltamaan JavaScript-operaattoreita tosielämän ongelmien ratkaisemiseksi.
Koodia kirjoittaessasi keräät lomakkeen syötteet ja vähennät kulut budjetistasi. Voit viedä tätä pidemmälle kirjoittamalla koodin, jotta voit asettaa automaattisen hälytyksen käyttäjälle aina, kun hän aikoo ylittää budjetin.
8. Yksikkömuunnin
Haluatko leikkiä perusoperaattoreilla ja ehdollisilla lausunnoilla JavsScriptissä? Sitten yksikkömuuntimen luominen tarjoaa sinulle joustavuutta.
Sen lisäksi, että kirjoitat matemaattisia kaavoja eri yksiköiden muuntamiseen edestakaisin, opit säätämään JavaScriptin matemaattisia tuloksia ja esittämään ne asiakaspuolella. Koska sovelluksesi käsittelee todennäköisesti useita konversioita, voit luoda avattavan valikon, jossa käyttäjät voivat valita haluamansa yksiköt.
Loogiset lausumat käsittelevät sitten, miten komentosarjasi muuntaa parametrit käyttäjän valinnan perusteella. Yksikkömuunnin on todellakin yksi luettelon helpoimmista projekteista.
9. Luo päiväkirja
Tässä on melko kätevä projekti niille, jotka rakastavat pitää välilehteä päivittäisistä juoksuistaan. Päiväkirjasovellus, jossa on JavaScript, on monipuolinen mutta yksinkertainen projekti, joka sopii aloittelijoille.
Koska se on muistiinpanosovellus ja sinun on määritettävä päivämäärät toimintojen mukaan, voit tallentaa syöttää tiedoston JSON -objektina ja viittaa niihin myöhemmin, kun haluat seurata historiaa ja tallentaa tulot.
Vaikka se saattaa osoittautua hieman monimutkaiseksi, voit säästää käyttäjiltä stressiä, kun he valitsevat manuaalisesti ajan toiminnalleen kirjoittamalla koodin, joka tallentaa ajan automaattisesti. Tehtäväsovelluksen tavoin tämä opettaa myös CRUD-sovelluksen luomista JavaScriptin avulla.
10. Peli Brick Breaker
Jos et tiennyt, voit rakentaa yksinkertaisen pelin myös vanilja JavaScriptin avulla. Jos 2D -pelit ovat sinulle tuttuja, sinun on täytynyt pelata tai nähdä eräpeli ennen.
Vaikka se voi vaatia ennakointia ja ajattelua, yksi tämän projektin positiivisista puolista on sen lopulta tuoma hauskuus. Vaikka se ei ole varma portti pelin kehittämiseen, opit monista JavaScriptin toiminnoista työskennellessäsi tämän tehtävän parissa.
Toimivuus on kuitenkin tavoite. Mutta sinun on ehkä yhdistettävä osa CSS: stä JavaScriptin kanssa, jotta voit järjestää tiilisi tasaisesti. Lopulta ohjelmasi määrää, milloin pelaaja voittaa tai häviää ja mitä tapahtuu sen jälkeen.
JavaScript: Jatka oppimista tekemällä
Käytännöllinen osa näistä projektiideoista parantaa JavaScript-taitojasi ja valmistautuu todellisiin projekteihin. Vaikka muotoilu on välttämätöntä useimmissa näistä projekteista, ole varovainen, ettet häiritse sitä omakohtaisesti. Keskity kuitenkin JavaScriptin tarjoamiin toimintoihin ja alat rakentaa responsiivisia verkkosivustoja JavaScriptillä ennen kuin huomaatkaan. Hyvää koodausta!
Tiedät perusasiat ja olet nyt valmis soveltamaan niitä. Aloita nämä Python -projektit!
Lue seuraava
- Ohjelmointi
- JavaScript
- Ohjelmointi
- Ohjelmointikielet
Idowu on intohimoinen kaikkeen älykkääseen tekniikkaan ja tuottavuuteen. Vapaa -ajallaan hän leikkii koodauksella ja vaihtaa shakkilaudalle, kun on kyllästynyt, mutta hän myös rakastaa irtautumista rutiinista silloin tällöin. Hänen intohimonsa näyttää ihmisille tie modernin tekniikan ympärillä motivoi häntä kirjoittamaan enemmän.
tilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi
