Testare i colori esadecimali al volo con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Un modulo, un semplice foglio di stile, uno script di poche righe e con un po di fantasia, possiamo testare i codici dei colori esadecimali che ci passano per la mente! Non sono un esperto della materia, so solo (e tanto mi basta) che non tutti i caratteri sono adatti alla generazione di un codice esadecimale valido, il quale deve essere composto di almeno 6 caratteri più un cancelletto (#) iniziale.

Passiamo in rassegna rispettivamente i codici del modulo Html, del box che mostrerà il colore (come colore di sfondo del box stesso) e dello script per dinamizzare l'applicazione:

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

<div id="box">&nbsp;</div>
Un semplice foglio di stile...
#box
{
    text-align: Center;
    width: 300px;
    height: 300px;
    border: Solid 1px #000000;
}
Lo script commentato:
function Colore()
{
    // CONTROLLO CHE L'IMMISSIONE DI UN CARATTERE NON VALIDO NON GENERI ERRORE
    try
    {
        var colore = document.modulo.colore.value;
       // CONTROLLO CHE IL VALORE IMMESSO CONTENGE ALMENO 6 CARATTERI
        if (colore.length < 6)
        {
            alert("Inserire un minimo di 6 caratteri");
            document.modulo.colore.value = "";
            document.modulo.colore.focus();
        }
        else
        {
            // COLORO LO SFONDO DEL BOX PER FORNIRE IL RISULTATO FINALE
            box.style.backgroundColor = "#" + colore;
        }
    }
    // GESTISCO L'EVENTUALE ERRORE
    catch (e)
    {
        alert("Attenzione! Hai utilizzato un carattere non valido!");
        document.modulo.colore.value = "";
        document.modulo.colore.focus();
    }
}

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