5/10/24 es. 9 - 3 bottoni by @sarazani - Codewith.it

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

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
idIdentifica univocamente un elemento HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
disabledImpedisce la modifica di un input
<body>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 3 - inverti stringa

LEZIONE 1 BOLLEAN

Tastiera digitale

pr - opening-info

Esempio Gestione del testo

Gallery Action Seven

copia di unfollow me

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>3 bottoni</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>Scegli cosa fare della tua frase</h1>
        <!--qui il form che richiamo nel javascript con moduloVocali-->
        <form id="formTrasformazione">
            <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" id="caso1">Tutto Maiuscolo</button>
            <button type="submit" class="btn btn-primary" id="caso2">Tutto Minuscolo</button>
            <button type="submit" class="btn btn-primary" id="caso3">Prima lettera maiuscola</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. Permetti all'utente di scegliere tra tre opzioni di conversione(3 bottoni): maiuscolo, minuscolo o prima lettera di ogni parola maiuscola. Applica la conversione scelta e visualizza il risultato.

$(document).ready(function() {
  //caso 1 -> mi collego direttamente all'id del bottone e non all'id del form. cambio quindi submit che è il submit del form al click del bottone
  $('#caso1').click(function(evento) {
    evento.preventDefault();
    //quello che prende dall'utente viene messo tutto in maiuscolo e subito messo nel risultato
    const frase = $('#inputStringa').val().toUpperCase();
    $('#risultato').text(frase);
  });
  
  //caso 2
  $('#caso2').click(function(evento) {
    evento.preventDefault();
    const frase = $('#inputStringa').val().toLowerCase();
    $('#risultato').text(frase);
  });

  //caso 3 -> non esiste una funzione tipo toUpperCase che fa in automatico? 
  $('#caso3').click(function(evento) {
    evento.preventDefault();
    
    //prendo la frase inserita dall'utente. creo altra variabile fraseNuova con una funzione. questa funzione maiuscolaPrima prende le prime lettere di ogni parola e le fa diventare maiuscole
    let frase = $('#inputStringa').val();
    let fraseNuova = maiuscolaPrima(frase);
    $('#risultato').text(fraseNuova);
 
    //frase.replace(/\b\w/g, function(char) { utilizza un'espressione regolare (regex) per individuare le prime lettere di ogni parola nella stringa frase e poi applica una funzione di callback (replace) per convertire ciascuna di queste lettere in maiuscolo. In particolare: \b indica bordo di parola e \w qualsiasi carattere alfanumerico -> \b\w corrisponde a ogni prima lettera di ogni parola
    // funzione maiuscolaPrima con parametro frase.
    function maiuscolaPrima(frase) {
      // metodo replace su frase con l'espressione regolare \b\w, che corrisponde alle prime lettere di ogni parola. La funzione di callback, cioè il replace, viene chiamata per ogni corrispondenza.
      //char rappresenta ogni carattere individuato dall'espressione regolare durante il processo di sostituzione
      return frase.replace(/\b\w/g, function(char) {
        // Per ogni carattere corrispondente, converte il carattere in maiuscolo utilizzando il metodo toUpperCase().
      return char.toUpperCase();
      });
    }
  });
});