JavaScript Basico 01

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).

<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 !