Muy buenas virgo-colegas de T!, les voy a enseñar a hacer su propio script para poder probar sus códigos Html y Css antes de implementarlos en sus sitios. Si bien es una boludes, para los que recién empiezan les viene bien ya que a medida que escriben sus códigos van a ir viendo los resultados automáticamente.
Para crear este script solo deben abrir su editor de textos (en mi caso - como es costumbre - voy a utilizar Sublime Text) y hacen un Copy&Paste al mejor estilo taringuero del siguiente código y lo guardan con la extensión .html:
< !DOCTYPE html>
< html>
< head>
< meta charset="UTF-8" />
< title>NechuZ CodeTest</title>
< style type="text/css">
body {background: #2D2D2D}
textarea {width: 99%; height: 350px; background: #404040; color: #52AFD4; font-size: 1.2em; resize: vertical;}
.salida {width: 100%; height: 410px; color:#fff; font-size: 1.2em;}
< /style>
< script type="text/javascript">
function run(){
var x = document.getElementById("codigo").value;
document.getElementById('derecha').innerHTML = x;
}
< /script>
< /head>
< body>
< div style=width: 100%; height: 45%; background: #2D2D2D; font-size: 1.2em;>
< textarea onKeyUp="run();" id="codigo" autofocus> </textarea>
< /div><br><br><br>
< div class="salida" id="derecha">
Aquí verás los resultados...
< /div>
< /body>
< /html>
Mira como funciona...
Te explico como viene la mano...
En este bloque de código especificamos, el tipo de documento DOCTYPE html, codificación del mismo (UTF-8), el título (title) y los estilos (o como queremos que se vean) el cuerpo (body) del documento, los Textareas (en donde se irá introduciendo el código que van a probar) y el div en donde aparecerá el resultado del código que escribimos
En el segundo bloque, agregamos el código java que se va a encargar de hacer toda la magia.
lo que hice fue crear una función llamada run() y lo que hará es tomar el valor (value) del div "codigo" y lo va a almacenar en la variable "x".
Luego vamos a introducir el contenido de X en el div llamado "derecha" con innerHTML
Ahora en el tercer bloque de código, vamos a crear un contenedor ()línea 21) para colocar el Textarea con el id "codigo" (que es en donde escribiremos nuestro código cuando practiquemos).
Este textarea tiene un atributo llamado onKeyUp con el valor run() y autofocus ¿Para que es esto?
Simple: Cuando el textarea es modificado llamamos a la función run() creada anteriormente.
Para finalizar esta el div "derecha" que es en donde aparecerán los resultados de nuestro código
Les dejo unas imágenes de como se ve el script y un video de como trabaja.
Espero que les sirva y será hasta la próxima
Queres saber más sobre Html y demás yerbas?
pasa por estos dos lugares...
(Calidad certificada, o te envío las fotos de la shinsherlim mostrando la empanada)
