Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/ejemplos»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | dom
(→Modificar el texto) |
|||
| Línea 6: | Línea 6: | ||
<br /> | <br /> | ||
{{Actividad| | {{Actividad| | ||
| − | 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>]] | ||
}} | }} | ||
Revisión de 04:21 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
|
|
|
Modificamos el borde de las imágenes
| Hacer un programa que modifique el borde de la imagen
Que el efecto se realice cuando hagamos un click en una caja de 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 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
|
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>
|
| Modifica el código anterior para que cada vez que presione el botón se pueda cambiar al estado inicial y así sucesivamente
|
(
: 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
|
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>
