Tutorial Javascript Básico Para Iniciantes, Variáveis e Sintaxe

Javascript 

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!

Comments

comments