20+ Progetti che puoi fare con JavaScript

Se sei interessato a diventare uno sviluppatore web, JavaScript è uno dei migliori linguaggi di codifica che puoi imparare – ma familiarizzare con le basi di JavaScript significa usare quelle abilità per costruire progetti JavaScript. Hai bisogno di un piccolo aiuto per convincere l’ispirazione a colpire? Abbiamo messo insieme una lista di oltre 20 idee di progetti JavaScript su cui puoi iniziare a lavorare SUBITO (sia che tu stia cercando progetti JavaScript per principianti o progetti JavaScript per codificatori intermedi e oltre).

Vai avanti, scorri la lista, e – quando trovi un progetto JavaScript che attira il tuo interesse e corrisponde al tuo livello di abilità – segui il link del progetto. Ognuno di questi progetti JavaScript open source ha il loro codice sorgente elencato nella loro home page per te da usare come guida.

Progetti JavaScript per principianti

Queste idee di progetti JavaScript per principianti sono esempi di cose che puoi scrivere con competenze JavaScript di base (insieme a un po’ di HTML e CSS). Guardando il codice sorgente di ognuno di questi semplici progetti JavaScript inizierai a capire come puoi costruire una nuova versione della stessa idea, o costruire sul codice originale open source per aggiungere i tuoi colpi di scena e le tue modifiche.

Costruisci un orologio JavaScript

Se sei su un sito web o usi applicazioni web con una funzione di auto-aggiornamento del tempo (sai, un orologio), c’è una buona possibilità che sia alimentato da codice JavaScript. Questo significa che gli orologi JavaScript non sono solo un buon progetto JavaScript, un orologio JavaScript vi permette di mettere mano al tipo di lavoro reale che farete come sviluppatori JavaScript.

Per darvi un’idea di dove iniziare con questa idea di progetto JavaScript, non guardate oltre il Lolcats Clock-un progetto che è un punto fermo del corso Skillcrush JavaScript.

Il codice JavaScript rende possibile coordinare le immagini dei lolcat con i tempi stabiliti scelti dall’utente o spingendo il pulsante “Party Time! Posso fare una festa a tempo? Yes you can.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci un JavaScript Tip Calculator

Quando vado a mangiare fuori e ho difficoltà a calcolare la giusta mancia, armeggio il mio telefono e cerco un “tip calculator” su Google. Non potrei dirvi il nome o l’url di quella che di solito finisco per usare, ma è una semplice applicazione JavaScript. Quindi andate avanti e provate a fare la vostra calcolatrice di mance. Questa calcolatrice su CodePen di Carolyn Hemmings è un perfetto progetto di esempio JavaScript che mostra il tipo di progetti JavaScript divertenti che potete costruire con JavaScript e un po’ di HTML e CSS.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci un JavaScript Animated Navigation Toggle

Quando costruisci menu per siti web usando solo HTML e CSS, si è limitati a creare link che spostano l’utente da una pagina statica all’altra – è JavaScript che permette la navigazione a discesa, collassabile e altrimenti animata quando si fa sviluppo web. I toggle di navigazione animati sono un’altra parte onnipresente del panorama di internet che sarete in grado di creare per clienti e potenziali datori di lavoro una volta che avrete imparato il linguaggio di programmazione JavaScript. Questo esempio di progetto JavaScript di A. James Liptak mostra il tipo di funzionalità di navigazione dinamica a cui avrete accesso una volta che avrete aggiunto JavaScript al vostro toolkit.

>>Link al codice sorgente del progetto JavasScript qui

Costruisci una mappa JavaScript

Se hai mai usato Google Maps per ingrandire un luogo e cambiare la modalità di visualizzazione, stavi usando delle funzioni costruite con JavaScript. La capacità di JavaScript di creare oggetti dinamici lo rende un adattamento naturale per mappe interattive creative su siti web o in una web app. Anche se non è necessario puntare a ricreare Google Maps al primo tentativo, sperimentare semplici progetti JavaScript come la mappa interattiva Codepen di Sara B (costruita usando il framework JavaScript jQuery-una collezione di librerie JavaScript con codice pre-scritto e riutilizzabile) è un modo solido per familiarizzare con le capacità di creazione di mappe di JavaScript.

>>Link al codice sorgente del progetto JavaScript

Costruire un gioco JavaScript

