Como usar?

OlaMundo · Julho 24, 2012

Olá pessoal, sou novo neste mundo da programação, mas gostaria de algumas informações se possível.

Gostaria de saber a respeito da programação Web, mais resumidamente qual é o papel do HTML, CSS e Javascript, venho lendo sobre eles e entendo um pouco a função de cada, mas para que eu pudesse estudar melhor, gostaria de saber melhor como eu desenvolveria um algoritmo usando estas linguagens. O algoritmo consistiria em criar botões e de acordo com cada botão, gerar um contador, para que no final pudesse me mostrar qual recebeu mais escolhas, por exemplo. Este é um algoritmo simples, mas ainda não entendi bem como usar nestas linguagens, como mistura-las para que isto funcione, em um site, por exemplo. Bom, é isso, gostaria de saber melhor como isso funciona nestas linguagens, para que eu possa estudar isto melhor. Obrigado.

PHS · Julho 25, 2012

HTML, CSS e JavaScript são linguagens de programação web. O HTML foi criado para estruturar webpages. Por ser limitado quanto à estilização, o CSS foi desenvolvido, fornecendo estilos em cascata e complementando o HTML. Paralelamente, o JavaScript se desenvolvia dando suporte a eventos através de funções chamadas de acordo com a necessidade em aplicações web.

Assim, pode-se dizer que o HTML programa a estrutura, o CSS cuida do estilo e o JavaScript fica com os efeitos de transmissão da página.

Em termos básicos, uma página que contenha as três linguagens apresenta-se assim:

<html>

<head>

<title>
Título da Página
</title>

<style>
Estilos da Página (CSS)
</style>

<script>
Scripts da Página (JavaScript)
</script>

</head>

<body>
Corpo ou Conteúdo da Página
</body>

</html>

Para implementar um algoritmo que possua botões contadores é bem fácil.

<html>

<head>

<title>
Título da Página
</title>

<style type="text/css">

input {
background-color: #0000FF;
font: 12px verdana, arial, helvetica, sans-serif;
color: #FFFFFF;
border: 2px solid #000080;
}

</style>

<script type="text/javascript">

var contador;
contador = 0;
function funcao() {
contador ++;
document.getElementById('contador').innerHTML = contador;
}

</script>

</head>

<body>

<input type="button" value="Contar" onclick="funcao()" />
<br />
<span id="contador">0</span>

</body>

</html>

Para criar mais botões basta criar mais funções em JavaScript e estruturas em HTML, podendo alterar o estilo de cada botão.

<html>

<head>

<title>
Título da Página
</title>

<style type="text/css">

input.botao1 {
background-color: #FFFF00;
font: 10px verdana, arial, helvetica, sans-serif;
color: #000000;
border: 1px solid #FF0000;
}

input.botao2 {
background-color: #0000FF;
font: 12px verdana, arial, helvetica, sans-serif;
color: #FFFFFF;
border: 2px solid #000080;
}

</style>

<script type="text/javascript">

var contador1;
contador1 = 0;

var contador2;
contador2 = 0;

function funcao1() {
contador1 ++;
document.getElementById("contador1").innerHTML = contador1;
}

function funcao2() {
contador2 ++;
document.getElementById("contador2").innerHTML = contador2;
}

</script>

</head>

<body>

<input type="button" value="Contar" onclick="funcao1()" class="botao1" />
<br />
<span id="contador1">0</span>
<br /><br />
<input type="button" value="Contar" onclick="funcao2()" class="botao2" />
<br />
<span id="contador2">0</span>

</body>

</html>

Claro que o código acima pode ser otimizado, mas da forma como está serve para seus fins.

Espero tê-lo ajudado!

Entrar

Como usar?

Pergunta

OlaMundo

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

PHS

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades