1

SUMÁRIO

1 INTRODUÇÃO..................................................................................... 7

2 EVOLUÇÃO HISTÓRICA DO HTML ................................................... 8

2.1 História do HTML .......................................................................... 8

2.2 Diferenças entre as versões HTML ............................................. 13

2.2.1 HTML versus HTML5 ................................................................... 13

2.2.2 HTML versus XHTML ................................................................... 14

2.2.3 HTML5 versus XHTML ................................................................. 16

2.3 Mudanças do HTML5 .................................................................. 17

2.3.1 Semântica .................................................................................... 18

2.3.2 Áudio e vídeo ............................................................................... 21

2.3.3 Gráficos e efeitos em 3D .............................................................. 23

2.3.4 Atributos HTML ............................................................................ 23

2.3.5 Geolocalização............................................................................. 24

2.3.6 Armazenamento de dados ........................................................... 24

2.3.7 APIs para comunicação ............................................................... 25

2.3.8 Integração .................................................................................... 25

3 FOLHA DE ESTILO EM CASCATAS (CSS) ...................................... 27

3.1 Conceito de CSS ......................................................................... 27

3.1.1 Funcionamento e vantagens do CSS........................................... 28

3.1.2 Regra de estilização ..................................................................... 29

3.2 Leiautes em HTML com CSS ...................................................... 30

3.2.1 Importação de folhas de estilo ..................................................... 31

3.2.2 Tipografia ..................................................................................... 34

2
 3.2.3 Background .................................................................................. 35

3.2.4 Dimensão de elementos .............................................................. 36

3.2.5 Posicionamento............................................................................ 39

4 TRABALHANDO COM LINKS E FORMULÁRIOS............................. 41

4.1 Desenvolvimento de páginas HTML com links e âncoras ........... 41

4.1.1 Links relativos .............................................................................. 41

4.1.2 Links absolutos ............................................................................ 42

4.1.3 Links para e-mails ........................................................................ 43

4.1.4 Links em imagens ........................................................................ 43

4.1.5 Atributo target............................................................................... 43

4.2 Desenvolvimento de páginas HTML com formulários ................. 44

4.2.1 Tag <form>................................................................................... 45

4.2.2 Diferentes componentes de um formulário................................... 46

4.2.2.1 Tag input ................................................................................... 46

4.2.2.2 Tipo text, email e password....................................................... 47

4.2.2.3 Tipo checkbox e radio ............................................................... 49

4.2.2.4 Tipos hidden e file ..................................................................... 50

4.2.2.5 Tipos button e submit ................................................................ 51

4.2.2.6 Tag <select> ............................................................................. 52

4.2.2.7 Tag <textarea> .......................................................................... 53

5 TRABALHANDO COM LISTAS E TABELAS ..................................... 54

5.1 Listas HTML ................................................................................ 54

5.1.1 Lista ordenada em HTML ............................................................. 55

5.1.2 Lista não ordenada em HTML ...................................................... 58

5.1.3 Lista de descrição HTML ............................................................. 60

3
 5.2 Tabelas em HTML ....................................................................... 60

5.3 Páginas Web com listas e tabelas .............................................. 67

6 MANIPULANDO BROWSER OBJECT MODEL, COOKIES E

TEMPORIZADORES EM JAVASCRIPT ............................................................... 70

6.1 Browser object model .................................................................. 70

6.2 Objetos do BOM.......................................................................... 72

6.2.1 Objeto document .......................................................................... 75

6.2.2 Objeto frames............................................................................... 75

6.2.3 Objeto history ............................................................................... 76

6.2.4 Objeto screen ............................................................................... 76

6.2.5 Objeto navigator ........................................................................... 76

6.2.6 Objeto location ............................................................................. 77

6.3 Cookies e temporizadores em JavaScript ................................... 78

7 COMPONENTES DO REACT ........................................................... 82

7.1 Renderização de componentes................................................... 84

7.2 Props ........................................................................................... 85

7.2.1 Props entre componentes ............................................................ 87

7.3 Criação de página com componentes do React .......................... 88

8 Objetos nativos do JavaScript ........................................................... 94

8.1 Objetos nativos ........................................................................... 94

8.2 Tipos de objetos nativos ............................................................. 96

8.2.1 Objeto global ................................................................................ 97

8.2.2 Objetos fundamentais .................................................................. 98

8.2.3 Objetos de números e datas ...................................................... 100

8.2.4 Objetos de processamento de texto ........................................... 100

4
 8.2.5 Objetos de coleção .................................................................... 100

8.2.6 Objetos de dados estruturados .................................................. 101

8.2.7 Objetos de controle de abstrações ............................................. 101

8.2.8 Objetos de reflexão .................................................................... 101

8.3 Aplicação de objetos nativos em códigos JavaScript ................ 102

8.3.1 Math ........................................................................................... 102

8.3.2 Date ........................................................................................... 104

8.3.2.1 RegExp ................................................................................... 106

9 DOM: DOCUMENT OBJECT MODEL ............................................. 109

9.1 Definição ................................................................................... 110

9.2 Estrutura da árvore DOM .......................................................... 112

9.2.1 Acessando o DOM ..................................................................... 113

9.2.2 Propriedades fundamentais e tipos de dados ............................ 116

9.3 Interfaces do DOM: HTML, CSS e Core ................................... 117

10 INTRODUÇÃO AO REDUX .......................................................... 119

10.1 Conceitos básicos Do redux ..................................................... 119

10.1.1 Estados de um componente..................................................... 120

10.1.2 Arquitetura Flux ........................................................................ 122

10.2 Principais características do Redux .......................................... 124

10.2.1 Action ....................................................................................... 124

10.2.2 Store ........................................................................................ 125

10.2.3 Reducer.................................................................................... 126

10.2.4 Conexão entre componente e Redux ....................................... 127

10.3 Aplicação do Redux com o React ............................................. 129

10.3.1 Exemplo de aplicação .............................................................. 130

5
11 HERANÇA .................................................................................... 134

11.1 Object.prototype........................................................................ 134

11.2 Métodos associados ao protótipo de objeto .............................. 138

11.2.1 Método hasOwnProperty.......................................................... 138

11.2.2 Método isPrototypeOf .............................................................. 139

11.2.3 Método propertyIsEnumerable ................................................. 140

11.2.4 Método toString e toLocaleString ............................................. 141

11.2.5 Método valueOf ........................................................................ 141

11.3 Aplicações com herança ........................................................... 142

12 CONHECENDO O REACT........................................................... 145

12.1 Função JSX .............................................................................. 147

12.2 Página HTML usando React e JSX .......................................... 150

12.3 Configurando o ambiente .......................................................... 153

13 EVENTOS NO REACT ................................................................. 154

13.1 Eventos React e DOM .............................................................. 154

13.1.1 Eventos DOM ........................................................................... 155

13.1.2 Arquitetura de eventos DOM .................................................... 157

13.1.3 Eventos React .......................................................................... 158

13.2 Passagem de parâmetros para manipuladores de eventos ...... 160

13.3 Exemplos de aplicações ........................................................... 164

14 REFERÊNCIAS BIBLIOGRÁFICAS ............................................. 167

6
1 INTRODUÇÃO

Prezado aluno!

O Grupo Educacional FAVENI, esclarece que o material virtual é

semelhante ao da sala de aula presencial. Em uma sala de aula, é raro – quase
improvável - um aluno se levantar, interromper a exposição, dirigir-se ao professor
e fazer uma pergunta, para que seja esclarecida uma dúvida sobre o tema tratado.
O comum é que esse aluno faça a pergunta em voz alta para todos ouvirem e todos
ouvirão a resposta. No espaço virtual, é a mesma coisa. Não hesite em perguntar,
as perguntas poderão ser direcionadas ao protocolo de atendimento que serão
respondidas em tempo hábil.
Os cursos à distância exigem do aluno tempo e organização. No caso da
nossa disciplina é preciso ter um horário destinado à leitura do texto base e à
execução das avaliações propostas. A vantagem é que poderá reservar o dia da
semana e a hora que lhe convier para isso.
A organização é o quesito indispensável, porque há uma sequência a ser
seguida e prazos definidos para as atividades.
Bons estudos!

7
2 EVOLUÇÃO HISTÓRICA DO HTML

HTML, ou Hyper-Text Markup Language, é o que cria a estrutura básica da

World Wide Web. HTML consiste em marcadores codificados chamados tags, que
cercam e diferenciam trechos de texto, indicando a função e a finalidade do que
está marcado. Algumas tags especificam como as informações são exibidas no
documento, enquanto outras criam links entre documentos e, ainda, outras,
conteúdo na Internet. HTML5 é a última revisão do padrão HTML desenvolvida pelo
World Wide Web Consortium.

2.1 História do HTML

Em 1980, nasceram os princípios fundamentais do HTML a partir de um

primitivo modelo de hipertexto conhecido como Enquire, escrito em linguagem
Pascal, no CERN (Conseil Européen pour la Recherche Nucléaire — Organização
Europeia para a Pesquisa Nuclear), por meio das pesquisas de Tim Berners-Lee,
que, na época, trabalhava na divisão de computação da instituição (Figura 1).
Com o auxílio de Robert Cailliau, em 1990, Tim Berners-Lee construiu o
primeiro navegador/editor, chamado de WorldWideWeb, e criou o protocolo HTTP
(HyperText Transference Protocol — Protocolo de Transferência de Hipertexto)
para distribuir conteúdo na rede. O HTTP era alimentado com uma nova linguagem
de marcação, o HTML — baseado no SGML (Standard Generalized Markup
Language), uma linguagem amplamente aceita para a estruturação de documentos
e da qual o HTML herdou as tags de título, cabeçalho e parágrafo. A grande
novidade foi (a) marcação a com o elemento href, que permitia a ligação (link) entre
vários documentos (SAGA, 2020)

8
 Figura 01 - Esta máquina NeXT foi usada por Tim Berners-Lee, em 1990,
para executar o primeiro servidor Web.

Fonte: History... ([2018], documento on-line).

O programador Marc Andreessen, que logo fundaria Netscape, inicia o

projeto de seu próprio navegador: o Mosaic. Em dezembro de 1992, Andreessen,
participando de uma lista de discussão mundial (WWW-talk) para difundir as
propostas de Lee sobre o HTML, propôs a implementação de uma tag para
imagens: a tag img (FLATSCHART, 2011).
Um documento chamado “Hypertext Markup Language” foi publicado em
1993 pela IETF (Internet Engineering Task Force). Nesse mesmo ano, o navegador
Mosaic foi lançado, permitindo a exibição de imagens, listas e formulários
(FLATSCHART, 2011).
Em 1994, realizou-se, em Genebra, a primeira conferência mundial sobre
Web, a World Wide Web Conference, da qual surgiu a especificação HTML 2.0.
Marc Andreessen e Jim Clark fundaram a Netscape Communications, apontando
para o nascimento do primeiro navegador de alcance global. No final de 1994, foi
criado o W3C (World Wide Web Consortium — Consórcio World Wide Web) para
coordenar o desenvolvimento de padrões abertos para a Web (FLATSCHART,
2011).

9
 Com a criação do W3C, o desenvolvimento do HTML mudou de local
novamente. Uma primeira tentativa abortada de estender o HTML em 1995,
conhecida como HTML 3.0, abriu caminho para uma abordagem mais pragmática,
conhecida como HTML 3.2, que foi concluída em 1997. O HTML 4.01 se seguiu no
final de 1999 (RAGGETT, 1997; RAGGETT; LE HORS; JACOBS, 1999).
No ano seguinte, a associação ao W3C decidiu parar de desenvolver HTML
e, em vez disso, começou a trabalhar em um equivalente baseado em XML,
chamado XHTML. Esse esforço começou com uma reformulação do HTML 4.01 em
XML, conhecido como XHTML 1.0, que não adicionou novos recursos – exceto a
nova serialização –, e foi concluído em 2000 (PEMBERTON et al., 2000). Após o
XHTML 1.0, o foco do W3C passou a facilitar para outros grupos de trabalho
estenderem o XHTML, sob a bandeira da Modularização XHTML. Paralelamente, o
W3C também trabalhou em uma nova linguagem que não era compatível com as
linguagens HTML e XHTML anteriores, denominada XHTML 2.0 (BIRBECK et al.,
2010).
Na época em que a evolução do HTML foi interrompida, em 1998, partes da
API para HTML desenvolvidas pelos fornecedores de navegadores foram
especificadas e publicadas sob o nome DOM Nível 1 (em 1998) e DOM Nível 2
Principal e DOM Nível 2 HTML (a partir de 2000 e culminando em 2003). Esses
esforços acabaram com algumas especificações do Nível 3 do DOM publicadas em
2004, mas o grupo de trabalho foi fechado antes que todos os rascunhos do Nível
3 fossem concluídos (WOOD et al., 1998; LE HORS et al., 2000; LE HORS et al.,
2004).
Em 2003, a publicação do XForms, uma tecnologia que foi posicionada
como a próxima geração de formulários da Web, despertou um interesse renovado
na evolução do próprio HTML, em vez de encontrar substitutos para ele. Esse
interesse nasceu da constatação de que a implantação do XML como tecnologia da
Web limitava-se a tecnologias totalmente novas (como RSS e Atom posterior), em
vez de substituir as tecnologias implantadas existentes (como HTML) (DUBINKO et
al., 2000).

10
 Uma prova de conceito para mostrar que era possível estender os
formulários do HTML 4.01 para fornecer muitos dos recursos introduzidos pelo
XForms 1.0, sem exigir que os navegadores implementassem mecanismos de
renderização incompatíveis com as páginas da Web em HTML existentes, foi o
primeiro resultado disso. O interesse foi renovado. Nessa fase inicial, enquanto o
rascunho já estava disponível ao público, e eram solicitadas sugestões de todas as
fontes, a especificação estava sob os direitos autorais da Opera Software
(HICKSON, 2005).
A ideia de que a evolução do HTML deveria ser reaberta foi testada em um
workshop do W3C, em 2004, onde foram apresentados alguns dos princípios
subjacentes ao trabalho em HTML, bem como a proposta preliminar, cobrindo
apenas recursos relacionados a formulários. A proposta foi rejeitada com o
argumento de que ela conflitava com a direção escolhida anteriormente para a
evolução da Web. A equipe e os membros do W3C votaram para continuar
desenvolvendo substituições baseadas em XML (JACOBS; WALSH, 2004).
Pouco tempo depois, Apple, Mozilla e Opera anunciaram conjuntamente
sua intenção de continuar trabalhando no esforço sob o guarda-chuva de um novo
local chamado WHATWG (Web Hypertext Application Technology Working Group
— Grupo de Trabalho de Tecnologia de Aplicações de Hipertexto para Web). Uma
lista de discussão pública foi criada, e o rascunho foi movido para o site WHATWG.
Os direitos autorais foram posteriormente alterados para pertencerem em conjunto
aos três fornecedores e permitirem a reutilização da especificação (WEB
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019).
O WHATWG foi baseado em vários princípios fundamentais, em particular
que as tecnologias precisam ser compatíveis com versões anteriores, que
especificações e implementações precisam corresponder, mesmo que isso
signifique alterar a especificação em vez das implementações, e que as
especificações precisam ser detalhadas o suficiente para que as implementações
possam alcançar interoperabilidade completa sem engenharia reversa (WEB
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019).

11
 O último requisito, em particular, exigia que o escopo da especificação
HTML incluísse o que havia sido especificado anteriormente em três documentos
separados: HTML 4.01, XHTML 1.1 e HTML nível 2 do DOM. Também significava
incluir significativamente mais detalhes do que anteriormente havia sido
considerado a norma (WEB HYPERTEXT APPLICATION TECHNOLOGY
WORKING GROUP, 2019).
Em 2006, o W3C manifestou interesse em participar do desenvolvimento do
HTML 5.0 e, em 2007, formou um grupo de trabalho encarregado de trabalhar com
o WHATWG no desenvolvimento da especificação HTML. Apple, Mozilla e Opera
permitiram ao W3C publicar a especificação sob os direitos autorais do W3C,
mantendo uma versão com uma licença menos restritiva no site WHATWG (WEB
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019).
Por vários anos, os dois grupos trabalharam juntos sob o mesmo editor: Ian
Hickson. Em 2011, os grupos chegaram à conclusão de que tinham objetivos
diferentes: o W3C queria traçar uma linha para os recursos de uma Recomendação
HTML 5.0, enquanto o WHATWG desejava continuar trabalhando em um padrão
para HTML, mantendo continuamente a especificação e adição de novos recursos.
Em meados de 2012, uma nova equipe de edição foi introduzida ao W3C para cuidar
da criação de uma Recomendação HTML 5.0 e preparar um Rascunho de Trabalho
para a próxima versão HTML (HICKSON et al., 2014).
Em 28 de outubro de 2014, o W3C publicou o HTML5 como uma
recomendação. O HTML passou a ser um ambiente para a execução de aplicativos
complexos, em vez de uma linguagem de marcação simples como costumava ser.
Os desenvolvedores começaram a aproveitar esses recursos em vez de plug-ins,
como o Adobe Flash ou o Silverlight, da Microsoft, menos conhecido, o que levou
ao abandono gradual do suporte a plug-ins pelos fabricantes de navegadores
(HICKSON et al., 2014).
Novas versões do HTML passaram a ser recomendadas pelo W3C. Em 1
de novembro de 2016, o W3C publicou o HTML 5.1, como uma recomendação
(FAULKNER et al., 2016a). Em 18 de agosto de 2016, o W3C publicou o Primeiro
Projeto Público de Trabalho do HTML 5.2 (FAULKNER et al., 2016b). Em 14 de

12
dezembro de 2017, o W3C publicou o HTML 5.2, como uma recomendação
(FAULKNER et al., 2017). No mesmo dia, 14 de dezembro de 2017, o W3C também
publicou o Primeiro Rascunho Público de Trabalho do HTML 5.3 (AAS et al., 2017).

2.2 Diferenças entre as versões HTML

As versões do HTML representam aprimoramentos padronizados na

linguagem fundamental da World Wide Web. À medida que as novas tecnologias
são desenvolvidas, assim como métodos mais eficientes para alcançar os
resultados desejados das páginas da Web, desenvolvedores e administradores
adotam padrões de linguagem aceitos e os designam usando números para trazer
ordem e uniformidade à Web (SAGA, 2020)
Os termos HTML, XHTML e HTML5 são frequentemente usados em web
design. A maioria das pessoas iniciantes em web design geralmente acha esses
termos confusos e não sabe qual linguagem dessas três aprender. A confusão é
compreensível, porque todas elas são linguagens de marcação e essencialmente
servem ao mesmo objetivo (SAGA, 2020)

2.2.1 HTML versus HTML5

O HTML5 foi desenvolvido por um grupo conhecido como WHATWG, com

o objetivo de aprimorar as versões HTML anteriores e resolver alguns problemas de
compatibilidade entre navegadores. Usaremos 'HTML' para se referir às versões
anteriores ao HTML5 (WEB HYPERTEXT APPLICATION TECHNOLOGY
WORKING GROUP, 2019). As principais diferenças entre HTML e HTML5 são as
seguintes:

 O HTML5 oferece melhor suporte para várias formas de mídia, como

áudio e vídeo, fornecendo tags para elas. O HTML não contém essas
tags e conta com plug-ins de terceiros.

13
  O HTML não permite que o JavaScript seja executado no navegador.
O HTML5 resolveu esse problema introduzindo a API JS Web
Worker. Agora, devido ao suporte nativo ao JavaScript, as páginas
da Web podem ser mais bem-projetadas, usando scripts de front-end
para aprimorar a experiência do usuário.
 O HTML5 inclui novos atributos de entrada, como e-mail, URLs, data
e hora, pesquisa, etc.
 O HTML5 é independente do dispositivo e tem melhor
compatibilidade com o navegador do que as versões HTML
anteriores.
 O HTML5 apresenta melhores regras de análise (a análise é o
processamento de texto) e maior flexibilidade dessa análise do que
o HTML.
 O HTML5 também facilita a localização do local sem plug-ins de
terceiros.
 O HTML5 também contém suporte nativo para gráficos vetoriais,
portanto não há necessidade de software de terceiros, como o Adobe
Flash.

Em resumo, o HTML5 é apenas uma versão melhor do HTML, com recursos

e funcionalidades adicionais (SAGA, 2020)

2.2.2 HTML versus XHTML

XHTML é uma família de tipos e módulos de documentos atuais e futuros,

que reproduzem e estendem o HTML 4. Os tipos de documento da família XHTML
são baseados em XML. XHTML 1.0 é o primeiro tipo de documento na família
XHTML, uma reformulação dos três tipos de documentos HTML 4, como aplicativos
do XML 1.0. Ele deve ser usado como uma linguagem para conteúdo compatível

14
com XML e, se algumas diretrizes simples forem seguidas, operar em agentes de
usuário compatíveis com HTML 4 (PEMBERTON et al., 2000).
XHTML foi desenvolvido como uma extensão para HTML. Não há muitas
diferenças entre HTML4 e XHTML, sendo este último basicamente uma versão mais
rígida do primeiro. As principais diferenças entre HTML e XHTML são as seguintes:

 O HTML4 permite que alguns elementos omitam a tag final. As tags

finais são adicionadas ao fechar uma parte do texto, como um
parágrafo. Eles geralmente são simbolizados com uma barra
invertida (por exemplo, a tag de abertura de um parágrafo é <p>,
enquanto a tag final é </p>). XHTML requer que todos os elementos
incluam a tag final.
 O HTML4 permite a sobreposição de certos elementos. XHTML não
permite que nenhum elemento se sobreponha.
 Os valores dos atributos (como tamanho da fonte) devem ser citados
em XHTML, mesmo que sejam numéricos. O HTML não inclui
valores entre aspas para atributos
 Os atributos não podem ser minimizados em HTML.
 Há uma pequena diferença na maneira como os elementos vazios
são manipulados.

Embora as diferenças acima sejam as mais importantes, também existem

outras muito sutis, mas são realmente raras. Você sempre pode verificar a
documentação do XHTML para obter mais informações. O argumento é que o
XHTML foi projetado para resolver alguns problemas em HTML, incorporando
alguns recursos do XML (SAGA, 2020)

15
2.2.3 HTML5 versus XHTML

Como XHTML e HTML são praticamente os mesmos, as diferenças entre

XHTML e HTML5 são as mesmas que as existentes entre HTML4 e HTML5. No
entanto, a seguir, estão algumas das diferenças mais sutis entre HTML5 e XHTML
(PIETERS, 2014):

 Enquanto XHTML faz distinção entre maiúsculas e minúsculas, o

HTML5 não (HTML também não faz distinção entre maiúsculas e
minúsculas).
 O HTML5 tem um tipo de documento muito mais simples que o
XHTML e o HTML (o DOCTYPE diz ao navegador como interpretar
os dados).
 O HTML5 é compatível com todos os navegadores, enquanto o
XHTML não.
 O HTML5 é mais brando, seguindo os passos do HTML4, do que o
XHTML.
 O HTML5 é mais adequado para dispositivos móveis, como tablets e
telefones, enquanto o XHTML é mais adequado para telas de
computador.

Como conclusão, todas as três são linguagens de marcação com apenas

alguns recursos presentes em cada um que não estão presentes nos outros.
Embora o XHTML tenha sido projetado para ser uma versão melhor do HTML4,
incorporando alguns recursos do XML, o HTML5 acabou sendo muito melhor do
que os dois e é, de longe, a linguagem de marcação mais usada atualmente devido
à adição de muitos recursos importantes. O principal argumento é que todos eles
são apenas versões diferentes do padrão HTML das linguagens de marcação, mas
com estilos e recursos sintáticos diferentes. Se você é iniciante em web design,
HTML4 e XHTML não são recomendados, e faria sentido aprender primeiro o

16
HTML5 por causa de sua compatibilidade aprimorada e seu uso generalizado
(SAGA, 2020)

2.3 Mudanças do HTML5

O W3C projetou o padrão HTML5 com vários objetivos: substituir plug-ins

de multimídia proprietários por padrões abertos, permitindo que os aplicativos da
Web comportem-se mais como aplicativos nativos, adicionando recursos para
serviços baseados em localização e fazendo alterações na sintaxe que separa o
conteúdo da apresentação (SAGA, 2020)
O HTML5 foi feito para ser simples, implicando em uma sintaxe
extremamente mais simples e limpa. A simples declaração do tipo de documento
(DOCTYPE) foi apenas mais uma das facilidades incluídas na nova versão. Agora,
você precisa inserir apenas um < ! DOCTYPE html > no início do seu documento,
e tudo estará pronto. Além disso, a sintaxe da HTML5 é compatível também com a
HTML4 e XHTML1.
A linguagem apresenta, também, um elemento novo, o <canvas>,
responsável por substituir muitas das implementações antes feitas em Flash. Isso
faz muitos desenvolvedores considerarem que esse já se encontra obsoleto e
futuramente morto (SAGA, 2020)
A extensão de tags a um tool de novos e interessantes recursos fez uma
grande diferença na linguagem. Tags como: <header> e <footer>, que estendem a
funcionalidade de tabelas agora para a página como um todo <section>, <article> e
<nav> que permitem marcar áreas específicas dos layouts, <vídeo> e <áudio>, para
uma inclusão melhorada de conteúdos multimídia nas páginas, e <menu> e
<figure>, para bem arranjar textos, imagens e menus, trazem todo um conjunto de
implementações e funcionalidades bem-pertinentes para a Web de hoje (SAGA,
2020)
Além disso tudo, a remoção de outros recursos, como as tags <center>,
<big>, <font>, etc., fazem com que a responsabilidade do CSS aliada à nova
linguagem só aumente, otimizando o desenvolvimento front-end (SILVA, 2011).

17
 Como em todas as atualizações anteriores do padrão HTML, os
navegadores HTML5 são compatíveis com versões anteriores. As páginas mais
antigas continuam sendo exibidas em novos navegadores, e não será necessário
reescrever nenhum documento existente.
O novo padrão é vasto. Por essa razão, o W3C dividiu essas novidades em
oito áreas tecnológicas. Isso ajuda na homologação do padrão e suporte dos
fabricantes, que estão sendo feitos em porções (SAGA, 2020)

2.3.1 Semântica

Trata-se de um grande desafio para os mecanismos de busca da atualidade

classificar a importância e relevância das informações contidas nas páginas. Com
esse intuito, novas tags foram criadas, dando maior importância semântica aos
textos. Essas tags se comportam como a tradicional tag <div>, que leva este nome
por dividir o texto em blocos, até então anônimos. Agora, os mesmos podem ser
classificados, seguindo as principais possibilidades (Figura 2):

 <section> — apresenta a sessão, o tema da qual os artigos têm em

 comum;
 <nav> — trata-se dos elementos para a navegação do visitante,
basicamente o menu;
 <article> — contém o texto do artigo, o conteúdo propriamente dito;
 <aside> — informações relacionadas às do artigo, mas que precisam
 ser separadas do contexto, como notas de rodapé;
 <header> — contém o cabeçalho;
 <footer> — contém o rodapé do artigo;
 <time> — armazena a data e hora daquela informação;
 <mark> — serve para marcar parte do texto, colocando-o em
destaque ou para uma referência.

18
 Figura 02 - Exemplo de disposição das tags

Fonte: Poyatos (2014, documento on-line).

Quando tratamos do uso de formulário, a tag <input> já é amplamente

atualizada para caixas de texto, botões de seleção e de acionamento. Entretanto,
quando fosse necessário validar uma informação em uma caixa de texto, longos
trechos de codificação JavaScript faziam-se necessários.
Destacam-se, portanto, alguns tipos novos e interessantes para a tag
<input>. Vários foram criados e já possuem validação nativa por parte do navegador
Web (Figura 3).

19
 Figura 3 - Exemplo de codificação JavaScript

Fonte: Poyatos (2014, documento on-line).

O exemplo utiliza os tipos email, number e date, embora existam

outros. Repare, também, nos novos atributos placeholder e required.O placeholder
é responsável por exibir mensagens, como marca d'água na caixa de texto que se
encontra vazia. Já o required (linha 11) quer dizer obrigatório, ou seja, exige o
preenchimento da caixa de texto, impedindo o formulário de ser submetido enquanto
a condição não for satisfeita.
O exemplo faz uso, também, dos novos atributos min e max (linha 13),úteis
para se estabelecer intervalos de números para o tipo number (Figura 4).

20
 Figura 04 - Exemplo anterior em execução. Novos tipos de caixa de texto
validados nativamente.

Fonte: Poyatos (2014, documento on-line)

2.3.2 Áudio e vídeo

O novo recurso mais comentado do HTML5 é o suporte nativo para

reprodução de áudio e vídeo no navegador. Os navegadores atuais contam com
plug-ins, como Adobe Flash, Apple QuickTime e Microsoft Silverlight, para
reproduzir conteúdo multimídia. Para usuários de desktop, esses plug-ins
funcionam bem e são relativamente transparentes de usar; para o crescente número

21
de usuários que deseja assistir a vídeos em seus iPhones, iPads ou Blackberries,
não há plug-ins disponíveis. O HTML5 resolveu o problema do plug-in, exigindo
suporte interno para vídeo em navegadores e permitindo que os designers insiram
as tags <video> e <audio> em suas páginas. Essas tags contêm informações que
o navegador pode usar para interpretar e renderizar o conteúdo multimídia (SILVA,
2011).
Observe o exemplo a seguir, que demonstra o uso do elemento audio:

<audio src="som.mp3">
</audio>

Somente isso, simples e direto, sem necessidade de plug-ins, Flash, Quick

Time, Windows Media Player e qualquer outro sistema a ser considerado quando
se pretende incorporar som em uma página Web. Basta declarar o caminho para o
arquivo de som no atributo src do elemento. O som é reproduzido com as
funcionalidades nativas do navegador.
O elemento audio admite os seguintes atributos: atributos globais, src,
controls, crossorigin, preload, autoplay, mediagroup, loop e muted (HICKSON et al.;
SILVA, 2011).
O atributo src destina-se a indicar o caminho para o arquivo de som a ser
incorporado na página.
O atributo controls destina-se a fazer com que o navegador renderize os
controles nativos para o usuário interagir com som. Esse atributo é de uso
obrigatório, salvo nos casos em que pretendemos criar controles personalizados.
O atributo crossorigin destina-se a indicar a origem do arquivo de som a ser
incorporado na página. Os valores possíveis são Anonymus e use-credentials
(SAGA, 2020)
O atributo preload destina-se a indicar como o autor espera que seja o
carregamento do som na página, tendo em vista otimizar a experiência do usuário.

22
2.3.3 Gráficos e efeitos em 3D

O elemento canvas é outro novo recurso do HTML5. Os desenvolvedores

podem combinar gráficos vetoriais, imagens, áudio e vídeo em um espaço
predefinido na página. Esses elementos podem ser programados via JavaScript, e
os usuários poderão interagir com eles via mouse e teclado. A renderização será
realizada ao lado do cliente, garantindo um processamento mais suave e menos
gargalos na rede. O elemento canvas pode conter coisas tão simples, quanto formas
ou linhas geométricas, e coisas tão complexas, quanto jogos e modelos em
camadas que podem ser manipulados pelo usuário (SILVA, 2011).
É necessário que o desenvolvedor faça uma análise criteriosa para uso
desse elemento. Não devemos usá-lo se houver um elemento mais apropriado. Por
exemplo: para marcar o cabeçalho ou o topo de um site, ainda que ele tenha sido
projetado com uso maciço de imagens, talvez seja mais apropriado o uso do
elemento h1 devidamente estilizado, e não o canvas.

2.3.4 Atributos HTML

Novos atributos foram introduzidos pela HTML5, vários existentes foram

redefinidos e muitos elementos tiveram a lista de atributos suportados ampliada. A
HTML4.01 prevê 118 atributos, e a HTML5 expandiu essa lista.
Existem atributos que são globais, ou seja, comuns a todos os elementos
da HTML. Um deles é o accesskey, que se destina a definir uma tecla de atalho
para ativar ou dar foco ao elemento quando o usuário navega com auxílio do
teclado. O atributo class destina-se a definir uma classe para o elemento com a
finalidade de servir de referência para estilização e scripts. Por fim, o atributo
contenteditable foi inventado pela Microsoft e implementado em seus navegadores
desde a versão 5, reconhecido e adotado pela HTML5. Admite os valores true, false
e inherit, que definem se o conteúdo do elemento é editável ou não, ou se sua

23
condição de edição é herdada. A edição se faz no próprio agente de usuário que
renderiza o conteúdo (SILVA, 2011).

2.3.5 Geolocalização

Geolocalização é uma funcionalidade que, apesar de ter sido lançada no

ano de 2008, ganhou destaque e começou a ser difundida na mesma época em que
a HTML5 ganhou seu espaço e começou a ser estudada e aplicada pela
comunidade de desenvolvimento Web. Talvez essa coincidência tenha sido a
responsável pela ideia de que a geolocalização tenha sido criada pelo HTML5
(SILVA, 2011).
Os recursos de geolocalização do HTML5 são de particular interesse de
desenvolvedores e usuários de dispositivos móveis. A localização geográfica foi
definida como "a arte de descobrir onde você está no mundo e (opcionalmente)
compartilhar essas informações com as pessoas em quem você confia". Ao incluir
ferramentas para localização geográfica no navegador, o HTML5 facilita a criação
de aplicativos que sabem onde os usuários estão, o que está por perto e como eles
podem chegar aonde querem ir. Os aplicativos podem incluir mapas e orientações,
compras e entretenimento e ferramentas de redes sociais. Embora existam
preocupações legítimas de privacidade com esses recursos, deve-se observar que
a especificação de design atual exige que os usuários escolham explicitamente
permitir que os aplicativos de localização geográfica saibam onde estão (SILVA,
2011).

2.3.6 Armazenamento de dados

O HTML5 também tem suporte para bancos de dados SQL ao lado do

cliente e cache offline. Isso é particularmente importante para usuários móveis, pois
a maioria tem conectividade e largura de banda limitadas em seus dispositivos. Um
exemplo desse conceito de “aplicativo em cache local” seria um conjunto de

24
calendários que permite que os usuários baixem seus dados atuais, façam ajustes
em seus dispositivos móveis e, posteriormente, carreguem na próxima vez que
houver uma conexão disponível. Os aplicativos podem armazenar gráficos e
códigos no dispositivo local, garantindo tempos de carregamento rápidos e tráfego
de rede mínimo (SILVA, 2011).

2.3.7 APIs para comunicação

Outro novo recurso do padrão HTML5 é a capacidade de criar aplicativos

da Web que se comportam mais como locais. Alguns recursos, como gerenciamento
de arquivos de arrastar e soltar e armazenamento local, permitirão que os
desenvolvedores criem aplicativos baseados na Web, que se integram
perfeitamente ao computador do usuário. Com HTML5, os usuários podem fazer
upload e download de arquivos simplesmente arrastando-os para a janela do
navegador (SILVA, 2011).

2.3.8 Integração

Um dos grandes problemas no envio de arquivos pela Web (upload) foi

finalmente resolvido com o chamado xmlHttpRequest ao se enviar arquivos muito
grandes, não se tinha uma ideia de progresso desse envio (VAN KESTEREN,
2012).
O mérito é de um novo evento incluído na API, onprogress, especificamente
no atributo upload. O mesmo recebe um objeto que possui o atributo
lengthComputable, que traz informações de progresso que podem ser exibidas em
uma barra de progresso (novidade também a tag <progress>, específica para esse
fim) (SILVA, 2011).
A integração homem-máquina também recebeu novidades. O recurso de
drag 'n’ drop (arrastar-e-soltar), tão utilizado em interfaces gráficas dos sistemas
operacionais, agora pode ser utilizado em páginas e aplicações Web. Um elemento

25
pode ser considerado dragable (“arrastável”), podendo, até mesmo, transportar
informações contidas nele para outros elementos (que chamaremos aqui de “alvo”).
Muitos são os recursos trazidos pela tecnologia HTML5 e pela nova geração
de navegadores Web. Portanto, muitas são as oportunidades de seu uso, que
podem ir desde experiências mais ricas de navegação e interatividade em um
website até avançadíssimos jogos eletrônicos baseados em Web. Animações e
streaming de áudio e vídeo, antes possíveis apenas pelo plug-in proprietário Adobe
Flash, agora são realidade de forma nativa.
Tratando em particular dos jogos eletrônicos, WebSockets ou SSE trazem
uma troca de informações ágil, essencial para partidas com múltiplos jogadores.
Animações realizadas usando Canvas, webGL ou recursos do CSS3,
acompanhados por uma envolvente trilha sonora reproduzida pelo novo suporte de
streaming de áudio, utilizando-se dos eventos de toque em tela, acelerômetro e
recurso de drag 'n’ drop, farão os jogos eletrônicos baseados em Web alcançarem
patamares possíveis outrora apenas por jogos instaláveis em sistemas operacionais
(SAGA, 2020)
Fallbacks e condicionais, verificando a existência da API (como em muitos
exemplos citados neste capítulo), farão com que até mesmo visitantes oriundos de
navegadores mais antigos possam acessar sua página ou aplicação, embora não
tenham a mesma experiência. Frameworks como o Modernizr (SILVA, 2011)
auxiliam nos fallbacks e podem providenciar polyfills, que são a possibilidade de
preencher a falta de suporte a alguns recursos da HTML5 por outros mais antigos
ou plug-ins (SAGA, 2020)
Os novos recursos podem ser muito úteis em layout responsivo – trata-se
de criar versões do website planejadas para vários tamanhos de tela e
processadores, ou seja, em um único código, criar páginas que se adaptem às telas
que vão desde pequenos smartphones até televisores de muitas polegadas.

26
3 FOLHA DE ESTILO EM CASCATAS (CSS)

3.1 Conceito de CSS

Arquivos CSS permitem uma melhor organização do código fonte de

páginas da internet, armazenando a maior parte de códigos referentes à aparência
da página.
CSS — do inglês, cascading style sheet, ou, na tradução, “folha de estilo
em cascatas” — é um formato de arquivos que permite o armazenamento de estilos
para documentos Web. Arquivos CSS foram projetados para trabalhar em conjunto
com os HTML (Figura 5), separando o armazenamento do conteúdo de páginas
HTML dos códigos relacionados à aparência e ao estilo, como tamanho de textos,
espaçamentos, fontes e cores de elementos. Tal separação tem por objetivo facilitar
a edição e manutenção de Websites com uma grande quantidade de páginas em
que o leiaute é mantido.

Figura 05 - Trabalho do CSS em conjunto com o HTML.

Fonte: Jossnat/Shutterstock.com.

27
3.1.1 Funcionamento e vantagens do CSS

Para que você possa compreender como CSS funciona, é necessário,

primeiramente, entender como um navegador lê uma página HTML. Segundo How
CSS... (2019), o carregamento de uma página ocorre em seis etapas: (i) o
navegador (browser) carrega o documento HTML de um servidor na Internet ou de
um arquivo local; (ii) a seguir, converte o documento HTML em um modelo de objeto
de documento (DOM); (iii) são carregados recursos vinculados, como imagens,
vídeos incorporados e folhas de estilo CSS; (iv) é feita a análise do arquivo CSS,
levando-se em consideração os seletores e as regras de estilo que devem ser
aplicadas a eles, como elementos, classes, IDs e assim por diante; (v) a árvore de
renderização DOM é construída usando a estrutura do HTML e os estilos obtidos
no arquivo CSS; e (vi) a página completa é, por fim, exibida na tela. A Figura 2, a
seguir, mostra um esquema desse processo.

Figura 06 - Diagrama que ilustra como um navegador lê uma página

HTML com arquivos CSS vinculados.

Fonte: How CSS... (2019, documento on-line, tradução nossa).

Na prática, um navegador carrega os dados e a estrutura da página no

arquivo HTML. Depois, analisa arquivos CSS vinculados, buscando formatações e
estilos que devem ser aplicados para visualização final do site na tela do

28
computador. Por fim, ele junta todas as informações disponíveis em um documento
armazenado na memória do computador (DOM) e exibe a página formatada.

3.1.2 Regra de estilização

A linguagem CSS permite a manipulação de estilos de arquivos por meio

da chamada regra de estilização (SILVA, 2015). Nessa regra, uma formatação de
estilos é composta por um seletor seguido por uma ou mais declarações separadas
por ponto e vírgula. Declarações CSS, por sua vez, são compostas por uma
determinada propriedade e um valor que pode ser aplicado a ela, conforme
esquema da Figura 07.

Figura 07 - Representação de uma declaração CSS: colore textos

presentes em tags <p> na cor azul. A indentação do bloco é opcional,
i.e. todo o comando pode ser escrito em uma única linha: p { color: blue }.

Fonte: How CSS... (2019, documento on-line, tradução nossa).

Seletores indicam elementos em que as regras CSS serão aplicadas na

marcação HTML. Um exemplo simples de aplicação da linguagem CSS seria a

29
alteração de textos de uma página (armazenados na tag <p>) para a cor azul. No
exemplo anterior, a propriedade color (cor) foi aplicada a todos os textos presentes
em tags <p>, recebendo o valor blue (azul).

3.2 Leiautes em HTML com CSS

Há três formas de se realizar declarações CSS (MARIANO; MELO-

MINARDI, 2017), apresentadas no Quadro 1, a seguir.

Fonte: Adaptado de Mariano e Melo-Minardi (2017).

30
 Um navegador define o estilo aplicado de acordo com a ordem de prioridade
em que a declaração foi aplicada (efeito cascata). Por exemplo, declarações inline
têm prioridade sobre as incorporadas, que têm prioridade sobre as importadas.
Declarações dos tipos inline e incorporadas são realizadas diretamente no arquivo
HTML e, por isso, devem ser evitadas (SAGA, 2020)
Se nenhuma declaração for aplicada a um determinado elemento, o
navegador carrega sua folha de estilos-padrão. Por exemplo, se apenas um texto
for inserido na tag <body>, o navegador define por padrão que a cor do texto deve
ser preta (color: black) e fundo deve ser branco (background- -color: white).

3.2.1 Importação de folhas de estilo

Agora, você verá, na prática, como criar sua primeira folha de estilos e
vinculá-la a um arquivo HTML. Primeiro, crie o arquivo HTML com o seguinte
conteúdo (nomeie o arquivo como “index.html”):

<!DOCTYPE html>
<html>
<head>
<title>Minha primeira página HTML + CSS</title>
<!-- importando arquivos CSS -->
<link rel="stylesheet" href="estilo.css">
</head>

<body>
<p>Meu texto</p>
<p class="azul">Estilo múltiplo</p>
<p id="vermelho">Estilo único</p>
<p class="azul">Estilo múltiplo</p>
</body>

31
 </html>

Observe que, na linha 7, é realizada uma referenciação a um arquivo

denominado “estilo.css”. Este, ainda não criado, armazenará todas as declarações
do tipo CSS. Para que o navegador compreenda que a tag <link> é interligada a um
arquivo de folhas de estilo, é necessário adicionar o atributo rel que deve receber o
valor stylesheet, além de um atributo href com o nome do arquivo CSS (desde que
os arquivos HTML e CSS estejam na mesma pasta – caso contrário, é necessário
indicar o endereço completo).
Crie, agora, o arquivo CSS com o seguinte conteúdo:

*{
margin: 0;
padding: 0;
}

body {
background-color: black;
}

p{
color: green;
}

.azul {
color: cyan; /* azul ciano */
}

#vermelho {
color: red;

32
 }

Esses códigos utilizam diversos seletores. O primeiro é o seletor universal

(*), que é usado para aplicar estilos a elementos de qualquer tipo. Nesse
caso, você usou o seletor universal para remover margens inseridas por padrão em
certos tipos de navegadores. O próximo seletor foi usado na tag body, que armazena
todo o corpo da página, ou seja, o conjunto de códigos que gera elementos visuais.
Na tag body, foi inserida a propriedade background-color, que altera a cor do plano de
fundo para preto. A seguir, a propriedade color com diferentes valores é aplicada a
três seletores: tag <p>, classe “azul” e id “vermelho”. Ao executar o arquivo HTML em
um navegador, a seguinte página da Figura 8 será carregada.

Figura 8 - Observe que a cor de fundo do <body> foi alterada para preto. A
cor verde é aplicada apenas ao primeiro parágrafo. Nos itens seguintes, são
aplicados os atributos class (usado mais de uma vez) e id (usado apenas uma
vez).As propriedades aplicadas por último sobrepõem-se às aplicadas primeiro
(efeito cascata).

Fonte: Mariano e Melo-Minardi (2017).

33
3.2.2 Tipografia

As propriedades tipográficas permitem a formatação dos textos em uma

determinada página. Em geral, elas iniciam pelos prefixos “font-” ou “text-”, como a
propriedade font-size, que define o tamanho da fonte a ser utilizada, ou a
propriedade text-align, que define o alinhamento do texto (alinhado à direita, à
esquerda ou centralizado).
No Quadro 2, a seguir, você pode ver algumas das propriedades mais
utilizadas para formatação de textos.

34
 Fonte: Mariano e Melo-Minardi (2017).

3.2.3 Background

O advento da popularização de Internet banda larga, aliado ao uso de folhas

de estilo, permitiu uma evolução no uso de backgrounds, também conhecidos como
planos de fundo (ADAMS et al., 2009).
A propriedade background permite diversas configurações de planos de
fundo, como definição de cor ou, até mesmo, inserção e posicionamento de
imagens.
No Quadro 3, a seguir, você pode ver algumas das propriedades para
definição de backgrounds.

35
 Fonte: Mariano e Melo-Minardi (2017).

3.2.4 Dimensão de elementos

CSS fornece uma série de propriedades para definição de margens e

espaçamentos, como bordas (border), margens internas (padding), margens
externas (margin), além das propriedades de altura (height) e largura (width) (Figura
09). Tais propriedades podem ser aplicadas a diversos tipos de tags, como
divisórias (<div>), imagens (<img>), dentre outras.

36
 Figura 09 - Margens e bordas.

Fonte: Mariano e Melo-Minardi (2017).

A linguagem CSS permite uma grande gama de unidades de medida para

expressar comprimento, como ponto (pt), paica (pc), centímetro (cm),
milímetro (mm) e polegada (in). Além disso, há unidades que dependem do tamanho
da fonte, como as de medida em e ex. Entretanto, CSS possui uma unidade de
medida própria, o px, que se deriva do pixel, que a menor unidade de medida de
uma imagem digital. As unidades baseadas em pixels são bastante utilizadas, por
exemplo, na resolução de monitores, como o HD (1280 x 720 pixels), Full HD ou
FHD (1920 x 1080 pixels), 4K ou Ultra HD (3840 x 2160 pixels) e 8K (7680 x 4320
pixels). Quanto maior a resolução, maior a quantidade de pixels que a tela terá e,
consequentemente, melhor qualidade de imagem (SAGA, 2020)
Tamanhos também podem ser representados em porcentagens (%), o que
tem uma grande utilidade para as chamadas páginas que se adequam ao design
responsivo (aquelas que se ajustam ao tamanho da tela de quem acessa o site).
No Quadro 4, a seguir, você verá algumas propriedades para definições de
tamanhos e espaçamentos.

37
38
 Fonte: Mariano & de Melo-Minardi (2017).

3.2.5 Posicionamento

CSS permite a definição de posicionamento de um elemento pela

propriedade position, que pode receber três possíveis valores: fixed, relative e
absolute (Figura 10). O valor relative posiciona elementos com base em seu canto
superior esquerdo. Sendo assim, elementos relative são inseridos abaixo de outros

39
elementos relative. Por padrão, novos elementos declarados recebem essa
configuração.

Figura 10 - Quadrados vermelho e azul (Div 1 e Div 2) declarados usando

a propriedade position com valores relative e absolute. Observe que absolute força o
quadrado azul a sobrepor o quadrado vermelho.

Fonte: Mariano e Melo-Minardi (2017).

A posição de elementos do tipo fixed e absolute pode ser definida com base
em quatro propriedades: (i) top: distância do elemento até o topo da página; (ii) right:
distância do elemento até a margem direita; (iii) bottom: distância do elemento até a
parte inferior da página; e (iv) left: distância do elemento até a margem esquerda.

40
4 TRABALHANDO COM LINKS E FORMULÁRIOS

4.1 Desenvolvimento de páginas HTML com links e âncoras

HTML permite que páginas sejam interligadas por meio dos chamados links
(SILVA, 2015). A tag âncora <a> é a responsável por isso, recebendo, no atributo
href, o endereço para o qual o link deve apontar, conforme exemplo a seguir:

<a href="#">Eu sou um link</a>

Por padrão, a maior parte dos navegadores exibe links de texto sublinhados
e na cor azul, exceto quando uma configuração diferente nas folhas de estilo CSS
especifique outra configuração para a apresentação visual de um link.

4.1.1 Links relativos

Links relativos apontam para arquivos locais, ou seja, um arquivo presente

no mesmo dispositivo do arquivo HTML em questão. Nos exemplos a seguir, você
verá a criação de duas páginas HTML: página 1 e página 2. Ambas apresentam
apenas um título indicando seu nome e um link para a página oposta.
Exemplo :
<h1>Eu sou a página 1</h1>
<a href="pagina2.html">Link para a página 2</a>

41
 O link da página 1 recebe como atributo o valor “pagina2.html”. Observe que
o valor deve ser exatamente igual ao nome do arquivo, incluindo a extensão .html.
Nesse caso, o arquivo da página 2 deve estar no mesmo diretório do arquivo da
página 1.
Observe, agora, a criação do arquivo “pagina2.html”.

<h1>Eu sou a página 2</h1>

<a href="pagina1.html">Link para a página 1</a>

A página 2 apresenta um link que aponta para a página 1. Ao executar as

páginas no navegador, é possível alternar de uma para outra, clicando nos links
criados.

4.1.2 Links absolutos

Links absolutos apontam para endereços externos. O valor de href deve

conter um protocolo de acesso, como http ou https seguido por duas barras, e o
endereço para o qual o link deve apontar.

<a href="https://www.google.com.br">Google</a>

42
4.1.3 Links para e-mails

Links também podem apontar para endereços de e-mail. Para isso, utilize a
palavra mailto seguida de dois-pontos e um endereço de e-mail. Nesse caso, o
navegador chamará o programa-padrão de envio de e-mails do computador,
informando que a mensagem deve ser enviada ao e-mail indicado.

<a href="mailto:pessoa@sagah.com.br">Contato por e-mail</a>

4.1.4 Links em imagens

Links podem ser combinados com imagens. Nesse caso, o código HTML da
imagem deve ser inserido dentro da tag âncora <a> no lugar do texto.

<a href="#">
<img src="...">
</a>

4.1.5 Atributo target

O atributo target indica o contexto de navegação que determinado link

deve carregar (nova aba, nova janela ou frame). No Quadro 5, a seguir, estão os
valores que podem ser atribuídos ao target.

43
 Quadro 05 - Valores que podem ser atribuídos ao target

Fonte: Mariano & de Melo-Minardi (2017).

4.2 Desenvolvimento de páginas HTML com formulários

Nos primeiros anos da Internet, as páginas Web eram estáticas, permitindo

ao usuário apenas a leitura de informações. Com a evolução da tecnologias e
linguagens de desenvolvimento Web, foi possível que usuários não apenas lessem,
mas, também, enviassem informações. Um exemplo, disso são os chamados
formulários (Figura 11).
Formulários permitem que usuários interajam com sistemas Web
(MARIANO; MELO-MINARDI, 2017), estabelecendo conexão entre cliente e
servidor, por meio do envio de informações a serem processadas por linguagens de
programação back-end.

Figura 11 - Criando formulários HTML.

Fonte: photovibes/Shutterstock.com.

44
 Formulários têm muitas utilidades, como em páginas de contato, que
permitem que o usuário do site envie informações para o criador (Figura 12).

Figura 12 - Exemplo de formulário para envio de e-mail.

Fonte: Mariano e Melo-Minardi (2017).

4.2.1 Tag <form>

Formulários podem ser criados com a tag <form>, que recebe diversos
atributos (<FORM>..., 2019), dentre eles:

 name — nome que identifica o formulário;

 action — endereço para onde o formulário deve ser enviado;
 method — post ou get ( quadro abaixo );
 enctype — valor usado como identificador de duas partes para
formatos transmitidos na Internet (usado para o método post). Pode
receber os valores: application/x-www-form-urlencoded
(valor padrão), multipart/form-data (para envio de arquivos) e
multipart/form-data (para HTML5).

45
 No exemplo a seguir, você verá como um formulário é criado. O atributo
action recebe a página para a qual o formulário será enviado (aqui denominada como
“processa_formulario.php”). O método utilizado foi o post, e o nome do formulário é
“meu_formulario”.

<form action="processa _ formulario.php" method="post"

name="meu _ formulario">
[...]
</form>

Quadro 06 - Métodos POST e GET

Fonte: Mariano e Melo-Minardi (2017).

4.2.2 Diferentes componentes de um formulário

Formulários são componentes HTML que recebem informações. A principal

tag utilizada por um formulário é a tag <input>, que contém diversos tipos. Além
disso, formulários também podem receber campos como <button> ou, até mesmo,
<label> para identificar rótulos.

4.2.2.1 Tag input

A tag <input> permite a inserção de dados em formulários e pode receber

como atributos:

46
  name — nome do formulário que será usado para processamento em
linguagens back-end;
 value — atributo que recebe o valor-padrão a ser exibido no
formulário;
 placeholder — texto que aparece dentro de caixas de texto;
 type — identificação do tipo de campo;

O Quadro 07, a seguir, mostra os tipos de input de formulários.

Fonte: Mariano e Melo-Minardi (2017).

4.2.2.2 Tipo text, email e password

Os campos text, email e password são bastante parecidos (Figura 3). A

principal diferença é que email verifica se o valor digitado corresponde a um e-mail
(busca pelo símbolo de @), e o password criptografa os valores digitados (oculta
caracteres).

<form action="#" method="post" name="formulario">

<h1>Text</h1>
<p>
<input type="text" name="texto" placeholder="Digite um

47
 nome">
</p>
<h1>Email</h1>
<p>
<input type="email" name="email" placeholder="Digite um
e-mail">
</p>
<h1>Senha</h1>
<p>
<input type="password" name="senha" placeholder="Digite
a senha">
</p>
</form>

O atributo placeholder exibe uma mensagem que desaparece quando se

clica no campo.

Figura 13 - Text, email e password.

Fonte: Mariano e Melo-Minardi (2017).

48
 4.2.2.3 Tipo checkbox e radio

Os campos checkbox e radio são dois tipos de campos de marcação (Figura

abaixo). A principal diferença entre eles é que grupos de campos checkbox podem
ser marcados múltiplas vezes, enquanto os de radio só permitem a escolha de um.

<form action="#" method="post" name="formulario">

<h1>Checkbox</h1>
<p>
<input type="checkbox" name="nome _ unico1" value="1" />
<label>1</label>
</p>
<p>
<input type="checkbox" name="nome _ unico1" value="2" />
<label>2</label>
</p>
<h1>Radio</h1>
<p>
<input type="radio" name="nome _ unico2" value="1" />
<label>1</label>
</p>
<p>
<input type="radio" name="nome _ unico2" value="2" />
<label>2</label>
</p>
</form>

Para que sejam identificados como um grupo, devem receber o mesmo

valor no campo name.

49
 Figura 14 - checkbox e radio.

Fonte: Mariano e Melo-Minardi (2017).

4.2.2.4 Tipos hidden e file

Campos do tipo hidden ocultam informações (Figura 5). Podem ser utilizados
para armazenar códigos de identificação ou qualquer outra informação que não
deve ser exibida para o usuário.
O tipo file permite o envio de arquivos.

<form action="#" method="post" name="formulario">

<h1>Arquivo</h1>
<p>
<input type="file" name="arquivo">
<input type="hidden" value="codigo _ secreto _ 123">
</p>
</form>
50
 Figura 15 - Envio de arquivos.

Fonte: Mariano e Melo-Minardi (2017).

4.2.2.5 Tipos button e submit

Botões button e submit permitem a execução de ações (Figura abaixo).

Entretanto, o botão do tipo submit é especial, pois é por meio dele que o formulário
é enviado.

<form action="#" method="post" name="formulario">

<h1>Botões</h1>
<p>
<input type="button" value="Botão comum">
<input type="submit" value="Enviar">
</p>
</form>

O atributo value é quem define o valor do texto que será exibido no botão.
Ao clicar em enviar, a página é redirecionada para onde o atributo action do <form>
indicar.

51
 Figura 16 - Botões.

Fonte: Mariano e Melo-Minardi (2017).

4.2.2.6 Tag <select>

As tags <select> (Figura 7) permitem que o usuário selecione entre uma série
de opções determinadas pelas tags <option>.

<form action="#" method="post" name="formulario">

<h1>Select</h1>
<p>
<select name="selecione">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
</form>

Observe que a tag <option> recebe o atributo value que define o valor a ser
enviado, seguido por um valor que será mostrado para o usuário.

52
 Figura 17 - Select.

Fonte: Mariano e Melo-Minardi (2017).

4.2.2.7 Tag <textarea>

Tags do tipo <textarea> (Figura 18) são parecidas com <input> do tipo text,
servindo para receber valores em texto. A principal diferença é que <textarea>
permite que o valor da caixa seja alterado.

<form action="#" method="post" name="formulario">

<h1>Textarea</h1>
<p>
<textarea cols="50" rows="10"></textarea>
</p>
</form>

O tamanho de áreas de texto pode ser alterado por meio dos atributos cols
(número de colunas) e rows (número de linhas).

53
 Figura 18 - Textarea.

Fonte: Mariano e Melo-Minardi (2017).

5 TRABALHANDO COM LISTAS E TABELAS

É comum criarmos conteúdo da Web procurando maneiras de organizar as

informações para as tornar mais legíveis. Uma forma de organizar o texto é por meio
de listas e tabelas. Existem dois tipos de listas: ordenada (numerada, com letras,
etc.) e não ordenada (com marcadores). Tabelas podem ser utilizadas tanto para
organizar informações como a própria estrutura da página Web.

5.1 Listas HTML

As listas HTML são usadas para especificar listas de informações, podendo

conter um ou mais elementos dessa lista. Existem três tipos diferentes de listas em
HTML (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line):

 ordenada ou numerada (ol);

 não ordenada ou com marcadores (ul);
 de descrição ou de definições (dl).

54
5.1.1 Lista ordenada em HTML

Lista ordenada em HTML, ou lista numerada, exibe elementos em formato

numerado e utiliza a tag HTML <ol> é. Podemos usar a lista de pedidos para
representar itens no formato de pedido numérico ou alfabético – ou em qualquer
formato em que um pedido seja enfatizado. Pode haver diferentes tipos de lista
numerada (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line):

 número indo-arábico (1, 2, 3);

 número romano maiúsculo (I II III);
 número romano minúsculo (i ii iii);
 alfabeto maiúsculo (ABC);
 alfabeto minúsculo (abc).

Para representar diferentes listas ordenadas, existem cinco tipos de

atributos na tag <ol>, conforme Quadro 8, a seguir.

Quadro 8 - Tipos de listas ordenadas

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

No Quadro 9, vemos um exemplo da lista ordenada em HTML que exibe

quatro tópicos. Aqui não estamos definindo type="1" porque é o tipo-padrão.

55
 Quadro 9 - Lista ordenada com tópicos padrão (números indo-arábicos)

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

Agora, no Quadro 3, é exibido um exemplo da lista em número romano em

maiúsculas, usando o tipo “I”.

Quadro 10 - Lista ordenada com tópicos tipo “I” (números romanos

maiúsculos)

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

O atributo start é usado com a tag <ol> para especificar onde iniciar os itens
da lista, conforme os tipos apresentados no Quadro 11, a seguir.

56
 Quadro 11 - Tipos do atributo start

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

Veja o exemplo do Quadro 5, a seguir.

Quadro 12 - Veja o exemplo do Quadro 5, a seguir.

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

O atributo reversed é um booleano da tag HTML <ol> e uma novidade da

versão HTML5. Se você usar o atributo invertido com tag, numerará a lista em ordem
decrescente (7, 6, 5, 4, ..., 1), como mostra o Quadro 13.

57
 Quadro 13 - Lista com atributo reversed

Fonte: Adaptado de Smith (2012, documento on-line).

5.1.2 Lista não ordenada em HTML

Lista não ordenada HTML, ou lista com marcadores, usa a tag HTML <ul> e
exibe elementos no formato com marcadores. Podemos usar uma lista não
ordenada em que não precisamos exibir itens em nenhuma ordem específica.
Existem quatro tipos de lista com marcadores, como mostrado no Quadro 14
(RAGGETT; LE HORS, JACOBS, 1999, documento on-line):

 disco;
 círculo;
 quadrado;
 nenhum.

Quadro 14 - Tipos de marcadores em listas não ordenadas (listas com

marcadores).

Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).

58
 A seguir, no Quadro 15, há um exemplo de lista não ordenada HTML da
opção type="square".

Quadro 15 - Exemplo de lista não ordenada com marcadores do tipo

square

Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).

O atributo type não é suportado no HTML5. Em vez do tipo, pode-se usar a

propriedade CSS do tipo de estilo de lista. A seguir, no Quadro 16, é apresentado o
exemplo para mostrar a propriedade CSS da tag ul.

Quadro 16 - Exemplo de propriedade CSS do tipo de marcador para itens

dentro da tag ul

Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).

59
5.1.3 Lista de descrição HTML

Lista de descrição HTML, ou lista de definições, exibe elementos no formato

de definição, como no dicionário. As tags <dl>, <dt> e <dd> são usadas para definir
a lista de descrição (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line):
As três tags da lista de descrição HTML são as seguintes (Quadro 17):

 tag <dl> define a lista de descrição;

 tag <dt> define o termo de dados;
 tag <dd> define a definição de dados (descrição).

Quadro 17 - Tags da lista de descrição HTML

Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).

5.2 Tabelas em HTML

A tag da tabela HTML é usada para exibir dados em forma de tabela

(linha×coluna), podendo haver muitas colunas seguidas (PRESCOTT, 2015).
Podemos criar uma tabela para exibir dados em forma de tabela, usando o
elemento <table>, com a ajuda dos <tr>, <td> e <th>.

60
 Em cada tabela, a linha é definida pela tag <tr>, o cabeçalho por <th>, e os
dados pelas tags <td>. Observe a descrição de cada um desses elementos no
Quadro 18, a seguir.

Quadro 18 - Descrição dos elementos de tabela HTML

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999b, documento on-line).

A seguir, veja um exemplo das tags da tabela HTML.

Código:

<table>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Peso</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>

61
 <td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>

Saída:

Na tabela HTML do exemplo anterior, existem cinco linhas e três colunas

= 5 × 3 = 15 valores.
Há duas maneiras de especificar borda para tabelas HTML: por atributo

62
de borda da tabela em HTML ou por propriedade border em CSS. Não é mais
recomendada a utilização da maneira por atributo em HTML, e sim por propriedades
CSS (PRESCOTT, 2015).

Código:

<style>
table, th, td {
border: 1px solid black;
}
</style>

Você pode recolher todas as bordas em uma por meio da propriedade

border-collapse.

Código:

<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>

Saída:

63
 Você pode especificar o preenchimento para o cabeçalho e os dados da
tabela de duas maneiras: pelo atributo cellpadding da tabela em HTML ou
preenchendo a propriedade CSS. O atributo cellpadding da tag da tabela HTML está
obsoleto desde a versão do HTML5. Nesse caso, é recomendável usar CSS. Então,
veremos o código do CSS (PRESCOTT, 2015):

Código:

<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

Saída:

Podemos especificar a largura da tabela HTML usando a propriedade CSS

width, em pixels ou porcentagem.

64
 Código:

table{
width: 100%;
}

Se você deseja fazer uma célula abranger mais de uma coluna, é possível
usar o atributo colspan. Ele dividirá uma célula/linha em várias colunas, e o número
de colunas depende do valor do atributo colspan. Vamos ver o exemplo que abrange
duas colunas.

Código CSS:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>

Código HTML:

<table style=”width:100%”>
<tr>
<th>Nome</th>
<th colspan=”2”>Telefone</th>
</tr>
<tr>

65
 <td>João Silveira</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>

Saída:

Se você deseja fazer uma célula abranger mais de uma linha, você pode
usar o atributo rowspan. Ele dividirá uma célula em várias linhas. O número de linhas
divididas dependerá dos valores das linhas. Vamos a um exemplo que abrange
duas linhas.

Código CSS:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

66
 Código HTML:

<table>
<tr>
<th>Nome</th>
<td>João Silveira</td>
</tr>
<tr>
<th rowspan=”2”>Telefone</th>
<td>7503520801</td>
</tr>
<tr>
<td>9555879135</td>
</tr>
</table>

Saída:

5.3 Páginas Web com listas e tabelas

Criar leiautes é a coisa mais importante no desenvolvimento de um site, pois

garante que o site tenha uma aparência bem-organizada e o conteúdo pareça de
fácil entendimento. Existem várias técnicas e estruturas disponíveis para criar
leiautes. O leiaute baseado em tabela HTML é uma das maneiras mais fáceis de
criar um leiaute, pois a tabela usa apenas linhas e formato baseado em coluna
(FLATSCHART, 2011).

67
 Uma tabela contém um conjunto de colunas e linhas de dados reais, e cada
linha consiste em uma ou mais células. Dentro das células da tabela, você pode
adicionar outras tags HTML, além do texto normal, como imagem, links, lista, tabelas,
etc. Também é possível criar tabelas aninhadas, as quais podem levar a leiautes de
tabelas complexas (FLATSCHART, 2011).
Diferentes tipos de leiaute de páginas Web podem ser criados com tabelas.
O exemplo a seguir usa uma tabela com 3 linhas e 2 colunas — a primeira e a
últimas linhas abrangem duas colunas com o uso do atributo colspan (Figura
abaixo).

<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#ccc;">
<h1>Título Principal da Página</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ddd;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eee;height:200px;width:400px;t
ext-align:top;">
O conteúdo vai aqui.</td>
</tr>
<tr>

68
 <td colspan="2" style="background-color:#ccc;text-align:center;">
Direitos reservados</td>
</tr>
</table>
</body>
</html>

Figura 19 - Leiaute básico de duas colunas, um cabeçalho e um rodapé.

Fonte: Codex (2017, documento on-line).

Outros leiautes de páginas Web podem ser criados com tabelas, como
leiaute de duas colunas com um cabeçalho, leiaute de duas colunas com cabeçalho,
barra de navegação e rodapé ou um leiaute de três colunas. Poderá ser escolhida
a forma que melhor se adequar ao seu projeto de página.

69
6 MANIPULANDO BROWSER OBJECT MODEL, COOKIES E
TEMPORIZADORES EM JAVASCRIPT

O browser object model não trata de um elemento padronizado, mas de livre

implementação de cada um. Mesmo assim, há um grande denominador comum
entre o modelo de cada navegador, e muitas funções estão presentes nos principais
interpretadores disponíveis no mercado. Os objetos podem incluir desde
temporizadores até lista de quadros da página, ou, ainda, o histórico do navegador.
Por ser do topo da hierarquia de objetos em um navegador, o browser object model
tem acesso a características próprias do navegador e da máquina que o utiliza, ao
contrário do objeto document, vinculado diretamente à página em si.

6.1 Browser object model

O núcleo de uma implementação em JavaScript para navegadores observa

o padrão ECMAScript, mas existem outras partes não incluídas nele e que são
frequentes nesse tipo de sistema, como o browser object model (BOM) – ou modelo
de objeto do navegador. Na verdade, o ECMAScript não restringe a implementação
da linguagem que pode adicionar particularidades para além do núcleo padronizado
(ECMA INTERNATIONAL, 2015).
Os navegadores modernos mais se parecem com um sistema operacional
básico do que com os primeiros navegadores unicamente destinados à exibição de
um documento (FLANAGAN, 2013).
Uma vez que o objeto é o tipo fundamental da linguagem JavaScript, é
natural que os navegadores – que correspondem a uma parcela considerável dos
ambientes hospedeiros – disponibilizem objetos, sejam controlados e se
comuniquem por meio deles.
O BOM é um objeto que abrange os elementos não pertencentes à página
em si, como: janela, histórico, barra de endereço, barra de status e tantos outros.
Assim como qualquer outro objeto, o BOM é um conjunto de chaves e valores que

70
representa as propriedades e os métodos do navegador. Já que o BOM não é
padronizado pela linguagem, cada implementação pode desenvolver o seu próprio
modelo de objeto. Devido a isso, deve-se ter bastante cuidado ao utilizar esse
objeto, uma vez que o comportamento pode diferir de navegador para navegador.
Na maioria dos navegadores, o BOM é acessível por meio de objeto denominado
window, pelo qual grande parte das funcionalidades e propriedades é
compartilhada, apesar de inexistir padronização (SAGA, 2020)
O window pode ser referenciado pela palavra reservada this que, em outras
implementações, costuma referir-se ao objeto global, como era o caso do
interpretador Node.js. Dessa forma, todos elementos globais, sejam objetos,
variáveis ou funções, são filhos do objeto global window e podem ser acessados
diretamente pelo seu nome quando o contexto for o mesmo do global ou por meio
da notação ponto em conjunto com o objeto window, como no seguinte exemplo
(FLANAGAN, 2013).

Exemplo :

window.obj = { prop1: 1 }
console.log(obj.prop1) // escreve 1
console.log(window.obj.prop1) // escreve 1

O objeto window assume todas as demais janelas abertas a partir dele como
de mensagem – janelas de pop-up. Essas janelas adicionais estão associadas a
window. Na verdade, são objetos membros dele e, como tal, fazem parte do BOM.
O objeto modelo do navegador é o ponto de partida de um sistema Web
para a linguagem JavaScript. Qualquer declaração de variável, objeto ou função
será um elemento novo e inferior nessa hierarquia.
Mesmo sem um padrão determinado, o BOM pode organizar os objetos
filhos em seis categorias principais de objetos dependes, sem mencionar as
propriedades e funções próprias desse.

71
6.2 Objetos do BOM

Diretamente ligados ao objeto window, existem propriedades e métodos de

manipulação da janela em si.
O tamanho e a posição da janela e seu documento podem ser controlados
por meio de funções de:

 redimensionamento absoluto (resizeTo) ou relativo (resizeBy), para

modificar largura e altura da janela, movendo o ponto da extremidade
inferior direita;
 mudanças de posição absoluta (moveTo) ou relativa (moveBy), a
partir do ponto referente à extremidade superior esquerda da janela;
 rolagem de página absoluta (scrollTo) ou relativa (scrollBy), para
alterar a posição em que uma página maior que a tela é exibida.

Também é possível abrir ou fechar novas janelas utilizando:

 gerador de mensagens de alerta simples (alert), informando uma

string a ser exibida em conjunto com um botão de finalização;
 mensagens de confirmação (confirm), contendo botão de
confirmação, que retornará true, e de cancelamento, que retornará
false;
 nova janela de diálogo para receber valores do usuário (prompt);
 abertura de novas janelas ou abas (open) a depender de como o
interpretador implementou a função, normalmente informando
características como página, dimensões, entre outros;
 fechamento da janela atual (close).

72
 Outras funções comuns incluem, ainda, controle de foco, utilizando focus
para direcioná-lo à janela, e blur, para tirá-lo da janela atual, além de interrupção de
carregamento de página (stop).
Obviamente, esses métodos e funções controlam uma série de
propriedades, dentre as quais as mais frequentes estão no Quadro 19, a seguir.

Quadro 19 - Propriedades do objeto window

73
 Fonte: Adaptado de The Window... (2019).

O objeto window é apenas o topo de uma hierarquia de outros objetos

comuns nos navegadores. Deve-se frisar sempre que não há um padrão para essa
implementação, mas existem muitos objetos em comum no BOM entre os
navegadores. Os principais e mais comuns, podem ser vistos isoladamente na
Figura 20, a seguir.

Figura 20 - Principais objetos do BOM.

Fonte: Lenz (2020)

Cada um desses objetos apresentados expõe uma parte do navegador ou

da página atual e apresenta suas próprias funções e propriedades.

74
6.2.1 Objeto document

O objeto de maior importância no desenvolvimento Web, contém a página

HTML carregada pela janela do navegador, sendo ela o foco principal não apenas
do programador, mas do usuário.
Assim como o BOM, o objeto document também é costumeiramente
referenciado pelo seu acrônimo DOM (do inglês document object model). É por meio
do DOM que se pode acessar e modificar o conteúdo da página que está sendo
exibida pelo navegador (FLANAGAN, 2013).
Como qualquer outro objeto, o DOM apresenta métodos e propriedades
próprios. A sua estrutura organiza os elementos de uma página por categorias,
facilitando encontrar imagens ou formulários presentes, por exemplo.

6.2.2 Objeto frames

Este objeto lista todos os quadros existentes no objeto window na forma de

um array de objetos. Assim, cada um dos quadros é acessado por meio de um
índice, ordenado na ordem em que aparecem cada um dos quadros, conforme
exemplo a seguir.

const quadros = window.frames

for (let i in quadros)
{c
onsole.log(quadros[i]) // exibe o objeto de cada quadro
no console do navegador
}

Os quadros correspondem às tags <frame> e <iframe> do padrão HTML.

Porém, com o novo padrão HTML5, os elementos <frame> deixaram de existir,
mantendo apenas os <iframe>.

75
6.2.3 Objeto history

Este mantém o histórico de páginas acessadas pela janela, sendo possível:

 retornar às páginas anteriores por meio da função back();

 avançar para páginas mais recentes no histórico, com a função
 forward();
 carregar novas páginas a partir de um endereço uniform resource
locator
 (URL, que em português significa “localizador uniforme de recursos”)
 — com a função go();
 retornar a quantidade de páginas já acessadas por meio da
propriedade
 length.

6.2.4 Objeto screen

Este armazena informações referentes à tela do usuário que visualiza a

página como: quantidade de pixels em altura (availHeight) e largura (avail- Width)
disponíveis, excluindo a barra de tarefas do sistema operacional; resolução de cores
utilizada (pixelDepth e colorDepth); altura (height) e largura (width) totais da tela.

6.2.5 Objeto navigator

Este contém informações e métodos referentes ao navegador, dados sobre

o aplicativo: nome (appName), versão (appVersion), plataforma (platform); e nome
do motor utilizado pelo aplicativo (product). Além disso, disponibiliza algumas
configurações: permissão para armazenar cookies (cookieEnabled); localização
geográfica do usuário (geoLocation); idioma utilizado (language); e se o navegador

76
está on-line (onLine). Por fim, a maioria dos navegadores contém um cabeçalho de
informações sobre o usuário do navegador, que é enviado para o servidor
(userAgent).

6.2.6 Objeto location

O último objeto apresentado é o location, no qual constam informações

quanto ao nome do servidor, ao protocolo, à porta e ao endereço da página que
estão sendo acessados na janela, retornados pelas propriedades: origin, com
protocolo, nome e porta; host, retorna nome e porta; hostname, apenas o nome;
protocol, apenas o protocolo; port, apenas a porta; pathname, apenas o caminho
que precede o arquivo do endereço; href, o endereço completo; hash, retorna os
valores ancorados após o endereço, simbolizados pelo prefixo “#”; e search, que
retorna os parâmetros de consulta inseridos após o endereço, simbolizados pelo
prefixo “?”.
O exemplo a seguir apresenta o uso da propriedade search. Exemplo similar
poderia utilizar propriedade hash também, mas, nesse caso, o caractere de
referência seria o “#”.
Na próxima seção, serão estudados os temporizados e cookies.
Diretamente vinculado ao objeto window, existem funções de uso frequente, como
os dois tipos de temporizadores disponíveis: o periódico e de intervalos; e o de
atraso ou de evento único.
Os cookies, objeto pertencente ao document, têm objetivo de armazenar,
temporariamente, informações relevantes para o site, usuário ou servidor, que
permitam uma melhor interação do aplicativo com o sistema e o usuário em si.

77
 // http://www.sagah.com.br/index.html?valor=20
const resultado = window.location.search
let valor = 0;
// separa a string em duas no caractere '='
const splitted = resultado.split('=')
// verifica se o texto anterior ao '=' é '?valor'
if (splitted[0] === '?valor')
{ // converte a
parte após o
símbolo de '=' para inteiro
valor = Number.parseInt(splitted[1])
}
// exibe 25, o resultado de 20 + 5
console.log(valor + 5)

6.3 Cookies e temporizadores em JavaScript

Entre os objetos disponibilizados pelo BOM, duas funções se destacam: a

memorização de dados por meio de cookies e a temporização.
Os cookies são pequenos arquivos de texto utilizados para armazenar
dados referentes à navegação do usuário em uma determinada página, para que,
quando ele acesse novamente a página, algumas das informações já estejam
disponíveis, possibilitando interações mais rápidas e carregamento mais eficiente.
Para isso, utilizam-se de dados já armazenados no passado e que se sabe,
mediante interação com o servidor, que não foram alterados.
Esse recurso pode, inclusive, armazenar informações de login, como nome
de usuário e senha, para que não seja necessário fornecer os dados toda vez que
a página for acessada.
Cada cookie é referenciado por um nome e está associado diretamente a
um endereço de uma página específica, ficando armazenado no lado do cliente.

78
Porém, podem ser acessados e manipulados pelo lado do servidor por meio do
envio de dados do cookie entre as partes (FLANAGAN, 2013).
Por se tratar de uma API antiga, a manipulação de cookies diverge bastante
da usual. Qualquer procedimento envolve a leitura ou escrita da propriedade
window.document.cookie.

// cookies permitidos?
if (window.navigator.cookieEnabled === true)
{ // cria um novo cookie de nome login
window.document.cookie = 'login=alberto'
// cria um novo cookie de nome pass
window.document.cookie = 'pass=14bis'
}

No exemplo anterior, caso o navegador esteja configurado para permitir a

criação de cookies (cookieEnabled), dois novos cookies são criados – isso, claro,
se ainda não existirem cookies com o mesmo nome vinculados ao endereço
daquela página. Nesse último caso, os cookies existentes seriam substituídos pelos
novos.
O recurso permite, ainda, a especificação de alguns atributos, como o
tempo de vida do cookie, já que, por padrão, cookies duram apenas enquanto a
mesma sessão do navegador existir. Para contornar essa restrição, o atributo
expires determina a data que, uma vez ultrapassada, excluirá automaticamente o
cookie, como o caso no exemplo a seguir.

// cookies permitidos?
if (window.navigator.cookieEnabled === true)
{
// data/hora atuais
Let hoje = new Date()
// data/hora mais 1 hora

79
 Let expira = new Date(hoje.getTime() + 3600000)
// concatena o cookie e seu atributo "expire" com o
valor de data/hora desejada
window.document.cookie = 'idioma=português; expires=' +
expira.toUTCString()
}

Nesse exemplo, o cookie de nome “idioma” seria criado com o valor

português e um prazo de validade de uma hora. Uma vez decorrido esse prazo, o
valor seria eliminado.
Outros atributos podem incluir a especificação de um caminho que deve
estar presente na URL, para que o cookie seja enviado por meio de path, e a
determinação de um prazo em segundos, max-age.
Já os temporizadores dentro do BOM podem ser divididos em duas funções:
setTimeout e setInterval.
O método setTimeout recebe dois parâmetros: o primeiro do tipo função,
para referenciar a função que deverá ser executada ao cumprir o tempo
especificado; e o segundo será o próprio tempo em milissegundos que o sistema
deverá aguardar até chamar a função.
Para o método setInterval, os parâmetros são os mesmos e apresentam as
mesmas finalidades da função setTimeout. O único diferencial é que, nesse caso,
não estão sendo determinado um atraso para a execução da função uma única vez,
e sim um intervalo de tempo em que ela deverá ser chamada periodicamente.
No exemplo a seguir, a função mostrarTeste é invocada após cinco
segundos, mostrando a mensagem “Teste” no console do interpretador.

Function mostrarTeste()
{
console.log('Teste')
}w
indow.setTimeout(mostrarTeste, 5000)

80
 É possível interromper ambos os temporizadores, informando a instância
criada pelo acionamento do temporizador às respectivas funções: clear- Timeout e
clearInterval. O seguinte exemplo armazena a referência ao temporizador criado
pela função setInterval, para interrompê-lo após cinco segundos contados por outro
temporizador, utilizando o setTimeout. Logo, a função mostrarTeste será executada
repetidamente a cada 1000 ms até que o clearInterval seja invocado pelo timeout.

Function mostrarTeste()
{
console.log('Teste')
}L
et timer1 = setInterval(mostrarTeste, 1000)
Let timer2 = setTimeout(function teste() {
clearInterval(timer1);
console.log('Fim') }, 5100)

Como você pôde ver, o modelo BOM é bastante amplo e, apesar de muito
utilizado, não possui um padrão definido. No entanto, os principais navegadores
mantêm funções e objetos similares entre si, o que facilita a integração e o
desenvolvimento de aplicativos universais.
Devido ao tamanho e à complexidade do objeto atualmente, o BOM
costuma ser subdividido, categorizando e vinculando cada objeto a uma parte do
navegador, da tela ou da janela. Uma vez que o objeto de maior interesse de um
aplicativo de navegação Web é a própria página que está sendo acessada, é natural
que um determinado objeto que o englobe tenha algum destaque. É o caso do
objeto document, que concentra todas as informações referentes à página em si.

81
7 COMPONENTES DO REACT

O desenvolvimento Web baseado na arquitetura de componentes, ou

componentização, vem ganhando muito espaço nos últimos anos pelos inúmeros
benefícios trazidos aos desenvolvedores e projetos de desenvolvimento que
adotam essa abordagem. Os componentes de interfaces baseados em JavaScript
são a base da maioria das bibliotecas e frameworks de front end modernas. Eles
auxiliam o desenvolvedor a organizar sua aplicação, reutilizar seu código, mantendo
baixos acoplamento ou dependência – onde os componentes têm funcionalidades
independentes uns dos outros — e alta coesão — onde eles têm padrões que os
fazem interagir e integrar-se de maneira fácil e simples (FLANAGAN, 2013).
Segundo Stefanov (2016), uma das principais características é a forte
aderência à arquitetura de componentes, que possibilita separar a interface do
usuário em blocos reutilizáveis, independentes e que proporcionam ao
desenvolvedor a facilidade de elaborar cada componente isoladamente.
Componentes são definidos como “[..] funções JavaScript. Eles aceitam
entradas arbitrárias (chamadas “props”) e retornam elementos React que
descrevem o que deve aparecer na tela” (COMPONENTES..., 2019, documento on-
line).
Os componentes do React podem seguir alguns padrões de estruturas
diferentes, sendo os mais comuns por meio de uma função JavaScript, como o
trecho de código da Figura 21, a seguir.

Figura 21 - Componente estruturado por meio de JavaScript.

Fonte: Adaptada de Introduzindo... (2019).

82
 O componente deve iniciar com function e, após, o nome a ser dado,
sempre usando as iniciais em maiúsculo. Por fim, o retorno da função em que se
deve utilizar a expressão return ... ; (finalizado pelo ponto e vírgula), onde
retornaremos ao que desejamos que apareça na tela do usuário, usando os padrões
definidos pela sintaxe JSX, sendo possível escrever nosso HTML com comandos
JavaScript em um mesmo trecho de código. A única diferença inicial é que a
propriedade class do HTML virou className, a fim de se evitar conflito com a
declaração de classes do JavaScript.
A segunda forma de escrever um componente é por meio da notação do
ES6 (ECMAScript 6), que define uma maneira simples e clara de se escrever uma
classe, que são funções especiais do JavaScript, mas, para o React, têm
equivalência às funções tradicionais, como no exemplo da Figura 1. A seguir, na
Figura 22, é mostrado um exemplo do mesmo componente sendo estruturado nesse
padrão.

Figura 22 - Componente estruturado por meio de ES6.

Fonte: Adaptada de Componentes... (2019).

As classes devem sempre iniciar com a definição class, depois, o nome da

classe com a inicial em maiúsculo, definindo a herança da classe de componentes
do React por meio da notação extends React.Component. Essa herança é opcional,
porém recomendada. A maior diferença interna é que o retorno do que deve ser
exibido ao usuário deve estar dentro de um método chamado render(){ ... } (um
método é uma função que pertence à classe).

83
7.1 Renderização de componentes

A renderização é o que faz o resultado dos componentes aparecerem na

interface do usuário, ou seja, faz a atualização do HTML DOM, que é a árvore de
componentes ou tags que formam a página que está sendo exibida pelo browser do
usuário (REACT..., 2019).
A forma mais simples de renderizar um componente é pelo método React.
DOM(), que espera por parâmetro o componente a ser renderizado e o local em que
o mesmo será colocado no HTML DOM. O código da Figura 23 é um exemplo da
renderização do componente <Exemplo />.

Figura 23 - Renderização do componente <Exemplo />.

Fonte: Adaptada de Componentes... (2019).

Se esse procedimento for executado em uma página com a estrutura do

React, o resultado seria o código HTML mostrado na Figura 24, gerado e inserido
dentro de uma tag com o id="idTag".

Figura 24 - Código HTML em página com estrutura do React.

Fonte: Adaptada de Renderizando... (2019).

84
7.2 Props

Os componentes do React aceitam parâmetros passados, para que valores

externos sejam utilizados dentro de cada componente. Esses valores devem ser
utilizados apenas para passagem de informações entre componentes e não devem
ser alterados, pois essa responsabilidade é do estado do componente (REACT...,
2019; STEVANOV, 2016).
Um exemplo de como estruturar um componente com função e props pode
ser visto na Figura 25, a seguir.

Figura 25 - Estruturação de componente com função e props.

Fonte: Adaptada de Componentes... (2019).

Já na Figura 6, há um exemplo de classes, em que precisamos sempre usar

a referência ao objeto criado pela classe. Sendo assim, necessitamos do this. props
quando queremos acessar as propriedades desse objeto.

Figura 26 - Estruturação de componente por classe.

Fonte: Adaptada de Componentes... (2019).

85
 Para o envio de informações externas para o componente, precisamos criar
essas propriedades quando estivermos chamando o componente e passar valores
a cada uma das propriedades que se deseja utilizar (Figura 27).

Figura 27 - Envio de informações externas para o componente.

Fonte: Adaptada de Componentes... (2019).

Assim, é possível renderizar o componente, conforme exemplo da Figura

28, a seguir.

Figura 28 - Renderização de componente.

Fonte: Adaptada de Componentes... (2019).

O resultado no HTML do browser seria o seguinte (Figura 29).

Figura 29 - Resultado no HTML do browser.

Fonte: Adaptada de Renderizando... (2019).

86
7.2.1 Props entre componentes

Um recurso bastante interessante, quando a aplicação vai crescendo e o

número de componentes aumentando, é a interação entre componentes (Figura
30).

Figura 30 - Interação entre componentes.

Fonte: Adaptada de Componentes... (2019).

Esse exemplo mostra a criação de um chamado Exemplo1, que monta um

conteúdo HTML a ser retornado, incluindo três vezes o componente Exemplo2 e
usando a props name para modificar o retorno de cada inclusão.
Na prática, os elementos são renderizados uma única vez, mas, para isso,
deve-se trabalhar com o conceito de componentes em estado. Assim, o ReactDOM.
render() chama uma única vez a renderização do componente e, depois, modifica
seu estado.

87
7.3 Criação de página com componentes do React

A partir de agora, você realizará um passo a passo para criar a primeira

aplicação em React utilizando componentes e props. Para facilitar o trabalho, você
deve instalar o ambiente Create React App, disponibilizado pelo Facebook,
onde toda a instalação e configuração prévia são feitas de maneira automática e é
criada uma single-page aplication, que será o ponto de partida para o
desenvolvimento do projeto (CREATE..., 2019).
Para realizar o procedimento, é necessário ter o Node.js na versão 8.10 (ou
superior) e o nmp 5.6 (ou superior) instalados na sua máquina. Abra o terminal de
comando de seu sistema operacional na pasta em que deseja criar um projeto novo
e execute cada linha dos comandos apresentados na Figura 31.

Figura 31 - Comandos.

Fonte: Crie... (2019, documento on-line).

O primeiro comando usa o npx, um package runner do npm que executa um

script que cria uma estrutura-padrão dentro da pasta my-app, criada no local onde
você executou o terminal de comando. Depois, o comando cd my-app abre o diretório
criado, e o terceiro inicia a aplicação em um servidor local na porta 3000, podendo
ser acessado pela URL http://localhost:3000/.
A Figura 32 mostra a estrutura do projeto e o servidor executando a
aplicação- padrão que está sendo visualizada através do browser.

88
 Figura 32 - Estrutura inicial do projeto e página principal.

Fonte: Crie... (2019, documento on-line).

Para você começar a desenvolver, é interessante manter as duas telas

abertas, lado a lado, para que tudo que seja alterado no editor de texto possa ser
visto automaticamente na atualização do browser. Isso é feito pelo React de forma
instantânea, bastando salvar as alterações, sem precisar atualizar a página.
Lembre-se de sempre deixar o servidor rodando com o terminal aberto. Quando ele
não for mais acessível, volte ao terminal na pasta do projeto e execute o comando
npm start.
Primeiramente, você editará o arquivo index.html dentro da pasta public/ e
adicionará os links dentro da tag <head> ... </head> para estilizar a página com
Bootstrap 4. Não serão necessários todos, mas, como boa prática, já deixaremos
todos importados (Figura 33).

Figura 33 - Links importados para estilizar a página com Bootstrap.

Fonte: Adaptada de Bootstrap... (2019).

No arquivo src/App.js, será criado o componente principal, chamado de

<App />. Ele já está sendo renderizado pelo comando ReactDOM. render() no

89
arquivo scr/index.js, que insere o conteúdo dentro de uma <div id="root"></div> que
fica dentro página public/index. html, a principal do projeto. Esse componente
montará uma página html com os componentes <Header />, <Nav />, <Section /> e
<Footer />, que simulam a divisão de uma página inicial em HTML5 com um
cabeçalho, um menu, uma sessão de conteúdo e um rodapé. Na Figura 14, é
mostrado um exemplo de como ficou o arquivo src/App.js, que teve seu conteúdo
todo modificado.

Figura 34 - Exemplo de arquivo src/App.js.

90
91
 Fonte: Adaptada de Bootstrap... (2019).

Para manter uma boa estilização, é possível personalizar o arquivo src/

App.css (Figura 35) que está sendo importado no componente <App /> do arquivo
Asrc/App.js, visto no exemplo anterior.

92
 Figura 35 - Personalização do arquivo src/App.css.

Fonte: Adaptada de Bootstrap... (2019).

No componente <Nav />, criou-se quatro funções para alterar o conteúdo

da página. A cada clique em um link, usaram-se a função onClick e a notação JSX
{nomaDaFuncao}, para chamar uma função diferente para cada clique em um link
do menu, passando as props diferentes para cada renderização a ser feita dentro
da tag <section> </section> através de seu ID.
Ao final, o resultado é a página componentizada mostrada na Figura 36.

93
 Figura 36 - Página montada no exemplo.

Fonte: Personalização do arquivo src/App.css.

8 OBJETOS NATIVOS DO JAVASCRIPT

A definição de objeto é fundamental na linguagem JavaScript, sendo

que até mesmo as funções são tratadas como um objeto. Porém, cada
implementação da linguagem dispõe de um conjunto de objetos nativos, sendo
alguns deles naturais da própria linguagem.

8.1 Objetos nativos

Em qualquer linguagem, os valores de um endereço de memória podem ter

diferentes significados, dependendo do tipo de variável que ele representa ou é
utilizada para compreendê-lo. Na linguagem JavaScript, existem os tipos primitivos

94
— number, string, symbol, boolean, undefined e null — e os tipos de objeto que
definem coleções de valores, como o Array (SIMPSON, 2015a).
A diferença fundamental entre os diferentes tipos de variáveis é que, no
primeiro grupo, são manipulados valores de forma direta (tipos primitivos),
enquanto, no segundo, o que a variável armazena é o endereço de memória que
aponta para outros valores (FLANAGAN, 2013).
Sabe-se, no entanto, que, apesar de apresentar tipos de bem-definidos, o
JavaScript é uma linguagem fracamente tipada no sentido de que as variáveis não
contêm um tipo rígido (FLANAGAN, 2013) e podem ter valores atribuídos de
diferentes tipos de maneira extremamente dinâmica.
Os objetos podem ser compreendidos como conjuntos de chaves e valores
de qualquer tipo, inclusive um objeto pode conter outro como chave ou valor. A cada
par chave-valor é dado o nome de propriedade do objeto.
A forma mais simplificada de se definir um objeto pode ser vista no exemplo:

var obj = {}

A linha de código define uma variável cujo nome será associado a um

endereço de memória de um objeto vazio, ou seja, sem qualquer propriedade.
As propriedades de um objeto são declaradas seguindo o padrão “chave:
valor” e separadas umas das outras por vírgula, como na primeira linha do seguinte
exemplo, em que o objeto de nome carro contém as propriedades: cor, do tipo String
e valor azul, e marchas, de tipo Number e valor 5. Outras formas de se criar
propriedades podem incluir atribuições diretas (segunda linha) e literais (terceira
linha).

let carro = { cor: 'Azul', marchas: 5 } // objeto com 2

propriedades
carro.velocidadeMaxima = 200 // adiciona nova
propriedade
carro['Marca'] = 'Desconhecida' // adiciona nova

95
 propriedade

As propriedades podem ser adicionadas e, também, excluídas

dinamicamente por meio do código “delete objeto.propriedade”.
Dentre os vários tipos de objetos, encontram-se os especiais, como vetores
(Array) e funções (function), de forma que qualquer valor que não seja um tipo
primitivo é considerado um objeto em JavaScript — daí a sua importância
(FLANAGAN, 2013).
Há, no entanto, um conjunto de objeto predeterminados, denominados
objetos nativos, que acompanham a linguagem para oferecer ferramentas e dados
que facilitem o desenvolvimento de aplicações comuns. Esses são definidos pelo
padrão ECMAScript, assim como o restante da linguagem. Os objetos especiais já
citados anteriormente (Array e funções) são alguns exemplos desses objetos
nativos (ECMA INTERNATIONAL, 2015).
Atualmente, a linguagem possui uma quantidade considerável de objetos
nativos, de forma que eles já são agrupados e classificados pelo próprio padrão
ECMAScript — conforme serão apresentados na sequência cada uma dessas
categorias e os objetos que englobam.

8.2 Tipos de objetos nativos

Segundo o padrão ECMAScript, os objetos nativos podem ser classificados

em (ECMA INTERNATIONAL, 2015):

 objeto global;
 objetos fundamentais;
 objetos de número e data;
 objetos de processamento de texto;
 objetos de coleção indexada;
 objetos de coleção chaveada;

96
  objetos de dados estruturados;
 objetos de controle de abstrações de objetos;
 objetos de reflexão.

8.2.1 Objeto global

É o principal objeto de qualquer execução, não dispõe de construtor, nem

pode ser invocado como uma função, mas é criado logo antes de qualquer execução
do código em si, sendo, portanto, um objeto único. Apresenta, entretanto, uma série
de propriedades predefinidas que podem variar conforme a implementação da
linguagem (ECMA INTERNATIONAL, 2015).
Dentro do objeto global, são definidas as propriedades de valor: Infinity —
de tipo numérico utilizada para representar valores infinitos; NaN (Not a number ou,
em português, não é um número) — tipo numérico retornado em operações
matemáticas que resultaram em algum erro; undefined — simboliza que a variável
não teve seu valor definido ou a função não retorna um valor (SIMPSON, 2015a).
Por padrão, esse objeto apresenta, ainda, propriedades de funções:

 eval() — executa código representado por uma string;

 uneval()— representa um trecho de código por uma string;
 isFinite() — verifica se um número é finito;
 isNaN — verifica se um valor é do tipo NaN;
 parseFloat()— converte String para ponto flutuante;
 parseInt()— converte String para um número inteiro;
 decodeURI(), decodeURIComponent() encodeURI() e
 encodeURIComponent()— decodificam endereços de recursos.

O objeto global não tem um nome definido e é referenciado de diferentes

formas, dependendo da implementação da linguagem (FLANAGAN, 2013).

97
8.2.2 Objetos fundamentais

Todos os demais objetos são derivados de algum objeto fundamental. Os

mais utilizados são: Object, Function, Boolean e Symbol.
Repare que a própria função é, na verdade, um objeto para o JavaScript, e,
com isso, diferentemente de outras linguagens, a função pode ser passada como
parâmetro, atribuída a uma variável e declarar funções uma dentro da outra.
Sendo o Boolean um objeto, qualquer outro valor pode ser compreendido
como verdadeiro (true) ou falso (false) em uma expressão lógica. Todos os valores
diferentes de undefined, null, ± 0, false, NaN e Strings vazias serão interpretados
como verdadeiros (true).
Por fim, o objeto Symbol produz um valor único que pode ser utilizado como
identificador de propriedades de um objeto.
Outros objetos fundamentais são objetos de erro: Error, EvalError,
InternalError, RangeError, ReferenceError, StopIteration, SyntaxError, TypeError e
URIError. Esses podem ser utilizados como base para outras classes de exceções
a serem definidas pelo programador (ECMA INTERNATIONAL, 2015).
O primeiro, Error, é um objeto genérico do qual derivam os outros e que
implementa as propriedades mensagem e nome para descrever o erro.
O objeto EvalError é instanciado quando se tenta utilizar a função global
eval() com um parâmetro que seja possível de traduzir em um código executável
para a linguagem JavaScript, normalmente por não obedecer à sintaxe da
linguagem.
Um erro bastante comum é o RangeError, que ocorre sempre que uma
operação qualquer extrapolar os limites definidos para um dado — por exemplo: ao
referenciar tamanhos inválidos de um Array; ao tentar criar um objeto do tipo Date
com horários ou datas inválidos; ao especificar quantidades inválidas de dígitos para
um determinado valor numérico.
Ao se referenciar de forma inválida um endereço de memória qualquer, seja
para objetos, propriedades ou qualquer outra variável, é gerado um erro do tipo
ReferenceError. O exemplo mais recorrente é a tentativa utilizar identificadores

98
cujos nomes não foram atribuídos a nenhuma variável ainda, sendo impossível para
o interpretador traduzir aquele identificador para um endereço de memória.
Já o objeto SyntaxError é utilizado pelo interpretador quando este é incapaz
de compreender o código redigido. Os casos podem envolver: função sem nome;
bloco de código sem o finalizador }; uso indevido de palavras reservadas; entre
outros.
O TypeError ocorre quando a utilização da variável não está de acordo com
o tipo definido para ela e, apesar de o JavaScript ser fracamente tipado, não é
possível ao interpretador encontrar uma conversão válida. Pode ser encontrado na
tentativa de acessar propriedades inexistentes de um objeto, de se redefinir
constantes.
Por fim, os endereços de recursos que não forem possíveis de ser
codificados ou decodificados corretamente produzem um objeto do tipo URIError.
Alguns exemplos dos erros citados anteriormente podem ser vistos a seguir.

// RangeError
[].length = -1 // Comprimento deve ser sempre positivo
new Date('2019/30/30') // Data inválida.
(1.23).toFixed(-1) // Número de casas decimais deve ser positivo
// ReferenceError
variavel; // Referência a um nome não declarado
// SyntaxError
let var = 1 // var é uma palavra reservada
function(){ return 1 // função sem nome e bloco de código
sem fim }.
//TypeError
const obj = {} // Declarada uma referência constante.
obj = {} // Não pode receber o endereço de outro
objeto.
null.length // Objeto null não tem a propriedade.
// URIError
encodeURI('\uD800') // Não se pode codificar este caractere

99
8.2.3 Objetos de números e datas

Nesta categoria, constam três objetos: Number, Math e Date.

O objeto Number engloba todos os tipos numéricos e contém propriedades
que delimitam valores de intervalor, máximo, mínimo, infinito positivo e negativo.
O objeto Math abrange funções e propriedades recorrentes em operações
matemáticas, como logaritmo, exponencial, funções trigonométricas, além de
constantes, como o número pi e número de Euler.
Já o objeto Date representa um instante de tempo em milissegundos, mas
com propriedades e métodos que convertem, apresentam e facilitam operações
entre datas e tempos.

8.2.4 Objetos de processamento de texto

Constituem-se dos objetos String e RegExp. O primeiro elenca

propriedades e métodos para manipular cadeias de caracteres, que podem ser
acessados diretamente a partir de um tipo primitivo string, já que o JavaScript
converte a variável em um objeto. Já o segundo objeto, abreviação de regular
expression (expressões regulares), é utilizado para representar e buscar padrões
textuais em uma cadeia de caracteres, a fim de identificar elementos ou partes
específicas de um texto.

8.2.5 Objetos de coleção

Dados podem ser agrupados e ordenados por um índice na forma de

vetores, conhecidos pelo termo Array — neste caso, são ditos objetos de coleção
indexada (SIMPSON, 2015b).
Outra forma de criar coleções de dados usa chaves para identificar cada um
deles. São os objetos: Map — varre uma coleção retornando um Array com chave
e valor; Set — similar ao Map, mas com valores únicos resultantes da iteração;
WeakMap — o mesmo que um Map fracamente referenciado e não enumerável; e

100
WeakSet — referência apenas objetos, enquanto o Set é capaz de utilizar valores
de qualquer tipo.

8.2.6 Objetos de dados estruturados

Inclui os objetos ArrayBuffer, DataView e JSON, utilizados na troca de

informações entre sistemas.
O ArrayBuffer tem tamanho fixo e estrutura de dados binária, enquanto o
DataView funciona como um intérprete desse Array, tanto no procedimento de
leitura quanto de escrita.
JSON é um objeto de comunicação no formato textual, similar à descrição
literal de um objeto, mas apresentado em uma String (SIMPSON, 2015a).

8.2.7 Objetos de controle de abstrações

Promise e Generators são objetos que permitem o controle de fluxo

assíncrono e habilitam operações com iterações infinitas ou processamento de
dados paralelamente às demais instruções.

8.2.8 Objetos de reflexão

Objetos utilizados para criar armadilhas e capturar determinados eventos

em outros objetos. O Proxy é construído para monitorar objetos em específico,
enquanto o Reflect não tem construtor e serve para retornar informações a respeito
do próprio código, como consulta às propriedades e aos protótipos de um
determinado objeto.
Conforme o padrão da linguagem é atualizado, novos objetos nativos
surgem para atender às necessidades comuns de propriedades e métodos dos
programadores. Porém, mais importante do que conhecer cada um desses objetos

101
é saber como fazer uso deles. Para tanto, alguns desses objetos serão detalhados
e exemplificados a seguir.

8.3 Aplicação de objetos nativos em códigos JavaScript

Novos objetos estão sendo inseridos a cada ano pelo padrão ECMAScript,
mas alguns deles são amplamente utilizados e já fazem parte da linguagem há mais
tempo. A seguir, são detalhados os usos dos objetos Math, Date e RegExp.

8.3.1 Math

É um objeto estático, logo, não possui construtor. O objeto Math junto da

notação “.” será usado para acessar as constantes definidas em propriedades desse
objeto, bem como acessar os métodos de funções matemáticas comuns, passando
os valores como parâmetros de uma função.
Há duas formas básicas de se utilizar o objeto: Math.constante, em que a
palavra “constante” deverá ser substituída por um identificador válido existente no
objeto (PI, E, LN10, ...); e Math.função(), substituindo a palavra “função” pelo nome
de uma função válida (abs(), ceil(), etc.) (FLANAGAN, 2013).
Um problema simples de matemática, por exemplo, é o cálculo de uma área
circular a partir do valor do seu raio. A expressão matemática para tanto
corresponde a π ∙ r2 , sendo π (pi) uma constante cujo valor pode ser acessado
pela propriedade PI do objeto Math. A operação de multiplicação pode ser
solucionada pelo operador *, mas a operação de exponenciação do raio (r2 ) terá
de recorrer ao método pow(x, y) de Math, como no exemplo:

let r = 2
let area = Math.PI * Math.pow(r, 2) // area = π.r²

102
 Estão inclusas as funções trigonométricas: seno, cosseno, tangente,
tangente hiperbólica e seus inversos, utilizadas conforme o exemplo:

let cos _ x = Math.cos(x)

let sen _ x = Math.sin(x)
let tan _ x = Math.tan(x)
let arc _ cos _ x = Math.acos(x)
let arc _ sen _ x = Math.asin(x)
let arc _ tan _ x = Math.atan(x)

Todos os valores de ângulo devem ser em radianos e, assim, também serão

os resultados dessas funções.
Exponenciações, logaritmos e raízes também estão presentes:

Outras funções incluem truncamento e arredondamento de valores e

obtenção de máximos e mínimos de um conjunto de números.

let trun _ x = Math.trunc(x) // somente parte inteira de x

let abs _ x = Math.abs(x) // |x|
let ceil _ x = Math.ceil(x) // número inteiro superior mais
próximo
let fl _ x = Math.floor(x) // número inteiro inferior mais
próximo

103
 let rnd _ x = Math.round(x) // arredonda para o inteiro mais
próximo
let max _ x = Math.max(x) // maior número dentro da coleção
let min _ y = Math.min(y) // menor número dentro da coleção

Por fim, o objeto Math apresenta, ainda, uma função para gerar números
pseudoaleatórios entre 0 e 1: Math.random().
Operações que resultariam em erro matemático contêm valores definidos
para o JavaScript, utilizando os valores Infinity e NaN para os indicar. É o caso das
divisões por zero que resultam em um infinito positivo, exceto quando o numerador
também for igual a zero, cujo resultado será NaN (FLANAGAN, 2013).

8.3.2 Date

Auxilia na manipulação de datas e intervalos de tempo. Diferentemente do

Math, o objeto Date apresenta método construtor. Logo, além das funções estáticas
presentes no objeto, pode-se instanciar um novo objeto a partir da palavra
reservada new. O construtor aceita argumentos de tipos e quantidades diferentes
na criação de um novo objeto.
Se utilizado sem argumentos, o objeto é instanciado com os valores de data
e hora atuais do sistema: um único parâmetro numérico, os milissegundos após a
data e hora inicial de 01/01/1970. Já um parâmetro do tipo string pode especificar
ano, mês, dia, hora, minutos, segundos e milissegundos, desde que utilizando um
padrão de representação aceitável pelo objeto e seu método de conversão
Date.parse(). Por fim, pode-se invocar o construtor, utilizando mais de um valor
numérico e informando, pelo menos, os valores de ano e mês, sendo os demais
opcionais: new Date(ano, mês, dia, hora, minuto, segundo, milissegundo).
Após instanciado, o objeto não pode ter seus valores alterados por meio de
propriedades, sendo toda a manipulação feita por métodos, que podem operar com
base na hora local ou universal, quando o termo UTC estiver presente no método.

104
 Date.getFullYear() // ano no formato de 4 dígitos do objeto
Date.getMonth() // mês do objeto
Date.getDate() // dia do mês do objeto
Date.getDay() // dia da semana do objeto
Date.getHours() // hora do objeto
Date.getMinutes() // minutos do objeto
Date.getSeconds() // segundos do objeto
Date.getMilisseconds() // milissegundos do objeto
Date.getTime() // milissegundos desde 01/01/1970
Date.getTimezoneOffset() // minutos entre hora local e UTC

Para todos os métodos de retorno de valores do exemplo anterior, há um

equivalente para atribuição de valores, bastando substituir apenas os termos get
por set, com exceção do método getTimezoneOffset(), que não pode ser alterado.
Em ambos os casos, get e set possuem versões do mesmo método para
manipulação em horário universal (UTC), bastando inserir o termo UTC após a
palavra get/set, exceto para os métodos getTime() e setTime().
Há, ainda, métodos de conversão de valores para String ou JSON.

Date.toDateString() // formato textual da data local

Date.toUTCString() // formato textual da data em UTC
Date.toISOString() // padrão ISO-8601 da data/hora UTC
Date.toLocalDateString() // formatação local de data em texto
Date.toLocalString() // formatação local de data/hora
em texto
Date.toLocalTimeString() // formatação local de horário em
texto
Date.toString() // data/hora local em texto
Date.toTimeString() // hora local em texto
Date.valueOf() // objeto Date para milissegundos

105
 Os métodos estáticos Date.now() e Date.parse() retornam, em
milissegundos, o tempo decorrido desde a meia-noite do dia 01/01/1970, para o
primeiro caso, e a conversão de uma string para uma data no segundo caso.

8.3.2.1 RegExp

Expressões regulares são utilizadas para localização de padrões textuais

de forma a separar e identificar elementos específicos de um texto.
Um objeto RegExp pode ser criado a partir do construtor do objeto,
passando como parâmetros duas strings: uma informando o padrão de expressão
regular e outra de atributos globais. Pode-se usar como argumento outro objeto
RegExp (SIMPSON, 2015a).
Ao objeto, estão associadas cinco propriedades:

 global, indicando que o índice de varredura da RegExp deverá ser

cumulativo, permitindo executá-la várias vezes para encontrar cada
situação em que o padrão se repete;
 ignoreCase, com valor false, para diferenciar entre maiúsculas e
minúsculas;
 lastIndex, armazena a posição do último caractere em conformidade
com a expressão;
 multiline, para varrer múltiplas linhas;
 source, armazena o texto da expressão.

Depois de criado o objeto com a expressão que será utilizada na busca por
padrões, pode-se recorrer a dois métodos — exec() e test() —, inserindo como
parâmetro a string que será pesquisada. O primeiro método retornará um Array
contendo os resultados da comparação; enquanto o segundo apenas determinará
a existência ou não dos padrões com true e false.

106
 Em sua maioria, os caracteres de uma string utilizada na criação de um
padrão RegExp representam diretamente um texto buscado, mas há, ainda, os
metacaracteres com significados especiais:

[] // delimita uma classe de caracteres

[^] // negação de uma classe de caracteres
- // delimita um intervalo de caracteres
\w // somente caracteres alfabéticos
\W // somente caracteres não alfabéticos
\s // espaço em branco
\S // exceto espaços em branco
\d // dígitos de 0 a 9
\D // exceto dígitos de 0 a 9
{n,m} // ocorrência anterior no mínimo n e no máximo m vezes
{n,} // ocorrência anterior no mínimo n vezes ou mais
{n} // ocorrência anterior exatamente n vezes
? // ocorrência anterior nenhuma ou uma única vez
+ // mais de uma ocorrência anterior
* // ao menos uma ocorrência anterior
| // ou a expressão da esquerda ou da direita
() // agrupar metacaracteres especiais
(?:) // agrupa itens sem recordar dos caracteres do grupo
^ // início de string
$ // final de string
(?=) // caracteres a seguir devem corresponder a expressão
(?!) // caracteres a seguir não devem corresponder com a
expressão

A combinação de caracteres e metacaracteres forma um padrão que, se

atendido pela string buscada, retornará verdadeiro para o método test() e os

107
próprios resultados do filtro para o método exec(). No exemplo a seguir, o padrão
fornecido ao objeto RegExp permite a identificação de um horário no formato
“hora:minuto” em um texto.

let padrão = "(10|11|12|[1-9]):[0-5][0-9]"

let atributos = "gmi"
let reg = new RegExp(padrao, atributos)
let texto = "Agora são 9:53"
let horario = RegExp.exec(texto)

O padrão buscado pode ser dividido em dois grupos, um antes e outro após
o caractere “:”. Os grupos estão entre colchetes para determinar que os caracteres
pertencentes a cada um deles devem ser retornados individualmente no Array, e
não apenas avaliado o padrão total. Dessa forma, é possível identificar o horário e,
também, determinar os valores de hora e minuto pelo próprio RegExp.
A hora no texto pode ser de quatro maneiras diferentes: o número 10, 11,
12, ou apenas um caractere entre 1 e 9. Esse padrão será identificado desde que
as horas sejam expressas apenas utilizando números significativos (sem zeros à
esquerda) e estejam no padrão de 12 horas, e não de 24.
Já os caracteres após o “:” serão validados caso o primeiro esteja entre 0 e
5, e o segundo entre 0 e 9.
Utilizando o método exec() do RegExp criado, a variável horário receberá
um Array como:

['9:53', '9', '53', index: 10, input: 'Agora são 9:53']

O primeiro membro do Array corresponde ao padrão inteiro detectado,

incluindo o caractere “:”. Os dois elementos seguintes correspondem a cada um dos
grupos individuais determinados no RegExp pelos colchetes e aparecem na mesma
ordem: primeiro a hora e, depois, os minutos. Os demais elementos que especificam

108
o índice do último caractere correspondem a um padrão detectado e o texto
analisado.

9 DOM: DOCUMENT OBJECT MODEL

A troca de dados entre computadores e dispositivos distribuídos pelo

planeta está evoluindo de forma cada vez mais acelerada e, com isso, vem
transformando a forma como as pessoas acessam informações on-line e como
interagem com estas. Junto a essa evolução, há um aumento na complexidade das
interfaces para que seja possível atender às necessidades dos diferentes perfis de
usuários.
O desenvolvedor Web é responsável por criar essas interfaces, mas este
não é seu único trabalho, especialmente se este profissional for um desenvolvedor
full stack, que trabalha tanto com front end quanto back end. No caso do último, o
profissional programa a parte do sistema que irá rodar nos servidores. Já no caso
do front end, a parte que é desenvolvida tem relação com o código que irá rodar no
navegador do computador, no caso das aplicações desktop, ou em outros
dispositivos dos usuários conhecidos como clientes na arquitetura cliente-servidor.
Como as empresas estão cada vez mais presentes na internet, o
desenvolvedor front end tem ganhado destaque no cenário de desenvolvimento
Web, tendo em vista a necessidade crescente de interfaces mais amigáveis, de fácil
entendimento e rememoração, que sejam esteticamente agradáveis, divertidas e
interessantes. Isso ocorre em razão da preocupação com a experiência do usuário,
cada vez mais relevante para que empresas convertam usuários do topo do funil de
vendas em compradores de seus produtos e serviços.

109
9.1 Definição

No início dos estudos na área de desenvolvimento Web e, em grande parte

das tecnologias de desenvolvimento móvel híbridas, em que um código gera
aplicativos nas diversas plataformas, é essencial conhecer a estrutura do HTML e
do CSS, nas versões 5 e 3, respectivamente, que são as tecnologias que permitem
informar aos navegadores e aplicativos o que mostrar e aspectos referentes à
aparência dos elementos a serem apresentados.
Para Castiglioni (2018, documento on-line), além dos crescentes números
de páginas Web disponíveis diariamente, cresce também a quantidade de técnicas,
padrões e boas práticas de desenvolvimento de software. A semântica, conhecida
como sentido, é uma dessas práticas que permite aos usuários entender o
significado de cada uma das partes dos sites em que estão navegando. Além disso,
desenvolver com uma boa semântica é fundamental para obter melhor
posicionamento no ranking do Google, o que melhora a otimização para serviço de
busca (search engine optimization — SEO) do site, e no ponto de vista da
acessibilidade, além de facilitar no entendimento e na manutenção do código.
De acordo com Nascimento (2019, documento on-line), uma vez criadas as
páginas com boa estrutura HTML e estilização, é necessário adicionar um
comportamento dinâmico e interativo a elas; para tanto, uma das linguagens mais
utilizadas é o JavaScript. Com ela é possível criar eventos, filtros de pesquisa e
apresentação dos dados, manipular elementos, validar formulários, assim como
enviar requisições para determinadas URLs e trabalhar com a resposta sem que as
páginas precisem ser carregadas novamente, método conhecido como AJAX.
Diversas dessas ações em JavaScript e das interações dos usuários na
página são possíveis devido a manipulação do DOM, que é, segundo Maldonado
(2018, documento on-line), uma interface de representação de como os
documentos HTML e XML são lidos pelos navegadores. Após a leitura da página
pelo navegador, é criado um objeto que faz essa representação estruturada do
documento e define meios para que essa estrutura possa ser acessada e
manipulada.

110
 Franklyn (2019, documento on-line) afirma que o DOM é a estrutura e o
conteúdo de um documento Web, representados por dados dos objetos e um
documento HTML e XML na memória do computador ou dispositivo. Tal documento
pode ser apresentado no navegador ou como fonte HTML e, devido a sua
representação, ele pode ser modificado a partir de linguagens de script. Ainda, o
autor afirma que existem dois padrões que podem ser implementados na maioria
dos navegadores mais recentes, o W3C DOM e o WHATWG DOM, e que muitos
navegadores estendem esses padrões. Dessa forma, deve-se utilizá-los com
cuidado, já que os documentos podem ser processados por diferentes DOMs
desses vários navegadores.
O DOM e o JavaScript eram inicialmente interligados, mas, com o passar
do tempo, avançaram no caminho de se tornar entidades separadas. Apesar de o
JavaScript ser a linguagem mais utilizada para manipular o DOM, suas
implementações podem ser realizadas em qualquer linguagem, como em Python,
já que o DOM foi planejado para ser independente de uma linguagem de
programação específica.
Apesar de o DOM não ser uma linguagem de programação e não ter sido
planejado para ser utilizado com uma única linguagem de programação, sem ele,
as linguagens, como JavaScript, não teriam modelos de páginas Web, documentos
HTML e XML, nem as partes que compõem, por exemplo, os elementos da página.
Para que esses elementos possam ser acessados e manipulados por meio do DOM,
com uma linguagem de programação, cada um dos elementos do documento, como
ele próprio, o cabeçalho, as tabelas do documento, os conteúdos das células da
tabela e seu cabeçalho, faz parte do modelo de objeto do documento.
Ao alterar esse modelo, a partir de uma linguagem de programação
escolhida pelo desenvolvedor (como o JavaScript, no caso deste capítulo), também
é alterada a página Web, o que torna mais fácil trabalhar na página com o DOM do
que diretamente, via código HTML ou CSS. Tudo ocorre em razão do objeto
document, que é o objeto que cede o acesso à árvore DOM do navegador, assunto
que será tratado a seguir, no próximo tópico.

111
 Dessa forma, tudo que for criado pelo navegador no modelo da página pode
ser acessado por meio deste objeto document, utilizado principalmente para
atualizar a página, normalmente junto ao AJAX, assim como para mover os itens
dentro desta ou criar efeitos CSS, sem haver necessidade de ficar atualizando a
página.

9.2 Estrutura da árvore DOM

A parte HTML do modelo DOM é construída como uma árvore de objetos,

como podemos observar na Figura 1. O objeto document é o objeto pai de todos os
outros objetos HTML da árvore e, por consequência, da página Web. Além dele,
existem outros dois objetos que são filhos do objeto window, o location e o history,
que podem ser utilizados, respectivamente, para capturar a URL atual para
redirecionar o navegador para outra página e para obter as URLs visitadas pelo
usuário dentro do navegador, até chegar à página em questão.

Figura 37 - Representação da estrutura do DOM pelo navegador. O

JavaScript tem acesso a toda essa estrutura.

Fonte: Introduction... (2019, documento on-line).

112
 De acordo com o site W3Schools, com o modelo do objeto, a linguagem
JavaScript é capaz de criar HTML de forma dinâmica, com a possibilidade de alterar
todos os elementos HTML da página, todos seus estilos CSS, remover elementos
e atributos HTML existentes, adicionar novos elementos e atributos HTML, assim
como reagir aos eventos HTML existentes na página e criar novos eventos do
mesmo tipo (JAVASCRIPT..., 2019, documento on-line).
Veja, no tópico a seguir, como é possível acessar os objetos da árvore do
DOM.

9.2.1 Acessando o DOM

Ao criar um script que seja embutido entre as tags <script> e </script>, ou

que seja incluído na página Web via instrução de carregamento de script, é possível
utilizar os objetos document ou window para realizar a manipulação do documento
da página. Com estes objetos é possível, também, obter seus filhos neste
documento, ou seja, os demais elementos da página Web em questão que podem
ser alterados para adicionar comportamento ao site.
Além disso, dependendo do que se deseja programar, trabalhar com o DOM
pode ser consideravelmente simples, como no caso de exibir uma mensagem de
alerta a partir da função alert() do objeto window, como no exemplo de código a
seguir.

<body onload="window.alert('Hello DOM World!');">

Entretanto, também existem métodos mais sofisticados, como no caso da

necessidade de criação de conteúdo novo, como é possível observar no exemplo
de código a seguir.

113
 <!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Título da Página na Aba</title>
