Usuario:ManuelRomero/JavaScript/dom/ejemplos

De WikiEducator
Saltar a: navegación, buscar



Modificar el texto

Icon activity.jpg

Actividad

Escibimos como contenido del elemnto body un texto por programación





Icon activity.jpg

Actividad

Modificamos el ejemplo anterior para que ocurra con el nombre y edad que introduzcamos



Con algún evento

  • Ahora incorporamos algo de gestión de eventos
  • Los eventos son atributos de los elementos o nodos
  • Vamos a trabajar con uno onclick. Este evento ocurre cuando hacemos un click en un elemento
  • El contenido de este elemento debe de ser un código para que sea ejecutado
  • Normalmente será un función por evitar escribir aquí mucho código


Icon activity.jpg

Actividad

Que por defecto aparezca un texto Tambíen aparecerá un texto que ponga pincha aquí Cuando pinchemos que nos pregunte el nombre y edad Cambiamos el texto por defecto por nuestro nombre, edad y hora actual





Icon activity.jpg

Modificar borde de una imagen

Que al pinchar en una imagen se modifique su borde
  • Por ejemplo 
<!--Primera imagen adquiere un borde azul de 10 píxeles de grosor, 
 la segunda imagen un borde rojo del mismo grosor y el texto del link queda de color gris.
 La sintaxis window.document.images[1] o simplemente document.images[1] nos da acceso a la segunda imagen existente en el documento HTML.-->
 
<html>
 
<head>
    <title></title>
    <meta charset="utf-8">
 
    <script type="text/javascript">
        var estado = true;
 
        function ejemplo() {
         //Escribe aquí el código
         //Para cambiar el estilo usaremos el método style.border = "valor", del un elemnto concreto
        }
 
    </script>
 
</head>
 
<body>
    <div id="cabecera">
        <h3>Ejemplos JavaScript  con dom</h3></div>
    <div style="color:blue; margin:20px;" id="pulsador" onclick="ejemplo()"><a href="#"> Probar</a> </div>
    <img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto" />
    <img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo" id="imagen" />
 
</body>
 
</html>






Icon activity.jpg

Manteniendo histórico




Plantilla:Notas


Modificamos el borde de las imágenes

Icon activity.jpg

Modificar el borde de una imagen

Hacer un programa que modifique el borde de la imagen

Que el efecto se ralice cuando hagamos un click en una caja de texto




Haciendo un reloj usando el método setTimeout()

Ejemplos

<html>
	<head>
		<script type="text/javascript">
			function startTime()
			{
				var today=new Date();
				var h=today.getHours();
				var m=today.getMinutes();
				var s=today.getSeconds();
				m=checkTime(m);// add a zero in front of numbers<10
				s=checkTime(s);// add a zero in front of numbers<10
				document.getElementById('txt').innerHTML=h+":"+m+":"+s;
				t=setTimeout('startTime()',500);
			}
			function checkTime(i)
			{
				if (i<10)
  				{
  					i="0" + i;
  				}
				return i;
			}
		</script>
	</head>
	<body onload="startTime()">
		<p> prueba </p>
		<div id="txt"></div>
	</body>
</html>

</div>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/dom/ejemplos&oldid=19006»