Introdução à Linguagem JavaScript

•

FCSES

Ingrid Oliveira

07.12.2015

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação para A Internet

195 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET Professor Cayo Fontana
LINGUAGEM DE PROGRAMAÇÃO
JAVASCRIPT
SUMÁRIO
 Introdução
 Motivação e Aplicabilidade
 JavaScript e HTML
 Variáveis, Operações, Funções
 Instruções de Controle
 Vetores
 Objetos, Construtores e Protótipo
 DOM – Conceito e Manipulação de Elementos
 Eventos
 Ajax – Conceito e Requisições Assíncronas
INTRODUÇÃO
 É uma linguagem de programação originalmente destinada a manipular
elementos do HTML, dinamicamente
 É uma linguagem de tipagem dinâmica (fracamente tipada) de maneira que o 
tipo da variável só é determinado na sua inicialização, podendo ainda variar 
de acordo com o contexto
 Apesar de estrutural, JavaScript suporta Orientação à Objetos
 É uma linguagem de programação interpretada (navegadores web –
interpretadores léxicos embutidos)
 É uma linguagem de script (executada pelos navegadores)
INTRODUÇÃO
 JavaScript é a linguagem de programação mais popular no desenvolvimento 
Web (baseado em HTML), suportada por todos os navegadores
 No contexto da arquitetura Web, JavaScript possui o propósito de atender 
demandas de contexto dinâmico no client-side (lado do cliente)
 SSJS – Server-Side JavaScript: versão da linguagem interpretada no 
servidor
 Apesar da nomenclatura, JavaScript e Java não possuem quaisquer 
semelhanças em seus propósitos e escopos, exceto a sintática e semântica 
herdadas da linguagem de programação C
MOTIVAÇÃO
 Criada originalmente pela Netscape Communications em 1995 com o objetivo 
inicial de tratar entrada de dados em formulários
 Seu nome inicialmente era Mocha, posteriormente alterado para LiveScript. 
Entretanto no final dos anos 90 a linguagem de programação JAVA foi 
amplamente disserminada e aceita, levando a Netscape, por motivos de 
marketing, a migrar o nome LiveScript para JavaScript
 Após a definição da API para o Modelo de Objetos de Documento (DOM), o 
JavaScript obteve grande poder de manipulação da estrutura e leiaute de 
documentos HTML, além de trabalhar de maneira síncrona e/ou assíncrona com 
o servidor
JAVASCRIPT E HTML
 Para incluir códigos JavaScript no HTML, utiliza-se a tag <script> </script>
 Na tag de abertura, deve-se definir o tipo do script utilizando o atributo type, 
definindo o valor para text/javascript
 <script type="text/javascript">
 Códigos JavaScript pode ser definidos em dois locais num documento HTML:
 No cabeçalho: definição e/ou implementação do código JavaScript dentro das tags 
<head></ head > do HTML
 No corpo: definição e/ou implementação do código JavaScript dentro das tags 
<body></body> do HTML
 Qual a diferença entre definir o código JavaScript no cabeçalho e no corpo?
JAVASCRIPT E HTML
 No cabeçalho, o código é executado antes do carregamento do HTML, ou seja, 
o DOM Tree (árvore do Modelo de Objeto de Documento) ainda não está 
disponível
<head>
<script type=“text/javascript”>
var titulo1 = document.getElementById("titulo1"); // titulo1 == null
<script>
</head>
<body>
<h1 id="titulo1">Título Teste</h1>
</body>
JAVASCRIPT E HTML
 No corpo, o código é executado durante a interpretação do HTML pelo 
navegador. A interpretação do HTML é Top-Down (do começo ao final do 
arquivo, linha por linha), então o código será executado de acordo com sua 
ordem de definição
<head>
</head>
<body>
<h1 id="titulo1">Título Teste</h1>
<script type=“text/javascript”>
var titulo1 = document.getElementById("titulo1"); // titulo1 == HTMLHeadingElement
<script>
</body>
JAVASCRIPT E HTML
 Códigos JavaScript podem ser referenciados externamente, à partir de um 
arquivo separado do código HTML
 Da mesma forma, utiliza-se a tag <script> </script>
 Neste caso utiliza-se o atributo src (source – origem) para indicar o nome do 
arquivo
 <script type=“text/javascript" src="global.js"></script>
 Quando uma referência externa é definida, não poderá existir código no 
conteúdo da tag <script> </script>
 Nota: todos os arquivos JavaScript deve possuir a extensão .js
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Sintaticamente, a definição de nomes de variáveis em JavaScript seguem as 
seguintes regras:
 Caracteres alfanuméricos a–z, A–Z, 0–9, símbolo $, e sublinhado (_)
 Não podem haver ocorrências de espaço ou pontuação
 O primeiro caractere do nome de uma variável deverá ser uma letra (a–z, A–
Z), símbolo $, ou sublinhado (_)
 São sensíveis ao caso (case-sensitive). Teste, teste e TESTE são variáveis distintas
 Não há limite de tamanho
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
JavaScript possui tipagem dinâmica, tratando todas as variáveis como objeto assumindo 4 
diferentes tipo:
 number: valores numéricos 10, 1000, 3.1515
 boolean: valores lógicos  true | false
 string: cadeia de caracteres entre aspas simples ou duplas  “linguagem JavaScript”
 object: estruturas de dados que representam qualquer tipo de dado que não seja primitivo, 
podendo ser:
 Vetores: estruturas de dados que armazenam coleções de objetos, representadas por 
colchetes - []
 Objetos: estruturas de dados que compoem um objeto estruturado, representados por 
chaves - {}
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Demais tipos do JavaScript
 typeof: é um operador utilizado para retornar o tipo de um valor
 var numero = 20; typeof numero // number
 null: representa um valor nulo de um objeto, ou seja, define sua nulidade
 var nulo = null; typeof nulo // object
 undefined: estabelece a indefinição de um objeto. Qualquer objeto declarado e 
não inicializado (sem valor), será “undefined” (indefinido)
 var indefinido; typeof indefinido // undefined
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Declaração de variáveis em JavaScript
 Apesar dos tipos reconhecidos pelo JavaScripts, estudados anteriormente, a 
sintaxe declarativa de suas variáveis dá-se através do símbolo var
 var numero = 20
 var booleano = true
 var stringJavaScript = “variável javascript”
 var variavel_nula = null
 var nao_definida
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
 O uso do símbolo var torna a variável para uso no contexto local
 Em JavaScript, a utilização do símbolo var para declarar uma variável não é 
obrigatória, mas evita possíveis conflitos. Exemplo:
<script type=“text/javascript”>
valor = 100;
function Exemplo() {
valor = valor / 2;
}
Exemplo();
alert(valor);
</script>
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Coerção de variáveis
 JavaScript é uma linguagem de tipagem dinâmica, de forma que suas 
variáveis podem sofrer alteração de tipos em qualquer local do código
 var coercao = 120;
 coercao = ‘coercao executada’;
 coercao = true;
 alert(typeof coercao);
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações Aritméticas
 Os operadores aritméticos são usados para realizar operações aritméticas em 
números (literais ou variáveis)
Operador Descrição
+ Adição
- Subtração
* Multiplicação
/ Divisão
% Módulo (resto)
++ Incremento
-- Decremento
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
 Exemplo1: Operação aritmética entre duas variáveis numéricas
 var x = 50;
 var y = 25;
 var resultado = x / y;
 Exemplo2: Operação aritmética entre variáveis e literais, numéricos
 var x = 50;
 var resultado = x % 5;
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações de Atribuição
 Os operadores de atribuição são usados para realizar operações que 
atribuem valores à variáveis
Operador Exemplo É o mesmo que
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
 Exemplo: atribuição de uma variável numérica
 var x = 50;
 x *= 2;
 x -= 15;
 Operadores de atribuição também podem concatenarstrings
 var faculdade = “Faculdade”;
 faculdade += “ Católica ” + “Salesiana”
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações Lógicas e Comparações
 Os operadores lógicos são usados para determinar a lógica entre variáveis, 
valores ou expressões
 Exemplo: assuma as variáveis numéricas x e y de valores 6 e 3, 
respectivamente
Operador Descrição Exemplo
&& e (conjunção) (x < 10 && y > 1) é verdadeiro
|| ou (disjunção) (x == 5 || y == 5) é falso
! não (negação – inverso) !(x == y) é verdadeiro
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações Lógicas e Comparações
 Os operadores de comparação são usados para realizar testes entre 
