Desenvolvimento Web Front-End

Prévia do material em texto

1
DESENVOLVIMENTO 
WEB FRONT-END
Prof. Me. João Victor da Silva Alves
2
DESENVOLVIMENTO WEB FRONT-END
PROF. ME. JOÃO VICTOR DA SILVA ALVES
3
 Diretor Geral: Prof. Esp. Valdir Henrique Valério
 Diretor Executivo: Prof. Dr. William José Ferreira
 Ger. do Núcleo de Educação a Distância: Profa Esp. Cristiane Lelis dos Santos
Coord. Pedag. da Equipe Multidisciplinar: Profa. Esp. Gilvânia Barcelos Dias Teixeira
 Revisão Gramatical e Ortográfica: Profa. Me. Renata Ribeiro F. Fusilli
 Revisão Técnica: Profª. Drª. Suelen Martins
 Revisão/Diagramação/Estruturação: Clarice Virgilio Gomes
 Fernanda Cristine Barbosa
 Prof. Esp. Guilherme Prado
 
 Design: Bárbara Carla Amorim O. Silva 
 Daniel Guadalupe Reis
 Élen Cristina Teixeira Oliveira 
 Maria Eliza P. Campos
 Victor L. dos Reis Lopes 
© 2022, Faculdade Única.
 
Este livro ou parte dele não podem ser reproduzidos por qualquer meio sem Autoriza-
ção escrita do Editor.
Ficha catalográfica elaborada pela bibliotecária Melina Lacerda Vaz CRB – 6/2920.
4
PRÁTICAS DE ENSINO DE LÍNGUA 
PORTUGUESA 
1° edição
Ipatinga, MG
Faculdade Única
2022
5
Doutorando do Programa de Pós-Graduação 
em Ciência da Computação (PPGCO) na 
FACOM/UFU. Mestre em Gestão Organizacional 
pela Faculdade de Gestão e Negócios (FAGEN) 
da Universidade Federal de Uberlândia (UFU). 
Especialista em Administração Pública pela 
Universidade Candido Mendes (UCAM). 
Especialista em Gestão em Tecnologia da 
Informação pela Faculdade Única de Ipatinga. 
Bacharel em Sistemas de Informação pela 
Universidade Federal de Uberlândia (UFU). Tem 
ampla experiência na área de Informática, com 
ênfase em ambientes virtuais de aprendizagem 
(AVA's), atuando principalmente no suporte a 
cursos EAD e tecnologia da informação. É servidor 
público na UFU, ocupando o cargo de Analista 
de Tecnologia da Informação na Faculdade 
de Computação (FACOM). Possui ampla 
experiência como tutor presencial e a distância 
de cursos de Graduação, Pós-graduação, 
Aperfeiçoamento e Extensão. Também tem 
atuado como Professor Conteudista de cursos 
EaD em várias Instituições de Ensino Superior 
(IES).
JOÃO VICTOR DA SILVA ALVES
Para saber mais sobre a autora desta obra e suas qualificações, 
acesse seu Curriculo Lattes pelo link :
http://lattes.cnpq.br/8045357358577883
Ou aponte uma câmera para o QRCODE ao lado.
6
LEGENDA DE
Ícones
Trata-se dos conceitos, definições e informações importantes nas 
quais você precisa ficar atento.
Com o intuito de facilitar o seu estudo e uma melhor compreensão do 
conteúdo aplicado ao longo do livro didático, você irá encontrar ícones 
ao lado dos textos. Eles são para chamar a sua atenção para determinado 
trecho do conteúdo, cada um com uma função específica, mostradas a 
seguir:
São opções de links de vídeos, artigos, sites ou livros da biblioteca 
virtual, relacionados ao conteúdo apresentado no livro.
Espaço para reflexão sobre questões citadas em cada unidade, 
associando-os a suas ações.
Atividades de multipla escolha para ajudar na fixação dos 
conteúdos abordados no livro.
Apresentação dos significados de um determinado termo ou 
palavras mostradas no decorrer do livro.
 
 
 
FIQUE ATENTO
BUSQUE POR MAIS
VAMOS PENSAR?
FIXANDO O CONTEÚDO
GLOSSÁRIO
7
UNIDADE 1
UNIDADE 2
SUMÁRIO
1.1 Fundamentos e elementos básicos da linguagem ...............................................................................................................................................................................................10
1.2 Sintaxe ...................................................................................................................................................................................................................................................................................................11
1.3 Tipos de dados , variáveis e operadores ........................................................................................................................................................................................................................15
1.4 Criando o primeiro script ........................................................................................................................................................................................................................................................15
FIXANDO O CONTEÚDO ................................................................................................................................................................................................................................................................18
2.1 Funções ...............................................................................................................................................................................................................................................................................................21
2.2 Vetores ................................................................................................................................................................................................................................................................................................23
2.3 Objetos ..............................................................................................................................................................................................................................................................................................24
2.4 Exemplos ..........................................................................................................................................................................................................................................................................................25
FIXANDO O CONTEÚDO ...............................................................................................................................................................................................................................................................30
A LINGUAGEM JAVASCRIPT
EXPRESSÕES E COMANDOS
UNIDADE 3
3.1 Estruturas de Repetição ..........................................................................................................................................................................................................................................................33
3.2 Estruturas de Sequência .......................................................................................................................................................................................................................................................35
3.3 Exemplos ..........................................................................................................................................................................................................................................................................................37
FIXANDO O CONTEÚDO ...............................................................................................................................................................................................................................................................43
ESTRUTURAS DE CONTROLE DE FLUXO
UNIDADE 4
4.1 Introdução ao DOM ...................................................................................................................................................................................................................................................................47
4.2 Eventos DOM ................................................................................................................................................................................................................................................................................484.3 Exemplos ...........................................................................................................................................................................................................................................................................................51
FIXANDO O CONTEÚDO ................................................................................................................................................................................................................................................................55
DOCUMENT OBJECT MODEL (DOM)
5.1 Objetos, Atributos e Métodos ..............................................................................................................................................................................................................................................58
5.2 Getters/Setters ..............................................................................................................................................................................................................................................................................58
5.3 Classes ................................................................................................................................................................................................................................................................................................59
5.4 Herança ..............................................................................................................................................................................................................................................................................................61
FIXANDO O CONTEÚDO ...............................................................................................................................................................................................................................................................63
JAVASCRIPT ORIENTADA A OBJETOS
UNIDADE 5
6.1 Angular ...............................................................................................................................................................................................................................................................................................66
6.2 Vue ........................................................................................................................................................................................................................................................................................................69
6.3 React ....................................................................................................................................................................................................................................................................................................71
6.4 Exemplo de projeto com React .........................................................................................................................................................................................................................................71
FIXANDO O CONTEÚDO ................................................................................................................................................................................................................................................................73
RESPOSTAS DO FIXANDO O CONTEÚDO ......................................................................................................................................................................................................................75
REFERÊNCIAS ......................................................................................................................................................................................................................................................................................76
FRAMEWORKS FRONT-END PARA DESENVOLVIMENTO WEB
UNIDADE 6
8
O
N
FI
R
A
 N
O
 L
I
C
V
R
O
UNIDADE 1
A unidade I apresenta a linguagem JavaScript, destacando seus fundamentos e 
elementos básicos. São enfatizados a sintaxe, os tipos de dados, variáveis e operadores, 
bem como a criação do primeiro script utilizando a linguagem.
UNIDADE 2
A unidade II explora as expressões e comandos da linguagem JavaScript. Nesse 
sentido, são apresentadas as funções, os vetores e a criação e utilização de objetos.
UNIDADE 3
O foco da unidade III são as estruturas de controle de fluxo do JavaScript. As estruturas 
de repetição e de sequência são apresentadas e definidas através de exemplos 
práticos na linguagem.
UNIDADE 4
A unidade IV explora o Document Object Model (DOM), um conceito fundamental em 
JavaScript. São enfatizados os eventos do DOM e sua utilização no desenvolvimento 
front-end atual através de exemplos práticos.
UNIDADE 5
A unidade V apresenta a utilização da linguagem JavaScript com o conhecido 
paradigma orientado a objetos. São definidos os conceitos de objetos, atributos, 
métodos e classes. São apresentados os métodos básicos getters e setters, bem 
como a definição de herança.
UNIDADE 6
A unidade VI enfatiza a utilização de frameworks front-end no desenvolvimento web 
moderno. O foco é dado ao React com um projeto básico utilizando a ferramenta. Os 
frameworks Angular e Vue também são apresentados.
9
A LINGUAGEM 
JAVASCRIPT
10
 O desenvolvimento de conteúdo para a web avançou significativamente 
em termos de interatividade e sofisticação. Sites compostos por páginas estáticas 
não são mais suficientes para gerar a interação que os usuários tanto necessitam. 
Assim, a necessidade de construção de conteúdo dinâmico se tornou uma realidade 
preponderante para os profissionais de webdesign, exigindo constante atualização e 
reciclagem nas metodologias de desenvolvimento desses atores.
 Nesse cenário, surgiram linguagens de programação robustas e ricas em 
componentes que adicionam interatividade e dinamismo às páginas web. Dentre elas, 
sem dúvida, JavaScript se destaca. Sua grande capacidade de adicionar componentes 
de interação com o usuário e conteúdo dinâmico aos componentes dos sites modernos, 
atraiu fortemente a atenção dos webdesigners (ZANETTI, 2020).
 JavaScript “é a linguagem de programação da Web”, sendo usada pela maioria 
dos sites e portais modernos (FLANAGAN, 2013, p. 18). Ademais, quase a totalidade dos 
navegadores de internet atuais implementam e suportam JavaScript. Em conjunto com 
HTML e CSS, JavaScript forma a tríade que todo desenvolvedor web contemporâneo 
precisa conhecer e dominar muito bem (FLANAGAN, 2013). Mais especificamente, 
na presente data, o cerne do desenvolvimento web se concentra no HTML5, CSS3 e 
JavaScript.
 JavaScript é uma linguagem de programação de “alto nível, dinâmica, interpretada 
e não tipada” (FLANAGAN, 2013, p. 18). Ser interpretada significa que não precisa passar 
por rotinas de compilação e depuração, como Java e C, por exemplo. Ser não tipada 
significa que JavaScript “não apresenta tipos de dados, isto é, qualquer variável definida 
é do tipo variante”. Assim, “o tipo de dados é definido de acordo com a informação 
armazenada naquele momento”, podendo ser também “modificado ao longo da 
execução da aplicação, conforme seu conteúdo é alterado” (ZANETTI, 2020, p. 45). Na 
seção destinada a variáveis e tipos de dados, isso será melhor explicado.
 A sintaxe de JavaScript deriva da linguagem Java, o que contribuiu fortemente 
para o surgimento do seu nome. Porém, JavaScript se diferencia muito de Java, tanto 
estruturalmente quanto em diversos outros aspectos.
 De fato, JavaScript não nasceu com esse nome. A linguagem foi registrada como 
ECMAScript pela extinta Netscape. No entanto, o nome JavaScript se popularizou entre 
os desenvolvedores, de modo que é raro se referirem à linguagem como ECMAScript,seu nome técnico real. ECMAScript já está na versão ECMA-262 de junho de 2022.
1.1 FUNDAMENTOS E ELEMENTOS BÁSICOS DA LINGUAGEM1.1 FUNDAMENTOS E ELEMENTOS BÁSICOS DA LINGUAGEM
 É importante salientar que o foco aqui é o desenvolvimento web com 
JavaScript no contexto front-end, ou seja, no contexto da construção de conteúdo 
que é apresentado aos usuários dos navegadores de internet. Dessa forma, a ênfase é 
Conheça a história dos nomes e versões da linguagem JavaScript no quadro que 
aparece na página 19 do livro JavaScript: o guia definitivo de David Flanagan, 
disponível na Minha Biblioteca Única. Disponível em: https://bit.ly/400WEjn.
Acesso 24 jan 2023
BUSQUE POR MAIS
11
1.2 SINTAXE1.2 SINTAXE
 O primeiro passo para o aprendizado de qualquer linguagem de programação é 
compreender sua sintaxe. Nesse sentido, a sintaxe “nada mais é do que um conjunto 
de regras elementares que determinam o modo de escrever programas” na linguagem 
escolhida (SEGURADO, 2016, p. 67). A sintaxe da linguagem determina regras para nomes 
de variáveis, comandos e instruções, estruturas de blocos, fluxos, comentários etc.
 Em JavaScript os programas são escritos em praticamente qualquer idioma, pois 
a linguagem utiliza o conjunto de caracteres Unicode (SEGURADO, 2016). Uma regra 
importante diz que a linguagem é case sensitive, isto é, diferencia letras minúsculas 
de maiúsculas. Isso significa que, por exemplo, o nome de variável soma é diferente de 
Soma ou SOMA. Assim, é importante o desenvolvedor utilizar um padrão ao criar seus 
programas, não misturando estilos diferentes de caracteres.
 Via de regra, o desenvolvedor pode utilizar livremente espaços em branco, 
tabulação e saltos de linha. Porém, é importante citar que os programadores de uma 
determinada linguagem procuram padronizar o estilo do código, a fim de gerar mais 
clareza e legibilidade para fins de estudo e reutilização de código.
 Como parte do aprendizado da sintaxe, agora é fundamental entender as regras 
de JavaScript para a declaração e uso de tipos de dados, variáveis e operadores. As seções 
seguintes detalham esses assuntos.
As convenções de codificação da linguagem JavaScript podem ser estudadas 
no site w3schools. Disponível em: https://bit.ly/3Deg22F.Acesso 24 jan 2023
BUSQUE POR MAIS
dada aos componentes de JavaScript que proporcionam dinamismo às páginas web e 
interatividade do “lado do cliente”, isto é, dos utilizadores dos navegadores web.
 Outro ponto fundamental a se destacar é que, no aprendizado de qualquer 
linguagem de programação, a prática é essencial. Não se aprende uma nova linguagem 
computacional apenas lendo a teoria e observando os códigos fornecidos como 
exemplos. Aprender a desenvolver com JavaScript não foge a essa regra. Assim, teste 
os exemplos, modifique-os e teste novamente. Visto que a maioria dos navegadores de 
internet modernos já implementam JavaScript, para praticar os exemplos apresentados 
aqui você precisará apenas de um navegador atual de sua preferência e de um editor de 
textos.
1.3 TIPOS DE DADOS, VARIÁVEIS E OPERADORES1.3 TIPOS DE DADOS, VARIÁVEIS E OPERADORES
 Assim como toda linguagem de programação, JavaScript define um conjunto de 
tipos de dados e regras a serem seguidas na sua utilização. Porém, antes de adentrar 
nesse assunto, é importante definir a utilização de comentários nos códigos escritos 
em JavaScript. Semelhante à maioria das linguagens computacionais, dois estilos de 
12
comentários são aceitos em JavaScript:
 1. Comentário em uma única linha: começa com //
 2. Comentário de bloco, ou seja, de mais de uma linha: o texto deve estar entre os 
caracteres /* e */
 Uma vez identificados no código, os comentários são automaticamente ignorados, 
ou seja, não são considerados pelo interpretador JavaScript como instruções a serem 
computadas. Veja exemplos de comentários em JavaScript a seguir:
 // Aqui está um comentário simples, de apenas uma linha.
 /* Aqui é possível observar o comentário múltiplo, isto é, de mais de uma linha.
 Nessa linha, ainda continua o comentário de bloco.
 Agora o comentário no código finaliza com o fechamento do bloco.
 */
 Comentários são muito úteis e fortemente recomendados durante a codificação 
em qualquer linguagem de programação. Eles são muito úteis para explicar o programa 
e identificar as intenções e lógica de programação usadas pelo desenvolvedor do 
mesmo. São muito mais úteis ainda quando o projeto envolve vários desenvolvedores, 
onde cada um é responsável por parte do código e funcionalidades separadas. Os 
comentários ajudarão o time a entender o que está sendo feito, o que já foi feito e o 
que ainda precisa ser implementado. Os comentários serão muito úteis também para o 
próprio programador quando precisar voltar a um programa depois de decorrido algum 
tempo.
 Durante os exemplos mostrados nas unidades deste livro, os comentários serão 
utilizados para explicar as instruções presentes nos códigos, de modo a facilitar o seu 
aprendizado. Assim, é importante se atentar aos comentários, tanto de linha única 
quanto de bloco.
 Isto posto, é importante agora definir os tipos de dados de JavaScript. Conforme 
citado por Flanagan (2013, p. 46), “uma das características mais fundamentais de uma 
linguagem de programação é o conjunto de tipos que ela aceita”.
 JavaScript possui duas categorias de tipos de dados: primitivos e de objeto. Na 
categoria dos tipos primitivos aparecem os números, os textos (cadeias de caracteres 
chamadas de strings) e valores booleanos (verdadeiro ou falso). Os tipos de dados da 
categoria objeto serão detalhados na seção sobre JavaScript orientada a objetos.
 As informações manipuladas pelos programas precisam, de alguma maneira, 
ser mantidas e armazenadas. Para isso, são utilizadas as variáveis. Uma variável “define 
um nome simbólico para um valor e permite que o valor seja referido pelo nome” 
(FLANAGAN, 2013, p. 46). Nesse sentido, uma variavél declarada no código em JavaScript 
assumirá o tipo de dado interpretado dinamicamente pela linguagem, caso não seja 
explicitado diretamente pelo programador. Essa característica faz JavaScript ser definida 
como uma linguagem de tipagem dinâmica ou, também, de tipagem fraca. O quadro a 
seguir, apresenta os 7 tipos de dados primitivos definidos na última versão da linguagem 
JavaScript (ECMAScript 2022).
Tipo Exemplo
number let a = 15; // o número inteiro quinze
let b = 1.5; // o número real um ponto cinco
let pi = 3.14; // o número real três ponto quatorze
boolean let andar = True; // valor verdadeiro
let correr = False; // valor falso
13
string let p = “JavaScript”; // uma palavra simples
let f = “ECMAScript versão 2022”; // uma frase
bigint let num = 8901234567890n; // para números muito grandes
null let n = null; //Indica um objeto vazio, nulo, ainda sem referência
undefined let n; // a variável foi declarada mas não foi inicializada
symbol let s = Symbol(“chave”); // usado geralmente para armazenar um valor único
Quadro 1: Tipos de dados primitivos em JavaScript
Fonte: Elaborado pelo autor (2022).
Quadro 2: Palavras reservadas do JavaScript
Fonte: Segurado (2016, p. 69).
 Do Quadro 1 é possível obter muitas informações acerca de tipos de dados e 
variáveis em JavaScript:
 ● A palavra reservada let é utilizada na declaração de uma variável. É possível 
também declarar variáveis com a palavra reservada var, porém, é menos 
recomendado (MDN, 2022);
 ● O sinal de = é utilizado para atribuir um valor a uma determinada variável;
 ● Toda instrução em JavaScript deve terminar com ; (ponto e vírgula), inclusive 
declarações de variáveis. Embora essa não seja uma regra rígida, é fortemente 
recomendado que seja seguida, pois é considerada uma boa prática de 
codificação pelos grupos de desenvolvedores em JavaScript, além de evitar 
possíveis efeitos colaterais no fluxo do código.
 A lista completa das palavras reservadas pelo JavaScript pode ser vista na página 
24 de Flanagan (2013).Ademais, em JavaScript o desenvolvedor é livre para utilizar qualquer nome ou 
rótulo para uma variável, atentando às seguintes restrições, conforme citado em MDN 
(2022):
 Outro ponto muito importante visto no Quadro 1 é que JavaScript possui 
várias palavras especiais reservadas. Essas não podem ser utilizadas livremente pelos 
desenvolvedores. Além das palavras reservadas mostradas no Quadro 1, o Quadro 2 
sintetiza a maioria dos identificadores reservados pela linguagem:
break delete function return typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try
AVeja a diferença entre var e let no site MDN. Disponível em: https://mzl.
la/3iVoi0Q.Acesso 24 jan 2023
BUSQUE POR MAIS
14
 ● Evite o uso do caractere underline no início dos nomes de variáveis. JavaScript 
utiliza esse caractere nos nomes de alguns construtores da linguagem. 
Falaremos de construtores na seção relativa à orientação a objetos;
 ● Não utilize números no início dos nomes de variáveis. Isso gerará erros 
quando o interpretador JavaScript tentar executar seu código;
 ● Utilize nomes intuitivos para suas variáveis, de modo a descrever bem qual o 
objetivo delas. Isso ajuda muito quem for estudar seu código;
 ● Como dito, anteriormente, JavaScript é case sensitive. Assim, cuidado ao criar 
nomes de variáveis utilizando caracteres maiúsculos e minúsculos;
 ● Não utilize palavras reservadas da linguagem como nomes de variáveis. Isso 
também gerará erros na execução dos seus scripts.
 Por fim, antes de vermos exemplos práticos utilizando os conceitos vistos até aqui, é 
importante falar sobre os operadores matemáticos definidos pela linguagem JavaScript. 
Tais operadores são muito semelhantes aos das principais linguagens modernas mais 
utilizadas atualmente, como Java, PHP, C++ e outras.
 JavaScript define operadores de atribuição, aritméticos, relacionais e lógicos. O 
Quadro 3 apresenta os mais utilizados:
Grupo Operador Descrição
Atribuição = Atribuição simples.
+= Atribuição de adição
-= Atribuição de subtração
*= Atribuição de multiplicação
/= Atribuição de divisão
%= Atribuição de resto
**= Atribuição de exponenciação
Relacional == Igual
=== Exatamente igual (conteúdo e tipo de dado)
!= Diferente
!== Exatamente diferente (conteúdo e tipo de dado)
< Menor
<= Menor ou igual
> Maior
>= Maior ou igual
Aritméticos + Adição
- Subtração
* Multiplicação
/ Divisão
% Resto da divisão
** Exponenciação
++ Incremento
-- Decremento
15
1.4 CRIANDO O PRIMEIRO SCRIPT1.4 CRIANDO O PRIMEIRO SCRIPT
 Para implementar código em JavaScript, basta a utilização de um editor de 
textos simples como, por exemplo, o Notepad do sistema operacional Windows. No 
entanto, é fortemente recomendada a utilização de uma IDE (Integrated Development 
Environment), ou seja, um ambiente de desenvolvimento integrado. Tais ambientes 
disponibilizam conjuntos de ferramentas muito úteis para a criação, edição e testes de 
códigos em diversas linguagens. Essas ferramentas proporcionam maior agilidade para os 
desenvolvedores, evitando retrabalho e a repetição exaustiva de rotinas e procedimentos 
comuns na implementação da linguagem escolhida. Ademais, essas IDEs contam com 
modelos e templates prontos para a rápida utilização do programador, poupando 
bastante tempo na codificação do projeto em questão. Além disso, esses ambientes 
são altamente customizáveis, ou seja, podem ser organizados particularmente pelo 
desenvolvedor com as principais ferramentas que ele utiliza no seu cotidiano.
 Há várias IDEs robustas e completas disponíveis atualmente. Dentre as mais 
utilizadas, podemos citar o Visual Studio Code (VSCode), Atom, Sublime e Brackets. Todas 
são eficientes e proporcionam benefícios perceptíveis na implementação de códigos 
em diversas linguagens de programação. Nos programas criados neste livro foi utilizado 
o VSCode sob o sistema operacional Windows.
 Agora, veja abaixo exemplos de utilização de alguns dos operadores elencados no 
Quadro 3. No momento apropriado iremos criar scripts contendo diversos deles:
var x = 10; // variável x foi criada e recebeu o valor inteiro 10.
x += 5; // equivalente a x = x + 5. Assim, x armazena agora 15.
var y = x ** 3; // variável y é criada e recebe 15 elevado a 3. Assim, y = 3375.
X++; // equivalente a x = x + 1. Assim, x agora é igual a 16.
 Observe agora exemplos de uso de operadores relacionais, cujos resultados são 
sempre true (verdadeiro) ou false (falso):
var x = 5; // variável x foi criada e recebeu o valor inteiro 5.
 var y = 10; // variável y foi criada e recebeu o valor inteiro 10.
 var z = x == y; // z recebe false, pois x não é igual a y.
 var w = x != y; // w recebe true, pois x é diferente de y.
 Os operadores lógicos são muito utilizados em blocos de estruturas de controle, 
principalmente, para testarem condições. Mais adiante iremos ver exemplos na 
implementação de scripts reais.
Lógicos && E (AND)
OU (OR)
Quadro 3: Principais operadores de JavaScript
Fonte: Zanetti (2020, p. 51).
A linguagem JavaScript não diferencia valores inteiros de valores decimais. Assim, todos os 
números são representados na forma de ponto flutuante (decimal) de 64 bits. Dessa forma, 
mesmo que o programador atribua um valor inteiro a uma variável, internamente ela é 
armazenada na representação decimal.
FIQUE ATENTO
16
 Assim, abra o seu editor ou IDE de preferência e digite o código mostrado na Figura 
1:
 Ao finalizar, salve o arquivo num local de sua preferência com a extensão .html. A 
escolha do nome do arquivo é livre. Porém, escolha um nome que ajude na identificação 
dele como, por exemplo, teste1.html. Antes de executar o script criado, analisemos o 
código brevemente.
 Primeiro, observe como uma IDE beneficia a codificação para o desenvolvedor. A 
maioria delas, senão todas, mostram os números das linhas, para que o programador 
localize facilmente uma instrução, principalmente em casos de mensagens de erros. Note 
também a indentação automática gerada ao se inserir o código. Indentação se refere 
à técnica de utilização de tabulações para ajudar visualmente a definir a estrutura do 
código. Visualmente isso é muito útil para se localizar comandos e blocos de instruções. 
Outro ponto interessante é a coloração das tags HTML e de instruções da linguagem 
JavaScript. Como citado, anteriormente, essas opções são altamente configuráveis nas 
IDEs disponíveis hoje.
 Em relação ao código fonte mostrado na Figura 1, se atente ao seguinte:
 ● O código JavaScript é inserido diretamente na página HTML através da tag 
<script>. Tudo que estiver dentro dela será interpretado pelo motor JavaScript 
como código da linguagem até o fechamento com </script>;
 ● Os comentários ajudam muito no entendimento do que o programa realiza 
de fato. No exemplo foram utilizados apenas comentários de uma única linha;
 ● Alguns operadores foram utilizados. Na linha 13 usamos o operador atribuição 
de soma (+=) e na linha 14 o operador aritmético resto da divisão (%), também 
conhecido como módulo;
 ● As instruções das linhas 16 a 19 utilizam o método write do objeto document 
para enviar conteúdo para o navegador. Não se preocupe ainda em saber o 
Figura 1: Primeiro programa em JavaScript
Fonte: Elaborado pelo autor. (2022)
17
Figura 2: Primeiro programa em JavaScript
Fonte: Elaborado pelo autor. (2022)
que é um método e um objeto. Esse assunto será abordado na Unidade 5;
 ● Por fim, observe que o conteúdo é enviado para o navegador como string, 
ou seja, cadeias de caracteres entre aspas duplas. Aspas simples também 
podem ser utilizadas na criação e manipulação de strings. Note a utilização 
do operador + com strings. Seu objetivo é realizar a concatenação (junção) 
de conteúdo do tipo string.
 À medida que você for praticando os programas exemplos deste livro, sua 
familiaridade com JavaScript melhorará muito. Conforme mencionado, anteriormente, 
a prática é essencial no aprendizado deuma nova linguagem de programação.
 Para ver o resultado do script criado no navegador, localize-o e dê dois cliques 
para que seja aberto por um navegador instalado em seu computador. Os navegadores 
mais atuais não terão problemas ao abrir o arquivo criado e executar o código JavaScript 
inserido nele. Por isso, sempre utilize a versão mais atualizada do seu navegador de 
internet.
 Ao executar o arquivo, o resultado exibido no navegador será semelhante ao 
mostrado na Figura 2:
 O navegador renderiza o código JavaScript e apresenta o conteúdo. Note que as 
variáveis x e y exibem seus conteúdos armazenados após os cálculos realizados pelo 
interpretador. As tags HTML de cabeçalhos h1 e h2 presentes nas linhas 16 e 19 são 
corretamente estilizadas no documento exibido.
 O primeiro script é o pontapé inicial no seu desenvolvimento como programador 
com JavaScript. Nas unidades seguintes avançaremos no aprendizado da linguagem 
através de exemplos que inserem muito mais interatividade e conteúdo dinâmico.
VAMOS PENSAR?
A utilização de IDEs no desenvolvimento de software otimiza o tempo de trabalho do 
programador e do time de programação. Por que? Isso é vantajoso?
18
1. JavaScript é considerada uma linguagem de programação não tipada ou fracamente 
tipada porque:
a) Não possui tipos de dados definidos.
b) Define apenas tipos de dados primitivos.
c) Não necessita que o tipo de dado de uma variável seja previamente definido.
d) Define apenas tipos de dados que operam sobre objetos.
e) Exige que o programador declare explicitamente o tipo de dado no momento da 
criação da variável.
2. O nome oficial registrado da linguagem JavaScript é:
a) JScript
b) Fortran
c) EnvScript
d) ECMAScript
e) Java
3. Os valores true e false em JavaScript pertencem ao tipo de dados:
a) String
b) Booleano
c) Inteiro
d) Symbol
e) BigInt
4. (TRE/SE - adaptada) Em JavaScript, o operador representado por três sinais (===) de 
igual consecutivos retorna true se os operandos envolvidos forem:
a) Iguais e do mesmo tipo.
b) Iguais e do tipo numérico, apenas.
c) Iguais, mas não do mesmo tipo.
d) Diferentes e de tipos diferentes.
e) Diferentes, mas do mesmo tipo.
5. A linguagem JavaScript é case sensitive. Isso significa que:
a) Não diferencia letras minúsculas e maiúsculas.
b) Diferencia letras minúsculas e maiúsculas.
c) Não permite que nomes de variáveis comecem com letras maiúsculas.
d) Permite que nomes de variáveis comecem somente com letras minúsculas.
e) Nomes de variáveis devem sempre começar com números.
FIXANDO O CONTEÚDO
19
6. Em JavaScript, considere o operador aritmético %. A instrução x % y devolve:
a) A divisão percentual de x por y.
b) A exponenciação de x por y.
c) O teste de igualdade entre x e y.
d) A divisão simples de x por y.
e) O resto da divisão de x por y.
7. Das opções abaixo, marque a que contém uma palavra reservada em JavaScript:
a) DevOps
b) Continuous
c) React
d) Framework
e) Break
8. Em JavaScript, a instrução document.write(“texto”) resulta na:
a) Finalização do programa pelo interpretador JavaScript.
b) Escrita de uma mensagem de erro pelo interpretador JavaScript.
c) Escrita da string “texto” (sem aspas) na área de trabalho do navegador de internet.
d) Escrita de uma linha em branco na área de trabalho do navegador de internet.
e) Solicitação de entrada de texto via teclado pelo usuário do navegador de internet.
20
EXPRESSÕES E 
COMANDOS
21
Uma função, também chamada subrotina ou procedimento, “é um bloco de código 
definido uma vez, mas que pode ser executado (ou chamado) qualquer número de 
vezes” (FLANAGAN, 2013, p. 158). Uma função pode ser parametrizada ou não. No primeiro 
caso, significa que a função foi definida com uma lista de argumentos ou parâmetros, 
de modo que eles são necessários para o seu funcionamento. No segundo caso, a função 
dispensa parâmetros e, na sua definição, a lista de argumentos é vazia.
 Funções são extremamente úteis em JavaScript e em qualquer linguagem 