<script>
window.onload = function() {
var heading = document.createElement("h1");
var heading _ text = document.createTextNode("Texto do
Título");
heading.appendChild(heading _ text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>

Nesse caso, a função será chamada quando o documento for carregado,

criando um novo elemento de título h1, adicionando o texto a esse elemento e, por
fim, acrescentando o h1 no final do código que está entre as tags <body> e </body>,
que, no caso, estava vazia antes da página ser carregada.
Além dos métodos vistos no exemplo anterior, como o alert(),
createElement(), createTextNode() e appendchild(), existem muitos métodos e
propriedades que são utilizados para manipular o DOM e fazer a ligação entre os
elementos HTML e os eventos desejados, que iniciam o site por meio de
comportamentos.
Veja, no exemplo de código a seguir, como funciona a manipulação do
elementos a partir de uma instrução de carregamento de script, inserida no evento

114
onclick da tag input, que captura o texto digitado pelo usuário no campo de texto e
apresenta o elemento p quando o usuário clica no botão com o texto “Clique aqui!”.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Título da Página na Aba</title>
<script>
var capturado = "";
function capturar(){
capturado = document.getElementById('valor').value;
document.getElementById('valorDigitado').innerHTML =
capturado;
}
</script>
</head>
<body>
<h1>Título da Página</h1>
<input type="text" id=valor>
<input type="submit" onclick="capturar()" value="Clique
aqui!">
<p id="valorDigitado"></p>
</body>
</html>

115
9.2.2 Propriedades fundamentais e tipos de dados

Por intermédio do objeto document também é possível acessar inúmeras

propriedades. Veja, no Quadro 20, algumas das principais propriedades que podem
ser acessadas por esse objeto.

Quadro 20 - Propriedades que podem ser utilizadas através do objeto

document

Fonte: Adaptado de Medeiros (2013).

Como pode-se perceber, grande parte do código que é utilizado com o DOM
diz respeito à manipulação de páginas Web, ou seja, documentos HTML. É comum
usar a referência dos elementos, como nós do DOM, já que no documento HTML,
cada nó é um elemento. Veja, no Quadro 21, alguns desses tipos de dados.

116
 Quadro 21 - Tipos de dados

Fonte: Adaptado de Franklyn (2019).

Além disso, é preciso ter em mente que existem terminologias para alguns
desses tipos, como no caso de um nó de atributo, que pode ser chamado
simplesmente de atributo, bem como na lista de nós DOM, que pode ser chamada
apenas de lista de nós.
Veja, no tópico a seguir, como funcionam as interfaces do DOM.

9.3 Interfaces do DOM: HTML, CSS e Core

Segundo Franklyn (2019, documento on-line), muitos objetos DOM

implementam, simultaneamente, diversas interfaces, como no caso do objeto que
representa o elemento form, que recebe a propriedade name da interface
HTMLFormElement, e a propriedade className, da interface HTMLElement. Os
117
objetos document e window são os objetos das quais as interfaces geralmente são
as mais utilizadas na programação envolvendo o DOM. Em outras palavras, o objeto
window representa algo como o navegador, enquanto o objeto Document é a própria
raiz do documento da página Web.
Para Champion et al. (1998, documento on-line), as funcionalidades Core
são suficientes para permitir que desenvolvedores de software e de scripts acessem
e manipulem conteúdos HTML e XML de páginas Web de sites e sistemas. A API
Core do DOM também possibilita popular um objeto Document usando apenas
chamadas da API DOM.
De acordo com Queiroz et al. (2017, documento on-line), um documento
que contém código em HTML é descrito a partir da interface HTMLDocument. A
especificação da linguagem HTML também descreve a interface Document. Além
disso, um objeto que implementa a interface HTMLDocument dá acesso a inúmeros
recursos de navegadores, como a janela ou a aba, nos quais uma página é
implementada a partir da interface Window. O estilo, normalmente em CSS, é
associada a ela devido à interface Style , sendo possível obter a história do
navegador, relativa ao contexto de navegação em questão, por conta da interface
History.
Devido às implementações das interfaces apresentadas anteriormente é
possível utilizar os métodos dos objetos para adicionar o comportamento ao site,
como no exemplo a seguir.

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 id="id1">Meu Cabeçalho 1</h1>
<button type="button" onclick="document.getElementById('id1').
style.color = 'red'">
Clique em mim!
</button>

118
 </body>
</html>

Neste exemplo, a página apresenta um título com o texto “Meu Cabeçalho

1”, na cor preta, cor padrão do texto, e um botão com o texto “Clique em mim!”, que
muda a cor do título para vermelha ao ser clicado.

10 INTRODUÇÃO AO REDUX

10.1 Conceitos básicos Do redux

Redux é uma biblioteca JavaScript de código aberto, utilizada, comumente

com o React, para gerenciar os dados da aplicação (REDUX..., 2019). Entende-se
como dado qualquer entrada de informação — por exemplo, a alimentação de um
formulário pelo usuário, o clique de um botão, o carregar de uma página, a chamada
a uma API, etc. Assim, o Redux auxiliará com o comportamento da aplicação, de
acordo com informações alimentadas no ambiente.
Ele também pode ser utilizado por outras bibliotecas ou frameworks que têm
compatibilidade com a arquitetura de componentes, como Angular e Vue. O Redux
é uma implementação da arquitetura Flux, criada pelo Facebook para organizar uma
forma de trabalhar com o React, usando de um conceito chamado fluxo unidirecional
de dados (STEFANOV, 2016).
A criação do Redux foi de responsabilidade de Dan Abramov e Andrew
Clark, em 2015, quando buscavam uma implementação prática para a arquitetura
Flux.
Veja, a seguir, alguns benefícios do uso do Redux:

 controle do estado da aplicação em um local centralizado;

 tratamento de forma unificada do fluxo de dados da aplicação;

119
  facilidade na troca de informações entre componentes;
 controle dos “efeitos colaterais” da aplicação de forma simplificada.

Para o entendimento do Redux, é de fundamental importância que

tenhamos o domínio de determinados conceitos que são utilizados para compor
essa biblioteca ou utilizados juntamente com ela, como os de estado de
componentes, hooks e arquitetura Flux. Também são necessários para o
desenvolvedor front end que deseja entender e implementar o Redux de uma forma
consciente e extrair o máximo de proveito dessa biblioteca.

10.1.1 Estados de um componente

Quando trabalhamos no desenvolvimento de componentes, estamos

constantemente trabalhando com estados — ou states —, que são as informações
armazenadas em um local em um determinado instante de tempo.
No React, a forma mais fácil de manipular componentes é por meio de
hooks, sem a necessidade do uso de classes, mas, sim, de funções, o que tem se
tornado um padrão no desenvolvimento com a arquitetura de componentes nos dias
de hoje.
A seguir, um exemplo de um componente feito a partir de uma classe, cujo
estado contém uma variável name com valor inicial (ou estado inicial) definido a
partir de uma props chamada de name.

120
 Uma forma de simplificação é por meio do React 16.8, que tem os hooks
incorporados, cujas funções possibilitam que o desenvolvedor adicione recursos de
estado e ciclo de vida aos componentes de função. A seguir, um código utilizado
para criar uma variável de estado chamada de name, sua função para evoluir seu
estado setState, e a função que cria e inicializa o estado, o useState().

121
 Usando estados com componentes classes ou funções, o grande desafio é
a chamada “evolução do estado”, que é, por exemplo, a modificação de uma
determinada informação em um componente — quando um nome é alterado, um
número é incrementado. Dissemos que o estado evoluiu. Mas a grande dificuldade
é que o estado do componente é interno e vinculado a ele. Uma vez que o
componente é criado, precisamos acessar os métodos e as propriedades dele para
que seu estado evolua. Para tanto, é necessário o “envio” de um representante do
componente para onde desejamos que o estado seja evoluído. Veja o exemplo a
seguir.

É exatamente nesse ponto que entra o Redux, chamando a

responsabilidade do gerenciamento dos estados dos componentes da sua
aplicação e abstraindo diversos processos que são necessários para a manipulação
e evolução desses estados.

10.1.2 Arquitetura Flux

A arquitetura Flux foi criada com o objetivo de simplificar um processo de

manipulação de estado, introduzindo o conceito de que os estados não são dos
componentes, mas, sim, de toda a aplicação. Tecnicamente, os estados dos
componentes são vinculados ao que se chama de store (FLUX..., 2019).

122
 Segundo o Facebook, na sua documentação de conceitos iniciais do Flux,
a base da arquitetura está em quatro elementos (FLUX, 2019, documento on-line):

 dispatcher — recebem as ações e envia às stores registradas nos

respectivos dispatchers, onde todas elas receberão as ações que
acontecem na aplicação;
 store — são os locais que mantêm os dados da aplicação e fazem
os registros nos dispatchers, a fim de receber as ações provenientes
de toda a aplicação. Dados de uma store são alterados somente a
partir de uma ação, que devem ter sua lógica para decidir a quais
ações ela deve responder, pois uma aplicação geralmente possui
inúmeras stores;
 action — também chamada de API interna do aplicativo, trata-se de
descrições das ações que estão ocorrendo na aplicação, como o
clique de um botão ou o carregamento de uma página;
 view — onde os dados das stores são exibidos, por meio de uma
inscrição em uma determinada store.

A Figura abaixo, a seguir, mostra o fluxo de dados que deve ser seguido
por uma aplicação que implementa a arquitetura Flux. Resumindo, a view envia
ações para o dispatcher, que as envia para todas as stores, que enviam dados à
view. Existe outra entrada de ação que não é proveniente das views, mas que
também é comum na arquitetura.

Figura 38 - Fluxo proposto pela arquitetura Flux.

Fonte: flux-concepts (2017, documento on-line).

123
 A arquitetura serve como um padrão para quem deseja organizar o fluxo de
dados em uma aplicação, a fim de se criar um processo organizado, trazendo
inúmeros benefícios para quem implementa tal arquitetura. Nesse contexto, o
Redux é uma biblioteca que segue a arquitetura Flux para realizar a sua
implementação.

10.2 Principais características do Redux

O Redux chega para facilitar o gerenciamento de todo o estado da

aplicação, por meio da base da arquitetura Flux, introduzindo alguns conceitos para
implementação (REDUX..., 2019).

10.2.1 Action

Action são as ações que acontecem na aplicação e podem ser disparadas

pelo próprio usuário ou pela aplicação. Cada action criada necessita da propriedade
type, como forma obrigatória e única, que o Redux usa para distinguir a ação que
foi executada. Veja o exemplo a seguir.

A mesma deve estar dentro de uma chamada action functions ou action

creators, que, ao ser invocada, ativa os reducers, como mostrado no exemplo a
seguir.

124
10.2.2 Store

Store é um local para acondicionamento do estado global para o Redux,

onde fica armazenada a maioria das informações da aplicação. Ela é montada no
formato de objeto, assim como a action.
No seguinte exemplo, está montado um estado inicial em um objeto a ser
carregado em uma store, cujo conteúdo possui uma array de objetos com título e
texto a serem exibidos em um determinado local da aplicação e uma variável que
define o conteúdo inicial.

Quando temos valores que iniciam a aplicação, chamamos os mesmos de

estado inicial, e podem ser colocados em uma constante e posteriormente enviados
a uma função de reducer, como estado inicial. Veja o exemplo a seguir.

125
10.2.3 Reducer

Reducer é disparado pelas action functions, que recebem as informações e

selecionam quais states serão modificadas dentro da store, conforme o seguinte
exemplo.

A estrutura de seleção geralmente é colocada dentro de uma função

reducer, que recebe o state e a action para realizar suas ações, como no trecho de
código a seguir. Dentro do mesmo, colocaríamos a seleção do código anterior.

126
 O estado inicial é utilizado para definir o valor na primeira vez em que o
reducer for utilizado. Posteriormente, quando os estados forem evoluindo, novos
serão passados aos reducers que, por sua vez, atualizarão as stores e seus states.
Devemos, também, enviar nossas funções redutoras para “dentro” das
stores. Na verdade, com isso, estamos possibilitando que os dispatchers possam
dispará-las. Observe a seguir.

10.2.4 Conexão entre componente e Redux

Para realizarmos o vínculo dos componentes com o Redux, devemos seguir

alguns passos. Primeiramente, devemos vincular um dispatch a uma view, usando
o seguinte comando:

Precisamos que esse dispatch seja feito a partir de uma ação do usuário —
por exemplo, no onClick — e passarmos para ele a função que definimos como
action creator, para a mesma ser acionada, conforme segue.

Para que o componente seja atualizado, precisamos observar o que está

acontecendo com o estado toda vez que a store é atualizada. Para isso, usamos as

127
seguintes funções, sendo a primeira a maneira como realizamos o vínculo, e a
segunda, como buscamos os valores.

Para que os valores de nossos componentes sejam atualizados, podemos

fazer o uso de hooks, que facilitam a manipulação dos estados globais nos
componentes. No exemplo a seguir, podemos observar como isso fica. Toda vez
que alguma alteração ocorrer na store, uma função hooks setContent será
disparada e atualizará a nossa variável de estado local, chamada content. Com ela,
podemos buscar o conteúdo no estado global, dentro do array contents[], onde
atualizaremos o título e o texto de nosso componente sempre que o valor for
modificado.

Ao final, o fluxo fica como mostrado na Figura, a seguir.

128
 Figura 39 - Fluxo do Redux.

Fonte: Fernandes (2018, documento on-line).

10.3 Aplicação do Redux com o React

Para utilizarmos o Redux com o React, devemos fazer o processo de

instalação a partir do terminal de comando em um projeto ou globalmente. Podemos
criar a aplicação React a partir do pacote disponibilizado pelo Facebook com uma
estrutura pré-configurada do ambiente necessário e, depois, iniciar a aplicação com
três comandos:

npx create-react-app my-app-redux

cd my-app-redux
npm start

Depois, dentro de nossa aplicação, podemos fazer a instalação a partir do

npm, que disponibiliza a biblioteca em um pacote, além de outro que faz a conexão
entre o Redux e o React. Os comandos são, respectivamente:

129
 npm install redux
npm install react-redux

10.3.1 Exemplo de aplicação

O código, a seguir, mostra a aplicação em um único arquivo dos conceitos

vistos na sessão anterior. O conteúdo de um componente, denominado , é alterado
pelo clique dos botões que estão em outro componente, denominado . Nesses
processos, fazemos a importação da { createStore } do pacote da biblioteca redux
para podemos criar nossa store e manipularmos os estados por meio das funções
disponibilizadas pela biblioteca.

130
 Primeiramente, realizamos as importações dos módulos que utilizaremos.
Do React, importamos o modulo principal React e o módulo para usar os estados
com hooks { useState }. Já do pacote do Redux, necessitamos importar o módulo
para a criação e o gerenciamento das stores, que é o { createStore }.

131
 O item objeto de estado inicial, chamado INITIAL_STATE, é montado para
armazenar o índice do conteúdo atual que será exibido, na variável content, e um
array contents com os conteúdos a serem utilizados, cada um com title e text.
A função redutora, chamada function content(), recebe um objeto com o
estado atual — onde, na primeira execução, será o INITIAL_STATE — e realiza a
ação baseada na action,type, que é o item que define o tipo de ação que deve ser
tomada pela função redutora. Logo após, uma store é criada com o comando
createStore(), passando a função redutora como parâmetro para a criação da
mesma.
A action creator, ou função da ação, é definida com o type SET_CONTENT.
A mesma garante que, quando essa ação for chamada, uma variável que define o
conteúdo será passada por paramento, usada para alterar o conteúdo em questão.
Essa função é uma espécie de tipagem das informações que a ação necessita para
realizar as mudanças de estado de forma correta.
Posteriormente, criamos os componentes, sendo o <App /> o principal, que
monta a view com o conteúdo de outros dois componentes: o <Nav /> e o <Section
/>. Esses são a demonstração maior de como o Redux facilita o desenvolvimento e
gerenciamento de aplicações com estado global, pois, de forma simples, o clique
nos botões do primeiro componente altera o conteúdo do segundo.
No primeiro componente, simplesmente usamos no onClick de cada um a
chamada {() => store.dispatch(setContent(0))}, que dispara na store a ação
setContent() e envia o valor que setará a variável de estado global, chamada
content. Essa varável está sendo monitorada pelo componente por meio do
comando store.subscribe(() => setContent(store.getState().content)), que passou à
store a função que seta a variável local, chamada content, cujo gerenciamento de
estado está sendo feito pelos hooks.
Por fim, quando tivemos uma alteração na variável content no estado global
da aplicação, a variável de estado local será alterada. Quando isso acontecer, os
conteúdos do componente serão atualizados, pois usamos a função
{store.getState().contents[content].title} para buscar título e texto que devem ser
exibidos de acordo com o valor setado dessa variável.

132
 Para testarmos essa aplicação, basta substituirmos o conteúdo do arquivo
scr/App.js em nossa arquitetura criada na pasta my-app-redux, feita pelos
comandos anteriores. Nossa aplicação fica como mostrada na Figura abaixo, a
seguir. Por mais simples que pareça, você está utilizando uma série de conceitos
muito importantes para a formação de um desenvolvedor front end.

Figura 40 - Interface criada pelo exemplo.

Fonte: Saga (2020).

Quando iniciamos essa pequena aplicação, o estado inicial é definido como

0. Com essa informação, o componente consulta array do estado global da
aplicação, buscando título e texto a serem exibidos naquele momento. O clique de
cada botão faz a alternância de estados da variável content, que é utilizada para
saber o índice do array usado para mostrar o conteúdo.

133
11 HERANÇA

Herança é um conceito fundamental da programação orientada a objetos

porque, assim como o próprio conceito de objeto, é facilmente observada nas
relações entre quaisquer entidades reais. Graças ao seu uso, é possível
reaproveitar código, controlar atribuições de maior nível hierárquico e repassar
características entre os objetos de maneira flexível, já que o JavaScript é
fracamente tipado e admite mudanças estruturais em tempo de execução.

11.1 Object.prototype

Parte essencial de qualquer programação orientada a objetos é a relação

entre eles, que pode ser implementada por meio de diferentes maneiras, com ou
sem interações e dependências. Em geral, um objeto pode ser: dependente
agregado, composto ou uma especialização de outro objeto (MACHADO; FRANCO;
BERTAGNOLLI, 2016).
Esse último tipo de relação cria uma hierarquia entre objetos. Em outras
palavras, estabelece uma relação de herança entre eles.
Se adequado, um modelo de objetos pode aproveitar as relações de
herança entre os mesmos para reaproveitamento de código. Faz-se isso mediante
o estabelecimento dos objetos que apresentam características em comum e podem
delegar métodos e propriedades para um objeto de nível maior na hierarquia que
poderão herdar simultaneamente.
O exemplo a seguir apresenta um pseudocódigo com dois objetos que
compartilham métodos e propriedades similares.

Exemplo:

Carro
{

134
 Modelo: "",
Fabricante: "",
Ano: 0,
Cor: "",
Abastecer()
}
Moto
{
Modelo: "",
Fabricante: "",
Ano: 0,
Cor: "",
Abastecer()
}

Repare que todas as propriedades e os métodos existentes no objeto Carro

também estão presentes no objeto Moto. Utilizando mecanismos de herança, seria
possível criar um terceiro tipo de objeto que elencasse todos esses elementos e
deixasse para os objetos individuais apenas as características únicas dos mesmos,
como no exemplo a seguir.

Exemplo:

Veiculo
{
Modelo: "",
Fabricante: "",
Ano: 0,
Cor: "",
Abastecer()
}

135
 Carro é filho de Veiculo
{
Radio: false
}
Moto é filho de Veiculo { }

Observe a quantidade de código que foi reaproveitada. No caso do objeto

Carro, além das características herdadas do objeto Veiculo, é declarada uma
propriedade exclusiva do objeto que não existirá no objeto motor (Radio).
Em JavaScript, propriedades e métodos são herdados a partir de um objeto
protótipo. Na verdade, qualquer objeto em JavaScript está vinculado a um objeto
protótipo (FLANAGAN, 2013).
Todo novo objeto, seja instanciado de maneira literal (utilizando {}) ou a
partir de um construtor explícito (new), herda as propriedades e os métodos do
objeto nativo Object.prototype, sendo este a origem de todos os demais, já que o
objeto Object.prototype não herda nada de nenhum.
Outros protótipos podem ser criados e utilizados durante a criação de novos
objetos. Nesse caso, a nova instância herdará elementos de ambos os protótipos,
uma vez que o utilizado foi criado a partir de um Object.prototype também. Essa
situação é definida como encadeamento de protótipos (FLANAGAN, 2013).
O padrão ECMAScript define desde a versão 5 uma função estática para
criar objetos, definindo de maneira explicita o protótipo a ser utilizado. É a função
Object.create() que recebe como argumentos o objeto que servirá de protótipo e,
opcionalmente, descrições das propriedades como segundo argumento (ECMA
INTERNATIONAL, 2015), conforme exemplo a seguir.

var obj1 = {} // Nenhum dos objetos

criados
var obj2 = { valor1: 1, valor2: 2 } // possui propriedades

136
 var obj3 = new Object();
var obj4 = Object.create({})
var obj5 = Object.create(null)
var obj6 = Object.create(Object.prototype)

Simplificando, Flanagan (2013) define a capacidade de criar um objeto

especificando um protótipo como a capacidade de criar um herdeiro.
Essa estrutura de encadeamento de protótipos também é utilizada durante
atribuições e consultas de valor às propriedades de um dado objeto. Sempre que
uma propriedade é acessada, é consultado o próprio objeto e seus protótipos em
busca dela.
Se o objeto especificado apresenta a propriedade que se está tentando
consultar, o valor dela será retornado. Do contrário, essa propriedade será buscada
no protótipo do objeto. Caso ainda não seja encontrada, e o protótipo do objeto
contenha um protótipo, este será o próximo alvo. Esse fenômeno se repete até que
a propriedade desejada seja encontrada ou não existam mais protótipos daquele
objeto para serem consultados (FLANAGAN, 2013).
Durante atribuições, o processo é similar, porém, ao atribuir um valor a uma
propriedade inexistente no objeto, mas presente em algum protótipo dele, é criada
uma propriedade — mesmo que esse identificador já exista em níveis maiores de
hierarquia. No exemplo seguinte, é possível constatar cada uma das situações.

const obj1 = { a: 1 } // cria um objeto de 1 propriedade

obj1.b = 2 // cria uma nova
const obj2 = Object.create(obj1) // cria um herdeiro de obj1
console.log(obj2.a, obj2.b) // imprime valores do protótipo
obj2.b = 3 // cria propriedade b própria
console.log(obj2.a, obj2.b) // valores do protótipo e do objeto
console.log(obj1.a, obj1.b) // exibe 1 e 2, atribuições no filho

137
 // não interferem o pai

Assim, é evidente a importância que a herança exerce na programação

orientada a objetos e, principalmente, para JavaScript, que tem no objeto o seu
ponto fundamental. A forma como JavaScript lida com a herança assemelha-se em
muito às demais linguagens, exceto pela sua característica de não atribuir valores
aos protótipos quando não encontrada a propriedade solicitada no objeto original.
O que parece ser uma limitação é, na verdade, um recurso poderoso, que permite
não apenas criar instâncias especializadas de um protótipo, como também anular
propriedades herdadas de forma simplificada.
O protótipo de objeto (Object.prototype) contém métodos próprios que, junto
dos construtores, garantem a flexibilidade dos demais objetos que o herdarão.

11.2 Métodos associados ao protótipo de objeto

Os métodos disponíveis em Object.prototype podem ser alteráveis,

sobrescrevendo-os ou não. No primeiro caso, os métodos têm funções diretamente
ligadas à estrutura de um objeto genérico, como enumeração de propriedades ou
verificação de pertencimento a protótipos. Já no segundo caso, as funções
garantem que o método, apesar de sempre presente, também possa ser alterado
por objetos mais especializados – é o caso, por exemplo, dos métodos de
apresentação textual de dados do objeto.

11.2.1 Método hasOwnProperty

Este método retorna true, se o parâmetro passado corresponde a uma

propriedade do próprio objeto, ou false, se a propriedade não existe ou foi herdada
de algum protótipo (ECMA INTERNATIONAL, 2015).

138
 O parâmetro pode ser do tipo string ou Symbol, e o retorno sempre será do
tipo Boolean.
É um método que se contrapõe ao operador in, que resulta em verdadeiro
para qualquer propriedade acessível a partir do objeto testado, inclusive aquelas
herdadas.

const obj1 = { a: 1 } // cria um objeto, 1 propriedade

const obj2 = Object.create(obj1) // cria um herdeiro de obj1
obj2.b = 2 // cria uma propriedade exclusiva
// de obj2
console.log("a" in obj2) // retorna true
console.log("b" in obj2) // retorna true
console.log(obj2.hasOwnProperty("a")) // retorna false
console.log(obj2.hasOwnProperty("b")) // retorna true

O objeto obj2 do exemplo anterior possui a propriedade a herdada de obj1

e a propriedade b própria dele. Para o operador in, ambas as propriedades a e b
podem ser acessadas no obj2 e, portanto, o retorno é verdadeiro. Já para o método
hasOwnProperty(), somente b retorna verdadeiro porque é a única propriedade
definida pelo próprio objeto obj2.

11.2.2 Método isPrototypeOf

Retorna true ou false sempre que o objeto referenciado pertencer à cadeia

de protótipos desse objeto, conforme exemplo a seguir (ECMA INTERNATIONAL,
2015).
Exemplo :

const obj1 = { } // cria um objeto

139
 const obj2 = Object.create(obj1) // cria um herdeiro de obj1
const obj3 = Object.create(obj2) // cria um herdeiro de obj2
console.log(obj1.isPrototypeOf(obj2)) // retorna true
console.log(obj1.isPrototypeOf(obj3)) // retorna true
console.log(obj2.isPrototypeOf(obj3)) // retorna true
console.log(obj3.isPrototypeOf(obj2)) // retorna false
console.log(obj3.isPrototypeOf(obj1)) // retorna false
console.log(obj2.isPrototypeOf(obj1)) // retorna false

11.2.3 Método propertyIsEnumerable

Um dos atributos que as propriedades recebem é a capacidade de serem

enumeradas (isEnumerable). Esse atributo permite controlar a varredura de um
objeto por laços, como o for...in.
Caso a propriedade seja passível de enumeração, será encontrada durante
uma varredura, e o método propertyIsEnumerable retornará verdadeiro ao testá-la,
conforme o seguinte exemplo (ECMA INTERNATIONAL, 2015).

const obj1 = { a: 1, b: 2 } // cria um objeto

console.log(obj1.propertyIsEnumerable("a")) // retorna true
console.log(obj1.propertyIsEnumerable("b")) // retorna true
console.log(obj1.propertyIsEnumerable("length")) // retorna false
for (x in obj1)
{
console.log(x) // exibe a e b, ignora
// length e outras propriedades
// não enumeráveis
}

140
 Apesar de o objeto obj1 herdar outras propriedades do protótipo, nenhuma
delas é enumerável. Logo, somente as propriedades que foram criadas para o
próprio objeto serão listadas.

11.2.4 Método toString e toLocaleString

O método toString retorna o objeto como uma string. A variação

toLocaleString, por padrão, chama o método toString, mas é disponibilizada para
permitir que, em determinadas situações, seja sobrescrita para personalizar o
método para objetos específicos, como mostra o exemplo a seguir (ECMA
INTERNATIONAL, 2015).

var obj1 = { a: 0, b: 1, c: 2 }
console.log(obj1.toString()) // exibe [object Object]
console.log(obj1.toLocaleString()) // exibe [object Object]

Ambos os métodos não recebem parâmetros e, da forma como são

implementados pelo Object.prototype, não permitem grande utilização, se não para
verificar a classe do objeto em questão. No entanto, lembre-se de que esses
métodos podem ser sobrescritos e especializados conforme a necessidade
(FLANAGAN, 2013).

11.2.5 Método valueOf

Não recebe nenhum parâmetro e retorna o valor primitivo do objeto (ECMA

INTERNATIONAL, 2015). É o mesmo que tentar exibir os valores do objeto de forma
direta. Esse método é invocado pelo próprio JavaScript ao se tentar utilizar o objeto
como um valor primitivo, como em console.log(objeto).

141
 var obj1 = { a: 0, b: 1, c: 2 }
console.log(obj1) // exibe { a: 0, b: 1, c: 2 }
console.log(obj1.valueOf()) // exibe { a: 0, b: 1, c: 2 }
console.log(obj1 + " 1") // exibe [object Object] 1
console.log(obj1.valueOf() + " 2") // exibe [object Object] 2
Object.prototype.valueOf = () => "Sumiu"; // sobrescreve o método
// valueOf()
console.log(obj1 + " 1") // exibe Sumiu 1
console.log(obj1.valueOf() + " 2") // exibe Sumiu 2

Conforme esse exemplo, esse método é personalizado para cada tipo de

objeto e pode ser sobrescrito para customizar a conversão do objeto em valor
primitivo. Independentemente do que estiver presente no objeto, o retorno de
valueOf sempre será a string “Sumiu”. Ao utilizar o operador + em conjunto com o
objeto, JavaScript tenta converter o objeto em valor primitivo, usando valueOf que,
agora, é modificado para exibir sempre a mesma string.
Além dos métodos descritos anteriormente, Object.prototype também
carrega consigo a propriedade constructor, que aponta para a função utilizada na
hora de instanciar novos objetos do mesmo protótipo. É comum estar implementada
a propriedade __proto__, que aponta para o objeto do protótipo em si.

11.3 Aplicações com herança

Para que o programador amplie suas chances de sucesso em desenvolver

um sistema adequado às necessidades, alguns cuidados especiais devem ser
tomados ao se implementar mecanismos de herança.

142
 Muitas vezes, um objeto pode ser mais bem aproveitado, aumentando sua
dependência de outros objetos, mas o tornando mais flexível. Nesse caso, diz-se
que o acoplamento é reduzido (MACHADO; FRANCO; BERTAGNOLLI, 2016).
Imagine que você precisa implementar um objeto Moto novamente, mas
que, ao contrário do exemplo 2, a moto seja movida a eletricidade, e não a
combustão. O exemplo apresentado não seria o mais adequado, uma vez que o
objeto Moto pode ter o método Recarregar() implementado, mas herdaria o método
Abastecer() também, podendo criar conflitos e erros de execução, além de ocupar
memória e tempo de processamento com itens dispensáveis.
Para escapar a essa situação, pode-se sobrecarregar o método ou
reorganizar a estrutura dos objetos criando um objeto Tanque e um objeto Bateria
independentes de Carro e Moto. Na primeira situação, de qualquer forma, a
implementação do método original deve ser pensada e construída de forma a
garantir coesão com eventuais sobrecarregamentos.
Assim, é evidente que a herança é muito mais relevante para fornecer
soluções genéricas entre objetos do que na resolução de problemas específicos,
situações nas quais o método de composição costuma ser mais flexível e adequado.
De qualquer forma, em algumas situações, o mecanismo de herança pode
solucionar grandes problemas de maneira rápida e simples. Por exemplo, se for
necessário adicionar um método para todos os demais objetos ao invés de fazer
isso individualmente, objeto por objeto, a herança baseada em protótipos permite
que o programador adicione o novo método apenas ao protótipo de maior nível
hierárquico. Consequentemente, todos os demais terão acesso ao mesmo.
O tipo de situação descrita anteriormente é possível não apenas ao
encadeamento de protótipos da linguagem JavaScript, mas também devido à
própria linguagem ser fracamente tipada, de forma que classes e objetos possam
ser expandidos e modificados em tempo de execução sem qualquer problema.
Uma situação como essa foi apresentada no exemplo 9, em que o método
valueOf era modificado no protótipo. Assim, todos objetos que herdam propriedades
e métodos deste receberão automaticamente acesso a essa função.

143
 Na prática, o que determina se o mais adequado é o uso ou não de herança
é a experiência do programador e sua capacidade de abstração. Quanto maior for
a habilidade dele em determinar a relação de dependência entre os elementos que
compõem o seu sistema, melhor será a sua tomada de decisão.
É provável que inúmeras soluções possam ser imaginadas para um mesmo
problema. Porém, na maior parte do tempo, as dificuldades envolvendo as relações
de dependência entre objetos, se tomadas de maneira adequada ou não, revelar-
se-ão somente à medida que o projeto se aproxime da sua conclusão, quando
pequenas alterações podem ser excessivamente custosas devido ao mau
planejamento inicial da estrutura do mesmo.
Em outras situações, decisões equivocadas podem apresentar-se limitantes
apenas em uma segunda geração do seu aplicativo, quando, ao tentar criar
atualizações – sejam com novas funcionalidades, sejam com correções de bugs –,
o programador se depare com a necessidade de alterar grandes parcelas de código
para modificar a estrutura dos objetos.
Como visto, a herança não é um conceito exclusivo de JavaScript, mas tem
suas peculiaridades por se basear em um modelo de encadeamento de protótipos,
do qual o objeto primordial é o Object.prototype que expõe os métodos e as
propriedades mínimas necessárias para o bom funcionamento de todos os demais.
Essa relação de herança tem grande flexibilidade, assim como demais
conceitos de JavaScript, e, da mesma forma, traz consigo a necessidade do
planejamento claro da estrutura do programa.
A possibilidade de se sobrescrever métodos do protótipo pode ser uma
solução fácil e brilhante em determinadas situações. Já em outras, pode significar
a interferência inadequada em outras funcionalidades do sistema ou, até mesmo,
em outros sistemas que compartilham a mesma instância do interpretador em
determinados momentos – situação muito comum no desenvolvimento de páginas
Web.

144
12 CONHECENDO O REACT

A demanda por profissionais no mercado de tecnologia vem crescendo ano

a ano. As universidades nem sempre conseguem suprir as necessidades do
mercado na mesma velocidade com que as vagas são abertas para algumas áreas,
como gestão de projetos em TI, programação de sistemas desktop e Web, banco
de dados, segurança da informação, cientistas de dados, programadores de jogos
digitais, entre outras.
Desenvolver software tem sido cada vez menos complexo, mais popular e
acessível, gerando a oportunidade da criação de franquias no Brasil e no exterior,
que ensinam lógica, robótica e programação já para crianças.
Também é fato que grande parte das empresas nesse mercado aquecido
exige certo nível de conhecimento técnico ou especialização — inclusive com
habilidades comportamentais minimamente desenvolvidas — para preenchimento
das melhores vagas com os melhores salários, independentemente da área de
atuação. Por isso a necessidade do estudo aprofundado das tecnologias e
ferramentas, sejam mais recentes ou legadas, além da constante atualização.
Como no caso de qualquer tecnologia ou linguagem a ser estuda pela
primeira vez, é essencial buscar pelos conceitos básicos antes de partir para a
aplicação ou o desenvolvimento. Essa prática visa a melhorar a curva de
aprendizado e conhecer as características envolvidas, além de verificar se essa
tecnologia atende de fato às necessidades para o desenvolvimento de um novo
produto ou serviço. Com o React, isso não é diferente.
Segundo o site oficial, o React é uma biblioteca JavaScript utilizada para
criação de interfaces de usuário em aplicações Web. Além disso, a biblioteca é
declarativa, fazendo com que o código seja mais previsível e mais simples no que
diz respeito à depuração (ou debugging, em inglês), que é o processo no qual o
desenvolvedor realiza a análise ou testes por meio do acompanhamento do passo
a passo da execução do programa, a fins de minimizar os erros (REACT..., 2019a).
145
 Outra característica é que ele é baseado em componentes, sejam eles
simples ou com controle de estado, que podem utilizar plugins externos para seu
desenvolvimento. Além disso, uma vez entendido e utilizado adequadamente, pode
ser renderizado tanto no front end — que é o lado do cliente ou navegador — quanto
no back end, que é o lado do servidor.
O fato de o React ser declarativo torna a criação de interfaces de usuário
menos complexa, onde podem existir views simples para cada estado da aplicação,
e o próprio React atualizará e renderizará apenas os componentes que têm relação
com os dados alterados ao longo do uso da aplicação. Já o fato de ser baseado em
componentes permite ao desenvolvedor criar um componente que pode ser
reutilizável em diversas partes da aplicação, além de os encapsular uns dentro de
outros, facilitando o desenvolvimento e a posterior manutenção.
De acordo com o guia React, da W3Schools, o React é uma biblioteca
JavaScript utilizada no desenvolvimento de interfaces de usuário e na criação de
aplicações de página única, que permitem criar componentes de interface de
usuário reutilizáveis (REACT..., 2019c). Além disso, para aprender React, é
necessário conhecer HTML, CSS, DOM e JavaScript, que também devem ser
estudados por quem deseja aprender a biblioteca.
As páginas únicas, ou SPA (do inglês single page applications), de acordo
com Figueiredo (2018), são o ápice do crescimento do front end das aplicações nos
últimos anos. SPA é uma técnica usada como base para criação de aplicações que
rodam tanto nos navegadores quanto nos dispositivos móveis e desktop, tudo em
uma única página, mudando apenas parte do conteúdo de acordo com a
necessidade, como no caso do Gmail.
Em se tratando de componentes React, segundo o site oficial, eles
implementam um método conhecido como render(), que recebe dados de entrada,
gerando os que são exibidos na tela como retorno da função. Além disso, graças às
suas propriedades, chamadas com this.props, esses dados de entrada podem ser
acessados dentro do método render().
Quanto à parte do controle de estados dos componentes, esses podem ser
acessados via this.state, que controlam o estado dos dados. Quando esses dados

146
do state são alterados, o código que havia sido renderizado anteriormente é
atualizado por meio de nova invocação do método render(), chamado sempre que
é necessário para atualizar os dados na tela.

12.1 Função JSX

De acordo com o site oficial, o React não requer o uso do JSX, ou seja, ele
não é obrigatório para o desenvolvimento com a biblioteca. Contudo, apesar disso,
muitas pessoas consideram o seu uso prático no sentido da sua ajuda visual quando
se trabalha com interface de usuário dentro do trecho de código produzido em
JavaScript, além de mostrar mensagens de erros e avisos úteis para o
desenvolvedor (REACT..., 2019a).
De acordo com o guia React JSX, da W3Schools, JSX significa JavaScript
XML, que permite ao desenvolvedor escrever elementos HTML dentro do trecho
JavaScript de um componente React e adicioná-los dentro do DOM, sem a
necessidade do uso de métodos como o createElement() ou appendChild()
(REACT..., 2019b). Além disso, o JSX converte as tags HTML em elementos React.
Veja, a seguir, um exemplo de código utilizando JSX, com parte dele de
uma página HTML e o código de um componente React, bem como o resultado do
código apresentado na Figura abaixo.
Trecho de código da página HTML:

<body>
...
<div id="exemplo-jsx"></div>
...
</body>
Código do compoente React com JSX:
class HelloJSX extends React.Componente {
render() {

147
 return (
<div>
Olá {this.props.name}!
</div>
);
}
}
ReactDOM.render(
<HelloJSX name="JSX" />,
document.getElementById('exemplo-jsx')
);

Figura 41 - Resultado dos trechos de código da página HTML e do

componente React com JSX.

Fonte: Saga (2020).

Como pode ser observado no exemplo, o método ReactDOM.render()

recebe dois parâmetros: o “elemento” React com a propriedade nome de valor JSX
e a tag HTML que tem o identificador correspondente onde ele será inserido, que é
obtida a partir do método document.getElementById(). Dessa forma, o método
render() do componente da classe HelloJSX retorna a tag div dentro do trecho HTML
com o texto “Olá JSX!”, que teve parte substituída a partir da propriedade passada
no primeiro parâmetro do método ReactDOM.render(): o name="JSX".

148
 A seguir, observe o código do componente React para o mesmo exemplo,
que utiliza o mesmo trecho de código HTML e gera exatamente o mesmo resultado
apresentado na Figura anterior.

class HelloJSX extends React.Componente {

render() {
return React.createElement(
"div",
null,
"Ol\xE1 ",
this.props.name,
"!"
);
}
}
ReactDOM.render(
React.createElement(HelloJSX, {name: "JSX"}),
document.getElementById('exemplo-jsx')
);

Como é possível verificar no método render() da classe HelloJSX, o código

é alterado a partir da palavra return, que é equivalente ao código com JSX do
exemplo anterior, mas agora utilizando o método React. createElement(). Além
disso, muda a forma de passagem do primeiro parâmetro do método
ReactDOM.render(), que agora também recebe o método React.createElement().

149
12.2 Página HTML usando React e JSX

Agora que você já está familiarizado(a) com alguns componentes do React

e pôde observar como eles são apresentados dentro de uma tag HTML, é hora de
analisar um exemplo mais completo em uma página HTML que utiliza o que poderia
ser um grande componente, mas está separado em componentes menores.
No exemplo a seguir, apresentado no tutorial da documentação do React,
há uma página HTML com a tag em que são inseridos os componentes React e o
código dos componentes utilizando JSX. Essa página simula a parte do comentário
de um fórum, contendo uma imagem, o nome de quem escreveu, o texto de
comentário e a data em que foi realizado (adaptado de ADICIONE..., 2019):

...
<body>
<div id="root"></div>
<!-- Scripts para carregar o React -->
<script src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.
development.js" crossorigin></script>
<!-- Script para carregar os componentes React -->
<script src="index.js"></script>
</body>
...

Nesse trecho do código do arquivo HTML, que pode ser salvo como
index.html, é criada uma div identificada como root, para que seja possível acessar
a tag e inserir os componentes React. Além disso, são inseridas duas tags script
para carregar o React e uma para referenciar e carregar os componentes do arquivo
informado dentro do atributo src — nesse caso, código do arquivo index.js.

150
function formatDate(date) {
return date.toLocaleDateString();
}
function Avatar(props) {
return (
<img
className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">{props.user.name}</div>
</div>
);
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

151
 const comment = {
date: new Date(),
text: 'Exemplo de código com React e JSX',
author: {
name: 'Professor Sagah',
avatarUrl: 'https://linkdafotonoservidor.com',
},
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);

Quando o método ReactDOM.render() é chamado, o componente Comment

é renderizado com as propriedades date, text e author dentro da tag div, que contém
o identificador root do arquivo index.html. O valor atribuído às propriedades do
componente Comment, por sua vez, é carregado a partir da constante comment. E,
para que aconteça a renderização desse componente, a função propositalmente
nomeada Comment() é chamada e recebe as propriedades date, text e author,
passadas dentro do componente no método React.render().
Para que os elementos de retorno da função Comment(), filhas da tag div,
sejam renderizados, é necessário carregar o componente UserInfo, que contém a
propriedade user e seu valor atribuído a partir da propriedade author do componente
Comment. Além disso, um dos elementos HTML retornados pela função Comment()
tem seu valor atribuído pela propriedade text da constante, e o outro realiza a
chamada da função formatDate(), que recebe o valor da propriedade date da
constante comment.

152
 Por sua vez, para que aconteça a renderização dos elementos e
componentes do retorno da função UserInfo(), é necessário carregar o componente
Avatar que, assim como o componente UserInfo, tem a propriedade chamada de
user. Já para carregar o componente Avatar, é necessária a função Avatar(), que
retorna uma imagem por meio da tag HTML img com seus atributos src e alt, com
as suas respectivas propriedades.

12.3 Configurando o ambiente

Uma vez vistos os conceitos e exemplos de código em React, é hora de

configurar o ambiente de desenvolvimento para começar a praticar.
Para a sua utilização, deve-se configurar um ambiente React na máquina
do desenvolvedor, instalando o npm e o Node.js, simultaneamente à instalação do
Node.js, obtido no seu site oficial. Uma vez instalados, é possível instalar o React
utilizando o seguinte comando no prompt de comando ou no terminal:

npm install -g create-react-app

Dessa forma, o gerenciador de pacotes instalará o React na máquina do

desenvolvedor, permitindo que ele possa rodar o outro comando, que iniciará o
projeto na pasta em que o desenvolvedor estiver acessando pelo terminal,
apresentado a seguir:

npx create-react-app nomedaaplicacao

Será, então, criada uma pasta com o projeto, sendo necessário navegar até
a pasta do projeto pelo terminal com o comando:

cd nomedaaplicacao

153
 Feito isso, bastar rodar o seguinte comando para executar a sua aplicação
React, que deve abrir o seu navegador no endereço localhost:3000. Caso não
aconteça, esse endereço pode ser digitado no navegador de preferência do
desenvolvedor:

npm start

13 EVENTOS NO REACT

Por mais que as regras de negócio de um sistema Web sejam processadas

no lado do servidor, parte do código do sistema também precisa ser processada e
apresentada no navegador escolhido pelo usuário, como no caso dos sites, na parte
front end dos aplicativos de smartphones, tablets e smart TVs. Tal modelo é
conhecido como cliente/servidor, em que, no geral, a estrutura da aplicação é
distribuída para processamento e armazenamento de dados em ambos os lados.
Para que seja possível programar a interação adequada entre o usuário e
a aplicação, tanto no âmbito da usabilidade quanto da experiência do usuário, é
necessário conhecer os eventos e saber lidar com eles quando são disparados pelo
projeto de front end, independentemente de linguagem de programação e das
tecnologias utilizadas escolhidas.

13.1 Eventos React e DOM

Os eventos são ações ou ocorrências que acontecem nas aplicações e são

informadas aos desenvolvedores para que possam ser respondidas da maneira
esperada, como no caso de um botão em um site que, ao ser clicado, entre outras
possibilidades, pode apresentar uma caixa de informação (INTRODUÇÃO..., 2019,
documento on-line).
154
 Para que essas ações aconteçam, o programa aciona um sinal de
determinado tipo quando elas são ativadas e podem ser tratadas por mecanismos
automatizados, programados pelo desenvolvedor front end. É possível imaginar um
evento acontecendo em um aeroporto, quando a pista fica vazia para pouso e
decolagem, e a torre informa ao piloto que o caminho está livre e lhe concede
autorização, dando início ao movimento desejado com a aeronave em direção à
pista.
No caso de sistemas Web, os eventos acontecem dentro dos navegadores
e são vinculados a algum item específico dentro deles, como um elemento simples,
um conjunto de elementos, um documento carregado em uma determinada aba ou,
até mesmo, toda a janela do navegador.
São diversos tipos de eventos que podem acontecer em uma aplicação,
como:

 controlar um vídeo com as funções de começar e parar;

 clicar em um elemento com o mouse ou passá-lo por ele;
 pressionar alguma tecla no teclado;
 preencher um formulário e enviá-lo para o sistema;
 uma página que termina de carregar;
 um erro que pode ser verificado pelo programador no console.

13.1.1 Eventos DOM

Eventos DOM são enviados para notificar programaticamente o sistema de

acontecimentos específicos (EVENT, 2019, documento on-line). Cada evento
contém uma representação em um objeto que tem como base a interface Event e
que pode ter campos e funções que disponibilizam informações adicionais sobre o
ocorrido.

155
 Além disso, eles afirmam que os eventos podem representar desde
interações com os usuários até notificações automatizadas sobre acontecimentos
na renderização, bem como ser tanto eventos-padrão definidos nas especificações
oficiais quanto específicos para utilização interna em determinados navegadores.
Para Kacmarcik e Leithead (2016), os eventos de interface do usuário
herdam características e comportamentos dos objetos de evento do DOM, definidos
na especificação oficial. Normalmente são implementados para gerenciar a
interação com o usuário com entradas de interação com o mouse ou teclado e
projetados com dois objetivos principais:

1. Projeto de um sistema de eventos que permita o registro de

manipuladores de eventos e a descrição do fluxo do evento por meio
da estrutura de árvore.
2. Fornecimento de um subconjunto comum dos sistemas de eventos
atuais, utilizados nos navegadores escolhidos pelos usuários,
possibilitando a interoperabilidade dos scripts e dos conteúdos (não
é esperada a compatibilidade total desse objetivo com versões
anteriores de navegadores e do DOM, mas as especificações visam
a atender esse ponto sempre que possível).

A interface Event representa um evento que acontece dentro do DOM que,

além de ser acionado por ações como clique no mouse ou teclado, pode ser gerado
por application programming interface (APIs, em português interface de
programação para aplicativos), para representar o progresso de uma requisição
assíncrona, quando a requisição não trava o processamento do restante da
aplicação na espera da resposta. Também pode ser acionado programaticamente
a partir de chamadas de métodos, como o click() de um objeto HTMLElement, ou
enviados para um destino específico por meio do método dispatchEvent() do objeto
EventTarget.
São diversos os tipos de evento, sendo que alguns utilizam interfaces que
são baseadas na interface Event principal para herdar suas características e seus

156
comportamentos. A interface Event em si contém propriedades e métodos que são
comuns a todos eventos.

13.1.2 Arquitetura de eventos DOM

Como visto anteriormente, aplicações podem disparar objetos do tipo

evento por meio do método dispatchEvent(). Dessa forma, o objeto evento se
propagará por toda árvore DOM, conforme determinado pelo fluxo de eventos DOM.
Mesmo assim, antes de o objeto ser enviado, é necessário determinar o
caminho de propagação do objeto evento, que nada mais é do que uma lista de
destinos pelos quais o evento deve passar e que refletem a estrutura hierárquica do
documento da página Web. O último elemento da lista é o alvo do evento, assim
como em uma árvore genealógica, o diretamente anterior é o objeto-pai, e todos os
anteriores são seus ancestrais.
De acordo com Kacmarcik e Leithead (2016), com o caminho determinado,
o objeto evento passa por uma ou mais fases do evento, que são: a de captura, de
destino e da bolha, que podem ser puladas quando não suportadas ou se a
propagação do objeto for cancelada.

 Fase de captura: o objeto parte desde a raiz da árvore até o nó-pai

do objeto destino.
 Fase de destino: o objeto evento chega ao nó destino. Caso o objeto
chegue nessa fase e tenha a indicação de não borbulha, o evento
será interrompido após essa fase
 Fase de bolha: (ou fase de borbulha) o objeto se propaga de volta à
raiz do documento, do destino até seus ancestrais, em ordem
reversa, começando com o nó-pai e indo até o nó window.

157
 Os eventos podem ser cancelados, o comportamento que eles cancelam
pode ser chamado de ação-padrão, e os objetos canceláveis podem ser associados
com uma ou mais ações-padrão. Para cancelar um evento, é necessário chamar o
método preventDefault().
Além disso, os eventos podem ser síncronos ou assíncronos, que
representam disparados um após o outro, aguardando a resposta do primeiro para
enviar o segundo, ou simplesmente dados são enviados independentes de
resposta. No caso dos eventos síncronos, nenhuma outra ação é tomada antes da
resposta da ação do evento anterior. Já os eventos assíncronos podem ser
disparados sempre que o resultado de uma ação for concluída, sem que haja
relação entre eles e outros eventos.

13.1.3 Eventos React

Segundo a parte de manipulação de eventos da documentação oficial do

React, manipular eventos em elementos React é muito similar à manipulação de
eventos nos elementos DOM, com apenas algumas diferenças sintáticas, como
pode ser observado nos exemplos a seguir.
Exemplo em HTML e JavaScript:

<button onclick="cadastrarUsuario()">
Cadastrar
</button>

Exemplo em React:

<button onClick="{cadastrarUsuario}">
Cadastrar
</button>

158
 No caso do HTML/JavaScript o evento se chama onclick, enquanto no
React o evento é escrito onClick, usando camel case, que significa que a primeira
letra da segunda palavra em diante começa com letra maiúscula. Outra diferença é
que, com o JSX, a função cadastrarUsuário é passada como manipulador de
eventos, entre as chaves, ao invés de um texto.
Além disso, no React não é possível retornar false para evitar o
comportamento-padrão do evento em determinado elemento, como é feito no caso
do HTML a seguir.

<a href="#" onclick="alert('Link clicado!'); return false">

Clique Aqui
</a>

No caso do React, é necessário chamar o método preventDefault

explicitamente, como no seguinte caso.

function ActionLink() {
function handleClick(e) {
e.preventDefault();
alert('Link clicado!');
}
return (
<a href="#" onClick={handleClick}>
Clique Aqui
</a>
);
}

159
 Nesse exemplo em React, a letra “e” dentro do método handleClick() é um
evento sintático de acordo com a especificação W3C, o que permite a
compatibilidade entre os navegadores.

13.2 Passagem de parâmetros para manipuladores de eventos

Cada um dos eventos disponíveis possui um manipulador de eventos — ou

event handler, em inglês —, que é um trecho de código que costuma ser uma função
definida pelo desenvolvedor e executado apenas quando o evento é acionado.
Quando esse trecho de código é criado para ser executado em resposta a um
evento disparado, é possível afirmar que o desenvolvedor está registrando um
manipulador de eventos (MANIPULANDO..., 2019, documento on-line).
Algumas vezes, os manipuladores de eventos também são chamados de
escutadores de eventos — ou event listeners, em inglês. Apesar de os nomes serem
bastante parecidos, os escutadores ficam ouvindo os eventos que estão
acontecendo, e os manipuladores são os trechos de código que são executados
como resposta aos eventos, como no exemplo a seguir.

Trecho do código HTML:

<button> clique aqui </button>

Código em JavaScript:
var btn = document.querySelector('button');

btn.onclick = function() {
alert('Botão clicado!');
}

160
 Observa-se a variável btn armazena a referência ao botão por conta do
método document.querySelector(). O trecho de código que segue é o manipulador
do evento. A variável btn aponta para um elemento , que contém diversos eventos
que podem ser disparados a partir dele e tratados pelos manipuladores de eventos.
Com o método onclick recebendo uma função que apresenta o alerta, o programa
fica escutando o evento de clique no botão e apresentará o alerta sempre que o
botão for clicado.
Muitos elementos DOM podem ser configurados para ouvir esses eventos
e chamar funções para processamento como resposta a eles. Os manipuladores de
eventos costumam ser vinculados a vários elementos HTML, a partir da utilização
do método EventTarget.addEventListener(). Este recebe dois parâmetros: o
primeiro é o nome do evento que o desenvolvedor deseja registrar para ser
manipulado, e o segundo é a parte do código que deve ser executada como
resposta ao evento registrado.
Entretanto, quando o desenvolvedor trabalha com React, não é necessário
chamar o método addEventListener para adicionar ouvintes ao elemento DOM após
a sua criação. Basta definir o ouvinte no momento inicial de renderização do
elemento. Além disso, se o componente for definido por meio da utilização de uma
classe do ES6, é comum que a própria função na classe seja o manipulador de
evento, conforme exemplo a seguir.

class ReactAlert extends React.Component {

...
handleClick() {
alert('Botão React Clicado!');
}

render() {
return (
<button onClick={this.handleClick}>
Clicar

161
 </button>
);
}
...
}

Quando houver a necessidade de passar algum parâmetro extra para um

manipulador de eventos, como no caso de uma estrutura de repetição em que pode
ser necessário passar o identificador da linha para o evento, é preciso utilizar o
conceito de arrow functions ou Function.prototype.bind, como nos exemplos a
seguir, que fazem a mesma coisa:

<button onClick={(e) => this.deleteRow(id, e)}>Deletar linha</

button>
<button onClick={this.deleteRow.bind(this, id)}>Deletar linha</
button>

Como dito anteriormente, ambos os casos são equivalentes. No primeiro

caso, o argumento "e" representa o evento do React que será passado como
segundo parâmetro após a variável id, que representa o identificador da linha. Já no
segundo caso, o evento React também é passado juntamente com argumentos
adicionais, mas agora de forma automática, graças ao bind que recebe o this e o id.
Outro exemplo que exige que o desenvolvedor passe parâmetros para os
manipuladores de eventos é o caso do preenchimento e da submissão de um
formulário em que o usuário registra seu nome. Elementos de formulário em HTML
mantêm seu próprio estado e realizam a atualização de acordo com a entrada do
usuário. Já no React, o estado é mutável e costuma ser mantido na propriedade
state dos componentes, que pode ser atualizado por meio da função setState(),
como pode ser observado no trecho de código a seguir.

162
 handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Nome:
<input type="text" value={this.state.value}
onChange={this.handleChange} />
</label>
<input type="submit" value="Enviar" />
</form>
);
}

É possível observar que o atributo value é definido no <input> com

this.state.value, de forma que o estado do React seja a fonte de controle do
manipulador de eventos. Já o evento onChange do elemento <input> é vinculado
ao método handleChange(). Ele será executado a cada tecla pressionada pelo
usuário, de forma que, além de exibir o que está sendo digitado pelo usuário, o
estado armazenará o valor do campo por meio do objeto event, passado
automaticamente como parâmetro para a função handleChange().
Além disso, o componente React controla o que acontece no formulário em
cada uma das entradas do usuário, além de renderizá-lo. Quando isso acontece,
ele é chamado de componente controlado. Com isso, cada mutação de estado terá
uma função de manipulação ou um manipulador de eventos associado.

163
13.3 Exemplos de aplicações

Como visto até o momento, com o React, os elementos de formulário, como

o <input>, apresentam estado mutável e normalmente são mantidos na propriedade
state dos componentes, contendo um manipulador de eventos associado a cada
mutação de estado (FORMULÁRIOS, 2019, documento on-line).
No exemplo a seguir, baseado em exemplos do tópico de formulários da
documentação oficial, é apresentado um formulário maior, em que é necessário
manipular múltiplos eventos por meio dos componentes controlados. Para isso, é
utilizado o atributo name para cada um desses elementos e o valor de
event.target.name para tratá-los na função manipuladora de eventos.

class Confirmation extends React.Component {

constructor(props) {
super(props);
this.state = {
isConfirmed: true,
numberOfPeople: 3
};
this.handleInputChange = this.handleInputChange.
bind(this);
}

handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.
checked : target.value;
const name = target.name;

this.setState({

164
 [name]: value
});
}

render() {
return (
<form>
<label>
Confirmados:
<input
name="isConfirmed"
type="checkbox"
checked={this.state.isConfirmed}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Número de pessoas:
<input
name="numberOfPeople"
type="number"
value={this.state.numberOfPeople}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}

165
 Nesse caso, a função manipuladora de eventos é a handleInputChange,
que recebe o objeto event como parâmetro e, com isso, consegue acessar a
propriedade target do evento para conhecer o componente que realizou o seu
disparo, bem como o atributo name, que é utilizado para saber a propriedade do
estado que será atualizada dentro do método this.setState().

166
14 REFERÊNCIAS BIBLIOGRÁFICAS

AAS, P. et al. HTML 5.3: W3C First Public Working Draft. Cambridge;
Sophia-Antipolis;

Minato; Beijing: World Wide Web Consortium, 14 Dec. 2017. Disponível

em: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html. Acesso
em: 26 set. 2019.

BIRBECK, M. et al. XHTML™ 2.0: W3C Working Group Note. Cambridge;

Sophia-Antipolis;Minato; Beijing: World Wide Web Consortium, 16 Dec. 2010.
Disponível em: https://www.w3.org/TR/xhtml2/. Acesso em: 26 set. 2019.

DUBINKO, M. et al. Forms 1.0: W3C Recommendation. Cambridge;

Sophia-Antipolis;Minato; Beijing: World Wide Web Consortium, 14 Oct. 2013.
Disponível em: https://www.w3.org/TR/2003/REC-xforms-20031014/. Acesso em:
26 set. 2019.

FAQ - WHATWG. Web Hypertext Application Technology Working

Group, [S. l.], 2018.Disponível em: https://whatwg.org/faq. Acesso em: 26 set. 2019.

FAULKNER, S. et al. HTML 5.2: W3C First Public Working Draft.

Cambridge; Sophia--Antipolis; Minato; Beijing: World Wide Web Consortium, 18
Aug. 2016a. Disponível em: https://www.w3.org/TR/2016/WD-html52-
20160818/single-page.html. Acesso em: 26 set. 2019.

FAULKNER, S. et al. HTML 5.1: W3C Recommendation. Cambridge;

Sophia-Antipolis;Minato; Beijing: World Wide Web Consortium, 1 Nov. 2016b.
Disponível em: https://www.w3.org/TR/2016/REC-html51-20161101/. Acesso em:
26 set. 2019.

FAULKNER, S. et al. HTML 5.2: W3C Recommendation. Cambridge;

Sophia-Antipolis;Minato; Beijing: World Wide Web Consortium, 14 Dec. 2017.
Disponível em: https://www.w3.org/TR/html52/. Acesso em: 26 set. 2019.

167
 FLATSCHART, F. HTML 5: embarque imediato. Rio de Janeiro: Brasport,
2011. 256 p.HICKSON, I. Web Forms 2.0: W3C Member Submission. Cambridge;
Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 11 Apr. 2005.
Disponível em: https:// www.w3.org/Submission/web-forms2/. Acesso em: 26 set.
2019.

HICKSON, I. et al. HTML5: A vocabulary and associated APIs for HTML

and XHTML: W3C Recommendation. Cambridge; Sophia-Antipolis; Minato;
Beijing: World Wide Web Consortium, 28 Oct. 2014. Disponível em:
https://www.w3.org/TR/html50/. Acesso em: 26 set. 2019.

HISTORY of HTML. Web Hypertext Application Technology Working

Group, [S. l.], [2018]. Disponível em: https://www.htmlwasher.com/history-of-html/.
Acesso em: 26 set. 2019.

JACOBS, I.; WALSH, N. Architecture of the World Wide Web, Volume

One: W3C Recommendation. Cambridge; Sophia-Antipolis; Minato; Beijing: World
Wide Web Consortium, 15 Dec. 2004. Disponível em:
https://www.w3.org/TR/2004/REC-webarch-20041215/. Acesso em: 26 set. 2019.

LE HORS, A. et al. Document Object Model (DOM) Level 2 Core

Specification: Version 1.0: W3C Recommendation. Cambridge; Sophia-Antipolis;
Minato; Beijing: World Wide Web Consortium, 13 Nov. 2000. Disponível em:
https://www.w3.org/TR/DOM-Level-2-Core/.Acesso em: 26 set. 2019.

LE HORS, A. et al. Document Object Model (DOM) Level 3 Core

Specification: Version 1.0: W3C Recommendation. Cambridge; Sophia-Antipolis;
Minato; Beijing: World Wide Web Consortium, 7 Apr. 2004. Disponível em:
https://www.w3.org/TR/DOM-Level-3-Core/. Acesso em: 26 set. 2019.

PEMBERTON, S. et al. XHTML™ 1.0 The Extensible HyperText Markup

Language (Second Edition): A Reformulation of HTML 4 in XML 1.0: W3C
Recommendation. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web

168
Consortium, 26 Jan. 2000. Disponível em: https://www.w3.org/TR/xhtml1/. Acesso
em: 26 set. 2019.

PIETERS, S. HTML5 Differences from HTML4: W3C Working Group

Note. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 9
Dec. 2014. Disponível em: https://www.w3.org/TR/html5-diff/. Acesso em: 26 set.
2019.

POYATOS, H. Programando em HTML5. DevMedia, Rio de Janeiro, 2014.

Disponível em: https://www.devmedia.com.br/programando-em-html5/31040.
Acesso em: 26 set. 2019.

RAGGETT, D. HTML 3.2 Reference Specification: W3C

Recommendation. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web
Consortium, 14 Jan. 1997. Disponível em: https://www.w3.org/TR/REC-html32.
Acesso em: 26 set. 2019.

RAGGETT, D.; LE HORS, A.; JACOBS, I. HTML 4.01 Specification: W3C

Recommendation. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web
Consortium, 24 Dec. 1999. Disponível em: https://www.w3.org/TR/html401/. Acesso
em: 26 set. 2019.

SILVA, M. S. HTML 5: a linguagem de marcação que revolucionou a

web. São Paulo: Novatec, 2011. 320 p.

VAN KESTEREN, K. XMLHttpRequest Level 2: W3C Working Draft.

Cambridge; Sophia- -Antipolis; Minato; Beijing: World Wide Web Consortium, 17
Jan. 2012. Disponível em: https://www.w3.org/TR/2012/WD-XMLHttpRequest-
20120117/. Acesso em: 26 set. 2019.

WEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP.

HTML: Living Standard. Web Hypertext Application Technology Working Group, [S.
l.], 2019. Disponível em: https:// html.spec.whatwg.org/. Acesso em: 26 set. 2019.

169
 WOOD, L. et al. Document Object Model (DOM) Level 1 Specification:
Version 1.0: W3C Recommendation. Cambridge; Sophia-Antipolis; Minato;
Beijing: World Wide Web Consortium, 1 Oct. 1998. Disponível em:
https://www.w3.org/TR/REC-DOM-Level-1/.Acesso em: 26 set. 2019.

ADAMS, C. et al. A arte e a ciência da CSS: crie web designs

inspiradores baseados em padrões. Porto Alegre: Sitepoint; Bookman, 2009. 248
p. HOW CSS works. MDN Web Docs, Mountain View, 2019. Disponível em:
https://developer. mozilla.org/en-
US/docs/Learn/CSS/First_steps/How_CSS_works. Acesso em: 28 set. 2019.

MARIANO, D.; MELO-MINARDI, R. Introdução à programação web para

bioinformática: HTML, CSS, PHP & JavaScript. North Charleston: CreateSpace
Independent Publishing Platform, 2017. 410 p.

SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec,

2015. 304 p.<FORM> – HTML: Linguagem de Marcação de Hipertexto. MDN
Web Docs, Mountain View, 2019. Disponível em: https://developer.mozilla.org/pt-
BR/docs/Web/HTML/ Element/form. Acesso em: 28 set. 2019.

MARIANO, D.; MELO-MINARDI, R. Introdução à programação web para

bioinformática: HTML, CSS, PHP & JavaScript. North Charleston: CreateSpace
Independent Publishing Platform, 2017. 410 p.

SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.

304 p.

CODEX. Layout. 2017. Disponível em:

http://www.codex.wiki.br/Html/Layout. Acesso em: 7 out. 2019.

DARRELL, R. HTML Table Layouts. Iron Spider, Montréal, 2011.

Disponível em: http://www.ironspider.ca/webdesign102/tables4layout2.htm. Acesso
em: 30 set. 2019.

170
 FLATSCHART, F. HTML 5: embarque imediato. Rio de Janeiro: Brasport,
2011. 256 p.

PRESCOTT, P. HTML 5. Delaware; Hackensack: Babelcube, 2015. 113 p.

RAGGETT, D.; LE HORS, A.; JACOBS, I. Lists in HTML documents.

Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 24 Dec.
1999a. Disponível em: https://www.w3.org/TR/html401/struct/lists.html. Acesso em:
30 set. 2019.

RAGGETT, D.; LE HORS, A.; JACOBS, I. Tables in HTML documents.

Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 24 Dec.
1999b. Disponível em:https://www.w3.org/TR/html4/struct/tables.html. Acesso em:
30 set. 2019.

SMITH, M. HTML: The Markup Language: An HTML language reference:

W3C Working Draft. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web
Consortium, 29 Mar. 2012. Disponível em: https://www.w3.org/TR/2012/WD-html-
markup-20120329/spec.html. Acesso em: 30 set. 2019.

ECMA INTERNATIONAL. ECMAScript® 2015 Language Specification. 6.

ed. Geneva: Ecma, 2015. 545 p. Disponível em: https://www.ecma-
international.org/ecma-262/6.0/ECMA-262.pdf. Acesso em: 22 out. 2019.

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre:

Bookman, 2013. 1080 p.

THE WINDOW Object. W3Schools, Sandnes, 2019. Disponível em:

https://www.w3schools.com/jsref/obj_window.asp. Acesso em: 22 out. 2019.

BOOTSTRAP 4 Get Started. W3Schools, Sandnes, 2019. Disponível em:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp. Acesso em: 18
out. 2019.

171
 COMPONENTES e Props. React/Facebook Open Source, [S. l.], 2019.
Disponível em: https://pt-br.reactjs.org/docs/components-and-props.html. Acesso
em: 18 out. 2019.
CREATE React App. Facebook Open Source, [S. l.], 2019. Disponível em:
https://create-react-app.dev/. Acesso em: 18 out. 2019.

CRIE um novo React App. React/Facebook Open Source, [S. l.], 2019.
Disponível em:https://pt-br.reactjs.org/docs/create-a-new-react-app.html. Acesso
em: 18 out. 2019.

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre:

Bookman, 2013. 1080 p.
INTRODUZINDO JSX. React/Facebook Open Source, [S. l.], 2019.
Disponível em: https://pt-br.reactjs.org/docs/introducing-jsx.html. Acesso em: 18
out. 2019.

REACT – Uma biblioteca JavaScript para criar interfaces de usuário.

React/FacebookOpen Source, [S. l.], 2019. Disponível em: https://pt-br.reactjs.org/.
Acesso em: 18 out. 2019.

RENDERIZANDO Elementos. React/Facebook Open Source, [S. l.], 2019.

Disponível em:https://pt-br.reactjs.org/docs/rendering-elements.html. Acesso em:
18 out. 2019.

STEFANOV, S. Primeiros passos com React: construindo aplicações

web. São Paulo:Novatec, 2016. 248 p.

ECMA INTERNATIONAL. ECMAScript® 2015 Language Specification.

6. ed. Geneva: Ecma, 2015. 545 p. Disponível em: https://www.ecma-
international.org/ecma-262/6.0/ECMA262.pdf. Acesso em: 2 nov. 2019.

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre:

Bookman, 2013. 1080 p.

172
 SIMPSON, K. You don’t know JS: types & grammar. Sebastopol: O’Reilly,
2015a.

SIMPSON, K. You don’t know JS: up & going. Sebastopol: O’Reilly,

2015b.

CASTIGLIONI, M. Meu HTML é semântico e o seu? CollabCode, Medium,

[S. l.], 17 maio 2018. Disponível em: https://medium.com/collabcode/meu-html-
%C3%A9- -sem%C3%A2ntico-e-o-seu-4e97c81c0c49. Acesso em: 14 out. 2019.

CHAMPION, M. et al. Document object model (Core) Level 1. Cambridge;

Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 1 Oct. 1998.
Disponível em: https://www. w3.org/TR/REC-DOM-Level-1/level-one-core.html.
Acesso em: 14 out. 2019.

FRANKLYN, R. Introdução ao DOM. MDN Web Docs, Mountain View,

5 set. 2019. Disponível em: https://developer.mozilla.org/pt-
BR/docs/DOM/Referencia_do_DOM/
Introdu%C3%A7%C3%A3o#DOM_interfaces. Acesso em: 14 out. 2019.

INTRODUCTION to DOM - JavaScript Course #09. [S. l.: S. n.], 2019. 1

vídeo (28 min 4 s). Publicado pelo canal Curso em Vídeo. Disponível em:
https://www.youtube.com/ watch?v=WWZX8RWLxIk. Acesso em: 14 out. 2019.

JAVASCRIPT HTML DOM Document. W3Schools, Sandnes, 2019.

Disponível em: https:// www.w3schools.com/js/js_htmldom_document.asp. Acesso
em: 14 out. 2019.

MALDONADO, L. Entendendo o DOM (Document Object Model): o DOM

explicado de uma maneira fácil. Tableless, [S. l.], 8 fev. 2008. Disponível em:
https://tableless.com. br/entendendo-o-dom-document-object-model. Acesso em:
14 out. 2019.

173
 MEDEIROS, H. Trabalhando com DOM em JavaScript. DevMedia, Rio de
Janeiro, 2013. Disponível em: https://www.devmedia.com.br/trabalhando-com-dom-
em-javascript/29039. Acesso em: 14 out. 2019.

NASCIMENTO, F. Começando com o desenvolvimento Front-end.

Alura, São Paulo, 21 mar. 2019. Disponível em:
https://www.alura.com.br/artigos/comecando-com-o- -desenvolvimento-front-end.
Acesso em: 14 out. 2019.

QUEIROZ, W. C. et al. Modelo de Objeto de Documento (DOM). MDN

Web Docs, Mountain View, 17 jun. 2019. Disponível em:
https://developer.mozilla.org/pt-BR/docs/DOM/ Referencia_do_DOM. Acesso em:
14 out. 2019.

FERNANDES, R. F. Integrating semantic-ui modal with Redux. IT Next,

Utrecht, 16 Feb. 2018. Disponível em: https://itnext.io/integrating-semantic-ui-
modal-with- -redux-4df36abb755c. Acesso em: 6 nov. 2019.

FLUX. GitHub, [S. l.], 16 Oct. 2019. Disponível em:

https://github.com/facebook/flux. Acesso em: 6 nov. 2019.

FLUX — Application architecture for building user interfaces. Facebook

Open Source, [S. l.], 2019. Disponível em: https://facebook.github.io/flux/. Acesso
em: 6 nov. 2019.

FLUX-CONCEPTS. GitHub, [S. l.], 19 Jan. 2017. Disponível em:

https://github.com/facebook/ flux/tree/master/examples/flux-concepts. Acesso em:
6 nov. 2019.

REDUX — A predictable state container for JavaScript apps. Redux,

[S. l.], 2015. Disponível em: https://redux.js.org/. Acesso em: 6 nov. 2019.

STEFANOV. S. Primeiros passos com React: construindo aplicações

web. São Paulo: Novatec, 2016. 248 p

174
 ECMA INTERNATIONAL. ECMAScript® 2015 Language Specification. 6.
ed. Geneva: Ecma, 2015. 545 p. Disponível em: https://www.ecma-
international.org/ecma-262/6.0/ECMA262.pdf. Acesso em: 24 out. 2019.

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre:

Bookman, 2013. 1080 p

MACHADO, R. P.; FRANCO, M. H. I.; BERTAGNOLLI, S. C.

Desenvolvimento de software III: programação de sistemas web orientada a
objetos em Java. Porto Alegre: Bookman, 2016. 220 p. (Série Tekne; Eixo
Informação e Comunicação).

ADICIONE o React em Um Minuto. React/Facebook Open Source, [S. l.],

2019. Disponível em: https://pt-br.reactjs.org/docs/add-react-to-a-website.html.
Acesso em: 17 out. 2019.

FIGUEIREDO, E. O que é uma SPA: Single-Page Application? School of

Net, Indaiatuba, 26 jul. 2018. Disponível em: https://blog.schoolofnet.com/o-que-e-
uma-spa-single- -page-application/. Acesso em: 17 out. 2019.

REACT – Uma biblioteca JavaScript para criar interfaces de usuário.

React/Facebook Open Source, [S. l.], 2019a. Disponível em: https://pt-
br.reactjs.org/. Acesso em: 17 out. 2019.

REACT JSX. W3Schools, Sandnes, 2019b. Disponível em:

https://www.w3schools.com/ react/react_jsx.asp. Acesso em: 17 out. 2019.

REACT Tutorial. W3Schools, Sandnes, 2019c. Disponível em:

https://www.w3schools. com/react/default.asp. Acesso em: 17 out. 2019.

EVENT. MDN Web Docs, Mountain View, 2019. Disponível em:

https://developer.mozilla. org/pt-BR/docs/Web/API/Event. Acesso em: 24 out. 2019.

FORMULÁRIOS. React/Facebook Open Source, [S. l.], 2019. Disponível

em: https://pt-br. reactjs.org/docs/forms.html. Acesso em: 24 out. 2019.

175
 INTRODUÇÃO a eventos. MDN Web Docs, Mountain View, 2019.
Disponível em: https:// developer.mozilla.org/pt-
BR/docs/Aprender/JavaScript/Elementos_construtivos/Events. Acesso em:
24 out. 2019.

KACMARCIK, G.; LEITHEAD, T. UI Events: W3C Working Draft.

Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium,
4 Aug. 2016. Disponível em: https://www. w3.org/TR/DOM-Level-3-Events/#event-
flow. Acesso em: 24 out. 2019.

MANIPULANDO eventos. React/Facebook Open Source, [S. l.], 2019.

Disponível em: https:// pt-br.reactjs.org/docs/handling-events.html. Acesso em:
24 out. 2019.

176