Trabalhando com objetos

em JavaScript

Datamec S.A.

Trabalhando com objetos em JavaScript

Sumrio
CAPTULO 1: VISO GERAL ................................................................................................................ 5
OBJETIVO............................................................................................................................................... 6
O QUE JAVASCRIPT ............................................................................................................................. 7
VALORES E VARIVEIS ............................................................................................................................ 8
Declarao de variveis ................................................................................................................... 8
EXPRESSES ......................................................................................................................................... 9
OPERADORES ...................................................................................................................................... 10
Precedncia de operadores ........................................................................................................... 13
INSTRUES DE MANIPULAO DE OBJETOS .......................................................................................... 14
for... in............................................................................................................................................. 14
with ................................................................................................................................................. 14
FUNES ............................................................................................................................................. 15
REVISO .............................................................................................................................................. 16

CAPTULO 2: TRABALHANDO COM OBJETOS ............................................................................... 17

OBJETIVO............................................................................................................................................. 18
OBJETOS E PROPRIEDADES .................................................................................................................. 19
CRIANDO NOVOS OBJETOS .................................................................................................................... 21
Inicializando objetos ....................................................................................................................... 21
Usando funo construtora ............................................................................................................ 21
Indexando propriedades dos objetos ............................................................................................. 22
Definindo mtodos.......................................................................................................................... 22
Usando this para referncias objetos.......................................................................................... 23
Apagando objetos........................................................................................................................... 23
OBJETOS PREDEFINIDOS ....................................................................................................................... 24
Array ............................................................................................................................................... 24
Date ................................................................................................................................................ 24
Function .......................................................................................................................................... 25
Math................................................................................................................................................ 25
Number ........................................................................................................................................... 25
String .............................................................................................................................................. 25
REVISO .............................................................................................................................................. 26

Trabalhando com objetos em JavaScript

CAPTULO 3: USANDO OBJETOS DO NAVEGADOR ...................................................................... 27

OBJETIVO............................................................................................................................................. 28
HIERARQUIA DE OBJETOS ...................................................................................................................... 29
PRINCIPAIS OBJETOS............................................................................................................................ 31
Window e frame.............................................................................................................................. 31
Document ....................................................................................................................................... 31
Form ............................................................................................................................................... 31
Location .......................................................................................................................................... 31
History............................................................................................................................................. 32
Navigator ........................................................................................................................................ 32
REVISO .............................................................................................................................................. 33

Trabalhando com objetos em JavaScript

Captulo 1:
Viso Geral

Trabalhando com objetos em JavaScript

Objetivo
Ao final deste captulo voc ser capaz de:
-

Entender os fundamentos da Linguagem JavaScript;

Construir programas bsicos em JavaScript utilizando instrues de manipulao de

objetos.

Trabalhando com objetos em JavaScript

O que JavaScript
JavaScript uma linguagem orientada objeto criada pela Netscape. Sua funcionalidade essencial
implementa um conjunto de objetos tais como Array, Date e Math e um conjunto de elemento como
operadores estruturas de controle e instrues.
JavaScript pode ser estendido uma srie de propsitos tais como:
-

Client-Server JavaScript: Estende as funcionalidades essenciais fornecendo objetos para

controlar o navegador e o DOM.

Server-Side JavaScript: Extenue as funcionalidades essenciais fornecendo objetos que

permitem ao JavaScript ser executado no servidor.

JavaScript permite ainda a criao de pginas dinmicas (DHTML) que processa entradas do usurio,
cria animaes, etc.
CS (Client-Side) e SS(Server-Side) convivem juntas e tem um ncleo em comum. A figura abaixo
ilustra este ncleo.

Trabalhando com objetos em JavaScript

Valores e variveis
JavaScript reconhece 4 tipos de valores: Nmeros, lgicos, strings, null e undefined. Null uma
palavra-chave especial simbolizando um valor nulo. JavaScript assim como java Case-sensitive.
Portanto null diferente de Null ou de NULL. Undefined tambm uma palavra-chave que
representa um valor indefinido.
A converso entre estes tipos de dados dinmica. Voc no tem que especificar o tipo de dado
quando declara uma varivel. A converso feita durante a execuo do script.
var answer = 42;

O tipo de dado pode ser mudado sem causar nenhum erro:

answer = Conteudo da variavel;

Declarao de variveis
Voc pode declara variveis de duas maneiras:
-

Atribuindo um valor. Por exemplo x = 42;

Utilizando a palavra var. Por exemplo var x = 42.

Todas as variveis que no tiveram atribuio de valores possui o valor undefined.

Anotaes

Trabalhando com objetos em JavaScript

Expresses
Uma expresso operadores, variveis e expresses que avaliam um determinado valor.
Conceitualmente existem dois tipos de expresses: aquelas que atribuem valor uma varivel e
aquelas que simplesmente possuem um valor. Por exemplo, a expresso x = 7 uma expresso que
atribui 7 varivel x. Esta expresso usa operadores de atribuio. Por outro lado a expresso 3 + 4
no atribui nenhum valor a nenhuma varivel. Estes so chamados simplesmente de operadores.
JavaScript possui os seguintes tipos de expresses:
-

Aritmticas: avalia um nmero, por exemplo 3,14159

De caracteres: avalia string de caracteres como Fred

Lgicas: avalia true ou false

Anotaes

Trabalhando com objetos em JavaScript

Operadores
JavaScript possui os seguintes tipos de operadores:
-

de atribuio;

de comparao;

aritmticos;

bitwise;

lgicos;

string;

especiais.

Citaremos aqui apenas os mais utilizados.

A tabela abaixo mostra todos os operadores de atribuio:

Anotaes

10

Trabalhando com objetos em JavaScript

Esta tabela mostra os operadores de comparao:

Anotaes

11

Trabalhando com objetos em JavaScript

Operadores aritmticos:

Operadores lgicos:

Anotaes

12

Trabalhando com objetos em JavaScript

Precedncia de operadores
A tabela abaixo mostra a precedncia de operadores, da mais baixa para mais alta.

Anotaes

13

Trabalhando com objetos em JavaScript

14

Instrues de manipulao de objetos

Existem duas instrues de manipulao de objetos: for... in e with.

for... in
A instruo for... in varre o vetor de propriedades do objeto especificado. No exemplo abaixo a funo
dump_props recebe como argumento um objeto e o nome do objeto. Ento ele varre todas

propriedades retornando o nome e o valor de cada propriedade:

function dump_props (obj, obj_name) {
var result = ;
for (var i in obj) {
result += obj_name + . + i + = + obj[i] + <BR>
}
return result;
}

with
A instruo with estabelece um objeto padro ao qual o conjunto de propriedades utilizadas na
seqncia da declarao pertence. No exemplo abaixo a instruo with se refere propriedade PI e
aos mtodos cos e sin, sem especificar novamente o nome do objeto:
with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI/2);
}

Anotaes

Trabalhando com objetos em JavaScript

15

Funes
Funes um dos mdulos fundamentais do JavaScript. O JavaScript assim como outras linguagens
fornecem funes predefinidas para realizao de tarefas bsicas. So estas:
-

eval: avalia uma string executando as instrues contidas nesta string;

isFinite: avalia se um determinado nmero finito ou no;

isNaN: Avalia um argumento e determina se ele no um nmero;

parseInt e parseFloat: Converte um valor de caracter para inteiro ou ponto flutuante;

Number e String: Converte um objeto para nmero ou caracter;

Anotaes

Trabalhando com objetos em JavaScript

16

Reviso
1. Utilizando o exemplo da apostila construa uma funo que mostre na tela todas propriedades de
um formulrio.
2. Quais so os tipos de variveis existentes em JavaScript?

Trabalhando com objetos em JavaScript

17

Captulo 2:
Trabalhando com Objetos

Trabalhando com objetos em JavaScript

Objetivo
Ao final deste captulo voc ser capaz de:
-

Criar seus prprios objetos

Criar propriedades e mtodos para estes objetos

Utilizar os objetos predefinidos pelo JavaScript

18

Trabalhando com objetos em JavaScript

19

Objetos e Propriedades
Para acessar as propriedades dos objetos utiliza-se a seguinte notao:
NomedoObjeto.NomedaPropriedade
Ambos so case sensitive. Para definir a propriedade basta atribuir o valor. Por exemplo,
suponhamos que exista um objeto chamado myCar. O seguinte cdigo atribui valores s propriedades
make, model, year:
myCar.make = Ford;
myCar.model = Mustang;
myCar.year = 1969;

Um vetor um conjunto ordenado de valores associado nomes de variveis. Propriedades e

vetores esto intimamente ligados em JavaScript; Na verdade eles so interfaces diferentes para o
mesma estrutura de dados. Por exemplo, as mesmas propriedades acima poderiam ser criadas da
seguinte maneira:
myCar[make] = Ford;
myCar[model] = Mustang;
myCar[year] = 1967;

