Esercizi 05/03/2024 es2 by @AurelianoDC - Codewith.it

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

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
classDefinisce una o più classi per elemento
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<strong>Definisce una parte del testo importante con formattazione in grassetto.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

Test Gaming HTML MEME

basicStructure 2

locandiera murgia

Esercio-selettori-di-relazione

Clona elementi JS

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>Conteggio Parole</title>
<!-- Collegamento a Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <h1 class="text-center mb-4">Conteggio Parole</h1>
      <p class="text-center">Inserisci una frase nel campo sottostante e premi il pulsante "Conta parole" per visualizzare quante parole contiene la frase.</p>
      <form id="conteggioParoleForm" class="form-inline mt-3">
        <div class="form-group">
          <label for="frase" class="mr-2">Frase:</label>
          <input type="text" class="form-control" id="frase" name="frase">
        </div>
        <button type="submit" class="btn btn-primary ml-2">Conta parole</button>
      </form>
      <div id="risultatoConteggioParole" class="mt-3 text-center"></div>
    </div>
  </div>
</div>

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

</body>
</html>

$(document).ready(function() {
  // Ascoltatore per l'evento submit sul modulo
  $("#conteggioParoleForm").submit(function(event) {
    // Previeni il comportamento predefinito del modulo (invio)
    event.preventDefault();

    // Ottieni la frase inserita dall'utente
    let frase = $("#frase").val();

    // Conta le parole nella frase
    let numeroParole = conteggioParole(frase);

    // Visualizza il risultato nella pagina
    let risultatoDiv = $("#risultatoConteggioParole");
    risultatoDiv.text("La frase contiene " + numeroParole + " parole.");
  });
});

// Funzione per contare le parole in una frase
function conteggioParole(frase) {
  // Rimuovi spazi vuoti all'inizio e alla fine della frase
  frase = frase.trim();
  // Conta le parole utilizzando uno spazio, l'apostrofo e una serie di caratteri di punteggiatura come separatori
  let parole = frase.split(/\s+|'|,|\.|;|!/);
  // Rimuovi eventuali elementi vuoti nell'array delle parole
  parole = parole.filter(parola => parola !== "");
  // Ritorna il numero di parole
  return parole.length;
}

/*Ecco cosa significa ciascuna parte dell'espressione regolare:

\s+: Questo pattern corrisponde a uno o più spazi vuoti. La \s corrisponde a qualsiasi carattere di spazio vuoto (come spazio, tabulazione, ritorno a capo, ecc.), e il + indica che ne vogliamo uno o più.
|: Questo è l'operatore di alternanza che serve ad indicare alternative. In questo contesto, significa che possiamo avere uno qualsiasi dei seguenti separatori.
' : Questo corrisponde all'apostrofo nella frase.
, : Questo corrisponde alla virgola.
\.: Questo corrisponde al punto. L'uso del backslash (\) prima del punto è necessario perché il punto ha un significato speciale in un'espressione regolare e deve essere "scappato" con un backslash per essere interpretato letteralmente.
;: Questo corrisponde al punto e virgola.
!: Questo corrisponde al punto esclamativo.
Quindi, la frase viene divisa in parole utilizzando uno qualsiasi di questi separatori. Ad esempio, se abbiamo una frase come "ciao, mondo!", verrà divisa in tre parole: "ciao", "mondo", e "" (lo spazio dopo lo vircola). 
La parte successiva del codice:
parole = parole.filter(parola => parola !== ""); -> é un arrow function
filtra eventuali parole vuote che possono essere generate da questa divisione, assicurandosi di contarle correttamente.
*/

/*
                parole = parole.filter(parola => parola !== "");
                
questa riga di codice utilizza una arrow function. Le arrow function sono un modo più conciso di definire funzioni anonime in JavaScript.

Ecco una spiegazione della sintassi e del funzionamento di una arrow function:

1. `parola => ...`: Questa parte definisce i parametri della funzione. Nel nostro caso, abbiamo un solo parametro, `parola`, che rappresenta ogni elemento dell'array `parole`.
2. `... => parola !== ""`: Questa parte definisce il corpo della funzione, ovvero ciò che la funzione deve fare. Nel nostro caso, stiamo controllando se `parola` non è uguale a una stringa vuota (`""`). Se `parola` non è una stringa vuota, la condizione restituirà `true`, altrimenti restituirà `false`.
3. `parole.filter(...)`: Questa è la funzione `filter()` degli array in JavaScript, che prende come argomento una funzione e restituisce un nuovo array contenente solo gli elementi per i quali la funzione passata restituisce `true`.

Quindi, in poche parole, la riga di codice `parole = parole.filter(parola => parola !== "");` filtra l'array `parole` eliminando tutti gli elementi vuoti (cioè le stringhe vuote `""`), assicurandosi che rimangano solo le parole effettive.

Se la volessimo scrivere con una funzione anonima diventerebbe:
                  parole = parole.filter(function(parola) {
                      return parola !== "";
                  });
    La funzione prende un parametro, parola, e restituisce true se la parola non è vuota e false altrimenti.
*/