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:
trueoufalse
- Strings (texto):
- 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 navegadordocument.getElementById().innerHTMLpode 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
ispara 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.
