miércoles, 9 de marzo de 2016

If... else

Los condicionales son usados para llevar a cabo diferentes acciones basadas en diferentes condiciones.
Del contenido del capítulo JS If... Else Statements W3Schools.

Ejemplo 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Mostrar <i>"Good day"</i> si la hora es menor que las 18:00 h.</h2>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
    document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>

Ejemplo 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Pulsar el botón para mostrar un saludo según la hora.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var hour = new Date().getHours(); 
    var greeting;
    if (hour < 12) {
        greeting = "¡Buenos días!";
    } else {
        greeting = "¡Buenas tardes!";
    }
    document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>

Ejemplo 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Pulsar el botón para mostrar un saludo según la hora.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var greeting;
    var time = new Date().getHours();
    if (time < 12) {
        greeting = "¡Buenos días!";
    } else if (time < 20) {
        greeting = "¡Buenas tardes!";
    } else {
        greeting = "¡Buenas noches!";
    }
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 1</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usar el condicional para mostrar si es cierto que 5 es mayor que 2.</h2>
<button onclick="myFunction()">¿Es 5 > 2?</button>
<p id="demo"></p>
<script>
function myFunction(){
if (5>2) {
    document.getElementById("demo").innerHTML = "Sí. Es cierto.";
}
}
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 2</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Escribir un script con la consulta sobre si 10 es mayor que 5.</h2>
<p>Mostrar una frase positiva en el caso de que sea cierto.</p>
<button onclick="myFunction()">¿Es 10 > 5?</button>
<p id="demo">Mostrar el resultado aquí.</p>
<script>
function myFunction(){
if (10 > 5){
document.getElementById("demo").innerHTML = "Sí lo es.";
}
}
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 3</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Cambiar el valor de la variable primerNombre para hacer que el script funcione.</h2>
<button onclick="myFunction()">Comprobar</button>
<p id="demo">Mostrar el resultado aquí.</p>
<script>
var primerNombre = "Juan";
function myFunction(){
if (primerNombre === "Juan") {
    document.getElementById("demo").innerHTML = "¡Hola Juan!";
}
}
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 4</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Añadir un else a la sentencia para mostrar "¡Vd. no es Juan!"</h2>
<button onclick="myFunction()">Comprobar</button>
<p id="demo">Mostrar el resultado aquí.</p>
<script>
var firstName = "Greg";
function myFunction(){
if (firstName === "John") {
    document.getElementById("demo").innerHTML = "¡Hola Juan!";
} else {
document.getElementById("demo").innerHTML = "¡Vd. no es Juan!";
}
}
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 5</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Si la variable edad es mayor de 18, mostrar "Suficientemente mayor", en caso contrario "Demasiado joven".</h2>
<button onclick="myFunction()">Comprobar</button>
<p id="demo">Mostrar el resultado aquí.</p>
<script>
var age = 25;
function myFunction(){
if(age > 18){
document.getElementById("demo").innerHTML = "¡Suficientemente mayor!";
} else {
document.getElementById("demo").innerHTML = "¡Demasiado joven!";
}
}
</script>
</body>
</html>

Ejercicio 6.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Condicionales JavaScript. Ejercicio 6</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Corregir la declaración para que el script funcione.</h2>
<p id="demo">Mostrar el resultado aquí.</p>
<script>
var greeting;
var hour = new Date().getHours();

 if (hour < 12) {
    greeting = "¡Buenos días!";
}else{
    greeting = "¡Buenas tardes!";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)