JAVA SCRIPT

Definição
JavaScript é uma linguagem de programação de alto nível, interpretada, que permite a criação
de conteúdos dinâmicos, controle de mídias e animações, que torna o seu site mais interativo e
interessante para o usuário.

Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World
Wide Web. JavaScript permite páginas da Web interativas e, portanto, é uma parte essencial
dos aplicativos da web. A grande maioria dos sites usa, e todos os principais navegadores têm
um mecanismo JavaScript dedicado para executá-lo.

História
A história do JavaScript teve sua origem bem no início da internet, no decorrer destes principais
eventos. com o surgimento do primeiro navegador Netscape que se tornou um dos navegadores
mais popular do início dos anos 90, de mesmo nome, criou o Livescript, uma linguagem simples
que permitia a execução de scripts contidos nas páginas dentro do próprio navegador.
Em 1993 - o Centro Nacional de Aplicações de Supercomputação (NCSA), uma unidade da
Universidade de Illinois lançou o NCSA Mosaic, o primeiro navegador gráfico popular da Web.
Em 1994 Marc Andreessen que trabalhou no NCSA, se juntou com Jim Clark, fundador da
Silicon Graphics, criaram a empresa Mosaic Communications, logo foi rebatizada para
Netscape Communications. O sucesso foi imediato e a empresa recém-fundada passou a
dominar o mercado de navegadores.
Em 1995, a Netscape recrutou Brendan Eich com objectivo de criar uma linguagem capaz de
dar mais funcionalidade ao HTML. Eich criou a linguagem JavaScript, originalmente
desenvolvido sob o nome Mocha, a linguagem foi oficialmente chamada de LiveScript quando
foi lançada em versões beta do navegador da Netscape 2.0 em setembro de 1995, mas foi
renomeada para JavaScript.

OBS: JavaScript e Java não são mesma linguagem, Apesar de possuírem nome parecido,
não são a mesma coisa. Devido o sucesso e a popularidade da linguagem java, desenvolvida
pela Sun Microsystem, a Netscape decidiu renomear a sua linguagem LiveScript para
JavaScript, como uma jogada de Marketing.
Em 1996, a Microsoft criou uma linguagem idêntica para ser usada no Internet Explorer.
(Jscript).

Em 1997 a Netscape então regularizou a linguagem através da organização internacional

ECMA (European Computer Manufacturer’s Association) devido a questões relacionadas à
marca registrada, a versão padronizada chama – se ECMAScript.

Pág. 1
Versões
JavaScript surgiu há 28 anos e já teve várias versões que são:
Versão Data da publicação Descrição e Funcionalidade
1.0 Março de 1996 Primeira Versão
1.3 Outubro de 1998 Primeira versão na forma padronizada ECMA
ES2005 2005 array.map (), reduce () JSON e string;
ES2006 2006 variáveis constantes pela palavra const
ES2007 2007 Array.includes () e operador exponencial: ‘**
ES2007 2008 Object, String. e assíncrona
ES2020 2020 Importação dinâmica, BigInt e Promise
ES2021 2021 Melhoria nos recursos anteriores como promise
ES2022 2022 última versão

Características da linguagem
• Simplicidade ‒ tem uma estrutura simples que o torna fácil de aprender e implementar, além de
rodar mais rápido do que algumas outras linguagens. Os erros também são fáceis de detectar e
corrigir.
• Velocidade ‒ executa scripts diretamente no navegador da web sem se conectar a um servidor
primeiro ou precisar de um compilador. Além disso, a maioria dos principais navegadores
permite que o JavaScript compile códigos durante a execução do programa.
• Versatilidade – é compatível com outras linguagens como PHP, Perl e Java.
• Popularidade ‒ muitos recursos e fóruns estão disponíveis para ajudar iniciantes com
habilidades técnicas limitadas.
• Carga do servidor ‒ reduz as solicitações enviadas ao servidor. A validação de dados pode ser
feita através do navegador da web e as atualizações se aplicam apenas a determinadas seções da
página da web.

Inserir código JavaScript no HTML

Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três
primeiras,
por ser mais comum:
• Entre as tags <script></script> dentro do código HTML.
• A partir de um arquivo externo.
• Em atributos de tratamento de eventos HTML.
• Em uma URL que use o protocolo especial JavaScript

Pág. 2
 Figura 1 - Inserir JavaScript em HTML

• Na linha 6 a 9, delimitam a tag <script>, que está dentro da tag head neste caso o
JavaScript é executado antes da página ser exibida.
• Na linha 14 a 18, delimitam a tag <script>, que está dentro da tag body neste caso o
JavaScript é executado durante a exibição, na ordem em que aparecer dentro do arquivo
• Na linha 20 a 23, delimitam a tag <script>, que também está dentro da tag body na tag
de abertura na linha 20 contém o atributo src = "assets/js/script.js" que especifica a URL
de um arquivo contendo código JavaScript com extensão.js

Script em arquivo externo

A marcação <script> suporta um atributo src (source), que especifica a URL de um arquivo
contendo código JavaScript. Por convecção, os arquivos JavaScript têm nomes que terminam
com a extensão .js.

Pág. 3
A sintaxe é:

<script src="nome e caminho do arquivo "></script>

No editor de código, no nosso caso o vscode, por pratica de organização de arquivos do site,
todos os arquivos JavaScript colocamos dentro da pasta JS.

Saída no console

Para ver o resultado deve-se abrir o console do navegador, com um clique na tecla F12.

Pág. 4
Comando de entrada e saída

O método alert() exibe uma caixa de alerta com uma mensagem e um botão OK. É usado
quando você deseja que as informações cheguem ao usuário

O método confirm() exibe uma caixa de diálogo com uma mensagem, um

botão OK e um botão Cancelar. Retorna true se o usuário clicou em “OK”, caso
contrário false.

O método prompt() exibe uma caixa de diálogo que solicita entrada do usuário. Retorna o valor
de entrada se o usuário clicar em “OK”, caso contrário retorna null.

Figura 2 - Alert resultado

Figura 3 - confirm Resultado

Pág. 5
 Figura 4- prompt Resultado

O método write() escreve um texto diretamente na pagina do site. O texto e incorporado no

fluxo do HTML.

Comentários

JavaScript aceita dois tipos de comentários o de linha e de bloco

VARIÁVEIS EM JAVASCRIPT
Variável é um espaço na memória do computador que serve para guardar dados.
JavaScript é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, a palavra
nome é diferente da palavra Nome ou NOME, ou seja, maiúscula e minúscula fazem diferença.
Manipulação

Pág. 6
Quando você declara uma variável fora de qualquer função, ela é chamada de variável global,
porque está disponível para qualquer outro código no documento atual.

Quando você declara uma variável dentro de uma função, é chamada de variável local, pois ela
está disponível somente dentro dessa função.

Forma de Declarações
Existem três tipos de declarações de variáveis em JavaScript que são:
var - declara uma variável, inicializada com um valor. Exemplo:

let - declara uma variável local de escopo do bloco, inicializada com um valor. Exemplo:

const - declara uma constante de escopo de bloco, apenas de leitura. Exemplo:

Diferença na forma de declarações

A declaração de var tem escopo global ou de função, enquanto as declarações de let e de const
têm escopo de bloco.

Variáveis de var podem ser atualizadas e declaradas novamente dentro de seu escopo.

As variáveis do tipo let podem ser atualizadas, mas não podem ser declaradas novamente.

As variáveis do tipo const não podem ser atualizadas nem declaradas novamente.

As variáveis do tipo var e let podem ser declaradas sem ser inicializadas, já o const precisa da
inicialização durante a declaração.

Tipos de dados

JavaScript possui tipos dinâmicos. Isso significa que a mesma variável pode ser usada para
armazenar diferentes tipos de dados: Exemplo

• Na linha número 1 a variável nome é atribuída valor entre aspas duplas “Ana”, é
considerada uma variável do tipo String.

Pág. 7
 • Na linha número 2 a variável idade é atribuída o valor número 23, é considerada
uma variável do tipo numérico.
• Na linha número 3 a variável estudante é atribuída o valor true, é considerada como
uma variável do tipo Boolean.

JavaScript tem os principais tipos primitivos de dados

• String – qualquer valor dentro das aspas duplas ou simples.

• Numérico – qualquer tipo de número inteiro 42 ou decimal 3.14159.
• Booleano – recebe valor verdadeiro(true) ou falso(false)
• Indefinido - uma propriedade superior cujo valor é indefinido.
• Nulo - uma palavra-chave (null) que indica valor nulo.
• Objeto - O construtor Object
• Array - é uma variável especial que pode conter mais de um valor

Podemos saber o tipo das nossas variáveis declaradas utilizando o operador typeof, que
retorna uma string indicando o tipo da variável

Utilizando o console.log podemos ver o resultado:

Pág. 8
Operadores

Os operadores vão nos permitir fazer operações matemáticas, de comparação e lógicas. Tem
os seguintes operadores

Operador de Atribuição

O Operador de Atribuição = atribui um valor a uma variável.

Operadores Aritméticos

Para as operações matemáticas básicas são utilizados os seguintes, adição (+), subtração (-),
multiplicação (*), divisão (/) resto (%) e potencia (**).

Operador Nome Exemplo

+ Adição 6 + 4 = 10
- Subtração 6–2=4
/ Divisão 6/2=3
* Multiplicação 6 * 2 = 12
% Resto ou Módulo 7%2=1
** Potencia 3 ** 2 = 9

