Finalizando o Módulo 1 com uma calculadora simples

Olá Daniella, tudo bem com você?

Parabéns pela conclusão do projeto da calculadora e obrigado por compartilhar sua resolução no fórum, dessa forma, outros alunos e alunas da comunidade Alura serão impactados através da sua resolução.

A navegação pelos campos de algum formulário ou inputs acontece por padrão através da tecla TAB e isso é válido para sites e até mesmo para o navegador que utilizamos no dia a dia, como chrome, firefox, dentre outros. A tecla TAB, tem seu significado baseado na palavra "tabular" e tem como principal objetivo preencher com espaços algum campo de texto e também, possui a funcionalidade de eliminar a necessidade de usar o mouse para clicar em um campo adjacente, ou seja, com o seu uso podemos navegar entre os campos de uma aplicação. Outro detalhe que vale mencionar sobre essa tecla, é que se observarmos, a tecla TAB possui uma seta para direita e para esquerda em sua forma física e esse desenho diz respeito justamente à capacidade de navegação para frente e para trás nos campos. Já a tecla ENTER, tem como principal objetivo confirmar alguma ação ou então, partir para uma nova linha dentro de uma caixa de texto.

Indo além, tomando como exemplo um determinado site que contenha um formulário semelhante a nossa calculadora, a ação automática do usuário será apertar a tecla TAB para navegar pelos campos, por se tratar de um comportamento padrão de outras aplicações, uma convenção. Porém, quem é deficiente visual, por exemplo, terá muitas dificuldades para navegar pelos campos em outras teclas que não sejam o TAB, pois, por padrão, essa pessoa irá se nortear pelo significado das teclas.

Tendo isso em mente, podemos dizer que simular através de código que a tecla ENTER se comporte como a tecla TAB não é impossível, porém, não é um código simples, pelo contrário, envolve funções e recursos da linguagem JavaScript que ainda não foram apresentados neste curso e que podem inclusive causar um espanto inicial. Deixo abaixo um aperitivo de como poderíamos realizar essa ação em seu código:

<meta charset="UTF-8">

VALOR1: <input type="text" id="v1" value="" onkeypress="pressionaEnterV1()" /> <br> <br>

VALOR 2: <input type="text" id="v2" value="" onkeypress="pressionaEnterV2()" /> <br> <br>

Resultado: <input type="text" id="res" value="" onkeypress="pressionaEnterRes()" /> <br> <br> <br> <br>

<button><b>SOMAR</b></button> <br> <br>

<script>

    v1.focus();

    function somar() {

        res.value = parseInt(v1.value) + parseInt(v2.value)

    }

    function pressionaEnterV1() {
        // Se a tecla apertada for ENTER, que tem valor padrão de 13
        if (event.keyCode == 13) {
            document.getElementById("v2").focus({ preventScroll: false });
        }
    }
    function pressionaEnterV2() {
        if (event.keyCode == 13) {
            document.getElementById("res").focus({ preventScroll: false });
        }
    }

    function pressionaEnterRes() {
        if (event.keyCode == 13) {
            document.getElementById("v1").focus({ preventScroll: false });
        }
    }

    var button = document.querySelector("button");

    button.onclick = somar; 

</script>

Resultado:

Veja que a navegação dos campos foi realizada pela tecla ENTER, e no código acima possui alguns recursos que ainda não foram ministrados até este momento, como por exemplo preventScroll, onkeypress, focus, dentre outros, porém, ao longo dos seus estudos sobre JavaScript, você conhecerá esses e outros recursos.

Neste contexto, uma mudança em relação ao comportamento dessas teclas, exige uma reflexão em relação aos impactos que isso gera para outros usuários do código. A título de prática é excelente, mas, a título de implementação em um cenário real, vale reflexão se deve ou não ser aplicado. Nós, como pessoas programadoras, devemos sempre ponderar que algumas mudanças que são interessantes para nosso uso, podem não ser aplicadas para os demais usuários. Programação também é filosofar hahaha

Espero que este ponto de reflexão que levantamos possa te auxiliar em situações futuras ao longo da sua jornada em tecnologia. Conte sempre com a Alura para evoluir seus estudos. Fico à disposição em caso de dúvidas.

Grande abraço!