Integrate JavaScript into HTML

As you know, Browser provides the environment for JavaScript to run ( Apart from Node.js ), we will run our written code in a browser.
Now, to learn better, you will need to code also. So open your code editor and create a file first-script.html. Now have a look at below code.


<html>
    <head>
        <script>
            console.log("Never Stop Learning !!!");
        </script>
    </head>
    <body>

    </body>
</html>
                    

Now, open first-script.html in browser and open developer console.
In developer console, you will see "Never Stop Learning !!!" printed. Now we start from the top.

JavaScript in HTML

There are two ways to integrate JavaScript into HTML.

Inline JavaScript

The First Script is an example of inline JavaScript.
In the old code, there was an type="text/javascript>" attribute for script tag. But this attribute is rarely used now.
script tag can be written anywhere in the html page. But mostly it is written in <head> tag or at the end of <body>.
The HTML page is rendered from top to bottom. So the script tag will be executed as per its position. If it is written at the top of the page ( i.e any where in the <head> tag), it will be executed before the whole <body> renders. If it is written at the end of the page, it will be executed after the page is rendered. The place of the script tag matters the most when you are dealing with the elements of the page.
Different programmers have different opinions about where to add script tag. You can add it as per your need.

External JavaScript

Most of the times during development, you will be using external JavaScript in your HTML page.
There are many reasons for using external JavaScript on your page. One of them is to separate the HTML code and JavaScript code. When the project is big, then there will be many tasks for JavaSctip like validation, add and remove elements, get and send data. If you put all the code inside HTML page using inline JavaScript, the code will become very less manageable. It will be very hard to debug and there will be many problems.
So what you can do is put your JavaScript into a separate file and add that file inside HTML page. The code snippet is provided below.

...

<html>
    <head>
        <script src="./first-script.js"></script>
    </head>
    <body>

    </body>
</html>
                        

                            console.log("Never Stop Learning !!!");
                        

As you can see in above example, to add extenal JavaScript, script is added with src attirbute. The value of src attribute will be the relative path to the file.

You can also provide full url to src tag.
You can add multiple script tag and you can also add internal and external script tag.

If you provide inline JavaScript inside the script tag with src attribute, then an inline script will always be ignored.


<html>
    <head>
        // a script tag with url
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js" ></script>

        //Multiple script tag
        <script src="./first-script.js"></script>
        <script src="./second-script.js"></script>
        <script src="./third-script.js"></script>

        //Inline script
        <script>
            console.log("This is inline script with extenal scripts");
        </script>

        //inline and external script in single tag, inline script is alwasy ignored.
        <script src="./fourth-script.js">
            console.log("This is inline script with extenal scripts");
        </script>
    </head>
    <body>
                            
    </body>
</html>
                    

From now on, if only JavaScript is written in the snippet, then you should take it as external JavaScript.

Console.log

As you already have seen that console.log is used to log. This feature is very much useful in debugging and see the value of any variables during runtime. In production, most of the programmers remove it unless it is very much needed.


console.log("First Second Third");                           
                    

The above statement will print "First Second Third" in the developer console.


console.log("%s First %s","Second","Third");

console.log("First","Second","Third");
                    

Above 1st statement will print "Second First Third" in the developer console. When you need to control the output of the console.log, you can use this.
The 2nd statement will print "First Second Third".


var obj = {"a":1}
console.log(obj);                           
                    

Above statement will print the object. console.log(obj1,obj2,obj3) will print all the objects provided.
Remember, in the latest version of chrome and firefox, the value of object will be the value when you expand it in the developer console. Not when the object is printed. It will be explained in-depth in JavaScript Objects.

Conclusion

So, in this section, you learned about the inline JavaScript and external JavaScript.
You also learned about console.log.
In next section, you will learn about code structure in JavaScript.