1. Apresentando mensagens de alerta

Escreva um programa em JavaScript que apresente uma caixa de alerta para o usuário com uma informação qualquer.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      alert("Atenção: Aprenda JavaScript!");
    </script>
  </head>
  <body>
    <h1>Exercício 01</h1>
  </body>
</html>
alert("mensagem");

  • Esse método/função exibe uma caixa de alerta com uma mensagem especificada e um botão OK;
  • Uma caixa de alerta é frequentemente utilizada se você quer ter certeza de apresentar uma informação para o usuário;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada.

Resultado no navegador:

Uma caixa de alerta será apresentada

2. Apresentando mensagens de alerta pressionando botão

Faça um programa em JavaScript em que o usuário clicará com o mouse sobre um botão e em seguida uma mensagem de alerta será apresentada com uma mensagem qualquer.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      function minhaFuncao() {
        alert("Você clicou no botão!");
      }
    </script>
  </head>
  <body>
    <h1>Exercício 02</h1>
    <button onclick="minhaFuncao()">Clique aqui!</button>
  </body>
</html>

function minhaFuncao() { ... };

  • Cria uma função JavaScript (também chamada de método);
  • Uma função é um bloco de código JavaScript projetado para executar uma tarefa específica;
  • Uma função é definida com a palavra-chave function, seguido por um nome e seguido de parênteses ();
  • Nomes de funções pode conter letras, números, sublinhados e cifrões e seguem as mesmas regras da formação de nomes de variáveis;
  • Entre os parênteses podem incluir nomes de parâmetros (ou argumentos) separados por vírgulas: (parametro1, parametro2, ... );
  • Argumentos da função são os valores recebidos pela função quando ela é chamada e são nomeados com as mesmas regras da formação dos nomes de variáveis;
  • O código a ser executado pela função é colocado entre as chaves: { };
  • A função definida apresentará uma mensagem de alerta quando ela for executada (invocada/chamada).

alert("Mensagem");

  • Esse método/função exibe uma caixa de alerta com uma mensagem especificada e um botão OK;
  • Uma caixa de alerta é frequentemente utilizada se você quer ter certeza de apresentar uma informação para o usuário;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada.

<button onclick="minhaFuncao()">Clique aqui!</button>

  • Cria um botão e atribui a ele uma chamada de função para o evento onclick;
  • O evento onclick ocorre quando o usuário clica em um elemento.

Resultado no navegador:

Uma caixa de alerta será apresentada quando o usuário clicar sobre o botão criado.

3. Receber 3 números e informar qual é o maior e o menor

Faça um programa JavaScript que receba 3 números informados pelo usuário e em seguida apresente uma mensagem de alerta informando qual é o maior número dentre os números informados.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var numero01 = prompt("Informe o primeiro número", "100");
      var numero02 = prompt("Informe o segundo número", "200");
      var numero03 = prompt("Informe o terceiro número", "300");
      if ((numero01 > numero02) && (numero01 > numero03)) mensagem = "O primeiro número informado é maior!"
      else
      if ((numero02 > numero01) && (numero02 > numero03)) mensagem = "O segundo número informado é maior!"
      else
      if ((numero03 > numero01) && (numero03 > numero02)) mensagem = "O terceiro número informado é maior!"
      else
      mensagem = "Os números são iguais ou nada foi informado";
      alert(mensagem);
    </script>
  </head>
  <body>
    <h1>Exercício 03</h1>
  </body>
</html>

var variável = ( ... )

  • Define uma variável e atribui a ela um valor;
  • O valor atribuído às variáveis definidas serão as entradas do usuário através do método prompt().

prompt("...");

  • Esse método/função exibe uma caixa de alerta com uma mensagem específica e aguarda uma entrada (informação) do usuário;
  • Uma caixa de alerta/entrada é frequentemente utilizado se você quer ter certeza de entrar com uma informação antes de entrar em uma página, por exemplo;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada;
  • Esse método retorna o valor de entrada e foi definido uma variável que receberá essa informação;
  • O primeiro argumento passado para a função é uma mensagem personalizada; o segundo argumento determina um valor padrão para a informação solicitada;
  • Se o usuário clicar em "OK" o valor informado será retornado. Se o usuário clicar em "cancelar" o método retorna null.

alert("Mensagem");

  • Esse método/função exibe uma caixa de alerta com uma mensagem especificada e um botão OK;
  • Uma caixa de alerta é frequentemente utilizado se você quer ter certeza de apresentar uma informação para o usuário;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada.

Resultado no navegador:

Uma caixa de alerta será apresentada aguardando uma entrada.

4. Verificar se o usuário é menor de idade

Faça um programa JavaScript em que o usuário informará a sua idade e o programa emitirá uma mensagem dizendo se o usuário e ou não menor de idade.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var idade = parseInt(prompt("Informe a sua idade", "18"));
      if (!idade.isNaN) mensagem = "O número informado não é válido!"
      else
      if (idade < 18) mensagem = "A idade informada é de um menor!"
      else
      mensagem = "Se não estiver mentindo é maior de idade!";
      alert(mensagem);
    </script>
  </head>
  <body>
    <h1>Exercício 04</h1>
  </body>
</html>

var variável = ( ... )

  • Define uma variável e atribui a ela um valor;
  • O valor atribuído às variáveis definidas serão as entradas do usuário através do método prompt().

parseInt("...");

  • Esse método analisa uma cadeia de caracteres e retorna um número inteiro;
  • Se o primeiro caractere não puder ser convertido para um número, a função retornará NaN;

prompt("...");

  • Esse método exibe uma caixa de alerta com uma mensagem específica e aguarda uma entrada (informação) do usuário;
  • Uma caixa de alerta/entrada é frequentemente utilizado se você quer ter certeza de entrar com uma informação antes de entrar em uma página, por exemplo;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada;
  • Esse método retorna o valor de entrada e foi definido uma variável que receberá essa informação;
  • O primeiro argumento passado para a função é uma mensagem personalizada; o segundo argumento determina um valor padrão para a informação solicitada;
  • Se o usuário clicar em "OK" o valor informado será retornado. Se o usuário clicar em "cancelar" o método retorna null.

if (!idade.isNaN){ ... };

  • A partir dessa instrução serão feitas verificações para apresentar mensagens personalizadas para o usuário dependendo da entrada através do método prompt();
  • O método isNaN() determina se um valor é um número válido;
  • Pode-se também usar essa função com a seguinte sintaxe: isNaN('argumento');
  • Caso não seja um número válido retornará true;
  • A exclamação ( ! ) é um operador lógico que é usado para inverter o resultado devolvido pelo método isNaN():

  • Exemplo:

  • var numero = "123";

// O bloco de {'instruções'} será executado pois o método isNaN
// retornará true ao analisar a variável numero


  • if (numero.isNaN)   { 'instruções' };

// O bloco de {'instruções'} NÃO (!) será executado pois o método isNaN
// retornará true mas será invertido pelo operador lógico resultado em false


  • if (! numero.isNaN) { 'instruções' };

alert("Mensagem");

  • Esse método/função exibe uma caixa de alerta com uma mensagem especificada e um botão OK;
  • Uma caixa de alerta é frequentemente utilizado se você quer ter certeza de apresentar uma informação para o usuário;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada.

Resultado no navegador:

Uma caixa de alerta será apresentada aguardando uma entrada.

5. Calcule a média aritmética de 3 números

Faça um programa JavaScript em que o usuário informará 3 números e o programa calculará a média aritmética desses números.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var nota01 = parseInt(prompt("Informe o primeiro número", "9"));
      var nota02 = parseInt(prompt("Informe o segundo número", "4"));
      var nota03 = parseInt(prompt("Informe o terceiro número", "3"));
      alert("A média dos números informados é:" + (nota01+nota02+nota03)/3);
    </script>
  </head>
  <body>
    <h1>Exercício 05</h1>
  </body>
</html>

var variável = ( ... )

  • Define uma variável e atribui a ela um valor;
  • O valor atribuído às variáveis definidas serão as entradas do usuário através do método prompt().

parseInt("...");

  • Esse método analisa uma cadeia de caracteres e retorna um número inteiro;
  • Se o primeiro caractere não puder ser convertido para um número, a função retornará NaN;
  • A propriedade NaN representa valor "Not-a-Number". Esta propriedade indica que um valor não é um número válido.

prompt("...");

  • Esse método exibe uma caixa de alerta com uma mensagem específica e aguarda uma entrada (informação) do usuário;
  • Uma caixa de alerta/entrada é frequentemente utilizado se você quer ter certeza de entrar com uma informação antes de entrar em uma página, por exemplo;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada;
  • Esse método retorna o valor de entrada e foi definido uma variável que receberá essa informação;
  • O primeiro argumento passado para a função é uma mensagem personalizada; o segundo argumento determina um valor padrão para a informação solicitada;
  • Se o usuário clicar em "OK" o valor informado será retornado. Se o usuário clicar em "cancelar" o método retorna null.

alert("Mensagem");

  • Esse método/função exibe uma caixa de alerta com uma mensagem especificada e um botão OK;
  • Uma caixa de alerta é frequentemente utilizado se você quer ter certeza de apresentar uma informação para o usuário;
  • Esse alerta forçará o navegador a apresentar a mensagem e impedirá o usuário de acessar outras partes da página até que a caixa seja fechada.

Resultado no navegador:

Uma caixa de alerta será apresentada aguardando uma entrada.

6. Calcular o IMC do usuário. Use as TAGs: <input>, <button> e <div>.

Faça um programa JavaScript em que o usuário informará sua altura e peso e o programa calculará o seu IMC.

Utilize as TAGs: <input>, <button>, e <div> em sua página. Use a <div> com um identificador e apresente nela o resultado do cálculo do IMC.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      function calcularIMC() {
        var altura = document.getElementById("altura").value;
        var peso   = document.getElementById("peso").value;
        altura /= 100;
        var imc = (peso / (altura * altura)).toFixed(2);
        document.getElementById("resultadoIMC").innerHTML = "IMC: <strong>" + imc + "</strong>";
      }
    </script>
  </head>
  <body>
    <h1>Exercício 06</h1>
    <label for="altura">Altura (cm): </label>
    <input id="altura" type="number" min="100" max="250"><br>
    <label for="peso">Peso (kg): </label>
    <input id="peso" type="number" min="0" max="250"><br>
    <button onclick="calcularIMC()">Calcular o IMC</button>
    <div id="resultadoIMC"></div>
    <div id="extra">
      <pre>
***************************************************************
|    IMC          |          CATEGORIA                        |
|-------------------------------------------------------------|
| Até 18,5        |  Abaixo do peso                           |
| De  18,5 - 24,9 |  Saudável                                 |
| De  25,0 - 29,9 |  Sobrepeso                                |
| De  30,0 - 39,9 |  Obeso                                    |
| Acima de 40     |  Extremo ou alto risco de obesidade       |
***************************************************************
      </pre>
  </body>
</html>

function minhaFuncao() { ... };

  • Cria uma função JavaScript (também chamada de método);
  • Uma função é um bloco de código JavaScript projetado para executar uma tarefa específica;
  • Uma função é definida com a palavra-chave function, seguido por um nome e seguido de parênteses ();
  • Nomes de funções pode conter letras, números, sublinhados e cifrões e seguem as mesmas regras da formação de nomes de variáveis;
  • Entre os parênteses podem incluir nomes de parâmetros (ou argumentos) separados por vírgulas: (parametro1, parametro2, ... );
  • Argumentos da função são os valores recebidos pela função quando ela é chamada e são nomeados com as mesmas regras da formação dos nomes de variáveis;
  • O código a ser executado pela função é colocado entre as chaves: { };
  • A função definida, quando for chamada, calculará o IMC a partir de valores de elementos da página.

var variável = ( ... )

  • Define uma variável e atribui a ela um valor;
  • Os valores atribuídos às variáveis definidas serão as informações de elementos da página identificados através do método getElementById('identificador'), onde .value retornará o valor a ser atribuído.

document.getElementById("ID").value

  • Esse método/função retorna o elemento que possui o ID de atributo com o valor especificado;
  • É usado quase toda vez em que se desejar manipular, ou obter informações, de um elemento em seu documento;
  • O atributo .value retorna o conteúdo do elemento.

document.getElementById("ID").innerHTML

  • A propriedade .innerHTML retorna o conteúdo HTML de um elemento encontrado na página pelo método getElementById('ID') (onde "ID" é o identificador único atribuído ao elemento);
  • Para obter o conteúdo de um elemento deve-se fazer uma atribuição do seu valor a uma variável (nomeVariavel = elemento.innerHTML);
  • Para alterar o conteúdo deve-se atribuir o novo conteúdo como exemplificado (elemento.innerHTML = "novo_conteúdo");
  • Por aceitar código HTML pode-se incluir TAGs para formatar o seu conteúdo.
  • No nosso exemplo o método encontra o elemento na página identificado por id="resultadoIMC" e altera o seu conteúdo a partir da variável imc concatenada com TAGs HTML.

<label for="ID">

  • Essa TAG define um rótulo para um elemento <input>;
  • Esse elemento não apresenta nada de especial para o usuário. No entanto, ele fornece uma melhoria de usabilidade para os usuários do mouse, porque, se o usuário clica sobre o texto dentro desse elemento o elemento <input> receberá o foco/controle.

<button onclick="minhaFuncao()">Clique aqui!</button>

  • Cria um botão e atribui a ele uma chamada de função para o evento onclick;
  • O evento onclick ocorre quando o usuário clica em um elemento.

<pre> ... </pre>

  • Texto pré formatado: o texto é apresentado exatamente como digitado;
  • O texto nesse elemento é exibido em uma fonte de largura fixa (geralmente Courier), e também preserva os espaços e quebras de linha.

Resultado no navegador:

Exercício 06













***************************************************************
|    IMC          |          CATEGORIA                        |
|-------------------------------------------------------------|
| Até 18,5        |  Abaixo do peso                           |
| De  18,5 - 24,9 |  Saudável                                 |
| De  25,0 - 29,9 |  Sobrepeso                                |
| De  30,0 - 39,9 |  Obeso                                    |
| Acima de 40     |  Extremo ou alto risco de obesidade       |
***************************************************************

7. Encontre os múltiplos de 3 ou 5

Se listarmos todos os números naturais abaixo de 10 que são múltiplos de 3 ou 5, obtemos 3, 5, 6 e 9. A soma desses múltiplos é 23.
Faça um programa JavaScript que encontre a soma de todos os múltiplos de 3 ou 5 abaixo de 1000.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var multiplos3 = 0;
      var multiplos5 = 0;
      for (i = 0; i < 1000; i++) {
        multiplos3 += (i % 3 == 0) ? i : 0;
        multiplos5 += (i % 5 == 0) ? i : 0;
      }
      document.write("Somatórios dos Múltiplos de 3: " + multiplos3 + "<br>");
      document.write("Somatórios dos Múltiplos de 5: " + multiplos5 + "<br>");
      document.write("Somatórios dos Múltiplos de 5 e 3: " + parseInt(multiplos3+multiplos5));
    </script>
  </head>
  <body>
    <h1>Exercício 07</h1>
  </body>
</html>

var variável = ( ... )

  • Define uma variável e atribui a ela um valor.

for (i = 0; i < 1000; i++) { ... };

  • Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for menor que 1.000;
  • Esse laço de repetição tem por objetivo encontrar todos os múltiplos de 3 e 5 entre 0 (i = 0) e 999 (i = 999) e somá-los às variáveis definidas;
  • Os múltiplos de 3 e 5 são todos os números que divididos por eles não deixem restos;
  • Exemplo:
  • Múltiplos de 3:
    

  • 0, 3, 6, 9, 12, 15, 18, 21 (...)
    

  • 9 / 3 = 3, Resto = O logo 9 é um múltiplo de 3.

variavel += (i % n == 0) ? i : 0;

  • Faz uma operação com o atual valor da variável e o resultado da expressão de seleção ternário;
  • O resultado retornado pela expressão de seleção será o contador i ou ZERO ( 0 );
  • A condição da expressão de seleção verifica se há restos na divisão do contador i por n (n é igual a 3 ou 5 em nosso exemplo);
  • Sem restos indicará que foi encontrado um divisor ( n ) e o contador é um múltiplo de n;
  • Com restos da operação será somado a ZERO, ou seja, o valor da variável não será alterado.

document.write('mensagem');

  • Escreve diretamente no documento e apresenta mensagens personalizadas.

Resultado no navegador:

Somatórios dos Múltiplos de 3: 166833
Somatórios dos Múltiplos de 5: 99500
Somatórios dos Múltiplos de 5 e 3: 266333

8. Encontre a soma dos termos em uma sequência Fibonacci

Cada novo termo na seqüência de Fibonacci é gerado adicionando os dois termos anteriores. Começando com 0 e 1, os primeiros termos serão:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ( ... )

Considerando os termos da sequência de Fibonacci a partir dos pares 0 e 1, cujos valores não excedam cinquenta mil, encontre a soma dos termos pares.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var arrSequencia    = [0, 1];
      var sequencia       = 0;
      var numPares        = 0;
      var numImpares      = 0;
      var somaPares       = 0;
      var proximoElemento = 0;
      do {
        sequencia++
        proximoElemento = arrSequencia[sequencia] + arrSequencia[sequencia-1];
        proximoElemento < 50000 ? (
          arrSequencia.push(proximoElemento),
          proximoElemento % 2 == 0 ? 
            ( numPares  ++ , 
              somaPares += proximoElemento )
            : numImpares ++ )
        : false;
        } while  (proximoElemento < 50000);
      document.write("Sequencia de números : " + arrSequencia.join(' / ') + "<br><br>");
      document.write("Quantidade de números pares : " + numPares + "<br>");
      document.write("Quantidade de números impares : " + numImpares + "<br>");
      document.write("Somatórios dos números pares : " + somaPares)
    </script>
  </head>
  <body>
    <h1>Exercício 07</h1>
  </body>
</html>

var arrSequencia = [0, 1];

  • Define um array e atribui os seus dois primeiros elementos para começar a encontrar a sequência Fibonacci.
var variavel = ( ... );

  • Define uma variável e atribui o seu valor;
  • Definidas as variáveis de controle.
do { instruções } while (proximoElemento < 50000);

  • Enquanto o número da sequencia Fibonacci (a soma dos dois últimos elementos do array) não for maior que 50.000 as instruções entre chaves ( { ... } ) serão executadas.
sequencia++

  • Variável usada para determinar a posição do último elemento do array;
  • Inicialmente essa variável vale ZERO e é incrementada em +1 (++), para apontar para o segundo elemento do array;
  • Lembre-se: o índice de acesso ao primeiro elemento de um array é (ZERO), ao segundo elemento 1 (UM) e assim sucessivamente.
proximoElemento = arrSequencia[sequencia] + arrSequencia[sequencia-1];

  • Armazena na variável proximoElemento o próximo número da sequência (está somando o último elemento [sequencia] ao elemento anterior [sequencia-1] do array).
proximoElemento < 50000 ? ( primeira_instrução ) : ( segunda_instrução );

  • Se o próximo elemento da sequência for menor que 50 mil, executará a primeira instrução;
  • utilizando o operador condicional ternário ao invés de uma instrução condicional if ... else;
  • Atenção! Foram usados dois operadores ternários aninhados(!) e várias instruções foram executadas, separadas por vírgulas;
  • Como foi utilizado: expressão ? ( instrução, instrução, ...) : (instrução, instrução, ...);
: false;

  • Esta é a segunda instrução do primeiro operador ternário: proximoElemento < 50000 ? (primeira) : (segunda);
  • Quando o próximo elemento da sequência for maior que 50 mil ele será ignorado e será apresentado no navegador as mensagens com os resultados da execução do código JavaScript.
arrSequencia.join(' / ')

  • Esse método junta os elementos de um array em uma cadeia de caracteres (string) separados pelo separador especificado como argumento (entre parênteses).

Resultado no navegador:

Sequencia de números : 0 / 1 / 1 / 2 / 3 / 5 / 8 / 13 / 21 / 34 / 55 / 89 / 144 / 233 / 377 / 610 / 987 / 1597 / 2584 / 4181 / 6765 / 10946 / 17711 / 28657 / 46368

Quantidade de números pares : 8
Quantidade de números impares : 15
Somatórios dos números pares : 60696

9. Qual é o 1001o número primo?

Listando os seis primeiros números primos: 2, 3, 5, 7, 11 e 13, podemos ver que o sexto primo é 13.

Qual é o 1001º número primo? Faça um programa JavaScript que apresente esse número para o usuário.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var primosEncontrados = 0;
      for (dividendo = 2; primosEncontrados < 1001; dividendo++) {
        var ehPrimo = true;
        for (divisor = 2; dividendo > divisor ; divisor++) {
          if (dividendo % divisor == 0) {
            ehPrimo = false;
            break;
          };
        };
        if (Boolean(ehPrimo)) { 
          primosEncontrados++;
        }
      };
      document.write("O 1001o número primo é: ");
      document.write(--dividendo + '<br><br>');
    </script>
  </head>
  <body>
    <h1>Exercício 09</h1>
  </body>
</html>
A Lógica:

  • Será iniciado uma verificação de números primos, a partir do número DOIS (2), até que 1001 números primos tenham sido encontrados;
  • Para verificar se um número é primo temos que dividir esse número por todos os números menores que ele até DOIS (dividendo = 2);
  • Se em qualquer dessas divisões consecutivas o resto da divisão for igual a ZERO o número NÃO é um número primo.
Exemplo:

Não dividiremos por ele mesmo nem por UM pois o resto da divisão de qualquer número por ele mesmo e por UM será igual a ZERO.

9/9 = 1 => Resto = 0 (Dividiu por ele mesmo!)
9/1 = 1 => Resto = 0 (Dividiu por 1.)

E quando dividirmos por todos os números menores que ele até o número DOIS?

9/8 = 1 => Resto = 1
9/7 = 1 => Resto = 2
9/6 = 1 => Resto = 3
9/5 = 1 => Resto = 4
9/4 = 2 => Resto = 1
9/3 = 3 => Resto = 0 (Dividiu por 3, logo não é primo)
9/2 = 4 => Resto = 1

O número somente será um número primo quando RESTAR ZERO somente na divisão dele por ele mesmo e por UM!

Agora vamos analisar o programa JavaScript

var primosEncontrados = 0;

  • Define a variável que servirá para contar os números primos encontrados.
for (dividendo = 2; primosEncontrados < 1001; dividendo++) {... };

  • Laço de repetição que repetirá o bloco de comandos enquanto o contador ( primosEncontrados ) for menor que 1001;
  • Inicialmente foi atribuído à variável dividendo o número DOIS (2), o primeiro número primo;
  • A cada iteração (repetição/loop) o valor da variável dividendo será incrementado em + 1 ( ++ ) e na sequência será verificado se essa variável/número é um número primo ou não;
  • A variável dividendo será incrementada até que o 1001o número primo seja encontrado, ou seja, até que a variável primosEncontrados seja igual a 1001.
var ehPrimo = true;

  • Essa variável terá o seu valor modificado para false se a variável dividendo não for um número primo (próximo laço de repetição).
for (divisor = 2; divisor < dividendo ; divisor++) { ... };

  • Laço de repetição para verificar se o dividendo atual é um número primo;
  • A divisão começará com o divisor iniciando em DOIS (2) até quando o divisor for MENOR que o dividendo.
if (dividendo % divisor == 0) { ehPrimo = false; break; };

  • Se em qualquer iteração (repetição) o resto da divisão for igual a ZERO significará que o dividendo não é um número primo;
  • Um número primo é aquele número que só pode ser dividido por ele mesmo ou por UM (1) sem deixar restos;
  • Em nosso laço de repetição a variável divisor nunca será UM (inicialmente é definido com o valor DOIS), e nunca será igual ao dividendo pois o laço de repetição irá parar quando divisor < dividendo.
if (Boolean(ehPrimo)) { primosEncontrados++; }

  • Caso o último dividendo tenha sido um número primo a variável que está contanto os números primos encontrados será incrementada em +1 ( ++ ).
  • Quando a variável dividendo não for um número primo a variável ehPrimo será falsa (false), a variável primosEncontrados não será incrementada, o programa voltará para o laço de repetição inicial para verificar o próximo dividendo.

Resultado no navegador:

O 1001o número primo é: 7927

Exercício 09

10. Exibir números primos que estão entre o número 0 e o 200

Crie um programa que exiba em uma tabela e destaque todos os números primos que estão entre 0 e 200.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;}
      table {
        border-collapse: collapse;}
      th, td {
        padding: 5px;}
    </style>
    <title>JavaScript Exercício</title>
    <script>
      tabelaHTML = "<table><tr><th colspan='50'>Números Primos entre 0 e 200<tr><td>1";
      var primosEncontrados = 0;
      for (dividendo = 2; dividendo <= 200; dividendo++) {
        var ehPrimo = true;
        for (divisor = 2; divisor < dividendo ; divisor++) {
          if (dividendo % divisor == 0) {
            ehPrimo = false;
            tabelaHTML += "<td>" + dividendo;
            break;
          };
        };
        if (Boolean(ehPrimo)) { 
          tabelaHTML += "<td bgcolor='#00FF00'>" + dividendo;
          primosEncontrados++;
        }
        dividendo % 20 == 0 ? tabelaHTML += "<tr>" : false;
      };
      tabelaHTML += "</table>";
      document.write(tabelaHTML)
      document.write('Primos encontrados: ' + primosEncontrados+ '<br>');
    </script>
  </head>
  <body>
    <h1>Exercício 10</h1>
  </body>
</html>
A Lógica:

  • Será iniciado uma verificação de números primos, a partir do número DOIS (2), até que 200 números tenham sido encontrados;
  • Os números encontrados serão apresentados em uma tabela (<table>) e os números primos estarão destacados;
  • Para verificar se um número é primo temos que dividir esse número por todos os números menores que ele até DOIS (dividendo = 2);
  • Se em qualquer dessas divisões consecutivas o resto da divisão for igual a ZERO o número NÃO será um número primo.
Exemplo:

Não dividiremos por ele mesmo nem por UM pois o resto da divisão de qualquer número por ele mesmo e por UM será igual a ZERO.

9/9 = 1 => Resto = 0 (Dividiu por ele mesmo!)
9/1 = 1 => Resto = 0 (Dividiu por 1.)

E quando dividirmos por todos os números menores que ele até o número DOIS?

9/8 = 1 => Resto = 1
9/7 = 1 => Resto = 2
9/6 = 1 => Resto = 3
9/5 = 1 => Resto = 4
9/4 = 2 => Resto = 1
9/3 = 3 => Resto = 0 (Dividiu por 3, logo não é primo)
9/2 = 4 => Resto = 1

O número somente será um número primo quando RESTAR ZERO somente na divisão dele por ele mesmo e por UM!

Agora vamos analisar o programa JavaScript

tabelaHTML = "<table><tr><th colspan='50'>Números Primos entre 0 e 200<tr><td>1";

  • Cria uma variável que será preenchida com as TAGs de uma tabela e com o seu conteúdo de forma dinâmica;
  • Inicialmente será atribuído um título e o primeiro elemento: 01;
  • O conteúdo da primeira célula será o número UM, pois durante o processo, para encontrar os números primos, ele não será validado.
var primosEncontrados = 0;

  • Define a variável que servirá para contar os números primos encontrados e apresentar uma mensagem para o usuário ao final do processo.
for (dividendo = 2; primosEncontrados <= 200; dividendo++) {... };

  • Laço de repetição que repetirá o bloco de comandos enquanto o contador ( dividendo ) for menor ou igual a 200;
  • Inicialmente foi atribuído à variável dividendo o número DOIS (2), o primeiro número primo;
  • A cada iteração (repetição/loop) o valor da variável dividendo será incrementado em +1 ( ++ ) e na sequência será verificado se essa variável/número é um número primo ou não;
  • A variável dividendo será incrementada até que o 200 números sejam processados.
var ehPrimo = true;

  • Essa variável terá o seu valor modificado para false se a variável dividendo não for um número primo (próximo laço de repetição).
for (divisor = 2; divisor < dividendo ; divisor++) { ... };

  • Laço de repetição para verificar se o dividendo atual é um número primo;
  • A divisão começará com o divisor iniciando em DOIS (2) até quando o divisor for MENOR que o dividendo.
if (dividendo % divisor == 0) { ehPrimo = false; break; };

  • Se em qualquer iteração (repetição) o resto da divisão for igual a ZERO significará que o dividendo não é um número primo;
  • Um número primo é aquele número que só pode ser dividido por ele mesmo ou por UM (1) sem deixar restos;
  • Em nosso laço de repetição a variável divisor nunca será UM (inicialmente é definido com o valor DOIS), e nunca será igual ao dividendo pois o laço de repetição irá parar quando divisor < dividendo.
tabelaHTML += "<td>" + dividendo;

  • Em continuação concatena uma CÉLULA (<td>) com o valor da variável dividendo ao final da variável tabelaHTML.
if (Boolean(ehPrimo)) { primosEncontrados++; }

  • Caso o último dividendo tenha sido um número primo a variável que está contanto os números primos encontrados será incrementada em +1 ( ++ ).
  • Quando a variável dividendo não for um número primo a variável ehPrimo será falsa (false), a variável primosEncontrados não será incrementada, o programa voltará para o laço de repetição inicial para verificar o próximo dividendo.
tabelaHTML += "<td bgcolor='#00FF00'>" + dividendo;

  • Em continuação concatena uma CÉLULA (<td>) com o valor da variável dividendo ao final da variável tabelaHTML;
  • Por se tratar de um número primo a célula será formatada/destacada com uma cor (verde), conforme solicitado no enunciado do problema.
dividendo % 20 == 0 ? tabelaHTML += "<tr>" : false;

  • A cada VINTE células será concatenado à variável tabelaHTML a TAG <tr> para que seja iniciado uma nova linha na tabela;
  • Se o resto da divisão do número atual (dividendo) por 20 for igual a ZERO significará que é um múltiplo de 20, ou seja, que mais 20 células foram inseridas.

Resultado no navegador:

11. Calcule o Delta de uma função de segundo grau

Calculo do Delta (Δ) de uma função de segundo grau.

Sabendo que:

a = 2, b = 8 e c = – 24

O valor de delta é dado pela seguinte expressão: Δ = b2 – 4ac, em que a, b e c são coeficientes da equação e Δ é delta.

Tomando o exemplo anterior, na equação 2x2 + 8x – 24 = 0, delta vale:

Δ = b2 – 4ac
Δ = 82 – 4·2·(– 24)
Δ = 64 + 192
Δ = 256

Crie um programa JavaScript que faça esse cálculo, mostrando o cálculo passo a passo e o resultado final, a partir de números informados pelo usuário!

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      function calcularDelta() {
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        var c = document.getElementById("c").value;
        resultadoHTML =  "";
        resultadoHTML += "&Delta; = " + b + "<sup>2</sup> - 4 * " + a + " * " + c + '<br>';
        resultadoHTML += "&Delta; = " + b * b + " - 4 * " + a + " * " + c + '<br>';
        resultadoHTML += "&Delta; = " + b * b + " - " + 4 * a + " * " + c + '<br>';
        resultadoHTML += "&Delta; = " + b * b + " - " + 4 * a * c + '<br>';
        resultadoHTML += "&Delta; = " + parseInt(b * b - 4 * a * c) + '<br>';
        document.getElementById("resultadoDelta").innerHTML = resultadoHTML;
      }
    </script>
  </head>
  <body>
    <h1>Exercício 11</h1>
    <h3>&Delta; = b<sup>2</sup> - 4 . a . c</h3>
    <label for="a">Valor de a: </label>
    <input id="a" type="number" min="0" max="100"><br>
    <label for="b">Valor de b: </label>
    <input id="b" type="number" min="0" max="100"><br>
    <label for="c">Valor de c: </label>
    <input id="c" type="number" min="0" max="100"><br><br>
    <button onclick="calcularDelta()">Calcular o &Delta;</button>
    <p></p>
    <div id="resultadoDelta"></div>
  </body>
</html>

function minhaFuncao() { ... };

  • Cria uma função JavaScript (também chamada de método);
  • Essa função, quando executada, calculará o Δ (Delta) a partir de valores de elementos da página;
  • Os cálculos serão apresentados passo a passo.

var variável = ( ... )

  • Define uma variável e atribui a ela um valor;
  • Os valores atribuídos às variáveis definidas serão as informações de elementos da página identificados através do método getElementById('identificador'), onde .value retornará o valor a ser atribuído.

document.getElementById("ID").value

  • Esse método/função retorna o elemento que possui o ID de atributo com o valor especificado;
  • É usado quase toda vez em que se desejar manipular, ou obter informações, de um elemento em seu documento;
  • O atributo .value retorna o conteúdo do elemento.

resultadoHTML += " ( ... )

  • Concatena a uma variável os resultados dos cálculos;
  • Os valores concatenados (resultados) estão formatados com TAGs HTML.

document.getElementById("ID").innerHTML

  • A propriedade .innerHTML retorna o conteúdo HTML de um elemento encontrado na página pelo método getElementById('ID') (onde "ID" é o identificador único atribuído ao elemento);
  • Para obter o conteúdo de um elemento deve-se fazer uma atribuição do seu valor a uma variável (nomeVariavel = elemento.innerHTML);
  • Para alterar o conteúdo deve-se atribuir o novo conteúdo como exemplificado (elemento.innerHTML = "novo_conteúdo");
  • Por aceitar código HTML pode-se incluir TAGs para formatar o seu conteúdo.
  • No nosso exemplo o método encontra o elemento na página identificado por id="resultadoDelta" e altera o seu conteúdo a partir da variável resultadoHTML.

<button onclick="minhaFuncao()">Clique aqui!</button>

  • Cria um botão e atribui a ele uma chamada de função para o evento onclick;
  • O evento onclick ocorre quando o usuário clica em um elemento.

Resultado no navegador:

Exercício 11


Δ = b2 - 4 . a . c

12. Inverta uma sequência de caracteres informada sem utilizar funções nativas JavaScript

Dada uma sequência de caracteres, inverta o seu conteúdo e apresente ao usuário o resultado invertido.

Não utilize funções nativas do JavaScript.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      function inverter() {
        var nome = document.getElementById("nome").value;
        var nomeInvertido = '';
        for (var i = nome.length - 1; i >= 0; i--) {
          nomeInvertido += nome[i];
        }
        return nomeInvertido;
      }
    </script>
  </head>
  <body>
    <h1>Exercício 12</h1>
    <label for="nome">Informe um nome qualquer: </label>
    <input id="nome" type="text" maxlength=100 minlength=2><br>    
    <button onclick="alert(inverter())">Retrevni (Inverter)</button>
  </body>
</html>

Nota Importante!

  • Uma sequencia de caracteres é uma strings e é utilizada, normalmente, para guardar dados que podem ser representados em forma de texto;
  • Uma string pode ser tratada como um objeto array (Array-like), onde os caracteres individuais correspondem a um índice numérico;
  • Exemplo: na variável txt = "mguilla" podemos pegar o seu segundo caractere com a instrução result = txt[1];, retornando o caractere 'g' na variável result;
  • Lembre-se: O primeiro índice de um array é representado pelo ZERO ( 0 ).

function minhaFuncao() { ... };

  • Cria uma função JavaScript (também chamada de método);
  • A função definida no exemplo dado, ao ser executada, inverterá a sequência de caracteres obtido a partir do valor de um elementos da página e retornará (return) essa sequência invertida.

document.getElementById("ID").value

  • Esse método/função retorna o elemento que possui o ID de atributo com o valor especificado;
  • É usado quase toda vez em que se desejar manipular, ou obter informações, de um elemento em seu documento;
  • O atributo .value retorna o conteúdo do elemento.

for (var i = nome.length - 1; i >= 0; i--) { ... };

  • Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for maior ou igual a ZERO ( 0 );
  • Esse laço de repetição percorrerá a sequência informada obtendo cada letra ou caractere, a partir da última posição até a primeira posição (de trás para frente);
  • nome.length - 1 retornará o tamanho da sequência menos 1 (decremento de 1);
  • O contador i será decrementado (-1) a cada iteração até que seu valor seja igual a ZERO (0).

nomeInvertido += nome[i];

  • Concatena o valor atual da variável nomeInvertido com o caractere da sequência indicado por nome[i];
  • A instrução nome[i] acessa o caractere da variável nome na posição representado por [i];
  • Inicialmente o acesso será ao último caractere da sequência e continuará decrescendo até o primeiro caractere.

<label for="ID">

  • Essa TAG define um rótulo para um elemento <input>;
  • Esse elemento não apresenta nada de especial para o usuário. No entanto, ele fornece uma melhoria de usabilidade para os usuários do mouse, porque, se o usuário clica sobre o texto dentro desse elemento o elemento <input> receberá o foco/controle.

<button onclick="minhaFuncao()">Clique aqui!</button>

  • Cria um botão e atribui a ele uma chamada de função para o evento onclick;
  • O evento onclick ocorre quando o usuário clica em um elemento;
  • No exemplo dado o evento onclick apresentará uma janela de alerta (alert('mensagem')) onde a 'mensagem' será o valor retornado pela função definida (funcition inverter() { ... }).

Resultado no navegador:

Exercício 12

13. Potênciação com qualquer base ou expoente

1) Elaborar um programa que apresente o resultado de uma operação de potenciação com números aleatórios, inteiros e positivos;
2) Apresente os números envolvidos na operação (base, expoente e potência/resultado);
3) O exercício de deverá ser elaborado SEM o uso de função JavaScript Math.pow();

Observação:

A potenciação (ou exponenciação) é uma operação onde um dado número é multiplicado por ele mesmo, uma quantidade 'n' de vezes.

an = b

Onde:
  a = base;
  n = expoente;
  b = potência.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      document.write("Base: 2" + '<br>');
      document.write("Expoente: 3" + '<br>');
      document.write("Resultado: " + (2*2*2));
    </script>
  </head>
  <body>
    <h1>Exercício 13</h1>
  </body>
</html>

document.write('mensagem');

  • Escreve diretamente no documento e apresenta mensagens personalizadas.

document.write("Resultado: " + (2*2*2));

  • Apresenta uma mensagem concatenada com o resultado da multiplicação de um número (base) por ele mesmo;
  • A multiplicação é feita tantas vezes quantas representado pelo expoente.

document.write("Resultado: 8");

  • Outra forma apresentar literalmente o resultado sem a operação de multiplicação.

Resultado no navegador:

Base: 2
Expoente: 3
Resultado: 8

14. Potênciação exibindo os resultados de cada operação

1) Elaborar um programa que apresente o resultado de uma operação de potenciação usando os números 2 (dois) e 8 (oito) como base e expoente respectivamente;
2) Apresente passo a passo os resultados, começando com o expoente em 0 (zero) até o expoente máximo (8);
3) O exercício de deverá ser elaborado SEM o uso de função JavaScript Math.pow() ou do laço de repetição for();
4) Apresente a base e o expoente no formato padrão de potenciação (Ex: 32), utilizando a TAG <sup>.

Observação:

A potenciação (ou exponenciação) é uma operação onde um dado número é multiplicado por ele mesmo, uma quantidade 'n' de vezes.

an = b

Onde:
  a = base;
  n = expoente;
  b = potência.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      document.write("Base: 2" + "<br>");
      document.write("Expoente: 8" + "<br><br>");
      document.write("2<sup>0</sup> = 1" + "<br>");
      document.write("2<sup>1</sup> = " + (2*1) + "<br>");
      document.write("2<sup>2</sup> = " + (2*2) + "<br>");
      document.write("2<sup>3</sup> = " + (2*2*2) + "<br>");
      document.write("2<sup>4</sup> = " + (2*2*2*2) + "<br>");
      document.write("2<sup>5</sup> = " + (2*2*2*2*2) + "<br>");
      document.write("2<sup>6</sup> = " + (2*2*2*2*2*2) + "<br>");
      document.write("2<sup>7</sup> = " + (2*2*2*2*2*2*2) + "<br>");
      document.write("2<sup>8</sup> = " + (2*2*2*2*2*2*2*2) + "<br>");
    </script>
    </script>
  </head>
  <body>
    <h1>Exercício 14</h1>
  </body>
</html>

document.write('mensagem');

  • Escreve diretamente no documento e apresenta mensagens personalizadas.

document.write("2<sup>2</sup> = " + (2*2) + "<br>");

  • Apresenta uma mensagem concatenada com o resultado da multiplicação de um número (base) por ele mesmo;
  • A multiplicação é feita tantas vezes quantas representado pelo expoente;

document.write("2<sup>2</sup> = " + (2*2*...);

  • As demais instrução apresentam os resultados passo a passo como solicitado no item 2 até o expoente máximo (8).
  • Apresenta no navegador a base e o expoente no formato solicitado no item 4 ( an ).

Resultado no navegador:

Base: 2
Expoente: 8

20 = 1
21 = 2
22 = 4
23 = 8
24 = 16
25 = 32
26 = 64
27 = 128
28 = 256

15. Potênciação exibindo os resultados de cada operação utilizando o laço de repetição for

1) Elaborar um programa que apresente o resultado de uma operação de potenciação usando os números 2 (dois) e 8 (oito) como base e expoente respectivamente;
2) Apresente passo a passo os resultados, começando com o expoente em 0 (zero) até o expoente máximo (8);
3) O exercício de deverá ser elaborado SEM o uso de função JavaScript Math.pow();
4) Utilize o laço de repetição for;
5) Apresente a base e o expoente no formato padrão de potenciação (Ex: 32), utilizando a TAG <sup>.

Observação:

A potenciação (ou exponenciação) é uma operação onde um dado número é multiplicado por ele mesmo, uma quantidade 'n' de vezes.

an = b

Onde:
  a = base;
  n = expoente;
  b = potência.

Clique aqui e veja a solução: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exercício</title>
    <script>
      var base      = 2;
      var expoente  = 8;
      var resultado = base;
      document.write('Base: 2' + '<br>');
      document.write('Expoente: 8' + '<br><br>');
      for (i = 0; i <= expoente; i++) {
        if (i == 0) {
          document.write('2<sup>' + i + '</sup> = 1 <br>');
        } else if (i == 1) {
          document.write("2<sup>" + i + "</sup> = " + (2*1) + "<br>");
        } else {
          for (x = 2; x <= i; x++) {
            resultado *= base;
          }
          document.write("2<sup>" + i + "</sup> = " + resultado + "<br>");
          resultado = base;
        }
      }
    </script>
  </head>
  <body>
    <h1>Exercício 15</h1>
  </body>
</html>

var = (...);

  • Cria as variáveis que serão usadas no processamento do código JavaScript;

document.write('mensagem')

  • Escreve diretamente no documento e apresenta mensagens personalizadas.

for (i = 0; i <= expoente; i++) { ... }

  • Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for menor ou igual ao expoente ( 8 );
  • Esse laço de repetição atende ao item 2 (apresentar passo a passo os cálculos a partir do expoente ZERO).

document.write("2<sup>" + i + "</sup> (...));

  • Apresenta no navegador a base e o expoente no formato solicitado no item 5 ( an ).

if (i==0) {...} else if (i==1) {...}

  • Se a variável i for igual a 0 ou 1 será apresentado, literalmente, uma mensagem informando o resultado que seria obtido pela operação de exponenciação com o expoente 0 ou 1.

} else { for (x = 2; x <= i; x++) {...}

  • Se o contador i não for 0 nem 1 então (else) faremos um segundo laço de repetição;
  • O contador x controlará quantas vezes (expoente) faremos a multiplicação para simular a exponenciação;
  • Enquanto x for menor ou igual a i nosso código fará a multiplicação da base por ela mesma.

resultado *= base;

  • Executando a multiplicação da base por ela mesma;
  • Executará a multiplicação enquanto x for menor ou igual a i.
  • Inicialmente a variável resultado foi definida com o mesmo valor da variável base;
  • Essa operação está armazenando o resultado cumulativamente na variável resultado;
  • O mesmo que resultado = resultado * base.

Resultado no navegador:

Base: 2
Expoente: 8

20 = 1
21 = 2
22 = 4
23 = 8
24 = 16
25 = 32
26 = 64
27 = 128
28 = 256