Aula javascript

O que é o JavaScript?
 O JavaScript é uma linguagem de
programação criada em 1995 por Brendan
Eich, da Netscape Navegator v2.0.
 JavaScript é uma linguagem de programação
utilizada para criar pequenos programas para
realizar ações em uma página web.

A Web é construída por três camadas:
 Conteúdo
 Formatação
 Comportamento

 O JavaScript não está relacionado ao java
 O JavaScript é enviado ao cliente como parte
do código HTML
 É utilizado para criar efeitos especiais.

Estrutura básica de um script:
<SCRIPT LANGUAGE=“JavaScript”>
Instruções
</SCRIPT>

Exibição de Informações
 document.write(“mensagem”);

Exemplo 01
<html>
<head>
<script language="JavaScript">
document.write("Bem vindo a linguagem
JavaScript")
</script>
</head>
<body>
</body>
</html>

Exemplo 01
<html>
<head>
document.write("Bemvindo a linguagem
JavaScript")
</script>
</head>
<body>
</body>
</html>

Caixas de Diálogo
alert()
promt()
confirm()

Usando o alert()
 Sua função é mostrar apenas uma
mensagem, com um botão de confirmação
para que este seja fechado.

<html>
<head>
alert("Bem vindo a linguagem JavaScript")
</script>
</head>
<body>
</body>
</html>

Usando prompt()
 A caixa de diálogo prompt nos solicita uma
entrada.
 A função permite um string como parâmetro

<html>
<head>
var nome=window.prompt("Por favor informe seu
nome:","");
document.write("Bem vindo(a),"+nome);
</script>
</head>
<body>
</body>
</html>

Usando o confirm()
 A caixa de diálogo de confirmação é chamada
com a função confirm() que terá também dois
botões:
o OK
o CANCELAR

Usando o confirm()
 A confirmação também retornará um valor:
o TRUE
o FALSE
 Isso a torna ideal para ser usada como
estrutura se le tiva if.

<html>
<head>
escolha= confirm("Clique em um botão");
if(escolha)
{alert("Você clicou no botão OK " +"valor:
"+escolha);}
{alert("Você clicou no botão CANCELAR "+"valor:
"+escolha);}
</script>
</head>
<body>
</body>
</html>

Conversão de Variáveis
 Diferentemente das maiorias das linguagens,
o JavaScript define as variáveis
dinamicamente.
 Ao atribuir uma variável, ele escolhe o tipo
conforme o valor passado para a variável,
não sendo necessário especificá-lo.

 O JavaScript entende que o que é digitado é
um string.
 Para trabalhar com número é necessário fazer
a devida conversão

 eval()
 parseint()
 parsefloat()

Exemplousandooeval()
<html>
<head>
var n1,n2, n3,soma,num1,num2;
n1=eval(window.prompt(“Por favor informe o
primeiro número”,””));
n2= eval(window.prompt(“Por favor informe o
segundo número”,””));
soma=n1+n2;
document.write(“A soma é:”+soma)
</script>
</head>
<body>
</body>
</html>

Exemplousandoo
parseInt
<html>
<head>
N1=window.prompt(“Por favor informe o primeiro
número”,””);
n2= window.prompt(“Por favor informe o segundo
número”,””);
num1=parseInt(n1);
num2=parseInt(n2);
soma=n1+n2;
document.window(“A soma é:”+soma)
</script>

Exemplousandoo
parseFloat()
<html>
<head>
N1=window.prompt(“Por favor informe o primeiro
número”,””);
n2= window.prompt(“Por favor informe o segundo
número”,””);
num1=parseFloat(n1);
num2=parseFloat(n2);
soma=n1+n2;
document.window(“A soma é:”+soma)
</script>

Console do navegador
 Alguns navegadores dão suporte a entrada de
comandos pelo console. Por exemplo, no
Google Chrome o console pode ser acessado
por meio do atalho Control + Shift + J
 Experimente executar um alert no console e
veja o resultado:
alert("interagindo como console!");

Sintaxe básica
Operações matemáticas
> 12 + 13
25
> 14 * 3
42
> 10 - 4
6
> 25 / 5
5
> 23 % 2
1

Sintaxe básica
Operações matemáticas
var contador = 0;
undefined
> contador++
0
> contador
1
> contador++
1
> contador
2
var contador = 5;
undefined
> contador++
5
> contador
6
> contador++
6
> contador
7

Tipos
O JavaScript dá suporte aos tipos
 String (letras e palavras),
 Number (números inteiros, decimais),
 Boolean (verdadeiro ou falso) entre outros.
vartexto = "Uma String deve ser envolvida
em aspas simples ou duplas.";
varnumero = 2012;
varverdade = true;

 Quando utilizamos o JavaScript para interagir
com os elementos da página é muito comum
obtermos coleções.
 Para fazer alguma coisa com cada elemento
de uma coleção é necessário efetuar uma
iteração. A mais comum é utilizando o for:
var pessoas = ["João", "José", "Maria",
"Sebastião", "Antônio"];
for (var i = 0; i < pessoas.length; i++)
{ alert(pessoas[i]); }

 Essa sintaxe utilizando os colchetes
em pessoas[i] é uma maneira de selecionarmos
um elemento de um Array, no caso o valor de i é
um número para cada um dos elementos da
coleção.
 Para explorar o comportamento do Array você
pode realizar alguns testes com essa seleção:
 var pessoas = ["João", "José", "Maria",
"Sebastião", "Antônio"];
alert(pessoas[0]); alert(pessoas[1]);

Estruturas Condicionais e de
Repetição
If(condição verdadeira)
{
Uma ou várias instruções;
}

Estruturas Condicionais e de
Repetição
If(condição verdadeira)
{
instrução 1;
}
Else
Instrução 2
}

Exemplo
<html>
<head>
var resposta=confirm(“você gosta de maça”);
If(resposta==true)
{
document.write(“<p>Eu também gosto!</p>”);
}
else
document.write(“<p>Não gosta???</p>”);
}
< /script>
</head>
<body
</body>

 As funções podem ser definidas como um
conjunto de instruções, agrupadas para
executar uma determinada tarefa.
 Dentro de uma função pode existir uma
chamada a outra função. Para as funções
podem ser passadas informações, as quais
são chamadas de parâmetros.

 As funções podem ou não retornar alguma
informação, o que é feito com o comando
Return.
 A definição de uma função é feita da seguinte
forma:
Function NomeDaFunção([ parametro1,
parametro2, ..., parametroN ])
{
...
[Return(ValorDeRetorno)]

<html>
<head>
<script language="LiveScript">
Function hello(){
alert("Alô mundo!!!");
}
</script>
</head>
<body>
...
<script>hello();</script>
...
</body>
</html>

FunçõescomRetorno
<html>
<head>
function myFunction()
{return("Hello world!");}
</script>
</head>
<body>
document.write(myFunction())
</script>
</body>
</html>

onClick=”[funcao]”
Por exemplo:
onClick=”alert(‘Exemplo de click’);”.

<HTML>
<HEAD>
<TITLE>Exemplo de checkbox</TITLE>
<SCRIPT>
function clicou(campo)
{
if (campo.checked)
alert("O campo esta selecionado");
else
alert("Campo desmarcado !");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=beige>
<H1>Selecionando uma checkbox</H1>
<FORM>
<INPUT TYPE=checkbox onclick="clicou(this)"> Marque esta opcao !<BR>
</FORM>
</BODY>
</HTML>

Operadores Lógicos
Operadores : E e OU
If( condição 1)&&(condição 2)
If( condição 1)||(condição 2)

 && Retorna verdadeiro se as duas condições
forem verdadeiras e falso se uma das duas
condições forem diferentes
 || Retorna verdadeiro se as pelo menos uma
das condições forem verdadeiras e falso se
nenhuma das condições verdadeiras
 !  Retorna verdadeiro se a opração for falsa e
vice- versa

<html>
<head><title>Modelo com mensagem</title>
<SCRIPT language=“JavaScript”>
day=new Date()// Função que captura a data
hr=day.getHours()// Função que extrai a hora
If((hr>=1)&&(hr<12))
{
Document.write(“Bom dia”);

If((hr>=12)&&(hr<=18))
{
document.write(“boa tarde”);
}
If((hr>18)&&(hr<=24))
{
document.write(“boa Noite”);
}
</SCRIPT>
</head>
</HTML

Eventos
Existem diversos eventos que podem ser
utilizados para que a interação do usuário coma
página seja o ponto de disparo de funções que
alteram os elementos da própria página:
• onclick: clica com o mouse
• ondblclick: clica duas vezes com o mouse
• onmousemove: mexe o mouse
• onmousedown: aperta o botão do mouse

• onmouseup: solta o botão do mouse (útil com
os dois acima para gerenciar drag’n’drop)
• onkeypress: ao pressionar e soltar uma tecla
• onkeydown: ao pressionar uma tecla.
• onkeyup: ao soltar uma tecla. Mesmo acima.
• onblur: quando um elemento perde foco

 • onfocus: quando um elemento ganha foco
 • onchange: quando um input, select ou
textarea tem seu valor alterado
 • onload: quando a página é carregada
 • onunload: quando a página é fechada
 •onsubmit: disparado antes de submeter o
formulário. Útil para realizar validações

Funções Temporais
 Em JavaScript, podemos criar um timer para
executar um trecho de código após um certo
tempo, ou ainda executar algo de tempos em
tempos.
 A função setTimeout permite que agendemos
alguma função para execução no futuro e
recebe o nome da função a ser executada e o
número de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo
setTimeout(minhaFuncao, 1000);

 Se for um código recorrente, podemos usar o
setInterval que recebe os mesmos
argumentos mas executa a função
indefinidamente de tempos em tempos:
// executa a minhaFuncao de um em um
segundo
setInterval(minhaFuncao, 1000);

 JavaScript organiza todos os elementos de
uma Home Page dentro de uma hierarquia.
Cada elemento é visto como um objeto.
 Os objetos podem ter propriedades, métodos
e responder a certos eventos. Por isso é muito
importante entender a hierarquia dos objetos
HTML.

 No exemplo acima, nós temos, um link, duas
im ag e ns, e um fo rm ulário co m do is cam po s
te xto e dois botões. Do ponto de vista do
JavaScript a janela do bro wse r é um o bje to
windo w, q ue co nté m ce rto s elementos, como
a barra de status.

 Dentro da janela, nós podemos carregar uma
página HTML. Esta pág ina é um objeto
document.
 Desta forma o objeto do cum e nt re pre se nta o
do cum e nto HTML (q ue e stá carre g ado no
m o m e nto ). O o bje to do cum e nt é m uito
im po rtante , e m JavaScript vo cê se m pre o
usará m uito . As pro prie dade s e m é to do s do
objeto do cum e nt se rão vistas
de talhadam e nte , m ais adiante .

 Se você então precisar saber como
referenciar a primeira imagem na página
HTML, basta se g uir o caminho hierárquico.
Você deve percorrer o diagrama de cima para
baixo, o primeiro objeto é chamado document,
a primeira imagem é representada por
Imagem[0]. Desta forma nós podemos acessar
este objeto em JavaScript, da seguinte forma:
do cum e nt. Im ag e m [0 ].

 Novamente nós seguiremos o diagrama de
hierarquia, de cima para baixo. Siga o
caminho que leva até Ele m [0 ]. To do s o s
no m e s de o bje to po r o nde você passou tem
que constar na referência ao primeiro
elemento do formulário. Desta forma você
pode acessar o primeiro elemento texto
assim: do cum e nt. Fo rm [0 ]. Ele m [0 ]

 Mas como obteremos agora, o texto digitado?
Este elemento texto possui uma propriedade
chamada value - não se pre o cupe ag o ra, co m
pro prie dade s, m é to do s o u e ve nto s, e le s se rão
visto s detalhadamente mais adiante - esta
propriedade armazena o conteúdo do objeto,
ou seja, o texto digitado. A seguinte linha de
código obtém o texto digitado:
nome=document.forms[0].elements[0].value;

 A string é arm az e nada na variáve l nam e . Nó s
po de m o s ag o ra trabalhar co m e sta variáve l.
Po r exemplo, nós podemos criar uma janela
po pup co m alert("Oi "+name);. Seaentradafor
"Anderson" o comando alert("Oi "+name)
abrirá uma janela popup com o texto "Oi
Anderson".

 <form NAME="clientes">
Nome: <input TYPE="text" NAME="empresa"
value=" ">
 document.forms[0].elements[0].value;
 document.clientes.empresa.value;

Aula javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Aula javascript

Similar to Aula javascript (20)

More from Gabriel Moura

More from Gabriel Moura (9)

Recently uploaded

Recently uploaded (20)

Aula javascript

Editor's Notes