10 „JavaScript“ projekto idėjų pradedantiesiems

„JavaScript“ yra viena vertingiausių programavimo kalbų, šiandien naudojama kuriant žiniatinklį. Atsiradus „Express.js“, „JavaScript“ užpakalinei krūvai kartu su daugybe esamų ir besivystančių priekinių sistemų, atrodo, kad kalba ir toliau revoliucionuos žiniatinklio programavimą.

Taigi, jei esate „JavaScript“ pradedantysis, atsisėskite. Šios „JavaScript“ projekto idėjos padidins jūsų įgūdžius ir supažindins su pagrindinėmis „JavaScript“ sąvokomis. Pradėkime.

1. Paprasta darbų sąrašo programa

Kurdami darbų sąrašą naudodami „JavaScript“, sužinosite pagrindinę CRUD veiksmų logiką ir išnagrinėsite „JavaScript“ įvykių apdorojimo funkcijas. Iš esmės jūs sukuriate scenarijų, kad sukurtumėte užduotis, perskaitytumėte, atnaujintumėte ir ištrintumėte.

Naudodami įvykių tvarkytojus, suformuosite kiekvienos užduoties įvedimo formas ir jas pateiksite pateikę. Kai „JavaScript“ kodas, skirtas programos funkcijoms valdyti, veikia, galite naudoti CSS tinklelio pateikimo metodą, kad sutvarkytumėte kiekvieną užduotį. Tada priskirkite jiems pirmenybę naudodami

„JavaScript“ sąlyginis teiginys ir datos metodai.

Susijęs: Kaip sukurti pagrindinę užduočių sąrašo programą naudojant „JavaScript“

Nors tai nėra privaloma, galite tai padaryti toliau, išsaugodami užduotis vietinėje duomenų bazėje. Pavyzdžiui, išsaugojus kiekvieną įvestį į JSON failą vietiniame kompiuteryje, galima suprasti, kaip atlikti CRUD operacijas dirbant su realaus gyvenimo JSON objektu, masyvu ar NoSQL duomenų baze.

2. Sukurkite paprastą laikmatį

Laikmatis yra vienas iš lengviausių projektų, kurį galite greitai atlikti naudodami „JavaScript“. Nors tai skamba gana paprastai, ji moko jus, kaip automatiškai keisti elemento būseną naudojant „JavaScript“.

Kad jis taptų unikalus, galite sukurti atgalinės atskaitos laikmatį, kuris sustoja ties vartotojo nurodyta verte. Jums nereikia saugoti jokių įrašų duomenų bazėje ar JSON objekte, nes tai yra pavyzdys, kurį vartotojas gali koreguoti taip, kaip nori.

Koduodami laikmatį susipažinsite su „JavaScript“ funkcijomis. Be to, išmoksite rašyti „JavaScript“ kodą pagrindinėms matematinėms konversijoms, nes gali tekti konvertuoti tam tikrus laiko parametrus.

3. Sukurkite vaizdų karuselę nuo nulio

Karuselė yra vienas iš patraukliausių svetainės UI priedų. Kartu su puikia UX prideda aptakų efektą jūsų vartotojo sąsajai. Be to, tai leidžia unikaliai rodyti vaizdus ar elementus.

Norėdami sukurti funkcionalią ir reaktyvią karuselę, turėsite susitepti rankas naudodami „JavaScript“ kilpą. Galite gauti savo vaizdus iš DOM ir perkelti juos į tuščią „JavaScript“ masyvą. Tada pridėsite paspaudimų įvykius prie kito ir ankstesnio mygtuko, kad vaizdai būtų rodomi iš eilės dešinėje arba kairėje.

Tačiau tai nėra griežtas požiūris. Galite naudoti bet kurį jums tinkamiausią metodą.

Jei jums įdomu ir norite nuveikti dar daugiau mylių, galite pridėti animacijų prie savo ekrano, kad tai būtų tikroviškiau ir patogiau.

4. Interneto skaičiuoklė

„JavaScript“, kaip ir kitos programavimo kalbos, palaiko daugybę matematinių operacijų. Taigi koduodami šį projektą sužinosite, kaip pridėti paspaudimų įvykius prie pasirinktinių mygtukų ar skyrių ir sutvarkyti juos taip, kad jie taptų reaguojančia skaičiuokle, rodoma naršyklėje.

Jei dar nesate su jais susipažinę, galbūt norėsite pradėti žaisti su „JavaScript“ operatoriais. Tada apvyniokite rankas aplink renginių vedėjus, kad geriau suprastumėte jų esmę.

Susijęs: Kaip sukurti paprastą skaičiuotuvą naudojant HTML, CSS ir „JavaScript“

Nors tai yra daugžodžiaujanti, galite pradėti rašydami scenarijų procedūriniu būdu. Bet kai skaičiuotuvas pradės veikti, apsvarstykite galimybę jį pertvarkyti į funkcijas. Galite kreiptis į tai kuriant CSS langelį. Tada priskirkite jiems reikšmes ir operatorius naudodami HTML. Tada galite iškviesti savo įvykių tvarkymo funkciją kiekviename „flexbox“ elemente naudojant „JavaScript“ kilpą.

5. Tęsti generatorių naudojant „JavaScript“

Nors galite būti šiek tiek supainioti, kaip pradėti šią, yra keletas atnaujinamų žiniatinklio programų, kuriose galite pasinaudoti savo idėja.

Galų gale padarysite daugkartinio naudojimo CV kūrėją, kuris gali priimti naują informaciją ir atmesti arba atnaujinti esamą.

Suprasti pagrindinę logiką nėra sunku sugalvoti daugiau atnaujinimo šablonų. Taigi, galite pradėti nuo vieno šablono ir, laikui bėgant, išplėsti iki patrauklesnių dizainų. Žinoma, taip pat norite pridėti atsisiuntimo mygtuką, kad vartotojai galėtų gauti savo gyvenimo aprašymą kaip PDF.

Tęsimo kūrimo projektas padeda suprasti pagrindines „JavaScript CRUD“ operacijas. Be to, išmoksite naudoti kilpas, įvykių tvarkytojus, sąlygas ir kai kurias integruotas „JavaScript“ funkcijas. Taip pat galite išsaugoti vartotojų informaciją JSON objekte, kad jūsų programa vėliau galėtų į ją kreiptis.

6. Sukurkite naršyklės plėtinį

Pradinio projekto naršyklės plėtinio kūrimas gali atrodyti sudėtingas. Tačiau ne kartą suprasite funkcinio kodavimo reikalavimus.

Tai vertinga užduotis, ypač jei jau turite pagrindinių žinių apie „JavaScript“ ir norėtumėte žaisti su sudėtingu projektu.

Nors gali būti šiek tiek varginantis išplėsti plėtinį, kad jis veiktų keliose naršyklėse, galite pradėti nuo konkrečios naršyklės plėtinio. Ir jums nereikia kurti sudėtingo. Pavyzdžiui, jūs galite būti paprastas failų atsisiuntėjas arba vaizdo keitiklis.

Kurdami plėtinį, turite jį įdiegti naršyklėje. Čia nurodote programos informaciją „manifest.json“ faile, kad naršyklė galėtų ją atpažinti ir priimti.

7. Sukurkite biudžeto sudarymo programą

Mes visi norime stebėti, kaip išleidžiame savo pinigus, kad išvengtume biudžeto perviršio. Naudodama biudžeto sudarymo programą galite sekti savo išlaidas, kad neišleistumėte daugiau, nei susitarėte.

Nesvarbu, ar kuriate tai sau, ar kitiems, tai yra lobis, kurį verta paslėpti savo saugykloje. Sukūrę „pasidaryk pats“ biudžeto programą su „JavaScript“ ne tik pagerinsite savo žinias apie DOM atvaizdavimą, bet ir sužinosite, kaip pritaikyti „JavaScript“ operatorius, kad išspręstumėte realias problemas.

