Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/ejemplos»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | dom
(→Con algún evento) |
(→Cambiar el estilo de un párrafo) |
||
(3 revisiones intermedias por el mismo usuario no mostrado) | |||
Línea 70: | Línea 70: | ||
</source> | </source> | ||
− | *[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo4|<font size=5 color=red>Solución</font> | + | *[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo4|<font size=5 color=red>Solución</font>]] |
}} | }} | ||
Línea 78: | Línea 78: | ||
*Modifica el código anterior para que cada vez que presione el botón se pueda cambiar al estado inicial y así sucesivamente | *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> | + | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo5|<font size=5 color=red>Solución</font>]] |
}} | }} | ||
Línea 85: | Línea 85: | ||
==Accediendo al contenido== | ==Accediendo al contenido== | ||
<br /> | <br /> | ||
− | {{Un programa que me visualice el contenido del elemento párrafo | + | {{Actividad |
+ | |Un programa que me visualice el contenido del elemento párrafo | ||
<source lang=html5> | <source lang=html5> | ||
<html> | <html> | ||
Línea 96: | Línea 97: | ||
//Escribe aquí el código | //Escribe aquí el código | ||
</script> | </script> | ||
− | |||
<p id="parrafo">Este es el texto que quiero que aparezca</p> | <p id="parrafo">Este es el texto que quiero que aparezca</p> | ||
− | |||
</body> | </body> | ||
− | |||
</html> | </html> | ||
</source> | </source> | ||
− | *[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo6|<font size=5 color=red>Solución</font> | + | *[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo6|<font size=5 color=red>Solución</font>]] |
}} | }} | ||
Línea 112: | Línea 110: | ||
|El programa anterior 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 | *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> | + | [[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== | ==Cambiar el estilo de un párrafo== | ||
<br /> | <br /> | ||
{{Actividad| | {{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 03:28 12 mar 2016
Contenido
- 1 Programación web al lado del cliente
- 2 Modificar el texto
- 3 Actividad
- 4 Actividad
- 5 Actividad
- 6 Modificar borde de una imagen
- 7 Manteniendo histórico
- 8 Actividad
- 9 Cambiar el tamaño de imágenes
- 10 Crear elementos
- 11 Añadir contenido
- 12 Un caja de texto y vamos poniendo lista de compra
- 13 Actividad
Modificar el texto
|
|
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
|
Que al pinchar en una imagen se modifique su borde
<!--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>
|
|
(: Usa una variable para guardar información entre iteración e interación)
Accediendo al contenido
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
El programa anterior de imágenes
|
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
- Como vemos en el ejemplo anterior, los elementos no contienen texto
Cambiar el estilo de un párrafo
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>