WELLINGTON W. F.

SARMENTO E
HENRIQUE S. L. PEQUENO

INTRODUÇÃO A
JAVASCRIPT
JAVASCRIPT IN A NUTSHELL

RESUMO
▸ Visão Geral
▸ Valores, Tipos e operadores
▸ Entradas e Saídas
▸ Estruturas de Programa
▸ Funções
▸ Array, Objetos e Expressões Regulares
JAVASCRIPT IN A NUTSHELL

VISÃO GERAL
▸ Nasceu em 1995 no Netscape Navigator

▸ Possibilita a criação das modernas aplicações web

▸ Segue uma especificação internacional mantida pela

European Computer Manufacturers Association (ECMA), chamada
ECMAScript
▸ Algumas especificações conhecidas:

▸ ECMA-334: Linguagem C#

▸ ECMA-367: Linguagem Eiffel

▸ ECMA-262: Linguagem ECMAScript base do Javascript atual
JAVASCRIPT IN A NUTSHELL

VISÃO GERAL
▸ A especificação recente do Javascript pode ser
acessada pelo link https://tc39.es/ecma262/ (2022)
▸ Uma boa documentação para uso da linguagem
Javascript pode ser encontrada na Mozilla
Development Network (MDN):
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference
JAVASCRIPT IN A NUTSHELL

VISÃO GERAL
▸ É uma linguagem interpretada

▸ Os atuais interpretadores Javascript podem executar

funções mais avançadas que a tradução linha a linha
da instrução para código de máquina.
JAVASCRIPT IN A NUTSHELL

VISÃO GERAL
▸ Um Interpretador Javascript, hoje, é chamado de
Javascript Engine

Exemplos de Javascript Engine

JAVASCRIPT IN A NUTSHELL

VISÃO GERAL

Fluxo de execução de um programa Javascript

JAVASCRIPT IN A NUTSHELL

USE O CHROME E
PROCURE ACESSAR O
CONSOLE PARA TESTAR
OS COMANDOS JAVA
SCRIPT A SEGUIR
Mister Javascript
 JAVASCRIPT IN A NUTSHELL

Toda vez que digitar um comando, tecle ENTER. O console.clear() apaga os dados exibidos no
Console.
JAVASCRIPT IN A NUTSHELL

NO EXEMPLO, FORAM USADOS

COMANDOS TERMINADOS EM
";" E SEM. POR CONVENÇÃO,
TODOS OS NOSSO COMANDOS
SEMPRE TERMINARÃO COM ";".

Mister Javascript
JAVASCRIPT IN A NUTSHELL

AGORA CRIE UM PROJETO

"HTML, CSS E JAVASCRIPT" NO
REPL.IT OU VSCode E TENTE
EXECUTAR OS MESMOS
CÓDIGOS USANDO O ARQUIVO
SCRIPT.JS.

Mister Javascript
JAVASCRIPT IN A NUTSHELL

OBSERVAÇÃO
Processin Javascrip
g t
//Programa que conta de 1 até //Programa que conta de 1 até
1000 de dois em dois 1000 de dois em dois números
números
int cont;
for(cont=1;cont<1000;cont+=2 for(let
){ cont=1;cont<1000;cont=+2){
println("O contador tem o console.log("O contador tem o
valor: %d",cont); valor: ",cont);
} }
JAVASCRIPT IN A NUTSHELL

VALORES, TIPOS E OPERADORES

▸ Uma variável é um espaço em memória do
computador usado para armazenar valores.
▸ Um valor é uma quantidade de bits manipulada por
um programa. Exemplo: 0001 0011 0011 1110 0000
1010 1100 1001 (valor 322833097 em binário).
▸ Para podermos distinguir os diferentes tipos de
valores, como por exemplo "10" e 10, usamos os
tipos. Exemplos: numérico, caractere (ex. "A", "10"),
booleano (True ou False), cadeia de caracteres (ex.
"Sou eu")
JAVASCRIPT IN A NUTSHELL

VALORES, TIPOS E OPERADORES

▸ Os tipos numéricos podem, ainda, ser divididos em categorias,
como números naturais (ex. 1,2,3),inteiros (ex. -1, 200, 10),
decimais (ex. 1.2, 3.456), ponto flutuante (1.23 * 10^6)
▸ Declarar uma variável é simplesmente informar ao interpretador
sobre sua existência. Definir uma variável, é dizer qual o seu
tipo.
▸ let a; //declara uma variável

▸ let a=10; //define uma variável, no caso, um Number

JAVASCRIPT IN A NUTSHELL

VALORES, TIPOS E OPERADORES

▸ No Javascript são usadas as seguintes palavras
reservadas para se declarar uma variável:
▸ var: declara uma variável cujo escopo é a função
ou corpo do programa
▸ let: declara uma variável cujo escopo é o bloco
onde se está
▸ const: declara uma variável que não modifica seu
valor (constante)
Declaração de Variáveis

● var:
○ as declarações de var tem escopo global ou de função;
○ variáveis de var podem ser atualizadas e declaradas novamente dentro de seu escopo.
○ Não pode ter escopo de bloco
● let
○ Escopo de bloco
○ As variáveis de let podem ser atualizadas, mas não podem ser declaradas novamente
● const
○ Escopo de bloco
○ As variáveis de const não podem ser atualizadas nem declaradas novamente.

● Obs. 1: Todas elas passam por hoisting para o topo de seu escopo. Porém,
enquanto variáveis com var são inicializadas com undefined, as variáveis com let e
const não são inicializadas.
● Obs. 2: Enquanto var e let podem ser declaradas sem ser inicializadas, const
precisa da inicialização durante a declaração.
Declarando variáveis em JS

● Dadas as 3 formas de declarar variáveis em JS, elas irão se distinguir

quanto a forma de:
○ Permissividade quanto à reatribuição de valores a qualquer tempo;
○ Escopo de variável, ou seja, a área do Código a qual é possível acessar a variável;
○ Hoisting, que permite que uma variável seja utilizada mesmo antes de sua declaração.
Declaração de variáveis com var

● Ex.:
var greeter = "hey hi";
function newFunction() {
var hello = "hello";
}
Detalhe:
greeter tem um escopo global
hello tem um escopo de função
Declaração de variáveis com var

var tester = "hey hi";

function newFunction() {
var hello = "hello";
}

console.log(hello); // erro: hello não está definido fora da função

Variáveis declaradas por var podem ser declaradas de novo e serem atualizadas

● Pode ser feito:

var greeter = "hey hi";
var greeter = "say Hello instead";

Como também:
var greeter = "hey hi";
greeter = "say Hello instead";
Hoisting de var

● Hoisting é um mecanismo do JavaScript que faz com que as

declarações de variáveis e de funções sejam movidas para o topo de
seu escopo antes da execução do código. Assim, dado o seguinte
código:
greeter = "say hello”;
console.log (greeter);
var greeter;

A interpretação será: greeter = "say hello"

var greeter;
console.log(greeter); // greeter is undefined
Hoisting var

// Declared and initialized

var example = { prop1: 'test' };
console.log( 'example:', example );
// Expect output: example: {prop1: 'test"}
// Value reassigned
example =
console.log( example ); // Expect output: 5
Problema com o var

● Dado o seguinte exemplo:

var greeter = "hey hi";
var times = 4;
if (times > 3) {
var greeter = "say Hello instead";
}
console.log(greeter) // o resultado será "say Hello instead”

O trecho acima, mesmo permitido pelo JS, pode suscitar vários erros no
programa, pelo uso inadvertido de var.
Declarando variáveis com let

● Introduzida pelo ES6 (2015)

● Variáveis definidas com let não podem ser redeclaradas em um mesmo
escopo.
● Variáveis definidas com let devem ser declaradas antes de seu uso
● Não possuem a propriedade hoisting de variável, ou seja, acessar uma
variável declarada com let antes de uma atribuição de valor, irá lançar um
runtime error (Temporal Dead Zone - TDZ).

// Referenced before declaration

console.log( example );
// Expect ReferenceError because example is not defined
let example = 'example';
Declarando variáveis com let

● Possuem escopo de bloco

○ Variáveis declaradas dentro de {} não podem ser acessadas fora do bloco
○ Ex.:
{
let x = 2;//declara e atribui um valor numérico à variável x
}
// x can NOT be used here
Redeclaração de let em escopos distintos

let x = 10;

if (true) {
let x = 20; // OK: variável x é diferente no escopo do bloco if
console.log(x); // exibe 20
}

function teste() {
let x = 30; // OK: variável x é diferente no escopo da função teste
console.log(x); // exibe 30
}

teste();
console.log(x); // exibe 10
Exemplo de escopo de bloco do let

if (1){
let it = 'go';
var i = 'abel';

console.log(it);
console.log(i);
}

console.log(i);
console.log(it);
Exemplo de escopo de bloco do let (1)

// Declared and initialized

let example = { prop1: 'test' };
console.log( 'example:', example );
// Expect output: example: {prop1: 'test"}
// Value reassigned
example = 5;
console.log( example ); // Expect output: 5
Exemplo de escopo de bloco do let (2)

function printNumber() {
let number = 10;
if (true) {
let number = 20;
console.log(number);
}
console.log(number);
}
printNumber();
Exemplo de escopo de bloco do let (3)

function count() {
for (let i = 0; i < 5; i++) {
console.log(i);
}
console.log(i);
}
count();
Exemplo de escopo de bloco do let (4)

function printName() {
let name = 'João';

function displayName() {
let name = 'José';
console.log(name);
}

displayName();
console.log(name);
}

printName();
Exemplo de escopo de bloco do let (5)

let val = 0;

function changeValue() {
let val = 10;
console.log(val); // Saída: 10

if (true) {
let val = 20;
console.log(val); // Saída: 20
}

console.log(val); // Saída: 10
}
console.log(val);
changeValue();
Declaração utilizando const

● Assim como let, não tem hoisted de variáveis e possui escopo de

bloco.

// Referenced before declaration

console.log( example );
// Expect ReferenceError because example is not defined
const example = 'example’;
Declaração utilizando const

● Valores uma vez atribuídos, não podem ser alterados. Porém, não significa
que são imutáveis.
● O conteúdo de Arrays ou propriedades de objetos podem ser alterados.
Arrays podem ser modificados pelas funções push(), pop(), ou map() e
propriedades de objetos podem ser adicionadas, removidas ou updatadas.
● Ex:
// Declared and initialized
const example = { prop1: 'test' };
// Variable reassigned
example = 5;
// Expect TypeError error because variable was declared with const
// Object property updated
example.prop1 = 5;
// Expect no error because property was modified
Const: Exemplo 1

const PI = 3.14159;
console.log(PI); // Saída: 3.14159

PI = 3.14; // Erro: TypeError: Assignment to constant variable.

Const: Exemplo 2

const person = {
name: 'Maria',
age: 25
};

person.age = 30;
console.log(person.age); // Saída: 30

person = { // Erro: TypeError: Assignment to constant variable.

name: 'João',
age: 40
};
Const: Exemplo 3

function printNumber() {
if (true) {
const number = 42;
console.log(number); // Saída: 42
}
console.log(number); // Erro: ReferenceError: number is not defined
}
printNumber();
Const: Exemplo 4

for (const i = 0; i < 5; i++) {

console.log(i); //Saída???
}

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
console.log(color); // Saída???
}
Exemplo anterior corrigido

for (let i = 0; i < 5; i++) {

console.log(i); // Saída: 0, 1, 2, 3, 4
}

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
console.log(color); // Saída: red, green, blue
}
Resumo
JAVASCRIPT IN A NUTSHELL

VALORES, TIPOS E OPERADORES

▸ Declararuma variável é simplesmente informar ao
interpretador sobre sua existência. Definir uma
variável, é dizer qual o seu tipo.
▸ let a; //declara uma variável

▸ let a=10; //define uma variável, no caso, um

Number
JAVASCRIPT IN A NUTSHELL

VALORES, TIPOS E OPERADORES

▸ Operadores são símbolos usados para aplicar operações sobre
variáveis. Exemplo: + (soma)
▸ Operadores podem ser:
▸ Unitários: aplicados sobre uma só variável ou valor. Exemplo: not
a;
▸ Binários: aplicados em duas variáveis ou valores. Exemplo: a + 10;
a ?? b;
▸ Ternários: aplicados sobre três variáveis ou valores. Exemplo: a ?
10 : 20
Exemplo operador ternário
A sintaxe do operador ternário é: condição ? valor_se_verdadeiro :
valor_se_falso.

// Exemplo 1:

let idade = 18;

let mensagem = idade >= 18 ? "Maior de idade" : "Menor de idade";

console.log(mensagem); // Saída: "Maior de idade"

// Exemplo 2:

let hora = 14;

let saudacao = hora < 12 ? "Bom dia" : "Boa tarde";

console.log(saudacao); // Saída: "Boa tarde"

VALORES, TIPOS E OPERADORES
Aritméticos e Comparaçã Strin
potência o g
let a,b; let a=2; let local="casa";
a=10;b=20; let b="2"; let numero=10;
console.log(a+b); console.log(a==b); console.log(local+numero);
>30 >true > casa10
console.log(a!=b);
c=a-b; >false
console.log(a-b); console.log(a>b);
>-10 Lógico
> false s
console.log(a*b); console.log(a<b);
>200 console.log(a>=b); let portaAbertaA=true;
console(b/a); >false let portaAbertaB=false;
console.log(a<=b); console.log(portaAbertaA&&porta
>2 AbertaB);
console.log(a**b); > true
console.log(a===b) >false
>100000000000000 ; console.log(portaAbertaA||
000000 >false portaAbertaB);
> true
console.log(!portaAbertaA);
> false
Operador === (igualdade estrita, igualdade de valor e tipo de duas variáveis)

console.log(5 === 5); // Saída: true

console.log('hello' === 'hello'); // Saída: true

console.log(5 === '5'); // Saída: false

console.log(true === 1); // Saída: false

VALORES, TIPOS E OPERADORES
Incremento usando
++
Dado let x=5, caso se tenha y=++x, o valor da variável y será
6 e x também será 6. Caso tenhamos y=x++, a expressão
atribuirá 5 a y e somente então a variável x terá o valor
incrementado, passando a ser 6. x=x+1

Incremento usando Decremento usando

+= --
Permite fazer
incrementos do tipo O decremento usando --
x=x+n, onde n é um funciona de forma similar ao +
valor qualquer. Assim, +. Assim:
temos que:
let x=2; let x=5;
x+=2; x--;
>4 >4
OBSERVAÇÃO
▸ Um operador Javascript recentemente inserido na
linguagem é o ??, chamado Nullish coalescing operator
▸ Este operador testa se uma dada variável possui valor
indefinido ou não. A forma geral da expressão é:
▸ a ?? b (Se a==null || a==undefined Então Retorna b Caso Contrário Retorna a)

▸ No caso, se a for undefined ou null, a expressão retornará

b. Caso contrário, retorna a.

▸ Essa funcionalidade do operador ?? é útil para

fornecer valores padrão em situações em que você
deseja evitar valores null ou undefined indesejados
e ter um valor alternativo em seu lugar.
Exemplo do operador de coalescência nula (operador lógico)

Ex1: Ex.3:

const foo = null ?? 'default string'; const username = null;

console.log(foo); const defaultUsername = 'Usuário

Anônimo';
// Expected output: "default string"
const finalUsername = username ??
defaultUsername;
Ex2:

const baz = 0 ?? 42; console.log(finalUsername); // Saída:

Usuário Anônimo
console.log(baz);

// Expected output: 0
// Exemplo 1: // Exemplo 2:
let valor1 = null; let valor3 = 0;
let valor2 = 10; let valor4 = 42;
let resultado = valor1 ?? let resultado2 = valor3 ??
valor2; valor4;
console.log(resultado); // console.log(resultado2); //
Saída: 10 Saída: 0
OBSERVAÇÃO
▸ Vejamos um exemplo bastante útil para quando
estamos criando uma aplicação:

Caso nenhum dos nomes fosse definido, a expressão retornaria "Anonymous". No caso,
irá retornar "Supercoder".
JAVASCRIPT IN A NUTSHEL

ESTRUTURAS DE PROGRAMA
▸ Um programa em Javascript pode ser criado dentro do código
HTML, usando a tag <script>...</script>, ou ser chamado de fora do
HTML, <script src="nome.js">...</script>, através de uma arquivo
cuja a extensão, por convenção, é .js
▸ Hoje temos o type="module" que define módulos a serem usados em
javascript: <script type="module" src="nome.mjs">...</script>

▸ Em aplicações cuja Engine Javascript, está fora de um

navegador, os arquivos .js são chamados sem a necessidade de
haver um HTML
Módulos
Os módulos permitem:

1.Encapsulamento: As funcionalidades de um módulo são privadas por

padrão, a menos que sejam explicitamente exportadas para serem usadas
por outros módulos.

2.Reutilização: As funcionalidades de um módulo podem ser importadas e

usadas em outros módulos, permitindo reutilização de código e
modularidade.

3.Organização: O código pode ser dividido em vários arquivos, cada um

contendo um módulo específico, facilitando a organização e a manutenção
do projeto.

4.Dependências explícitas: Os módulos especificam explicitamente suas

dependências, permitindo que as ferramentas de construção (build tools)
resolvam e gerenciem as dependências automaticamente.
Módulos em JS
▸ Os módulos em JavaScript oferecem uma maneira mais
estruturada e modular de organizar o código, promovendo a
reutilização e a manutenção do mesmo. Eles são amplamente
suportados nos navegadores modernos e também podem ser
usados em ambientes Node.js e em várias ferramentas de
construção (build tools) JavaScript.
Exemplo de uso de módulos

// Módulo: math.js