Anotaes

Trabalhando com objetos em JavaScript

20

Este tipo de vetor chamado vetor associativo pois cada elemento do ndice est associado um
valor string. O exemplo abaixo ilustra este funcionamento.
function show_props(obj, obj_name) {
var result = ""
for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "\n"
return result
}

Executando show_props(myCar, myCar) retornaria o seguinte texto:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1967

Anotaes

Trabalhando com objetos em JavaScript

21

Criando novos objetos

Apesar do JavaScript fornecer inmeros objetos, voc pode criar seus prprios objetos. Os objetos
podem ser criados utilizando uma funo construtora ou sendo inicializado.

Inicializando objetos
Os objetos podem ser inicializados atribuindo valores diretamente junto com a declarao.
NomedoObjeto = {Propriedade1:valor1, Propriedade2:valor2, Propriedade3:valor3}

O exemplo abaixo cria o objeto myHonda com trs propriedades. Note que o motor um objeto:
myHonda = {color:red, wheels:4, engine:{cylinders:4, size:2}}

Usando funo construtora

Para utilizar funo construtora so necessrios os seguintes passos: 1)Definir o tipo do objeto
escrevendo a funo construtora. 2) Criar uma nova instncia do objeto usando a palavra new.
O exemplo abaixo cria a funo construtora:
function car(make, model, year) {
this.make = make
this.model = model
this.year = year
}

E agora a funo chamada passando os parmetros para alimentar o objeto:

mycar

= new car(Jaguar, XR8, 1995)

Anotaes

Trabalhando com objetos em JavaScript

22

Indexando propriedades dos objetos

Em verses anteriores do JavaScript era possvel se referir um objeto atravs do nome da
propriedade ou o nmero de ndice. Atualmente se voc define uma propriedade utilizando o nome,
voc sempre utilizar o nome e o mesmo vale para nmero de ndice.
A exceo acontece em objetos do HTML, como o objeto forms. Estes sempre podem ser
referenciados utilizando ambos meios de acesso. Por exemplo, se o segundo formulrio de um
documento chama-se myForm, este pode ser acessado utilizando a sintaxe document.forms[1] (j
que o ndice comea do zero) ou document.forms[myForm] ou ainda document.myForm.

Definindo mtodos
Um mtodo uma funo associada um objeto. Voc define mtodos da mesma maneira que
define funes:
Objeto.NomeMetodo = NomeFuncao

Utilizando o princpio do exemplo anterior, para adicionar o mtodo displayCar() ao objeto car primeiro
declara-se o mtodo:
function displayCar() {
var result = "A Beautiful " + this.year + " " + this.make
+ " " + this.model
document.write(result)
}

Para fazer desta funo um mtodo voc a atribui usando o seguinte cdigo:
this.displayCar = displayCar;

Anotaes

Trabalhando com objetos em JavaScript

23

Para chamar o mtodo voc utiliza o seguinte comando:

car1.displayCar();

Usando this para referncias objetos

JavaScript tem uma palavra especial, this, que pode ser usada dentro de um mtodo para referenciar
o objeto corrente. Por exemplo, suponha que voc tenha uma funo chamada validate que valida o
valor da propriedade do objeto:
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}

Ento voc chama a funo validate no evento onChange em cada campo do formulrio:
<INPUT TYPE="text" NAME="age" SIZE=3 onChange="validate(this, 18, 99)">

Desta maneira, this no teste referencia cada campo do formulrio.

Apagando objetos
Para remover objetos da memria utilize a instruo delete de acordo com o exemplo:
myobj=new Number()
delete myobj // removes the object and returns true

Anotaes

Trabalhando com objetos em JavaScript

24

Objetos predefinidos
JavaScript possui alguns objetos predefinidos que podem ser utilizados na criao de novos objetos

Array
Como JavaScript no tem um tipo de dado do tipo array voc pode utilizar este objeto para criar
variveis do tipo array:
coffees = ["French Roast", "Columbian", "Kona"]

Date
Este objeto pode ser utilizados para manipulaes de valores em formato de data como no exemplo
abaixo:
function JSClock() {
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " P.M." : " A.M."
return temp
}

Anotaes

Trabalhando com objetos em JavaScript

25

Function
Seu uso sugere uma alternativa maneira tradicional de criar funes. Pode criar funes utilizando
apenas uma instruo, como no exemplo:
functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)

