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

Solución




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
  • También 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

Solución






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

Solución





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



Accediendo al contenido



Icon activity.jpg

Actividad

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

Solución





Creando nuevos elementos

  • Ahora vamos a usar un método nuevo que sirve para crear un nuevo elemento html en el documento 
createElemet('elemento')
  • Donde elemento será el tag que queremos crear


Icon activity.jpg

Crear elementos

Haz un programa que nos cree una lista de 10 elementos




  • Como vemos en el ejemplo anterior, los elementos no contienen texto


Icon activity.jpg

Añadir contenido

Haz un programa que nos cree una lista de 10 elementos y nos valla añadiendo contenido






Icon activity.jpg

Un caja de texto y vamos poniendo lista de compra

Que aparezca un input de texto con un botón. Cada vez que añdamos algo y demos al borón irá apareciendo el elemento como una lista de compra





Cambiar el estilo de un párrafo



Icon activity.jpg

Actividad

  • Ahora querremos que aparezca un seguir leyendo en un texto
  • Es decir hay un texto largo, pero solo mostramos parte del texto y si presionamos a unas palabras del tipo (seguir leyendo), añadimos el texto, también podremos acortarlo





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