NorfiPC
NorfiPC » Informaciones » Escribir con Javascript

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

Como utilizar Javascript para escribir en una página web texto, variables, vínculos, scripts, iframes. Códigos con ejemplos prácticos que pueden utilizarse para añadir dinamismo y funcionalidad al contenido de cualquier blog o página web.
Escribir con Javascript texto y elementos en las páginas web Javascript es un sencillo lenguaje de programación, que permite agregar diversas funcionalidades a las páginas web y de esa forma mejorar las limitadas posibilidades del código HTML.
Javascript hace las páginas más dinámicas, interactivas y es muy usado para agregarles efectos útiles.
La gran mayoría de las paginas actuales, especialmente las escritas en HTML5, incluyen scripts, botones, widgets, que todos son escritos de forma dinámica con Javascript.
Ejemplos son los famosos Me Gusta, +1, Twittear, que los puedes ver en esta misma página.
Te invito a dar un corto paseo, para conocer cómo usar Javascript para escribir texto y otros elementos.
No es necesario conocimientos avanzados del lenguaje, solo seguir reglas elementales, en ocasiones solo bastará copiar y pegar cortas líneas de código.



Funciones usadas para escribir con Javascript


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.
Los dos primeros escriben texto u otros elementos al cargar la página, si son llamados posteriormente, será necesario volverla a cargar.
innerHTML permite escribir en solo una sección específica, sin alterar el resto de los elementos, es la opción ideal y más empleada en la actualidad.

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 cualquiera de las siguientes formas:
document.write('texto');
document.write(+funcion);
document.write(+1raFuncion+2daFuncion);
El resultado aparecerá en el lugar exacto 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.

Como usar 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.

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.

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.

Se mostrará:
NorfiPC

Consejos y tips

Consejos y tips para usar Javascript


1- Los caracteres que sean necesario escribir tal como son y no lo que representan, es necesario escaparlos.
Para escapar se utiliza una barra invertida (\) antes del carácter.
También se utiliza para escaparse ella misma.
Por ejemplo:
Para escribir: "C:\Temp" de forma idéntica.
Se utiliza: \"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:FUNCION;">VINCULO</a>
• Evento de un botón:
<input type="button" value="NombreBoton" onclick="FUNCION;">

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.
Usamos Javascript para tratar de hacer las páginas más ligeras y lograr que se muestren correctamente en cualquier dispositivo.
Si estas interesado hay varias páginas publicadas con códigos para copiar y pegar.
No obstante lo que te interese en cualquiera de las páginas, solo mira el código fuente de la página que lo contenga, cópialo y modifícalo de acuerdo a tus necesidades.

Páginas relacionadas



Páginas relacionadas en sitios externos


www.w3schools.com
www.hunlock.com