JavaScript toUpperCase

JavaScript toUpperCase alcuni esempi d’uso – In questo articolo parleremo dei metodi toUpperCase e toLowerCase, utili per trasformare il testo in maiuscolo oppure in minuscolo.

Inoltre vedremo alcuni esempi che utilizzano anche le istruzioni condizionali.

JavaScript toUpperCase – primo esempio

Controlliamo se una stringa è scritta in maiuscolo oppure no.

Innanzitutto inizializziamo la variabile stringa ad un valore iniziale, ad esempio io ho assegnato il valore coding creativo.

Quindi controlliamo se questa stringa corrisponde alla stessa stringa scritta in maiuscolo. Se questa condizione è vera allora scriviamo la frase ‘la stringa è in maiuscolo‘, altrimenti la trasformeremo in maiuscolo e visualizzeremo la stringa così trasformata.

Di seguito ecco dunque il semplice esempio che utilizza l’istruzione condizionale if else e il metodo toUpperCase.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi di istruzioni condizionali</title>
  </head>
  <body>
    <h1>Esempio di istruzioni condizionali</h1>
    
    <script type="text/javascript">
    var stringa='Coding Creativo';
    if (stringa==stringa.toUpperCase()){
      document.write('La stringa è già scritta in maiuscolo' + coding);
    }
    else {
      stringa=stringa.toUpperCase();
      document.write('La stringa trasformata è: ' + stringa);
    }
    </script>

  </body>
</html>

JavaScript toLowerCase esempio

Trasformiamo una stringa in minuscolo, ripetiamo cioè lo stesso esempio di prima, utilizzando però il metodo toLowerCase.

Ecco dunque le modifiche da apportare all’esempio prima proposto:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi di istruzioni condizionali</title>
  </head>
  <body>
    <h1>Esempio di istruzioni condizionali</h1>

    <script type="text/javascript">
    var stringa='CODing';
    if (stringa==stringa.toLowerCase()){
      document.write('La stringa è già scritta in maiuscolo' + coding);
    }
    else {
      stringa=stringa.toLowerCase();
      document.write('La stringa trasformata è: ' + stringa);
    }
    </script>

  </body>
</html>

JavaScript toUpperCase e getElementById – esempio

Inseriamo un valore attraverso un campo di input e, dopo aver cliccato su ok, trasformiamo questo valore in maiuscolo.

In questo esempio, oltre al metodo toUpperCase, utilizzeremo anche il metodo getElementById che abbiamo spiegato in questo tutorial: metodo getElementById.

Ricordiamo quindi che questo metodo restituisce l’elemento che ha l’id uguale a quello specificato tra parentesi tonde.

Al click sul pulsante ok, richiamiamo la funzione trasforma() in JavaScript.

Ecco dunque il codice completo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio con il metodo toUpperCase e getElementById</title>
  </head>
  <body>
    <h1>Esempio con il metodo toUpperCase e getElementById</h1>
    <label>Inserisci il nome: </label><input type="text" id="nome">
    <input type="button" id="ok" value="ok" onclick="trasforma()">
    <p id="risultato"></p>
    
        <script type="text/javascript">
        function trasforma() {
          var nome = document.getElementById("nome").value;
          nome=nome.toUpperCase();
          document.getElementById("risultato").innerHTML ="Il nome inserito è: " + nome;
        };
        </script>

  </body>
</html>

In questa lezione abbiamo utilizzato i semplici metodi, toUpperCase e toLowerCase, per trasformare il testo in maiuscolo ed in minuscolo. Più avanti vedremo altri esempi, in particolare vedremo come trasformare ad esempio solo la prima lettera in maiuscolo e tutto il resto in minuscolo.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Come utilizzare JavaScript confirm

Utilizzare JavaScript prompt

Variabili e costanti in JavaScript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *