JavaScript Hello World is one of the simplest when starting with JavaScript coding. In this article, we will show you different ways you can print “Hello World” using JavaScript.

You can run the code inside an HTML page using <script> your script..</script> or using <script src=”path/myscript.js”> in the header or just before the closing body tag(</body>).

JavaScript Hello World using console.log()

The console is mainly used for debugging or while you are testing the JavaScript code. But we will see how we can print hello world in the console.

var printText="Hello World"; // Declarating variable & Storing the text
console.log(printText);      // console logging

javascript console log hello world
Pretty simple and easy, read below if you want a Hello World alert using JavaScript.

Print Hellow World using alert() function

You can alert any message using the JavaScript alert() function. It’s easy to use and it works in almost any browser.

var printText="Hello World"; // Declarating variable & Storing the text
alert(printText);            // Alert Hello World

JavaScript Hello World using Document.write()

There can be a situation where you want to write any text to the document object model(DOM).  For that, we can simply use the document.write function to show any text on the HTML page

var printText="Hello World"; //varibale delecration and storing Hello World
document.write(printText);

The above example was for just simply writing Hello World in DOM.

What if you want to write Hello World to a specific HTML element for example a <p> paragraph tag, <div> divison tag or let’s say to <h1> heading one tag using JavaScript.

The steps to do so is first give an id or a class attribute to that specific element. Then access that element by its Id or Class and perform innerHTML with whatever text you want to go inside the tag.

The below example shows how to write Hello World to heading <h1> element tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>letstacle</title>
</head>
<body>
<h1 id="myHeading"></h1>
   
<script>
var printText="Hello World"; //storing Hello World in a variable
document.getElementById('myHeading').innerHTML=printText;
</script>   
    
</body>
</html>

Note: In the below example Id of the H1 is given as “myHeading“.

Further, if you want to build your own custom JavaScript function. Wrap the code in a function and do a function call for the desired event. The event can be any event such as onclick , on windows load, or any condition.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Letstacle</title>
</head>

<body>
<h1 id="myHeading"></h1>
   
<script>
function myFunction() {
    var printText="Hello World"; // varibale delecration and storing Hello World 
    document.getElementById('myHeading').innerHTML=printText;
}

//event for fucntion call
window.onload=myFunction();
</script>  
</body>

</html>

Let us know by commenting if you face any issues while trying to figure out how to print Hello World. For questions and HTML JavaScript help, you can contact us.