RESULTADO não é o mesmo que Resultado
Como qualquer outra linguagem de programação, o JavaScript também segue uma série de sintáxes e convenções. Se você já é programador, deve saber que em algumas linguagens tem que usar um ponto-e-vírgula ( no final de cada instrução, capitalizar a primeira letra de cada variável, não pode começar o nome de uma variável com um número e assim por diante. Programar é assim mesmo. Aprender uma série de regras e tentar infringí-las o mínimo possível. Seguindo essas regras de programação ao pé da letra, fará com que os seus scripts funcionem corretamente e não trará dor de cabeça na hora de ver o que deu "errado" em determinada função.
JavaScript é sensível a maiúsculas e minúsculas. Se você declarar uma variável de nome "Calculo", não poderá mais tarde tentar acessar essa variável usando o nome "calculo". Lembre-se disso. Se você alterar um simples "a" por "A", seu código não funcionará corretamente (se funcionar). E lembre-se! Nada de acentos.

O ponto-e-vírgula
Todas as instruções (não se preocupe; vamos falar sobre isso logo) em JavaScript devem terminar com um ponto-e-vírgula, que também serve para separar uma instrução da outra. Observe os seguintes trechos de código:

Código 1

<script language="javascript">
<!--
window.alert('Observe o ponto-e-vírgula no final da instrução.');
//-->
</script>

Código 2

<script language="javascript">
<!--
var numUm = 20;
var numDois = 30;
window.alert(numUm + numDois);
//-->
</script>

Espaços em branco
JavaScript, igual ao seu parceiro de trabalho, o nosso HTML de todos os dias, ignora espaços, tabulações e inserção de linhas novas que aparecem nas instruções. Mas cuidado! Enquanto você pode digitar o seu código assim:

var numUm=10;

ou

var numDois = 20;

sempre precisará de espaço entre os nomes das funções, instruções e nomes de objetos, como veremos em seguida. Quando os espaços estiverem dentro de uma string (nome dado a uma linha de texto em programação), o interpretador tratará esses espaços como parte da sua linha de texto. Para ver como isso funciona, volte ao nosso primeiro primeiro exemplo e dê alguns espaços na linha de texto a ser escrito na página.
Tente criar a sua própria maneira de escrever o seu código. Um código bem organizado fica fácil de ser lido mais tarde, e você poderá identificar onde uma instrução termina e a outra começa. Durante este curso vamos usar a convenção de espaçamento adotada pela grande maioria de webmasters. Tente seguí-la e cria a sua própria variação.

Linhas de texto (strings), aspas duplas e aspas simples
Uma string é uma sequência de texto formada por números, letras, espaços ou qualquer outro caractere. Nós vamos trabalhar com strings o tempo todo, portanto, vamos ver este tópico com muita atenção.

Todas as strings estarão fechadas por aspas duplas ("meu texto") ou aspas simples ('meu texto'), dependendo da ocasião.




As aspas simples são usadas dentro de uma instrução com aspas duplas ou vice-versa. Vamos ver o seguinte código:

<form>
<input type="button" value="Clique Aqui"
onclick="window.alert('Estou estudando JavaScript agora.');">
</form>

O código acima produzirá a seguinte mensagem:

Agora vamos entender o que está acontecendo.

Primeiro criamos um formulário com um botão e, ao clicar no botão, o seguinte evento aconteceu:

onclick="window.alert('Estou estudando JavaScript agora.');"

Ou seja, ao clicar no botão, a página exibirá a mensagem que está contida entre parênteses. Observe que usamos aspas duplas (" ") para definir o evento que aconteceria ao clicar no botão, e usamos aspas simples (' ') para definir a string a ser exibida na caixa de mensagem. Se você estiver achando isso meio complicado, não se preocupe. Durante o curso revisaremos estes conceitos.

A barra invertida (\n) e linha de texto (strings)
A barra invertida é usada com muita frequencia em JavaScript e não deve jamais se confundida com a barra simples (/). Usando a barra invertida, é possível inserir caracteres em nossas linhas de texto, produzidas por nossos scripts, que normalmente não poderiam ser produzidas pelo teclado somente. Suponhamos que queremos criar uma linha de texto que exiba o seu nome em uma linha e a sua ocupação na linha logo abaixo. Vamos ver o seguinte código:




<script language="javascript">
<!--
window.alert('Francisco Cardoso Silva Reis\nAssistente de
Programação');
//-->
</script>

Aqui a sua mensagem aparecerá em duas linhas, já que usamos a barra invertida juntamente com a letra "n". Sempre que você usar isso em seu código (\n), terá uma quebra de linha automaticamente.

O "\n" representa um retorno e uma inserção de linha (line feed). Isso é o que acontece quando você usa o retorno de uma máquina de escrever.

Temos muitas outras combinações da barra invertida com outras letras. Vamos ver algumas mais usadas.
SímboloDescrição
\bbackspace
\fform feed
\ninserir quebra de linha
\rretorno (sem inserção de linha)
\ttabulação
\'aspas simples (apóstrofo)
\"aspas duplas


A melhor maneira de ver o funcionamento destes símbolos é experimentando. Vamos ver alguns exemplos usando os dois últimos, já que são os mais importantes. Vamos ao seguinte caso:

Queremos mostrar uma mensagem que exiba o seguinte texto: She said, "I don't like you".

Podemos criar o seguinte código:

<script language="javascript">
<!--
window.alert('She said: "I don't like you"');
//-->
</script>

Tente executar este código e você perceberá uma imagem de erro. Vamos ver porque isso acontece. Sabemos que o interpretador trata as nossas linhas de texto de acordo com o uso das aspas simples e duplas. Como temos a linha de texto anteriormente colocada corretamente dentro das aspas, mas temos ainda as aspas e o apóstrofo na palavra "don't". O que fazer? Experimente a nova versão do código:

<script language="javascript">
<!--
window.alert('She said: \"I don\'t like you\"');
//-->
</script>

Este código exibirá a mensagem como queremos, já que ao usar a barra invertida antes das aspas ou apóstrofos, conseguimos fazer com que o interpretador as coloque nas mensagens ou escreva na página exatamente do jeito que queremos. Pratique muito esta parte. Você usará estes conceitos frequentemente em seus scripts.


O uso de parênteses, chaves e colchetes
Parênteses (), chaves {} e colchetes [] são usados com muita frequencia em JavaScript. Antes de tudo, lembre-se de que todas as vezes que você abrir um destes símbolos, deverá fechá-lo apropriadamente para que não apareça erro nos seus scripts.

Os parênteses são usados para conter os argumentos passados para funções ou métodos. Funções e métodos serão vistos mais adiante. Tente apenas entender o uso deste símbolo observando o código abaixo:



<script language="javascript">
<!--
window.open('exemplo1.htm', 'novaJanela', 'toolbar=no');
//-->
</script>

Você pode observar pelo exemplo acima que tudo que está dentro dos parênteses são argumentos passados para o método open do objeto window. Este método é usado para abrir uma nova janela, como veremos em outra parte do curso. Vale dizer que este código funciona perfeitamente. Coloque o código na parte <body></body> de sua página, troque "exemplo1.htm" pelo nome da página que você deseja abrir e execute para ver o resultado. Experimente com os códigos o máximo que você puder para ir pegando a maneira de programar em JavaScript.

Os colchetes [] são usados para acessar elementos de matrizes (arrays). Falaremos sobre arrays em outra parte do curso. Apenas dê uma olhada no código para ver como usamos os colchetes.

<script language="javascript">
<!--
var pessoas = new Array();

pessoas[0] = "Roberto";
pessoas[1] = "Marcelo";
pessoas[2] = "Carlos";
pessoas[3] = "Francisco";

document.write(pessoas[2]);
//-->
</script>

Observe que aqui usamos os colchetes para definir os elementos da matriz pessoas, e então usamos os parênteses para passar o argumento (um elemento da matriz) para o método write do objeto document. Não se preocupe com o código em si. Tente apenas entender o uso dos colchetes nesta parte do curso. Para praticar um pouco mais este trecho de código, experimente alterar o número entre entre o método:

document.write(pessoas[2]);

para um dos outros valores da matriz (0, 1, 2 ou 3). Execute o código várias vezes para ir treinando.

As chaves { } são usadas para conter múltiplas instruções. Com o uso de chaves é possível colocar várias instruções dentro de uma única funçõa ou fluxo de código.

Observe o código:

<script language="javascript">
<!--
var meuNumero = 10;

if(meuNumero == 10){
window.alert('O valor de meuNumero é igual a 10');
document.write('meuNumero é igual a 10');
}
//-->
</script>

Observe que aqui usamos as chaves para colocar as duas instruções que seriam chamadas, caso a instrução condicional:

if(meuNumero == 10)

retornasse um valor positivo. Instruções condicionais serão vistas em outra parte do curso.

Comentários
Sempre que você estiver escrevendo os seus códigos JavaScript, é uma boa idéia deixar alguns comentários neles. Comentários são úteis para mostrar informações sobre direitos autorais, assim como informações sobre cada função, caso precise revisar o seu código mais tarde. Ao comentar o código, tornará as coisas mais fáceis tanto para você como para quem for tentar entender o seu código mais tarde.




<script language="javascript">
<!--
// A linha abaixo escreve o texto na página
document.write('Este código está comentado');
//-->
</script>

Para comentar o seu código usando múltiplas linhas, você pode usar a barra juntamente com um asterísco no início e no fim do comentário. Abra o comentário usando /* e feche usando */. Observe o código abaixo:

<script language="javascript">
<!--
/* A linha abaixo escreve o texto na página e eu
estou usando mais de uma linha no meu
comentário
*/
document.write('Este código está comentado');
//-->
</script>

Seguindo estas diretrizes, você pode comentar os seus códigos da maneira que achar mais viável.

Nomes de variáveis e de funções
Nas próximas partes do curso, você será apresentado aos conceitos de funções e de variáveis em JavaScript. É importante que tenhamos algumas regras em mente antes de começarmos, já que na maior parte do tempo nós mesmos estaremos dando nomes às nossas funções e variáveis.




Os nomes das funções e das variáveis devem serguir algumas regras simples, conforme mostrado em seguida:

Regra 1: O primeiro caractere do nome da função ou da variável deve ser uma letra do alfabeto (maiúsculo ou minúsculo), uma barra (chamada em inglês de underscore) que deve ser escrita (_) sem nenhum espaço entre a barra e o próximo caractere ou um sinal de dólar $. O sinal de dólar não é recomendado, já que algumas versões do JavaScript não o reconhecem (versões mais antigas). Veja os exemplos de nomes de variáveis e funções exemplificando esta regra:

var MeuResultado = 234;
function Voltar()
var meuResultado = 394;
var _Resultado = 432;
function Visualizar_Resultado()
var $Canal = 'Outro';

Regra 2: Você não pode usar um número para iniciar o nome de uma função ou de variável. Tenha bastante cuidado com esta regra. Seus scripts podem não funcionar perfeitamente.

Regra 3: Nomes de variáveis e de funções não podem conter espaços. No caso de realmente precisarde um espaço (para identificar melhor uma função ou nome de variável), você pode usar a barra (_) como nos exemplos abaixo:

var Meu_Numero = 21;
function Fechar_Janela()

Regra 4: Os nomes das funções e das variáveis não podem ser iguais a nenhuma das palavras reservadas. Todas as linguagens de programação têm uma série de palavras que são usadas internamente, e quando estamos programando, não podemos usar estas palavras, pois o compilador ou o interpretador recusará o nosso código, já que o uso das palavras reservadas causará erros irremediáveis no fluxo do código. As palavras reservadas do JavaScript são listadas em seguida.

Recomendamos que você use sempre nomes bem sugestivos para as suas funções ou variáveis. Dando nomes fáceis de ser lembrados ou associados, fará com que o seu trabalho seja bem mais produtivo e poupará muito tempo na hora de referenciar esses nomes no seu código.

Palavras Reservadas
Como dito no tópico anterior, o JavaScript possui uma série de palavras que são usadas internamente pela linguagem pelo interpretador. Você deverá ter muito cuidado para não usar esses nomes na hora de criar as suas variáveis ou funções. A lista seguinte tenta mostrar todas as palavras reservadas. Versões mais atuais do JavaScript poderão ter outras mais. Lembre-se de ter a sua lista sempre atualizada.



Palavras Reservadas em JavaScript
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
doubleelse
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
ininstanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
superswitch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with


Além das palavras listadas acima, é recomendável evitar escolher nomes semelhantes aos da tabela abaixo para suas variáveis ou funções. Tais nomes são de objetos, métodos ou propriedades dos navegadores Internet Explorer, Netscape, Firefox, etc.
Evite usar as palavras abaixo
alert
all
anchor
anchors
area
array
assign
blur
button
checkbox
clearTimeout
clientInformation
close
closed
confirm
crypto
date
defaultStatus
document
element
elements
embed
embeds
escape
evalevent
fileUpload
focus
form
forms
frame
frames
frameRate
function
getClass
hidden
history
image
images
isNaN
java
JavaArray
JavaClass
JavaObject
JavaPackage
innerHeight
innerWidth
layer
layers
lengthlink
location
Math
mimeTypes
name
navigate
navigator
netscape
Number
Object
offscreenBuffering
onblur
onerror
onfocus
onload
onunload
open
opener
option
outerHeight
outerWidth
packages
pageXOffset
pageYOffset
parentparseFloat
parseInt
password
pkcs11
plugin
prompt
prototype
radio
reset
screenX
screenY
scroll
secure
select
self
setTimeout
status
String
submit
sun
taint
text
textarea
top
toString
unescape
untaint
valueOf
window