Podemos fazer as operações desta forma.

Pág. 9
Para ver o resultado das operações realizadas, por meio do console.

Auto - atribuição de variável

Podemos fazer auto – atribuição de seguinte forma.
Operador Exemplo
Auto -atribuição Forma simplificada
+ n = n +1 n +=1
- n=n–3 n–=3
/ n=n/2 n /= 2
* n=n*2 n*=2
% n=n%2 n %= 2
** n= n ** 2 n ** = 2

Incremento e Decremento
O operador de incremento (++) incrementa um número.
O operador de decremento (--) diminui um número.

Operador Exemplo
Auto - atribuição Forma simplificada Incremento Decremento
+ n = n +1 n +=1 n ++
- n=n–1 n–=1 n--

Operadores Relacionais

Pág. 10
Operadores de comparação são usados em declarações lógicas para determinar igualdade ou
diferença entre variáveis ou valores. Operadores de comparação são usados para testar se a
operação e true ou false

Operador Nome Exemplo Resultado

== igual 10 == 10 true
> Maior que 10 > 6 true
< Menor que 10 < 4 false
>= Maior ou igual 3 >= 3 true
<= Menor ou igual 5 <= 6 true
!= Diferente 3!= 2 true

Exemplo:

O resultado de um operador relacionais é um valor booleano.

Operadores logico

Operadores lógicos são usados para determinar a lógica entre variáveis, valores, conjunto de
variáveis ou conjunto de valores. As operações retornam valores booleano.

Os operadores lógicos são:

• && (“e”)
• || (“ou”)
• ! (negação)

Pág. 11
 O “e” vai retornar o valor booleano true quando ambas as proposições, ambas forem
verdadeiras. Se pelo menos uma delas for falsa, o resultado é false.

A principal diferença para o “e” é que, no “ou” basta uma das proposições estar verdadeira
que o resultado impresso é true.

A negação vai simplesmente inverter o valor booleano da proposição. Ou seja, se a

proposição tem o valor true, a negação vai inverter para false, e vice-versa.

Operador Condicional (Ternário)

Atribui um valor a uma variável com base em alguma condição.

Sintaxe

variavelname = (condição) ? value1:value2

Exemplo:

• Na linha 3 – declaramos um variável resultado que pode receber dois valores

"aprovado" ou "reprovado" com base na condição feita no valor da variável nota
declarada na linha 2.
• Na linha 4 mostra o resultado no console do navegador tecla F12 para abrir o console
no navegador

ESTRUTURAS DE CONDIÇÃO

As estruturas condição permitem avaliar uma condição e, a partir dela, executar diferentes
linhas de código e alteram o fluxo de execução do programa.

Em JavaScript temos as seguintes declarações condicionais:

Pág. 12
 • if - para especificar um bloco de código a ser executado, se uma condição especificada
for verdadeira
• else - para especificar um bloco de código a ser executado, se a mesma condição for
falsa
• else if - para especificar uma nova condição a ser testada, se a primeira condição for
falsa
• switch - para especificar muitos blocos alternativos de código a serem executados

Nota: if está em letras minúsculas. Letras maiúsculas (If ou IF) gerarão um erro de
JavaScript.

Estrutura condição simples

As condições simples são aquelas em que é preciso declarar apenas o que será executado caso
a condição definida seja satisfeita, ou seja se o retorno da condição for falso, sua execução é
apenas encerrada e executada se uma condição for verdadeira.

A sintaxe da condição simples é apresentada da seguinte forma:

if (condição) {
bloco para condição 'true';
}

Se a idade for superior ou igual a 18, e executada a linha numero 11 “Maior de idade ”, caso
for inferior a execução e apenas encerada

Estrutura condição composta

As condições compostas são aquelas que permitem executar duas possibilidades caso a
condição testada verdadeira e falso. Essa segunda possibilidade é representada pelo comando
‘else’, que é declarado após o fechamento do primeiro caso.

A sintaxe da condição composta é apresentada da seguinte forma:

if (condição) {
bloco para condição 'true';
} else {
Pág. 13
 bloco para condição 'false';
}

Se a idade for inferior a 18, e executada a linha numero 6 “Menor de idade ”, caso contrário e
executada a linha numero 4 , “Maior de idade”:

switch – múltiplas escolhas

Switch é a instrução usada para executar diferentes ações com base em diferentes condições.

A sintaxe da condição composta é apresentada da seguinte forma:

switch(var) {
case valor1:
comandos
break;
case valor 2:
comandos
break;
default
comandos
}

Este exemplo usa a simulação de clique de teclado a mensagem e apresentada caso o valor da
variável for correspondente a cada case

Pág. 14
ESTRUTURAS DE REPETIÇÃO

As estruturas de repetição permitem executar mais de uma vez um mesmo trecho de código.
Trata-se de uma forma de executar blocos de comandos somente sob determinadas condições,
mas com a opção de repetir o mesmo bloco quantas vezes for necessário.
JavaScript oferece suporte a diferentes tipos de estrutura de repetição:

• while- percorre um bloco de código enquanto uma condição especificada é verdadeira

• do/while- também percorre um bloco de código enquanto uma condição especificada é
verdadeira
• for- percorre um bloco de código várias vezes
• for/of- percorre os valores de um objeto iterável
• for/in- percorre as propriedades de um objeto

OBS: no JavaScript tem mais de três tipos de instruções de repetição, falaremos apenas
dos três tipos citados que possuem uso genérico.

while

A instrução while é uma estrutura de repetição que utiliza uma estrutura condicional para
verificar se a repetição deve ou não continuar enquanto a condição de teste for avaliada como
verdadeira

Para executar uma instrução while, o interpretador primeiramente avalia a condição. Se o valor
da expressão é falso, o interpretador pula a instrução que serve de corpo do laço e vai para a
instrução seguinte no programa. Se, por outro lado, a expressão é verdadeira, o interpretador
executa a instrução

A sintaxe da instrução while é apresentada da seguinte forma:

while(condição) {
instrução
}

Ex: Repetiçao

Pág. 15
Na linha número 2 primeiro inicializamos uma variável i = 0 como contador, na linha 3 a 7 é
declarada o bloco de repetição enquanto a variável contador for menor ou igual a 3 a instrução
vai ser executada.

Saída do resultado código:

Do while

O laço do/while é como um laço while, exceto que a expressão do laço é testada no final e não
no início do laço. Isso significa que o corpo do laço sempre é executado pelo menos uma vez.
A sintaxe é:

do {
instrução

} while(condição)

Ex: Estrutura de repetição do while

For

A instrução for fornece uma construção da estrutura de repetição frequentemente mais

conveniente do que a instrução while. A instrução for simplifica os laços que seguem um padrão
comum. A maioria dos laços tem uma variável contadora de algum tipo. Essa variável é
inicializada antes que o laço comece e é testada antes de cada iteração do bloco de repetição. A
variável contadora é incrementada ou atualizada no final do corpo da estrutura de repetição.

for (inicialização; condição; incremento) {

instrução
Pág. 16
 }

Saída do resultado código:

Array

Um array é uma variável especial que pode conter mais de um valor. A sua sintaxe será:

var array_nome = [elemento1, elemento2, elemento3 . . .]

Ex:

Porque usar array?

Se você tiver uma lista de elemento (uma lista de nomes de pessoas, por exemplo), podes
armazenar os nomes em variáveis únicas, poderia ser assim:

E se você não tivesse 4 pessoas, mas 500? A solução seria criar A solução um array que pode
conter muitos valores sob um único nome e você pode acessar os valores referindo-se a um
número de índice.

Forma de criar um array

Pode-se criar um array em JavaScript de duas formas que são: da forma literal e da forma
construtora.
Pág. 17
Forma literal

Esta é maneira mais fácil de criar um array, que é simplesmente uma lista de elementos de array
separados com vírgulas dentro de colchetes [ ]. Por exemplo:

OBS: a sintaxe de array literal permite uma vírgula opcional à direita; portanto, [ , , ] tem
apenas dois elementos, não três.

Forma construtora

Esta forma utiliza-se o operador new na forma de objecto.

Ler e adicionar elemento

Um elemento de um array pode ser acessado com o operador [ ] e deve-se passar o número do
índice que representa a posição do elemento dentro do array. Os elemenros de um array são
contados a partir do número 0 (zero), portanto, o índice 0 representa o primeiro elemento do
array. Essa sintaxe pode ser usada tanto para ler como para adicionar o valor de um elemento
de um array. Exemplo:

Propriedade length

A propriedade length de um array retorna o comprimento de um array, ou seja, o número de

elementos do array

O resultado e igual a 4 que corresponde ao número total de elemento dentro do nosso array.

Pág. 18
Iteração em arrays

A maneira mais comum de iterar através dos elementos de um array é com uma estrutura de
repetição for.

Na linha número 2 é criada o nosso array que contem um conjunto de nomes. Na linha seguinte
a 5 linha delimitam a estrutura de repetição for, na condição da estrutura da obtém-se o
comprimento do array pele instrução nomes.length com ela é possível percorrer e mostrar os
nomes pela console repetidamente a linha número 4.

For/of

Outra forma de percorre os valores do array é pela instrução for/of que pode ser feita da seguinte
forma.

O for/of é uma estrutura de repetição que permiti que possibilita percorrer um array de forma
mais simples e de mostrar os valores.

Pág. 19
For/in

A ordem do índice depende da implementação e dos valores da matriz. É recomendável utilizar

