postImage

Tutorial: Javascript Data Output

blogImage

By Emmanuel Chinonso

Web Developer

Ways JavaScript output can be displayed

Data can be "displayed" in a variety of ways using

  • Using innerHTML to write into an HTML element.
  • Using () to write into the HTML output.
  • Using window.alert to write into an alert box ().
  • Using the browser console to write into

Contrast Bootstrap UI Kit

Using innerHTML The document.getElementById(id) method in JavaScript can be used to get an HTML element. The HTML element is identified by its id attribute. The HTML content is specified via the innerHTML property:

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<h1>My First Web Page</h1>
6<p>My First Paragraph</p>
7
8<p id="demo">Happy coding</p>
9
10<script>
11document.getElementById("demo").innerHTML = congratulations on your first JavaScript code;
12</script>
13
14</body>
15</html>

In JavaScript, this is a popular method of displaying data.

Using document.write()

It is more convenient to use document.write() for testing purposes.

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<h1>My First Web Page</h1>
6<p>My first paragraph.</p>
7
8<script>
9document.write(5 + 6);
10</script>
11
12</body>
13</html>

Using document.write() after the HTML has been loaded will remove the previous HTML. It should be reserved for testing purposes only.

Using window.alert() : An alert box can be used to present data:

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<h1>My First Web Page</h1>
6<p>My first paragraph.</p>
7
8<script>
9window.alert(5 + 6);
10</script>
11
12</body>
13</html>

You can omit the window keyword.

The window object is the global scope object in JavaScript, which means that variables, attributes, and methods belong to it by default. This also implies that supplying the window keyword is optional. As a result, you can only use the keyword alert.

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<h1>My First Web Page</h1>
6<p>My first paragraph.</p>
7
8<script>
9alert(5 + 6);
10</script>
11
12</body>
13</html>

Using console.log() : To display data for debugging purposes, use the console.log() method in the browser.

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<script>
6console.log(5 + 6);
7</script>
8
9</body>
10</html>

JavaScript Print: There is no print object or print methods in JavaScript. JavaScript does not support access to output devices. The sole exception is that you can call the window. print() method in the browser to print the contents of the current window.

Code:

1<!DOCTYPE html>
2<html>
3<body>
4
5<button onclick="window.print()">Print this page</button>
6
7</body>
8</html>

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...