HTML Management

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <span>Inserisci utente: </span>
        <input type="text" placeholder="Nome" id="nome_utente" /> <input type="text" placeholder="Cognome" id="cognome_utente" />
        <button onclick="aggiungi_utente()">Aggiungi ad Elenco</button>
    </div>
    <div>
        <button onclick="presenta_utenti(true)">Nome + Cognome</button><button onclick="presenta_utenti(false)">Cognome + Nome</button>
    </div>
    <ul id="listautenti">
        <!-- qui saranno aggiunti gli utenti man mano che premerò sul pulsante -->
    </ul>
    <hr />

    <script src="base.js"></script>
    <script>
        // un array che manterrà in memoria TUTTI gli utenti
        var utenti = [];

        // aggiunge un utente all'array che mantiene in memoria TUTTI gli utenti
        function aggiungi_ad_array(nomeUtente, cognomeUtente) {
            // un utente è un'informazione complessa che ha DUE caratteristiche
            // UN NOME PIU' UN COGNOME
            // poiché queste caratteristiche devono essere gestite separatamente,
            // le devo mantenere DA UN LATO SEPARATE per ordinare sull'una o sull'altra,
            // DALL'ALTRO UNITE perché ogni COPPIA RAPPRESENTA UNO ED UN SOLO UTENTE
            var nuovo_utente =
            { // struttura di OGGETTO JAVASCRIPT, costituita da DUE CAMPI: nome e cognome
                nome: nomeUtente, // valorizzo il CAMPO nome
                cognome: cognomeUtente // valorizzo il CAMPO cognome
            };
            // INSERISCO nell'array IL NUOVO elemento che AL SUO INTERNO conterrà DUE informazioni diverse
            utenti.push(nuovo_utente);
        }

        // ricostruisce la vista degli utenti
        // se prima_nome == true presenta prima il nome, altrimenti prima il cognome
        function presenta_utenti(prima_nome) {
            g("#listautenti").innerText = ""; // pulisce la lista
            for (var i = 0; i < utenti.length; ++i)
                if (prima_nome) // se metto prima il nome
                    crea_list_item(utenti[i].nome + " " + utenti[i].cognome); // utenti[i].nome -> leggo il nome dell'utente i-esimo
                else // altrimenti prima il cognome
                    crea_list_item(utenti[i].cognome + " " + utenti[i].nome);
        }

        function crea_list_item(testo) {
            // creo una voce della lista
            var li = document.createElement("li");
            // aggiungo il nome al suo interno
            li.append(testo);
            // aggiungo la voce all'elenco
            g("#listautenti").append(li);
        }

        function aggiungi_utente() {
            // recupero il nome dell'utente da aggiungere
            var nome = g("#nome_utente").value;
            var cognome = g("#cognome_utente").value;
            // lo aggiungo all'elenco
            aggiungi_ad_array(nome, cognome);
            presenta_utenti(true);
            // pulisco la casella di testo
            g("#nome_utente").value = "";
            g("#cognome_utente").value = "";
            // riporto il cursore sulla casella di testo
            g("#nome_utente").focus();
        }
    </script>
</body>
</html>