INTRODUÇÃO AO JAVASCRIPT

Qual é a diferença entre Java e JavaScript?

 

JavaScript Java
Interpretados pelo cliente. Compila os bytecodes que são executados no cliente.
Orientada a Objetos. Não existe distinção entre typos de objetos. A herança é obtida através de um mecanismo de prototipação, e  propriedades e métodos podem ser adicionados a qualquer objeto dinamicamente. Baseado em classes. Objetos são dividos em classes e a herança é obtida através da instância (objeto) que herdam características das classes que estão em niveís de hierarquia acima. Classes e instâncias  não podem ter propriedades e métodos adicionados dinamicamente.
Variáveis e tipos não são declarados (tipos dinâmicos)  Variáveis e tipos obrigatoriamente são declarados (tipos estáticos) 
Não pode gravar em disco automaticamente. Não pode gravar em disco automaticamente.

Comparação entre JavaScript e Java

Embutindo JavaScript em um Documento HTML

<html>
<head>
<title>Meu primeiro JavaScript!</title>
</head>
<body>
<br>
<p align="center"><font color="#0080FF">Esta linha utiliza HTML!</font>
<p align="center"><font color="#3299CC"><script language="JavaScript">
<!--
document.write("Esta linha utiliza JavaScript!")
--> </script></font>
<p align="center"><font color="#0080FF">De volta ao HTML.</font></p>
</body>
</html>

Esta linha utiliza HTML!

De volta ao HTML.

Ignorando JavaScript em Browsers que não suportam seu código

<!-- 
  Bloco de comandos JavaScript... 
--> 

O uso do cabeçalho

<html>
<head>
<title>Usando o Cabeçalho para fazermos as definições</title>
<script language="JavaScript">
<!--
variavel1 = "Bem Vindos ao mundo JavaScript pessoal da SEFIN!"
--> </script>
</head>
<body>
<H2>
<p align="center"><script language="JavaScript">
<!--
document.write(variavel1)
--> </script>
</H2>
</body>
</html>
<html>
<head>
<title>Usando uma variável antes de fazermos as definições</title>
<script language="JavaScript">
<!--
document.write(variavel1)
--> </script>
</head>
<body>
<H2>
<p align="center"><script language="JavaScript">
<!--
variavel1 = "Bem Vindos ao mundo JavaScript pessoal da SEFIN!"
--> </script>
</H2>
</body>
</html>

Variáveis e Tipos

Variáveis

Tipos

Number

Inteiros

 

Decimal Hexadecimal equivalente Octal equivalente
19 0x13 023
255 0xff 0377
513 0x201 01001
1024 0x400 02000
12345 0x3039 030071

Exemplo de inteiros decimal, hexadecimal e octal equivalentes.

<script language="JavaScript">
<!--
document.write("0xab00 + 0xcd = ")
document.write(0xab00 + 0xcd)
document.write("<p>")
document.write("0xff -0123 = ")
document.write(0xff -0123)
document.write("<p>")
document.write("-0x12 = ")
document.write(-0x12)
document.write("<p>")
document.write("19 + 0x13 + 023 = ")
document.write(19 + 0x13 + 023)
--> </script>

Ponto Flutuante

Boleanos

Strings

 

Caracter Descrição
\' aspas simples
\" aspas duplas
\\ recuo
\n nova linha
\t tabulação horizontal
\b um espaço a menos
\v tabulação vertical

Alguns caracteres usados para formatação especial

Array

<html>
<head>
<title>Usando Arrays</title>
<script language="JavaScript">
<!--
empregados = new Array(3)
--> </script>
</head>
<body>
<h1 align="center">Usando Arrays</h1>
<p>&nbsp;</p>
<script language="JavaScript">
<!--
empregados[0] = "Ednamai"
empregados[1] = "Adriwagner"
empregados[2] = "André"
document.write("Empregados[0]: " + empregados[0] + "<p>")
document.write("Empregados[1]: " + empregados[1] + "<p>")
document.write("Empregados[2]: " + empregados[2] + "<p>")
document.write("O tamanho do array é: " + empregados.length)
--> </script>
</body>
</html>

Objeto

objeto = {propriedade:valor}
<html>
<head>
<title>Usando Objetos</title>
<script language="JavaScript">
<!--
  nomeCarro = "Toyota";
  function tipoCarro(nome) {
    if(nome == "Honda")
      return nome;
    else
      return "Desculpe, nós não vendemos " + nome + ".";
  }
  carro = {meuCarro: "Audi", getCarro: tipoCarro("Honda"), especial: nomeCarro}
--> </script>
</head>
<body>
<p>&nbsp;</p>
<script language="JavaScript">
<!--
  document.write(carro.meuCarro + "<p>"); // Audi
  document.write(carro.getCarro + "<p>"); // Honda
  document.write(carro.especial); // Toyota
--> </script>
</body>
</html>

Operadores

Operadores de atribuição

 

Caracter Significado
x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y

Alguns dos principais operadores de atribuiçãol

Operadores de comparação

 

Caracter Significado
Igual (==) Retorna verdadeiro se os operandos são iguais. Se os dois operandos não são dos mesmo tipo, JavaScript tenta converter um dos operandos em um tipo apropriado para a comparação
Diferente (!=) Retorna verdadeiro se os operandos não são iguais. Se os dois operandos não são dos mesmo tipo, JavaScript tenta converter um dos operandos em um tipo apropriado para a comparação
Estritamente igual (===) Retorna verdadeiro se os operandos são iguais e do mesmo tipo
Estritamente diferente (!==) Retorna verdadeiro se os operandos não são iguais ou não são do mesmo tipo
Maior que (>) Retorna verdadeiro se o operando da esquerda é maior que o operando da da direita.
Menor que (<) Retorna verdadeiro se o operando da esquerda é menor que o operando da da direita.
Maior que ou igual (>=) Retorna verdadeiro se o operando da esquerda é maior ou igual que o operando da da direita.
Menor que ou igual (<=) Retorna verdadeiro se o operando da esquerda é menor ou igual  que o operando da da direita.

