Método document.write
La 2º instrucción que vamos a ver para mostrar información por pantalla es document.write
En este caso, la información se mostraría en la misma página, y no en un pop-up. Vemos como debemos escribirlo:
document.write("Este es un mensaje mostrado con document.write": ¡Hola mundo!);
Ya ves que es una manera muy similar a la instrucción alert y se le aplica las mismas consideraciones que hemos hecho antes (se puede emplear comillas simples y no importan los espacios en blanco).
Si lo probamos en el editor online, el texto se mostrará esta vez en el cuadro ‘Resultados’ (recuerda incluirlo entre las etiquetas <script></script>):
Incluir etiquetado HTML
Si conoces HTML, te interesará saber que dentro de los paréntesis de alert y document.write, podemos escribir etiquetas HTML entrecomilladas que serán tomadas en cuenta por el navegador como tal código. Un ejemplo muy sencillo donde utilizamos la etiqueta <br> (salto de línea):
|
1 2 3 |
document.write("Primera linea"); document.write("<br>"); document.write("Segunda línea"); |
Es decir, al ir entrecomillado, ha incluido el texto <br> y el navegador ha interpretado esa etiqueta HTML, haciendo el salto de línea.
Vemos otro ejemplo algo más elaborado. En este caso, mostramos parte del código de una página web donde tenemos etiquetado HTML (un párrafo y una lista) y además hemos incluido una sentencia document.write (entre las etiquetas <script></script> como siempre) en cuyo texto van etiquetas HTML.
Si lo pruebas en el editor online, verás que salvo por las aclaraciones que hacemos en el propio texto, no se habría podido distinguir cuándo hemos empleado HTML directamente o cuándo Javascript con HTML en su ‘interior’ (utiliza el scroll del cuadro si no ves el resultado completamente):
|
1 2 3 4 5 6 7 8 |
<p>Vamos a escribir primero una lista con HTML directamente:</p> <ul> <li>item 1 lista HTML</li> <li>item 2 lista HTML</li> </ul> <script> document.write("<p>Esta lista en cambio, la hemos incluido a través de un document.write (dw):</p><ul><li>item 1 lista dw-HTML</li><li>item 2 lista dw-HTML</li></ul>") </script> |
Si te das cuenta, en este caso hemos llamado ‘método‘ a la instrucción document.write en vez de ‘función’ como hicimos con alert ó prompt. Son conceptos muy parecidos que explicaremos más adelante (de hecho tanto alert como prompt son también métodos). Por ahora basta con entenderlos intuitivamente: son instrucciones que al incluirlas en nuestros programas realizan determinadas tareas.