Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/ejemplos»

De WikiEducator

< Usuario:ManuelRomero‎ | JavaScript‎ | dom

Saltar a: navegación, buscar

Revisión de 08:41 11 mar 2016

Contenido

1 Programación web al lado del cliente
2 Modificar el texto
3 Actividad
4 Actividad
- 4.1 Con algún evento
5 Actividad
6 Modificar borde de una imagen
7 Manteniendo histórico
- 7.1 Accediendo al contenido
  - 7.1.1 Cambiando el tamaño de todas las imagen
- 7.2 Cambiar el estilo de un párrafo
8 Actividad
- 8.1 Haciendo un reloj usando el método setTimeout()
  - 8.1.1 Ejemplos

Modificar el texto

Actividad

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

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

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

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>

Solución

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

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

Accediendo al contenido

{{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>

[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo6|Solución

}}

Cambiando el tamaño de todas las imagen

{{Actividad |Title=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

[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo7|Solución }}

Cambiar el estilo de un párrafo

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

Pagina con comentarios editoriales