SW 2023-04-14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testador de expressões JS</title>
    <script src="2.js"></script>
</head>
<body>
<form id="id_form_computadora_de_expressoes">
    <label for="id_text_exp">A tua expressão: </label>
    <input type="text"
           id="id_text_exp"
           placeholder="aqui uma expressão">
    <!-- onde a expressão possa ser escrita -->
    <input type="submit"
           value="computar a expressão"><!-- sinalizar q a expressão está pronta para computação -->
</form>
<hr>
<section id="id_realtime_results"></section>
<br>
<section id="id_section_resultados"></section>
</body>
</html>

*******************

window.onload = boot

const ID_FORM = "id_form_computadora_de_expressoes";
const ID_EXP = "id_text_exp";
const ID_REALTIME_RESULTS = "id_realtime_results";
const ID_RESULTADOS = "id_section_resultados";

var oForm, oExp, oResultados, oRealTimeResults;

function id(pId) {
    return document.getElementById(pId);
}

function boot() {
    //1 - associações entre els HTML e objs do JS
    oForm = id(ID_FORM);
    oExp = id(ID_EXP);
    oResultados = id(ID_RESULTADOS);
    oRealTimeResults = id(ID_REALTIME_RESULTS);

    // controlo de qualidade (assegurar-nos da disponibilidade de todos os elementos relevantes para o sistema web)
    var relevantes = [oForm, oExp, oResultados, oRealTimeResults];
    var bOK = true;
    for (var coisa of relevantes) {
        bOK = bOK && (coisa != null);
    }//for

    if (!bOK) {
        window.alert("Um elemento relevante indisponível. STOP.")
        return;
    } else {
        //window.alert("Tudo OK");
    }

    //2 - conferir comportamentos
    oExp.oninput = ir_mostrando_resultado;
    oForm.onsubmit = mostrar_resultado;
}//boot

function ir_mostrando_resultado(){
    try{
        var r = eval(oExp.value.trim())
        oRealTimeResults.innerHTML ="<mark>"+r+"</mark>"
    }
    catch (err){
        oRealTimeResults.innerHTML ="<mark>Não computa.</mark>"
    }

    return false; // neste caso é desnecessário
}//ir_mostrando_resultado

function mostrar_resultado(pE) {
    var evento = pE ? pE : window.event;
    var objeto = evento.target ? evento.target : evento.srcElement;

    // computar e mostrar os resultados
    var expressaoParaSerCalculada = oExp.value.trim();
    var resultadoDaComputacao = ""
    try {
        resultadoDaComputacao = eval(
            expressaoParaSerCalculada
        );
    } catch (errado /* ocorreu uma "Excepção" */) {
        resultadoDaComputacao = "Não computa.";
    } finally { // opcional + acontece SEMPRE
        oResultados.innerHTML = expressaoParaSerCalculada + " = " +
            resultadoDaComputacao + "<br>" +
            oResultados.innerHTML;
    }

    return false; // não há + nada para ser feito no processamento do evento
}//id_section_resultados

// quase todos os operadores em JS
// aritméticos: + - * / %
// atribuição: =
// question-mark ternário:    resultado = exp-bool ? valor-caso-true : valor-caso-false
// relacionais: < <= > >= == != === !==
// booleanos: ! && || & |

/*
var a, b, c;
a = true
c = a || (b=true); // avaliação por curto-circuito
c = a | (b=true); // avaliação completa
window.alert(c)
window.alert("b="+b)
 */