T - Métodos para escribir con JS

tipUsamos Javascript para tratar de hacer las páginas más ligeras y 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 y innerHTML.
Los dos primeros escriben texto u otros elementos al cargar la página, si son llamados posteriormente, será necesario volverla a cargar. Si utilizamos tabuladores u otros signos, antes debemos encerrar la salida entre etiquetas pre.
innerHTML permite escribir en solo una sección determinada (dentro de un elemento HTML), sin alterar al resto de elementos.

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 función: 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>

Algunos caracteres es necesario escribirlos tal y como son y no lo que representan, por eso es necesario anteponer la barra invertida (\) también conocida como signo de escape.
Por ejemplo, para escribir "Z:\tareas" tal cual, dentro un contenedor con id="respuesta" escribimos:
respuesta.innerHTML = '\"Z:\\tareas\"';

El código JavaScript puede usarse como respuesta a un evento, por ejemplo hacer clic en un botón:
<button onclick="EncenderCrono();">Encender</button>

 

Visitas...

Hoy ........ 0

Ayer ....... 1

Mes ........ 37

Total ........ 5556

En línea...

Hay 9 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS