Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/ejemplos»
| Línea 8: | Línea 8: | ||
*Escribimos como contenido del elemento 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>]] | + | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo1|<font size=5 color=red>Solución</font>]]}} |
| − | }} | + | |
{{Actividad| | {{Actividad| | ||
<br /> | <br /> | ||
| − | Modificamos el ejemplo anterior para que ocurra con el nombre y edad que introduzcamos}} | + | 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>]]}} | ||
| Línea 27: | Línea 27: | ||
Tambíen aparecerá un texto que ponga pincha aquí | Tambíen 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| | ||
| Línea 68: | Línea 69: | ||
</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}} | + | |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}} | {{Nota|Usa una variable para guardar información entre iteración e interación}} | ||
| Línea 95: | Línea 100: | ||
</html> | </html> | ||
</source> | </source> | ||
| + | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo6|<font size=5 color=red>Solución</font> | ||
}} | }} | ||
| Línea 102: | Línea 108: | ||
|Title=Cambiar el tamaño de imágenes | |Title=Cambiar el tamaño de imágenes | ||
|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> | ||
| + | }} | ||
==Cambiar el estilo de un párrafo== | ==Cambiar el estilo de un párrafo== | ||
Revisión de 04:25 11 mar 2016
LENGUAJE JAVASCRIPT: JavaScript un lenguaje de programación web
Programación web al lado del cliente
JavaScript Un lenguaje de script en el cliente
Contenido
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
{{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 [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo3|Solución}}
{{Actividad| Title=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>[[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo4|Solución }}
{{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|Solución }}
(
: 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>
[[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
|
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>
