Weslley Rosa Prado - Apostila JavaScript Progressivo

Prévia do material em texto

Proprietário da apostila
Os seguintes dados foram criptografados e inseridos ocultamente no PDF, 
para vias de identificação do dono:
Weslley Rosa Prado
weslley.prado73@gmail.com
Rua Eli Moreira Cardoso
220
Vargem Alta - ES
29295-000
Brasil
Pedimos, encarecidamente, que não distribua ou comercialize seu material.
Além de conter suas informações, prejudica muito nosso projeto.
Se desejar indicar o JavaScript Progressivo para um amigo, nosso site 
possui todo o material, de forma gratuita, sem precisar de cadastro e o 
acesso dessas pessoas também ajuda a mantermos o site no ar e criamos 
cada vez mais projetos:
www. javascript progressivo.net 
http://www.javascriptprogressivo.net/
http://www.javascriptprogressivo.net/
http://www.javascriptprogressivo.net/
Sumário
Introdução ao JavaScript
1. JavaScript: O que é? Para que serve? 
2. Como começar a programar em JavaScript – O necessário 
para iniciar
3. Como programar em JavaScript – Criando o script “Olá 
mundo”
4. Onde colocar o JavaScript em um site 
5. Erros em JavaScript – Como usar o Console 
6. Variável: O que é, Para que serve e Onde é usada 
7. Como declarar uma variável – A palavra reservada var 
8. Tipos de dados 
9. Atribuindo e Acessando valores de Variáveis
10. Método prompt() - Como Receber Dados e Valores do usuário
11. Converter número em String e vice-versa: parseInt() e 
parseFloat()
12. Operações Matemáticas em JavaScript: somar, subtrair, 
multiplicar e dividir
13. Exercícios de Introdução ao JS
Testes Condicionais: IF, ELSE e SWITCH
1. Recebendo valores do usuário com formulário input 
2. Operadores de comparação: == , != , > , >=, < e <= 
3. Teste condicional IF 
4. IF e ELSE em JavaScript 
5. IF e ELSE dentro de IF e ELSE - Aninhando Testes Condicionais 
Exercício: Positivo ou Negativo ?
Exercício: Qual número é maior ?
6. Operadores Lógicos em JS: AND ( && ), OR ( || ) e NOT ( ! ) 
7. O comando switch e as instruções case, break e default 
8. Exercícios de IF e ELSE 
Função
1. Função: O que é? Para que serve? Qual a vantagem ? 
2. Parâmetro, Argumento e Return em JS 
3. Como gerar números aleatórios 
4. Simulando lançamento de dados 
5. Função invocando de função: Como criar uma calculadora usando 
funções
6. Variável Global - Como fazer um jogo em JavaScript 
7. Recursividade: Função de Fatorial e Fibonacci de Recursão 
8. Exercícios 
Arrays
1. Array (ou vetor): O que é? Para que serve? 
2. Declarar, Inicializar e Acessar elementos de um Array 
3. Laço FOR em Arrays 
4. Laço FOR ... IN em Arrays 
4.1 Exercício com arrays, laço FOR e FOR IN
5. Trabalhando com Radiobuttons em JavaScript 
6. Arrays em Funções: Passagem por Valor e por Referência 
7. Ordenando arrays: O método sort 
8. Fazendo buscas em arrays: Métodos indexOf e lastIndexOf 
9. Matriz: O que é? Para que serve? Array de arrays 
10.Matriz: Como criar, declarar, inicializar, exibir e alterar elementos 
11.Resumo dos métodos de Arrays 
12.Exercícios de arrays e matrizes 
Jogo da Velha em JavaScript (código completo)
Código comentado do Jogo da Velha em JavaScript
Objetos
1. Introdução: Classe, Objeto, Propriedade e Método 
2. Como criar, declarar e acessar Objetos, Propriedades e Métodos 
3. Objeto Math: Como usar Matemática em JavaScript 
4. Objeto String: Trabalhando com caracteres e textos 
5. Objeto Date: Datas, horários e tempo 
6. Objetos Boolean e Number 
7. Objeto document: DOM (Modelo de Objetos de Documento) 
Eventos
1. Eventos - O que são? Para que servem? 
2. O evento onload - Eventos de carregamento 
3. Evento onchange - Evento de mudança de elemento 
4. Eventos de Mouse - onmousedown, onmouseup, onclick, 
onMouseOver e onMouseOut
5. Tratando eventos (event handler) e o método addEventListener() 
6. Eventos de Teclado - onkeydown, onkeyup e onkeypress 
7. Eventos de formulário - onfocus e onblur (focus e blur) 
Tutorial de Canvas
1. Introdução ao Canvas: Desenhando retângulos 
2. Como desenhar Linhas 
3. Como desenhar Arcos e Círculos 
4. Desenhando textos - Como escrever em Canvas 
5. Efeito de sombra: shadow 
Introdução ao JavaScript
Nesta seção iremos aprender o que é o JavaScript, para que serve, como 
baixar, o que instalar, onde escrever códigos e tudo que se refere a 
preparação para começarmos a programar em JavaScript, ou seja, toda a 
base e introdução ao assunto.
Os tutoriais desta seção são voltados para leigos, tanto na linguagem 
JavaScript, como em programação de um modo geral.
Assim, se você nunca contato com nenhuma linguagem de programação, 
você poderá entender perfeitamente as aulas desta seção de nosso curso.
Ao final deste seção, você vai aprender a criar seus scripts, declarar 
variáveis, fazer operações Matemática e até pedir informações dos usuários 
de seus sites.
JavaScript - O que é e Para que serve
▪ JavaScript – Uma linguagem de Script e Interpretada
Como o próprio nome pode sugerir, o JavaScript é uma linguagem de script, 
e afinal, iremos criar diversos (milhares) de scripts ao longo de todos os 
tutoriais de nosso curso.
Mas você realmente sabe o que é uma linguagem de script?
A característica básica de uma linguagem de script, é que seu código é 
executado dentro de outro programa. O JavaScript, por exemplo, vai ser 
executado dentro do navegador (browser) de seu sistema, ou seja, sem um 
navegador, o JavaScript não serve de nada.
A linguagem C ou C++, por exemplo, não são linguagens de scripts, elas são
linguagens compiladas. Ou seja, assim que terminamos de programar, temos
que compilar e o resultado será a criação de um novo programa, um novo 
aplicativo, um executável.
Os códigos, chamados scripts, que iremos estudar em nossos tutoriais de 
JavaScript, são ditos serem interpretados. Ou seja, eles não são compilados.
Eles serão escritos, e um programa (navegador ou browser) vai ler cada um 
destes comandos do script e vai interpretar eles.
Esses programas são chamados também de interpretadores, pois eles vão 
ler cada comando, interpretar o que eles querem dizer e executar esses 
códigos, sem haver a necessidade de um processo de compilação pelo 
processador do computador.
▪ JavaScript – Uma linguagem do lado do cliente (client
side)
Outro termo técnico que é comum de ser dito sobre a linguagem JavaScript, 
é que ela é client side, ou seja, ela age no lado do cliente.
Mas que lado? Que cliente? Hã?
Vamos lá. Vamos dividir a Internet em dois pedaços: o lado do cliente, que 
são os usuários, pessoas comuns navegando na internet, como você agora, 
lendo este tutorial de JavaScript.
O outro lado da internet é o lado dos servidores.
Sempre que você acessa um site, como o da Globo.com, por exemplo, seu 
navegador fazer um pedido para os servidores (computadores) da Globo: 
“Hey, Globo! Me manda as notícias, quero ler”.
Aí os servidores vão e te enviam as informações.
Então você clica em um link, e seu navegador conversa de novo com os 
servidores: “Ei servidor da Globo, ele clicou no link de esportes, quer ler 
sobre MMA, então me envie as informações sobre isso”.
E assim vai funcionando a internet, nessa conversa entre o lado do cliente e 
o lado dos servidores. Pois bem, o JavaScript vai ser maravilhosamente útil 
no lado dos clientes. Os scripts vão rodar no navegador dos usuários.
Vejamos um exemplo disso.
Vamos supor que você vai se cadastrar no site de um banco, para ver se 
pode financiar um carro. Então você vai preencher um formulário onde tem 
que dizer sua data de nascimento, isso é necessário pois somente quem tem
mais de 18 anos pode pedir um financiamento.
Então você preenche, seu browser envia as informações para o servidor do 
banco.
Mas se você for de menor, lá no servidor eles vão ver: “Opa, esse cara aqui é
de menor, não vai dar pra ele receber financiamento. Vamos mandar e-mail 
pra ele explicando isso”.
Agora imagine milhares ou milhões de pessoas fazendo isso, quanto trabalho
vai ter o servidor, em checar se são maiores de idade, em responder aos 
inscritos etc etc. É aí queentra o JavaScript.
Você cria um script dentro do HTML, no código dos formulário que vai fazer 
uma checagem. Ele vai pegar o dado do usuário sobre a data de nascimento,
e vai checar matematicamente se ele é de maior e só vai deixar ele enviar os
dados do formulário se for de maior.
Como veremos, é uma checagem simples. E o mais fantástico: os dados só 
são enviados se for maior de idade. Assim, os servidores não serão 
incomodados, não receberão dados inválidos, nem irão perder tempo e 
processamento checando isso e respondendo e-mail.
As vantagens do JavaScript
Por ser executado no lado do cliente, não há aquela conversa entre o seu 
navegador e os servidores, e essa velocidade vai depender da banda de sua 
internet, se for muito lenta, essa comunicação é bem demorada.
Porém, se o script rodar diretamente no seu navegador, é um processo 
quase instantâneo, pois o processador de seu computador é zilhões de 
vezes mais veloz que uma conexão de internet, não é verdade?
Não sei se você chegou a usar a internet na década de 90, quando a 
velocidade de conexão era super lenta, mas os sites eram super mega 
simples, basicamente feitos de textos, pois era muito custoso fazer diversos 
efeitos, por conta dessa conversa entre cliente e servidor.
Porém, com o uso do JavaScript, podemos criar efeitos na janela do 
navegador, nas cores dos links, podemos fazer uma imagem aumentar de 
tamanho quando passamos o mouse em cima, o JavaScript pode detectar a 
resolução da sua tela (tela de notebook, netbook, tablet, smartphone) e exibir
o conteúdo de um site de uma maneira mais adequada para cada tipo de 
dispositivo e várias outras coisas.
E lembre-se do mais fantástico: tudo isso no lado do cliente, no computador 
das pessoas, e isso é algo extremamente veloz, geralmente percebemos 
como algo instantâneo, e tudo graças ao JavaScript.
Outra coisa interessante que você vai notar ao estudar qualquer tutorial de 
JavaScript, é que você pode fazer muita coisa offline, afinal ele vai rodar no 
seu navegador, e ele não precisa estar online para isso.
Assim, podemos criar calculadores em JavaScript, calcular IMC, criar jogos, 
programas para calcular média, calcular quantos segundos, minutos e horas 
de vidas vivemos, apenas fornecendo nossa data de nascimento, podemos 
criar um script que valida o número de um CPF, um script para quebrar 
senhas, para baixar o código-fonte de sites, você pode exibir uma mensagem
“Proibido a cópia de conteúdo”, se alguém clicar no texto ou apertar 
Control+C, pode fazer com que a janela feche automaticamente caso a 
pessoa digite a senha errada etc etc etc.
A limitação do JavaScript é que ele é feito para web, você não vai usar essa 
linguagem para fazer coisas dentro de seu computador.
Mas a internet é algo tão vasto que já virou sinônimo de computador, afinal, 
quantas pessoas você conhece que tem computador e não acessam a 
internet?
Eu não conheço ninguém. Todos usam e vivem para usar a internet, então 
estudar JavaScript é criar aplicações que podem ser usadas por todo mundo.
Não há limites ou fronteiras, a internet é simplesmente a tecnologia mais 
revolucionária, importante e usada de todos os tempos.
Parabéns, você decidiu estudar JavaScript, a linguagem que vai te dar o 
poder de dominar, entender, alterar e criar scripts para a web.
Bem vindo ao Curso JavaScript Progressivo, desejamos bons estudos e que 
use seus conhecimentos com responsabilidade, e caso fique milionário 
criando algum projeto revolucionário, não esquece da gente :)
O necessário para começar
Ok, você já leu a respeito da linguagem de programação e está decidido: 
quer aprender como programar em JavaScript !
Mas onde vamos programar? Que programar devemos usar? Onde escrever 
o código, como saber se está certo? Como ver o resultado de meus scripts? 
Como enviar para meus amigos?
Neste Tutorial de JavaScript iremos responder a todas estas dúvidas iniciais 
para todos os que desejam começar a programar em JavaScript.
▪ HTML e CSS – Como criar sites
Como já deixamos bem claro em nosso tutorial onde explicamos O que é e 
Para que Serve o JavaScript, ele é uma linguagem de script voltada 
totalmente para programação web.
Ou seja, vamos usar o JavaScript para criar diversas aplicações para sites e 
sistemas. E como um site é feito, em sua forma mais básica?
Através da linguagem de marcação HTML, que nos permite estruturar todas 
as páginas de um site, marcando os locais de conteúdo, cabeçalho, menu, 
definindo links, formatando textos, localização de imagens, tabelas e 
praticamente tudo no que se refere à estrutura de um site.
Porém, nos dias de hoje, é raro um site que seja feito em HTML 100% puro e
estático, geralmente eles são estilizados com a linguagem de marcação 
CSS, que de uma maneira bem simples e poderosa pode definir cores, 
efeitos em links, imagens, fontes, margens, espaçamento, atuar em tags 
específicas e uma série de outras possibilidades de uma maneira bem 
simples e concisa.
Não, não é obrigatório saber HTML e CSS para programar em JavaScript, 
mas é, leia bem, é ALTAMENTE RECOMENDÁVEL E ACONSELHÁVEL 
estudar HTML e CSS antes, ou durante, seus estudos de JavaScript.
Aliando o poder de uma linguagem de programação como o JavaScript, as 
linguagens de marcação e de estilo HTML & CSS, você poderá criar sites 
fantásticos, bem organizados, estruturados e com um belo design, que são 
características obrigatórias em qualquer website profissional que você possa 
a vir encontrar na internet.
▪ Onde estudar HTML & CSS
Se não estudou HTML nem CSS, ou estudou mal, não fique nervoso ou 
triste. Temos um projeto chamado HTML Progressivo, que é um Curso de HTML
e CSS online, completo, totalmente gratuito e voltado para iniciantes.
O site está no formato de uma apostila, que inicia ensinando o HTML 4.01, o 
HTML “basicão” que ainda predomina nos sites, explicando suas tags, lógica 
e estrutura.
Em seguida, o curso ensina você a estilizar seus sites em HTML com o 
fantástico CSS, sempre com exemplos, exercícios e códigos bem 
comentados. Por fim, a apostila irá se dedicar ao novíssimo, sofisticado e 
inovador HTML5.
▪ Navegador (Browser)
Como dissemos antes, o JavaScript é uma linguagem para web, do lado do 
cliente (client side) que roda diretamente no browser (navegador de internet).
Então, é mais que óbvio que precisaremos de um navegador para estudar 
nossos tutoriais de JavaScript.
Recomendamos o Mozilla Firefox, Google Chrome ou mesmo o Opera. Evite 
o Internet Explorer, pois ele é realmente cheio de bugs e nada amigável para 
webmasters e desenvolvedores web.
Porém, mais importante que o navegador é a versão dele.
Mantenha sempre o navegador atualizado e habilite o JavaScript nele.
Sim, algumas vezes o JavaScript é desabilitado do browser, e isso pode 
gerar dor de cabeça à toa para você.
▪ Editor de Texto para escrever o código JavaScript
Ok, você já estudou ou está estudando a dupla HTML & CSS e já tem seu 
navegador favorito atualizado e pronto para aguentar os inúmeros e 
fantásticos scripts que criaremos em JavaScript.
Chegou a hora de colocar a mão na massa: onde vamos escrever nossos 
códigos JavaScript?
https://www.htmlprogressivo.net/
https://www.htmlprogressivo.net/
A resposta é simples: em um editor de textos, qualquer um, como o bloco de 
notas.
Durante seus estudos de programação e contato com outros programadores,
você vai ouvir falar bastante de programas, IDE’s, editores fantásticos que 
completam o código, que deixam você arrastar elementos e fazer maravilhas 
apenas apertando botões.
Nossa dica é: se for iniciante, se afaste totalmente destes tipos de programa.
Sim, eles facilitam a vida dos programadores, mas só dos profissionais que 
trabalham diariamente com isso e não tem tempo para perder.
Se você é novato no mundo da programação, é totalmente necessário e 
importante que você escreva TODOS seus códigos JavaScript “na mão”, 
completos, no editor de textos de sua preferência. Iremos fornecer milhares 
de códigos, scripts e comandos emJavaScript, mas copiar e colar, ou deixar 
o programa completar, só vai te prejudicar.
Escrever cada linha de comando que você estuda é muito, muito importante 
mesmo, vai fazer você aprender e memorizar de verdade.
Se quiser usar um editor de textos que deixa seu código mais organizado e 
colorido, e que não vai fazer o trabalho para você recomendamos dois 
fantásticos editores:
1. Notepad++ 
2. Sublime Text 
Baixou? Instalou? Ajeitou sua cadeira? Pegou o café? Então vamos, 
finalmente, programar em JavaScript!
http://www.baixaki.com.br/download/sublime-text.htm
http://www.baixaki.com.br/download/notepad-.htm
Como criar um script em JavaScript – A tag < 
script > – Tutorial “Olá Mundo”
Agora que já sabemos O Que É e Para Que Serve o JavaScript e já nos 
preparamos obtendo O Necessário Para Programar em JavaScript, vamos 
de fato colocar a mão na massa e aprender como criar um script em um site 
HTML.
O passo inicial é criar o famoso "Olá, mundo" ou ("Hello world") em JS, para 
isso, vamos aprender sobre a tag <script>.
▪ Como colocar o código JavaScript no HTML – A tag 
<script>
Uma das grandes vantagens de iniciar seus estudos em JavaScript, já tendo 
estudado HTML e CSS, é que não vai precisar instalar ou fazer nada de 
diferente ou desconhecido para começar a criar seus scripts.
Vamos iniciar a programar em JavaScript como se estivéssemos continuando
nossos estudos de HTML5 e CSS.
Mas onde vamos escrever os códigos de JavaScript? No meio do código 
HTML? Em qualquer local? Preciso dizer ao browser que aquilo é um script? 
Ele detecta automaticamente? 
Afinal, onde vamos escrever os códigos de programação JavaScript? Como 
criar um script, e onde?
A resposta de tudo isso é: na tag <script>, que geralmente vai dentro da tag 
<head> (mas não é obrigatório, em breve veremos que podemos usar essa 
tag em qualquer trecho de um site, para aplicar o JavaScript em diversos 
locais), e através da propriedade type, com o valor “text/javascript”.
Assim, a estrutura de uma página em HTML5 que contém um script em 
JavaScript é:
<!DOCTYPE html>
<html>
 <head>
 <title>Como usar JavaScript em HTML</title>
 <script type="text/javascript">
 //Seu código JavaScript vem aqui 
 </script>
 </head>
 <body>
 Corpo do site.
 </body>
</html>
Note que que dentro das tags <script> </script> não escrevemos nada, só 
um comentário, pois é ali dentro que iremos colocar os códigos da linguagem
JavaScript.
Bem simples, não?
▪ Como fazer o “Olá, mundo” em JavaScript
Agora que já sabemos onde colocar os códigos, vamos criar nosso primeiro 
script em JavaScript, que simplesmente exibe uma mensagem em uma caixa
de diálogo.
Para isso, crie um documento .html com o seguinte código, que é uma 
mistura de HTML com JavaScript:
<!DOCTYPE html>
<html> 
 <head>
 <title>Tutorial de JavaScript - Olá, mundo</title>
 <metaname="description"content="Como criar um script em JavaScript no 
HTML">
 <metacharset="utf-8">
 <script type="text/javascript">
 alert('Olá, mundo');
 </script>
</head>
 <body>
 </body>
</html>
Agora abra o site no seu navegador.
Verá que apareceu uma caixa de alerta, com um botão de ‘Ok’ e uma 
mensagem, e isso tudo ocorre por um simples código, uma única de linha de 
JavaScript: alert(‘Olá, mundo’);
Provavelmente você já viu essa janelinha de alerta antes, quando digitou 
uma senha errada, esqueceu de preencher algum campo do formulário ou 
viu alguma mensagem de erro. É a mesma janelinha, de alert.
Experimente escrever outra coisa.
Por exemplo, vamos escrever: 
• alert(‘Como programar em JavaScript\nCurso JavaScript Progressivo!’);
(não estranhe o \n, é um símbolo que representa a quebra de linha, um 
enter)
Veja o resultado:
Sim, aquele simples código cria uma janela, mostra “Alerta JavaScript”, um 
ícone, um botão “Ok” e um texto que você pode escolher. Tudo com uma 
linha de JavaScript.
Para fazer o mesmo na linguagem C, por exemplo, seria necessário dezenas
de linhas de programação. Poderoso e simples esse JavaScript, não?
O que acontece nesse código é simples. Quando seu navegador se depara 
com o <script type="text/javascript">, ele vai saber que o quem a seguir é um
código de JavaScript e chama o interpretador da linguagem, para 'rodar' as 
instruções de script que estão por vir, até acabar, no </script>
Onde colocar o JavaScript em um site
Neste tutorial de nosso Curso de JavaScript Online e Gratuito, iremos 
aprender um pouco mais do funcionamento do JavaScript em nossos 
navegadores.
Veremos onde e quando os scripts são executados, onde podem ser 
inseridos, como usar scripts externos ao documento HTML, scripts na tag 
<head>, <html>, dentre outros detalhes sobre como as coisas funcionam no 
mundo JavaScript.
▪ Como o JavaScript funciona no navegador
Em nosso tutorial de JavaScript sobre a tag <script> passado, colocamos o 
código do JavaScript dentro da tag script, que por sua vez ficou dentro da tag
head, logo no início de nosso documento HTML.
Isso não é regra, nem obrigatório.
Na verdade, como veremos no decorrer de nossa apostila de JavaScript, 
essa é a maneira mais incomum de se inserir scripts em sites, pois podemos 
colocar nossos códigos JavaScript em diversas partes de um documento 
HTML, até mesmo fora (em um arquivo externo, de extensão .js, que vamos 
aprender a criar ainda neste tutorial).
Mas antes de aprender sobre o posicionamento de nossos códigos em 
JavaScript, é importante entender como seu navegador vai ler e interpretar 
eles. Aliás, é importante também entender a ordem que o browser lê aquela 
enorme quantidade de códigos HTML, JavaScript, PHP, etc.
A ordem de leitura e interpretação (para renderizar na tela do navegador) é 
feita na ordem de cima para baixo.
Se vier uma tag de imagem primeiro, ela será interpretada e exibida.
Se tiver um texto depois dessa tag de imagem, só depois esse texto vai ser 
exibido.
Sempre na ordem descendo.
Assim, um código de JavaScript só é interpretado e executado quando é 
encontrado.
Além disso, o navegador só vai prosseguir quando interpretar todo o código 
JavaScript!
Durante sua carreira de desenvolvedor web, vai acontecer de você 
programar algo errado no JavaScript, como um looping que nunca acaba, e 
verá que o restante de sua página não vai ser carregada, pois o navegador 
ficou preso em algum ponto script.
▪ JavaScript na tag <head> do HTML
A primeira coisa que um navegador lê e interpreta, é o conteúdo da tag 
<head> do HTML, pois lá existe contém informações importantes do 
documento (página) em questão, como título, descrição, língua, dentre outras
coisas.
Como fizemos no tutorial passado, colocamos nosso código JavaScript 
dentro da tag <script>, que ficou dentro da <head>.
Ou seja, nosso script foi executado bem no começo, antes mesmo de 
aparecer o conteúdo do site, pois a tag <head> vem antes da tag <body>, o 
corpo do site.
Colocamos nossos scripts na head sempre que desejamos que ele seja 
executado antes do restante da página do site.
Por exemplo, um efeito especial no seu site, um script que evite que o 
usuário clique com o botão direito, um script que evite que o usuário aperte 
“Ctrol+C” pra copiar seu conteúdo…isso deve ser interpretado e carregado 
antes do site aparecer.
Na head, podemos colocar nosso script dentro da tag <script>, como já 
ensinamos no tutorial passado, como podemos passar o endereço do 
arquivo de extensão .js, externo ao documento HTML (vamos aprender a 
fazer isso no final deste tutorial).
▪ JavaScript na tag <body> do HTML
Muitas vezes não é necessário carregar um script na head, antes do 
conteúdo da página ser carregado.
Por exemplo, você pode colocar um script que seja rodado apenas quando 
se clica em um botão. Não há necessidade de colocar ele na head, pois 
talvez não seja nem preciso que ele rode (talvez o usuário nem clique no 
botão).
Por isso, podemos colocar nossos scripts dentro da tag <body>, assim 
podemos ter um controle maior sobre quando o script deve ser interpretado 
pelo navegador.
O código a seguir exibea data e hora de seu computador.
Note que ela só roda quando é chamada, no corpo do site.
<body>
 <h2>Curso JavaScript Progressivo - Online e Grátis</h2>
 Data e Hora atual: 
 <div id="data" style= "display:inline"></div>
 <script type="text/javascript">
 document.getElementById("data").innerHTML=Date();
 </script>
</body>
Ou seja, as vezes não é necessário que o script seja rodado antes.
Muitas vezes eles nem rodam, vai depender da interação do usuário, do que 
ele fizer.
No código acima, o trecho de JavaScript exibe a data no elemento na tag div 
de nome “data”.
Pode ser que queiramos colocar essa data só no final do site, ou somente 
quando clicarem em algum botão ou link.
Não saiam colocando scripts JS à toa, coloque somente o necessário, e 
onde realmente for necessário.
Lembrem-se que o Google leva em conta o tempo de carregamento de um 
site para rankear melhor em seus resultados de busca, e JavaScript pode 
deixar o carregamento de seu site bem lento!
▪ JavaScript em arquivo externo .js
Os exemplos que demos foram bem simples, bem simples mesmo. Afinal, 
estamos apenas iniciando nosso curso de JavaScript. Porém, ao passo que 
você for estudando nossos tutoriais, você será capaz de programar scripts 
cada vez mais complexos e úteis.
Quando formos criar jogos em JavaScript, efeitos interessantes, aplicativos 
bem úteis e profissionais, veremos que facilmente o código JavaScript chega
a ter dezenas ou centenas de linhas. Alguns sistemas mais complexos 
possuem milhares de linhas no script.
Agora você imagina o tamanho de um documento HTML, que possui 
centenas de código HTML e centenas de código JavaScript. Vai ser enorme, 
gigante e muito bagunçado. Um arquivo assim é difícil de lidar, de estudar, de
fazer alguma alteração depois.
Visando organizar nossos códigos JavaScript, nós iremos colocar nosso 
código em um arquivo externo, um arquivo de script.
Será um simples arquivo de texto, a única diferença é que ele deve ter a 
extensão .js
Se tiver estudado CSS, é exatamente a mesma coisa (no caso, usamos 
arquivo com extensão .css).
Então mãos a obra.
Abra seu editor de textos (como o notepad++, notepad, sublime text etc), e 
coloque o seguinte código:
alert("Estou aprendendo a programar em JavaScript!");
Salve esse arquivo como o nome “script.js“.
Agora, para nosso site saber da existência desse arquivo de script, vamos 
colocar o parâmetro “src” (abreviação de source, fonte em inglês) em nossa 
tag <script>, que vai dizer a URL, o endereço onde se localiza esse arquivo 
de JavaScript.
Coloque este arquivo no mesmo diretório (pasta) que está seu documento
.html, sua head deve ficar:
<head>
 <title>Tutorial de JavaScript</title>
 <meta name="description" content="Onde inserir o código JavaScript no 
HTML">
 <metac harset="utf-8">
 <script type="text/javascript" src="script.js"></script>
</head>
<body>
 <h2>Curso JavaScript Progressivo - Online e Grátis</h2>
</body>
Agora rode seu arquivo HTML e veja o resultado.
Note que primeiro aparece a janela com o botão OK, mostrando a 
mensagem “Estou aprendendo a programar em JavaScript”.
E só depois que você clica em OK que aparece o corpo do site.
Como dissemos, primeiro o navegador vai rodar o que está na head.
No caso, existe um arquivo de script lá, indicado pelo endereço 
src=”script.js”, então esse script é inicialmente interpretado e rodado, por isso
você vê primeiro a janela, e só depois que esse script termina de ser 
executado (quando você clica em OK) que o restante do site aparece, como 
havíamos dito.
▪ Exemplo de código em JavaScript
Agora que já aprendemos bem onde posicionar nossos scripts, como o 
navegador os lê e como criar um arquivo de script externo ao HTML, vamos 
fazer alguns scripts bacanas!
Vimos que o navegador lê do começo até o fim do documento, e sai 
interpretando, executando e exibindo o que aparece automaticamente.
Porém, isso não é obrigatório.
Pode ser que o navegador exiba somente uma coisa, caso cliquem em 
algum botão, pode ser que execute algo diferente, se o usuário assim 
desejar…ou pode ser que nenhum script seja executado, mesmo que tenha 
um arquivo gigantesco de JavaScript.
Vamos lá, coloque o seguinte código em seu arquivo script.js:
function mostraData()
{
 document.getElementById("data").innerHTML=Date();
}
function mostraMensagem()
{
 alert('Estou aprendendo a programar em JavaScript!');
}
Agora, coloque isso em sua tag body:
<body>
 <h2>Curso JavaScript Progressivo - Online e Grátis</h2>
 <p id="data"></p>
 <button type="button" onclick="mostraData()">Exibir data</button>
 <pid="msg"></p>
 <button type="button" onclick="mostraMensagem()">Exibir 
mensagem</button>
</body>
Rode. Vai aparecer dois botões (usamos a tag <button>).
Se clicar no primeiro, o navegador chama a função “mostraData()”, que é 
definida no seu arquivo .js e executa somente aquele trecho do script.
Já se você clicar no segundo botão, só vai ser executado o código dentro da 
função “mostraMensagem()”.
Bacana, não?
Não se estresse se não entender o que é função, document.getElementById,
onclick etc, vamos te ensinar tudo com calma e sem pressa.
Por hora, apenas digite o código acima, tanto do seu script.js como da sua 
página HTML e rode o site, clique nos botões, veja o que vai acontecendo.
Erros em JavaScript – Como usar o Console 
Neste tutorial de nosso Curso de JavaScript, vamos aprender o que é o 
Console do JS, para que serve, em quê nos vai ser útil e vamos falar sobre 
os erros e problemas que iremos lidar durante nossas vidas de 
desenvolvedor web.
▪ Erros em programação JavaScript
Não importa o quanto você vá estudar, se já gosta de exatas (sim, 
Matemática ajuda, e muito, no ramo da computação) ou se já programou em 
outras linguagens de programação: você irá cometer muitos, muitos erro 
durante toda sua carreira de programador JavaScript.
Mas não se assuste, é normal. Não é uma coisa simples e fácil, programação
JavaScript exige muito estudo e empenho mesmo, e errar vai fazer parte. As 
vezes iremos passar horas caçando os erros, tentando ver onde erramos, o 
motivo de nosso aplicativo não estar funcionando da maneira que queríamos,
porque algo saiu diferente do esperado e o pior: porque, raios, nosso 
programa nem sequer roda.
Se você já programou uma linguagem de programação compilada, como C, 
C++ ou Java, sabe que ao tentar compilar um programa (transformar o seu 
código em um arquivo executável) e ele tiver algum erro, ele não vai 
compilar, vai dar erro e mostrar o erro que ocorreu.
Isso não acontece no JavaScript, e em linguagens de script de um modo 
geral. Não há esse rigor, o que pode ser bom muitas vezes.
Mas geralmente é uma baita dor de cabeça. E o pior, você roda seu script JS
e caso der algum erro, pode ser que não aconteça simplesmente nada.
Agora imagine que você fez um sistema com JavaScript enorme, com 
centenas ou milhares de linhas, com vários arquivos .js, muitas funções, 
coisas complexas e tal, foi rodar e nada. Sim, nada apareceu.
Pois bem, vamos apresentar uma ferramenta que será uma grande amiga e 
companheira sua, caso realmente leve a sério seus estudos em JavaScript, 
que é o console de erros.
▪ Abrindo o Console de Comando
Uma das características mais importantes dos programadores é a 
capacidade de fuçar e descobrir as coisas sozinhos. Se quer treinar esse 
instinto e habilidade, agora é uma boa hora.
Fuce no seu navegador web e encontre o “Console JavaScript”, mexa nos 
menus, ferramentas, opções, não desista, tente achar.
Caso não consiga ou não tenha paciência (aconselhamos a tentar mais), 
vamos dizer como abrir o console nos principais navegadores atualmente 
existentes e usados.
No Google Chrome, ache o ícone de menu, vá em Ferramentas e depois em 
“Console JavaScript”, ou simplesmente aperte “Control + Shift + J”, e verá a 
imagem acima.
Agora, lá no console (local onde você vai dar comandos), digite:
1+1 e dê enter. Veja o que acontece.
Agora digite:
'Java' + 'Script', o que acontece? Diga nos comentários
Depoisdigite:
clear()
O que aconteceu no sole de comandos de JavaScript?
▪ Encontrando erros no JavaScript
Digite o seguinte código em sua página HTML:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 document.write("Curso JavaScript Progressivo);
 </script>
 </head>
</html>
Ela contém um script que deveria exibir uma mensagem no documento:
"Curso JavaScriptProgressivo"
Porém, ele contém um erro: tem as duplas no começo e não tem no final.
Quando abrir o site, vai ver que nada vai aparecer.
Agora, abra o console do JS.
Aqui no Chrome aparece a seguinte mensagem de erro:
Veja que aparece: home.html:7
Isso quer dizer o seguinte: o erro está na linha 7 do documento home.html 
(nome que salvei meu site).
Se colocar as aspas duplas ao final:
document.write("Curso JavaScript Progressivo");
E rodar novamente o documento, vai ver que esse erro some do console.
Prontinho, você aprendeu a detectar e corrigir um problema em JavaScript.
O console mostra até a linha que ocorre o erro.
Isso vai ser muuuito importante em nossas vidas de programadores!
Variável em JavaScript – O que é e Para que serve
Neste tutorial de nosso Curso de JavaScript, vamos introduzir um dos mais 
importantes conceitos, não só do JavaScript, mas da programação de uma 
maneira geral, que são as variáveis.
Vamos entender o que é uma variável, para que ela serve, onde é usada e 
motivo dela ser tão importante e essencial no desenvolvimento Web.
Por hora, vamos dar uma ideia mais geral sobre o que é variável, explicar 
seu conceito em termos de computação, para nos próximos artigos entramos
em mais detalhes sobre os tipos de variáveis e, de fato, usá-las em nossos 
aplicativos JavaScript.
▪ Variável em Programação
A Computação tem, basicamente, duas funções: fazer cálculos e armazenar 
informações.
A palavra computador vem de computar, que é contar, e é basicamente isso 
que um computador faz: cálculos.
Seja em uma pesquisa científica, uma troca de mensagens no Whatsapp ou 
a exibição de um site da internet, os computadores precisam fazer uma série 
de operações binárias em seu hardware, para resultar em pixels na sua tela, 
onde você vê o resultado acontecer.
Porém, só fazer essas operações binárias não serve de muita coisa, se os 
resultados desses cálculos não forem armazenados.
Imagine que a cada vez que você desliga seu computador ou celular, todas 
suas informações sejam apagadas: textos, vídeos, fotos, arquivos etc. Isso é 
inconcebível, computador é usado também para armazenar informações.
O ato de armazenar dados, de uma maneira temporária (até desligar o 
computador ou fechar um programa) ou permanente (gravar dados em um 
HD ou servidor), é tão essencial e importante que isso é feito de maneira 
bem frequente em programação, através de variáveis.
Através de variáveis, vamos poder armazenar quaisquer tipos de 
informações, para ser acessadas, modificadas, alteradas ou mesmo 
excluídas futuramente, tudo decidido pelo programador.
▪ Variáveis em JavaScript
Certamente você já se deparou com um jogo feito em JavaScript, e talvez 
nem tenha percebido.
Você joga uma partida, e marca 100 pontos.
Depois, joga novamente e marca 200, então esse passa a ser seu novo 
recorde.
Mas como o jogo sabe que 200 é seu novo recorde? Para saber isso, ele 
teria que saber que sua pontuação anterior era menor que 200.
Ou seja, o número “100” foi armazenado pelo JavaScript em algum lugar, 
então quando você jogou de novo, sua nova pontuação foi comparada com 
essa anterior, para saber que seu record foi quebrado.
Você também já deve ter entrado em algum site que pedia seu nome, você 
digitava e depois ele exibia uma mensagem “Olá, Fulano”.
Ou seja, o Javascript guardou seu nome em algum lugar, para exibir no 
futuro.
Uma variável foi usada para armazenar o texto “Fulano”, que você escreveu. 
E depois, o JavaScript foi nessa variável, pegou as informações que tinha 
nela e exibiu para você o “Olá, Fulano”.
Em alguns sistemas bancários, é permitido fazer 3 saques por dia.
Então, de alguma maneira, o sistema tem que saber quantos saques foram 
feitos.
Inicialmente, ele armazena o número 0 em uma variável.
Quando você fizer um saque, ele atualiza aquela variável pra armazenar o 
número 1.
Efetuando outro saque, o sistema muda a variável para o número 2.
Mais uma vez, a variável é incrementada e armazena o número 3 quando 
você fizer mais um saque naquele dia.
Porém, sempre que você vai fazer um saque, o sistema checa essa variável.
Se tentar faz mais um, o sistema vai ver que número está armazenado na 
variável, e se for 3, ele não libera mais você para sacar novamente.
Enfim, poderíamos ficar muito mais tempo falando das inúmeras utilidades 
das variáveis.
No próximo tutorial iremos aprender como usar, manipular e editar as 
variáveis em JavaScript.
Como declarar uma variável em JavaScript – var
No tutorial sobre o que é uma variável em JavaScript, vimos as inúmeras 
utilidades que podemos ter ao usar as variáveis.
Não é que elas sejam importante, são essenciais. É quase que impossível 
programar algum programa útil que não venha a usar nenhuma variável.
Neste tutorial de nosso Curso de JavaScript, vamos aprender como declarar, 
criar uma variável em JS.
▪ Como declarar uma variável em JavaScript: var
Declarar uma variável é reservar memória para armazenar uma informação. 
Essa informação vai ficar associada a essa variável, e para podermos fazer 
isso temos que usar um comando especial, que diga ao JavaScript “Ei, essa 
é uma variável! Guarde ela!”.
Esse comando é dado por uma palavra chamada var.
Assim, para declararmos uma variável, fazemos: var nome ;
Ou seja, primeiro escrevemos a palavra “var” e depois escolhemos um nome 
pra nossa variável e depois usamos o ponto e vírgula.
Por exemplo, se você quiser criar uma variável para armazenar a idade do 
leitor de seu site, faça:
var idade;
Para armazenar o dia, de uma data: 
• var dia;
• O mês: var mes;
• O ano: var ano;
Quando você faz isso, você está armazenando um bloco de memória. Cada 
bloco de memória tem um endereço específico (tipo 0x2112H, algo que seu 
computador entende). Então, ao invés de usar esse endereço grande, feio e 
difícil de decorar, digite dia e pronto, vai estar acessando esse endereço de 
memória.
https://www.javascriptprogressivo.net/
▪ Como declarar mais de uma variável em uma linha
Você também pode definir essas três variáveis numa mesma linha, basta 
separar cada nome por uma vírgula:
var dia, mes, ano;
Uma outra maneira de declarar variáveis, é da seguinte maneira:
var dia, mes, ano;
Ao declarar variáveis dessa maneira, apenas estamos reservando um 
espaço em memória, é como se disséssemos “Ei, JavaScript, reserva espaço
para essas variáveis, depois vamos usar elas!”
Nos próximos tutoriais iremos aprender a armazenar números, letras, textos 
e outras informações em nossas variáveis.
▪ Como escolher o nome de uma variável em JS
No decorrer de nosso Curso de JavaScript Online Grátis, você vai criar 
muitas, muitas variáveis.
Algumas vezes, vai querer chamar alguma delas de “a”, “b”, “x” ou “y”, pois é 
bem mais simples e fácil.
No começo, não vai ser nada demais e você vai se lembrar das variáveis.
Mas a medida que for programando, seus scripts passarão a ter dezenas, 
centenas ou mesmo milhares de linhas de código, e certamente você não vai
mais se lembrar do nome de todas as variáveis, caso tenha escolhido essas 
letras simples como nome.
Quer armazenar a idade de alguém? Coloque a variável com nome “idade”.
Quer armazenar uma mensagem de erro? Uso algo como “msg_error” como
nome.
Vai armazenar o valor de um desconto em juros? Use “juros”, pois assim 
você vai facilmente se lembrar, e seu código vai ficar mais legível e fácil de 
ser entendido por outros desenvolvedores web.
▪ Regras para declarar variáveis em JavaScript
Você que vai escolher os nomes de suas variáveis, e baseado na dica que 
demos, escolha sempre nomes que façam sentido,que tenham a ver com a 
informação que vai ser armazenada na variável.
Porém, isso não quer dizer que possa escolher todo e qualquer nome, 
existem algumas regras.
O nome de suas variáveis devem começar com uma letra, com o sinal de 
underline _ ou com o cifrão $.
Ou seja, não começar começar com número, nem hífen ou algum outro 
caractere.
• Embora não possa iniciar o nome de caractere com número, você pode
usar números no nome de sua variável:
var IP1, IP_2, $IP3 ;
Devemos lembrar que as variáveis, em JavaScript, são case sensitive, ou 
seja, letra minúscula difere de letra maiúscula.
Assim, a variável: var JS;É diferente da variável: var js;
Por fim, a última regra é evitar palavras chave, palavras que são reservadas 
pelo JS, que são usadas para se programar em JavaScript. Por exemplo, a 
palavra var não pode ser usada como nome de uma variável, pois ela é 
usada para declararmos uma variável.
▪ Lista de palavras reservadas
A seguir, uma lista de algumas palavras que são usadas pelo JavaScript, e 
que não podemos usar (como para declarar variáveis, por exemplo):
▪ Palavras reservadas do JavaScript
•break
•case
•catch
•continue
•debugger
•default
•delete
•do
•else
•false
•finally
•for
•function
•if
•in
•instanceof
•new
•null
•return
•switch
•this
•throw
•true
•try
•typeof
•var
•void
•while
•with
• Palavras reservadas pelo browser
•alert
•blur
•closed
•document
•focus
•frames
•history
•innerHeight
•innerWidth
•length
•location
•navigator
•open
•outerHeight
•outerWidth
•parent
•screen
•screenX
•screenY
•statusbar
•window
• Palavras reservadas para propósitos futuros
As seguintes palavras são muito usadas em diversas linguagens de 
programação, e como o JavaScript continua sempre a evoluir, elas podem vir
a ser usadas em breve, então também é bom evitar usá-las:
•abstract
•boolean
•byte
•char
•class
•const
•double
•enum
•export
•extends
•final
•float
•goto
•implements
•import
•int
•interface
•let
•long
•native
•package
•private
•protected
•public
•short
•static
•super
•synchronized
•throws
•transient
•volatile
•yield
Tipos de Dados em JavaScript
Neste tutorial, vamos explicar os possíveis tipos de dados em programação 
JavaScript, quais os tipos de informações existem e como são classificados.
▪ Dados em Programação JavaScript
Muito provavelmente você já ouviu falar sobre sistema binário em 
computação.
Tudo para o computador é 0 e 1.
Um número armazenado, um texto, uma foto, um vídeo que você vai colocar 
no Youtube, um jogo no seu celular etc. Para eles, é tudo 0 e 1. Se quiser, 
pode trabalhar com binário também.
Uma variável sua pode ser identificada como:
010101010101010100110101
Já outra:
111011011101110111011001
Bem simples de decorar e trabalhar com isso né?
Claro que não! É impossível!
Por isso, é necessário a gente classificar alguns tipos de dados, informações.
No JavaScript, vamos lidar com os seguintes tipos de dados
•Números
•Strings
•Booleanos
•Null
•Objetos
•Funções
Vamos falar um pouco sobre cada um deles agora.
▪ Tipo de dado: Número
Esse é o mais óbvio tipo de dado.
Seu dia de nascimento é um número, seu salário é um número (e bem 
grande se for um programador JavaScript que estudou com o JS 
Progressivo), o ano de um carro, a potência de seu motor.
Basicamente, temos dois tipos de números:
•Inteiro: 1, 2, 3, 4, 5, 2112, -10 etc
•Decimais: 
São os quebrados, em nossa língua portuguesa usamos eles 
separados por vírgulas:
Preço: R$ 1,99
Mas em programação, usamos ponto no lugar de vírgula:
1, 99 para gente é 1.99 em computação, ok ?
• Tipo de dado: Strings
Strings são, nada mais nada menos, que textos.
Uma palavra, uma frase, um caractere (como ! @ # $ % "+ _ []/ etc).
Uma string é sempre representada por algo que está dentro de aspas.
Exemplos de strings:
•"Olá mundo"
•"Curso JavaScript Progressivo"
•"a"
•"b"
•"c"
Mas, veja bem:
Número: 2112
String : "2112"
Faz sentido você dividir o número 2112 com outro número, o resultado é um 
número também, é a nossa boa e velha Matemática. Mas não faz sentido 
dividir "2112" por um número, pois é uma string, um texto!
▪ Tipo de dado: Boolean
Ainda no assunto de binários, 1 e 0, temos um tipo de dado bem especial, os
Booleans ou Booleanos.
Eles podem assumir dois valores apenas:
1.True
2.False
Ou seja, verdadeiro e falso. E eles são muuuuuito importantes! Também são 
chamados de valores lógicos. Vamos usar bastante os Booleanos quando 
formos estudar testes e laços (loopings), bem em breve.
Convencionalmente, o número 0 é sinônimo de falso e tudo que for diferente 
de 0 (como 1, -1, 2, 3, 4, 5...) é verdadeiro.
▪ Tipo de dado: Null
É a representação do vazio, do nada.
String nula: ""
Uma variável que não recebeu nenhum valor ou tipo de dado, é iniciada 
como nula, Null.
O vazio é um importante tipo de dado também.
▪ Tipo de dado: Objetos
São as 'coisas'.
Uma imagem é um objeto, um botão é um objeto, um parágrafo específico 
pode ser um objeto, o título da página, um formulário etc.
É uma representação geral de alguma 'coisa'. Pode parecer vago agora, mas
durante nosso curso irá entender melhor o conceito de um objeto.
▪ Tipo de dado: Função
Por fim, temos as funções, que são blocos de código, específicos, que fazem
uma tarefa específica e podem ser 'chamados' para serem executados.
Em nosso tutorial sobre Onde colocar o código JavaScript em um site, 
criamos duas funções de exemplo, a mostraData() cuja função é exibir a 
data e a mostraMensagem() que quando invocada, exibe uma frase (uma 
string).
Vamos dedicar uma seção inteira de nosso curso só para falar de funções.
Atribuindo e Acessando valores de Variáveis: = e 
document.write()
Neste tutorial vamos te ensinar como atribuir valores para variáveis. Ou seja, 
vamos aprender como uma variável armazena, de fato, informações e como 
acessar esses dados.
▪ Atribuição em JavaScript: = 
Agora que já aprendemos quais os tipos de informações que podemos 
trabalhar em JavaScript (números, strings, booleanos, null, objetos e 
informações) bem como declarar uma variável, vamos aprender como 
atribuir um valor a uma variável.
Ou seja, vamos fazer uma variável que criamos armazenar determinada 
informação.
Isso é bem simples, é feito com o símbolo de atribuição de igual: =
Vamos criar uma variável chamada idade e fazer ela receber um valor (por 
exemplo, 18):
var idade;
idade = 18;
E prontinho, só isso.
Tem um bloco de memória reservado, e você pode acessar através da 
variável idade e lá dentro armazenamos um número, o 18.
Isso também pode ser feito assim:
var idade = 18 ;
Ou seja, declaramos, criamos a variável e já atribuímos um valor para ela!
Veja agora como atribuir uma string (texto) a uma variável que vamos 
chamar de nome:
var nome = "Olá, Mundo!"
Pronto. Reservou um bloco de memória, chamou de nome e dentro dele 
agora tem reservado o valor "Olá, Mundo!", uma string.
▪ Acessando Variáveis
Agora que aprendemos a declarar e atribuir o valor a uma variável, vamos 
dar um exemplo de como acessar elas, ver o que está armazenado naquela 
variável.
Primeiro, vamos declarar a variável idade e atribuir o valor 18.
Em seguida, vamos 'imprimir', escrever na tela o valor dessa variável, 
usando o método document.write()
Para isso, basta fazer:
document.write(idade)
Veja o código:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var idade = 18;
 document.write(idade); 
 </script>
 
 </head>
</html>
Agora abra seu site .html e veja o resultado:
18
Colocamos pra imprimir a variável idade e apareceu o número 18, que é o 
valor que está armazenado dentro dela.
▪ "Olá mundo" usando variável
Agora, vamos declarar uma variável chamada curso e atribuir a ela a 
seguinte string:
"Olá, mundo!"
Vamos imprimir o valor armazenado nessa variável, usando o método 
document.write() do JavaScript:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var nome = "Olá, mundo!";
 document.write(nome);</script>
 </head>
</html>
Veja que o resultado foi simplesmente exibir a frase "Olá, mundo" na tela.
▪ O Método document.write() - Exibindo coisas no 
documento
O método write() serve para você escrever informações no documento.
Ele é bem simples de usar, basta colocar dentro dos parêntesis o que deseja 
que apareça no documento (no caso, a página HTML).
Por exemplo, para exibir uma string:
document.write("JavaScript Progressivo");
Para exibir o valor de uma variável de nome teste:
document.write(teste)
É possível escrever no documento várias coisas usando este método, basta 
separar o que deseja exibir por vírgula:
document.write("Olá", "mundo")
Note que agora ele vai exibir duas strings:
"Olá"
"mundo"
Pois separamos por vírgula. Pode exibir também um número e uma string:
document.write("Minha idade: ", idade)
O resultado: Minha idade: 18
Sim, fica tudo 'grudado', por isso demos um espaçamento antes das “ finais.
Vamos definir duas variáveis, uma com seu nome e outra com sua idade.
Depois vamos escrever no documento a string:
"Meu nome é [nome] e tenho [idade] anos"
Nosso código fica assim:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var nome="Francisco";
 var idade=18;
 document.write("Meu nome é ", nome," e tenho ", idade, " anos");
 </script>
 </head>
</html>
Exercício de JavaScript
Crie um site em HTML, e usando JavaScript que use duas variáveis, a nome
com o nome de uma pessoa e a variável sobrenome com o sobrenome dela.
Em seguida, a página deve exibir a seguinte string:
"Bem vindo ao sistema [sobrenome], [nome]"
Recebendo Dados e Informações do Usuário - 
Método prompt()
Neste tutorial de nosso Curso de JavaScript, vamos aprender como receber
dados, informações do usuário. Ou seja, vamos aprender como salvar em 
variáveis algo que o usuário forneça (digitando, por exemplo). Isso será feito 
através do método prompt().
▪ Troca de Informações em Programação
O que acontece quando você liga o computador?
Ele abre o navegador? O editor de texto? Começa a tocar uma música?
A reposta é: depende.
O que vai acontecer depende do que o usuário fizer. Especificamente, sua 
máquina reage de acordo com o que você fizer.
Se clicar no Chrome ou Firefox, vai abrir o navegador.
Se clicar no Excel, abre o editor de planilhas.
Etc etc
Clicar...abrir...digitar...isso tudo são informações que o usuário repassa para 
o computador.
Ele recebe, checa e toma uma atitude dependendo do que você fez.
É isso que vamos aprender agora: receber dados, informações do usuário, 
armazenar em variáveis e usar elas para algum propósito, em JavaScript!
▪ O método prompt() do JavaScript
Exite muuuuuitas maneiras de receber dados do usuário, em JS, que está 
acessando sua página.
Vamos ensinar uma maneira agora, através do método prompt().
Mais adiante, em nosso curso, vamos te explicar melhor e com mais calma o 
que é um método, e vamos aprender até fazer os nossos. Por hora, imagine 
que método é, basicamente, um comando.
Vamos usar o comando prompt() para capturar algo que o usuário vai digitar.
O formato do uso é o seguinte:
variavel = prompt("Texto que vai aparecer:")
Ao fazer isso, vai aparecer uma janela quando o usuário entre no seu site, e 
nessa janela tem escrito "Texto que vai aparecer" e um campo para o usuário
digitar algo.
Após digitar e dar enter (ou clicar em OK), o que ele digitou vai virar uma 
string, armazenada na variável variavel.
▪ Exemplo de uso do prompt()
Crie uma página web que pergunte o nome do usuário, salve ele numa 
variável e depois exiba uma mensagem de boas vindas na página.
Vamos armazenar o que o usuário digitar na variável nome.
Em seguida, usamos o método document.write() para exibir o que tem dentro
dessa variável.
Veja como ficou nosso código JavaScript:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var nome = prompt("Digite seu nome: ")
 document.write("Bem vindo, ", nome);
 </script>
 </head>
</html>
O resultado deve ser o seguinte:
Mensagem no documento HTML:
▪ Exemplo de uso do prompt()
Crie uma página HTML com um script em JS que pergunta a idade do 
usuário e armazena em uma variável. Depois, exiba: "Você tem x anos", 
onde 'x' é o número que o usuário forneceu.
Essa mensagem não deve ser exibida no documento HTML e sim numa pop-
up do tipo alert.
Aqui, a ideia é a mesma do exemplo anterior, porém ao invés de usar 
document.write() vamos usar o comando alert():
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var idade = prompt("Qual sua idade: ");
 alert("Você tem " + idade + " anos de idade");
 </script>
 </head>
</html>
Note que usamos o símbolo de + para 'unir' as strings dentro do comando 
alert.
Simples e bacana, não?
Certamente você já acessou algum sistema que exibia esses tipos de 
mensagens, agora você fez isso.
Parabéns, já é um verdadeiro programador JavaScript!
Vamos seguir adiante em nosso curso.
Converter String para Número e vice-versa em 
JavaScript
Neste tutorial, vamos aprender como transformar uma variável que é string 
em número (tanto inteiro como decimal, os floats) e vice-versa, em 
JavaScript.
▪ Trabalhando com Dados do Usuário
Vamos criar um script que pede um número ao usuário, e armazena na 
variável num1.
Depois, vamos pedir outro número ao usuário, e vamos armazenar na 
variável num2.
Por fim, vamos exibir o resultado da soma dessas duas variáveis, no 
documento HTML.
Nosso código HTML/JS fica:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero: ");
 var num2 = prompt("Segundo numero: ");
 document.write("Soma = ", num1+num2);
 </script>
 </head>
</html>
Digitando 1 num primeiro prompt() e 2 no segundo, temos o resultado:
12
Ou seja: 1 + 2 = 12
É...
Acho que o JavaScript não é muito com Matemática, não é mesmo?
É sim! Mas foi a gente que errou!
E por um motivo bem simples: quando o usuário digita algo para o método 
prompt(), este método armazena a informação digitada na forma de 
STRING.
Ou seja, não é 1, é "1" que está armazenado na variável num1, é um texto.
Não é 2, é "2".
Então, fizemos: "1" + "2" = "12"
Ou seja, agrupamos, concatenamos duas strings, grudamos uma na outra!
▪ String para Inteiro: parseInt()
Para calcularmos corretamente a soma, precisamos usar uma função que já 
vem, por natureza, no JavaScript, a parseInt().
Para transformar "2" em 2, basta fazer: parseInt("2")
Ou seja, essa função recebe uma string e transforma num inteiro.
Vamos calcular a soma novamente, mas ao invés e usar num1 e num2, 
vamos usar parseInt(num1) e parseInt(num2) e ver o resultado:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero: ");
 var num2 = prompt("Segundo numero: ");
 document.write("Soma = ", parseInt(num1) + parseInt(num2) );
 </script>
 </head>
</html
O resultado da soma fica:
Agora sim! O JS somou dois inteiros e exibiu a soma corretamente.
Faça um teste: digite um número decimal (lembre-se de usar ponto ao invés 
de vírgula).
▪ String para Decimal: parseFloat()
Se digitar 0.5 para o primeiro número e 1.5 para o segundo, o resultado do 
parseInt() será um bizarro 1. Isso mesmo:
0.5 + 1.5 = 1
Isso acontece pois usamos número decimais (flutuantes) na função 
parseInt(), que deve receber apenas números inteiros.
A maneira correta de transformar string para decimais (flutuantes) é usando a
função parseFloat(), veja como fica o código:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero decimal: ");
 var num2 = prompt("Segundo numero decimal: ");
 document.write("Soma = ", parseFloat(num1) + parseFloat(num2));
 </script>
 </head>
</html>
▪ Conversão de Números para Strings
Para converter um número, seja ele inteiro ou decimal, em uma string, é bem
simples: basta concatenar ele com uma String vazia.
Ou seja, 'somar' o número com "", veja:
1 + "" = "1"
2.9 + "" = "2.9"
2112 + "" = "2112"
Veja, o JavaScript entende que se somar um número com uma String, o 
resultado deve ser uma nova string, cuja concatenação é o número mais 
uma string vazia, ou seja, o número na forma de string.
Durante nosso curso precisaremos fazer essas conversões diversas vezes, 
dependendo do tipos de dados em JavaScript que queremos trabalhar.
http://www.javascriptprogressivo.net/2018/07/Tipos-Dados-Valores-JavaScript.html
Operadores Matemáticos em JavaScript: Somar +,
Subtrair -, Multiplicar *, Dividir / e Exponenciação 
(math.pow)
Neste tutorial de nosso Curso de JavaScript online grátis, vamos aprender
como fazer as 4 operações básicas da Matemática e usar seus operadores 
para realizar operações aritméticas.
▪ Operação Matemática em JS
Vamos voltar no tempo agora e aprender a fazer as operações matemáticas 
de adição, subtração, multiplicação e divisão.
A novidade é ... nenhuma. É a mesma coisa!
Mas só para dizer que não tudo exatamente igual, o símbolo de multiplicar é 
o asterisco: *
Já o símbolo de dividir é uma barra: /
Vamos criar um Script que pede dois números ao usuário, via método 
prompt() e exibe a soma, diferença, produto e divisão do primeiro pelo 
segundo:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero: ");
 num1 = parseInt(num1);
 var num2 = prompt("Segundo numero: ");
 num2 = parseInt(num2);
 var soma = num1+num2;
 var sub = num1-num2;
 var mult = num1 * num2;
 var div = num1/num2;
 document.write("Adição = ", soma, "<br>");
 document.write("Subtração = ", sub, "<br>");
 document.write("Multiplicação = ", mult, "<br>");
 document.write("Divisão = ", div);
 </script>
 </head>
</html>
▪ Código JavaScript comentado
A primeira coisa diferente no nosso script é:
num1 = parseInt(num1)
Vamos lá.
Primeiro, pedimos ao leitor do seu site que forneça o primeiro valor, ele vai 
ser armazenado em num1 como uma string.
Vamos usar o operador de atribuição = para mudar o valor na variável num1.
Antes era uma string, agora vai receber um novo valor, que é um número: 
parseInt(num1)
Ou seja: num1 = parseInt(num1)
Deve ser lido como: "O novo valor de num1 é o antigo valor de num1 
transformado em inteiro"
Faremos bastante isso em nosso curso, ok?
Depois, em nosso código JS, declaramos e inicializamos quatro variáveis: 
soma, sub, mult e div, que armazenarão os resultados das operações 
matemáticas de soma, subtração, multiplicação e divisão, respectivamente.
Lembrando que após escrever (write()) cada resultado, precisamos escrever 
na página uma quebra de linha também. No HTML, fazemos a quebra de 
linha com a tag <br>
Se preferir, é possível abreviar mais ainda o código e evitando de escrever 
as novas variáveis:
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero: ");
 num1 = parseInt(num1);
 var num2 = prompt("Segundo numero: ");
 num2 = parseInt(num2);
 document.write("Adição = ", num1+num2, "<br>");
 document.write("Subtração = ", num1-num2, "<br>");
 document.write("Multiplicação = ", num1*num2, "<br>");
 document.write("Divisão = ", num1/num2);
 </script>
▪ Exercício de JavaScript
Eu digitei a seguinte sequência de código em um script JS:
var teste;
teste = 1 ;
teste = teste +1 ;
teste = teste * teste
Ao final, eu escrevi document.write(teste) no meu documento HTML.
Se programar o código acima, apenas lendo, você poderia dizer qual o valor 
que vai aparecer, da variável teste ?
Digite nos comentários sua resposta.
Em seguida crie um script JS com o código e rode para ver o resultado. Você
acertou?
Não vale mentir :)
▪ Exponenciação em JavaScript (elevado a): método 
pow()
As quatro operações Matemáticas básicas de soma, diferença, produto e 
divisão, são bem simples e sem mistério, como explicadas acima, basta usar 
os operadores: + - * /
Porém, existe uma outra operação muito importante e usada, a 
exponenciação.
É o famoso: ... elevado a ...
Por exemplo:
2 elevado a 2 = 2² = 2 * 2 = 4
3 elevado a 2 = 3² = 3 * 3 = 9
2 elevado a 3 = 2³ = 2 * 2 * 2 = 8
Lembrou, né?
Não tem um operador ( + - * /) pra fazer isso, diretamente.
Em JavaScript, usamos o método pow()
Sintaxe:
Math.pow(x , y)
Ele vai retornar: x elevado a y.
Vamos ver um exemplo de um site, com um script JS que solicita dois 
números ao usuário e retorna o valor do primeiro elevado ao segundo:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var num1 = prompt("Primeiro numero: ");
 num1 = parseInt(num1);
 var num2 = prompt("Segundo numero: ");
 num2 = parseInt(num2);
 document.write(num1," elevado a ", num2, " = ", Math.pow(num1, num2) );
 </script>
 </head>
</html>
Exercícios Básicos de JavaScript
Agora que aprendemos os principais conceitos básicos da linguagem, em 
nossa seção Introdução ao JavaScript, vamos propor alguns exercícios.
É importante você tentar, se esforçar ao máximo possível. Se não souber 
algo, pesquise na internet, tente descobrir. Mesmo quando se tornar um 
programador profissional, vai precisar fazer pesquisas todo santo dia.
Habitue-se a isso. Um bom programador é aquele que tem a capacidade de 
aprender algo novo todo dia.
▪ Exercícios de Introdução ao JavaScript
01. Escreva um programa que pede o raio de um círculo, e em seguida exiba
o perímetro e área do círculo.
O valor do pi está armazenado em:
Math.PI
Pronto, terá o float com o valor do pi.
02. Você está no Brasil, e para temperatura usamos o grau Celsius.
Porém, quando você for contrato para trabalhar como programador Python 
no exterior, deverá usar graus Fahrenheit.
A fórmula da conversão é a seguinte:
 Ou seja, você fornece a temperatura em graus Celsius, e seu script JS faz a 
conversão para graus Fahrenheit.
03. Agora faça o contrário. Você fornece a temperatura em graus Fahrenheit,
seu programa deve converter para Celsius e exibir na tela a temperatura em 
graus Celsius.
https://2.bp.blogspot.com/-QzSgswCAMJo/WoevQVe1XvI/AAAAAAAAA7k/-VBV6oeKUccI8uOtXJsN1MCzJwoxkbJZgCLcBGAs/s1600/conversao-celcius-para-fahrenheit.png
04. Um novo modelo de carro, super econômico foi lançado.
Ele faz 20 km com 1 litro de combustível.
Cada litro de combustível custa R$ 5,00.
Faça um programa que pergunte ao usuário quanto de dinheiro ele tem e em
seguida diga quantos litros de combustível ele pode comprar e quantos 
kilometros o carro consegue andar com este tanto de combustível.
Seu script será usado no computador de bordo do carro.
A solução do exercício 04 deixamos para vocês.
Pra saber se está certo, é só fazer as contas na mão pra conferir se bateu 
com o resultado de seu script.
▪ Soluções
01.
Para resolver esse exercício, vamos precisar de duas fórmulas bem 
conhecidas da Matemática:
Área do círculo: pi * raio²
Comprimento da circunferência: 2 * pi * raio
Vamos lá.
Primeira parte de nosso código JS é pedir o raio ao internauta, usando o 
comando prompt() que já ensinamos, e armazenamos o que ele digitar na 
variável raio.
Lembrando que quando fazemos isso, armazenamos o que o usuário 
escreve na forma de string. Por isso, precisamos fazer uma conversão de 
string para float.
Fazemos isso com parseFloat() (relembre: Converter String para Float)
Em seguida, vamos declarar e inicializar duas variáveis:
comprimento, que vai receber o valor do comprimento, pela fórmula: 2 * 
Math.PI * raio
area, vai receber o valor da área, pela fórmula: Math.PI * raio * raio
Em seguida, apenas exibimos essas informações no documento, com a 
document.write() .
Veja como ficou nosso código:
<!DOCTYPE html>
<html>
 <head><title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var raio = prompt("Raio do circulo: ");
 raio = parseFloat(raio);
 var comprimento = 2 * Math.PI * raio;
 var area = Math.PI * raio * raio;
 document.write("Comprimento da circunferencia = ", comprimento, 
"<br>");
 document.write("Area da circunferencia = ", area);
 </script>
 </head>
</html>
É possível ainda simplificar mais nosso código, reduzir o número de linhas e 
variáveis declaradas.
Veja se entendeu:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
http://www.javascriptprogressivo.net/2018/07/Converter-String-para-Numero-Inteiro-Float-JavaScript.html
 <script type="text/javascript">
 var raio = parseFloat( prompt("Raio do circulo: ") );
 document.write("Comprimento da circunferencia = ", 2 * Math.PI * raio,
"<br>");
 document.write("Area da circunferencia = ", Math.PI * 
Math.pow(raio, 2));
 </script>
 </head>
</html>
02.
Vamos usar o comando prompt() para receber o dado do usuário e 
armazenar na variável celsius. Em seguida, devemos converter essa 
variável (que é inicialmente string), para um decimal, ou seja, um float, 
através da função parseFloat().
Reveja: Conversão de texto para número em JavaScript
Vamos armazenar a resposta na variável fahrenheit, o grande segredo 
desse exercício está na fórmula que mostramos, que linguagem de 
programação JavaScript se torna:
•fahrenheit = (9*celsius/5) + 32 ;
Bem simples, não?
Nosso código JS fica:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var celsius = parseFloat( prompt("Temperatura em 
 graus Celsius: ") );
 var fahrenheit = (9*celsius/5) + 32 ;
 document.write("Temperatura em graus Fahrenheit = ", 
http://www.javascriptprogressivo.net/2018/07/Converter-String-para-Numero-Inteiro-Float-JavaScript.html
 fahrenheit);
 </script>
 </head>
</html>
03.
Como está sua Matemática? Em dias?
Lembre-se: computação vem de computar, contar...programação é 
Matemática pura, 100% lógica, tudo raciocínio.
Pegue a fórmula anterior, que converte de C para F e isole o C, fica:
O cerne do código, que é essa expressão, fica:
•celsius = 5*(fahrenheit - 32) / 9 ;
Confere? Faz sentido?
Vamos ver como fica nosso código HTML + JS então:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <script type="text/javascript">
 var fahrenheit = parseFloat( prompt("Temperatura em graus Fahrenheit: 
") );
 var celsius = 5*(fahrenheit - 32) / 9 ;
 document.write("Temperatura em graus Celsius = ", celsius);
 </script>
 </head>
</html>
Testes condicionais: IF, ELSE e SWITCH
Primeiro de tudo, parabéns por ter concluído a seção de JavaScript básico 
de nosso curso.
Se notar bem, todos os nossos códigos e scripts seguiam um fluxo único: de 
cima pra baixo, linha por linha, e sempre faziam o mesmo, não importa 
quantas vezes o usuário acessasse a página.
Mas sabemos que na vida real não é assim. Se digita uma coisa, acontece 
algo.
Se digita outra, acontece outra coisa.
Se clica em um botão, abre um página.
Se clica em outro, não abre.
Se escrever algo certo (como login e senha), entra no sistema.
Se digitar algo errado, não entra, vai repetir tudo de novo até você acertar 
(looping). Ou, uma hora vai bloquear as tentativas.
Ou seja: o que acontece nos scripts depende sempre do que o usuário faz.
E é isso que iremos aprender nesta seção de nosso Curso de JavaScript 
online e grátis.
Vamos aprender sobre o teste condicional, IF e ELSE, onde aprenderemos a
fazer testes.
Por fim, aprenderemos sobre a estrutura SWITCH e seu poder de exibir 
escolhas.
Ao final desta seção, você já será um programador JavaScript com 
capacidades e possibilidades incríveis!
Formulário input - Recebendo valores do 
usuário no JavaScript
Neste tutorial de nosso Curso de JavaScript, vamos aprender como receber
qualquer tipo de dados do usuário, usando um formulário do tipo input e usar 
esses dados em nossos códigos de JavaScript.
Esta ideia será bastante usada em nossa seção de testes pois nossos scripts
vão ficar 'conversando' bastante com os usuários de nosso site, ok?
▪ Formulário de input - Receber dados do usuário no 
JS
Vamos criar uma página simples, que pede qualquer valor ou dado para o 
visitante da página (pode ser um caractere, string maior, número inteiro ou 
mesmo um flutuante ) e em seguida salve essa informação em uma variável 
chamada valor.
Por fim, vamos exibir o valor digitado em uma janelinha de alert.
Primeiro, o código. Em seguida, vamos explicar melhor cada trecho, veja:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 <input id="textinput" name="textinput" value="" type="text">
 <button onclick="enviar()">Confirmar</button>
 <script type="text/javascript">
 function enviar(){
 var valor = document.getElementById("textinput").value;
 alert("Você digitou: " + valor);
 }
 </script>
 </head>
</html>
▪ Código JavaScript comentado
A caixinha é uma espécie de formulário, especificamente do tipo input, onde 
é possível o usuário digitar o que quiser.
Veja: Formulários em HTML
Para fazer um formulário desse, usamos a tag <input> do HTML (faça o 
curso HTML Progressivo antes ou durante este curso de JavaScript).
O primeiro atributo é o id (identificação), e é muito importante ter uma uma 
identificação única, pois vamos usar os dados desse formulário através de 
sua id.
Também usamos o atribut name, value (string vazia, é o que aparece 
inicialmente no formulário) e deixamos bem claro que o tipo de formulário é 
de texto, type="text", até aí tudo bem e tranquilo, coisa do HTML.
Depois, usamos a tag <button> para criar um botão na página.
Tem um atributo nela, o onclick (ao clicar) e entre aspas está escrito 
enviar()
Isso quer dizer o seguinte: quando o usuário clicar (onclick) no botão, ele 
deve chamar a função enviar(), função do JavaScript.
Função nada mais é que um trecho de código que faz coisas específicas. Em
breve estudaremos bem mais a fundo as funções em JS.
Agora vem o nosso código JavaScript.
Ele tem apenas uma coisa: a função enviar()
Essa função simplesmente vai no documento (document) e pega um 
elemento pelo id (getElementById), especificamente o elemento textinput 
(nome nosso formulário input), copia seu valor (.value) e atribui a variável 
valor.
E prontinho, agora a variável valor pegou o que você digitou no formulário de
input. Em seguida, simplesmente exibimos isso em uma janelinha de alert.
Bem simples e bacana, não?
https://www.htmlprogressivo.net/p/formularios-em-html.html
Operadores de Comparação em JS: == , != , > , 
>= , < e <=
Neste tutorial de nosso Curso de JavaScript, vamos aprender sobre os 
operadores de comparação.
São eles:
•== (igualdade)
•!= (desiguldade)
•> (maior que)
•>= (maior ou igual)
•< (menor)
•<= (menor ou igual)
Vamos ver o que são, para que servem, onde estão usados e, claro, vamos 
aprender a usar eles com exemplos de código!
▪ Comparação em JavaScript
Quando estudamos as operações matemáticas em JS, aprendemos sobre os 
operadores de atribuição, pois sempre que usamos eles, estávamos fazendo 
uma atribuição.
Por exemplo:
var idade = 21 ;
Esse operador, de igualdade, está atribuindo o valor 21 para a variável 
idade.
É como se você desse uma ordem ao JavaScript.
Agora, em vez de dar uma ordem, vamos fazer perguntas ao JavaScript.
Porém ele tem uma peculiaridade: só responde True ou False.
Ou seja, ele só responde Verdadeiro ou Falso, o JS é um bicho bem direto.
Para fazer essas perguntas, usaremos 6 operadores, os ditos comparison 
operators, que são:
1.==
2.!=
3.>
https://www.javascriptprogressivo.net/2018/07/Operacao-Matematica-JavaScript-Soma-Subtracao-Multiplicacao-Divisao.html
4.>=
5.<
6.<=
▪ Operador de igualdade: ==
Este operadoré usado para saber se dois valores são iguais.
Se for, o JavaScript te responde com true e se não forem, com false.
Se digitar no console do JS: 1 == 1
Ele retorna um verdadeiro.
Já se digitar: 1 == 2
Ele retorna falso.
Veja:
▪ Diferença entre comparação e atribuição: = e ==
É bem comum e bem fácil as pessoas se confundirem entre atribuir e 
comparar.
Por exemplo, ao usar os operadores = e ==
Quando fazemos: a = b ;
Estamos dizendo: "Ei JS, faça com que a receba o valor de b, é uma ordem!"
Já quando fazemos: a == b ;
Estamos dizendo: "Ei, JS a é igual b ????"
Ou seja, quando atribuímos, damos uma ordem, o JavaScript obedece e 
ponto final, acabou.
Porém, quando fazemos uma comparação, estamos fazendo uma pergunta.
E o que você espera quando faz uma pergunta? Uma resposta.
E é isso que o JS faz: te dá uma resposta, responde true ou false, ou seja, a
comparação tem um retorno, sempre, ok?
▪ Operador de diferente: !=
O operador de diferente é o != e ele retorna true quando dois valores que 
estamos comparados são diferentes e retorna false quando eles são 
diferentes!
Ou seja, != é o contrário de ==
Vejamos alguns exemplos:
É possível também comparar um número com um caractere de um número, 
por exemplo:
1 == '1' : retorna true, pois o JS converte o caractere '1' em número 1 e 
compara.
▪ Operador de maior que: >
Agora os próximos operadores são os mesmo que você já aprendeu na 
escola.
O > é o símbolo de 'maior que'.
Quando fazemos: a > b
O JS retorna verdadeiro se o valor de a for maior que de b, apenas.
https://4.bp.blogspot.com/-giXcGw84EaE/W18JQRTzf2I/AAAAAAAAHvA/fITnQhZNREg34XwTPEnzYzgkuOGZJdBkgCLcBGAs/s1600/tutorial-javascript-operadores-comparacao.png
Se for igual ou menor, retorna false. Teste no console:
2 > 1 : true
2 > 2 : false
2 > 3 : false
O JavaScript é tão esperto, que compara até strings:
'b' > 'a' : true
'b' > 'c' : false
Ou seja, ele comparou ordem alfabética! Que sabido!
▪ Operador maior ou igual: >=
Esse operador retorna verdadeiro caso um valor seja igual ou maior que o 
outro.
Só retorna falso se for menor:
2 >= 1: true
2 >= 2: true
2 >= 3: false
Bem simples e óbvio.
▪ Operador menor: <
Se entendeu o operador de maior, facilmente vai entender esse.
a < b
Retorna verdadeiro caso o valor de a seja menor que b, e falso em todo caso
contrário (se a for igual a b ou se for maior que b)
1 < 1 : false
1 < 2 : true
▪ Operador menor ou igual: <=
No operador de menor ou igual, o JS retorna true caso o primeiro valor seja 
menor ou até se for igual. Só vai retorna false se o primeiro valor for maior 
que o segundo:
1 <= 1 : true
1 <= 2 : true
1 <= 0 : false
Exercício 1 de JavaScript
Crie uma página web com um código JavaScript que tenha a mesma 
funcionalidade do script abaixo:
Ou seja, o usuário vai digitar os dois valores, em cada caixinha, de cada 
comparação e clicar em 'Comparar' e ver se o resultado da comparação é 
true ou false.
Exercício 2 de JavaScript
Uma das características mais importantes de um programador, é saber 
pesquisar, fuçar e descobrir as coisas por conta própria.
Descubra como ver o código fonte de uma página. Em seguida, veja o desta 
página e ache o código HTML + JS do script anterior (página do site: https://
www.javascriptprogressivo.net/2018/07/Operador-Comparacao-JS-Igual-
Diferente-Menor-Maior.html) , é a solução do exercício.
Agora vamos seguir, que a próxima lição é uma das mais importantes de 
nosso Curso de JavaScript.
Vamos aprender sobre o teste condicional IF.
https://www.javascriptprogressivo.net/2018/07/Operador-Comparacao-JS-Igual-Diferente-Menor-Maior.html
https://www.javascriptprogressivo.net/2018/07/Operador-Comparacao-JS-Igual-Diferente-Menor-Maior.html
https://www.javascriptprogressivo.net/2018/07/Operador-Comparacao-JS-Igual-Diferente-Menor-Maior.html
IF - Teste Condicional em JavaScript
Neste tutorial, vamos falar de um dos assuntos mais importantes da 
programação em JavaScript, o teste condicional IF.
Para entender e usar o IF, você precisa ter lido o tutorial anterior:
Operadores de comparação
▪ Comando IF : Como Usar
A estrutura, o protótipo do comando IF, em JavaScript, é:
if (condicao) {
 codigo ;
 codigo ;
}
Primeiro, digitamos o comando if.
Em seguida, é necessário vir um teste, uma comparação: foi por isso que 
estudamos operadores de comparação no tutorial passado de nosso Curso 
de JavaScript, pois o teste condicional IF só funciona com uma expressão de
comparação.
Caso a condição retorne true (ou seja, seja verdadeira), o código entre os 
colchetes { } será executado.
Caso a condição retorne false, o código dentro dos colchetes não é 
executado. Este bloco inteiro de IF é pulado e o script continua rodando 
normalmente, como se aquele trecho não existisse.
Uma maneira ainda mais simples e fácil de entender a instrução if é pensar 
em sua tradução.
If significa se, em português.
Então, a lógica é assim: "se isso é verdade, executar a seguinte instrução ; 
se isso for falso, não fazer nada, pular a instrução seguinte".
▪ Teste condicional IF : Exemplos de Uso
Agora que aprendemos a definição, e a importância dos testes condicionais 
(ler seção Testes e Laços), vamos ver um exemplo de uso do comando IF em 
JavaScript.
Você foi contratado para criar um site no ramo adulto. Você deve criar 
um script que pergunte a idade do usuário, se ele for menor deve 
aparecer uma janela de alert informando que ele não pode acessar o 
conteúdo.
Primeiro, vamos pedir os dados do usuário em um formulário do tipo input.
Vamos pegar esse valor, via JavaScript, e armazenar na variável idade.
Como os valores que o usuário fornece são strings, passamos para inteiro 
via parseInt().
Agora vem o pulo do gato.
Vamos fazer um teste, testar se a variável idade é menor que 18:
if (idade<18){
 alert("Voce tem " + idade + " anos, menores de idade 
 nao podem entrar");
}
Se tiver digitado um valor menor que 18, o teste IF vai retornar verdadeiro e 
tudo dentro dos colchetes do IF será executado.
No caso, aparece uma mensagem dizendo sua idade e que menores não 
podem acessar o site.
O código completo do site com o script, fica:
<!DOCTYPE html>
<html>
 <head>
 <title>Curso JavaScript Progressivo</title>
 Digite sua idade:
 <input id="idade" type="text">
 <button onclick="entrar()">Entrar</button> <br />
 <script type="text/javascript">
http://www.javascriptprogressivo.net/2018/07/Converter-String-para-Numero-Inteiro-Float-JavaScript.html
http://www.javascriptprogressivo.net/2018/07/Recebendo-Valor-Usuario-Formulario-Input-JavaScript.html
https://www.javascriptprogressivo.net/p/testes-e-lacos.html
 function entrar(){
 var idade = parseInt(document.getElementById("idade").value);
 if (idade<18){
 alert("Voce tem " + idade + " anos, menores de idade 
 nao podem entrar");
 }
 }
 
 </script>
 </head>
</html>
Caso digite 17, por exemplo, e tentar entrar, vai ver este resultado na tela:
E o que acontece se você digitar 18 ou mais? Nada.
Afinal, o operação de comparação vai retornar false e o IF não vai ser 
executado, e o código corre normalmente.
Como não tem nada depois do IF, nada ocorre.
Entenda a natureza da coisa: o que vai acontecer vai depender do que o 
usuário fizer.
Nosso script está rodando baseado em condições, e não simplesmente 
rodando do começo até o fim, linha por linha, como era bem antigamente, 
antes da existência do JS (sim, as páginas sempre rodava do mesmo jeito, 
abriam e funcionavam da mesma maneira sempre, pra todos - agora não, 
são dinâmicas, 'conversam' com os internautas).
▪ Operadores de comparação no Teste Condicional IF
Uma das coisas mais legais da programação, é o fato de ser possível fazer a
mesma coisa de maneiras bem diferentes.
O código de um programador é como se fosse uma impressão digital, é 
único. Por isso, não tente nunca imitar ninguém, vá desenvolvendo sua 
lógica, seu raciocínio e sua criatividade.
Existem, por exemplo, outras maneiras de fazer esse mesmo teste 
condicional