Editor online Javascript

In questa breve guida vedremo come poter scrivere ed eseguire del codice javascript direttamente dal nostro browser su un editor online: non preoccuparti, è facilissimo! Ti basterà seguire questi steps. Pronto? Iniziamo! Creare un account su CodePen Apri il tuo browser e vai su codepen.io Clicca su “Sign Up” o “Registrati” per creare un account.…

Lezione 4 / 23

Enza Neri

javascript

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

Scopri i corsi 👨‍🏫

CERCA ARGOMENTO

Introduzione a Javascript

Sintassi Javascript

Operatori in Javascript

Variabili e costanti in Javascript

Tipo di dato in Javascript

Conversioni tra tipi di dato in Javascript

Flusso di esecuzione in Javascript

Javascript sul desktop, con VSC

Consultazione di un database con JavaScript

Il linguaggio Javascript: DOM, eventi e canvas

Node.js, un runtime Javascript

Creare un account su CodePen

Apri il tuo browser e vai su codepen.io
Clicca su “Sign Up” o “Registrati” per creare un account. Inserisci il tuo nome, indirizzo email e crea una password.
Dopo aver confermato il tuo account tramite l’email di verifica, accedi a CodePen.

Creare un nuovo progetto su CodePen

Una volta effettuato l’accesso, clicca su “New Pen” o “Nuovo Pen” nella parte superiore della pagina.
Vedrai tre sezioni principali: HTML, CSS e JavaScript. Puoi scrivere il codice in ognuna di queste sezioni.

Scrivere Codice HTML, CSS e JavaScript

Ecco degli esempi di codice che puoi inserire nelle rispettive sezioni:

HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Il mio primo progetto</title>
   </head>
   <body>
      <h1>Ciao, mondo!</h1>
      <p>Questo è il mio primo progetto su CodePen.</p>
   </body>
</html>

CSS:

body {
   background-color: lightgray;
   font-family: Arial, sans-serif;
}

h1 {
   color: blue;
}

p {
   color: darkgreen;
}

JavaScript:

document.querySelector('h1').addEventListener('click', function() {
   alert('Hai cliccato sull\'intestazione!');
});

Come visualizzare i risultati

Dopo aver scritto il codice, puoi vedere immediatamente i risultati nella sezione “Result” o “Risultato” nella parte destra dell’editor.
Nel nostro esempio, vedrai l’intestazione blu e il paragrafo verde su uno sfondo grigio chiaro.

Condividere il tuo progetto su CodePen

Se sei soddisfatto del tuo progetto e vuoi condividerlo con gli altri, puoi cliccare su “Save” o “Salva” nella parte superiore dell’editor.
Otterrai un link unico che puoi condividere per far vedere agli altri il tuo progetto.

Hai bisogno di informazioni? 🙋🏻‍♂️

Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.

Scrivici

Oppure chiamaci al 800 128 626

CONTENUTI GRATUITI IN EVIDENZA

Guide per aspiranti programmatori 👨🏻‍🚀

Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.