Introdução ao JavaScript
Tiago Lopes Telecken
telecken@[Link]
HTML - DOM
Document Object Model
API de acesso e manipulação de
documentos HTML
2
DOM
O DOM transforma todo documento HTML
em objetos com propriedades e métodos
que podem ser acessados
Para o DOM, tudo em um documento HTML
é um nodo (o nodo é um objeto com
propriedades e métodos).
– O documento inteiro é um nodo
– Todos elementos HTML são nodos
– Todos textos nos elementos HTML são nodos
texto
– Todos atributos são nodos
– Todos comentários são nodos
3
DOM – Nodos (Node)
Exemplo
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM 1</h1>
<p>Ola Mundo!</p>
</body>
</html>
</html> é o nodo raiz (root)
Todos os outros nodos estão dentro do nodo
4 HTML
A árvore DOM de nodos
5
Acessando nodos - querySelector()
O método querySelector()
– Retorna o primeiro elemento de um seletor CSS:
– [Link](“#menu");
– Retorna o elemento com id=“menu":
<html><body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
let x=[Link]("#intro");
[Link]([Link]);
</script>
</body></html>
// Lembrando um comando css: p {color:blue}
6
Acessando nodos - querySelector()
Neste exemplo o nodo com id=“meuTitulo” será capturado
pelo comando [Link]("meuTitulo") e seu
conteudo será jogado na variável x. Depois o comando
alert([Link]) vai mostrar uma mensagem com o
conteudo de x. innerHTML retorna o conteúdo de um nodo, ou
seja o texto que esta dentro da tag.
<html>
<head>
</head>
<body>
<h1 id="meuTitulo">Este título será capturado pelo
querySelector e mostrado na mensagem alert</h1>
<h1 id="OutroTitulo">Este título não sera capturado</h1>
<script type="text/javascript">
let x=[Link]("#meuTitulo");
alert([Link]);
</script>
</body>
</html>
Para elementos, innerHTML é equivalente a
7 [Link]
Acessando nodos - [Link]()
O método [Link]()
– Retorna todos os elementos de um seletor CSS
– [Link]("seletor");
– [Link]("p");
– Retorna uma lista de todos elementos <p> do documento
– O código a seguir retorna uma lista de nodos com
todos elementos <p> que são descendentes do
elemento com id="main"
– [Link]('#main').querySelectorAll("p");
8
Acessando nodos -
[Link]
O método [Link]
retorna uma lista de nodos. Esta lista é um
array de nodos
Selecionar todos nodos <p>
– x=[Link]("p");
Acessar o segundo p da lista
– y=x[1];
Tamanho da lista
– [Link]
9
Acessando nodos -
[Link]()
Na primeira linha do script, x recebe uma lista com todos os
elementos <p> de uma pg HTML.
Depois é definido um laço que vai de 0 ao número de “p”s que
estão na lista de x
Dentro do laço, um comando escreve o conteúdo de cada p. O
comando innerHTML retorna o que esta escrito dentro de um
elemento. Neste caso o que está escrito entre <p> e </p>
<html><body>
<p>primeiro</p>
<p>segundo</p><hr>
<script>
let x=[Link]("p");
for (let i=0;i<[Link];i++)
{
[Link](x[i].innerHTML);
[Link]("<br />");
}
</script>
</body></html>
10
Acessando nodos -
[Link]()
Exemplos de query...
[Link] – todos os p com class=”aviso”
P,h1 - todos p e h1
#test quem tiver o id = “test”
querySelector(“#test”) retorna o primeiro nodo que
corresponda a query.
11
Acessando nodos - getElementById()
O método getElementById()
– Retorna o elemento com a ID especificada:
– [Link](“id")
– [Link](“menu");
– Retorna o elemento com id=“menu":
– Similar ao querySelector mas limitado a ids
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
let x=[Link]("intro");
[Link]([Link]);
</script>
12 </body>
</html>
Acessando nodos - getElementsByTagName()
O método getElementsByTagName()
– Retorna todos os elementos com o nome de tag
especificado
– [Link]("tagname");
– [Link]("p");
– Retorna uma lista de todos elementos <p> do documento
– Similar ao querySelectorAll mas limitado a tags
O código a seguir retorna uma lista de nodos com
todos elementos <p> que são descendentes do
elemento com id=“main”
– [Link]('#main').getElementsByTagNam
e("p");
13
Acessando nodos – getElementsByTagName()
Similar ao querySelectorAll porém limitado a
tags
O método getElementsByTagName() retorna
uma lista de nodos. Esta lista é um array de
nodos
Selecionar todos nodos <p>
– x=[Link]("p");
Acessar o segundo p da lista
– y=x[1];
Tamanho da lista
14 – [Link]
Acessando nodos – Por relacionamentos
Os nodos possuem relacionamentos
entre si, conforme sua posição na árvore
Um nodo pode ter:
– Filhos (child)
– Pai (parent)
– Irmaos (siblings)
15
Acessando nodos – Por relacionamentos
16
Acessando nodos – Por relacionamentos
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM 1</h1>
<p>Ola Mundo!</p>
</body>
</html>
17
Acessando nodos – Por relacionamentos
Navegando pelos relacionamentos
Propriedades parentNode, firstChild e lastChild,
nextSibling e previousSibling
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
let x=[Link]("#intro");
[Link]([Link]);
</script>
</body>
</html>
18
Acessando nodos – Por atalhos
[Link] – retorna o
elemento raiz <html>
[Link] – retorna o elemento
<body>
Peloatributo name, pela palavra
reservada this, entre outros… (exemplos
adiante em eventos)
19
Acessando Propriedades
nodeName
Especifica o nome dos nodos (depende do tipo de nodo).
– Para um elemento node é o nome da tag
– Para um atributo é o nome do atributo
– Para texto é sempre #text
nodeValue
Especifica o valor de um nodo.
– Indefinido para elementos
– O próprio texto para textos
– O valor dos atributos para atributos
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
let x=[Link]("#intro");
[Link]([Link]);
</script>
<html>
<body>
20
Acessando Propriedades
nodeType
Retorna o tipo do nodo
Tipo de nodo NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9
21
Acessando Propriedades
<html>
<head></head>
<body>
<p id="intro">Alo Mundo!</p>
<hr><hr><hr><br>
<script type="text/javascript">
let x=[Link]("#intro");
//propridades do elemento body
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
[Link]("<HR>");
// propridades do elemento P
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
[Link]("<HR>");
// propridades do texto Alo mundo
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
[Link]([Link] +"<br>");
</script>
22 </body></html>
Alterando documentos
Alterando atributos
<html>
<body>
<script type="text/javascript">
[Link]="yellow";
</script>
</body>
</html>
Usando o innerHTML
<html>
<body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
[Link]("#p1").innerHTML="New
text!";
</script>
</body>
23 </html>
Alterando documentos
Usando eventos
<html>
<body>
<input type="button" id="verde" value="Muda cor" />
<script>
[Link]("#verde").addEventListener("click", ( ) =>
{[Link] = 'green';} );
</script>
</body>
</html>
24
Alterando documentos
Usando o objeto style //altera prop. CSS
<html>
<head></head>
<body>
<input type="button" id="b1" value="Muda cor" />
<script type="text/javascript">
[Link]("#b1").addEventListener("click",mudaCor );
function mudaCor()
{
[Link]="lavender";
}
</script>
</body>
</html>
25
Alterando documentos
<html><head></head>
<body>
<p id="p1">Hello world!</p>
<input type="button" id="b2" value="Alterar" />
<script type="text/javascript">
[Link]("#b2").addEventListener("click", altera);
function altera()
{
[Link]("#p1").[Link]="blue";
[Link]("#p1").[Link]="Arial";
}
</script>
</body>
</html>
26
Operações com atributo
let x=[Link]("#title")[0];
let y= [Link]("lang");
let txt=[Link];
x=[Link]('title')[0];
[Link]("lang","pt-br");
btn = [Link]("INPUT")[0];
[Link]("type");
27
Operações com elementos
let node = [Link]("LI");
let textnode = [Link]("ola");
[Link](textnode);
[Link]("#myList").appendChild(node);
let list = [Link]("myList");
[Link]([Link][0]);
28
Operações com texto
let x=[Link]("title")[0];
[Link]([Link][0]);
newTitle=[Link]("title");
newText=[Link]("A Notebook");
[Link](newText);
[Link](newTitle);
29
Eventos e manipuladores de eventos
Eventos: São fatos que ocorrem durante a interação do usuário com
a página (clicar botões, selecionar caixas de texto, carregar páginas,
etc).
Event listener: são “alarmes” que detectam quando determinados
eventos ocorrem e podem disparar ações quando estes eventos
ocorrem.
A seguir uma lista de eventos i. Também é mostrado os elementos
HTML onde estes eventos podem ocorrer e consequentemente onde
os manipuladores podem ser colocados.
load - Detecta a carga do documento. Ou seja, quando o usuário
acessa a página.
– Válido para o elemento Body
unload - Detecta quando o usuário sai da página.
– Válido para o elemento Body
change - Detecta quando o objeto perde o foco e houve mudança de
conteúdo (o usuário selecionou um item ou escreveu um novo texto
em uma caixa de texto).
– válido para o Text, Select e Textarea.
30
Eventos
blur - Detecta quando o objeto perde o foco, independente de ter
havido mudanç[Link] exemplo quando o usuário clica em outra
página ou elemento de formulário
– válido para o Text, Select e Textarea.
focus - Detecta quando o objeto recebe o foco. Ou seja quando o
usuário clica no objeto ou o seleciona através do teclado.
– válido para o Text, Select e Textarea.
click - Detecta quando o objeto recebe um Click do Mouse.
– válido para o Button, Checkbox, Radio, Link, Reset e Submit.
mouseover - Detecta quando o ponteiro do mouse passa por
sobre o objeto.
– válido para Links.
select - Detecta quando o objeto é selecionado.
– válido para o Text e Textarea.
submit - Detecta quando um botão tipo Submit recebe um click do
mouse.
– válido para o Form.
31
Eventos
Os Event Listeners citados anteriormente podem ser associados a
determinados elementos HTML. Eles vão cuidar se determinado
evento ocorre no elemento onde foram associados
No exemplo abaixo o listener vai detectar se o usuário muda o texto
que esta escrito na caixa de texto “a”. Se isto ocorrer ele dispara uma
ação (mostra uma mensagem de alerta).
<form name="Text">
<input type=“text” id=”a1” size=“20” value="" >
</form>
<script>
[Link]("#a1").addEventListener("change", mensagem);
function mensagem() {
alert ('Voce digitou ' + [Link]("a1").value)
}
</script>
32
Eventos
Ao ocorrer um evento click o comando JavaScript
determina a mudança de uma propriedade do
objeto document
<input type="radio" id="verde" value="1" >Verde
<input type="radio" id="violeta" value="2"> Violeta
<input type="radio" id="amarelo" value="3">Amarelo
<script>
[Link]("#verde").addEventListener("click",
()=> {[Link] = 'green';"});
[Link]("#violeta").addEventListener("click",
()=> {[Link] = '#violet';"});
[Link]("#amarelo").addEventListener("click",
()=> {[Link] = 'yellow';"});
</script>
33
Eventos
<form method="POST" id=”form1” action="[Link]">
Digite um Texto <input type=text id=”teste" value="">
Botao Submit <input type=submit value="Manda p/Server">
</form>
<script>
[Link]("#form1").addEventListener("submit", (e)=>{testa(e)} );
function testa(e) {
if ([Link]("#teste").value == "") {
alert ("Campo nao Preenchido...Form nao Submetido");
[Link]();}
else {
alert ("Tudo Ok....Form Submetido");
}
}
</script>
34
Eventos
mouseover: quando o mouse passa por cima
mouseout: quando o mouse sai de cima
<html>
<head>
</head>
<body>
<a href="[Link] target="_blank">
<img border="0" alt="Visite o Google!" src="b_pink.gif" id="b1" /></a>
<script>
[Link]("#b1").addEventListener(mouseover,
()=>{[Link]("b1").src ="b_blue.gif";});
[Link]("#b1").addEventListener(mouseout,
()=>{[Link]("b1").src ="b_blue.gif";});
</script>
</body>
</html>
35
Eventos com addEventListener
[Link](“#teste").addEventListener(“click", funcao, true);
• Num mesmo elemento podem ser adicionados vários event handlers
• Click: evento que dispara uma funcao
• Funcao: funçao disparada
• True: é o padrão e define que os elementos internos disparam eventos
primeiro. False determina que os eventos dos elementos externos são
executados primeiro
<div><p>oi</p></div>
[Link](“#teste").removeEventListener(“click", funcao);
– Remove o event listener
• A árvore do DOM não tem hoisting, logo os elementos html referenciados
devem estar no código antes de serem referenciados no addEventListener. Já
as funções tem hoisting então podem ser referenciadas antes de serem
36
Mais Eventos
[Link](“#teste").onclick = funcao;
– Forma alternativa
[Link]("keyup", funcao, false);
– Window é o objeto pai do JS. Neste caso se a qq momento uma tecla
é apertada a funcao é disparada
37
Mais Eventos
[Link]("keydown", verifica,
false);
function verifica(e) {
if ([Link] == "65") {
alert(“A tecla 'a' foi pressionada.");
}
}
// [Link] – retorna onome da tecla, [Link]() cancela o evento
Quando um event handler chama uma função ele passa para a funçao o
objeto “e” que é o evento. Cada evento tem suas propriedades. No exemplo
acima o evento clicar tecla tem a propriedade que retorna o código da tecla
clicada
38
Provocando, simulando eventos
Além de detectar eventos o javascript
pode simula-los. Isto é útil para forçar que
algum evento ocorra sem depender do
usuário final
A seguir a lista de métodos que simulam
eventos
– blur(): tira o foco do elemento
– click(): simula um click do botao
– focus(): coloca o foco em um elemento
– reset (): reseta um formulário
– submit (): submete um formulário sem que o
usuário clique o botão submit
39 – select (): seleciona um elemento
Simulando eventos
<html>
<head></head>
<body>
<form>
Name: <input type="text" id="f1" size="30"><br />
Age: <input type="text" id="age" size="30">
</form>
</body>
<script type="text/javascript">
[Link]("load", setFocus);
function setFocus()
{
[Link]("f1").focus();
}
</script>
</html>
Ao carregar a página o foco é colocado na primeira caixa de texto. Por isso ao
carregar a página o cursor já fica nesta caixa de texto. Foi usado o método
focus().
40
Eventos com tempo
setTimeout (“ação”,milesegundos);
Dispara uma ação após o tempo informado
1 segundo tem 1000 milesegundos
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
let t=setTimeout("alert('5 segundos depois!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onclick="timedMsg()" />
</form>
</body>
</html>
41
Eventos com tempo
setTimeout (“ação”,milesegundos);
Dispara uma ação quando passa o tempo informado (1 vez)
clearInterval é usado para interromper a chamada de funções (setInterval)
<html>
<head>
<script type="text/javascript">
let t;
function timedMsg()
{
t=setInterval("alert('2 segundos depois!')",2000);
}
function parar(){
clearInterval(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()" />
<input type="button" value="Parar" onClick="parar()" />
</form>
</body>
</html>
42
Introdução ao JavaScript
Tiago Lopes Telecken
telecken@[Link]