http://www.disenoweb.org Diseño web, programación web, posicionamiento web y otras cuestiones de internet Sun, 22 Jan 2012 17:20:22 +0000 en hourly 1 http://wordpress.org/?v=3.1 http://www.disenoweb.org/desarrollo-web-de-conversacion/ http://www.disenoweb.org/desarrollo-web-de-conversacion/#comments Wed, 16 Nov 2011 15:06:27 +0000 redaccion http://www.disenoweb.org/?p=500 El ejemplo de diseño web que presentamos a continuación muestra las posibilidades de JavaScript para la creación de interfaces de usuario amigables que faciliten ciertas tareas en la introducción de datos. En este caso, mostramos como crear un conversor de temperaturas, que permite pasar de grados Celsius a grados Fahrenheit, o a la inversa.

1. <script language=”javascript” type=”text⁄javascript”>
3. ⁄⁄constructor del termometro
4. function termometro(grados, escala, display) {
5. this.display = display
6. this.convertir_a_cel = convertir_a_cel
7. this.convertir_a_fahr = convertir_a_fahr
8. this.escala = escala
9. this.grados = grados
10. this.mostrar = mostrar
12. ⁄⁄visualiza los valores iniciales en display
13. this.mostrar()
14. }
16. ⁄⁄funciones de conversion
17. function convertir_a_cel( grados ) {
18. ⁄⁄no convierte si la escala ya es Celsius
19. if ( this.escala == ”C” ) {
20. alert(“Ya está en grados Celsius.”)
21. return grados
22. }
23. ⁄⁄pasa a grados Celsius
24. this.grados = Math.round( (5.0⁄9.0) * (grados - 32.0) )
25. this.escala = ”C”
26. this.mostrar()
27. }
29. function convertir_a_fahr( grados ) {
30. ⁄⁄no convierte si la escala ya es Fahrenheit
31. if ( this.escala == ”F” ) {
32. alert(“Ya está en grados Fahrenheit.”)
33. return grados
34. }
35. ⁄⁄pasa a grados Fahrenheit
36. this.grados = Math.round( ((9.0⁄5.0) * grados) + 32.0 )
37. this.escala = ”F”
38. this.mostrar()
39. }
41. ⁄⁄visualiza los grados y la escala en el display
42. function mostrar() {
43. this.display.escala.value = this.escala
44. this.display.grados.value = this.grados
45. }
47. ⁄⁄inicia a 0 grados Celsius
48. function inicia() {
49. miTermometro = new termometro(0, ’C', document.miTerm)
50. }
52. window.onload = inicia;
53. if (document.captureEvents) {           ⁄⁄N4 requiere invocar la funcion captureEvents
54. document.captureEvents(Event.LOAD)
55. }
60. <⁄script>

 

 

]]> http://www.disenoweb.org/desarrollo-web-de-conversacion/feed/ 0