Capacitaciones Remotas Personalizadas

Capítulo 11. Ejercicios resueltos
11.1. Ejercicio 1
Página HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 1 - Archivo externo y varios mensajes</title>
<script type="text/javascript" src="codigo.js"></script>
</head>
<body>
<noscript>Esta página <strong>requiere</strong> el uso de JavaScript y parece
que está desactivado</noscript>
<p>Esta página muestra 2 mensajes</p>
</body>
</html>
Archivo codigo.js
// Al cargarse el archivo JavaScript, se muestra un mensaje
alert("Hola Mundo!");
// Despues del primer mensaje, se muestra otro mensaje seguido
alert("Soy el primer script");
11.2. Ejercicio 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 2 - Mostrar mensajes complejos</title>
<script type="text/javascript">
var mensaje = "Hola Mundo! \n Qué facil es incluir \'comillas simples\' \n y
\"comillas dobles\" ";
alert(mensaje);
</script>
</head>
<body>
<p>Esta página muestra un mensaje complejo</p>
</body>
</html>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 122
11.3. Ejercicio 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 3 - Arrays simples</title>
<script type="text/javascript">
// Array que almacena los 12 meses del año
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
"Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
// Se muestra el nombre de cada mes
alert(meses[0]);
alert(meses[1]);
alert(meses[2]);
alert(meses[3]);
alert(meses[4]);
alert(meses[5]);
alert(meses[6]);
alert(meses[7]);
alert(meses[8]);
alert(meses[9]);
alert(meses[10]);
alert(meses[11]);
</script>
</head>
<body>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>
11.4. Ejercicio 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 4 - Operadores</title>
<script type="text/javascript">
var valores = [true, 5, false, "hola", "adios", 2];
// Cual de los 2 elementos de texto es mayor
// Si el resultado es true, el primer texto es mayor
var resultado = valores[3] > valores[4];
alert(resultado);
// Combinar valores booleanos
var valor1 = valores[0];
var valor2 = valores[2];
// Obtener un resultado TRUE
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 123
var resultado = valor1 || valor2;
alert(resultado);
// Obtener un resultado FALSE
resultado = valor1 && valor2;
alert(resultado);
// Operaciones matemáticas
var num1 = valores[1];
var num2 = valores[5];
var suma = num1 + num2;
alert(suma);
var resta = num1 - num2;
alert(resta);
var multiplicacion = num1 * num2;
alert(multiplicacion);
var division = num1 / num2;
alert(division);
var modulo = num1 % num2;
alert(modulo);
</script>
</head>
<body>
<p>Esta página muestra el uso básico de los operadores</p>
</body>
</html>
11.5. Ejercicio 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 5 - Estructuras de control, IF</title>
<script type="text/javascript">
var numero1 = 5;
var numero2 = 8;
if(numero1 <= numero2) {
alert("numero1 no es mayor que numero2");
}
if(numero2 >= 0) {
alert("numero2 es positivo");
}
if(numero1 < 0 || numero1 != 0) {
alert("numero1 es negativo o distinto de cero");
}
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 124
if(++numero1 < numero2) {
alert("Incrementar en 1 unidad el valor de numero1 no lo hace mayor o igual
que numero2");
}
</script>
</head>
<body>
<p>Esta página muestra el uso básico de la estructura de control IF</p>
</body>
</html>
11.6. Ejercicio 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 6 - Calculo de la letra del DNI</title>
<script type="text/javascript">
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N',
'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
var numero = prompt("Introduce tu número de DNI (sin la letra)");
var letra = prompt("Introduce la letra de tu DNI (en mayúsculas)");
letra = letra.toUpperCase();
if(numero < 0 || numero > 99999999) {
alert("El número proporcionado no es válido");
}
else {
var letraCalculada = letras[numero % 23];
if(letraCalculada != letra) {
alert("La letra o el número proporcionados no son correctos");
}
else {
alert("El número de DNI y su letra son correctos");
}
}
</script>
</head>
<body>
<p>Esta página calcula la letra del DNI</p>
</body>
</html>
11.7. Ejercicio 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 125
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 7 - Factorial de un número entero</title>
<script type="text/javascript">
var numero = prompt("Introduce un número y se mostrará su factorial");
var resultado = 1;
for(var i=1; i<=numero; i++) {
resultado *= i;
}
alert(resultado);
</script>
</head>
<body>
</body>
</html>
11.8. Ejercicio 8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 8 - Funciones básicas</title>
<script type="text/javascript">
var numero = prompt("Introduce un número entero");
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
function parImpar(numero) {
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
}
</script>
</head>
<body>
</body>
</html>
11.9. Ejercicio 9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 126
<title>Ejercicio 9 - Información sobre cadenas</title>
<script type="text/javascript">
function info(cadena) {
var resultado = "La cadena \""+cadena+"\" ";
// Comprobar mayúsculas y minúsculas
if(cadena == cadena.toUpperCase()) {
resultado += " está formada sólo por mayúsculas";
}
else if(cadena == cadena.toLowerCase()) {
resultado += " está formada sólo por minúsculas";
}
else {
resultado += " está formada por mayúsculas y minúsculas";
}
return resultado;
}
alert(info("OVNI = OBJETO VOLADOR NO IDENTIFICADO"));
alert(info("En un lugar de la mancha..."));
</script>
</head>
<body>
</body>
</html>
11.10. Ejercicio 10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 10 - Detección de palíndromos</title>
<script type="text/javascript">
function palindromo(cadena) {
var resultado = "La cadena \""+cadena+"\" \n";
// Pasar a minusculas la cadena
var cadenaOriginal = cadena.toLowerCase();
// Convertir la cadena en un array
var letrasEspacios = cadenaOriginal.split("");
// Eliminar los espacios en blanco (este paso es demasiado largo ya que no se
utiliza la funcion "replace")
var cadenaSinEspacios = "";
for(i in letrasEspacios) {
if(letrasEspacios[i] != " ") {
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 127
cadenaSinEspacios += letrasEspacios[i];
}
}
var letras = cadenaSinEspacios.split("");
var letrasReves = cadenaSinEspacios.split("").reverse();
// Este paso tambien es muy largo porque no se utiliza la sentencia "break"
var iguales = true;
for(i in letras) {
if(letras[i] == letrasReves[i]) {
// Todo bien
}
else {
// Alguna letra es distinta, por lo que ya no es un palindromo
iguales = false;
}
}
if(iguales) {
resultado += " es un palíndromo";
}
else {
resultado += " no es un palíndromo";
}
return resultado;
}
alert(palindromo("La ruta nos aporto otro paso natural"));
alert(palindromo("Esta frase no se parece a ningun palindromo"));
</script>
</head>
<body>
</body>
</html>
11.11. Ejercicio 11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 11 - DOM básico</title>
<script type="text/javascript">
window.onload = function() {
var info = document.getElementById("informacion");
// Numero de enlaces de la pagina
var enlaces = document.getElementsByTagName("a");
info.innerHTML = "Numero de enlaces = "+enlaces.length;
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 128
// Direccion del penultimo enlace
var mensaje = "El penultimo enlace apunta a: "+enlaces[enlaces.length-2].href;
info.innerHTML = info.innerHTML + "<br/>" + mensaje;
// Numero de enlaces que apuntan a http://prueba
var contador = 0;
for(var i=0; i<enlaces.length; i++) {
// Es necesario comprobar los enlaces http://prueba y
// http://prueba/ por las diferencias entre navegadores
if(enlaces[i].href == "http://prueba" || enlaces[i].href ==
"http://prueba/") {
contador++;
}
}
info.innerHTML = info.innerHTML + "<br/>" + contador + " enlaces apuntan a
http://prueba"
// Numero de enlaces del tercer párrafo
var parrafos = document.getElementsByTagName("p");
enlaces = parrafos[2].getElementsByTagName("a");
info.innerHTML = info.innerHTML + "<br/>" + "Numero de enlaces del tercer
párrafo = "+enlaces.length;
}
</script>
</head>
<body>
<div id="informacion" style="border:thin solid silver; padding:.5em"></div>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing
elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu
adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non
dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac,
felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan
metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu
odio. Praesent id metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat
auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur
vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis
porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor
felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis
eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum.
Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam
euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet,
lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed
tellus.</p>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 129
<p>Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet
imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam
leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut
dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu
sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec
pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis
iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit,
eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi
at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a>
auctor.</p>
</body>
</html>
11.12. Ejercicio 12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 12 - DOM básico y atributos XHTML</title>
<style type="text/css">
.oculto { display: none; }
.visible { display: inline; }
</style>
<script type="text/javascript">
function muestra() {
var elemento = document.getElementById("adicional");
elemento.className = "visible";
var enlace = document.getElementById("enlace");
enlace.className = "oculto";
}
</script>
</head>
<body>
<p id="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue,
commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae,
rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae,
ultrices porttitor, pede. <span id="adicional" class="oculto">Nullam sit amet
nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec
lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam
sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean
vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id
metus.</span></p>
<a id="enlace" href="#" onclick="muestra(); return false;">Seguir leyendo</a>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 130
</body>
</html>
11.13. Ejercicio 13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 13 - DOM básico y atributos XHTML</title>
<script type="text/javascript">
function anade() {
var elemento = document.createElement("li");
var texto = document.createTextNode("Elemento de prueba");
elemento.appendChild(texto);
var lista = document.getElementById("lista");
lista.appendChild(elemento);
var nuevoElemento = "<li>Texto de prueba</li>";
lista.innerHTML = lista.innerHTML + nuevoElemento;
}
</script>
</head>
<body>
<ul id="lista">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed mattis enim vitae orci</li>
<li>Phasellus libero</li>
<li>Maecenas nisl arcu</li>
</ul>
<input type="button" value="Añadir elemento" onclick="anade();">
</body>
</html>
11.14. Ejercicio 14
Si se utilizan manejadores de eventos como atributos de XHTML, la solución podría ser
la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 14 - DOM básico y atributos XHTML</title>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 131
<script type="text/javascript">
function muestraOculta(id) {
var elemento = document.getElementById('contenidos_'+id);
var enlace = document.getElementById('enlace_'+id);
if(elemento.style.display == "" || elemento.style.display == "block") {
elemento.style.display = "none";
enlace.innerHTML = 'Mostrar contenidos';
}
else {
elemento.style.display = "block";
enlace.innerHTML = 'Ocultar contenidos';
}
}
</script>
</head>
<body>
<p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#" onclick="muestraOculta('1'); return false;">Ocultar
contenidos</a>
<br/>
<p id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#" onclick="muestraOculta('2'); return false;">Ocultar
contenidos</a>
<br/>
<p id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 132
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#" onclick="muestraOculta('3'); return false;">Ocultar
contenidos</a>
</body>
</html>
También es posible solucionar el ejercicio utilizando manejadores de eventos
semánticos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 14 - DOM básico y atributos XHTML</title>
<script type="text/javascript">
window.onload = function() {
var enlaces = document.getElementsByTagName('a');
for(i in enlaces) {
enlaces[i].onclick = muestraOculta;
}
}
function muestraOculta() {
var idEnlace = this.id;
var trozos = idEnlace.split('_');
var numero = trozos[1];
var parrafo = document.getElementById('contenidos_' + numero);
switch(parrafo.style.display) {
case 'none':
parrafo.style.display = 'block';
this.innerHTML = 'Ocultar contenidos';
break;
case 'block':
case '':
parrafo.style.display = 'none';
this.innerHTML = 'Mostrar contenidos';
break;
}
}
</script>
</head>
<body>
<p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 133
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>
<br/>
<p id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>
<br/>
<p id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>
</body>
</html>
11.15. Ejercicio 15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 15 - Información sobre eventos</title>
<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
<script type="text/javascript">
function informacion(elEvento) {
var evento = elEvento || window.event;
switch(evento.type) {
case 'mousemove':
document.getElementById('info').style.backgroundColor = '#FFFFFF';
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
var coordenadaXrelativa, coordenadaYrelativa, coordenadaXabsoluta,
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 134
coordenadaYabsoluta;
if(ie) {
if(document.documentElement && document.documentElement.scrollTop){
coordenadaXabsoluta = evento.clientX +
document.documentElement.scrollLeft;
coordenadaYabsoluta = evento.clientY +
document.documentElement.scrollTop;
}
else {
coordenadaXabsoluta = evento.clientX + document.body.scrollLeft;
coordenadaYabsoluta = evento.clientY + document.body.scrollTop;
}
}
else {
coordenadaXabsoluta = evento.pageX;
coordenadaYabsoluta = evento.pageY;
}
coordenadaXrelativa = evento.clientX;
coordenadaYrelativa = evento.clientY;
muestraInformacion(['Ratón', 'Navegador ['+coordenadaXrelativa+',
'+coordenadaYrelativa+']', 'Pagina ['+coordenadaXabsoluta+',
'+coordenadaYabsoluta+']']);
break;
case 'keypress':
document.getElementById('info').style.backgroundColor = '#CCE6FF';
var caracter = evento.charCode || evento.keyCode;
var letra = String.fromCharCode(caracter);
var codigo = letra.charCodeAt(0);
muestraInformacion(['Teclado', 'Carácter ['+letra+']', 'Código
['+codigo+']']);
break;
case 'click':
document.getElementById('info').style.backgroundColor = '#FFFFCC';
break;
}
}
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
document.onmousemove = informacion;
document.onkeypress = informacion;
document.onclick = informacion;
</script>
</head>
<body>
<div id="info"></div>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 135
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
11.16. Ejercicio 16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 16 - Información sobre eventos</title>
<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
<script type="text/javascript">
function informacion(elEvento) {
var evento = elEvento || window.event;
var coordenadaX = evento.clientX;
var coordenadaY = evento.clientY;
var dimensiones = tamanoVentanaNavegador();
var tamanoX = dimensiones[0];
var tamanoY = dimensiones[1];
var posicionHorizontal = "";
var posicionVertical = "";
if(coordenadaX > tamanoX/2) {
posicionHorizontal = "derecha";
}
else {
posicionHorizontal = "izquierda";
}
if(coordenadaY > tamanoY/2) {
posicionVertical = "abajo";
}
else {
posicionVertical = "arriba";
}
muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]);
}
function muestraInformacion(mensaje) {
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 136
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
function tamanoVentanaNavegador(){
// Adaptada de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var dimensiones = [];
if(typeof(window.innerWidth) == 'number') {
// No es IE
dimensiones = [window.innerWidth, window.innerHeight];
} else if(document.documentElement && (document.documentElement.clientWidth
|| document.documentElement.clientHeight)) {
//IE 6 en modo estandar (no quirks)
dimensiones = [document.documentElement.clientWidth,
document.documentElement.clientHeight];
} else if(document.body && (document.body.clientWidth ||
document.body.clientHeight)) {
//IE en modo quirks
dimensiones = [document.body.clientWidth, document.body.clientHeight];
}
return dimensiones;
}
document.onclick = informacion;
</script>
</head>
<body>
<div id="info"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
11.17. Ejercicio 17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 17 - Limitar número de caracteres en textarea</title>
<style type="text/css">
body {font-family: arial, helvetica;}
</style>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 137
<script type="text/javascript">
function limita(elEvento, maximoCaracteres) {
var elemento = document.getElementById("texto");
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
// Permitir utilizar las teclas con flecha horizontal
if(codigoCaracter == 37 || codigoCaracter == 39) {
return true;
}
// Permitir borrar con la tecla Backspace y con la tecla Supr.
if(codigoCaracter == 8 || codigoCaracter == 46) {
return true;
}
else if(elemento.value.length >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}
function actualizaInfo(maximoCaracteres) {
var elemento = document.getElementById("texto");
var info = document.getElementById("info");
if(elemento.value.length >= maximoCaracteres ) {
info.innerHTML = "Máximo "+maximoCaracteres+" caracteres";
}
else {
info.innerHTML = "Puedes escribir hasta
"+(maximoCaracteres-elemento.value.length)+" caracteres adicionales";
}
}
</script>
</head>
<body>
<div id="info">Máximo 100 caracteres</div>
<textarea id="texto" onkeypress="return limita(event, 100);"
onkeyup="actualizaInfo(100)" rows="6" cols="30"></textarea>
</body>
</html>
11.18. Ejercicio 18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 138
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 18 - Utilidades, Calendario</title>
<link rel="stylesheet" type="text/css" media="all" href="css/
calendar-estilo.css" />
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/calendar-es.js"></script>
<script type="text/javascript" src="js/calendar-setup.js"></script>
</head>
<body>
<p></p>
<input type="hidden" name="fecha" id="fecha" />
<span style="background-color: #ffc; cursor:default; padding:.3em; border:thin
solid #ff0; text-decoration:underline; color: blue;"
onmouseover="this.style.cursor='pointer'; this.style.cursor='hand';
this.style.backgroundColor='#ff8'; this.style.textDecoration='none';"
onmouseout="this.style.backgroundColor='#ffc';
this.style.textDecoration='underline';"
id="fecha_usuario">
Pincha aquí para seleccionar la fecha
</span>
<script type="text/javascript">
Calendar.setup({
inputField: "fecha",
ifFormat: "%d/%m/%Y",
weekNumbers: false,
displayArea: "fecha_usuario",
daFormat: "%A, %d de %B de %Y"
});
</script>
</body>
</html>
11.19. Ejercicio 19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 19 - Utilidades, Tooltip</title>
<script type="text/javascript" src="js/overlib.js"></script>
<script type="text/javascript">
overlib_pagedefaults(WIDTH,150,FGCOLOR,'#ffffcc',BGCOLOR,'#666666',TEXTFONT,"Arial,
Helvetica, Verdana",TEXTSIZE,".8em",DELAY,250,OFFSETX,15,ABOVE);
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 139
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba
de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer
adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue
neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis
vehicula nonummy orci.</p>
<p>Quisque facilisis, lacus vel adipiscing tempor, neque quam tincidunt ante,
sed bibendum velit urna quis ipsum. Aliquam convallis justo at turpis. Sed
iaculis dictum neque. Praesent varius augue quis ligula. Suspendisse
potenti.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Duis non nunc at augue ultrices viverra. Pellentesque
tempus. Duis nisi ipsum, condimentum vel, accumsan non, sodales hendrerit,
nisi. Aenean vel velit. Proin at massa.</p>
</body>
</html>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 140

Etiquetas: 2a ejercicios

Capacitaciones Remotas Personalizadas

16 enero 2010

Datos personales

Enlaces

Entradas anteriores

Archivos