variáveis e valores, determinando a equalidade ou diferença, entre as 
mesmas
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações Lógicas e Comparações
Operador Descrição
== igual a
=== valor e tipo, iguais a
!= diferente de
!== valor ou tipo, diferentes de
> maior que
< menor que
>= maior ou igual a
<= menor ou igual a
VARIÁVEIS, OPERAÇÕES E FUNÇÕES
Operações Lógicas e Comparações
 Exemplo1: Teste de igualdade entre duas variáveis
 var a = “bola”;
 var b = “campo”;
 var resultado = a != b; // true (verdadeiro)
 Exemplo2: comparando dois valores iguais de tipos diferentes
 var a = 5;
 var resultado = a == “5”; // true (verdadeiro)
 var resultado = a === “5”; // false (falso)
 var resultado = a === 5; // true (verdadeiro)
INSTRUÇÕES DE CONTROLE
JavaScript possui um conjunto de instruções que podem ser executadas pelos 
interpretadores da linguagem, presentes nos navegadores web. Os principais são:
Instrução Descrição
break Finaliza a execução de uma instrução de seleção (switch) ou um laço
continue Reinicia o processamento das informações contidas em um laço
debugger Para a execução do JavaScript e executa (se disponível) a função de debug
while / do – while Executa continuamente um bloco de instruções até que sua condição seja falsa *
for Executa continuamente um bloco de instruções até que seu critério de parade seja alcançado
function Declara uma função
if / if – else
Executa um bloco de instruções de acordo com sua condição, podendo, ou não, executar
também o caso contrário à condição definida
INSTRUÇÕES DE CONTROLE
 É bastante comum, e muitas vezes necessária, a presença de quase todas estas 
instruções de controle nos códigos em JavaScript
 As instruções de controle definem regras ao fluxo de execução dos programas, 
de maneira que o processamento dos dados ocorra de acordo com o seu 
padrão esperado
 À seguir, exemplos das instruções apresentadas acima
return Sai de uma determinada função, podendo retornar algum valor
switch - case Executa, de maneira seletiva, um bloco de instruções
try ... catch Implementa um tratamento de erro para um bloco de instruções
var Declara uma variável
INSTRUÇÕES DE CONTROLE
for (laço)
 Instruções de laço executam um determinado bloco de instruções por “n” vezes
 Geralmente, a utilização da instrução for ocorre quando a quantidade de vezes que 
o laço será executado, é conhecida
 O desconhecimento da quantidade de vezes que o laço será executado, não 
invalida a utilização do for. Entretanto, comumente utiliza-se a instrução while
nestas situações
 Quando utilizado com objetos não primitivos, JavaScript permite que o laço seja 
executado de acordo com a quantidade de propriedades deste objeto
INSTRUÇÕES DE CONTROLE
for (laço)
 Estrutura de um laço:
for (instrução1; instrução2; instrução3) {
// instruções e regras de acordo com a condicao e critérios do for
}, onde o processamento das instruções 1, 2 e 3 ocorre da seguinte maneira:
 instrução 1: apenas uma vez, antes da primeira execução do laço
 instrução 2: critério de condição do laço, antes de cada execução do laço
 instrução 3: ao final de cada execução do laço
INSTRUÇÕES DE CONTROLE
for (laço)
 Exemplo:
for (var i = 0; I < 10; i++) {
alert(i);
}
 O exemplo acima exibirá mensagens de alerta 10 vezes contendo, em cada uma 
destas mensagens, valores de 0 a 9
INSTRUÇÕES DE CONTROLE
while / do – while (laço)
 Assim como a instrução for apresentado anteriormente, while e do – while são 
instruções de laço que executam um determinado bloco de instruções de acordo com a 
validade de um critério de condição 
 Geralmente, a utilização das instruções while / do – while ocorrem quando a 
quantidade de vezes que o laço será executado, é desconhecida, dependendo da 
validade de um critério de condição
 O conhecimento da quantidade de vezes que o laço será executado, não invalida 
a utilização do while / do – while . Entretanto, comumente utiliza-se a instrução for
nestas situações
INSTRUÇÕES DE CONTROLE
while (laço)
 Estrutura de um laço:
while (condicao) {
// instruções e regras da condicao válida em while
}, onde:
 A condicao define uma expressão lógica que será verificada antes de cada 
execução do bloco de instruções, definido para a instrução while
 PS: caso a expressão lógica apresente um resultado falso, logo na primeira 
verificação, o bloco de código definido em while não será executado
INSTRUÇÕES DE CONTROLE
while (laço)
 Exemplo:
var i = 20;
while (i % 3 != 0) {
alert(i);
i--;
}
 O exemplo acima exibirá mensagens de alerta, com o valor de i, enquanto o 