de programação. São necessárias quando o programador identifica uma tarefa que, 
geralmente, precisa ser realizada sistematicamente, várias vezes. Nesse sentido, uma 
função bem projetada deve realizar uma tarefa única e retornar um valor de retorno ou 
não.
2.1 AS CONCEPÇÕES DE LINGUAGEM2.1 AS CONCEPÇÕES DE LINGUAGEM
Uma função que realiza várias tarefas não é uma função bem projetada. Nesse caso, 
considere “quebrá-la” e criar uma nova função para cada tarefa que ela realiza. Em 
programação, esse conceito é conhecido como “dividir para conquistar”.
FIQUE ATENTO
 Como exemplo, suponha que no seu projeto de desenvolvimento seja necessário 
sempre calcular o índice de massa corporal (IMC) de uma pessoa, dados os parâmetros 
obrigatórios de peso e altura. Ao invés de você sempre calcular esse valor cada vez que ele 
for necessário, a solução mais elegante e inteligente é automatizar esse procedimento 
com a criação de uma função. Assim, basta chamar a função passando os argumentos 
peso e altura da pessoa, cujo IMC precisa ser calculado e retornado naquele instante. 
Dessa forma, em JavaScript a assinatura da função ficaria assim:
function calculaIMC (kilos, altura) {
altura = altura/100;
return (kilos / (altura * altura));
}
 Note que JavaScript reserva a palavra-chave function para a definição de funções. 
Utilizando nossa função calculaIMC como exemplo, considere o seguinte:
 ● A função possui um nome identificador único. Através desse nome, a função 
pode ser chamada em qualquer parte do código. As regras para escolha dos 
nomes de funções em JavaScript seguem as mesmas regras para nomes 
de variáveis. Nesse sentido, observe bem o nome da nossa função. Ele é 
intuitivo e descreve bem a tarefa realizada por ela. É uma execelente prática 
de programação escolher bons identificadores para suas funções, pois isso, 
facilita muito a leitura do código e a manutenibilidade dele;
 ● A função calculaIMC necessita apenas de dois argumentos ou parâmetros: 
kilos e altura. Eles aparecem entre parenteses e separados por vírgula. Se 
não fosse necessário nenhum parâmetro, a lista deveria ser vazia, contendo 
apenas abre e fecha parênteses. Tais identificadores são variáveis locais da 
própria função;
 ● Toda função possui um par de chaves: uma para abrir a função e outra para 
fechá-la. Isso define muito bem o bloco da função, de modo a delimitar seu 
código estruturalmente e visualmente.
22
 Isto posto, é importante agora abordar um ponto muito importante: escopo de 
variáveis. Escopo define uma região de influência da variável num determinado código 
fonte a que pertence. Em JavaScript e na maioria das linguagens de programação, 
variáveis podem possuir escopo global ou local. No caso da função calculaIMC, as 
duas variáveis passadas como parâmetros são de escopo local. Isso significa que elas 
são visíveis apenas dentro da função, não podendo ser invocadas em outra parte do 
código. No entanto, se tivessem sido declaradas fora do corpo da função, seu escopo 
seria global, de modo que seriam visíveis e utilizáveis em qualquer parte do programa. 
É fundamental que o programador se atente a essa particularidade a fim de evitar erros 
devido ao comportamento indesejado de variáveis no seu código.
 JavaScript possui uma extensa lista de funções nativas disponíveis para uso 
imediato. Tais funções são muito úteis e possibilitam o reuso de código, facilitando 
o trabalho do desenvolvedor, que não precisa “recriar a roda”. Assim, basta chamar a 
função desejada passando seus argumentos necessários. O Quadro 4 apresenta uma 
lista com alguns exemplos de funções nativas do JavaScript muito úteis e utilizadas:
Função Descrição
parseFloat() Analisa o argumento e retorna um número de ponto flutuante.
parseInt() Analisa o argumento e retorna um número inteiro.
toString() Retorna a representação em string do valor passado.
concat() Faz a junção das strings passadas como argumentos.
length() Retorna o tamanho do array.
toUpperCase() Converte a string em letras maiúsculas.
toLowerCase()Converte a string em letras minúsculas.
reverse() Inverte a ordem de um array.
sort() Ordena os elementos de um array.
sqrt() Retorna a raiz quadrada de um número.
min() Retorna o menor número de uma lista numérica.
max() Retorna o maior número de uma lista numérica.
Quadro 4: Algumas funções nativas de JavaScript
Fonte: Elaborado pelo autor (2022).
 As funções mostradas no Quadro 4 são apenas uma fração da enorme quantidade 
disponibilizada por JavaScript. Não se preocupe ainda com as indicações de funções 
que trabalham com arrays (vetores) ou objetos. Esses assuntos serão abordados mais 
adiante.
Veja a lista completa de funções do JavaScript na documentação da linguagem. 
As funções são elencadas para cada tipo de dados. Disponível em: https://mzl.
la/3Haak3f. Acesso em 25 jan 2023
BUSQUE POR MAIS
23
Figura 3: Representação gráfica de um vetor com 12 elementos
Fonte: Deitel (2008).
 Vetores ou arrays (arranjos) são estruturas de dados simples muito úteis para a 
modelagem de vários problemas do cotidiano. Em JavaScript, o “objeto Array permite 
a definição de vetores cujos elementos podem ser acessados posteriormente por meio 
do respectivo índice” (ZANETTI, 2020, p. 64). Os elementos de um array podem ser de 
diversos tipos, inclusive objetos e outros arrays, permitindo “a criação de estruturas de 
dados complexas, como arrays de objetos e arrays de arrays” (FLANAGAN, 2013, 137). Os 
índices de um array são númericos e sempre começam em zero. Assim, o tamanho de 
um vetor sempre será n-1, onde n é o número de elementos nele contido.
 Em JavaScript os arrays são dinâmicos. Isso signfica que podem crescer ou diminuir 
conforme a necessidade. Dessa forma, não é preciso determinar um tamanho fixo aos se 
declarar uma variável do tipo array. Um ponto interessante é que uma string nada mais 
é que um array de caracteres, cujos elementos podem ser acessados e manipulados 
através de seus índices numéricos.
 A Figura 3 apresenta esquematicamente a estrutura de um vetor de números 
com n = 12 elementos. Observe que os índices vão de 0 a 11, ou seja, de n a n-1. O vetor 
foi declarado com o identificador c. A seta apontando para c[0] indica o ínicio do array. 
A seta apontando para c[4] exemplifica que o item 1543 está na posição 4 do array, de 
modo que c[4] = 1543.
2.2 VETORES (ARRAYS)2.2 VETORES (ARRAYS)
 Assim, veja um exemplo de trecho de código em JavaScript para a criação e 
manipulação do vetor mostrado na Figura 3:
 var frutas = [‘banana’, ‘abacaxi’, ‘melancia’, ‘uva’];
 var vetAleatorio = [‘agua’, 334, [1, 3, 5, 7]];
 frutas[2] = ‘melao’;
 documento.write(“<p>Item 1 do array frutas = ” + frutas[0] + “</p>”);
 documento.write(“<p>Item 2 do vetor vetAleatorio = ” + vetAleatorio[1] + 
“</p>”);
 Do trecho de código JavaScript acima é possível concluir o seguinte:
 ● O array frutas possui 4 elementos do tipo primitivo string. Perceba que 
criamos as strings com aspas simples ao invés de aspas duplas. Essa é outra 
24
opção para criação de strings;
 ● O array vetAleatorio armazena itens de vários tipos: o item 1 é uma string, 
o item 2 é um número inteiro e o item 3 é também um array. Isso mostra 
que o programador pode combinar tipos de dados diferentes num vetor, 
dependendo da necessidade do desenvolvedor;
 ● Por armazenar um item do tipo array na sua terceira posição, vetAleatorio é 
dito um array multidimensional. Já frutas é um array simples, unidimensional. 
Uma matriz, por exemplo, é um array multidimensional, onde cada linha 
armazena arrays;
 ● Para acessar qualquer item de um vetor basta acessar seu nome identificador 
seguido de abre e fecha parênteses com o índice numérico correspondente 
ao item desejado;
 ● Conforme mostrado na linha 3 do trecho de código, é possível modificar 
um item do vetor facilmente também através de seu identificador e índice 
númerico da posição desejada.
 Num momento oportuno, falaremos sobre como acessar e manipular arrays 
multidimensionais. Isso é necessário porque envolve percorrer a estrutura inteira 
utilizando laços de iteração. Ademais, na última seção desta unidade, exemplificaremos 
a utilização de funções muito úteis no trabalho com arrays como, por exemplo, a que 
calcula e retorna o tamanho de um vetor.
 Adicionalmente, é importante citar que JavaScript possui em sua implementação 
o objeto Array. Perceba que agora não estamos falando do tipo básico array, e sim de um 
objeto. Isso permite ao programador ter à sua disposição diversas funções já prontas que 
trabalham sobre o objeto e no paradigma orientado a objetos. Porém, esse assunto será 
abordado mais adiante num momento oportuno.
2.3 OBJETOS2.3 OBJETOS
 As linguagens de programação mais modernas trabalham com objetos, a fim de 
modelarem problemas o mais próximo possível da nossa realidade. Um objeto “é um valor 
composto [que] agrega diversos valores (valores primitivos ou outros objetos) e permite 
armazenar e recuperar esses valores pelo nome” (FLANAGAN, 2013, p. 112). Ademais, 
conforme citado em MDN (2022), “compreender a natureza da orientação a objetos do 
JavaScript é crucial para aprofundar os conhecimentos acerca da linguagem.”.
 Os seres humanos naturalmente percebem sua realidade em termos de objetos. 
Por esse motivo, o paradigma da orientação a objetos consegue eficientemente 
modelar a maioria dos problemas do nosso cotidiano. A Unidade 5 deste livro é dedicada 
exclusivamente a abordar JavaScript orientada a objetos.
 Os objetos me JavaScript também são dinâmicos. Eles podem ser criados, 
acessados, modificados e destruídos assim como os tipos primitivos de dados, porém, 
com algumas diferenças. Um valor em JavaScript que não é de um tipo primitivo de 
dados (string, número, booleano, undefined, null, symbol) é um objeto.
 Diferentemente dos tipos primitivos, objetos possuem duas características 
fundamentais: atributos e métodos. Como exemplo, pense num objeto carro:
 ● Os principais atributos são: marca, cor, tipo, potência do motor etc;
 ● Os principais métodos, que são funções definidas para o objeto, são: 
mudarCor, calcularConsumoCombustivel, mover etc.
 É possível observar que a definição de objetos é bem intuitiva. Um ponto importante 
é que, para manipular as propriedades dos objetos, comumente são criados métodos 
padrões chamados tradicionalmente de getters e setters. Tais métodos serão abordados 
25
e detalhados na Unidade 5.
 Agora, veja um exemplo de trecho de código que cria, acessa e modifica as 
propriedades de um objeto em JavaScript utilizando alguns métodos simples:
var pessoa1 = {
 nome: “Maria”,
 idade: 35,
 sexo: ‘feminino’,
 nacionalidade: ‘brasileira’
};
pessoa1.idade = 40;
var n1 = new Array(10).fill(0, 0); 
n1[4] = 5;
document.write("<h3> Tamanho do Array = " + n1.length + "</h3>");
document.write("<h4> Item 1 do array n1 = " + n1[0] + "</h4>");
 Da análise do trecho de código em JavaScript acima, considere os seguintes 
pontos:
 ● Um objeto do tipo pessoa foi criado com os atributos nome, idade, sexo e 
nacionalidade. Na respectiva unidade que trata sobre orientação a objetos, 
veremos uma forma mais elegante de fazer isso;
 ● Na linha 7, o atributo idade do objeto pessoa1 foi modificado. Note o acesso ao 
atributo do objeto através do caractere ponto. Também veremos uma forma 
mais segura e elegante de acessar e modificar os atributos de um objeto na 
unidade sobre orientação a objetos;
 ● Na linha 8, um objeto do tipo Array com 10 elementos foi criado e preenchido 
com o comando new. Note que agora temos um objeto e não um tipo 
primitivo simples. O método fill() da especificação de JavaScript para objetos 
do Array foi usado para preencher o array n1 com zeros. Note que o método 
fill() espera 2 argumentos: o primeiro diz o índice onde o array deve começar 
a ser preenchido e o segundo diz qual o item deve ser inserido a partir do 
índice inicial indicado. Dessa forma, o array n1 passou a armazenar 10 itens 
com o valor numérico 0;
 ● Na linha 9, o item 4 do array n1 foi modificado de zero para5.
 ● As duas linhas finais imprimem na área de trabalho do navegador o tamanho 
do array n1 e o primeiro elemento dele.
 É muito importante e necessário que o desenvolvedor em JavaScript estude 
a documentação oficial da linguagem disponível em MDN (2022). Outras fontes 
ricas de informações e exemplos práticos estão disponíveis nos grupos mundiais de 
programadores JavaScript espalhados na internet.
2.4 EXEMPLOS2.4 EXEMPLOS
 Agora, é interessante e útil solidificar os conceitos vistos nesta unidade através 
de exemplos práticos de codificação. Como citado, anteriormente, os programas 
apresentados no livro foram criados utilizando o VSCode sob o sistema operacional 
Windows.
 Na Figura 4 é mostrada uma implementação da funçao calculaIMC apresentada 
na seção referente a funções. O código possui comentários de linha única a fim de 
facilitar o entendimento das instruções:
26
Figura 4: Uma implementação da função calculaIMC em JavaScript
Fonte: Próprio autor (2022).
 Digite o código apresentado na Figura 4 num editor ou IDE de sua escolha. Ao 
finalizar, salve o arquivo num local de sua preferência com a extensão .html. A escolha 
do nome do arquivo é livre. Porém, escolha um nome que ajude na identificação dele 
como, por exemplo, funcao.html. Os pontos a serem destacados no programa são os 
seguintes:
 ● A função criada realiza apenas uma tarefa bem especificada. Seu corpo é 
delimitado com abre e fecha chaves, contendo suas variáveis locais e cálculos 
necessários para a realização da tarefa proposta;
 ● A função criada fica disponível para ser chamada em qualquer parte do 
arquivo. É possível criar funções em arquivos separados, cuja extensão é .js. 
A grande vantagem disso é que o código fica mais limpo e as funções ficam 
disponíveis para todo o projeto, não somente no arquivo em que foi criada e 
implementada. Veremos esse artifício mais adiante;
 ● As linhas 17 e 18 utilizaram o método prompt nativo de JavaScript para solicitar 
as informações necessárias ao usuário do navegador de internet;
 ● A linha 21 apresenta o resultado computado na área do navegador de internet. 
Perceba que foi utilizada a função toFixed(2) para limitar o resultado em duas 
casas decimais.
 É importante ressaltar que o programa da Figura 4 espera que o usuário digite os 
valores corretamente, sem erros. Caso contrário, mensagens de erros serão apresentadas 
na tela do navegador. No momento oportuno faremos o tratamento de possíveis erros 
através de expressões condicionais do JavaScript.
 A Figura 5 apresenta um programa que cria e manipula arrays simples. Dê atenção 
aos comentários a fim de facilitar o entendimento das instruções:
27
Figura 5: Exemplo de programa com arrays em JavaScript
Fonte: Próprio autor (2022).
 Digite o código apresentado na Figura 5 num editor ou IDE de sua escolha. Ao 
finalizar, salve o arquivo num local de sua preferência com a extensão .html. Escolha 
um nome que ajude na identificação dele como, por exemplo, arrays.html. Os pontos a 
serem destacados no programa são os seguintes:
 ● Na linha 9, um array homogêneo contendo itens apenas do tipo string foi 
declarado e inicializado. Note que podemos criar rótulos strings utilizando 
também aspas simples. Como visto, anteriormente, JavaScript permite que 
o programador escolha se vai utilizar aspas duplas ou simples;
 ● Na linha 10, um array heterogêneo foi declarado e também inicializado. Ele 
é heterogêneo porque armazena itens de diversos tipos: string, numérico e 
array;
 ● A linha 12 muda o 3º item do vetor frutas. Lembre-se que o 3º item desse 
vetor é frutas[2];
 ● A linha 14 imprime o 1º item do array frutas na área de trabalho do navegador, 
sendo que a linha 15 faz o mesmo com o 2º item do array vetAleatorio;
 ● A linha 16 checa o tipo de dados do 3º item do array vetAleatorio com o 
operador typeof de JavaScript. A saída será object, pois o referido item é 
também um array.
 ● Por fim, a linha 17 imprime todo o conteúdo do array frutas na área de 
trabalho do navegador.
 Mais adiante conheceremos e utilizaremos expressões de controle de fluxos de 
JavaScript para percorrer cada item dos arrays, sem a necessidade de acessar cada 
elemento individualmente com várias linhas de código. Tais expressões economizam 
muitas linhas de programação e tornam o programa muito mais enxuto, elegante e 
legível principalmente para quem vai estudar a sua implementação posteriormente.
 Ademais, a Figura 6 apresenta um programa que cria e manipula alguns objetos 
em JavaScript. Um trecho dele foi mostrado e explicado na seção 2.3 desta unidade. Mais 
uma vez, dê atenção aos comentários a fim de facilitar o entendimento das instruções. 
Tenha atenção especial nos objetos, atributos e métodos que são utilizados no código:
28
 Digite o código apresentado na Figura 6 num editor de textos simples ou IDE de 
sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão 
.html. Escolha um nome que ajude na identificação dele como, por exemplo, objetos.
html. Os pontos a serem destacados no programa são os seguintes:
 ● Nas linhas 10 a 15, um objeto foi criado e seus atributos foram inicializados. 
Note que os atributos podem ser de tipos de dados diferentes;
 ● Na linha 17, o atributo idade do objeto foi alterado explicitamente. Note a 
utilização do operador ponto para acessar o atributo. Esssa não é a maneira 
mais segura e elegante de acessar e alterar o atributo de um objeto. Mais 
adiante, na unidade que aborda JavaScript orientada a objetos, definiremos 
métodos getters e setters para essa finalidade;
 ● Na linha 19, um objeto Array é criado e preenchido com zeros. Por ser um 
objeto, n1 possui nativamente o método fill() definido. Esse método espera 
dois argumentos: o índice inicial para começar a inserção dos itens e o item 
a inserir em cada posição do array;
 ● Na linha 20, o quinto elemento do array n1 foi explicitamente alterado. 
Assim como arrays simples, o objeto Array permite a manipulação de seus 
elementos através de índices de posição;
 ● Das linhas 22 a 26, imprimimos alguns atributos dos objetos pessoa1 e n1 na 
área de trabalho do navegador de internet.
 O desenvolvedor front-end com JavaScript deve entender e dominar as estruturas 
de dados elencadas nessa unidade. Dominar tais assuntos permite a criação de programas 
mais funcionais, elegantes e de fácil reuso e manutenibilidade.
Figura 6: Exemplo de programa com objetos em JavaScript
Fonte: Próprio autor (2022).
29
VAMOS PENSAR?
Na Figura 3 um array de nome c foi criado e preenchido com 12 elementos. Sabemos que 
os índices de posições de qualquer array em JavaScript começa com zero e vai de n a n-1, 
sendo n o número de elementos do array. Assim sendo, o que acontece se realizarmos a 
instrução c[12] para tentar acessar o último item de c? Implemente esse teste e veja o que o 
interpretador de JavaScript apresenta como resultado.
30
FIXANDO O CONTEÚDO
1. Considere a assinatura da seguinte função: calculaIMC (peso, altura). Nesse caso, é 
possível afirmar que:
a) É obrigatório informar os tipos de dados dos parâmetros peso e altura.
b) Já é possível concluir que a função retorna uma string como resultado.
c) A função necessita de pelo menos dois parâmetros para seu funcionamento.
d) O nome da função está errado porque não respeita as regras de nomenclatura de 
JavaScript.
e) A função obrigatoriamente deve devolver um valor como resultado.
2. Considere o seguinte array criado em JavaScript: vet = [1, 3, 5, 7, 9]. Nesse caso, é possível 
afirmar que:
a) O tamanho do vetor é n = 4 (4 elementos).
b) Para acessar o 3º elemento do vetor, basta acessar vet[2].
c) Todo array em JavaScript deve ser inicializado na sua criação.
d) A instrução vet.size() em JavaScript retorna o tamanho de vet.
e) Como observado em vet, arrays em JavaScript podem armazenar somente tipos iguais.
3. Considere a instrução a = new Array(5) em JavaScript. Nesse caso, é correto afirmar 
que:
a) O array a foi inicializado incorretamente.b) O array é um objeto do tipo Array, foi inicializado com 5 elementos e preenchido com 
zeros.
c) A instrução documento.write(typeof a) retornará object na área de trabalho do browser 
(navegador).
d) A declaração do array a está incorreta porque JavaScript não possui um tipo de dado 
Array.
e) A instrução a[0] = 25 acarretará um erro disparado pelo interpretador JavaScript.
4. Considere o trecho de código em JavaScript abaixo. Em seguida, escolha a opção 
correta:
a) Não existe a função alert disponível em JavaScript.
b) A execução do trecho de código mostrado acarretará um erro pelo interpretador 
JavaScript.
c) A definição da função tarefa está incorreta porque a mesma não possui nenhuma 
variável declarada e usada.
31
d) A assinatura da função tarefa está errada porque não informou os parâmetros 
necessários para seu funcionamento.
e) A execução da linha 5 mostrará uma caixa popup com o texto Mensagem!
5. A biblioteca Math em JavaScript disponibiliza várias funções muito úteis para 
manipulação de números. Nesse sentido, considere o trecho de código em JavaScript 
abaixo. Em seguida, dentre as assertivas, escolha a opção correta:
var numero = Math.random();
document.write(“<h3>O número é igual a” + numero + “</h3>”);
a) A segunda instrução mostrará um número negativo na área de trabalho do navegador.
b) A chamada à função Math.random() está errada, pois por definição, necessita de pelo 
menos um argumento.
c) Após a primeira instrução, a variável numero será com certeza será zero.
d) A função Math.random() sempre retorna um número aleatório entre 0 e 1.
e) A execução da segunda instrução com certeza escreverá um número negativo na área 
de trabalho do navegador.
6. JavaScript implementa nativamente diversas funções muito úteis que trabalham com 
arrays. Uma delas é push, cujo objetivo é:
a) Inserir um elemento no final do array.
b) Remover um elemento do início do array.
c) Ordenar o conteúdo do array.
d) Remover um elemento do final do array.
e) Inserir um elemento no início do array.
7. Em JavaScript, um método muito útil no trabalho com strings é o trim(). Seu objetivo 
é:
a) Retirar todos os acentos, caso existam, dos caracteres da string.
b) Transformar os caracteres da string em maiúsculos.
c) Remover os espaços em branco de ambos os lados de uma string.
d) Retornar o tamanho da string.
e) Cortar a string considerando os espaços em branco como os pontos de corte.
8. Considere o trecho de código JavaScript abaixo. Em seguida, escolha a opção correta:
var frutas = [‘banana’, ‘morango’, ‘melancia’, ‘abacaxi’];
frutas.sort();
frutas.reverse();
a) A 2ª instrução ordena o vetor frutas e a 3ª realiza a inversão dos seus itens.
b) A 3ª instrução ordena o vetor frutas e a 2ª realiza a inversão dos seus itens.
c) O array frutas foi inicializado incorretamente, pois seus itens deveriam ter sido criados 
com aspas duplas.
d) É possível acessar o item abacaxi do vetor frutas através da instrução frutas[4].
e) O 1º elemento do array frutas por ser acessado através da instrução frutas[1].
32
ESTRUTURAS DE 
CONTROLE E DE FLUXO
33
 No desenvolvimento de soluções em linguagens de programação, inevitavelmente 
será necessário utilizar estruturas de controle e de fluxo. Tais estruturas gerenciam o 
fluxo do código considerando-se certas condições e casos, e também iteram (percorrem) 
sobre arrays e outros tipos de dados compostos.
 JavaScript “implementa as tradicionais estruturas para controle de fluxo do 
programa” (ZANETTI, 2020, p. 59). A primeira a ser considerada é a que gerencia condições, 
chamadas de estruturas condicionais. “As instruções condicionais executam ou pulam 
outras instruções, dependendo do valor de uma expressão especificada” (FLANAGAN, 
2013, p. 90). Em outras palavras, são instruções responsáveis pela tomada de decisões no 
código.
 JavaScript implementa três instruções principais para o controle condicional: if, else 
e switch. A instrução if (“se” em inglês) “permite definir a execução ou não de determinado 
bloco de código, de acordo com a condição especificada” (ZANETTI, 2020, p. 59). Quando 
o programa chega numa instrução if, a condição entre parênteses é testada em termos 
de true (verdadeiro) ou false (falsa). Se ela for true, o fluxo do programa adentra no bloco 
delimitado pelo if e realiza as instruções ali contidas. Caso contrário, o bloco inteiro do if 
é pulado e o programa segue seu fluxo na próxima instrução.
 Quando a instrução inicial do if é avaliada como falsa, muito comumente há uma 
instrução else em seguida. O comando else (“senão” em inglês) garante que, caso a 
instrução do if seja falsa, a instrução pertencente a si será sempre executada.
 Para exemplificar a utilização da estrutura if/else, considere o trecho abaixo:
function start () {
 var n = prompt(“Entre com um número inteiro positivo”);
 if (n < 0) {
 document.write(“<p>O valor digitado é menor que zero!</p>”);
 }
 else {
 document.write(“<p>O valor digitado é maior que zero!</p>”);
 }
}
 O trecho acima definiu e criou a função start, cuja tarefa se resume a testar se 
um número digitado pelo usuário é menor ou maior que zero. Os destaques são as 
instruções condicionais if/else. No if, a variável x passa por um teste condicional. Se o 
teste for verdadeiro, o fluxo do programa entra no bloco do if e resulta as instruções 
que estiverem nele. Uma observação importante é que, caso o bloco do if ou do else 
contenham apenas uma única instrução, as chaves podem ser omitidas sem problemas.
 Ademais, caso a condição presente no if seja falsa, o fluxo do programa pula seu 
bloco e segue a execução. No caso considerado, o interpretador JavaScript encontra uma 
instrução else. Veja que else não possui uma condição, sendo uma alternativa à negativa 
da condição do if. Assim, o programa adentra no bloco do else e executa a instrução ou 
instruções contidas ali.
 Em JavaScript, outra possibilidade é o aninhamento de instruções if/else. Veja o 
trecho de código a seguir:
if (n == 1)
 document.write(“<p>Número ímpar!</p>”)
else if (n == 2)
3.1 ESTRUTURAS DE CONDIÇÃO
34
 document.write(“<p>Número par!</p>”)
else if (n == 3)
 document.write(“<p>Número ímpar!</p>”)
else
 document.write(“<p>Fim do programa</p>”)
 Essa estratégia possibilita que vários testes sejam realizados em sequência. 
Caso todas falhem, o bloco do instrução else final obrigatoriamente será executado. 
Utilizar esse tipo de estrutura depende muito da natureza do problema que está sendo 
modelado.
 Uma alternativa para o aninhamento exaustivo de vários ifs e elses é o comando 
de controle condicional switch. Essa instrução torna o programa muito mais elegante 
e inteligível, pois possui a capacidade de rotular possíves casos verdadeiros na análise 
da condição testada. O switch avalia várias opções até encontrar a correspondência 
definida pelo programador. A melhor forma de entender o funcionamento do switch é 
analisando um exemplo prático. Veja o trecho de código JavaScript a seguir:
var cargo = prompt(“Digite o cargo do funcionário:”);
switch (cargo) {
 case ‘gerente’:
 document.write(“<p>Salário base é R$3000,00.</p>”);
 break;
 case ‘supervisor’:
 document.write(“<p>Salário base é R$2000,00.</p>”);
 break;
 case ‘atendente’:
 document.write(“<p>Salário base é R$1600,00.</p>”);
 break;
 default:
 document.write(“<p>Salário base é R$1300,00.</p>”);
}
 Observe que o comando switch considera diversos testes para uma determinada 
variável. Nesse sentido, o programador deve ter bem em mente quais os possíveis valores 
a variável em questão pode assumir ao longo da execução do programa. No caso do 
trecho acima, a variável testada é cargo. No exemplo, ela pode assumir somente três 
valores: supervisor, gerente ou atendente. Assim, o código realiza os testes necessários 
até encontrar a correspondência. Quando um dos testes resulta em verdadeiro, o 
programa não realiza mais testes, pois encontra a palavra break. Essa instrução garante 
que o programa não continuará realizando mais testes do que o necessário.E se todos 
os testes falharem? Daí entra em cena a instrução default. Ela é atingida e executada 
quando todas as condições rotuladas do switch falham. Note que a instrução default não 
necessita de um break, pois é garantido que será a última instrução do switch.
 Na seção de exemplos, realizaremos vários testes com if, else e switc. Definidas 
as instruções condicionais de JavaScript, é importante agora definir as estruturas de 
repetição implementadas na linguagem.
Na página 96 do livro Projeto de interface com o usuário você encontra um 
quadro esquemático resumindo as instruções de controle condicionais de 
JavaScript. Disponível em: https://bit.ly/3jjoTtd. Acesso em 25 jan 2023
BUSQUE POR MAIS
35
 As instruções de repetição, também chamadas instruções de laço ou loops, 
“são conhecidas por desviar o caminho para si mesmas a fim de repetir partes de seu 
código” (SEGURADO, 2016, p. 96). Um exemplo clássico de sua utilização é na iteração 
dos elementos de uma array. Imprimir 10 itens de um vetor com instruções simples já é 
exaustivo. Essa tarefa se torna impraticável, por exemplo, com um array de mil elementos. 
Assim, a utilização de instruções de repetição facilita muito o trabalho do desenvolvedor. 
As três principais instruções de laço em JavaScript são while, do/while e for.
 “A instrução while é o laço básico da linguagem” JavaScript (FLANAGAN, 2013, p. 
95). While também possui uma expressão de avaliação. Tal expressão também é avaliada 
em termos de true ou false. Caso a condição seja falsa, o programa pula o bloco do while 
e continua seu fluxo para a próxima instrução. Porém, se a condição for verdadeira, o 
interpretador volta para o while e avalia novamente sua condição. Essa repetição acontece 
enquanto (while em inglês) a expressão for verdadeira. Na primeira vez que a condição 
for avaliada como falso, as instruções do bloco while não são mais executadas e o fluxo 
do programa segue para a próxima instrução depois desse bloco. Para exemplificar, 
considere o trecho de código que imprime os números de 0 a 10:
var contador = 0;
while (contador <= 10) {
 document.write(“<p>contador: ” + contador + “</p><br>”);
 contador++;
}
 Analisemos brevemente as instruções anteriores:
 ● Uma variável chamada contador foi definida e inicializada como valor zero. 
Essa variável irá guardar o número de repetições que foram realizadas pelo 
while;
 ● O comando while possui uma expressão de condição que testa se a variável 
é menor ou igual a 10. Enquanto isso for verdade, a instrução presente no 
bloco do while será realizada;
 ● A variável contador é incrementada com o operador de incremento ++. Essa 
instrução é conhecida como controle do laço, pois é ela que atualiza a variável 
contador para o correto funcionamento do laço. Nesse caso, se a variável 
contador não fosse atualizada, o laço while jamais terminaria, pois ela seria 
sempre zero, fazendo o teste da condição do laço ser sempre verdadeiro.
 Note que é preciso ter bastante cuidado na definição de condições e incrementos 
ou decrementos para as variáveis de controle dos laços. Uma escolha errada ou calculada 
erroneamente pode causar efeitos colaterais indesejados e difíceis de encontrar no 
código do programa.
 Isto posto, consideremos agora a instrução de repetição do/while. Ela é muito 
semelhante ao while, exceto pelo fato de que “a expressão do laço é testada no final e 
não no início do laço”. Na prática, “o corpo do laço sempre é executado pelo menos uma 
vez” (FLANAGAN, 2013, 96). Veja um exemplo prático utilizando a estrutura de repetição 
do/while do JavaScript:
let vetor = [];
let i = 10;
do {
 vetor.push(i);
3.2 ESTRUTURAS DE REPETIÇÃO
36
 i++;
} while (i < 10);
document.write(“<p>Vetor = “ + vetor + “</p>”);
 Do trecho de código acima é possível concluir o seguinte:
 ● Um array nomeado como vetor foi declarado e inicializado como vazio;
 ● A variável local i foi criada e inicializada com o número inteiro 10;
 ● O laço do/while começa com a instrução do, sem parênteses e qualquer 
expressão de condição;
 ● O bloco do laço do/while possui duas instruções: a primeira insere o valor de 
i no array e a segunda incrementa i em uma unidade;
 ● A estrutura de repetição do/while termina com uma instrução while seguida 
de uma expressão de condição entre parênteses e ponto e vírgula para 
marcar o fim do bloco.
 O resultado desse trecho de código será Vetor = [10] na área de trabalho do 
navegador de internet. Como isso é possível se a condição do while falha já na primeira 
tentativa, pois i não é menor que 10? Essa é a diferença entre o laço do/while e while. 
É garantido que do/while executa pelo menos uma vez as instruções contidas em seu 
bloco.
 Por fim, consideremos a estrutura de repetição for, a mais utilizada pelos 
programadores. O laço for é mais compacto e enxuto que while e do/while. Enquanto 
while e do/while atualizam e incrementam suas variáveis de inicialização e controle dentro 
de seus respectivos blocos, o laço for realiza tais tarefas numa única linha, facilitando o 
entendimento do que está sendo feito.
 De maneira semelhante ao que é feito nas instruções while e do/while, a condição 
do for é avaliada como verdadeira ou falsa. Se for falsa, o bloco de instruções do for é 
pulado e o fluxo do programa continua para a próxima instrução. Caso a condição seja 
verdadeira, o programa adentra o bloco e executa as instruções ali contidas. Ao final da 
última instrução do bloco, o fluxo retorna para a primeira linha do for, manipula a variável 
de controle e avalia novamente a condição do laço. Esse processo repetitivo é realizado 
até que a condição seja avaliada como falsa pela primeira vez.
 De maneira geral, a estrutura do laço for em JavaScript e em muitas linguagens de 
programação é a seguinte:
for (inicialização; condição; incremento/decremento) {
 instrução;
}
 Se houver apenas uma instrução no bloco do laço for, o par de chaves pode ser 
omitido. Outro ponto importante é que as três expressões que dirigem o for devem ser 
separadas por ponto e vírgula.
A fim de exemplificar o uso da estrutura de controle de repetição for, observe o trecho 
de código JavaScript a seguir:
for (var i = 0; i <=10; i++) {
 document.write(“<p>O número agora é: ” + i + “</p><br>”);
}
 O resultado da execução do trecho de código será a impressão dos números 
inteiros de 0 a 10 na área de trabalho do navegador de internet. Note que as instruções 
acima realizam a mesma tarefa feita pelo código exemplo com o laço while mostrado 
anteriormente, porém, com duas vezes menos linhas de código.
37
 Novamente, é interessante e útil solidificar os conceitos vistos nesta unidade 
através de exemplos práticos de codificação em JavaScript. Como citado anteriormente, 
os programas apresentados no livro foram criados utilizando o VSCode sob o sistema 
operacional Windows.
 Na Figura 7 é mostrada uma implementação do primeiro exemplo apresentado 
na seção referente às estruturas de controle condicionais de JavaScript. O programa 
possui comentários de linha única ao longo do código a fim de facilitar o entendimento 
das instruções. Dê atenção às instruções if/else, as quais são responsáveis pelo controle 
do fluxo do código apresentado:
3.3 EXEMPLOS
Sempre é possível transformar um laço while num laço for. Para isso, basta adaptar a 
estrutura e forma das expressões de controle, inicialização e incremento/decremento.
FIQUE ATENTO
Figura 7: Exemplo de programa com estruturas de controle do tipo if/else em JavaScript
Fonte: Próprio autor (2022).
 Digite o código apresentado na Figura 7 num editor de textos simples ou IDE de sua 
escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão .html. 
Escolha um nome que ajude na identificação dele como, por exemplo, condicionais1.
html. Os pontos a serem destacados no programa são os seguintes:
 ● Na linha 10, há a definição e criação da função start, que não necessita de 
parâmetros e cuja tarefa é verificar se um número digitado pelo usuárioé 
maior ou menor que zero;
 ● Na linha 12 há a instrução que solicita que o usuário digite um número de sua 
38
Figura 8: Exemplo de programa com if/else aninhados em JavaScript
Fonte: Próprio autor (2022).
preferência. Esse número é armazenado na variável local n;
 ● A linha 14 realiza um teste com o conteúdo da variável n que armazena o 
número digitado pelo usuário. O if testa se o número é menor que zero. Se 
o teste for true (verdadeiro), a mensagem na linha 16 é mostrada na área de 
trabalho do navegador de internet;
 ● Se o teste da linha 14 falhar, ou seja, se for falso, automaticamente o bloco 
de instruções do if é saltado e JavaScript o bloco do else a partir da linha 19. 
Assim, a mensagem na linha 21 é mostrada na área de trabalho do navegador 
de internet;
 ● Na linha 25 há a chamada da função start;
 ● A linha 26 apenas sinaliza o fim da execução do script com um texto na área 
de trabalho do navegador de internet.
 Ademais, vejamos um exemplo de código em JavaScript que utiliza estruturas de 
controle condicionais do tipo if/else aninhados. Observe a Figura 8 e dê atenção aos 
comentários ao longo do código:
 Digite o código apresentado na Figura 8 num editor de textos simples ou 
IDE de sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a 
extensão .html. Escolha um nome que ajude na identificação dele como, por exemplo, 
condicionaisAninhados.html. Os pontos a serem destacados no programa são os 
seguintes:
 ● Na linha 10 há a definição e criação da função getNota. Sua tarefa é avaliar a 
nota digitada pelo usuário, imprimindo um resultado referente a essa nota;
39
Figura 9: Exemplo de programa com a estrutura de controle condicional switch em JavaScript
Fonte: Próprio autor (2022).
 ● Na linha 12 há a solicitação ao usuário para que digite uma nota. Esse dado será 
armazenado na variável local nota. Os testes serão realizados considerando 
o seu conteúdo;
 ● Nas linhas 14 a 32 temos os testes propriamente ditos. Note o aninhamento 
de ifs/elses. Se o teste num if falhar, o fluxo do programa realiza o teste dos 
próximos elses/ifs. Se todos os testes forem falsos, o bloco do else que inicia 
na linha 29 obrigatoriamente é executado pelo interpretador de JavaScript.
 ● Na linha 35 há a chamada efetiva da função getNota, que não necessita de 
parâmetros para sua chamada e execução;
 ● A linha 36 apenas sinaliza o fim da execução do script com um texto na área 
de trabalho do navegador de internet.
 Note que, dependendo da natureza do problema, o programador talvez tenha que 
digitar uma grande quantidade de testes com ifs/elses aninhados, tornando a codificação 
exaustiva e o código muito longo. Nesse sentido, para ajudar, vimos a instrução de 
controle condicional switch, cuja estrutura é muito mais elegante e enxuta.
 A Figura 9 a seguir apresenta um programa exemplo em JavaScript que utiliza 
uma estrutura de controle condicional do tipo switch. Note a utilização das instruções de 
rotulação com case e as paradas com break, que obrigam o programa a finalizar o bloco 
do switch quando encontra um bloco com teste verdadeiro e executa as instruções desse 
bloco. Note também a utilização da instrução default. Dê atenção aos comentários ao 
longo do programa:
40
 Digite o código apresentado na Figura 9 num editor de textos simples ou IDE de 
sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão 
.html. Escolha um nome que ajude na identificação dele como, por exemplo, switch.
html. Os pontos a serem destacados no programa são os seguintes:
 ● Na linha 11 a função verifica é definida e criada. Sua tarefa é verificar o nome 
do cargo digitado pelo usuário;
 ● A linha 13 cria a variável cargo para armazenar o texto digitado pelo usuário;
 ● As linhas 15 a 32 definem o bloco de intruções do switch. Na linha 15 a expressão 
de controle do switch é a variável local cargo. Seu conteúdo é testado por cada 
instrução case nas linhas 17, 21 e 25. Caso haja a correspondência do conteúdo 
da variável cargo com rótulo presente num case, o fluxo do programa adentra 
no bloco desse case e executa as instruções contidas nele;
 ● As instruções break presentes em cada bloco case interrompem o bloco 
switch quando uma correspondência é testada como verdadeira. A execução 
de uma instrução break faz o fluxo do programa sair do bloco switch e 
continuar sua execução para a próxima instrução;
 ● Se todos os testes falharem, obrigatoriamente o bloco default é executado.
 Agora, vejamos um programa que utiliza as estruturas de controle de repetição 
while e do/while. Dê atenção aos comentários no código fonte:
 Digite o código apresentado na Figura 10 num editor de textos simples ou 
IDE de sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a 
extensão .html. Escolha um nome que ajude na identificação dele como, por exemplo, 
whileDoWhile.html. Os pontos a serem destacados no programa são os seguintes:
Figura 10: Exemplo de programa com while e do/while em JavaScript
Fonte: Próprio autor (2022).
41
Figura 11: Exemplo de programa com while e do/while em JavaScript
Fonte: Próprio autor (2022).
 ● A linha 9 define uma variável local que será a controladora do laço while. Tal 
variável será sempre incrementada a fim de garantir o correto funcionamento 
nos testes da condição do laço;
 ● O bloco while é definido das linhas 11 a 15. Observe o teste realizado na linha 
11, onde a variável controladora sempre será testada. Enquanto esse teste 
for verdadeiro, as instruções contidas no bloco do while serão efetuadas. Na 
primeira vez em que a condição for falsa, o bloco é abandonado;
 ● A instrução presente na linha 14 é especial, pois é ela que atualiza a variável 
controladora do laço while;
 ● As linhas 17 e 18 definem duas variáveis locais: uma do tipo array e outra do 
tipo inteiro;
 ● O bloco do/while é definido das linhas 20 a 25. Note que a expressão de 
teste do laço do/while aparece somente no fim do bloco, na linha 25. Essa 
é a diferença principal entre os laços while e do/while. Visto que o teste 
é realizado somente no final do laço do/while, há a garantia de que suas 
instruções serão realizadas pelo menos uma vez;
 ● Note que o teste do laço do/while presente na linha 25 já falha na primeira 
vez, pois i não é menor que 10. Porém, como trata-se do laço do/while, as 
instruções do bloco foram realizadas ao menos uma vez;
 ● Perceba que o array, com certeza, receberá o elemento presente inicialmente 
na variável i, pois o laço do/while executará pelo menos uma única vez, 
atribuindo tal valor ao vetor com a instrução presente na linha 22.
 Finalmente, consideremos um exemplo de programa JavaScript contendo a 
estrutura de controle de repetição for. Dê bastante atenção aos comentários no código 
fonte:
42
VAMOS PENSAR?
A partir dos seus conhecimentos sobre estratégias de leitura e sobre o papel da escola como 
espaço de ensino de leitura, pense em um gênero discursivo e proponha uma sequência 
didática que vise à formação de sujeitos leitores críticos e protagonistas. 
 Digite o código apresentado na Figura 11 num editor de textos simples ou IDE de 
sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão 
.html. Escolha um nome que ajude na identificação dele como, por exemplo, laco_for.
html. Em seguida, abra o arquivo efetuando clique duplo a fim de visualizar o resultado 
na tela do seu navegador de internet.
43
FIXANDO O CONTEÚDO
1. As estruturas de controle condicionais presentes na linguagem JavaScript são:
a) else e case
b) switch e default
c) default e break
d) if/else e switch
e) continue e break
2. As estruturas de controle de repetição presentes na linguagem JavaScript são:
a) for, else e switch
b) if, case e for
c) while, do/while e for
d) while, else e for
e) do/while, for e continue
3. A instrução break presente na estrutura condicional switch do JavaScript tem o 
objetivo de:
a) Garantir a continuação da execução dasinstruções do bloco switch.
b) Retornar ao início do bloco switch para que a expressão de controle seja novamente 
testada.
c) Garantir a interrupção das instruções do bloco switch, pois o teste de controle encontrou 
uma correspondência verdadeira.
d) Causar a interrupção total do programa.
e) Pausar a execução do programa até que o usuário entre com uma ação solicitada.
4. A instrução default presente na estrutura condicional switch do JavaScript tem o 
objetivo de:
a) Finalizar as instruções contidas no bloco switch.
b) Executar a instrução presente no seu bloco caso todos os testes com as instruções 
case tenha falhado.
c) Causar a interrupção total do programa.
d) Imprimir uma mensagem final de execução do programa para o usuário.
e) Incrementar a expressão de controle do switch para que as instruções continuem seu 
fluxo normal.
5. Analise o trecho de código em JavaScript abaixo. Em seguida, escolha a opção correta 
dentre as assertivas a seguir:
44
for (i = 0; i <=10; i++) {
 if (i % 2 == 0) {
 document.write(“<p> Esse é! Número:” + i + “</p>”);
 else
 document.write(“<p> Esse não é! Número:” + i + “</p>”);
}
a) O laço imprime os números ímpares no intervalo de 0 a 10.
b) O laço não imprimirá nenhuma informação na área de trabalho do navegador de 
internet.
c) Apenas a instrução else será executada, uma única vez.
d) O operador % calcula a raiz quadrada de um número inteiro.
e) O laço imprime os números pares no intervalo de 0 a 10.
6. Analise o trecho de código em JavaScript abaixo. Em seguida, escolha a opção correta 
dentre as assertivas a seguir:
vetor cores = [‘vermelho’, ‘verde’, ‘azul’, ‘cinza’, ‘marron’];
let indice = 0;
while (indice < cores.length) {
 document.write(“<p>índice: ” + índice + “=> ” + cores[indice] + “</p>”);
 índice++;
}
a) O trecho de código itera sobre o array e imprime cada índice do vetor cores seguido 
do item correspondente a ele.
b) O trecho de código é responsável pela ordenação dos itens do array cores.
c) A execução dum programa que contenha o trecho de código considerado apresentará 
um erro devido ao acesso de um índice inválido do array cores.
d) O laço while irá iterar sobre o vetor cores somente duas vezes.
e) A expressão que controla o laço while foi declarada incorretamente.
7. Analise o trecho de código em JavaScript abaixo. Em seguida, escolha a opção correta 
dentre as assertivas a seguir:
for (var i = 1; i < 10; i += 2) {
 if (i == 7)
 break;
 document.write(“<h2>Número é = ” + i + “</h2>”);
}
a) O laço não executará porque possui uma instrução break em seu bloco.
b) O laço for irá mostrar na área de trabalho do navegador de internet apenas o número 
7.
c) O laço for irá mostrar na área de trabalho do navegador de internet apenas os números 
5 e 7.
d) O laço for irá mostrar na área de trabalho do navegador de internet apenas o número 
1.
e) O laço for irá mostrar na área de trabalho do navegador de internet os números 1, 3 e 5.
45
8. Em JavaScript, considera a instrução continue. Assim, escolha a opção correta dentre 
as assertivas a seguir:
a) Ao encontrar a instrução continue, o interpretador JavaScript encerra o programa.
b) A instrução continue é utilizada para incrementar os laços while, do/while e for.
c) A instrução continue finaliza o bloco de instruções no qual está contida.
d) A instrução continue foi descontinuada na versão mais atual de JavaScript.
e) A instrução continue termina a iteração atual do laço em que está contida e continua 
a execução deste laço para a próxima iteração.
46
DOCUMENT 
OBJECT MODEL (DOM)
47
4.1 INTRODUÇÃO AO DOM
 Uma página web apresentada no navegador de internet pode ser definida como 
um grande documento que contém várias outras partes: título, cabeçalho, parágrafos, 
tabelas, rodapé etc. Nesse cenário, Javascript define um objeto Document que é utilizado 
para representar o conteúdo da janela que é mostrada pelo navegador no momento 
em que o usuário está interagindo com ele. Este objeto é o principal de uma grande 
API (Application Programming Interface) denominada Document Object Model (DOM – 
Modelo de Objeto de Documento, em português), responsável por fornecer meios para 
a representação e manipulação de conteúdo de páginas web (FLANAGAN, 2013).
 A DOM é a “API fundamental para representar e manipular o conteúdo de 
documentos HTML e XML”. Assim, o desenvolvedor web front-end precisa entender 
seus “vários detalhes de arquitetura” a fim de criar soluções profissionais e sérias para a 
internet (FLANAGAN, 2013, p. 351).
 DOM provê acesso a todos os componentes de uma página web, representando-
os através de uma hierarquia de objetos. Sendo assim, Javascript possibilita a criação, 
modificação e remoção dinâmica desses elementos (DEITEL, 2008).
 Inicialmente, entenda que “os elementos aninhados de um documento HTML ou 
XML são representados na DOM como uma árvore de objetos” (FLANAGAN, 2013, p. 352). 
Para entender como isso funciona, considere o código de uma página HTML simples 
mostrado na Figura 12 a seguir:
 Estruturalmente, a representação da árvore DOM do documento HTML mostrado 
na Figura 12 é destacada na Figura 13 a seguir:
Figura 12: Exemplo de documento HTML simples
Fonte: Flanagan (2013, p. 352).
Figura 13: Estrutura em árvore de um documento HTML simples
Fonte: Flanagan (2013, p. 352).
48
 Cada componente de uma árvore é denominado nó ou node. Note que a árvore 
possui níveis, como se fosse um organograma ou fluxograma clássicos. O nó acima de 
um outro nó é o pai dele e os nós cujo nível se encontram imediatamente abaixo de 
um outro nó são denominados filhos desse nó. Por exemplo, na árvore da Figura 13, os 
nós <head> e <body> são filhos do nó <html> e o nó abaixo de <h1> é seu filho único. 
Ademais, é importante perceber que a árvore é representada de forma invertida, com o 
nó raiz sendo sempre o primeiro a ser mostrado. Além disso, note que o nó raiz de uma 
árvore DOM sempre é Document, o qual representa o documento inteiro.
 Isto posto, agora é necessário saber como percorrer e manipular os componentes 
de uma árvore DOM. Javascript provê propriedades e métodos especiais que abstraem 
e facilitam muito essas tarefas. Nesse sentido, a linguagem implementa e disponibiliza 
para o desenvolvedor uma gama de procedimentos conhecidos como eventos. Nas 
seções seguintes, utilizaremos os eventos mais importantes e conhecidos para o 
desenvolvimento web front-end.
4.2 EVENTOS DOM
 Antes de abordarmos os eventos de Javascript mais importantes fornecidos pela 
DOM, é muito importante conhecer o método getElementById. “Qualquer elemento 
HTML pode ter um atributo id. O valor desse atributo deve ser único dentro do documento” 
(FLANAGAN, 2013, p. 354). Dessa maneira, o método getElementById do objeto Document 
possibilita a seleção de qualquer elemento baseado na sua identificação única, ou seja, 
seu id. Essa é a maneira clássica e mais utilizada em Javascript para selecionar elementos 
de documentos.
 Para entender o funcionamento de getElementById, considere os exemplos 
mostrados na Figura 14a e na Figura 14b. A primeira contém o código de uma página 
HTML simples e a segunda apresenta o código Javascript de uma função chamada pela 
página definida no código da Figura 14a. Dê atenção aos comentários ao longo dos 
programas:
Figura 14a: Um documento HTML simples
Fonte: Adaptado de MDN (2022).
 Digite o código apresentado na Figura 14a num editor de textos simples ou 
IDE de sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a 
extensão .html. Escolha um nome que ajude na identificação dele como, por exemplo, 
getElementSample.html. Os pontos a serem destacados no programa são os seguintes:
 ● Na linha 4 indicamos que a página HTML utilizará o script utils.js em algum 
momento. Para isso, utilizamos a tag <script> e seu atributo src, cuja função 
é informar o caminho onde o referido script se encontra. Caso o script não 
estivesse na mesma pasta que o arquivo HTML, seria necessário informar o 
caminho completo para sua corretalocalização;
49
 Novamente, digite o código apresentado na Figura 14b num editor de textos 
simples ou IDE de sua escolha. Ao finalizar, salve o arquivo num local de sua preferência 
com a extensão .js. Essa extensão indica que o arquivo contém código fonte escrito na 
linguagem Javascript. No exemplo, o nome escolhido foi utils.js. Os pontos a serem 
destacados no script são os seguintes:
 ● As linhas 3 a 6 definem e criam a função mudaCor, que recebe apenas um 
parâmetro. Num arquivo .js podem ser inseridas quantas funções forem 
necessárias, bastando o desenvolvedor importá-lo na página que o utilizará, 
assim como foi feito na linha 4 da Figura 14a;
 ● A linha 4 define uma constante chamada elem que recebe o elemento 
selecionado pelo método especial getElementById. Note que o método 
procurará no documento que a chamou apenas o elemento cujo id é igual a 
‘paragrafo’;
 ● A linha 5 utiliza um atributo já definido por Javascript para mudar a cor do 
elemento devolvido por getElementById.
 ● Ao perceber que o fim da função foi atingido, o interpretador Javascript 
devolve o controle para a página chamadora e continua o fluxo do programa. 
Visto que a página não possui mais conteúdo a ser renderizado, a mesma 
permanece inalterada.
Figura 14b: Arquivo Javascript contendo uma função definida
Fonte: Adaptado de MDN (2022).
 ● A linha 7 cria um parágrafo cujo id é ‘paragrafo’. Como dito, anteriormente, o 
id é único e exclusivo para um elemento do DOM;
 ● As linhas 8 e 9 contêm as chamadas para o envento onclick de Javascript. 
Esse evento dispara uma ação quando um botão é clicado pelo usuário. 
No caso considerado, ao clicar em qualquer dos dois botões que aparecem 
na página criada, a função mudaCor, que está definida no arquivo utils.js, 
será chamada. O clique no primeiro botão chama a função mudaCor com 
o parâmetro ‘blue’. Por sua vez, o clique no segundo botão chama a mesma 
função passando o parâmetro ‘red’.
 Agora, note o código Javascript apresentado na Figura 14b. Dê atenção aos 
comentários ao longo do programa:
A API DOM de Javascript é ríquissima em métodos para a manipulação de 
elementos de documentos. Veja uma lista bem detalhada na documentação 
da linguagem em: https://mzl.la/3je546y. Acesso em 25 jan 2023
BUSQUE POR MAIS
50
 A partir do exemplo apresentado nas figuras 14a e 14b, é possível entender como o 
tratamento de eventos acontece em Javascript. Nas linhas 8 e 9 da Figura 14a, o evento 
onclick foi utilizado. Tal evento ocorre quando o usuário efetua um clique com o ponteiro 
do mouse num determinado elemento do documento. Dessa forma, onclick não é 
exclusivo para elementos do tipo botão, mas é muito utilizado em associação com tais 
elementos.
 Como destaca Flanagan (2013, p. 433), “programas JavaScript do lado do cliente 
usam um modelo de programação dirigido por eventos assíncronos”. Dessa forma, “o 
navegador Web gera um evento onde acontece algo interessante no documento, no 
navegador ou em algum elemento ou objeto associado a ele”.
 No exemplo anterior, associamos uma função própria ao evento onclick. Esse 
estilo de programação é muito utilizado e bastante útil, uma vez que, o programador 
fica livre para determinar qual o efeito será gerado após a ocorrência de um determinado 
evento.
 Por definição, “eventos são simplesmente ocorrências a respeito das quais seu 
programa vai ser notificado pelo navegador Web” (FLANAGAN, 2013, p. 433). Se você 
criar código que capture e realize o tratamento deles, Javascript efetuará a associação 
necessária. Caso contrário, por exemplo, um clique de mouse num botão que não vincula 
o evento onclick a um determinado procedimento não realizará nada ao ser clicado pelo 
usuário. Assim, é muito comum e razoável a criação de funções tratadoras (ouvintes) dos 
eventos que podem ocorrer durante a interação do usuário com o navegador de internet 
(DEITEL, 2008).
 Isto posto, agora é interessante destacar os eventos mais comuns e importantes 
de Javascript utilizados no desenvolvimento web front-end. O Quadro 5 apresenta boa 
parte deles, não sendo, de maneira alguma, a listagem completa. O rol completo e 
detalhado pode ser encontrado na documentação da linguagem em MDN (2022). 
Evento Ocorrência
click Pressionamento e liberação do botão do mouse.
mousemove Movimentação do cursor do mouse sobre o elemento.
mouseout Movimentação do cursor do mouse para fora do elemento.
dblclick Realização de duplo clique com o mouse sobre o elemento.
load Carregamento total do documento no navegador de internet.
keydown Pressionamento de uma tecla do teclado.
keyup Liberação de uma tecla do teclado depois que foi pressionada.
scroll Rolagem num determinado elemento.
Quadro 5: Alguns dos eventos mais importantes de JavaScript
Fonte: Adaptado de MDN (2022).
 Devido à grande quantidade de eventos disponíveis na documentação de 
Javascript, é responsabilidade do desenvolvedor conhecer e se familiarizar, pelo menos, 
com os mais importantes e utilizados. Na próxima seção utilizaremos vários deles em 
exemplos práticos.
51
4.3 EXEMPLOS
 Novamente, é interessante e útil solidificar os conceitos vistos nesta unidade 
através de exemplos práticos de codificação em JavaScript. Como citado, anteriormente, 
os programas apresentados no livro foram criados utilizando o VSCode sob o sistema 
operacional Windows.
 As figuras 15a e 15b apresentam uma implementação utilizando o evento onload 
de JavaScript. O programa possui comentários de linha única ao longo do código a fim 
de facilitar o entendimento das instruções. Note também a utilização dum arquivo com 
a extensão .js específico para a criação das nossas funções. Essa é uma excelente prática 
para manutenção de código e para desacoplar as instruções de estruturas e estilização 
(HTML, CSS, etc) do código que utiliza comandos específicos como Javascript, por 
exemplo.
 Digite o código apresentado na Figura 15a num editor de textos simples ou IDE de 
sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão 
.html. Escolha um nome que ajude na identificação dele como, por exemplo, onload_
test.html. Os pontos a serem destacados no programa são os seguintes:
 ● Na linha 4 indicamos que a página HTML utilizará o script utils.js. Neste 
arquivo definimos e criamos nossas funções;
 ● A linha 6 faz a associação do event onload do documento à função 
verificaCookies, localizada no arquivo utils.js. Note que a função foi definida 
sem a necessidade de parâmetros;
 ● A linha 7 será renderizada no navegador de internet somente após a execução 
da instrução da linha 6, pois deve esperar o retorno da função.
 Agora, note o código Javascript apresentado na Figura 15b. Dê atenção aos 
comentários de linha ao longo do programa:
Figura 15a: Documento HTML para a utilização do evento onload de Javascript
Fonte: Próprio autor (2022).
Figura 15b: Exemplo de utilização do evento onload de Javascript
Fonte: Próprio autor (2022).
52
 Digite o código Javascript apresentado na Figura 15b. Ao finalizar, salve o arquivo 
num local de sua preferência com a extensão .js, por exemplo, utils.js. Os pontos a serem 
destacados no programa são os seguintes:
 ● A função verificaCookies está definida nas linhas 8 a 15;
 ● A linha 9 testa uma propriedade especial do navegador de internet chamada 
navigator.cookieEnabled, cuja função é verificar se o armazenamento de 
cookies está habilitado ou não. Javascript implementa e disponibiliza várias 
dessas propriedades nativamente, sendo importante conhecer as mais 
importantes e utilizadas na documentação da linguagem em MDN (2022);
 ● As linhas 9 a 14 testam a propriedade navigator.cookieEnabled, verificando 
se a mesma é true ou false. Se verdadeira, a linha 10 é executada e mostra 
uma janela pop-up no navegador de internet com a respectiva mensagem. 
Caso contrário, se falsa, a linha 13 é executada e também mostra uma janela 
pop-up com a mensagem configurada.
 Ademais, é interessante observar o funcionamento de maisalguns eventos úteis e 
muito utilizados no desenvolvimento web front-end com Javascript. As figuras 16a e 16b 
apresentam uma implementação com vários deles.
Figura 16a: Documento HTML para a utilização de alguns eventos de Javascript
Fonte: Próprio autor (2022).
 Digite o código apresentado na Figura 16a num editor de textos simples ou IDE de 
sua escolha. Ao finalizar, salve o arquivo num local de sua preferência com a extensão 
.html. As considerações principais a serem destacadas no programa são as seguintes:
 ● Como feito, anteriormente, na linha 4 indicamos que a página HTML utilizará 
o script utils.js. Neste arquivo definimos e criamos nossas próprias funções;
 ● A linha 8 cria um campo para inserção de texto simples e associa seu evento 
onchange à função transformaMaiusc. Ao inserir algum texto, Javascript 
identifica a mudança no estado do elemento e dispara o evento onchange 
dele, verificando se há uma função que o trata;
 ● As linhas 10 a 12 criam uma moldura para a demonstração dos eventos 
onmouseover e onmouseout, associando cada um a uma respectiva função 
de tratamento;
 ● A linha 14 cria um campo para inserção de texto simples e associa seu evento 
onkeydown à função denominada escrever.
 Agora, note o código Javascript apresentado na Figura 16b. Dê atenção aos 
comentários de linha ao longo do programa:
53
Figura 16b: Utilização de alguns eventos mais comuns de Javascript
Fonte: Próprio autor (2022).
 Digite o código Javascript apresentado na Figura 16b. Ao finalizar, salve o arquivo 
num local de sua preferência com a extensão .js, por exemplo, utils.js. Os pontos a serem 
destacados no programa são os seguintes:
 ● As linhas 18 a 21 definem e criam a função transformaMaiusc, cuja tarefa é 
transformar uma string inteira em letras maiúsculas. Na linha 19 sua variável 
local texto é criada e recebe o elemento cujo id é ‘nome’ vindo do documento 
que chamou a função. Em seguida, na linha 20 todo o conteúdo da variável 
texto é transformado para caixa alta utilizando a já conhecida função 
toUpperCase;
 ● As linhas 24 a 26 definem e criam a função movSobre, que recebe um 
parâmetro do tipo objeto e tem a tarefa de mudar o conteúdo interno de um 
componente HTML com o método innerHTML. Essa mudança de conteúdo 
acontece quando o usuário passa o ponteiro do mouse sobre a moldura div 
que chamou a função movSobre, tratadora do evento onmouseover;
 ● Por sua vez, as linhas 29 a 31 definem e criam a função movFora, que também 
recebe um único parâmetro do tipo objeto. Igualmente, a função realiza 
a tarefa de mudar o conteúdo interno de um componente HTML com o 
método innerHTML. Porém, a mudança do conteúdo do elemento acontece 
quando o usuário retira completamente o ponteiro do mouse da moldura 
div chamadora da função movFora, tratadora do evento onmouseout;
 ● Finalmente, as linhas 34 a 37 definem e criam a função escrever, que também 
recebe apenas um parâmetro. Por padrão, o evento onkeydown configura 
esse parâmetro na função que o trata. Na linha 35 uma variável local 
54
VAMOS PENSAR?
Na Figura 15b o código das linhas 9 a 14 pode ser substituído por apenas uma única linha 
de código com a utilização do operador condicional ternário de Javascript. A estrutura 
básica desse comando é: condition ? expressao1 : expressao2. Pesquise e implemente a 
solução utilizando esse compacto e eficiente comando. Na Figura 15b o código das linhas 
9 a 14 pode ser substituído por apenas uma única linha de código com a utilização do 
operador condicional ternário de Javascript. A estrutura básica desse comando é: condition 
? expressao1 : expressao2. Pesquise e implemente a solução utilizando esse compacto e 
eficiente comando.
DOM não é uma linguagem. É uma interface de programação para os documentos HTML e 
XML, provendo uma representação orientada a objetos das páginas da web.
FIQUE ATENTO
armazena o código decimal da tecla pressionada pelo usuário. Na linha 
36 o valor dessa variável é testada com o número inteiro 27, cujo valor é o 
padronizado na tabela Unicode para a tecla ESC. Se o teste for verdadeiro, 
uma janela pop-up aparece na tela do navegador de internet com uma 
mensagem configurada.
 Assim, note que o desenvolvimento com os elementos e métodos da DOM e os 
eventos de Javascript não é algo extremamente difícil. Se o desenvolvedor entende 
bem a estrutura da DOM e como os componentes interagem entre si, selecionando 
e modificando e manipulando conteúdos através de atributos, métodos e funções, já 
conseguiu progredir bastante.
 Saiba que DOM foi implementada para ser independente de qualquer linguagem 
computacional (MDN, 2022). Assim, Javascript é uma das tecnologias que utilizam 
DOM e se valem do seu grande rol de ferramentas para enriquecer o desenvolvimento 
web profissional. Dessa maneira, apenas a prática e o treinamento proporcionarão ao 
desenvolvedor a experiência necessária para utilizar bem DOM e criar soluções sérias e 
robustas para a web.
 Nesse cenário, a grande aliada do desenvolvedor web é a documentação da 
linguagem. Tire tempo para ler, pesquisar e implementar os vários exemplos que 
nela aparecem. Não se intimide com a quantidade de elementos e componentes 
disponibilizados por Javascript. Entenda que, à medida que a necessidade aparecer, a 
documentação lhe ajudará a encontrar e utilizar as ferramentas específicas para a sua 
demanda.
55
1. Das opções a seguir, escolha a que descreve o evento Javascript que é disparado 
quando um formulário HTML é submetido:
a) onload
b) onreset
c) onsubmit
d) onclick
e) onkeyup
2. Sobre o método getElementById, considere as alternativas abaixo e escolha a correta:
a) O método não retorna null se o elemento não existir.
b) Não é um dos métodos mais comuns e utilizados no desenvolvimento web com 
Javascript.
c) O método pode ser utilizado apenas com componentes do tipo button e list.
d) O método retorna um elemento com um valor especificado.
e) O método se tornou obsoleto com a nova especificação de Javascript.
3. A respeito da API DOM (Document Object Model) é correto afirmar:
a) É uma linguagem de programação amplamente utilizada.
b) É uma interface de programação para documentos HTML e XML.
c) Foi implementada especificamente para a utilização com Javascript.
d) Não utiliza o conceito de orientação a objetos para a representação de documentos.
e) Foi descontinuada após o lançamento da última versão de Javascript.
4. A figura a seguir apresenta a estrutura em árvore de uma página HTML simples, tal 
qual definida pela DOM:
FIXANDO O CONTEÚDO
Fonte: Flanagan (2013, p. 352).
56
A partir da análise da figura, é possível concluir corretamente que:
a) A raiz da árvore sempre é o ultimo elemento.
b) O nó <p> possui dois nós filhos.
c) O nó Document sempre é a raiz da árvore.
d) O nó <h1> é pai do nó <body>.
e) A estrutura em árvore apresentada na figura está incorreta.
5. Na linguagem Javascript, o evento que é disparado quando o document é carregado 
na tela do navegador de internet é:
a) onload.
b) onreset.
c) onkeyup.
d) onfocus.
e) onunload.
6. Considere a instrução abaixo escrita em Javascript e, em seguida, escolha a opção 
correta dentre as assertivas:
var texto = document.getElementById(“nome”);
a) A instrução foi escrita incorretamente.
b) A variável texto receberá o conteúdo completo do documento HTML.
c) A instrução irá disparar uma mensagem de erro pelo interpretador Javascript.
d) A variável texto é uma tratadora do evento disparado pelo método getElementById.
e) A variável texto receberá o conteúdo do elemento cujo id é “nome”.
7. Por definição, innerHTML é:
a) A propriedade que manipula todo o conteúdo de uma página HTML.
b) Um novo método definido pela versão mais atual de Javascript.
c) Um evento que retorna o conteúdo HTML de um componente específico.
d) A propriedade que define ou retorna o conteúdo HTML.
e) Uma propriedade descontinuada e obsoleta.
8. Por definição, uma função manipuladora ou tratadora de um evento específico é:
a) Uma rotina que disparaum erro para o interpretador Javascript.
b) Uma rotina que encerra a execução do programa Javascript.
c) Um trecho de código importado de uma linguagem determinada.
d) Um método nativo da linguagem Javascript.
e) Um procedimento que cria código para o tratamento do evento disparado.
57
JAVASCRIPT ORIENTADA 
A OBJETOS
58
 Até esta unidade do livro utilizamos diversos objetos nativos da linguagem 
Javascript e objetos disponibilizados pela API DOM para realizarmos tarefas em nossos 
programas. Javascript disponibiliza uma grande gama de objetos em sua implementação, 
o que a torna uma linguagem de programação baseada em objetos (DEITEL, 2008).
 “Objetos são um modo natural de pensar a respeito do mundo” (DEITEL, 2008, p. 192). 
Assim, naturalmente, os humanos pensam em termos de objetos e suas propriedades. 
Dessa forma, os desenvolvedores de linguagens de programação perceberam que 
modelar os problemas do cotidiano em termos de objetos, atributos e métodos é uma 
abordagem eficaz, produtiva e intuitiva.
 Nesse contexto, os objetos possuem atributos próprios, como forma, tamanho, 
peso, cor etc. Ademais, possuem também comportamentos, os quais conferem um 
caráter dinâmico a eles. Por exemplo, alguns comportamentos comuns a um objeto do 
tipo carro são: ligar, desligar, acelerar, frear, parar e assim por diante. No paradigma de 
programação orientada a objetos, comportamentos são mais comumente conhecidos e 
referenciados como métodos. Por sua vez, as características e propriedades dos objetos 
são citadas pelo seu sinônimo atributos.
 Em síntese, a programação orientada a objetos "modela o software em termos 
semelhantes àqueles que as pessoas usam para descrever objetos do mundo real" 
(DEITEL, 2008, p. 192). Essa modelagem foca na construção de soluções em termos 
dos objetos inerentes aos problemas abordados, definindo seus atributos, métodos 
e relacionamentos com outros objetos pertencentes ao domínio da solução de cada 
cenário.
5.1 OBJETOS, ATRIBUTOS E MÉTODOS
 Uma das características mais importantes da programação orientada a objetos é 
o encapsulamento. Encapsular significa embrulhar e, no contexto do desenvolvimento 
orientado a objetos, implica esconder os aspectos de implementação dos objetos, isto 
é, seus atributos e métodos, de modo que eles sejam acessíveis somente através de 
operações estritamente definidas e permitidas pelo programador. Essa característica é 
muito desejável e é amplamente divulgada como uma boa prática de programação, pois 
expõe somente aquilo que o desenvolvedor deseja através de interfaces bem definidas e 
projetadas (DEITEL, 2008).
 Para entender melhor o conceito de encapsulamento, considere um objeto do tipo 
carro. O usuário tem acesso a diversas operações desse objeto através de suas interfaces 
disponíveis: ligar através do painel de ignição, acelerar e frear através dos pedais, 
virar para a direita ou esquerda por meio do volante e assim por diante. No entanto, 
para realizar tais operações o usuário não precisa saber como o sistema de ignição é 
projetado e implementado ou como os pedais do carro se comunicam com o motor e 
outras partes do veículo. De maneira semelhante, ao utilizar sistemas computacionais, 
os desenvolvedores não precisam e, muitas vezes, não querem expor as propriedades e 
operações de suas soluções, bastando disponibilizar para os usuários finais as interfaces 
para a utilização dos seus produtos.
 Nessa perspectiva, surgiram os métodos getters (seletores) e setters (modificadores). 
Um método get é responsável pelo acesso às propriedades ou operações de um 
5.2 GETTERS/SETTERS
59
determinado objeto. Por sua vez, um método set vai mais além, modificando tais atributos 
e comportamentos (FLANAGAN, 2013).
 Nesse sentido, a linguagem Javascript disponibiliza vários getters e setters para os 
desenvolvedores web. Por exemplo, utilizamos várias vezes o método getElementById 
na implementação de algumas tarefas, embora não conheçamos detalhes de sua 
construção. Um exemplo de método setter de Javascrito é setAttribute, o qual define o 
valor de um atributo no elemento especificado. Se o atributo já existir, o valor é atualizado 
ou, caso contrário, um novo atributo será incluído com o nome e valor especificados 
(MDN, 2022).
 Classe é um conceito fundamental em programação orientada a objetos. Conforme 
Deitel (2008), uma classe é um tipo definido pelo próprio desenvolvedor, podendo ser 
associada à ideia de um molde para a modelagem de objetos do tipo criado. Assim, uma 
classe Carro poderá criar objetos desse tipo, contendo suas propriedades e operações 
inerentes à natureza dos carros.
 Numa analogia interessante, Deitel (2008, p. 193) menciona que “classes são para 
objetos o que plantas são para casas”. Nesse sentido, pense em classes como fábricas 
de objetos específicos do tipo definido por elas. Ademais, no contexto da programação 
orientada a objetos, a criação de um objeto de uma classe é também conhecida como 
instanciação desse objeto. Por exemplo, um objeto da classe Carro e um objeto da classe 
Pessoa são instâncias específicas de cada classe particular.
 Por definição, a partir de ECMAScript 2015, Javascript disponibiliza várias classes 
muito úteis (MDN, 2022). Por exemplo, a classe Array oferece vários atributos e métodos 
para a utilização e manipulação de vetores: o atributo length retorna o tamanho do 
array, o método split divide um array, push e pop inserem e removem itens do arranho, 
respectivamente, e assim por diante. Adicionalmente, a “classe Date define objetos 
que representam datas. A classe RegExp define objetos que representam expressões 
regulares” (FLANAGAN, 2013, p. 29). No entanto, o programador pode e deve criar suas 
próprias classes que serão úteis na construção das soluções dos seus problemas.
 Para a declaração de uma classe em Javascript, a palavra-chave class deve ser 
utilizada. Observe o exemplo a seguir, em que a classe Retangulo é definida:
5.3 CLASSES
Figura 17: Declaração da classe Retângulo em Javascript
Fonte: MDN (2022).
60
A utilização de this é ampla e merece um estudo aprofundado. Para um estudo 
completo dessa palavra especial, consulte : https://mzl.la/3WOS3ht. Acesso em 30 
jan. 2023.
FIQUE ATENTO
 Na Figura 17 note na linha 1 a utilização da palavra-chave class seguida do nome 
escolhido para a classe. As linhas 3 a 6 criam um método especial com a palavra reservada 
constructor. Esse método, como o próprio nome indica, é o construtor oficial da classe, 
ou seja, define que todo objeto da classe deve ser criado da maneira especificada por 
ele. Utilizar construtores de classes é uma maneira de manter o controle na forma em 
que os objetos específicos serão criados. No exemplo da Figura 17 definimos que todo 
objeto retângulo sempre será criado a partir dos parâmetros altura e largura.
 Na linha 5 da Figura 17 note a utilização da palavra especial reservada this. Ela 
vincula a atribuição ao objeto dentro da função onde está inserida. Em outras palavras, 
this ordena o seguinte: atribua os novos valores de altura e largura a este objeto específico. 
Assim, this sempre se refere ao objeto ou atributo no contexto em que foi evocado.
 Nas linhas 9 a 12 da Figura 17 um método getter chamado area é definido. Sua 
função é chamar a função calculaArea do objeto que o utiliza. Note que interessante: ao 
utilizar o método getter citado, o usuário nem saberá que existe um método chamado 
calculaArea no sistema. Isso é o encapsulamento em ação, pois expõe apenas a interface 
necessária para que o usuário realize o que necessita.
 A linha 20 da Figura 17 cria uma instância da classe Retângulo denominada 
quadrado, cujos parâmetros para sua criação são altura e largura iguais a 10 unidades. 
Observe que, assim como acontece na maioria das linguagens orientadas a objetos 
como Java, C# e C++, a palavra-chave new é utilizada para instanciar (criar) um objeto.
 Por sua vez, a instrução final na linha 21 da Figura 17 utiliza a função nativa console.
log, que é muitoútil para criar pontos de debug no código fonte. Pontos de debug 
servem para mostrar ao programador evidências de que o programa está executando 
corretamente, exibindo os conteúdos de variáveis, valores de retornos de funções e 
métodos etc. A função console.log tem por objetivo exibir uma mensagem no console 
do navegador de internet. Para visualizar a mensagem emitida por ela, é necessário que 
o usuário acesse o console do navegador. Essa ação possui variações devido às diferenças 
entre os navegadores de internet modernos. Por exemplo, no navegador Google Chrome 
o acesso à área do console pode ser realizado das seguintes maneiras:
 ● Utilizando a combinação de teclas Ctrl +Shift +J (no Windows) ou Cmd + 
Option + J (em um Mac);
 ● Clicando com o botão direito do mouse na página mostrada na tela e, em 
seguida, escolhendo a opção "Inspecionar" que aparece no menu suspenso;
 ● Utilizando a tecla de atalho F12 no teclado.
 Uma vez realizado um dos procedimentos acima, um painel lateral à direita da 
tela do navegador será aberto. Nela, caso não esteja selecionada, basta clicar na aba 
“Console”.
 Ademais, uma importante observação é que a função console.log não deve ser 
61
utilizada em sistemas que já estejam em produção, ou seja, disponíveis na web. Essa é 
uma forte recomendação da própria documentação de Javascript disponível em MDN 
(2022).
O objeto console de Javascript disponibiliza várias outras funções além de 
console.log. Conhecê-las é muito útil no desenvolvimento web front-end. Para 
isso, acesse a documentação da linguagem em https://mzl.la/3kVfx7g. Acesso 
em 30 jan. 2023.
BUSQUE POR MAIS
 Finalmente, outro conceito muito importante no desenvolvimento orientado a 
objetos é a herança. Conforme apontado por Deitel (2008, p. 193), a herança se configura 
quando "novas classes de objetos são derivadas pela absorção de características das 
classes existentes e o acréscimo de características exclusivas".
 Por exemplo, considere uma classe Animal que possui um atributo patas e um 
método simples comer. Ademais, considere também uma classe Gato que possui um 
método miar. Baseado no mundo real, sabemos que um gato é um animal e, além 
de miar, também come como qualquer outro animal. Sem a utilização do recurso de 
herança, o método comer precisaria ser escrito na classe Animal e também na classe 
Gato, com a cópia total e literal das instruções. Ao utilizar a herança, essa duplicação de 
código não é necessária, tornando o código muito mais elegante e limpo. A Figura 18 
apresenta a implementação em Javascript do exemplo citado:
5.4 HERANÇA
Figura 18: Exemplo de utilização de herança em Javascript
Fonte: Próprio autor (2022).
62
VAMOS PENSAR?
No exemplo apresentado na Figura 18, qual comportamento pertencente a todo animal 
você inseriria, de modo a disponibilizá-lo a todas as suas subclasses? Esquematize tal 
método e o implemente na prática com Javascript.
 Na Figura 18 dê atenção às linhas 2 a 11. Nelas há a definição da classe Animal, a qual 
é nossa superclasse. Uma superclasse é aquela da qual outras classes herdarão atributos 
ou métodos. Essas classes são chamadas de subclasses, como é o caso da classe Gato, 
cuja definição aparece nas linhas 14 a 23 da referida figura.
 A herança se configura com a utilização da palavra-chave reservada extends 
de Javascript. Quando extends aparece na assinatura de uma classe, o interpretador 
identifica que ela é uma subclasse herdeira de uma superclasse. Note que, no exemplo 
considerado, o método comer da superclasse Animal não precisou ser reescrito. 
A instrução extends automaticamente incorpora todos os atributos e métodos da 
superclasse à classe filha. Dessa maneira, ao executar o código presente na Figura 18, as 
mensagens que aparecem nas linhas 9 e 21 serão escritas no console do navegador de 
internet, conforme pode ser visto na Figura 19 a seguir:
 Na Figura 19 note as duas mensagens que foram apresentadas. O console indica 
que elas vieram das linhas 9 e 21, respectivamente, como mencionado anteriormente. 
Assim, através do recurso de herança, o objeto do tipo Gato que criamos herdou o 
método comer da superclasse Animal com todas as suas instruções implementadas.
 Dessa maneira, implemente os exemplos apresentados nessa seção. Faça testes, 
reescrevendo instruções, adicionando ou removendo atributos e métodos de classes. 
Além da classe Gato mostrada na Figura 18, experimente inserir uma classe que representa 
outro animal com suas características e comportamentos únicos. Assim, você solidificará 
os importantes conceitos apresentados nesta unidade, os quais são fundamentais para 
o desenvolvedor web moderno.
Figura 19: Exibição de mensagens no console do navegador Google Chrome
Fonte: Próprio autor (2022).
63
FIXANDO O CONTEÚDO
1. No contexto da orientação a objetos, uma subclasse herda as características de uma 
superclasse através da utilização da palavra-chave reservada:
a) typedef.
b) typeof.
c) extends.
d) herance.
e) class.
2. Na programação orientada a objetos, métodos getters e setters são muito úteis, 
principalmente por promoverem a boa prática do encapsulamento. Nesse sentido, 
dentre as alternativas abaixo, escolha a correta:
a) Métodos setters são conhecidos como métodos selecionadores.
b) Métodos getters são conhecidos como métodos modificadores.
c) A documentação de Javascript não recomenda o uso de getters e setters.
d) Um método set é usado para modificar um determinado atributo.
e) Um método get deve ser utilizado uma única vez dentro de uma classe.
3. A técnica de receber atributos ou métodos legados de uma classe pai, utilizada por 
uma ou mais classes filhas é conhecida como:
a) Polimorfismo.
b) Encapsulamento.
c) Acoplamento.
d) Coesão.
e) Herança.
4. Os navegadores de internet modernos possuem algumas ferramentas que auxiliam 
muito o trabalho dos desenvolvedores web. Dentre elas, uma muito útil e conhecida é:
a) Terminal de comandos.
b) Console.
c) Pop-up.
d) IDE.
e) Editor de texto.
5. Na modelagem de soluções computacionais utilizando o paradigma da orientação a 
objetos, os atributos dos objetos podem ser definidos como:
a) Métodos específicos criados pelo programador.
b) Constantes estáticas definidas pelo programador.
c) Funções herdadas nativamente da linguagem Javascript.
d) Mecanismos para a mudança de comportamento dos objetos.
64
e) As propriedades inerentes a cada objeto específico.
6. Javascript define palavras-chave especiais para a definição de uma classe e a criação 
de um novo objeto. São elas, respectivamente:
a) class e extends.
b) typedef e new.
c) class e new.
d) new e typeof.
e) class e construct.
7. Na programação orientada a objetos, a instanciação de um objeto de uma determinada 
classe é definida como:
a) A criação de um novo objeto da classe.
b) A criação de um novo atributo de um objeto da classe.
c) A criação de um novo método de um objeto da classe.
d) A atualização de um método da classe.
e) A seleção de um atributo de um objeto da classe.
8. No desenvolvimento com o paradigma orientado a objetos, a utilização do recurso de 
herança proporciona alguns benefícios, sendo um deles, a reutilização de código. Nesse 
sentido, analise a figura a seguir e, dentre as alternativas, escolha a correta:
Fonte: Disponível em: https://bit.ly/3HmfUPM. Acesso em 30 jan. 2023.
a) A superclasse é a classe Animal.
b) A classe Homem não é classe filha da classe Mamífero.
c) O diagrama de classes considerado está invertido.
d) A classe Mamífero herda as características das classes Cachorro e Homem.
e) A superclasse de Ave é Beija-Flor.
65
FRAMEWORKS 
FRONT-END PARA 
DESENVOLVIMENTO 
WEB
66
6.1 ANGULAR
 A necessidade de agilidade no desenvolvimento de soluções computacionais 
no mundo moderno alavancou a utilização de ferramentas disponíveis, muitas 
gratuitamente. Como abordado, anteriormente, as IDEs (Integrated Development 
Environment) fazem parte desse rol de ferramentas, as quais facilitam muito o trabalho 
dos desenvolvedores de softwaree aplicações.
 Dessa forma, muitas comunidades de programadores se reuniram e criaram 
projetos para o desenvolvimento de soluções sérias que padronizassem a maioria das 
tarefas comuns realizadas durante os processos de criação de software e aplicações. Tais 
soluções objetivam otimizar o tempo e recursos, prevenindo também a “recriação da 
roda”, ou seja, que os times de programadores tenham que criar do zero soluções que já 
estão prontas e disponíveis para utilização.
 Nesse cenário, surge o framework (estrutura, numa tradução livre em português). 
Um framework é uma biblioteca ou conjunto de bibliotecas que “fornecem aos 
desenvolvedores ferramentas utilizadas e testadas para a criação de aplicativos [...] 
interativos e escalonáveis” (MDN, 2022). Conforme comenta Flanagan (2013, p. 330), a 
“vantagem óbvia de usar uma estrutura é que se trata de uma API de nível mais alto que 
permite fazer mais com menos código. Uma estrutura bem escrita também vai tratar de 
muitos dos problemas de compatibilidade, segurança e acessibilidade”.
 Assim, mais recentemente, a experiência na utilização dos frameworks passou 
a ser essencial no trabalho dos desenvolvedores, de modo que é muito importante e 
necessário conhecer, pelo menos basicamente, os mais usados no cotidiano. No cenário 
do desenvolvimento web front-end, há vários deles disponíveis e bem conceituados nos 
quesitos confiabilidade, escalabilidade, robustez e segurança. Como exemplos, podemos 
citar o Angular, Vue e React.
 Angular é um framework open-source (de código aberto) desenvolvido pela 
empresa Google em parceria com vários desenvolvedores ao redor do mundo. Sua 
primeira versão ficou conhecida como AngularJS. No entanto, os desenvolvedores 
remodelaram completamente o framework, incorporando novas práticas, metodologias 
e lições aprendidas a partir da versão inicial (GUEDES, 2017).
 Nosso destaque será dado ao Angular 2, cuja base, estrutura, funcionamento e 
organização foram mantidos nas versões posteriores. Para fins didáticos, apenas o 
nome Angular será utilizado para se referir ao framework a partir da sua versão 2 em 
diante. No presente momento, a versão atual é o Angular 12, sendo o site oficial dos 
desenvolvedores encontrado no endereço https://angular.io/. Tal site é o local de referência 
para consultar a documentação completa do Angular, realizar download das versões e 
receber notícias acerca da ferramenta.
 Conforme explica Guedes (2017, p. 1), o Angular 2 é “um framework para 
desenvolvimento front-end com HTML, CSS e TypeScript que, no final, é compilado para 
VAMOS PENSAR?
O desenvolvedor web front-end precisa conhecer todos os frameworks modernos disponíveis 
no mercado? Isso seria razoável e produtivo?
67
 Após a instalação dos sofwares/aplicativos elencados no Quadro 6, é possível criar 
projetos baseados no Angular. Um destaque especial deve ser dado ao Angular CLI 
(Command Line Interface), pois “traz uma série de comandos para executar determinadas 
tarefas, retirando a responsabilidade do programador em codificar tudo no projeto” 
(GUEDES, 2017, p. 32). A interface Angular CLI possui diversos comandos úteis para a 
criação e gerenciamento de projetos que utilizem o framework Angular. O Quadro 7 
apresenta a nomenclatura e descrição dos mais importantes e utilizados.
Comando Descrição
ng new <nome do projeto> Cria um novo projeto numa estrutura de pas-
tas, contendo todos os arquivos necessários 
para a aplicação.
ng serve Cria um servidor local para a execução das 
aplicações via navegador.
ng generate Cria todos os objetos necessários ao projeto, 
como, por exemplo, componentes.
JavaScript”. Sua utilização possibilita a criação de páginas web simples até a construção 
de grandes aplicações e sistemas robustos, incluindo aplicativos mobile, isto é, para 
dispositivos móveis.
 A documentação oficial destaca que o desenvolvimento com Angular é baseado em 
componentes. Cita que “componentes definem áreas de responsabilidade na interface 
do usuário que permitem reutilizar conjuntos de funcionalidades” (GOOGLE, 2022). 
Assim, componentes são blocos de construção que compõem uma aplicação. Outra 
característica fundamental de Angular é o desenvolvimento de soluções web front-end 
baseadas em SPA (Single Page Applications), cujo principal objetivo é concentrar toda 
a funcionalidade da aplicação numa única página gerenciadora do conteúdo, tráfego e 
demais fluxos.
 Em seu livro, Guedes (2017) ensina o passo-a-passo para a configuração do ambiente 
