In questo articolo voglio proporre l'utilità nell'utilizzo di JavaScript per la gestione del Document Object Model nello sviluppo di pagine web, senza dilungarmi sulla natura e spiegazione di cosa è e a cosa serve il D.O.M., letteralmente "modello a oggetti del documento", in quanto in rete si può trovare una infinità di informazioni molto complete ed esaustive al riguardo, come ad esempio qui.

Una delle tante situazioni in cui la gestione del D.O.M. può risultare utile è quella in cui ad esempio dobbiamo sviluppare una pagina web, in cui devono essere inserite mediante apposito form le informazioni anagrafiche di persone, tra le quali anche il codice fiscale, allora perché una volta inseriti cognome, nome, data di nascita, luogo di nascita e sesso, non facciamo calcolare il codice fiscale direttamente alla pagina?

Procediamo per passi, dando per scontato la conoscenza dell'algoritmo di calcolo del codice fiscale (facilmente reperibile in rete...), la sua conformazione può essere rappresentata dall'immagine seguente: 

Supponendo quindi di avere a disposizione tutti i codici dei comuni e delle nazioni che rientrano nell'algoritmo di calcolo del codice fiscale e sviluppata la sua funzione di calcolo (traduzione in JavaScript dell'algoritmo di calcolo del codice fiscale...), possiamo dedicarci alla creazione della pagina web in cui rientra la gestione del D.O.M. mediante JavaScript, oggetto di questo articolo.

Tralasciando il codice HTML, relativo all'inserimento sulla pagina degli oggetti di input per tutte le informazioni richieste (cognome, nome, data nascita... ecc.. ecc..), focalizziamo l'attenzione sul codice JavaScript che posizionerò alla fine della pagina:

<script>

    var edit_cognome = document.getElementById('cognome');
    var edit_nome = document.getElementById('nome');
    var edit_datan = document.getElementById('datanascita');
    var edit_datanappo = document.getElementById('datanascitaappo');
    var edit_luogon = document.getElementById('luogonascita');
    var edit_luogonappo = document.getElementById('luogonascitaappo');
    var edit_sesso = document.getElementById('sesso');
    var edit_sessoappo = document.getElementById('sessoappo');
    var edit_codfisc = document.getElementById('codfisc');

    if(nomeBrowser()=='IE'){
        function ctrlMGA(g,m,a) {
            if((g>=29)&&(m==2)&&(a>0)&&(bisestile(a)==false)){
                window.alert('Anno non bisestile! Febbraio puo avere al max 28 giorni.');
                return false;
            }else
                if(((g==30)||(g==31))&&(m==2)){
                    window.alert('Febbraio non puo avere 30 o 31 giorni.');
                    return false;
                }else
                    return true;
        };

        var ggedit_datan = document.getElementById('ggdatanascita');
        var gg=ggedit_datan.value;
        var mmedit_datan = document.getElementById('mmdatanascita');
        var mm=mmedit_datan.value;
        var aaedit_datan = document.getElementById('aadatanascita');
        var aa=aaedit_datan.value;

        ggedit_datan.addEventListener('blur', function() {
            if(this.value!=gg){
                gg=this.value;
                if((ggedit_datan.value!=0)&&(mmedit_datan.value!=0)&&(aaedit_datan.value!=0)){
                    if(ctrlMGA(ggedit_datan.value,mmedit_datan.value,aaedit_datan.value)==true){
                        d=aa.toString()+'-';
                        if(mm.length==1){
                            var m='0';
                            m+=mm;
                            mm=m;
                        }
                        d+=mm.toString()+'-';
                        if(gg.length==1){
                            var g='0';
                            g+=gg;
                            gg=g;
                        }
                        d+=gg.toString();
                        edit_datan.value=d;
                        if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                        &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                            edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
                        }
                    }else{
                        this.value=0;
                        gg=this.value;
                    }
                }
            }
        });

        mmedit_datan.addEventListener('blur', function() {
            if(this.value!=mm){
                mm=this.value;
                if((ggedit_datan.value!=0)&&(mmedit_datan.value!=0)&&(aaedit_datan.value!=0)){
                    if(ctrlMGA(ggedit_datan.value,mmedit_datan.value,aaedit_datan.value)==true){
                        d=aa.toString()+'-';
                        if(mm.length==1){
                            var m='0';
                            m+=mm;
                            mm=m;
                        }
                        d+=mm.toString()+'-';
                        if(gg.length==1){
                            var g='0';
                            g+=gg;
                            gg=g;
                        }
                        d+=gg.toString();
                        edit_datan.value=d;
                        if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                        &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                            edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
                        }
                    }else{
                        this.value=0;
                        mm=this.value;
                    }
                }
            }
        });

        aaedit_datan.addEventListener('blur', function() {
            if(this.value!=aa){
                aa=this.value;
                if((ggedit_datan.value!=0)&&(mmedit_datan.value!=0)&&(aaedit_datan.value!=0)){
                    if(ctrlMGA(ggedit_datan.value,mmedit_datan.value,aaedit_datan.value)==true){
                        d=aa.toString()+'-';
                        if(mm.length==1){
                            var m='0';
                            m+=mm;
                            mm=m;
                        }
                        d+=mm.toString()+'-';
                        if(gg.length==1){
                            var g='0';
                            g+=gg;
                            gg=g;
                        }
                        d+=gg.toString();
                        edit_datan.value=d;
                        if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                        &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                            edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
                        }
                    }else{
                        this.value=0;
                        aa=this.value;
                    }
                }
            }
        });
    };

    edit_cognome.addEventListener('change', function() {
        if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
            &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
            edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
        }
    });

    edit_nome.addEventListener('change', function() {
        if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
            &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
            edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
        }
    });

    edit_datan.addEventListener('blur', function() {
        if(this.value!=edit_datanappo.value){
            edit_datanappo.value=this.value;
            if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
            }
        }
    });

    edit_luogon.addEventListener('blur', function() {
        if(this.value!=edit_luogonappo.value){
            edit_luogonappo.value=this.value;
            if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
            }
        }
    });

    edit_sesso.addEventListener('blur', function() {
        if(this.value!=edit_sessoappo.value){
            edit_sessoappo.value=this.value;
            if((edit_cognome.value!='')&&(edit_nome.value!='')&&(edit_datan.value!=0)
                &&(edit_luogon.value!='')&&(edit_sesso.value!='')){
                edit_codfisc.value=CodiceFiscale(edit_cognome.value,edit_nome.value,edit_datan.value,edit_luogon.value,edit_sesso.value);
            }
        }
    });

</script>

Nella prima parte ho dichiarato le variabili relative agli oggetti HTML posti sulla pagina per la raccolta delle informazioni necessarie, alle quali ho dato un id ed un nome intuitivamente uguale al nome dell'informazione stessa, assegnandogli lo stesso oggetto, prelevandolo dall'albero del D.O.M., cioè ad esempio con la riga:

var edit_cognome = document.getElementById('cognome'); 

dichiaro la variabile relativa all'informazione "cognome", e gli assegno l'oggetto HTML della pagina in cui verrà scritta proprio l'informazione cognome, e che nell'HTML avrò scritto come:

<input id="cognome" name="cognome" type="text"/> 

Da notare che, per gli oggetti HTML che sono di tipo select o data (data nascita, luogo nascita e sesso) una volta assegnato l'oggetto alle variabili-oggetto, assegno immediatamente il valore ad una variabile, ad esempio per la data mediante la riga:

var d=edit_datan.value; 

in modo da evitare che l'evento si verifichi ogni qual volta si apre o si chiude la tendina dei valori di questo tipo di oggetto.

Nella seconda parte, per ogni variabile-oggetto, assegno gli eventi che si verificheranno ogni qual volta il contenuto (informazioni inserite dall'utente...) di tali oggetti cambia ("change" per le normali input text e "blur" per le input di tipo select e di tipo data...). Al verificarsi di tali eventi, controllo (con "if"..) se il contenuto di tutti gli oggetti è presente (se sono state inserite dall'utente tutte le informazioni necessarie per il calcolo del codice fiscale..), e se si, assegno all'oggetto che conterrà il valore del codice fiscale il rilsultato della funzione che effettua il calcolo dello stesso, così per l'oggetto cognome ad esempio scrivo:

edit_cognome.addEventListener('change', function() {

           if((edit_cognome.value!='')&&(edit_nome.value!='')

              &&(edit_datan.value!=0)&&(edit_luogon.value!='')&&(edit_sesso.value!='')){

                    edit_codfisc.value=CodiceFiscale(edit_cognome.value,

                                                                                edit_nome.value,

                                                                                edit_datan.value,

                                                                                edit_luogon.value,

                                                                                edit_sesso.value);

});

Un esempio di tutto questo lo possiamo trovare qui.

Mentre la routine con il codice JavaScript per il calcolo del codice fiscale si può scaricare da qui sotto:

Funzione Java Script per il calcolo del codice fiscale

Max P. 08/04/2018