esta estrutura apenas no caso de se obter os o índice ou posição dos valores do array.

Métodos de localização e pesquisa de array

Existem diferentes métodos que facilitam localizar e pesquisar um elemento dentro de um array.
Os mais utilizados são: indexOf(), lastIndexOf() e includes()

• indexOf e lastIndexOf

O método indexOf ele procura um valor de elemento em um array e retorna sua posição.
Exemplo:

No exemplo acima na linha número 2 foi criada o array lista de nomes, na linha seguinte é
criada uma variável posicao que recebe o valor da posição a partir do retorno do método
indexOf pós verificar se existe dentro do array o nome “Bela”. Neste caso o método retorna o
valor 2 a posição do nome “Bela” como mostra o resultado da imagem seguinte:

Caso o valor (elementos) não for encontrado o método retorna -1

Pág. 20
O método lastIndexOf é igual ao método indexOf(), mas retorna à posição da última
ocorrência do elemento especificado. Exemplo:

A última ocorrência do elemento especificado “Maria “dentro do nosso array esta na quarta
posição, ou seja, o valor da variável declarada na linha número 3 é igual a 4.

• includes
Este método permite verificar se um elemento está presente em um array (incluindo NaN, ao
contrário de indexOf), o método sempre retorna um valor booleano. Exemplo:

No exemplo acima verificou-se o nome “Maria” dentro do array e o método retornou true
(verdadeiro), caso contrário o valor e false (falso).

Métodos

JavaScript tem ainda diferentes tipos de métodos que facilitam a manipulação de array
Métodos Descrição

Pág. 21
 pop() remove o último elemento de um array
push() adiciona um novo elemento a um array (no final):
filter() Cria um novo array com elementos de array que passam teste de condição
find() Retorna o valor do primeiro elemento da matriz que passa em uma função de
teste.
findLast() Retorna o valor do primeiro elemento que satisfaça uma condição, faz o
percurso do array do último ao primeiro elemento.
toString() converte um array em uma string de valores de array (separados por vírgula).
concat() método cria um novo array mesclando (concatenando) arrays existentes

FUNÇÕES
Uma função JavaScript é um bloco de código projetado para executar uma tarefa específica. A
função pode ser invocada ou chamada de qualquer número de locais no programa. Os valores
que são passados para a função são os argumentos, cujos tipos devem ser compatíveis com os
tipos de parâmetro na definição de função.

sintaxe da função JavaScript

A sintaxe da função JavaScript é feita de seguinte forma:

function nome(parametro1, parametro2){

//código a ser executado
}

Uma função JavaScript é definida com a function palavra-chave, seguida por um nome,
seguido por parênteses () Os nomes das funções podem conter letras, dígitos, sublinhados e
cifrões (mesmas regras aplicadas aos usos variáveis). Os parênteses podem incluir nomes de
parâmetros separados por vírgulas: (parâmetro1, parâmetro2). O código a ser executado, pela
função, é colocado entre chaves: {}.

Exemplo:

Pág. 22
Na linha número 2 a 4 e definida a função soma com dois parâmetros x e y, e a função retorna
a soma das variáveis. Na linha número 5 é criada há variável resultado e também e invocada a
função soma com os valores do parâmetro “6 e 4”, e na linha seguintes número 6 é mostrado
pelo console o valor da variável resultado obtida pela função soma.

Tipos de funções
As funções em JavaScript desempenham um papel fundamental na organização e reutilização
de código. Elas oferecem vantagens como modularidade, legibilidade e manutenção facilitada.
Existem diferentes tipos de funções JS que atendem a diferentes necessidades.

Funções Anônimas
São uma definição de função que não está vinculada a um identificador ou seja que não possuem
nome. Exemplo:

A função anonima geral são atribuídas a uma variável como é feita na linha 2 do código, para
posteriormente serem invocada como mostra na linha 5.

Também podem ser usadas em lugares específicos, como argumentos de outras funções. Por
exemplo.

Arrow functions
É uma forma de definir função quando há apenas uma instrução, a sintaxe pode ficar mais curta.
Por exemplo:

Pág. 23
 Na forma tradicional com chaves Na forma Arrow functions
As duas formas fazem a mesma coisa que é somar dois números, a diferença esta que é
necessário atribuir a função a uma variável para o caso de haver necessidade de ser invocada.

OBJETOS EM JAVASCRIPT

O tipo fundamental de dados de JavaScript é o objeto. Um objeto é um valor composto: ele

agrega diversos valores (valores primitivos ou outros objetos) e permite armazenar e recuperar
esses valores pelo nome.

Um objeto em JavaScript é um conjunto não ordenado de propriedades, cada uma das quais
tendo um nome e um valor. O conceito de objetos em JavaScript pode ser entendido com objetos
tangíveis da vida real, com propriedades e ações

