JavaScript toUpperCase

JavaScript toUpperCase è un metodo utile quando vogliamo trasformare del testo tutto in maiuscolo.

toUpperCase può essere applicato ad una stringa ed ha la seguente sintassi:

stringa.toUpperCase();

In questo breve tutorial faremo degli esempi d’utilizzo di questo metodo al fine di imparare ad utilizzarlo correttamente.

JavaScript toUpperCase – primo esempio

Controlliamo se una stringa è scritta in maiuscolo oppure no.

Innanzitutto inizializziamo una variabile stringa. Ad esempio io ho assegnato il valore coding creativo.

Quindi verifichiamo la condizione: la stringa corrisponde alla stessa stringa scritta in maiuscolo? Se questa condizione è vera allora scriviamo la frase ‘la stringa è già scritta in maiuscolo‘, altrimenti la trasformiamo in maiuscolo e visualizziamo la stringa così trasformata.

Di seguito ecco dunque un esempio di utilizzo dell’istruzione condizionale if else ed il metodo toUpperCase di 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);
}

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 di JavaScript, 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 html:

<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>

Ed il codice JavaScript:

function trasforma() {
   var nome = document.getElementById("nome").value;
   nome = nome.toUpperCase();
   document.getElementById("risultato")
    .innerHTML = "Il nome inserito è: " + nome;
}

Conclusione

In questa lezione abbiamo utilizzato il semplice metodo, toUpperCase di JavaScript, per trasformare il testo in maiuscolo. Più avanti affronteremo tanti altri esempi ed 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