módulo (resto) da divisão de i por 3 for diferente de 0 (valida e depois executa)
INSTRUÇÕES DE CONTROLE
do – while (laço)
 Estrutura de um laço:
do {
// instruções e regras da condicao válida em do – while
} while (condicao); , onde:
 A condicao define uma expressão lógica que será verificada após cada execução 
do bloco de instruções, definido para a instrução while
 PS: o bloco de código definido em while será executado, no mínimo, uma vez 
mesmo que a expressão lógica definida em condicao apresente um resultado falso 
logo na primeira verificação
INSTRUÇÕES DE CONTROLE
do – while (laço)
 Exemplo:
var i = 20;
do {
alert(i);
i--;
} while (i % 3 != 0);
 O exemplo acima exibirá mensagens de alerta, com o valor de i, enquanto o 
módulo (resto) da divisão de i por 3 for diferente de 0 (executa e depois valida)
INSTRUÇÕES DE CONTROLE
if / if – else (condicional)
 Controla a execução de um determinado bloco de código de acordo com a validade 
de uma expressão condicional
if (condicional)
 Estrutura:
if (condicao) {
// demais instruções e regras do programa
}, onde
A condicao define uma expressão lógica que será validada antes de execução do 
bloco de instruções, definido para a instrução if. Se verdadeiro o bloco é executado
INSTRUÇÕES DE CONTROLE
if (condicional)
 Exemplo:
var teste = true;
if (teste)
alert(“Expressão verdadeira”);
INSTRUÇÕES DE CONTROLE
if – else (condicional)
 Estrutura:
if (condicao) {
// instruções e regras da condicao válida em if – else
}
else {
// instruções e regras da condicao inválida em if – else
}, onde
A condicao define uma expressão lógica que será validada antes de execução do 
bloco de instruções, definido para a instrução if. Se verdadeiro o bloco em if é 
executado. Se falso, o bloco em else é executado
INSTRUÇÕES DE CONTROLE
switch – case (seleção)
 Instruções de seleção permitem o processamento de um determinado bloco de 
instruções se um determinado valor do critério de seleção esteja disponível nos 
possíveis casos que a instrução switch – case pode tratar
 Caso nenhuma critério seja alcançado ocorre a execução do bloco de instruções 
contidos em default (padrão)
 É possível que o bloco para o evento padrão (default) não esteja definido em switch. 
Neste caso, nenhum bloco de instruções será executado
INSTRUÇÕES DE CONTROLE
switch – case (seleção)
 Estrutura de umlaço:
switch (valor) {
case 10:
// instruções e regras que serão executadas caso o valor de “valor” seja 10
break;
case 15:
// instruções e regras que serão executadas caso o valor de “valor” seja 15
break;
default:
// instruções e regras que serão executadas caso o valor de “valor” não seja nenhum
dos casos tratados por switch
}
EXCEÇÃO
 Exceções são comportamentos imprevisíveis que podem ocorrer durante fluxo de 
execução de quaisquer tipos de programas, construídos em diferentes linguagens de 
programação
 JavaScript possui instruções que permitem o tratamento de exceções que podem 
ocorrer durante a execução de um programa
 Veja o código abaixo:
INSTRUÇÕES DE CONTROLE
switch – case (seleção)
 Estrutura de um laço:
switch (valor) {
case 10:
// instruções e regras que serão executadas caso o valor de “valor” seja 10
break;
case 15:
// instruções e regras que serão executadas caso o valor de “valor” seja 15
break;
default:
// instruções e regras que serão executadas caso o valor de “valor” não seja nenhum
dos casos tratados por switch
}
VETORES
 Estruturas de dados utilizados para armazenar uma coleção de valores em uma única 
variável
 Cada valor possui um índice (posição) no vetor
 Um vetor é um objeto
 A coleção pode ser homogênea (coerência), mas JavaScript suporta coleções 
heterogêneas por ser uma linguagem de programação fracamente tipada
 Os valores podem ser tanto de tipos primitivos quando de objetos
 O JavaScript disponibiliza uma grande variedade de métodos para manipulação de 
vetores e algumas propriedades
VETORES
 Declaração:
 var vetor = [];
 Declaração e inicialização:
 var alunos = [“Pedro”, “Maria”, “João”, “Camila”, “Tereza”]
 Acessando elementos:
 Notação: vetor[índice]
 alunos[3] // retorna a string “Camila”
 alunos[1] = “Sofia” // altera o valor da segunda posição do vetor
VETORES
 É possível misturar tipos diferentes transformando um vetor homogêneo em 
heterogêneo:
 alunos[1] = 120 // altera o valor e o tipo da 2ª posição do vetor (string 
número)
 alunos[2] = [“J”, “o”, “ã”, “o”] // altera o valor e o tipo da 3ª posição do vetor 
(string  objeto (vetor))
 É possível incluir elementos em um vetor de maneira não indexada
 var desordenado = [12, 80] // vetor de tamanho 2
 desordenado[52] = “faculdade” // vetor de tamanho 53
VETORES
 O JavaScript provê alguns métodos e propriedades para trabalhar com vetores. A 
tabela abaixo apresenta algumas destas principais características
length Retorna o tamanho do vetor (quantidade de elementos)
valueOf() / toString() Retorna uma string com todos os elementos do vetor, separados por vírgula
join()
Como valueOf() ou toString(), retorna todos os elementos do vetor separados por um 
caracter especificado no parâmetro
pop() Retorna o ultimo elemento do vetor, removendo-o da coleção
push() Adiciona um novo elemento no final do vetor
shift() Remove o primeiro elemento do vetor reordenando-o
VETORES
 É possível remover um item do vetor utilizando a instrução delete, da seguinte maneira:
delete vetor[4]; //definirá o valor de vetor[4] para undefined
unshift() Adiciona um novo item no primeiro índice do vetor, reordenando-o
splice() Insere novos itens em uma determinada posição do vetor, podendo remover outros itens
slice() Retorna um subvetor, do vetor processado, de acordo com uma posição inicial e outra posição final
sort() Ordena um vetor por ordem alfabética ou por ordem crescente
reverse() Inverte a ordem de um vetor por valor alfabético ou por ordem numérica
VETORES: LITERAIS X OBJETOS
 Vetores podem ser declarados pelo utilizador do operador new
 var alunos = new Array();
 O operador new constrói um novo objeto
 O objeto contruído foi o Array (vetor) alunos
 Ambas declaração de vetores são exatamente a mesma, a construção utilizando o 
operador new possui maior processamento por invocar o construtor de Array()
 O w3c recomenda fortemente o uso de vetores literais uma vez que são mais legíveis, 
simplistas e mais performáticos que vetores de objetos com Array()
 “For simplicity, readability and execution speed, use the first one (the array literal 
method)”
FUNÇÕES
 Funções em JavaScript são um bloco de código que executam uma determinada 
tarefa particular
 Uma função em JavaScript é executada quando a mesma é chamada (invocada) em 
algum local do código
 A estrutura de uma função em JavaScript é definida da seguinte maneira:
function funcao() {
// intruções específicas da função
}
 A chamada de uma função é feita pelo seu nome. Exemplo: chamando a função do 
exemplo acima
funcao();
FUNÇÕES
Sintaxe
 Uma funções em JavaScript é definida inicialmente pela palavra chave “function”, 
seguida do nome da função, seguido por parênteses
 Nota: os parênteses listam os possíveis argumentos que uma função pode ter, e estes 
argumentos são usados como variáveis locais
 Argumentos em JavaScript não possuem tipo definido (todos são objetos)
 Toda função em JavaScript deve, obrigatoriamente, possuir uma abertura de bloco de 
código e um fechamento de bloco de código “{ }”
FUNÇÕES
 Exemplo de uma função com argumentos:
function exemploSoma(valor1, valor2) {
var resultado = valor1 + valor2;
}
 Em JavaScript também é possível retornar valores através das funções
function obterProduto(valor1, valor2) {
return valor1 * valor2;
}
var resultado = obterProduto(30, 50);
FUNÇÕES
Porque utilizar funções?
 Reusabilidade de código
 Manutenibilidade de código
 Aplicação do Princípio da Modularidade
 Padronização e organização de código
 Torna o código limpo, coeso e coerente
OBJETOS
 Objetos em JavaScript são estruturas de dados genéricas utilizadas para definir um 
objeto primitivos ou abstratos
 Em JavaScript quase tudo é objeto:
 Todos os tipos de dados são objetos
 Todos os valores, exceto os primitivos, são objetos
 Os objetos também são variáveis, mas que podem conter muitos valores (várias 
características)
 “In JavaScript, objects are king. If you understand objects, you understand JavaScript” 
– W3C Schools
OBJETOS
 Conforme estudado, variáveis em JavaScript podem conter valores simples, como a 
definição da variável “pessoa” abaixo:
 var pessoa = “João da Silva”;
 As variáveis do tipo objeto são definidas entre chaves “{ }”, contendo pares de nome 
e valor, definidos da seguinte maneira: 
 nome: valor  o par é separado pelo caracter “:”
 Cada par nome: valor, é chamado de propriedade
 Exemplo: Reestruturando a variável simples acima “pessoa” como um objeto composto:
 var pessoa = { primeiroNome: “João”, ultimoNome: “da Silva”, idade: 50 };
OBJETOS
 O objeto pessoa possui um conjunto de 3 objetos (características do objeto pessoa), 
definidos como propriedades de pessoa
 Existem duas formas de acessar os valores das propriedades em JavaScript:
1. Pelo objeto da propriedade: pessoa.primeiroNome
2. Pelo nome da propriedade: pessoa[“primeiroNome”]
 Ambas formas de acesso retornarão o mesmo valor da propriedade
pessoa.primeiroNome == pessoa["primeiroNome"] && pessoa["primeiroNome"] == 
"João" && pessoa.primeiroNome == "João“ // true (verdadeiro)
primeiroNome João
ultimoNome da Silva
idade 50
OBJETOS
 Também é possíve remover propriedades dos objetos utilizando o operador delete
delete pessoa.ultimoNome;
 Para verificar a real remoção deste, pode-se utilizar o operador in em uma expressão 
cujo retorno é um valor booleno, da seguinte maneira:
var propriedadeExiste = “ultimoNome” in pessoa;
 Nesta expressão de consulta sobre a existência de uma determinada propriedade em 
um objeto, o nome desta propriedade deveráestar entre aspas duplas (“”)
OBJETOS
 Além das características, objetos também podem possuir comportamentos (ações)
 No JavaScript, o comportamento de um objeto é chamado de método
 Um método de um objeto define uma (ou uma sequência) de instruções computacionais 
que representam um determinado comportamento deste objeto
 Em JavaScript, os métodos são propriedades que possuem a definição de uma função
 Seu nome é o nome da propriedade que receberá a função como valor
 Exemplo: criando o método ObterNomeCompleto para o objeto pessoa, criado 
anteriormente:
OBJETOS
var pessoa = {
primeiroNome: "João", 
ultimoNome: “Da Silva", 
idade: 50,
ObterNomeCompleto: function () {
return this.primeiroNome + " " + this.ultimoNome;
}
}
 Em JavaScript o operador this faz referência ao próprio objeto ao qual este 
operador está sendo utilizado. Neste caso, pessoa
 ObterNomeCompleto é um comportamento exclusivo do objeto pessoa. As instruções 
definidas na função deste método somente serão alcançadas por pessoa
OBJETOS
 A chamada de um método é sintaticamente da mesma forma que a chamada de uma 
função. Porém, neste caso, é acessada diretamente através do objeto que contém o 
método
Exemplo: acessando ObterNomeCompleto do objeto pessoa
pessoa.ObterNomeCompleto(); // “João Da Silva”
Limitação
 Caso seja desejável criar outros objetos que possuam as mesmas características e 
comportamentos (propriedades e métodos, respectivamente) do objeto pessoa – como 
por exemplo, um objeto homem – toda a implementação do objeto pessoa seria 
reescrita para o novo objeto homem
Para solucionar esta 
limitação, utiliza-se o 
conceito do paradigma 
OO* em JavaScript através 
da função construtor.
OO: Orientação à Objetos
OBJETOS – CONSTRUTOR
 JavaScript é uma linguagem de programação class-free, ou seja, livre de classes. 
Entretanto suporta o paradigma orientado à objetos e seus objetos podem ser criados 
através de uma função chamada construtor
 A função construtor (ou apenas construtor), como o próprio nome sugere, é 
responsável por construir/fabricar objetos de acordo com sua implementação
 Nos slides anteriores, o objeto pessoa continha propriedades e métodos 
(características e comportamentos). Entretanto, para criar um novo objeto como 
pessoa, era necessário reescrever todos os seus membros
 Utilizando construtores, todos os objetos criados (fabricados) pelo construtor, possuirão 
os mesmos membros (propriedades e métodos) definidas no objeto construtor (função)
OBJETOS – CONSTRUTOR
Construindo tipos de objetos
 Exemplo: Construindo um objeto construtor de pessoa
