Professional Documents
Culture Documents
Introduo
JavaScript Java?
Diferenas de JS e Java
Formas de usar o JS
isso para garantir que o cdigo JavaScript seja carregado antes que o
usurio interaja com a Home Page), ou seja, antes do <BODY>.
Exemplo
<html>
<head>
<title> Exemplo </title>
<script language="javaScript">
function nomedafuncao()
{
//comandos javascript...
}
</script>
</head>
<body>
<script>
//comandos javascript
</script>
</body>
</html>
Consideraes Iniciais
Variveis
Variveis
Numricas
Strings.
undefined
Objects
Voc pode trabalhar ainda com Arrays, mas para isso ser
necessrio algum conhecimento sobre Programao
Orientada a Objetos.
Tipo de dados
nativo que
representa
colees de
propriedades
contendo valores de
tipos primitivos,
function ou object
boolean
representa valores
booleanos
Object
Boolean
Funct ion
Array
N umber
Dat e
St ring
M at h
number
undefined
null
representa o valor
nulo
Global
undefined
representa valores
ainda no definidos
Objetos nativos
embutidos
object
null
representa nmeros
de ponto-flutuante
IEEE 754 com pr eciso
de 15 casas decimais
(64 bits)
st ring
true
false
representa cadeias
ordenadas (e
indexveis) de
caracter es Unicode.
"\u0000 - \uFFFF"
'\u0000 - \uFFFF'
''
""
"abcde012+$_@..."
Exemplos de number
hx= 0xffac;
// hexa: 0123456789abcdef
float= 1.78e-45;
// ponto-flutuante: .0123456789eoct= 0677;
// octal: 01234567
soma = h + 12.3 + oct - 10;
// converso automtica
if(valorNota==3)
alert(FALSE!);
ONCLICK="alert('Oh no!')"
VALUE="No aperte!">
// b contm a string 10
document.write(a + b);
// imprime 105
c = parseInt(a) + parseInt(b);
// converte strings em inteiros decimais
document.write(c);
// imprime 15
Caracteres especiais
Quando necessrio imprimir aspas dentro de aspas
preciso usar um caractere especial de escape.
O caractere usado para este fim dentro de strings a contrabarra (\).
Use \' para produzir uma aspa simples e \" para produzir
aspas duplas.
A prpria contra-barra pode ser impressa usando \\.
Outros caracteres tambm podem ser impressos dessa
forma.
Funo
\"
\'
\\
Contra-barra ( \ )
\n
\r
\f
\t
\b
Retrocesso (backspace)
g = 3; // varivel global
function x() {
var g = 10; // esta varivel g local!
}
x();
// g (global) tem o valor 3!
Operadores
Operadores Matemticos
+, -, *, /, %, ++, --
Operadores Lgicos
Operadores de Atribuio
= Atribuir
+= Soma ou concatenao e atribuio: x+=5 // o mesmo que: x=x+5
-= Subtrao e atribuio. x-=5 // o mesmo que: x=x-5
*= Multiplicao e atribuio. x*=5 // o mesmo que: x=x*5
/= Diviso e atribuio. x/=5 // o mesmo que: x=x/5
%= Mdulo e atribuio. x%=5 // o mesmo que: x=x%5
Objetos
Objetos
Propriedades e Mtodos
Propriedades e Mtodos
Objeto String:
var txt = new String("Hello World");
Objetos
Trabalhar com objetos a nica forma de manipular os arrays,
vejamos como: Digamos que queremos implementar uma lista de
clientes, nosso objeto poderia ser definido assim:
A propriedade this especifica o objeto atual como sendo fonte dos valores
passados a funo.
Criando Objetos
Propriedades de Objetos
Teramos agora :
Comandos
Var
Forma Geral
Exemplo
with
Forma Geral
With (objeto) {
instrues; }
Exemplo
with (Math) {
a=Math.PI;
b=Math.Abs(x);
c=Math.E; }
break
Forma Geral
Exemplo
for (i=1;i<10;i++)
{
if (i==5)
break;
document.write(i);
}
continue
Forma Geral
Exemplo
Comentrios
/* */
//
Estruturas de Controle
Lao For
Forma Geral
Exemplo
Lao For/In
Lao while
Itera segundo uma determinada condio
Forma Geral
Exemplo
Lao do..while
Semelhante ao while, s que com o teste no final do lao
Exemplo
do {
x = x + "The number is " + i + "<br>";
i++;
}
while (i < 5);
Condicionais
If..else
function VerificaIdade(anos)
{
if (anos>=16)
return "J pode votar";
else
return "Ainda no pode votar";
}
Alternativa
variavelRetorno=(anos>=16)?"J pode votar":"Ainda no pode votar"
Exerccio
<html>
<head>
<title> Alo </title>
<script language="javaScript">
function VerificaIdade(anos)
{
if (anos>=16)
alert("J pode votar");
else
alert("Ainda no pode votar");
}
</script>
</head>
<body>
<form name="teste"
action="javascript:VerificaIdade(document.teste.idade.value)">
<input type="text" name="idade">
<input type="submit" value="clique aqui">
</form>
</body>
</html>
Condicionais
Instruo if...else if...else
if (hora < 10)
{
x = bom dia";
}
else if (hora < 20)
{
X = boa tarde";
}
else
{
x = boa noite";
}
http://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif
Condicionais
Instruo switch
A palavra-chave
default pode ser
utilizada para definir
as operaes a serem
realizadas quando
nenhuma das opes
for satisfeita
http://www.w3schools.com/js/tryit.asp?filename=tryjs_switch
Instrues Javascript
document.getElementById("demo").innerHTML="Hello Dolly";
Restries Javascript
Funes Javascript
Sintaxe:
function functionName(argument1, argument2) {
some code to be executed;
}
Exemplo
(http://www.w3schools.com/js/tryit.asp?filename=tryjs_function3):
Exemplo (Funo)
<html>
<head>
<title> Alo </title>
<script language="javaScript">
function Hello()
{
alert("Ola!!!");
}
</script>
</head>
<body>
<form action="javaScript:Hello()">
<input type="submit" value="clique aqui">
</form>
</body>
</html>
Funes nativas
Funo
O que faz
parseInt(string)
ou
parseInt(string, base)
parseFloat(string)
isNaN(valor)
eval(string)
escape(string)
unescape(string)
Funes internas
Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK.
Funes internas
Converte uma string, que representa um nmero em uma base predefinida para base
10. Caso a string possua um caractere que no possa ser convertido, a operao
para, retornando o valor antes do erro.
Podemos usar
x = window;
// x uma referncia Window
y = x.document;
// window.document ref. Document
z = y.figura3
// window.document.figura3 ref. do tipo Image
z.src = "jegue.gif";
// src propriedade (tipo String) de Image
window.document.write("Tigres");
document.write("Tigres");
janela2 = window.open("pagina2.html");
/* mtodo open retorna referncia do tipo Window
que propriedade da janela atual (window) */
janela2.document.open();
janela2.document.write("Eu escrevo na Janela 2");
Windows
o objeto que ocupa o topo do esquema hierrquico em JavaScript.
Propriedades:
defaultStatus - Determina o contedo padro da barra de status do
browser, quando nada de importante estiver acontecendo.
Windows
parent - Refere-se a janela pai da frame atual.
self - Refere-se a janela atual.
Windows
top - Refere-se a janela de nvel mais alto do esquema hierrquico do JavaScript.
Windows
Mtodos
alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e
o boto de OK.
close - Termina a sesso atual do browser.
confirm - Mostra uma caixa de dilogo, seguida de um sinal
sonoro e os boto de OK e Cancel.
Retorna um valor verdadeiro se o usurio escolher OK.
Windows
open - Abre uma nova sesso do browser, como se o usurio
pressionasse <CTRL>+N
Onde:
Onde:
Onde:
Windows
Caracteristicas ;
Toolbar=0 ou 1
Location=0 ou 1
Directories=0 ou 1
Status=0 ou 1
Menubar=0 ou 1
Scrollbars=0 ou 1
Resizable=0 ou 1
Width=valor inteiro positivo
Height=valor inteiro positivo
Windows
prompt - Monta uma caixa de entrada de dados, de forma
simplificada comparando-se com o objeto text.
Windows
Objeto Location
location.propriedade;
location.metodo();
Location
Location
Objeto Navigator
Neste objeto ficam armazenadas as informaes
sobre o browser que est sendo utilizado.
Forma Geral:
Navigator.propriedade;
Objeto Navigator
Contm informao sobre o browser.
Propriedades:
appCodeName - Armazena o codnome do browser.
Exemplo: Navigator.appCodeName;
Document
Este objeto armazena todas as caractersticas
da pgina HTML, como por exemplo: cor das
letras, cor de fundo, figura que aparecer como
papel de parede, etc. Sempre que inclumos
alguma declarao no <body> do documento,
estamos alterando o objeto Document.
Document
Forma Geral
Document
Onde:
Imagem = figura no formato GIF, que servir como papel
de parede para a Home Page;
#Cor... = nmero (hexadecimal), com seis dgitos, que
corresponde a cor no formato RGB, o "#" obrigatrio. Os
dois primeiros dgitos correspondem a R (red), os dois do
meio a G (green) e os dois ltimos a B (blue).
A combinao dos trs, forma a cor no formato RGB.
funo = Nome de uma funo pr-definida, que ser
chamada quando o evento ocorrer.
Document
Propriedades:
alinkColor - Determina a cor do link enquanto o boto do o
mouse estiver pressionado sobre ele
Document
Propriedades:
bgColor - Determina a cor de fundo da pgina HTML.
Document
Propriedades:
.fgColor - Determina a cor das letras em uma pgina
HTML. Esta propriedade no altera o que j est
impresso na pgina HTML.
Document
Propriedades:
Document
links - Vetor que armazena os links definidos em uma
pgina HTML. Esta propriedade somente para leitura,
no pode ser alterada.
Document
referrer - Armazena o endereo (URL) de quem chamou a pgina
HTML atual. Com essa propriedade voc pode saber como usurio
chegou sua pgina. Esta propriedade somente para leitura, no
pode ser alterada.
Document
writeln - Imprime informaes na pgina HTML e passa para a
prxima linha. Em meus testes, esse mtodo no apresentou
diferena com relao ao mtodo write.
Document
Eventos:
onLoad - Ocorre assim que um browser carrega uma pgina
HTML ou frame.
Document
clear - limpa a tela da janela atual.
open - Abre um documento e envia (mas no exibe) a
sada dos mtodos write/writeln. Os dados enviados
so exibidos, quando encontrado o mtodo close.
close - Termina uma seqncia iniciada com o mtodo
open, exibindo o que tinha sido apenas enviado.
write - Imprime informaes na pgina HTML.
Manipulao de objetos
Exemplo:
<form name="f1">
<input type=button name="botao1" value="Boto 1">
<input type=text name="campoTexto" value="Texto Muito
Velho">
</form>
texto = document.f1.campoTexto;
textoVelho = texto.value;
texto.value = "Novo Texto";
//ou
textoAntigo = document.f1.campoTexto.value;
document.f1.campoTexto.value = "Novo Texto";
Form
Os formulrios tem muitas utilidades, uma das principais seria a
transferncia de dados dentro da prpria pgina HTML, sem que
para isso seja necessria a interveno de qualquer outro meio
externo.
Ao se criar um formulrio na pgina HTML, automaticamente
Form
Como voc pode notar, cada formulrio criado em uma pgina
HTML, considerado um objeto distinto, tendo suas prprias
referncias, mtodos, propriedades e eventos associados. A
forma de acessarmos diferenciadamente esses formulrios
dentro da pgina HTML, utilizar a propriedade form do objeto
document.
Form
Forma Geral
<FORM NAME=NOME
[ACTION=URL]
[METHOD=GET|POST]
[ON SUBMIT=EVENTO]
Onde:
Nome = Nome do formulrio, para futuras referncias dentro
da pgina HTML.
URL = Especifica o URL do servidor ao qual sera enviado o
formulario.
GET | POST = metodos de transferencia de dados do browser
para o servidor
Form
Propriedades:
action - Especifica o URL do servidor ao qual sera enviado
o formulrio.
Exemplo :
documento.NomedoFormulario.action
Document.Formulario.action=xxx@gmail.com
Form
Propriedades:
elements - Vetor que armazena todos os objetos que so
definidos dentro de um formulrio (caixas de texto, botes,
caixas de entrada de dados, checkboxes, botes de rdio). O
nmero de elementos deste vetor varia de 0 (zero) at o
nmero de objetos dentro do formulrio -1.
Form
method - Seleciona um mtodo para acessar o URL de ao.
Os mtodos so: get e post. Ambos os mtodos transferem
dados do browser para o servidor, com a seguinte diferena:
method=get - os dados de entrada so acrescentados ao
endereo (URL) associado, como se fossem uma query
(pesquisa a banco de dados) comum;
method=post - os dados no so acrescentados ao URL, mas
fazem parte do corpo da mensagem enviada ao servidor.
Form
Esta propriedade pode ser alterada, porm s surtir efeito antes
que o formulrio seja mostrado na tela.
Form
Mtodos:
submit - Transfere os dados do formulrio para o endereo
especificado em action, para serem processados. Funcionado
de maneira anloga ao boto submit em HTML.
Form
Eventos:
onSubmit - Ocorre quando um boto do tipo submit recebe o
clique do mouse, transferindo os dados de um formulrio para o
servidor especificado em action.
Os dados s so enviados se o evento receber um valor
verdadeiro (true), valor este que pode ser conseguido como
resultado a chamada de uma funo que valida as informaes
do formulrio.
Objeto Select
selectName - Nome dado pelo
programador, para o objeto select
tamanho - Nmero de linhas, da caixa
select.
MULTIPLE - Se definido, permite que
vrias opes sejam selecionadas.
Objeto Select
Propriedades
Objeto Select
Objeto Button
Objeto Button
Propriedades:
NAME: Informa o nome do objeto button em forma de string, da
mesma forma como definido no campo Name que foi utilizado
na definio do boto. importante no confundir o campo
Name com a propriedade NAME, veja a diferena:
Objeto Button
Propriedades:
VALUE: Informa o label do boto em forma de string da mesma
forma como foi definido no campo Value que foi utilizado na
definio do boto.
Objeto Button
Mtodos:
click: Este mtodo simula um clique do mouse no objeto button, ou
seja, executa um procedimento associado a um boto como se o
boto tivesse sido pressionado mas sem que o usurio tenha
realmente clicado.
Objeto Button
Eventos associados:
onClick: Define o que fazer quando clicamos no objeto button
Exemplo:
CheckBox
Onde:
Type - Nome do objeto;
CheckBox
Propriedades:
name - Nome do objeto CheckBox em forma de string, da mesma
forma como definido no campo Name utilizado na criao da
CheckBox.
CheckBox
checked - Retorna um valor lgico que depende do estado do
objeto CheckBox
CheckBox
Mtodos:
click: este mtodo simula um clique do mouse no objeto CheckBox, ou
seja, executa um procedimento associado a uma CheckBox como se
estivssemos clicado na CheckBox mas sem que o usurio tenha
realmente clicado.
Eventos associados:
onClick: Define o que fazer quando clicamos no objeto CheckBox
CheckBox
CheckBox
Ex2:
MinhaData = new Date(1996, 05, 27)
Manipulando Arrays
Manipulando Arrays
Agora podemos criar novas instncias do objeto
"CriaArray" e aliment-los com os dados necessrios.
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Tera"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sbado"
Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"
Manipulando datas
Existe apenas uma funo para que se possa obter a data e a hora.
a funo Date(). Esta funo devolve data e hora no formato:
Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano
Ex.
Fri May 24 16:58:02 2007
Manipulando Strings
Manipulando Strings
Manipulando Strings
Exemplo
<html>
<body>
<script>
st=txt.split(" ");
document.write("<p>" + st[0] + " "+st[1].toUpperCase() +"</p>");
</script>
</body>
</html>
Manipulando datas
Para se obter os dados separadamente, existem os
seguintes mtodos:
Manipulando datas
Ex.:
DataToda = new Date()
DiaHoje = DataToda.getDay()
Para obter o dia da semana alfa, teremos que construir uma tabela
com os dias da semana e utilizar a varivel DiaHoje como indexador.
function CriaTab (n)
{
this.length = n;
for (var x = 1 ; x<= n ; x++)
{
this[x] = "" ;
}
}
NomeDia = new CriaTab(7);
NomeDia[0] = "Domingo" ;
NomeDia[1] = "Segunda" ;
NomeDia [2] = "Tera" ;
NomeDia[3] = "Quarta" ;
NomeDia[4] = "Quinta" ;
NomeDia[5] = "Sexta" ;
NomeDia[6] = "Sbado" ;
DiaSemana = NomeDia[DiaHoje] ;
Exemplo (Parte 1)
<html>
<head>
<script language="Javascript">
function CriaTab (n)
{
this.length = n;
Exemplo (Parte 2)
function chegada()
{
NomeMes[7] = "agosto";
NomeMes[2] = "maro";
NomeMes[5] = "junho";
NomeMes[8] = "setembro";
Exemplo (Parte 3)
</head>
<body OnLoad="chegada()">
Veja que interessante utilizao do evento <I>OnLoad</I>.
</body>
</html>
Manipulando datas
Ex.:
Para criar uma varivel tipo Date com o contedo informado pela aplicao,
existe o mtodo set.
Assim, temos os seguintes mtodos: setDate, setDay, setMonth, setYear,
setHours, setMinutes e setSeconds.
Seguindo o exemplo acima, para mudar o ms para novembro, teramos:
DataToda = new Date()
DataToda.setMonth(10)
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom
Exemplo 1:
<html>
<head>
<title> Exemplo de Select </title>
<script language="javaScript">
function Ver_select(Campo)
{ Icombo = Campo.selectedIndex;
alert ("Voce escolheu " + Campo.options[Icombo].text);
}
</script>
</head>
Exemplo 1:
<body>
<form>
<p> Objeto Select <select name="Combo1" size=1 onchange = "Ver_select(Combo1)">
<option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
<option>Opcao 6
</select>
</p>
</form>
</body>
</html>
Exemplo : 2 (Validao)
// JavaScript Document
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
function Mensagem()
{
alert("Formulrio Ok");
}
</script>
</head>
Exemplo 2 : (continuao)
<body>
<form name="myForm" action="javascript:Mensagem()"
onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Eventos
Eventos
<FORM>
<INPUT TYPE="button"
onClick="alert('Oh no,
voc acionou o sistema de autodestruio!')"
VALUE="No aperte este boto">
</FORM>
Principais eventos JS
Atributo
onclick
<a>, <input>
onselect
onchange
onfocus
onblur
onmouseover
<a>, <area>
onmouseout
<a>, <area>
onsubmit
<form>
onreset
<form>
onload
<body>
onunload
<body>
onerror
<img>, <body>
onabort
<img>
onload
Validao de e-mail
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length)
{
alert(No um endereo de email vlido");
return false;
}
Javascripts externos
Javascripts Externos
<!DOCTYPE html>
<html>
<body>
<h1>Minha Pgina na WEB</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> myFunction armazenada em um arquivo externo
chamado "myScript.js".</p>
<script src="myScript.js"></script>
</body>
</html>
!
http://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexample
Referncias Javascript
http://www.w3schools.com/jsref/default.asp