DS - Web design Avancado [2022] (1)

Prévia do material em texto

Curso Técnico em 
Desenvolvimento de 
Sistemas 
 
Web design Avançado 
Fagner Barbosa Silva Pontes 
 
 
 
 
 
 
 
 
 
 
 
Curso Técnico em 
Desenvolvimento de Sistemas 
 
Web design Avançado 
Fagner Barbosa Silva Pontes 
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa 
 
Educação a Distância 
 
Recife 
 
1.ed. | Setembro 2022 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Catalogação e Normalização 
Hugo Cavalcanti (Crb-4 2129) 
 
Diagramação 
Jailson Miranda 
 
Coordenação Executiva 
George Bento Catunda 
Renata Marques de Otero 
Kátia Karina Paulo dos Santos 
 
Coordenação Geral 
Maria de Araújo Medeiros Souza 
Maria de Lourdes Cordeiro Marques 
 
Secretaria Executiva de 
Educação Integral e Profissional 
 
Escola Técnica Estadual 
Professor Antônio Carlos Gomes da Costa 
 
Gerência de Educação a distância 
 
 
Professor(es) Autor(es) 
Fagner Barbosa Silva Pontes 
 
Revisão 
Fagner Barbosa Silva Pontes 
 
Coordenação de Curso 
José Américo Teixeira de Barros 
 
Coordenação Design Educacional 
Deisiane Gomes Bazante 
 
Design Educacional 
Ana Cristina do Amaral e Silva Jaeger 
Helisangela Maria Andrade Ferreira 
Izabela Pereira Cavalcanti 
Jailson Miranda 
Roberto de Freitas Morais Sobrinho 
 
Descrição de imagens 
Sunnye Rose Carlos Gomes 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sumário 
Introdução ........................................................................................................................................ 6 
1.Competência 01 | Conhecer os Fundamentos do JavaScript ......................................................... 7 
1.1 Um pouco de história ........................................................................................................................... 7 
1.2 Visão Geral ........................................................................................................................................... 7 
1.3 Definição de JavaScript ......................................................................................................................... 8 
1.4 Criando arquivos JavaScript (*.js), HTML (*.html) e CSS (*.css) .............................................................10 
1.4.1 Criando arquivo JavaScript através do editor de texto: ..................................................................10 
1.4.2 Criando arquivo JavaScript diretamente no diretório: ...................................................................10 
1.4.3 Criando arquivo HTML através do editor de texto: ........................................................................11 
1.4.4 Criando arquivo HTML diretamente no diretório: ..........................................................................11 
1.4.5 Criando arquivo CSS através do editor de texto: ............................................................................11 
1.4.6 Criando arquivo CSS diretamente no diretório: .............................................................................11 
1.5 Inserindo um script JavaScript em um arquivo HTML. ......................................................................12 
1.5.1 Script embutido no HTML: ............................................................................................................12 
1.5.2 Script externo inserido por referência: ..........................................................................................13 
1.6 Janelas de diálogos com JavaScript ......................................................................................................14 
1.6.1 Janela de Alerta, método alert(): ...................................................................................................14 
1.6.2 Janela de Confirmação, método confirm(): ....................................................................................15 
1.6.3 Janela de Requisição, método prompt(): .......................................................................................17 
2.Competência 02 | Conhecer as Técnicas de Programação Procedural com o JavaScript ............. 19 
2.1 Variáveis ..............................................................................................................................................19 
2.1.1 Variáveis Primitivas .......................................................................................................................19 
2.1.2 Variáveis Objetos ..........................................................................................................................20 
2.2 Declaração das variáveis: .................................................................................................................20 
2.2.1 Diferença entre tipos primitivos e objetos:....................................................................................22 
2.2.2 Diferença entre as declarações var e let: .......................................................................................24 
2.3 Operadores matemáticos, incrementais e lógicos ................................................................................25 
2.3.1 Operadores matemáticos: .............................................................................................................25 
2.3.2 Operadores incrementais: .............................................................................................................26 
2.3.3 Operadores lógicos: ......................................................................................................................28 
2.4 Estruturas Condicionais .......................................................................................................................29 
2.4.1 if. [se] ...........................................................................................................................................29 
2.4.2 if - else. [se - senão] ......................................................................................................................30 
2.4.3 if - else if. [se - senão se] ...............................................................................................................31 
2.4.4 if - else if - else. [se - senão se - senão] ..........................................................................................32 
2.4.5 Estrutura condicional aninhada .....................................................................................................34 
2.4.6 Operador condicional ternário ......................................................................................................36 
2.5 Estrutura condicional switch - case ......................................................................................................37 
2.6 Estruturas de repetição (iterações): for, while, do - while. ...................................................................40 
2.6.1 for.................................................................................................................................................40 
2.6.2 while .............................................................................................................................................41 
2.6.3 do - while ......................................................................................................................................42 
2.7 Instruções de controle de fluxo ............................................................................................................44 
 
 
 
 
 
 
2.7.1 break ............................................................................................................................................44 
2.7.2 return ...........................................................................................................................................46 
2.7.3 continue .......................................................................................................................................473.Competência 03 | Conhecer as Técnicas de Programação Orientada a Objetos com o JavaScript
 ........................................................................................................................................................ 49 
3.1 Objetos Globais ...................................................................................................................................50 
3.1.1 Number ........................................................................................................................................50 
3.1.2 Math .............................................................................................................................................51 
3.1.3 Date ..............................................................................................................................................52 
3.1.4 String ............................................................................................................................................54 
3.1.5 Array .............................................................................................................................................55 
3.2 Criando um objeto em JavaScript ........................................................................................................57 
3.1.1 Utilizando inicializadores de objetos: ............................................................................................57 
3.1.2 Utilizando funções construtoras: ...................................................................................................59 
3.1.3 Utilizando o método Object.create ...............................................................................................60 
3.3 Atribuindo valores a um objeto através da entrada de dados (input) ...................................................62 
4.Competência 04 | Conhecer os Fundamentos do jQuery ............................................................ 69 
4.1 Instalação do jQuery: ...........................................................................................................................69 
4.2 Inserindo o arquivo jQuery no seu arquivo HTML. ................................................................................71 
4.3 Sintaxe básica de comandos jQuery. ....................................................................................................71 
4.4 Seletores. ............................................................................................................................................71 
4.5 Manipulação de contextos HTML e CSS................................................................................................72 
4.5.1 Eventos: ........................................................................................................................................72 
4.5.2 Métodos: ..........................................................................................................................................77 
5.Competência 05 | Utilizar os Efeitos do JQuery ......................................................................... 102 
5.1 Efeitos: ..............................................................................................................................................102 
6.Competência 06 | Utilizar o Bootstrap Framework ................................................................... 113 
6.1 Utilização do Bootstrap......................................................................................................................114 
6.1.1 Hospedando o arquivo Bootstrap ................................................................................................114 
6.1.2 Incorporando Bootstrap ao seu projeto ......................................................................................115 
6.2 Classes Bootstrap ..............................................................................................................................117 
6.3 Plugins Bootstrap...............................................................................................................................132 
Conclusão ..................................................................................................................................... 142 
Referências ................................................................................................................................... 143 
Minicurrículo do Professor ........................................................................................................... 144 
 
 
 
 
 
 
 
 
 
 
6 
Introdução 
Olá, estudante! 
Esse material foi desenvolvido para auxiliar você em seu processo de aprendizagem no 
Curso Técnico de Desenvolvimento de Sistemas, mais especificamente, na disciplina de Web Design 
Avançado. 
O curso é ministrado em uma modalidade semipresencial proporcionando ao estudante 
o suporte tecnológico da web com um modelo EAD (Ensino à Distância) onde estudante e professor 
não precisam estar geograficamente no mesmo local, pois, com o uso da internet o estudante pode 
acessar os materiais produzidos através de um ambiente virtual. Entretanto, serão realizadas 
atividades presenciais, onde você poderá fazer uma troca de experiência e realizar atividades, 
interagindo de uma maneira mais pessoal. 
É recomendado que você utilize todos os materiais e recursos disponibilizados no 
Ambiente Virtual de Aprendizagem (AVA), a fim de obter um melhor rendimento em seu aprendizado. 
Através do Ambiente Virtual de Aprendizagem será possível; acessar o e-Book da disciplina, assistir 
às vídeo aulas, acompanhar os Podcasts, interagir e tirar dúvidas através dos Fóruns, realizar 
atividades e avaliações, bem como acompanhar o seu desempenho. 
Está disciplina abordará a linguagem de programação JavaScript, você verá um pouco 
sobre sua história, evolução e aplicabilidade, mas o foco será em como utilizar essa linguagem de 
programação para tornar páginas da web (arquivos HTML - Hypertext Markup Language) mais 
dinâmicas, interativas, interessantes e atraentes. 
Esperamos que este material contribua com seu desenvolvimento pessoal e profissional. 
Desejamos a todos um bom estudo!!! 
 
 
 
 
 
 
 
 
7 
1.Competência 01 | Conhecer os Fundamentos do JavaScript 
1.1 Um pouco de história 
 
A linguagem de programação JavaScript foi desenvolvida por Brendan Eich um 
engenheiro da empresa Netscape no ano de 1995 e foi lançada em 1996. Seu nome original foi 
LiveScript e posteriormente foi renomeada para JavaScript. Deve-se ter cuidado para não confundir 
com a linguagem de programação java desenvolvida pela empresa Sun Microsystem. atualmente a 
linguagem JavaScript pertence a Oracle assim como a linguagem java. 
Desde então o JavaScript tem sido utilizada amplamente em vários segmentos no 
desenvolvimento de sistemas. A linguagem foi projetada para atuar em ambiente de terceiro, como 
um script no código fonte. Devido a esta característica o JavaScript não possui o conceito de entrada 
e saída e é de responsabilidade do ambiente promover mecanismos para a comunicação entre a 
linguagem e o exterior. 
Os ambientes mais famosos onde existem aplicações do JavaScript são os Navegadores 
(Brownsers), como por exemplo; o Google Chrome, o FireFox e o Microsoft Edge. Entretanto, muitos 
outros ambientes utilizam interpretadores JavaScript como; banco de dados, editores de texto, 
editores de imagem, ambientes de servidores, e muitos outros. 
1.2 Visão Geral 
Nesta disciplina, você vai utilizar o JavaScript com o objetivo de tornar as páginas da web 
mais dinâmicas. Dessa forma, precisaremos utilizar alguns recursos que irão auxiliar nesse processo: 
• Navegador de internet (Browser): Google Chrome, Firefox, Microsoft Edge... 
• Editor de Arquivo: Notepad++, Note, Bloco de Notas, Apache NetBeans IDE, Visual 
Studio... 
O processo de aprendizagem ocorrerá de forma gradual visandouma evolução tranquila 
quanto a inclusão de novos conteúdos. Para editar os códigos utilizaremos o editor Notepad++ devido 
Antes de começar acesse o AVA, ouça o podcast e saiba o que você estudará 
nesta primeira competência. Te espero lá. 
 
 
 
 
 
 
8 
a sua funcionalidade de autocompletar o código. E para visualizar os arquivos utilizaremos qualquer 
Navegador de Internet. 
Alternativamente você pode utilizar qualquer outro editor. O Apache NetBeans IDE é uma 
boa alternativa pois é um software OpenSource (código aberto) que pertence a Oracle, empresa 
proprietária da linguagem JavaScript. O Apache NetBeans IDE além de possuir o recurso auto 
complementar também disponibiliza a identificação de erros. 
Outra possibilidade é utilizar uma ferramenta online para edição do seu código. Como por 
exemplo: 
• https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor 
• https://playcode.io/new/ 
• https://jsfiddle.net/ 
 
1.3 Definição de JavaScript 
JavaScript é uma linguagem de programação scripting, ou seja, interpretada em um 
ambiente de terceiro. Também é uma linguagem multiparadigma, permitindo que a linguagem 
suporte mais de um paradigma de programação, podendo atuar como uma linguagem procedural ou 
como uma linguagem orientada a objetos. 
Diferentemente de algumas linguagens de programação o JavaScript foi desenvolvido 
para rodar no lado cliente da web, por essa razão, a linguagem se tornou uma ferramenta poderosa 
e largamente utilizada para manipular o comportamento de páginas web de forma mais rápida e 
dinâmica, pois o código é interpretado diretamente no lado do cliente pelo Navegador (Browser). 
Outra característica importante é que o JavaScript é uma linguagem de tipagem dinâmica, isso 
implica dizer que os tipos de dados das variáveis não precisão ser declarados. 
A linguagem JavaScript possui uma sintaxe similar à outras linguagens orientadas a 
objetos como o Java e o C++. Entretanto, diferentemente dessas linguagens o JavaScript não possui 
É possível obter o Notepad++ no seu site oficial: 
https://notepad-plus-plus.org/downloads 
https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor
https://playcode.io/new/
https://jsfiddle.net/
https://notepad-plus-plus.org/downloads
 
 
 
 
 
 
9 
o conceito de classe, sendo sua programação baseada em protótipos e com funções de primeira 
classe. A programação baseada em protótipos é um tipo específico de programação orientada a 
objetos onde o comportamento de herança é realizado através de um processo de reutilização de 
objetos existentes chamados de protótipos. Os protótipos são objetos generalizados que podem ser 
clonados e estendidos além de permitir que propriedades e métodos, de qualquer objeto, sejam 
adicionados dinamicamente. Funções de primeira classe são funções que podem ser manipulas da 
mesma forma que um objeto, no caso das funções de primeira classe esses objetos são conhecidos 
por cidadãos de primeira classe ou objetos de primeira classe e como os demais objetos podem ser 
passados como argumentos, retornados de uma função e atribuídos a uma variável. 
 
Outra característica importante que não pode ser esquecida é que a linguagem JavaScript 
é case sensitive, isso significa que valores em caixa alta (maiúsculos) são diferentes de valores em 
caixa baixa (minúsculos). Dessa forma, comandos e declarações com o mesmo conteúdo, mas que 
possuam alguma diferença de caixa alta ou caixa baixa em seu corpo, serão tratados de forma 
diferente: var Nome é diferente de var nome e nome.GetSobrenome() é diferente de 
nome.getsobrenome(). 
Principais características do JavaScript: 
• Linguagem multiparadigma; 
• Não há distinção entre funções e objetos, funções podem ser passadas como 
argumento; 
• A herança é realizada através de um protótipo; 
• Propriedades e métodos podem ser adicionados a objetos dinamicamente; 
• Tipagem dinâmica, não há necessidade de declarar os tipos de dados das variáveis; 
• Linguagem Interpretada (não compilada). 
Atenção!!! 
Em 2015, foi introduzido na linguagem JavaScript o controlador class (classe). 
Entretanto as classes criadas em JavaScript são apenas simplificações para o 
modelo de herança por protótipo. O controlador class não introduz o conceito 
de classe atribuído às outras linguagens de programação. As classes podem ser 
entendidas como funções especiais. 
 
 
 
 
 
 
10 
• Case sensitive. 
Nesta disciplina você irá trabalhar com JavaScript juntamente com HTML e CSS. Veja a 
seguir como criar esses arquivos. De uma forma geral arquivos HTML, CSS e JavaScript são arquivos 
de texto com as respectivas extensões: (*.html), (*.css) e (*.js) que podem ser editados por qualquer 
editor de texto. 
1.4 Criando arquivos JavaScript (*.js), HTML (*.html) e CSS (*.css) 
Você verá duas maneiras de como criar arquivos, a primeira através de um editor de texto 
onde é definida a extensão do arquivo como sendo; (*.js), (*.html) e (*.css) assim que for salvo o 
arquivo em um diretório ou pasta. A segunda é diretamente no diretório ou pasta, onde criamos um 
documento de texto (*.txt) e em seguida alteramos sua extensão para (*.js), (*.html) e (*.css). 
1.4.1 Criando arquivo JavaScript através do editor de texto: 
1. Abra o Notepad++ 
2. No menu Arquivo, clique na opção: Novo 
3. Volte ao menu Arquivo e clique na opção: Salvar como 
4. Selecione o diretório onde o arquivo será salvo. 
5. No campo Nome renomeie o arquivo para: script_1. 
6. No campo Tipo selecione o tipo: JavaScript file (*.js;*.jsm;*.jsx) 
7. Clique em Savar. 
1.4.2 Criando arquivo JavaScript diretamente no diretório: 
1. No Explorador de Arquivos abra a pasta onde pretende criar o arquivo 
2. Click no botão direito do mouse e na opção Novo clique em Documento de Texto 
3. Renomeie o arquivo e altere sua extensão para: script_2.js . (para que seja possível 
alterar a extensão do arquivo o campo Extensões de nomes de arquivos, localizado no 
menu Exibir, deverá estar marcado). 
4. Confirme a alteração do arquivo na caixa de alerta sobre alteração de extensão de 
arquivos. 
5. Após esses procedimentos seus arquivos estarão criados. 
 
 
 
 
 
 
 
11 
1.4.3 Criando arquivo HTML através do editor de texto: 
1. Abra o Notepad++; 
2. No menu Arquivo, clique na opção: Novo; 
3. Volte ao menu Arquivo e clique na opção: Salvar como; 
4. Selecione o diretório onde o arquivo será salvo; 
5. No campo Nome renomeie o arquivo para: pagina_1; 
6. No campo Tipo selecione o tipo: Hyper Text Markup Language file 
(*.html;*.htm;*.shtml;*.shtm;*.xhtml;*.xht;*.hta). 
7. Clique em Salvar. 
1.4.4 Criando arquivo HTML diretamente no diretório: 
1. No Explorador de Arquivos abra a pasta onde pretende criar o arquivo; 
2. Click no botão direito do mouse e na opção Novo clique em Documento de Texto; 
3. Renomeie o arquivo e altere sua extensão para: pagina_2.html. (para que seja possível 
alterar a extensão do arquivo o campo Extensões de nomes de arquivos, localizado no 
menu Exibir, deverá estar marcado). 
4. Confirme a alteração do arquivo na caixa de alerta sobre alteração de extensão de 
arquivos. 
1.4.5 Criando arquivo CSS através do editor de texto: 
1. Abra o Notepad++; 
2. No menu Arquivo, clique na opção: Novo; 
3. Volte ao menu Arquivo e clique na opção: Salvar como; 
4. Selecione o diretório onde o arquivo será salvo; 
5. No campo Nome renomeie o arquivo para: style_1; 
6. No campo Tipo selecione o tipo: Cascade Style Sheets File (*.css); 
7. Clique em Salvar. 
1.4.6 Criando arquivo CSS diretamente no diretório: 
1. No Explorador de Arquivos abra a pasta onde pretende criar o arquivo; 
2. Click no botão direito do mouse e na opção Novo clique em Documento de Texto; 
 
 
 
 
 
 
12 
3. Renomeie o arquivo e altere sua extensão para: style_2.css. (para que seja possível 
alterar a extensão do arquivo o campo Extensões de nomes de arquivos, localizado no 
menu Exibir, deverá estar marcado). 
4. Confirme aalteração do arquivo na caixa de alerta sobre alteração de extensão de 
arquivos. 
1.5 Inserindo um script JavaScript em um arquivo HTML. 
Existem duas maneiras para programar com JavaScript em um documento HTML, a 
primeira é através de um script embutido diretamente no documento HTML (.html) entre suas tags. 
A segunda, é trabalhar com um script externo em um arquivo JavaScript (.js) e referenciar este arquivo 
no documento HTML. Veja a seguir um exemplo de cada uma dessas maneiras: 
1.5.1 Script embutido no HTML: 
Abra o Notepad++, clique no menu Arquivo e em seguida no item Abrir, Selecione a pasta 
onde você salvou o arquivo pagina_1.html, selecione o arquivo pagina_1.html, clique em Abrir. 
No documento pagina_1.html escreva o seguinte código: 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 document.write("Olá Mundo") 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
O código anterior apresenta o método document.write(“Olá Mundo”), esse método tem 
a função de escrever na página html a string atribuída em seu parâmetro no formato de texto. 
 
 
 
 
 
 
13 
 
 
Figura 1 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo a saída (Olá Mundo). 
1.5.2 Script externo inserido por referência: 
Abra o Notepad++, clique no menu Arquivo e em seguida no item Abrir, Selecione a pasta 
onde você salvou o arquivo script_1.js, selecione o arquivo script_1.js, clique em Abrir. 
No documento script_1.js escreva o seguinte código: 
 
document.write("Olá Mundo"); 
 
Agora salve as alterações no documento. 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <script src="script_1.js" type="text/JavaScript"></script> 
</head> 
<body> 
</body> 
</html> 
 
Lembre-se sempre de salvar as alterações no documento pois suas alterações 
só aparecerão no Navegador se você as salvar! 
Todo código escrito em linguagem JavaScript deverá estar entre as tags 
<script></script>. Verifique que é necessário adicionar o campo 
(type="text/javascript"), pois é dessa forma que informamos ao 
interpretador do navegador que este trecho é um complemento JavaScript! 
 
 
 
 
 
 
 
14 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
Através do campo (src="script_1.js) informamos qual arquivo queremos usar como 
referência no documento HTML, verifique que também precisamos informar o 
(type="text/JavaScript") para que o interpretador reconheça a linguagem como JavaScript. Esses 
campos sempre deverão estar dentro da tag <script> que por sua vês deverá estar dentro das tags 
<head></head>. 
1.6 Janelas de diálogos com JavaScript 
As janelas de diálogos são elementos que possuem a finalidade de promover uma 
interação entre o usuário e a página da internet, através dessas janelas o usuário pode receber 
alguma informação, passar uma informação ou realizar confirmações. 
1.6.1 Janela de Alerta, método alert(): 
O método alert() é utilizado para exibir ao usuário uma pequena mensagem através de 
uma caixa de diálogo. A janela aberta pelo método alert() necessita ser fechada pelo usuário, ou seja, 
ela precisa de confirmação para ser encerrada. O método alert() pode ser declarado de duas 
maneiras: 
1. window.alert(“mensagem”); 
2. alert(“mensagem”); 
Veja a seguir um exemplo do método alert() que exibe uma mensagem: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 alert("mensagem"); //Comando para exibir a janela de alerta 
 document.write("Olá Mundo"); //Comando para exibir o texto no navegador 
 </script> 
</body> 
</html> 
 
 
 
 
 
 
15 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 2 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo uma janela de alerta com a saída textual: mensagem. 
1.6.2 Janela de Confirmação, método confirm(): 
O método confirm() é utilizado para validar se o usuário quer realizar ou não uma ação. 
Este método exibe uma janela onde o usuário será questionado sobre a realização de uma ação e terá 
que responder clicando nos botões Ok ou Cancelar. O botão Ok retorna verdadeiro (true) e o botão 
Cancelar retorna falso (false). O método confirm() pode ser declarado de duas maneiras: 
1. window.confirm(“texto”); 
2. confirm (“texto”); 
Veja um exemplo de utilização do método confirm() onde será exibida uma janela de 
confirmação. Ao escolher uma das opções (Ok ou Cancelar) será exibido ao usuário o valor da variável 
de retorno do método confirm(). 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 opcao = confirm("Qual a sua opção ?"); //Variável que receberá o valor das opções (ok ou cancelar) 
 document.write("sua opção foi:" + opcao); //Comando para exibir o resultado no navegador 
 </script> 
</body> 
</html> 
 
 
 
 
 
 
16 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 3 - Navegador Google Chrome. 
Fonte: Navegador Google Chrome. 
Descrição da figura: Navegador de internet exibindo uma janela de confirmação com a saída de texto: Qual a sua 
opção? E dois botões alinhados lado a lado no canto inferior direito. O primeiro Botão possui o fundo azul e o texto OK 
o segundo contém o texto Cancelar. 
Agora clique no botão OK. 
 
Figura 4 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo a saída textual: sua opção foi: true. 
O código anterior possui o comando [document.write("sua opção foi:" + opcao);]. Observe 
que no valor passado para o método existem: 
1. uma string: "sua opção foi:" 
2. o símbolo de adição: + 
3. uma variável booleana: opcao. 
Observe também que o valor retornado pela função foi o texto: sua opção foi: true. Isso 
ocorre porque em JavaScript podemos adicionar conteúdo a uma string utilizando o símbolo +, bem 
como a função document.write converte automaticamente os tipos de dados para strings. Dessa 
forma, o valor booleano true da variável opcao foi convertido para a string: "true" e adicionado ao 
final da string: "sua opção foi:" retornando o texto: "sua opção foi: true". 
 
 
 
 
 
 
 
17 
1.6.3 Janela de Requisição, método prompt(): 
O método prompt() é utilizado quando a página precisa receber alguma informação do 
usuário. Uma janela é aberta para que o usuário digite alguma informação em formato de texto que 
será utilizada pela página. O método prompt() pode ser declarado de duas maneiras: 
1. window.prompt(“título/texto”); 
2. prompt(“título/texto”); 
Veja um exemplo do método prompt() onde será exibida uma janela pedindo para o 
usuário digitar o nome da cidade onde ele está situado. Após digitar será exibido no navegador o 
nome da cidade que foi digitada. 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var cidade; //Variável que receberá o valor digitado pelo usuário 
 cidade = prompt("Em qual cidade você está?"); //Método prompt com o texto/questionário 
 document.write("Você está em: " + cidade); //Exibição do texto digitadopelo usuário no navegador 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 5 - Navegador Google Chrome. 
Fonte: o autor. 
 
 
 
 
 
 
18 
Descrição da figura: Navegador de internet exibindo uma janela de requisição. A janela possui o texto: Em qual cidade 
você está? Abaixo do texto existe um campo retangular para a entrada da digitação. No canto inferior direito da janela 
existem dois botões alinhados lado a lado o primeiro possui um fundo azul e o texto: OK, o segundo possui o texto: 
Cancelar. 
Digite o nome da cidade onde você está e aperte OK. 
 
Figura 6 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o texto: Você está em: Recife. 
Chegamos ao final da competência 01. Nesta competência abordamos um pouco sobre a 
história da linguagem JavaScript, aprendemos sobre seus conceitos e sobre sua definição. Também 
observamos de quais maneiras podemos trabalhar com a linguagem JavaScript dentro de arquivos 
HTML (*.html) e vimos como funcionam os métodos de caixa de diálogo em páginas de internet. 
Agora vamos dar início a competência 2, onde iremos aprofundar nosso conhecimento em JavaScript. 
 
 
 
Agora que você concluiu a leitura da competência 01, está na hora de realizar 
a Atividade Semanal. Lembre-se que também é muito importante realizar a 
Atividade do Encontro Presencial. Aproveite o momento para testar seus 
conhecimentos. Bons estudos! 
 
Acesse o fórum da competência 01, lá você encontrará informações sobre as 
atividades e poderá tirar suas dúvidas, além de interagir e trocar 
conhecimento com os outros estudantes. 
 
Para ampliar seus conhecimentos acesse o AVA e assista à videoaula da 
competência e se por acaso você ainda estiver com alguma dúvida nos 
procure no fórum de dúvida da competência. 
 
 
 
 
 
 
 
19 
2.Competência 02 | Conhecer as Técnicas de Programação Procedural com 
o JavaScript 
 
2.1 Variáveis 
2.1.1 Variáveis Primitivas 
Valores primitivos são valores que não podem ser representados por objetos e 
consequentemente não existem métodos relacionados a eles. Na prática um valor primitivo é 
representado no nível mais baixo de implementação de uma linguagem. Em JavaScript existem 6 
(seis) tipos primitivos: 
• string: Como em toda linguagem de programação são dados constituídos por um ou 
mais caractere comumente usados para representar textos, as strings devem ser 
declaradas entre aspas simples (‘’) ou aspas duplas (“”); 
• number: É um tipo de dado numérico de dupla precisão em formato de ponto 
flutuante de 64 bits; 
• boolean: É um tipo de dado lógico que pode receber apenas um de dois valores 
possíveis: true (verdadeiro) ou false (falso); 
• null: Trata-se de um literal que representa um valor nulo; 
• undefined: Representa um dado que possui um valor indefinido, como uma variável 
que não teve um valor atribuído. 
• symbol: É um tipo de dado primitivo que armazena um único valor servindo como 
identificador único. 
 
Antes de começar acesse o AVA, ouça o podcast e saiba o que você estudará 
nesta Segunda competência. Te espero lá. 
 
 
 
 
 
 
20 
2.1.2 Variáveis Objetos 
São variáveis independentes que podem possuir um conjunto de propriedades e métodos 
relacionados a elas. Existem 5 (cinco) formas de variáveis objetos em JavaScript: 
• String: São dados constituídos por um ou mais caractere comumente usados para 
representar textos, as strings devem ser declaradas entre aspas simples (‘’) ou aspas 
duplas (“”); 
• Number: São dados numéricos sejam eles integer, float ou double; 
• Boolean: São os valores booleanos true e false; 
• Array: São coleções de valores, que podem ser de qualquer tipo; 
• Funções: Em JavaScript funções são objetos, ou seja, elas podem ser declaradas como 
variáveis e utilizadas como parâmetro em outras funções. 
2.2 Declaração das variáveis: 
Existem três maneiras de declarar variáveis em JavaScript: 
1. var: Declara uma variável de contexto global, independente do bloco de instrução 
(entre as chaves {}) onde foi criada, que possui atribuição dinâmica de escrita e leitura. 
Variáveis declaradas com var assumem contexto local se declaradas dentro de uma 
função. 
2. let: Declara uma variável de contexto local, só existem no escopo de bloco onde foram 
criadas (entre as chaves {}), que possui atribuição dinâmica de escrita e leitura; 
3. const: Declara uma variável constante apenas de leitura. 
A linguagem JavaScript possui a característica de ser dinamicamente tipada, por isso não 
é preciso identificar o tipo de dado quando a variável é declarada. Os tipos são identificados 
automaticamente. 
Para declarar variáveis primitivas precisamos atribuir um valor a elas quando forem 
criadas. Para declarar objetos utilizamos a expressão new + tipo_do_objeto(valor), observe a tabela 
abaixo: 
Declaração Tipo de dado 
var variavel; undefined 
var bool = false; boolean 
 
 
 
 
 
 
21 
var bool = new Boolean(false); object 
var num = 1; number 
var num = new Number(1); object 
var str = “texto”; string 
var str = new String(“texto”); object 
var array1 = [1,2,3,4,5]; //[elemento,elemento,...] object 
var array2 = new Array(1,2,3,4,5); //new Array(elemento,elemento, ...) object 
var array3 = new Array(5); // new Array(tamanho) object 
Quadro 1 - Tipos de variáveis 
Fonte: o autor 
Veja um exemplo em uma página HTML: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var variavel; 
 document.write("varivel = " + typeof variavel); 
 
 var boolPrimitivo = false; //Variável primitiva 
 var boolObjeto = new Boolean(false); //Variável objeto 
 document.write("<br>boolPrimitivo = " + typeof boolPrimitivo); //Comando para exibir no navegador 
 document.write("<br>boolObjeto = " + typeof boolObjeto); 
 
 var numberPrimitivo = 1; 
 var numberObjeto = new Number(1); 
 document.write("<br>numberPrimitivo = " + typeof numberPrimitivo); 
 document.write("<br>numberObjeto = " + typeof numberObjeto); 
 
 var stringPrimitivo = "texto do string primitivo"; 
 var stringObjeto = new String("texto do objeto string"); 
 document.write("<br>stringPrimitivo = " + typeof stringPrimitivo); 
 document.write("<br>stringObjeto = " + typeof stringObjeto); 
 
 
 
 
 
 
22 
 
 var array1 = [1, 2, 3, 4, 5]; //Array declaração: [elemento,elemento,elemento,...]; 
 var array2 = new Array(1, 2, 3, 4, 5); //Array declaração: new Array(elemento, ,elemento,...); 
 var array3 = new Array(5); //Array declaração: new Array(tamanho); 
 document.write("<br>array1 = " + typeof array1); 
 document.write("<br>array2 = " + typeof array1); 
 document.write("<br>array3 = " + typeof array1); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 7 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com a seguinte saída: variável = 
undefined, boolPrimitivo = boolean, boolObjecto = object, numberPrimitivo = number, numberObjeto = object, 
stringPrimitivo = string, stringObjecto = object, array1 = object, array2 = object, array3 = object. 
O código anterior apresenta o método typeof, esse método é utilizado quando se deseja 
saber qual o tipo de uma determinada variável. 
2.2.1 Diferença entre tipos primitivos e objetos: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript">23 
 var boolPrimitivo = false; 
 var boolObjeto = new Boolean(false); 
 if (boolPrimitivo) { //Esse teste retornará false 
 document.write("true <br>"); 
 } 
 else { 
 document.write("false <br>"); 
 } 
 if (boolObjeto) { //Esse teste retornará true 
 document.write("true <br>"); 
 } 
 else { 
 document.write("false <br>"); 
 } 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 8 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o resultado: fase, true. 
O código anterior mostra um exemplo de como a utilização de variáveis primitivas e 
variáveis objetos podem causar confusão. 
As duas variáveis boolPrimitivo e boolObjeto foram instanciadas como false, entretanto 
o teste condicional if() (você estudará mais detalhadamente sobre o teste condicional if() nesta 
competência no item 2.4 Estruturas Condicionais) testa o valor atribuído ao typeof da variável. No 
caso da boolPrimitivo seu typeof é boolean com valor false; no caso da boolObjeto seu typeof é 
object e como a variável foi iniciada o teste retorna true, ou seja, o teste está verificando se a variável 
boolObjeto é um object e não o seu valor lógico false. Por essa razão é sempre recomendado utilizar 
valores booleanos primitivos em testes condicionais nunca objetos booleanos. 
 
 
 
 
 
 
24 
 
2.2.2 Diferença entre as declarações var e let: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 { 
 var a = 1; 
 let b = 2; 
 document.write("Dentro do escopo {} var a = " + typeof a + " e let b = " + typeof b); 
 } 
 document.write("<br>Fora do escopo {} var a = " + typeof a + " e let b = " + typeof b); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 9 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o seguinte resultado: Dentro 
do escopo {} var a = number e let b = number, Fora do escopo{} var a = number e let b = undefined. 
 
Cuidado para não confundir os tipos primitivos com os objetos, note que o 
JavaScript faz distinção entre valores primitivos e objetos. Pois a utilização 
indevida deles pode causar confusão e levar a resultados inesperados. 
 
 
 
 
 
 
 
25 
No código anterior, a variável declarada como var continua existindo mesmo fora do 
escopo {} onde foi criada, por outro lado, a variável declarada como let só existe dentro do escopo {} 
onde foi criada. 
2.3 Operadores matemáticos, incrementais e lógicos 
2.3.1 Operadores matemáticos: 
Em JavaScript operações matemáticas dentro de parênteses são realizadas primeiro. Os 
operadores de multiplicação e divisão possuem precedência aos de soma e subtração. Não havendo 
precedência de operadores o cálculo é realizado da esquerda para a direita. 
Para ajudar com seus estudos, considere as seguintes variáveis: const x = 10, const y = 4, 
var soma, var subtracao, var multiplicacao, var divisao, var resto. 
Operador matemático Símbolo Exemplo Resultado 
Atribuição = x = 10 e y = 4 10 e 4 
Soma + soma = x + y 14 
Subtração - subtracao = x - y 6 
Multiplicação * multiplicacao = x * y 40 
Divisão / divisao = x / y 2.5 
Resto da divisão % resto = x % y 2 
Quadro 2: Operadores matemáticos 
Fonte: o autor 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 const x = 10; 
 const y = 4; 
 var soma = x + y; 
 var subtracao = x - y; 
 var multiplicacao = x * y; 
 var divisao = x / y; 
 var resto = x % y; 
 document.write("Operadores matemáticos"); 
 
 
 
 
 
 
26 
 document.write("<br>soma = " + soma); 
 document.write("<br>subtração = " + subtracao); 
 document.write("<br>multiplicação = " + multiplicacao); 
 document.write("<br>divisão = " + divisao); 
 document.write("<br>resto = " + resto); 
 </script> 
</body> 
</html> 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
Figura 10 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o seguinte resultado: 
Operadores matemáticos, soma = 14, subtração = 6, multiplicação = 40, divisão = 2.5, resto = 2. 
2.3.2 Operadores incrementais: 
Para verificar a utilização dos operadores incrementais considere as seguintes variáveis: 
var x = 10, var y = 5. 
Operador incrementais Símbolo Exemplo Resultado 
Soma com pré-incremento de 1 ++ ++x 11 
Soma com pós-incremento de 1 ++ x++ 11 
Subtração com pré-decremento de 1 -- --x 9 
Subtração com pós-decremento de 1 -- x-- 9 
Soma com incremento += x += y 15 
Subtração com decremento -= x -= y 5 
Multiplicação com incremento *= x *= y 50 
Divisão com incremento /= x /= y 2 
Quadro 3 - Operadores incrementais 
Fonte: o autor 
 
 
 
 
 
 
27 
 
Veja o exemplo a seguir: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var x = 10; 
 var y = 0; 
 y = ++x; //primeiro incrementa o x (x = 11) e depois atribui o valor a y (y = 11) 
 document.write("pré-incremento: y = " + y + ", x = " + x); 
 x = 10; 
 y = 0; 
 y = x++; //primeiro atribui o valor a y (y = 10) e depois incrementa o x (x = 11) 
 document.write("<br>pós-incremento: y = " + y + ", x = " + x); 
 x = 10; 
 y = 0; 
 y = --x; //primeiro decrementa o x (x = 9) e depois atribui o valor a y (y = 9) 
 document.write("<br>pré-decremento: y = " + y + ", x = " + x); 
 x = 10; 
 y = 0; 
 y = x--; //primeiro atribui o valor a y (y = 10) e depois decrementa o x (x = 9) 
 document.write("<br>pós-decremento: y = " + y + ", x = " + x); 
 x = 10; 
 y = 5; 
 document.write("<br>Soma com incremento x = " + (x += y)); 
 x = 10; 
 y = 5; 
Os operadores pré-incrementais e pós-incrementais atuam de forma 
diferente! Uma operação pré-incremental realiza o incremento antes de 
realizar a operação à qual está associada, ou seja, quando é declarada. 
Operações pós-incrementais atribuem o valor do incremento após realizar a 
operação à qual está associada. 
 
 
 
 
 
 
28 
 document.write("<br>Subtração com decremento x = " + (x -= y)); 
 x = 10; 
 y = 5; 
 document.write("<br>multiplicação com incremento x = " + (x *= y)); 
 x = 10; 
 y = 5; 
 document.write("<br>divisão com incremento x = " + (x /= y)); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 11 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o resultado: pré-
incremento: y=11, x=11, pós-incremento: y=10, x=11, pré-decremento: y=9, x=9, pós-decremento: y=10, x=9, Soma com 
incremento x=15, Subtração com decremento x=5, multiplicação com incremento x=50, divisão com incremento x=2. 
2.3.3 Operadores lógicos: 
Para verificar como se utiliza operadores incrementais considere as seguintes variáveis: 
const x = new Number(10), const y = 10. 
 
Operadorlógico Símbolo Exemplo Resultado 
Igualdade estrita === x === y false 
Igualdade == x == y true 
Os operadores (==) e (===) são diferentes e podem causar confusão! O 
operador (==) testa apenas o valor da variável enquanto o operador (===) 
testa o valor e o tipo! A mesma lógica se aplica aos operadores (!=) e (!==). 
 
 
 
 
 
 
29 
Diferença estrita !== x !== y true 
Diferença != x != y false 
Maior que > x > y false 
Menor que < x < y false 
Maior ou igual que >= x >= y true 
Menor ou igual que <= x <= y true 
Conjunção (And) && (x >= 0 && x <= 10) true 
Disjução (Or) || (x <= 0 || x>= 10) true 
Negação (Not) ! (!x) false 
Quadro 4: Operadores lógicos 
Fonte: Autor 
2.4 Estruturas Condicionais 
2.4.1 if. [se] 
A estrutura (if) realiza um desvio condicional, ou seja, atribuímos uma condição a 
estrutura do código e caso ela seja atendida o código é executado. 
Sintaxe: 
if(teste lógico){código} 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var a = true; 
 if (a == true) { 
 document.write("a = " + a); 
 } 
 document.write("<br>"); 
 if (a) { 
 document.write("a = " + a); 
 } 
 </script> 
</body> 
 
 
 
 
 
 
30 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 12 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: a = true, a = true. 
Perceba no exemplo anterior que quando executamos testes condicionais if() com 
parâmetros booleanos não é necessário utilizar o operador (==), pois este é utilizado implicitamente 
pela própria estrutura: o teste if(a){} é igual ao teste if(a==true){}. Caso se queira testar o valor falso 
colocamos o símbolo “!” antes da variável: if(!a){} é igual à if(a==false){}. 
2.4.2 if - else. [se - senão] 
A estrutura (if - else) realiza um desvio condicional obrigatório. O fluxo deverá 
obrigatoriamente passar por uma das estruturas (if) ou (else). Atribuímos uma condição a estrutura 
(if) e caso ela seja atendida o código é executado, caso contrário, o código da estrutura (else) será 
executado. 
Sintaxe: 
if(teste lógico){código} 
else{código} 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var a = false; 
 if (a) { // equivalente a if(a == true) 
 
 
 
 
 
 
31 
 document.write("if(){} foi executado, a = " + a); 
 } 
 else { 
 document.write("else{} foi executado, a = " + a); 
 } 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 13 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: else foi executado, a = false. 
2.4.3 if - else if. [se - senão se] 
A estrutura (if – else if) realiza um desvio condicional. O fluxo poderá passar por uma das 
estruturas (if) ou (else if). Atribuímos uma condição a estrutura (if) e outra condição a estrutura (else 
if). Caso a condição (if) seja atendida o código no escopo de bloco {} do (if) será executado, caso 
contrário, será testada a condição (else if) se está for atendida o código no escopo de bloco {} do (else 
if) será executado, caso contrário, o código continuará seu fluxo sem realizar um desvio. 
Sintaxe: 
if(teste lógico){código} 
else if(teste lógico){código} 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 
 
 
 
 
 
32 
 var a = 5; 
 if (a > 10) { 
 ++a; //a=6 
 } 
 else if (a < 0) { 
 --a; //a=4 
 } 
 document.write("a = " + a); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 14 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: a = 5. 
Veja que no exemplo anterior, nenhuma das condições foram atendidas e o fluxo seguiu 
sem passar pelo (if) ou (else if). 
2.4.4 if - else if - else. [se - senão se - senão] 
A estrutura (if - else if - else) realiza um desvio condicional obrigatório. O fluxo deverá 
obrigatoriamente passar por uma das estruturas (if), (else if) ou (else). Atribuímos uma condição a 
estrutura (if) e outra condição a estrutura (else if). Caso a condição (if) seja atendida o código no 
escopo de bloco {} do (if) será executado, caso contrário, será testada a condição (else if) se está for 
atendida o código no escopo de bloco {} do (else if) será executado, caso contrário, o código da 
estrutura (else) será executado. 
Sintaxe: 
if(teste lógico){código} 
else if(teste lógico){código} 
else{código} 
Exemplo: 
 
 
 
 
 
 
33 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var a = 5; 
 if (a > 10) { 
 ++a; //a=6 
 } 
 else if (a < 0) { 
 --a; //a=4 
 } 
 else { 
 a = 0; 
 } 
 document.write("a = " + a); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 15 - Navegador Google Chrome. 
Fonte: Navegador Google Chrome. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: a = 0. 
No exemplo anterior, nenhuma das condições foram atendidas e o fluxo seguiu para o 
escopo de bloco {} dentro do (else). 
 
 
 
 
 
 
34 
2.4.5 Estrutura condicional aninhada 
Estruturas condicionais aninhadas são várias estruturas condicionais em cascata. Por 
exemplo, um (if) dentro de outro (if). A estrutura (else if), também é um exemplo de estrutura 
condicional aninhada. 
Vamos fazer um exemplo onde o usuário digita o valor de uma nota (de 0 até 10) e o 
navegador vai responder se ele foi aprovado ou reprovado: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var nota = new Number(); 
 nota = prompt("Digite sua nota?"); //Janela de requisição que atribui valor à variável nota 
 if (isNaN(nota) == false) { //Testa se o valor da variável nota é um número 
 if (nota >= 6) { //Testa se o valor da variável nota é maior ou igual a 6 
 document.write("Aprovado"); 
 } 
 else { 
 document.write("reprovado"); 
 } 
 } 
 else { 
 document.write("você não digitou um número!!!"); 
 } 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
 
 
 
 
 
35 
 
Figura 16 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo uma janela de requisição. A janela possui o texto: Digite sua nota? 
Abaixo do texto existe um campo retangular para a entrada da digitação. No canto inferior direito da janela existem dois 
botões alinhados lado a lado o primeiro possui um fundo azul e o texto: OK, o segundo possui o texto: Cancelar. 
Digite um número entre 0 e 10 e click em OK. Como neste exemplofoi digitado o valor 8, 
a seguinte mensagem foi exibida: 
 
Figura 17 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o texto: Aprovado. 
Vamos refazer o teste digitando um texto qualquer, e em seguida clicando em OK. 
 
Figura 18 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo uma janela de requisição. A janela possui o texto: Digite sua nota? 
Abaixo do texto existe um campo retangular para a entrada da digitação. No canto inferior direito da janela existem dois 
botões alinhados lado a lado o primeiro possui um fundo azul e o texto: OK, o segundo possui o texto: Cancelar. 
 
 
 
 
 
 
 
36 
Figura 19 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: você não digitou um número. 
No exemplo anterior o primeiro teste retornou a mensagem “Aprovado” executando o 
escopo de bloco {} do if dentro de outro if, e o segundo teste retornou a mensagem “você não digitou 
um número”, ou seja, o bloco de escopo {} do else foi executado. 
O código anterior trouxe um novo conceito; a utilização do NaN. Para realizar o teste 
escrevemos o seguinte código: if(isNaN(nota)==false){}. Em JavaScript NaN é uma propriedade do 
objeto global que significa Not-A-Number (não é um número). Não é possível utilizar os operadores 
de igualdade (==) e (===) para testar um valor NaN. Para isso, deve-se utilizar isNaN(variável) ou 
Number.isNaN(variável). O nosso exemplo if(isNaN(nota)==false) faz o seguinte teste: 
1. isNaN(nota) -> retornará true (verdadeiro) se nota não for número. 
2. isNaN(nota) -> retornará false (falso) se nota for número. 
3. if(isNaN(nota)==false) -> se isNaN(nota) for igual a false (falso), ou seja, nota é 
número, execute o escopo de bloco {} deste if. Caso contrário execute o escopo de 
bloco {} do else. 
2.4.6 Operador condicional ternário 
O operador condicional ternário pode ser interpretado como um atalho para a estrutura 
condicional if-else. O operador ternário possui três operandos, sendo o primeiro a condição a ser 
analisada, o segundo parâmetro é a expressão de retorno caso a condição do primeiro parâmetro 
seja atendida, e o terceiro parâmetro é a instrução de retorno caso a condição do primeiro parâmetro 
não seja atendia: 
Sintaxe: 
 (teste lógico) ? instrução1 : instrução2; 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 
 
 
 
 
 
37 
 <script type="text/JavaScript"> 
 var idade = 15; 
 (idade >= 18) ? document.write("Adulto") : document.write("Menor"); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 20 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o texto: Menor. 
O exemplo anterior apresenta o operador condicional ternário, onde a variável idade é 
testada, caso idade seja maior ou igual à 18 a página vai imprimir ‘Adulto’ caso contrário a página vai 
imprimir ‘Menor’. 
2.5 Estrutura condicional switch - case 
A estrutura condicional (switch - case) realiza a execução de um código específico 
escolhido dentre as várias condições que uma determinada variável pode assumir. 
Sintaxe: 
var variavel; 
switch (variavel) { 
 case valor_1: 
 Instruções executadas se o valor da variável for igual a valor_1; 
 break; 
 case valor_2: 
 Instruções executadas se o valor da variável for igual a valor_2; 
 break; 
 ... 
 case valor_n: 
 Instruções executadas se o valor da variável for igual a valor_n; 
 break; 
 
 
 
 
 
 
38 
 default: 
 Instruções executadas quando o valor não corresponder a nenhum case; 
} 
Exemplo: Vamos ver um exemplo onde o usuário faz uma escolha de um item dentro de uma lista. 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <p>Escolha uma cor:</p> 
 <select id="cor"> 
 <option></option> 
 <option>Vermelho</option> 
 <option>Amarelo</option> 
 <option>Azul</option> 
 <option>Verde</option> 
 <option>Laranja</option> 
 <option>Roxo</option> 
 </select> 
 <input type="button" value="Selecionar Cor" onclick=alertarCorSelecionada()> 
 <script type="text/JavaScript"> 
 function alertarCorSelecionada() { 
 var cor = document.getElementById("cor"); 
 var corSelecionada = cor.options[cor.selectedIndex].text; 
 switch (corSelecionada) { 
 case 'Vermelho': 
 alert("Vermelho é primária"); 
 break; 
 case 'Amarelo': 
 alert("Amarelo é primária"); 
 break; 
 case 'Azul': 
 alert("Azul é primária"); 
 break; 
 case 'Verde': 
 alert("Verde é secundária"); 
 break; 
 
 
 
 
 
 
39 
 case 'Laranja': 
 alert("Laranja é secundária"); 
 break; 
 case 'Roxo': 
 alert("Roxo é secundária"); 
 break; 
 default: 
 alert("Nenhuma opção foi escolhida"); 
 } 
 } 
 </script> 
</body> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 21 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o texto: Escolha uma cor. 
Uma Caixa de Seleção com os itens: Vermelho, Amarelo, Azul, Verde, Laranja, Roxo. E um botão: Selecionar Cor. 
Após escolher uma cor, clique no botão “Selecionar Cor”. Como no exemplo a cor 
escolhida foi a Azul, a mensagem exibida foi a seguinte: 
 
Figura 22 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Caixa de diálogo com o texto: Azul é primária e um botão retangular no canto inferior direito com o 
texto OK. 
 
 
 
 
 
 
40 
O código anterior trouxe um novo conceito: onclick=alertarCorSelecionada(). O comando 
onclick, que está dentro da tag <input>, é responsável por acionar a função que será executada 
quando o botão for clicado. 
Observe que todas as instruções (case) finalizam com o comando break. A utilização do 
break é necessária para interromper o fluxo, caso o break não seja declarado os códigos dentro das 
estruturas seguintes serão executados. 
2.6 Estruturas de repetição (iterações): for, while, do - while. 
2.6.1 for 
Cria um loop definido por um ponto de partida, uma condição de finalização do loop e um 
comando de incremento ou decremento do ponto de partida. 
Sintaxe: 
 for(inicialização; condição; iteração){//código do loop} 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var soma = 0; 
 for (var i = 1; i <= 10; i++) { 
 soma += i; 
 document.write(i); 
 document.write("<br>"); 
 } 
 document.write(" soma = " + soma); 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivosabra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
 
 
 
 
 
41 
 
Figura 23 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, soma = 55. 
O código anterior apresenta um laço de repetição onde a cada repetição o valor de uma 
unidade é adicionado a variável (i) , o novo valor de (i) é escrito na página html, a variável soma realiza 
a soma dos valores atribuídos a variável (i) e após a finalização do laço o valor da variável soma é 
escrito na página. 
2.6.2 while 
 O while realiza um teste condicional e enquanto esse teste retornar verdadeiro ele 
executa uma rotina definida em sua estrutura. A condição sempre é verificada antes de executar a 
rotina. 
Sintaxe: 
while(teste condicional){ 
 //código - rotina; 
} 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var a = 0; 
 var soma = 0; 
 while (a < 10) { 
 
 
 
 
 
 
42 
 soma += ++a; 
 document.write(a); 
 document.write("<br>"); 
 } 
 document.write(" soma = " + soma); 
 </script> 
</body> 
</html> 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 24 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, suma = 55. 
O código anterior apresenta um laço de repetição onde a cada repetição o valor de uma 
unidade é adicionado a variável (a) , o novo valor de (a) é escrito na página html, a variável soma 
realiza a soma dos valores atribuídos a variável (a) e após a finalização do laço o valor da variável 
soma é escrito na página. 
2.6.3 do - while 
O do - while cria um código de rotina que será executado enquanto o teste condicional 
retornar verdadeiro. O teste condicional é executado após a execução da rotina, devido a isso, o 
código de rotina é executado obrigatoriamente no mínimo uma vez. 
Sintaxe: 
 do{ 
 //código – rotina 
 }while(teste condicional); 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
 
 
 
 
 
 
43 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 var a = 0; 
 var soma = 0; 
 do { 
 soma += ++a; 
 document.write(a); 
 document.write("<br>"); 
 } while (a < 10) 
 document.write(" soma = " + soma); 
 </script> 
</body> 
</html> 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 25 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o seguinte resultado: 1, 2, 3, 
4, 5, 6, 7, 8, 9, 10, suma = 55. 
O código anterior apresenta um laço de repetição onde a cada repetição o valor de uma 
unidade é adicionado a variável (a) , o novo valor de (a) é escrito na página html, a variável soma 
realiza a soma dos valores atribuídos a variável (a) e após a finalização do laço o valor da variável 
soma é escrito na página. 
 
 
 
 
 
 
44 
2.7 Instruções de controle de fluxo 
2.7.1 break 
 O break é uma instrução de encerramento, utilizada nos seguintes casos: 
• Para encerrar um loop (laço de repetição); 
• Para encerrar a estrutura switch - case. 
• Para encerrar um escopo de bloco nomeado; 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 //break em estrutura de repetição 
 document.write("break em estrutura de repetição <br>"); 
 var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
 for (var i = 0; i < 10; i++) { 
 if (a[i] == 6) { 
 document.write("i = " + i + ", O laço (for) foi interrompido <br>"); 
 break; 
 } 
 document.write(" i = " + i + "<br>"); 
 } 
 //Break em switch - case 
 document.write("<br>Break em switch - case <br>"); 
 var animal = 'gato'; 
 switch (animal) { 
 case 'gato': 
 document.write("gato<br>"); 
 //O break foi esquecido e o fluxo continuará executando 
 case 'coelho': 
 document.write("coelho<br>"); 
 break; //O código será interrompido, primeiro break após a condição 'gato' 
 case 'cachorro': 
 
 
 
 
 
 
45 
 document.write("cachorro<br>"); 
 break; 
 default: 
 documento.write("nenhuma opção<br>"); 
 } 
 //Break em escopo de bloco 
 document.write("<br>Break em escopo de bloco <br>"); 
 bloco_01: { 
 bloco_02: { 
 document.write("bloco_02 antes do break bloco_02 <br>"); 
 break bloco_02; //encerra o bloco_02 executa o bloco_01 
 document.write("bloco_02 após o break bloco_02 <br>"); //não é executado 
 } 
 document.write("bloco_01 após o break bloco_02"); //é executado 
 } 
 document.write("<br><br>"); 
 bloco_Pai: { 
 bloco_Filho: { 
 document.write("bloco_Filho antes do break pai<br>"); 
 break bloco_Pai; //encerra bloco_Filho e bloco_Pai 
 document.write("bloco_Filho após o break pai<br>"); //não é executado 
 } 
 document.write("bloco_Pai após o break pai"); //não é executado 
 } 
 </script> 
</body> 
</html> 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
 
 
 
 
 
46 
 
Figura 26 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o seguinte resultado: break 
em estrutura de repetição, i = 0, i = 1, i = 2, i = 3, i = 4, i = 5, O laço (for) foi interrompido. Break em switch-case, gato, 
coelho. Break em escopo de boco, bloco_02 antes do break, bloco_01, bloco Filho antes do break pai. 
O código anterior trouxe um novo conceito: bloco_01:{código}. Esta estrutura é 
conhecida como escopo de bloco ou simplesmente bloco, trata-se de uma estrutura simples utilizada 
para delimitar uma parte do código através de chaves {}. Essa estrutura pode ser nomeada ou não. 
Observe que para que o break atue em um escopo de bloco, este deverá estar nomeado e seu nome 
deverá ser declarado após a instrução break: break + nome_do_Bloco. 
2.7.2 return 
O return é uma instrução de controle de fluxo que encerra uma função e retorna os 
valores para onde a função foi chamada. 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript"> 
 function quadrado(a) { 
 return a * a; 
 } 
 
 
 
 
 
 
47 
 document.write(quadrado(4));//retorna o valor manipulado na função 
 </script> 
</body> 
</html> 
 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
Figura 27 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o código JavaScript interpretado, com o resultado: 16. 
2.7.3 continue 
 O continue é uma instrução de controle de fluxo utilizada para interromper um laço de 
repetição, caso uma condição específica seja atendida, e continuar com fluxo na próxima iteração; 
Exemplo: 
No documento pagina_1.html escreva o seguinte código: 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
</head> 
<body> 
 <script type="text/JavaScript">for (var i = 0; i < 10; i++) { 
 if (i == 5) { 
 document.write(" pulou "); 
 continue; //interrompe o fluxo e inicia na próxima iteração 
 } 
 document.write(i); //se i = 5 este campo não será executado 
 } 
 </script> 
</body> 
</html> 
Agora salve as alterações no documento e usando o Explorador de Arquivos abra a pasta 
onde está salvo o arquivo pagina_1.html e abra este arquivo através de um navegado. 
 
 
 
 
 
 
48 
 
Figura 28 - Navegador Google Chrome. 
Fonte: o autor. 
Descrição da figura: Navegador de internet exibindo o resultado com o texto: 01234 pulou 6789. 
 
 
 
Chegamos ao final da competência 02. Nesta competência abordamos as Técnicas de 
Programação Procedural com o JavaScript. Aprendemos sobre: operadores matemáticos, lógicos e 
incrementais; estruturas condicionais; laços de repetição; controladores de fluxo. Agora, vamos dar 
início a competência 03, onde iremos aprofundar nosso conhecimento em JavaScript. 
Agora que você concluiu a leitura da competência 02, está na hora de realizar 
a Atividade Semanal. Lembre-se que também é muito importante realizar a 
Atividade do Encontro Presencial. Aproveite o momento para testar seus 
conhecimentos. Bons estudos! 
 
Acesse o fórum da competência 02, lá você encontrará informações sobre as 
atividades e poderá tirar suas dúvidas, além de interagir e trocar 
conhecimento com os outros estudantes. 
 
Para ampliar seus conhecimentos acesse o AVA e assista à videoaula da 
competência 02 e se por acaso você ainda estiver com alguma dúvida nos 
procure no fórum de dúvida da competência. 
 
 
 
 
 
 
 
49 
3.Competência 03 | Conhecer as Técnicas de Programação Orientada a 
Objetos com o JavaScript 
 
Em JavaScript objetos são considerados como entidades independentes que possuem 
propriedades particulares e um tipo específico. Os objetos criados através da linguagem de 
programação podem ser comparados a objetos reais que possuem características responsáveis por 
defini-lo. As propriedades de um objeto definem suas características e podem ser entendidas como 
variáveis associadas a ele. Além dos objetos que já vimos na competência anterior (variáveis que são 
objetos e funções), nós podemos criar e definir nossos próprios objetos. 
A programação orientada a objetos é fundamenta em quatro grandes pilares: 
• Abstração: É o ponto de partida da criação de objetos. A abstração é responsável por 
extrair as características do objeto, atribuindo e relacionando valores, dando uma 
composição à sua estrutura. É através da abstração que definimos as entidades do 
mundo real. 
• Encapsulamento: Como seu próprio nome diz, o encapsulamento é a técnica utilizada 
para encapsular a informação, na prática, isso implica em esconder aquilo que não 
precisa ser exibido, atribuindo níveis de visibilidade a variáveis e métodos, como 
público ou privado. No JavaScript utilizamos encapsulamento quando declaramos 
uma variável (let) dentro de um bloco ou quando definimos as propriedades de um 
objeto. 
• Herança: É a técnica que permite criar uma classe a partir de outra que já existe, a 
classe recém-criada é conhecida como subclasse e contém todos os métodos e 
atributos da classe da qual herdou suas características (superclasse). A subclasse 
pode conter outras variáveis e métodos que não existem na superclasse. Como em 
JavaScript não existe o conceito de classe, a herança ocorre de maneira diferente das 
Acesse o AVA, ouça o podcast e saiba o que você estudará nesta competência. 
Te espero lá. 
 
 
 
 
 
 
50 
demais linguagens orientadas a objeto, sendo necessário a utilização de um 
mecanismo chamado protótipo. 
• Polimorfismo: É uma técnica que permite que um método ou função assuma formas 
diferente para atender a demandas diferentes. As formas mais conhecidas de 
polimorfismos são: 
1. Sobrescrever, consiste em sobrescrever um método que foi definido em uma 
superclasse através de herança (overriding) 
2. Sobrecarga, onde uma função é redeclarada com outros parâmetros (overload). Ou 
quando usamos operadores que produzem resultados diferentes de acordo com o 
tipo de dado utilizado. 
3. Paramétrico, onde um tipo de dado ou função é escrita genericamente permitindo 
a manipulação de valores independentemente do tipo de dado. Em JavaScript o 
polimorfismo paramétrico ocorre através da declaração de variáveis (var) que 
recebe qualquer tipo de objeto ou função. 
3.1 Objetos Globais 
3.1.1 Number 
O objeto Number possui o Construtor new Number(value) onde value é um tipo de dado 
numérico no double-precision (dupla precisão) 64-bit. O método valueOf() é utilizado para retornar 
o valor primitivo do objeto Number. O Number contém as seguintes propriedades de métodos: 
Number.isNaN() Retorna true se valor não for numérico 
Number.isFinite() Retorna true se o valor é um número finito 
Number.isInteger() Retorna true se o valor passado é inteiro 
Number.isSafeInteger() Retorna true se o valor numérico estiver entre -(253 -1) e (253 -1). 
Number.parseFloat() Converte o valor numérico para float 
Number.parseInt() Converte o valor numérico para inteiro 
Number.toFixed() Arredonda o número para um inteiro 
Number.toFixed(n) Retorna um número com n casas decimais 
Quadro 5 - Number 
Fonte: o autor 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt
 
 
 
 
 
 
51 
3.1.2 Math 
Diferentemente de outros objetos globais, o Math não possui um construtor e todas as 
suas propriedades e métodos são estáticos. O Math possui constastes e funções matemáticas 
utilizadas para facilitar o desenvolvimento dos códigos. 
Constantes: 
Math.E Constante de Euler, base dos logaritmos naturais, (2,718...). 
Math.LN2 Logaritmo natural de 2, aproximadamente 0,693. 
Math.LN10 Logaritmo natural de 10, aproximadamente 2,303. 
Math.LOG2E Logaritmo de E na base 2, aproximadamente 1,443. 
Math.LOG10E Logaritmo de E na base 10, aproximadamente 0,434. 
Math.PI Pi, aproximadamente 3,14159. 
Math.SQRT1_2 Raiz quadrada de 1/2, aproximadamente 0,707. 
Math.SQRT2 Raiz quadrada de 2, aproximadamente 1,414. 
Quadro 6 - Constantes 
Fonte: o autor 
Métodos: 
Math.abs(x) Retorna o módulo, valor absoluto, de um número |x|. 
Math.acos(x) Retorna o arco-coseno de um número. 
Math.acosh(x) Retorna o arco-coseno hiperbólico de um número. 
Math.asin(x) Retorna o arco-seno de um número. 
Math.asinh(x) Retorna o arco-seno hiperbólico de um número. 
Math.atan(x) Retorna o arco-tangente de um número. 
Math.atanh(x) Retorna o arco-tangente hiperbólico de um número. 
Math.atan2(x, y) Retorna o arco-tangente do quociente de seus argumentos. 
Math.cbrt(x) Retorna a raiz cúbica de um número (x3). 
Math.ceil(x) Retorna o inteiro que é maior ou igual a um número. 
Math.cos(x) Retorna o cosseno de um número. 
Math.cosh(x) Retorna o cosseno hiperbólico de um número. 
Math.exp(x) Retorna (ex), onde (e) é a constante de Euler (2.718...). 
Math.expm1(x) Retorna (ex - 1). 
Math.floor(x) Retorna o inteiro que é menor ou igual a um número. 
Math.fround(x) Retorna uma aproximação de ponto flutuante. 
Math.hypot([x[,y[,…]]]) Retorna a raiz quadrada da soma dos quadrados (x2+y2+…)1/2. 
Math.imul(x) Retorna o resultado de uma multiplicação de inteiro. 
Math.log(x) Retorna o logaritmo natural (ln x) de um número. 
Math.log1p(x) Retorna o logaritmo natural de 1 + x (ln (1+x)) de um número. 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Math/E