de desenvolvimento para a utilização do Angular. Como o autor destaca, Angular trabalha 
em associação com várias ferramentas de desenvolvimento, como Typescript, Node.JS, 
NPM etc. O Quadro 6 sintetiza tais passos, destacando os locais oficiais para download 
das ferramentas e artefatos necessários ou, caso não seja preciso realizar o download, os 
comandos para a instalação direta. É muito importante ressaltar que tal configuração 
é destinada ao sistema operacional Windows, havendo algumas variações para outros 
sistemas operacionais, como Linux e MacOS. Tais variações devem ser consultadas nos 
sites oficiais dos mantenedores de cada ferramenta, onde os mesmos destacam os 
comandos e procedimentos voltados para cada sistema operacional específico. 
Software/Aplicativo Download/Comando Comando para 
verificação da 
instalação
Node.js https://nodejs.org/ node -v
NPM (node package manager) Vem com o Node.js npm -v
Typescript npm install -g typescript tsc -v
Anglular CLI npm install -g anglular-cli ng -v
Quadro 6: Softwares/Aplicativos necessários para o desenvolvimento com Angular
Fonte: Próprio autor (2022).
68
ng lint Organiza o código de acordo com as boas 
práticas de programação definidas na docu-
mentação do Angular.
ng test Executa testes unitários dos componentes do 
projeto.
Quadro 7: Comandos mais utilizados do Angular CLI
Fonte: Adaptado de Guedes (2017).
Após o AngularJS, o Angular 2 em diante foi totalmente reescrito e remodelado. Assim, não 
é mais recomendado o estudo do AngularJS se você deseja aprender a utilizar o Angular 
em seus projetos. Comece pelo Angular 2 e posterior.
FIQUE ATENTO
 Então, agora é possível criar um projeto baseado no Angular. Assim, escolha uma 
pasta onde deseja que o projeto fique localizado. Nessa pasta, digite o comando ng new 
<nome do seu projeto>. A conexão com a internet deve estar ativa, uma vez que, todas 
as dependências para o projeto Angular serão baixadas, automaticamente. Para abrir 
o projeto e visualizar toda a estrutura padrão montada pelo Angular CLI é muito útil 
e interessante a utilização de uma IDE. Como exemplo, utilize o Visual Studio Code ou 
qualquer outra de sua preferência.
 Após a criação do projeto, acesse o prompt de comando da sua IDE ou do próprio 
sistema operacional e digite ng serve para executar o servidor local na sua máquina. 
Nesse ponto, é fundamental observar as mensagens que aparecem na tela do terminal 
de comando. Se tudo ocorreu bem, você deverá observar a mensagem indicando que o 
serviço foi iniciado com sucesso, bem como a porta onde o mesmo está sob execução. 
Nesse ponto, abra o navegador de internet de sua preferência e digite a instrução 
localhost:porta, onde o número da porta é o mesmo mostrado no prompt de comando 
após a execução de ng serve. Como exemplo, a Figura 20 mostra a execução de um 
projeto nomeado como “my-first-app!” baseado no Angular num navegador de internet 
do usuário:
Figura 20: Projeto Angular executando no navegador de internet
Fonte: Próprio autor (2022).
69
Quadro 8: Softwares/Aplicativos necessários para o desenvolvimento com Vue.js
Fonte: Próprio autor (2022).
 Ademais, as próximas seções são dedicadas a apresentar as funcionalidades dos 
frameworks, Vue e React, dando um foco especial ao React.
 Após a instalação dos sofwares/aplicativos elencados no Quadro 8 é possível criar 
projetos baseados no Vue. Note que, semelhante ao Angular, Vue possui sua interface de 
linha de comandospara a rápida criação de projetos e ajuda ao desenvolvedor front-end. 
Conforme destaca Incau (2017, p. 10), a Vue CLI (Command Line Interface) disponibiliza 
“templates para diversos workflows diferentes. Em poucos minutos, podemos ter uma 
aplicação rodando com diversas tarefas predefinidas”. Dessa maneira, a utilização da 
Vue CLI é a melhor escolha para a gerência dos projetos com Vue, pois facilita todos os 
6.2 VUE
 Vue.js ou, simplesmente, Vue (se pronuncia View) também é um moderno 
framework front-end open-source (código aberto). Foi criado por Evan You em 2014, 
à época colaborador na Google Creative Labs (INCAU, 2017). Semelhante ao Angular, 
Vue utiliza a metodologia SPA para o desenvolvimento web, simplificando a gerência 
de conteúdos e fluxos e proporcionando uma melhor experiência de navegação para o 
usuário final.
 Conforme aponta Incau (2017, p. 2), embora Vue tenha “nascido como uma 
ferramenta de prototipação rápida, agora ele já pode ser usado para criação de grandes 
e escaláveis aplicações reativas”. Como exemplos, o autor cita duas grandes empresas da 
área da tecnologia moderna que utilizam Vue: Xiaomi e Alibaba.
 Um dos grandes diferenciais de Vue é o fato de não ser intrusivo, ou seja, não 
possue código e estrutura rígidos que forcem o desenvolvedor a seguir estritamente um 
padrão no desenvolvimento das aplicações, como acontece com o Angular, por exemplo. 
Assim, a maioria da codificação de Vue é feita com a linguagem Javascript pura, sendo 
limpo e claro. Outra característica muito atraente de Vue é a sua alta flexibilidade, pois 
pode trabalhar em conjunto com várias bibliotecas úteis disponíveis atualmente.
 A documentação oficial completa do framework Vue pode ser encontrada em 
https://vuejs.org/. É fundamental consultá-la a fim de entender o funcionamento da 
ferramenta e acessar exemplos de aplicações disponíveis gratuitamente. Adicionalmente, 
é possível encontrar uma comunidade brasileira muito forte que trabalha e contribui 
com Vue em https://br.vuejs.org/. No presente momento, a versão atual estável é Vue 
3.2.45.
 Na obra de Incau (2017) é possível acessar um passo a passo para a configuração 
do ambiente de desenvolvimento para a utilização do Vue.js. Como o autor destaca, 
Vue trabalha em associação com várias ferramentas de desenvolvimento. O Quadro 8 
resume tais passos, destacando os locais oficiais para download das ferramentas ou os 
comandos necessários para a instalação no sistema operacional Windows. 
Software/Aplicativo Download/Comando Comando para 
verificação da instalação
Node.js https://nodejs.org/ node -v
NPM (node package manager) Vem com o Node.js npm -v
Vue CLI npm install --global vue-cli vue -V
70
processos que envolvem desde a criação até a publicação da aplicação desenvolvida.
 Assim como a Angular CLI, a Vue CLI disponibiliza uma gama de comandos para a 
utilização do Vue como framework front-end. O Quadro 9 apresenta a nomenclatura e 
descrição dos mais importantes e utilizados.
Comando Descrição
vue create <nome do projeto> Cria um novo projeto numa estrutura de pastas, 
contendo todos os arquivos necessários para a 
aplicação.
npm run serve Cria um servidor local para a execução das 
aplicações via navegador.
npm run lint Organiza o código de acordo com as boas práticas 
de programação definidas na documentação do 
Vue.
Quadro 9: Comandos mais utilizados da Vue CLI
Fonte: Próprio autor (2022).
 Perceba que os comandos são bastante semelhantes aos da Angular CLI, mudando 
apenas parte da nomenclatura de alguns. É muito importante conhecer e entender os 
comandos mais utilizados estudando a documentação oficial do framework.
 Então, agora é possível criar um projeto baseado no Vue.js. Assim, escolha uma 
pasta onde deseja que o projeto fique localizado. Nessa pasta, digite o comando vue 
create <nome do seu projeto>. As mesmas sugestões para projetos Angular são válidas 
aqui: a utilização de uma IDE de sua preferência ajudará muito o seu trabalho como 
desenvolvedor web front-end; a conexão com a internet deve estar ativa, uma vez que, 
todas as dependências para o projeto Vue serão baixadas, automaticamente.
 Após a criação do projeto, acesse o prompt de comando da sua IDE ou do próprio 
sistema operacional e, dentro da pasta raiz, digite npm run serve para executar o servidor 
local na sua máquina. Dê atenção às mensagens que aparecem na tela do terminal de 
comando. Se tudo ocorreu bem, você deverá observar a mensagem indicando que o 
serviço foi iniciado com sucesso. Por padrão, Vue utiliza a porta 8080 para suas aplicações. 
Dessa forma, para visualizar a aplicação executando, basta digitar localhost:8080 na 
barra de endereços do navegador de internet. Como exemplo, a Figura 21 apresenta a 
execução de um novo projeto nomeado como “hello-myapp” baseado no Vue.js num 
navegador de internet do usuário:
Figura 21: Projeto Vue executando no navegador de internet
Fonte: Próprio autor (2022).
71
Quadro 10: Comandos mais utilizados da Create React CLI
Fonte: Próprio autor (2022).
 Note a simplicidade na criação de uma aplicação que utiliza o React como 
framework front-end. Com apenas dois comandos simples é possível criar toda a 
estrutura do projeto e disponibilizar a aplicação para execução via navegador.
 Realizados tais passos, é importante testarmos a ferramenta através de um 
exemplo. Nesse contexto, a última seção desta unidade tem por objetivo demonstrar a 
criação de um projeto básico utilizando o framework React.
 Com as ferramentas mencionadas na seção anterior devidamente instaladas, 
escolha uma pasta que será o local da aplicação a ser desenvolvida. Vá até essa pasta e, 
utilizando o prompt de comandos do sistema operacional ou o terminal de comandos 
de sua IDE, digite o comando: npx create-react-app first-react-app. Assim, toda a 
estrutura do projeto será criada. Para visualizar essa estrutura de pastas e arquivos, 
uma sugestão importante é abrir a pasta raiz da aplicação utilizando uma IDE. As IDEs 
modernas mostram toda a árvore organizada, muitas vezes identificando os arquivos 
6.3 REACT
6.4 EXEMPLO DE PROJETO COM REACT
 React, também referenciado com React.js ou ReactJS, é um framework Javascript 
destinado ao desenvolvimento web front-end. Assim como Angular e Vue, React é de 
código aberto e possui uma grande comunidade de colaboradores espalhados pelo 
planeta. Sua documentação oficial pode ser encontrada em português no site oficial 
https://pt-br.reactjs.org/.
 O framework React foi criado em 2011 pelo Facebook sendo, atualmente, mantindo 
também pelo Instagram e parceiros comerciais e individuais. Foi criado com foco no 
desenvolvimento de interfaces web ricas para o usuário, de forma componentizada e 
modular, à semelhança dos seus principais concorrentes, Angular e Vue (FACEBOOK, 
2022).
 A criação de aplicações utilizando React exige apenas dois requisitos: gerenciador 
de pacotes npm instalado e, também, o Nodejs. Novamente, a utilização de uma IDE de 
sua preferência é recomendada, uma vez que, facilita a codificação, a organização e a 
visualização da estrutura do projeto de maneira hierárquica.
 À semelhança de Angular e Vue, o React possui sua própria CLI (Command Line 
Interface), que disponibiliza uma gama de comandos para a gerência completa dos 
projetos construídos com o framework. Essa interface de linha de comandos deve ser 
instalada com o comando npm install -g create-react-app.
Ademais, o Quadro 10 apresenta a nomenclatura e descrição dos comandos mais 
importantes e utilizados disponibilizados pela Create React CLI:
Comando Descrição
npx create-react-app <nome do projeto> Cria um novo projeto numa estrutura de pastas, 
contendo todos os arquivos necessários para a 
aplicação.
npm start Cria um servidor local para a execução das 
aplicações via navegador.
72
Pratique implementando os diversos exemplos disponíveis nas documentações oficiais dos 
três frameworks que destacamos: Angular, Vue e React. Apenas com muito treinamento 
você irá adquirir maturidadee experiência no desenvolvimento web front-end profissional 
com frameworks modernos e Javascript.
BUSQUE POR MAIS
por tipos de linguagem de programação que contêm.
 Uma vez criada a aplicação e dentro da pasta raiz dela, execute o comando npm 
start. Um servidor local será iniciado, o qual ficará responsável por receber e responder 
às requisões do navegador de internet. Por padrão, tal servidor utiliza a porta 3000 para 
servir as aplicações clientes. Como exemplo, a Figura 22 apresenta a execução de um 
novo projeto nomeado como “first-react-app” baseado no React num navegador de 
internet do usuário:
Figura 22: Projeto React executando no navegador de internet
Fonte: Próprio autor (2022).
73
FIXANDO O CONTEÚDO
1. No contexto do desenvolvimento de software, ____________ são estruturas que 
disponibilizam códigos por meio de componentes e artefatos que auxiliam os 
desenvolvedores na construção de suas soluções. A lacuna deve ser preenchida pelo 
item:
a) Blocos.
b) Arquétipos.
c) Javascript.
d) Frameworks.
e) Diagramas.
2. Foi criado em 2011 pela empresa Facebook, sendo atualmente mantida pela mesma e 
por vários parceiros comerciais e individuais. Esse framework é:
a) Vue. 
b) Laravel.
c) Zend.
d) Angular.
e) React.
3. O comando ng new <nome do projeto> cria um novo comando em aplicações 
utilizando o framework:
a) React.
b) Angular.
c) Dojo.
d) Vue.
e) Django.
4. Dentre as alternativas a seguir, escolha aquela que descreve o gerenciador de pacotes 
necessário pela maioria dos frameworks front-end modernos:
a) nmp.
b) npm.
c) ng.
d) yast.
e) cli.
5. O comando npm start é responsável por inicial o servidor local em projetos baseados 
no framework.
a) React.
b) Vue.
74
c) Angular.
d) Yast.
e) CodeIgniter.
6. Dentre as alternativas a seguir, escolha aquela que cria um servidor local para a 
execução das aplicações via navegador de internet em aplicações baseadas no Vue.js:
a) npm start.
b) npm serve.
c) npm init.
d) ng init
e) npm run serve.
7. A partir de sua segunda versão, foi totalmente reescrito e remodelado, incorporando 
novas práticas, metodologias e lições aprendidas a partir da versão inicial. O framework 
citado é:
a) Laravel.
b) React.
c) Angular.
d) Vue.js.
e) Django.
8. No contexto do desenvolvimento web front-end, dentre as alternativas a seguir, 
escolha a correta:
a) Frameworks como Angular, Vue e React não possuem boa integração com a linguagem 
Javascript.
b) A utilização de uma IDE (Integrated Development Environment) é obrigatória no 
desenvolvimento utilizando frameworks modernos.
c) A utilização de uma IDE (Integrated Development Environment) facilita muito o 
trabalho do desenvolvedor ao utilizar frameworks em seus projetos.
d) O React, a partir de sua segunda versão, foi totalmente reescrito e remodelado.
e) O Vue.js foi descontinuado a partir de 2021.
75
RESPOSTAS DO FIXANDO O CONTEÚDO
UNIDADE 1
UNIDADE 3
UNIDADE 5
UNIDADE 2
UNIDADE 4
UNIDADE 6
QUESTÃO 1 C
QUESTÃO 2 D
QUESTÃO 3 B
QUESTÃO 4 A
QUESTÃO 5 B
QUESTÃO 6 E
QUESTÃO 7 E
QUESTÃO 8 C
QUESTÃO 1 C
QUESTÃO 2 B
QUESTÃO 3 C
QUESTÃO 4 E
QUESTÃO 5 D
QUESTÃO 6 A
QUESTÃO 7 C
QUESTÃO 8 A
QUESTÃO 1 D
QUESTÃO 2 C
QUESTÃO 3 C
QUESTÃO 4 B
QUESTÃO 5 E
QUESTÃO 6 A
QUESTÃO 7 E
QUESTÃO 8 E
QUESTÃO 1 C
QUESTÃO 2 D
QUESTÃO 3 B
QUESTÃO 4 C
QUESTÃO 5 A
QUESTÃO 6 E
QUESTÃO 7 D
QUESTÃO 8 E
QUESTÃO 1 C
QUESTÃO 2 D
QUESTÃO 3 E
QUESTÃO 4 B
QUESTÃO 5 E
QUESTÃO 6 C
QUESTÃO 7 A
QUESTÃO 8 A
QUESTÃO 1 D
QUESTÃO 2 E
QUESTÃO 3 B
QUESTÃO 4 B
QUESTÃO 5 A
QUESTÃO 6 E
QUESTÃO 7 C
QUESTÃO 8 C
76
REFERÊNCIAS BIBLIOGRÁFICAS
DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e desenvolvimento Web 
para programadores. Tradução: Célia Taniwaki e Daneil Vieira. São Paulo: Pearson, 2008.
FACEBOOK. React: a javascript library for building user interfaces. Disponível em: 
<https://reactjs.org/>. Accesso em: 20 nov. 2022.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 
6. ed. Bookman Companhia Editora, 2013.
GOOGLE. Angular. Disponível em: <https://angular.io/>. Accesso em: 19 nov. 2022.
GUEDES, T. Crie aplicações com Angular: o novo framework do Google. Editora Casa 
do Código, 2017.
INCAU, C. Vue. js: Construa aplicações incríveis. Editora Casa do Código, 2017.
MDN. JavaScript básico. Disponível em: <https://developer.mozilla.org/pt-BR/docs/
Learn/Getting_started_with_the_web/JavaScript_basics>. Acesso em: 5 out. 2022.
SEGURADO, V. S. Projeto de interface com o usuário. São Paulo, SP. Pearson, 2016.
ZANETTI, H. A. P. (coautor). JavaScript descomplicado: programação para a Web, 
loT e dispositivos móveis. São Paulo: Erica, 2020. Disponível em: <https://integrada.
minhabiblioteca.com.br/books/9788536533100>. Acesso em: 05 out. 2022
77
graduacaoead.faculdadeunica.com.br