massimopellegrino.it

Il valore di un’idea sta nel metterla in pratica

JavaScript e D.O.M.

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ò prima della chiusura dei tag body ed html:

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 tutte le informazioni dall'utente...), 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.

Max P. 08/04/2018