WDD 131: Fundamentos da Web Dinâmica

S01 – Atividade de Aprendizagem: Variáveis JavaScript

Visão Geral

As variáveis são usadas para armazenar valores. Esses valores podem ser primitivos, como um número, uma string, um valor booleano ou um valor nulo, ou podem ser objetos, como uma função, uma classe ou um objeto literal. Os valores podem ser usados como entrada para expressões, usados no processamento ou usados na saída para exibir informações.

Preparação

Responda às seguintes perguntas usando estes recursos ou fazendo sua própria pesquisa:

• Armazenando as informações que você precisa – Variáveis – MDN
• Estruturas de dados do JavaScript – MDN

1. Qual é a diferença entre const e let?
   Avalie Seu Conhecimento

   • const: Declara uma variável com um valor constante. Isso significa que, depois de atribuir um valor a uma variável const, você não poderá reatribuí-lo posteriormente no seu código.

     const anoAtual = new Date().getFullYear();

     A variável anoAtual recebe o ano atual do computador e não pode ser reatribuída posteriormente.

     Você pode inserir linhas de código na maioria dos sistemas de IA, e eles fornecerão uma análise explicando o propósito e a função de cada parte do código.

   • let: Declara uma variável que pode ser reatribuída posteriormente no seu código.

     let estaConectado = false;

2. O que é uma string?
   Avalie Seu Conhecimento

   Uma string é um tipo de dado formado por uma coleção ou sequência de caracteres tratados como uma única unidade. As strings podem incluir letras, números, símbolos e até espaços.

3. Qual é o tipo de dado de cada um dos seguintes?

   Passe o mouse sobre cada um dos valores indicados para revelar a resposta.

   • "101"
   • 101
   • true
   • null
   • undefined

   Quer saber mais sobre algum desses exemplos?
   Insira o seguinte prompt em um sistema de IA: "Em JS, qual é o tipo de dado nulo?"

4. O que você deve usar para encapsular strings?
   Avalie Seu Conhecimento

   Em JavaScript, você pode usar aspas simples ('), aspas duplas (") ou acentos graves (`) para definir literais de string.

   A maneira mais tradicional é usar aspas simples.

   'Isto é uma string.'

   Aspas duplas também são comumente usadas. Elas podem ajudar você a evitar o escape de aspas simples.

   "O dia está lindo!"

   Como os atributos HTML geralmente são colocados entre aspas duplas, alguns desenvolvedores preferem usar aspas simples para strings JavaScript a fim de distingui-las visualmente.

   Template literals usam acentos graves e oferecem suporte nativo a strings multilinhas. Também permitem incorporar variáveis e expressões JS diretamente.

5. O que é um template literal e por que é usado para construir strings?
   Avalie Seu Conhecimento

   Template literals são strings literais que permitem expressões incorporadas. Eles são colocados entre o acento grave (`) em vez de aspas simples ou duplas. Template literals podem conter espaços reservados, que são indicados pelo cifrão e chaves (${expression}).

   let nome = 'Alicia';
   let idade = 25;
   let mensagem2 = `Meu nome é ${nome} e tenho ${idade} anos.`;

6. O que são comentários de código e como eles são escritos em JavaScript?
   Avalie Seu Conhecimento

   • Comentar um código é uma maneira de fazer anotações no seu código para você e outras pessoas poderem registrar informações importantes a respeito dele.
   • Exemplo de comentários de código CodePen ☼ Comentários em Código JavaScript

Instruções da Atividade

1. Abra o CodePen ☼ Variáveis JavaScript.

   Você pode considerar criar sua própria conta gratuita no CodePen para armazenar snippets (trechos de código), caso ainda não tenha feito isso. O CodePen tem um editor de código baseado na web onde você pode escrever código HTML, CSS e JavaScript e ver os resultados em tempo real.

2. Leia as instruções no painel JavaScript na janela do CodePen.
3. Reflita sobre as questões fornecidas enquanto trabalha com os exemplos de código e revisa a saída.

   Vídeo de Demonstração (conteúdo em inglês): ▶️ Atividade de Variáveis JavaScript