Lezione 4: Giocare con il Testo 📝

📚 Benvenuto nella Lezione 4!

Bentornato Text Master! 📝 Hai imparato numeri e variabili. Ora è il momento di lavorare con il TESTO!

Quasi ogni applicazione gestisce testo: nomi utenti, email, messaggi, post social, commenti... Le stringhe (testo) sono fondamentali!

In questa lezione imparerai a manipolare le stringhe come un professionista e costruirai un generatore di biglietti personalizzati! 🎫

🎯 Cosa Imparerai

✅ Concatenare stringhe in 3 modi diversi
✅ Usare template literals con ${}
✅ Metodi delle stringhe (toUpperCase, toLowerCase, trim...)
✅ Cercare testo con indexOf() e includes()
✅ Validare input utente (email, nomi)
✅ Progetto completo: Generatore biglietti eventi

🎮 Perché le Stringhe Sono Importanti?

Le stringhe sono usate in:

📧 Form: Nome, email, password, messaggi
💬 Chat: Messaggi tra utenti, emoji
🔍 Ricerca: Cercare prodotti, filtrare risultati
📝 Editor: Formattare testo, contare parole
🎫 Ticketing: Generare biglietti, conferme email

👀 Demo Interattiva: Trasformatore di Testo

Scrivi qualcosa e vedi tutte le trasformazioni possibili! ✨

📏

Lunghezza

-

🔼

MAIUSCOLO

-

🔽

minuscolo

-

➡️

Primo Carattere

-

⬅️

Ultimo Carattere

-

🔄

Al Contrario

-

🤔 Come Funziona?

Il codice usa questi metodi:

text.length → Conta i caratteri
text.toUpperCase() → Converte in MAIUSCOLO
text.toLowerCase() → Converte in minuscolo
text.charAt(0) → Prende il primo carattere
text.charAt(text.length - 1) → Prende l'ultimo
text.split('').reverse().join('') → Inverte la stringa

➕ Concatenare Stringhe: 3 Modi

Concatenare significa "unire" stringhe. Ci sono 3 modi in JavaScript:

1. Operatore + (Il Vecchio Modo)

JavaScript

const nome = "Mario";
const saluto = "Ciao " + nome + "! Come stai?";

console.log(saluto); // "Ciao Mario! Come stai?"

⚠️ Problema: Con l'operatore + è facile dimenticare gli spazi e il codice diventa poco leggibile!

2. Template Literals (Il Modo Moderno) ⭐

JavaScript

const nome = "Mario";
const età = 25;

// Usa backtick ` e ${variabile}
const messaggio = `Ciao ${nome}! Hai ${età} anni.`;

console.log(messaggio); // "Ciao Mario! Hai 25 anni."

✅ Vantaggi Template Literals:

Più leggibile e facile da scrivere
Puoi inserire espressioni: `Il totale è ${10 + 5}€`
Supporta stringhe multi-linea
È lo standard moderno!

3. concat() (Poco Usato)

JavaScript

const nome = "Mario";
const saluto = "Ciao ".concat(nome, "!");

console.log(saluto); // "Ciao Mario!"