Alguns dos principais operadores de comparação

Operadores aritméticos

 

Caracter Significado
módulo (%) Operador binário. Retorna um inteiro resultante da divisão de dois operandos.
incremento (++) Operador unário. Adiciona um ao seu operando. Se usado como prefixo (++x), ele retorna o valor de seu operando e depois o incrementa. Se usado como sufixo (x++), ele retorna o valor de seu operando já com o incremento
decremento (--) Operador unário. Subtrai um ao seu operando. Se usado como prefixo (--x), ele retorna o valor de seu operando e depois o decrementa. Se usado como sufixo (x--), ele retorna o valor de seu operando já com o decremento
negação (-) Operador unário. Retorna o negativo de seu operando.

Alguns dos principais operadores aritméticos

Operadores lógicos

 

Caracter Modo uso Significado
&& espressão1 && expressão2 Operador E. Retorna expressão1 se ela  puder ser convertida para falso, caso contrário, retorna expressão2. Quando usado com valores boleanos, retorna verdadeiro se ambos operandos forem verdadeiros, caso contrário, retorna falso.
|| espressão1 || expressão2 Operador OU. Retorna expressão1 se ela  puder ser convertida para verdadeiro, caso contrário, retorna expressão2. Quando usado com valores boleanos, retorna verdadeiro se pelo menos um dos operandos forem verdadeiros, caso contrário, retorna falso.
! !expressão Operador NOT. Retorna false se o opando puder ser convertido para verdadeiro, caso contrário, retorna verdadeiro.

Alguns dos principais operadores lógicos

a1 = verdadeiro && verdadeiro // v && v retorna verdadeiro 
a2 = verdadeiro && falso // v && f retorna falso 
a3 = falso && verdadeiro // f && v retorna falso 
a4 = falso && (3 == 4)  // f && f retorna falso 
a5 = "Gato" && "Cachorro" // v && v retorna Cachorro
a6 = falso && "Cat" // f && v retorna falso 
a7 = "Cat" && false // v && f retorna falso 
o1 = verdadeiro || verdadeiro // v || v retorna verdadeiro 
o2 = falso || verdadeiro // f || v  retorna verdadeiro 
o3 = verdadeiro || falso // v || f retorna verdadeiro 
o4 = falso || (3 == 4) // f || f retorna falso 
o5 = "Gato" || "Dog" // v || v retorna Gato
o6 = falso || "Gato" // f || v retorna Gato
o7 = "Gato" || falso // v || f retorna Gato
n1 = !verdadeiro // !v retorna falso 
n2 = !falso // !f retorna verdadeiro 
n3 = !"Gato" // !v retorna falso 

Operadores string

"Secretaria de " + "Finanças" = "Secretaria de Finanças"

Comandos

 

Caracter Significado
do...while Executa um bloco de comandos até que o valor da condição de teste seja falso. Pelo menos um interação no bloco de comandos é executada.
for Comando que cria um loop que consiste de três expressões opcionais, delimitadas por parênteses e separadas por ponto e vírgula e seguidas por um bloco de comandos executados no loop.
for...in Comando que interage sobre um determinada varável ou sobre as propriedades de um objeto. Para cada propriedade distinta, ele executada o bloco de comandos.
function  Comando que declara uma função JavaScript com os parâmetros especificados. São aceitos parâmetros como strings, números e objetos.
if...else Comando que permite que um bloco de comandos  seja executado caso uma condição verdadeira. Se a condição for falsa, então outro bloco de comandos é executado.
return Comando que especifica o valor a ser retornado por uma função.
switch Permite que um programa avalie uma expressão e execute um determinado bloco de comandos que combinem com a expressão avaliada.
var Permite que uma variável seja declarada, opcionalmente atribuindo-lhe um valor.
while Comando que estabelece um valor "defaut" para um conjunto de comandos.

Alguns dos principais comandos em JavaScript

Eventos

 

Evento Descrição
onload  Ocorre na carga do documento.
onunload  Ocorre na saída do documento.
onchange  Ocorre quando o objeto perde o focus e houve mudança de conteúdo.
onblur  Ocorre quando o objeto perde o focus, independente de ter havido mudança.
onfocus  Ocorre quando o objeto recebe o focus.
onclick  Ocorre quando o objeto recebe um Click do Mouse. 
onmouseover  Ocorre quando o ponteiro do mouse passa por sobre o objeto.
onselect  Ocorre quando o objeto é selecionado.
onsubmit  Ocorre quando um botão tipo Submit recebe um click do mouse.

Alguns dos principais eventos em JavaScript

Funções

function nomeFuncao(argumento1, argumento2){
  Bloco de comandos... 
  return ...
}
function fatorial(n) {
   if ((n == 0) || (n == 1))
      return 1
   else {
      resultado = (n * fatorial(n-1) )
      return resultado
   }
}

Você pode então computar os fatorias:

a = fatorial(1) // retorna 1
b = fatorial(2) // retorna 2
c = fatorial(3) // retorna 6
d = fatorial(4) // retorna 24
e = fatorial(5) // retorna 120

Mensagens

Janelas

Validação de Formulários

javascript anterior próxima