Introdução
O que é JavaScript ?
JavaScript é a linguagem de programação usada por 99% dos webmasters e de páginas web em geral. Como toda linguagem de programação, o JavaScript obedece uma série de convenções. Você deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maiúsculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem próxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas características e resultados.
Onde começar ?
Inicie o seu editor HTML preferido e faça o projeto de uma página. Crie algo parecido com o que está logo abaixo:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
</body>
</html>
Agora, entre as tags <body></body> vamos digitar o seguinte código:
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
Este script escreverá "Este é o meu primeiro JavaScript" quando você executar a página.
Entendendo o script
Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Você verá futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc.
Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir".
A parte do código:
document.write('Este é o meu primeiro JavaScript');
transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções, como veremos nas próximas partes do curso. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script".
E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não?
Vamos rever o código completo? Aqui está:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
</body>
</html>
Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o código:
<script language="javascript">
<!--
document.write('<b>Este é o meu primeiro JavaScript. Em negrito agora.</b>');
//-->
</script>
Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado.
Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics).
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
Este script escreverá "Este é o meu primeiro JavaScript" quando você executar a página.
Entendendo o script
Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Você verá futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc.
Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir".
A parte do código:
document.write('Este é o meu primeiro JavaScript');
transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções, como veremos nas próximas partes do curso. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script".
E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não?
Vamos rever o código completo? Aqui está:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
</body>
</html>
Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o código:
<script language="javascript">
<!--
document.write('<b>Este é o meu primeiro JavaScript. Em negrito agora.</b>');
//-->
</script>
Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado.
Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics).
<html>
<head><title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
<!--
var nome;
nome = window.prompt('Por favor, digite o seu nome', 'Seu nome');
document.write('Olá, ' + nome + '! Bem-vindo ao meu site.');
//-->
</script>
</body>
</html>
Este código exibirá uma mensagem parecida com a figura abaixo:
Vamos rever o código?
Criamos uma variável chamada nome. Observe que podemos criar uma variável com valor nulo (null) inicialmente, e só passar um valor a ela no momento oportuno. Não é um bom procedimento, pois corremos o risco de tentar acessar uma variável que não recebeu valores ainda. Caso isso aconteça, o JavaScript retornará o valor dessa variável como undefined. A seguir, definimos que a nossa variável nome deverá armazenar o valor digitado pelo visitante por meio da caixa de mensagem prompt. Prompts serão discutidos em outra parte do curso. Depois que o visitante digita o nome, nós já temos um valor para a nossa variável e podemos agora escrevê-la na página, usando uma mensagem adicional. Novamente tente entender a função da variável. Os demais elementos serão explicados mais adiante.
Então, lembre-se! Variáveis em JavaScript podem armazenar qualquer valor: strings, inteiros, valores true ou false (boolean) e assim por diante. Você pode diferenciar as suas strings de outros valores das variáveis, simplesmente fazendo uso das aspas simples ('valor') ou aspas duplas ("valor").
Para prosseguirmos precisamos antes saber algumas coisas...
Palavras Reservadas
Assim como em outras linguagens, Javascript possui palavras previamente designadas para algum procedimento, são elas::
Palavras Reservadas em JavaScript
| |||
abstract
boolean break byte case catch char class const continue debugger default delete do double |
else
enum export extends false final finally float for function goto if implements import in |
instanceof
int interface long native new null package private protected public return short static super |
switch
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 eval |
event
fileUpload focus form forms frame frames frameRate function getClass hidden history image images isNaN java JavaArray JavaClass JavaObject JavaPackage innerHeight innerWidth layer layers length |
link
location Math mimeTypes name navigate navigator netscape Number Object offscreenBuffering onblur onerror onfocus onload onunload open opener option outerHeight outerWidth packages pageXOffset pageYOffset parent |
parseFloat
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 |
Operadores Aritméticos
Operador
|
Usado para
|
Exemplo
|
Resultado
|
+
|
Adição
|
1 + 2;
|
3
|
-
|
Subtração
|
12 - 10;
|
2
|
*
|
Multiplicação
|
2 * 3;
|
6
|
/
|
Divisão
|
10 / 3;
|
3.33333333
|
%
|
Módulo
|
10 % 3;
|
1
|
++
|
Incremento
|
x = 5;
x++; |
x = 6
|
--
|
Decremento
|
x = 5;
x--; |
x = 4
|
-
|
Número Negativo
|
-20
|
20 negativo
|
Operadores Relacionais
Operador
|
Significado
|
Exemplo
|
==
|
Igual a
|
15 == 13 é false
|
!=
|
Diferente de
|
15 != 13 é true
|
>
|
Maior que
|
15 > 13 é true
|
>=
|
Maior ou igual a
|
9 >= 10 é false
|
<
|
Menor que
|
10 < 3 é false
|
<=
|
Menor ou igual a
|
10 <= 13 é true
|
Operadores Lógicos
Operador
|
Significado
|
y = 10; x 5
|
&&
|
e
|
(x == 10) && (y < 10) é true
|
||
|
ou
|
(x == 10) || (y == 10) é true
|
!
|
não
|
!(x == y) é true
|
Atenção! vamos resolver alguns exercícios.
1) - Criar um site que calcule a área de uma circunferência com o raio digitado pelo usuário.
O código poderia ser escrito assim ::
E, o resultado seria assim...
Vamos entender o código::
<script>
abrimos com a tag acima o script javascript
raio=0;
criamos a variável raio
area=0;
criamos a variável area
et=prompt("entre com o raio: ");
neste ponto criamos a variável "et" ( para a ENTRADA do valor ) e utilizamos a função prompt ( tipo de entrada dor janela e caixa de texto com botão OK e CANCELAR).
raio=eval(et);
agora inserimos o valor digitado pelo usuário na variável raio com a função eval para converter o valor lido do tipo texto em valor numérico.
area=3.14*(raio*raio);
calculamos a área da circunferência com a fórmula
document.write("O resultado é :: "+area);
imprimimos no navegador o texto + o resultado que possui a variável area
</script>
fechamos o script javascript
2) - Criar um site que leia o Nome e o Sobrenome e apresente o Nome Completo e uma Saudação.
Codigo...
Resultado no Navegador...
Fonte:http://www.arquivodecodigos.net/
Pronto! Pronto!
É isso!
Curta! Compartilhe e Apreenda !