Escribamos un editor de texto.
Además de Flash / applets, * todo * que ves con los ojos dentro de un navegador es una combinación de Javascript, HTML y CSS. Esto se aplica a una página web estática simple a una aplicación web interactiva complicada como gmail.
HTML le dice al navegador cuáles son los contenidos de la página web que debe “dibujar”.
CSS comprende las reglas estilísticas de cómo debe verse ese contenido, como el relleno y los márgenes, la fuente, etc.
Javascript es un código ejecutable que puede manipular o generar HTML, cambiando así el contenido de la página web de forma dinámica. Esto le da la sensación de “aplicación”.
- ¿Qué herramienta de prueba de rendimiento es mejor para pruebas de aplicaciones basadas en web, LoadRunner o JMeter?
- ¿Cómo se crea un rastreador web?
- Cómo hacer que las personas se registren en una plataforma cuando el público objetivo no es experto en tecnología o no está dispuesto a llenar formularios
- ¿Qué sucede dentro de un servidor web cuando comienzas y presionas la URL?
- ¿Puedo obtener experiencia en desarrollo web solo a través de Java?
Página web estática
Te daré un ejemplo muy simple de una página en blanco que dice “Hola, mundo” en rojo. Este es un seudocódigo y no se ejecutará en el navegador.
HTML : Hola, mundo
CSS : cuerpo {color: rojo}
Javascript : nada, por ahora
Como puede ver, HTML es texto “estático” que le dice al navegador que en el contenido de de esta página, se muestra “Hola, mundo”.
CSS le dice al navegador que cualquier cosa dentro del bloque debe tener un color de fuente rojo. Entonces “Hola, mundo” aparecerá en rojo.
En este momento esta es una página web estática, por lo que no incluí Javascript.
Página web dinámica
Ahora, para mostrarle el poder de Javascript para hacer que esta página web sea dinámica. Una vez más, estoy escribiendo súper pseudocódigo porque soy vago.
HTML : Hola, mundo
CSS : cuerpo {color: rojo}
Javascript : (súper pseudocódigo): espera 5 segundos. Después de 5 segundos, cambie el contenido de a “Mira, he cambiado”, cambie el color del cuerpo CSS a “azul”.
Cuando abra esta página web por primera vez, verá “Hola, mundo” en rojo, como en el ejemplo de la página web estática. Después de 5 segundos, verá que el texto cambia a “Mira, he cambiado”, y su color cambia a azul.
Hacer un editor de texto
El ejemplo dinámico anterior fue extremadamente trivial. Démosle, conceptualmente, un ejemplo más profundo de cómo hacer un editor de texto como Google doc. No voy a escribir ningún código aquí, pero describiré el concepto de usar HTML, CSS y Javascript para crear una aplicación web de editor de texto simple.
HTML :
CSS : cuerpo {color de fondo: negro}; #pad {ancho: 600; altura: 800; color de fondo: blanco; relleno: 20px};
Javascript : (superpseudocódigo):
Detectar tecla de usuario presione “A” – “z”:
Verifique la longitud del tramo actual “línea N”, donde N es el número de línea actual que se está escribiendo. Por ejemplo, cuando la página se abre por primera vez, N es 1. Si la extensión “línea N” es más larga que 560 px (ancho – relleno * 2), cree una nueva extensión “línea N + 1” en div “relleno” y márquelo como tramo actual.
agregar carácter al tramo actual.
En el ejemplo anterior, tiene una almohadilla blanca de 600 x 800 en una página web completamente negra. A medida que el usuario comienza a escribir caracteres “A” – “z”, agregará el carácter al final del primer tramo – línea1 – del editor. Cuando la primera línea es demasiado larga, creará un nuevo tramo – línea2 – para que debajo de ella comience su próxima línea, y así sucesivamente.
Este editor de texto es inútil para cualquiera, pero es un comienzo. Con Javascript, puede agregar un cursor parpadeante, ajuste de palabras, operaciones de eliminación, deshacer, resaltado en negrita, etc. El concepto básico está ahí, el resto son solo cientos de horas de trabajo, que le dejo a usted.
