Texto_Aula_4

Prévia do material em texto

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 1/24
 
 
 
 
 
 
 
 
 
 
 
 
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 4
 
 
 
 
 
 
 
 
 
Prof. Yanko Costa
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 2/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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 3/24
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)
var objeto  = {
    variável: valor,
b)
var carrinhoCompras  = {
    pedido: [ "Cheese Burguer", "Batata Peq", "Suco Uva"],
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 4/24
    variável: valor,
 
    nomeFunção: function() {
         código
    },
    nomeFunção: function() {
         código
     }
}
    entregue: false,
    pago: false,
 
    atualiza_estoque: function() { alert("Diminui qtd"); },
    calcula_compra: function() { alert("Soma produtos"); },
    atualiza_caixa: function() { alert("Soma valor no caixa"); }
}
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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 5/24
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)
var carrinhoCompras  = {
    pago: false
}
const notaFiscal = {  }
b)carrinhoCompras.["entregue"] = true;
carrinhoCompras.pedido = ["Bolinho de carne", "Ovo Frito", "Refrigerante"];
 
notaFiscal.valor_total = 1230.5;
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 6/24
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,
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 7/24
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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 8/24
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)
class carrinhoCompras {
    constructor() {
          this.pedido = [ "Cheese Burguer", "Batata Peq", "Suco
Uva"];
      this.entregue = false;
      this.pago = false;
    }
    atualiza_estoque() {
        alert("diminui qtd");
    }
    calcula_compra() {
        alert("Soma produtos: "+ this.pedido);
    }
    atualiza_caixa() {
        alert("Soma valor no caixa");
    }
}
Na declaração da classe "carrinhoCompras" ao lado, a
sintaxe parece mais limpa.
Temos uma função especial chamada constructor(), que serve
para inicializar a classe. Pode conter variáveis, a execução de
alguma função ou pode estar vazio.
Os métodos da classe agora podem ser definidos
diretamente, sem a declaração de propriedade com o uso
dos dois pontos ( : ).
Para ser utilizada, a classe precisa ser instanciada com o uso
do operador new, como visto em (b).
No momento em que é instanciada, a classe cria uma cópia
do modelo e associa ao identificador "novo_carrinho".
Em (b) é demonstrado o acesso as variáveis e as funções do
objeto "novo_carrinho" com o resultado no console.
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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 9/24
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)
class carrinhoCompras {
    constructor(PEDIDO, ENTREGUE, PAGO) {
      this.pedido = PEDIDO;
      this.entregue = ENTREGUE;
      this.pago = PAGO;
    }
 
    get consultaPedido() {
      return this.pedido;
    }
    set confirmaPagto(CONFIRMA) {
      this.pago = CONFIRMA;
    }
    get confirmaPagto() {
      return this.pago;
    }
    atualiza_estoque() { alert("diminui qtd"); }
    calcula_compra() { alert("Soma produtos: "+ this.pedido); }
    atualiza_caixa() { alert("Soma valor no caixa"); }
}
Neste exemplo ao lado, o construtor receberá
as informações que serão armazenadas no
objeto como parâmetros.
Também temos um novo tipo de função que é
especial para o acesso e alteração das variáveis.
Este tipo tem duas formas get e set, podem ter
o mesmo identificador e são utilizados de forma
semelhante às variáveis.
Em (b) temos o uso da nova definição. A
variável carrinho_cliente1 é declarada com o
objeto do tipo carrinhoCompras, que por sua
vez inicializa as variáveis pedido, entregue e
pago com os valores passados como
parâmetros.
Ao utilizar a função get de confirmaPagto sem
os parênteses, ela retorna o resultado.
Ao utilizar o mesmo identificador
confirmaPagto, mas como o recebedor de um
valor, este valor se torna o parâmetro da função
que atualiza a variável pago.
b)
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 10/24
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. Acabamfuncionando 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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 11/24
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)
class casa {
      constructor(END, QUARTOS, SUITE, WC, COZ,
QUINTAL, VALOR) {
      this.endereco = END;
      this.quartos = QUARTOS;
      this.suite = SUITE;
      this.banheiro = WC;
      this.cozinha = COZ;
      this.quintal = QUINTAL;
      this.valor = VALOR;
    }
 
