6. Como funciona?
Ex: Estilos e Scripts divididos e fora do html e fora do html
estilo.css
#paragrafo{
font:60px helvetica,Arial,sans-serif;
color:red;
}
efeito.js
document.getElementById("paragrafo").onmouseover =
function(){this.style.color = 'olive'};
document.getElementById("paragrafo").onmouseout =
function(){this.style.color = 'red'};
Index.html
<p id="paragrafo">Olá Mundo!</p>
7. Um exemplo
Para fazer um código simples com uma ação simples:
<p onmouseover="this.style.fontWeight='bold'">Meu texto</p>
8. Vamos melhorar
Colocamos separado a ação do javaScript, somente
chamando-o onde é necessário:
<script type="text/javascript">
function textoBold(campo){
campo.onmouseover = function(){this.style.fontWeight =
'bold'}}
</script>
<p onmouseover="textoBold(this)">Meu texto</p>
9. Podemos melhorar mais
Aqui vemos um código sem interferência de javaScript no
HTML:
efeitos.js
function textoBold(){
var campo = document.getElementById("boldOnOver");
campo.onmouseover = function(){this.style.fontWeight = 'bold';};
}
window.onload = function() {
textoBold();
}
Index.html
<p id=“boldOnOver">Meu texto</p>
10. Quais os Prós
Separação das folhas de estilo(CSS), linguagem de
marcação(HTML) e linguagem de script(JavaScript);
Facilita o Reuso do script em outras páginas.
Fácil manutenibilidade;
HTML mantém somente o que é relevante para a
apresentação do conteúdo;
Facilita a leitura do conteudo (HTML) pelos bots de sites de
busca.
11. Quais os Contras
Código ligeiramente mais complexo, entretanto quem
programa bem saberá lidar de forma satisfatória, pois o
JavaScript é o mesmo.
Nenhum outro contra.
