Testare i colori esadecimali con Javascript

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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>

#colore
{
    text-align: Center;
    width: 300px;
    height: 300px;
    border: Solid 1px #000000;
}

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();
    }
}