📌 Consiglio: Usa SEMPRE i template literals (backtick `) per concatenare. Sono più moderni e leggibili!

✍️ Prova Tu: Template Literals

Compila i campi e genera una frase con template literal!

Nome:

Età:

Città:

🎨 Template Literals in Dettaglio

I template literals usano il carattere backtick ` (tasto sopra il TAB) e permettono di inserire variabili con ${}

Caratteristiche Potenti

1️⃣ Inserire Variabili

const nome = "Anna";
console.log(`Ciao ${nome}!`);

2️⃣ Espressioni JavaScript

const a = 10, b = 5;
console.log(`${a} + ${b} = ${a + b}`);

3️⃣ Stringhe Multi-linea

const msg = `Questa è
una stringa
su più righe!`;

4️⃣ Chiamare Funzioni

function getAge() { return 25; }
console.log(`Età: ${getAge()}`);

🛠️ Metodi delle Stringhe

JavaScript offre tantissimi metodi per manipolare le stringhe. Ecco i più importanti:

Metodo	Cosa Fa	Esempio	Risultato
`toUpperCase()`	Converte tutto in MAIUSCOLO	`"ciao".toUpperCase()`	`"CIAO"`
`toLowerCase()`	Converte tutto in minuscolo	`"CIAO".toLowerCase()`	`"ciao"`
`trim()`	Rimuove spazi all'inizio e alla fine	`" ciao ".trim()`	`"ciao"`
`slice(start, end)`	Estrae una parte della stringa	`"JavaScript".slice(0, 4)`	`"Java"`
`indexOf(text)`	Trova la posizione di un testo	`"ciao".indexOf("a")`	`2`
`includes(text)`	Verifica se contiene un testo	`"ciao".includes("ia")`	`true`
`replace(old, new)`	Sostituisce un testo	`"ciao".replace("a", "e")`	`"cieo"`
`split(separator)`	Divide la stringa in array	`"a,b,c".split(",")`	`["a","b","c"]`
`repeat(n)`	Ripete la stringa n volte	`"Ha".repeat(3)`	`"HaHaHa"`

💡 Nota Importante

I metodi delle stringhe NON modificano la stringa originale, ma restituiscono una nuova stringa!

let testo = "ciao";
testo.toUpperCase(); // Restituisce "CIAO"
console.log(testo);  // Stampa ancora "ciao"

// Per salvare il risultato:
let testoMaiuscolo = testo.toUpperCase();
console.log(testoMaiuscolo); // "CIAO"

✍️ Esercizio Guidato: Validatore Email

Crea una funzione che controlla se un'email è valida (deve contenere @ e .)

📋 Cosa Devi Fare

Seleziona l'input email, il bottone e il div del risultato
Aggiungi un evento click al bottone
Prendi il valore dall'input e usa trim()
Controlla se contiene @ e . usando includes()
Mostra "✅ Email valida" o "❌ Email non valida"

📝 Struttura HTML da Usare

Ecco gli elementi HTML con cui lavorerai:

HTML - Elementi del Validatore

<!-- Input email -->
<input id="emailInput" type="text" placeholder="tua@email.com">

<!-- Bottone verifica -->
<button id="btnCheckEmail">Controlla Email</button>

<!-- Risultato -->
<div id="emailResult"></div>

📌 IDs da Usare:

#emailInput → Input dove l'utente scrive l'email
#btnCheckEmail → Bottone per verificare
#emailResult → Dove mostrare il risultato

💡 Ricorda: Usa includes('@') e includes('.') per controllare!

👁️ Anteprima

const emailInput = document.querySelector('#emailInput');
const btnCheck = document.querySelector('#btnCheckEmail');
const result = document.querySelector('#emailResult');

btnCheck.addEventListener('click', function() {
    const email = emailInput.value.trim();
    // Controlla qui...
});

if (email.includes('@') && email.includes('.')) {
    result.textContent = '✅ Email valida!';
    result.style.color = 'green';
} else {
    result.textContent = '❌ Email non valida';
    result.style.color = 'red';
}

// Scrivi qui il tuo codice!

// 1. Seleziona gli elementi


// 2. Aggiungi evento click al bottone


// 3. Dentro l'evento, valida l'email

🎮 Progetto Finale: Generatore Biglietti Personalizzati

È il momento del progetto vero! 🎫

Creerai un sistema completo per generare biglietti per eventi con:

✅ Input nome, tipo biglietto, data evento
✅ Validazione campi vuoti
✅ Nome formattato in MAIUSCOLO automatico
✅ Numero biglietto casuale generato
✅ Data formattata in italiano
✅ 3 tipi di biglietto con colori diversi
✅ Contatore caratteri nome (max 30)

🎯 Obiettivi del Progetto

✅ Form con 3 campi: nome, tipo, data
✅ Valida che i campi non siano vuoti
✅ Usa template literals per creare il biglietto
✅ toUpperCase() per formattare il nome
✅ Math.random() per numero biglietto
✅ Mostra biglietto stilizzato con colori diversi

📝 Riferimento Elementi HTML

Prima di iniziare, ecco tutti gli ID che userai:

HTML - Mappa degli Elementi

<!-- Form Input -->
<input id="ticketName" type="text" placeholder="Nome Partecipante">
<select id="ticketType">
    <option value="standard">Standard</option>
    <option value="vip">VIP</option>
    <option value="premium">Premium</option>
</select>
<input id="ticketDate" type="date">

<!-- Bottoni -->
<button id="btnGenerate">Genera Biglietto</button>
<button id="btnReset">Reset</button>

<!-- Output -->
<div id="charCounter">0/30</div>
<div id="ticketPreview"></div>

📌 Guida Rapida IDs:

Input:

#ticketName → Nome
#ticketType → Tipo (select)
#ticketDate → Data

Controlli:

#btnGenerate → Genera
#btnReset → Reset
#charCounter → Counter
#ticketPreview → Anteprima

🎫 Il Progetto Live

Nome Partecipante:

0/30 caratteri

Tipo Biglietto:

Data Evento:

💻 Suggerimenti per il Codice

// Numero casuale a 6 cifre (da 100000 a 999999)
const numeroBiglietto = Math.floor(Math.random() * 900000) + 100000;

const nomeFormattato = nome.toUpperCase();
const numero = Math.floor(Math.random() * 900000) + 100000;

const bigliettoHTML = `
    <div class="generated-ticket ${tipo}">
        <div class="ticket-title">🎫 BIGLIETTO ${tipo.toUpperCase()}</div>
        <div class="ticket-details">
            <div class="ticket-details-row">
                <span class="ticket-label">Nome:</span>
                <span class="ticket-value">${nomeFormattato}</span>
            </div>
            <div class="ticket-details-row">
                <span class="ticket-label">Data:</span>
                <span class="ticket-value">${data}</span>
            </div>
            <div class="ticket-details-row">
                <span class="ticket-label">N° Ticket:</span>
                <span class="ticket-value">#${numero}</span>
            </div>
        </div>
    </div>
`;

ticketPreview.innerHTML = bigliettoHTML;

💾 Esercizi Pratici da Scaricare

Pronto a padroneggiare le stringhe? Ho preparato 3 esercizi progressivi per praticare template literals, metodi stringhe e validazione!

HTML e CSS pronti - tu completi solo il JavaScript! 🚀

📦

Scarica Tutti gli Esercizi

3 esercizi: trasformatore, validatore, generatore username

📥 Scarica ZIP

Pratica template literals, toUpperCase(), trim() e slice()!

01

⭐⭐ Medio ⏱️ 15-20 min

🔤 Trasformatore Maiuscole/Minuscole

Trasforma il testo in MAIUSCOLO o minuscolo. Impara toUpperCase(), toLowerCase() e .length.

✅ toUpperCase() ✅ toLowerCase() ✅ .length

02

⭐⭐ Medio ⏱️ 20-25 min

✅ Validatore Nome

Valida che un nome sia corretto: minimo 3 caratteri, senza numeri. Usa trim() e includes().

✅ trim() ✅ includes() ✅ Validazione 🌟 Bonus: Altre regole

03

⭐⭐⭐ Difficile ⏱️ 25-30 min

🎮 Generatore Username

Crea username automatici! Usa slice() per estrarre lettere, template literals e Math.random().

✅ slice() ✅ Template literals ✅ Math.random() 🌟 Bonus: Replace

📦 Cosa Include

🎨

Template Literals

Backtick ` e ${}

🔤

Metodi Stringhe

toUpperCase, toLowerCase, trim

✂️

slice() & substring()

Estrarre parti di testo

🔍

includes() & indexOf()

Cercare dentro stringhe

🚀 Pronto per le Stringhe?

Scarica e diventa un Text Master!

📥 Scarica Esercizi

🎯 Conclusione: Sei un Text Master!

✅ Recap: Cosa Hai Imparato

✅ Concatenare con +, template literals, concat()
✅ Template literals con ${} per inserire variabili
✅ Metodi: toUpperCase, toLowerCase, trim, slice
✅ Cercare con includes() e indexOf()
✅ Validare input utente (email)
✅ Generatore biglietti personalizzati completo!

🚀 Challenge: Vai Oltre!

Migliora il generatore aggiungendo:

📧 Email: Aggiungi campo email e validala
🎨 Colori: Colori diversi per ogni tipo biglietto
💾 Salva: Array per salvare tutti i biglietti generati
📱 QR Code: Genera un codice QR (usa una libreria)
📄 PDF: Scarica il biglietto come PDF

📚 Prossima Lezione

Nella Lezione 5 imparerai le Condizioni! If, else, else if, switch... Farai decisioni intelligenti nel codice! 🤔

💾 Novità: Esercizi Pratici Scaricabili!

📚 Benvenuto nella Lezione 4!

🎯 Cosa Imparerai

🎮 Perché le Stringhe Sono Importanti?

👀 Demo Interattiva: Trasformatore di Testo

🤔 Come Funziona?

➕ Concatenare Stringhe: 3 Modi

1. Operatore + (Il Vecchio Modo)

2. Template Literals (Il Modo Moderno) ⭐

3. concat() (Poco Usato)

✍️ Prova Tu: Template Literals

🎨 Template Literals in Dettaglio

Caratteristiche Potenti

1️⃣ Inserire Variabili

2️⃣ Espressioni JavaScript

3️⃣ Stringhe Multi-linea

4️⃣ Chiamare Funzioni

🛠️ Metodi delle Stringhe

💡 Nota Importante

✍️ Esercizio Guidato: Validatore Email

📋 Cosa Devi Fare

📝 Struttura HTML da Usare

👁️ Anteprima

🎮 Progetto Finale: Generatore Biglietti Personalizzati

🎯 Obiettivi del Progetto

📝 Riferimento Elementi HTML

🎫 Il Progetto Live

💻 Suggerimenti per il Codice

💾 Esercizi Pratici da Scaricare

Scarica Tutti gli Esercizi

🔤 Trasformatore Maiuscole/Minuscole

✅ Validatore Nome

🎮 Generatore Username

📦 Cosa Include

🚀 Pronto per le Stringhe?

🎯 Conclusione: Sei un Text Master!

✅ Recap: Cosa Hai Imparato

🚀 Challenge: Vai Oltre!

📚 Prossima Lezione