Chiorboli Fabio
JAVASCRIPT
SNIPPET UTILI ALLA PROGRAMMAZIONE
Snippet:................................................................................................................................... 2
Spiegazione sippet:............................................................................................................... 3
Struttura del documento HTML.......................................................................................... 3
Elementi HTML...................................................................................................................3
Script JavaScript................................................................................................................ 4
Variabili e costanti.............................................................................................................. 4
Condizione per mostrare il form o il messaggio di benvenuto............................................4
Mostra il form per inserire il nome utente........................................................................... 5
Esegui il codice quando il form viene inviato......................................................................5
Mostra il messaggio di benvenuto con il nome utente memorizzato..................................6
Come utilizzare questo script in futuro............................................................................... 6
Metodi utili.......................................................................................................................... 7
Esempi di utilizzo................................................................................................................8
Chiorboli Fabio
Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="h1"></h1>
<script>
const chiaveStorageUtente = 'nomeUtente';
let nomeUtente = localStorage.getItem(chiaveStorageUtente);
if (!nomeUtente) {
// Mostra il form per inserire il nome utente
document.body.innerHTML = `
<form>
<label for="username">Inserisci il tuo nome utente:</label>
<input type="text" id="username" name="username">
<button type="submit">Invia</button>
</form>
`;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
nomeUtente = document.getElementById('username').value;
localStorage.setItem(chiaveStorageUtente, nomeUtente);
window.location.href = window.location.href + `?nomeUtente=${nomeUtente}`;
});
} else {
// Mostra il messaggio di benvenuto con il nome utente memorizzato
document.getElementById("h1").innerHTML = `Benvenuto, ${nomeUtente}!`;
}
</script>
</body>
</html>
Chiorboli Fabio
Spiegazione sippet:
Struttura del documento HTML
Il codice inizia con la dichiarazione del tipo di documento (<!DOCTYPE html>) e la
definizione dell'elemento html con l'attributo lang impostato su "en" (inglese).
La sezione head contiene metadati sul documento, come la codifica dei caratteri (UTF-8),
la larghezza della viewport (width=device-width) e il titolo del documento (Document).
La sezione body contiene il contenuto del documento.
Elementi HTML
Nella sezione body, ci sono due elementi HTML:
1. Un elemento h1 con un attributo id impostato su "h1". Questo elemento sarà
utilizzato per mostrare il messaggio di benvenuto con il nome utente.
2. Un elemento button con un attributo onclick che esegue due azioni quando viene
cliccato:
● Rimuove l'elemento di storage locale con la chiave chiaveStorageUtente
utilizzando localStorage.removeItem(chiaveStorageUtente).
● Ricarica la pagina utilizzando location.reload().
Chiorboli Fabio
Script JavaScript
Il codice JavaScript è contenuto all'interno di un elemento script nella sezione body.
Variabili e costanti
La prima riga del codice JavaScript definisce una costante chiaveStorageUtente con il
valore 'nomeUtente'. Questa costante sarà utilizzata come chiave per memorizzare il
nome utente nello storage locale.
La seconda riga definisce una variabile nomeUtente e la inizializza con il valore restituito
da localStorage.getItem(chiaveStorageUtente). Questo metodo recupera il valore associato
alla chiave chiaveStorageUtente nello storage locale.
Condizione per mostrare il form o il messaggio di benvenuto
La condizione if (!nomeUtente) verifica se il nome utente è stato memorizzato nello
storage locale. Se non è stato memorizzato, il codice esegue il blocco di codice all'interno
dell'if.
Chiorboli Fabio
Mostra il form per inserire il nome utente
Il codice all'interno dell'if crea un form per inserire il nome utente e lo aggiunge al
contenuto del corpo del documento utilizzando document.body.innerHTML. Il form
contiene:
● Un elemento label con il testo "Inserisci il tuo nome utente:".
● Un elemento input di tipo text con un attributo id impostato su "username".
● Un elemento button di tipo submit con il testo "Invia".
Il codice aggiunge anche un listener di evento submit al form utilizzando
document.querySelector('form').addEventListener('submit', (e) => {... }). Quando il form viene
inviato, il listener di evento esegue il codice all'interno della funzione.
Chiorboli Fabio
Esegui il codice quando il form viene inviato
La funzione all'interno del listener di evento submit esegue le seguenti azioni:
● Impedisce il comportamento di default del form utilizzando e.preventDefault().
● Recupera il valore dell'input username utilizzando
document.getElementById('username').value.
● Memorizza il nome utente nello storage locale utilizzando
localStorage.setItem(chiaveStorageUtente, nomeUtente).
● Reindirizza la pagina aggiungendo un parametro alla URL corrente utilizzando
window.location.href = window.location.href + ?nomeUtente=${nomeUtente}``.
Mostra il messaggio di benvenuto con il nome utente memorizzato
Se il nome utente è stato memorizzato nello storage locale, il codice esegue il blocco di
codice all'esterno dell'if. Questo codice mostra il messaggio di benvenuto con il nome
utente memorizzato utilizzando document.getElementById("h1").innerHTML = Benvenuto,
${nomeUtente}!;.
Come utilizzare questo script in futuro
Questo script può essere utilizzato per memorizzare il nome utente di un utente e
mostrarlo sulla pagina web. Può essere adattato per essere utilizzato in diversi contesti,
ad esempio:
● Memorizzare informazioni utente in un'applicazione web.
● Mostrare un messaggio di benvenuto personalizzato sulla pagina web.
● Utilizzare lo storage locale per memorizzare informazioni utente tra le sessioni.
Chiorboli Fabio
Metodi utili
I metodi utili in questo script sono:
● localStorage.getItem(key): recupera il valore associato alla chiave specificata nello
storage locale.
● localStorage.setItem(key, value): memorizza il valore associato alla chiave specificata
nello storage locale.
● localStorage.removeItem(key): rimuove l'elemento di storage locale con la chiave
specificata.
● document.querySelector(selector): seleziona il primo elemento che corrisponde al
selettore specificato.
● document.getElementById(id): seleziona l'elemento con l'ID specificato.
● element.innerHTML: imposta o recupera il contenuto HTML di un elemento.
● element.addEventListener(event, function): aggiunge un listener di evento
all'elemento specificato.
● e.preventDefault(): impedisce il comportamento di default dell'evento specificato.
● window.location.href: recupera o imposta l'URL corrente della pagina.
Idee su come poter migliorare lo script:
● Aggiungere una verifica per assicurarti che l'utente abbia inserito un nome
utente valido prima di memorizzarlo nello storage locale.
● Utilizzare un approccio più sicuro per memorizzare le informazioni utente, ad
esempio utilizzando un token di autenticazione invece di memorizzare il nome
utente in chiaro.
● Aggiungere una funzionalità per permettere all'utente di modificare il proprio
nome utente memorizzato.
● Utilizzare un framework o una libreria JavaScript per semplificare la gestione
degli eventi e la manipolazione del DOM.
Chiorboli Fabio
Esempi di utilizzo
Ecco alcuni esempi di come potresti utilizzare questo script in futuro:
● Creare un'applicazione web che richiede all'utente di inserire il proprio nome
utente e password per accedere a un'area riservata.
● Mostrare un messaggio di benvenuto personalizzato sulla pagina web di un
e-commerce con il nome utente dell'utente loggato.
● Utilizzare lo storage locale per memorizzare le preferenze utente, ad esempio la
lingua o le impostazioni di visualizzazione.
