Desenvolvimento de

Sistemas Web

Aula 03
Javascript
Versão 23.1.0

Prof. Fernando Tsuda

Objetivos
• Visão geral da linguagem Javascript
• Uso do Javascript para manipulação de páginas web (DOM) e
tratamento de eventos gerados pelos usuários
• Requisições assíncronas (AJAX)

Prof. Fernando Tsuda

Introdução
• Linguagem de script, interpretada, multiparadigma e cross-
plataforma;
• Atualmente segue o especificação ECMAScript;
• Versão atual: maior parte dos navegadores suporta ES6 (ou ES2015)
• Projetada para fácil integração em outros produtos e aplicações,
como os navegadores web;
• Atualmente, é possível executar aplicações em servidores usando
Javascript (ver Node.js) e aplicações desktop standalone (ver Electron,
NW.js)
• É chamado por alguns devs por "Vanilla Javascript" (não oficial)

Prof. Fernando Tsuda

 Stack Overflow Developers Survey 2022
Most Popular Technologies

2022 marks JavaScript’s tenth year in a

row as the most commonly used
programming language.

https://survey.stackoverflow.co/2022/

Prof. Fernando Tsuda

 ATENÇÃO

Javascript != Java
Prof. Fernando Tsuda
Características
• Sintaxe é case-sensitive – letras maiúsculas e minúsculas são
diferentes;
• Os tipos de dados das variáveis são definidos dinamicamente durante
a execução do programa (tipagem dinâmica).

Prof. Fernando Tsuda

Estruturas básicas programação
• Saída de dados
• Entrada de dados
• Variáveis
• Operações
• Condicionais
• Laços
• Arrays/Matrizes
• Funções

Prof. Fernando Tsuda

Estruturas básicas
• Declaração de variáveis
• var x → Modo usual, porém as variáveis podem ser afetadas fora do escopo
do bloco (ver elevação/hoisting)
• let y → Permite declarar variáveis válidas somente dentro do contexto do
bloco de código (ES2015)
• const z → Permite declarar valores constantes que não podem ser
redefinidos (ES2015)

Prof. Fernando Tsuda

var X let X const
var let const
Escopo global SIM NÃO NÃO
Escopo de bloco NÃO SIM SIM
Escopo de função SIM SIM SIM
Pode ser redefinido SIM SIM NÃO

Tabela baseada em http://www.constletvar.com/

Exemplos e mais detalhes em https://medium.com/@hdeodato/var-let-const-and-the-hoisting-thing-e32a5b11b491
Exemplos Codepen: https://codepen.io/ftsuda-senac/pen/drVvjB
Prof. Fernando Tsuda
Declaração de variáveis – tipagem dinâmica
let variavel1, variavel2;
variavel1 = 'valor string';
variavel2 = 2; // valor inteiro

Ex:
function mostrarMensagem(msg) {
let msgCompleto;
msgCompleto = 'Retorna a ' +
'mensagem ' + msg;
return msgCompleto;
}
Estruturas básicas – Condicionais e Laços
• if / else
• switch
• while
• do..while
• for Exemplos:
• for..in break/continue: https://codepen.io/ftsuda-senac/pen/wvojgGq
diferença for..in e for..of: https://codepen.io/ftsuda-senac/pen/bGdaaGz
• for..of
• break / continue
Operadores de comparação (ES2015)
Exemplos que retornam true
Operador Descrição
(var1 = 3 e var2 = 4)
3 == var1
Retorna verdadeiro caso os operandos sejam
Igual (==) '3' == var1
iguais independente do tipo do valor.
3 == '3'

Retorna verdadeiro caso os operandos não var1 != 4

Não igual (!=)
sejam iguais independente do tipo. var2 != '3'

Retorna verdadeiro caso os operandos sejam

Estritamente igual (===) 3 === var1
iguais e do mesmo tipo.

Retorna verdadeiro caso os operandos não var1 !== '3'

Estritamente não igual (!==)
sejam iguais e/ou não sejam do mesmo tipo. 3 !== '3'

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_operators#Operadores_de_compara%C3%A7%C3%A3o

Prof. Fernando Tsuda

Funções com parâmetros
function somar(a, b) {
return a + b;
}

function multiplicar(a, b) {
return a * b;
}
Outra forma de declarar funções
const somar = function(a, b) { // pode usar var ou let
return a + b;
}

const multiplicar = function(a, b) {

return a * b;
}

https://www.bryanbraun.com/2014/11/27/every-possible-way-to-define-a-javascript-function/
Outra forma de declarar funções
Arrow function
const somar = (a, b) => a + b // return implícito

const somar2 = (a, b) => {

return a + b
}

const multiplicar = (a, b) => a * b

Strings
• charAt() • slice()
• concat() • split()
• indexOf() • substr()
• lastIndexOf() • substring()
• match() • toLowerCase()
• replace() • toUpperCase()
• search() • trim()
Arrays
let lista = new Array();
lista[0] = 'texto 1';
lista[1] = 'texto 2';
lista[2] = 'texto 3';

let lista2 = ['texto 1', 'texto 2', 'texto 3']

Métodos/Propriedades de Arrays
• join()
• reverse() Referência do Arrray
https://developer.mozilla.org/pt-
• sort()
BR/docs/Web/JavaScript/Reference/Global_Objects/Array
• concat()
• slice()
• splice()
• push() / pop()
• unshift() / shift()
• forEach()
• map()
• length
Date
• var data = new Date(ano, mês, dia, • toDateString()
hora, minuto, segundo, milissegundo) • toLocaleDateString()
• getDate() / setDate() • toLocaleString() (data e hora)
• toISOString()
• getDay() / setDay()
• parse()
• getMonth() / setMonth()
• getFullYear() / setFullYear()
• getHours() / setHour()
• getMinutes() / setMinutes()
• getSeconds() / setSeconds()
• getMilliseconds() / setMilliseconds()
JSON – Javascript Object Notation

Prof. Fernando Tsuda

JSON – Javascript Object Notation
• parse() → Converte uma string em um objeto Javascript
• stringify() → Converte um objeto Javascript em uma string

Prof. Fernando Tsuda

 Estrutura de dados JSON Mês neste formato começa
em 0-Janeiro, 1-Fevereiro,
2-Março e assim por diante
let objProduto = {
nome: 'Bolo de chocolate',
dataValidade: new Date(2010, 3, 20), // 20 de abril de 2010
preco: 50.0,
ingredientes: ['Farinha', 'Açúcar', 'Ovo', 'Chocolate em pó']
}

let objProduto = JSON.parse(<string>) JSON.stringify(objProduto)

{
"nome": "Bolo de chocolate",
"dataValidade": "2010-04-20",
"preco": 50.0,
"ingredientes": ["Farinha", "Açúcar", "Ovo", "Chocolate em pó"]
}

Prof. Fernando Tsuda

Outros operadores importantes
• this → palavra-chave usada para que um determinado objeto
referencie a si próprio, porém seu comportamento pode ser diferente
dependendo do trecho do código em que for chamado (ver
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this)

• instanceof → Verifica se determinado objeto é instância de

determinado tipo/classe (ver https://developer.mozilla.org/pt-
BR/docs/Web/JavaScript/Reference/Operators/instanceof)

• typeof →Retorna o tipo/classe de um determinado objeto

Prof. Fernando Tsuda

Outros recursos da linguagem
• Orientação a objetos
• Modo "clássico" → https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects
• ES2015 → https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
• Expressões regulares (REGEX)
• try/catch/finally
• closures e IIFE (Immediately Invoked Function Expression)
• Promises / async e await
• import / export Exemplos Orientação a objetos
POO “clássico” - https://codepen.io/ftsuda-senac/pen/zYojNex
POO ES2015 - https://codepen.io/ftsuda-senac/pen/wvojgOX

Prof. Fernando Tsuda

Referências Javascript
• https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-
introduction_to_JavaScript

Prof. Fernando Tsuda

Utilização em interfaces web
• Manipulação do HTML DOM
• Tratamentos de eventos (cliques, botões, etc).
• Requisições HTTP assíncronas ao servidor (AJAX).
• Acesso as API dos recursos do HTML 5, tais como Geolocalização, local
storage, web workers, vídeo/áudio API, File API, etc.
• Desenvolvimento da lógica de aplicações mobile e binding com HTML para
execução conforme o evento executado.
• Em desuso:
• Validações de campos de formulários (ex: verificar se está preenchido, se possuí
determinado formato, texto placeholder, etc) → Usar novos recursos do HTML5
• Animações na página (ex: menus, mostrar ou esconder áreas da página, etc) → Dar
preferência ao uso do CSS3

Prof. Fernando Tsuda

Integração com HTML
3 Maneiras
1) Inline no elemento através dos atributos "on<evento>"
<a href="#" id="botao" onclick="alert('Teste')">Teste</a>

2) Bloco script HTML

<script type="text/javascript"> // código Javascript </script>

3) Importação de arquivo externo

<script type="text/javascript" src="arquivo.js"></script>

Prof. Fernando Tsuda

