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

De WikiEducator
Saltar a: navegación, buscar
(→‎Cambiar el estilo de un párrafo)
 
(10 revisiones intermedias por el mismo usuario no mostrado)
Línea 4: Línea 4:
  
 
==Modificar el texto==
 
==Modificar el texto==
 +
<br />
 
{{Actividad|
 
{{Actividad|
−
Escibimos como contenido del elemnto body un texto por programación}}
+
*Escribimos como contenido del elemento body un texto por programación
 +
 
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo1|<font size=5 color=red>Solución</font>]]}}
 +
 
 
{{Actividad|
 
{{Actividad|
−
Modificamos el ejemplo anterior para que ocurra con el nombre y edad que introduzcamos}}
+
<br />
 +
*Modificamos el ejemplo anterior para que ocurra con el nombre y edad que introduzcamos
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo2|<font size=5 color=red>Solución</font>]]}}
 +
 
 +
 
 
==Con algún evento==
 
==Con algún evento==
 +
 
*Ahora incorporamos algo de gestión de eventos
 
*Ahora incorporamos algo de gestión de eventos
 
*Los eventos son atributos de los elementos o nodos
 
*Los eventos son atributos de los elementos o nodos
Línea 15: Línea 24:
 
*Normalmente será un función por evitar escribir aquí mucho código
 
*Normalmente será un función por evitar escribir aquí mucho código
 
{{Actividad|
 
{{Actividad|
−
Que por defecto aparezca un texto  
+
*Que por defecto aparezca un texto  
−
Tambíen aparecerá un texto que ponga pincha aquí
+
*También aparecerá un texto que ponga pincha aquí
−
Cuando pinchemos que nos pregunte el nombre y edad  
+
*Cuando pinchemos que nos pregunte el nombre y edad  
−
Cambiamos el texto por defecto por nuestro nombre, edad y hora actual}}
+
*Cambiamos el texto por defecto por nuestro nombre, edad y hora actual
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo3|<font size=5 color=red>Solución</font>]]
 +
}}
 +
 
 
{{Actividad|
 
{{Actividad|
 
Title=Modificar borde de una imagen
 
Title=Modificar borde de una imagen
Línea 58: Línea 70:
 
</source>
 
</source>
  
 +
*[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo4|<font size=5 color=red>Solución</font>]]
 
}}
 
}}
 +
 
{{Actividad|
 
{{Actividad|
−
|Title= Manteniendo histórico
+
Title= 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}}
+
|
−
{{Notas|Usa una variable para guardar información entre iteración e interación}}
+
*Modifica el código anterior para que cada vez que presione el botón se pueda cambiar al estado inicial y así sucesivamente
  
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo5|<font size=5 color=red>Solución</font>]]
 +
}}
  
 +
{{Nota|Usa una variable para guardar información entre iteración e interación}}
  
−
===Modificamos el borde de las imágenes===
+
==Accediendo al contenido==
−
{{Actividad|
+
<br />
−
Title=Modificar el borde de una imagen
+
{{Actividad
−
|Hacer un programa que modifique el borde de la imagen
+
|Un programa que me visualice el contenido del elemento párrafo
−
Que el efecto se ralice cuando hagamos un click en una caja de texto}}
+
<source lang=html5>
 +
<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>
 +
</source>
 +
*[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo6|<font size=5 color=red>Solución</font>]]
 +
}}
  
 +
===Cambiando el tamaño de todas las imagen===
 +
<br />
 +
{{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|<font size=5 color=red>Solución</font>]]
 +
}}
 +
 +
==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
 +
{{Actividad
 +
|Title=Crear elementos
 +
|Haz un programa que nos cree una lista de 10  elementos
 +
}}
 +
*Como vemos en el ejemplo anterior, los elementos no contienen texto
 +
{{Actividad
 +
|Title=Añadir contenido
 +
|Haz un programa que nos cree una lista de 10  elementos y nos valla añadiendo contenido
 +
}}
 +
{{Actividad
 +
|Title=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==
 +
<br />
 +
{{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()===
 
===Haciendo un reloj usando el método setTimeout()===

Última revisión de 02:28 12 mar 2016



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»