Diferentes formas de mostrar la salida en JavaScript

En este artículo, vamos a aprender acerca de los diferentes métodos a la salida de pantalla en JavaScript, como CONSOLE.LOG (), alerta, alteración de la DOM, document.write () etc.

JavaScript es uno de los lenguajes de programación más utilizados en el mundo. Inicialmente se construyó class la web, pero hoy se ha hecho cargo de la pila LAMP tradicional, con la plataforma del lado del servidor en Node.js.

JavaScript es un lenguaje fácil para empezar. Con el apoyo for tipificación suelto y sin comprobación estricta JavaScript es un lenguaje muy indulgente. Pero esto a veces no ayuda a los desarrolladores tanto. Tomemos el ejemplo de la visualización de datos en la pantalla.

Hay varios métodos para hacer contenido de la pantalla en la pantalla de la consola o . Si bien todos ellos podrían mostrar los datos, pero son diferentes entre sí. Vamos a discutir uno por uno …

1) CONSOLE.LOG ()

Uno de los métodos básicos para los datos de salida a la consola, es una buena depuración for y una lista de los errores mientras no mostrar a sus visitantes en la página web. Los datos que desee de salida se pasa como un parámetro en el registro de () método.

Código

//Simple string output
console.log('Hello World');

//Using variables
var name = 'John';
console.log('Hello, ' + name);

2) Método de Alerta

Usted podría estar familiarizado con éste. Se pueden encontrar muchos tutoriales utilizando el método de alerta a los datos, ya que es fácil de datos y programas en la página sin alterar el DOM. El método de alerta es sencillo y al igual que console.log () método que espera argumento de que será alertado.

Pero , tiene algunas desventajas. En primer lugar, se detiene la secuencia de comandos para ejecutar mientras se muestra cuadro de alerta. Se requiere una acción, como OK, por parte del usuario. Esto detiene el guión y podría realizar mal en algunos casos. En segundo lugar, el pop-up puede que no sea muy fácil de usar. Por lo tanto, se aconseja que no se utiliza la alerta para mostrar los datos en el sitio web real, y sólo en el modo de desarrollo.

Código

alert('Welcome, User');

//Using Variables
var name = 'John';
alert('Hello' + name);

3) La alteración de la DOM

DOM se encuentra for modelo de objetos de documento. A través de JavaScript podemos mostrar la salida directamente en la página web y la mayoría de los sitios web que usted utiliza, utilice este método para mostrar los datos en la página web utilizando tecnologías como AJAX. Hay varios métodos disponibles para hacer esto, pero vamos a discutir los métodos más utilizados y también porque son mejores que los demás.

3.1) document.write ()

El document.write () método funciona y muestra los datos de la página web, pero es infame y no se utiliza con frecuencia. Una vez cargado el DOM (es decir, carga las páginas web) y luego, si document.write () se llama, que borra todos los datos en el documento (página) y vuelve a escribir con los datos proporcionados.

Código

var loggedIn;
//Let's assume LoggedIn is true from some code
if(loggedIn) {
//Do something
} else {
document.write('Login first');
}

Esto borrará todos los datos de la página, blanco transparente y luego se escribe una línea nueva en él.

3,2) InnerText

El InnerText es la variable del objeto elemento y cualquiera que sea se proporciona como un valor se escribe dentro de ese elemento. Pero debe ser único texto. Por lo que es bueno si desea mostrar los datos sobre los elementos de texto como, partidas o párrafo.

Supongamos que este es nuestro HTML

Código – HTML

<p id="output"></p>

Definimos un párrafo con una ID y vamos a mantenerlo vacío porque queremos mostrar los datos en ella. Si hubiera habido algún contenido, el contenido sería sobrescribe.

Código – Guión

var para = document.getElementById('output');
para.innerText = 'Hello, World!';

Esto cambiará el texto dentro del párrafo. primero se selecciona el elemento de párrafo por su ID , entonces cambiamos su texto, es decir, salida de la pantalla a través de innerText variable.

3.3) InnerHTML

Al igual que innerText , innerHtml es una variable de objeto elemento, pero a diferencia de innerText que sólo establece el innerText , innerHtml cambia el código HTML. Puede ser utilizado en div a introducir varios elementos. He aquí un ejemplo:

Código – HTML

<div id="box">
<!-- Content Goes here -->
</div>

Código – Guión

var box = document.getElementById('box');
box.innerHTML = '<h1>Heading</h1> <p>With paragraph</p>';

Aquí en innerHtml , proporcionamos las etiquetas html así, porque estamos tratando con HTML directamente.

Esperanza te gusta este artículo y nuevas formas aprendidas para dar salida a sus datos.

Comparte tu opinión en los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *