Day 2 of 30 of JavaScript
Tags: javascript, beginners, programming, tutorial
Published: 2024-04-18 05:51:36

Hey reader :) in the last post we have got little introduction about JS. In this post I'll be telling you about how we can display data on screen using JS. So let's get started.

So there are **four** different ways to display data using JS -:

1. Writing into an HTML element, using `innerHTML`.

2. Writing into the HTML output using `document.write()`.

3. Writing into an alert box, using `window.alert()`.

4. Writing into the browser console, using `console.log()`.

## 1. Using `innerHTML` ->
Let's understand it through code snippet.
**HTML Code -:**               
`<body>                          
    <p></p>
</body>`

**JavaScript Code -:**
`document.querySelector('p').innerHTML="Hello World"`

**Output -:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vnjnay7m8u666fn2j6a.png)

So let me explain you what this code is doing, we have created a paragraph element using `<p></p>` tag but we are not giving any text in this ,what we want to do here is we want to show a text in paragraph form using JS for this we are using `document.querySelector('p').innerHTML="Hello World"` this line of JS code. In this line we are selecting paragraph element using `document.querySelector('p')` and then we are targeting the data inside this element and assigning desired value to it , for this we are using `innerHTML`. 
**So we can say that `innerHTML` allows us to access or modify the HTML content within an element. **.

## 2. Using `document.write()` ->
**JavaScript Code -:**
`document.write("Hello World")`

**Output -:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrfcjjbsckpy8xp66lt9.png)

The `document.write()` method allows us to write text, HTML, or both directly to the HTML document while it's being parsed or loaded. It's primarily used for testing purposes or in situations where you need to dynamically generate content at the time the page is loading.

> If we use `document.write()` after the page has finished loading, it will overwrite the entire document content, effectively replacing it with the content we specify.

## 3. Using `window.alert()/alert()` ->
**HTML Code -:**               
`<body>                          
    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>
</body>`

**JavaScript Code -:**
`alert("Hello")`

**Output -:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gvinwhcb7b945r0jqh1.png)

The `alert()` function is used to display a modal dialog box with a message and an OK button. It's primarily used for displaying simple informational messages or alerts to the user.

- `alert()` is often used for simple notifications, warnings, or debugging messages.

- `alert()` is a blocking function, meaning that it halts the execution of JavaScript code until the user dismisses the dialog box by clicking the OK button. This can disrupt the normal flow of execution in your application.

## 4. Using `console.log()` ->
**JavaScript Code -:**
`console.log("Hello World")`

**Output -:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsbhx7u5847dwk5b1dzx.png)

The `console.log()` function is used to print messages or values to the browser's console. It's commonly used for debugging and logging information during development.

> The console is a tool provided by most modern web browsers that allows developers to view and interact with messages, errors, and other information generated by JavaScript code running on a web page.

Unlike `alert()`, `console.log()` does not block the execution of JavaScript code.

So this was it for this post in the next we will see how comments work in JS and how variables are formed .Till then stay connected and don't forget to follow me :)