Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Carica
1 visualizzazioni

JavaScript_SnippetUtiliAllaProgrammazione-1

Il documento fornisce un esempio di codice HTML e JavaScript per gestire l'inserimento e la memorizzazione del nome utente tramite localStorage. Include spiegazioni dettagliate sulla struttura del documento, le variabili utilizzate, le condizioni per mostrare un form o un messaggio di benvenuto, e suggerimenti per migliorare lo script. Vengono anche forniti metodi utili e idee per applicazioni future che utilizzano questo approccio.

Caricato da

dragonking0765
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
1 visualizzazioni

JavaScript_SnippetUtiliAllaProgrammazione-1

Il documento fornisce un esempio di codice HTML e JavaScript per gestire l'inserimento e la memorizzazione del nome utente tramite localStorage. Include spiegazioni dettagliate sulla struttura del documento, le variabili utilizzate, le condizioni per mostrare un form o un messaggio di benvenuto, e suggerimenti per migliorare lo script. Vengono anche forniti metodi utili e idee per applicazioni future che utilizzano questo approccio.

Caricato da

dragonking0765
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 8

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.

Potrebbero piacerti anche