Padrões Web: Separando HTML, CSS e Javascript

Uma boa prática de programação é separar estrutura (HTML), estilo (CSS) e comportamento (Javascript). Saiba como, inclusive também utilizando JQuery!

Técnica desaconselhável

Primeiro vamos começar com o que NÃO se deve fazer. É comum que o código CSS ou Javascript sejam utilizados pelo método “inline“, ou seja, na linha da estrutura HTML (tag) onde se quer aplicar um efeito de estilo ou comportamento. Vamos simular um exemplo simples de uma página Web onde ao clicar em um botão, o cabeçalho (texto) fica azul:

cab

Observe abaixo que o CSS (style) e o Javascript (onclick) foram utilizados dentro da tag h1 e button, respectivamente, o que contraria os padrões Web atuais que recomendam a separação total entre estrutura de marcação com HTML, estilo com CSS e comportamento com scripts.

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>TaylorLopes.com</title>
  </head>
  <body>
    <h1 id="page-title" style="color:#FF0000;">Cabeçalho da página</h1>
    <button id="btn-blue" type="button" onclick="document.getElementById('page-title').style.color='#0000FF';">Azul</button>
  </body>
</html>

Uma outra técnica um pouco mais elaborada, retira o estilo CSS da tag h1, porém, ainda deixa a desejar pois mantém o comportamento Javascript (onclick) dentro da tag button. Note:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
  <head>
    <title>TaylorLopes.com</title>
    <style type="text/css">
      h1 { color:#FF0000; } 
    </style>
    <script type="text/javascript">
      function mudarCor() {
        document.getElementById('page-title').style.color = "#0000FF";
      }
    </script>    
  </head>
  <body>
    <h1 id="page-title">Cabeçalho da página</h1>
    <button id="btn-blue" type="button" onclick="mudarCor();">Azul</button>
  </body>
</html>

Técnica aconselhável

Finalmente, observe a seguir que a marcação HTML (tag) está totalmente isenta de qualquer código CSS ou Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <title>TaylorLopes.com</title>    
    <style type="text/css">
      h1 { color:#FF0000; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        document.getElementById('btn-blue').onclick = mudarCor;
      };     
      function mudarCor() {
        document.getElementById('page-title').style.color = '#0000FF';
      };
    </script>
  </head>
  <body>
  <h1 id='page-title'>Título da página</h1>
  <button id='btn-blue' type='button' >Azul</button>
  </body>
</html>

Através do evento Javascript window.onload, executamos o conjunto de instruções nele contido, imediatamente após a página ser carregada. Neste caso, isto diz respeito a somente mudar a cor do texto de vermelho para azul.

Resumindo, o que ocorre é que após a página ser carregada (onload), sempre que o botão (btn-blue) for clicado (onclick), a cor do texto (page-title) será alterada (mudarCor).

JQuery| http://jquery.com
Utilizando a biblioteca JQuery você garante sempre o uso desta técnica, uma vez que ela não permite misturar script com marcação HTML. Você pode aprender mais sobre jQuery buscando no Google! :D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <title>TaylorLopes.com</title>    
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <style type="text/css" media="all">
      h1 { color:#FF0000; }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#btn-blue').click(function() {
          $('#page-title').css('color','#0000FF');
        });
      });
    </script>  
  </head>
  <body>
  <h1 id='page-title'>Título da página</h1>
  <button id='btn-blue' type='button' >Azul</button>
  </body>
</html>

Encerrando este Post, quero lembrar que somente escreva o código CSS ou Javascritp dentro das tags “head” se eles afetarem exclusivamente os elementos do documento corrente, pois se você perceber que este código possa ser utilizado em outras Páginas Web, então o correto é que cada código seja escrito no seu arquivo correspondente e separado. Neste caso, dentro do “head” será feito apenas a chamada para esses arquivos externos. Exemplo:

Style.css
1
h1 { color:#FF0000; }
JScript.js
1
2
3
4
5
6
window.onload = function() {
        document.getElementById('btn-blue').onclick = mudarCor;
      };     
      function mudarCor() {
        document.getElementById('page-title').style.color = '#0000FF';
};
Chamada aos arquivos Style.css e JScript.js
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>TaylorLopes.com</title>    
    <link rel="stylesheet" type="text/css" href="Style.css">
    <script type="text/javascript" src="JScript.js"></script>    
  </head>
  <body>
    <h1 id='page-title'>Título da página</h1>
    <button id='btn-blue' type='button' >Azul</button>
  </body>
</html>

Conclusão

Bem, a técnica apresentada é tida como um Padrão Web recomendado, porém, algumas pessoas não concordam com sua utilização, por considerarem que o código fica mais extenso e complicado de entender e manutenir. Eu não vou entrar no mérito da questão, embora particularmente concorde 100% em fazer uso dessa técnica. Cabe a você avaliar as vantagens e desvantagens dessa técnica e decidir o uso em suas aplicações. Boa sorte!

Total de acessos: 9314

Um comentário sobre “Padrões Web: Separando HTML, CSS e Javascript

  1. Filipe disse:

    Olá, baixei um sistema de login simples em javascript onde os dados como login e senha ficam armazenados na mesma página html, gostaria de separar este script em um arquivo .js porém a usando a função não funcionou , existe uma segunda opção?

    Obrigado

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *