Traduzir Array

Machine Translated by Google
Capítulo 15. JavaScript 4: Objetos e

Arrays
Índice
Objetivos................................................. ................................................ ......................................... 2 15.1

Introdução....
Matrizes...........................
................................................
................................................
................................................
................................................
...................... 2 15.2 .......... 2 15.2.1
Introdução
doaos arrays...........................
array ................................................
....................... ................................................ ...............
.................. 2 15.2.2
3 15.2.3 Indexação
Criando arrays de elementos
e atribuindo
valores aos seus elementos ............... ............................. 3 15.2.4 Criando e inicializando arrays em uma
única instrução......... ......................................... 4 15.2.5 Exibindo o conteúdo de
matrizes.............. ................................................ ............. 4 15.2.6 Comprimento da
matriz........................... ................................................ ......................................... 4 15.2.7 Tipos de valores
em elementos de array..... ................................................ ....................... 6 15.2.8 Strings NÃO são
arrays............... ................................................ ................................ 7 15.2.9 Variáveis — tipos primitivos e
tipos de referência...... ................................................ .. 8 15.2.10 Copiando variáveis de tipo
primitivo............................... ......................................... 9 15.2.11 Copiando variáveis do tipo
referência. ................................................ ............................. 9 15.2.12 Atividades do
array.............. ................................................ ......................................... 10 15.2.13 Mapa conceitual de
arrays ................ ................................................ ................................ 12 15.3 O modelo de objeto
JavaScript ........... ................................................ ......................................... 13 15.3.1 Introdução ao modelo
de objeto JavaScript ... ................................................ ........... 13 15.3.2 Objetos em
JavaScript .............................. ................................................ ................. 13 15.3.3 Convenções de
nomenclatura........................... ................................................ ...................... 14 15.3.4 Criando objetos e
variáveis referentes a objetos.............. ......................................... 15 15.3.5 Propriedades e métodos do
objeto .... ................................................ ............................. 16 15.3.6 Alguns objetos importantes do
JavaScript......... ................................................ ................ 19 15.3.7 O objeto
'Triângulo' ...... ................................................ ......................................... 21 15.3.8 Definido pelo usuário
objetos ................................................ ................................................ 21 15.3.9 Implementando métodos e
variáveis de instância ...................................... ............ 23 15.3.10 A cadeia de pesquisa de objetos
JavaScript............... ................................................ ..... 25 15.3.11 Atividades
objeto............................... ................................................ ................ 28 15.4 Arrays como
objetos........................... ................................................ ......................................... 29 15.4.1 Método array:
join..... ................................................ ................................................ 29 15.4 .2 Método de array:
sort.......................................... ................................................ ...... ... 30 15.4.3 Método array:
reverso ...................................... ................................................ ...... 31 15.4.4 Arrays unidimensionais e
multidimensionais .............................. ......................................... 32 Objetos como arrays
associativos.. ................................................ ......................................... 33 15.5.1 Enumerando arrays
associativos com instruções de loop FOR/IN.............................. 33 15.5.2 Usando FOR/IN para arrays de
15,5 índices numéricos............................... .................... 34 15.5.3 Atividades e trabalhos
futuros ..................... ................................................ ................... 36 15.6 Questões de
Revisão ........................... ................................................ ......................................... 41 15.7 Tópicos de
Discussão......... ................................................ ......................................... ................ 42 15.8
Respostas........................... ................................................ ................................................ 42 15.8.1 Discussões do
Exercício 1 15.8.2 Discussões do Exercício 2 15.8.3 Discussões da Atividade
1..........................
2...........................
................................................
................................................
............. 44..............
15.8.4 Discussões
44 15.8.5 Discussões
da Atividade
do Exercício 3 15.8.6
Discussões da Atividade 3............... ................................................
................................................
...................... 45 15.8.7 Discussões da43
..........................................
Atividade 4.............. ................................................
................................................
....................... 47 15.8.8
..........................................
Discussões da Atividade 43
5............... ................................................ ......................... 47 15.8.9 Discussões da Atividade
6................. ......................................... ......................................... 48 15.8.10 Discussões da Atividade
7....... ................................................ ................................
................................................
48 .......................................... 45
15.8.11 Discussões da Atividade 8........................................... ................................................ 49 15.8 .12

Respostas às perguntas de revisão............................... ...................................... 51 15.8.13 Contribuição para
Tópicos de Discussão... ................................................ ...................... 51
Objetivos
Ao final deste capítulo você será capaz de:
• Compreender as características básicas dos arrays JavaScript;

• Compreender os elementos fundamentais dos arrays JavaScript; •
Escrever arquivos HTML usando arrays JavaScript; • Explicar o modelo de
objeto JavaScript; • Use arrays como objetos.
15.1 Introdução
A maioria das linguagens de programação de computador de alto nível fornece maneiras para grupos de dados relacionados serem
coletados juntos e referidos por um único nome. JavaScript oferece objetos e arrays para fazer isso. Arrays JavaScript são bastante
diferentes de arrays em muitas linguagens de programação: todos os arrays são objetos (como em muitas outras linguagens), mas
também são arrays associativos . Além disso, todos os objetos também podem ser usados como se fossem arrays.
Este capítulo está organizado em quatro seções. Ele apresenta arrays e objetos separadamente, então considera arrays como objetos
e, finalmente, considera objetos como arrays (associativos). Muitos conceitos importantes são abordados nesta unidade, embora muitos
dos conceitos de tecnologia de objetos tenham sido introduzidos em unidades anteriores.
Ao trabalhar com variáveis, uma distinção importante deve ser feita: a variável contém o valor de um tipo primitivo ou contém uma
referência a uma coleção (não primitiva) de dados. Uma base completa nos conceitos cobertos neste capítulo é necessária tanto para
ser capaz de entender os sofisticados scripts Javascipt escritos para suportar websites complexos, quanto para ser capaz de começar a
desenvolver soluções JavaScript você mesmo para problemas do mundo real. É importante trabalhar com exemplos até entendê-los;
escreva seus próprios programas que usam e testam seu aprendizado. A programação é aprendida fazendo tanto, ou mais, do que lendo.
15.2 Arrays 15.2.1

Introdução aos arrays
As matrizes fornecem uma maneira tabular de organizar uma coleção de dados relacionados. Por exemplo, se quisermos armazenar os
sete nomes de cada dia da semana como Strings, podemos usar um array contendo sete elementos. Esta matriz seria estruturada da
seguinte forma:
Índice Valor
weekDays[0] "Monday"
weekDays[1] "Tuesday"
semanaDays[2] "quarta-feira"
semanaDays[3] "quinta-feira"
weekDays[4] "Sexta-feira"
weekDays[5] "Sábado"
semanaDias[6] "Domingo"
Como pode ser visto, todos esses diferentes valores de String são armazenados sob o nome coletivo weekDays, e um número (de 0 a
6) é usado para indicar a qual desses valores de weekDays especificamente desejamos nos referir. Portanto, referindo-se a weekDays[3],
poderíamos recuperar a String "Thursday".
DEFINIÇÃO - Matriz
2
Uma matriz é um arranjo tabular de valores. Os valores podem ser recuperados referindo-se ao nome da matriz junto com o índice numérico
da parte da tabela que armazena o valor desejado.
Como você deve ter notado, tendo um loop com uma variável numérica, podemos facilmente executar uma ação em todos, ou em alguma
subsequência, dos valores armazenados no array.
15.2.2 Indexação de elementos do array

Como pode ser visto na figura acima, há sete elementos no array weekDays.
DEFINIÇÃO — elemento
Arrays são compostos de uma sequência numerada de elementos. Cada elemento de uma matriz pode ser pensado como uma linha (ou às
vezes coluna) em uma tabela de valores.
Os sete elementos são indexados (numerados) de zero (0) a seis (6). Embora possa parecer estranho começar numerando o primeiro
elemento em zero, essa forma de indexar elementos de array é comum a muitas linguagens de programação de alto nível (incluindo C, C++
e Java) e tem algumas vantagens computacionais sobre arrays que começam em 1 .
Observação
O índice de um elemento de array também é conhecido como seu subscrito. Os termos índice de matriz e subscrito de matriz podem ser usados
de forma intercambiável. Nesta unidade, usamos consistentemente o termo índice para simplificar.
Exercício 1
Responda às seguintes perguntas sobre o array weekDays:
• Qual é o primeiro elemento?
• Qual é o último elemento?
• Qual é o 4º elemento?
• Qual é o valor do primeiro elemento?
• Qual é o valor do 4º elemento?
• Qual é o elemento que contém a String "Monday"?
• Qual é o elemento que contém a String "Saturday"?
• Qual é o índice do elemento que contém a String "Monday"?
• Qual é o índice do elemento que contém a String "Saturday"?
15.2.3 Criando arrays e atribuindo valores aos seus

elementos
Existem várias maneiras diferentes de criar uma matriz. Uma parte do código JavaScript que cria tal array é a seguinte:
// VERSÃO 1 var
diasDaSemana = new Array(7); diasDaSemana[0] = "Segunda-feira"; dias da semana[1] =
"Terça-feira"; semanaDias[2] = "Quarta-feira"; diasDaSemana[3] = "Quinta-feira"; diasDaSemana[4] = "Sexta-
feira"; diasDaSemana[5] = "Sábado"; diasdasemana[6] =
"Domingo";
A primeira linha (sem comentários) é:
var semanaDias = new Array(7);

3
Esta linha declara uma nova variável chamada weekDays e faz com que esta nova variável se refira a um novo objeto Array que pode
conter sete elementos.
Observação
O conceito de arrays como objetos é discutido posteriormente nesta unidade.
As sete instruções que seguem esta linha atribuem as Strings "Monday" - "Sunday" aos elementos de array weekDays[0]
a weekDays[6] respectivamente.
15.2.4 Criando e inicializando arrays em uma única

instrução
Outra parte do JavaScript que resultaria na mesma matriz da VERSÃO 1 acima é a seguinte:
// VERSÃO 2 - tudo em uma linha var weekDays = new

Array( "Monday", "Tuesday", "Wednesday",
"Quinta sexta sábado domingo");
Essa instrução única combina a declaração de uma nova variável e um objeto Array com a atribuição das Strings dos sete dias da
semana. Observe que não precisamos especificar o tamanho do array, pois o JavaScript sabe que existem sete Strings e assim faz
com que o array tenha um tamanho de sete elementos.
Os exemplos acima ilustram que as matrizes podem ser criadas separadamente (como na VERSÃO 1) e, em seguida, ter valores
atribuídos aos elementos, ou que as matrizes podem ser criadas e fornecidas com valores iniciais em uma única instrução (VERSÃO
2).
Ao declarar a matriz, se você souber quais valores a matriz deve conter, provavelmente escolherá criar a matriz e fornecer os valores
iniciais em uma instrução. Caso contrário, a abordagem de dois estágios de primeiro criar a matriz e depois atribuir os valores é
apropriada.
15.2.5 Exibindo o conteúdo de arrays

