Output in JavaScript

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document Object

We can get JavaScript Output in 4 simple and different ways on a webpage and these are given below. We can use them according to the application requirement. In this tutorial, we will be learning the following four different ways of getting output from JavaScript code, just like we use printf() in C language, cout in C++, etc.

1. Using innerHTML property
2. Using document.write() method
3. Using Alert Box
4. By logging on the Console

We will cover all these with the help of examples. Also, don’t worry if you don’t understand the syntax for these, we will be covering these in details in upcoming tutorials.

1. JavaScript innerHTML Property

JavaScript lets you write into an HTML element by using innerHTML property. We can add anything we want, it can be a text message, some HTML element or anything else.

To do that first you need to provide a specific Id to the HTML element that you want to access by the JavaScript code.

To access an HTML element JavaScript uses document.getElementById(id) method, where id is the value of the id attribute of the HTML tag.

Let’s take an example, in this example, id attribute is used to identify the HTML element and innerHTML property is used to set content to it.

JavaScript Output using innerHTML function addText() { document.getElementById(“script”).innerHTML= “This text has been written using the JavaScript.”; }

This is the old text.

Click to use JavaScript

This way, if you are writing JavaScript code for doing some processing or if you have any logic, you can easily show the output in the HTML webpage.

2. JavaScript Output using document.write()

JavaScript lets you write any outout into the HTML webpage by using the document.write() method. By using this method you can directly write output to the HTML page.

The write() method writes the HTML expressions or JavaScript code to a document. This method is mostly used for testing purposes.

Let’s take an example, in this example, we are using document.write() method which is used to write to the webpage directly.

JavaScript Output using document.write() document.write(“This is the text written using JavaScript.”) ;

3. JavaScript Output via Alert Box

There are certain websites that give you alert messages when you access them or when you perform some action you see the output message in alert boxes. You can also make your webpage to send alert messages to notify something to the user using JavaScript, to use this feature you need to use the window.alert() method.

Let’s take an example, in this example, we are using the alert box to write a message and show to the user.

JavaScript Output using Alert Box window.alert(“This is an alert message.”) ;

4. JavaScript Console Logging

JavaScript also lets you create console logs which can be seen in the browser’s developers’ tools(Console) for debugging purposes. The statement written inside a console log will be executed but would not be displayed in the browser instead it will be displayed inside the console of the browser.

The function used for console logging is console.log(SOME-EXPRESSION-OR-STRING) which can be used to log anything in the browser’s console.

To open developer’s tools in the Chrome browser, press F12 in Windows and Command + Option + I in MacOS. The picture below shows how it looks:

Let’s take an example to see the JavaScript code to print logs in the console:

<html>
<head>
    <title>JavaScript console example</title>
    <script>
        console.log(2+3);
    </script>
</head>
<body>
    <!-- HTML body -->
</body>
</html>

5

< prev

next >