Texto Aula 4

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 4
Prof. Yanko Costa
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 1/24
CONVERSA INICIAL
Nesta aula completaremos algumas

informações sobre o Javascript, que postergamos para
facilitar o início do
nosso estudo sobre a linguagem. Vamos discutir e detalhar o uso de objetos em
JavaScript e como eles podem auxiliar na produtividade do desenvolvimento,

facilitando o reúso de
código. Veremos como criar e alterar objetos e como
utilizar objetos predefinidos da linguagem
padrão. Exemplos de herança e

importação de códigos serão apresentados para facilitar o
entendimento da
orientação a objetos dentro do JavaScript.
Também vamos realizar a integração

entre Javascript, HTML e CSS, criando maior interatividade e
dinamismo nos
documentos HTML usando uma API chamada DOM.
Com esses conhecimentos, teremos as

condições para promover o desenvolvimento de
aplicações SPA.
TEMA 1 – OBJETOS
Na aula anterior, descrevemos o

Javascript como uma linguagem orientada a objetos e que
podia ser trabalhada em

conjunto com outros paradigmas. Vamos examinar esse conceito de
orientação a
objetos e como está incorporado no contexto do Javascript.
Primeiro, vamos entender o conceito

de objetos na programação. Quando o desenvolvedor está
criando um programa, ele

define algumas variáveis que vão armazenar as informações que precisam
ser
manipuladas (ex.: nome, endereço, CEP, carrinhoCompra, saldo, localização),
e desenvolve algumas
funções que vão auxiliar na manipulação destas variáveis

(ex.: atualizaSaldo(), mostra_endereco(),
calculaDistanciaEntrega(),
Lista_produtos() ). Cada sistema vai ter um conjunto de variáveis e funções
relacionadas a determinado foco e, conforme o tamanho do sistema, pode ter

vários itens que
precisam ser manipulados.
Para facilitar a manipulação desses

itens, essas variáveis e funções ficam agrupadas sob um
mesmo identificador
(chamado de objeto), que encapsulará as variáveis e funções que serão
usadas
para a interação deste objeto com outros objetos ou demais partes do

programa (ver Figura 1).
Figura
1 – Encapsulamento de variáveis e funções
Na orientação a objetos, as
variáveis são chamadas de propriedades, e as funções são métodos.
Na sintaxe do Javascript, um objeto tem propriedades (um par com identificador

e valor) e o valor
dessas propriedades pode ser um dos tipos de dados que vimos

na aula anterior ou outros objetos,
e, considerando que uma função também é um

objeto, podemos criar os métodos também dessa
maneira (ver Quadro 1). Para

acessar os itens do objeto (propriedades), temos duas formas:
objeto.identificador
(nome do objeto com um ponto separador) ou objeto["identificador"]
(nome do
objeto com identificador entre colchetes, como usado no array).

Nesta linguagem é possível criar um
objeto de várias maneiras e nesta aula vamos

focar em duas formas: os objetos literais e a declaração
com classes.
Diferente do que o leitor pode ter

visto em outras linguagens orientadas a objeto, o Javascript
trabalha com
protótipos na criação de objetos e, por esse motivo, somente a partir da versão
ECMAScript 2015, foi adicionada a palavra-chave class e a sintaxe de

criação de classes de objetos
ficou semelhante a outras linguagens. Mesmo

assim, internamente, a estrutura é convertida para
protótipos. No Quadro 1,
temos em (a) um esboço de declaração de objeto literal e em (b) uma
declaração
que pode ser testada no console do navegador.
Quadro 1 – Declaração de objeto

