Às vezes, precisamos realizar ações diferentes com base em condições diferentes.
Para fazer isso, podemos usar a instrução if e o operador condicional ? , também é chamado de operador de “ponto de interrogação”.
A instrução if(...) avalia uma condição entre parênteses e, se o resultado for true , executa um bloco de código.
Por exemplo:
let year = prompt('Em que ano foi publicada a especificação ECMAScript-2015?', '');
if (ano == 2015) alert( 'Você está certo!' ); No exemplo acima, a condição é uma verificação de igualdade simples ( year == 2015 ), mas pode ser muito mais complexa.
Se quisermos executar mais de uma instrução, temos que colocar nosso bloco de código entre chaves:
if (ano == 2015) {
alerta("Correto!");
alert("Você é tão inteligente!");
} Recomendamos colocar seu bloco de código entre chaves {} sempre que você usar uma instrução if , mesmo que haja apenas uma instrução para executar. Isso melhora a legibilidade.
A instrução if (…) avalia a expressão entre parênteses e converte o resultado em booleano.
Vamos relembrar as regras de conversão do capítulo Conversões de tipo:
Um número 0 , uma string vazia "" , null , undefined e NaN se tornam false . Por isso são chamados de valores “falsos”.
Outros valores tornam-se true , por isso são chamados de “verdadeiros”.
Portanto, o código sob esta condição nunca seria executado:
if (0) { // 0 é falso
...
}…e dentro desta condição – sempre irá:
if (1) { // 1 é verdadeiro
...
} Também podemos passar um valor booleano pré-avaliado para if , assim:
deixe cond = (ano == 2015); // igualdade é avaliada como verdadeira ou falsa
se (condição) {
...
} A instrução if pode conter um bloco else opcional. Ele é executado quando a condição é falsa.
Por exemplo:
let year = prompt('Em que ano foi publicada a especificação ECMAScript-2015?', '');
if (ano == 2015) {
alert('Você adivinhou certo!');
} outro {
alert('Como você pode estar tão errado?'); // qualquer valor exceto 2015
} Às vezes, gostaríamos de testar diversas variantes de uma condição. A cláusula else if nos permite fazer isso.
Por exemplo:
let year = prompt('Em que ano foi publicada a especificação ECMAScript-2015?', '');
se (ano <2015) {
alerta('Muito cedo...');
} else if (ano > 2015) {
alerta('Tarde demais');
} outro {
alerta('Exatamente!');
} No código acima, o JavaScript verifica primeiro year < 2015 . Se isso for falso, passa para a próxima condição year > 2015 . Se isso também for falso, mostra o último alert .
Pode haver mais blocos else if . O else final é opcional.
Às vezes, precisamos atribuir uma variável dependendo de uma condição.
Por exemplo:
deixe acesso permitido;
deixe idade = prompt('Quantos anos você tem?', '');
se (idade > 18) {
acesso permitido = verdadeiro;
} outro {
acesso permitido = falso;
}
alerta(acessoPermitido);O chamado operador “condicional” ou “ponto de interrogação” nos permite fazer isso de uma forma mais curta e simples.
O operador é representado por um ponto de interrogação ? . Às vezes é chamado de “ternário”, porque o operador possui três operandos. Na verdade, é o único operador em JavaScript que possui tantos.
A sintaxe é:
deixe resultado = condição? valor1: valor2;
A condition é avaliada: se for verdadeira então value1 é retornado, caso contrário – value2 .
Por exemplo:
deixe accessAllowed = (idade > 18) ? verdadeiro: falso;
Tecnicamente, podemos omitir os parênteses em torno age > 18 . O operador de ponto de interrogação tem precedência baixa, portanto é executado após a comparação > .
Este exemplo fará a mesma coisa que o anterior:
// o operador de comparação "idade > 18" é executado primeiro de qualquer maneira // (não há necessidade de colocá-lo entre parênteses) deixe accessAllowed = idade> 18? verdadeiro: falso;
Mas os parênteses tornam o código mais legível, por isso recomendamos usá-los.
Observe:
No exemplo acima, você pode evitar usar o operador de ponto de interrogação porque a própria comparação retorna true/false :
// o mesmo deixe acessoPermitido = idade > 18;
Uma sequência de operadores de ponto de interrogação ? pode retornar um valor que depende de mais de uma condição.
Por exemplo:
deixe idade = prompt('idade?', 18);
deixe mensagem = (idade <3)? 'Oi, bebê!' :
(idade <18) ? 'Olá!' :
(idade <100) ? 'Saudações!' :
'Que idade incomum!';
alerta(mensagem);Pode ser difícil no início entender o que está acontecendo. Mas depois de olhar mais de perto, podemos ver que é apenas uma sequência comum de testes:
O primeiro ponto de interrogação verifica se age < 3 .
Se for verdade – retorna 'Hi, baby!' . Caso contrário, continua com a expressão após os dois pontos “:”, verificando age < 18 .
Se isso for verdade – ele retornará 'Hello!' . Caso contrário, continua com a expressão após os próximos dois pontos “:”, verificando age < 100 .
Se isso for verdade – ele retornará 'Greetings!' . Caso contrário, continua com a expressão após os últimos dois pontos “:”, retornando 'What an unusual age!' .
Veja como isso fica usando if..else :
se (idade <3) {
mensagem = 'Oi, querido!';
} else if (idade <18) {
mensagem = 'Olá!';
} else if (idade <100) {
mensagem = 'Saudações!';
} outro {
mensagem = 'Que idade incomum!';
} Às vezes o ponto de interrogação ? é usado como um substituto para if :
deixe empresa = prompt('Qual empresa criou o JavaScript?', '');
(empresa == 'Netscape') ?
alert('Certo!'): alert('Errado.'); Dependendo da condição company == 'Netscape' , a primeira ou a segunda expressão após ? é executado e mostra um alerta.
Não atribuímos um resultado a uma variável aqui. Em vez disso, executamos códigos diferentes dependendo da condição.
Não é recomendado usar o operador de ponto de interrogação dessa forma.
A notação é mais curta que a instrução if equivalente, o que atrai alguns programadores. Mas é menos legível.
Aqui está o mesmo código usando if para comparação:
deixe empresa = prompt('Qual empresa criou o JavaScript?', '');
if (empresa == 'Netscape') {
alerta('Certo!');
} outro {
alerta('Errado.');
}Nossos olhos examinam o código verticalmente. Blocos de código que abrangem várias linhas são mais fáceis de entender do que um conjunto de instruções longo e horizontal.
O objetivo do operador de ponto de interrogação ? é retornar um valor ou outro dependendo de sua condição. Por favor, use-o exatamente para isso. Use if quando precisar executar diferentes ramificações de código.
importância: 5
alert será mostrado?
se ("0") {
alerta('Olá');
}
Sim, vai.
Qualquer string exceto uma vazia (e "0" não está vazio) torna-se true no contexto lógico.
Podemos executar e verificar:
se ("0") {
alerta('Olá');
}importância: 2
Usando a construção if..else , escreva o código que pergunta: 'Qual é o nome “oficial” do JavaScript?'
Se o visitante inserir “ECMAScript”, então produza “Certo!”, caso contrário – produza: “Você não sabe? ECMAScript!”
Demonstração em nova janela
<!DOCTYPEhtml>
<html>
<corpo>
<roteiro>
'usar estrito';
let value = prompt('Qual é o nome "oficial" do JavaScript?', '');
if (valor == 'ECMAScript') {
alerta('Certo!');
} outro {
alert("Você não sabe? ECMAScript!");
}
</script>
</body>
</html>importância: 2
Usando if..else , escreva o código que recebe um número via prompt e depois mostra em alert :
1 , se o valor for maior que zero,
-1 , se for menor que zero,
0 , se for igual a zero.
Nesta tarefa assumimos que a entrada é sempre um número.
Demonstração em nova janela
deixe valor = prompt('Digite um número', 0);
se (valor> 0) {
alerta(1);
} senão if (valor < 0) {
alerta(-1);
} outro {
alerta(0);
}importância: 5
Reescreva isso if usando o operador condicional '?' :
deixe o resultado;
se (a + b < 4) {
resultado = 'Abaixo';
} outro {
resultado = 'Acima';
}
deixe resultado = (a + b <4)? 'Abaixo': 'Acima';
importância: 5
Reescreva if..else usando vários operadores ternários '?' .
Para facilitar a leitura, é recomendado dividir o código em várias linhas.
deixe mensagem;
if (login == 'Funcionário') {
mensagem = 'Olá';
} else if (login == 'Diretor') {
mensagem = 'Saudações';
} else if (login == '') {
mensagem = 'Sem login';
} outro {
mensagem = '';
}
deixe mensagem = (login == 'Funcionário') ? 'Olá' : (login == 'Diretor') ? 'Saudações' : (entrar == '') ? 'Sem login': '';