Home

Awesome

40 - Exercicios em JavaScript (JS)

OLÁ INTERNET!!!

Tive a ideia de bolar uma lista de exercicios para quem tem interesse em aprender JavaScript.
São todos exercicios simples, focando em quem gostaria de iniciar porém está meio perdido.
Uma das vantagens de se começar a programar pelo JavaScript seria a premissa que todos tem um Browser/Navegador e um editor disponível.

Eu utilizo o VS-Code, é rapido é simples <del>é barato</del> é de graça. Com varios plugins para turbinar ele.
Dúvidas de como executar o primeiro exercício abaixo?
Como executar um script, Passo a Passo.

Just.... DO IT:

1 - Campo/Input do tipo text para preencher o nome completo.
1 - Botão com o texto: 'Exibir Nome' e ao clicar neste botão é exibido um alert com o valor do campo nome completo, ex: ' O Nome Completo é: "xxxx". '

Monitorando-Click
Exibir o nome ao clicar

Exemplos de entrada e saida:
'Gabriel' // 7
'Daniel' // 6
'Ronaldo' // 7
'Dennis Ritchie' // 14 (Espaço conta)

//SRC da Lampada (apagada)  
https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada.jpg?raw=true  

//SRC da Lampada (acessa)  
https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada-on.jpg?raw=true

... - Alterar-Src de Img

2 x - Campo/Input do tipo text. (id=soma1, id=soma2)
1 x - Botão (id=btn-soma)
1 x - Campo (id=resultado-soma)

Caso esteja preenchido um valor númerico nos dois campos(id=soma1, id=soma2), 
O resultado da soma devera aparecer no campo (id=resultado-soma) ao clicar no botão (id=btn-soma).

0 x 0 = 0
0 x 1 = 0
0 x 2 = 0
...
10 x 9 = 90
10 x 10 = 100

(Dica, pesquise um pouco de CSS para melhorar a visualização do resultado.)

Ex: 'Dota é melhor que LOL' (verdadeiro)
Ex: 'Lol é melhor que CS' (falso) / e Falso na vida real tmb.

Just.... DO IT ARRAYS:

Entenda sobre arrays: https://pt.wikipedia.org/wiki/Arranjo_(computa%C3%A7%C3%A3o) ou https://en.wikipedia.org/wiki/Array_data_type

Leia mais sobre como trabalhar com arrays: https://tableless.com.br/lidando-com-arrays-em-javascript/

Challenge Accepted

Com as imagens abaixo: Animação Urso

Crie uma animação, onde a imagem se troca entre 1,2 e 3, e mova o bloco para a direita, dando entender que o urso está 'andando'. <img src="https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/urso-animado.gif" alt="Urso Animado"/>

@Dica: Já deixei cortado cada uma com ( 32px x 32px )

  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-1.png
  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-2.png
  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-3.png

Basicamente você pode usar os exemplos abaixo:
Exemplo de temporizador/setTimeout()
Alterar-Style de uma div
Alterar-Src de Img

E obviamente um toque de de CSS para mover a img: Leitura recomendada: https://www.w3schools.com/css/css_positioning.asp

Caso ficou curioso de como fazer, tem um exemplo aqui:

Onde separei em 3 partes:

1-animacao (Onde ocorre a troca de forma dinamica entre a img-chara: 1,2,3)
2-mover-img (Empurro uma imagem estatica de forma dinamica da esquerda (left) até o final)
3-urso-animado (Junção de ambos exemplos, dando a impressão do urso 'andar')

Veja o código completo aqui:
https://github.com/gabrieldarezzo/gabrieldarezzo.github.io/tree/master/helpjs-ravi/desafio-urso

Demo Online do urso animado aqui: ( Não vale copiar em?! ) http://gabrieldarezzo.github.io/helpjs-ravi/desafio-urso/3-urso-animado/

BONUS -

Crie um campo texto no html que armazena o conteúdo em um array sempre que você clicar no botão, e apresente em uma lista(ul) possibilitando excluir individualmente o item/li clicado

JavaScript curiosidade...
http://pt.stackoverflow.com/questions/8035/qual-a-diferen%C3%A7a-entre-declarar-uma-matriz-com-array-e-em-javascript

Tópicos futuros:

Exemplos:

Exemplo de Saida: (Isto é um alert...)

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
  <script type="text/javascript">
      alert('Olá Mundo!');    
  </script>
</body>
</html>

Como executar um script

Está com dúvidas de como executar o 'Olá mundo' no JavaScript?! Fiz um passo a passo. -> (Não precisa de servidor, como eu disse aqui é só JavaScript.... Qualquer navegador/browser já executa.

Exemplo de Comentário

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
  <script type="text/javascript">
    //Isto é um comentário, vai ser ignorado pelo interpretador
  </script>
</body>
</html>

Exemplo de Alert() / Saída / Output de uma soma de dois inteiros (2+2)

Isto tambem é um alert, pode ser considera um 'exibir' ou 'saída' ou 'output' da linguagem:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
  <script type="text/javascript">
    alert(2 + 2);
  </script>
</body>
</html>

Entenda:
https://pt.wikipedia.org/wiki/Entrada/sa%C3%ADda ou https://en.wikipedia.org/wiki/Input/output

Monitorando um evento click

Isto monitora o evento 'click' pelo JS no html (Incorporado/Importado)


<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>

<button id="btn-clicou">Exibir Alert</button>

<script type="text/javascript">  
document.getElementById('btn-clicou').addEventListener('click', function() {
  alert('Click');
});
</script>
</body>
</html>

Isto monitora o evento 'click' (Inline / In-Tag)

<button onclick="alert('Hit-me');">Click-Me</button>

Exibir o nome ao clicar

Isto monitora o evento 'click' pelo JS no html (Incorporado/Importado)


<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
<p>Nome Completo:</p>
<input type="text" name="nome-completo" id="nome-completo" placeholder="Digite seu nome"/>
<br />
<input type="button" value="Exibir Nome" id="btn-exibir-nome"/>
<hr />
<script type="text/javascript">  
document.getElementById("btn-exibir-nome").addEventListener("click", function() {
  const nomeCompleto = document.getElementById('nome-completo').value;
  alert('O Nome Completo é: ' + nomeCompleto );	
});
</script>
</body>
</html>

Monitorando um evento click (2)

O código abaixo monitora o evento 'click' do elemento DOM com o id 'my-btn' e depois exibe o valor(value) do elemento my-txt

...
<body>
<p>Preencha Qualquer coisa e depois clique no botão abaixo...</p>
<input type="text" name="" id="my-txt" value="Aqui vai ser exibido"  />
<br />
<button id="my-btn">Outro 'Button'</button>

<script type="text/javascript">  
document.getElementById("my-btn").addEventListener('click', function() {
  var texto = document.getElementById("my-txt").value;
  alert(texto);
});
</script>
</body>
...

Alterar Style Div

O código abaixo seleciona um elemento pelo DOM (id="my-photo"), e altera o src deste elemento para 'foto-diferente.jpg'

...
<body>
  
  <style type="text/css">
  #quadrado {
    height: 100px;
    width: 100px;
  }
  </style>

  <div id="quadrado" style="background-color: #f00;"></div>  

  <script type="text/javascript">
    document.getElementById("quadrado").style = "background-color: #f00;";
  </script>


</body>
...

Alterar um atributo do HTML

O código abaixo seleciona um elemento pelo DOM (id="my-photo"), e altera o src deste elemento para 'foto-diferente.jpg'

...
<body>
  <img src="https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada.jpg?raw=true" alt="Minha Foto" id="my-photo"/>
  <script type="text/javascript">
    document.getElementById("my-photo").src = 'https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada-on.jpg?raw=true';
  </script>
</body>
...

Criar Função

O código abaixo cria uma função de somar em JavaScript, leia mais

...
<body>
    <script type="text/javascript">
        function somaDoisNumeros(primeiro, segundo){
        
            //Armazena o resultado da soma do primeiro parâmetro + segundo parâmetro.
            var resultado = primeiro + segundo;
            
            //E retorna a variavel.
            return resultado;
        }
        
        alert(somaDoisNumeros(1, 3));
        alert(somaDoisNumeros(3, 3));
        alert(somaDoisNumeros(2, 2));
    </script>
</body>
...

Exemplo de temporizador

O código abaixo tem um temporizador que executa uma função anônima após 2000 μs (microsecond) (2 segundos)

...
<body>
    <script type="text/javascript">
      setTimeout(function(){
        alert("Olá mundo atrasado dois segundos"); 
      }, 2000);        
    </script>
</body>
...

Explicações Gerais

Temos 3 formas de chamar um JavaScript (Inline, Incorporado, Importado) veja abaixo:

Inline (Veja o Demo)

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>JS Examples</title>
</head>
<body>
  <button onclick="alert('Hit-me');">Click-Me</button>
</body>
</html>

Incorporado (Veja o Demo)

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
    
  <script type="text/javascript">
    alert('Olá');
  </script>
</body>
</html>

Importado

Basicamente seria 2 arquivos no mesmo nivel de pasta (index.html) e (my_script.js) Conteúdo do 'index.html':

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>JS Examples</title>
</head>
<body>
  <script type="text/javascript" src="my_script.js"></script>
</body>
</html>

Conteúdo do 'my_script.js':

alert('Olá!!!');

Pow eu fiz os códigos, porem não acontece nada/fiz os códigos e não ocorreu o esperado....

*Ai meu filho você precisa aprender a debbugar:

Quer mais exercicios ?!

Ainda tem dúvida? Cria um 'Issue' tio....

Gosta de Videos?

Artigos lekais de JavaScript/HTML/CSS:

Pirou no 'Ursinho animado'?

Motivos para você usar o Google Chrome:

Entenda o que é 'Vanilla-js'
Powered By:
Vanilla-js