Instrução if/else em JavaScript

Definição e uso

A instrução if/else executa um bloco de código quando a condição especificada for verdadeira. Se a condição for falsa, pode-se executar outro bloco de código.

A instrução if/else é parte das instruções "condicional" do JavaScript, usada para executar diferentes operações com base em diferentes condições.

No JavaScript, temos as seguintes instruções de condição:

  • Use if para especificar um bloco de código a ser executado se a condição especificada for verdadeira
  • Use else para especificar um bloco de código a ser executado se a mesma condição for falsa
  • Se a primeira condição for falsa, use else if para especificar uma nova condição a ser testada
  • Use switch para escolher um dos vários blocos de código a serem executados

Example

Se a hora atual (HOUR) for menor que 20:00, escreva "Good day" no elemento com id="demo":

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

亲自试一试

Mais exemplos TIY na parte inferior da página.

Sintaxe

A instrução if especifica um bloco de código a ser executado quando a condição for verdadeira:

if (condition) {
  // bloco de código a ser executado se a condição for verdadeira
}

A sentença else especifica o bloco de código a ser executado quando a condição for falsa:

if (condition) {
  // bloco de código a ser executado se a condição for verdadeira
} else { 
  // bloco de código a ser executado se a condição for falsa
}

Se a primeira condição for falsa, a sentença else if especifica uma nova condição:

if (condition1) {
  // bloco de código a ser executado se a condição1 for verdadeira
} else if (condition2) {
  // bloco de código a ser executado se a condição1 for falsa e a condição2 for verdadeira
} else {
  // bloco de código a ser executado se a condição1 for falsa e a condição2 for falsa
}

Valor do parâmetro

Parâmetro Descrição
condition Obrigatório. Expressão que resulta em true ou false.

Detalhes técnicos

Versão do JavaScript: ECMAScript 1

Mais exemplos

Example

Se a hora for menor que 20:00, crie uma saudação "Good day", senão, crie "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

亲自试一试

Example

Se a hora for menor que 10:00, crie uma saudação "Good morning", se não for, mas a hora for menor que 20:00, crie uma saudação "Good day", senão, crie uma saudação "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

亲自试一试

Example

Se o id do primeiro elemento <div> do documento for "myDIV", altere seu tamanho de fonte:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

亲自试一试

Example

When the user clicks the image, change the value of the source attribute (src) of the <img> element:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

亲自试一试

Example

Display messages based on user input:

var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// If it is another letter
} else {
  text = "Waaay off..";
}

亲自试一试

Example

Verify input data:

var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is not a number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

亲自试一试

browser supports

语句 Chrome IE Firefox Safari Opera
if/else Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial de JavaScript：Sentença If...Else do JavaScript

Tutorial de JavaScript：Sentença Switch do JavaScript