function pessoa(primeiroNome, ultimoNome, idade) {
this.primeiroNome = primeiroNome;
this.ultimoNome = ultimoNome;
this.idade = idade;
this.ObterNomeCompleto = function () {
return this.primeiroNome + " " + this.ultimoNome;
}
}
OBJETOS – CONSTRUTOR
Construindo tipos de objetos
 (cont...) Exemplo: Criando objetos à partir do construtor de pessoa
var p1 = new pessoa("João", "Augusto", 30); 
var p2 = new pessoa("Maria", "Aparecida", 30);
alert(p1.idade); // 30
alert(p2.ObterNomeCompleto()); // Maria Aparecida
 O exemplo acima mostra a utilização do construtor para objetos do tipo pessoa, 
criando dois objetos: p1 e p2
 Em seguida são gerados dois alertas com exibição de informações de idade e nome 
completo de p1 e p2, respectivamente, através de sua propriedade
OBJETOS – PROTÓTIPOS
 Todos os objetos estão associados a um protótipo (prototype), do qual podem herdar 
propriedades e métodos
 Quando um construtor é definido, este também é associado a um prototype
 A utilização do prototype é importante para evitar a replicação de determinados 
membros de um tipo de objeto, oferecendo melhor desempenho para a aplicação
 Criando um membro diretamente no protótipo do tipo do objeto, todos os objetos 
criados pela função construtora compartilharão do mesmo membro, sem ter uma cópia 
do membro em sua instância
OBJETOS – PROTÓTIPOS
Construtor de pessoa
function pessoa(primeiroNome, 
ultimoNome, idade) {
this.primeiroNome = primeiroNome;
this.ultimoNome = ultimoNome;
this.idade = idade;
this.ObterNomeCompleto = function () 
{
return this.primeiroNome + " " + 
this.ultimoNome;
}
}
Construtor de pessoa usando 
Protótipo
function pessoa(primeiroNome, 
ultimoNome, idade) {
this.primeiroNome = primeiroNome;
this.ultimoNome = ultimoNome;
this.idade = idade;
pessoa.prototype.ObterNomeComplet
o = function () {
return this.primeiroNome + " " + 
this.ultimoNome;
}
}
OBJETOS – PROTÓTIPOS
 Criando 3 objetos p1, p2 e p3 à partir do construtor pessoa
Definindo métodos no construtor
Objeto p1 P2 p3
primeiroNome João Maria Tereza
ultimoNome Maia Nunes Cruz
idade 35 27 54
ObterNomeCompleto Obtém Obtém Obtém
Definindo métodos no protótipo
Objeto p1 P2 p3
primeiroNome João Maria Tereza
ultimoNome Maia Nunes Cruz
idade 35 27 54
ObterNomeCompleto Obtém (compartilhado)
DOM – CONCEITO E MANIPULAÇÃO
 Durante este curso, na representação de algumas características do JavaScript, foi 
utilizado um objeto chamado document e um dos seus métodos, o getElementById
 Ambas abordagens são apenas duas dos vários objetos, e seus respectivos métodos e 
propriedades, disponíveis para trabalhar com o Modelo de Objeto de Documento –
DOM
 O DOM é uma API (conjunto de rotinas e padrões) que define uma estrutura lógica de 
documentos que permite a representação e interação com objetos em documentos dos 
tipos HTML, XHMTL e XML
 O DOM representa uma árvore nós, criada dinamicamente pelo navegador quando 
uma página é carregada, onde cada nó define um objeto
 Dado o código HTML abaixo temos uma árvore DOM de 5 níveis, onde:
document
<html>
<head>
<title>
DOM – Conceito e Manipulação
</title>
</head>
<body>
<p>
Este é o 5º nível!
</p>
</body>
</html>
1° Nível
2° Nível
3° Nível
4° Nível
5° Nível
3° Nível
4° Nível
5° Nível
DOM – CONCEITO E MANIPULAÇÃO
 O objeto document é único, e representa o documento HTML exibido pelo browser
 Na estrutura em árvore do DOM, o document é o objeto raíz
document
html
head body
title p
DOM – Conceito e Manipulação Este é o 5º nível!
DOM – CONCEITO E MANIPULAÇÃO
 Neste exemplo, temos três tipos de nó do DOM: document (objeto único e raíz da 
árvore hierárquica do DOM), elementos HTML e textos (conteúdos de elementos)
document
<html>
<head> <body>
<title> <p>
DOM – Conceito e Manipulação Este é o 5º nível!
DOM – CONCEITO E MANIPULAÇÃO
 Como estruturas em árvore, os objetos do DOM podem possuir nós ancestrais e descendentes
 Usando terminologias informalmente técnicas, cada nó possui um pai (exceto o nó raíz) e 
também pode possuir nenhum, algum ou um conjunto de nós filhos
document
<html>
pai: document
<head>
Pai: html
<body>
Pai: html
<title>
Pai: head
DOM – CONCEITO E MANIPULAÇÃO
 Para acessar os nós pais e/ou filhos, a API DOM provê um conjunto de métodos
 A tabela abaixo apresenta alguns dos principais métodos para obter estes nós
elemento.getElementById(“id”) Retorna o elemento através do valor do seu atributo id
elemento.getElementsByName(“name”)
Retorna uma coleção de elementos filhos através do valor do 
atributo name
elemento.getElementsTagName(“tag”)
Retorna uma coleção de elementos filhos através do nome da 
Tag HTML
elemento.getElementsByClassName(“className”)
Retorna uma coleção de elementos filhos através do valor do 
atributo global class
DOM – CONCEITO E MANIPULAÇÃO
 Para modificar os nós pais e/ou filhos, a API DOM também provê um conjunto de 
métodos e propriedades
A tabela abaixo apresenta algumas das principais maneiras para modificar estes nós
elemento.innerHTML = Modifica todo o conteúdo HTML do elemento
elemento.attribute = Modifica o atributo do elemento HTML
elemento.setAttribute(attribute, value) Modifica o atributo do elemento HTML
elemento.style.property = Modifica o leiaute (CSS) do elemento HTML
DOM – CONCEITO E MANIPULAÇÃO
 Para adicionar ou remover nós, no conteúdo de outros nós, a API DOM também provê 
um conjunto de métodos e propriedades
 A tabela abaixo apresenta algumas das principais maneiras para manipular estes nós
document.createElement(elementoHTML) Cria um elemento HTML
elemento.removeChild(elementofilho) Remove um elemento HTML
elemento.appendChild(elementofilho) Adiciona um elemento HTML
elemento.replaceChild(novoElemento, elementoAntigo) Substitui um elemento HTML
document.write(códigoHTML)
Adiciona um código HTML ou JavaScript no conteúdo
do documento HTML
DOM – CONCEITO E MANIPULAÇÃO
 Os eventos são comportamentos dinâmicos que ocorrem tanto com os elementos HTML 
quanto com o navegador (browser)
 Estes eventos podem acontecer através da interação com o usuário ou pela própria 
aplicação web, tais como:
 Quando um documento HTML é completamente carregado pelo navegador
 Quando um texto é alterado em um elemento input do tipo texto
 Quando um botão é pressionado (clicado)
 O JavaScript permite a manipulação destes e de outros eventos quando eles ocorrem 
no browser
EVENTOS
 Para criar um evento em um elemento HTML, é necessário apenas atribuir uma função 
ao atributo referente ao evento desejado. Veja o exemplo abaixo:
elemento.getElementById(“id”).onclick = function () { } Associa uma função ao evento onclick
 Exemplo: Associando um evento de click ao elemento HTML button, cujo seu atributo id possui o 
valor “idBotao”, através do JavaScript
<script type=“text/javascript”>
var botao = document.getElementById(“idBotao”);
botao.onclick = function () { alert(“Este é o alerta de ” + botao.id) };
</script>
EVENTOS
 É possível também definir estes eventos pelos seus atributos diretamente no código 
HTML, referenciado o tratamento por uma função (ou mais intruções) via JavaScript. 
Observe o exemplo abaixo:
 Exemplo: Associando um evento de click ao elemento HTML button, cujo seu atributo id possui o 
valor “idBotao”, através do JavaScript
<button onclick=“EmitirAlerta();”>
<script type=“text/javascript”>
function EmitirAlerta() { 
alert(“Alerta emitido!”)
};
</script>
EVENTOS
 A tabela abaixo apresenta a lista dos eventos mais comuns do HTML
onchange Acionado quando ocorrer alguma alteração no elemento HTML
onclick Acionado quando o elemento HTML for pressionado (clicado)
onmouseover Acionado quando o usuário move o ponteiro do mouse sobre o elemento HTML, na janela do 
navegador
onmouseout Acionado quando o usuário move o ponteiro do mouse para fora do contexto do elemento HTML, 
na janela do navegador
onkeydown Acionado quando o usuário pressiona alguma tecla, do teclado, no contexto do elemento HTML
onload Quando o navegador finaliza a renderização (carregamento) de todo o documento HTML
EVENTOS