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__»)
 
(→‎Cambiar el estilo de un párrafo)
 
(11 revisiones intermedias por el mismo usuario no mostrado)
Línea 2: Línea 2:
  
 
__TOC__
 
__TOC__
 +
 +
==Modificar el texto==
 +
<br />
 +
{{Actividad|
 +
*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|
 +
<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==
 +
 +
*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
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo3|<font size=5 color=red>Solución</font>]]
 +
}}
 +
 +
{{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>
 +
 +
*[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo4|<font size=5 color=red>Solución</font>]]
 +
}}
 +
 +
{{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
 +
 +
[[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}}
 +
 +
==Accediendo al contenido==
 +
<br />
 +
{{Actividad
 +
|Un programa que me visualice el contenido del elemento párrafo
 +
<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()===
 +
====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>

Última revisión de 03: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»