Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/ejemplos»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | dom
| Línea 12: | Línea 12: | ||
{{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>]]}} | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo2|<font size=5 color=red>Solución</font>]]}} | ||
| Línea 24: | 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 |
| − | + | *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>}} | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo3|<font size=5 color=red>Solución</font>}} | ||
| Línea 69: | Línea 69: | ||
</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> |
}} | }} | ||
{{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> | [[Usuario:ManuelRomero/JavaScript/dom/dom/ejemplos/ejemplo5|<font size=5 color=red>Solución</font> | ||
| Línea 100: | Línea 101: | ||
</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> |
}} | }} | ||
Revisión de 05:26 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
- 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|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>
