Quanto é 1+1?
Resposta facil. Mas como ensinar sua página a contar?
Vamos criar um mini codigo
Vamos iniciar pela estrutura basica da pagina
<Html>
<head>
<script >
Aqui vai ficar o código javascript
</script>
<head>
<body>
Aqui ficara o conteúdo que a pagina exibirá
</body>
</html>
O que é uma variavel?
Lembra a conta do inicio?
1+1
Pois bem os numeros aqui são variaveis, mas pq isso eh importante saber? Pq vamos definir variaveis agora mesmo. Dentro da tag script vamos criar as seguntes variaveis:
X = 0;
Y = 1;
Muito bem. E dentro do body vamos criar uma tag assim:
<b>
O b eh o seguintes tudo que cvc escrever aqui estara em negrito
</b>
Agora vamos criar um botao.
<button>aperte aqui</button>
Antes de continuarmos tenho algo importante a dizer: javascript é casesensitive.
Ou seja se vc escrever Botao e botao nao é a mesma coisa pq um ta com letra maiuscula e outro nao. Entao cuidado sempre que for montar seu codigo preste atenção nas maiúscula e minusculas.
Agora vamos ao que interessa: o botão nos chamamos a funçao somando vamos criar essa função no javascript dentro da tag script assim:
Function somando(){
}
Detro da fundação somando vamos ensinar ela a somar mas o que vamos somar? Que tal laranjas? Entao vamos explicar logo de cara pra função que cada clique no botao vale 1 laranja assim:
Function somando(){
laranja = 1;
}
Não esqueça de colocar a virgula no final senão não funcionará pq a virgula diz para o navegador que a instrução que acabamos de ensinar pra ele acaba ali na virgula. Ai vamos dizer pra ele o seguinte. Cada vez que clicar quero que some mais 1 laranja assim:
Function somando(){
laranja = 1;
Laranja = laranja+1;
}
Pronto. Ta feito. Mas ainda nao estamos vendo o botão e nem vendo laranja nenhuma na tela. Entao vamos fazer assim. Vamos criar o botão no body
<buttom>mais uma laranja</buttom>
Beleza onclick eh a mesma coisa que eu dizer ao nevegador. Cada vez que eu clicar quero que vc execute a funçao somando. Ok mesmo a funçao funcionando ainda nao estamos vendo nada
Entao vamos exibir o resultado assim
<b>atualmente temos<p>0</p>laranjas</b>
Aqui quando vc abrir o navegador ele vai mostra um botao e a frase dizendo que atualmente temos zero larajas e mesmo se vc apertar o botao o numero de laranjas ainda nao vai subir mas nos ja vamos corrigir isso.
Vamos voltar ao javascript e mudar umas coisinhas. Primeiro lembra que colocamos dentro da funçao laranjas = 1; pois bem arraste pra fora da função ficara igual vou colocar abaixo.
laranja = 1;
Function somando(){
laranja=laranja+1;
}
Ai dentro da funçao vc escreve o codigo que vou colocar e depois te explico com detalhes
laranja = 1;
Function somando(){
laranja = laranja +1;
document.getElementById("aqui").innerHTML=laranja;
}
Ai sim o cofio vai funcionar perfeitamente document.getElementById basicamente significa o seguinte é como se vc dissese ao navegador vai nesse documento que eu to criando agora e procura pelo e subistitui ele pelas laranjas que eu tenho. E é isso que ele faz cada vez que vc clica no botao ele soma uma laranja. Código completo é assim
<Html>
<head>
<script>
laranja =1;
Function somando(){
laranja = laranja+1;
document.getElementById("aqui").innerHTML=laranja;
}
<script>
<body>
<b>atualmente temos<p>0</p>
Laranjas
</b>
<buttom>
</buttom>
</body>
</html>
Ta na duvida deixe comentario gostou segue e compartilha e até a próxima
