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

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

Referenze

<div>Crea contenitori generici o sezioni in una pagina
typeSpecifica la tipologia/funzione di un elemento.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<html>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

copia da paragrafo

HTML, CSS altre cose

Esercizi 05/03/2024 es9

Class Gradebook

NeonPulse | Agency WebMarketing, A

copia di html typing

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>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.
*/