Math
Fornece alguns mtodos interessantes para manipulao de valores matemticos: abs, sin, cos,
tan, acos, asin, atan, exp, log, ceil, floor, min, max, pow, round, sqrt

Number
Possui algumas propriedades teis para avaliar o valor do nmero: MAX_VALUE, MIN_VALUE, NaN,
NEGATIVE_INFINITY, POSITIVE_INFINITY.

String
Manipula os caracteres contidos em uma string.

Para maiores informaes sobre funes consulte o JavaScript Reference.

Anotaes

Trabalhando com objetos em JavaScript

26

Reviso
1. Crie um objeto atravs do mtodo de funo construtora e associe a ele propriedades e mtodos.
Utilize como tema a palavra aluno.
2. Crie uma funo que retorne os minutos da hora atual.

Trabalhando com objetos em JavaScript

27

Captulo 3:
Usando Objetos do Navegador

Trabalhando com objetos em JavaScript

Objetivo
Ao final deste captulo voc ser capaz de :
-

Utilizar os objetos HTML para criar scripts;

Definir a melhor maneira de acessar um script

28

Trabalhando com objetos em JavaScript

29

Hierarquia de objetos
Quando um documento carregado, o navegador cria um nmero de Objetos e propriedades
baseadas no documento HTML e outras informaes pertinentes. Estes objetos existem em uma
hierarquia que reflete a estrutura da pgina HTML. esta estrutura chamamos de DOM (Document
Objet Model).
Apesar do esforo do W3C para padronizar o DOM dos navegadores, ainda existe uma infinidade de
divergncias entre o DOM utilizado pelo Netscape e pelo Internet Explorer. A figura abaixo ilustra a
parte em comum entre os dois navegadores:

Anotaes

Trabalhando com objetos em JavaScript

30

Nesta hierarquia, o objeto descendente propriedade do objeto ascendente. Por exemplo, um

formulrio chamado form1 um objeto e propriedade do objeto document e referenciado como
document.form1. Para uma lista de todos os objetos, propriedades, mtodos e eventos leia o
JavaScript Reference.
Cada pgina possui os seguintes objetos:
-

navigator

window

document

location

history

Anotaes

Trabalhando com objetos em JavaScript

31

Principais Objetos
Abaixo segue a descrio dos principais objetos HTML que podem ser manipulados pelo JavaScript:

Window e frame
O objeto window o objeto pai de todos os outros objetos. Cada objeto window tem inmeros objetos
interessantes tais como: open, para abrir uma nova janela; close, para fechar; alert, para enviar uma
mensagem para o usurio; confirm, para fazer uma pergunta ao usurio; prompt, para que o usurio
entre com algum valor.

Document
O objeto document o objeto mais usado em JavaScript. Para maiores informaes consulte o
JavaScript Reference

Form
Cada formulrio no documento cria um objeto form. Como um documento pode conter mais de um
formulrio, estes so armazenados no vetor chamado forms. Cada elemento dentro do objeto form
armazenado em um vetor chamado elements. Assim todos eles podem ser acessados atravs do seu
prprio nome como ndice:
Document.forms[0].elements[0]

Location
O objeto location possui propriedades baseadas no endereo corrente. Por exemplo a propriedade
hostname retorna o nome do servidor que hospeda a pgina carregada. O objeto location possui
tambm dois mtodos: reload, que fora o navegador a recarregar a pgina e replace que carrega a
URL especificada.

Anotaes

Trabalhando com objetos em JavaScript

32

History
O objeto history contm uma lista de caracteres representado as URLs que o usurio j visitou. Voc
pode acessar todas as URLs navegadas pelo usurio atravs das propriedades current, next e
previous. Voc tambm pode utilizar o vetor history para acessar outras ocorrncias.
Voc tambm pode utilizar o mtodo go que recebe como parmetro o nmero da pgina para onde o
navegador deve ir. No exemplo abaixo o script manda o navegador para duas pginas anteriores
pgina atual:
history.go(-2)

Navigator
O objeto Navigator contm informaes sobre a verso do navegador utilizado. O objeto navegador
possui trs mtodos:
-

javaEnabled: Testa se o navegador est habilitado para java;

preference: permite o uso de scripts para alterar as preferncias do usurio;

Anotaes

Trabalhando com objetos em JavaScript

33

Reviso
1. Crie um formulrio de envio de e-mail.
2. Crie um script de validao para validar se o usurio preencheu ou no o e-mail no campo e-mail.
Utilize seus conhecimento e os conhecimento adquiridos neste curso.