Testare i colori esadecimali con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Quando costruiamo un sito spesso e volentieri ci capita di scontrarci con i colori nella scelta di quello più adatto per un logo, per un meno, per lo sfondo o per altri elementi caratteristici del layout.

Lo strumento che andiamo a realizzare è forse di dubbia utilità per i nostri utenti ma deve diventare un nostro fedele compagno di viaggio durante il nostro percorso di sviluppatori Web. Il suo scopo è quello di visualizzare in un box il colore dato dal codice esadecimale che andiamo ad inserire nella casella di testo di un modulo HTML.

Costruiamo il modulo HTML ed il box:

<form name="modulo">
    <b>#</b> <input type="text" name="codice" value="FFFFFF" maxlength="6">
    <input type="button" value="Test colore" onClick="Colore()">
</form>

<div id="colore"> </div>
Al click sul bottone etichettato Test colore richiamiamo la funzione Colore() che analizzeremo a breve. Al div HTML assegnamo l'ID colore.

Prima di procedere con lo script vero e proprio stilizziamo un minimo il box inserendo il seguente codice in un blocco CSS:
#colore
{
    text-align: Center;
    width: 300px;
    height: 300px;
    border: Solid 1px #000000;
}
Di seguito il codice completo della funzione Colore()
function Colore()
{
    try
    {
        var codice = document.modulo.codice.value;
        if (codice.length < 6)
        {
            alert("Inserire un minimo di 6 caratteri!");
            document.modulo.codice.value = "";
            document.modulo.codice.focus();
        }
        else
        {
            colore.style.backgroundColor = "#" + codice;
        }
    }
    catch (e)
    {
        alert("Attenzione: hai utilizzato un codice esadecimale non valido!");
        document.modulo.codice.value = "";
        document.modulo.codice.focus();
    }
}
Il procedimento è semplice: utilizzo un costrutto try - catch per evitare che lo script vada in errore se inserisco caratteri, simboli o lettere che non fanno parte della sintassi dei codici esadecimali; recupero il valore della casella di testo, controllo se è stata compilata correttamente ed in caso affermativo assegno al box HTML il colore di sfondo scritto nella casella di testo.

Spero vi torni utile!

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD