Usuario:ManuelRomero/JavaScript/dom/ejemplos

De WikiEducator
Saltar a: navegación, buscar



Modificar el texto



Icon activity.jpg

Actividad

  • Escribimos como contenido del elemento body un texto por programación

Solución






Icon activity.jpg

Actividad


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




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 realice cuando hagamos un click en una caja de texto




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

Modifica el código anterior para que cada vez que presione el botón se pueda cambiar al estado inicial y así sucesivamente




(Comment.gif: Usa una variable para guardar información entre iteración e interación)


Accediendo al contenido


{{Un programa que me visualice el contenido del elemento párrafo 

<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <script>
       //Escribe aquí el código
    </script>
 
    <p id="parrafo">Este es el texto que quiero que aparezca</p>
 
</body>
 
</html>

}}

Cambiando el tamaño de todas las imagen



Icon activity.jpg

Cambiar el tamaño de imágenes

El programa anterior de imágenes
  • Ahora al hacer click en probar, me pedirá un valor para modificar el alto y el ancho




Cambiar el estilo de un párrafo



Icon activity.jpg

Actividad

HAcer u




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=19012»