JavaScript Output
Tags: javascript, codenewbie, tutorial, html
Published: 2021-01-16 22:00:45

{% youtube tmNNnPJPYvw %}

--- 
JavaScript can display data in different ways using:
- `console.log()` Object
- `alert()` Object
- `document.write()` Object
- `elem.innerHTML` Property - `elem` is an arbitrary name.

---
### console.log()
As shown in the previous article, you can debug unexpected results from the browser in the console.

**index.html**

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Using log Object</title>
</head>

<body>

	<script>
		console.log('Hello World!')
	</script>
</body>

</html>
``` 
[Edit on Stackblitz](https://stackblitz.com/edit/js-rxaxbw?devtoolsheight=33&file=index.html)

---
### *alert* method
The `alert` is a method on the browser `window` object - `window.alert(...)`. It is used to display data on the browser or screen (window). It displays the result in a modal dialog box. 

**index.html**

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=1.0">
	<title>Using alert object</title>
</head>

<body>

	<script>
		alert('Hello World!')
	</script>
</body>

</html>
```
[Edit on Stackblitz](https://stackblitz.com/edit/web-platform-4hnppq?file=index.html)

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
### *write* method
To test for unexpected results directly in the browser window, the command `document.write()` is used. It allows **HTML** elements within the method. For example `document.write("<h1>Hello World</h1>")`.

**index.html**

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Using write object</title>
  </head>

  <body>
    <script>
      document.write("<h2>Hello World!</h2>");
    </script>
  </body>
</html>
```
[Edit on Stackblitz](https://stackblitz.com/edit/web-platform-3spwfv?file=index.html)

---
### *innerHTML* property
To target specific elements based on their selector, the `innerHTML` property is used on selected elements. 

**index.html**

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=, initial-scale=1.0" />
	<title>Using innerHTML</title>
</head>
<h2 id="demo"></h2>

<body>
	<script>
	   let elem = document.querySelector("#demo");
           elem.innerHTML = "Hello World!";
	</script>
</body>

</html>
```
[Edit on Stackblitz](https://stackblitz.com/edit/web-platform-1c8lrp?file=index.html)

Outside of the console, but in the *window browser*, you use the `alert` method on the `window` object or document property &mdash; `window.alert('...')`, `window.document.write('...')`, `window.document.querySelector('#demo') = "..."`.

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>