literal
a) b)
var objeto = { var carrinhoCompras = {

variável: valor,
pedido: [ "Cheese Burguer", "Batata Peq", "Suco
Uva"],

variável: valor,
entregue: false,

pago: false,

nomeFunção: function() {

código
atualiza_estoque: function() { alert("Diminui qtd"); },

},
calcula_compra: function() { alert("Soma produtos"); },

nomeFunção: function() {
atualiza_caixa: function() { alert("Soma valor no caixa"); }

código }

}
}
No
exemplo do Quadro 1 (b), o objeto carrinhoCompras, que exemplifica a
administração de um
pedido de compras, é definido e tem como propriedades

(variáveis): pedido, que tem uma lista de
strings como valor; entregue,

que é uma variável booleana usada para sinalizar a entrega do produto;
e a
variável pago, que também tem um valor booleano para indicar se o pedido
de compras foi pago.
Para executar as operações envolvidas numa compra, foram

criados métodos (funções) dentro do
objeto carrinhoCompras: atualiza_estoque(),

que faria a atualização no estoque atual dos produtos
comprados, calcula_compra()
que faria a soma dos preços unitários dos itens selecionados para
compras e atualiza_caixa(),
que incluiria o valor vendido no saldo do caixa. Por ser apenas um
exemplo
didático de como um objeto pode ser declarado, foram definidas poucas
propriedades e
métodos, e as funções emitem apenas um alerta. Uma estrutura

real teria uma quantidade maior de
propriedades e métodos, que se relacionariam

com outros possíveis objetos como: estoque,
pagamentos, transporte, notaFiscal,

custos, produtos etc.
O leitor pode executar a criação do

objeto carrinhoCompras mostrado no quadro 1 (b) e
testar
algumas das funções usando o nome do objeto+ponto+nome_da_função:
carrinhoCompras.atualiza_estoque()
ou carrinhoCompras.calcula_compra().
A partir deste ponto das aulas, a

utilização de um editor de código, como o VSC comentado nas
aulas anteriores (Figura

2), começa a ser mais produtivo para testar os códigos de exemplo que
devem
começar a conter mais linhas do que os códigos anteriores. Depois de carregados
via um
documento HTML, o código fica disponível para ser testado via console.
Usando o exemplo do
quadro 1, depois de carregar o arquivo

HTML, podemos digitar no console carrinhoCompras.pedido
ou carrinhoCompras.pago
para ver o conteúdo das variáveis ou carrinhoCompras.atualiza_caixa()
para
executar a função.
Figura
2 – Documento HTML com código Javascript no VSC
Fonte: ©VSC – Visual Studio Code.
Objetos literais são estruturas

utilizadas em situações mais simples. Muitas vezes são criados
apenas com
variáveis para o armazenamento de itens a serem utilizados pelo desenvolvedor
em
algumas rotinas. A declaração por classes é mais flexível e esta alternativa

será vista mais adiante.
1.1 ALTERANDO OBJETOS
Um objeto pode ser criado com

algumas propriedades e estendido posteriormente. Pode
também ter propriedades

alteradas ou apagadas, como veremos a seguir.
No Quadro 2 (a), temos a criação do

objeto carrinhoCompras com um elemento apenas e o
objeto notaFiscal
sem nenhum elemento. Os dois objetos criados no formato literal: no primeiro, foi
utilizado o var; no segundo, foi utilizado const. Poderia também

ter sido usado o let da mesma forma
que é feito na declaração de outros

tipos de variáveis. Em (b), temos a adição de um elemento em
carrinhoCompras
e a criação de um elemento em notaFiscal.
Quadro 2 – Acrescentando propriedades
a) b)
var carrinhoCompras = { carrinhoCompras.["entregue"] = true;

pago: false carrinhoCompras.pedido = ["Bolinho de carne",
"Ovo Frito", "Refrigerante"];
}
const
notaFiscal = { } notaFiscal.valor_total
= 1230.5;
Nos
exemplos do Quadro 2(b), temos o uso das duas formas de acesso a uma
propriedade de
um objeto: com a notação do ponto e com o uso do identificador

da propriedade entre colchetes “[”
(da mesma forma que é utilizado no array).

As duas formas podem ser usadas para consultar, incluir
ou alterar o conteúdo
de uma propriedade, mas os colchetes têm a vantagem de poder passar o
nome do
identificador durante a execução do programa.
Ao trabalhar com as propriedades

dentro de um objeto, precisamos ter certeza de que estamos
referenciando as variáveis
de dentro do objeto e isso é feito com a palavra-chave this. Quando
usado
dentro de um objeto, o this é uma referência ao objeto onde está
sendo utilizado. Veja na Figura 3
um exemplo do uso do this.
Figura
3 – Exemplo do uso do this em objetos
Na Figura 3, foi definida uma

variável endereco e depois um objeto obj, que também tem uma
propriedade chamada endereco e uma função mostra. Dentro da

função mostra foi utilizado o this
para indicar que o conteúdo
que precisava ser exibido era da propriedade endereco de dentro
do
objeto. Fora do objeto, ao digitar this.endereco no console, o

navegador mostra a variável global que
foi definida anteriormente. Ao digitar obj.mostra()
para executar a função definida dentro do objeto
que utilizou o termo this.endereco,

o resultado apresentado é o conteúdo da propriedade endereco
do objeto.
1.2 TIPOS PRIMITIVOS E OBJETOS
No Javascript, os tipos de dados

primitivos que vimos na aula anterior também têm um objeto
correspondente. Number,
String e Boolean são objetos do Javascript que estão relacionados
aos
números, strings e tipos booleanos que foram descritos na aula
anterior. Com esses objetos foram
criadas propriedades que podem ser usadas para

manipular os dados e podem ser aplicadas tanto
nas variáveis que contêm o dado quanto
no próprio dado literal. Veja nos exemplos do Quadro 3,
onde foi digitado o

nome dos objetos Number e String no console e pressionado enter.
As listas
mostradas no Quadro 3 em (a) e (b) exibem algumas das propriedades de

cada um dos objetos.
Quadro 3 – Objetos de tipos primitivos
a) b)
c)
No
Quadro 3, no exemplo (c), temos uma amostra do uso das propriedades que já
estão
implementadas nos objetos associados com os tipos primitivos. No caso da string,
as propriedades
podem ser executadas tanto em variáveis que contêm strings

quanto no próprio tipo literal, como
mostrado na concatenação de string
com concat() e na conversão do texto para maiúsculo usando a
função toUpperCase().
A propriedade parseInt() do objeto Number foi utilizada para
retornar apenas a
parte inteira de um número.
1.3 CRIANDO OBJETOS COM CLASS
Uma outra forma de criar objetos é

com o uso do termo class (criada a partir da versão
ECMAScript 2015) e é
muito semelhante a outras linguagens orientadas a objeto. Nesse caso, é
criado
um modelo de objeto (a classe) e depois esse modelo é instanciado para
ser utilizado. Toda a
definição das propriedades é feita no modelo e, ao ser
instanciado, as propriedades ficam disponíveis
e podem ser utilizadas com dados

fornecidos durante a execução do código. Para ficar mais claro,
vamos analisar
no Quadro 4 o exemplo que usamos anteriormente do carrinhoCompras, mas reescrito
no formato de classes para facilitar a comparação.
Saiba mais
Instância é um
termo usado na orientação a objetos e indica que será criada uma versão do
objeto original para ser utilizado em um caso específico.
Quadro 4 – Exemplo de declaração de classe
a) Na declaração da classe
"carrinhoCompras" ao lado, a
class carrinhoCompras { sintaxe parece mais limpa.
constructor() { Temos uma função especial
chamada constructor(), que serve
this.pedido = [
"Cheese Burguer", "Batata Peq", "Suco para inicializar a classe. Pode
conter variáveis, a execução de
Uva"]; alguma função ou pode estar vazio.
this.entregue =
false; Os métodos da classe
agora podem ser definidos
this.pago =
false; diretamente, sem a declaração de propriedade com o
uso
} dos dois pontos ( : ).
atualiza_estoque() { Para ser utilizada, a
classe precisa ser instanciada com o uso

alert("diminui qtd"); do operador new, como
visto em (b).
} No momento em que é
instanciada, a classe cria uma cópia
calcula_compra() { do modelo e associa ao
identificador "novo_carrinho".

alert("Soma produtos: "+ this.pedido); Em (b) é demonstrado o
acesso as variáveis e as funções do
} objeto "novo_carrinho"
com o resultado no console.
atualiza_caixa() {

alert("Soma valor no caixa");
}
}
b)
O
exemplo do Quadro 4, apesar de servir para comparação e facilitar o
entendimento do uso de
classes para criar um objeto, não é tão útil dessa forma,

uma vez que as variáveis estão sendo
inicializadas com valores fixos. A

vantagem da criação de um objeto dessa forma é que podemos
trabalhar com as
propriedades e métodos de forma dinâmica.
Vejamos a classe carrinhoCompras

reescrita novamente, mas dessa vez com o melhor uso do
construtor. No Quadro 5,
temos a declaração, o instanciamento e também a inclusão de um tipo
especial de
função para a consulta (get ) e atualização (set) das variáveis
da classe.
Quadro 5 – Uso de parâmetros no construtor
a) Neste exemplo ao lado, o construtor receberá

class
carrinhoCompras { as
informações que serão armazenadas no
constructor(PEDIDO, ENTREGUE, PAGO) { objeto como parâmetros.

this.pedido = PEDIDO; Também temos um novo tipo de função que é

this.entregue = ENTREGUE; especial para o
acesso e alteração das variáveis.

this.pago = PAGO; Este tipo tem duas formas get e set,
podem ter

} o mesmo identificador e são utilizados de forma
semelhante às
variáveis.
get consultaPedido() { Em (b) temos o uso da nova definição. A

return this.pedido; variável carrinho_cliente1
é declarada com o

} objeto do tipo carrinhoCompras, que por sua
set confirmaPagto(CONFIRMA) { vez
inicializa as variáveis pedido, entregue e

this.pago = CONFIRMA; pago com os
valores passados como

} parâmetros.
get confirmaPagto() { Ao utilizar a função get de confirmaPagto
sem

return this.pago; os parênteses, ela retorna o resultado.

} Ao utilizar o mesmo identificador

atualiza_estoque() { alert("diminui qtd"); } confirmaPagto,
mas como o recebedor de um

calcula_compra() { alert("Soma produtos: "+ this.pedido); } valor, este valor se torna o parâmetro da função

atualiza_caixa() { alert("Soma valor no caixa"); } que atualiza a variável pago.
}
b)
Os
tipos get e set tornam o acesso às variáveis mais controlados e a
sintaxe para uso dessas
funções é semelhante ao de uma variável padrão. O
benefício é maior quando temos várias
consistências e mais operações que devem

ser feitas com as variáveis antes de retornar o conteúdo
ou alterá-las. Acabam
funcionando como um filtro para as variáveis de dentro da classe.
TEMA 2 – REAPROVEITANDO CÓDIGO
Além do encapsulamento dos itens

referentes a um objeto, o reúso é um dos principais objetivos
na
orientação a objetos. Muitas das funcionalidades das linguagens foram
desenvolvidas para
incrementar o reúso do código com o mínimo de alteração. Na

orientação a objetos, ao criar um
objeto com suas características
(propriedades) e ações (métodos) encapsuladas, com uma dose
adicional de abstração,
o desenvolvedor pode ir criando camadas mais genéricas que podem servir
para
outras situações.
Os desenvolvedores iniciantes
acabam tendo dificuldade com a abstração necessária para definir
um objeto,
assim como suas características e as ações que devem ser implementadas para esse
objeto ser utilizável dentro do programa. Isto porque, para tornar um objeto
mais genérico e
reusável, é preciso perceber outras formas de utilização que,

pela pouca experiência em
desenvolvimento, os desenvolvedores iniciantes não
conseguem visualizar facilmente.
Uma das formas de desenvolver a

abstração é rever o código depois de pronto: muitas vezes só
depois de
finalizada uma parte do programa o desenvolvedor (inclusive os mais
experientes) detecta
partes do código que podem ser reescritos para

serem reaproveitados em outras situações.
2.1 HERANÇA
O conceito de herança dentro da

orientação a objetos permite reaproveitar partes de um objeto
para construir
outro, mas com o custo de uma maior abstração. A dificuldade do
desenvolvedor
iniciante é perceber quais partes dos objetos são comuns e que

poderiam formar um objeto mais
genérico.
Vamos ver como podemos usar a

herança com o exemplo do Quadro 6. Neste exemplo, o
desenvolvedor estaria
criando pela primeira vez, um sistema de aluguel de casas e apartamentos para
uma imobiliária pequena e, a princípio, criou os objetos casa e apartamento
para organizar as
informações sobre as características que precisariam ser

comparadas pelos clientes. Quando
começou a desenvolver as funções que seriam

necessárias para manipular os dados, o desenvolvedor
verificou que teria muitos
códigos semelhantes, pois muitas variáveis são as mesmas nos dois
objetos
e têm as mesmas funcionalidades (em vermelho no Quadro 6). Teria que
duplicar também as
consistências e as rotinas de atualização de valores para a

maioria das variáveis.
Desenvolver todas essas duplicidades

na primeira vez já seria cansativo e improdutivo, mas as
futuras manutenções e
adaptações para as mesmas variáveis e funções em dois objetos poderiam
gerar
alguns problemas. E pode ser pior caso o desenvolvedor não seja o mesmo, pois
outro
desenvolvedor poderia não saber que o mesmo ajuste numa

consistência do valor de aluguel (por
exemplo) teria que ser feito em duas
funções de dois objetos.
Quadro 6 – Classes para controle de aluguel
a) b)
class
casa { class
apartamento {

constructor(END, QUARTOS, SUITE, WC, COZ,
constructor(END, QUARTOS, SUITE, WC, COZ, VARANDA, ELEV,
QUINTAL, VALOR) { SFEST, VALOR) {
this.endereco = END; this.endereco = END;
this.quartos = QUARTOS; this.quartos = QUARTOS;
this.suite = SUITE; this.suite = SUITE;
this.banheiro = WC; this.banheiro = WC;
this.cozinha = COZ; this.cozinha = COZ;

this.quintal = QUINTAL;
this.varanda = VARANDA;

this.valor = VALOR;
this.elevador = ELEV;

}
this.s_festas = SFEST;

this.valor = VALOR;

get consEnd() {
}

return this.endereco;

}
get consEnd() {

get consQuartos() {

return this.quartos;
}

}
get consQuartos() {
}

}
}
E se o desenvolvedor pudesse separar

o que fosse igual nos dois objetos para utilizar como um
componente? Essa é a
lógica que está relacionada com a herança e exige um planejamento
antecipado ao
desenvolver o sistema. O desenvolvedor avalia antecipadamente quais
características
são semelhantes entre os itens que precisa trabalhar e cria um

objeto genérico apenas com essas
características. Depois, quando for utilizar

características específicas para um objeto diferente, o
desenvolvedor utiliza o
objeto genérico como modelo. No Quadro 7, podemos verificar um exemplo
de um
objeto mais genérico chamado imovel, que será utilizado pelos objetos casa
e apartamento.
Quadro 7 – Criação da classe imovel
a)
class
imovel {

constructor(END, QUARTOS, SUITE, WC, COZ, VALOR) {

this.endereco = END;

this.quartos = QUARTOS;

this.suite = SUITE;

this.banheiro = WC;

this.cozinha = COZ;

this.valor = VALOR;

}

get consEnd() {


}

get consQuartos() {


}
}
b) c)
class
casa extends imovel { class
apartamento extends imovel {

constructor(END, QUARTOS, SUITE, WC, COZ,
constructor(END, QUARTOS, SUITE, WC, COZ, VARANDA, ELEV,
QUINTAL, VALOR) { SFEST, VALOR) {

super( END, QUARTOS, SUITE, WC,
COZ, VALOR );
super( END, QUARTOS, SUITE, WC,
COZ, VALOR );

this.quintal = QUINTAL;

} this.varanda = VARANDA;
this.elevador = ELEV;

get consQuintal() { this.s_festas = SFEST;

return this.quintal; }

}
}
get consElevador() {

return this.elevador;

}
}
No Quadro 7, em (a) temos o objeto imovel,

que irá conter o que é padrão para os objetos casa
e apartamento.
Em (b) o objeto casa adiciona tudo que está no objeto imovel,
usando o extends
imovel na sua definição. O construtor de casa
recebe todos os parâmetros necessários e repassa para
o construtor de imovel
os parâmetros deste, usando a função padrão super( ). Em seguida, é
definida
a propriedade quintal, que pertence somente ao objeto casa.

