Você está na página 1de 31

Estrutura e Banco de Dados

Contedo:
- JavaScript
- Formas de utilizao
- Conceitos bsicos
- Operadores
- Caixas de dilogo (entrada e sada)
- Comando de impresso
- Funes
- Eventos
- Converso de tipos

- Claudiney Sanches Jnior

JavaScript
Linguagem integrada ao navegador.

Usa o chamado modelo de execuo controlado por


eventos, ou seja, o cdigo JavaScript s executado quando
o evento ao qual est associado acionado, mas em alguns
casos, podemos inserir o cdigo sem a associao a eventos
e o mesmo executado conforme o navegador interpreta a
pgina.
Processamento do lado cliente, no navegador.

uma linguagem interpretada, diferente de outras


linguagens que fazem o processo de compilao antes de
executar o programa, como por exemplo a linguagem Java.

Java x JavaScript
JavaScript

Interpretada
Variveis no declaradas
No orientada a objetos,
embora possamos simular
algo neste sentido
Utilizada em pginas Web
Grava apenas arquivos de
cookies e consegue ler
arquivos no formato XML.

Java

Compilada
Variveis declaradas
100% orientada a objetos
Pode ser utilizada em:
Aplicativos desktop
Aplicativos distribudos (que
envolve conexes em rede)
Aplicativos mobile
Aplicativos web
Aplicativos para TV
Entre outros...

Criao e/ou manipulao:


Arquivos
Banco de dados

O que podemos fazer com JavaScript?


Podemos adicionar interatividade ao HTML
Fazer algumas animaes
Validar formulrios antes do envio
Manipular arquivos XML
Identificar o navegador e com isso executar determinados scripts

Criao de menus com submenus

Essas so algumas das vrias opes que tornam as pginas


desenvolvidas em HTML mais interativas, dinmicas.

Como inserir um cdigo JavaScript na pgina?


Podemos inserir nossos cdigos JavaScript das seguintes
formas:
Dentro do corpo da pgina <body>....</body>

Dentro do cabealho <head>....</head>


Dentro de um marcador html
Em um arquivo separado do html, este arquivo deve ter a extenso .js

JavaScript dentro do body e head


Se fizermos uma comparao com CSS, esse modo de inserir
JavaScript em uma pgina, seria o modo incorporado.
Dentro do body ou do head, utilizamos a tag <script>
Ex:
<html>
<head>
<title>Exemplo JavaScript</title>

<script language="javascript">
alert("Eu estou no cabealho.");
</script>
</head>
<body>

<script language="javascript">
document.write("Eu estou no corpo do documento.");
</script>
</body>
</html>

JavaScript em uma tag


Quando inserimos um cdigo JavaScript em uma tag, este
associado a um evento, os eventos sero vistos mais adiante,
por enquanto, faremos um exemplo simples com o evento
onclick que acionado quando o usurio clica no elemento.
Ex:
<html>
<head>
<title>Exemplo JavaScript</title>
</head>
<body>
<input type="button" value="Clique aqui"
onclick="window.status='Teste de javascript...'">
</body>
</html>

Arquivo JavaScript
Assim como em CSS, tambm podemos criar um arquivo separado
do html com nossos cdigos em JavaScript, esse arquivo deve ser
salvo com a extenso .js e chamado no cabealho da pgina com
a tag <script>
Ex:
<html>
<head>
<title>Exemplo JavaScript</title>

ex1.js
alert("Estou em um arquivo .js");

<script language="javascript" src="ex1.js"></script>


</head>
<body>
Contedo da pgina. Tambm podemos fazer aqui chamadas para blocos de cdigos do
arquivo .js.
</body>
</html>

Conceitos bsicos
Variveis

Toda varivel deve comear com uma letra ou um underscore(_);


Caracteres subseqentes devem ser letras ou nmeros;
No deve conter espao em branco ou caracteres especiais;
No deve ser uma palavra reservada.

JavaScript Case-Sensitive, logo as variveis abaixo so


todas diferentes:

quantidade
QUANTIDADE
Quantidade
QUantidade

Tipos de variveis
JavaScript uma linguagem de tipos de variveis flexveis, ao
contrrio de outras linguagens que exigem a declarao de
uma varivel com um tipo de dado definido.
Logo, no precisamos definir o tipo de uma varivel, com
isso podemos mudar seu valor de texto para nmero, por
exemplo, durante a execuo do script (essa prtica deve ser
evitada).
Ex:
var nome=Leonardo;
ou
nome=Leonardo;
ou
var nome;

Nos dois primeiros exemplos,


declaramos a varivel nome j com a
informao, no ltimo exemplo,
declaramos a varivel nome vazia.

Comentrios
uma boa prtica inserirmos comentrios em nossos cdigos, em
JavaScript podemos fazer isso de duas formas:
Para Comentrios de vrias linhas:
/* Inserimos aqui
Nossos comentrios
Em vrias linhas
*/

Para Comentrios de uma nica linha:


//Aqui inserimos somente uma linha de comentrio

Operadores Aritmticos
Para voc verificar a tabela abaixo, declaramos uma varivel x igual
a 10
var x=10;
Operador

Exemplo

Resultado

Adio

z = x + 10;

z = 20

Subtrao

z = x - 10;

z=0

Multiplicao

z = x * 10;

z = 100

Diviso

z = x / 10;

z=1

Mdulo (resto de uma operao de diviso)

z = x % 3;

z=1

++

Incremento antes

z = ++x;

z = 11

Incremento depois

z = x++;

z = 10

Decremento antes

z = --x;

z=9

Decremento depois

z = x--;

z = 10

--

Operadores de atribuio
Para voc verificar a tabela abaixo, declaramos duas variveis:
var x=10;
var y=2;

Operador

Exemplo

Equivalncia

Resultado

x=y

x=2

+=

x += y

x=x+y

x = 12

-=

x -= y

x=x-y

x=8

*=

x *= y

x=x*y

x = 20

/=

x /= y

x=x/y

x=5

%=

x %= y

x=x%y

x=0

Concatenao de Strings
Tambm usamos o operador + para concatenar Strings (textos) em
JavaScript
Ex:
var x=Bom;
var y=dia;
var z = x + y;
// aps a execuo o resultado ser: z=Bom dia
Cuidado, quando usamos o operador + com nmeros e textos, o resultado
sempre texto;
var x=4;
var y=a;
var z=x+y; // o resultado ser z=4a
var x=4;
var y=4;
var z=x+y; //o resultado ser z=44

Operadores de comparao
Para voc verificar a tabela abaixo, declaramos uma varivel
var x=10;
Operador

Descrio

Exemplo

==

Igual a

x == 20 (falso)

===

Exatamente igual a

x === 10 (verdadeiro)
x === 10 (falso)

!=

Diferente de

x != 20 (verdadeiro)

<

Menor que

x < 20 (verdadeiro)

<=

Menor ou igual a

x <= 10 (verdadeiro)

>

Maior que

x > 20 (falso)

>=

Maior ou igual a

x >= 10 (verdadeiro)

Operadores lgicos
Para voc verificar a tabela abaixo, declaramos duas variveis:
var x=10;
var y=2;

Operador

Descrio

Exemplo

&&

(x > y && y < 5) (verdadeiro)

||

ou

(x > y || y > 5) (verdadeiro)

Negao

! (x != y) (falso)

Tabela verdade
Expresso 1

Expresso 2

&&

||

Expresso

true

true

true

true

true

false

true

false

false

true

false

true

false

true

false

true

false

false

false

false

true = verdadeiro
false = falso

Caixa de dilogo
So meios bsicos para entrada e sada de informao
Caixa de alerta
Caixa de dilogo para exibir mensagens, possui somente um boto OK.
Sintaxe:
alert(Mensagem);
Caixa de confirmao
Caixa de dilogo bsica para tomada de deciso, possui dois botes, o boto OK
(retorna true) e o boto CANCELAR (retorna false), os valores retornados devem
ser armazenados em uma varivel.
Sintaxe:
varivel = confirm(Mensagem);
Caixa de entrada de dados
Caixa de dilogo para entrada de dados bsica, o valor deve ser armazenado em
uma varivel, o valor digitado sempre ser texto, logo, para operaes
matemticas precisamos converter os valores digitados para nmeros.
Sintaxe:
varivel = prompt(Mensagem,valor inicial opcional);

Caixa de dilogo (cont.)


<html>
<head>
<title>JS</title>

<script language="javascript">
//Caixa de mensagem
alert("Caixa de mensagem bsica");
//Caixa de confirmao
var x;
x = confirm("Quer continuar?");
//Caixa de mensagem
alert("Voc escolheu: " + x);
//Caixa de entrada
var nome;
nome = prompt("Digite seu nome");
//Caixa de mensagem
alert("Seu nome :" + nome);
</script>
</head>
<body>
</body>
</html>

Comando de impresso
Alm da caixa de dilogo alert, temos disponvel tambm
em JavaScript outro comando de impresso, neste caso, as
informaes so impressas na pgina e nos permite imprimir
tags html.
Sintaxe:
document.write(mensagem);
Exemplo:
var nome=Lukas;
document.write(<b>Nome: + nome + </b>);
OBS: as tags devem sempre estar dentro das aspas.

Funes em JavaScript
Funes so trechos de cdigos que podem ser acionados
atravs de uma chamada ou atravs de um evento.
Podemos chamar uma funo em qualquer ponto da pgina
e se a mesma estiver em um arquivo .js, podemos cham-la
em qualquer pgina que faz referncia ao arquivo JavaScript.
As funes geralmente so criadas em um arquivo .js ou no
cabealho (<head>) do documento html.
Uma funo pode ou no retornar uma resposta para o
ponto em que foi chamada, caso necessite de um retorno
(resposta), utilizamos o comando return.

Funes em JavaScript (cont.)


Palavra-chave utilizada para criar a funo

Parmetros
necessrios para a
funo ser processada
(opcional)

<script language="javascript">
function nomeDoMetodo(param1, param2, ....)
{
Nome do mtodo
//instrues
return valor; // opcional, usado somente quando necessrio
}
</script>

