Operadores e Expressões JavaScript

Introdução

Bem-vindo ao laboratório "Operadores e Expressões em JavaScript". Nesta sessão prática, você aprenderá sobre os blocos de construção fundamentais da programação em JavaScript: operadores e expressões. Operadores são símbolos especiais usados para realizar operações em valores (operandos), e uma expressão é qualquer unidade de código que resulta em um valor.

Você começará com operadores aritméticos básicos como adição, subtração, multiplicação e divisão. Em seguida, explorará como o operador de adição também pode ser usado para combinar strings, um processo conhecido como concatenação. Finalmente, você aprenderá sobre o conveniente operador de incremento. Ao final deste laboratório, você será capaz de realizar manipulações básicas de dados em JavaScript.

Use o operador de adição em números

Nesta etapa, você aprenderá a usar o operador de adição (+) para realizar a adição em números. Esta é uma das operações aritméticas mais comuns.

Seu ambiente de laboratório já está configurado com um arquivo index.html e um arquivo script.js dentro do diretório ~/project. Escreveremos todo o nosso código JavaScript no arquivo script.js.

Primeiro, localize o arquivo script.js no explorador de arquivos no lado esquerdo da sua tela. Clique nele para abri-lo no editor.

Agora, adicione o seguinte código ao script.js. Este código declara duas variáveis numéricas, as soma e usa console.log() para imprimir o resultado no console do desenvolvedor do navegador.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

Após adicionar o código, salve o arquivo pressionando Ctrl+S.

Para ver a saída, navegue até a aba Web 8080 na parte superior da interface. Em seguida, abra o console do desenvolvedor pressionando F12 ou clicando com o botão direito na página, selecionando "Inspect" (Inspecionar) e, em seguida, clicando na aba "Console". Você deverá ver a mensagem The sum is: 15.

Aplique os operadores de subtração e multiplicação

Nesta etapa, você aplicará os operadores de subtração (-) e multiplicação (*). Estes funcionam da mesma forma que o operador de adição, mas realizam cálculos diferentes.

Continue editando o arquivo ~/project/script.js. Adicione as seguintes linhas de código abaixo do seu código existente para calcular a diferença e o produto dos mesmos dois números.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

Salve o arquivo novamente (Ctrl+S). Atualize a aba Web 8080 (você pode usar o botão de atualização dentro da aba). O console do desenvolvedor agora mostrará os resultados para adição, subtração e multiplicação.

Implemente os operadores de divisão e módulo

Nesta etapa, exploraremos os operadores de divisão (/) e módulo (%). O operador de divisão realiza a divisão padrão, enquanto o operador de módulo retorna o resto de uma divisão. Isso é útil para tarefas como determinar se um número é par ou ímpar.

Adicione o seguinte código ao final do seu arquivo ~/project/script.js.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

Salve o arquivo e atualize a aba Web 8080. Verifique o console para ver a nova saída para divisão e o resto. Você deverá ver que o quociente é 2 e o resto é 1.

Concatene strings usando o operador plus

Nesta etapa, você verá um uso diferente para o operador +: concatenação de strings. Quando usado com strings, o operador + as une para criar uma nova string mais longa.

Vamos criar duas variáveis de string e concatená-las. Adicione este código ao final de ~/project/script.js.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

No exemplo acima, estamos unindo firstName, um espaço " " e lastName para formar uma frase completa.

Após salvar o arquivo, atualize a aba Web 8080. O console agora exibirá a string concatenada: Hello World.

Incremente a variável com o operador ++

Nesta etapa final, você aprenderá sobre o operador de incremento (++). Este é um operador unário, o que significa que ele opera em um único operando. É uma forma abreviada conveniente para adicionar 1 a uma variável numérica, o que é uma operação muito comum em loops e contadores.

Adicione o seguinte código ao final de ~/project/script.js para vê-lo em ação.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

Salve o arquivo pela última vez e atualize a aba Web 8080. O console mostrará o valor final do contador, que deve ser 1.

Resumo

Parabéns por completar este laboratório!

Neste laboratório, você aprendeu os fundamentos dos operadores e expressões JavaScript. Você praticou o uso de:

• Operadores aritméticos para matemática básica: + (adição), - (subtração), * (multiplicação), / (divisão) e % (módulo).
• O operador + para concatenação de strings para unir textos.
• O operador de incremento ++ como um atalho para aumentar o valor de um número em um.

Esses operadores são blocos de construção essenciais em JavaScript e são usados em praticamente todos os programas. Agora você está pronto para lidar com lógica e funcionalidades mais complexas em seus projetos futuros.