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?
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?
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.