16 – 17 IF ELSE (strutture selettive) con stringhe
Nell’esempio precedente, abbiamo trasformato in maiuscolo il campo cognome se abbandonato (col mouse o col tab) tramite la funzione blur. Viene da sé che non posso decidere come visualizzare il cognome in base a diverse conseguenze nello script così com’è strutturato, ma avrò sempre il cognome in maiuscolo. Se per esempio volessi far formattare il cognome come il nome (aggiungiamo il campo nome), e quindi se fosse scritto il nome tutto in maiuscolo o con solo l’iniziale maiuscola o tutto in minuscolo …
| Nome | |
| Cognome | |
| Età |
var nome = $('#nome').val();
var cognome = $('#cognome').val();
Per semplificare ho inserito i valori dei campi nome e cognome nelle rispettive variabili omonime.
Ora dobbiamo verificare se il nome è stato inserito tutto in maiuscolo es MARIO. Dobbiamo utilizzare l’istruzione condizionale if che esegue delle istruzioni in seguito ad una valutazione, secondo questa sintassi:
if ( //espressione )
{
//istruzione
}
l’espressione nelle tonde, valutata dal’ if, restituisce o TRUE o FALSE, se true esegue l’istruzione/i delimitate dalle graffe, altrimenti va oltre con l’istruzione else :
if ( //espressione )
{
//istruzione
}
else
{
// istruzione se false
}
Vediamo alcuni esempi di espressioni da valutare, iniziamo con numeri :
if ( 3 < 5 ) { 3 minore di 5; }
eseguo il codice se 3 è minore di 5
ora con calcoli
var totale = (43-8) * (23/2);
if ( totale>1000 ) { totale è maggiore di 1000; }
if ( totale===1000 ) { totale è identico di 1000; }
oppure con le stringhe
if ( nome!="admin" ) { nome è diverso da admin; }
o con gli array
if ( nome[0]==='C' ) { la lettera all'indice 0 dell'array nome è C; }
adesso costruisco una funzione isUpperCaseString da far valutare all’if
function isUpperCaseString(stringa) {
if ( stringa === stringa.toUpperCase() )
{ return true; }
else
{ return false; }
Le funzioni vengono inizializzate come le variabili o le costanti, con l’aggiunta dopo il nome delle parentesi tonde. In queste parentesi tonde posso inserire degli argomenti, nel nostro caso di tipo stringa che sarà un parametro in ingresso .
Il confronto è: se il valore che arriva dall’esterno memorizzato nell’argomento stringa, confrontato con se stesso trasformato in maiuscolo, tramite la funzione predefinita js toUpperCase è vero , eseguo il blocco di codice nelle prime graffe. Troviamo il return che è il comando js che restituisce un valore, in questo caso vero (true).
altrimenti (else) restituisco (return) falso.
Vado adesso a richiamare la nostra funzione isUpperCaseString all’interno di una nuova funzione che creo: forza_stesso_formato:
if ( isUpperCaseString(nome) )
{
$('#cognome').val( cognome.toUpperCase() );
}
Inserisco anche la dichiarazione precedente delle variabili nome e cognome dentro la funzione ed ottengo:
function forza_stesso_formato()
{
var nome = $('#nome').val();
var cognome = $('#cognome').val();
if ( isUpperCaseString(nome) )
{
$('#cognome').val( cognome.toUpperCase() );
}
}
Se il nome inserito è già in maiuscolo il nostro codice non lo toccherà, altrimenti lo trasforma in maiuscolo.
Ricordarsi di inserire la funzione anonima (come già visto) che attende il caricamento del DOM e lancia col metodo blur la funzione forza_stesso_formato
$(function ()
{
//se siamo qui ==> DOM completato!
$("#cognome").blur( forza_stesso_formato );
}
)
Vogliamo adesso trasformare il cognome uguale al nome anche se l’iniziale del nome è maiuscola, creo la funzione isUpperCaseChar (questa è solo una strada, ma ce ne possono essere altre) che andrò poi ad inserire nella parte else della funzione forza_stesso_formato con la seguente sintassi
if ( isUpperCaseChar(nome[0])) // Mario xxxx -> Mario Xxxx
Ecco la funzione isUpperCaseChar che creo
function isUpperCaseChar(carattere)
{
if ( String(carattere) === String(carattere).toUpperCase() )
{return true;}
else
{return false;}
}
Non essendoci una funzione toUpperCase per i singoli caratteri, ma solo per le stringhe, ho deciso di trasformare il singolo carattere in una stringa, usando il costruttore della classe String (che accetta anche un singolo carattere e lo trasforma in stringa, ma ne riparleremo in dettaglio più avanti nel corso). Quindi se il nome passato dalla casella nome del form fosse “spippolo”, la funzione eseguirebbe questa operazione:
if ( isUpperCaseChar(nome[0])) // Spippolo seleziono l'indice 0 -> s
passo il carattere a isUpperCaseChar
String(carattere) === String(carattere).toUpperCase() "s" === "s".toUpperCase() //false "S" === "s".toUpperCase() //true
Ora dobbiamo inserire nella funzione forza_stesso_formato un else (eseguito se il nome non viene scritto tutto in maiuscolo) che lancerà un controllo sulla prima lettera maiuscola del nome tramite isUpperCaseChar. All’interno trasformo la prima lettera in maiuscolo e la memorizzo in una variabile primaLettera.
var primaLettera = String(cognome[0]).toUpperCase(); //S
in un’altra variabile inserisco il resto del cognome con la funzione substring che prende quella parte di stringa che inizia dalla posizione che specifico
var restoCognome = cognome.substring(1); //pippolo
substring accetta 2 parametri la posizione iniziale e quella finale. Nel nostro caso la iniziale è 1, perché la zero è per la prima lettera e quella finale non conoscendola la ometto e automaticamente prenderà substring tutto il resto.
Ora devo concatenare le 2 variabili stringa per inserire il cognome con la prima lettera in maiuscolo. Il concatenamento può essere fatto con l’operatore più (+) .
$('#cognome').val(primaLettera + restoCognome);
c’è ancora da fare un correzione: se il nome inserito viene messo come SpiPpoLo la restituzione del cognome sarà XxxXxxXx . Usiamo allora la funzione toLowerCase su restoCognome per trasformare tutto in minuscolo.
$('#cognome').val(primaLettera + restoCognome.toLowerCase() );
Le funzioni sulle stringhe sono moltissime, per un elenco completo dei metodi per le stringhe fate riferimento ad una buona guida su Mozilla developer.
Infine l’ultimo caso è se sono il nome viene scritto in minuscolo creiamo analogamente la funzione isLowerCaseString
function isLowerCaseString(stringa) {
if ( stringa === stringa.toLowerCase() )
{return true;}
else
{return false;}
}
Inserirò il controllo isLoweCaseString nella funzione forza_stesso_formato in un else dopo l’if di isUpperCaseChar. Ecco tutta la funzione completa forza_stesso_formato
function forza_stesso_formato()
{
//trasforma cognome in base al nome
// - MARIO Rossi/ROSSI -> MARIO ROSSI
// - Mario rossi/ROSSI -> Mario Rossi
// - mario Rossi/ROSSI/rossi -> Mario Rossi
var nome = $("#nome").val();
var cognome = $("#cognome").val();
if ( isUpperCaseString(nome) )
{
$("#cognome").val( cognome.toUpperCase() );
}
else {
if (isUpperCaseChar(nome[0])) // Mario xxxx -> Mario Xxxx
{
var primaLettera = String(cognome[0]).toUpperCase();
var restoCognome = cognome.substring(1);
$('#cognome').val(primaLettera + restoCognome.toLowerCase());
}
else {
if (isLowerCaseString(nome)) {
$('#cognome').val(cognome.toLowerCase());
}
}
}
}
Quando il codice ha diversi if/else staccati viene detto in cascata, quando invece dentro ad un if/else sono contenute altre strutture if/else (come in questo caso) si parla di struttura annidata