Variáveis JavaScript: Aprenda a Definir e Usar

Introdução

Neste laboratório, os participantes explorarão os conceitos fundamentais de definição e utilização de variáveis em JavaScript, uma habilidade crucial para o desenvolvimento web. O laboratório guia os alunos através da compreensão do papel do JavaScript na criação de experiências web interativas, na configuração de um ambiente HTML e no domínio das técnicas de declaração e manipulação de variáveis.

Os participantes aprenderão como declarar variáveis usando a palavra-chave var, atribuir valores a essas variáveis e exibi-las dinamicamente em páginas web. Ao seguir instruções passo a passo, os alunos obterão experiência prática com os princípios básicos de programação do JavaScript, incluindo convenções de nomenclatura de variáveis e técnicas básicas de scripting que formam a base do desenvolvimento web moderno.

Entenda JavaScript e seu Papel no Desenvolvimento Web

Nesta etapa, você aprenderá sobre JavaScript e seu papel crucial no desenvolvimento web. JavaScript é uma linguagem de programação poderosa e versátil que traz interatividade e funcionalidade dinâmica para websites.

JavaScript é uma linguagem de scripting do lado do cliente (client-side scripting language) usada principalmente em navegadores web. Ele permite que os desenvolvedores criem páginas web interativas e dinâmicas, manipulando HTML e CSS, lidando com eventos do usuário e realizando cálculos complexos em tempo real.

Características-chave do JavaScript incluem:

Executa diretamente em navegadores web
Permite experiências web interativas
Pode modificar HTML e CSS dinamicamente
Suporta programação orientada a eventos (event-driven programming)
Usado tanto para desenvolvimento front-end quanto back-end (com Node.js)

Aqui está um exemplo simples para demonstrar a funcionalidade básica do JavaScript:

<!doctype html>
<html>
  <head>
    <title>JavaScript Introduction</title>
  </head>
  <body>
    <h1 id="greeting">Hello, Web Development!</h1>
    <script>
      // JavaScript can dynamically change page content
      document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
    </script>
  </body>
</html>

Exemplo de saída no navegador:

Welcome to JavaScript!

Este exemplo mostra como o JavaScript pode modificar instantaneamente o conteúdo da página web, demonstrando seu poder na criação de experiências web dinâmicas.

Configure o Arquivo HTML para JavaScript

Nesta etapa, você aprenderá como criar um arquivo HTML que pode incluir e executar código JavaScript. HTML fornece a estrutura para páginas web, e JavaScript adiciona interatividade e funcionalidade dinâmica.

Primeiro, navegue até o diretório do projeto:

cd ~/project

Crie um novo arquivo HTML chamado variables.html usando o WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Variables</title>
  </head>
  <body>
    <h1>Learning JavaScript Variables</h1>

    <!-- We'll add JavaScript here in the next steps -->
    <script>
      // JavaScript code will go here
    </script>
  </body>
</html>

Pontos-chave sobre a estrutura HTML:

<!DOCTYPE html> declara que este é um documento HTML5
A tag <script> é onde o código JavaScript será escrito
Você pode colocar a tag <script> na seção <head> ou <body>

Exemplo de saída quando aberto em um navegador:

Learning JavaScript Variables

A tag <script> permite que você escreva JavaScript diretamente no arquivo HTML ou faça um link para um arquivo JavaScript externo. Nas próximas etapas, adicionaremos código JavaScript a este arquivo para trabalhar com variáveis.

Declare Variáveis Usando a Palavra-chave var

Nesta etapa, você aprenderá como declarar variáveis em JavaScript usando a palavra-chave var. Variáveis são contêineres para armazenar valores de dados que podem ser usados e manipulados em todo o seu código.

Abra o arquivo variables.html no WebIDE e modifique a seção <script> para adicionar declarações de variáveis:

<!doctype html>
<html lang="en">
  <body>
    <script>
      // Declaring variables using var keyword
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // You can also declare a variable without initial value
      var lastName;
    </script>
  </body>
</html>

Pontos-chave sobre a declaração de variáveis:

var é usado para declarar variáveis em JavaScript
Variáveis podem armazenar diferentes tipos de dados:
- Strings (texto): "John"
- Números: 25
- Valores booleanos: true ou false
Você pode declarar uma variável sem um valor inicial