Todas as variáveis e funções do objeto
imovel fazem parte também do
objeto casa. Em (c) temos a mesma situação para o objeto
apartamento,
que adiciona mais três propriedades além das existentes em imovel.
Na Figura 4, o resultado do uso dos

objetos casa e apartamento, que foram reescritos e
carregados via
documento HTML.
Figura
4 – Uso das classes casa e apartamento com herança
No início da Figura 4, uma variável

com o nome primeira_casa é declarada com uma instância do
objeto casa
e os parâmetros de preenchimento de todas as variáveis. Logo em seguida, ao
digitar
"primeira_casa" no console, são exibidas todas
propriedades: as que foram herdadas de imovel e a
propriedade quintal,
mostrando que todas agora fazem parte do objeto casa.
A função consEnd, definida

com get em imovel, executada com cada um dos objetos
instanciados, mostra o valor referente a cada um dos objetos.
2.2 MÓDULOS
Durante o desenvolvimento de
sistemas mais complexos ou com mais desenvolvedores, algumas
funções ou objetos
que são criados para serem utilizados em várias partes do sistema sugerem o uso
de algum mecanismo para trazer essa funcionalidade para dentro do seu código.
O Javascript implementou esse

mecanismo com o uso da exportação e importação de funções,
objetos ou
variáveis, mas esse mecanismo deve ser acessado por meio de um servidor HTTP.
Por
questões de segurança, esses arquivos com os itens a serem importados não

podem ser acessados
do disco local ( file:// ) ou usados no console

do navegador.
Quadro 8 – Importação da classe carrinhoCompras
class
carrinhoCompras { <html>

constructor(PEDIDO, ENTREGUE, PAGO) { <head><title>Objetos</title>

this.pedido = PEDIDO; </head>

this.entregue = ENTREGUE; <body>

this.pago = PAGO; <script
type='module'>

} import { carrinhoCompras } from './mod-carrinho.js';

get consultaPedido() {

return this.pedido; let
nova_compra = new carrinhoCompras(
["Pastel", "Suco"], false,

} true );

set confirmaPagto(CONFIRMA) { let
primeiroItem = nova_compra.consultaPedido[0];

this.pago = CONFIRMA;

} console.log(
primeiroItem );

get confirmaPagto() {

return this.pago; </script>

} </body>

atualiza_estoque() { alert("diminui qtd"); } </html>

calcula_compra() { alert("Soma produtos: "+
this.pedido); }
atualiza_caixa()
{ alert("Soma valor no caixa"); }
}

export { carrinhoCompras } ;

No Quadro 8, podemos verificar em

(a) que a classe carrinhoCompras foi separada em um
arquivo com o nome

de mod-carrinho.js com a indicação de exportação da classe ao final. O
código
completo que vai utilizar a classe exportada em (a) está listado em (b)
e mostra o atributo
type=’module’ da tag <script>,
que indica que será utilizada uma importação. Na primeira linha do
código
Javascript, temos a declaração da importação, definindo que será feita a
importação de
carrinhoCompras a partir do arquivo mod-carrinho.js. A

partir desta linha, a classe pode ser utilizada
como se tivesse sido declarada

dentro deste código, o que é feito nas linhas seguintes à importação.
TEMA 3 – JSON (JAVASCRIPT OBJECT NOTATION)
O desenvolvimento de sistemas
conectados em rede muitas vezes exige que seja possível
transferir informações
entre os sistemas, permitindo que o processamento seja distribuído, como
exposto nas aulas anteriores.
Para transferir dados entre

sistemas, é preciso estabelecer uma forma que tanto o emissor
quanto o receptor
consigam restaurar o significado original. No desenvolvimento de sistemas web,
uma linguagem de marcação chamada XML (Extensible Markup Language, ou linguagem

de marcação
extensível) desenvolvida pelo W3C em 1996, foi utilizada para

estruturar dados e transmiti-los entre
sistemas (Deitel; Deitel, 2009, p. 28).
Outra forma que tem sido utilizada

nos últimos anos é uma estrutura de dados semelhante ao
que o Javascript
utiliza para criar os objetos literais chamada JSON (Javascript Object
Notation ou
notação de objetos Javascript). Apesar de ser baseada no

Javascript, o JSON é utilizado por várias
linguagens de programação e ambientes

de desenvolvimento e foi desenvolvida em 1999 como uma
alternativa ao XML (Working...,
[S.d.]).
Quadro 9 – Exemplos de estruturas JSON
a) b) c)
' { '{ '{

"endereco": "Rua dos "caixa": 1, "cep":
"80020-020",
alfeneiros", "data":
"11/05/2020", "pedidos": [
"logradouro": "Avenida Luiz

"quartos": 2, { Xavier",
"suite":
0, "pedido": [
"Cheese Burguer", "Batata Peq", "Suco
"complemento": "",

"banheiro": 1, Uva"], "bairro":
"Centro",

"cozinha": 1, "entregue":
false,
"localidade": "Curitiba",
"valor":
950, "pago": false "uf":
"PR",

"quintal": 50.2 }, "ibge":
"4106902",
} ' { "gia":
"",
"pedido": [
"Pastel", "Cerveja"], "ddd":
"41",
"entregue":
false, "siafi":
"7535"
"pago": true }'

}]
} '
No
Quadro 9, foram listados 3 exemplos de JSON (indicados com a, b e c), e que
estão
detalhados abaixo:
a. Uma lista de propriedades da classe "casa"

no formato de string com aspas simples iniciando e
finalizando a lista,
e aspas duplas nos nomes das propriedades;
b. Uma estrutura que poderia ser usada para armazenar a

lista de pedidos pendentes baseados
na classe “carrinhoCompras”. Neste

caso, foi inserido uma propriedade “pedidos”, que contém um
array
de objetos da “carrinhoCompras”. Um exemplo de objetos dentro de objetos;
c. Neste
último exemplo, temos o retorno no formato JSON de uma consulta gratuita CEP
que
retorna o endereço a partir do envio de um CEP válido.
Saiba mais
Resultado
da consulta:
VIACEP. Consulta JSON. Viacep,

[S.d.] Disponível em:
<https://viacep.com.br/ws/80020020/js
on/>. Acesso
em: 27 mar. 2021.
Mesmo dentro do JavaScript, ao

receber uma string JSON, ela precisa ser convertida para objetos
para
poder ser acessada e trabalhada. Essa estrutura apenas pode conter variáveis,
mesmo que tenha
como valor outros objetos literais, portanto não é permitida
a inclusão de funções, e o uso de aspas
duplas para as strings é

obrigatório, assim como também o uso de aspas duplas para os nomes das
propriedades (Working..., [S.d.]).
TEMA 4 – DOM (DOCUMENT OBJECT MODEL)
Cada vez que um navegador recebe um

documento HTML, ele interpreta cada uma das linhas e
vai identificando as tags
e atributos para que possa renderizar as informações na janela. Essas
informações ficam armazenadas na memória do navegador e eles possuem uma API

para que estes
itens possam ser consultados ou alterados via Javascript, por

meio de uma estrutura de objetos
hierárquica chamada DOM (Document Object

Model ou modelo dos objetos do documento) (Deitel;
Deitel, 2009, p.
224; Modelo..., [S.d.]).
Com os objetos DOM, o JavaScript

poderá interferir no HTML e no CSS que está sendo
apresentado pelo navegador, e
juntamente com acesso aos eventos (clique dos botões do mouse,
movimento
de mouse, teclado), o desenvolvedor poderá interagir com o usuário do
navegador de
diferentes maneiras.
Esse mecanismo faz com que possamos

integrar todos os assuntos vistos até esta aula: HTML,
CSS e JavaScript. Com essa

integração, poderemos criar programas JavaScript mais sofisticados e que
podem
alterar dinamicamente as informações que constam na tela do navegador, como
mostra o
exemplo no Quadro 10.
Quadro 10 – Teste de troca de cor
a) b)
<html>

<head>

</head>

<body>

<script>

var cor = "yellow"

function troca_cor() {

if (cor == "yellow") {

cor = "green"; c)

} else {

cor = "yellow";

}

document.body.style.background = cor;

}

</script>

<button type="button" onclick="troca_cor()"
> Troca a Cor</button>

</body>
</html>
No
Quadro 10, em (a) temos o HTML com o JavaScript listado
dentro da tag "<script>". No
Javascript, temos uma

variável chamada cor, declarada no escopo global (ver aula anterior) e
uma
função chamada “troca_cor()”, que altera a variável global cor com
base em seu conteúdo: se o valor
for “yellow” troca para “green”,

senão altera para “yellow”. Essa função é associada a um botão que,
ao
ser clicado ( onclick ), executa a função que usa o DOM para acessar o
CSS e alterar a cor de fundo
( background ) do documento ( body

). Esse exemplo mostra a integração do HTML, CSS e Javascript.
4.1 HIERARQUIA DOM
Para entender como acessar os

objetos que o DOM disponibiliza para acessar o documento
HTML e o CSS, vamos

analisar como sua estrutura foi implementada. Compare a Figura 5 com a linha
do
Javascript utilizada para trocar a cor de fundo: document.body.style.background.
Figura
5 – Modelo de dados do DOM
Na Figura 5, temos uma espécie de

árvore deitada, semelhante ao exemplo que normalmente é
utilizado para
visualização da estrutura de pastas de um sistema de arquivos. Assim também é
visualizada a estrutura do DOM para facilitar o entendimento da sua composição.

Os elementos do
HTML ficam dispostos nesta estrutura hierárquica e é possível

percorrer a estrutura utilizando os
objetos que foram desenvolvidos para esse
acesso. Ao percorrer a estrutura, os elementos são
normalmente referenciados
como “pais” e “filhos”, conforme são identificados elementos e atributos
que
estão aninhados dentro de outros elementos.
Quadro 11 – Aninhamento de elementos HTML
a) b)
<div>
<h1> TITULO
</h1>
<div>
<table>
<tr>
<td> </td></tr>
</table>
<p> texto
comum </p>
</div>
</div>
No Quadro 11, em (a) temos a

representação da hierarquia e em (b) o HTML indicando os
elementos que estão

aninhados dentro do primeiro <div> e os elementos que estão
aninhados
dentro do segundo <div>.
4.2 OBJETOS DOM
Os dois principais objetos do DOM

