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

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

Referenze

<label>Mostrare un testo di etichetta per un elemento di input.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<tfoot>Definisce il footer o sezione inferiore di una tabella.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Cambia colore testo JS

Loading Animation

UFFICIALE SITO REGIONI

Esercizio fatto benissimo

Programma per la salute

pagina_personale

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>Ricerca di una Lettera in una Frase</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-6">
      <h1 class="text-center mb-4">Ricerca di una Lettera in una Frase</h1>
      <p class="text-center">Inserisci una frase e una lettera da cercare nei campi sottostanti e premi il pulsante "Cerca Lettera" per visualizzare quante volte la lettera è presente nella frase.</p>
      <form id="ricercaLetteraForm" class="mb-3">
        <div class="form-group">
          <label for="frase" class="mr-2">Frase:</label>
          <input type="text" class="form-control" id="frase" name="frase">
        </div>
        <div class="form-group">
          <label for="lettera" class="mr-2">Lettera:</label>
          <input type="text" class="form-control" id="lettera" name="lettera" maxlength="1">
        </div>
        <button type="submit" class="btn btn-primary">Cerca Lettera</button>
      </form>
      <div id="risultatoRicercaLettera" class="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
  $("#ricercaLetteraForm").submit(function(event) {
    // Previeni il comportamento predefinito del modulo (invio)
    event.preventDefault();

    // Ottieni la frase inserita dall'utente
    let frase = $("#frase").val();
    // Ottieni la lettera inserita dall'utente e convertila in minuscolo per rendere la ricerca case-insensitive
    let lettera = $("#lettera").val().toLowerCase();

    // Conta quante volte la lettera è presente nella frase
    let numeroOccorrenze = contaOccorrenze(frase, lettera);

    // Visualizza il risultato nella pagina
    let risultatoDiv = $("#risultatoRicercaLettera");
    risultatoDiv.text("La lettera '" + lettera + "' è presente nella frase " + numeroOccorrenze + " volte.");
  });
});

// Funzione per contare quante volte una lettera è presente in una frase
function contaOccorrenze(frase, lettera) {
  // Trasforma la frase e la lettera in minuscolo per rendere la ricerca case-insensitive
  frase = frase.toLowerCase();
  // Utilizza un'espressione regolare per trovare tutte le occorrenze della lettera nella frase
  let occorrenze = frase.match(new RegExp(lettera, "g"));
  console.log(occorrenze.length);

  let occorrenze1 = frase.match(lettera);
  console.log(occorrenze1.length);
  // se invece dell'espressione regolare inseriamo solo la variabile trovera solo la prima occorrenza
  
  // Ritorna il numero di occorrenze trovate
  return occorrenze ? occorrenze.length : 0;
}


//***********************************
// new RegExp()  -Espressione regolare
//***********************************
// In JavaScript, la funzione new RegExp() viene utilizzata per creare un oggetto espressione regolare in base a una stringa. Questa stringa può essere generata dinamicamente a runtime, rendendo l'espressione regolare stessa dinamica.

// Nel nostro caso, stiamo creando un'espressione regolare per trovare tutte le occorrenze di una particolare lettera (lettera) all'interno della frase. L'argomento della funzione new RegExp() è una stringa che rappresenta il pattern della nostra espressione regolare.

// La sintassi generale è new RegExp(pattern, flags), dove:

// pattern è il pattern dell'espressione regolare che stiamo cercando. In questo caso, usiamo la variabile lettera come pattern, il che significa che l'espressione regolare cercherà la lettera specificata dall'utente.
// flags sono le opzioni per l'espressione regolare. Nel nostro caso, stiamo utilizzando il flag "g", che indica di cercare tutte le occorrenze del pattern nella stringa, non solo la prima occorrenza.
// Quindi, ad esempio, se lettera è "a", l'espressione regolare creata sarà equivalente a /a/g, che cercherà tutte le occorrenze della lettera "a" nella frase.

// Infine, frase.match(espressioneRegolare) verrà utilizzato per trovare tutte le corrispondenze della nostra espressione regolare nella stringa frase.