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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.