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.

References

<h2>Titolo di intestazione di secondo livello
<q>Indica una parte di testo come citazione breve
<i>Formatta il testo in corsivo/italico non enfatizzato
classDefinisce una o più classi per elemento
<iframe>Crea un frame all'interno di una pagina HTML.
<h6>Titolo di intestazione di sesto livello

Users

Log in to search for users

Explore

Find inspiration

esercitazione 2 webdevel

esercizio:sito web

esercizio 3 esame

es da correggere

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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); 
  });
});