são window e document. O objeto window contém todas as
propriedades da janela em que o navegador está sendo executado e que ficam

disponíveis para uso
(ex. altura, largura, eventos). O objeto document

permite ter acesso aos elementos do documento
HTML em que o Javascript está
sendo executado. Dentro do objeto document estão várias variáveis e
funções úteis para serem utilizadas no Javascript. Na lista a seguir temos

algumas funções e seu
respectivo objetivo:
a. write() – permite escrever no

documento HTML;
b. getElementById() – pesquisa no documento

HTML um elemento que tenha o atributo de
identificação informado;
c. querySelector() – pesquisa no documento

HTML um elemento que tenha um seletor do
CSS informado;
d. createElement() – cria um novo elemento HTML no documento.
O exemplo do Quadro 12 mostra uma string

contendo tags HTML que será escrita na área do
navegador em que o HTML é

renderizado. Dessa maneira, podemos imprimir as informações via
Javascript
diretamente no HTML que o usuário estará visualizando. Com o uso do “write(
)” no
exemplo do quadro 12, o “console.log( )” do

Javascript que estávamos utilizando nos exemplos para
mostrar o resultado dos

algoritmos, a partir de agora, ficará reservado para pequenos testes.
Quadro 12 – Uso do objeto document
a) b)
<html>

<head>

</head>

<body>

<script>

document.body.style.background = "yellow";

var tab = 5;

document.write("<h1>Tabuada
do "+tab+"</h1>");

for( let num = 0; num < 10; num++) {

document.write( tab+" x
"+ num+" = <b>"+ tab*num +"</b>
<br>");

}

</script>

</body>
</html>
Alguns detalhes adicionais podem

ser verificados no exemplo do Quadro 12, como o uso de tags
HTML que
serão interpretadas pelo navegador e impressas na tela (no console elas
não têm efeito) e
a alteração da cor de fundo onde a tabuada será impressa.
TEMA 5 – CRIAÇÃO DE HTML COM JAVASCRIPT
Além de alterar a formatação e

conteúdo de tags e atributos HTML, o JavaScript também pode
criar novos
elementos no documento. Essa criação pode estar condicionada a um evento,
algum dado
dinâmico ou a lógica do algoritmo JavaScript carregado no navegador.
No Quadro 13, podemos verificar

como o JavaScript, utilizando algumas propriedades do DOM,
pode criar um
elemento <h1> com o conteúdo do título vindo da digitação do
usuário (prompt ).
Quadro 13 – Inclusão de elemento HTML com JavaScript

<body>

<script>

let texto = prompt("Digite o texto
para o titulo!");

let obj_titulo = document.createElement("h1");

let obj_conteudo = document.createTextNode( texto );

obj_titulo.appendChild(obj_conteudo);

document.body.appendChild(obj_titulo);

</script>

</body>
No código do JavaScript do Quadro

13, após a criação do objeto de <h1>, é criado um objeto
com o
texto que o usuário digitou usando a função padrão “createTextNode( )”.
Este novo objeto é
anexado ao objeto do elemento <h1>, gerando um

elemento filho usando para isso a função padrão
“appendChild( )”.
A mesma sequência é feita no final do código anexando o objeto do <h1>
com seu
conteúdo como filhos do elemento <body>.
5.1 CRIANDO ATRIBUTOS
Além de criar um elemento HTML novo

no documento que o navegador está exibindo na tela, o
DOM tem funções que podem

incluir um atributo em um elemento já existente do documento. Um
exemplo desse
tipo de ação é visto no Quadro 14, que cria um atributo de um evento de clique
do
mouse em um texto de parágrafo comum.
No exemplo do quadro 14, é

utilizada a função de pesquisa “getElementById()”, que retornará o
objeto do documento que possui a identificação informada. Em seguida, o

atributo é criado com a
função “createAttribute()” e o valor “liga_alerta(

)” é informado.
Quadro 14 – Exemplo de criação de atributo

<body>

<script>

function clica_texto() {

var liga_click = document.getElementById("texto_comum");

var att_click = document.createAttribute("onclick");

att_click.value = "liga_alerta()";

liga_click.setAttributeNode(att_click);

}
function
liga_alerta() {

alert( "Texto agora tem evento!!!");

}

</script>

<button onclick="clica_texto()"> Liga clique do texto
</button>

<br>
<p
id="texto_comum"> Texto Comum!!</p>

</body>
Este
novo atributo só é criado após clicar no botão Liga clique do texto,
mostrado na Figura 6.
Figura 6 – Visualização do código de alteração de atributo
Ao clicar no botão mostrado na Figura

6, o atributo é criado para o parágrafo ficando como se o
parágrafo tivesse
sido criado com: “<p id="texto_comum" onclick="liga_alerta()">
Texto Comum!!
</p>”.
O HTML resultante pode ser

visualizado com a opção de inspeção de HTML habilitado no
navegador. Assim que

o botão é clicado, o HTML do parágrafo muda, mostrando a versão final do
código.
Ao carregar o documento HTML e

clicando no texto antes de clicar no botão, o alerta não é
exibido. Clicando no
botão e depois no texto, o alerta é apresentado na tela do navegador.
FINALIZANDO
Esta aula trabalhou inicialmente no

conceito de objetos e como ele é utilizado dentro do
Javascript, que tem

diferentes formas de declarar um novo objeto e esta aula priorizou dois:
objetos
literais e criação de objeto com o uso de classes. Dentro do tema de
orientação a objetos, foram
vistos os conceitos de encapsulamento e herança com
exemplos práticos e as duas formas de acesso
às propriedades e métodos para

consulta dos valores ou alteração.
Juntamente com o conceito de orientação

a objetos, um dos temas abordou a importância de
reutilização de código para

aumentar a produtividade do desenvolvedor. Com exemplos de uso de
herança e
importação de objetos, a abordagem foi reforçar a análise dos códigos para a
eventual
generalização de suas funcionalidades.
O uso da estrutura de dados JSON

para transmissão de informações entre sistemas também foi
explicado e
exemplificado nesta aula.
Por último, o modelo DOM foi

abordado, possibilitando que o JavaScript pudesse ser integrado
com os
elementos HTML e CSS das aulas anteriores. Com o DOM o JavaScript pôde promover
uma
maior capacidade de automação das informações a serem apresentadas e criar
uma base para o
desenvolvimento de aplicações SPA.
REFERÊNCIAS
BROWN, E. Learning
JavaScript: add sparkle and life to your web pages. Sebastopol, CA: O'Reilly
Media, Inc., 2016.
DEITEL, P. J.; DEITEL,

H. M. Ajax, rich internet applications e desenvolvimento Web para
programadores. São Paulo: Pearson Prentice Hall, 2009.
MODELO de
Objeto de Documento (DOM). MDN Web Docs, S.d. Disponível em:
<https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM>. Acesso
em: 27 mar. 2021.
VIACEP.
Consulta JSON. Viacep, S.d. Disponível em: <https://viacep.com.br/ws/80020020/json/>.
Acesso em: 27 mar. 2021.
WORKING
with JSON. Trabalhando com JSON. MDN Web Docs, S.d. Disponível em
<https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON>. Acesso em: 27 mar.
2021.

Texto Aula 4

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

Texto Aula 4

Enviado por

Direitos autorais:

Formatos disponíveis

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

Prof. Yanko Costa

Nesta aula completaremos algumas

JavaScript e como eles podem auxiliar na produtividade do desenvolvimento,

padrão. Exemplos de herança e

Também vamos realizar a integração

Com esses conhecimentos, teremos as

Na aula anterior, descrevemos o

podia ser trabalhada em

Primeiro, vamos entender o conceito

criando um programa, ele

funções que vão auxiliar na manipulação destas variáveis

relacionadas a determinado foco e, conforme o tamanho do sistema, pode ter

precisam ser manipulados.

Para facilitar a manipulação desses

para a interação deste objeto com outros objetos ou demais partes do

Na sintaxe do Javascript, um objeto tem propriedades (um par com identificador

dessas propriedades pode ser um dos tipos de dados que vimos

e, considerando que uma função também é um

maneira (ver Quadro 1). Para

objeto com identificador entre colchetes, como usado no array).

objeto de várias maneiras e nesta aula vamos

Diferente do que o leitor pode ter

ECMAScript 2015, foi adicionada a palavra-chave class e a sintaxe de

ficou semelhante a outras linguagens. Mesmo

Quadro 1 – Declaração de objeto

pedido de compras, é definido e tem como propriedades

strings como valor; entregue,

Para executar as operações envolvidas numa compra, foram

objeto carrinhoCompras: atualiza_estoque(),

métodos, e as funções emitem apenas um alerta. Uma estrutura

propriedades e métodos, que se relacionariam

pagamentos, transporte, notaFiscal,

O leitor pode executar a criação do

algumas das funções usando o nome do objeto+ponto+nome_da_função:

A partir deste ponto das aulas, a

aulas anteriores (Figura

quadro 1, depois de carregar o arquivo

Fonte: ©VSC – Visual Studio Code.

Objetos literais são estruturas

algumas rotinas. A declaração por classes é mais flexível e esta alternativa

1.1 ALTERANDO OBJETOS

Um objeto pode ser criado com

também ter propriedades

No Quadro 2 (a), temos a criação do

utilizado o var; no segundo, foi utilizado const. Poderia também

que é feito na declaração de outros

Quadro 2 – Acrescentando propriedades

um objeto: com a notação do ponto e com o uso do identificador

(da mesma forma que é utilizado no array).

Ao trabalhar com as propriedades

um exemplo do uso do this.

Na Figura 3, foi definida uma

propriedade chamada endereco e uma função mostra. Dentro da

objeto. Fora do objeto, ao digitar this.endereco no console, o

que utilizou o termo this.endereco,

1.2 TIPOS PRIMITIVOS E OBJETOS

No Javascript, os tipos de dados

criadas propriedades que podem ser usadas para

onde foi digitado o

mostradas no Quadro 3 em (a) e (b) exibem algumas das propriedades de

Quadro 3 – Objetos de tipos primitivos

podem ser executadas tanto em variáveis que contêm strings