Javascript Fundamentos 40c

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");
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
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).
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
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!);
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!">
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 + "!".
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.

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

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

Javascript Fundamentos 40c

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript Fundamentos 40c

Încărcat de

Drepturi de autor:

Formate disponibile

Javascript

Prof. Claudio Azevedo Passos

Material resultante de anotaes em sala de aula e compilado

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

funes escritas em JavaScript podem ser embutidas dentro de seu

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

NO! JS freqentemente confundida com a

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

Interpretada. Programas em Java so compilados para um

Simples. Programas em Java so bem mais poderosos e

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

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

O que podemos fazer com JS?

Realizar operaes matemticas e de computao.

Gerar documentos com aparncia definida na hora da

Abrir janelas, trocar e manipular informaes como o

Interagir com o contedo do documento, alterando

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

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

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

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

importante ressaltar que todas as linhas devem ser terminadas

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

Para definir uma varivel, basta escolher um nome que

Uma varivel tambm pode ser declarada sem um valor. Para

Existem trs tipos de variveis:

Booleanas True ou False

null Sem delimitadores

Tipos de dados e literais

Tipos de dados primit ivos (que represent am valores)

M in: 4.94065 e-324

Tipos de dados e literais (cont.)

No preciso declarar as variveis.

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

Tipos de dados e literais (cont.)

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

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

Nmeros iniciados em "0" so considerados octais e os

O tipo number tambm representa alguns valores

Tipos de dados e literais (cont.)

Tipos de dados e literais (cont.)

Booleans representam os estados de ligado e

Tipos de dados e literais (cont.)

Strings so identificados por literais contidos entre

Tipos de dados e literais (cont.)

A concatenao de strings realizada atravs do operador

Tipos de dados e literais (cont.)

Para converter um nmero ou booleano em string basta

A converso de strings em nmeros j no to simples.