A maneira mais fácil de exibir o conteúdo de um array é simplesmente usar a função document.write(). Esta função, ao receber um
nome de array como argumento, exibirá cada elemento do array na mesma linha, separados por vírgulas. Por exemplo, o código:
var diasDaSemana = new Array("Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo");
document.write( "<b> Dias da semana: </b>" + dias da semana);
Produz a seguinte saída em um navegador:
15.2.6 Comprimento da matriz
O termo comprimento, em vez de tamanho, é usado para se referir ao número de elementos no array. A razão para isso ficará clara
em breve.
Conforme ilustrado no código da VERSÃO 1 acima, o tamanho de um array pode ser especificado quando um array é declarado:
var semanaDias = new Array(7);
4
Isso cria uma matriz com sete elementos (cada um contendo um valor indefinido):
Índice Valor
weekDays[0] <indefinido>
diasdasemana[6] <indefinido>
Na verdade, embora seja uma boa prática de programação, não é um requisito da linguagem JavaScript. A linha escrita sem o
tamanho do array é igualmente aceitável para JavaScript:
var diasDaSemana = new Array();
isso cria uma matriz, sem elementos:
Valor do índice
Nesse segundo caso, o JavaScript fará as alterações apropriadas em sua organização de memória posteriormente, uma vez que
identifique quantos elementos o array precisa conter. Mesmo assim, o JavaScript pode estender o tamanho de uma matriz para conter
mais elementos do que foi originalmente definido para conter.
Por exemplo, se a seguir tivermos a declaração:
diasDaSemana[4] = "Sexta-feira";
o interpretador JavaScript identificará a necessidade do array weekDays ter no mínimo cinco elementos, sendo que o 5º elemento é a
String "Friday".
Índice Valor
<indefinido>
diasdasemana[0]diasdasemana[1]diasdasemana[2] <indefinido>
<indefinido>
dias da semana[3] <indefinido>
dias da semana[4] "Sexta-feira"
Se isso fosse seguido pela declaração:
diasDaSemana[6] = "Domingo";
o interpretador JavaScript identificará a necessidade do array weekDays passar a ter sete elementos, sendo que o 5º contém a
String "Friday" e o 7º contém "Sunday":
Índice Valor
diasdasemana[0] <indefinido>
weekDays[4] "Sexta-feira"
5
Índice Valor
weekDays[6] "Domingo"
Depois de criada, uma matriz possui uma propriedade de comprimento. Isso armazena o número de elementos para os quais o JavaScript
disponibilizou espaço. Considere as seguintes afirmações:
var semanaDias = new Array(7); var meses = new Array(); var bits = new Array(17, 8, 99);
O comprimento de cada uma dessas matrizes é o seguinte:
• semanaDias.comprimento = 7
• meses.comprimento = 0
• bits.comprimento = 3
Porém, é preciso ter cuidado, pois diminuir o comprimento de uma matriz pode resultar na perda irrecuperável de alguns
elementos. Considere este código e a seguinte saída:
var bits = new Array(17, 8, 99, 33, 66, 11); document.write(bits);

document.write("<br> comprimento da matriz: " bits.length = 4;
document.write("<p> após alteração: </p>"); document.write(bits);
+ bits.comprimento);
document.write("<br > comprimento da matriz: "
+ bits.comprimento);
A saída do navegador desse código é:
Como pode ser visto, após a instrução bits.length = 4; os dois últimos elementos da matriz foram perdidos.
15.2.7 Tipos de valores em elementos de array

Na maioria das linguagens de programação de alto nível, os arrays são digitados. Isso significa que, quando um array é criado, o
programador deve especificar o tipo de valor a ser armazenado no array. Com essas linguagens, todos os elementos de um array
armazenam valores de um único tipo. No entanto, JavaScript não é uma linguagem de programação fortemente tipada, e uma
característica dos arrays JavaScript é que um único array pode armazenar valores de tipos diferentes.
Considere o seguinte código:
var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2] =

verdadeiro; document.write("<p>[0]: " document.write("<p>[1]: "+
coisas[1]); document.write("<p>[2]: "
+ coisas[0]);
+ coisas[2]);
6
Como pode ser visto, esta é uma programação JavaScript perfeitamente aceitável:
Quando o valor de um elemento da matriz é substituído por um valor diferente, não há necessidade de que o valor de substituição
seja do mesmo tipo. No exemplo abaixo, o elemento 1 do array começa com a String "hello", depois é alterado para o valor booleano
false, e alterado novamente para o número 3.1415:
var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2]

= verdadeiro; coisas[1] = falso; coisas[1] = 3,1415; document.write("<p>[0]: " document.write("<p>[1]: "
document.write("<p>[2]: "
+ coisas[0]); +
coisas[1]); + coisas[2]);
Como pode ser visto, esta mudança de valores de elementos de array de diferentes tipos funciona sem problemas:
Podemos confirmar que um único array pode armazenar valores de diferentes tipos exibindo o valor de retorno da função typeof:
var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2]

= verdadeiro; document.write("<p>tipo de coisas[0]:" + tipo de
coisas[0] ); document.write("<p>tipo de coisas[1]: " + tipo de
coisas[1] ); document.write("<p>tipo de coisas[2]: " + tipodecoisas[2] );
A saída do código acima é a seguinte:
15.2.8 Strings NÃO são arrays

Em muitas linguagens de programação, strings de texto são representadas como arrays de caracteres. Embora isso faça sentido
em linguagens não orientadas a objetos, há várias vantagens em representar dados como texto como objetos (veja mais adiante
nesta unidade).
Você só obterá valores indefinidos se tentar se referir a caracteres específicos de Strings usando a sintaxe de indexação de matriz
de colchetes.
7
Por exemplo, o código

var primeiroNome = "Mateus";
document.write("a segunda letra do nome é: " + primeiroNome[1]);
Também é fácil confundir objetos String e Array porque ambos têm uma propriedade de comprimento. Então o código:
var primeiroNome = "Mateus";

document.write("a segunda letra do nome é: " document.write("<p> + primeiroNome[1]); +
comprimento de 'firstName' " primeiroNome.comprimento);
é válido e vemos o número de caracteres da String exibido:
No entanto, a semelhança ocorre porque Strings e Arrays são objetos — veja mais adiante nesta unidade para uma discussão
detalhada sobre objetos JavaScript.
15.2.9 Variáveis — tipos primitivos e tipos de referência

Quando se começa a trabalhar com coleções de valores (por exemplo, com arrays ou objetos), é preciso estar ciente do valor da
variável. Uma variável contendo um valor de tipo primitivo é direta: por exemplo, considere a variável numérica idade neste código:
var idade = 21;
No entanto, a situação não é tão simples quando consideramos uma variável de array. Por exemplo, a matriz ageList de três idades
definidas da seguinte forma:
var listadeidade = new Array( 3 ); listaidade[0] = 5; listaidade[1] = 3;

listaidade[2] = 11;
Não é o caso de ageList ser o nome de um único local na memória, pois sabemos que esse array está armazenando três valores
diferentes. O local na memória denominado ageList é, na verdade, uma referência ao local na memória onde o primeiro valor da matriz
pode ser encontrado. O diagrama abaixo tenta ilustrar isso:
Observação
Não há nada de especial nas localizações 001727 etc., esses números foram inventados e incluídos para ilustrar
localizações sem nome na memória.
Portanto, podemos pensar na variável ageList como uma referência ao local onde os valores do array podem ser encontrados.
A implicação da diferença entre variáveis de tipos primitivos e tipos de referência é bastante importante,
8
especialmente no caso de copiar ou sobrescrever os valores das variáveis de referência.
15.2.10 Copiando variáveis de tipo primitivo

Com variáveis de tipo primitivo, é fácil copiar e alterar valores. Considere o seguinte código:
var nome1 = "ibrahim"; var nome2 = "James";
Inicialmente, a memória é a seguinte:
Valor da localização da memória

nome1 "Ibraim"
nome2 "James"
Então, se executarmos as seguintes linhas:
nome1 = nome2; nome2 = "fredo";
os valores na memória serão:
Valor da localização da memória

nome1 "James"
nome2 "Fredo"
O que está acontecendo é que, quando uma variável recebe o valor de uma segunda, uma cópia do valor da segunda variável é colocada
no local na memória da primeira — então uma cópia do valor "james" de name2 foi copiada para o local para nome1.
15.2.11 Copiando variáveis de tipo de referência

As coisas são diferentes quando se trabalha com variáveis de tipos de referência. Considere o seguinte código, onde primeiro um array
chamado myArray é criado com alguns valores iniciais, em seguida uma variável chamada thing2 recebe o valor de myArray:
var meuArray = new Array( 6, 3, 5, 1 ); var coisa2 = meuArray;
Como myArray é uma referência aos valores do array na memória, o que foi copiado para o thing2 é a referência — então agora myArray e
thing2 estão se referindo ao mesmo conjunto de valores na memória:
As implicações são que, se for feita uma alteração nos valores do array, já que myArray e thing2 estão se referindo aos mesmos valores na
memória, ambos estarão se referindo ao array alterado.
Exercício 2
9
Qual é o valor de myArray[2] depois que as seguintes instruções foram executadas?
var meuArray = new Array( 6, 3, 5, 1 ); var coisa2 = meuArray;
coisa2[1] = 27; coisa2[2]

= 19; coisa2[3] = 77;
15.2.12 Atividades do array

Atividade 1: Criando e exibindo elementos de um array
Escreva um arquivo HTML que crie uma matriz chamada idades contendo os seguintes números: 21, 14, 33, 66, 11. Escreva o
código para que os valores dos elementos da matriz 0, 1 e 3 sejam exibidos. A tela deve ser semelhante à seguinte quando a página
é carregada:
Você pode encontrar uma discussão sobre esta atividade no final da unidade.
Atividade 2: iterando pelo conteúdo do array
Crie uma matriz chamada primos contendo os seguintes números: 1, 2, 3, 5, 7, 11.
Escreva um loop while que irá iterar (loop) através de cada elemento do array, exibindo cada número em uma linha separada. Seu
código deve ser escrito de maneira geral, portanto, se mais números forem adicionados à matriz (digamos, 13, 17 e 19), o código do
loop não precisará ser alterado.
A saída do navegador deve ser algo como:
Atividade 3: Animação usando um array de objetos Image
Crie uma página da Web que mostre uma imagem e, quando o mouse passar sobre essa imagem, a imagem será substituída por um
10
animação de 3 outras imagens antes de retornar à imagem original. Faça a imagem original: silent.gif, com a saída do
navegador da seguinte forma:
Faça as três imagens que são animadas: taptap.gif, knockknock.gif e BANGBANG.gif, com as saídas do navegador da
seguinte forma:
11
Crie uma matriz de objetos Image chamados imagens. Você só precisa se referir à propriedade src como nas seguintes linhas:
// configura o array de imagens images[0] = new Image(); imagens[0].src =

"taptap.gif";
Na seção do corpo do arquivo HTML, exiba a imagem do silêncio (denominando-a como ruído) com um one-liner JavaScript
onMouseOver apropriado:
<corpo>
IMG NOME="ruído" SRC="silêncio.gif"
onMouseOver="startAnimation()">
</BODY>
Crie uma função startAnimation() que defina o tempo de atraso e o imageNumber para exibir primeiro na animação.
Sua função startAnimation() deve fazer uma chamada para uma função animate() escrita da seguinte forma:
função animar() {
document.noise.src = imageNumber+ imagens[ número da imagem ].src;

+; atraso += 250;
if (número da imagem < 4)
setTimeout("animate()", atraso);
// se imageNumber = 4 a animação terminou // e esta função pode terminar
Você pode criar uma versão simples com um atraso imutável de 500 milissegundos inicialmente. Observe como a linha:
document.noise.src = imagens[ imageNumber ].src;
refere-se ao NOME da imagem da tag IMG e redefine a propriedade src desse objeto Image para o array apropriado src do objeto
Image.
15.2.13 Mapa conceitual de arrays

Esta figura ilustra a maneira como diferentes conceitos de matriz podem ser relacionados.
12
15.3 O modelo de objeto JavaScript

15.3.1 Introdução ao modelo de objeto JavaScript
É praticamente impossível escrever JavaScript útil sem usar propriedades e métodos de objeto — mesmo que muitos programadores
novatos não percebam que estão fazendo uso de objetos JavaScript.
Considere a seguinte linha de código:
document.write("Desculpe, esse item está fora de estoque");
A linha acima ilustra o uso de muitos conceitos importantes de objetos, pois envolve a criação de um novo objeto ("Desculpe..." é uma
instância criada a partir da função construtora String ), passando uma referência a esse novo objeto como um argumento para um
método de outro objeto (write() é um método do objeto de documento).
JavaScript tem um modelo de objeto poderoso e flexível. Ao contrário da linguagem de programação Java, JavaScript é uma
linguagem sem classes: o comportamento e o estado de um objeto não são definidos por uma classe, mas sim por outros objetos (no
caso do JavaScript, esse objeto é chamado de protótipo do objeto . diferença para linguagens como Java e C++ geralmente leva as
pessoas a concluir que o modelo de objeto JavaScript é simples, o modelo de objeto JavaScript é poderoso o suficiente para permitir
que um programador JavaScript estenda suas habilidades de herança única para permitir implementações de herança múltipla, mas
também a maior parte da funcionalidade que o JavaScript considera "ausente". Tudo isso também pode ser feito dinamicamente, em
tempo de execução — em outras palavras, os protótipos são definidos enquanto o programa JavaScript está em execução e podem
ser atualizados com novos métodos e propriedades como e quando forem necessários, e não apenas em tempo de compilação como
em linguagens como Java.
À medida que avança nesta parte da unidade, você aprenderá novas maneiras de usar e definir seus próprios objetos e construtores,
e também entenderá mais completamente muitos conceitos de programação JavaScript que aprendeu até agora. O restante desta
introdução fornece uma visão geral mais detalhada do modelo de objeto JavaScript apresentado brevemente na primeira unidade
JavaScript.
15.3.2 Objetos em JavaScript

Um sistema de software é considerado um conjunto de componentes — objetos — que trabalham juntos para compor o sistema.
Os objetos têm um comportamento (definido por funções e métodos) que executa o trabalho do sistema e um estado que afeta seu
comportamento. Como mencionamos anteriormente, os objetos podem ser criados e usados pela programação de uma função
construtora para criar objetos ou instâncias. Um construtor é meramente uma função JavaScript que foi projetada para ser usada
com a nova palavra- chave. O construtor define quais propriedades um objeto deve ter (o estado do objeto), bem como seus métodos.
13
Programar um objeto envolve declarar variáveis de instância para representar o estado do objeto e escrever métodos de instância que
implementam o comportamento. As partes separadas do estado de um objeto geralmente são chamadas de propriedades.
Assim, você pode ter um objeto conta bancária que possua propriedades como titular da conta, endereço do titular, saldo e limite de crédito;
seus métodos incluiriam crédito, débito e mudança de endereço.
JavaScript representa funções (que são usadas para implementar métodos e para criar objetos) como dados do tipo Function (observe o F
maiúsculo), então, de fato, há menos diferença entre propriedades de dados e funções (ou métodos) do que na maioria dos outros objetos .
linguagens de programação baseadas. As funções podem ser passadas e armazenadas em variáveis, e qualquer função armazenada em uma
variável específica pode ser executada quando necessário.
Diz-se que um objeto encapsula seu estado (muitas vezes chamado simplesmente de seus dados) e seu comportamento. No caso do
JavaScript, isso significa que cada objeto possui uma coleção de propriedades e métodos.
Um objeto JavaScript pode herdar estado e comportamento de qualquer outro objeto. Este objeto é chamado de protótipo.
Um objeto pode obter propriedades e métodos da função construtora a partir da qual o objeto é criado; de seu protótipo, por herança; e de
quaisquer propriedades e métodos adicionados separadamente ao objeto depois que ele foi construído (lembre-se de que funções são apenas
dados que podem ser atribuídos livremente a variáveis, como e quando necessário).
Dois objetos feitos a partir da mesma função construtora podem ter propriedades e métodos diferentes um do outro, pois propriedades e métodos
extras podem ser adicionados a cada objeto após sua criação.
Associado à herança está o conceito separado de polimorfismo, a capacidade de chamar um método em um objeto independentemente da
função construtora usada para criar o objeto e esperar que o método apropriado seja chamado para o objeto fornecido. Por exemplo, pode haver
duas funções construtoras, Square() e Circle(), que criam objetos representando quadrados e círculos, respectivamente. O construtor pode criar
esses objetos para que cada um tenha um método area() que retorne a área do objeto. Obviamente, o método funcionará de maneira diferente
para objetos quadrados e circulares, mas qualquer variável contendo um objeto quadrado ou circular pode ter o método de área chamado, e o
polimorfismo garantirá que o método de área correto seja chamado para o objeto apropriado.
15.3.3 Convenções de nomenclatura

Embora inicialmente possa parecer bastante pedante, a seguinte convenção de nomenclatura é usada em toda esta unidade e é amplamente
usada em vários padrões de programação. O uso de uma convenção padrão ajuda o programador a entender o código que está lendo e você é
aconselhado a adotar essa convenção em sua própria programação.
Todas as palavras de um construtor são escritas com uma letra inicial maiúscula. Exemplos incluem:
• Documento
• Forma
• Triângulo
• Variedade
• Corda
• Conta bancária
• Cartão de crédito
A primeira palavra em um nome de instância (objeto) é escrita com todas as letras minúsculas; todas as palavras subsequentes que
compõem o nome do objeto são escritas com inicial maiúscula, como de costume. Exemplos incluem:
• Documento.
• campoidade.
• triângulo1.
• nameArray.
• clienteConta1.
14
A primeira palavra de um nome de método é escrita em letras minúsculas; todas as palavras subseqüentes que compõem o nome do objeto são
escritas com iniciais maiúsculas. Exemplos incluem:
• área.
• setBalance.
• é melhor que.
• postTransaction.
A primeira palavra de uma propriedade é escrita em letras minúsculas; todas as palavras subseqüentes que compõem o nome do objeto são escritas
com iniciais maiúsculas. Exemplos incluem:
• triângulo1.cor.
• largura.
• primeiro nome.
• Endereço Linha 1.
• Valor.
• tamanho da fonte.
Exercício 3
Quais dos seguintes são construtores:
• porta1
• Casa
• Automóvel
• homeHampus
Você pode encontrar uma discussão sobre este exercício no final da unidade.
15.3.4 Criando objetos e variáveis referentes a

objetos
Os objetos são criados de várias maneiras, embora a mais comum seja pelo uso do operador new . Este é um operador de prefixo unário, o
que significa que é colocado antes de um único operando. O novo operador deve ser seguido por uma função construtora. Aqui estão alguns
exemplos: new Object(); var AccountNumbers = new Array( 5 ); var primeiroNome = new String("José");
Onde o objeto é criado?
Há memória livre suficiente para criar o novo objeto. O novo operador retorna uma referência ao local na memória onde o novo objeto foi
criado. No primeiro dos três exemplos acima (new Object();), nenhuma variável é atribuída ao resultado da criação do objeto, portanto não há
como o programador JavaScript se referir a este objeto posteriormente no programa. Em quase todos os casos, uma variável receberá a
referência ao local do objeto recém-criado.
No segundo exemplo acima, a variável de referência accountNumbers recebe a referência ao local do objeto Array recém-criado.
Observação
As variáveis não armazenam objetos, elas armazenam uma referência ao objeto localizado em outro lugar na memória.
15
Criando objetos String
Embora a seguinte maneira de criar objetos String seja JavaScript perfeitamente aceitável:
var primeiroNome = new String("José");
geralmente é muito mais conveniente usar a sintaxe especial fornecida para criar objetos literais String . O mesmo resultado pode ser alcançado
com a seguinte declaração:
var primeiroNome = "José";
Os objetos String podem ser criados de duas maneiras diferentes porque a criação de objetos String é um recurso tão comum de
programação que os desenvolvedores da linguagem JavaScript forneceram essa segunda sintaxe mais simples especialmente
para Strings.
Criando objetos Function
Assim como a criação de Strings é tão comum que os desenvolvedores de JavaScript forneceram uma sintaxe especial, o
mesmo foi feito para facilitar a criação de objetos Function . Como você saberá das unidades anteriores, um objeto de função
pode ser criado da seguinte maneira:
function myFunction( arg1,arg2, -, argN ) { //declarações de função vão aqui }
As próprias funções são objetos (do tipo Function) e podem ser criadas da mesma forma que os objetos usando o
Construtor de funções :
var myFunction = new Function( arg1, arg2, -, argN, "//estado da função
Na maioria dos casos, a maneira anterior de criar objetos Function é mais direta.
15.3.5 Propriedades e métodos do objeto

Os objetos têm propriedades de dados e métodos (propriedades de função). Freqüentemente, uma propriedade de um objeto é um
objeto por si só (ou talvez outro tipo de coleção, como um array). Um exemplo é a propriedade array forms[ ] dos objetos do
documento — esta propriedade contém detalhes (ou seja, um array) para todos os formulários em uma página da Web.
Propriedades
As variáveis (dados) que "pertencem" aos objetos são chamadas de propriedades. Nas unidades anteriores, você viu exemplos de propriedades, como
a propriedade de comprimento de uma matriz :
var meuArray = new Array( 5 );
alert("comprimento do array é: " + meuArray.length );
No exemplo acima, a propriedade length do objeto myArray é acessada pela notação de ponto:
myArray.length
Métodos
Métodos são propriedades de objetos contendo funções. Nas unidades anteriores, você viu exemplos de métodos, por exemplo, o método reverse
de um array:
var meuArray = new Array( 3 ); meuArray[0] = 11; meuArray[1] = 22;
16
meuArray[2] = 33;
alert(meuArray.reverse());
No exemplo acima, o método reverse() do objeto myArray é invocado pela notação de ponto:
meuArray.reverse()
Como pode ser visto, a única diferença das propriedades (dados) é quando os métodos são invocados com o uso do operador () (parênteses)
— este é um operador especial que espera uma variável contendo um objeto Function à esquerda e operandos opcionais ( os argumentos
da função) entre parênteses.
É importante perceber que os métodos são propriedades, mas também podem ser invocados, pois são propriedades que contêm objetos
Function.
A sintaxe do 'ponto'
O que às vezes é conhecido como notação de ponto é usado para indicar quais propriedades um objeto possui. A propriedade de propriedades
pode existir em qualquer número de níveis de profundidade, e a notação de ponto pode ser usada em todos os níveis. multar.
O uso do ponto final (ponto) pode ser pensado como significando "a coisa à direita pertence ao objeto (chamado coleção) à esquerda". A
forma geral para propriedades e métodos a serem invocados é a seguinte:
<objeto>.<propriedade>
<objeto>.<método>()
Exemplos comuns incluem:
var meuArray = new Array( 3 ) var catpic = new ; myArray.length;

Image(); catpic.src = "images/cartoons/sillycat1.gif";
Em cada um dos exemplos acima, a sintaxe de ponto é usada para se referir a uma parte nomeada de dados (propriedade) de um
objeto. Assim, podemos nos referir à propriedade length pertencente ao objeto Array myArray e à propriedade src do objeto Image
catpic.
Podemos ver o uso extensivo da notação de ponto na linha:
document.forms[0].age.value;
Esta linha refere-se à propriedade value da propriedade age (ela própria um objeto) do objeto form no índice 0 do objeto array forms[] do
objeto document . O código que usa essa referência ao valor da caixa de entrada de texto de um formulário é o seguinte:
função
<script> showAge() {
var novaIdade = document.forms[0].idade.valor; alert("A idade é: " +

nova era ); } </
script>
<form> Digite a idade:

<INPUT TYPE="texto" NAME="idade" TAMANHO=10>
<INPUT TYPE="botão" NAME="botão1"
VALUE="clique em mim" SIZE=10 onClick="showAge()">
</form>
A saída do navegador é:
17
18
Variáveis são propriedades
Quando um programa JavaScript está sendo executado. um objeto especial, chamado objeto 'global', é criado. O objeto global
existe até que o programa termine. Todas as variáveis de um programa JavaScript são propriedades desse objeto global.
Funções são métodos
Da mesma forma que todas as variáveis de um programa JavaScript são de fato propriedades do objeto global, da mesma forma
todas as funções de um programa JavaScript são métodos do objeto global.
Funções também são propriedades
Como os métodos são apenas propriedades que contêm objetos Function, as funções, sendo métodos do objeto global, também
são armazenadas nas propriedades do objeto global.
15.3.6 Alguns objetos JavaScript importantes

Embora você tenha programado com objetos em JavaScript por algumas semanas, você pode não estar ciente de alguns dos
objetos com os quais tem trabalhado. Esta seção descreve brevemente importantes objetos JavaScript.
Você pode consultar fontes on-line e textuais para obter mais detalhes de cada objeto JavaScript.
O objeto 'global'
Quando o interpretador JavaScript é inicializado, sempre há uma única instância de objeto global criada. Todos os outros objetos
são propriedades deste objeto. Além disso, todas as variáveis e funções são propriedades desse objeto global.
Para JavaScript do lado do cliente, esse objeto é a janela de instância do construtor Window.
O objeto Window para JavaScript do lado do cliente: window
Quando um documento HTML é carregado em um navegador, uma única instância do objeto Window, denominada janela, é criada.
Todos os outros objetos são propriedades deste objeto de janela. Como tudo é uma propriedade do objeto janela, há um relaxamento
da notação de ponto ao se referir a propriedades. Assim, cada referência a uma variável, função ou objeto não precisa começar
com "janela". — embora esta seja uma notação mais "precisa" para usar, é muito menos conveniente.
Assim, em vez de escrever:
document.write("Olá");
Poderíamos escrever:
window.document.write("Olá"); e assim por diante.
Uma das propriedades do objeto janela é a propriedade status. Esta propriedade é um valor String que é exibido na barra de status
da janela do navegador. Você pode alterar a barra de status com ou sem uma referência explícita ao objeto da janela. Ambas as
linhas têm o mesmo efeito:
window.status = "este é um teste";
status = "isto é um teste";
O objeto Documento: documento
Quando um documento HTML é carregado em um quadro de uma janela do navegador, uma instância do objeto Document —
chamada document — é criada para esse quadro. Esse objeto de documento, como a maioria dos objetos, possui uma coleção de
propriedades e métodos. Talvez o método usado com mais frequência do objeto de documento seja o método write() :
19
document.write( "desculpe, esse item está esgotado<p>" );
Uma propriedade útil do objeto de documento é a propriedade forms. Na verdade, trata-se de um array de objetos Form com um
elemento para cada formulário definido no documento. Assim, poderíamos nos referir à primeira forma definida no documento da
seguinte forma:
document.forms[0]
O objeto 'chamada'
Quando uma função (ou método) é executada, é criado um objeto temporário que existe enquanto a função estiver em execução. Esse
objeto é chamado de objeto de chamada , e os argumentos, as variáveis locais e as funções são propriedades desse objeto.
É através do uso deste objeto de chamada que funções/métodos são capazes de usar argumentos locais e nomes de variáveis/funções
que são os mesmos que variáveis/funções globais, sem confusão. O objeto de chamada é a implementação de JavaScript dos conceitos
de escopo de variável/função — ou seja, determinar qual parte da memória é referida pelo nome de uma variável ou função, quando há
propriedades globais e locais com o mesmo nome.
Objetos de string
Strings são objetos. Uma propriedade frequentemente usada de String é o comprimento. String inclui métodos para retornar uma
nova String contendo o mesmo texto, mas em letras maiúsculas ou minúsculas. Assim, poderíamos criar uma versão maiúscula
da String "hello" da seguinte forma:
var nome = "olá";

alert(nome.toUpperCase());
Deve-se notar que nenhum método pertencente a objetos string nunca altera o valor da string, mas pode retornar um novo objeto String,
como no exemplo acima.
Objetos de matriz
Uma vez que os Arrays são um tópico importante por si só, os objetos Array recebem sua própria seção no final desta unidade — embora
você possa pular para ler essa seção agora para ajudar na sua compreensão do objeto com este exemplo mais familiar.
objetos de função
Você deve consultar a unidade anterior sobre funções.
Como dito anteriormente, as funções são do tipo Function, e podem ser tratadas como variáveis de dados ou propriedades, ou podem ser
tratadas como subprogramas e executadas usando o operador ().
objetos matemáticos
O objeto Math fornece vários métodos e propriedades úteis para processamento matemático. Por exemplo,
Math fornece a seguinte propriedade:
Math.PI
que é útil para muitos cálculos geométricos.
Um exemplo de alguns outros métodos fornecidos pelo objeto Math inclui:
Math.abs();
Math.round();
Math.max( n1, n2 );
20
Estes podem ser utilizados da seguinte forma:
document.write( "<p>PI é " + Math.PI );

"
document.write( "<p>As magnitudes sem sinal dos números -17 e 7 são + Math.abs( -17 ) + + Math.abs( 7 ) );
" ede
document.write( "<p>A parte inteira " 4,25 é "
+ Math.round( 4.25)
);document.write( "<p>O maior de 17 e 19 é " + Math.max(17, 19) );
15.3.7 O objeto 'Triângulo'

Para focar nossa investigação de construtores e objetos definidos pelo usuário, criaremos objetos 'Triângulo'. Estaremos
definindo a função construtor Triangle da seguinte forma:
• Função do Construtor - Triângulo (initWidth, initHeight)
• Propriedades - numSides, largura, altura, cor
• Métodos - maior(t1, t2), area()
Ao trabalhar nesta seção sobre objetos JavaScript, você se familiarizará não apenas com os objetos Triangle,
mas também com a definição e o uso de seus próprios construtores e objetos.
O seguinte é um exemplo de algum código usando triângulos:
var triângulo1 = new Triângulo(10, 20);

document.write("<p><b>triângulo1 tem altura: </b>" + triângulo1.height ); document.write("<p><b>triângulo1 tem
largura: </b>" + triângulo1.largura ); document.write("<p><b>triângulo1 tem área: </b>" + triângulo1.area() );
document.write("<p><b>triângulo1 tem cor: </b>" + triângulo1.color );
15.3.8 Objetos definidos pelo usuário
funções do construtor
Os objetos são criados com o operador new e uma função construtora. O novo operador requer o nome de uma função à sua
direita (com argumentos opcionais) e retornará uma referência ao local de memória do objeto recém-criado.
Exemplos de criação de objetos incluem:

var myArray1 = new Array( 3 ); var meuArray2 = new Array(); var nomeNome = new
String("Jonathan"); var catImage = novo
Imagem();
Se assumirmos que temos um construtor Triangle definido, podemos criar novos objetos da mesma maneira que
acima:
var triângulo1 = new Triângulo( 5, 10 ); var triângulo2 = novo

Triângulo(10, 20); var triArray = new Array( 3 ); triArray[0] = new Triangle( 17, 92 );
Uma função construtora cria um novo objeto, possivelmente inicializando algumas dessas novas propriedades de objetos
com base nos argumentos fornecidos quando a função foi chamada. Podemos ver acima que a função construtora Array()
pode criar uma matriz se fornecida sem argumentos, ou um argumento numérico (para o tamanho da matriz) ou um número
de argumentos (para os elementos iniciais da matriz) .
Nosso construtor Triangle requer dois argumentos — o primeiro é a largura do novo triângulo, o segundo é a
altura. Nossa função construtora Triangle tem a seguinte aparência:
função Triângulo(novaLargura, novaAltura)
21
{ this.width = newWidth; esta.altura = novaAltura; }
As funções construtoras usam a variável especial this — quando uma função é chamada com o operador new, um
novo objeto é criado na memória, ao qual a variável this se refere. Usando esta variável, o construtor é capaz de
atribuir valores a novas propriedades chamadas largura e altura. Quando uma função construtora termina, a
referência ao objeto recém-criado é retornada.
Então, após a seguinte linha ser executada:
var triângulo1 = new Triângulo( 5, 10 );
o objeto triângulo1 deve ter uma propriedade de largura com valor 5 e uma propriedade de altura com valor 10. Isso
pode ser investigado usando a notação de ponto e algumas instruções document.write():
"
document.write("<p> largura é : + triângulo1.largura );
"
document.write("<p> altura é : + triângulo1.altura );
Podemos imaginar a memória organizada da seguinte forma (lembre-se de que todas as variáveis de objeto são
variáveis de referência):
Funções são objetos com propriedades
Agora temos uma função construtora, Triângulo, podemos usar esse objeto de função como um objeto que define Triângulos.
Objeto 'protótipos'
Um objeto de função construtor tem uma propriedade especial chamada 'protótipo' — este é um objeto através do qual
a herança é implementada para todos os objetos criados a partir do construtor: todo objeto criado a partir do construtor
pode herdar as propriedades e métodos do objeto protótipo.
Por exemplo, ao criar uma nova propriedade ou método para o protótipo, essa propriedade ou método é disponibilizado para
todos os objetos criados a partir do construtor. Os protótipos são uma maneira muito útil de definir métodos para objetos e para
definir as propriedades padrão do objeto.
Por exemplo, vamos imaginar que desejamos que todos os nossos objetos Triângulo tenham a propriedade color inicialmente definida
como a String "blue". Para fornecer essa propriedade a todos os objetos Triangle criados no futuro, podemos atribuir a propriedade
ao protótipo Triangle da seguinte maneira:
Triangle.prototype.color = "azul";
Da mesma forma, se quisermos disponibilizar um método para todos os objetos Triangle, precisamos atribuir uma função
a uma propriedade apropriada do protótipo. Um método útil para objetos Triângulo é o cálculo de sua área. Uma função
para calcular a área de um triângulo pode ser definida da seguinte forma:
função triânguloÁrea() {
// a altura do triângulo é metade (largura * altura) var área = 0,5 * this.height * this.width;
22
// retorna o cálculo para 2 casas decimais return * 100) / 100; Math.round( área }
Observe como esta função foi escrita para se referir a qualquer objeto a partir do qual ela é chamada usando a variável this.
Agora precisamos atribuir essa função a uma propriedade do protótipo Triangle . A área do nome do método parece uma boa
escolha:
Triangle.prototype.area = triânguloArea;
Observe que não estamos executando esta função, portanto não usamos o operador (). Estamos fazendo com que Triangle.area se
refira ao mesmo objeto Function que atriangleArea.
Depois de adicionar as linhas acima a um script, agora podemos ver se um objeto Triangle recém-criado possui uma propriedade de
cor e pode usar seu método de área:
var triângulo1 = new Triângulo( 5, 10 );
document.write("<p> propriedade de cor é: " +
triângulo1.cor); document.write("<p> método de área
retorna: "+triângulo1.area() );
Lembre-se, para invocar uma função/método devemos seguir o nome da função com o operador () como acima.
15.3.9 Implementando métodos e variáveis de instância

Há uma distinção feita para onde variáveis e métodos pertencem:
• variáveis de instância — são propriedades que podem ser diferentes para cada objeto de instância
(por exemplo, o triângulo1 pode ter altura 25, enquanto o triângulo2 tem altura 40).
• métodos de instância — métodos que cada objeto pode aplicar a si mesmo e que tem acesso às propriedades
do objeto (por exemplo, triângulo1 pode chamar seu método de área , este método retorna um valor calculado
usando as propriedades de altura e largura da variável1).
• variáveis de classe — em um modelo de objeto baseado em classe, são variáveis úteis/relevantes para a
classe como um todo, mas que não têm nada a ver com nenhuma instância particular da classe (por exemplo,
o número de lados de um triângulo é 3, o valor de PI é 3,1415926535). JavaScript também tem o conceito de
"variáveis de classe", mas as variáveis não pertencem a classes, mas sim às funções construtoras (que são
objetos Function). Esses tipos de variáveis não requerem uma instância criada a partir dos construtores Triangle
ou Math para que tenham significado.
• métodos de classe — Semelhantes às variáveis de classe, são métodos que são úteis/relevantes para a função
do construtor e não requerem uma instância de nenhum objeto criado pelo construtor para que seja útil.
Vamos considerar brevemente como cada um deles é implementado em JavaScript.
Propriedades de instância e métodos de instância
A seção anterior sobre a propriedade protótipo ilustra precisamente o que se entende por propriedades de instância
(propriedades) e métodos de instância:
• Uma propriedade adicionada ao protótipo ou criada dentro do construtor é uma instância

variável (propriedade).
• Um método adicionado ao protótipo (ou no construtor) é um método de instância.
23
Na verdade, como um método é apenas um tipo especial de propriedade, as variáveis de instância e os métodos de instância
podem ser considerados implementados como propriedades de instância do protótipo.
Você pode achar útil comentar claramente a implementação de propriedades e métodos de instância em seu
código, como as linhas a seguir ilustram:
////////////////////////////////////////////// // instância ( objeto)

métodos //////////////////////////////////////////////
função triânguloÁrea() {
// a altura do triângulo é metade (largura * altura) var área = 0,5 * this.height * this.width;
// retorna o cálculo para 2 casas decimais return Math.round( area 100; } * 100) /
// adiciona o método de instância "area" à propriedade "prototype" de "Triangle // (isto é, adiciona este método à
propriedade "prototype" de "Triangle"
Triangle.prototype.area = triânguloArea;
////////////////////////////////////////////// // instância ( objeto) variáveis

(propriedades) //////////////////////////////////////////// // // a cor padrão para triângulos
é "azul" Triangle.prototype.colour =
"azul";
Propriedades da classe
Uma "propriedade de classe" pode ser implementada atribuindo um valor a uma propriedade do objeto construtor.
Isso foi feito para valores como Math.PI.
Por exemplo, podemos implementar a propriedade de classe numSides com um valor de 3 para o construtor Triangle da
seguinte forma:
////////////////////////////////////////////// // propriedades da
classe ////////////////////////////////////////////// // adicionar propriedade "numSides"
Triangle.numSides = 3;
Em qualquer ponto posterior do código, podemos nos referir a essa propriedade de classe usando a notação de ponto. Por exemplo:
document.write( "o número de lados de um triângulo é: " +

Triângulo.numLado
As propriedades de classe podem ser referidas mesmo que nenhuma instância tenha sido construída (já que a propriedade
pertence ao construtor e não ao protótipo).
Métodos de classe
Um método de classe, como Math.abs(), é implementado da mesma forma que uma propriedade de classe — uma função é
atribuída a uma propriedade da função construtora.
Por exemplo, podemos implementar um método de classe Triangle chamado large(). Este método requer dois
24
argumentos, cada um um objeto Triangle, e retorna a String "primeiro" se o primeiro Triângulo for o maior, caso
contrário, o método retorna "segundo" (ou seja, se o segundo for igual ou maior, ele retorna "segundo"). Primeiro devemos criar
uma função:
função triânguloLarger(t1, t2) { if( t1.area > t2.area )
return "primeiro";
outro
retornar "segundo"; }
t1 e t2 são as duas referências do objeto Triangle passadas como argumentos. Esta função faz uso do método de instância de
área para cada um dos dois objetos Triangle — o triângulo maior é definido como aquele com a maior área.
Então devemos atribuir esta função a uma propriedade apropriadamente nomeada do objeto construtor:
// adiciona a função ao construtor (ou seja, adiciona ao objeto de função do construtor
Triângulo.maior = triânguloMaior;
Observe que não estamos executando esta função, portanto não usamos o operador (). Estamos fazendo referência a Triangle.larger
para o mesmo objeto Function como triânguloLarger.
O método pode então ser usado da seguinte forma:
var triângulo1 = new Triângulo(10, 20); var triângulo2 = new

Triângulo(5, 10); document.write("<p><b>o maior dos triângulos
'triângulo1' e 'triângulo document.write( Triângulo.larger( triângulo1, triângulo2 ) );
15.3.10 A cadeia de pesquisa de objetos JavaScript

Quando um objeto é criado, uma referência é criada para o local na memória onde as propriedades e métodos do objeto são
armazenados. Além disso, é criada uma referência ao protótipo do objeto. Quando o JavaScript deseja recuperar o valor de uma das
propriedades deste objeto, ou invocar um dos métodos deste objeto, ele primeiro pesquisará os detalhes armazenados para o objeto
e, se a propriedade/objeto desejado não for encontrado, seguirá a referência a o protótipo do objeto, onde continua a procurar a
propriedade ou método. Novamente, se a propriedade/método não for encontrado no protótipo, ele busca o próprio protótipo do objeto
protótipo, e assim por diante. Eventualmente, se não for encontrado, o JavaScript alcançará o objeto Object — este é o 'pai' de todos
os objetos integrados e definidos pelo usuário.
Caso a propriedade ou método não seja encontrado, o valor indefinido é retornado.
É importante ter em mente que os objetos são tipos de referência , assim como os objetos protótipos (já que eles próprios são apenas
objetos).
Substituindo a herança
Nas seções anteriores, investigamos os recursos JavaScript de protótipos e herança de objetos. No entanto, qualquer objeto pode
substituir uma propriedade ou método herdado definindo o seu próprio.
Em nosso exemplo Triangle, criamos uma propriedade de cor de protótipo com um valor de String "blue". Isso significa que, por
padrão, todos os nossos objetos Triangle herdarão essa propriedade e valor. No entanto, vamos considerar que, enquanto para a
maioria dos objetos a cor azul é adequada, para o objeto triânguloR podemos desejar ter uma propriedade de cor com valor "vermelho".
A programação desta situação é muito simples:
var t1 = new Triangle( 10, 20 ); var triânguloR = new

Triângulo( 6, 6 ); triânguloR.cor = "vermelho";
Após a execução das linhas acima, parte da memória ficará da seguinte forma:
25
Quando o JavaScript se depara com o código referente à propriedade de cor do objeto triânguloR:
document.write("a cor do triânguloR é " + triânguloR.cor );
ele seguirá a referência para o triângulo R até o local 001741 e procurará uma cor de propriedade. Ele terá sucesso na localização 001743. O
valor desta propriedade será retornado, e este valor, "red", será passado para o método document.write() . Como o valor da propriedade foi
encontrado no objeto referido por traingleR, nenhuma pesquisa é feita no protótipo do objeto Triangle . Desta forma, diz-se que o objeto
triânguloR substituiu a propriedade de cor herdada por seu próprio valor de "vermelho".
É importante observar que, embora o objeto referido por trianguloR tenha substituído sua propriedade de cor herdada, não houve alteração em
nenhum dos outros objetos Triângulo . Assim, por exemplo, o objeto t1 ainda herda a propriedade de cor de Triangle.prototype.
Observação - a diferença entre JavaScript e outras linguagens de objeto
Em JavaScript, um objeto específico pode substituir o que herda de seu protótipo de objeto. Todos os outros objetos herdados do protótipo
podem permanecer inalterados por essa alteração. Isso difere de muitas outras linguagens, como Java, em que quaisquer alterações na
herança são refletidas em todos os objetos desse tipo específico.
A natureza dinâmica da herança por meio de referências de protótipo
Um conceito final a ser apreciado em relação à herança baseada em protótipo em JavaScript é que a herança de propriedades e métodos de
protótipo é dinâmica: se um objeto for criado e o protótipo for subsequentemente alterado, as alterações serão refletidas no estado e no
comportamento de qualquer objeto herdado de isto.
Ilustraremos essa herança dinâmica com o seguinte código:
var meuTriângulo = new Triângulo( 6, 8 ); var triângulo2 = new Triângulo( 11, 22 ); document.write("<p> a
cor do meuTriângulo é " meuTriângulo.color ); document.write("<p> a cor do triângulo2 é " +
+
triângulo2.color ); Triangle.prototype.color = "verde"; document.write("<p> a cor do meuTriângulo é"
meuTriângulo.color ); document.write("<p> a cor do triângulo2 é " + triângulo2.color );
Após a execução das duas primeiras linhas:
var meuTriângulo = new Triângulo( 6, 8 ); var triângulo2 = new Triângulo( 11, 22 );
26
parte da memória terá a seguinte aparência:
Portanto, quando as duas primeiras instruções documemt.write( ) são executadas:
document.write("<p> a cor do meuTriângulo é " document.write("<p> a + meuTriângulo.color );

cor do triângulo2 é " + triângulo2.color );
JavaScript recupera a cor herdada "azul" para cada objeto. Porém, após a execução da linha que altera o
propriedade protótipo:
Triangle.prototype.color = "verde";
memória é alterada para se parecer com o seguinte:
27
Assim, quando as duas últimas instruções documemt.write() são executadas, a referência é seguida para o valor da cor na localização
001734 "verde", e é esse valor de propriedade alterado que é herdado por ambos os objetos Triangle .
É importante entender, então, que alterar um protótipo altera dinamicamente as propriedades e métodos herdados de todos os
objetos que compartilham o protótipo daquele ponto em diante, e não deve ser uma ação usada levianamente, ou quando
alguma solução mais simples é possível.
15.3.11 Atividades objeto

Atividade 4 - Iterando pelas propriedades do objeto
Crie um objeto customer1 com as seguintes propriedades e valores:
Escreva um loop for/ in que irá percorrer as propriedades deste objeto, exibindo cada nome de propriedade e valor em uma
linha separada.
A saída do navegador deve ser algo como o seguinte:
Atividade 5 — Função Construtora para Retângulo
Crie uma função construtora para objetos Rectangle . As propriedades dos novos objetos Rectangle a serem inicializados no
construtor são seu comprimento e altura.
Sua função construtora deve ser projetada para criar novos objetos Rectangle com código como o seguinte (observe que o
comprimento é o primeiro argumento e a altura o segundo):
" +
var rect1 = new Rectangle( 15, 20 ); document.write("<p> comprimento é : rect1.length ); document.write("<p> altura
"
é : + rect1.height );
28
15.4 Arrays como objetos

Arrays são objetos e possuem propriedades e métodos como qualquer outro objeto. O protótipo do objeto array
pode ser ilustrado pela figura a seguir:
Anteriormente nesta unidade, lidamos em detalhes com a propriedade length de arrays. Os três primeiros métodos da lista de objetos
Array acima são discutidos abaixo. Você é aconselhado a consultar fontes e livros on-line para obter detalhes sobre as muitas outras
funções do Array .
15.4.1 Método array: join

O método join() é uma maneira direta de converter da estrutura tabular e numericamente indexada de um Array em
um texto simples String. join() copia todos os elementos de um Array em um objeto String , separando o valor de
cada elemento com o argumento String fornecido ou com uma vírgula "," se nenhum argumento for fornecido.
A forma geral do método join() é:
<matriz>.join( <separador> );
onde <array> é uma variável contendo um array, e <separator> (se presente) é uma String a ser usada para separar cada
elemento do array. O método join() é chamado por padrão quando um objeto Array é passado como parâmetro para uma
instrução document.write(...) .
Um exemplo de algum código usando o método join( ) é:
var meuArray = new Array(4, 6, 7, 2);
document.write("<p> meuArray:" + meuArray ); document.write("<p>

meuArray.join(): " document.write('<p> meuArray.join( " + meuArray.join() ); " ): '
_ + meuArray.join( " _ " ) );
A saída do código é:
Como pode ser visto na saída, chamar document.write(...) simplesmente com a variável Array como argumento é o
29
o mesmo que fornecer o nome do Array e seu método join() padrão . No entanto, quando o método join() é chamado com o
"
método. _ argumento ", esta String é retornada como o separador para cada elemento da matriz na String retornada pelo
15.4.2 Método array: sort

Como o próprio nome sugere, o método sort() Array fornece um mecanismo para alterar a ordem dos elementos de um
Array de acordo com os critérios fornecidos.
A ordem padrão de sort() é ordem alfanumérica crescente. Isso produz alguns resultados não intuitivos para valores numéricos:
var meuArray = new Array(4, 16, 7, 2); document.write("<p>

"
meuArray: + meuArray); document.write("<p> meuArray.sort():
+ meuArray.sort());
"
Como 16 vem alfabeticamente antes de 2 (1 é alfanumérico menor que 2 ), ele aparece primeiro na matriz classificada.
Para classificar os elementos do array de acordo com a ordem numérica (ou alguma outra), uma função de ordenação deve ser
fornecida como um argumento para o método sort(). Essa função de ordenação deve aceitar dois argumentos e retornar uma
indicação numérica indicando qual dos dois argumentos deve ocorrer antes do outro. Se a função retornar o valor N, então:
• N < 0: se o primeiro argumento deve aparecer antes do segundo.
• N > 0: se o segundo argumento deve aparecer antes do primeiro.
• N = 0: se os dois argumentos forem equivalentes.
Um exemplo de função que coloca os elementos em ordem numérica crescente é:
função menor(n1, n2) { return (n1 - n2); }
A função menor() acima retorna um valor negativo se o primeiro argumento for o menor, zero se os dois números forem iguais e
um número positivo se o segundo argumento for o menor.
Uma função mais explícita (embora menos elegante), desta vez para retornar o maior de dois números, pode ser escrita da
seguinte forma:
função maior(n1, n2) { if(n1 > n1)
return -1; // "n1" primeiro senão if (n1
< n2) return 1; // "n2" primeiro senão
retorna 0;
Como podemos ver claramente, esta função large () retorna -1 se o primeiro argumento for maior, 1 se o segundo argumento for
maior e zero se os argumentos forem iguais. Um exemplo de algum código que ilustra a classificação padrão (alfabética) e a
classificação usando a função large() acima é o seguinte:
var meuArray = new Array(4, 16, 7, 2); document.write("<p>

"
meuArray: + meuArray); document.write("<p> meuArray.sort():
+ meuArray.sort());
"
///////////////////////////////////////////// // função para retornar o menor de 2

números /////// então ordenará os números em ordem DESCENDENTE
função maior(n1, n2)
{ se(n1 > n1)
30
retornar -1; // "n1" primeiro senão if (n1 < n2) return 1; // "n2"
primeiro senão retorna 0;
} document.write("<p> meuArray.sort(): " + meuArray.sort(maior));
A saída do navegador do código acima é:
15.4.3 Método array: reverso

O método reverse() não retorna nenhum valor; em vez disso, ele reorganiza os elementos do Array em ordem inversa (ou
seja, ordem inversa dos índices numéricos de 0..(comprimento-1).
Considere um array myArray com os seguintes valores:
Se o método reverse() for invocado em myArray, o seguinte será obtido:
Algum código para demonstrar isso é o seguinte:
var meuArray = new Array(3);
meuArray[0] = "olá"; meuArray[1]

= falso; meuArray[2] = 16;
"
document.write("<p> meuArray: + meuArray);
meuArray.reverse();
document.write("<p> depois de inverter...");
31
"
document.write("<p> meuArray: + meuArray);
A saída do navegador do código acima é:
15.4.4 Arrays unidimensionais e multidimensionais

Até agora, a discussão sobre arrays envolveu o que é conhecido como arrays unidimensionais, que são arrays formando arranjos
de valores que podem ser acessados usando um único índice numérico e podem ser representados como uma linha de caixas,
cada caixa sendo numerada ( pelo índice) e segurando um valor. A maioria das linguagens de programação fornece recursos para
arrays multidimensionais, que são arrays que requerem múltiplos índices numéricos. Uma matriz bidimensional pode ser representada
como uma estante de livros, onde cada prateleira é ela própria uma matriz unidimensional.
Em JavaScript, um array bidimensional — contendo os meses e os dias do mês — pode ser criado da seguinte forma:
var entrega = new Array(12); entrega[0] = novo Array(31);
// Entrega em
janeiro[1] = new Array(29); // permite entrega em fevereiro em anos bissextos[2] = new
Array(31); // Março... entrega[11] = new Array(31); // dezembro
Observe que uma matriz bidimensional é criada definindo cada elemento de uma matriz unidimensional para serem as
próprias matrizes.
Este array poderia ser usado para representar os dias em que uma empresa poderia realizar uma entrega, e poderíamos
colocar valores verdadeiro/falso em cada elemento para indicar se uma entrega é possível naquele dia ou não. Se a
entrega não for possível no dia 1º ou 2 de janeiro, mas for possível no dia 3, podemos escrever:
entrega[0][0] = falso; // nenhuma entrega possível Entrega em 1º de janeiro[0][1] = false; // nenhuma entrega
possível Entrega em 2 de janeiro[0][2] = true; // a entrega é possível 3 de janeiro
No entanto, vamos supor que, devido ao mau clima e às férias anuais dos funcionários, a empresa não possa realizar entregas
durante o mês de agosto. A natureza flexível do JavaScript nos permite fazer o seguinte:
entrega[7] = falso; // Agosto - sem entregas
Observe que um array multidimensional pode facilmente ter tamanhos diferentes para suas diferentes linhas, e algumas linhas
nem precisam ser arrays.
Para facilitar o trabalho com arrays multidimensionais, pode-se adicionar novos métodos ao protótipo Array ou criar novas
funções construtoras que usam Array como protótipo. Considere a seguinte função construtora que tenta facilitar a criação
de arrays multidimensionais. Leva dois argumentos - o tamanho da primeira e segunda dimensões - e cria uma matriz
bidimensional:
function two_dim_array(length_d1, length_d2) {
// loop para tornar cada elemento de "this" um // array com

comprimento "length_d2"
var i = 0;
while( i < comprimento_d1 )
32
{ this[i] = new Array( length_d2 ); i++;
// torna a propriedade "comprimento" do array "this" // um objeto com

propriedades // "d1" = "comprimento_d1" // "d2" = "comprimento_d2"
this.length = { d1:length_d1, d2:length_d2 }; } two_dim_array.prototype =

Matriz;
var myArray = new two_dim_array(3,2);
15.5 Objetos como arrays associativos

Embora esteja claro que arrays são objetos JavaScript, JavaScript também permite que objetos e suas propriedades sejam
acessados como se fossem arrays. Arrays JavaScript normais indexam seus valores em ordem usando índices inteiros. Ao
tratar objetos JavaScript como arrays, as Strings são usadas como índices para associar cada valor de propriedade ao nome do objeto.
Arrays desse tipo são chamados de "arrays associativos".
Para se referir a uma propriedade de objeto usando a notação de array, basta passar o nome da propriedade como uma String para os
colchetes do array aplicados ao objeto, conforme a seguir:
objectName["propertyName" ]
Um exemplo do uso da notação de matriz associativa para acessar as propriedades do objeto é ilustrado no código a seguir:
var objeto1 = novo Objeto; object1.name

= "Joana"; objeto1.idade = 27; object1.nationality = "Britânico";
document.write(<p> nome da propriedade: document.write("<p> idade
"
da propriedade: document.write("<p> nacionalidade da propriedade:
+ objeto1["nome"]
" ); +
"
object1["nacionalidade" ] var myArray = new Array(5); document.
objeto1["idade"]);
write("<p> tamanho do array: " +
)
+ meuArray["comprimento" ] );
É importante observar que, embora a indexação de colchetes seja usada com arrays associados, são objetos que estão sendo
processados e que esses objetos devem ser criados com funções construtoras (e a palavra-chave new ) ou com objetos literais —
arrays associativos são não criado usando o objeto Array integrado.
15.5.1 Enumerando arrays associativos com instruções

de loop FOR/IN
Uma forma de instrução de loop criada para o processamento de matrizes associativas é a instrução FOR/IN. Esta instrução permite o
processamento de todas as propriedades de arrays definidas pelo usuário (e todas as propriedades herdadas definidas pelo usuário).
Um exemplo da instrução FOR/IN é:
var objeto1 = novo Objeto;
objeto1.x = 29; objeto1.y

= 6; objeto1.z = 55;
for( propriedade var em object1)

33
{
" "
document.write("p>o valor da propriedade é " + objec + propriedade +
Observação
É importante observar que os desenvolvedores de JavaScript não prescreveram a ordem na qual a instrução FOR/IN processa as
propriedades do objeto. Portanto, a saída de tais declarações pode variar de navegador para navegador, e não se pode confiar que a
ordem seja sempre a mesma.
Se a ordem for importante, uma programação mais sofisticada é necessária ou o código deve ser testado nos navegadores específicos
nos quais o JavaScript precisa ser executado - junto com um aviso claro de que o código pode não funcionar em outros navegadores.
Obviamente, é melhor usar essa instrução de forma que a ordem em que as propriedades são processadas não importe.
A utilidade real da instrução FOR/IN é que ela permite o processamento iterativo de todas as propriedades de um objeto, da mesma
forma que uma variável de loop numérico pode ser usada para processar iterativamente todos os elementos de uma matriz normal.
Esta técnica é útil principalmente onde
• A ordem das propriedades não importa ou pode ser resolvida
• Todas (ou pelo menos a maioria) propriedades de um objeto precisam ser processadas da mesma forma
• Há um grande número de propriedades, de modo que uma instrução FOR/IN salva tanto o programa
declarações e ajuda a evitar a chance de esquecer de processar uma propriedade de objeto
15.5.2 Usando FOR/IN para matrizes de índices numéricos

As instruções FOR/IN podem ser usadas para enumerar matrizes de índices numéricos normais. Por exemplo, considere o código:
var objeto1 = new Array( 3 );
objeto1[0] = 4; objeto1[1]
= 11; objeto1[2] = 22;
for( var index in object1) {
document.write("<p>o valor do índice " object1[ index]) + índice + "é" +
O código acima produz a seguinte saída em um navegador:
No entanto, como em qualquer uso de FOR/IN, não há garantia de que os elementos serão recuperados na ordem do índice
numérico. Para garantir que os elementos sejam enumerados em sequência numérica (começando em 0), use um loop como
o seguinte:
34
var objeto1 = new Array( 3 ); objeto1[0] = 4; objeto1[1] = 11; objeto1[2]

= 22;
35
var índice = 0;
while( índice < objeto1.comprimento ) {
document.write("<p>o valor do índice " object1[ i + índice + "é" +
índice++;
}
Observação
Você pode querer ler sobre a instrução de loop FOR mais elegante para loops numéricos simples, como o acima.
15.5.3 Atividades e trabalhos futuros
Atividade 6 — Usando matrizes de imagens para melhorar a "Decades Music Shop"
A empresa "Decades Music Shop" criou um site de pedidos de música on-line. O site fica assim:
O Webmaster que montou o site fez desta uma página inicial visualmente interativa organizando as quatro imagens em uma
tabela. A tabela tem três linhas para "Os anos 70", "Os anos 80" e "Os anos 90" e a primeira coluna é uma imagem
abrangendo todas as 3 linhas. A mesma página, com a borda da tabela definida como 1, é a seguinte:
As imagens para "The 70s", "The 80s" e "The 90s" mudam quando o mouse passa sobre elas — ou seja, elas foram transformadas
em imagensrolar
no evento MouseOut a
através da ao passar o mouse e
36
atributos da tag IMG. As três capturas de tela abaixo mostram como a página muda quando o mouse passa sobre cada uma dessas
imagens:
O atual Webmaster da loja de música não conhece Arrays e, portanto, implementou uma função JavaScript separada para cada
evento onMouseOver e onMouseOut das imagens — ou seja, o Webmaster teve que criar duas funções para cada imagem. As
funções para a imagem dos anos 70 são as seguintes:
function select70s() {
document.the70s.src = "the70s_selected.gif"; document.textArea.src =

"the70s_selected_TEXT.gif";
}
função desmarcar70s() {
document.the70s.src = "the70s_UNselected.gif"; document.textArea.src =

"UNselected_TEXT.gif";
37
A tabela HTML é criada com o seguinte código:
<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=202 BORDER=0>
<TR>
<TD rowspan = 3> <IMG
NAME="textArea" SRC="UNselected_TEXT.gif"> </TD>
<TD>
<A HREF="the70s.html" onMouseOver="select70s();" onMouseOut="deselect70s();">
<IMG NAME="the70s" SRC="the70s_UNselected.gif"
BORDA=0></A> </
TD> </TR>
<TR>
<TD>
BORDA=0></A> </
TD> </TR>
<TR>
<TD>
BORDA=0></A> </
TD> </TR>
</TABELA>
Observe como os atributos de evento onMouseOver e onMouseOut da imagem dos anos 70 chamam as duas funções listadas acima.
Sua tarefa é reduzir o número de funções necessárias de seis para duas. Você deve criar uma única função chamada selectImage() e
outra chamada deselectImage( ), na qual é passado o número da imagem para selecionar ou desmarcar.
Refira-se à imagem dos anos 70 como número 0, à imagem dos anos 80 como número 1 e à imagem dos anos 90 como número 2.
Você deve obter essa redução de funções criando três arrays, chamados selectedImages, deselectedImages e imageNames. Eles
contêm Strings contendo o nome da imagem relevante, conforme declarado na tag HTML IMG NAME="...". Cada array deve conter um
objeto Image cuja propriedade src foi definida para a imagem apropriada.
alterar uma imagem de documento ao se referir a uma matriz pode ser feito de maneira semelhante a esta:
document.the80s.src = imagens selecionadas[1].src;
Se sua função chama seu argumento de índice imageNumber, você pode criar uma String que contém a instrução que deseja executar
e, em seguida, usar a função eval() para executar essa String:
38
var imageStatement = "documento." + imageNames[imageNumber];
imageStatement += ".src = selectedImages[" + imageNumber + "].src";
eval(imagemStatement);
Portanto, se imageNames[ imageNumber ] contiver "the80s" e a variável imageStatement conterá precisamente a

instrução que você deseja executar!
Atividade 7 — Usando arrays associativos de imagens para melhorar a "Decades Music Shop"
As matrizes associativas oferecem uma maneira de associar nomes em vez de números aos elementos da matriz.
Sua tarefa é tornar music_arrays.html mais significativo, substituindo suas matrizes de imagens por objetos que
tenham uma propriedade para cada imagem. Isso significa que a necessidade de uma matriz de nomes de imagem é
removida, a necessidade de uma instrução eval é removida e o argumento para as funções selecionar e desmarcar
torna-se uma String mais significativa, como "os anos 70" ou qualquer que seja o IMG NAME. definido como.
DICA 1: Crie um array associativo (objeto) com imagens como propriedades.
Substitua suas instruções de criação de matriz pela criação de objeto. Em seguida, substitua as instruções de atribuição de
elemento de matriz por instruções de propriedade de objeto:
var selecionado = novo Objeto; selecionado.the70s = new Image(); selecionado.the70s.src =

"the70s_selected.gif";
Assim agora temos um objeto (ou seja, um array associativo) nomeado selecionado, que pode ter suas propriedades Image acessadas
através do nome da propriedade, por exemplo:
selecionado["anos 70"].src;
DICA 2: Passe o nome da propriedade como argumento de onMouseOver e onMouseOut Substitua seu
Linhas HTML IMG com algo semelhante ao seguinte:
<A HREF="anos 70.html" onMouseOver="selectImage('anos 70');"

onMouseOut="deselectImage('anos 70');">
<IMG NAME="anos 70" SRC="anos 70_UNselected.gif" BORDA=0>
</A>
(lembre-se, já que você não pode ter aspas duplas dentro de aspas duplas, você precisará misturar aspas simples e
duplas para a String de uma linha JavaScript onMouseOver, já que você está passando um argumento String como
parte de sua instrução JavaScript).
39
Atividade 8 — Usando o objeto definido pelo usuário com métodos para melhorar a "Decades Music Shop"
A atividade anterior reduziu bastante a quantidade de código e melhorou a legibilidade e o significado das chamadas de
função.
No entanto, atualmente temos três objetos contendo nossas imagens e duas funções isoladas. Podemos organizar ainda
mais as coisas encapsulando as funções selecionar e desmarcar em objetos de imagem de rolagem definidos pelo usuário.
Crie uma função construtora chamada RolloverImage() da seguinte forma:
Onde as propriedades da instância são as seguintes:
Corda nome o nome da

imagem esta
R ll
Imagem selecionado Eu a versão
selecionada do
IMG
Imagem Não selecionado a versão não
selecionada do th
IMG a versão
Imagem TEXTO selecionado selecionada do
T t IMG a
Imagem UnselectedTE versão não
XT selecionada do
TEXT IMG (na
verdade, isso é o
mesmo para ll bt it
i
Crie os métodos de instância para o protótipo — eles devem ser os métodos select() e deselect().
Crie um objeto no qual armazenar seus objetos RolloverImage, chame esse objeto de rolloverImages.
Crie, como propriedades de seu objeto rolloverImages, três instâncias de RolloverImage denominadas anos 70, anos
80 e anos 90. Isso permite que você use declarações como:
rolloverImages.the70s.select()
40
para eventos onMouseOver e assim por diante.
SUGESTÃO: As entradas da tabela HTML devem chamar métodos de objeto.
As entradas da tabela HTML devem ser parecidas com as seguintes:
<TD>
<A HREF="anos 70.html"

onMouseOver="rolloverImages.the70s.select()" onMouseOu <IMG NAME="the70s"
SRC="rolloverImages.the70s_UNselected.gif" BORDER=0> </A>
</TD>
15.6 Questões de Revisão

1. O que é uma matriz?
Você pode encontrar a resposta final da unidade.
2. Qual é o papel do número 4 na linha:
Alert(meuArray[4]);
3. Quantos elementos, e quais são seus índices, no array age criado na instrução:
var idades = new Array(3)
4. Considere este código trabalhando com variáveis numéricas:
var a1 = 5; var b1 = a1;
"
document.write( "<p> a1 = +a1); b1 = 7;
"
document.write("<p> a1 = +a1);
e este código trabalhando com variáveis de array
var a2 = new Array( 2 );
a2[0] = 5; a2[1]
= 6; var b2 = a2;
document.write("<p>
"
a2 = +a2); b2[0] = 7;
document.write("<p> a2 = " +a2);
41
A saída do navegador quando esse código é executado é a seguinte:
Por que a2 muda quando b2 muda, mas a1 não muda quando b1 muda? você pode encontrar o
resposta final da unidade.
5. Por que document começa com letra minúscula na declaração: document.write("desculpe,
produto fora de estoque"); Você pode encontrar a resposta final da unidade.
6. Qual saída o código a seguir produzirá - tente resolver isso no papel, não insira o código e tente
fora ainda!
<script src="triangle_class.js"></script>
<script>
var triângulo1 = new Triângulo(10, 20); var t2 = triângulo1;
t2.largura = 5;
document.write("triangle1 tem largura: " + triângulo1.largura );
</script>
7. Objetos JavaScript são apenas estruturas de dados? Você pode encontrar a resposta final da unidade.
15.7 Tópicos de Discussão

1. Um objeto é apenas um array indexado por nomes de propriedades.
Você pode fazer alguma contribuição para este tópico no final da unidade.
2. Por que os programadores devem tentar evitar a alteração de protótipos no meio do código, onde os objetos que usam o
protótipo estão sendo criados e usados?
Você pode fazer alguma contribuição para este tópico no final da unidade.
15.8 Respostas
42
15.8.1 Discussões do Exercício 1

As respostas e discussão das questões são as seguintes:
Um elemento de uma matriz é referido com o nome da matriz e o índice entre colchetes. O primeiro elemento é aquele indexado
com 0, então é weekDays[0] e assim por diante:
• O primeiro elemento é: weekDays[0]
• O último elemento: weekDays[6]
• O 4º elemento: weekDays[4]
• O valor de weekDays[0] é "Monday" (podemos ver isso na figura), e assim por diante.
• O valor do primeiro elemento: "Monday"
• O valor do 4º elemento: "Sexta-feira"
• O elemento do array refere-se à parte de weekDays que contém o valor, ou seja, weekDays[0] ou weekDays[6] e assim
por diante.
• O elemento que contém String "Monday": weekDays[2]
• O elemento que contém String "Saturday": weekDays[5]
O índice do elemento array refere-se ao número do elemento weekDays que contém o valor fornecido; como "Monday" é
armazenado em weekDays[2], o índice desse elemento é 2:
• O índice do elemento contendo String "Monday": 2
• O índice do elemento contendo String "Saturday": 5

Após a execução das duas primeiras linhas, a memória fica assim:
Já que thing2 refere-se aos mesmos valores de array que myArray, após as três linhas:
coisa2[1] = 27; coisa2[2]

= 19; coisa2[3] = 77;
memória terá sido alterada da seguinte forma:
43
Portanto, o valor de myArray[2] agora é 19.
15.8.3 Discussões da Atividade 1

O código a seguir atenderá aos requisitos:
<html> <script>  </script> </html>
Esta primeira linha:
var idades = new Array( 21, 14, 33, 66, 11 );
cria uma matriz e a inicializa com os 5 valores. Isso também poderia ter sido alcançado da seguinte forma:
var idades = new Array( 5 ); idade[0] = 21; idades[1] = 14;

idades[2] = 33; idades[3] = 66; idades[4] = 11;
As linhas document.write( ... ) exibem os valores de cada elemento especificado do array.

Para criar o array de primos podemos escrever o seguinte:
var primos = new Array( 6 );
Para colocar os valores na matriz, podemos escrever o seguinte:
primos[0] = 1;
primos[1] = 2;
primos[2] = 3;
primos[3] = 5;
primos[4] = 7;
primos[5] = 11;
Alternativamente, poderíamos criar e inicializar o array em uma única linha:
var primos = new Array( 1, 2, 3, 5, 7, 11 );
Para percorrer o array, precisamos de uma variável de índice (vamos usar i) e um loop while que continuará repetindo
44
enquanto i é menor que o valor da propriedade length do array. Ao usar a propriedade length na condição de loop
externo, tornamos o loop geral, pois ele percorrerá todo o array, independentemente do comprimento do array.
var i = 0; while (i
< primos.comprimento) {
document.write("<p> " i++; + primos[i] );

As funções do construtor são nomeadas com uma letra maiúscula inicial, portanto, os seguintes são os nomes das funções do
construtor:
• Casa
• Automóvel
Os outros podem ser objetos, métodos ou nomes de propriedades:
• porta1
• homeHampus

Um exemplo de arquivo HTML resultando na animação desejada pode ser o seguinte:
<HTML> <HEAD> <SCRIPT>  </SCRIPT> </HEAD>
<corpo>
<IMG NAME="noise" SRC="silence.gif"

onMouseOver="startAnimation()">
</BODY> </HTML>
É importante que você entenda este programa antes de passar para as atividades de objeto posteriores.

O objeto customer1 pode ser criado da seguinte forma:
var cliente1 = new Object();
As propriedades deste objeto podem ser criadas e atribuídas da seguinte forma:
cliente1.nome = "fred"; cliente1.idade = 29; cliente1.creditLimit = 500;
Um loop for/ in para iterar e exibir as propriedades em linhas separadas pode ser:
for( var prop in customer1 )

{ document.write( "<p><b> propriedade </b>"
+ prop + "<b> tem valor </b> " }
+ cliente[prop])

Sua função construtora deve se chamar Rectangle. Ele deve receber dois argumentos, nomeados de acordo
com as linhas de newLength e newHeight. A função deve atribuir o valor do primeiro argumento a this.length e o
valor do segundo argumento a this.width:
function Retângulo(novoLength, newHeight) {
this.length = newLength; esta.altura = novaAltura;

}
47

Seu código deve configurar as três matrizes de imagens:
var selecionado = new Array(3); selecionado[0] = new Image(); selecionado[0].src = "os anos
70_selecionado.gif"; selecionado[1] = new Imagem(); selecionado[1].src = "os anos
80_selecionado.gif"; selecionado[2] = new Imagem(); selecionado[2].src = "anos 90_selecionado.gif";
var não selecionado = new Array(3); não selecionado[0] = new Image(); não
selecionado[0].src = "the70s_UNselected.gif"; não selecionado[1] = new Image(); não
selecionado[1].src = "the80s_UNselected.gif"; não selecionado[2] = new Image(); não
selecionado[2].src = "the90s_UNselected.gif";
var selecionadoTEXT = new Array(3); TEXTO selecionado[0] = new Imagem(); selectedTEXT[0].src

= "the70s_selected_TEXT.gif"; TEXTO selecionado[1] = new Imagem(); selectedTEXT[1].src =
"the80s_selected_TEXT.gif"; TEXTO selecionado[2] = new Imagem(); selectedTEXT[2].src =
Suas duas funções devem ter a seguinte aparência:
function selectImage(imageNumber) {
var selectStatement = "documento." +

nome da imagem[número da imagem]
+ ".src = selecionado[númerodaimagem].src;"; eval( selectStatement );

document.textArea.src = selectedTEXT[imageNumber].src; }
function deselectImage(imageNumber) { var deselectStatement

= "documento." +
imageName[imageNumber] + ".src = desmarcar eval( deselectStatement );

document.textArea.src = "UNselected_TEXT.gif"; }
Seus one-liners de eventos onMouseOver e onMouseOut devem ser semelhantes aos seguintes:
onMouseOver="selectImage(0);" onMouseOut="deselecionarImagem(0)"
(onde o 0 deve ser substituído pelo número da imagem apropriada);

Seus objetos com propriedades de imagem devem ser configurados de maneira semelhante à seguinte:
var selecionado = novo Objeto; selecionado.the70s = new Image(); selecionado.the70s.src =

"the70s_selected.gif"; selecionado.the80s = new Image(); selecionado.anos80.src = "anos80_selecionado.gif";
48
selecionado.the90s = new Image(); selected.the90s.src = "the90s_selected.gif";
var não selecionado = new Object(); unselected.the70s = new Image(); unselected.the70s.src =

"the70s_UNselected.gif"; unselected.the80s = new Image(); unselected.the80s.src = "the80s_UNselected.gif";
unselected.the90s = new Image(); unselected.the90s.src = "the90s_UNselected.gif";
var TEXTO selecionado = new Object(); selectTEXT.the70s = new Image(); selectedTEXT.the70s.src =

"the70s_selected_TEXT.gif"; selectTEXT.the80s = new Image(); selectedTEXT.the80s.src =
"the80s_selected_TEXT.gif"; selectTEXT.the90s = new Image(); selectedTEXT.the90s.src =
Suas funções de selecionar e desmarcar podem ser simplificadas para o seguinte:
function selectImage(imageName) {
documento[nomedaimagem].src = selecionado[nomedaimagem].src;
document.textArea.src = selectedTEXT[imageName].src;
}
function deselecionarImagem(imagemNome) {
documento[nomedaimagem].src = não selecionado[nomedaimagem].src;

document.textArea.src = "UNselected_TEXT.gif";
}
Consulte a listagem music_associative_arrays.html para obter um arquivo HTML completo usando o código acima.

Sua função de construtor deve se parecer com o seguinte:
function RolloverImage( nameString, IMG selecionado, IMG não selecionado,

TEX selecionado {
this.name = nameString; this.selected = new Image();

this.selecionado.src = selecionadoIMG; this.unselected = new
Image(); this.unselected.src = unselectedIMG; this.selectedTEXT = new
Image(); this.selectedTEXT.src = selectedTEXT; this.unselectedTEXT = new
Image(); this.unselectedTEXT.src = unselectedTEXT;
Seus dois métodos de instância e sua adição ao protótipo devem ser semelhantes ao seguinte:
function selectImage() {
// acesse o IMG NAME tratando 'documento' como um
array associativo document[this.name].src =
this.selected.src;
textArea.src = this.selectedTEXT.src;
}
49
function deselecionarImagem() {
// acessa o IMG NAME tratando 'document' como um array associativo

document[this.name].src = this.unselected.src; textArea.src =
this.unselectedTEXT.src;
RolloverImage.prototype.select = selectImage; RolloverImage.prototype.deselect

= deselectImage;
O objeto rolloverImages e as três propriedades que são instâncias de RolloverImage devem ser semelhantes
ao seguinte:
var rolloverImages = new Object();
rolloverImages.the70s = new RolloverImage( "the70s", "the70s_selected.gif",

"the70s_UNselected.gif", "the70s_selected_TEXT.gif", "UNselected_TEXT.gif");
rolloverImages.the80s = new RolloverImage( "the80s", "the80s_selected.gif",

rolloverImages.the90s = new RolloverImage("the90s", "the90s_selected.gif",

Sua tabela HTML deve ter a seguinte aparência:
<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=202 BORDER=0>
<TR>
<TD rowspan = 3> <IMG
NAME="textArea" SRC="UNselected_TEXT.gif"> </TD>
<TD>
<A HREF="the70s.html" onMouseOver="rolloverImages.the70s.select()"
onMouseOut="rolloverImages.the70s.deselect()"> <IMG NAME="the70s"

SRC="the70s_UNselected.gif" BORDER=0> </A> </TD> </TR>
<TR>
<TD>

SRC="the80s_UNselected.gif" BORDER=0> </A> </TD> </TR>
<TR>
<TD>

SRC="the90s_UNselected.gif" BORDER=0></A>
50
</TD>
</TR>
</TABELA>
15.8.12 Respostas às Questões de Revisão

1. Uma matriz é uma coleção tabular de dados, acessada por meio de um índice numérico. Cada elemento de um array pode ser um
valor primitivo ou uma referência a um objeto (possivelmente outro objeto Array).
2. O número 4 é o índice do 5º elemento na matriz (lembre-se de que o primeiro elemento é armazenado no elemento da matriz
myArray[0]). O índice de uma matriz indica o elemento ao qual está sendo referido.
3. Existem 3 elementos nesta matriz. Eles são:
idades[0] idades[1] idades[2]
(lembre-se, os arrays são indexados com 0 como o primeiro índice de elemento, não 1.)
4. Variáveis numéricas simples como a1 e b1 armazenam valores, e quando o valor da variável a1 é atribuído ao valor de b1, uma cópia do valor 5
é colocada na variável b1. Quando b1 altera o valor que armazena, isso não tem efeito no número 5 armazenado em outro lugar na memória na
variável a1.
As variáveis de matriz contêm uma referência ao local na memória onde os elementos da matriz são armazenados. Copiar uma variável de
matriz significa copiar a referência, portanto, no código acima, a variável b2 está se referindo à mesma matriz que a2, portanto, alterar os
elementos da matriz referidos por b2 também alterará os elementos referidos por a2.
5. Nessa instrução, document é uma variável que contém uma referência à instância do documento do construtor Document. Quando um navegador
carrega e interpreta um arquivo HTML contendo JavaScript, ele cria uma única instância baseada em Document, chamada document. Este
objeto é disponibilizado como uma propriedade do objeto global para programadores JavaScript, para que eles possam se referir às propriedades
e métodos do documento do navegador.
6. A resposta é quetriângulo1.largura tem um valor de 5. Isso ocorre porque quando t2 recebe o valor de triângulo1, é atribuída a referência a
triângulo1. Portanto, quando uma alteração é feita no objeto referido por t2, este também é o objeto referido por traingle1.
A saída do navegador é a seguinte:
7. Sim, eles são. Na verdade, mais do que para muitas outras linguagens objeto, já que os métodos são apenas mais um
forma de dados.
15.8.13 Contribuição para Tópicos de Discussão

1. Sim, esta afirmação é verdadeira — arrays associativos e objetos são a mesma coisa. Observar os objetos como arrays associativos, no entanto,
fornece uma maneira potencialmente mais flexível e dinâmica de acessar propriedades e métodos.
No entanto, arrays associativos devem ser diferenciados de arrays indexados numericamente, os últimos tendo uma ordem explícita para seus
elementos.
2. Quando um protótipo é alterado, as alterações são herdadas por todos os objetos que compartilham o protótipo naquele momento.
Portanto, se um objeto foi criado e usado anteriormente e seu protótipo foi alterado, executar as mesmas operações no objeto não resultará
necessariamente no mesmo comportamento. Isso pode levar a um comportamento inconsistente do sistema de software e pode ser um bug
muito difícil de localizar e reparar.
Existem poucas circunstâncias em que alguém pode desejar tal mudança de comportamento de objetos no meio de
51
execução de um programa.
52

Traduzir Array

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Traduzir Array

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Capítulo 15. JavaScript 4: Objetos e

Objetivos................................................. ................................................ ......................................... 2 15.1

15.8.11 Discussões da Atividade 8........................................... ................................................ 49 15.8 .12

• Compreender as características básicas dos arrays JavaScript;

15.2 Arrays 15.2.1

15.2.2 Indexação de elementos do array

Responda às seguintes perguntas sobre o array weekDays:

• Qual é o primeiro elemento?

• Qual é o último elemento?

• Qual é o valor do primeiro elemento?

• Qual é o valor do 4º elemento?

• Qual é o elemento que contém a String "Monday"?

• Qual é o elemento que contém a String "Saturday"?

• Qual é o índice do elemento que contém a String "Monday"?

• Qual é o índice do elemento que contém a String "Saturday"?

15.2.3 Criando arrays e atribuindo valores aos seus

A primeira linha (sem comentários) é:

var semanaDias = new Array(7);

O conceito de arrays como objetos é discutido posteriormente nesta unidade.

15.2.4 Criando e inicializando arrays em uma única

// VERSÃO 2 - tudo em uma linha var weekDays = new

15.2.5 Exibindo o conteúdo de arrays

Produz a seguinte saída em um navegador:

15.2.6 Comprimento da matriz

var semanaDias = new Array(7);

var diasDaSemana = new Array();

isso cria uma matriz, sem elementos:

Por exemplo, se a seguir tivermos a declaração:

dias da semana[3] <indefinido>

dias da semana[4] "Sexta-feira"

Se isso fosse seguido pela declaração:

O comprimento de cada uma dessas matrizes é o seguinte:

var bits = new Array(17, 8, 99, 33, 66, 11); document.write(bits);

A saída do navegador desse código é:

15.2.7 Tipos de valores em elementos de array

Considere o seguinte código:

var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2] =

var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2]

var coisas = new Array(); coisas[0] = 21; coisas[1] = "olá"; coisas[2]

A saída do código acima é a seguinte:

15.2.8 Strings NÃO são arrays

Por exemplo, o código

var primeiroNome = "Mateus";

é válido e vemos o número de caracteres da String exibido:

15.2.9 Variáveis — tipos primitivos e tipos de referência

var idade = 21;

var listadeidade = new Array( 3 ); listaidade[0] = 5; listaidade[1] = 3;

especialmente no caso de copiar ou sobrescrever os valores das variáveis de referência.

15.2.10 Copiando variáveis de tipo primitivo

var nome1 = "ibrahim"; var nome2 = "James";

Inicialmente, a memória é a seguinte:

Valor da localização da memória

Então, se executarmos as seguintes linhas:

nome1 = nome2; nome2 = "fredo";

os valores na memória serão:

Valor da localização da memória

15.2.11 Copiando variáveis de tipo de referência

var meuArray = new Array( 6, 3, 5, 1 ); var coisa2 = meuArray;

Qual é o valor de myArray[2] depois que as seguintes instruções foram executadas?

var meuArray = new Array( 6, 3, 5, 1 ); var coisa2 = meuArray;

coisa2[1] = 27; coisa2[2]

15.2.12 Atividades do array