Rašydami kodą, surinksite formos įvestį ir iš biudžeto atimsite išlaidas. Galite tai padaryti toliau rašydami kodą, kad nustatytumėte automatinį įspėjimą vartotojui, kai jis ketina viršyti savo biudžetą.

8. Vienetų keitiklis

Norite žaisti su pagrindiniais „JavsScript“ operatoriais ir sąlyginiais teiginiais? Tada sukūrę vieneto keitiklį, jūs suteikiate tokį lankstumą.

Be to, kad rašysite matematines formules, kaip konvertuoti įvairius vienetus pirmyn ir atgal, išmoksite patobulinti „JavaScript“ matematinius rezultatus ir pateikti juos kliento pusėje. Kadangi jūsų programa greičiausiai atliks kelias konversijas, galite sukurti išskleidžiamąjį meniu, kuriame naudotojai galėtų pasirinkti pasirinktus rinkinius.

Loginiai teiginiai tada tvarko, kaip jūsų scenarijus konvertuoja parametrus pagal vartotojo pasirinkimą. Iš tikrųjų vieneto keitiklis yra vienas iš lengviausių sąrašo projektų.

9. Sukurkite dienoraštį

Čia yra gana patogus projektas tiems, kurie mėgsta sekti savo kasdienius bėgimus. Dienoraščio programa su „JavaScript“ yra universalus, bet paprastas projektas, tinkantis pradedantiesiems.

Kadangi tai yra užrašų programa ir jums reikia nustatyti datas pagal veiklą, galite išsaugoti savo įveda į failą kaip JSON objektą ir vėliau nurodo juos, kai reikia sekti savo istoriją ir išsaugoti įėjimai.

Nors tai gali pasirodyti šiek tiek sudėtinga, galite sutaupyti naudotojams streso rankiniu būdu pasirenkant savo veiklos laiką, rašydami kodą, kad laikas būtų išsaugotas automatiškai. Kaip ir užduočių programa, taip pat mokoma, kaip sukurti CRUD programą naudojant „JavaScript“.

10. Plytų laužymo žaidimas

Jei nežinojote, taip pat galite sukurti paprastą žaidimą naudodami vanilės „JavaScript“. Jei esate susipažinęs su 2D žaidimais, anksčiau turėjote žaisti ar pamatyti pertraukos žaidimą.

Nors tai gali pareikalauti tam tikro įžvalgumo ir minties, vienas iš šio projekto teigiamų dalykų yra tai, ką jis atneša. Nors tai nėra tikri vartai į žaidimų kūrimą, dirbdami su šia užduotimi sužinosite apie daugelį „JavaScript“ funkcijų.

Tačiau funkcionalumas yra tikslas. Bet čia gali tekti sujungti kai kuriuos CSS su „JavaScript“, kad plytos būtų išdėstytos tolygiai. Galų gale jūsų programa nurodys, kada žaidėjas laimi ar pralaimi ir kas atsitiks vėliau.

„JavaScript“: toliau mokykitės darydami

Praktinės kai kurios iš šių projektų idėjų sustiprins jūsų „JavaScript“ įgūdžius ir paruoš jus realiems projektams. Tai reiškia, kad nors stilius yra esminis daugelyje šių projektų, būkite atsargūs, kad nesiblaškytumėte. Tačiau sutelkite dėmesį į „JavaScript“ teikiamas funkcijas ir pradėsite kurti interaktyvias svetaines naudodami „JavaScript“ dar prieš tai žinodami. Laimingo kodavimo!

10 „Python“ projekto idėjų, tinkančių pradedantiesiems

Jūs žinote pagrindus ir dabar esate pasiruošę juos taikyti. Pradėkite nuo šių „Python“ projektų!

Skaityti toliau

Apie autorių