Corpo da funo, sempre delimitado por chaves {...}

Comando return, usado quando precisamos retornar uma


resposta da funo.

Exemplos bsicos de funes


<script language="javascript">

Funo soma, recebe dois parmetros (a , b), efetua a


soma entre eles e imprime na pgina, pulando uma
linha com o BR.

function soma(a , b)

{
document.write((a+b)+"<br />");
}
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
return nome;
}

Funo lerNome, no recebe parmetros, l um


nome atravs da janela de prompt e depois
retorna esse nome (return) para o ponto em que
foi chamada.

//chama a primeira funo


soma(2,2);
soma(3,4);

Chama a funo soma duas vezes com valores diferentes para a e b.


//chama a segunda funo
var resp;
resp = lerNome();
alert(resp);
</script>

Chama a funo lerNome, como a funo retorna um valor,


devemos atribuir este retorno para uma varivel, para que
posteriormente possamos manipular essa informao.

Eventos
Os eventos so aes que o usurio faz em uma pgina e
que so associados geralmente as funes do JavaScript ou
as funes que ns criamos em nossos cdigos.
Com a utilizao dos eventos, podemos criar pginas mais
dinmicas.

Principais eventos
Evento

Quando acionado

onload

Sempre que a pgina carregada ou recarregada.

onunload

Sempre que a pgina trocada ou fechada.

onfocus

Quando um elemento receber o foco.

onblur

Sempre que um campo de formulrio perder o foco.

onchange

Sempre que um campo tiver seu contedo alterado.

onclick

Sempre que um elemento receber um click.

onmouseover

Quando o mouse fica sobre o elemento.

onmouseout

Quando o mouse for retirado de cima do elemento.

onselect

Sempre que um contedo de um campo selecionado.

onsubmit

Quando enviamos (boto submit) um formulrio.

Existem outros eventos para mouse e alguns para tratarmos o teclado, neste
material, citamos somente os principais, porm voc poder encontrar uma referncia
completa em livros ou em alguns site da web.

Eventos (exemplo)
<html>
<head>
<script language="javascript">
function lerNome()
{
var nome;
nome = prompt("Digite seu nome","");
alert("Seu nome : "+ nome);
}
</script>
</head>
<body>
<input type="button" value="Ler o nome" onclick="lerNome()" />
</body>
</html>

Converso de tipos
Como comentado anteriormente, quando utilizamos a caixa
de prompt para entrada de dados do usurio, ou at mesmo
atravs de campos de texto de formulrios, os valores lidos

so sempre textos, caso seja necessrio realizar alguma


operao matemtica com os valores lidos, precisamos
inicialmente converte-los em nmeros, para isso temos duas
funes em JavaScript que convertem para inteiro ou para
float.

Converso de tipos (cont.)


Para converter um texto em nmero inteiro utilizado a funo
parseInt
Valor a ser convertido.
Sintaxe:
varivel = parseInt(valor [, base]);
Base da converso (opcional).

Para converter um texto em nmero real (float), utilizamos a funo


parseFloat.
Sintaxe:
varivel = parseFloat(valor);
Valor a ser convertido.

Converso de tipos (exemplo)


<script language="javascript">
function soma(a , b)
{
alert(a + " + " + b + " = " + (a+b));
}
//modo 1
var a;
var aux = prompt("Digite o valor de a","");
a = parseInt(aux);
//modo 2
var b = parseInt(prompt("Digite o valor de b",""));
//chama a funo
soma(a,b);
</script>

Exerccios
1.

Crie um arquivo HTML com o contedo abaixo. O nome da pessoa deve ser
informado pelo prompt do javascript e inserido na pgina.

Boa noite, <nome_da_pessoa> !


Veja nossas ofertas!

Guarda-sol
R$ 70,00

Sacola de praia
R$ 30,00

Paleta de tintas
R$ 45,00

Exerccios
2.

Crie um arquivo HTML que utilizando javascript leia a base e a altura de um


retngulo, calcule sua rea e permetro e apresente os resultados no corpo do
HTML.

3.

Crie um arquivo HTML que utilizando javascript leia hora e minuto, converta
tudo para minutos e apresente os resultados no corpo do HTML.

4.

Crie um arquivo HTML que utilizando javascript leia dois nmeros. Dentro
deste arquivo crie uma funo para somar, uma para subtrair, uma para
multiplicar, uma para dividir e uma para pegar o resto da diviso. Apresente os
resultados do uso de todas as funes no corpo do HTML, passe os dois
nmeros lidos como parmetros para as funes.

Exerccios
5.Monte um HTML conforme exemplo abaixo:

Crie 3 funes:
Uma que seja chamada no evento onload do body. Ela deve solicitar dois
nmeros float via prompt;
Uma que seja chamada no evento onclick da imagem do sinal de +. Ela
deve utilizar os nmeros informados para a fazer soma e exib-los via Alert;
E uma que seja chamada no evento onmouseover da imagem da mo. Ela
deve exibir a mensagem Passei por aqui! via Alert.