Desenvolvimento para a Web

Prof. Ms. Patrícia Noll de Mattos

Aula 5
 DOM - Document Object Model
• Vamos começar a trabalhar com os elementos
html da página.
• Com isso vamos conseguir apresentar os
valores das variáveis dentro da nossa página;
• vamos poder alterar o css dos elementos e
posteriormente monitorar eventos para tornar
nossa página interativa.
• Para isso, precisamos primeiro conhecer o
DOM.
 O que é o DOM?
• O Document Object Model é um objeto criado pelo
browser assim que a página é carregada.
• Ele guarda toda a estrutura da página. Vamos ver um
exemplo simples abaixo:
DOM da Página
 DOM
• Estrutura em árvore, existe uma hierarquia,
portanto elementos tem "pai" (parent) e filhos
(child elements).
• Isto será usado mais tarde, para por exemplo,
alterar todos os filhos de algum elemento
específico.
• O elemento document é o que está acima de
todos os outros e é por meio dele que vamos ter
acesso a todos os elementos da nossa página.
 DOM
A partir do DOM, nós poderemos:
• Adicionar ou remover elementos HTML
• Alterar os elementos HTML da página
• Alterar atributos dos elementos HTML (como
o 'src' de uma imagem por exemplo)
• Alterar o CSS
• Reagir a eventos na página (clique, rolagem,
input em formulários, passar o cursor sobre
elementos, etc)
 Trabalhando com o DOM
• Vamos utilizar um arquivo HTML simples, conforme o
apresentado a seguir, contendo duas caixas, uma com
id=“caixa_azul” e outra com id=“caixa_amarela”.
 getElementById e innerHTML
• Para trabalhar com elementos HTML vamos utilizar métodos
do objeto document.
• Para localizar um elemento no documento, você pode
procurar pelo nome da tag (h1, a, div, body, ...), por uma
determinada classe, ou pelo ID do elemento, que é único
dentro do documento.
• vamos iniciar pelo “id”, utilizando o método getElemntById
do objeto element.
• Supondo a existência de duas caixas (div’s) uma com o
id=“caixa_azul” e outra com o id=“caixa_amarela”.
• A ideia é copiar o conteúdo da caixa azul para a caixa amarela.
 getElementById e innerHTML
• Para isso, precisamos localizar o elemento através do método getElementById
e acessar o atributo innerHTML.
• vamos iniciar pelo “id”, utilizando o método getElemntById do objeto element.
• Supondo a existência de duas caixas (div’s) uma com o id=“caixa_azul” e outra
com o id=“caixa_amarela”.
• A ideia é copiar o conteúdo da caixa azul para a caixa amarela.
• Primeiro vamos pegar o conteúdo da caixa azul e passar para uma variável:

var conteudo_caixa = document.getElementById("caixa_azul").innerHTML;

• Agora, vamos localizar a caixa amarela, e colocar o conteúdo da variável nela:

document.getElementById("caixa_amarela").innerHTML = conteudo_caixa;
 Escrevendo HTML dentro de outros elementos HTML

• Da mesma maneira, que podemos mandar valores de variáveis

para elementos html, podemos também mandar código html:

document.getElementById("caixa_amarela").innerHTML = "<h3>" +
conteudo_caixa + "</h3>";

• A linha acima inclui no conteúdo html formado a tag h3, de forma

a formatar o conteúdo da caixa.
 Funções
• Inicia pela palavra function, seguido do identificador(nome) da
função e ( ), onde são passados argumentos, caso existam.
• O corpo da função é definido entre chaves { }
• Vamos começar com um exemplo simples.
 Passando argumentos
• Os argumentos podem ser valores absolutos, ou variáveis já criadas
anteriormente.
• O exemplo abaixo consiste em uma função que calcula o IMC (índice de
massa corporal) de uma pessoa, com valores guardados em variáveis.
 Retornando valor
• Estamos utilizando o console apenas para ver o resultado, contudo, o ideal é
que as funções retornem valor.
• Comando return
Apresentar o resultado na página
• Pegar o peso na caixa com id=“peso”
• Pegar a altura na caixa com id=“altura”
• Apresentar o resultado na caixa com id=“resultado”

var caixa_peso = parseFloat(document.getElementById("peso").innerHTML);

var caixa_altura = parseFloat(document.getElementById("altura").innerHTML);
var resultado = calc_imc(caixa_peso,caixa_altura);
document.getElementById("resultado").innerHTML = resultado.toFixed(2);
 Tipo Array
• Arrays são sequências ordenadas de valores
• Estes valores podem ser de qualquer tipo de dados e devem estar
separados por vírgula.
• O símbolo que identifica os arrays são os colchetes [ ].

• var alunos = [ "João" , "Maria", "José" ];

• var num_primos = [ 2, 3, 5, 7, 11, 13 ];
• var alunos = [ "João" , "Maria", "José" ];
• console.log(alunos.length); // o console mostrará 3
• console.log(alunos[0]); // o console mostrará "João“
 Arrays Multidimensionais
Os elementos de um array podem ser de qualquer tipo de dados,
inclusive arrays e objetos.
var grupos = [ [ "João" , "Maria" ],
[ "Pedro" , "Joana", "André", "Júlio" ],
[ "Carolina" , "Helena", "Marcelo" ]
];
O array grupos possui 3 elementos e cada um destes elementos é um
array.
console.log(grupos.length); // o console mostrará 3
console.log(grupos[1]); // o console mostrará [ "Pedro" , "Joana", "André",
"Júlio" ]
/* podemos acessar também os elementos internos de cada grupo, basta
usar a notação do índice duas vezes */
console.log(grupos[1][2]); // o console mostrará "André"
 Operações com arrays
Push - Adiciona elementos ao final de um array
Pop - Remove o último elemento de um array
Shift - Remove o primeiro elemento de um array
Unshift - Adiciona elementos ao início de um array

var cursos = [ "HTML", "Python", "PHP" ];

cursos.push("Javascript");
console.log(cursos); // console [ "HTML", "Python", "PHP", "Javascript" ]
cursos.unshift("Bootstrap");
console.log(cursos); // console [ "Bootstrap", "HTML", "Python", "PHP",
"Javascript" ]
cursos.pop(); console.log(cursos); // console [ "Bootstrap", "HTML", "Python",
"PHP" ]
cursos.shift(); console.log(cursos); // console mostrará [ "HTML", "Python", "PHP"
]
 Manipulação de índice

É possível também definir elementos em lugares específicos

usando a notação do índice.

var ingredientes = [ "pão branco", "queijo", "presunto" ];

ingredientes[0] = "pão integral";
console.log(ingredientes);
// O console mostrará [ "pão integral", "queijo", "presunto" ]
 Slice - extrai parte de um array
• O método slice serve para extrair parte de um array.
• Informar o índice de início e fim que queremos selecionar.

var alunos = [ "João" , "Maria", "José", "Fernanda", "Pedro", "Elisa" ];

console.log( alunos.slice(0,3) );
// O console mostrará [ "João" , "Maria", "José" ]

• É possível também usar para contar desde o final do array (o último

elemento de um array é o -1) número negativos .
• console.log( alunos.slice(,-2) ); // O console mostrará [ "João" , "Maria",
"José", "Fernanda" ]
• /* O slice começa no primeiro elemento, e vai até o penúltimo elemento,
neste caso o índice 4, com este elemento excluído. */
• console.log( alunos.slice(-3,) ); // O console mostrará [ "Fernanda", "Pedro",
"Elisa" ] // O slice inclui os três últimos elementos.
 Tipos de dados - Objetos
• Objetos, assim como arrays, também são listas de elementos.
• São compostos por pares de chaves (keys) e valores (values).
• Utiliza-se os dois pontos (:) para separar a chave do seu valor
associado.
• O símbolo que identifica os objetos são as chaves { }.
var funcionario = {
'nome': ‘João da Silva’,
'ano_nasc': 1972,
'cpf': '111.111.111.11’,
'cargo': 'Analista de Sistemas’
};
 Alterar ou adicionar chaves
• Acesso às chaves de um objeto
• Se respeitadas as orientações para criar identificadores, pode-se acessar por
um ponto “.”
• console.log( funcionario.cpf );
var funcionario = {
'nome': 'Pedro Souza Gomes’,
'ano_nasc': 1972,
'cpf': '111.111.111.11’,
'cargo': 'Analista de Sistemas’
};
• funcionario.cargo = 'Gerente de T.I.'; // alterar um valor associado a uma
chave existente
• funcionario.cnh = '1982736654'; // adicionar uma nova dupla de chave e
valor
• console.log(funcionario);
 Arrays e objetos misturados
• A estrutura a seguir corresponde a um vetor de objetos.
 Arrays e objetos misturados
• console.log( cursos[1]['categorias'][0] );
• //será apresentado ‘desenvolvimento web’

Podemos alterar os elementos:

cursos[2].categorias[1] = 'Administração de empresas’;

console.log( cursos[2].categorias );

//O console mostrará ['produtividade', 'Administração de

empresas’]
• // será apresentado no console ‘desenvolvimento web’
 Métodos de Objetos
• Métodos são ações que podem ser aplicadas a um objeto.
• Associamos uma função a uma propriedade do objeto.
• Dentro desta função podemos usar a keyword this para
referenciar o próprio objeto que contém este método.
• // será apresentado no console ‘desenvolvimento web’
 Sabia que quase tudo em Javascript é objeto?
• Métodos são ações que podem ser aplicadas a um objeto.
• Associamos uma função a uma propriedade do objeto.
• Dentro desta função podemos usar a keyword this para
referenciar o próprio objeto que contém este método.
• // será apresentado no console ‘desenvolvimento web’