ស្ដង់ដារបណ្តាញ: ញែកជា HTML, ជា CSS អ៊ី Javascript

ការអនុវត្តន៍ការសរសេរកម្មវិធីល្អទៅនឹងរចនាសម្ព័ន្ធដោយឡែកពីគ្នា (របស់ HTML), រចនាប័ទ្ម (ជា CSS) និងឥរិយាបថ (javascript). រៀនពីរបៀប, រួមបញ្ចូលទាំងការផងដែរដោយការប្រើ 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ក្នុងជួរ“, នៅក្នុងពាក្យផ្សេងទៀត, 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 (អត្ថបទ) fica azul:

cab

Observe abaixo que o CSS (រចនាប័ទ្ម) e o Javascript (onclick) foram utilizados dentro da tag h1 អ៊ី button, រៀង, 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>
  <ប្រធាន>
    <ចំណងជើង>TaylorLopes.com</ចំណងជើង>
  </ប្រធាន>
  <រាងកាយ>
    <h1 លេខសម្គាល់="page-title" រចនាប័ទ្ម="color:#FF0000;">Cabeçalho da página</h1>
    <button លេខសម្គាល់="btn-blue" ប្រភេទ="button" onclick="document.getElementById('page-title').style.color='#0000FF';">Azul</button>
  </រាងកាយ>
</html>

Uma outra técnica um pouco mais elaborada, retira o estilo CSS da tag h1, ទោះជាយ៉ាងណា, 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>
  <ប្រធាន>
    <ចំណងជើង>TaylorLopes.com</ចំណងជើង>
    <រចនាប័ទ្ម ប្រភេទ="text/css">
      h1 { color:#FF0000; } 
    </រចនាប័ទ្ម>
    <ស្គ្រីប ប្រភេទ="text/javascript">
      function mudarCor() {
        document.getElementById('page-title').style.color = "#0000FF";
      }
    </ស្គ្រីប>    
  </ប្រធាន>
  <រាងកាយ>
    <h1 លេខសម្គាល់="page-title">Cabeçalho da página</h1>
    <button លេខសម្គាល់="btn-blue" ប្រភេទ="button" onclick="mudarCor();">Azul</button>
  </រាងកាយ>
</html>

Técnica aconselhável

ទីបំផុត, 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>
  <ប្រធាន>
    <ចំណងជើង>TaylorLopes.com</ចំណងជើង>    
    <រចនាប័ទ្ម ប្រភេទ="text/css">
      h1 { color:#FF0000; }
    </រចនាប័ទ្ម>
    <ស្គ្រីប ប្រភេទ="text/javascript">
      window.onload = function() {
        document.getElementById('btn-blue').onclick = mudarCor;
      };     
      function mudarCor() {
        document.getElementById('page-title').style.color = '#0000FF';
      };
    </ស្គ្រីប>
  </ប្រធាន>
  <រាងកាយ>
  <h1 លេខសម្គាល់='page-title'>Título da página</h1>
  <button លេខសម្គាល់='btn-blue' ប្រភេទ='button' >Azul</button>
  </រាងកាយ>
</html>

Através do evento Javascript window.onload, executamos o conjunto de instruções nele contido, imediatamente após a página ser carregada. ក្នុងករណីនេះ, 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).

ជូឃឺរី| : 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>
  <ប្រធាន>
    <ចំណងជើង>TaylorLopes.com</ចំណងជើង>    
    <ស្គ្រីប ប្រភេទ="text/javascript" src="jquery-1.3.2.min.js"></ស្គ្រីប>
    <រចនាប័ទ្ម ប្រភេទ="text/css" ប្រព័ន្ធផ្សព្វផ្សាយ="all">
      h1 { color:#FF0000; }
    </រចនាប័ទ្ម>
    <ស្គ្រីប ប្រភេទ="text/javascript">
      $(ឯកសារ).ត្រៀមខ្លួនជាស្រេច(មុខងារ() {
        $('#btn-blue').ចុច(មុខងារ() {
          $('#page-title').css('color','#0000FF');
        });
      });
    </ស្គ្រីប>  
  </ប្រធាន>
  <រាងកាយ>
  <h1 លេខសម្គាល់='page-title'>Título da página</h1>
  <button លេខសម្គាល់='btn-blue' ប្រភេទ='button' >Azul</button>
  </រាងកាយ>
</html>

Encerrando este Post, quero lembrar que somente escreva o código CSS ou Javascritp dentro das tags “ប្រធាន” 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. ក្នុងករណីនេះ, dentro do “ប្រធាន” será feito apenas a chamada para esses arquivos externos. ឧទាហរណ៍:

Style.css
1
h1 { color:#FF0000; }
JScript.js
1
2
3
4
5
6
បង្អួច.onload = មុខងារ() {
        ឯកសារ.getElementById('btn-blue').onclick = mudarCor;
      };     
      មុខងារ mudarCor() {
        ឯកសារ.getElementById('page-title').រចនាប័ទ្ម.color = '#0000FF';
};
Chamada aos arquivos Style.css e JScript.js
1
2
3
4
5
6
7
8
9
10
11
<html>
  <ប្រធាន>
    <ចំណងជើង>TaylorLopes.com</ចំណងជើង>    
    <តំណភ្ជាប់ rel="stylesheet" ប្រភេទ="text/css" href="Style.css">
    <ស្គ្រីប ប្រភេទ="text/javascript" src="JScript.js"></ស្គ្រីប>    
  </ប្រធាន>
  <រាងកាយ>
    <h1 លេខសម្គាល់='page-title'>Título da página</h1>
    <button លេខសម្គាល់='btn-blue' ប្រភេទ='button' >Azul</button>
  </រាងកាយ>
</html>

សេចក្តីសន្និដ្ឋាន

ល្អ, a técnica apresentada é tida como um Padrão Web recomendado, ទោះជាយ៉ាងណា, 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. សំណាងល្អ!

ការចូលដំណើរការសរុប: 31798

មតិយោបល់មួយលើ “ស្ដង់ដារបណ្តាញ: ញែកជា HTML, ជា CSS អ៊ី Javascript

  1. ហ្វីល បាននិយាយថា::

    ជំរាបសួរ, 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?

    សូមអរគុណអ្នក

ទុកឱ្យសេចក្តីអធិប្បាយ

អាសយដ្ឋានអ៊ីមែលរបស់អ្នកនឹងមិនត្រូវបានបោះពុម្ភ.