Well, we have discussed a lot about the language. But a basic question that you might be asking yourself is - Where am I supposed to write all the JavaScript code inside the HTML document? And if you have already asked yourself that question, well then, it’s great progress already.

All the JavaScript code that you write is inserted between <script> tags like this:

<script>
    // JavaScript code
</script>

Now, how exactly do you write the JavaScript code inside the script tags? There are two ways to do so - one way is to use inline scripting, and the other way is to use external scripting.

The <script> tags are included either inside <head> tags or the <body> tags. Remember that even if you break this rule and insert the <script> tags somewhere outside, when you see the output, the browser is smart enough to put it back to its original place (usually inside the <body> tags).

Let’s discuss inline scripting first. In this approach, as the name suggests, you write everything inline, which means that you include all the code at the current place. Thus, in inline scripting, you write all your JavaScript code inside the <script> tags. We can skip this since we will be using the other way of scripting.

The next approach is to use external scripting. In this approach, you write all your JavaScript code in an external file and then reference that file in your HTML document.

So, you can change the code written inside your index.html file to the one given below:

index.html

<!DOCTYPE html>
<html>
 <head> </head>
 <body>
   <h3>Learning JavaScript</h3>
   <script src="myScript.js">    
   </script>
 </body>
</html>

Notice the changes made in the <script> tags. Here, 'myScript.js' is the file where all the JavaScript code is written that you want to include in your web page.

Like a Microsoft Word file is saved with the extension of .doc, which tells the computer that the current file is a Word document, a JavaScript file is saved by the .js extension. Create a new file with the name 'myScript.js' (you can give any other name too) inside your folder where the index.html file is and write the code given below in this file.

myScript.js

console.log("Hello World!");

console.log() is a statement that is used to print output on the screen. In the example given above, the console.log() statement will print "Hello World" to the screen.

You can also break your code into multiple JavaScript files and give references to all these files in the <script> tags.

After you have made all the changes in the code inside both the files, save them. Now, you must be wondering where do I see the output?

Well, you will see the output in the browser, and we prefer Google Chrome as our browser, and we would prefer that you use Google Chrome for this module. However, you can use any browser you feel convenient with.

Go to the index.html file in your File Explorer (Windows) or Finder (macOS) and open it by right clicking on the file, and selecting 'Open With' and then choosing 'Google Chrome' as the default application to open all files with .html extension.

Your browser, after opening the index.html file, looks like this:

Now, you have seen where you can write your JavaScript code and how you can write it. You also know that you will see the output on the browser but where exactly will you see it? It is now time to discuss where you can view the output of your JavaScript code inside the browser.

On the web page which is opened (index.html in our case), right-click on the web page and click on Inspect.

This will open up a small sub-window. This sub-window is called Developer Tools or DevTools in short. This helps web developers to access deep internals of their web applications on the browser.

You can read more about Chrome Developer Tools from this link and about Firefox Developer Tools from this link. We will be using Chrome Developer Tools in this module because we are using Google Chrome browser.

You can see this window on the right side or at the bottom, as per your settings but you can always position it as per your convenience. Click on the three dots on the toolbar at the top of the window and then click on an icon in ‘Dock Side’ option to choose the location where you want to position this window. With this option, you can choose to position the DevTools at either right, left, bottom or in a new window by clicking this button.

This should open something similar to the screen given below. There would be many tabs available in the DevTools window. Choose the Console tab for viewing the output.

Voila! You get to see 'Hello World'.

$$/$$

Let’s start coding in JavaScript from the next segment onward.