    get consEnd() {
      return this.endereco;
    }
    get consQuartos() {
      return this.quartos;
    }
}
b)
class apartamento {
    constructor(END, QUARTOS, SUITE, WC, COZ, VARANDA, ELEV,
SFEST, VALOR) {
      this.endereco = END;
      this.quartos = QUARTOS;
      this.suite = SUITE;
      this.banheiro = WC;
      this.cozinha = COZ;
      this.varanda = VARANDA;
      this.elevador = ELEV;
      this.s_festas = SFEST;
      this.valor = VALOR;
    }
 
    get consEnd() {
      return this.endereco;
    }
    get consQuartos() {
      return this.quartos;
    }
}
 
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 12/24
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() {
      return this.endereco;
    }
    get consQuartos() {
      return this.quartos;
    }
}
b)
class casa extends imovel {
      constructor(END, QUARTOS, SUITE, WC, COZ,
QUINTAL, VALOR) {
      super( END, QUARTOS, SUITE, WC, COZ, VALOR );
      this.quintal = QUINTAL;
    }
 
    get consQuintal() {
      return this.quintal;
    }
c)
class apartamento extends imovel {
    constructor(END, QUARTOS, SUITE, WC, COZ, VARANDA, ELEV,
SFEST, VALOR) {
      super( END, QUARTOS, SUITE, WC, COZ, VALOR );
     
      this.varanda = VARANDA;
      this.elevador = ELEV;
      this.s_festas = SFEST;
    }
 
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 13/24
}     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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 14/24
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 {
    constructor(PEDIDO, ENTREGUE, PAGO) {
      this.pedido = PEDIDO;
      this.entregue = ENTREGUE;
      this.pago = PAGO;
    }
    get consultaPedido() {
      return this.pedido;
    }
    set confirmaPagto(CONFIRMA) {
      this.pago = CONFIRMA;
    }
    get confirmaPagto() {
      return this.pago;
    }
    atualiza_estoque() { alert("diminui qtd"); }
      calcula_compra() { alert("Soma produtos: "+
this.pedido); }
    atualiza_caixa() { alert("Soma valor no caixa"); }
}
 
export { carrinhoCompras } ;
 
<html>
<head><title>Objetos</title>
</head>
<body>
<script type='module'>
 import { carrinhoCompras } from './mod-carrinho.js';
 
 let nova_compra = new carrinhoCompras( ["Pastel", "Suco"], false,
true );
 let primeiroItem = nova_compra.consultaPedido[0];
 
 console.log( primeiroItem );
 
</script>
</body>
</html>
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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 15/24
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)
 ' {
        "endereco": "Rua dos
alfeneiros",
     "quartos": 2,
     "suite": 0,
     "banheiro": 1,
     "cozinha": 1,
     "valor": 950,
     "quintal": 50.2
 } '
b)
' {
"caixa": 1,
"data": "11/05/2020", "pedidos": [
{
  "pedido": [ "Cheese Burguer", "Batata Peq", "Suco
Uva"],
"entregue": false,
"pago": false
},
{
 "pedido": [ "Pastel", "Cerveja"],
"entregue": false,
c)
' {
  "cep": "80020-020",
  "logradouro": "Avenida Luiz
Xavier",
  "complemento": "",
  "bairro": "Centro",
  "localidade": "Curitiba",
  "uf": "PR",
  "ibge": "4106902",
  "gia": "",
  "ddd": "41",
  "siafi": "7535"
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 16/24
"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
https://viacep.com.br/ws/80020020/json/
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 17/24
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)
<html>
  <head>
  </head>
  <body>
    <script>
      var cor = "yellow"
      function troca_cor() {
        if (cor == "yellow") {
          cor = "green";
        } else {
          cor = "yellow";
        }
        document.body.style.background = cor;
      }
    </script>
    <button type="button" onclick="troca_cor()" > Troca a Cor</button>
  </body>
</html>
b)
c)
 
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,
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 18/24
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>
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 19/24
    <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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 20/24
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)
<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>
b)
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!");
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 21/24
      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>
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 22/24
    <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
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 23/24
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.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a4 24/24