HTML DOM
• Elementos HTML são tratados como objetos, com atributos e
métodos
• Exemplo: Trocar informações da imagem
<img id="elementoImg" src="imagem1.jpg" alt="Texto 1">
...
let elImg = document.querySelector('#elementoImg');
elImg.src = 'imagemAlterada.jpg';
elImg.alt = 'Texto alterado';
 HTML DOM - Eventos
• Usar atributo "on<evento>" diretamente no elemento HTML
• Exemplos de eventos: onclick, onchange, onblur, etc
<button id="botao" onclick="alert('mensagem')">Botão</button>

• Associar com atributo "on<evento> no código Javascript Referência para o

let b1 = document.getElementById('botao'); elemento <button> do
b1.onclick = alert('mensagem'); DOM

• Usar o código <elemento>.addEventListener(<evento>, function() { ... });

let b2 = document.getElementById('botao');
b2.addEventListener('click', function() { alert('mensagem') });

Prof. Fernando Tsuda

Modelo de Objetos do Navegador (BOM)

window

document location history navigator screen console frames[]

location anchors[] forms[] images[] links[]

Prof. Fernando Tsuda

Objeto window
• document – Documento HTML apresentado.
• location – Refere-se a URL que a janela está apresentando.
• history – Armazena o histórico de navegação.
• navigator – Dados do navegador.
• screen – Dados da tela do dispositivo onde a janela está aberta
• frames – Array de frames apresentados na janela.
• parent – Referencia a janela pai, responsável pela abertura da janela atual.
• self, window - Referencia a própria janela.
• top – Se window estiver em um frame, referencia a janela raiz.

• alert(), confirm(), prompt()

• close()
• focus(), blur()
• print()
• setInterval(), clearInterval()
• setTimeout(), clearTimeout()
Objetos location e history
• window.location.href='http://www.uol.com.br’;
• window.history.back()
• history.forward()
• history.go(-1)

OBS: a referência a "window" pode ser omitida

Caixa de confirmação
function confirmarAcao(evento) {
let resposta = confirm("Deseja fazer isso?");
if (resposta === true) {
alert("Confirmado");
} else {
alert("Cancelado");
}
return resposta;
}
Caixa de entrada de texto
function obterNome() {
let nome = prompt("Digite seu nome");
if (nome !== null && nome !== "") {
alert("Ola" + nome + "!");
}
}

Exemplo alert, confirm e prompt em

https://codepen.io/ftsuda-senac/pen/MWypWaV
Objeto document (DOM)
• anchors[] – lista de âncoras no documento (link local)
• forms[] – lista de elementos <form> no documento
• images[] – lista de elementos <img> no documento
• links[] – lista de links no documento (link externo)
• location ou URL – URL do documento atual
• cookie – referencia ao cookie associado ao documento
Métodos DOM comuns
Obtenção de elementos do DOM
• querySelector(seletorCSS)
Seletor CSS usa a mesma sintaxe e regras dos seletores
• querySelector('div') válidos no CSS (tanto simples quanto compostos)
• querySelector('#cabecalho') Exemplos:
div → Seleciona todos os div
• querySelector('.linhapar') #cabecalho → Elemento HTML com id="cabecalho"
• querySelectorAll(seletorCSS) .linhapar → Elemento HTML com class="linhapar"

• getElementById('cabecalho')
• getElementsByTagName('div')
• getElementsByClassName('linhapar')
Exemplos
Seleção dos elementos e alteração das propriedades visuais
https://codepen.io/ftsuda-senac/pen/rRGyQr
https://codepen.io/ftsuda-senac/pen/MWgpNZL

Prof. Fernando Tsuda

Métodos DOM Comuns
Criação de novos elementos
• createElement() Exemplos em
https://codepen.io/ftsuda-senac/pen/PoqQqxz
• createTextNode() https://codepen.io/ftsuda-senac/pen/XWdpLvr
• appendChild()
• removeChild()
• parentNode
• childNodes
• getAttribute() / setAttribute() / removeAttribute()
• insertAdjacentHTML('beforebegin', 'HTML String');
• insertAdjacentHTML('afterend', 'HTML String');

Prof. Fernando Tsuda

Métodos DOM Comuns
Propriedades dos elementos
• innerHTML = 'HTML String';
• outerHTML = 'HTML String';
• classList
• .add
Exemplo classList em
• .remove
https://codepen.io/ftsuda-senac/pen/QWLpePV
• .contains
• .toggle
• style.*
• * pode ser qualquer propriedade do CSS em camelCase (ao invés do
kebab-case)
• background-color (CSS) → backgroundColor (JS)
• font-size (CSS) → fontSize(JS)
Eventos DOM comuns
• click, mousedown, mouseup
• mouseover, mouseout
• change, focus, blur
• submit, reset
• keypress, keydown, keyup
Lista de eventos em
https://developer.mozilla.org/pt-
BR/docs/Web/Events
Exemplo em
https://codepen.io/ftsuda-senac/pen/bxeGJd

• load
• DOMContentLoaded → Evento que ocorre quando HTML DOM foi
carregado em memória do navegador (diferente do documento ser
apresentado na tela)
Algumas referências
• Eventos JS
• https://developer.mozilla.org/en-US/docs/Web/API/Event
• https://developer.mozilla.org/en-US/docs/Web/Events
• Eventos de teclado
• https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEvent/key/Key_Values

Prof. Fernando Tsuda

Eventos DOM
• Propriedades e métodos do objeto Event
• target → referência ao elemento que iniciou o evento
• currentTarget → referência ao elemento associado ao Listener que
capturou o evento
• preventDefault() → evita a execução da funcionalidade padrão do
elemento associado ao evento
• stopPropagation() → evita que o evento seja propagado para os
elementos pais.

Exemplos:
target x currentTarget: https://codepen.io/ftsuda-senac/pen/dyOevqm
preventDefault e stopPropagation : https://codepen.io/ftsuda-senac/pen/mdOLKmZ
Prof. Fernando Tsuda
Requisições Assíncronas - AJAX
• AJAX → Sigla para Asynchronous Javascript And XML
• Técnica que permite receber ou enviar informações estruturadas no
formato XML (ou atualmente no formato JSON) de maneira
assíncrona para uma aplicação web através de codificação Javascript
• Os navegadores fornecem o objeto XMLHttpRequest para criar e
tratar requisições HTTP através de codificação Javascript
• Referência XMLHttpRequest: https://developer.mozilla.org/en-
US/docs/Web/API/XMLHttpRequest

Prof. Fernando Tsuda

 JSON X XML
{ <produto>
"nome": "Bolo de chocolate", <nome>Bolo de chocolate</nome>
"dataValidade": "2023-04-20", <dataValidade>2023-04-20</dataValidade>
"preco": 50.0, <preco>50.0</preco>
"ingredientes": [ <ingredientes>
"Farinha", <ingrediente>Farinha</ingrediente>
"Açúcar", <ingrediente>Açúcar</ingrediente>
"Ovo", <ingrediente>Ovo</ingrediente>
"Chocolate em pó" <ingrediente>
] Chocolate em pó
} </ingrediente>
</ingredientes>
</produto>

Prof. Fernando Tsuda

AJAX - Arquitetura cliente-servidor

Requisição Assíncrona

Objeto XMLHttpRequest
+ Lógica em Javascript
XMLHttpRequest
• Objeto Javascript responsável pelo envio de requisições e
recebimento das respostas através de programação
• Referência MDN: https://developer.mozilla.org/en-
US/docs/Web/API/XMLHttpRequest

Prof. Fernando Tsuda

XMLHttpRequest – GET básico
const xhr = new XMLHttpRequest();

xhr.open('GET', '<URL>', true);

xhr.onload = function() {
if (xhr.status === 200) {
const resp = xhr.responseText;
// Tratar dados recebidos em resp
} else {
// Tratar o erro
}
};

xhr.send();

Prof. Fernando Tsuda

XMLHttpRequest – POST básico
const xhr = new XMLHttpRequest();

xhr.open('POST', '<URL>', true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
const resp = xhr.responseText;
// Tratar dados recebidos em resp
} else {
// Tratar o erro
}
};
const dados = 'nome=Fulano&dataNascimento=2000-10-20'
xhr.send(dados);

// OU
// const params = new URLSearchParams();
// params.append('nome', 'Fulano');
// params.append('dataNascimento', '2000-10-20');
// xhr.send(params);

Prof. Fernando Tsuda

XMLHttpRequest – atributos e métodos
• readyState – Estado da requisição enviada
• 0 – UNSENT – Cliente criado, mas conexão não aberta (open não executado)
• 1 – OPENED – Cliente aberto (open executado)
• 2 – HEADERS_RECEIVED – send executado e cabeçalhos e status disponíveis
• 3 – LOADING – Download dos dados
• 4 – DONE – Operação completa
• status – Código de status HTTP recebido na resposta
• responseText – String contendo os dados recebidos do servidor no formato
texto.
• setRequestHeader() – permite adicionar um item no cabeçalho da
requisição a ser enviada
• getResponseHeader() – permite obter o valor de um item do cabeçalho da
resposta recebida
Prof. Fernando Tsuda
Promise
• Objeto do Javascript que permite desenvolver lógicas assíncronas
• Em caso de sucesso, disponibilizar uma resposta através do "resolve"
• Em caso de erros, disponibilizar uma resposta através do "reject"

