01 - Declarando variáveis

Variáveis são valores que utilizamos para armazenar dados. Elas podem ser coisas simples como palavras ou até elementos da tela.
Em JavaScript nós temos três formas de declarar variáveis:

  • var - São variáveis globais, ou seja, que podem ser acessadas de qualquer lugar do código.
  • const - São variáveis que seus valores não podem ser alterados diretamente.
  • let - São variáveis que seus valores podem ser alterados diretamente.
Para as variáveis do tipo const e let ficam disponíveis apenas dentro da função em que elas foram declaradas. Já as var são disponíveis em qualquer lugar do código, até por isso evitamos usá-las.
Dito isso, nos exemplos abaixo usaremos var pois nossos elementos estão disponíveis no HTML de forma global.



Nesse primeiro exemplo nós precisamos pegar na tela os elementos de ambos os usuários e fazermos com que eles se encontrem. Você poder ver o nome dos usuários passando o mouse por cima das imagens. Você pode seguir o exemplo da primeira linha para poder pegar o segundo usuário. Se atente ao nome utilizado na função.




Agora nesse exemplo, nós precisamos pegar o primeiro usuário que está exposto e disfarçar ele no nosso sistema, use a função de pegarElemento utilizada no exemplo anterior para poder pegar o usuário exposto.






02 - Condições

Condições são usadas para fazer uma comparação entre dois ou mais valores.
As condições possuem normalmente a seguinte estrutura:

            if (condicao) {
              // Se a condição for verdadeira, então...
            } else {
              // Se a condição for falsa, então...
            }

Para fazermos comparações entre valores nós utilizamos os operadores ==, ou ===, quando queremos dizer que os valores são iguais, e !=, ou !==, quando queremos dizer que os valores são diferentes.
E podemos ter condições complexas utilizando os operadores de &&, que representa o AND e ||, que representa o OR.
Para condições do tipo AND serem consideradas verdadeiras, todas as condições devem ser verdadeiras. Já para condições do tipo OR, apenas uma precisa ser verdadeira.

0001
0002
0003

Temos nesse cenário uma fila de atendimento, e o numero atual para o atendimento está na variável codigoAtual. Adicione na condição uma comparação entre os valores do codigoBoy01 e codigoAtual. Você pode utilizar tanto o ==, quanto o ===.




Nesse caso temos uma pessoa fantasiada com uma fantasia não muito legal para o carnaval.
Você consegue saber a fantasia utilizando usuario.fantasia.
Faça uma condição para caso o usuário esteja fantasiado de indio você tire ele do carnaval






03 - Estruturas de Repetições

É muito comum enquanto estamos programando utilizarmos estruturas que ao invés de armazenar apenas um elemento, elas armazenem um conjunto de elementos. Essas estruturas são comumente chamadas de listas, ou vetores. Para interagir com listas nós precisamos utilizar um recurso de linguagens de programações que são os laços/loops, esses recursos trabalham com um contador que nos dá a possibilidade de iterar sobre cada um conjunto de elementos.
Nessa parte nós veremos principalmente o for, pois ele é uma das estruturas mais utilizadas para interagir com listas. E está disponível em todas as linguagens de programação.
O for segue a seguinte estrutura:

            for (var contador = 0; contador < quantidade_de_elementos; contador++) {
              // Executa algo aqui
            }
Esse contador começa com o valor 0 pois as listas começam a contar do 0 para frente. A segunda parte do for se refere à condição que deve ser verdadeira para que o loop seja executado. A terceira parte do for é a ação que será executada a cada loop, nesse caso, nós iremos rodar o for enquanto o contador for menor que o tamanho da nossa lista. A última parte será para garantir que a cada vez que rodarmos o for o contador será incrementado, sendo assim, ele irá na primeira vez rodar como 0, depois 1, 2 e assim sucessivamente.


Temos agora vários usuários no nosso sistema, mas precisamos proteger as informações deles. Adicione a condição para o for rodar e disfarçar cada um dos usuários.
Você pode saber o tamanho da lista utilizando $lista.length.






04 - Estruturas de dados

No tópico anterior falamos de Listas, porém nós em nenhum momento exploramos como podemos declarar as listas. Nesse tópico nós veremos as duas estruturas principais do JavaScript, os Objetos, e as Listas.

Listas

São declaradas utilizando [ /* ... */ ], e elas são acessadas utilizando indices de valores numericos, veja esse exemplo:
            var lista = ["😴", "😄", "😃" ];

            lista[0] // 😴
            lista[1] // 😄
            lista[2] // 😃
É comum listas armazenarem apenas valores dos mesmos tipos, porém, não é uma regra isso. Nós podemos declarar listas contendo qualquer tipo de dados. Com listas nós podemos ordenar, filtrar, remover e adicionar elementos.
            var lista = ["🥚","🐔"];

            lista.pop()      // Removendo o último elemento da lista
            lista            // [ "🥚" ]

            lista.push("🥚") // Adicionando um elemento no fim da lista
            lista            // [ "🥚", "🐔", "🥚" ]

            lista.sort()     // Ordenando a lista
            lista            // ["🐔", "🥚"]
            lista[0]         // 🐔

Objetos

São declarados utilizando { /* ... */ }, e elas são acessadas utilizando indices com valores ou de strings, ou números, veja esse exemplo:
            var objeto = {
              dormindo: "😴",
              feliz: {
                muito: "😄",
                pouco: "😃"
              }
            };

            objeto.dormindo // 😴
            objeto.feliz.muito // 😄
            objeto.feliz.pouco // 😃
Como você pode ver no exemplo anterior, objetos podem conter outros objetos, e listas. Nós chamamos esse tipo de estrutura de estrutura multidimensional. Por conta de termos índices variáveis, para sabermos as chaves de um objeto, podemos utilizar a função Object.keys, veja esse exemplo:
            var objeto = {
              dormindo: "😴",
              feliz: {
                muito: "😄",
                pouco: "😃"
              }
            };

            objeto.keys() // [ "dormindo", "feliz" ]
E para pegarmos os valores multiníveis nós precisaríamos percorrer o objeto utilizando funções mais complexas. Objetos são ótimos para armazenar valores de forma compreensível para humanos por podermos utilizar palavras para identificar cada item.





05 - Funções

Até o momento nós já utilizamos várias funções sem perceber, o JavaScript já nos fornece várias funções nativas para realizarmos várias operações, como o .keys() dos objetos, porém nós também podemos declarar nossas próprias funções. Veja abaixo alguns exemplos:

            function soma(a, b) {
              return a + b;
            }
            function multiplicar(a, b) {
              return a * b;
            }





Revisão de Funções e Estrutura de dados


Outra forma de acessarmos objetos é utilizando [nomeDaPropriedade] como por exemplo: meuObjeto["chave de acesso"].
Com isso em mente nós precisamos criar uma função que traduza uma palavra, no exemplo abaixo nós temos já no nosso dicionário Hello, e How are you. Se essa função fosse chamada assim:
traduzir("en", "ola")
O retorno deveria ser: Hello.
Para completar esse desafio, você precisará adicionar no objeto dicionario a tradução para o idioma português com Olá e Como você está.
E completar a função para acessar no nosso dicionário de acordo com o idioma e a palavra passada para a função.