2
respostas

Estilo com JavaScript

No exercício foi colocado estilo com JavaScript. Não entendi porque estilo no JavaScript. Não foi ensinado que o estilo é com o CSS e salvar na pasta CSS?

2 respostas

Boa tarde Josimar, tudo bem?

Exatamente, os estilos devem ficar no arquivo CSS, porém o objetivo dessa aula ao meu ver foi ensinar que com o JavaScript conseguimos MANIPULAR DINAMICAMENTE os estilos dos elementos que já foram carregados e estilizados pelo CSS na página.

Seguindo o exemplo do IMC utilizado na aula, imagine que você quer obter o mesmo resultado e deixar em vermelho os dados dos pacientes cujo IMC não pôde ser calculado...como você faria isso apenas com o CSS, uma vez que o cálculo é feito no JavaScript?

Caso a tabela fosse estática no código HTML você teria que olhar linha por linha os dados da tabela no HTML e fazer os cálculos manualmente, adicionando uma formatação de destaque pra cada registro com erro, como no exemplo abaixo:

HTML
<tr class="error">
    <td>dados...

CSS
.error{ color: red; }

Agora imagine que a tabela ao invés de 5 pacientes tivesse 500 pacientes, percebe que fica inviável fazer isso manualmente, e o JavaScript faria automaticamente?

Claro que uma tabela de pacientes nunca seria estática, mas sim criada dinamicamente com banco de dados. Nesse caso teríamos a opção de fazer essa validação (bem parecida com o que foi feito no JavaScript) no próprio backend (exemplo PHP), e então ao invés de manipularmos isso com JavaScript conseguiríamos manter a estilização no CSS.

O importante é saber que com o JavaScript também conseguimos manipular o estilo dos elementos.

Espero ter ajudado.

Fico à disposição.

Complementando minha resposta anterior, uma outra saída mais simples para sua colocação (sem envolver backend) seria já prepararmos no CSS um estilo para os elementos com falha e então atribuir esse estilo aos elementos necessários com o uso do JavaScript, mais ou menos assim:

CSS
.error{ color: red; }

JAVASCRIPT
if(altura <= 0  || altura >= 3.00){
    paciente.classList.add("error");
}

Dessa forma toda a estilização será mantida no CSS.

Abraços.