JavaScript on tänapäeval üks väärtuslikumaid programmeerimiskeeli, mida veebiarenduses kasutatakse. Tänu JavaScripti taustapaketi Express.js tulekule koos paljude olemasolevate ja arenevate esipaneeliraamistikega tundub, et keel muudab veebiprogrammeerimist pidevalt.
Nii et kui olete JavaScripti algaja, istuge rahulikult. Need JavaScripti projektiideed tõstavad teie oskusi ja tutvustavad teid JavaScripti põhikontseptsioonidega. Alustame.
1. Lihtne ülesannete loendi rakendus
Ülesannete loendi koostamisel JavaScripti abil saate teada CRUD-toimingute põhiloogikat ja uurida JavaScripti sündmuste käsitlemise funktsioone. Põhimõtteliselt koostate oma skripti ülesannete loomiseks, lugemiseks, värskendamiseks ja seejärel kustutamiseks.
Sündmuste käitlejate abil saate vormistada iga ülesande sisestamiseks vormid ja kuvada need esitamisel. Kui JavaScripti kood teie rakenduse funktsionaalsuse juhtimiseks töötab, saate seejärel iga ülesande korraldamiseks kasutada CSS -ruudustiku kuvamismeetodit. Seejärel määrake neile prioriteet, kasutades JavaScripti tingimuslause ja kuupäeva meetodid.
Seotud: Kuidas koostada põhilist ülesannete loendi rakendust JavaScripti abil
Kuigi see ei ole kohustuslik, saate seda edasi teha, salvestades ülesanded kohalikku andmebaasi. Näiteks iga sisendi salvestamine JSON-faili teie kohalikus masinas annab teile ettekujutuse CRUD-toimingute tegemisest tegeliku JSON-objekti, massiivi või NoSQL-andmebaasi käsitlemisel.
2. Looge lihtne taimer
Taimer on üks lihtsamaid projekte, mida saate JavaScripti abil kiiresti ellu viia. Kuigi see kõlab üsna lihtsalt, õpetab see teile, kuidas elemendi olekut JavaScripti abil intervallidega automaatselt muuta.
Selle ainulaadsemaks muutmiseks saate luua loenduri, mis peatub kasutaja määratud väärtuse juures. Te ei pea salvestama ühtegi sisestust andmebaasi ega JSON -i objekti, kuna see on näide, mida kasutaja saab vastavalt soovile kohandada.
Taimeri kodeerimise ajal saate tutvuda JavaScripti funktsioonidega. Lisaks saate teada, kuidas kirjutada JavaScripti koodi põhiliste matemaatiliste konversioonide jaoks, kuna peate võib -olla mõne ajaparameetri teisendama.
3. Koostage pildikarussell nullist
Karussell on veebisaidi kasutajaliidese üks visuaalselt atraktiivsemaid täiendusi. Kui see on ühendatud suurepärase UX -iga, lisab see teie kasutajaliidesele klanitud efekti. Lisaks võimaldab see pilte või esemeid unikaalselt kuvada.
Funktsionaalse ja reaktiivse karusselli loomiseks peate JavaScripti silmuse abil käed määrduma. Saate oma pildid hankida DOM -ist ja lükata need tühja JavaScripti massiivi. Seejärel lisate klõpsamisüritused järgmisele ja eelmisele nupule, et kuvada pilte järjest paremale või vasakule.
See pole siiski range lähenemisviis. Võite kasutada mis tahes meetodit, mis teile kõige paremini sobib.
Kui olete uudishimulik ja soovite minna kaugemale, saate oma ekraanile lisada animatsioone, et muuta see realistlikumaks ja hõlpsamini kasutatavaks.
4. Veebi kalkulaator
JavaScript, nagu ka teised programmeerimiskeeled, toetab paljusid matemaatilisi toiminguid. Nii et selle projekti kodeerimise ajal saate teada, kuidas lisada klõpsamisüritusi kohandatud nuppudele või jaotistele ja korraldada need nii, et need muutuksid brauseris kuvatavaks tundlikuks kalkulaatoriks.
Kui te pole nendega juba tuttav, võiksite alustada JavaScripti operaatoritega mängimisest. Seejärel mässige käed ürituste käitlejate ümber, et paremini mõista nende taga olevat kontseptsiooni.
Seotud: Lihtsa kalkulaatori koostamine HTML -i, CSS -i ja JavaScripti abil
Kuigi see on paljusõnalisem, võite alustada skripti protseduurilise kirjutamisega. Kuid kui kalkulaator hakkab tööle, kaaluge selle muutmist funktsioonideks. Võite sellele läheneda CSS flexboxi loomine. Seejärel määrake neile HTML -i abil väärtused ja operaatorid. Seejärel saate helistada oma sündmuste käsitlemise funktsioonile flexboxi igal elemendil kasutades JavaScripti silmust.
5. Jätkake generaatorit JavaScriptiga
Ehkki võite selle alustamisega veidi segadusse sattuda, on seal paar jätkuvat veebirakendust, kus saate oma idee haarata.
Lõppkokkuvõttes teete korduvkasutatava CV -koostaja, mis võtab vastu uut teavet ja loobub või värskendab olemasolevat.
Kui jätkate põhiloogika mõistmist, pole enam CV -mallide leidmine keeruline. Niisiis, võite alustada ühe malliga ja aja möödudes laiendada veelgi meeldejäävamaid kujundusi. Loomulikult soovite lisada ka allalaadimisnupu, et kasutajad saaksid oma CV -d PDF -failina.
Jätkamise loomise projekt aitab teil mõista põhilisi JavaScripti CRUD-toiminguid. Lisaks saate teada, kuidas kasutada silmuseid, sündmuste käitlejaid, tingimusi ja mõnda JavaScripti sisseehitatud funktsiooni. Samuti saate salvestada kasutajate teabe JSON -i objekti, et teie programm saaks sellele hiljem viidata.
6. Looge brauseri laiendus
Stardiprojekti jaoks brauserilaiendi loomine võib tunduda keeruline. Kuid mitte ainult siis, kui mõistate funktsionaalse kodeerimise nõudeid.
See on väärt ülesanne, eriti kui teil on juba JavaScripti põhiteadmised ja soovite mängida väljakutsuva projektiga.
Ehkki laienduse muutmine mitme brauseri jaoks töötamiseks võib pisut väsitada, võite alustada brauseripõhise laiendusega. Ja te ei pea keerukat ehitama. Teie oma võib olla näiteks lihtne failide allalaadija või pildi suuruse muutja.
Laienduse loomisel peate selle ka brauserisse installitavaks muutma. Siin saate määrata oma rakenduse teabe failis „manifest.json”, et brauser saaks selle ära tunda ja aktsepteerida.
7. Koostage eelarverakendus
Me kõik tahame jälgida, kuidas me oma raha kulutame, et vältida eelarve ületamist. Eelarverakendus võimaldab teil oma kulusid jälgida, nii et te ei kuluta rohkem, kui olete kokku leppinud.
Ükskõik, kas ehitate selle endale või teistele, on see aare, mida tasub oma hoidlasse varjata. Isetehtud eelarverakenduse loomine JavaScriptiga mitte ainult ei paranda teie teadmisi DOM-i renderdamise kohta, vaid saate teada, kuidas rakendada JavaScripti operaatoreid reaalsete probleemide lahendamiseks.
Koodi kirjutamise ajal kogute vormi sisendeid ja lahutate oma eelarvest kulud. Saate seda edasi teha, kirjutades koodi, et määrata kasutajale automaatne hoiatus iga kord, kui ta hakkab oma eelarvet ületama.
8. Ühiku muundur
Kas soovite mängida Javscripti põhioperaatorite ja tingimuslausetega? Seejärel annab ühiku muunduri loomine teile selle paindlikkuse.
Lisaks erinevate ühikute edasi -tagasi teisendamiseks mõeldud matemaatiliste valemite kirjutamisele saate teada, kuidas JavaScriptis matemaatilisi väljundeid kohandada ja kliendi poolel renderdada. Kuna teie rakendus tegeleb tõenäoliselt mitme konversiooniga, saate luua rippmenüü, kus kasutajad saavad valida oma valikuühikud.
Loogilised avaldused käsitlevad seejärel seda, kuidas teie skript parameetreid kasutaja valikul teisendab. Tõepoolest, ühiku muundur on nimekirja üks lihtsamaid projekte.
9. Loo päevik
Siin on päris mugav projekt neile, kes armastavad oma igapäevaste jooksude vahekaarti hoida. JavaScriptiga päevikurakendus on mitmekülgne, kuid lihtne projekt, mis sobib algajatele.
Kuna see on märkmete tegemise rakendus ja peate kuupäevad vastavalt tegevustele kindlaks määrama, saate oma salvestada sisestab faili JSON -objektina ja viitab neile hiljem, kui peate oma ajalugu jälgima ja salvestama sisendid.
Kuigi see võib osutuda pisut keerukaks, saate kasutajatele säästa stressi, mis tuleneb nende tegevuste aja käsitsi valimisest, kirjutades koodi automaatselt aja salvestamiseks. Nagu ülesannete rakendus, õpetab see ka teile, kuidas JavaScripti abil CRUD-rakendust luua.
10. Telliskivimurdja mäng
Kui te ei teadnud, saate vanilje JavaScripti abil luua ka lihtsa mängu. Kui olete 2D -mängudega tuttav, olete kindlasti varem mänginud või näinud läbimurde mängu.
Kuigi see võib nõuda teatavat ettenägelikkust ja mõtlemist, on selle projekti üks positiivne külg see, et see toob lõpuks lõbu. Kuigi see pole kindel värav mängude arendamisse, saate selle ülesande kallal töötades teada paljude JavaScripti funktsioonide kohta.
Funktsionaalsus on siiski eesmärk. Kuid klotside ühtlaseks paigutamiseks peate siin võib -olla ühendama mõne CSS -i JavaScriptiga. Lõppkokkuvõttes määrab teie programm, millal mängija võidab või kaotab ja mis juhtub pärast seda.
JavaScript: jätkake õppimist tehes
Mõne sellise projektiidee praktiline kasutamine suurendab teie JavaScripti oskusi ja valmistab teid ette reaalseteks projektideks. See tähendab, et kuigi stiil on enamiku nende projektide jaoks hädavajalik, olge ettevaatlik, et mitte häirida seda. Kuid keskenduge JavaScripti pakutavatele funktsioonidele ja hakkate JavaScriptiga tundlikke veebisaite ehitama enne, kui teate. Head kodeerimist!
Te teate põhitõdesid ja nüüd olete valmis neid rakendama. Alustage nende Pythoni projektidega!
Loe edasi
- Programmeerimine
- JavaScript
- Programmeerimine
- Programmeerimiskeeled
Idowu on kirglik kõige nutika tehnoloogia ja tootlikkuse vastu. Vabal ajal mängib ta kodeerimisega ja lülitab malelauale, kui tal on igav, kuid talle meeldib ka aeg -ajalt rutiinist lahti saada. Tema kirg näidata inimestele teed kaasaegses tehnoloogias motiveerib teda rohkem kirjutama.
Telli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin
