Vanilla Javascript - #3 Alertas, Caixas de Diálogos e Operadores

Nesse tutorial aprenderemos como exibir caixas de alerta e diálogo para o usuário e como funcionam os operadores aritiméticos, de igualdade e lógicos.

Só retomando o assunto da última aula (Declarações de variáveis). As variáveis podem ser declaradas com o nome iniciado com $,_ ou (a-zA-Z). Por exemplo:

let $name='Thiago'; //correct
let _action='do'; //correct
let 2houses; //wrong
let Address='street'; //correct

Caixa de Diálogo e Alerta

As caixas de diálogo e alerta são janelinhas que aparecem para o cliente exibindo uma informação ou solicitando um dado. Existem três formas de exibir essas janelinhas e elas são métodos do objeto global window.

//Alert
alert("Esse é um alerta!");

//Confirm
confirm("Deseja mesmo apagar este dado? \n Esse dado será excluido!")

//Prompt
prompt("Qual sua data de nascimento?","dd/mm/yyyy");

Repare que no código acima eu utilizei o "\n". Ele é um escape para quebra de linha.

Operadores Aritiméticos

Os operadores aritiméticos servem para que possamos realizar operações matemáticas no Javascript. Os principais são: +,-,*,/,+=,-=,*=,/=,++,--. Vamos declarar 4 variáveis e observar os exemplos:

let numberA=2;
let numberB=3;
let numberC='3';
let stringA='Webdesign em Foco';

//Operadores aritiméticos
console.log(numberA + numberB);
console.log(numberA - 3 );
console.log(numberA += 3 );
console.log(numberA / 2 );
for(let i=10; i>5; i--){
    console.log(i);
}

Mas o que acontece se somarmos por exemplo um número com um texto?

console.log(numberA + stringA);

O código acima imprimirá 2Webdesign em Foco. Isso porque o operador + além de somar numerais, ele tem a função de concatenar valores e variáveis.

Operadores de Igualdade

Os operadores de igualdade servem para compararmos valores e tem como retorno um boolean (true or false). Os principais são: ==, !=, ===, !==, >=, <=. Nos exemplos abaixo vamos utilizar as mesmas variáveis já criadas anteriormente.

//Operadores de igualdade
console.log(numberA == numberB);
console.log(numberB !== numberC);
console.log(numberA <= numberB);

A diferença entre o == e === é que quando utilizamos 3 iguais seguidos estamos comparando além do valor o tipo do número, veja os exemplos abaixo:

2 == '2'; //true
2==='2'; //false

A segunda linha retornou false porque o 2 (inteiro) é diferente do '2' (string). Os valores são iguais, mas o tipo é diferente.

Operadores Lógicos

Os operadores lógicos são utilizados principalmente em estruturas condicionais para verificação de duas ou mais informações. São utilizados o && (AND) e o || (OR) Veja os exemplos:

//Operador lógico AND
if(numberA == 2 && numberB==3){
    console.log("São iguais");
}

//Operador lógico OR
if(numberA == 2 || numberB==3){
    console.log("São iguais");
}

Por hoje é só. Sucesso nos códigos e na vida!