HTML e CSS sono elementi importanti nello sviluppo web, ma JavaScript è il linguaggio di programmazione che muove i siti web dalla funzione al divertimento. Quindi non è una sorpresa che i giochi siano sulla lista dei progetti JavaScript divertenti che ti permettono di praticare le tue abilità senza addormentarti alla tastiera. Il labirinto Codepen di Martin è un perfetto esempio di giochi come semplici progetti JavaScript.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci un elemento JavaScript Mouseover

Un altro pezzo di bontà di JavaScript su cui avete fatto affidamento online è l’effetto mouseover – casi in cui il passaggio del mouse su una certa icona o area su uno schermo produce un’azione o un risultato dal punto in cui state passando il mouse. I mouseover sono una parte di routine nello sviluppo di JavaScript, quindi dedicare il proprio tempo ad un rapido progetto di mouseover JavaScript è un modo utile per passare il pomeriggio. Il mouseover Happy Bouncing Balls di Roger Van Hout su CodePen mostra un campo di palline che assomigliano a quelle che si ottengono dai distributori di gomme da masticare quando si è bambini. Passa il mouse sopra ogni singola sfera e guardala espandersi.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci un login JavaScript Autenticazione

Qualcosa di semplice come la barra di autenticazione del login di un sito web (l’area dove si inserisce la propria email e password per accedere al sito) è un’altra parte del dominio di JavaScript. Questo progetto JavaScript per principianti è una buona idea da padroneggiare, dato che quasi ogni sito web ha una funzione di autenticazione di login. La barra di autenticazione Codepen di Mike Tran costruita usando AngularJS (un altro framework JavaScript) è un progetto di esempio JavaScript pulito e preciso.

>>Link al codice sorgente del progetto JavaScript qui

Costruire un disegno JavaScript

JavaScript può essere usato come strumento di disegno, portando gli elementi HTML e CSS alla vita sullo schermo di un browser web. Essere in grado di rendere le pagine statiche più attraenti con elementi grafici è una parte fondamentale dello sviluppo web, quindi imparare come sfruttare al meglio le capacità di disegno di JavaScript è fondamentale. Considerate di provare un progetto di disegno JavaScript come Narayana’s Infinite Rainbow su CodePen.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci una To-Do List JavaScript

JavaScript è particolarmente utile per codificare liste interattive che permettono agli utenti di aggiungere, rimuovere e raggruppare elementi, cosa che non si può fare solo con HTML e CSS. Se siete come me e avete grandi intenzioni di creare una lista di cose da fare (ma non lo fate mai), questa è la vostra occasione. Usa le tue capacità JavaScript per creare una lista di cose da fare come questo esempio di progetto JavaScript costruito da John Fichera su Codepen.

>>Link al codice sorgente del progetto JavaScript qui

Costruisci un quiz JavaScript

A chi non piace un quiz? Che ti dicano per quale percorso di carriera sei più adatto, dove si allineano le tue convinzioni politiche, o che mettano alla prova la tua conoscenza dei lottatori WWF del 1980, i quiz possono essere sia divertenti che utili – noi usiamo anche un quiz qui a Skillcrush per aiutare gli utenti a determinare quale percorso di codifica è più adatto a loro. Se hai fatto un quiz online, c’è una buona possibilità che sia stato coinvolto del codice sorgente JavaScript, e ora hai la possibilità di mettere insieme un quiz tutto tuo. Segui le orme di jksdk4 sull’esempio di progetto JavaScript di CodePen, e vedi cosa puoi fare.

>>Link al codice sorgente del progetto JavaScript qui

Crea dei cassetti JavaScript scorrevoli

Questo progetto JavaScript su github (Pushbar.js) è un plugin JavaScript che permette agli sviluppatori di aggiungere menu “sliding drawer” (menu che possono essere tirati sullo schermo dall’alto, dal basso e/o da destra e sinistra di un’app) al loro sito web o app. Dai un’occhiata al codice e vedi se riesci a creare qualcosa di simile!

>>Link al codice sorgente del progetto JavaScript qui

Progetti JavaScript avanzati

Una volta presa familiarità con i semplici progetti JavaScript elencati sopra, potresti essere curioso di sapere come sono i progetti JavaScript più avanzati. Qui ci sono alcuni progetti JavaScript intermedi che vanno ben oltre le basi, ma che sono ancora open source, il che significa che puoi studiare il codice per vedere come funziona ed eventualmente provare a fare qualcosa di simile tu stesso.

Prettier

Prettier è un “opinionated JavaScript formatter,” cioè è un programma JavaScript usato per rimuovere tutti gli stili originali nel tuo codice JavaScript e formattarlo in un singolo, più carino (capito?) stile standard.

>>Link al codice sorgente del progetto JavaScript qui

Terminalizer

Terminalizer è uno scattante progetto JavaScript open source usato per registrare la schermata del terminale e poi trasformare la registrazione in una gif animata, perfetta per demo e tutorial di terminale.

>>Link al codice sorgente del progetto JavaScript qui

Nano ID

Hai bisogno di generare un numero ID casuale per qualcosa di importante come il tuo conto bancario online (o semplicemente non vuoi che il tuo compagno di stanza usi il tuo Netflix)? Nano ID è un programma open source in JavaScript i cui ID generati casualmente richiederebbero 149 miliardi di anni per avere l’1% di probabilità di almeno una collisione. In altre parole, il vostro coinquilino impiegherà molto tempo per indovinare.

>>Link al codice sorgente del progetto JavaScript qui

Reaction

Reaction è un grande esempio di quanto lontano si possa andare con JavaScript. Ricordate l’umile ma orgoglioso calcolatore di suggerimenti JavaScript nella sezione Principianti? Bene, Reaction alza la posta in gioco da un progetto JavaScript che aiuta con un tipo specifico di transazione, a un progetto JavaScript che permette agli utenti di gestire un intero business. Reaction è una piattaforma di commercio utilizzata per gestire il business in tempo reale e fornire esperienze di shopping direttamente ai clienti. Ed è open source, il che significa che puoi studiare come funziona!

>>Link al codice sorgente del progetto JavaScript qui

Webpack Monitor

Webpack Monitor è un progetto JavaScript avanzato e open source usato per migliorare l’esperienza complessiva degli utenti delle applicazioni. Questo programma JavaScript tiene traccia delle dimensioni e delle prestazioni del “bundle” di un’applicazione per assicurarsi che tutto fili liscio.

>>Link al codice sorgente del progetto JavaScript qui

Maptalks

Sviluppando il semplice progetto di mappe JavaScript di prima, Maptalks è un progetto JavaScript più avanzato. Maptalks integra mappe 2d e 3d per creare paesaggi mutevoli e animati dove edifici e terreni possono essere estrusi e appiattiti a piacimento.

>>Link al codice sorgente del progetto JavaScript qui

AR.js

AR.js è un progetto JavaScript avanzato che cerca di portare l’esperienza della realtà aumentata ai dispositivi mobili usando JavaScript. Abbiamo fatto molta strada dai toggle di navigazione animati, vero?

>>Link al codice sorgente del progetto JavaScript qui

Parcel

Parcel è un bundler per applicazioni web JavaScript che può raggruppare tutti i file e le risorse di un’applicazione in tempo record. Come è possibile? Studia tu stesso il codice sorgente e scoprilo!

>>Link al codice sorgente del progetto JavaScript qui

Workbox

Workbox è un insieme di librerie JavaScript progettato per aggiungere funzionalità offline alle applicazioni web. Se un’app usa Workbox, la prossima volta che il vostro WiFi si spegnerà, non sarete (abbastanza) delusi.

>>Link al codice sorgente del progetto JavaScript qui

Tone.js

Tone.js è un framework JavaScript per creare musica interattiva sul browser web. Questo include capacità avanzate di programmazione, synth ed effetti, e astrazioni musicali intuitive costruite sulla cima della Web Audio API.

>>Link al codice sorgente del progetto JavaScript qui

Il tuo futuro JavaScript

Mentre questi sono tutti esempi di progetti JavaScript di base e intermedi che puoi fare o studiare per portare il tuo JavaScript alla massima velocità, ecco un’anticipazione di ciò che sarà possibile in futuro.

JavaScript può essere usato per creare accattivanti narrazioni visive come il libro per bambini anti-bullismo di Bullying Free NZ, Oat the Goat.

Per ipnotiche visualizzazioni di arte generativa come quella di Matt DesLaurier su GitHub.

E la visualizzazione dati interattiva di Shirley Wu di ogni battuta del musical Hamilton.

Man mano che la vostra esperienza con il codice JavaScript cresce, la vostra immaginazione sarà presto l’unica cosa che vi trattiene, quindi è ora di mettersi al lavoro!