outputs en Javascript

Posted by On septiembre 02, 2015 1 Comment

Ha llegado el momento, antes de profundizar más de saber como escribir en nuestros documentos por medio de los outputs en javascript.

Tenemos varias formas y cada una tiene sus funcionalidades

alert()

Ya lo hemos usado en algún ejemplo del tutorial, este método sirve para abrir una ventana emergente con información incluso con opciones.

Su sintaxis es realmente sencilla tan solo hace falta poner alert() y entre los paréntesis lo que queramos mostrar, como por ejemplo cadenas de texto o variables.

var cadena = "Hola esto es un alert";
var x = 4;
var y = 3;
var resultado = x + y;
alert(cadena);
alert(resultado);
alert('Cadena y variable númerica \n x + y =' + resultado);

Como se puede observar se pueden mezclar cadenas y variables utilizando el operador +.

Aunque hay muchos programadores que critican su uso, yo creo que tiene su utilidad como por ejemplo a la hora de mostrar mensajes de aviso o de confirmaciones. Además es muy útil a la hora de hacer pruebas ya que nos puede indicar de forma sencilla y poco invasiva por donde va el flujo de un programa y mostrarnos el valor de las variables.

document.write()

De esta forma podemos escribir dentro del documento justo donde pongamos la orden, siempre entre nuestras etiquetas <script> claro. Un ejemplo muy sencillo es el siguiente:

<html>
<head>
</head>
<body>
<script>
document.write('Hola Javascript!');
</script>
</body>
</html>

Aquí podemos observar como se imprime directamente el texto que hay dentro de la orden y el funcionamiento entre los paréntesis es igual que con el alert, podemos introducir variables, hacer operaciones…

También podemos introducir document.write dentro de un elemento HTML y activarlo con un evento (los veremos más adelante), pero en este caso eliminará todo el HTML que se haya cargado. Esto puedes verlo en el siguiente código:

<html>
<head>
</head>
<body>


<h2>Probando document.write()</h2>


<button onclick="document.write(2 + 3)">Intento 1</button>
<span onclick="document.write('hola mundo')">Intento 2</span>
</body>
</html>

inner.html

Esta es sin duda la forma más común de hacer los outputs en javascript ya que podemos controlar exactamente donde queremos que se imprima nuestro resultado y nos da mucha facilidad a la hora de trabajar.

De hecho es bastante común el introducir cadenas de texto o variables que tienen código HTML en su interior, haciendo que las webs sean dinámicas.

<html>
<head>
    <title>Introducción de código js en las etiquetas script</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>

<h2>Probando inner.HTMLM</h2>

<span id="prueba"></span>

<div id="prueba2"></div>

<script>
    var x = 3;
    document.getElementById("prueba").innerHTML = "Esto es la muestra de una cadena y una variable" + x;
    document.getElementById("prueba2").innerHTML = "<ul><li>Esto</li><li>es una lista</li><li>desde el inner.HTML</li></ul>"; 
</script>
</body>
</html>

Si lo analizamos un poco vemos como seleccionamos la etiqueta HTML que deseamos por que está identificada con su id y en ella introducimos lo que queremos que se muestre mediante inner.HTML

No es complicado aunque toca algunos conceptos que aun no hemos trabajado, pero iremos viéndolo todo poco a poco.