Home / Questions / 231263
Accepted
qwerty
Asked: 2020-01-21 20:49:16 +0800 CST 2020-01-21 20:49:16 +0800 CST

For what purposes is class or id added to script tags?

  • 772

I have seen some pages add class or id to a script

Example:

<script class="script">
    alert(1)
</script>

Why is this practice done?

Screenshot of the Twitter source code where they assign an ID to a script

enter image description here

javascript

2 Answers

  1. Best Answer

    The use of classor idas an attribute of a tag scriptcould be used to call the code fragment from another side, as could be the case with a javascript template engine.

    we can make an example using a template likeHandlebars

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>

<script class="idioma italiano" type="text/x-handlebars-template">
    <p>Ciao Fratello, come stai ? </p>
</script>
<script class="idioma castellano" type="text/x-handlebars-template">
    <p>Hola Hermano, como estas ? </p>
</script>

<script>
  idioma = getUrlParameter("idioma") || "italiano";
  var idiomaTemplate = Handlebars.compile($("script.idioma." + idioma ).html());
  $("body").append(idiomaTemplate())
  
  
function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};
  
</script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>

<script class="idioma italiano" type="text/x-handlebars-template">
    <p>Ciao Fratello, come stai ? </p>
</script>
<script class="idioma castellano" type="text/x-handlebars-template">
    <p>Hola Hermano, como estas ? </p>
</script>

<script>
  idioma = getUrlParameter("idioma") || "castellano";
  var idiomaTemplate = Handlebars.compile($("script.idioma." + idioma ).html());
  $("body").append(idiomaTemplate())
  
  
function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};
  
</script>

    In this case, it would be to change the language based on the user's selection, if the user wants to see the content in Italian, the fragment ( script) is called in the Italian language, thanks to the use of the class or the id that you have given to the tag script.

    I hope it helps you success.

    • 1

  2. The use tags for the tag scriptare

    1. src: Used to indicate the path to a javascript type resource that must be invoked through this tag
    2. type: Which is used to indicate what type it will support, in this case the JavaScript language
    3. charset: the charset used
    4. crossorigin: to indicate how the element treats type requestscrossorigin
    5. defer: used to indicate that a script is loaded until the page has loaded
    6. async: gives the ability to do an asynchronous download of the js file, at a certain point make the interruption of the painting of the page and interpret the .js and as soon as it finishes it continues with the painting of the page

    Here is an official W3C source to verify the attributes that are required in this script tag

    <script type="text/javascript"></script>

    So what classis the use for?

    The tag classis a global type attribute that is used to indicate an identifier to more than one element within the DOM, with the help of CSS it is used to apply visual styles to 2 or more elements at the same time

    So if I do this

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    h1{
      color: red;
    }
  </style>
</head>
<body>
<script type="text/javascript" class="colores">
    document.write("<h1> Hola Mundo </h1>")
</script>
</body>
</html>

    The only thing that I am generating is to apply a red text color to the text h1that is printed by means of the instructiondocument.write

    enter image description here

    Use of ID and CLASS

    1. The id's are used to identify elements in a unique way and based on this, to be able to apply, for example, visual styles through CSS.
    2. You should only apply the classes when you identify that a group of elements: buttons, labels, inputs, etc. will necessarily share characteristics and therefore you are going to apply, for example, visual styles in common to several of them
    • 0