export function soma(a, b) {

return a + b;

// Módulo: main.js

import { soma } from 'math.js';

console.log(soma(2, 3)); // Saída: 5

Exemplo 2: Módulos

<!DOCTYPE html>

<html>

<head>

<title>Exemplo de Uso de Módulos</title>

<script type="module" src="app.js"></script>

</head>

<body>

<h1>Exemplo de Uso de Módulos</h1>

<div id="resultado"></div>

</body>

</html>
Exemplo 2 (cont)
//calculadora.js

export function soma(a, b) {

return a + b;

export function subtracao(a, b) {

return a - b;

}
 Exemplo 2 (cont)
// app.js }

import { soma, subtracao } from // Chamada das funções de soma e

'./calculadora.js'; subtração

const resultadoSoma = soma(2, 3);

// Função para exibir o resultado no exibirResultado(resultadoSoma); // Exibe "O

elemento HTML resultado é: 5"

function exibirResultado(resultado) {

const resultadoElement = const resultadoSubtracao = subtracao(5, 2);

document.getElementById('resultado');
exibirResultado(resultadoSubtracao); //
resultadoElement.textContent = `O Exibe "O resultado é: 3"
resultado é: ${resultado}`;
Exercício 0
▸ Utilizando módulos js, faça uma página html em que, através de um
formulário, o usuário deve indicar dois valores numéricos, além de indicar
qual a operação deseja produzir (soma ou subtração). Mostre o resultado
desta operação.
Pausa para meditação !!!
▸ Já ouviu falar de listeners?

▸ O que são?

▸ Como criá-los?
Listeners
▸ Listeners são usados para monitorar eventos que ocorrem em
elementos HTML, como cliques em botões, movimentos do
mouse, digitação em campos de formulário, entre outros. Assim
esses eventos podem ser detectados e tratados por meio do uso
de listeners.

▸ Os listeners são muito úteis para criar interatividade em

aplicações web, permitindo que você responda a ações do
usuário de maneira dinâmica e personalizada

▸ Os listeners podem ser adicionados a vários tipos de eventos,

como 'click', 'mouseover', 'keydown', 'submit', entre outros.
Principais eventos mapeados por listeners
1.Eventos de Mouse:
1.click: Ocorre quando um elemento é clicado.

2.mouseover: Ocorre quando o ponteiro do mouse é movido sobre um elemento.

3.mouseout: Ocorre quando o ponteiro do mouse é movido para fora de um elemento.

4.mousemove: Ocorre quando o ponteiro do mouse é movido dentro de um elemento.

2.Eventos de Teclado:
1.keydown: Ocorre quando uma tecla do teclado é pressionada.

2.keyup: Ocorre quando uma tecla do teclado é liberada.

3.keypress: Ocorre quando uma tecla do teclado é pressionada e liberada.

Principais eventos utilizados em JS

1.Eventos de Formulário:
1.submit: Ocorre quando um formulário é enviado.

2.input: Ocorre quando o valor de um campo de entrada é alterado.

3.change: Ocorre quando o valor de um campo de entrada é alterado e o foco é

perdido.

2.Eventos de Janela:
1.load: Ocorre quando a página é completamente carregada.

2.resize: Ocorre quando a janela do navegador é redimensionada.

3.scroll: Ocorre quando a barra de rolagem é movida.

Principais eventos utilizados em JS

1.Eventos de Elementos HTML:

1.focus: Ocorre quando um elemento ganha foco.

2.blur: Ocorre quando um elemento perde o foco.

3.change: Ocorre quando o valor de um elemento é alterado.

4.mouseenter: Ocorre quando o ponteiro do mouse entra em um elemento.

5.mouseleave: Ocorre quando o ponteiro do mouse sai de um elemento.

Listeners (com função anônima)

// Seleciona o elemento do botão pelo ID

const meuBotao = document.getElementById('meu-botao');

// Adiciona um listener de clique ao botão

meuBotao.addEventListener('click', function() {

console.log('O botão foi clicado!');

});
Listeners (com função nomeada)

// Função a ser executada quando o botão for clicado

function cliqueNoBotao() {

console.log('O botão foi clicado!');

// Adiciona um listener de clique ao botão

meuBotao.addEventListener('click', cliqueNoBotao);
Exemplo de uso de listeners
<body>
<f or m i d=" f or m- submi t " >
<h1>Exempl o de Li st ener s</ h1>
<i nput t ype=" t ext " i d=" i nput -
t ecl ado2" name=" nome"
<but t on i d=" bot ao" >Cl i que pl acehol der =" Di gi t e seu nome" >
aqui </ but t on>
<but t on
t ype=" submi t " >Envi ar </ but t on>
<di v i d=" di v- mouseover " >Passe
o mouse aqui </ di v> </ f or m>

</ body>
<i nput t ype=" t ext " i d=" i nput -
t ecl ado" >
▸ <scr i pt > const i nput Tecl ado2 =
document . get El ement ByI d( ' i nput - t ecl ado2' ) ;
/ / Li st ener par a event o de cl i que
i nput Tecl ado2. addEvent Li st ener ( ' keyup' ,
const bot ao = document . get El ement ByI d( ' bot ao' ) ; f unct i on( event ) {
bot ao. addEvent Li st ener ( ' cl i ck' , f unct i on( ) { consol e. l og( ' Tecl a l i ber ada: ' , event . key) ;
consol e. l og( ' Bot ão cl i cado' ) ; }) ;

}) ; / / Li st ener par a event o de submi t

const f or mSubmi t = document . get El ement ByI d( ' f or m-

/ / Li st ener par a event o de mouseover submi t ' ) ;
const di vMouseOver = f or mSubmi t . addEvent Li st ener ( ' submi t ' ,
document . get El ement ByI d( ' di v- mouseover ' ) ; f unct i on( event ) {

di vMouseOver . addEvent Li st ener ( ' mouseover ' , event . pr event Def aul t ( ) ; / / I mpede o envi o do
f unct i on( ) { f or mul ár i o
consol e. l og( ' Mouse passou sobr e a di v' ) ; consol e. l og( ' For mul ár i o envi ado' ) ;
}) ; }) ;

/ / Li st ener par a event o de t ecl ado / / Li st ener par a event o de r esi ze da j anel a

const i nput Tecl ado = wi ndow. addEvent Li st ener ( ' r esi ze' , f unct i on( ) {
document . get El ement ByI d( ' i nput - t ecl ado' ) ;
consol e. l og( ' J anel a r edi mensi onada' ) ;
i nput Tecl ado. addEvent Li st ener ( ' keydown' ,
f unct i on( event ) { }) ;

consol e. l og( ' Tecl a pr essi onada: ' , event . key) ; </ scr i pt >

}) ;

/ / Li st ener par a event o de t ecl ado

Observação 1
▸ Ao usar addEventListener, você deseja associar a função especificada com o
evento em questão, para que ela seja chamada quando o evento ocorrer. A
função é tratada como um callback (retorno de chamada) que será
executado posteriormente, quando o evento for acionado.

▸ Dado o exemplo a seguir:

// Exemplo sem parênteses

elemento.addEventListener('click', minhaFuncao);

// Exemplo com parênteses

elemento.addEventListener('click', minhaFuncao());

O exemplo sem parênteses só chamará a função minhaFuncao se o evento de click

for executado, ou seja, atua como um callback.

Já no exemplo com parêteses, a função será executada mesmo se o evento não

tiver sido disparado. É seguido neste caso o fluxo de execução do interpretador
javascript. Quando chegar Nessa linha, será executada a despeito do evento ter
ocorrido ou não.
Observação 2
▸ Dado o seguinte exemplo:

elemento.addEventListener('click', function(event) {

console.log('Tipo de evento:', event.type);

console.log('Elemento de destino:', event.target);

});

Ao declarar um parâmetro event no manipulador de eventos, você

está permitindo que a função tenha acesso aos detalhes e
informações sobre o evento que ocorreu, o que pode ser útil para
realizar ações com base nesses dados.

Nesse exemplo, estamos adicionando um manipulador de eventos

de clique a um elemento. A função anônima passada para o
addEventListener tem um parâmetro chamado event. Dentro da
função, podemos acessar as propriedades do objeto event, como
event.type para obter o tipo de evento e event.target para obter o
elemento de destino.
Observação 2 (complemento)
O caso discutido anteriormente pode também ser observado da seguinte forma:

function minhaFuncao() {

// Acessando a propriedade 'type' do objeto 'event'

console.log('Tipo de evento:', event.type);

elemento.addEventListener('click', minhaFuncao);

▸ Quando o evento de clique ocorre, o JavaScript chama a função

minhaFuncao, mas dessa vez, automaticamente passa o objeto
event como argumento, mesmo que não tenhamos declarado
explicitamente o parâmetro event na definição da função.

▸ Isso ocorre porque, internamente, o JavaScript trata a função

associada ao manipulador de eventos como uma função que espera
receber o objeto event como parâmetro. Mesmo que não tenhamos
declarado o parâmetro event na função, ele será passado
automaticamente para a função no momento da execução.
 Observação 3
▸ Se houver a necessidade de passar parâmetros para a função que está no manipulador de
eventos, você pode utilizar uma função anônima ou uma arrow function para envolver a
função do manipulador e em seguida passar os parâmetros desejados.

▸ Exemplo com função anônima:

function minhaFuncao(param1, param2) {

console.log('Parâmetro 1:', param1);

console.log('Parâmetro 2:', param2);

var parametro1 = 'Hello';

var parametro2 = 'World';

elemento.addEventListener('click', function() {

minhaFuncao(parametro1, parametro2);

▸ });
Observação 3 (continuação)

Exemplo com arrow function:

function minhaFuncao(param1, param2) {

console.log('Parâmetro 1:', param1);

console.log('Parâmetro 2:', param2);

const parametro1 = 'Hello';

const parametro2 = 'World';

elemento.addEventListener('click', () => {

minhaFuncao(parametro1, parametro2);

});
Concluindo
Se você usar uma arrow function com (parametro1, parametro2) => { ... }
como o manipulador de eventos, você está definindo uma função que
espera receber dois parâmetros parametro1 e parametro2. Essa função
será executada imediatamente, independentemente do evento ter
ocorrido ou não

Nesse caso, a função que você passou não está atuando como um
manipulador de eventos, mas sim como uma função que será
executada imediatamente. A execução ocorrerá no momento em que
o código alcançar essa parte do código, sem depender do evento.

Se você deseja que a função seja executada apenas quando o evento

ocorrer, você precisa usar a sintaxe correta para um manipulador de
eventos. Você deverá omitir os parênteses e declarar a arrow function
sem parâmetros, como no exemplo anterior:

elemento.addEventListener('click', () => {

minhaFuncao(parametro1, parametro2);

});
JAVASCRIPT IN A NUTSHELL

LAÇOS
▸ O Javascript possui três estruturas de laços:
▸ while(condição){...} , executa se condição===true

▸ do{...}while(condição), entra a primeira vez no laço e testa se condição===true

▸ for(;;){...}
for(inicialização do contador; condição de
parada; modificação de valor do contador){...}
▸ Onde condição deve retornar um valor booleano
JAVASCRIPT IN A NUTSHELL

EXEMPLOS DE LAÇOS

Exemplo de while

Exemplo de do...while()

Exemplo de for
Exercício 1
▸ Solicite um número do usuário e, a partir dele, realize uma contagem
regressiva
Solução do Exercício 1

// Este exercício irá realizar uma favor, insira um número inteiro

contagem regressiva a partir de um positivo.");
número fornecido pelo usuário.
} else {

// Iniciar a contagem regressiva

// Solicitar um número ao usuário
while (numero >= 0) {
let numero = parseInt(prompt("Digite
um número inteiro positivo:")); console.log(numero);

numero--;

// Validar se o número é válido }

if (isNaN(numero) || numero <= 0) { }

console.log("Número inválido. Por

Exercício 2
▸ Faça um código em que solicita do usuário um número. O programa
ficará solicitando sempre outro número, até que o usuário insira um valor
negativo (condição de parada). Ao término, deverá ser exibido o valor do
somatório de números positivos digitado.
Resolução do Exercício 2
// Este exercício irá solicitar ao usuário que insira
números positivos e calculará a soma desses
números até que o usuário insira um número // Verificar se o número é positivo ou negativo
negativo.
if (numero >= 0) {

soma += numero; // Adicionar o número à soma

// Variáveis de controle
} else {
let soma = 0;
break; // Encerrar o loop caso o número seja
let numero; negativo

// Solicitar números ao usuário até que um número }

negativo seja inserido

while (true) {
console.log("A soma dos números positivos
// Solicitar um número ao usuário inseridos é:", soma);

numero = parseInt(prompt("Digite um número

positivo (ou um número negativo para encerrar):"));
JAVASCRIPT IN A NUTSHELL

LAÇOS
▸ Uma diretiva bem interessante usada no Javascript é o continue. Ele
nos permite interromper uma dada iteração de um laço. Um
exemplo clássico é um contador de números ímpares (ver abaixo)
▸ Toda vez que a continue é chamada, aquela iteração será
descartada (parada) e se passará para a próxima

No exemplo acima, toda vez que i for par, a iteração é parada e se passa para a
próxima.
Exercício 3
▸ Crie um programa que imprima no console todos os números pares entre
1 e 20.
Resolução do Exercício 3
// Este exercício irá imprimir todos os números pares de 1 a 20 utilizando o laço for.

// Utilizando o laço for para iterar de 1 a 20

for (let i = 1; i <= 20; i++) {

// Verificar se o número é par

if (i % 2 === 0) {

console.log(i);

}
Exercício 4
▸ Calcule o fatorial de um número.
Resolução do Exercício 4
function calcularFatorial(numero) { const numero = parseInt(prompt("Informe um
número:"));
if (numero === 0) {
if (isNaN(numero) || numero < 0) {
return 1; // O fatorial de 0 é igual a 1
console.log("Valor inválido. Por favor, informe
} um número válido.");

let fatorial = 1; } else {

for (let i = 1; i <= numero; i++) { const resultado = calcularFatorial(numero);
fatorial *= i; console.log(`O fatorial de ${numero} é igual a
${resultado}.`);
}
}
return fatorial;

}
JAVASCRIPT IN A NUTSHELL

ESTRUTURAS DE DECISÃO
▸ O Javascript possui três estruturas básicas de
decisão:
▸ if(condição){...}else if(condição){...}else{...}

▸ condição ? valorA:valorB. Retorna valorA se a condição for true e

valorB, se for false

▸ switch(condição){case valor: ...;break;case

valor: ...;break;...default: ...}
▸ Onde condição deve retornar um valor booleano
JAVASCRIPT IN A NUTSHELL

EXEMPLOS DE ESTRUTURAS DE DECISÃO

Exemplo de if

Exemplo do operador ?
JAVASCRIPT IN A NUTSHELL

EXEMPLOS DE ESTRUTURAS DE DECISÃO

Estrutura do switch
Funções

● Funções correspondem a blocos de construções primárias

● Permitem o gerenciamento da complexidade do programa a partir da
organização e agrupamento de operações, sendo executadas sob uma
chamada à um nome (nome da função)
● Funções são uma forma de criar bocos de código (módulos) que
podem ser reutilizados ao longo do código.
● Funções aumentam a escalabilidade
● Quando em um programa se verifica um trecho de código que se
repete, este é um possível caso de trazer o código para uma função
JAVASCRIPT IN A NUTSHELL

FUNÇÕES (FUNCTION EXPRESSION)

▸ Uma função é um trecho de código que pode ser
chamado diversas vezes e que retornar um valor
▸ Em Javascript a forma tradicional de definir uma
função é usando a palavra reservada function. Exemplo,
function subtrai(a,b){...}

▸ Para que a função possa retornar um determinado

valor, é usada a palavra return, dentro do bloco da
função
JAVASCRIPT IN A NUTSHELL

FUNÇÕES
▸ Para chamar uma função, basta usar seu nome seguido de ().
Exemplo, subtrai(a,b).
▸ Uma função sem nome é chamada Anônima. Exemplo: function (a,b)
{...}

Exemplo de uma função que mostra o nome e um

texto, passados como parâmetro
JAVASCRIPT IN A NUTSHELL

EXEMPLOS DE FUNÇÕES

Exemplo de função que soma dois números e

usa return para entregar o valor

Exemplo de uso de uma função anônima

JAVASCRIPT IN A NUTSHELL

OBSERVAÇÃO
▸ Uma função pode possuir um nome muito pequeno, de um só caracter

▸ Se você verificar o biblioteca jQuery, muito utilizada por programadores

para a manipulação e tratamento de eventos, ela usa os nomes $() e _()

Exemplo de uma função que mostra o nome e um

texto, passados como parâmetro
Funções

● Em p5.js há as funções padrões setup() e draw()

● Há um grupo de outras funções pré-definidas na biblioteca
○ Ex.: ellipse() background() etc.
● É possível, também, criar suas próprias funções
Criando funções

● Para criar ou declarar uma nova função, utiliza-se a palavra-chave

function
○ Ex.:
function functionName() {
// function body
}

Para funções que requerem a entrada de dados de usuários, trabalha-

se com parâmetros dentro dos parênteses.

function circle(x, y, diameter) {

ellipse(x, y, diameter, diameter);
}
Declaração de uma função x Chamar uma função

● Declarando uma função:

function myFunction() {
}

Chamando uma função:

myFunction();

Obs.: em p5.js não é necessário chamar as funções setup() e draw().

Exemplo de função própria

function setup() {
createCanvas(800, 300);
sayHello();
}
function draw() {
background(220);
}
function sayHello() {
var message = 'Hello World!';
console.log(message);
}
console.log(message); // this line will throw an error
Exemplo de passagem de valor a uma função

Funções podem trabalhar sem inputs, com um único input ou com múltiplos inputs.

function setup() {
createCanvas(800, 300);
}
function draw() {
background(1, 75, 100);
squared(10);
}
function squared(num) {
fill(237, 34, 93);
textSize(60);
textAlign(CENTER, CENTER);
text ('O quadrado de ' + num + ' é: ',400,80);
text(num * num, width/2, height/2);
}
Retornando um valor

● Elas podem retornar um resultado(valor) ou não.

● A palavra-chave return é utilizada nessas situações.
○ return result;

● Ex.1:
○ Crie uma função para retornar o fatorial de um número. Passe um número como
parâmetro para esta função.
● Ex.2:
○ Crie uma função para retornar o quadrado de um número. Passe um número
como parâmetro para esta função.
Palavra chave return
function setup() {
createCanvas(800, 300);
}
function draw() {
background(1, 75, 100);
var x = squared(10);
console.log(x);
}
function squared(num) {
fill(237, 34, 93);
textSize(60);
textAlign(CENTER, CENTER);
var result = num * num;
text(result, width/2, height/2);
// return the value of the result from the function
return result;
Funções em Notação Literal

1. Declaração de Função:
function reflect(value) {
return value;
}

2. Expressão de Função:
var reflect = function(value){
return value;
};
Execução de função

var result = add(5, 5);

function add(num1, num2) {
return num1 + num2;
} //rodará normalmente; hoisted.
console.log(result);//Retornará 10

// Expressão de função não suporta hoisting, logo o código abaixo gerará ERRO
var result = add(5, 5);
var add = function(num1, num2) {
return num1 + num2;
};
console.log(result);

Obs.: para evitar complicações, recomenda-se que apenas se utilize uma função após
declará-la.
Funções como Valores

● Uma função pode ser trabalhada:

○ Em atribuição a uma variável;
○ Em adição à objetos;
○ Como parâmetros de outras funções;
○ Como retorno de outras funções.

(1) function sayHi() {

console.log("Hi!");
}
sayHi(); // outputs "Hi!"
(2) let sayHi2 = sayHi;
sayHi2(); // outputs "Hi!"
Funções como valores:
Atribuição a uma variável

// Função como valor atribuído a uma variável

const saudacao = function() {
console.log('Olá, mundo!');
};
// Chamando a função através da variável
saudacao(); // Saída: Olá, mundo!
Funções como valores:
Adicionada a objetos

// Função como valor em um objeto

const objeto = {
nome: 'Exemplo',
executar: function() {
console.log('Função sendo executada dentro de um objeto.');
}
};

// Chamando a função dentro do objeto

objeto.executar(); // Saída: Função sendo executada dentro de um objeto.
Funções como valores:
Parâmetros de outras funções

// Função como parâmetro de outra função

function somar(a, b) {
return a + b;
}

function calcular(operacao, a, b) {
return operacao(a, b);
}

// Chamando a função calcular com a função somar como parâmetro

const resultado = calcular(somar, 2, 3);
console.log(resultado); // Saída: 5
Funções como valores:
Retorno de outras funções

// Função retornando outra função

function criarMultiplicador(n) {
return function(x) {
return x * n;
};
}

// Criando uma função de multiplicação por 5

const multiplicarPor5 = criarMultiplicador(5);

// Chamando a função multiplicarPor5

const resultado = multiplicarPor5(4);
console.log(resultado); // Saída: 20
Utilizando uma função construtora p/ a criação de objetos em JS

As funções construtoras são usadas para criar um molde a partir do qual

você pode criar vários objetos. Você pode definir propriedades e métodos
dentro da função construtora usando a palavra-chave this. Aqui está um
exemplo:

// Definindo uma função construtora

function ObjetoConstrutor(propriedade1, propriedade2) {
this.propriedade1 = propriedade1;
this.propriedade2 = propriedade2;

this.metodo = function() {
// código do método
};
}
// Criando um objeto utilizando a função construtora
const objetoConstrutor = new ObjetoConstrutor(valor1, valor2);
JAVASCRIPT IN A NUTSHELL

FUNÇÕES DO TIPO ARROW FUNCTION

▸ Uma forma de definir funções em Javascript tanto anônimas quanto
manipuladas através de variáveis é usando a fórmula (params)=>{...}
▸ Essas funções se chamam Arrow Function.

Forma mais compacta de escrever uma função. Muito utilizada

como callback
Exemplo de Arrow Function

// Arrow function que retorna o quadrado de um número

const square = (num) => {

return num * num;

};

console.log(square(5)); // Output: 25
JAVASCRIPT IN A NUTSHELL

CALLBACK
▸ Função que vai tratar uma evento assíncrono.

▸ Essas funções se chamam Arrow Function.

Forma mais compacta de escrever uma função. Muito utilizada

como callback
CALLBACK

Uma função de callback é basicamente uma função que é passada

como argumento para outra função e é chamada de volta
(executada) quando um determinado evento ocorre ou quando
uma tarefa assíncrona é concluída.
Exemplo 1 de Callback
function greet(name, callback) {

console.log("Olá, " + name + "!");

callback();

function sayGoodbye() {

console.log("Tchau! Até logo.");

greet("João", sayGoodbye);
Exemplo 2: Uso assíncrono do Callback
function asyncOperation(callback) { console.error("Ocorreu um erro:", error);

// Simulando uma operação assíncrona com } else {

setTimeout
console.log("Resultado da operação:", result);
setTimeout(function() {
}
const result = 42; // Resultado da operação
assíncrona }

callback(null, result); // Chamando o callback

com o resultado
console.log("Iniciando operação assíncrona...");
}, 2000);

}
asyncOperation(handleResult);

function handleResult(error, result) {

console.log("Operação assíncrona em
if (error) { andamento...");
Exercício 1

● Escreva uma função que role dois dados aleatoriamente.

Exercício 2

● Crie uma função que gere 3 agrupamentos de elipses, em que cada

uma é inscrita em outra. Assim, são desenhadas n elipses, onde n
corresponde ao número de elipses.
○ Ex.: function drawTarget(xloc, yloc, size, num) {}
JAVASCRIPT IN A NUTSHELL

ENTRADA E SAÍDA NO JAVASCRIPT

▸ Embora possamos usar o objeto Console que nos
permite escrever no console do Javascript (pode ser o
console do navegador, pode ser no terminal textual
do Linux ou no Powershell ou cmd do Windows), a
entrada e saída no Javascript está muito ligada às
páginas Web
▸ Dessa forma, podemos afirmar que a forma mais usada
de entrada e saída no Javascript seja através de uma
página HTML
JAVASCRIPT IN A NUTSHELL

ENTRADA E SAÍDA NO JAVASCRIPT

▸ Uma função que permite a entrada de dados através de
uma Janela de Diálogo é a prompt()
▸ let result = prompt(“Digite um Valor inteiro”,”1”);

▸ Outra forma de usar é através da Tag <dialog> do

HMTL5
▸ Exemplo do MDN

▸ Outra forma é usando o HTML através do DOM, sem

necessariamente uma tag particular como a <dialog>
Exemplo de Modal
<! DOCTYPE ht ml > </ di al og>
/ / Função par a abr i r o
<ht ml > di ál ogo
<scr i pt >
<head> f unct i on openDi al og( ) {
/ / Obt ém o el ement o de
<t i t l e>Exempl o de di ál ogo myDi al og. showModal ( ) ;
di al og</ t i t l e>
const myDi al og = }
</ head> document . get El ement ByI d( ' m
yDi al og' ) ;
<body> / / Função par a f echar o
di ál ogo
<h1>Exempl o de di al og</ h1> / / Obt ém o bot ão de abr i r
o di ál ogo f unct i on cl oseDi al og( ) {

<but t on const openDi al ogBt n = const val ue =

oncl i ck=" openDi al og( ) " >Abr document . quer ySel ect or ( ' bu i nput Val ue. val ue;
i r Di ál ogo</ but t on> t t on' ) ;
consol e. l og( ' Val or
i nser i do: ' , val ue) ;
<di al og i d=" myDi al og" > / / Obt ém o bot ão " OK" e o
campo de ent r ada myDi al og. cl ose( ) ;
<h2>Di gi t e um val or : </ h2>
const submi t Bt n = }
<i nput t ype=" t ext "
document . quer ySel ect or ( ' #m
i d=" i nput Val ue" r equi r ed> </ scr i pt >
yDi al og but t on' ) ;
<but t on </ body>
const i nput Val ue =
oncl i ck=" cl oseDi al og( ) " >OK
document . get El ement ByI d( ' i </ ht ml >
</ but t on>
JAVASCRIPT IN A NUTSHELL

ENTRADA E SAÍDA NO JAVASCRIPT

▸ Para que o navegador possa manipular cada
elemento de uma página HTML na forma de um
objeto (um trecho de código auto-contido), foi criado
o DOM
▸ Através desses objetos podemos manipular a
entradas de dados e a saída, com o Javascript
▸ Duas formas simples de relacionar um Objeto DOM
com uma variável em Javascript é através das
funções getElementById() e getElementByClass().
Embora outros métodos possam ser usados.
JAVASCRIPT IN A NUTSHELL

O QUE É O DOM?
▸ Document Object Model: interface de programação para documentos XML e HTML
▸ O HTML DOM é um padrão para como obter, alterar, adicionar ou excluir
elementos HTML.
▸ A página HTML é convertida para uma árvore de objetos DOM pelo Navegador

DOCUMENT

HTML

HEAD BODY
TITLE H1

STYLE
P P
IMG
…
SCRIPT …

Árvore DOM Básica

JAVASCRIPT IN A NUTSHELL

O QUE É O DOM?
▸ Document Object Model: interface de programação para documentos
XML e HTML
▸ A página HTML é convertida para uma árvore de objetos DOM pelo Navegador

NAME DIV CONTAINER

DOM TEXT DIV NAV
OBJE
CT ATTRIBUTES
EVENTS
ONCLICK
DIV CONTENT
ONMOUSEOVER
ONKEYPRESSED
…
Exemplos de DIV com ID
O que todo objeto DOM deve ter. diferentes: Container, Nav e
Content
O que é o DOM?
▸
O HTML DOM é um modelo de objeto e interface de
programação padrão para HTML. Ele define:

• 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

▸ Em outras palavras: o HTML DOM é um padrão para como obter,

alterar, adicionar ou excluir elementos HTML.
Métodos e Propriedades DOM
▸ Métodos são ações a serem executadas sobre elementos HTML

▸ Propriedades são valores de elementos HTML

▸ Obs.: Para o DOM, todos os elementos HTML são objetos.

▸ Propriedades e métodos de cada objeto correspondem à interface de

programação.
Métodos e Propriedades DOM
<html>

<body>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>
Objeto document
▸ Representa a página WEB

▸ Para acessar um elemento html, inicie referenciando o objeto document

Mudando o valor de elementos
Adicionando e deletando elementos
Encontrando elementos pelo nome da tag
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id=“demo"></p>

<script>

const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is:

' + element[0].innerHTML;

</script>

</body>
Encontrando elementos pelo nome da tag
<!DOCTYPE html> <button onclick="showText()">Mostrar Texto do Primeiro
<html lang="pt-BR"> Parágrafo</button>
<script>
<head>
function showText() {
<meta charset="UTF-8">
// Seleciona todos os elementos <p>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> const element =
document.getElementsByTagName("p");
<title>Exemplo de getElementsByTagName com
Botão</title> // Define o texto do parágrafo com id="demo"
</head> document.getElementById("demo").innerHTML = 'The
text in first paragraph (index 0) is: ' + element[0].innerHTML;
<body>
}
<h2>JavaScript HTML DOM</h2>
</script>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method.</p> </body>
<p id="demo"></p> </html>

<!-- Botão para acionar a exibição do texto -->

Exemplo de elementos enontrados pela tag name(1)

<body> <script>

// Encontrar elementos pelo nome da tag

<!-- Elementos HTML de Exemplo --> var paragrafos = document.getElementsByTagName("p");

<div id="minhaDiv">

<p>Este é um parágrafo dentro de uma div.</p> // Iterar sobre os parágrafos encontrados

<ul> for (var i = 0; i < paragrafos.length; i++) {

<li>Item 1</li> // Modificar o conteúdo dos parágrafos encontrados

<li>Item 2</li> paragrafos[i].innerHTML = "Parágrafo modificado!";

<li>Item 3</li> }

</ul> </script>

</div>

<p>Este é um parágrafo fora de uma div.</p> </body>

Exemplo de elementos enontrados pela tag name(1) –Mudança condicional

<body>

<!-- Elementos HTML de Exemplo --> <script>

<div id="minhaDiv"> function modificarParagrafos() {

<p>Este é um parágrafo dentro de uma div.</p> // Encontrar elementos pelo nome da tag

<ul> var paragrafos = document.getElementsByTagName("p");

<li>Item 1</li> // Iterar sobre os parágrafos encontrados

<li>Item 2</li> for (var i = 0; i < paragrafos.length; i++) {

<li>Item 3</li> // Modificar o conteúdo dos parágrafos encontrados

</ul> paragrafos[i].innerHTML = "Parágrafo modificado!";

</div> }

<p>Este é um parágrafo fora de uma div.</p> }

<!-- Botão para acionar a modificação dos parágrafos --> </script>

<button onclick="modificarParagrafos()">Modificar Parágrafos</button> </body>

Exemplo de elementos enontrados pela tag name(2)

<!DOCTYPE html>

<html> <script>

<body> const x = document.getElementById("main");

const y = x.getElementsByTagName("p");

<h2>JavaScript HTML DOM</h2>

document.getElementById("demo").innerHTML =

<div id="main"> 'The first paragraph (index 0) inside "main" is: ' +
y[0].innerHTML;
<p>Finding HTML Elements by Tag Name</p>

<p>This example demonstrates the

<b>getElementsByTagName</b> method.</p> </script>

</div>

</body>

<p id="demo"></p> </html>

Exemplo de elementos enontrados pelo nome da classe

<body>

<script>

<h2>JavaScript HTML DOM</h2> const x =

document.getElementsByClassName("intro");

document.getElementById("demo").innerHTML =
<p>Finding HTML Elements by Class Name.</p>
'The first paragraph (index 0) with class="intro"
<p class="intro">Hello World!</p> is: ' + x[0].innerHTML;
<p class="intro">This example demonstrates the </script>
<b>getElementsByClassName</b> method.</p>

</body>
<p id="demo"></p>
Encontrando elementos usando seletores CSS
<!DOCTYPE html> <p id="demo"></p>

<html>

<body> <script>

const x = document.querySelectorAll("p.intro");

<h2>JavaScript HTML DOM</h2> document.getElementById("demo").innerHTML =

'The first paragraph (index 0) with class="intro" is: '

+ x[0].innerHTML;
<p>Finding HTML Elements by Query Selector</p>
</script>
<p class="intro">Hello World!.</p>

<p class="intro">This example demonstrates the

<b>querySelectorAll</b> method.</p> </body>

</html>
Alterando o valor de um atributo
▸ 1- innerHTML: ▸ 4- setAttribute

▸ Altera o HTML interno de um elemento. ▸ Modifica ou adiciona um atributo em um elemento

▸ document.getElementById(id).innerHTML = novoConteudo ▸ document.getElementById(id).setAttribute('atributo', novoConteudo);

▸ 2- textContent

▸ Altera o texto interno de um elemento, ignorando HTML ▸ 5- propriedade do atributo direto: depende do tipo de
atributo que esteja tentando modificar. Por exemplo, para
▸ document.getElementById(id).textContent = novoConteudo; o atributo src de uma imagem:

▸ ▸ Altera diretamente o valor de um atributo específico, como src para

3- innerText
imagens.

▸ Similar a textContent, mas respeita a renderização CSS

▸ document.getElementById('minhaImagem').src =
'caminho/novo/imagem.jpg';
▸ document.getElementById(id).innerText = novoConteudo;
Exemplo de uso: innerText;textContent e innerHTML

▸ <div id="exemplo"> style="display: none;">Texto

oculto</p><p>Texto visível</p>"
▸ <p style="display: none;">Texto oculto</p>
▸ </script>
▸ <p>Texto visível</p>
▸ innerText: Só retorna o que é visível ao
▸ </div> usuário, respeitando o CSS ("Texto visível")
▸ console.log(document.getElementById('exemp ▸ textContent: Retorna todo o texto, incluindo o
lo').innerText); // Retorna "Texto visível" oculto ("Texto ocultoTexto visível").
▸ ▸ innerHTML: Retorna todo o HTML, incluindo
console.log(document.getElementById('exemp as tags (<p>, <div>, etc.).
lo').textContent); // Retorna "Texto ocultoTexto
visível"

▸
console.log(document.getElementById('exemp
lo').innerHTML); // Retorna "<p
Qual escolher?
▸ A escolha entre essas opções depende do tipo de elemento que você
está manipulando e do que você deseja realizar. Se você está lidando
com texto puro, textContent ou innerText são geralmente mais seguros
para evitar injeção de código (especialmente em situações em que o
conteúdo é dinâmico ou fornecido pelo usuário). Se estiver manipulando
atributos específicos, como src para imagens, você pode acessar
diretamente a propriedade do atributo. Se estiver lidando com HTML
estruturado, innerHTML é uma opção válida
JAVASCRIPT IN A NUTSHELL

OBSERVAÇÃO
▸ O identificador de uma Tag é um nome único atribuído à Tag através
do atributo id.
▸ Exemplo: <p id=“saida”> Texto do parágrafo </p>
▸ O identificador de classe de uma Tag permite identificar uma ou mais
tags diferentes através de um nome único, através do atributo class
▸ Exemplo:

▸ <div class=“observacao”> Conteúdo da DIV </div>

▸ <p class=“observacao”> Conteúdo do Parágrafo </p>
JAVASCRIPT IN A NUTSHELL

DOM e Eventos
▸ Outra forma de selecionar um objeto DOM é usando
os métodos querySelector(), querySelectorAll() e
matches().

▸ querySelector() retorna o primeiro elemento dado por

um identificador ou classe CSS fornecidos. Tanto o
identificador quanto a classe são chamados CSS Selectors).

retorna todos os elementos dados

▸ querySelectorAll()
por um identificador ou classe CSS fornecidos.
 JAVASCRIPT IN A NUTSHELL

EXEMPLOS
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');

for (let elem of elements) {

alert(elem.innerHTML); // "test", "passed"
}
</script>

<a href=“http://example.com/file.zip"> 1st link</a>

<a href=“http://ya.ru"> 2nd link </a>
<script>
let element = document.querySelector('a');

alert(element.innerHTML);

</script>
JAVASCRIPT IN A NUTSHELL

DOM e Eventos
▸ O funcionamento dos objetos
e códigos executados no
navegador, muitas vezes são
assíncronos

▸ Isso quer dizer que podem

ocorrer um evento a qualquer
momento, seja ele de mouse,
teclado, Drag-and-drop, etc

Código que liga variáveis a elementos do

DOM
JAVASCRIPT IN A NUTSHELL

DOM e Eventos
▸ A função addEventListener()
relacionada a um dado elemento da
página (ex.: form, button, paragraph,
div) permite ficar "escutando"se um
dado evento ocorreu e depois chamar
uma função para tratar esse evento.

▸ No código ao lado, a variável " event"

foi criada como ligação com o evento
gerado. Essa o valor dado a variável é
fornecido pela função
addEventListener() à função de
tratamento do evento (no caso, soma())

Função addEventListener()
JAVASCRIPT IN A NUTSHELL

DOM e Eventos

Ciclo de Captura (Capturing) e Ciclo de Borbulhamento (Bubbling). Fonte: MDN.

JAVASCRIPT IN A NUTSHELL

Vantagens deFluxo de Eventos e Bubbling

1. Delegação de eventos: O bubbling permite que você aproveite a
delegação de eventos. Em vez de atribuir manipuladores de eventos a
cada elemento individualmente, você pode atribuir um único manipulador
de evento a um elemento pai e deixar o bubbling lidar com os eventos dos
elementos filhos. Isso simplifica o código e melhora a eficiência,
especialmente quando você tem muitos elementos, melhorando a
organização e manutenção do código

2. Manipulação hierárquica: Com o fluxo de eventos, você pode manipular

eventos em diferentes níveis hierárquicos da árvore DOM. Você pode
capturar eventos em um elemento pai para executar ações gerais e, em
seguida, reagir a eventos mais específicos em elementos filhos. Isso
permite um controle granular sobre como os eventos são tratados em
diferentes partes da página.
JAVASCRIPT IN A NUTSHELL

Vantagens deFluxo de Eventos e Bubbling

3. Gerenciamento de eventos complexos: O fluxo de eventos e o bubbling
permitem que você lide com eventos complexos de forma mais elegante.
Por exemplo, você pode ter um elemento filho dentro de outro elemento
filho, e ambos têm manipuladores de eventos. O bubbling permite que
você acione o manipulador de evento do elemento filho primeiro e, em
seguida, o manipulador do elemento pai. Isso é útil quando você precisa
realizar ações específicas em cada elemento durante um evento.

4. Anulação do comportamento padrão: Com o preventDefault(), você pode

cancelar o comportamento padrão associado a um evento, como o
redirecionamento de um link ou o envio de um formulário. Isso permite
que você substitua o comportamento padrão por um comportamento
personalizado, dando mais controle sobre a interação do usuário.
JAVASCRIPT IN A NUTSHELL

DOM e Eventos
▸ Como o evento ocorre de forma
assíncrona e dentro de uma
estrutura de tratamento de eventos
chamada
Bubbling and capturing do
DOM
▸ A função
event.preventDefault(),
cancela o evento naquele dado nó
do DOM, mas permite que ele se
propague para os nós superiores,
mantendo o bubbling (propagação
do evento) dos eventos.
Função addEventListener()
Deixando mais claro as coisas
▸
preventDefault(): Cancela o comportamento padrão associado a um
evento. Por exemplo, evita que um link seja seguido ou que um
formulário seja enviado.

▸ stopPropagation(): Interrompe a propagação do evento, impedindo que

ele se mova além do elemento atual na fase de captura ou de bubbling.
JAVASCRIPT IN A NUTSHELL

DOM e Eventos
▸ Para Saber mais sobre a manipulação do DOM através do
Javascript veja o material os seguintes tópicos do tutorial
interativo javascript.info:
▸ DOM Tree

▸ Walking DOM

▸ Node Properties

▸ Modifying the Documents

▸ Introduction to events
JAVASCRIPT IN A NUTSHELL

OBSERVAÇÃO
▸ Outra forma de tratar os eventos de um dado
elemento HTML é usando os atributos
on*(onde * define o nome do evento, como
onclick, onmouseup, onmouseover)
▸ Nesse caso, a chamada para a função de
tratamento ficará escrita diretamente no
HTML: < p onclick="soma();">
▸ É prático de usar mas mistura muito
o código Javascript com o HTML e
tornará a leitura do código muito
difícil.

Fonte:
https://escolakids.uol.com.br/portugues/ponto-de-exclamaca
o.htm
Exercício 1
▸ Crie uma aplicação HTML/JS que insira e remova dinamicamente novos
registros em uma tabela.
Exercício 2
▸ Altere o programa anterior para que quando o usuário clicar em adicionar
registro seja solicitado ao usuário a entrada dos valores da nova linha
(utilize a instrução prompt).
Exercício 3
▸ Ainda baseado-se nos exemplos anteriores, crie, em cada linha, um
botão de edição. Quando acionado, deverá ser aberto um prompt para o
usuário alterar o valor de nome e sobrenome da linha da tabela.
TEXTO

O CÓDIGO QUE ACOMPANHA ESSE CURSO ESTÁ EM:

https://replit.com/@Wellingto
nSarme/html5cssjs?v=1

Javascript
Exercício

Faça uma calculadora que execute as operações Aritméticas básicas (+,-,*

e / ), colhendo dois números digitados em duas caixas de texto e
mostrando o resultado numa caixa de texto que não permite edição.
JAVASCRIPT IN A NUTSHELL

REFERÊNCIAS
▸ Life of a Pixel: fantástica apresentação de um membro da equipe do
Chromium sobre como o HTML é transformado em objetos gráficos na
tela do computador
▸ Life of a Script: palestra sobre o funcionamento da V8

▸ How Javascript Works: Under the Hood of the V8 Engine: artigo sobre a
arquitetura e funcionamento da V8
▸ Everything You Need To Know About Node.js Architecture : ótimo artigo de
Chintar For sobre a V8 e o Node.js
▸ Funções Anônimas Javascript: ótimo tutorial de uso de funções anônimas