5/10/24 es. 8 - conta alfabeto by @sarazani - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

hreflangConsente di dichiarare la lingua del documento collegato.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
requiredRende obbligatorio un campo di input
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

CAPODANNO SENZA LUCI

Compito di merda numero 1

Il museo di Leonardo

ES01a\\index.html

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alfabeto</title>
    <!-- Collegamento a Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Conta le lettere dell'alfabeto nella frase</h1>
        <!--qui il form che richiamo nel javascript con moduloVocali-->
        <form id="formAlfabeto">
            <div class="form-group">
                <label for="inputStringa">Inserisci una frase:</label>
                <!--qui sotto ho l'inputStringa che richiamo poi come valore della costante stringaInserita-->
                <input type="text" class="form-control" id="inputStringa" name="inputStringa" placeholder="Scrivi qui la tua frase">
            </div>
            <button type="submit" class="btn btn-primary">Conta</button>
        </form>
        <!--il risultato poi si ricollega al risultato di Javascritp e viene visualizzato qui-->
        <div id="risultato" class="mt-3"></div>
    </div>

    <!-- Collegamento a jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Collegamento a JavaScript personalizzato -->
    <script src="script.js"></script>
</body>
</html>

//Chiedi all'utente di inserire una frase in un form. Conta quante volte ogni lettera dell'alfabeto appare nella frase e visualizza il risultato in un formato tabellare

$(document).ready(function() {
  $('#formAlfabeto').submit(function(evento) {
    evento.preventDefault();

    //prendo quello che l'utente ha inserito e ottengo valore che metto minuscolo. definisco espressione regolare con tutte le lettere dell'alfabeto    
    const frase = $('#inputStringa').val().toLowerCase();
    const lettere = /[abcdefghijklmnopqrstuvwxyz]/g;
    //trovo corrispondenze tra l'espressione regolare e la frase
    let matcha = frase.match(lettere);
   
   //creo un oggetto che mi serve per contare tutte le lettere (per ora resta vuoto, lo riempio dopo)
   let conta = {};

    // matcha è un array che contiene tutte le corrispondenze trovate nella frase utilizzando l'espressione regolare lettere. La funzione forEach è un metodo degli array in JavaScript che ti permette di iterare su ciascun elemento dell'array.
    //struttura forEach = array.forEach(function(elemento){}
    //dico a JavaScript di eseguire una funzione per ogni elemento nell'array matcha. La funzione che stai passando come argomento a forEach è una funzione anonima, dichiarata direttamente all'interno delle parentesi tonde. Questa funzione accetta un parametro, che chiamiamo lettera, e questo rappresenta ciascun elemento dell'array durante l'iterazione. matcha.forEach(function(lettera) { sta dicendo: "Per ogni lettera trovata nell'array matcha, esegui il codice all'interno delle parentesi graffe." All'interno di quelle graffe, stai gestendo ogni singola lettera che è stata trovata, e il codice all'interno di quel blocco viene eseguito per ciascuna lettera nell'array.
    matcha.forEach(function(lettera) {
      //se la lettera è presente fa +1
      if (conta[lettera]) {
        conta[lettera]++;
      } else {
        //se è la prima volta che incontra la lettera la mette a 1, poi se la reincontra una seconda volta farà come sopra
        conta[lettera] = 1;
      }
    });
     
     //inzializzata stringa che mi serve per i risultati altrimenti senza questa mi salva solo una lettera alla volta e sovrascrive
     let stringaFinale ="";

    //Itera attraverso ogni chiave (lettera) nell'oggetto conta
     for (let lettera in conta) {
      //aggiunge una riga alla stringaFinale e così via
        stringaFinale = stringaFinale+`${lettera}: ${conta[lettera]} volt${conta[lettera] !== 1 ? 'e' : 'a'}<br>`;
      }

      $('#risultato').html(stringaFinale); 
  });
});