Exemplo: um carro pode ser considerado um objecto que tem propriedades (marca, modelo,
cor, peso etc.) e ações (andar, travar, buzinar e etc.)

Podemos criar um objecto carro na forma literal da seguinte maneira:

Pág. 24
Da linha número 1 a 7 delimitam o objecto carro, que recebe as cincos propriedades que
caracteriza um carro no mundo real. Na linha número 8 mostra a construção do objecto no
console.

A sintaxe de um objectos em JavaScript é da seguinte forma:

var nomeObjetos = {
propriedade: valores,
propriedade: valores,
}

OBS. No JavaScript os elementos do array são criados entre os parentes retos [ ], já os objectos
são criadas entre chaves { }, feita na forma literal. Exemplo:

Manipulação de objectos

Para ler os valores de um objecto da seguinte forma:

Pág. 25
O resultado apresenta a cor vermelha que foi altera e a marca do carro Kia criada na linha
número 2

Podemos adicionar como elemento dentro de um objecto uma função

Na linha número 7 dentro do objecto foi criada um método (função), e na linha 13 este método
e invocada e retorna a’’ mensagem carro em movimento’’

Pág. 26
MODELO DE DOCUMENTO POR OBJETOS - DOM

O DOM é um padrão W3C (World Wide Web Consortium) define que:

"O Document Object Model (DOM) é uma plataforma e interface de linguagem neutra que
permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e
o estilo de um documento."

O padrão DOM W3C é separado em 3 partes diferentes:

• Core DOM – modelo padrão para todos os tipos de documentos

• XML DOM - modelo padrão para documentos XML
• HTML DOM - modelo padrão para documentos HTML

HTML DOM
O HTML DOM é um padrão de como obter, alterar, adicionar ou excluir elementos HTML.
O HTML DOM é um modelo de objeto padrão e interface de programação para HTML. que é
possível definir o seguinte na página HTML.

• Os elementos HTML como objetos

• As propriedades de todos os elementos HTML
• Os métodos para acessar todos os elementos HTML
• Os eventos para todos os elementos HTML
Arvore DOM
O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que antecede
o document é o window, que nada mais é que a janela do navegador. Em sua estrutura, o
document está no topo como objeto global e tem como elemento raiz a tag html e todas as
outras descendem dela através das suas ramificações (branchs).

A tag html, objeto pai, apresenta dois objetos filhos: o head e o body (o cabeçalho e o corpo).
Os objetos que seguem nas ramificações de baixo são denominados como child, e os de cima,
parent. A tag head é parent da tag title, e a body é parent das tags p e u1, e assim

Pág. 27
sucessivamente, de acordo com a hierarquia. Das tags, derivam os atributos, e destes, seus
valores.

Exemplo código fonte da página.

Esta é a árvore HTML DOM do código HTML acima.

Pág. 28
Document -quando um documento HTML é carregado no navegador da Web, torna-se um
objeto de documento. O objeto de documento é o nó raiz do documento HTML e o de todos os
outros nós.

Element - o objeto de elemento representa todas as tags que estão em arquivos HTML ou XML.
O objeto de elemento pode ter nós filhos de nós de texto, além de atributos. Exemplo: tag ul
Texto -texto que vai entre os elementos, o conteúdo das tags. Exemplo: <li>Java</li>.

Attribute -o objeto atributo representa um atributo que pertence sempre a um elemento HTML.
Exemplo: id="lista".

Acesso dos elementos DOM

Nós em HTML DOM são acessados com os métodos javascript. Existem muitos métodos de
acesso DOM com os quais você pode acessar elementos HTML, como por exemplo
getElementById("id1").
Com o modelo de objeto, o JavaScript obtém todo o poder necessário para criar HTML
dinâmico:

• JavaScript pode alterar todos os elementos HTML da página

• JavaScript pode alterar todos os atributos HTML da página
• JavaScript pode alterar todos os estilos CSS da página
• JavaScript pode remover elementos e atributos HTML existentes
• JavaScript pode adicionar novos elementos e atributos HTML
• JavaScript pode reagir a todos os eventos HTML existentes na página
• JavaScript pode criar novos eventos HTML na página

Document JavaScript DOM

O Document é uma interface que representa as páginas da web. Ele serve como um ponto de
entrada para o conteúdo das páginas da web, ou seja, a árvore DOM

Para acessar qualquer informação relacionada ao documento você terá que começar a acessar
através do document. que pode ser acessada por alguns métodos e propriedades fornecidos pelo
document. Como exemplo:

Pág. 29
Resultado mostra o título da página que neste caso é dom e mostra a URL da página, esta
propriedade apresenta o local exato da página.

O document objecto possui diversas propriedades que podem ser acessadas por meio do
document objecto. Algumas das propriedades úteis do documento objecto são:

Propriedade Descrição

Document.body Representa o <body> nó do documento atual

Document.domain Representa o nome de domínio do documento atual

Document.forms Representa a coleção de todos os formulários do documento atual

Documento.doctype Ele retorna à definição de tipo de documento (DTD) do

documento atual

Documento.doctypeURI Retorna a localização (URL) do documento atual

Document.head Retorna <head> elemento do documento atual

Document.title Usando-o você pode obter/definir o título do documento

Document.links Retorna uma lista de todos os hiperlinks no documento atual

Document.images Ele retorna uma lista de todas as imagens do documento atual

Documento.cookie Ele retorna uma lista separada por ponto e vírgula dos cookies do
documento

Document.activeElement Ele retorna o elemento que o cursor está focando no documento

Document.baseURI Ele retorna o URI base do documento

Pág. 30
Métodos de acesso DOM

Os métodos HTML DOM são ações que você pode executar (em elementos HTML), para
realizar estas ações, deve - se primeiro selecionar os elementos. Existem várias maneiras para
selecionar os elementos HTML que são

• selecionar elementos HTML por id

• selecionar elementos HTML por nome de tag
• selecionar elementos HTML por nome de classe
• selecionar elementos HTML por seletores CSS
• selecionar elementos HTML por coleções de objetos HTML

Método getElementById

Serve para selecionar elemento HTML partir do id. Exemplo:

Este exemplo seleciona o elemento com id="titulo" do código HTML. Primeiro é criada uma
variável de nome paragrafo que recebe o elemento objecto (no DOM, todos os elementos
HTML são definidos como objetos), o id do elemento selecionado é passado como parâmetro
string do método getElementById('titulo')

Podemos ver o elemento HTML (objecto) selecionado pelo console e as suas propriedade e
métodos.

Feita a seleção podemos fazer alteração de conteúdo e estilo e diversa coisas.

innerText e é uma propriedade utilizada para obter ou substituir o conteúdo de elementos

HTML.

Pág. 31
Antes Depois

Método getElementsByTagName

Serve para selecionar elemento HTML partir da tag. Exemplo:

Neste exemplo retorna no console todos as tags li presente no site em uma coleção de objectos.

Ou seja, é criada um objectos numerado com três elementos o número total de todos os
elementos li do código do site.

Pág. 32
Para selecionar um elemento por nome da tag caso existem mais de um presente utiliza-se
parentes retos [ ] com o número da posição que se pretende selecionar. Exemplo:

Depois do parâmetro usou-se [0] para selecionar a primeira tag li do código.

Método getElementsByClassName
Serve para selecionar elemento HTML partir da classe. Exemplo:

Caso exista mais classe de mesmo nome e seja necessário passar a posição do elemento na
arvore DOM o número da posição do elemento entre parentes retos. Exemplo [0].

Método querySelector
Este método retorna o primeiro elemento no documento HTML que corresponde ao seletor ou
grupo de seletores especificado. Se nenhuma correspondência for encontrada, null será
retornado. Podemos selecionar por id, nomes de classes, atributos, valores de atributos, etc. Por
exemplo:

Na linha 1 foi realizada a seleção de elemento a partir do id, é necessário passar o hashtag junto
com o selector (#titulo). Na linha número 2 foi feita a partir da tag do elemento. A linha seguinte
a seleção é realizada a partir de uma classe, é necessário passar-se um ponto junto ao selector
(.lista) como parâmetro na linha 3.

Pág. 33
querySelectorAll
Retorna uma lista (array) de todos os elementos presentes no documento HTML. que
corresponde ao seletor ou grupo de seletores especificado. Por exemplo:

Eventos

Eventos são reações a ações do usuário ou da própria página. Todo evento envolve uma ação e
um objeto (ou trecho da página) que sofre esta ação. Por exemplo, quando o usuário pressiona
o botão do mouse e o cursor está sobre uma imagem, dizemos que esta imagem sofreu o evento
de “click “do mouse. Exemplo:

Neste exemplo adicionou-se um evento de click no elemento button, quando é clicado

apresenta uma mensagem no console.

Pág. 34
Forma de atribuir eventos

Existem duas maneiras de atribuir eventos com JavaScript em um documento HTML que são:
atributos de eventos e HTML DOM

• Atributos de eventos – é adicionado um atributo nos elementos HTML que permitir

executar código JavaScript a partir de um evento por exemplo: onclick,
onMouseOver etc.

Na linha 8 é adicionado um atributo na tag <button> onclick que reage ação do usuário e
altera o texto do botão “click aqui” para “apertaste o botão” através do atributo innerHTML.

• HTML DOM – podemos atribuir eventos a elementos HTML DOM, com JavaScript.

Pág. 35
 Na linha 11 a 16 delimitam a declaração da tag <script>. Na linha 12 é selecionado o botão
com o método querySelector por classe. Depois é adicionado um método addEventListener
com dois parâmetros o tipo de evento(click) e a função que executa ação do evento. Como
mostra na linha 12.

Tipos de eventos

Existem diversos eventos que podem ser utilizados em diversos elementos para que a interação
do usuário dispare alguma função:

Eventos de mouse (Mouse Event)

Eventos Descrição
atributos HTML DOM
onclick click O evento ocorre quando o usuário clica em um elemento.
onmousemove mousemove Sempre que o cursor do mouse se move. enquanto está sobre
um elemento.
onmouseenter mouseenter O evento ocorre quando o cursor é movido para um
elemento.
onmouseout mouseout O evento ocorre quando o cursor do mouse se move para
fora dos limites de um elemento.
ondblclick dblclick O evento ocorre quando o usuário clica duas vezes em um
elemento.
onmouseup mouseup O evento ocorre quando o usuário solta o botão do mouse
sobre um elemento

Há diversos tipos de eventos do mouse, mais falaremos dos eventos citados na tabela por
exemplo:

Pág. 36
Na linha 6 a 16 delimitam a tag <style> que serve para adicionar código CSS no HTML. É
selecionada por id #box visto na linha 7.

Na linha 20 a 22 delimitam o elemento de uma <div> com atributo id = “box”, que foi atribuído
os eventos citado na tabela.

Na linha 23 a tag <script> que serve para adicionar um arquivo JavaScript externo.

Pág. 37
O método addEventListener tem dois parâmetros o tipo de evento e a função anonima que
executa ações como na linha 6 e alterada a cor da div em azul e na linha 7 é modificada o
conteúdo da div, o mesmo acontece em todos os métodos.

As ações são feitas partir dos eventos do métodos que acontece alteração da cor do fundo e
texto da div. Podemos ver os resultados abaixo.

Pág. 38
Podemos realizar o evento do mouse da seguinte forma:

Na linha 26 a variável x é atribuída a posição do mouse no eixo x. E na linha 27 com atributo

innerText é concatenação da posição do cursor sobre a div.

Existem também outros 4 tipos de categoria de eventos alem do mouse event que são:

Tipos de categorias de eventos

Categorias Descrição Eventos
eventos de toque O evento ocorre nas telas sensíveis touchstart, touchmove,
(TouchEvent) ao toque ou trackpads. touchend, touchcancel
eventos de teclado O evento ocorre com ação do keydown, keypress,
(KeyboardEvent) usuário ao teclado, quando aperta keyup
uma tecla especifica

eventos de formulário O evento ocorre com a interação do focus, blur, change,

usuário com o formulário do site. submit.
eventos de janela O evento ocorre com ação da página scroll, resize, unload,
ou da janela do navegador. load e hashchange,

Pág. 39
Criar e Remover Elementos

Com o HTML DOM é possível obter, alterar, adicionar ou excluir elementos HTML.com
diferentes formas.
Código HTML: Mostra uma lista de pais Podemos adicionar um novo elemento ou remover
um elemento na lista.

O método createElement é um dos métodos mais básicos e versáteis para criar elementos com
JavaScript. Ele permite que você crie um novo elemento especificando o nome da tag HTML
desejada. Por exemplo:

Neste exemplo é adicionado uma tag <li> com o conteúdo “ Portugal”. Este método adiciona
um novo elemento na última posição, e com o innerText adicionamos conteúdo tag é Portugal,
como indica na linha 4, já na linha 6 a nova tag <li> torna-se filho da tag <body> como mostra
o resultado da página:

Pág. 40
Podemos escolher a posição exata da nova tag <li> selecionar a tag pai, onde vamos criar a
nova tag (elemento) por exemplo:

Remover elementos

O método remove serve para remover um elemento do documento HTM. Por exemplo:

Adicionar e remover classe

Podemos adicionar um atributo de classe com a propriedade classList junto com o método
add(), exemplo:

Podemos também usar a propriedade classList junto com o método remove(), exemplo:

Pág. 41
Alternar classe do elemento

Podemos Alterne entre adicionar e remover um nome de classe de um elemento com JavaScript
com o método toggle(), exemplo:

Adicionar e remover Atributos

No JavaScript é possível adicionar ou remover um atributo de um elemento selecionado.

Com o método setAttribute é possível adicionar atributos num elemento, caso o valor do
atributo não existir, se já existe apenas atualiza o valor, por exemplo:

Podemos adicionar vários tipos de atributos como id, style, href etc.

Com o método removeAttribute é possível remover qualquer tipo atributo de um elemento

Obter valores dos atributos

O getAttribute é um método que retorna o valor do atributo de um elemento selecionado.

Pág. 42