Para ver as variáveis em ação, você pode usar console.log() para exibir seus valores:

<script>
  var firstName = "John";
  console.log(firstName); // Outputs: John
</script>

Exemplo de saída no console do desenvolvedor do navegador:

John

Atribuir e Exibir Valores de Variáveis

Nesta etapa, você aprenderá como atribuir valores a variáveis e exibi-los usando diferentes métodos em JavaScript. Com base na etapa anterior, exploraremos como trabalhar com valores de variáveis.

Abra o arquivo variables.html e atualize a seção <script> com o seguinte código:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Declaring and assigning variables
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Reassigning variable values
      age = 26;
      firstName = "Jane";

      // Displaying values using console.log()
      console.log("Name: " + firstName);
      console.log("Age: " + age);
      console.log("Is Student: " + isStudent);

      // Displaying values on the webpage
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Name: " +
        firstName +
        "<br>Age: " +
        age +
        "<br>Is Student: " +
        isStudent;
    </script>
  </body>
</html>

Pontos-chave sobre a atribuição e exibição de variáveis:

Use = para atribuir ou reatribuir valores a variáveis
console.log() exibe valores no console do desenvolvedor do navegador
document.getElementById().innerHTML pode exibir valores diretamente na página web
Você pode concatenar strings e variáveis usando +

Exemplo de saída no console do desenvolvedor do navegador:

Name: Jane
Age: 26
Is Student: true

Exemplo de saída na página web:

Name: Jane
Age: 26
Is Student: true

Praticar Convenções de Nomenclatura de Variáveis

Nesta etapa, você aprenderá sobre as melhores práticas para nomear variáveis em JavaScript. Uma boa nomenclatura de variáveis é crucial para escrever um código limpo, legível e de fácil manutenção.

Abra o arquivo variables.html e atualize a seção <script> com os seguintes exemplos:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Good variable naming conventions

      // Use camelCase for variable names
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // Descriptive and meaningful names
      var totalPrice = 99.99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // Avoid single-letter variables (except in specific cases like loops)
      var x = 10; // Bad
      var width = 10; // Good

      // Display the results
      console.log("Full Name: " + firstName + " " + lastName);
      console.log("Discounted Price: $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Full Name: " +
        firstName +
        " " +
        lastName +
        "<br>Age: " +
        age +
        "<br>Discounted Price: $" +
        calculatedDiscount;
    </script>
  </body>
</html>

Principais convenções de nomenclatura de variáveis:

Use camelCase (por exemplo, firstName, lastName)
Escolha nomes descritivos e significativos
Evite nomes de variáveis de uma única letra
Seja consistente em seu estilo de nomenclatura
Use substantivos para variáveis
Use prefixos significativos como is para variáveis booleanas

Exemplo de saída no console do desenvolvedor do navegador:

Full Name: John Doe
Discounted Price: $9.999

Exemplo de saída na página web:

Full Name: John Doe
Age: 25
Discounted Price: $9.999

Resumo

Neste laboratório, os participantes exploram os conceitos fundamentais de variáveis JavaScript e seu papel no desenvolvimento web. O laboratório começa apresentando JavaScript como uma poderosa linguagem de script do lado do cliente que possibilita experiências web interativas e dinâmicas, destacando sua capacidade de manipular HTML e CSS, lidar com eventos do usuário e realizar cálculos em tempo real.

Através de uma abordagem passo a passo, os alunos configuram um arquivo HTML e começam a praticar a declaração de variáveis usando a palavra-chave var, compreendendo a importância das convenções adequadas de nomenclatura de variáveis e como atribuir e exibir valores de variáveis. Os exercícios práticos fornecem insights práticos sobre a criação de conteúdo web dinâmico, demonstrando a versatilidade do JavaScript na transformação de páginas web estáticas em experiências de usuário interativas e envolventes.

Definir e Usar Variáveis em JavaScript

Introdução

Entenda JavaScript e seu Papel no Desenvolvimento Web

Configure o Arquivo HTML para JavaScript

Declare Variáveis Usando a Palavra-chave var

Atribuir e Exibir Valores de Variáveis

Praticar Convenções de Nomenclatura de Variáveis

Resumo