Métodos para escribir con JS

Usamos Javascript para tratar de hacer las páginas más ligeras y dinámicas además de lograr que se muestren correctamente en cualquier dispositivo.

En JavaScript existen varios métodos que nos permiten escribir y mostrar texto u otro contenido en una página web, éstos son:

• document.write
• document.writeln
• innerHTML
• textContent

Los caracteres de escape funcionan siempre que estén dentro de elementos pre. Podemos utilizar carácteres de escape normalmente si empleamos document.write, document.writeln y template strings en ES6.

Una ventana alert() tiene formato pre por defecto.

Es decir, si utilizamos tabuladores u otros signos especiales, antes debemos encerrar la salida entre etiquetas pre.

Las plantillas de Texto: Template Strings en ES6

Con el nuevo estándar ES6 se han introducido las Plantillas de Texto de forma nativa permitiendo con ello cubrir, al menos parcialmente, una necesidad habitual del desarrollo moderno.

Las plantillas de texto (o Template Strings) son cadenas literales de texto incrustadas en el código fuente que permiten su interpolación mediante expresiones. Históricamente, el nombre que ha recibido esta estructura es la de Quasi Litarals (‘casi literales’).

Su sintaxis es sencilla y consta de dos partes:

• Se utilizan comillas invertidas, es decir, acentos graves ` para delimitar las cadenas.
• Para añadir expresiones (variables, sentencias,...) utilizamos el signo de dolar $ seguido de llaves { } entre las que colocamos la expresión.

let miTexto = 'En un lugar de la Mancha, ...';
console.log(`Mira esta frase: ${miTexto}`);
//→ Mira esta frase: En un lugar de la Mancha

Gracias a las plantillas, ahora es posible disfrutar de cadenas multilínea en Javascript sin necesidad de recurrir a concatenaciones, barras invertidas, unión de arrays u otros malabares habituales.

Es importante recalcar que las plantillas mantienen el formato introducido, incluyéndose los saltos de línea y las tabulaciones, es decir, como el texto que encerramos con el elemento pre.

El método document.write

El método document.write de Javascript permite escribir en una página texto, el resultado de una funcion o las dos cosas. El resultado aparecerá en el lugar exacto de la página donde se inserte el código. El método document.writeln es semejante salvo que inserta un saldo de línea al final (si trabajamos con etiquetas pre).

Sobra decir que este código debe ir encerrado entre dos etiquetas script para que el navegador lo interprete como tal (si lo colocamos en el propio archivo HTML). El texto encerrado entre comillas será escrito literalmente. Si no se usan comillas se asumirá que es una variable.

La mayoría de las veces se utiliza Javascript para escribir texto cuando está acompañado de una variable que cambiará su valor dependiendo de lo que se exprese con ella.

Dentro del texto que queremos mostrar podemos incluir código HTML.

Ejemplos:

<script> 
// Ejemplo 1
document.write("Bienvenido a mi sitio web. Gracias...");
// Ejemplo 2
document.write('<a href=\"http://3con14.pro\">Enlace a una página</a>');
// Ejemplo 3
document.write(new Date());
// Ejemplo 4
document.write('Ancho de pantalla: '+ screen.width +' pixeles');
// Ejemplo 5
document.write('Ultima modificacion: '+ window.document.lastModified);
// Ejemplo 6
document.write('Usando el navegador: '+ navigator.appName);
</script>
// Ejemplo 7
window.onload = document.write('<img src=\"grande.jpg\" alt=\"miImagen\" />');

La propiedad textContent

Escribir un texto plano (sin formato HTML) dentro de un determinado elemento HTML.

La propiedad textContent establece o devuelve el contenido de texto del nodo especificado y todos sus descendientes. Si establecemos la propiedad textContent, los nodos secundarios se eliminan y reemplazan por un solo nodo de texto que contiene la cadena especificada.

• textContent devuelve el contenido de texto de todos los elementos, mientras que innerText devuelve el contenido de todos los elementos, a excepción de los elementos script y style.
• innerText no devolverá el texto de los elementos que están ocultos con CSS (textContent lo hará).

Para establecer o devolver el contenido HTML de un elemento, usamos la propiedad innerHTML.

La propiedad: innerHTML

La usamos para agregar dinamismo a la página, es decir, para agregar texto después de que esté cargada. Mediante ella podemos agregar contenido dentro de un elemento, sin modificar el resto del contenido.

Forma de utilizarla:

1. Colocamos un contenedor en la página HTML, normalmente un div con su id para apuntar a él fácilmente desde JS.
2. Desde JS, se inserta el 'texto' que deseemos en dicho contenedor.
3. Dentro del 'texto' que queremos mostrar podemos incluir código HTML.

Ejemplos:

<!-- Un ejemplo -->
document.getElementById("demo").innerHTML = "Esto es un párrafo de ejemplo";
<!-- Otro ejempplo -->
<p id="parrafo1">Esto es el texto del párrafo 1</p>
<button onclick="mostrar()"> Pulsa </button>
<p id="parrafo2"></p>
<script>
function mostrar() {
    var x = document.getElementById("parrafo1").innerHTML;
    document.getElementById("parrafo2").innerHTML = x;
}
</script>

• Siguiente