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

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula javascript

Mais de Gabriel Moura

Último

Aula javascript

Notas do Editor