Wednesday, February 8, 2023
HomeSoftware DevelopmentThe place ought to we use script tag within the HTML ?

The place ought to we use script tag within the HTML ?


On this article, we’re going to study that what are the explanations that we should always not add the <script> tag on the high of the physique tag contained in the HTML code as an alternative of that we should always add the script file on the finish of the HTML code.

Script Tag: It’s used so as to add JavaScript contained in the HTML code and to make the habits of the web site dynamic.

There are two approaches for including the script file within the HTML which are:

1. TOP Method: Within the high method we are going to add the script file both within the head tag or on the high of the physique tag. 

Syntax:

  • First Method within the head tag
<html>
<head>
    <script src="https://www.geeksforgeeks.org/where-should-we-use-script-tag-in-the-html/path/filename.js"></script>
</head>
<physique>
    ...
</physique>
</html>
  • Second Method on the high of the physique tag
<html>
<head>
</head>
<physique>
    <script>
            // Your Javascript code right here
    </script>
    ...
</physique>
</html>

Instance: So, we will likely be understanding with the assistance of an implementation utilizing the second method as defined under:

HTML

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Suitable"

          content material="IE=edge" />

    <meta title="viewport" 

          content material="width=device-width, initial-scale=1.0" />

    <title>Script Tag</title>

    <fashion>

        * {

            box-sizing: border-box;

            margin: 0;

        }

  

        #btn {

            margin: 50px;

            width: 100px;

            peak: 40px;

            font-size: medium;

            shade: crimson;

            border-radius: 10px;

            cursor: pointer;

            background-color: antiquewhite;

        }

  

        #btn:hover {

            background-color: white;

            shade: black;

        }

    </fashion>

</head>

  

<physique>

    <script>

        const button = doc.getElementById("btn");

        button.addEventListener("click on", operate (e) {

            alert("The button is Pressed");

        });

    </script>

    <div>

        <button id="btn">Click on Right here</button>

    </div>

</physique>

  

</html>

Output:

Output

Output

Clarification: We’ve got used the javascript code over right here on the high of the physique tag and added an occasion Listener ‘Click on’ and that ought to show the textual content as an alert message on clicking the button but it surely doesn’t present due to the loading of script file earlier than loading the HTML code.

Drawback of the TOP Method:

  • As we will see that we’re getting no alert if we’re clicking the button as a result of after the physique tag the script tag has loaded and contained in the script tag there’s an occasion listener that has been utilized on the button that has not been created until now as we will see within the under DOM tree for extra rationalization.

DOM Tree For above HTML Code

In order that’s why we should always not add the script tag on the high of the physique tag as you’ll be able to see above. It’s a main drawback of including the script file on the high of the HTML. 

2. END Method: Ultimately method we will likely be utilizing the script tag on the backside of the physique tag:

Syntax:

<html>

<head>
    ...
</head>

<physique>
    ...
    <script>
            // Your javascript code right here
    </script>
</physique>

</html>

Instance: Let’s perceive the Finish Method with the assistance of an implementation as defined under:

HTML

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Suitable" 

          content material="IE=edge" />

    <meta title="viewport" 

          content material="width=device-width, initial-scale=1.0" />

    <title>Script Tag</title>

    <fashion>

        * {

            box-sizing: border-box;

            margin: 0;

        }

  

        #btn {

            margin: 50px;

            width: 200px;

            peak: 60px;

            font-size: bigger;

            shade: crimson;

            border-radius: 10px;

            cursor: pointer;

            background-color: antiquewhite;

        }

  

        #btn:hover {

            background-color: white;

            shade: black;

        }

    </fashion>

</head>

  

<physique>

    <div>

        <button id="btn">Click on Right here</button>

    </div>

    <script>

        const button = doc.getElementById("btn");

        button.addEventListener("click on", operate (e) {

            alert("The button is Pressed");

        });

    </script>

</physique>

  

</html>

Output:

Output Image

Output

Clarification: On this, we’ve added the identical javascript as within the above code that was added an occasion Listener on the button, and right here we will likely be seeing that the ‘onClick’ occasion is engaged on the button due to the loading of HTML code first after which the addition of javascript file second attributable to which all of the HTML factor are discovered by the question Selectors of DOM API.

Benefits of the END Method:

  • Through the use of the Finish Method you’ll not get any error within the JS code on the console of the browser and all of the factor tags are discovered by the DOM API that’s current within the HTML code.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments