Editor JavaScript online

1. Cliccare il pulsante “Apri editor” per avviare l’editor.



2. Verrà creato un modello di base, che può essere cancellato se necessario e gli script possono essere avviati alla scrittura da zero nello stesso blocco di editor.



3. E’ possibile modificare le dimensioni di tutti i blocchi presenti, cosa che avviene spostando il telaio estremo. Preparate in anticipo il vostro spazio di lavoro per essere più convenienti per un ulteriore sviluppo.



Tutte le modifiche apportate vengono immediatamente visualizzate sullo schermo, poiché la modalità Live è attivata di default.



Disattivarlo disattivando il pulsante corrispondente in alto a destra. Poi dovrete avviare la compilazione da soli cliccando sull’icona del triangolo.



Utilizzare i prompt incorporati per impostare rapidamente i comandi importanti. Basta scrivere alcune lettere e il resto del contenuto sarà sostituito automaticamente. Lo stesso vale per i preventivi o le parentesi, che vengono inseriti automaticamente.



La console viene visualizzata in basso a sinistra. Se ci sono errori durante l’elaborazione del codice, si vedrà immediatamente un avviso con l’analisi delle imprecisioni.



Passare da file JS, HTML e CSS tramite il pannello di sinistra.



Inoltre, ci sono altri modelli in PlayCode che vengono mostrati come semplici script o anche giochi con l’interazione dell’utente. È possibile accedervi cliccando sui pulsanti a destra.



Si avrà immediatamente familiarità con l’output e si potrà modificare manualmente il codice, applicandolo ad un progetto futuro.



Se si prevede di continuare a lavorare con PlayCode, si consiglia di creare un nuovo account. Dopodiché saranno disponibili gli strumenti per il salvataggio, la pubblicazione e la distribuzione dei progetti.

Metodo 2: JsFiddle

Il servizio online di JsFiddle ha le sue caratteristiche: ad esempio, l’utente può connettersi ai framework più diffusi, così come passare rapidamente da un linguaggio all’altro per scrivere codice.

Vai al servizio online di JsFiddle

1. Una volta che siete sulla home page di JsFiddle, potete scegliere uno dei preset per un’ulteriore programmazione o iniziare a scrivere codice da zero.



2. L’editor JS si trova nella parte inferiore ed è possibile modificarne le dimensioni spostando la cornice dell’area, se necessario. Qui viene eseguito il processo principale di scrittura del codice.



3. Accedere al menu a tendina se si desidera passare alla vecchia versione linguistica o selezionare un altro JP.



4. In alto sono divisi in due blocchi di editor HTML e CSS, con i quali è possibile interagire in qualsiasi momento semplicemente passando da uno all’altro.



5. Utilizzare il pulsante “Run” per controllare il codice. Purtroppo JsFiddle non supporta la compilazione in tempo reale.



6. Una piccola finestra della console a destra vi mostrerà le informazioni sulla compilazione corretta o vi mostrerà le informazioni sugli errori che si sono verificati durante questo processo.



7. Il risultato stesso sarà visualizzato in un’area separata sopra la console.



8. Utilizzare il menu a tendina “Impostazioni” se si desidera modificare l’aspetto dell’editor, configurare la console, i parametri delle stringhe e il comportamento del servizio online.



9. Nello stesso menu a tendina che è responsabile della selezione del linguaggio di programmazione, è possibile collegare il framework per uso personale.

Se si desidera salvare il progetto o ottenere ulteriori funzioni di editor, è necessario registrarsi con JsFiddle. Successivamente, verificate i piani tariffari e sceglietene uno se prevedete di utilizzare il servizio online in modo permanente e senza restrizioni.

Metodo 3: DirtyMarkup

In conclusione, vorremmo parlare dell’editor online DirtyMarkup, che si differenzia notevolmente da quelli precedenti in quanto non è destinato alla scrittura di codice da zero, ma viene utilizzato per portarlo alla normale formattazione in modalità automatica.

Vai al servizio online DirtyMarkup

1. Sul sito web di DirtyMarkup passare alla modalità “JS” cliccando sul pulsante corrispondente.



2. Ora è possibile inserire tutto il codice che deve essere formattato nell’editor stesso.



3. Specificare la tabulazione, la lunghezza della linea, il tipo di parentesi graffe e i parametri aggiuntivi per essa, contrassegnandoli con un segno di spunta.



4. Applicare le opzioni di modifica cliccando su “Clean”.

Non resta che copiare il contenuto risultante nella corretta formattazione per un ulteriore utilizzo nell’ambiente di sviluppo o in un altro editor JavaScript online.