Javascript: Material de Consulta

JavaScript
MATERIAL DE CONSULTA
Leandro Fernandes
Belo Horizonte
2022
CONCEITOS INICIAIS
▪ Nasceu em Setembro de 1995 por Brendan Eich e a equipe da Netscape.
▪ TC39 comitê responsável
Características:
▪ Linguagem de programação de alto nível (Próximo da Linguagem humana)
▪ A relação com Java é apenas no nome comercial
▪ Linguagem interpretada (não gera executável, o browser interpreta no momento de
execução)
▪ Possibilita tratar e aplicar dinâmica aos elementos da página HTML

(Efetuar cálculos, validar formulários)
▪ Tipagem fraca/dinâmica
(significa que NÃO é necessário definir o tipo de valor de uma variável.)
▪ Linguagem multiparadigma
(Utiliza os paradigmas de programação Estrutural, Orientada a Objeto, Funcional)
ECMAScript (ES)
▪ É a linguagem base do Javascript.
▪ O JS adota a sua especificação e inclui outros recursos e funcionalidades.

ESTRUTURA LÉXICA
▪ Case sensitive
Significa que o JS diferencia caracteres/letras maiúsculas de minúsculas.
▪ Camel Case
Boa prática de programação adotada pela comunidade JS
Ex: nomeDoAluno
▪ Comentários
de linha //
de bloco /* */
▪ Nomeação de variáveis
Pode se utilizar:
_ ou $
letras minúsculas de a à z
letras maiúsculas de A à z
dígitos de 0 a 9
▪ Tipos de variáveis
VAR: escopo amplo
LET: escopo reduzido
CONST: não permite reatribuição de valor

▪ Tipos de Dados simples
number (integer/int, float)
string ("aspas duplas" ou 'aspas simples')
boolean (true ou false)
undefined (ausência de valor)
null (É definido pelo desenvolvedor, atribuído a variável para defini-la como sem valor)
▪ Concatenação de strings
No ES5 é usado aspas simples ou duplas e o operador "+" para exibir mensagens e frases ao
usuário.
Para quebrar linha é usado o caractere especial \n e \r.
exemplo:
var nome = 'Leandro';
var idade = 27;
console.log('Meu nome é ' + nome + ' e tenho ' + idade + ' anos.');
Já no ES6 temos o conceito de Template Literals.
É usado o acento crase e interpolação de strings ${} contendo a variável a ser exibida.
Para quebrar linha basta inserir a mensagem quebrada.
exemplo:
let name = 'Leandro';
let age = 27;
console.log(`Meu nome é ${name} e tenho ${age} anos.`);

JS INTEGRAÇÃO COM HTML
Incluindo o JS em arquivos HTML
▪ Diretamente no arquivo HTML
Ao inserir o <script> no <head> de uma página o HTML "PARA" a leitura da página até
interpretar todo o JS.
É recomendado inserir antes do fechamento do <body>, no final da página.
<script type="text/javascript"> Conteúdo JS </script>
▪ A partir de um arquivo externo
Ao usar um arquivo .JS externo o browser faz cache, ele armazena o código JS após
interpretá-lo uma vez, não precisando mais carregá-lo ao atualizar a página web.
<script src="arquivo.js"> </script>

JS BROWSER
OBJETO WINDOW
Usando o JS no browser, temos o objeto WINDOW como principal, "pai".
Todas as propriedades e métodos de manipulação com o browser estão "amarrados",

"vinculados" ao objeto WINDOW.
Métodos do objeto Window:
▪ window.alert("")
▪ window.prompt("")
▪ window.confirm("")
▪ window.open("")
▪ window.location.href = "url do site"
window.alert(" Mensagem ")
Método que exibe uma janela pop-up com a mensagem informada entre ( ).
window.prompt(" Mensagem ")
Método que exibe uma mensagem, informada entre (), e um campo para preenchimento.
É possível atribuir a informação atribuída no campo a uma variável.
if (prompt('Pergunta?'))
console.log('resposta ok!');
else
console.log('resposta não ok!');
window.confirm(" Mensagem ")
Exibe uma janela pop-up de confirmação com o texto informado entre ().
Possui as opções Cancel e OK para clique onde:
▪ Clique em OK retorna true.

▪ Clique em Cancel retorna false.
var del = confirm('Deseja realmente excluir?');
del ? 'Excluído com sucesso!' : 'Ação cancelada!'; //Usando IF Ternário
if (del)
console.log('Excluído com sucesso!', del);
else
console.log('Ação cancelada!');
window.open(" https://www.google.com ")
Método que abre o URL passado como parâmetro em uma nova aba.
window.open("https://www.cruzeiro.com.br/");
window.location.href;
Propriedade que retorna a URL da página atual e que também pode redirecionar para o URL
recebido entre " ".
Exemplo retornando a URL atual:
window.location.href;
Exemplo redirecionando para outra URL (na mesma página):
window.location.href = "https://www.ibccoaching.com.br";
DOM
DOM (Document Object Model)
O DOM é uma forma do JS de acessar e manipular elementos do HTML para tornar
as páginas mais dinâmicas e interativas para o usuário.
A estrutura HTML, chamada de árvore HTML, representada no browser é chamado de DOM

(Document Object Model).
DOM é o objeto (document) criado pelo JS, ao abrir o arquivo .html no browser,
que representa a árvore HTML ou XML.
O JS cria a estrutura de árvore genealógica do HTML, onde cada elemento HTML se
torna um "nó" desta estrutura, e toda estrutura se reporta ao objeto document.
Uma tag HTML se torna um nó, um conteúdo de texto e até um comentário HTML se torna um
nó.
Resumo:
O DOM (document) é um objeto JS que "recebe"/"converte" uma cópia do arquivo
.html em objeto e por meio deste objeto é possível acessar essa "cópia" do .html.
Sempre que eu quiser manipular algum elemento HTML será usado o objeto "document".
WINDOW.DOCUMENT
Objeto que representa o HTML no browser.

MÉTODOS DO OBJETO DOM
▪ getElementById
Permite acessar uma tag HTML pelo seu id.
document.getElementById('IDmain');
▪ getElementsByClassName
Permite acessar uma tag HTML pela sua classe.

O getElementByClassName corresponde a uma coleção de Class, chamado HTML
Collection, por isso para modificar/acessar algum elemento HTML é necessário informar
seu índice ( [0], [1] ) similar a um array.
document.getElementsByClassName('Psection')[0];
▪ getElementsByTagName
Permite acessar uma tag HTML pelo nome da sua tag.

O funcionamento do getElementByTagName é similar ao getElementByClassName,
corresponde a um HTML Collection, similar a um array.
document.getElementsByTagName('h1')[0];
▪ querySelector
Permite "navegar" dentro de toda a árvore DOM, buscando elementos/nós que estão dentro
de outros elementos/nós.
É usado para selecionar elementos da mesma forma que no CSS.
Retorna sempre um único elemento, sempre 1º elemento da página, mesmo tendo mais de
um no document. Referência direta ao objeto.
document.querySelector('#IDmain');
▪ querySelectorAll
Retorna uma nodeList que é uma coleção de objetos, HTML Collection, similar a um array.
document.querySelectorAll('p')[0];
ATRIBUTOS DE ELEMENTOS DO OBJETO DOM
São atributos getters e setters, ou seja, é possível buscar o valor dado ao atributo assim como
alterar o valor atual.
▪ elementoHTML.value
Permite retornar o conteúdo de um atributo value=” “ ou inserir conteúdo em um input.
$input.value;
$input.value = 'teste';
▪ elementoHTML.textContent
Permite retornar ou inserir o conteúdo textual de um elemento.
$p.textContent; //Texto Parágrafo

$p.textContent = 'Novo Parágrafo';
$p.textContent; //Novo Parágrafo
▪ elementoHTML.innerHTML
Retorna a estrutura HTML, em string, do conteúdo do elemento que executou esta
propriedade. Também é possível inserir no elemento o conteúdo passado em string,
aceitando o formato em HTML.
$footer.innerHTML = `<div><h3>Teste</h3></div>`;
▪ elementoHTML.className
Informa o nome dado ao atributo class=" " do elemento HTML e permite também alterar
as classes atuais do elemento pelas “novas” classes informadas.
$section.className; //"testeClass"
$section.className = "testeClass novaTesteClass";
▪ elementoHTML.id
Informa o nome dado ao atributo id=" " do elemento HTML.
$section.id;
▪ elementoHTML.href (para links)
▪ elementoHTML.title
▪ elemento.src (para imagens ou tags de script)

MÉTODOS DE ELEMENTOS DO OBJETO DOM
▪ elementoHTML.createElement(tag HTML)
Cria uma nova tag HTML.
var $newP = document.createElement('p');
▪ elementoHTML.appendChild(elemento HTML ou tag)
Adiciona o elemento passado entre ( ) ao final do elemento/nó que executa o método.
Se o elemento não existir ele será criado, se já existir será movido.
$footer.appendChild($newP);
▪ elementoHTML.removeChild(elemento HTML ou tag)
Remove o elemento HTML filho informado dentro dos ( ).
$footer.removeChild($newP);
▪ elementoHTML.setAttribute(“nome do atributo HTML”, “novo valor”)
Permite substituir o valor de um atributo ou criar um novo atributo já informando o seu valor.
$section.setAttribute('data-js', 'newData');
$footer.setAttribute('class', 'footerClass');
▪ elementoHTML.removeAttribute(“nome do atributo HTML”)
Permite substituir o valor de um atributo ou criar um novo atributo já informando o seu valor.
$footer.removeAttribute('class');
▪ elementoHTML.getAttribute(“nome do atributo HTML”)
Método que retorna o valor dado a qualquer atributo de um elemento HTML.
Basta informar o nome do atributo ao qual se deseja saber o valor dado entre "".
Sempre retorna uma string.
$section.getAttribute('class');
$section.getAttribute('id');
$section.getAttribute('data-js');
MANIPULANDO ESTILO CSS
▪ elementoHTML.style.propriedadeCSS
1º Forma
var $div = document.querySelector('div');
$div.style.backgroundColor = 'blue';
$div.style.width = '100px';
$div.style.height = '100px';
2º Forma
$div.setAttribute('style', "width:200px; height:200px; background-

color:red");
▪ elementoHTML.classList
Retorna um array onde em cada posição ficará uma classe CSS contida no elemento HTML
$div.classList; //["classe1", "classe2"]
▪ elementoHTML.classList.add( )
Adiciona a classe passada nos (‘ ‘) ao elemento HTML.
$div.classList.add('classe3');
▪ elementoHTML.classList.remove( )
Remove a classe passada entre (‘ ‘) do elemento HTML.
$div.classList.remove('classe3');
▪ elementoHTML.classList.contains( )
Verifica se a classe informada entre (‘ ‘) existe no elemento HTML e retorna true ou false.
$div.classList.contains('classe1');
▪ elementoHTML.classList.remove( )
Verifica se a classe informada entre (‘ ‘) possui ou não no elemento HTML.
Se possui a classe, ela é removida, se não possuir, ela é inserida.
$div.classList.toogle('classe5');
EVENTOS JAVASCRIPT
Eventos possibilitam capturar ações que são feitas pelo usuário dentro do navegador,
mesmo sem saber quando a ação do usuário ocorrerá de fato.
Exemplos de ações:
O clique do usuário em um botão, uma tecla pressionada, redimensionamento da tela.
Na maioria dos casos, os eventos são usados junto com as funções.
Tipos de evento:
▪ eventos de mouse
▪ eventos de teclado
▪ eventos de teclado
▪ eventos de formulário
EVENTOS MOUSE
▪ Onclick
Acionado no clique do mouse.
▪ Ondblclick
Acionado no clique duplo do mouse.
▪ Onmousedown
Acionado no clique do mouse (soltando ou não o botão) com os botões direito e
esquerdo do mouse.
▪ Onmouseover
Acionado quando cursor do mouse sobrepõe o elemento da página.
▪ Onmouseout
Acionado quando o cursor do mouse sai da área do elemento da página.
▪ Onmousemove
Mouse se moveu sobre o elemento.
▪ Onmouseup
Botão do mouse solto sobre o elemento.
EVENTOS TECLADO
▪ Onkeydown
Acionado no momento em que uma tecla é pressionada (soltando ou não a tecla).
▪ Onkeypress
Acionado no momento que a tecla é pressionada (soltando ou não a tecla), porém não
captura todas as teclas, como por exemplo Alt, Ctrl, Esc, Shift, ESC.
▪ Onkeyup
Acionado no momento em que a tecla é liberada ou solta.
EVENTOS JANELA
▪ Onload
Acionado quando a página finaliza o carregamento.
Aguarda até o carregamento de imagens de toda a página ocorrer para disparar o
evento.
▪ Onresize
Acionado quando a página ou frame é redimensionado.
EVENTOS FORMULÁRIO
▪ Onblur
Acionado quando o elemento perde o foco do cursor.
▪ Onchange
Acionado quando o conteúdo do elemento é alterado.
▪ Onfocus
Acionado quando o elemento recebe o foco do cursor.

Javascript: Material de Consulta

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

Javascript: Material de Consulta

Enviado por

Direitos autorais:

Formatos disponíveis

JavaScript

▪ Nasceu em Setembro de 1995 por Brendan Eich e a equipe da Netscape.

▪ TC39 comitê responsável

▪ Linguagem de programação de alto nível (Próximo da Linguagem humana)

▪ A relação com Java é apenas no nome comercial

▪ Linguagem interpretada (não gera executável, o browser interpreta no momento de

▪ Possibilita tratar e aplicar dinâmica aos elementos da página HTML

(Utiliza os paradigmas de programação Estrutural, Orientada a Objeto, Funcional)

▪ É a linguagem base do Javascript.

▪ O JS adota a sua especificação e inclui outros recursos e funcionalidades.

Significa que o JS diferencia caracteres/letras maiúsculas de minúsculas.

Boa prática de programação adotada pela comunidade JS

VAR: escopo amplo

LET: escopo reduzido

CONST: não permite reatribuição de valor

number (integer/int, float)

string ("aspas duplas" ou 'aspas simples')

boolean (true ou false)

undefined (ausência de valor)

Para quebrar linha é usado o caractere especial \n e \r.

var nome = 'Leandro';

var idade = 27;

Já no ES6 temos o conceito de Template Literals.

Para quebrar linha basta inserir a mensagem quebrada.

let name = 'Leandro';

let age = 27;

console.log(`Meu nome é ${name} e tenho ${age} anos.`);

Incluindo o JS em arquivos HTML

▪ Diretamente no arquivo HTML

É recomendado inserir antes do fechamento do <body>, no final da página.

<script type="text/javascript"> Conteúdo JS </script>

▪ A partir de um arquivo externo

<script src="arquivo.js"> </script>

Usando o JS no browser, temos o objeto WINDOW como principal, "pai".

Todas as propriedades e métodos de manipulação com o browser estão "amarrados",

Métodos do objeto Window:

▪ window.location.href = "url do site"

window.alert(" Mensagem ")

window.prompt(" Mensagem ")

É possível atribuir a informação atribuída no campo a uma variável.

Possui as opções Cancel e OK para clique onde:

▪ Clique em OK retorna true.

var del = confirm('Deseja realmente excluir?');

del ? 'Excluído com sucesso!' : 'Ação cancelada!'; //Usando IF Ternário

window.open(" https://www.google.com ")

Exemplo retornando a URL atual:

Exemplo redirecionando para outra URL (na mesma página):

DOM (Document Object Model)

O DOM é uma forma do JS de acessar e manipular elementos do HTML para tornar

as páginas mais dinâmicas e interativas para o usuário.

A estrutura HTML, chamada de árvore HTML, representada no browser é chamado de DOM

que representa a árvore HTML ou XML.

O JS cria a estrutura de árvore genealógica do HTML, onde cada elemento HTML se

torna um "nó" desta estrutura, e toda estrutura se reporta ao objeto document.

Objeto que representa o HTML no browser.

Permite acessar uma tag HTML pelo seu id.

Permite acessar uma tag HTML pela sua classe.

Permite acessar uma tag HTML pelo nome da sua tag.

alterar o valor atual.

Permite retornar o conteúdo de um atributo value=” “ ou inserir conteúdo em um input.

Permite retornar ou inserir o conteúdo textual de um elemento.

$p.textContent; //Texto Parágrafo

Retorna a estrutura HTML, em string, do conteúdo do elemento que executou esta