Tutorial Javascript Básico Para Iniciantes, Variáveis e Sintaxe
Photo credit: everystockphoto
Partindo para a parte final da nossa série sobre JavaScript, vamos ver um pouco sobre variáveis:
As variáveis são como as propriedades que já vimos antes, ou seja, também armazenam dados sobre os objetos e assim tornam possível armazenar temporariamente informações como textos, datas e outros.
O conteúdo de uma variável pode ser atribuído ou vir de um resultado de uma expressão ou função.
Nome de variáveis:
O nome de uma variável pode tanto iniciar-se por uma letra como por caracteres especiais e até números. Além da diferenciação de letra maiúscula e minúscula. O importante é saber que se uma variável for definida sem a instrução var ela se torna global, ou seja, valem para todas as funções que estejam dentro do script da mesma página.
Quando utilizamos a instrução var, a variável então passa a ser local, ou seja, utilizada apenas para aquela função onde foi declarada.
Agora não vamos mais nos prender a parte teórica, mesmo porque, já falamos sobre o básico da teoria aqui, você pode encontrar muito mais material teórico pela rede, uma vez entendida essa parte básica. Gostaria agora de falar da parte prática:
Vamos entender como funciona um código de nível iniciante, mas que já mostra o que pode ser feito e como funciona a linguagem JavaScript.
Primeiro vamos ver o código:
<html>
<head>
<title>JavaScript</title>
<script type=”text/javascript”>
function calcula(){
var primeiroNumero = parseFloat(document.form1.texto1.value);
var segundoNumero = parseFloat(document.form1.texto2.value);
window.alert(primeiroNumero + segundoNumero);
}
</script>
</head>
<body>
<form name=”form1″>
Primeiro Número: <input name=”texto1″ size=”3″><br>
Segundo Número: <input name=”texto2″ size=”3″><br>
Clique aqui para o resultado: <input type=”button” value=”Calcule” onclick=”calcula()”>
</form>
</body>
</html>
Copie esse código e cole em um editor, pode ser até o bloco de notas do Windows. Depois salve com o nome que quiser, mais a extensão.html. Por exemplo: calculando.html Em seguida abra o documento no seu navegador e confira o resultado!
Agora vamos dividir o código e procurar entender cada parte, inclusive o html:
<html> = Abre o documento
<head> = Abre do cabeçalho do documento
<title>…</title> = Título da página
<script> = Aqui começa de fato o JavaScript
function calcula(){ = Abertura da função que faz o cálculo
var primeiroNumero = parseFloat(document.form1.texto1.value); = variável1
var segundoNumero = parseFloat(document.form1.texto2.value); = variável2
window.alert(primeiroNumero + segundoNumero); = Abre a janela de alerta do Windows com o resultado da soma entre o primeiro número e o segundo número representados pelas variáveis 1 e 2.
} = Fecha a função
</script> = Fecha o JavaScript
</head> = Fecha o cabeçalho do documento
<body> = Abre o corpo do documento
<form> = Abre o código do formulário. (o formulário é responsável por fazer os campos de texto e botão funcionarem como uma coisa só)
Primeiro Número: <input type=”text” size=”3″><br> = Primeiro campo de texto
Segundo Número: <input type=”text” size=”3″><br> = Segundo campo de texto
Clique aqui para o resultado: <input type=”button” value=”Calcule” onclick=”calcula()”> = Responsável por chamar a função do JavaScript que faz o cálculo e abre a janela do Windows com a resposta.
</form> = Fecha o formulário
</body> = Fecha o corpo do documento
</html> = Fecha o documento
É isso pessoal! Espero que tenha ajudado a esclarecer suas eventuais dúvidas, além de ajudar quem está começando a partir de agora a conseguir entender melhor como as coisas funcionam quando se deparar com um código JavaScript pela frente.
Até nosso próximo tutorial!
