SW 2023-03-31

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Numeração Romana</title>
    <script src="2.js"></script>
</head>
<body>
<!-- mecanismo de input -->
<form>
    <fieldset>
        <legend lang="pt">
            Fronteira de valores, a visualizar
            em numeração romana
        </legend>
        <label for="idNInicial">Valor inicial: </label>
        <input
            id="idNInicial"
            name="nameNInicial"
            type="number"
            min="1"
            max="1000"
            step="1"
            placeholder="aqui o valor inicial"
            value="1"
        ><br>
        <label for="idNFinal">Valor final: </label>
        <input
            id="idNFinal"
            name="nameNFinal"
            type="number"
            min="1"
            max="1000"
            step="1"
            placeholder="aqui o valor final"
            value="10"
        ><br>
        <label>Mostrar correspondência decimal: </label>
        <input
            type="checkbox"
            checked
            id="idCheckMostrar">
    </fieldset>
    <input
        id="idBtnObter"
        name="nameBtnObter"
        type="button"
        value="Obter lista em numeração romana"
    >
</form>
<hr><!-- quebra semântica -->
<!-- zona de respostas -->
<section
    name="nameSectionResposta"
    id="idSectionResposta"
>
    <!-- AQUI CONTEÚDO -->
    <!-- no JS, esta zona tem nome: innerHTML -->
    <p>Aqui aparecerá a resposta</p>
</section>

</body>
</html>

**********

// 2.js
/*
load - é o evento que ocorre quando TODOS os documentos
necessários para a solução, foram efetivamente
carregados em memória
onload - é o "event handler"
 */
//window.onload = comoEuQueroReagirAoEventoDeLoad;
window.onload = boot

// ids de objetos relevantes no HTML
const ID_N_INICIAL = "idNInicial";
const ID_N_FINAL = "idNFinal";
const ID_BTN_OBTER = "idBtnObter";
const ID_SECTION_RESPOSTA = "idSectionResposta";
const ID_CHECK_MOSTRAR = "idCheckMostrar"

// declarar objetos para casar com o HTML relevante
var oNInicial,
    oNFinal,
    oBtnObter,
    oSectionResposta,
    oCheckMostrar;


/*
recebido o id de um QUALQUER elemento HTML,
esta função retorna um objeto JS que lhe corresponde;
na realidade "um objeto que É aquele elemento".
 */
function id(pIdHtmlElement){
    return document.getElementById(pIdHtmlElement)
}//id

// esta função não é chamada por nós, os programadores;
// esta função é AUTOMAGICAMENTE chamada pelo cliente
// quando ele (antropomorfização) achar que deve chamá-la
function boot(){
    // associações
    oNInicial = id(ID_N_INICIAL);
    oNFinal = id(ID_N_FINAL);
    oBtnObter = id(ID_BTN_OBTER);
    oSectionResposta = id(ID_SECTION_RESPOSTA);
    oCheckMostrar = id(ID_CHECK_MOSTRAR);

    // comportamentos
    //oBtnObter.onclick = nomeDaFuncaoComQueQueremosResponder
    oBtnObter.onclick = mostrarListaDeValoresEmRomano;
}//boot

function mostrarListaDeValoresEmRomano(){
    //window.alert("FEITO!")
    nInicial = Number(oNInicial.value) // String->Number
    nFinal = Number(oNFinal.value) // String->Number
    bProblema = nInicial>nFinal

    if(bProblema) {
        window.alert("Pf, escreve um num final MAIOR que o inicial.")
        return;
    }//if

    var strHTML = "<ol type='i'>"
    // computação
    for(
        valorAtual = nFinal; //init
        valorAtual >= nInicial; //continuidade
        valorAtual-=1 //atualização
    ){
        //fazer o quê?
        if (oCheckMostrar.checked)
            strHTML += "<li>"+valorAtual+"</li>";
        else
            strHTML += "<li></li>"
    }//for
    strHTML += "</ol>"

    oSectionResposta.innerHTML = strHTML;
}