Prof. Fernando Tsuda

Promise – Criação da lógica
const objPromise = new Promise(function(resolve, reject) {
// Criar alguma lógica assíncrona
// Se finalizar com sucesso, usar o resolve acima
resolve(dadosSucesso);

// Se finalizar com algum erro, usar o reject acima

reject(dadosErro);
});

// OU usando Arrow Function

const objPromise = new Promise((resolve, reject) => {
// Criar lógica assíncrona - usar mesma ideia acima para resolve/reject
})

Prof. Fernando Tsuda

Promise – tratando a resposta
// Considerando o objPromise criado no slide anterior
objPromise.then(function(dadosSucesso) {
// Usar dadosSucesso para algo
}).catch(function(dadosErro) {
// Usar dadosErro para algo
});

// OU usando Arrow Functions

objPromise.then((dadosSucesso) => {
// Usar dadosSucesso para algo
}).catch((dadosErro) => {
// Usar dadosErro para algo
});

Prof. Fernando Tsuda

Async/await
• Permite recuperar as informações do Promise usando lógica mais
simples, sem a necessidade de encadear o then() e o catch().

• Await indica que a função chamada irá esperar o resultado

• Async indica que a função pode ser executada de maneira assíncrona

Prof. Fernando Tsuda

Async/await
// Considerando o objPromise criado anteriormente
// Escrever o código abaixo em uma função async
async function teste() {
try {
const dadosSucesso = await objPromise;
// Usar dadosSucesso para algo
} catch(dadosErro) {
// Usar dadosErro para algo
}
}

Prof. Fernando Tsuda

AJAX - Exemplos
1. HTML dinâmico: https://codepen.io/ftsuda-senac/pen/gEGWwm
2. AJAX simples: https://codepen.io/ftsuda-senac/pen/MxEmxM
3. AJAX com array: https://codepen.io/ftsuda-senac/pen/jJGwVg

Questão: O exemplo 1 pode ser considerado um exemplo de AJAX? Por

que?

Prof. Fernando Tsuda

AJAX
• Referências
https://developer.mozilla.org/pt-BR/docs/Web/Guide/AJAX

w3schools.com
• https://www.w3schools.com/js/js_ajax_intro.asp
• https://www.w3schools.com/js/js_ajax_http.asp
• https://www.w3schools.com/js/js_ajax_http_send.asp
• https://www.w3schools.com/js/js_ajax_http_response.asp

Prof. Fernando Tsuda

Fetch API
• Abordagem mais moderna que visa substituir o XMLHttpRequest
• Referência: https://developer.mozilla.org/en-
US/docs/Web/API/Fetch_API

Prof. Fernando Tsuda

CORS - Exemplo
• Página carregada hospedada em: https://codepen.io/
• XMLHttpRequest → https://jsonplaceholder.typicode.com
• CORS → Cross Origin Resource Sharing
• Resposta do jsonplaceholder deve ter cabeçalho HTTP Access-Control-Allow-
Origin=https://codepen.io ou *
• Se não tiver cabeçalho, os dados retornados por jsonplacehoder.typicode.com
não podem ser acessados pelo código Javascript

Prof. Fernando Tsuda

Boas práticas
• Usar um padrão consistente ao escrever códigos JS
• Exemplos de convenções adotadas:
• Google: https://google.github.io/styleguide/jsguide.html
• Airbnb: https://github.com/airbnb/javascript
• Dica: Usar plugin de Lint na IDE usada
• Ex: ESLint no VS Code → Aponta problemas de sintaxe de código

Prof. Fernando Tsuda

Javascript em aplicativos móveis
• Atualmente existem ferramentas de desenvolvimento de aplicativos
que permitem o desenvolvimento de funcionalidades ricas em
cliente-side usando a linguagem Javascript ou algum superset da
linguagem (ex: Typescript)
• O superset deve ser compilado para um código equivalente em
Javascript
• Exemplos de frameworks que usam Typescript: Angular 2+, Ionic 2+ e
NativeScript

Prof. Fernando Tsuda

Evolução estudos Frontend

Frameworks
HTML Frontend
Javascript
CSS
- React
- Angular
- Vue.js
Typescript - Tailwind.css
(ou outra alto nível) - etc

Prof. Fernando Tsuda