Aula 03 - Conceitos Básicos

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

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

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.

Aula 03 - Conceitos Básicos

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula 03 - Conceitos Básicos

Transféré par

Droits d'auteur :

Formats disponibles

Estrutura e Banco de Dados

- Claudiney Sanches Jnior

Usa o chamado modelo de execuo controlado por

uma linguagem interpretada, diferente de outras

Criao e/ou manipulao:

O que podemos fazer com JavaScript?

Criao de menus com submenus

Essas so algumas das vrias opes que tornam as pginas

Como inserir um cdigo JavaScript na pgina?

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

JavaScript dentro do body e head

JavaScript em uma tag

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

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

JavaScript Case-Sensitive, logo as variveis abaixo so

Nos dois primeiros exemplos,

Para Comentrios de uma nica linha:

Mdulo (resto de uma operao de diviso)

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

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

Caixa de dilogo (cont.)

Funes em JavaScript (cont.)

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

Comando return, usado quando precisamos retornar uma

Exemplos bsicos de funes

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

Funo lerNome, no recebe parmetros, l um

//chama a primeira funo

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

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

Sempre que a pgina carregada ou recarregada.

Sempre que a pgina trocada ou fechada.

Quando um elemento receber o foco.

Sempre que um campo de formulrio perder o foco.

Sempre que um campo tiver seu contedo alterado.

Sempre que um elemento receber um click.

Quando o mouse fica sobre o elemento.

Quando o mouse for retirado de cima do elemento.

Sempre que um contedo de um campo selecionado.

Quando enviamos (boto submit) um formulrio.

so sempre textos, caso seja necessrio realizar alguma

Converso de tipos (cont.)

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

Converso de tipos (exemplo)

Boa noite, <nome_da_pessoa> !

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

Vous aimerez peut-être aussi