miércoles, 9 de marzo de 2016

Comparaciones y operadores lógicos

Los comparadores y operadores lógicos son usados para comprobar si es verdadero o falso.
Del contenido del capítulo JS Comparison and Logical Operators W3Schools.

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a la <i>x</i> y mostrar el valor de la comparación <i>(x == 8)</i>.</h2>
<p>El operador <i>==</i> equivale a <i>igual a</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 8);
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a la <i>x</i> y mostrar el valor de la comparación <i>(x == 5)</i>.</h2>
<p>El operador <i>==</i> equivale a <i>igual a</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 5);
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a la <i>x</i> y mostrar el valor de la comparación <i>(x == "5")</i>.</h2>
<p>El operador <i>==</i> equivale a <i>igual a</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == "5");
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x === 5)</i>.</h2>
<p>El operador <i>===</i> equivale a <i>igual valor e igual tipo</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a la <i>x</i> y mostrar el valor de la comparación <i>(x === "5")</i>.</h2>
<p>El operador <i>===</i> equivale a <i>igual valor e igual tipo</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === "5");
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>( x != 8)</i></h2>
<p>El operador <i>!=</i> equivale a <i>no igual</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>
</body>
</html>

Ejercicio 7. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x !== 5)</i>.</h2>
<p>El operador <i>!==</i> equivale a <i>no igual valor o no igual tipo</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 5);
</script>
</body>
</html>

Ejercicio 8.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x !== "5")</i>.</h2>
<p>El operador <i>!==</i> equivale a <i>no igual valor o no igual tipo</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== "5");
</script>
</body>
</html>

Ejercicio 9.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x !== 8)</i>.</h2>
<p>El operador <i>!==</i> equivale a <i>no igual valor o no igual tipo</i>.<p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 8);
</script>
</body>
</html>

Ejercicio 10. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x > 8)</i>.</h2> 
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x > 8);
</script>
</body>
</html>

Ejercicio 11.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x < 8)</i>.</h2> 
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x < 8);
</script>
</body>
</html>

Ejercicio 12. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x >= 8)</i>.</h2> 
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x >= 8);
</script>
</body>
</html>

Ejercicio 13. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Asignarle <i>5</i> a <i>x</i> y mostrar el valor de la comparación <i>(x <= 8)</i>.</h2> 
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x <= 8);
</script>
</body>
</html>

Ejercicio 14.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Operador condicional ternario </h2>
<p>Introduce tu edad y pulsa el botón.</p>
<input id="edad" value="18" />
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var edad, votable;
    edad = document.getElementById("edad").value;
    votable = (edad < 18) ? "Demasiado joven":"Suficientemente mayor";
    document.getElementById("demo").innerHTML = votable + " para votar.";
}
</script>
</body>
</html>

Ejercicio 15. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Operador condicional ternario </h2>
<p>Introduce tu edad y pulsa el botón.</p>
<input id="edad" value="18" />
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var edad, votable;
    edad = document.getElementById("edad").value;
if(isNaN(edad)){
document.getElementById("demo").innerHTML = "Error al introducir el dato"
}else{
    votable = (edad < 18) ? "Demasiado joven":"Suficientemente mayor";
    document.getElementById("demo").innerHTML = votable + " para votar.";
}
}
</script>
</body>
</html>

Ejercicio 16. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usar un operador ternario para comprobar la edad.</h2>
<p>Ejercicio 5 de los propuestos en el tutorial de w3Schools.</p>
Edad: <input type="number" id="age" value="18" />
<button onclick="checkAge()">Comprobar la edad</button>
<p id="demo"></p>
<script>
function checkAge() {
  var age = document.getElementById("age").value;
  var voteable = (age < 18) ? "Demasiado joven " : "Suficientemente mayor ";
  document.getElementById("demo").innerHTML = voteable + " para votar.";
}
</script>
</body>
</html>

Ejercicio 17.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Operadores de comparación JavasCript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usar un operador ternario para comprobar si el nombre es Juan.</h2>
Primer nombre: <input type="text" id="fname" value="Juan">
<button onclick="checkName()">Comprobar el nombre</button>
<p id="demo"></p>
<script>
function checkName() {
  var firstName = document.getElementById("fname").value;
  var result = (firstName === "Juan") ? "¡Hola Juan!" : "Tú no eres Juan";
  document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)