11 - Programação WEB

Conceitos do HTML
Conteudista
Prof. Esp. Alexander Albuquerque Gobbato
Revisão Textual
Prof.ª M.ª Rosemary Toffoli
OBJETIVOS DA UNIDADE
• Entender que o HTML5 é uma linguagem para criação e publicação de
documentos para web;
• Apresentar os vários recursos disponíveis com a nova versão do HTML;
• Compreender alguns itens que serão de extrema importância para ini-

ciarmos a construção de um formulário.
Atenção, estudante! Aqui, reforçamos o acesso ao conteúdo on-line

para que você assista à videoaula. Será muito importante para o
entendimento do conteúdo.
Este arquivo PDF contém o mesmo conteúdo visto on-line. Sua dis-
ponibilização é para consulta off-line e possibilidade de impressão.
No entanto, recomendamos que acesse o conteúdo on-line para
melhor aproveitamento.
2
Introdução
Houve um grande avanço da versão do HTML 4.01 para o HTML5. Muitas valida-
ções e programações que teríamos que fazer utilizando uma linguagem de pro-
gramação foi incorporado aos elementos HTML, nesta Unidade iremos verificar
quais foram esses itens que utilizaremos e que vieram para facilitar nossas vidas.
Ambiente Cliente/Servidor
Pensando nos elementos básicos para fornecer informação através da Web,
temos:
Figura 1 – Ambiente cliente/servidor

Fonte: Adaptada de Freepik
#ParaTodosVerem: figura esquemática que apresenta o ambiente cliente/servidor. A figura é composta por
três elementos, da direita para a esquerda temos, a figura de um computador que representa o cliente, no
meio uma nuvem que representa a conexão e na direita temos servidores que representa o servidor web
com protocolo HTTP. Fim da descrição.
O que precisamos saber:
• Cliente:
• HTML;
• CSS;
• Javascript;
• XML.
3
• Servidor:
• Banco de dados;
• JSP;
• ASP.NET.
O que é HTML?
A World Wide Web (Web) é uma rede de recursos e serviços de informação.
Ela serve-se de três mecanismos, de modo a fazer com que esses recursos este-
jam legivelmente disponíveis à audiência mais vasta possível:
• Um esquema uniforme de atribuição de nomes, de forma a se localizar

os recursos na Web (ex.: URIs);
• Protocolos, para o acesso aos recursos nomeados através da Web (ex.:

HTTP);
• Hipertexto, para uma navegação mais fácil através dos referidos recur-
sos (ex.: HTML).
Os laços entre os três mecanismos evidenciam-se através desta especificação.
Introdução aos URIs

Todos os recursos disponíveis na Web possuem um endereço, o qual poderá
ser codificado por um Identificador de Recursos Universal, ou “URI” (Universal
Resource Identifier).
Os URIs são de uma forma geral constituídos por três partes:
• O esquema de nomeação do mecanismo usado para se ter acesso ao

recurso;
• O nome da máquina de hospedagem desse recurso;
• O nome do próprio recurso, atribuído na qualidade de trajeto (path).
4
Exemplos de URIs
• Página destinada a relatórios técnicos da W3C: h t t p : / / w w w . w 3 . o r g

/TR/
• URI referente a caixa postal: <a href=mailto:alexander_gobbato@

yahoo.com.br> Prof. Alexander Gobbato</a>
• Identificadores de fragmentos: h t t p : / / s o m e s i t e . c o m / h t m l / t o p . h t m
l#section_2
No HTML, os URIs são usados para:
• Fazer uma ligação a um outro documento ou recurso, (ver os elementos

A e LINK);
• Fazer uma ligação a uma folha de estilo ou script (ver os elementos LINK
e SCRIPT);
• Incluir uma imagem, objeto ou applet numa página, (ver os elementos

IMG, OBJECT, APPLET e INPUT);
• Criar um mapa de imagens (ver os elementos MAP e AREA);
• Submeter um formulário (ver FORM);
• Criar um documento com molduras (ver os elementos FRAME e IFRAME);
• Citar uma referência externa (ver os elementos Q, BLOCKQUOTE, INS e

DEL);
• Fazer referências a convenções de metadados descrevendo um docu-

mento (ver o elemento HEAD).
W3C
A World Wide Web Consortium (W3C) é o órgão responsável por recomendar
padrões de desenvolvimento para a internet. Por meio destes padrões se
pode classificar web sites de acordo com suas características técnicas, indo
além do visual e navegadores, de acordo com sua capacidade em atender
aos padrões definidos.
5
Para se publicar informação de distribuição global, é necessário utilizar-se uma
linguagem de compreensão universal, uma espécie de Língua de publicação
“Mãe”, a qual possa ser potencialmente usada e compreendida por todos os
computadores.
O HTML é a linguagem de publicação usada pela World Wide Web (do Inglês: Hyper
Text Markup Language).
O HTML dá aos autores a possibilidade de:
• Publicar documentos online contendo cabeçalhos, texto, quadros e tabe-

las, listas, fotos etc.;
• Recuperar ou retirar informações online, por intermédio de ligações de

hipertexto, clicando num botão;
• Concepção de formulários para efetuar transações com serviços remo-

tos, para o uso na busca de informação, efetuar reservas, encomenda de
produtos etc. (W3C, 2018).
Versões
A versão mais significativa para nossa realidade foi o HTML 4.01 que foi publica-
do como uma recomendação do W3C em 1999. Ele possui as mesmas versões
do HTML 4.0.
A especificação do HTML 5 teve início em 2008 e ainda está em desenvolvimento

sendo que sua última publicação foi liberada em 2012.
Figura 2 – HTML5
Fonte: Wikimedia Commons
6
Muitos comandos não são compatíveis com todos os Navegadores (isso se aplica
principalmente ao CSS3 que veremos mais para frente).
Quando abrimos uma página HTML em um navegador, o navegador irá interpre-

tar as tags, ou seja, irá fazer uma análise sintática, definindo como cada parte do
texto será apresentada.
Um problema comum no desenvolvimento de páginas HTML desde o seu surgi-

mento e outras tecnologias como CSS e Javascript, é a compatibilidade entre os
navegadores, ou seja, uma página desenvolvida em HTML5 pode rodar somente
no Chrome, por exemplo, ou aparecer de um jeito no Internet Explorer e de outro
no Firefox, também temos que tomar cuidado quando falamos em dispositivos
ou sistemas diferentes, como visualizar nossa página em um celular. Nem todos
os aparelhos estão aptos a rodar os códigos atuais.
Motores de Renderização
É o mecanismo utilizado pelos navegadores para processar o código das páginas
web, os principais motores dos principais navegadores são:
• Webkit (é o mais compatível com HTML 5) – Safari, Chrome;
• Gecko – Firefox;
• Trident – Internet Explorer.
Devemos sempre procurar deixar nossos códigos compatíveis com esses moto-
res para que possamos atingir o maior número possível de usuários.
HTML Markup Tag

As marcações de tags HTML são geralmente chamadas de tags HTML.
As palavras chaves estão marcadas entre os símbolos < e > como <html>.
Geralmente em pares como <b> e </b>.
A primeira tag do par é a tag inicial e a segunda tag a tag final.
7
Regras HTML Tag
• Tags HTML consistem em comandos que aparecem entre colchetes an-
gulares (<>);
• Tags HTML não são case sensitive;
• Tags HTML quase sempre vêm em pares.
Exemplo:
Figura 3 – Exemplo de código HTML

Fonte: Acervo do Conteudista
• Texto entre <html> e </html> descreve a página web;
• O texto entre <body> e </body> é a informação visível na página;
• O texto entre <h1> e </h1> é exibido como cabeçalho;
• O texto entre <p> e </p> é exibido como parágrafo.
Document Type
O elemento <!DOCTYPE> especifica o tipo de documento (DTD), como página de
uso restrito de HTML e CSS.
8
• HTML 4.01 Strict DTD – adheres CSS and HTML 4.01 standards: <!DOC-
TYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ h t t p : / / w w w . w 3 . o r g
/TR/html4/strict.dtd” >
• HTML 4.01 Transitional DTD – adheres HTML 4.01 standards including

deprecated HTML elements and attributes: <!DOCTYPE html PUBLIC “-//
W3C//DTD XHTML 1.0 Transitional//EN” “ h t t p : / / w w w . w 3 . o r g / T R / x h t m
l1/DTD/xhtml1-transitional.dtd ” >
• HTML 4.01 Frameset DTD – adheres HTML 4.01 standards including de-
precated HTML elements and attributes and frames.
O DOCTYPE é a maneira de você dizer para qualquer navegador como ele deve
agir ao ler seu código HTML.
Porque cada browser tem um padrão próprio de renderizar o HTML sem DOCTYPE.
O Strict é o “melhor” uma vez que ao dizer para um browser renderizar com ele,
você está dizendo que seguirá rigorosamente os padrões.
O Transitional você diz ao Browser que seu código está em transição, não neces-
sariamente seguirá rigorosamente os padrões, mas não fará um “ninho de ratos”.
Já o Frameset, será para renderizar os arcaicos Frames.
Documento Principal
O <html> é o elemento principal do documento HTML.
Ele contém outros elementos como:
• <head> </head> tags;
• <title></title> tags;
• <body></body> tags.
O elemento <title> fornece o título do documento que aparece o topo do browser.
O elemento <body> contém todas as informações do documento, ele vem de-

pois do cabeçalho e deve ser fechado. A lista a seguir contém alguns atributos
comuns:
9
• BGCOLOR: define o valor da cor;
• BACKGROUND: permite que você especifique um arquivo gráfico para

utilizar como imagem de fundo:
• Fornece um localizador de recursos uniforme (URL) de uma pasta de

imagem para ser utilizada como o fundo tela;
• Se a imagem for salva em outro lugar, você tem que digitar o ende-
reço completo que aponta para a imagem.
• LINK: permite que você especifique a cor em que hiperlinks de texto não
visitados;
• VLINK: permite que você especifique a cor na qual visitou;
• ALINK: permite que você especifique a cor enquanto os usuários clicam

nos links.
Vejamos alguns elementos HTML.
Criação de Links
A tag <a> define um hiperlink que é usado para ligar uma página para outra.
O atributo mais importante do elemento é o atributo href, que indica o destino

do link.
Figura 4 – Exemplo de uso da tag <a> com uso do atributo href

Criação de Tabelas
A tag <table> define uma tabela em html. A tag <table> consiste em um elemento
<tr> para indicar a linha e um elemento <td> para indicar a célula.
10
Figura 5 – Estrutura HTML para criação de tabela
#ParaTodosVerem: a figura apresenta um código HTML que utiliza as tags <table>, <tr> e <td> para a criação
de uma tabela. Fim da Descrição.
Criação de Listas
• <ul> – lista não ordenada;
• <ol> – lista ordenada;
• <li> – item de lista.
Figura 6 – Estrutura HTML para criação de listas

#ParaTodosVerem: a figura apresenta um código HTML que utiliza as tags <ul> para uma lista não ordenada,
<ol> para uma lista ordenada e <li> que inserir os itens nas listas. Fim da descrição.
11
Criação de Campos Textos
A tag <input> especifica um campo de entrada onde o usuário pode inserir dados.
Os <input> geralmente são utilizados dentro de <form>.
Um campo de entrada pode variar de muitas formas, dependendo do tipo de

atributo.
Figura 7 – Estrutura HTML com uso da tag <input>

Caracteres Especiais
HTML permite que caracteres especiais sejam representados por sequências de
escape, indicadas por três partes: um & inicial, um número ou cadeia de caracte-
res correspondente ao caractere desejado, e um ; final.
Quatro caracteres ASCII – <, >, e & têm significados especiais em HTML, e são
usados dentro de documentos seguindo a correspondência:
Quadro 1
Entidade Caracter
< <
> >
& &
Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma
Tabela com os caracteres mais utilizados em português:
12
Quadro 2
Entidade Caracter Entidade Caracter
á á Á Á
ã ã Ã Ã
â â Â Â
à à À À
é é É É
ê ê Ê Ê
í í Í Í
ó ó Ó Ó
õ õ Õ Õ
ô ô Ô Ô
ú ú Ú Ú
ü ü Ü Ü
ç ç Ç Ç
Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML

fazem essa tradução automaticamente.
Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de

formatação. Quando isso acontece, deve-se inserir uma indicação do esquema
de codificação ISO Latin1, escrevendo:
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO-8859-1”>
13
Alguns Elementos Novos do
HTML
Section
Representa um documento genérico ou seção da aplicação. Pode ser usado em
conjunto com elementos <h1>, <h2>, <h3>, <h4>, <h5> e <h6> para indicar a es-
trutura do documento
Exemplo:
Figura 8 – Estrutura HTML com uso da tag <section>

Article
Representa uma peça independente do conteúdo de um documento, como um
blog ou artigo de jornal.
14
Figura 9 – Estrutura HTML com uso da tag <article>
Aside
Representa uma parte do conteúdo que é pouco relacionado com o resto da
página.
Figura 10 – Estrutura HTML com uso da tag <aside>

Footer
Representa um rodapé de uma seção e pode conter informações sobre o autor,
direitos autorais etc.
15
Figura 11 – Estrutura HTML com uso da tag <footer>
Figure
Representa uma parte do conteúdo de fluxo autossuficiente.
Serve para agrupar uma seção de conteúdo independente, como um vídeo ou

uma imagem.
Figura 12 – Estrutura HTML com uso da tag <figure>

16
MATERIAL COMPLEMENTAR
Livro
Apresentação da HTML5
SILVA, M. S. Apresentação da HTML5. In: SILVA, M. S. HTML5 – A
linguagem de marcação que revolucionou a web. 2. ed. São Paulo:
Novatec, 2019.
REFERÊNCIAS BIBLIOGRÁFICAS
SILVA, M. S. Construindo sites com CSS e (X)HTML: Sites controlados por folhas de
estilo em cascata. São Paulo: Novatec, 2010.
SILVA, M. S. HTML 5 – A linguagem de marcação que revolucionou a web. São Paulo:

Novatec, 2011.
Fundamentos de CSS
Conteudista
Prof. Me. Marco Antonio Sanches Anastacio
Revisão Textual
Prof.ª Dra. Selma Aparecida Cesarin
• Entender as regras e a função do CSS na programação web;
• Compreender como as folhas de estilo organizam o conteúdo de uma

página web, aplicando os conhecimentos adquiridos na construção de
layouts.

2
O Que é CSS?
A finalidade do HTML, desde sua criação, sempre foi lidar somente com a marca-
ção e a estruturação de conteúdo. Entretanto, quando abrimos nosso navegador,
vemos páginas atraentes e agradáveis, que extrapolam uma simples marcação
de tags HTML.
No início do HTML, recorria-se a elementos e atributos específicos da própria

Linguagem para definir a formatação das páginas. Por exemplo, o elemento
<font> foi introduzido na versão 3.2 do HTML para definir fonte, tamanho e cor
de texto.
A partir da versão 4.0 do HTML, o World Wide Web Consortium (W3C) incorporou
o CSS (Cascading Style Sheet, ou Folha de Estilo em Cascatas), com a finalidade de
se encarregar de toda a apresentação visual de um site, alterar elementos como
fonte, cor e tamanho de textos, espaçamento entre blocos, enfim, todo o aspecto
estético de uma página web.
A utilização do CSS trouxe vários benefícios e, entre eles, podemos citar:
• Garantir flexibilidade e controle dos elementos na página;
• Simplificar a criação de páginas web;
• Permitir que a aparência e o layout de todas as páginas de um site sejam

alteradas editando-se, com isso, um único arquivo (folhas de estilo ex-
ternas);
• Garantir maior flexibilidade e controle nas especificações do site, entre

outros.
Sintaxe CSS
O CSS utiliza uma estrutura de sintaxe simples, na qual a regra é a unidade básica
de uma folha de estilo e é composta de duas partes principais: um seletor e uma
ou mais declarações, como apresentado na Figura 1.
3
Figura 1 – Regra CSS
#ParaTodosVerem: imagem que descreve a utilização de uma Regra CSS. Da esquerda para a direita, são
especificados o Seletor e as declarações. Na parte superior da imagem, há o título “Regra CSS”. A parte
inferior da imagem contém textos destacando a Propriedade e o valor de cada uma das declarações. O
seletor utilizado é o h1 e as declarações são “color: blue” e “font-size: 12px”. Fim da descrição.
Nessa definição dos componentes de uma regra CSS, temos:
• Seletor: é o elemento HTML que se deseja criar o estilo;
• Declaração: determina os parâmetros do estilo e consiste em uma pro-

priedade e um valor;
• Propriedade: define a característica do seletor que será alterada;
• Valor: refere-se à quantificação ou qualificação da propriedade.
Uma regra pode conter várias declarações separadas por ponto e vírgula. Veja o
exemplo a seguir:
h1{color: red; font-size: 36px}
Seletores Válidos
Os seletores são componentes HTML que desejamos modificar e estilizar, por
meio do uso do CSS. Dentre os vários existentes, o Quadro 1 apresenta três dos
principais seletores utilizados para criar estilos para um elemento do HTML.
4
Quadro 1 – Principais seletores CSS
Tipo de seletor Descrição Exemplo
p
Seleciona um elemento
Seletor de elemento Seleciona apenas
do HTML.
os elementos p
da página.
Usado para especificar

#main
um estilo para um
elemento único e
Seletor de id Seleciona apenas
seleciona apenas um
o elemento com
elemento que possui o
o id “main”.
valor atribuído id.
Usado para especificar

.main
um estilo para um
grupo de elementos,
Seleciona apenas
Seletor de classe permitindo criar um
os elementos
estilo para vários
que possuem a
elementos do HTML com
classe “main”.
a mesma classe.
Vejamos, a seguir, um exemplo contendo o uso desses seletores:
5
<html>
<head>
<style>
#main {
text-align: center;
color: red;
}
.cor {color: blue;}
p {font-size: 28px;}
/*Efeito de sombra no texto*/
h1{text-shadow: 5px 5px 5px #FF0000;}
/*Efeito quebra de linha*/
p {word-wrap:break-word;}
@import url(‘https://fonts.googleapis.com/css2?family=Shan-
tell’);
p{font-family: ‘Shantell Sans’, cursive;}
div{
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1 id=”main”>Texto alinhado ao centro na cor vermelha</
h1>
<h2 class=”cor”>Texto alinhado à esquerda na cor azul</h2>
<p>Texto alinhado à esquerda no tamanho 28px</p>
</body>
</html>
Site
O CSS Validation Service é uma ferramenta in-
dispensável para verificar se o seu CSS é válido.
6
Vinculando Folhas de Estilo a
Documentos
Não basta que você defina uma regra CSS. É preciso informar ao documento
onde ela se encontra. As folhas de estilo podem ser utilizadas de três maneiras
diferentes:
• Estilo externo;
• Estilo interno;
• Estilo inline.
O estilo externo é ideal quando a formatação deve ser aplicada a várias páginas.
Com um arquivo externo, você pode alterar um formato e ele será aplicado auto-
maticamente em todo o projeto.
Um estilo externo pode ser escrito por qualquer editor e não deve conter nenhu-
ma tag HTML. O arquivo deve ser salvo com a extensão .css e pode ser vinculado
a um documento HTML usando o elemento link, que deve estar contido na da
seção head.
Veja o exemplo a seguir:
<head>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
</head>
Lembre-se de que o atributo href deve apontar exatamente o endereço no qual

se encontra o arquivo que contém a folha de estilo criada. Veja a seguir um exem-
plo de uma folha de estilo salva no arquivo estilo.css:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
7
O estilo interno é usado na própria página HTML, sendo definido na seção head
com o emprego do elemento style. As regras de estilo são definidas dentro das
tags <style></style>, como mostra o exemplo a seguir:
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
O estilo inline é o método mais simples e direto de aplicar formatação a um ele-

mento HTML. Ele é usado diretamente no elemento que se quer alterar, dentro
das tags de abertura e fechamento do elemento, por meio do emprego do atri-
buto style.
Veja um exemplo a seguir:
<p style=”color:sienna; margin-left:20px”>

Este é um parágrafo formatado
</p>
Estilizando Documentos
Como vimos no começo desta Unidade, as propriedades são utilizadas para de-
finir características que serão aplicadas aos elementos HTML. A seguir, veremos
algumas dessas propriedades e como elas alteram o layout de uma página web.
Background
As propriedades do background são usadas para definir uma cor ou uma imagem
de fundo e estão listadas a seguir:
8
• Background-color;
• Background-image;
• Background-repeat;
• Background-attachment;
• Background-position.
A propriedade background-color especifica a cor de fundo do elemento. Por

exemplo:
body {background-color: #b0c4de;}
Já a propriedade background-image define uma ou mais imagens a serem usa-

das como fundo para o elemento.
Por exemplo:
body {background-image:url(“paper.gif”);}
Importante
Ao se utilizar a background-image, recomenda-se utilizar uma
propriedade auxiliar, como a background-color, visto que pode
ocorrer alguma falha no carregamento da imagem.
A propriedade background-repeat pode ser utilizada conjuntamente para repeti-

ção da imagem de fundo:
• Repeat: a imagem é repetida na vertical e na horizontal, até o preenchi-

mento da área do elemento;
• Repeat-x: a imagem repetida somente na horizontal;
• Repeat-y: a imagem repetida somente na vertical;
9
• No-repeat: a imagem é inserida apenas uma vez no plano de fundo. Pode
ser utilizada de modo que a imagem não atrapalhe o texto, como o exem-
plo da Figura 2:
Figura 2 – Exemplo de uma página utilizando background-image

Fonte: Reprodução
#ParaTodosVerem: imagem de exemplo da utilização do background-image. Na parte superior, há um título
escrito “Exemplo background-image”. Logo abaixo, dois parágrafos com textos que descrevem a estilização
do conteúdo na página. À direita, há uma imagem de uma árvore nas cores rosa e marrom, sendo que em
um dos galhos encontra-se uma coruja. Fim da descrição.
Nesse exemplo, a imagem de fundo é mostrada numa posição de modo que ela
não perturbe o texto. O código CSS utilizado é mostrado a seguir:
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
Perceba que, para obtermos o efeito desejado, foi necessário utilizar uma nova
propriedade, o background-position que indica a posição na qual a imagem de
fundo será inserida.
10
Alguns dos valores possíveis dessa propriedade são:
• Left top: à esquerda superior;
• Right center: à direita e ao centro;
• Center bottom: ao centro inferior.
Fontes e Texto
Quando o desejamos formatar a exibição de textos, as propriedades CSS geral-
mente se enquadram em duas categorias:
• Estilos de fontes: afetam a fonte do texto, como, por exemplo, tama-

nho, negrito e itálico, entre outros;
• Estilos de layout de texto: afetam o espaçamento e outros recursos de

layout do texto, como, por exemplo, o espaço entre linhas e o alinha-
mento do texto dentro de uma caixa de conteúdo.
Estilos de Fontes
A propriedade font define família , tamanho e estilo do texto:
• Font-family;
• Font-style;
• Font-size.
A família da fonte de um texto é definida com a propriedade font-family, cujo

valor (nome da fonte) é uma string ou uma lista de strings separadas por vírgula.
Procure sempre terminar a lista com uma fonte genérica, que se destina a uma
possível falha nas escolhas do programador.
p{font-family: “Lucida Grande”, Lucida, Verdana, Sans-serif;}
11
A propriedade font-style tem 3 valores:
• Normal: a própria fonte;
• Italic: itálico;
• Oblique: muito similar ao itálico, porém, menos utilizado.
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Já o tamanho do texto é definido pela propriedade font-size, que pode ter um

valor absoluto ou relativo:
Valor Absoluto
• Define o texto a um tamanho especificado;
• Não permite que o usuário altere o tamanho do texto em todos os nave-

gadores (ruim por razões de acessibilidade);
• O tamanho absoluto é útil quando o tamanho físico da saída é conhe-

cido.
Valor Relativo
• Define o tamanho relativo aos elementos;
• Permite que o usuário altere o tamanho do texto em navegadores.
• A seguir, temos um exemplo que se utiliza de valores relativos e ab-

solutos:
12
/*Tamanho absoluto*/
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
/*Tamanho relativo*/
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Estilos de Layout de Texto
Completando a formatação de layout de texto, as propriedades que veremos são:
• Color: é utilizada para configurar a cor do texto:
body {color:blue;} h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}
• Text-align: é usada para especificar o alinhamento do texto à esquerda,

direita, centralizado ou justificado:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
• Text-decoration: é frequentemente utilizada nos links para configurar

ou remover decorações do texto:
13
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
• Text-transform: é usada para especificar o uppercase e lowercase nos

textos:
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
• Text-indentation: é usada para definir um espaçamento horizontal antes

do início da primeira linha do texto, em outras palavras, uma indentação
da primeira linha ou parágrafo:
p {text-indent:50px;}
Importante
Quando utilizamos a marcação p.main {text-align:justify;} esta-
mos justificando o texto do parágrafo (<p>) cuja classe é main.
Estilos de Borda de um Elemento

A propriedade border é responsável por adicionar contorno ao redor de seu con-
teúdo e pode ter diferentes estilos e tamanhos, podendo ser utilizada em di-
ferentes elementos HTML, como, por exemplo, o <input>. As especificações do
CSS permitem definir espessura, cor e estilo para a borda, além de ser possível
especificar cada uma das quatro bordas individualmente.
14
A sintaxe resumida dessa propriedade é apresentada na Figura 3, a seguir.
Figura 3 – Sintaxe da propriedade border

#ParaTodosVerem: imagem que descreve a sintaxe da propriedade border. Da esquerda para a direita é
especificada a propriedade e suas definições: “border: border-width border-style border-color”. Na parte
inferior da imagem, existem três quadros que descrevem cada um dos estilos aplicados à borda. Fim da
descrição.
A declaração da borda pode ser feita resumidamente, como visto na Figura 5, porém,
também é possível fazer a declaração individualmente de cada propriedade.
Os exemplos a seguir produzem o mesmo efeito:
.main{border: 5px solid red;}
Ou
.main{
border-width: 5px;
border-style: solid;
border-color: red;
}
Margens e Espaçamentos
A propriedade margin permite adicionar ao redor do elemento um distanciamen-
to na parte externa. A margem não tem cor de fundo e é completamente trans-
parente. As margens superior, inferior, direita e esquerda podem ser alteradas
de forma independente, usando suas propriedades separadas:
15
• Margin-top: determina o espaçamento superior;
• Margin-right: determina o espaçamento no lado direito;
• Margin-bottom: determina o espaçamento inferior;
• Margin-left: determina o espaçamento no lado esquerdo.
Para centralizar um elemento na tela ou dentro de outro elemento, podemos

utilizar o valor auto, como mostra o exemplo a seguir:
<html>
<head>
<title>CSS</title>
<style>
.box {
width: 400px;
border: 2px solid rgb(186, 184, 228);
}
.box p {
width: 250px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class=”box”>
<p>Parágrafo centralizado dentro de um box de largu-
ra de 400px.
</p>
</div>
</body>
</html>
16
Observe, no exemplo, que, como queremos centralizar o parágrafo, a pro-
priedade margin: auto foi aplicada somente a esse elemento. Poderíamos
aplicar a mesma formatação ao box para centralizá-lo, como foi feito
anteriormente.
Veja a seguir como ficaria essa formatação:
.box p {
width: 400px;
border: 2px solid rgb(186, 184, 228);
margin: 0 auto;
}
Importante
A propriedade margin pode desestruturar o layout da página
HTML, pois altera o posicionamento dos elementos. Portanto,
use-a com cuidado!
Outra propriedade utilizada para definir o espaçamento ao redor de um elemen-

to é o padding, que define o espaço interno entre um elemento e sua respecti-
va borda. Assim como na propriedade margin, também é possível determinar
os espaçamentos superior, inferior, direito e esquerdo de forma independente,
usando suas propriedades separadas.
Vamos alterar o exemplo anterior, para aplicar um padding de 20px ao

parágrafo:
.box {
width: 250px;
margin: 0 auto;
padding: 20px;
}
17
A Figura 4 mostra a comparação entre a formatação do parágrafo antes e depois
da aplicação do padding de 20px ao parágrafo.
Figura 4 – Comparação entre os exemplos propostos

Fonte: Reprodução
#ParaTodosVerem: imagem que compara a utilização da formatação do parágrafo. À esquerda, há uma
caixa contendo o texto “Parágrafo centralizado dentro de um box que tem largura de 400px.”. Logo abaixo,
encontra-se a descrição “Parágrafo sem padding 20px” e uma seta aponta para a caixa que contém o texto. À
direita, há uma caixa contendo o texto “Parágrafo centralizado dentro de um box que tem largura de 400px.
Padding de 20px!”. Logo abaixo, encontra-se a descrição “Parágrafo com padding 20px” e uma seta aponta
para a caixa que contém o texto. Fim da descrição.
Na Figura 5, temos a renderização de um elemento HTML, que exibe um deter-

minado conteúdo, de acordo com a formatação CSS. Perceba a diferença entre
margin e padding, bem como a função do width e do height, que determinam a
largura e a altura do elemento, respectivamente.
18
Figura 5 – Apresentação visual de um elemento de acordo com a formatação CSS
Fonte: Reprodução
#ParaTodosVerem: imagem ilustrativa de um elemento formatado com CSS. A Figura é composta por três
retângulos de tamanhos diferentes, sendo o maior transparente, com borda tracejada, o seguinte na cor
cinza com uma borda sólida na cor preta e, no centro, encontra-se o terceiro retângulo na cor azul com
o texto “Conteúdos” e, abaixo, “elemento HTML”. No retângulo do centro, há duas setas: uma horizontal,
indicando a largura do retângulo (width), e outra vertical, indicando a altura (height). No retângulo maior,
com bordas tracejadas, há a indicação de cada um dos lados, contendo os textos, em sentido horário: “right”,
“bottom”, “left” e “top”. Fim da descrição.
Módulos CSS3
A versão mais recente das folhas de estilo é o CSS3 que, diferentemente de suas
versões anteriores, foi desenvolvido em módulos que introduziram novos recur-
sos que mudaram amplamente a forma como as páginas web são vistas pelos
usuários.
Vejamos, a seguir, alguns dos principais módulos e como utilizá-los.
Bordas e Sombras com CSS3

A partir do CSS3, podemos criar bordas arredondas, adicionar sombras nas caixas
e usar imagens como borda, sem a necessidade de um programa de editoração.
O Quadro 2 apresenta as principais propriedades das bordas e suas compatibili-

dades com os navegadores:
19
Quadro 2 – Principais propriedades e compatibilidade com navegadores
Propriedade Chrome Explorer Mozilla Safari Opera
5.0 4.0 5.0

border-radius 9.0 10.5
4.0 -webkit- 3.0 -moz- 3.1 -webkit-
10.0 4.0 5.1

box-shadow 9.0 10.5
4.0 -webkit- 3.5 -moz- 3.1 -webkit-
Importante
Na Tabela 1, os números seguidos por -webkit-, -moz- ou -o-
especificam a primeira versão que funcionou com um prefixo.
A propriedade border-radius define um raio de curvatura nos quatro cantos de

um box e permite adicionar o efeito de arredondamento ao elemento, indepen-
dentemente do box ter ou não uma borda declarada.
Veja a Figura 6, a seguir:
Figura 6 – Comparação entre o arredondamento com e sem a borda declarada.

Fonte: Reprodução
#ParaTodosVerem: imagem comparando o arredondamento com e sem bordas declaradas. A figura é
composta por dois retângulos, sendo o superior com borda na cor vermelha e fundo cinza e o inferior sem
bordas e com o fundo também cinza. Acima do primeiro retângulo, está o título “Box com borda de 2px” e
acima do segundo retângulo está o título “Box sem borda”. Fim da descrição.
20
A seguir, temos o código utilizado para o box com borda declarada:
.comBorda {
border: 2px solid #991e1e;
padding: 10px 40px;
background: #ecebeb;
width: 300px;
border-radius: 25px;
-moz-border-radius: 25px;
}
A propriedade box-shadow define uma ou mais sombras para um elemento:
.sombra {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 8px #888888;
}
Outras Formatações com CSS3

A partir do CSS3, a estilização de textos passou a contar com novas propriedades,
entre as quais vamos destacar, nos exemplos a seguir, o text-shadow e word-wrap:
/*Efeito de sombra no texto*/

h1{text-shadow: 5px 5px 5px #FF0000;}
/*Efeito quebra de linha*/
p {word-wrap: break-word;}
Como vimos anteriormente, a família da fonte de um texto é definida com a

propriedade font-family. Entretanto, você pode querer utilizar uma fonte que
não está instalada no computador do usuário. Isso é possível por meio da regra
@font-face, que permite incluir uma fonte a partir da Web.
21
Veja o exemplo a seguir, no qual importamos a fonte “Shantell Sans”, a partir da
biblioteca do Google, e utilizamos na formatação do parágrafo:
@import url(‘https://fonts.googleapis.com/css2?family=Shantell’);
p{font-family: ‘Shantell Sans’, cursive;}
Site
O Google tem uma Biblioteca para facilitar o
uso de fontes remotas. Visite o Google Fonts e
explore os tutoriais e funcionalidades dispo-
níveis na ferramenta.
Com a propriedade CSS tranforms é possível esticar, girar, aumentar e torcer um

elemento HTML.
Os principais métodos que veremos são:
• Rotate(x): gira um elemento no sentido horário ou anti-horário, de acor-

do com um determinado ângulo (x);
• Translate(x,y): permite mover um elemento de uma posição para a ou-

tra, dependendo do parâmetros de posição passados dos eixos x e y;
• Scale(x): permite aumentar ou diminuir o tamanho de um elemento.
A seguir, temos um exemplo completo utilizando a propriedade transform.
22
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Imagem transform</title>
<style>
.imagem {
transform: scale(0.2) rotate(360deg);
/*transition: all 2s*/;
}
.imagem:hover {
transform: scale(0.7);
}
</style>
</head>
<body>
<img src=”css.png” alt=”” class=”imagem”>
</body>
</html>
Se você digitou o código acima, pôde perceber que seu navegador exibe uma
imagem (logo do CSS) e, quando passamos o ponteiro do mouse sobre ela, a ima-
gem gira e aumenta de tamanho.
Você entendeu o que código faz?
Não!
Sem problema, pois, no Quadro 3, vamos analisar o que está acontecendo.
23
Quadro 3 – Exemplo comentado
Linha(s) Descrição
Definimos o tamanho da imagem para 20% (scale(0.2)) e

Linha 7
uma rotação de 360 graus (rotate(360deg)).
A pseudo-classe: hover corresponde ao usuário mover o

Linha 10
cursor do mouse sobre a imagem.
Linha 11 O tamanho da imagem muda para 70% (scale(0.7)).
Adiciona um efeito de transição de 2s a todos os elementos

Linha 8
(transition: all 2s).
Para finalizar esta Unidade, devemos detalhar a propriedade transition, que per-
mite definir a transição entre dois estados de um elemento HTML. Experimente
excluir a linha 11 do código acima e perceberá que a imagem aumenta de tama-
nho quando movemos o cursor do mouse sobre ela quase instantaneamente,
sem o efeito de rotação!
Observe, nesse último exemplo, o efeito de transição aplicado para alterar o

comprimento de uma <div>:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
24
Site
O CSS3 Generator é uma ferramenta que au-
xilia desenvolvedores iniciantes na geração de
códigos CSS3. Dentre as opções disponíveis, é
possível encontrar: border-radius, box-shadow
e text-shadow, entre outras.
25
Sites
W3school
É um site voltado à aprendizagem de conteúdos de tecnologias como
HTML, CSS, Javascript e Python entre outros. Visite o tutorial de CSS.
https://bit.ly/3Lh4Arj
Code Adademy
É uma plataforma interativa on-line que oferece conteúdos em diversas
Linguagens de Programação.
https://bit.ly/3Pz12Dm
Sololearn
É uma plataforma on-line que disponibiliza material de diversas
Linguagens de Programação.
https://bit.ly/3R7J2RA
30 Dias de CSS3
É uma plataforma que oferece desafios diários que visam a ajudá-lo(a)
a melhorar as habilidades de codificação, utilizando HTML5 e CSS3.
https://bit.ly/460CSa0
CLARK, R. et al. Introdução ao HTML5 e CSS3: a evolução da web. Rio de Janeiro: Alta
Books, 2014.
SILVA, M. S. Construindo sites com CSS e (X) HTML: sites controlados por folhas de
SILVA, M. S. CSS3: Desenvolva aplicações web profissionais com uso dos poderosos
recursos de estilização das CSS3. São Paulo: Novatec, 2012.
TERUEL, E. C. HTML 5: guia prático. 2. ed. São Paulo: Erica, 2013.
W3C CSS. Disponível em: < https://www.w3.org/community/webed/wiki/CSS/Training>.

Acesso em: 27/02/2023.
JavaScript
Conteudista
Revisão Textual
Prof.ª Dra. Selma Aparecida Cesarin
• Entender as regras, a função e a importância da Linguagem de Progra-
mação Javascript na construção de páginas web;
• Compreender os conceitos de eventos, comandos e funções, aplicando

os conhecimentos adquiridos na construção de páginas interativas.

2
Introdução ao Javascript
Em maio de 2022, uma pesquisa realizada pelo StackOverFlow com mais de
70.000 desenvolvedores revelou como aprendem e sobem de nível, quais ferra-
mentas estão usando e o que desejam. No topo das Linguagens de Programação
mais utilizadas, encontramos o JavaScript, com mais de 65% de preferência, o
que mostra o porquê de ser considerada a linguagem mais popular entre os
desenvolvedores.
Site
Visite a página do StackOverFlow e conheça
mais detalhes dessa pesquisa.
Mas, afinal, o que é e para que serve o JavaScript?
O JavaScript (ou simplesmente JS) é uma Linguagem interpretada, de alto nível,

para programação de uso geral, muito aplicada no desenvolvimento web.
Conhecida como a Linguagem da Internet, já que é nativa dos navegadores, o JS
permite realizar validações do lado cliente e interações entre páginas, além de
alterar dinamicamente estilos e elementos da página HTML.
Muito conhecido por sua capacidade de lidar com o processamento do lado do

cliente (front-end), o JS evoluiu para o lado do servidor (NodeJS) e, hoje, pode ser
utilizado, inclusive, no desenvolvimento híbrido para dispositivos móveis, por
meio do framework Apache Cordova.
Site
Visite a página do Apache Cordova para saber
mais sobre desenvolvimento mobile multipla-
taforma com o HTML, CSS e JS.
O uso do JavaScript permite a criação de efeitos nas páginas Web, validação de

formulários, identificação do contexto e definição de comportamentos em fun-
ção desse contexto, entre outros. No lado do usuário, o navegador é o respon-
sável pela interpretação das instruções dos scripts, executando-as de modo a
permitir essa interatividade.
3
Todo o Código JavaScript é executado somente quando o evento ao qual está as-
sociado é acionado e, por esse motivo, o JS usa o chamado “modelo de execução
controlado por eventos”. Porém, em alguns casos, podemos inserir o Código sem
a associação a eventos e, dessa forma, a instrução ou o comando será executado
conforme o navegador interpreta a página web.
As principais vantagens do JavaScript são:
• Linguagem leve: o interpretador é nativo dos navegadores, o que per-

mite que o código seja executado na sua forma natural e rápida, possi-
bilitando que alterações e erros sejam tratados em tempo de execução;
• Flexibilidade e versatilidade: por ser uma Linguagem nativa dos na-

vegadores, o processo de desenvolvimento web é simplificado. Mas não
é somente disso que estamos falando! Hoje, já é possível executar o
JavaScript no lado do servidor, além de sua aplicação para criar jogos,
aplicativos desktop e até mobile;
• Comunidade consolidada: por ser umas das Linguagens mais conhe-

cidas do mundo, sua comunidade é também outro ponto forte, o que
significa ajuda disponível em diversos canais de comunicação, farta dis-
ponibilidade de Bibliotecas e ou frameworks, que contribuem muito para
o crescimento da Linguagem.
Iniciando com JavaScript

Podemos inserir um script JS no documento HTML das seguintes formas:
Dentro de uma tag HTML;
• JavaScript in-line: o script é inserido no corpo da página <body></body>;
• JavaScript interno: fazemos a declaração na seção <head></head>;
• JavaScript Externo: por meio de um arquivo que tem a extensão .js.
Veremos, a seguir, como utilizar cada um desses casos e alguns exemplos de

aplicação.
JavaScript em uma Tag
Quando inserimos um código JavaScript em uma tag, ele é sempre associado a
4
um evento. Os eventos serão vistos mais adiante. Por enquanto, faremos um
exemplo simples com o evento onclick, que é acionado quando o usuário clica
no elemento:
<html>
<head>
<title>Exemplo JavaScript</title>
</head>
<body>
<input type=”button” value=”Clique aqui” onclick=”alert(‘Olá Mundo
JS’)”>
</body>
</html>
Importante
Fique atento(a) ao uso de aspas duplas (“...”) e simples (‘...’) e,
sempre que possível, evite o uso de eventos direto em tags
HTML.
JavaScript dentro do body e do head
Se fizermos uma comparação com CSS, esse modo de inserir JavaScript em uma
página seria o modo incorporado. Seja dentro do body ou do head, sempre deve-
mos utilizar a tag <script>...<\script>, para demarcar o início e o fim do script JS.
Note que os comandos podem ser executados sem a necessidade de eventos.
Isso não é o mais comum, mas é um recurso que usaremos em nossos estudos.
5
<html>
<head>
<script>
alert(“Eu estou no cabeçalho.”);
</script>
</head>
<body>
<script>
document.write(“<b class= ‘teste’>Eu estou no corpo do documen-
to.</b>”);
</script>
</body>
</html>
JavaScript Externo
Assim como em CSS, também podemos criar um arquivo separado do HTML com
nossos códigos em JavaScript. Esse arquivo deve ser salvo com a extensão .js e é
chamado no cabeçalho da página com a tag <script>.
No próximo exemplo, vamos utilizar dois arquivos: exemplo3.html e script3.js:

<html>
<head>
<script src=”script3.js”></script>
</head>
<body>
Conteúdo da página. Também podemos fazer aqui chamadas para
blocos de códigos do arquivo .js.
</body>
</html>
6
//arquivo script3.js
alert(“Estou em um arquivo .js”);
Importante
Perceba que no arquivo .js não utilizamos as tags <script>...
<\script> para demarcar o código JS.
O que é um Evento?
Sempre que ocorre uma interação com um documento ou página, um evento é
disparado. Um evento pode ser qualquer interatividade do usuário com um ele-
mento HTML e alguns eventos também podem ser disparados pelo navegador.
Alguns exemplos de eventos HTML são:
• Uma página da web HTML terminou de carregar;
• Um campo de entrada HTML foi alterado;
• Um botão HTML foi clicado.
As reações aos eventos (programadas em JavaScript) são sempre registradas

como propriedades dos elementos. O Quadro 1 apresenta uma lista de alguns
eventos HTML mais comuns.
7
Quadro 1 – Alguns eventos HTML
Evento Descrição
onchange Um elemento HTML foi alterado.
onclick Um elemento HTML foi clicado.
onmouseover O mouse move-se sobre um elemento HTML.
onmouseout O mouse move-se para longe de um elemento HTML
onkeydown Uma tecla do teclado é pressionada.
onload O navegador terminou de carregar a página.
Fonte: Elaborado pelo Conteudista
Saiba Mais
Os manipuladores de evento (event handler) são funções a se-
rem executadas quando um evento é acionado ou ocorre uma
ação do navegador. E o disparador de evento é o elemento
HTML em que o manipulador de evento foi adicionado.
O exemplo a seguir mostra as informações da data a partir do clique no botão:
<html>
<body>
<button onclick = “document.querySelector(‘#data’).innerHTML =
Date()”> Exibir data </button>
<p id=”data”></p>
</body>
</html>
8
Site
O método querySelector(‘#data’) retorna o
primeiro elemento filho que corresponda ao
id = “data”.
Leitura
O innerHTML é uma propriedade do Element
que define ou retorna o conteúdo HTML de
um elemento.
Manipulando Dados com JS

Todos os dados que são manipulados por um Programa são armazenados na
memória do computador e podem ser de dois tipos:
• Constante: quando o conteúdo não muda durante a execução do pro-

grama;
• Variável: quando o conteúdo muda durante a execução do Programa.
O JavaScript é uma Linguagem de tipagem dinâmica, pois, ao contrário de outras

Linguagens que exigem a declaração de uma variável com um tipo de dado defi-
nido, em JS, as variáveis não estão associadas diretamente a um tipo específico:
let x = 42; // x é do tipo numérico (int)

x = “bar”; // x agora é um texto (string)
x = true; // x agora é um valor lógico (booleano)
A definição de variáveis exige atenção em algumas regras:
• Toda variável deve começar com uma letra ou um underscore(“_”);
• Caracteres subsequentes devem ser letras ou números;
9
• Não deve conter espaço em branco ou caracteres especiais;
• Não deve ser uma palavra reservada.
Além disso, é importante destacar que o JavaScript é case-sensitive, e isso signifi-

ca dizer que todas as variáveis listadas a seguir são diferentes:
• quantidade;
• QUANTIDADE;
• Quantidade;
• QuAnTidAdE.
Existem duas palavras-chave para criarmos variáveis: var (antigo) ou let (moder-
no). Até a especificação ECMAScript 2015 (ES6), a palavra-chave var era utilizada
para declarar uma variável. Entretanto, era possível declararmos duas variáveis
com o mesmo nome, o que, às vezes, poderia levar a um resultado imprevisível
e incorreto.
var framework = ‘Vue.js’;

var framework = ‘Angular’;
alert(framework);
Nesse exemplo, temos duas variáveis com o nome framework e a saída é Angular,
que foi a última declaração da variável.
A partir da ES6, foi introduzida a palavra-chave let, em substituição a var:
1. let framework = ‘Vue.js’;

2. let framework = ‘Angular’; //ocorre um erro
3. alert(framework);
A linha 2 lançará um erro, pois a variável framework já fora declarada anterior-

mente. A ES6 também introduziu a palavra-chave const, para dados que têm
valor somente de leitura, ou seja, cujo valor não pode ser alterado.
10
const pi = 3.14;
pi = 3.14; // provocará erro
pi = 2 * pi; //também errado
let ang = 2 * pi; //permitido porque ang é uma variável
Como Trabalhar com Dados

Imagine que, por exemplo, precisarmos alterar um dado ou atribuir o seu valor
a uma outra variável. Para isso, vamos utilizar os operadores de atribuição e arit-
méticos, que são utilizados para manipular dados numéricos.
Comecemos pelo operador de atribuição (=):
1. let x = 10;
2. let y = x; // y = 10
3. x = 15; // agora x = 15
4. let soma = x + y; // soma armazena o valor 25
No Quadro 2, vamos detalhar o que está acontecendo nesse Código:
Linha 1 Definimos a variável x, que recebe o valor 15.
Linha 2 Definimos a variável y, que recebe o conteúdo da variável x.
Linha 3 A variável x recebe o valor 15.
Definimos a variável soma, que recebe o resultado de x + y,

Linha 4
ou, 10 + 15.
11
Nesse exemplo, você deve ter percebido que utilizamos o operador de adição (+).
No Quadro 3, temos os demais operadores aritméticos. Para fins de exemplo,
considere a variável x declarada anteriormente, que armazena o valor 15.
Quadro 3 – Operadores aritméticos
Operador Descrição Exemplo Resultado
+ Adição z = x + 10 z = 25
- Subtração z = x - 10 z= 5
* Multiplicação z = x * 10 z = 150
/ Divisão z=x/5 z=3
** Expoente z = x **2 z = 225
Módulo (resto
% da operação z=x%7 z=1
de divisão)
++ Incremento z = x++ z = 16
-- Decremento z = x-- z = 14
Como Manipular Textos

Strings são sequências de caracteres, que formam um texto, e que podem ser
representadas de três formas, em JS:
• Aspas duplas. Ex.: “algum texto”;
• Aspas simples. Ex.: ‘algum texto’;
• Acento grave. Ex.: `algum texto`.
Não há diferença entre as aspas duplas e simples, mas há diferença com o acen-
to grave, pois ele permite as chamadas templates String.
12
Leitura
Os templates String ou templates literais
constituem um recurso interessante, em
substituição à concatenação de valores.
Quando trabalhamos com texto, o operador de adição (+) é utilizado para conca-
tenar Strings.
let x = “Bom”;
let y = “dia”;
let z = x + y; // o resultado será: z=Bom dia
alert(z);
Tenha cuidado ao utilizar o operador de adição (+) com números e textos, pois o
resultado será sempre um texto:
let x = 4;
let y = “a”;
let z = x + y; // o resultado será z=”4a”
let x = “4”;
let y = “4”;
let z = x + y; // o resultado será z=”44”
Conversão de Tipos
Como vimos, não é necessário declarar os tipos das variáveis, pois, o JavaScript
faz a tipagem dinâmica do dado que está trabalhando. Entretanto, toda a entra-
da de dados feita pelo usuário é sempre considerada uma String (texto), mesmo
que a entrada sejam algarismos, como as notas de um aluno, por exemplo.
13
Isso pode gerar um resultado incorreto ou indesejado, se considerarmos, por
exemplo, que o operador de adição (+) tem comportamentos diferentes quando
utilizado em texto e ou número. Numa operação na qual exista um número e um
texto, o número sempre será convertido para texto e a operação ocorre como se
todos os dados fossem String.
Dessa forma, caso seja necessário realizar alguma operação matemática com os
valores lidos por meio de uma caixa de diálogo prompt ou um formulário com
campos de input, precisamos, inicialmente, convertê-los em números. Para isso,
temos duas funções em JavaScript que convertem para número inteiro (int) ou
decimal (float).
Para converter um texto em número inteiro utilizando a função parseInt, usa-

mos a sintaxe:
variável = parseInt(valor);
Para converter um texto em número decimal utilizando a função parseFloat,

usamos a sintaxe:
variável = parseFloat(valor);
No próximo exemplo, vamos solicitar ao usuário que digite dois números, por
meio de uma caixa de diálogo prompt, e exibimos a soma desses dois números:
//modo 1: utilizamos uma variável aux para a leitura do valor

let aux = prompt(“Digite o valor de a”,””);
let a = parseInt(aux);
//modo 2: fazemos a leitura do valor e a conversão
let b = parseInt(prompt(“Digite o valor de b”,””));
//mostra o cálculo
alert(a + “ + “ + b + “ = “ + (a+b));
Antes de finalizarmos este capítulo, você percebeu que, nos exemplos, utiliza-
mos comentários para destacar alguma informação importante do código? Pois
14
bem. Sempre é uma boa prática inserirmos comentários em nossos códigos e,
em JavaScript, podemos fazer isso de duas formas:
Para comentários de várias linhas, utilizamos /* comentário */:
/* Inserimos aqui nossos comentários

em várias linhas
*/
Para comentários de uma única linha, utilizamos //comentário:
//Aqui inserimos somente uma linha de comentário
Comandos e Funções
Em JavaScript, uma função é um bloco de códigos destinado a realizar alguma
tarefa específica. Uma função pode ser executada por meio de uma chamada
direta ou por meio de um evento.
A sintaxe de definição (ou declaração) de uma função, é apresentada na Figura 1:
15
Figura 1 – Sintaxe de uma função
#ParaTodosVerem: imagem que descreve a sintaxe de uma função JavaScript. No centro, há um retângulo
com fundo cinza e, em seu interior, a definição da função. Acima desse retângulo, há três retângulos menores
e abaixo outros dois, todos contendo a descrição de cada um dos itens dessa sintaxe. Fim da descrição.
Os parâmetros devem ser separados por vírgula e constituem os valores que

serão recebidos pela função quando ela é chamada. Dentro da função, os parâ-
metros comportam-se como variáveis locais, ou seja, somente existem no bloco
em que foram declaradas.
Uma função pode ou não retornar uma resposta para o ponto de chamada. Caso
necessite de retorno, utilizaremos o comando return. Quando não retorna re-
sultado, a função tem comportamento de procedimento e, nesse caso, não utili-
zaremos o comando return (ao encerrar, a função retornará o valor undefined).
O exemplo a seguir define uma função simples chamada soma, que recebe dois
números e retorna a soma deles:
function soma(num1, num2){

return num1 + num2;
}
16
A partir da versão ES6, foi introduzido o formato arrow function para criar funções
mais otimizadas. A sintaxe de uma arrow function contém a seguinte definição:
let identificador = (param1, param2, ...) => {

//bloco de instruções
}
Vejamos o exemplo anterior (soma de dois números) no formato arrow function:
let soma = (num1, num2) => { return num1 + num2 };
Bem mais simples, não é mesmo?
Leitura
Explore como as arrow functions permitem
uma sintaxe reduzida, mais curta, para fun-
ções.
Introdução às Decisões em
JavaScript
As decisões são importantes em programação, pois permitem executar diferen-
tes ações com base em alguma expressão condicional. A Figura 2 mostra o flu-
xograma de um programa que lê a média de um aluno e imprime o resultado
(“Aprovado” ou “Reprovado”), a partir de uma tomada de decisão (media >= 6.0).
17
Figura 2 – Tomada de decisões em programação
#ParaTodosVerem: imagem do fluxograma de uma estrutura de decisão. O fluxograma é composto por
figuras geométricas, que são utilizadas para definir os passos e a sequência da estrutura. Nessa Figura, o
losango é utilizado para representar a tomada de decisão quanto à média de um aluno ser maior ou igual
a seis. Fim da descrição.
Em programação, as decisões precisam ser bem definidas, ou seja, não podem

ser ambíguas. Para isso, precisamos tomar decisões que serão construídas a par-
tir de expressões que utilizam operadores relacionais e lógicos.
Os operadores relacionais, mostrados no Quadro 4, são utilizados para compara-

ções, como igualdades ou desigualdades. O resultado de uma comparação será
sempre um valor lógico (verdadeiro – true, ou falso – false).
18
Quadro 4 – Operadores relacionais
Operador Nome Exemplo Resultado
Verdadeiro se a for igual

== Igual a == b
a b.
Verdadeiro se a não for

!= Diferente a != b
igual a b.
Verdadeiro se a for igual a

=== Idêntico a === b
b e for do mesmo tipo.
Verdadeiro se a for menor

< Menor que a<b
que b.
Verdadeiro se a for maior

> Maior que a>b
que b.
Menor ou Verdadeiro se a for menor

<= a <= b
igual ou igual a b.
Verdadeiro se a for maior

>= Maior ou igual a >= b
ou igual a b.
Os operadores lógicos, mostrados no Quadro 5, são utilizados para expressões

que contenham mais de uma condição ou comparação. Para os exemplos, con-
sidere que a = 3 e b = 5.
19
Quadro 5 – Operadores lógicos
Operador Descrição Exemplo
E lógico: retorna
verdadeiro se ambas a==3 && b<10 //retorna True
&& as expressões são
verdadeira e falso nos a!=3 && b==5 //retorna False
demais casos.
Ou lógico: retorna
verdadeiro se pelo menos a==3 || b<10 //retorna True
|| uma das expressões é a!=3 || b==5 //retorna True
verdadeira e falso se a==1 || b==3 //retorna False
todas são falsas.
Não lógico: retorna !(a==3) //retorna False

! verdadeiro se o operando
é falso e vice-versa. !(a!=3) //retorna True
Estruturas de Decisão
São blocos de código executados somente se uma dada condição for satisfei-
ta, utilizados para controlar o fluxo de execução dos programas. Em JavaScript,
temos as seguintes estruturas de decisões:
• Decisão simples: if;
• Decisão composta: if... else;
• Decisão encadeada: if... else if... else...;
• Estrutura de decisão: switch… case.
A decisão simples (if) permite avaliar se o resultado de uma expressão lógica é

verdadeiro (true), e executa o bloco de códigos inserido nela. Veja a sintaxe e um
exemplo:
20
if (condição){
//bloco de instruções caso a condição seja verdadeira
}
let data_hora = new Date();

let hora = data_hora.getHours();
if (hora < 12){
alert(“Bom dia!!!”);
}
A decisão composta (if... else) avalia uma expressão lógica e, caso o resultado
seja verdadeiro (true), executa o primeiro bloco de Códigos. Caso contrário, exe-
cuta o segundo bloco de comandos (else).
Veja a sintaxe e um exemplo:
if (condição){
//bloco de instruções caso a condição seja verdadeira
}
else {
//bloco de instruções caso a condição seja falsa
}
21
if(hora < 12){
}
else{
alert(“Tenha uma ótima tarde/noite”);
}
A estrutura encadeada (if... else if... else...) é utilizada quando temos várias con-
dições que devem ser testadas. Sua sintaxe é exibida a seguir:
if(condição 1){
//bloco de instruções 1
}
else {
if(condição 2){
}
else {
}
}
O exemplo completo, utilizando o condicional encadeado, fica assim:
22
if (hora < 12){
}
else {
if(hora >= 12 && hora < 18){
alert(“Tenha uma ótima tarde”);
}
else {
alert(“Tenha uma ótima noite”);
}
}
A estrutura switch… case é utilizada quando temos várias condições simples,

conforme a sintaxe:
switch (valor) {
case valor1:
//instruções 1
break;
case valor2:
//instruções 2
break;
case valor3:
//instruções 3
break;
default:
//instruções padrão
}
23
Observações importantes quanto ao uso dessa estrutura:
• Para cada caso, devemos colocar o comando break, que irá finalizar o
caso e evitar que o caso posterior seja executado;
• O default é opcional. Ele é executado quando nenhum caso anterior é

acionado;
• Os valores podem ser String, inteiros, caracteres ou reais;
• Não podemos fazer comparações no case, como x > y, por exemplo.
Um exemplo completo do uso é apresentado a seguir:

let dia_semana = data_hora.getDay();
switch (dia_semana){
case 0: alert(“Domingo de descanso merecido.”);
break;
case 5: alert(“Obaaa, sexta-feira.”);
break;
case 6: alert(“Maravilha, sabadão!!”);
break;
default: alert(“Semana longaaaa.”);
}
Repetindo Códigos
Muitas vezes, precisamos concluir de modo rápido e eficiente tarefas repetitivas,
como uma tabuada, por exemplo. Para isso, as Linguagens de Programação têm
as estruturas de repetição ou laços de repetição (loop).
Essas estruturas são utilizadas quando necessitamos repetir um bloco de instru-

ções um número específico de vezes ou enquanto uma condição for verdadeira.
Em JavaScript veremos as estruturas for e while.
24
Estrutura de Repetição for
É compacta, pois inicialização, condição e atualização estão reunidas na declara-
ção do laço. Utilizamos essa estrutura quando sabemos exatamente o número
de repetições que serão feitas.
Sua sintaxe é:
for (valor inicial; condição; incremento/decremento){

//instruções que serão repetidas
}
Vejamos um exemplo que conta de 0 até 9 e exibe um alert na tela com o valor
da variável cont:
let cont;
for (cont = 0; cont < 10 ; cont++){
alert(“Número: “ + cont + “<br />”);
}
Algumas observações sobre o uso do for são:
• A estrutura utiliza uma variável inteira para controlar o número de vezes

que deve ser repetida a execução das instruções;
• É inicializada com um valor qualquer e é incrementada ou decrementada

a cada iteração;
• A condição, geralmente, verifica se essa variável já chegou a determina-

do valor para decidir se o laço deve ser encerrado.
Estrutura de Repetição while

Executa um bloco de instruções enquanto certa condição for verdadeira.
Sua sintaxe é:
25
//inicialização da variável de controle
while(condição){
//bloco de instruções
//atualização da variável de controle
}
O exemplo a seguir conta de 0 até 9 e exibe um alert na tela com o valor da va-
riável cont:
let cont = 0;
while(cont < 10){
alert(“Número: “ + cont + “<br />”);
cont = cont + 1; //ou cont++;
}
Algumas observações sobre o uso da estrutura while são:
• A variável de controle deve ser inicializada antes do bloco;
• No interior do laço, é inserida uma instrução que atualiza a variável de

controle. Com isso, em algum momento, a condição se tornará falsa.
Parando um Laço
Podemos usar comando break para parar um determinado laço de repetição
conforme alguma condição no nosso Código. No exemplo a seguir, vamos somar
uma quantidade indeterminada de valores digitados pelo usuário. Como não sa-
bemos exatamente a quantidade, utilizamos uma condição if para parar o laço.
Assim, quando o usuário pressionar a tecla enter sem digitar um valor, vamos
encerrar o laço e exibir o resultado da soma:
26
let soma = 0;
while (true){
let num = Number(prompt(“Enter a number”, ‘’));
if(!num)
break;
soma += num;
}
alert(“Soma = “ + soma);
Continuando um Laço
O comando continue interrompe a iteração atual e força o laço a continuar para
a próxima iteração. No exemplo a seguir, desejamos imprimir somente os núme-
ros ímpares de 0 até 10. Portanto, sempre que o número for par, o condicional
if executa o comando continue e pula para a próxima iteração, ignorando a im-
pressão do número par:
for (let i = 0; i < 10; i++) {

if (i % 2 == 0)
continue;
alert(i); // imprime somente os ímpares de 0 a 10
}
Vetores
Vetores podem ser definidos como uma coleção de elementos ou itens que res-
pondem a um mesmo nome e que podem ser acessados segundo a posição (ín-
dice) que ocupam dentro do vetor.
Na Figura 3, temos a representação gráfica de um vetor:
27
Figura 3 – Representação gráfica de um vetor
#ParaTodosVerem: imagem da representação gráfica de um vetor. No centro, há um retângulo dividido
em 10 partes iguais, contendo números. Acima desse retângulo, há o título “Índices para acessar os valores
do vetor”. Abaixo do retângulo, há um texto “Valores armazenados em cada posição do vetor” e na parte
inferior da imagem, uma observação em destaque: “o primeiro índice de um vetor começa sempre em zero”.
Fim da descrição.
Para criar um vetor em JavaScript, utilizamos o objeto Array. Esse objeto, além de
criar um vetor em memória, também nos fornece diversos métodos para mani-
pular o vetor criado.
Vejamos um exemplo com alguns vetores criados em JavaScript:
//vetor sem tamanho definido, inicialmente vazio:

var vetorA = new Array();
var vetorB = [ ];
//vetor com posições e valores definidos:
var vetorC = new Array(“maça”, “banana”, “morango”);
var vetorD = [ “maça”, “banana”, “morango” ];
var vetorE = [ 12, 6, 21, 5, 7, 209, 3 ];
Perceba que, em todos os casos anteriores, podemos inserir mais posições sem-
pre que necessário. O Vetor não tem um tamanho fixo.
28
Podemos visualizar ou atribuir um valor para um vetor, acessando cada posição
por meio do índice, que deve ficar entre colchetes [...].
let frutas = [];

frutas[0]= “maça”;
frutas[1]= “banana”;
frutas[2]= “morango”;
alert(frutas[2]); //Imprime na tela “morango”

let meses = [“JAN”,”FEV”,”MAR”,”ABR”,”MAI”,”JUN”,”JUL”,”AGO”,”SE-
T”,”OUT”,”NOV”,”DEZ”];
alert(meses[data_hora.getMonth()]); //Imprime na tela o mês atual
É bastante comum, quando trabalhamos com vetores, utilizarmos uma estru-

tura de repetição para acessar suas posições. A mais utilizada é a estrutura for,
porém, nada impede o comando while seja utilizado. Nos exemplos a seguir,
observe a comparação entre o vetor sem o uso de uma estrutura de repetição e
com o uso da estrutura for:
//Vetor sem o uso da estrutura for

let frutas = [ ];
frutas[0]=”maçã”;
frutas[1]=”banana”;
frutas[2]=”morango”;
console.log(frutas[0]);
29
//Vetor com o uso de repetições
let i;
let frutas = [ ];
frutas[0]=”maçã”;
frutas[1]=”banana”;
frutas[2]=”morango”;
for (i=0; i<=2; i++){
alert(frutas[i]);
}
É importante notar como o uso correto da estrutura de repetição torna mais fácil
percorrer um vetor para consultas ou atualizações. Porém, o exemplo acima fun-
ciona muito bem para um vetor de somente três elementos! Na prática, é comum
que o tamanho do vetor seja desconhecido do programador!
Isso poderia constituir um problema, porém, podemos utilizar a propriedade

length, que retorna o número de elementos de um vetor.
Para finalizarmos esta Unidade, vamos lembrar-nos de que nosso vetor é dinâmi-
co e, portanto, permite que alteremos um valor ou até mesmo façamos a inclu-
são de um novo elemento. No último caso, estamos falando do método push(),
utilizado para adicionar um novo item ao final do vetor.
No exemplo final, temos um vetor contendo três fabricantes de carros. Nosso

objetivo é incluir um novo fabricante e alterar o nome do terceiro item, que está
grafado incorretamente (“Hundai”). Finalmente, utilizaremos o laço for combina-
do com a propriedade length, para listar todos os elementos do vetor:
30
let carros = [“Honda”, “Fiat”, “Hundai”];
carros[2] = “Hyundai”; //Substitui o valor do elemento na posição 2
let c = prompt(“Digite um fabricante: “);
carros.push(c); //Adiciona um novo elemento ao final do vetor
//A propriedade lenght retorna o tamanho do vetor

for(let i = 0; i < carros.length; i++){
alert(carros[i]);
}
Veja, a seguir, no Quadro 6 alguns dos principais métodos utilizados com vetores
em JavaScript.
Considere o vetor vogais = [“a”,”e”,”i”]:
Quadro 6 – Métodos com vetores
Exemplo Descrição Resultado
Adiciona um elemento ao final

vogais.push(“o”) [“a”,”e”,”i”,”o”]
do vetor.
Remove o último elemento do

vogais.pop() [“a”,”e”]
vetor.
Retorna o primeiro índice

em que o elemento pode ser
vogais.indexOf(“i”) 2
encontrado no vetor, ou -1,
caso contrário.
Retorna true se o elemento está

vogais.includes(“e”) True
contido no vetor.
Inverte a ordem dos elementos

vogais.reverse() [“i”,”e”,”a”]
do vetor.
31
Leitura
Visite a referência completa sobre vetores,
propriedades e métodos em JavaScript.
32
Sites
Codepen
Ferramenta on-line para testar e exibir trechos de código HTML, CSS
e JavaScript que funciona como um editor on-line e ambiente de
aprendizagem.
https://bit.ly/3re2C3R
JSFiddle
Plataforma on-line que permite criar, testar e exibir trechos de códigos
em HTML, CSS e JS.
https://bit.ly/3rcmtAz
Leituras
W3school
Site voltado à aprendizagem de conteúdos de Tecnologias como HTML,
CSS, Javascript e Python, entre outros. Visite o tutorial de JavaScript.
https://bit.ly/3EwRF0z
30 Dias de JavaScript
A matéria apresenta uma série de desafios para melhorar as habilidades
de codificação por meio de mini projetos diários, utilizando programação
Web.
https://bit.ly/3PB1IYR
Books, 2014.
SILVA, M. S. Construindo sites com CSS e (X) HTML: sites controlados por folhas de
WEB Standards. W3C. Disponível em: < h t t p s : / / w w w . w 3 . o r g / s t a n d a r d s / w e b d e s i g n

/ s c r i p t >. Acesso em: 06/03/2023.
jQuery, Persistência e Requisições
Assíncrona
Conteudista
Revisão Textual
Prof. Me. Claudio Brites
• Entender o que é a biblioteca jQuery e como utilizá-la;
• Compreender os principais conceitos associados à biblioteca, aplicando

os conhecimentos adquiridos na construção de páginas web;
• Conhecer e aplicar o armazenamento por meio do uso da api WebStorage.

2
Introdução ao jQuery
O jQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como
software livre e aberto, ou seja, de código open source, fornecida gratuitamente.
Sua biblioteca é utilizada para adicionar interatividade e dinamismo às páginas
web como, por exemplo, com funções de navegação, criação de animações e efei-
tos, funções para registrar/tratar eventos e funções para desenvolver aplicações
AJAX.
A biblioteca jQuery nada mais é do que um arquivo JavaScript que deverá ser in-
cluído na página em que serão aplicados os efeitos desejados. Esse arquivo pode
ser adicionado a partir de um arquivo público remoto conhecido como CDN, ou
a partir de um arquivo local, incluído na pasta do projeto. Observe o exemplo a
seguir que faz uso da biblioteca jQuery a partir de um repositório remoto:
<html>
<head>
<title>JQuery</title>
<script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
</head>
</body>
<h1>Aprendendo jQuery</h1>
<body>
</html>
Leitura
O que é uma CDN?
Seletores e Operadores
A finalidade do jQuery é controlar o comportamento de uma página web e, para
tanto, é necessário encontrar os elementos HTML que constituem a página e
3
terão seu comportamento modificado. Nesse sentido, a sintaxe do jQuery é bas-
tante simples, veja a Figura 1.
Figura 1 – Sintaxe do jQuery

#ParaTodosVerem: imagem que descreve a sintaxe de uso do jQuery. No centro, há uma descrição da
sintaxe. Acima, um retângulo com fundo cinza possui o texto “localiza os elementos HTML” e refere-se ao
seletor. Abaixo, outros dois retângulos com fundo na cor cinza. O retângulo à esquerda tem em seu interior
o texto “$ para utilizar o jQuery”, já o à direita contém o texto: “define a ação que será executada”. Fim da
descrição.
Vejamos alguns exemplos de como utilizar o jQuery para ter acesso aos elemen-
tos de uma página web:
• $(“*”): seleciona todos os elementos da página;
• $(“tipo_do_elemento”): seleciona todos os elementos de um tipo esco-

lhido, basta colocar o nome do elemento entre as aspas. Exemplo: $(“p”).
hide() esconde todos os elementos <p>;
• $(“#id_do_elemento”): seleciona o elemento pelo id. Um elemento do

html possui um atributo id, esse atributo id é informado juntamente com
o caracter # para o jQuery ter acesso. Exemplo: $(“#main”).hide() oculta
o elemento com id=”main”;
• $(“.nome_da_classe”): seleciona os elementos da classe. Dentro de um

seletor, o caractere ponto (.) refere-se à classe (atributo “class” da tag
HTML). Exemplo: $(“.main”).hide() oculta o elemento com class=”main”.
Para utilizar as funcionalidades do jQuery, o documento deve estar todo carrega-

do. Isso evita erro quando tentamos executar um código antes que o documento
termine de carregar. Observe o exemplo a seguir:
4
1. <html>
2. <head>
3. <title>JQuery</title>
4. <script src=”https://code.jquery.com/jquery-3.6.4.js”></script>
5. <script>
6. $(document).ready(function(){
7. $(“h1.main”).text(“Combinando seletores”);
8. });
9. </script>
10. </head>
11. <body>
12. <h1>Aprendendo jQuery</h1>
13. <h1 class=”main”>Aprendendo jQuery</h1>
14. <h1 class=”main”>Aprendendo jQuery</h1>
15. </body>
16. </html>
Se você digitou o código acima, pôde perceber que seu navegador trocou duas
ocorrências do título “Aprendendo jQuery” por “Combinando seletores”. No
Quadro 1, analisaremos o que está acontecendo:
Utilizamos a biblioteca jQuery a partir de um repositório

Linha 4
on-line.
Linha 6 Esperamos a página carregar completamente.
Substituímos o conteúdo do elemento <h1>, cuja classe é

Linha 7
main, pelo texto “Combinando seletores”.
5
Podemos também substituir $(document).ready(function() pela chamada de sin-
taxe abreviada, que é a seguinte:
$(function() {
//bloco de códigos
})
Reflita
Você percebeu que o primeiro elemento <h1> não foi alterado?
Isso aconteceu, pois o código que utilizamos altera somente o
elemento cuja classe é main.
Com jQuery, podemos selecionar ou ter acesso aos elementos de acordo com
os atributos do HTML. Para isso, basta informar o atributo, o operador e o valor
dentro de colchetes ([]), conforme a sintaxe: $([atributo operador valor]).
Os operadores disponíveis são listados no Quadro 2:
Quadro 2 – Operadores
Operador Significado
= O valor informado precisa ser igual ao valor do atributo.
!= O valor informado precisa ser diferente do valor do atributo.
O valor do atributo precisa começar ou ser igual ao valor

^=
informado.
O valor do atributo precisa terminar ou ser igual ao valor

$=
informado
~= O valor do atributo precisa conter o valor informado.
Vejamos como podemos aplicar os operadores no jQuery. Observe os exemplos
6
abaixo:
• $(“[name=’txtNome’]”): seleciona todos os elementos cujo atributo

‘name’ seja igual ‘txtNome’;
• $(“[type=’text’][name=’txtInfo’]”): seleciona e define o valor de todos

os elementos do tipo ‘input’, cujo atributo nome seja igual a ‘txtInfo’.
Tratamentos de Eventos
Uma das principais características do jQuery é sua capacidade para responder a
eventos em um documento web. Os eventos podem ser, por exemplo, uma ação
do usuário:
• Movendo o mouse sobre um elemento;
• Selecionando um radio button;
• Clicando sobre um elemento.
A seguir, vejamos alguns dos eventos mais comuns utilizados com jQuery, que
estão listados abaixo:
• $(document).ready(função): como visto anteriormente, aguarda a pá-

gina toda ser carregada para executar uma função;
• $(seletor).click(função): quando o elemento indicado no seletor for se-

lecionado e receber o evento click, a função é executada;
• $(seletor).dbclick(função): quando o elemento indicado no seletor for

selecionado e receber o evento duplo click, a função é executada;
• $(seletor).change(função): quando o elemento indicado no seletor for

selecionado e sofrer uma alteração, então a função será executada;
• $(seletor).focus(função): quando o elemento indicado no seletor rece-

ber o foco, a função é executada.
Agora vamos aplicar esse conceito no exemplo a seguir, no qual o elemento <p>
é ocultado quando clicamos sobre ele:
7
<html>
<head>
<script>
$(document).ready(function () {
$(“p”).click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>Se você clicar aqui, vou desparecer.</p>
<p>Clique aqui também!!</p>
</body>
</html>
No próximo exemplo, o método focus() é executado quando o campo do for-

mulário recebe foco. Perceba como estamos manipulando o CSS do elemento.
Veremos mais sobre a manipulação do CSS antes de finalizar esta Unidade.
8
<html>
<head>
<script>
$(“input”).focus(function () {
$(this).css(“background-color”, “red”);
});
});
</script>
</head>
<body>
Nome: <input type=”text” name=”fullname”><br>
</body>
</html>
Métodos
A seguir, vamos listar alguns dos principais métodos utilizados para manipular
elementos HTML:
• $(seletor).text(conteúdo): acessa o texto dos elementos;
• $(seletor).val(conteúdo): acessa os valores dos elementos contidos em

um formulário. Os elementos podem ser do tipo input, select e radio;
• $(seletor).html(conteúdo): recupera ou define o conteúdo dos elemen-

tos, por exemplo, o código HTML que está dentro de uma div;
• $(seletor).append(conteúdo): insere o conteúdo ao final do elemento;
• $(seletor).prepend(conteúdo): insere o conteúdo no início do ele-

mento;
• $(seletor).after(conteúdo): insere o conteúdo informado após o ele-

mento;
9
• $(seletor).before(conteúdo): insere o conteúdo informado antes do
elemento.
Vejamos um exemplo completo que se utiliza dos métodos citados acima:
<html>
<head>
<script>
$(“#b1”).click(function(){
$(“[type=’text’]”).val(“Inserindo um valor novo”);
$(“[type=’text’]”).before(“- antes -”);
$(“[type=’text’]”).after(“- depois -”);
$(“#d1”).prepend(“ Aprendendo “);
$(“#d1”).append(“ jQuery “);
$(“#d2”).html(“Programação Web”);
})
});
</script>
<style>
div{border: 1px solid saddlebrown;}
</style>
</head>
<body>
<div id=”d1”>Aprendendo jQuery</div>
<br>
<input type=”text” value=”valor inicial”>
<input id=”b1” type=”button” value=”Clique aqui”>
<br><br>
<div id=”d2”>Praticando jQuery</div>
</body>
</html>
10
Observe na Figura 2 a execução do código anterior:
Figura 2 – Exemplo antes de clicar no botão

#ParaTodosVerem: imagem da tela do navegador Chrome em fundo na cor branca. Na parte superior, há
um retângulo com o texto “Aprendendo jQuery”. Abaixo outro retângulo com o texto “valor inicial” e, ao lado
deste, há um botão com a inscrição “Clique aqui”. Na parte inferior da Figura, um último retângulo contém
o texto “Praticando jQuery”. Fim da descrição.
Ao clicar no botão, o evento de clique é acionado no elemento b1 e os métodos

são executados, obtendo o resultado apresentado na Figura 3:
Figura 3 – Exemplo após clicar no botão

#ParaTodosVerem: imagem da tela do navegador Chrome em fundo na cor branca. Na parte superior, há um
retângulo com o texto “Aprendendo jQuery”. No centro, há o texto “- antes -”, seguido de um retângulo com o
texto “Inserindo um valor novo”, após, o texto “- depois -”, seguido de um botão com a inscrição “Clique aqui”.
Na parte inferior da figura, um último retângulo contém o texto “Programação Web”. Fim da descrição.
Manipulando CSS com JQuery

O jQuery nos permite manipular com facilidade os seletores alinhados com CSS
e CSS3, ou seja, é possível ter acesso às propriedades de alteração do estilo de
forma simples e prática, evitando-se as funções padrão do JavaScript. Por meio
do uso do método css() do jQuery, podemos definir ou retornar uma ou mais
propriedades de estilo para elementos selecionados.
Vejamos como isso funciona, começando com a sintaxe para retornar o valor de
uma propriedade CSS específica, que é dada por: $(seletor).css(“nome_da_pro-
priedade”). Vamos aplicar esse conceito no exemplo a seguir, que retorna a cor
de fundo do elemento <p>:
11
<html>
<head>
<script>
let valor = $(“p”).css(“background-color”);
$(“button”).click(function () {
alert(“Background-color=” + valor);
});
});
</script>
<style>
p {background-color: blueviolet; color: white; padding: 10px;}
</style>
</head>
<body>
<p>Clique no botão para revelar a cor de fundo.</p>
<button>Clique aqui</button>
</body>
</html>
Agora vamos definir uma propriedade específica do CSS utilizando a seguinte

sintaxe: $(seletor).css(“nome_da_propriedade”, “valor”). O exemplo que utiliza-
remos para aplicar o conceito é muito parecido com o anterior. Porém agora
vamos mudar a cor de fundo do parágrafo quando clicamos no botão:
12
<html>
<head>
<script>
$(“button”).click(function () {
$(“p”).css(“background-color”,”red”);
});
});
</script>
<style>
p {background-color: blueviolet; color: white; padding:
10px;}
</style>
</head>
<body>
<p>Clique no botão para mudar a cor de fundo.</p>
<button>Clique aqui</button>
</body>
</html>
É possível definirmos várias propriedades CSS para um único elemento utilizan-

do a sintaxe: $(seletor).css({“propriedade1”: “valor”, “propriedade2”: “valor”, ...}).
Vamos modificar nosso exemplo anterior para que, ao clicarmos no botão, além
da cor de fundo (background-color), o tamanho da fonte seja alterado. Para isso,
teremos que alterar o código para:
$(“p”).css({“background-color”:”red”, “font-size”: “24px”});
13
WebStorage (HTML5)
Como o lançamento do HTML5, a retenção de dados no lado do cliente ficou mais
prática e eficiente por meio da API WebStorage, que oferece mecanismos para
que o navegador possa armazenar dados por meio de um conceito chave/valor,
com espaço maior de armazenamento e sem o envio das informações salvas
para o servidor.
A compatibilidade da API com os diversos navegadores existentes no mercado é

exibida no Quadro 3.
Quadro 3 – Compatibilidade da API com os navegadores web
Propriedade
Quadro 3Chrome Explorer
– Compatibilidade da API comMozilla Safari
os navegadores web Opera
WebStorage 4.0 8.0 3.5 4.0 10.5
Para evitar problemas na implementação de um armazenamento web, uma boa

prática é verificar se o navegador possui compatibilidade com a API, o que pode
ser feito com o código do exemplo a seguir:
<script>
if (typeof (Storage) !== “undefined”) {
alert(“Seu navegador possui suporte ao WebStorage!”)
} else {
alert(“Desculpe, mas seu navegador não possui suporte!”)
}
</script>
O WebStorage fornece dois objetos para armazenar dados no cliente:
• LocalStorage, que armazena dados sem data de validade, ou seja, os da-

dos somente serão excluídos pela aplicação ou pelo usuário;
• SessionStorage, que armazena dados para uma sessão (os dados são per-
didos quando a guia do navegador é fechada).
14
O armazenamento web utiliza-se de um conceito de objetos, que são conjuntos
contendo pares de chave/valor. Observe na Figura 4 que a chave “nome” arma-
zena o valor “Marco”.
Figura 4 – Armazenamento local

#ParaTodosVerem: imagem da tela de ferramentas do desenvolvedor exibida no navegador Chrome em
fundo na cor branca. Na parte superior, há um menu com dois ícones à esquerda das opções e outros quatro
ícones à direita. Abaixo, à esquerda, são listadas as opções “Aplicativo” e “Armazenamento”. À direita, há um
campo contendo o texto “Filtro” e, abaixo deste, há uma tabela com duas colunas, com os títulos “Chave” e
“Valor”. Abaixo do título “Chave” há o valor “nome” e abaixo de “Valor” há o texto “Marco”. Fim da descrição.
Para manipular e acessar os dados armazenados, vamos utilizar os seguintes

métodos:
• SetItem(nome, valor): utilizado para gravar dados. Exemplo: localStora-

ge.setItem(“nome”,”Maria”);
• GetItem(nome): utilizado para recuperar dados. Exemplo: localStorage.

getItem(“nome”);
• RemoveItem(nome): utilizado para apagar um dado gravado. Exemplo:

localStorage.removeItem(“nome”);
• Clear(): utilizado para apagar todos os dados do armazenamento. Exem-

plo: localStorage.clear().
Vamos aplicar os conceitos estudados em um exemplo para cadastro simples de

alunos, por meio de um formulário, como mostra a Figura 5:
15
Figura 5 – Formulário de cadastro de alunos
#ParaTodosVerem: imagem da tela do navegador Chrome em fundo na cor branca. No centro, há um
retângulo com fundo na cor branca contendo um formulário com os campos “RGM”, “Nome” e “Curso”,
sendo que ao lado de cada campo há um retângulo para entrada de dados. Abaixo, três botões: o primeiro,
à esquerda, com fundo azul, contém o texto “Gravar”, o do centro tem fundo verde e a inscrição “Carregar”
e o último, à direita, tem fundo vermelho e o texto “Apagar”. Fim da descrição.
Para manipular os dados, vamos utilizar jQuery e criaremos três métodos:
• GravarDados(): está associado ao botão “Gravar” e é responsável por

salvar os dados do formulário no armazenamento local;
• CarregarDados(): está associado ao botão “Carregar” e é responsável

por carregar os dados a partir do armazenamento local para o formulá-
rio;
• ApagarDados(): está associado ao botão “Apagar” e é responsável por

apagar todos os dados do armazenamento local.
O código para implementação das funções é mostrado a seguir:
16
<script>
$(“#button1”).click(gravarDados);
$(“#button2”).click(carregarDados);
$(“#button3”).click(apagarDados);
function gravarDados() {
localStorage.setItem(“rgm”, $(“#rgm”).val());
localStorage.setItem(“nome”, $(“#nome”).val());
localStorage.setItem(“curso”, $(“#curso”).val());
alert(“Dados gravados”);
limparCampos();
}
function carregarDados() {
if (localStorage.length > 0) {
$(“#rgm”).val(localStorage.getItem(“rgm”));
$(“#nome”).val(localStorage.getItem(“nome”));
$(“#curso”).val(localStorage.getItem(“curso”));
} else {
alert(“Nenhum registro encontrado”);
}
}
function apagarDados() {
if (localStorage.length > 0) {
localStorage.clear();
} else {
alert(“Nenhum registro encontrado”);
}
limparCampos();
}
17
function limparCampos() {
$(“#rgm”).val(“”);
$(“#curso”).val(“”);
$(“#nome”).val(“”);
}
</script>}
function limparCampos() {
$(“#rgm”).val(“”);
$(“#curso”).val(“”);
$(“#nome”).val(“”);
}
</script>
AJAX
O AJAX é o acrônimo de Asynchronous JavaScript and XML, ou JavaScript e XML
Assíncronos, em bom português. Trata-se de um conjunto de técnicas para car-
regamento de conteúdo em uma página web que permite que aplicações traba-
lhem de modo assíncrono, tornando o conteúdo web mais interativo para o usu-
ário, uma vez que a troca de dados com o servidor ocorre em segundo plano. Na
prática, isso significa que conseguimos atualizar partes de uma página web sem
a necessidade de recarregar a página inteira.
Quando trabalhamos com AJAX, utilizamos o objeto XMLHttpRequest, que é ma-

nipulado por meio do JavaScript e que efetua a comunicação com o servidor por
meio de requisições HTTP.
O XMLHttpRequest é um objeto nativo padronizado nos navegadores atuais, mas

foi implementado originalmente pela Microsoft como controle ActiveX nas ver-
sões antigas do Internet Explorer. Desde então, outros navegadores passaram a
implementar uma classe XMLHttpRequest, que permite suporte aos métodos e
propriedade desse objeto.
18
A biblioteca jQuery oferece uma vasta documentação para se trabalhar as requi-
sições AJAX. O principal método para executarmos uma solicitação é o $.ajax(),
que é utilizado por todos os outros métodos jQuery AJAX.
A implementação com $.ajax(), considerada de nível inferior, oferece um conjun-

to vasto de opções não disponíveis em funções chamadas de alto nível, como
$.get() e $.post(), que são mais fáceis de se utilizar.
Na requisição, precisamos informar um seletor que vai dar início à execução, o

endereço do arquivo que contém os dados que serão retornados, o tipo de dado
retornado e o que será feito com ele. No exemplo a seguir, utilizamos a função
$.get() para alterar o conteúdo de um parágrafo:
1. <html>
2. <head>
4. <script>
5. $(function(){
6. $(“button”).click(function(){
7. $.get({url: “dados.txt”, success: function(result){
8. $(“#p1”).html(result);
9. }});
10. });
11. });
12. </script>
13. </head>
14. <body>
15. <h2>AJAX com jQuery</h2>
16. <p id=”p1”>Clique no botão para alterar este conteúdo</p>
17. <button>Clique aqui</button>
18. </body>
19. </html>
19
Quando o botão “Clique aqui” for acionado, uma requisição será iniciada e os
dados do arquivo “dados.txt” serão carregados para a página web, substituindo o
conteúdo do parágrafo. Veja a seguir o código comentado no Quadro 4:
Anexamos o evento click no elemento button que será

Linha 6
responsável por disparar a requisição.
Iniciamos a função $.get() e passamos o parâmetro url, que

Linha 7 requisita o arquivo dados.txt. Observe que result armazena os
dados recebidos nessa requisição.
O método html() é utilizado para inserir o conteúdo da

Linha 8 requisição dentro do <p id = “p1”>, conforme a marcação
HTML.
Usar os métodos ajax() do jQuery torna as requisições mais simples do que usar
o método nativo do JavaScript, o XMLHttpRequest.
Entretanto, uma função mais moderna que tem se tornado muito popular é o
Fetch, que fornece uma implementação mais flexível e fácil de se fazer requi-
sições para busca de dados de forma assíncrona pela rede. O Fetch veio para
substituir o objeto XMLHttpRequest e tem se tornado padrão nas versões mais
atuais dos navegadores Firefox Chrome, mas, por se tratar de uma tecnologia
nova, navegadores mais antigos não reconhecem essa funcionalidade.
Uma forma de verificar se o navegador possui suporte é a seguinte:
if(self.fetch) {
// execute minha solicitação do fetch aqui
} else {
// faça alguma coisa com XMLHttpRequest?
}
20
No exemplo a seguir, vamos fazer uma requisição Fetch para obter a lista de re-
positórios de um usuário do github:
1. <html>
2. <head>
4. </head>
5. <body>
6. <h2>Repositórios do github</h2>
7. <p>Utilizando o Fetch para listar os repositórios do github</p>
8. <ul></ul>
9. <script>
10. const url = “https://api.github.com/users/msanches/repos”;
11. fetch(url)
12. .then(response => response.json())
13. .then(data => {
14. data.forEach(element => {
15. $(“ul”).append(“<li>” + element.name + “</li>”);
16. });
17. })
18. .catch(err => console.log(err))
19. </script>
20. </body>
21. </html>
/
O código comentado do exemplo é mostrado abaixo no Quadro 5:
21
Linha 10 Declaramos a url que queremos fazer a requisição.
Usamos o Fetch para fazer a requisição para a url que

Linha 11
declaramos.
É a resposta da requisição, que retornará um valor

Linha 12
response no formato json.
Com o valor da requisição retornado, vamos utilizar

Linha 13 - 15 o jQuery para exibir uma lista com o nome dos
repositórios encontrados.
22
Sites
W3school
É um site voltado à aprendizagem de conteúdos de tecnologias como
HTML, CSS, Javascript, Python entre outros. Visite o tutorial de jQuery.
https://bit.ly/3PyCtGs
jQuery
Visite a página oficial do jQuery e descubra todos os recursos que a
biblioteca dispõe para o desenvolvimento web.
https://bit.ly/3sWXdi4
Leituras
O que São as Ferramentas de Desenvolvimento do Navegador

Os navegadores modernos oferecem um conjunto de ferramentas que
auxiliam o desenvolvedor a inspecionar o HTML, CSS e JavaScript de
uma página. Conheça um pouco mais sobre o devtools visitando o link
a seguir.
https://bit.ly/45K6d96
Fetch API
É uma plataforma aberta destinada à aprendizagem de tecnologias
Web. Acesse a página com os conteúdos de Fetch API.
https://mzl.la/3PbcwLD
Books, 2014.
SILVA, M. S. jQuery: A biblioteca do programador JavaScript. São Paulo: Novatec, 2014.
CSS/Training. W3. Disponível em: < h t t p s : / / w w w . w 3 . o r g / c o m m u n i t y / w e b e d / w i k i /C S S /

T r a i n i n g >. Acesso em: 27/02/2023.
Introdução ao Vue.js
Conteudista
Revisão Textual
Esp. Pérola Damasceno
• Entender o que é o Vue.js e como utilizá-lo na construção de páginas web
interativas;
• Compreender os principais conceitos associados ao uso do Vue.js, e as

vantagens e desvantagens de sua utilização.

2
Afinal, o que é Vue.js?
A popularidade do JavaScript entre os desenvolvedores web fez com que surgis-
sem, ao longo do tempo, uma enorme variedade de frameworks front-end, desti-
nados aos mais variados propósitos, como os mais utilizados no mercado atual-
mente: React, Angular e Vue.js.
Nesta Unidade, falaremos sobre o Vue.js, que é um framework JavaScript de códi-

go aberto (opens source) criado por Evan You, em 2014.
Utilizado no desenvolvimento de interfaces de usuário e SPA (Single Page

Applications), o Vue.js foi projetado para ser progressivo, o que implica dizer
que o desenvolvedor pode utilizá-lo tanto como uma biblioteca simples, com a
finalidade de adicionar funcionalidades em uma página web, ou usá-lo como um
framework completo para construir aplicativos mais completos e complexos.
Leitura
O que são aplicações SPA?
Conhecido por sua simplicidade e baixa curva de aprendizagem, ele se utiliza de

uma arquitetura baseada em componentes reutilizáveis e independentes, que
podem ser combinados para desenvolver interfaces complexas, e diretivas, que
são atributos que adicionam funcionalidades e comportamentos dinâmicos aos
elementos HTML.
Como uma comunidade muito ativa e farta documentação oficial (inclusive

em Português), o Vue.js é um dos mais populares frameworks entre os de-
senvolvedores, como mostrou uma pesquisa realizada pelo StackOverFlow em
maio de 2022.
Leitura
Visite a página do StackOverFlow e conheça
mais detalhes dessa pesquisa.
3
De modo geral, o Vue.js é uma excelente escolha para projetos web que precisam
de um framework reativo, modular, leve e fácil de aprender. Dentre as principais
vantagens de sua utilização, podemos destacar as seguintes:
• Fácil aprendizagem: uma aplicação básica em Vue.js requer apenas um

conhecimento básico de HTML, CSS e JavaScript;
• Performance: por ser leve e rápido, ele tem bom desempenho para apli-
cações de pequeno ou grande porte;
• Flexibilidade: pode ser integrado facilmente com outras bibliotecas e

frameworks;
• Modular e reativo: os componentes são reutilizáveis de facilmente com-

partilhados e sua interface é atualizada quando os dados são alterados.
Entretanto, considerando as desvantagens do Vue.js, percebemos que a complexi-

dade do paradigma reativo pode ser um problema no início. Além disso, em compa-
ração com outros frameworks SPA, o Vue.js possui recursos um pouco mais limitados.
Primeiros Passos
Para começar a utilizar o Vue.js você precisa adicioná-lo ao seu projeto. Existem
quatro formas principais para fazer isso, dependendo de suas necessidades:
• Importar a partir de uma rede de distribuição de conteúdo (CDN). Esta

opção é recomendada apenas para prototipação ou aprendizagem;
• Baixar o arquivo .js e hospedá-lo em seu servidor web, que é a opção

recomendada para projetos em produção;
• Instalação a partir do npm, que é recomendado para aplicações de larga

escala;
• Utilização da ferramenta CLI oficial, que oferece recursos prontos para o

desenvolvimento moderno de front-end.
Leitura
O que é npm?
4
Leitura
O que é CDN?
Nos exemplos desta Unidade, utilizaremos a primeira opção, porém, recomen-

damos que você teste e se familiarize com as demais formas para adicionar o
Vue.js ao seu projeto.
Antes de partirmos para nosso primeiro exemplo prático, recomendamos que

você instale a extensão Vue.js devtools, disponível para navegadores como o
Chrome (Figura 1) e o Firefox, que permitirá inspecionar e realizar debug por
meio de uma interface mais amigável.
Figura 1 – Vue.js devtools na Chrome Web Store

Fonte: Acervo do conteudista
#ParaTodosVerem: imagem do navegador Chrome da Google. Do lado esquerdo, há um menu com fundo
cinza e, acima, uma caixa de pesquisa com uma lupa à esquerda, que mostra o texto “vue js devtools”.
No centro, é exibido o título “Extensões” e, logo abaixo, são listados três retângulos com as opções para
instalação da ferramenta no navegador. Todos os retângulos têm, à esquerda, o símbolo do Vue.js e o título
“Vue.js devtools”, seguido de uma breve descrição abaixo. Fim da descrição.
5
Hello World, Vue.js
Nossa primeira aplicação prática no mundo do Vue.js será um Hello World, cujo
código é apresentado no exemplo a seguir:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Meu primeiro app Vue</title>
5. <script src=”https://unpkg.com/vue@3”></script>
6. </head>
7. <body>
8. <div id=”app”>
9. {{ message }}
10. </div>
11. <script>
12. const app = Vue.createApp({
13. data() {
14. return {
15. message: ‘Hello World, Vue.js!’
16. }}
17. })
18. app.mount(‘#app’)
19. </script>
20. </body>
21. </html>
Neste exemplo, criamos uma instância Vue simples que renderiza a mensagem
“Hello World, Vue.js!” em um elemento HTML. Não se preocupe se o código pare-
ceu um pouco confuso para você, vamos comentar cada parte no Quadro 1:
6
Linha 5 Importamos o Vue.js a partir de um CDN
Definimos um elemento HTML com id = “app”, que

Linha 8
renderiza a mensagem com interpolação de dados do Vue.js
Linha 12 Criamos uma instância Vue.js
Especificamos o modelo de dados contendo uma

Linha 13-16 propriedade chamada message, que atribuímos o valor
“Hello World, Vue.js!”
O método mount é utilizado para instanciar o Vue.js no

Linha 18
elemento HTML que possui o id = “app”
Fonte: Elaborado pelo conteudista
Em nosso exemplo, o elemento HTML que será utilizado como destino é uma div
cujo id é app. A interpolação de dados irá renderizar a mensagem nesse elemen-
to e, para isso, utilizamos chaves duplas {{}} que contêm a propriedade que se
deseja exibir, neste caso mensagem.
Este é um exemplo simples, mas que já mostra um pouco das características do

framework. Nosso próximo passo será expandir os conceitos trabalhados aqui
para que possamos criar aplicativos mais complexos e, para isso, falaremos um
pouco sobre as diretivas e componentes.
Conhecendo o Vue.js
A arquitetura do Vue.js nos permite construir aplicações que renderize dados
no DOM (Document Object Model) utilizando-se uma sintaxe de template bastante
simples. O DOM é uma representação dos estilos, elementos e conteúdo de uma
página HTML, que mudam na medida em que há uma interação do usuário, o
que exige uma atualização constante do conteúdo pelo navegador.
Na manipulação de dados o Vue.js utiliza-se de diretivas integradas ao HTML,

que oferecem flexibilidade aos elementos. Já no conceito de template são utiliza-
dos os componentes, que permitem a reutilização de modelos que podem ser
vinculados à página.
7
Além disso, como vimos no exemplo anterior, a interpolação é uma forma sim-
ples, porém, poderosa de exibir dados dinamicamente. Veremos, a seguir, como
esses conceitos se integram à construção de páginas web.
Criando uma Instância de Aplicação Vue

Uma aplicação Vue começa com a criação de uma nova instância, que é feita
com a função createApp, seguida de um conjunto de propriedades que contém
informações necessárias à configuração do componente raiz da aplicação. Esse
componente constitui o ponto de partida para a renderização da aplicação, que
é montada em um elemento HTML do DOM, por meio do método mount, que
retorna a instância do componente raiz:
<script>
const app = Vue.createApp({
/* opções */
})
app.mount(“#app”)
</script>
Existem várias opções que adicionam propriedades à instância do componente,

tais como:
• data: retorna um objeto que contém dados da instância;
• methods: configura um objeto que contém métodos referentes à instân-

cia do Vue;
• computed: calcula valores baseados em outros dados;
• watch: observa as alterações em dados específicos definidos na proprie-

dade data;
• template: define a estrutura e aparência do componente.
Toda instância Vue possui um ciclo de vida que passa por uma série de etapas
desde sua criação até sua destruição. Desta forma, existem propriedades opcio-
nais que caracterizam os diferentes estados de vida de uma instância Vue, que são:
8
• beforeCreate: a instância ainda não foi criada e, portanto, as proprieda-
des de dados e métodos ainda não estão disponíveis;
• created: a instância foi criada, porém, ainda não está pronta para ser
montada. As propriedades de dados e métodos já estão disponíveis;
• beforeMount: momento antes da instância ser montada no elemento

HTML;
• mounted: a instância foi montada no DOM e está pronta para ser utili-
zada;
• beforeUpdate: a instância foi atualizada, porém, as mudanças ainda

não foram refletidas no DOM;
• updated: a instância foi atualizada e agora as mudanças já foram refle-

tidas no DOM;
• beforeDestroy: momento antes da instância ser destruída.
• destroyed: momento em que a instância é destruída e não está mais

disponível.
Veja, a seguir, um exemplo simples do ciclo de vida de uma instância do Vue.js:
9
<html>
<head>
<title>Ciclo de vida Vue</title>
<script src=”https://unpkg.com/vue@3”></script>
</head>
<body>
<div id=”app”>
<p>{{ message }}</p>
<input v-model=”message” />
</div>
<script>
data() {
return {
message: ‘Olá mundo Vue.js!’
}
},
created() {
console.log(‘Instância criada’)
},
mounted() {
console.log(‘Instância montada’)
},
updated() {
console.log(‘Instância atualizada’)
},
unmounted() {
console.log(‘Instância desmontada’)
}
})
app.mount(‘#app’)
</script>
10
</body>
</html></body>
</html>
No menu do navegador, procure por “Ferramentas do desenvolvedor” e observe os

estados de vida do Vue.js. Perceba que o estado updated() somente é disparado
quando alteramos o campo input para “Olá mundo!”, como mostra a Figura 2.
Figura 2 – Ciclo de vida Vue.js

Fonte: Acervo do conteudista
#ParaTodosVerem: imagem do navegador Chrome, da Google, com fundo na cor branca. Ao lado esquerdo,
há um título com o texto “Olá mundo!” e, logo abaixo, um campo input com o texto “Atualizar”. À direita, é
exibida a aba de ferramentas do desenvolvedor, com a guia “Console” selecionada com um traço na cor azul
na parte inferior. Logo abaixo, uma tabela exibe, do lado esquerdo, os estados do Vue.js e à direita o nome
da aplicação (ciclo_de_vida.js) seguido pela linha do código que está sendo executada. Fim da descrição.
Leitura
O que são as ferramentas de desenvolvimen-
to do navegador?
Diretivas do Vue.js
Sinteticamente, podemos definir as diretivas como sendo atributos adicionados
a um elemento HTML que estendem seu comportamento e funcionalidade. Na
prática, teremos um comportamento que reage a interações do usuário, atuali-
zando a interface dinamicamente.
No Vue.js as diretivas são precedidas pelo prefixo “v-”, são aplicadas aos elemen-
tos HTML e possuem comportamentos distintos, que são configuráveis por meio
de opções, como veremos mais adiante. As principais diretivas Vue.js são:
11
• v-model: é utilizada no conceito “two-way-databind”, ou seja, permite
criar um vínculo bidirecional de dados entre um elemento HTML (como
o input, por exemplo) e um componente Vue.js. A diretiva v-model per-
mite atualização automática do componente à medida que um campo
de formulário recebe informações. O two-way-databind é um dos con-
ceitos mais relevantes para o desenvolvimento de aplicações web inte-
rativas e é uma das principais vantagens do Vue.js em relação a outros
frameworks.
Vejamos um exemplo simples, que permite ao Vue observar o valor do campo

input e atualizar a variável nome.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Two-way-data-bind Vue.js</title>
6. </head>
7. <body>
9. <label for=”nome”>Nome:</label>
10. <input type=”text” v-model=”nome”>
11. <p>Olá {{ nome }}! Bem-vindo ao Vue</p>
12. </div>
13. <script>
15. data() {
16. return {
17. nome: ‘’
18. }
19. }
20. })
21. app.mount(‘#app’)
22. </script>
23. </body>
24. </html>
12
Na prática
Compare este exemplo com os anteriores e observe a função
do v-model que adicionamos ao elemento input na linha 10.
• v-bind: é utilizada para vincular, dinamicamente, um valor ao atributo de

um elemento HTML como o src de uma imagem. Veja o exemplo a seguir:
<img v-bind:src=”imagemUrl” alt=”Imagem”>
Na prática
Neste exemplo, adicionamos ao modelo de dados uma pro-
priedade chamada imagemUrl, que atribuímos o valor https://
bit.ly/3RijRf9
• v-if: é utilizada para renderizar um elemento HTML com base em uma

expressão condicional. Caso o resultado da expressão seja true (verda-
deiro) o elemento HTML será renderizado; caso contrário, não. Veja o
seguinte exemplo:
<div v-if=”mostrarImagem”>
</div>
Agora, a imagem será exibida somente se a propriedade mostrarImagem for

true (verdadeira). Para que o exemplo funcione adequadamente, essa proprie-
dade foi adicionada ao modelo de dados com o valor true.
• v-on: é utilizada para anexar eventos a um elemento HTML, permitindo

executar um método a partir da interação do usuário, como o clique de
um botão.
Para nosso próximo exemplo, criaremos um botão para ocultar/exibir a imagem,

utilizando as diretivas v-if e v-on conjuntamente. O código HTML ficou assim:
13
<div id=”app”>
<h1>{{ titulo }}</h1>
<p v-if=”mostrarImagem”>
</p>
<p>Clique no botão para ocultar / exibir a imagem</p>
<button v-on:click=”alternarImagem”>Clique-me</button>
</div>
A diretiva v-on adiciona um ouvinte de evento de clique ao botão e, quando cli-

camos nele, o método “alternarImagem” é chamado, alterando o valor da pro-
priedade mostrarImagem, do modelo de dados entre true e false. Observe o
script Vue como ficou:
<script>
data() {
return {
titulo: ‘Página web dinâmica’,
imagemUrl: ‘https://files.readme.io/86176b7-vuejs.png’,
mostrarImagem: true
}
},
methods: {
alternarImagem() {
this.mostrarImagem = !this.mostrarImagem;
}
}
})
</script>
14
No exemplo, methods refere-se à propriedade do Vue.js, que contém todos os
métodos que podem ser chamados em resposta a eventos, ou para executar al-
guma tarefa especificamente criada pelo desenvolvedor da aplicação.
• v-for: é utilizada para renderizar dinamicamente uma lista de elemen-

tos, iterando cada item de base dados de acordo com um template. Essa
diretiva tem uma sintaxe na forma item in items, na qual items cor-
responde à base de dados, e item é um elemento dessa base que está
sendo iterado.
O template para o próximo exemplo é dado:
<div id=”app”>
<ul>
<li v-for=”(nome, index) in nomes”>
{{ index }} - {{ nome }}
</li>
</ul>
</div>
A diretiva v-for itera sobre o array de nomes para gerar uma lista na qual para
cada nome é gerado um elemento li. O array de nomes foi criado dentro do ob-
jeto data:
<script>
data() {
return {
nomes: [‘Marco’, ‘Mariana’, ‘Ana’, ‘Alexandre’, ‘Suzana’]
}}
})
</script>
15
• v-show: é utilizada de forma semelhante ao v-if para controlar a exibi-
ção condicional de elementos com base em uma expressão. Vejamos um
exemplo completo:
<html>
<head>
</head>
<body>
<div id=”app”>
<p v-show=”mostrarMsg”> {{ message }} </p>
<button v-on:click=”mostrarMsg = !mostrarMsg”>
Alterar exibição</button>
</div>
<script>
data() {
return {
message: “Esta mensagem será ocultada / exibida”,
mostrarMsg: true
}}
})
</script>
</body>
</html>
Neste exemplo, um botão alterna a visibilidade do elemento HTML <p>, ocul-

tando ou exibindo a mensagem. Observe que, diferentemente do exemplo com
v-if, aqui optamos por não utilizar um método. Assim, alteramos o valor da pro-
priedade mostrarMsg na própria diretiva v-on. Apesar de não ser uma prática
recomendada, podemos utilizar dessa forma sempre que a implementação for
suficientemente simples para isso.
16
A despeito do resultado na prática ser o mesmo, a principal diferença entre o v-if
e o v-show está na forma como cada um altera a visibilidade de um elemento
utilizando o CSS. Enquanto o v-if insere ou remove elementos no DOM, o v-show
somente altera a propriedade display para none, ou seja, o elemento ainda exis-
te no DOM, somente sua visibilidade foi alterada.
O v-show é mais leve e rápido, sendo recomendado quando não precisamos

de grandes mudanças na estrutura da página, apenas alterar a visibilidade de
um elemento por meio do CSS. Já o v-if, devido à performance, deve ser utilizado
quando a renderização condicional é menos frequente.
Na prática
Em seu navegador favorito, abra “Ferramentas do desenvolve-
dor” e, na inspeção de “Elementos”, compare o resultado do uso
do v-if e do v-show.
Utilizando Componentes
Os componentes do Vue constituem um dos principais recursos do framework
e permitem criar elementos HTML personalizados, independentes e frequente-
mente reutilizáveis, para construção de interfaces de usuário.
Um componente Vue é essencialmente uma instância com opções pré-definidas,

onde registramos o componente a partir da criação de um objeto composto por
um bloco de códigos com uma estrutura HTML. Essa instância segue a mesma
configuração utilizada exemplos anteriores com o objeto app.
Quando criamos um componente, podemos definir propriedades e eventos pró-

prios, que podem ser compartilhados com outros componentes, possibilitando a
construção de aplicações complexas e modulares, compostas de pequenos com-
ponentes independentes.
A seguir, vamos implementar um componente que lista o nome de carros arma-

zenados em um array:
17
1.<html>
2. <head>
4. </head>
5. <body>
7. <h1>{{ titulo }}</h1>
8. <carros-list
9. v-for=”carro in carros”
10. v-bind:carro = “carro”
11. ></carros-list>
12. </div>
13.<script>
15. data() {
16. return {
17. titulo: “Utilizando componentes”,
18. carros: [“Fusca”, “Kombi”, “Brasília”, “Uno”, “Opala”]
19. }}
20. })
21. app.component(“carros-list”, {
22. props: [“carro”],
23. template: “<li> {{ carro }} </li>”
24. })
25. app.mount(“#app”)
26.</script>
27.</body>
28.</html>
Neste exemplo, criamos uma instância do Vue na linha 14 (Vue.createApp), que é

montada no elemento HTML <div id=”app”> (linhas 6 a 12). O componente “car-
ros-list” é definido nas linhas 21 a 24, com propriedade carro (props: [“carro”]).
O componente recebe array como propriedade (props) e o utiliza em o template
renderizar a lista de carros com a diretiva v-for (linhas 8 a 11).
18
Site
Navegue na documentação oficial do Vue.js e co-
nheça um pouco mais sobre os componentes.
A reutilização de componentes é um recurso precioso do Vue.js, pois permite a

criação de componentes genéricos, que podem ser utilizados diversas vezes em
nossas aplicações.
Nosso último exemplo desta Unidade explora essa característica do Vue:
<html>
<head>
</head>
<body>
<div id=”app”>
<h1>Reutilizando componentes</h1>
<button-counter></button-counter>
</div>
<script>
const app = Vue.createApp({})
app.component(“button-counter”, {
data(){
return {
count: 0
}},
template:`<button v-on:click=”count++”>
Você clicou {{ count }} vezes.
</button>`
})
19
</script>
</body>
</html>
A ideia desse exemplo foi criar um componente do tipo button cujo evento click
adiciona uma unidade a um contador (count). Perceba que implementamos o
componente button-counter uma única vez, mas, reutilizamos o template criado
três vezes, sem a necessidade de replicar o código utilizado.
Os componentes são a base da estrutura de uma aplicação no Vue.js e podem

ser reutilizados em diferentes contextos, como objetos JavaScript que possuem
propriedades como data, methods e computed. As instâncias de um componen-
te possuem seu escopo isolado, o que significa que não interferem com outros
componentes, e ciclo de vida próprio, que inclui etapas como created, mounted,
updated e destroyed.
Em Síntese
Como vimos nesta Unidade, o Vue.js é uma biblioteca JavaScript
moderna e progressiva para a construção de interfaces de usu-
ário interativas e reativas, que, por sua simplicidade, eficiência
e flexibilidade, permite aos desenvolvedores criarem aplicativos
web complexos de forma mais ágil. Os componentes facilitam a
organização e manutenção do código e as diretivas simplificam
a manipulação dinâmica do DOM, conferindo ao Vue.js uma
performance eficiente, com uma renderização rápida e otimiza-
da, que garante ótima experiência do usuário.
20
Sites
Codesandbox
É uma plataforma em nuvem que permite e o desenvolvimento e
compartilhamento on-line de soluções web, de forma rápida e eficiente.
https://bit.ly/3RhidKJ
Vue.js – O Framework JavaScript Progressivo

Visite e explore a página oficial do Vue e aprofunde seus estudos.
https://bit.ly/3Pz0ux6
learnvue.co
É uma plataforma com conteúdos para aprendizagem do Vue.js.
https://bit.ly/44HrEpS
Vue.js Brasil
Conheça a página da comunidade brasileira dedicada ao Vue.js, explore
e enriqueça seus conhecimentos com diversos artigos em Português.
https://bit.ly/3resgFF
Books, 2014.
SILVA, M. S. jQuery: A biblioteca do programador JavaScript. São Paulo: Novatec, 2014.
W3C. CSS/treinamento. 23/10/2015. Disponível em: < h t t p s : / / w w w . w 3 . o r g / c o m m u

n i t y / w e b e d / w i k i / C S S / T r a i n i n g >. Acesso em: 04/07/2023.
Introdução ao React
Conteudista
Revisão Textual
Esp. Pérola Damasceno
• Entender o que é o React e como utilizá-lo na construção de páginas web
interativas;
• Compreender os principais conceitos associados ao uso do React e como

utilizar o JSX no desenvolvimento web.

2
Afinal, o que é React?
É inegável o quanto o JavaScript se tornou uma linguagem fundamental para
o desenvolvimento de páginas dinâmicas e interativas quando falamos sobre
interface de usuário. Apesar de sua versatilidade, com o tempo foram sur-
gindo diversas bibliotecas e frameworks que tornaram mais eficiente e rápida
a construção de páginas web, com recursos que vão desde o gerenciamen-
to de estado e interação com APIs externas até a criação e reutilização de
componentes.
Leitura
O que é uma API? Leia mais sobre no material
a seguir.
Dentre as bibliotecas, o React destacou-se por sua simplicidade e eficiência no

desenvolvimento de complexas interfaces de usuário, permitindo desde a cria-
ção de componentes reutilizáveis em JavaScript até o gerenciamento de estado,
que permite a atualização da interface de forma eficiente e sem necessidade de
atualizar a página inteira.
O React está entre as bibliotecas mais populares no ecossistema JavaScript,

aparecendo como segunda na preferência dos mais de 70.000 desenvolvedo-
res que responderam a uma pesquisa realizada pelo StackOverFlow, em maio
de 2022.
Site
Conheça em detalhes a pesquisa do
StackOverFlow.
Criada em 2011 por um engenheiro do Facebook para ser utilizado no feed de

notícias, a biblioteca React foi apresentada ao público como código aberto dois
anos depois, em 2013, na JSConf US. Mantido pelo Facebook, a grande comunida-
de de desenvolvedores trabalhando com o React não para de crescer e produzir
recursos e ferramentas para facilitarem o desenvolvimento de aplicativos web de
alta performance e escaláveis.
3
Em 2015, também na JSConf US, foi lançada a biblioteca React Native, destinada à
criação de aplicações para dispositivos móveis que se utilizam de funções nativas
das plataformas Android e iOS.
Site
O JSConf é uma organização de conferências
JavaScript de todo o mundo.
Para a construção de interfaces de usuário, o React apropria-se de uma abor-

dagem baseada em componentes e de uma representação virtual da árvore de
elementos DOM (Document Object Model) da página, que chamaremos de Virtual
DOM.
A principal vantagem dessa abordagem é que cada componente é uma unidade

independente que pode ser reutilizada e combinada com outros componentes
para criar uma interface completa. Já a utilização de uma Virtual DOM permite
atualizar somente as partes da interface que foram modificadas, sem precisar
recarregar a página inteira.
E, por falar nisso, a seguir, vamos sintetizar as principais vantagens da utilização

do React em nossos projetos:
• Reutilização de componentes: torna o desenvolvimento mais eficiente;
• Performance: o Virtual DOM permite atualizações mais eficientes e rápi-

das da interface, sem recarregar a página inteira;
• Facilidade de manutenção: a estrutura baseada em componentes tor-

na o código mais organizado e fácil de manter;
• Comunidade ativa: facilita ao desenvolvedor encontrar soluções para

problemas e aprender novas técnicas.
Dentre as desvantagens, não podemos deixar de destacar a alta curva de apren-

dizagem para iniciantes, que podem sentir dificuldade na utilização dos compo-
nentes e do Virtual DOM.
4
Primeiros passos com React
Para utilização do React em um projeto, precisamos inicialmente incluir a biblio-
teca em seu código. Isso pode ser feito de duas formas:
• Gerenciador de pacotes: podemos utilizar o npm ou yarn para instalar

e gerenciar as dependências do projeto. Certifique-se que você possui o
npm instalado e digite o seguinte comando no terminal:
npm install react react-dom
Esse comando fará a instalação das bibliotecas React, que é responsável pela
criação e gerenciamento de componentes, e ReactDOM, que se encarrega da ren-
derização dos componentes na página.
Leitura
O que é npm? Introdução básica para inician-
tes.
• Incluir as bibliotecas diretamente na página HTML: ao iniciar um pro-

jeto React, importar a biblioteca a partir de uma rede de distribuição de
conteúdo (CDN) pode ser uma ótima opção. Em apenas um minuto po-
demos configurar tudo, como mostraremos a seguir:
<script src=”https://unpkg.com/react/umd/react.development.js”>
</script>
<script src=”https://unpkg.com/react-dom/umd/react-dom.develop-
ment.js”></script>
5
Leitura
Para fins didáticos, nessa Unidade utilizare-
mos a segunda opção, ou seja, iremos incluir
as bibliotecas diretamente em uma página
HTML. Entretanto, caso você deseje construir
uma nova aplicação totalmente do zero em
React, visite o tutorial disponível a seguir.
Nosso primeiro exemplo será uma página simples que utilizaremos para traba-
lhar alguns dos conceitos tratados:
1.<html>
2.<head>
3. <meta charset=”UTF-8”>
4. <title>Primeiros passos com React.js</title>
5. <script src=”https://unpkg.com/react/umd/react.development.js”></
script>
6. <script src=”https://unpkg.com/react-dom/umd/react-dom.develo-
pment.js”></script>
7.</head>
8.<body>
9. <div id=”root”></div>
10. <script>
11. const root = ReactDOM.createRoot (document.querySelector(‘#root’));
12. const element = React.createElement;
13. root.render(element(‘h1’, null, ‘Olá, bem-vindo ao React!!!’));
14. </script>
15.</body>
16.</html>
6
O código pareceu um pouco confuso para você? Não se preocupe, pois, no
Quadro 1, vamos comentar cada parte dele:
linhas 5 Importamos as bibliotecas do .js e ReactDOM.js por meio de

e6 dois scripts.
Definimos um elemento HTML com id = “root”, que será

linha 9 utilizado como ponto de entrada para a renderização dos
elementos do React.
Utilizamos o método createRoot() do ReactDOM para criar

Linha 11
um “root” React no elemento HTML com id = “root”.
Utilizamos o método React.createElement() para criar um

Linha 12
elemento HTML.
Chamamos o método render() no “root” criado

anteriormente, passando o elemento <h1> e o texto “Olá,
Linha 13 bem-vindo ao React!!!” como parâmetro. Esse método será
responsável por renderizar o elemento HTML na página,
tornando-o visível para o usuário.
Componentes
Não seria exagero afirmar que os componentes são o coração e essência do
React, pois permitem o desenvolvimento mais eficiente na medida em que a in-
terface de usuário é dividida em partes que são independentes e reutilizáveis.
Na prática, os componentes fazem o encapsulamento da lógica e interface do

usuário em elementos HTML, que trabalham isoladamente, provendo códigos
independentes e reutilizáveis. Em outras palavras, um componente é uma uni-
dade de códigos que pode ser combinada com outras, com a finalidade de criar
interfaces mais complexas.
O modo mais simples para se definir um componente em React é escrevê-lo como

uma função JavaScript:
7
<div id=”root”></div>
<script>
const { useState, createElement } = React;
function OlaMundo(props) {
const p = React.createElement(“p”, null,
`Olá, ${props.name}!`);
return p;
}
const root = ReactDOM.createRoot(

document.querySelector(“#root”));
root.render(createElement(OlaMundo, {name: “Marco”}));
</script>
Nesse exemplo, o componente OlaMundo é definido por uma função que utiliza
o método createElement para retornar um elemento p. A função recebe uma
propriedade (props), chamada name, e o componente usa o método useState
para definir um estado para name, que é atualizado quando passamos o nome
da pessoa para o componente quando ele for renderizado.
Perceba que nosso exemplo requer a importação das funções useState e crea-
teElement da biblioteca React, o que é feito na linha: const { useState, create-
Element } = React.
Enquanto a função useState é responsável por criar um estado interno em um

componente React, fornecendo uma forma de atualizar esse estado, a função
createElement é usada para criar elementos React que compõem as interfaces
em um aplicativo.
Saiba Mais
Uma boa prática para tornar nosso código mais legível é impor-
tar apenas as funcionalidades específicas que precisamos da
biblioteca do React e usá-las diretamente em nosso código, sem
precisar chamar a biblioteca toda vez.
8
Finalmente, o método render é chamado para renderização do componen-
te, passando-se o resultado da chamada createElement(OlaMundo, {name:
“Marco”}) como argumento.
Saiba Mais
O parâmetro props da função é um objeto que armazena da-
dos para uso na criação da marcação HTML. No exemplo citado,
props.name é o nome de uma pessoa! Observe, também, que
o nome de componentes segue a sintaxe PascalCase (exem-
plo: OlaMundo).
Nosso exemplo utiliza-se de um componente funcional que é mais simples e re-

torna um elemento por meio de funções JavaScript. No entanto, o React também
permite a definição de componentes de classe, que são mais complexos que
os funcionais e se utilizam de uma classe ES6. Os componentes de classe serão
apresentados no final desta Unidade.
A implementação do React utilizada neste exemplo admite três parâmetros para

criar a marcação HTML:
const elementoHTML = React.createElement(

“el”,
{objeto javascript},
“conteúdo”
);
O primeiro atributo (el) destina-se à criação do elemento HTML; o segundo defi-

ne um ou mais atributos para o elemento; e o terceiro é o conteúdo do elemento.
O resultado é armazenado em uma constante ES6 que, neste exemplo, foi cha-
mada de elementoHTML.
O segundo parâmetro pode ser declarado vazio {}, null ou conter regras CSS. Já o
terceiro poderá ser vazio, conter um texto, ou outro elemento HTML, resultando
em aninhamentos em tantos níveis quanto desejarmos. Veja o exemplo a seguir:
9
const elemento = React.createElement(
‘h1’,
{className : ‘titulo’},
‘Olá mundo React!’
);
Importante
Observe que o segundo parâmetro se utiliza da palavra reserva-
da className e não class para definir o atributo HTML.
Ciclos de Vida em React

O ciclo de vida de um aplicativo é definido em programação como sendo o perí-
odo entre a sua inicialização e finalização.
No contexto do React, os ciclos de vida permitem gerenciar o comportamento de

um componente por meio de métodos que se destinam a executar tarefas espe-
cíficas no instante mais apropriado da vida do componente.
Existem quatro principais fases do ciclo de vida de um componente:
• Inicialização: o componente está sendo preparado para a renderização;
• Montagem: o componente é inserido na árvore do DOM pela primeira

vez;
• Atualização: o componente é atualizado com novas props ou estados;
• Desmontagem: o componente é removido da árvore do DOM.
Os principais métodos utilizados no ciclo de vida do React são:
• constructor(): executado quando o componente é criado e inicializa o

estado do componente e outras propriedades;
10
• componentDidMount(): executado após o componente ser montado
na página. Neste ponto, deve-se executar qualquer inicialização que o
componente precise;
• componentDidUpdate(prevProps, prevState): executado após o com-

ponente ser atualizado. Neste ponto, deve-se executar qualquer ação
que dependa do estado anterior do componente;
• componentWillUnmount(): executado quando o componente está

prestes a ser removido da página. Neste ponto, deve-se limpar qualquer
recurso que o componente tenha utilizado.
Observe o exemplo a seguir, que, para fins didáticos, teve seu código dividido em
dois arquivos:
ciclo_de_vida.html
<html>
<head>
<title>Exemplo Ciclo de Vida</title>
<script src=”https://unpkg.com/react/umd/react.development.js”></
script>
<script src=”https://unpkg.com/react-dom/umd/react-dom.develo-
</head>
<body>
<script src=”ciclo_de_vida.js”></script>
</body>
</html>
11
ciclo_de_vida.js
class CicloDeVida extends React.Component {

constructor(props) {
super(props);
this.state = { contador: 0 };
console.log(“Construtor”);
}
componentDidMount() {
console.log(“Componente foi montado”);
}
componentDidUpdate(prevProps, prevState) {
console.log(“Componente foi atualizado”);
console.log(“Estado anterior:”, prevState);
console.log(“Estado atual:”, this.state);
}
componentWillUnmount() {
console.log(“Componente será desmontado”);
}
incrementar = () => {
this.setState({ contador: this.state.contador + 1 });
};
render() {
console.log(“Renderização”);
return React.createElement(“div”, null,
React.createElement(“h1”, null,
“Contador: “, this.state.contador),
React.createElement(“button”,
{ onClick: this.incrementar }, “Atualizar”)
);
}
}
const root = ReactDOM.createRoot(document.querySelector(“#root”));

root.render(React.createElement(CicloDeVida));
12
O exemplo cria um componente chamado CicloDeVida, composto por um con-
tador e um botão que incrementa o contador a cada clique. O método render()
renderiza o contador e o botão, que possui um evento de clique, responsável por
chamar a função incrementar(). A cada clique, o estado do componente é atua-
lizado e o contador é renderizado novamente.
O ciclo de vida do componente é gerenciado pelos quatro métodos

implementados:
• constructor(): o componente foi criado tem seu estado inicializado. O

console do navegador exibe a mensagem “Construtor”;
• componentDidMount(): o componente foi montado na página. O con-

sole do navegador exibe a mensagem “Componente foi montado”;
• componentDidUpdate(): controla ações com base no estado ou pro-

priedades anteriores e atuais do componente toda vez que ele é atu-
alizado. O console do navegador exibe a mensagem “Componente foi
atualizado” e os estados anterior e atual;
• componentWillUnmount(): executado antes do componente ser remo-

vido da página. O console do navegador exibe a mensagem “Componen-
te será desmontado”.
A Figura 1 mostra a renderização do exemplo no navegador Chrome, com a aba

de ferramentas do desenvolvedor aberta à direita:
13
Figura 1 – Ciclo de vida React
#ParaTodosVerem: imagem do navegador Chrome da Google com fundo na cor branca. Ao lado esquerdo,
há um título com o texto “Contador: 3” e, logo abaixo, um botão cinza que contém o texto “Atualizar”. À direita,
é exibida a aba de ferramentas do desenvolvedor, com a guia “Console” selecionada com um traço na cor
azul na parte inferior. Logo abaixo, uma tabela exibe, do lado esquerdo, os estados do componente React
e, à direita, o nome da aplicação (ciclo_de_vida.js) seguida pela linha do código que está sendo executada.
Fim da descrição.
O que é o JSX?
JSX é o acrônimo de JavaScript XML, uma tecnologia criada com o objetivo de sim-
plificar a criação de elementos por meio de códigos JavaScript, muito utilizada no
desenvolvimento de interface do usuário como componentes do React.
Sua sintaxe declarativa, que permite criar um componente com uma estrutura
HTML e CSS escrita em JavaScript, proporciona o desenvolvimento de interfaces
mais intuitivas com códigos mais fáceis de ler e escrever, sem necessidade de
recorrer à concatenação de Strings ou métodos para criação de elementos dinâ-
micos em HTML.
Considere, por exemplo, uma página HTML que exiba dinamicamente um ele-
mento h1 com o texto “Hello JSX com React”. Na Figura 2, observe no código a tag
<h1>Hello JSX com React</h1>.
14
Figura 2 – Hello JSX com React
#ParaTodosVerem: imagem do navegador Chrome, da Google, com fundo na cor branca. Ao lado esquerdo,
há um título com o texto “Hello JSX com React”. À direita, é exibida a aba de ferramentas do desenvolvedor,
com a guia “Elementos”. Logo abaixo, uma seta na cor verde aponta para o elemento h1. Fim da descrição.
O código para criação de uma marcação HTML com uso de sintaxe de JavaScript
puro ficaria assim:
<script>
//Código JS para criar o elemento h1
const elemento = document.createElement(“h1”);
const titulo = document.createTextNode(“Hello JSX com React”);
elemento.appendChild(titulo);
//Código JS para anexar o elemento à página
document.querySelector(“#root”).appendChild(elemento);
</script>
O mesmo resultado poderia ser obtido com a sintaxe JSX:
15
<script type=”text/babel”>
//Código JSX para criar o elemento
const elemento = <h1>Hello JSX com React</h1>;
//Código React para anexar o elemento à página
ReactDOM.createRoot(document.querySelector(‘#root’)).render(ele-
mento);
</script>
Site
Acesse o código completo dos exemplos cita-
dos no repositório disponível a seguir.
Perceba que estamos substituindo três linhas de código por apenas uma! Isso
parece bastante promissor, você não acha?
Na prática, o React utiliza-se de uma programação declarativa para interagir com

o DOM, o que significa que não é feita a manipulação direta do DOM. Somente
precisamos indicar o que é preciso fazer que o React se encarrega de transformar
a instrução JavaScript e executá-la corretamente.
No exemplo, a primeira implementação que fizemos utilizou-se de uma progra-

mação declarativa, ou seja, declaramos duas variáveis e associamos ao elemento
HTML.
Os arquivos contendo códigos JSX podem ser salvos com as extensões .js ou .jsx,
porém, para que os códigos sejam interpretados pelos navegadores, é necessá-
rio um tradutor, ou transpilador de código. O React usa o Babel para ler o conte-
údo JSX e transformá-lo em JavaScript puro.
Leitura
Saiba mais sobre o que é babel lendo o mate-
rial a seguir.
16
Observe que a sintaxe JSX permite a inserção de atributos, o que facilita o uso de
CSS para formatação dos componentes. Vejamos um exemplo completo de tudo
que vimos até agora sobre o JSX:
<html>
<head>
<meta charset=”UTF-8”>
<title>Primeiros passos com React.js</title>
<script src=”https://unpkg.com/@babel/standalone/babel.js”></script>
script>
<style>
.hello {
color: #c05959;
font-size: 1.5em;
text-transform: uppercase;
}
</style>
</head>
<body>
function Card(props) {
const element = (
<div>
<h1 className=”hello”> JSX com React </h1>
<p>Olá mundo, {props.name}</p>
</div>
)
return element;
}
function Button(props) {
return <button
17
onClick={props.onClick}>{props.label}
</button>;
}
document.querySelector(‘#root’));
root.render(<div>
<Card name=”JSX” />
<Button label=”Clique aqui” onClick={()
=> alert(‘Clicou no botão’)} />
</div>
);
</script>
</body>
</html>
No exemplo, é importante destacar a utilização do tradutor (transpilador)

babel.js:
• Primeiro, importamos a biblioteca de um repositório: <script src=

”https://unpkg.com/@babel/standalone/babel.js”></script>;
• A seguir, devemos especificar que nosso script se utiliza da biblioteca:

<script type="text/babel">.
Agora, vamos ao código:
• Os componentes criados Card e Button são definidos como funções Ja-

vaScript que recebem propriedades (props);
• O componente Button recebe a propriedade que define sua label e o

método onClick, responsável pelo evento clique;
• Na renderização, passamos os valores das props, o que permite uma

personalização dos componentes exibidos na página;
• Observe que devemos utilizar className e não class para aplicar o CSS
ao elemento h1 do HTML.
18
Antes de encerrarmos esta Unidade, no próximo exemplo vamos retomar o com-
ponente de classe do React e explorar alguns recursos que essa sintaxe oferece:
<html>
<head>
<meta charset=”UTF-8”>
<title>Primeiros passos com React.js</title>
<script src=”https://unpkg.com/@babel/standalone/babel.js”></script>
script>
</head>
<body>
class Carro extends React.Component {
constructor(props) {
super(props);
this.state = {
marca: “Ford”,
modelo: “Camaro”,
cor: “amarela”,
ano: 1975
};
}
render() {
return (
<div>
<h1>Meu carro JSX</h1>
<ul>
19
<li>Marca: {this.state.marca}</li>
<li>Modelo: {this.state.modelo}</li>
<li>Cor: {this.state.cor}</li>
<li>Ano: {this.state.ano}</li>
</ul>
</div>
);
}
}

document.getElementById(‘root’));
root.render(<Carro />);
</script>
</body>
Neste exemplo, criamos uma classe “Carro”, que estende a classe React.
Component. O método constructor(props) é utilizado para inicializar o estado
interno do componente (state) com as propriedades (props).
O método render() é o responsável pela estrutura HTML do componente, que

se utiliza das propriedades armazenadas em this.state para exibir as caracte-
rísticas do carro. Observe que o uso do state pode ser bastante útil quando
precisamos armazenar e manipular dados recebidos de props ao longo da vida
do componente.
Apesar de ser opcional, o uso do JSX, em React, é altamente recomendado, pois

torna a escrita e manutenção de código muito mais fácil e eficiente, já que utiliza
marcação HTML, CSS e JavaScript em um único arquivo.
Além da simplicidade da sintaxe, outras vantagens da utilização do JSX são:
• Renderização eficiente: permite que o React faça atualizações de forma

mais rápida e eficiente do que outras abordagens de renderização;
20
• Validação de sintaxe: como é compilado para JavaScript, o JSX é vali-
dado pela sintaxe do JavaScript, evitando erros comuns de digitação e
garantindo que o código esteja correto antes de ser executado;
• Facilidade de integração com outras bibliotecas: é compatível com

outras bibliotecas JavaScript, como jQuery e Bootstrap, facilitando a inte-
gração do React com outras ferramentas e tecnologias;
• Prevenção de ataques de injeção de código: possui recursos integra-

dos de segurança que garantem que os dados sejam exibidos como tex-
to, e não como código executável.
Em Síntese
O JSX é uma extensão da sintaxe do JavaScript que permite es-
crever componentes React de forma mais expressiva, uma vez
que permite a mistura de JavaScript e HTML em um único ar-
quivo. Porém, lembre-se que o JSX precisa ser convertido em
JavaScript puro (transpilado) antes de ser executado, já que não
é uma sintaxe reconhecida pelo navegador ou pelo interpreta-
dor JavaScript padrão.
21
Sites
React – Uma Biblioteca JavaScript para Criar Interfaces de Usuário

Visite e explore a página oficial do React e aprofunde seus estudos.
https://bit.ly/4872GTH
W3Schools – React
https://bit.ly/3Z9MJIx
React Native
Crie aplicativos nativos para Android, iOS e muito mais usando o React.
https://bit.ly/3PgUNmb
Leituras
O que é Babeljs
Saiba mais sobre a importância do Babeljs para o JavaScript moderno.
https://bit.ly/461fzxr
Books, 2014.
MDN WEB DOCS. Começando com React. [s.d.]. Disponível em: < h t t p s : / / d e v e l o p e r .
m o z i l l a . o r g / p t - B R / d o c s / L e a r n / T o o l s _a n d _ t e s t i n g / C l i e n t - s i d e _ J a v a S c r i p t _ f r a m e
w o r k s / R e a c t _ g e t t i n g _ s t a r t e d >. Acesso em: 01/07/2023.
SILVA, M. S. React: Aprenda praticando. São Paulo: Novatec, 2022.
STEFANOV, S. Primeiros passos com React: construindo aplicações web. São Paulo:
Novatec, 2016.

11 - Programação WEB

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

11 - Programação WEB

Enviado por

Direitos autorais:

Formatos disponíveis

Conceitos do HTML

• Apresentar os vários recursos disponíveis com a nova versão do HTML;

• Compreender alguns itens que serão de extrema importância para ini-

Atenção, estudante! Aqui, reforçamos o acesso ao conteúdo on-line

Figura 1 – Ambiente cliente/servidor

O que precisamos saber:

• Um esquema uniforme de atribuição de nomes, de forma a se localizar

• Protocolos, para o acesso aos recursos nomeados através da Web (ex.:

Os laços entre os três mecanismos evidenciam-se através desta especificação.

Introdução aos URIs

Os URIs são de uma forma geral constituídos por três partes:

• O esquema de nomeação do mecanismo usado para se ter acesso ao

• O nome da máquina de hospedagem desse recurso;

• O nome do próprio recurso, atribuído na qualidade de trajeto (path).

• Página destinada a relatórios técnicos da W3C: h t t p : / / w w w . w 3 . o r g

• URI referente a caixa postal: <a href=mailto:alexander_gobbato@

No HTML, os URIs são usados para:

• Fazer uma ligação a um outro documento ou recurso, (ver os elementos

• Incluir uma imagem, objeto ou applet numa página, (ver os elementos

• Criar um mapa de imagens (ver os elementos MAP e AREA);

• Submeter um formulário (ver FORM);

• Criar um documento com molduras (ver os elementos FRAME e IFRAME);

• Citar uma referência externa (ver os elementos Q, BLOCKQUOTE, INS e

• Fazer referências a convenções de metadados descrevendo um docu-

O HTML dá aos autores a possibilidade de:

• Publicar documentos online contendo cabeçalhos, texto, quadros e tabe-

• Recuperar ou retirar informações online, por intermédio de ligações de

• Concepção de formulários para efetuar transações com serviços remo-

A especificação do HTML 5 teve início em 2008 e ainda está em desenvolvimento

Quando abrimos uma página HTML em um navegador, o navegador irá interpre-

Um problema comum no desenvolvimento de páginas HTML desde o seu surgi-

• Webkit (é o mais compatível com HTML 5) – Safari, Chrome;

• Trident – Internet Explorer.

HTML Markup Tag

Geralmente em pares como <b> e </b>.

A primeira tag do par é a tag inicial e a segunda tag a tag final.

• Tags HTML não são case sensitive;

• Tags HTML quase sempre vêm em pares.

Figura 3 – Exemplo de código HTML

• Texto entre <html> e </html> descreve a página web;

• O texto entre <body> e </body> é a informação visível na página;

• O texto entre <h1> e </h1> é exibido como cabeçalho;

• O texto entre <p> e </p> é exibido como parágrafo.

• HTML 4.01 Transitional DTD – adheres HTML 4.01 standards including

Já o Frameset, será para renderizar os arcaicos Frames.

Ele contém outros elementos como:

• <head> </head> tags;

O elemento <title> fornece o título do documento que aparece o topo do browser.

O elemento <body> contém todas as informações do documento, ele vem de-

• BACKGROUND: permite que você especifique um arquivo gráfico para

• Fornece um localizador de recursos uniforme (URL) de uma pasta de

• VLINK: permite que você especifique a cor na qual visitou;

• ALINK: permite que você especifique a cor enquanto os usuários clicam

Vejamos alguns elementos HTML.

O atributo mais importante do elemento é o atributo href, que indica o destino

Figura 4 – Exemplo de uso da tag <a> com uso do atributo href

• <ol> – lista ordenada;

• <li> – item de lista.

Figura 6 – Estrutura HTML para criação de listas

Um campo de entrada pode variar de muitas formas, dependendo do tipo de

Figura 7 – Estrutura HTML com uso da tag <input>

Entidade Caracter Entidade Caracter

Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML

Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de