JavaScript si... más
Ejemplo
Si la hora es inferior a 20, emite "Buen día":
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
Salida "Buenos días" o "Buenas noches":
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Más ejemplos a continuación.
Definición y uso
La declaración if/else ejecuta un bloque de código si una condición especificada es verdadera. Si la condición es falsa, se puede ejecutar otro bloque de código.
La declaración if/else es parte de las declaraciones "condicionales" de JavaScript, que se utilizan para realizar diferentes acciones basadas en diferentes condiciones.
En JavaScript tenemos las siguientes declaraciones condicionales:
- Use if para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera
- Use else para especificar un bloque de código a ejecutar, si la misma condición es falsa
- Use else if para especificar una nueva condición para probar, si la primera condición es falsa
- Use el interruptor para seleccionar uno de los muchos bloques de código que se ejecutarán
Sintaxis
La declaración if especifica un bloque de código que se ejecutará si una condición es verdadera:
if (condition) {
// block of code to be executed if the condition is true
}
La declaración else especifica un bloque de código que se ejecutará si la condición es falsa:
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
La declaración else if especifica una nueva condición si la primera condición es falsa:
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Valores paramétricos
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
Más ejemplos
Si la hora es inferior a las 10:00, cree un saludo de "Buenos días", si no, pero la hora es inferior a las 20:00, cree un saludo de "Buenos días", de lo contrario, un "Buenas noches":
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Si el primer elemento <div> en el documento tiene una identificación de "myDIV", cambie su tamaño de fuente:
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
Cambia el valor del atributo fuente (src) de un elemento <img>, si el usuario hace clic en la imagen:
<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>
Mostrar un mensaje basado en la entrada del usuario:
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 the letter is anything else
} else {
text = "Waaay off..";
}
Validar datos de entrada:
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";
}
páginas relacionadas
Tutorial de JavaScript: sentencias If...Else de JavaScript
Tutorial de JavaScript: declaración de cambio de JavaScript
Compatibilidad con navegador
if...elsees una característica de ECMAScript1 (ES1).
ES1 (JavaScript 1997) es totalmente compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |