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>
- 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
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.
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.
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.
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.
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étodogetElementById('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ávelimc
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 | ***************************************************************
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
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.
- Define uma variável e atribui o seu valor;
- Definidas as variáveis de controle.
- 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.
- 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.
- 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).
- 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, ...);
- 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.
- 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
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>
- 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.
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 = 19/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.
- 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ávelprimosEncontrados
seja igual a 1001.
- Essa variável terá o seu valor modificado para
false
se a variáveldividendo
não for um número primo (próximo laço de repetição).
- 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.
- 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 aodividendo
pois o laço de repetição irá parar quandodivisor < dividendo
.
- 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ávelehPrimo
será falsa (false
), a variávelprimosEncontrados
não será incrementada, o programa voltará para o laço de repetição inicial para verificar o próximodividendo
.
Resultado no navegador:
O 1001o número primo é: 7927
Exercício 09
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>
- 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.
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 = 19/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.
- 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.
- 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.
- Essa variável terá o seu valor modificado para
false
se a variáveldividendo
não for um número primo (próximo laço de repetição).
- 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.
- 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 aodividendo
pois o laço de repetição irá parar quandodivisor < dividendo
.
- Em continuação concatena uma CÉLULA (
<td>
) com o valor da variáveldividendo
ao final da variáveltabelaHTML
.
- 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ávelehPrimo
será falsa (false
), a variávelprimosEncontrados
não será incrementada, o programa voltará para o laço de repetição inicial para verificar o próximodividendo
.
- Em continuação concatena uma CÉLULA (
<td>
) com o valor da variáveldividendo
ao final da variáveltabelaHTML
; - Por se tratar de um número primo a célula será formatada/destacada com uma cor (verde), conforme solicitado no enunciado do problema.
- 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:
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 += "Δ = " + b + "<sup>2</sup> - 4 * " + a + " * " + c + '<br>';
resultadoHTML += "Δ = " + b * b + " - 4 * " + a + " * " + c + '<br>';
resultadoHTML += "Δ = " + b * b + " - " + 4 * a + " * " + c + '<br>';
resultadoHTML += "Δ = " + b * b + " - " + 4 * a * c + '<br>';
resultadoHTML += "Δ = " + parseInt(b * b - 4 * a * c) + '<br>';
document.getElementById("resultadoDelta").innerHTML = resultadoHTML;
}
</script>
</head>
<body>
<h1>Exercício 11</h1>
<h3>Δ = 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 Δ</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étodogetElementById('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ávelresultadoHTML
.
<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
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çãoresult = txt[1];
, retornando o caractere 'g' na variávelresult
; - 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 pornome[i]
; - A instrução
nome[i]
acessa o caractere da variávelnome
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
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
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
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 ai
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 ai
. - Inicialmente a variável
resultado
foi definida com o mesmo valor da variávelbase
; - 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