Você está na página 1de 153

Javascript

Prof. Claudio Azevedo Passos

Material resultante de anotaes em sala de aula e compilado


de vrios artigos da Internet

Introduo

JavaScript uma linguagem para auxilio na criao de Home-Pages, as

funes escritas em JavaScript podem ser embutidas dentro de seu


documento HTML, possibilitando o incremento das funcionalidades do seu
documento HTML com elementos interessantes. Sendo possvel: responder
facilmente a eventos iniciados pelo usurio, incluir efeitos que tornem sua
pgina dinmica. Logo, podemos criar sofisticadas pginas com a ajuda
desta linguagem.

Apesar dos nomes bem parecidos, Java no o mesmo que

JavaScript. Estas so duas tcnicas diferentes de programao na

Internet. Java uma linguagem de programao. JavaScript uma


linguagem de hiper-texto.

JavaScript Java?

NO! JS freqentemente confundida com a


linguagem Java, provavelmente devido semelhana
do nome. Apesar de possuir sintaxe parecida, JS no
tem nada a ver com Java!

O nome "script", que quer dizer roteiro, j indica que se


trata de uma linguagem interpretada. Alm do nome,
podemos apontar diversas outras diferenas

Diferenas de JS e Java

Interpretada. Programas em Java so compilados para um


cdigo de mquina, e depois executados. O JS interpretados
na pgina.

Simples. Programas em Java so bem mais poderosos e


complexos que programas JS, e no esto limitados pgina.

Pequena. JS (1.5) consiste de cerca de 400 estruturas. A API


do Java (2) possui mais de 20000 estruturas.

Extenso do HTML. Pode-se incluir uma applet em uma


pgina, porm no podemos incluir Java diretamente em uma
pgina Web. O cdigo JS vem embutido dentro da pgina. No
existe JS sem uma pgina.

O que podemos fazer com JS?

Realizar operaes matemticas e de computao.

Gerar documentos com aparncia definida na hora da


visualizao, com base em informaes do cliente.

Abrir janelas, trocar e manipular informaes como o


histrico, barra de estado, plug-ins, etc.

Interagir com o contedo do documento, alterando


propriedades da pgina.

Interagir com o usurio atravs de eventos.

Como programar JS?

O ideal ter a sua disposio:

Um bom editor de textos para editar o HTML

(Scite, UltraEdit, Adobe Dreamweaver, etc).

Alguns browsers comumente utilizados na web para testar

(Microsoft Internet Explorer, Mozilla Firefox, Opera, etc).

Um bom debugger para depurar o cdigo

(Microsoft Script Debugger, Firebug, Granjuxx Debugger, etc).

Formas de usar o JS

Em documentos HTML, a utilizao da linguagem JavaScript, se d sob

a forma de funes (applets), as quais so chamadas em determinadas


situaes ou em resposta a determinados eventos, estas funes podem
estar localizadas em qualquer parte do cdigo HTML, a nica restrio
que devem comear com a declarao <SCRIPT> e termina com o

respectivo </SCRIPT>, por conveno costuma-se colocar todas as


funes no incio do documento (estre as TAGs <HEAD> e </HEAD>,

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

importante ressaltar que todas as linhas devem ser terminadas


com; (ponto e virgula) a menos que a prxima instruo seja um
elsee se voc precisar escrever mais de uma linha para executar
uma condio seja ela em uma estrutura for, if ou while, este
bloco de instrues deve estar entre { } (chaves).

Inclusive a definio de funes segue este modelo, ou seja, todo o


cdigo da funo deve estar limitado por { (no incio) e } (no final).

Variveis

Para definir uma varivel, basta escolher um nome que


no seja uma palavra reservada e atribuir um valor:
preco = 10;
produto = Caneta para concurso;

Uma varivel tambm pode ser declarada sem um valor. Para


isto necessrio usar a palavra-chave var (valor undefined):
var nome;

Variveis

Existem trs tipos de variveis:

Numricas

Booleanas True ou False

Strings.

null Sem delimitadores

undefined

Objects

Voc pode trabalhar ainda com Arrays, mas para isso ser
necessrio algum conhecimento sobre Programao
Orientada a Objetos.

Tipos de dados e literais


Tipos e objet os
nat ivos
ECM AScript
funct ion
Tipo de objeto que
representa funes,
mtodos e
construtores

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

Tipos de dados primit ivos (que represent am valores)

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.

M in: 4.94065 e-324


M ax: 1.79769 e+308
NaN
Infinity
-Infinity

"\u0000 - \uFFFF"
'\u0000 - \uFFFF'
''
""
"abcde012+$_@..."

Tipos de dados e literais (cont.)

No preciso declarar as variveis.

var answer = "He is called 'Johnny'";


var answer = 'He is called "Johnny"';
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
var x = true;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
// ou
var cars = new Array("Saab","Volvo");

Tipos de dados e literais (cont.)

Uma varivel s muda de um tipo se durante o script for associado


um novo valor de um tipo diferente ao que ela armazenava antes.
Os tipos primitivos number, string e boolean so representados pelos
objetos nativos Number, String e Boolean, facilitando o uso de suas
propriedades e mtodos.
As variveis Javascript possuem tipos dinmicos
Uma mesma varivel pode armazenar dados de diferentes
tipos

var x; // Now x is undefined

var x = 5; // Now x is a Number

var x = "John"; // Now x is a String

Tipos de dados e literais (cont.)

Variveis do tipo number so representados


internamente como ponto-flutuante de dupla-preciso.

Nmeros iniciados em "0" so considerados octais e os


iniciados em "0x" so hexadecimais.

O tipo number tambm representa alguns valores


especiais, que so infinito positivo (Infinity), infinito
negativo (-Infinity) e indeterminao (NaN - Not a
Number).

Tipos de dados e literais (cont.)

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

Tipos de dados e literais (cont.)

Booleans representam os estados de ligado e


desligado atravs dos literais true e false.
Geralmente so obtidos como resultados de
expresses condicionais e lgicas.

if(valorNota==3)

alert(FALSE!);

Tipos de dados e literais (cont.)

Strings so identificados por literais contidos entre


aspas duplas ("...") ou simples ('...').
O texto entre aspas pode ser qualquer caractere
Unicode. Tanto faz usar aspas simples como aspas
duplas.
Geralmente usamos aspas simples quando um trecho
de cdigo JS que requer aspas embutido em um
atributo HTML, que j utiliza aspas duplas:
<INPUT TYPE="button"

ONCLICK="alert('Oh no!')"
VALUE="No aperte!">

Tipos de dados e literais (cont.)

A concatenao de strings realizada atravs do operador


+.
O operador += (atribuio composta com concatenao)
acrescenta texto a um string existente.
Qualquer nmero ou valor booleano que fizer parte de uma
operao de concatenao ser automaticamente
transformado em string.
str1 = "Eu sou uma string";
str2 = str1 + ' tambm!';
str3 = str2 + 1 + 2 + 3;
// str3 contm:
// Eu sou uma string tambm!123
str1 += "!";
// mesmo que str1 = str1 + "!".

Tipos de dados e literais (cont.)

Para converter um nmero ou booleano em string basta


utiliz-lo em uma operao de concatenao com uma string
vazia:
a = 10;
b = "" + a;

// b contm a string 10

A converso de strings em nmeros j no to simples.


preciso identificar a representao utilizada, se pontoflutuante, hexadecimal.
Para isto, JS fornece duas funes nativas: parseInt(string) e
parseFloat(string) que convertem strings em representaes
de nmero inteiro e ponto-flutuante respectivamente.

Tipos de dados e literais (cont.)


a = "10"; b = prompt("Digite um nmero");
// l string

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.

Caracteres especiais (cont.)


Caractere
especial

Funo

\"

Aspas duplas ( " )

\'

Aspas simples( ' )

\\

Contra-barra ( \ )

\n

Nova linha (line feed)

\r

Retorno de carro (carriage return)

\f

Avana pgina (form feed)

\t

Tabulao horizontal (horizontal tab)

\b

Retrocesso (backspace)

Escopo das variveis

global = 3; // escopo: toda a pagina


function x() {
local = 5; // escopo: somente o bloco da funo
global = 10;
}
x();
// local nao existe aqui so em x().
// global tem valor 10 para toda a pagina

Escopo das variveis (cont.)

O uso de var opcional na definio de variveis globais.


Variveis locais devem ser definidas com var para garantir
que so locais mesmo havendo uma varivel global com o
mesmo nome, por exemplo:

g = 3; // varivel global
function x() {
var g = 10; // esta varivel g local!
}
x();
// g (global) tem o valor 3!

Operadores

Operadores unrios e binrios


Operador de String

Operador de concatenao (+)

Operadores Matemticos

+, -, *, /, %, ++, --

Exemplos Operadores Matemticos

Comparaes no Javascript (dado x = 5):

Operadores Lgicos

Operadores Lgicos (dados x = 6 e y = 3)

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

A maior parte da programao em


JS realizada atravs de objetos.

Um objeto uma estrutura mais


elaborada que uma simples
varivel que representa tipos
primitivos.

Variveis podem conter apenas um


valor de cada vez. Objetos podem
conter vrios valores, de tipos
diferentes, ao mesmo tempo.

Um objeto , portanto, uma


coleo de valores.

Objetos

Um objeto definido entre abre e fecha chaves


As propriedades de um objeto so definidas em pares
nome e valor, separados por vrgula.
var person={firstname:"John", lastname:"Doe", id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
// Acesso s propriedades de um objeto
name = person.lastname;
name = person["lastname"];

Propriedades e Mtodos

Propriedades so valores associados objetos


Mtodos so aes que um objeto pode realizar
Exemplo: um objeto carro

Pode incluir as propriedades: nome, modelo, peso, cor, etc.


Pode incluir os mtodos: ligar(), acelerar(), frear(), etc.

Quase tudo em Javascript so objetos

Strings, Functions, Arrays, Dates...

Propriedades e Mtodos

Objeto String:
var txt = new String("Hello World");

Exemplo de propriedade txt.length


Exemplo de mtodo txt.indexOf("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

Para acessar propriedades de objetos


<nome do objeto>.<nome da propriedade>
Da mesma forma para os mtodos
Exemplos:
var message = "Hello World!";
var x = message.length;
var message = "Hello world!";
var x = message.toUpperCase();

Uma outra forma de referenciar as propriedades do objeto


Maria, :

Uma forma mais prtica de criar arrays poderia ser a


seguinte:

Podemos tambm utilizar os dois mtodos ao mesmo tempo!

Teramos agora :

Comandos

Alm das estruturas de controle, o JavaScript oferece


alguns poucos comandos:

Var

Forma Geral

Exemplo

with

Forma Geral
With (objeto) {
instrues; }

Exemplo
with (Math) {
a=Math.PI;
b=Math.Abs(x);

c=Math.E; }

Exemplo sem o uso do With


{
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

/* */
//

Os cdigos JavaScript podem ser colocados em campos de


comentrio de modo que browsers antigos no mostrem o prprio
cdigo JavaScript, como vemos a seguir:

Estruturas de Controle

Lao For

Repete um dado bloco de instrues uma determinada


quantidade de vezes.

Forma Geral

Exemplo

for (var i = 0; i < cars.length; i++) {


document.write(cars[i] + "<br>");
}

for (var i = 0, len = cars.length; i < len; i++) {


document.write(cars[i] + "<br>");
}

Lao For/In

Itera nas propriedades de um objeto


var
person={fname:"John",lname:"Doe",age:25};
for (x in person) {
txt = txt + person[x];
}
http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_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

var day = new Date().getDay();


switch (day) {
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}

http://www.w3schools.com/js/tryit.asp?filename=tryjs_switch

Instrues Javascript

Instrues Javascript so comandos para o navegador


O propsito das instrues dizer ao navegador o que fazer

document.getElementById("demo").innerHTML="Hello Dolly";

Essa instruo solicita ao navegador escrever Hello Dolly


dentro do elemento HTML identificado com o id=demo
O ponto e vrgula usado para separar as instrues

Com ; mais de uma instruo pode ser adicionada em uma linha

Restries Javascript

Javascript diferencia maisculas das minsculas

A funo getElementById getElementbyID


A varivel myVariable MyVariable

Javascript ignora espaos em branco extras


possvel a quebra de uma instruo que est utilizando uma
string de texto dividindo esta string
document.write("Hello \ World!");

Funes Javascript

Bloco de cdigo que executado quando algum chama

Uma funo pode ser invocada em resposta a um evento

Sintaxe:
function functionName(argument1, argument2) {
some code to be executed;
}

Exemplo
(http://www.w3schools.com/js/tryit.asp?filename=tryjs_function3):

Funes definidas pelo usurio

Funes so melhor declaradas entre as tags <head> de sua

pgina HTML. Funes so frequentemente chamadas por


eventos acionados pelo usurio. Assim parece razovel colocar

as funes entre as tags <head>. Elas so carregadas antes que


o usurio faa alguma coisa que possa chamar uma funo.

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)

Converte uma representao String de um nmero na sua representao Number.


Ignora qualquer coisa depois do ponto decimal ou depois de um caractere que no
nmero. Se primeiro caractere no for nmero, retorna NaN (Not a Number).
A base a representao do String (2, 8, 10, 16)

parseFloat(string)

Converte uma representao String de um nmero na sua representao Number,


levando em considerao o ponto decimal.
Ignora qualquer coisa depois do segundo ponto decimal ou depois de um caractere
que no nmero.
Se primeiro caractere no for nmero ou ponto decimal, retorna NaN

isNaN(valor)

Retorna true se o valor passado no um nmero.

eval(string)

Interpreta o string passado como parmetro como cdigo JavaScript e tenta


interpret-lo.
eval() uma funo que oferece acesso direto ao interpretador JavaScript.
Exemplo: resultado = eval("5 + 6 / 19");

escape(string)

Converte caracteres de 8 bits em uma representao de 7 bits compatvel com o


formato url-encoding. til na criao de cookies.
Exemplo: nome = escape("Joo"); // nome contm Jo%E3o

unescape(string)

Faz a operao inverso de escape(string).


Exemplo: nome = unescape("Jo%E3o"); // nome contm Joo

Funes internas
Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK.

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

Obtm o cdigo ASCII de um caractere que no seja alfa-numrico.

Avalia uma expresso numrica, retornando um resultado tambm numrico.

Funes internas

Converte uma string que representa um nmero, para um nmero


com ponto flutuante. Caso a string no possa ser avaliada, a
funo retorna 0.

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.

Modelo de objetos do HTML

JavaScript organiza todos os elementos de uma Home Page


dentro de uma hierarquia. Cada elemento visto como um objeto.

Modelo de objetos do HTML - DOM (cont.)

Modelo de objetos do HTML - DOM (cont.)

Do ponto de vista do JavaScript a janela do browser um objeto


window, que contm certos elementos, como a barra de status.

Dentro da janela, ns podemos carregar uma pgina HTML. Esta


pgina um objeto document. Desta forma o objeto document
representa o documento HTML (que est carregado no momento)

O primeiro objeto chamado document, a primeira imagem


representada por Imagem[0]. Desta forma ns podemos acessar
este objeto em JavaScript, da seguinte forma:
document.Imagem[0].

Modelo de objetos do HTML - DOM (cont.)

Ao lado vemos exemplos de


instncias de um campo e um
boto no DOM, seguindo a
hierarquia do HTML.

OBS: DOM signinifica Document


Object Model, e no tem nada a
ver com Domino Object Model.

Modelo de objetos do HTML - DOM (cont.)


Se voc estiver trabalhando com pginas muito grandes pode ficar
um pouco confuso referenciar objetos diretamente pelo
endereamento do diagrama de hierarquia, voc pode ter referncias
do tipo: document.forms[3].elements[15]
Para evitar esse problema voc pode dar nomes diferentes aos
objetos, vejamos o seguinte fragmento de um documento HTML:

Dessa forma, em vez de usarmos por exemplo :

Podemos usar

Acesso a objetos do browser e da pgina

Cada componente de uma pgina define um objeto que


poder ser manipulado em JS e agir como referncia ao
componente.
Digamos que temos uma pgina com a imagem:
<IMG SRC="zebra.gif" name="figura3">

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

Acesso a objetos do browser e da pgina (cont.)

A expresso acima mostra como a hierarquia de elementos do


HTML se reflete em JS atravs de propriedades.
Para ler propriedades ou invocar mtodos de um objeto
necessrio citar toda a hierarquia de objetos acima dele.
A nica exceo regra a referncia window, que sempre
pode ser omitida. As instrues abaixo fazem a mesma coisa:

window.document.write("Tigres");
document.write("Tigres");

Acesso a objetos do browser e da pgina (cont.)

Quando criamos uma nova janela e queremos operar


sobre ela, podemos batiz-la com um nome qualquer
que servir de referncia para operaes.
Essa referncia um objeto do tipo Window:

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.

frames - Vetor que armazena as referncias para as frames da janela atual.

Windows
parent - Refere-se a janela pai da frame atual.
self - Refere-se a janela atual.

status - Define uma mensagem que ir aparecer no


rodap do browser, em substituio por exemplo, a URL
de um link, quando estivermos com o mouse sobre o link.

Windows
top - Refere-se a janela de nvel mais alto do esquema hierrquico do JavaScript.

window - Refere-se a janela atual. Funciona de modo anlogo a self.

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

Contm informao sobre a URL corrente.


Forma Geral

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;

appName - Armazena o nome do browser


.

appVersion - Armazena a verso do browser


userAgent - Armazena o cabealho (user-agent) que
enviado para o servidor, no protocolo HTTP, isto serve
para que o servidor identifique o software que est
sendo usado pelo cliente.

Objeto Navigator (Exemplo)


<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

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

anchors - Vetor que armazena as ncoras definidas em


uma pgina HTML com o comando <A NAME="ancora">.
Esta propriedade somente para leitura, no pode ser
alterada.

Document
Propriedades:
bgColor - Determina a cor de fundo da pgina HTML.

cookie - Os cookies so pequenos arquivos que alguns


sites da Web gravam no computador dos visitantes. A
idia identificar o usurio, anotar quais caminhos ele j
percorreu dentro do site e permitir um controle mais
eficaz dos espectadores.

Document
Propriedades:
.fgColor - Determina a cor das letras em uma pgina
HTML. Esta propriedade no altera o que j est
impresso na pgina HTML.

forms - Vetor que armazena as referncias aos formulrios


existentes na pgina HTML. Esta propriedade somente
para leitura, no pode ser alterada.

Document
Propriedades:

lastModified - Obtm a data da ltima atualizao da


pgina HTML. Esta propriedade somente para leitura,
no pode ser alterada.

linkColor - Determina a cor dos links que ainda no


foram visitados pelo usurio.

Document
links - Vetor que armazena os links definidos em uma
pgina HTML. Esta propriedade somente para leitura,
no pode ser alterada.

location - Armazena o endereo (URL) atual em forma


de string. 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.

title - Armazena uma string com o ttulo da pgina HTML atual.


Esta propriedade somente para leitura, no pode ser alterada.

vlinkColor - Determina a cor que o link aparecer aps ser visitado.

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

Todos os objetos criados em HTML esto automaticamente


disponveis em JS, mesmo que um nome no seja atribudo
a eles.
Por exemplo, se h trs blocos <FORM>...</FORM> em
uma pgina, h trs objetos do tipo Form no JS.
Se eles no tem nome, pode-se ter acesso a eles atravs da
propriedade forms definida em Document, que fica
armazenada em um vetor, que sempre se inicia em 0 no JS.
frm1 = document.forms[0];
/* mesma coisa que window.document.forms[0], ou
document.meuForm, caso forms[0] seja meuForm */
frm2 = document.forms[1];

Manipulao de objetos (cont.)

Os vetores so necessrios apenas quando um objeto no


tem nome.
Se tiver um nome, o ideal us-lo j que independe da
ordem dos componentes, e pode fornecer mais informaes
como por exemplo, o tipo do objeto ( um boto, um campo
de textos?):
texto = document.forms[0].elements[1];
// qual ser o componente? O que ser o componente?

Manipulao de objetos (cont.)

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

criada uma referncia para este formulrio, que fica guardada na


propriedade form do objeto document. Como voc deve ter visto
anteriormente que trata do objeto document, a propriedade form
um vetor, e a cada formulrio criado tambm criado um novo
elemento para este vetor, o ndice inicial deste vetor 0 (zero) e
varia at o nmero de formulrios do documento -1.

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.

ao - Define o que fazer quando algum


evento ocorrer.
optionValue - Valor que enviado as
servidor, quando o formulrio submetido.
SELECTED - Se definido, informa a
opo que ser inicialmente selecionada.

Objeto Select
Propriedades

Objeto Select (Propriedades)


defaultSelected informa o item que detm a seleo inicial. Podese alterar este valor, desde que o formulrio ainda no tenha sido
exibido.
Ex.: selectName.options[indice].defaultSelected;
index Obtm o nmero do ndice de uma opo em um menu
select.
Ex.: SelectName.options[indice].index;
selected Valor lgico referente a opo em questo. Se a opo
estiver selecionada, retorna 1, caso contrrio retorna 0
Ex.: selectName.options[indice].selected;
text Armazena o texto que aparece como opo do menu select.
Este texto definido aps a TAG <option>
Ex.: celectName.options[indice].text;
value Armazena o campo VALUE que enviado ao servidor
quando o formulrio submetido (enviado).

Objeto Select

Objeto Button

Name - define o nome do objeto para nossa aplicao. por este


nome que referenciamos alguma propriedade deste objeto
Value - define o que ser escrito na face do boto
onClick - o nico evento possvel para este objeto, normalmente
define uma funo a ser executada quando clicamos no boto.

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;

Name - Nome dado pelo programador, para futuras referenciaes ao objeto;


CHECKED - Se especificado a CheckBox j vai aparecer selecionada;

Value - Define um rtulo para a CheckBox.


onClick - Define o que fazer quando d-se um clique na CheckBox, fazendo
com que o objeto CheckBox funcione como um objeto Button.

CheckBox
Propriedades:
name - Nome do objeto CheckBox em forma de string, da mesma
forma como definido no campo Name utilizado na criao da
CheckBox.

value - Armazena o contedo do campo VALUE, definido na


TAG.

CheckBox
checked - Retorna um valor lgico que depende do estado do
objeto CheckBox

defaultChecked - Informa/Altera o estado default de um objeto


CheckBox. Com relao a alterao, somente os objetos CheckBox
ainda no exibidos podem ter seu estado default alterado.

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

Funes tipicamente variveis


Funes tipicamente Matemticas:
Math.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante)
Math.ceil(nmero) - retorna o prximo valor inteiro maior que o nmero

Math.floor(nmero) - retorna o prximo valor inteiro menor que o nmero


Math.round(nmero) - retorna o valor inteiro, arredondado, do nmero
Math.pow(base, expoente) - retorna o clculo do exponencial

Math.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos


Math.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos
Math.sqrt(nmero) - retorna a raiz quadrada do nmero
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)

Funes tipicamente variveis (cont)


Funes tipicamente Matemticas:
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(nmero) - retorna o seno de um nmero (anglo em radianos)
Math.asin(nmero) - retorna o arco seno de um nmero (em radianos)
Math.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)
Math.acos(nmero) - retorna o arco cosseno de um nmero (em radianos)
Math.tan(nmero) - retorna a tangente de um nmero (anglo em radianos)
Math.atan(nmero) - retorna o arco tangente de um nmero (em radianos)
Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(nmero) - retorna o logartmo de um nmero
Math.E - retorna a base dos logartmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442)
Math.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302)
Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

Criando Novas Instncias


Atravs do operador new podem ser criadas novas instncias a objetos j
existentes, mudando o seu contedo, porm, mantendo suas propriedades

NovoObjeto = new ObjetoExistente (parmetros)


Ex1.
MinhaData = new Date ()
MinhaData passou a ser um objeto tipo Date, com o mesmo contedo
existente em Date (data e hora atual)

Ex2:
MinhaData = new Date(1996, 05, 27)

Manipulando Arrays

O JavaScript no tem um tipo de dado ou objeto para


manipular arrays. Por isso, para trabalhar com arrays
necessrio a criao de um objeto com a propriedade
de criao de um array.

function CriaArray (n) {


this.length = n
for (var i = 1 ; i <= n ; i++)
{ this[i] = "" } }

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

O JavaScript bastante poderoso no manuseio de Strings,


fornecendo ao programador uma total flexibilidade em seu
manuseio.
A seguir apresentamos os mtodos disponveis para manuseio
de strings.
string.length - retorna o tamanho da string (quantidade de
bytes)
string.charAt(posio) - retorna o caracter da posio
especificada (inicia em 0)
string.indexOf("string") - retorna o nmero da posio onde
comea a primeira "string"
string.lastindexOf("string") - retorna o nmero da posio
onde comea a ltima "string"

Manipulando Strings

string.substring(index1, index2) - retorna o contedo da


string que corresponde ao intervalo especificado.
Comeando no caracter posicionado em index1 e
terminando no caracter imediatamente anterior ao valor
especificado em index2.
Ex.
Todo = "Elogica"
Parte = Todo.substring(1, 4)
(A varivel Parte receber a palavra log)
string.toUpperCase() - Transforma o contedo da
string para maisculo (Caixa Alta)

Manipulando Strings

string.toLowerCase() - Transforma o contedo da string


para minsculo (Caixa Baixa)
escape ("string") - retorna o valor ASCII da string (vem
precedido de %)
unscape("string") - retorna o caracter a partir de um valor
ASCII (precedido de %)

Exemplo
<html>

<body>
<script>

var txt = "Hello World!";


document.write("<p>" + txt.length + "</p>");

for (i=0; i<txt.length;i++)


document.write("<p>" + txt.charAt(i) + "</p>");

document.write("<p>" + txt.indexOf("l") + "</p>");


document.write("<p>" + txt.lastIndexOf("l") + "</p>");

document.write("<p>" + txt + "</p>");


document.write("<p>" + txt.toUpperCase() + "</p>");

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:

getDate() - Obtm o dia do ms (numrico de 1 a 31)

getDay() - Obtm o dia da semana (0 a 6)

getMonth() - Obtm o ms (numrico de 0 a 11)

getYear() - Obtm o ano

getHours() - Obtm a hora (numrico de 0 a 23)

getMinutes() - Obtm os minutos (numrico de 0 a 59)

getSeconds() - Obtm os segundos (numrico de 0 a 59)

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;

for (var x = 1 ; x<= n ; x++)


{ this[x] = ""; }

Exemplo (Parte 2)
function chegada()
{

DataToda = new Date();


DiaHoje = DataToda.getDay();
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";
NomeMes = new CriaTab(12);
NomeMes[0] = "janeiro"; NomeMes[1] = "fevereiro";
NomeMes[3] = "abril"; NomeMes[4] = "maio";
NomeMes[6] = "julho";

NomeMes[7] = "agosto";

NomeMes[2] = "maro";

NomeMes[5] = "junho";
NomeMes[8] = "setembro";

NomeMes[9] = "outubro"; NomeMes[10] = "novembro"; NomeMes[11] = "dezembro";


DiaSemana = NomeDia[DiaHoje];
Mes = NomeMes[DataToda.getMonth()];
document.write(DiaSemana+" "+DataToda.getDate()+","+Mes);
}
</script>

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)

MANIPULANDO ELEMENTOS HTML


<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>
!

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

So fatos que ocorrem durante a execuo do sistema,


a partir dos quais o programador pode definir aes a
serem realizadas pelo programa.
Eles so divididos em 2 categorias: eventos de sistema
e eventos de mouse.

Os eventos de sistema disponveis so: OnLoad e


OnUnload. Eles no exigem a interao do usurio para
serem ativados.
Os eventos de mouse disponveis so: OnClick,
OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e
OnMouseOver. Eles exigem a interao do usurio
(atravs do mouse ou no) para serem ativados.

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

Quando o procedimento executado

Descritores HTML onde permitido

onclick

Quando um objeto clicado pelo mouse

<a>, <input>

onselect

Quando um objeto selecionado

<input type=text>, <textarea>

onchange

Quando uma seleo ou campo de texto tem seu


contedo modificado

<input type=text>, <textarea>, <select>

onfocus

Quando um componente de formulrio ou janela se


torna ativa

<textarea>, <body>, <form>, <input>, <select>,


<option>

onblur

Quando um componente de formulrio ou janela se


torna inativa

<textarea>, <body>, <form>, <input>, <select>,


<option>

onmouseover

Quando o mouse est sobre um link

<a>, <area>

onmouseout

Quando o mouse deixa um link

<a>, <area>

onsubmit

Antes de enviar um formulrio

<form>

onreset

Antes de limpar um formulrio

<form>

onload

Aps carregar uma pgina, janela ou frame

<body>

onunload

Ao deixar uma pgina, janela ou frame

<body>

onerror

Quando um erro ocorre durante a carga de uma imagem


ou pgina

<img>, <body>

onabort

Quando a carga de uma imagem abortada

<img>

onload

Este evento ativado aps a pgina HTML ser completamente


carregada. Ele pode ser associado s tags <BODY> ou
<FRAMESET>.
Exemplo:
<html>
<head>
<script language=Javascript>
function chegada() {
window.alert(Seja bem-vindo ao nosso site!);
}
</script>
</head>
<body OnLoad=chegada()>
Veja que interessante a utilizao do evento <I> OnLoad</I>.
</body>
</html>

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

Scripts podem ser colocados em arquivos externos


Arquivos externos podem conter cdigos a serem utilizados
por diversas pginas Web
Arquivos externos Javascript possuem a extenso .js
Ao utilizar scripts externos, a propriedade src da tag
<script> deve apontar para esse arquivo

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

Voc pode encontrar referncias sobre os


objetos javascript, objetos ligados ao
navegador e objetos HTML DOM

Estas referncias contm exemplos de cada


objeto, suas propriedades e seus mtodos
Objetos internos do Javascript
Objetos ligados ao navegador
Objetos HTML DOM

http://www.w3schools.com/jsref/default.asp