First Hello World Program in JavaScript | 2 Ways to add JavaScript to HTML
In this tutorial post we will be running our first JavaScript program which is a basic Hello World program where we ill simple print Hello World(or any other text) on the browser.
The 2 softwares needed to start of with JavaScript are –
- Text Editor : I will be using Visual Studio Code Text Editor which is highly recommended by many specially for Javascript, however you can use any other text editor like Notepad++ or Sublime text etc.
- Browser : Of course a browser is needed to load the HTML document and run the JavaScript so I will be using Google Chrome broswer. You can use any browser of your choice as most modern browsers have JavaScript enabled by default.
There are 2 ways to include JavaScript in your HTML Document –
- Embedding JavaScript in the same HTML document
- Using External JavaScript file and linking it in your HTML document.
1. Embedding JS in HTML document –
As you can see in the code below, we are embedding JS code using the <script> tag of HTML. Usually when the JavaScript code is small it is directly embedded in the HTML document, however, it is not recommended to embed large sized JS code directly in the HTML document as the code becomes un-organized.
default.html file –
<html>
<head>
<title>My title</title>
<script type="text/javascript">
document.write("<h1>JS Embedded</h1>");
</script>
</head>
<body>
</body>
</html>
Output –
2. External JavaScript File –
As you can see below there are 2 file – one the actual HTML document and other a separate external javascript file (demo.js). This demo.js file is linked in the HTML document using the script tag with the use of the attribute src as shown in the code below. When the javascript code is large, it is highly recommended to use a separate external file to keep the HTML doc and the JS code organized.
default.html file –
<html> <head> <title>My title</title> <script src="demo.js" type="text/javascript"></script> </head> <body> </body> </html>
demo.js file –
document.write("<h1>External file</h1>");Output –
So thats it for this basic hello world starter program where we simple printed text on the HTML document(not exactly hello world but you get the point right 😛 ). In the upcoming tutorials we will study more on the JS syntax and fundamentals.