NorfiPC » Informaciones de Windows » Escribir con Javascript en las páginas web

Como escribir con Javascript texto y otros elementos en las páginas web

Como utilizar Javascript para escribir en una página web texto, variables, vínculos, scripts, iframes, sencillos códigos con ejemplos prácticos que pueden utilizarse para añadir dinamismo y funcionalidad al contenido de cualquier blog o página web.

Javascript es un sencillo lenguaje de programación, que permite agregarle diversas funcionalidades a las páginas web y de esa forma mejorar las limitadas posibilidades del código HTML usado en estos archivos.
No es necesario conocimientos avanzados del lenguaje, solo seguir reglas elementales, en ocasiones solo bastará copiar y pegar líneas de código.
Existen varias funciones en Javascript que permiten escribir y representar texto u otro contenido en una página web, son document.write, document.writeln y innerHTML. El objetivo de esta página es mostrar ejemplos sencillos del uso de estas funciones en tareas comunes y útiles para todos los que publicamos contenido en internet.

Como usar la función document.write, ejemplos prácticos

La funcion document.write de Javascript permite escribir en una página texto, el resultado de una funcion o ambos. Se utiliza de la siguiente forma:

document.write('texto') o document.write(+funcion)

El resultado aparecerá en el lugar de la página donde se inserte el código. Logicamente, este código debe ir encerrado entre dos etiquetas <script> para que el navegador lo interprete como tal.
El texto encerrado entre comillas será escrito literalmente, si no se usan comillas se asumirá que es una variable, esta debe estar antecedida por el signo: +
Algunos ejemplos a continuación.

Escribir texto y variables con Javascript

• El primer ejemplo de document.write escribe en la página el texto 'Hola', el segundo el resultado de la variable screen.width que devuelve el ancho de la pantalla en pixeles y el tercero agrupa texto y la variable.

<script type="text/javascript">
document.write('Hola')
</script>

<script type="text/javascript">
document.write(+screen.width)
</script>

<script type="text/javascript">
document.write('Ancho de la pantalla: '+screen.width+' pixeles')
</script>

Se mostrará en la página lo siguiente:

Por supuesto que no se utiliza Javascript para escribir un simple texto, se usa cuando el texto está acompañado de una variable que cambiará su valor dependiendo lo que se exprese con ella.

• Por ejemplo, de la siguiente forma podemos escribir la fecha de la última modificación de la página, observa que la variable no está encerrada entre comillas y posee un signo de más.

<script type="text/javascript">
document.write('Ultima modificacion: '+window.document.lastModified)
</script>

• O puedes escribir el nombre del navegador con que se cargue la pagina:

<script type="text/javascript">
document.write('Usas el navegador: '+navigator.appName)
</script>

• Si quieres continuar escribiendo despues de la variable, necesitas otro signo de mas despues de ella, por ejemplo:

<script type="text/javascript">
document.write('El titulo de esta pagina es: '+window.document.title+',y la direccion URL es: '+window.document.URL)
</script>

Escribir vínculos con Javascript

La función document.write es muy utilizada para escribir vínculos e inclusive otros scripts.
En el siguiente ejemplo se utiliza document.write para escribir un link en la página, pero solo si el navegador usado es Firefox o Google Chrome, si se emplea Internet Explorer no se verá.

<script type="text/javascript">
//<![CDATA[
if(navigator.appName.indexOf("Netscape") != -1){
document.write('<a href=\"http:\/\/norfipc.com\">Solo para Firefox y Google Chrome</a>');}
//]]>
</script>

Escribir estilo con Javascript

En otro ejemplo, se usa document.write para escribir un script que define el estilo de la sección de esta página para que se muestre con el fondo de color amarillo, pero solo si la página es cargada offline, para eso guárdala y cárgala desde el archivo html guardado para comprobarlo.

<script type="text/javascript">
//<![CDATA[
if ("file:" == document.location.protocol)
{document.write('<style type="text/css">#dwrite{background-color:yellow;}</style>');}
//]]>
</script>

Cargar archivos grandes sin afectar el tiempo de carga de la pagina

Otro código de ejemplo, es útil para cargar una imagen grande sin que robe tiempo a la carga de la página ya que se emplea document.write para escribir el código que carga la imagen, pero solo después que la pagina haya terminado de cargar por completo, para eso se utiliza la función window.onload.

<script type="text/javascript">
window.onload = document.write('<img  src=\"imagen.jpg\" width=\"540\" height=\"720\" alt=\"Nombre\" />')
</script>

Escribir el mismo contenido en múltiples páginas

Insertar texto repetitivo en multiples paginas, usando javascript en un único archivo externo que pueda ser editado con facilidad. Al usar document.write en un archivo js externo vinculado a cada pagina del sitio, es posible escribir
Por ejemplo el siguiente codigo irá en un archivo de texto de nombre: "creditos.js", escribirá en nuestra pagina nuestra información de Copyright.

<script type="text/javascript">
//<![CDATA[
document.write("<div style='color:blue;font-size:14px;'>");
document.write("© Copyright MiNombre 2011");
document.write("</div>");
//]]>
</script>

En cada página solo necesitamos insertar en el final o en el lugar donde deseamos que se muestre:

<script type="text/javascript" src="creditos.js"></script>

Se mostrará en cada página lo siguiente:

Al modificar o editar el contenido del archivo "credito.js", cambiará el contenido que aparezca en cada página.

Ocultar texto con Javascript de los buscadores.

Otro uso de Javascript es ocultar texto o elementos de la página de los robots de los buscadores, aprovechando la característica de estos de no revisar el contenido que se encuentre entre las etiquetas script. De esta forma se puede escribir el código para insertar vínculos de afiliados, iframes que encierren publicidad y otros objetos que no son bien vistos por buscadores como Google.
Ejemplos de los códigos para escribir un vínculo y un iframe que carga una página externa.

<script type="text/javascript">
document.write('<a href=\"http://norfipc.com\">Vínculo a página</a>')
</script>

<script type="text/javascript">
document.write("<iframe scrolling=\"no\" height=\"53\" frameborder=\"0\" width=\"600\" 
src=\"..\\carpeta\\pagina.html\"><\/iframe>")
</script>

La gran desventaja de utilizar document.write es que no podemos utilizarla después que se cargue la página, porque de ser así destruirá el contenido de esta.

La función de Javascript innerHTML

Para agregar dinamismo a la página, es decir poder escribir en ella después de que este cargada y sin utilizar un lenguaje de servidor como php, podemos usar la función de javascript innerHTML.
Mediante ella podemos agregar contenido de forma dinámica sin modificar el resto del contenido.

Como usar innerHTML, ejemplos prácticos

Para eso es necesario primero identificar el lugar exacto de la página y crear un div o contenedor u otro objeto con una identidad única de la siguiente forma:
<div id='ejemplo'></div>, donde ejemplo es la identificación de esa porción de la pagina.
Ahora es necesaria la siguiente función:
document.getElementById('ejemplo').innerHTML='Escrito por JS';
Que significa esto?
Primero se busca e identifica en la página el elemento con la identidad 'ejemplo', a continuación se escribe lo que se indica entre comillas en caso de ser texto, o se representa su valor si es una variable.

Escribir texto usando innerHTML mediante un vínculo

Un ejemplo práctico utilizando un vínculo para escribir el texto anterior.

<a href="#" onclick="javascript:document.getElementById('ejemplo').innerHTML = 
'Texto escrito por Javascript';return false;">Escribir texto</a>

<div id='ejemplo'></div>

Se mostrará en la página de la siguiente forma:
Escribir texto

Escribir texto simultáneamente usando innerHTML

Otro ejemplo, en este caso lo que se escriba en un cuadro de texto, de forma automática se irá representando en el contenedor (div) 'ejemplo' de la página, esto es posible usando el evento onkeyup en el cuadro de texto, significa que cada vez que se oprima una tecla en dicho cuadro se ejecuta la función indicada.
Dos formas de cómo hacerlo, primero la entrada de texto y el script separados y de la otra forma juntos.

<script type="text/javascript">
function userSubmit() {UI=document.getElementById('entrada1').value;
   document.getElementById('ejemplo2').innerHTML=' '+UI;} 
</script>

<input style="font-size:20px;" id="entrada1" onkeyup="userSubmit()" />
<div id='ejemplo2'></div>

<input  style="font-size:20px;" id="entrada2" onkeyup="javascript:{UI=document.getElementById('entrada2').value;
   document.getElementById('ejemplo2').innerHTML=' '+UI;}"  />
<div id='ejemplo2'></div>

Se mostrarán las entradas en la página de la siguiente forma, escribe algo en ellas:

Modificar vínculo de una página usando innerHTML

En el siguiente ejemplo se emplea innerHTML para volver a escribir el anchor text y la dirección URL de un vínculo de la página.

<a id="vinc1" href="http://norfipc.com">NorfiPC</a>

<input type="button" onclick="document.getElementById('vinc1').innerHTML='Google';
document.getElementById('vinc1').href='http://google.com.com';" value="Cambiar link" />

Se mostrará:

NorfiPC

Algunos requisitos para escribir con Javascript.

1- Al escribir direcciones mediante Javascript, es necesario escapar las comillas en caso que no formen parte de una cadena, para lograr que se interpreten como un carácter necesario de escribir de forma idéntica, para eso se utiliza antes de ellas la barra inclinada \ como un controlador de escapes.
También se utiliza para escaparse a ella misma, por ejemplo para escribir: "C:\Temp" de forma identica se debe utilizar: \"C:\\Temp\"

2- El código javascript se usa de varias formas:
• Encerrado entre los tags:

<script type="text/javascript">
CODIGO JAVASCRIPT
</script>

• Dentro de un anchor (vinculo):

<a href="javascript:CODIGO JAVASCRIPT;">VINCULO</a>

• Evento de un botón:

<input type="button" value="NombreBoton" onclick="CODIGO JAVASCRIPT;" />

3- En caso de que en el código utilizado en javascript se empleen algunos de los caracteres: "&<> , es necesario escaparlos de la siguiente forma:

<script type="text/javascript">
//<![CDATA[
CODIGO JAVASCRIPT con "&<>
//]]>
</script>

En varias páginas de este sitio se utiliza javascript para escribir texto, variables y funciones, lo que permite añadir dinamismo e incrementar las limitadas posibilidades del código HTML, si estas interesado solo mira el código fuente de la página que lo contenga.

Páginas relacionadas

◄ Javascript fácil en páginas web, tutorial y ejemplos.
◄ Lista de variables y funciones de Javascript para usar en las páginas web.
◄ Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores.
◄ Como imprimir solo un área, parte o sección de una página web.

Páginas relacionadas en sitios externos

• www.w3schools.com
• www.hunlock.com

Agrega esta página a tus favoritas:

Seguir a @NorfiPC
NorfiPC en Google+:

Anterior | Subir | Siguiente