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

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «{{Usuario:ManuelRomero/JavaScript/dom/nav}} __TOC__»)
 
Línea 2: Línea 2:
  
 
__TOC__
 
__TOC__
 +
 +
==Modificar el texto==
 +
{{Actividad|
 +
Escibimos como contenido del elemnto 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
 +
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}}
 +
{{Actividad|
 +
Title=Modificar borde de una imagen
 +
|Que al pinchar en una imagen se modifique su borde
 +
*Por ejemplo
 +
<source lang=javascript>
 +
<!--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>
 +
</source>
 +
 +
}}
 +
{{Actividad|
 +
|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}}
 +
 +
 +
 +
===Modificamos el borde de las imágenes===
 +
{{Actividad|
 +
Title=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====
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 +
</div>

Revisión de 01:31 11 mar 2016



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»