` con `id="quote"` | | Area messaggi | Mostra messaggi di stato e di successo | `

` con `id="message"` | | Input di testo | Dove i giocatori digitano la citazione | `` con `id="typed-value"` | | Pulsante di avvio | Avvia il gioco | `` con `id="start"` | **Comprendere la struttura dell'interfaccia utente:** - **Organizza** il contenuto in modo logico dall'alto verso il basso - **Assegna** ID univoci agli elementi per il targeting con JavaScript - **Fornisce** una chiara gerarchia visiva per una migliore esperienza utente - **Include** elementi HTML semantici per l'accessibilità Ognuno di questi avrà bisogno di ID in modo che possiamo lavorare con loro nel nostro JavaScript. Aggiungeremo anche riferimenti ai file CSS e JavaScript che stiamo per creare. Crea un nuovo file chiamato `index.html`. Aggiungi il seguente HTML: ```html

Typing game!

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

Start ``` **Analisi di ciò che realizza questa struttura HTML:** - **Collega** il foglio di stile CSS nell'`` per lo stile - **Crea** un'intestazione chiara e istruzioni per gli utenti - **Stabilisce** paragrafi segnaposto con ID specifici per contenuti dinamici - **Include** un campo di input con attributi di accessibilità - **Fornisce** un pulsante di avvio per avviare il gioco - **Carica** il file JavaScript alla fine per prestazioni ottimali ### Avviare l'applicazione Testare frequentemente la tua applicazione durante lo sviluppo ti aiuta a individuare i problemi in anticipo e a vedere i tuoi progressi in tempo reale. Live Server è uno strumento prezioso che aggiorna automaticamente il browser ogni volta che salvi le modifiche, rendendo lo sviluppo molto più efficiente. È sempre meglio sviluppare iterativamente per vedere come appaiono le cose. Avviamo la nostra applicazione. C'è una fantastica estensione per Visual Studio Code chiamata [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) che ospiterà la tua applicazione localmente e aggiornerà il browser ogni volta che salvi. **Installa [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) seguendo il link e cliccando su Installa:** **Ecco cosa succede durante l'installazione:** - **Apre** il browser per avviare Visual Studio Code - **Ti guida** attraverso il processo di installazione dell'estensione - **Potrebbe richiedere** il riavvio di Visual Studio Code per completare la configurazione **Una volta installato, in Visual Studio Code, premi Ctrl-Shift-P (o Cmd-Shift-P) per aprire il pannello dei comandi:** **Comprendere il pannello dei comandi:** - **Fornisce** accesso rapido a tutti i comandi di VS Code - **Cerca** i comandi mentre digiti - **Offre** scorciatoie da tastiera per uno sviluppo più veloce **Digita "Live Server: Open with Live Server":** **Cosa fa Live Server:** - **Avvia** un server di sviluppo locale per il tuo progetto - **Aggiorna automaticamente** il browser quando salvi i file - **Serve** i tuoi file da un URL locale (tipicamente `localhost:5500`) **Apri un browser e naviga su `https://localhost:5500`:** Ora dovresti vedere la pagina che hai creato! Aggiungiamo un po' di funzionalità. ## Aggiungere il CSS Ora rendiamo tutto più bello! Il feedback visivo è stato cruciale per le interfacce utente fin dai primi giorni dell'informatica. Negli anni '80, i ricercatori hanno scoperto che il feedback visivo immediato migliora notevolmente le prestazioni degli utenti e riduce gli errori. Ed è proprio quello che andremo a creare. Il nostro gioco deve essere chiarissimo su ciò che sta accadendo. I giocatori devono sapere immediatamente quale parola devono digitare e, se commettono un errore, devono vederlo subito. Creiamo uno stile semplice ma efficace: Crea un nuovo file chiamato `style.css` e aggiungi la seguente sintassi. ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **Comprendere queste classi CSS:** - **Evidenzia** la parola corrente con uno sfondo giallo per una guida visiva chiara - **Segnala** gli errori di digitazione con un colore di sfondo corallo chiaro - **Fornisce** un feedback immediato senza interrompere il flusso di digitazione dell'utente - **Utilizza** colori contrastanti per accessibilità e comunicazione visiva chiara ✅ Per quanto riguarda il CSS, puoi disporre la tua pagina come preferisci. Prenditi un po' di tempo per rendere la pagina più accattivante: - Scegli un font diverso - Colora le intestazioni - Ridimensiona gli elementi ## JavaScript Ecco dove le cose si fanno interessanti! 🎉 Abbiamo la struttura HTML e lo stile CSS, ma al momento il nostro gioco è come una bella macchina senza motore. JavaScript sarà quel motore: è ciò che fa funzionare tutto e rispondere alle azioni dei giocatori. Qui vedrai la tua creazione prendere vita. Affronteremo questo passo dopo passo, così nulla sembrerà troppo complicato: | Passaggio | Scopo | Cosa imparerai | |-----------|-------|----------------| | [Creare le costanti](../../../../4-typing-game/typing-game) | Configurare citazioni e riferimenti DOM | Gestione delle variabili e selezione DOM | | [Event listener per avviare il gioco](../../../../4-typing-game/typing-game) | Gestire l'inizializzazione del gioco | Gestione degli eventi e aggiornamenti UI | | [Event listener per la digitazione](../../../../4-typing-game/typing-game) | Elaborare l'input dell'utente in tempo reale | Validazione dell'input e feedback dinamico | **Questo approccio strutturato ti aiuta a:** - **Organizzare** il tuo codice in sezioni logiche e gestibili - **Costruire** funzionalità in modo incrementale per un debug più semplice - **Comprendere** come le diverse parti della tua applicazione lavorano insieme - **Creare** modelli riutilizzabili per progetti futuri Ma prima, crea un nuovo file chiamato `script.js`. ### Aggiungere le costanti Prima di immergerci nell'azione, raccogliamo tutte le nostre risorse! Proprio come il controllo missione della NASA prepara tutti i suoi sistemi di monitoraggio prima del lancio, è molto più facile quando hai tutto pronto e organizzato. Questo ci risparmia la fatica di cercare le cose in seguito e aiuta a prevenire errori di battitura. Ecco cosa dobbiamo configurare prima: | Tipo di dato | Scopo | Esempio | |--------------|-------|---------| | Array di citazioni | Memorizza tutte le possibili citazioni per il gioco | `['Citazione 1', 'Citazione 2', ...]` | | Array di parole | Suddivide la citazione corrente in parole singole | `['Quando', 'tu', 'hai', ...]` | | Indice delle parole | Tiene traccia della parola che il giocatore sta digitando | `0, 1, 2, 3...` | | Ora di inizio | Calcola il tempo trascorso per il punteggio | `Date.now()` | **Avremo anche bisogno di riferimenti ai nostri elementi dell'interfaccia utente:** | Elemento | ID | Scopo | |----------|----|-------| | Campo di testo | `typed-value` | Dove i giocatori digitano | | Visualizzazione citazione | `quote` | Mostra la citazione da digitare | | Area messaggi | `message` | Mostra aggiornamenti di stato | ```javascript // inside script.js // all of our quotes const quotes = [ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', 'There is nothing more deceptive than an obvious fact.', 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', 'I never make exceptions. An exception disproves the rule.', 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing let words = []; let wordIndex = 0; // the starting time let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); const typedValueElement = document.getElementById('typed-value'); ``` **Analisi di ciò che realizza questo codice di configurazione:** - **Memorizza** un array di citazioni di Sherlock Holmes usando `const` poiché le citazioni non cambieranno - **Inizializza** variabili di tracciamento con `let` poiché questi valori verranno aggiornati durante il gioco - **Cattura** riferimenti agli elementi DOM usando `document.getElementById()` per un accesso efficiente - **Imposta** le basi per tutte le funzionalità del gioco con nomi di variabili chiari e descrittivi - **Organizza** dati ed elementi correlati in modo logico per una manutenzione del codice più semplice ✅ Vai avanti e aggiungi altre citazioni al tuo gioco > 💡 **Suggerimento Pro**: Possiamo recuperare gli elementi ogni volta che vogliamo nel codice usando `document.getElementById()`. Poiché faremo riferimento a questi elementi regolarmente, eviteremo errori di battitura con le stringhe letterali utilizzando costanti. Framework come [Vue.js](https://vuejs.org/) o [React](https://reactjs.org/) possono aiutarti a gestire meglio la centralizzazione del tuo codice. > **Ecco perché questo approccio funziona così bene:** - **Previene** errori di ortografia quando si fa riferimento agli elementi più volte - **Migliora** la leggibilità del codice con nomi di costanti descrittivi - **Abilita** un migliore supporto IDE con completamento automatico e controllo degli errori - **Facilita** la ristrutturazione del codice se gli ID degli elementi cambiano in seguito Prenditi un minuto per guardare un video sull'uso di `const`, `let` e `var` [](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipi di variabili") > 🎥 Clicca sull'immagine sopra per un video sui tipi di variabili. ### Aggiungi la logica di avvio Ecco dove tutto prende forma! 🚀 Stai per scrivere il tuo primo vero event listener, e c'è qualcosa di davvero soddisfacente nel vedere il tuo codice rispondere a un clic su un pulsante. Pensaci: da qualche parte, un giocatore cliccherà sul pulsante "Start", e il tuo codice deve essere pronto per lui. Non sappiamo quando lo farà - potrebbe essere subito, potrebbe essere dopo aver preso un caffè - ma quando lo farà, il tuo gioco prenderà vita. Quando l'utente clicca su `start`, dobbiamo selezionare una citazione, configurare l'interfaccia utente e impostare il tracciamento per la parola corrente e il tempo. Di seguito trovi il codice JavaScript che devi aggiungere; lo analizziamo subito dopo il blocco di script. ```javascript // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words words = quote.split(' '); // reset the word index for tracking wordIndex = 0; // UI updates // Create an array of span elements so we can set a class const spanWords = words.map(function(word) { return `${word} `}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word quoteElement.childNodes[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; // Setup the textbox // Clear the textbox typedValueElement.value = ''; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime = new Date().getTime(); }); ``` **Analizziamo il codice in sezioni logiche:** **📊 Configurazione del tracciamento delle parole:** - **Seleziona** una citazione casuale usando `Math.floor()` e `Math.random()` per varietà - **Converte** la citazione in un array di parole singole usando `split(' ')` - **Reimposta** il `wordIndex` a 0 poiché i giocatori iniziano con la prima parola - **Prepara** lo stato del gioco per un nuovo round **🎨 Configurazione e visualizzazione dell'interfaccia utente:** - **Crea** un array di elementi ``, avvolgendo ogni parola per uno stile individuale - **Unisce** gli elementi span in una singola stringa per un aggiornamento efficiente del DOM - **Evidenzia** la prima parola aggiungendo la classe CSS `highlight` - **Cancella** eventuali messaggi di gioco precedenti per fornire una schermata pulita **⌨️ Preparazione del campo di testo:** - **Cancella** qualsiasi testo esistente nel campo di input - **Imposta il focus** sul campo di testo in modo che i giocatori possano iniziare a digitare immediatamente - **Prepara** l'area di input per la nuova sessione di gioco **⏱️ Inizializzazione del timer:** - **Cattura** il timestamp corrente usando `new Date().getTime()` - **Abilita** il calcolo accurato della velocità di digitazione e del tempo di completamento - **Avvia** il tracciamento delle prestazioni per la sessione di gioco ### Aggiungi la logica di digitazione Ecco dove affrontiamo il cuore del nostro gioco! Non preoccuparti se all'inizio sembra tanto - analizzeremo ogni parte e alla fine vedrai quanto è logico tutto questo. Quello che stiamo costruendo qui è piuttosto sofisticato: ogni volta che qualcuno digita una lettera, il nostro codice controllerà ciò che ha digitato, gli darà un feedback e deciderà cosa fare dopo. È simile a come i primi word processor come WordStar negli anni '70 fornivano feedback in tempo reale ai dattilografi. ```javascript // at the end of script.js typedValueElement.addEventListener('input', () => { // Get the current word const currentWord = words[wordIndex]; // get the current value const typedValue = typedValueElement.value; if (typedValue === currentWord && wordIndex === words.length - 1) { // end of sentence // Display success const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word typedValueElement.value = ''; // move to the next word wordIndex++; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className = ''; } // highlight the new word quoteElement.childNodes[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className = ''; } else { // error state typedValueElement.className = 'error'; } }); ``` **Comprendere il flusso logico della digitazione:** Questa funzione utilizza un approccio a cascata, controllando le condizioni da quelle più specifiche a quelle più generali. Analizziamo ogni scenario: ```mermaid flowchart TD A[Player types character] --> B[Get current word and typed value] B --> C{Quote complete?} C -->|Yes| D[Show completion message with time] C -->|No| E{Word complete with space?} E -->|Yes| F[Clear input, move to next word, update highlight] E -->|No| G{Typing correctly so far?} G -->|Yes| H[Remove error styling] G -->|No| I[Show error styling] ``` **🏁 Citazione completata (Scenario 1):** - **Controlla** se il valore digitato corrisponde alla parola corrente E siamo all'ultima parola - **Calcola** il tempo trascorso sottraendo l'ora di inizio dall'ora corrente - **Converte** i millisecondi in secondi dividendo per 1.000 - **Mostra** un messaggio di congratulazioni con il tempo di completamento **✅ Parola completata (Scenario 2):** - **Rileva** il completamento della parola quando l'input termina con uno spazio - **Valida** che l'input troncato corrisponda esattamente alla parola corrente - **Cancella** il campo di input per la parola successiva - **Avanza** alla parola successiva incrementando `wordIndex` - **Aggiorna** l'evidenziazione visiva rimuovendo tutte le classi e evidenziando la nuova parola **📝 Digitazione in corso (Scenario 3):** - **Verifica** che la parola corrente inizi con ciò che è stato digitato finora - **Rimuove** qualsiasi stile di errore per mostrare che l'input è corretto - **Permette** di continuare a digitare senza interruzioni **❌ Stato di errore (Scenario 4):** - **Attiva** quando il testo digitato non corrisponde all'inizio della parola prevista - **Applica** la classe CSS di errore per fornire un feedback visivo immediato - **Aiuta** i giocatori a identificare e correggere rapidamente gli errori ## Testa la tua applicazione Guarda cosa hai realizzato! 🎉 Hai appena costruito un vero gioco di digitazione funzionante da zero utilizzando la programmazione basata sugli eventi. Prenditi un momento per apprezzarlo - non è un'impresa da poco! Ora arriva la fase di test! Funzionerà come previsto? Abbiamo dimenticato qualcosa? Ecco il punto: se qualcosa non funziona perfettamente subito, è del tutto normale. Anche gli sviluppatori esperti trovano regolarmente bug nel loro codice. Fa parte del processo di sviluppo! Clicca su `start` e inizia a digitare! Dovrebbe assomigliare un po' all'animazione che abbiamo visto prima.  **Cosa testare nella tua applicazione:** - **Verifica** che cliccando su Start venga visualizzata una citazione casuale - **Conferma** che la digitazione evidenzi correttamente la parola corrente - **Controlla** che lo stile di errore appaia per la digitazione errata - **Assicurati** che il completamento delle parole avanzi correttamente l'evidenziazione - **Testa** che il completamento della citazione mostri il messaggio di completamento con il tempo **Suggerimenti comuni per il debug:** - **Controlla** la console del browser (F12) per errori JavaScript - **Verifica** che tutti i nomi dei file corrispondano esattamente (case-sensitive) - **Assicurati** che Live Server sia in esecuzione e si aggiorni correttamente - **Testa** citazioni diverse per verificare che la selezione casuale funzioni --- ## Sfida GitHub Copilot Agent 🎮 Usa la modalità Agent per completare la seguente sfida: **Descrizione:** Estendi il gioco di digitazione implementando un sistema di difficoltà che si adatta al rendimento del giocatore. Questa sfida ti aiuterà a praticare la gestione avanzata degli eventi, l'analisi dei dati e gli aggiornamenti dinamici dell'interfaccia utente. **Prompt:** Crea un sistema di regolazione della difficoltà per il gioco di digitazione che: 1. Tracci la velocità di digitazione del giocatore (parole al minuto) e la percentuale di precisione 2. Si adatti automaticamente a tre livelli di difficoltà: Facile (citazioni semplici), Medio (citazioni attuali), Difficile (citazioni complesse con punteggiatura) 3. Mostri il livello di difficoltà corrente e le statistiche del giocatore nell'interfaccia utente 4. Implementi un contatore di serie che aumenti la difficoltà dopo 3 prestazioni consecutive buone 5. Aggiunga un feedback visivo (colori, animazioni) per indicare i cambiamenti di difficoltà Aggiungi gli elementi HTML necessari, gli stili CSS e le funzioni JavaScript per implementare questa funzionalità. Includi una gestione adeguata degli errori e assicurati che il gioco rimanga accessibile con etichette ARIA appropriate. Scopri di più sulla [modalità agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) qui. ## 🚀 Sfida Pronto a portare il tuo gioco di digitazione al livello successivo? Prova a implementare queste funzionalità avanzate per approfondire la tua comprensione della gestione degli eventi e della manipolazione del DOM: **Aggiungi più funzionalità:** | Funzionalità | Descrizione | Competenze che praticherai | |--------------|-------------|----------------------------| | **Controllo input** | Disabilita il listener dell'evento `input` al completamento e riattivalo quando viene cliccato il pulsante | Gestione degli eventi e controllo dello stato | | **Gestione dello stato UI** | Disabilita il campo di testo quando il giocatore completa la citazione | Manipolazione delle proprietà del DOM | | **Finestra modale** | Mostra una finestra di dialogo modale con il messaggio di successo | Pattern avanzati di UI e accessibilità | | **Sistema di punteggio alto** | Memorizza i punteggi migliori usando `localStorage` | API di archiviazione del browser e persistenza dei dati | **Suggerimenti per l'implementazione:** - **Ricerca** su `localStorage.setItem()` e `localStorage.getItem()` per l'archiviazione persistente - **Pratica** l'aggiunta e la rimozione dinamica dei listener di eventi - **Esplora** gli elementi di dialogo HTML o i pattern modali CSS - **Considera** l'accessibilità quando disabiliti e abiliti i controlli del modulo ## Quiz post-lezione [Quiz post-lezione](https://ff-quizzes.netlify.app/web/quiz/22) ## Revisione e studio autonomo Approfondisci [tutti gli eventi disponibili](https://developer.mozilla.org/docs/Web/Events) per gli sviluppatori tramite il browser web e considera gli scenari in cui utilizzeresti ciascuno di essi. ## Compito [Crea un nuovo gioco di digitazione](assignment.md) --- **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.