2

He visto que algunas páginas agregan class o id a un script

Ejemplo:

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

Porque se realiza esta practica

Captura de pantalla del código fuente de Twitter en donde le asignan un ID a un script

introducir la descripción de la imagen aquí

2 respuestas 2

1

El utilizo de class o id como atributo de un tag script podrian servir para llamar el fragmento de codigo desde otro lado como prodria ser el caso de un template engine de javascript.

podemos hacer un ejemplo utilizando un template como Handlebars

<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>

en este caso, seria hacer un cambio de idioma en base a la seleccion del usuario, si el usuario quiere ver el contenido en italiano, se llama el fragmento (script) en idioma italiano, gracias al utilizo de la clase o del id que le has dado al tag script.

espero que te sea de ayuda exitos.

1
  • ahi actualize el codigo sacando los errores presentes e insertando las dos variantes
    – Federico
    el 22 ene. 2019 a las 15:42
0

Las etiquetas de uso para la etiqueta script son

  1. src: Que sirve para indicar la rurta a un recurso de tipo javascript que ha de invocarse por medio de esta etiqueta
  2. type: Que sirve para indicar que tipo va a soportar, en este caso el lenguaje JavaScript
  3. charset: el charset usado
  4. crossorigin: para indicar como el elemento trata las peticiones de tipo crossorigin
  5. defer: se usa para indicar que un script se carga hasta que la página ha cargado
  6. async: da la capacidad de hacer una descarga asíncrona del archivo js, en cierto punto hacer la interrupción del pintado de la página e interpretar el .js y apenas termine continua con el pintado de la página

Aquí tienes una fuente oficial de la W3C para verificar, los atributos que son necesarios en esta etiqueta script tag


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

Entonces el uso de class para que es?

La etiqueta class es un atributo de tipo global que se usa para indicar un identificador a mas de un elemento dentro del DOM, con ayuda de CSS sirve para aplicar estilos visuales a 2 o mas elementos a la vez

Entonces si yo hago esto

<!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>

Lo único que estoy generando es aplicarle un color de texto rojo al texto del h1 que se imprime por medio de la instrucción document.write

introducir la descripción de la imagen aquí

Uso de ID y CLASS

  1. Los id se utilizan para identificar elementos de manera única y con base en ello poderle aplicar por ejemplo estilos visuales a través del CSS
  2. las class solo las debes aplicar cuando identificas que un grupo de elementos: botones, etiquetas, inputs, etc van a necesariamente compartir características y por tanto les vas a aplicar por ejemplo estilos visuales en común a varios de ellos
4
  • 1
    Hay más atributos que pueden usarse con la etiqueta script que los dos que has puesto.
    – Alvaro Montoro
    el 21 ene. 2019 a las 5:04
  • si lo se @AlvaroMontoro he puesto 2 mas y dejé un enlace a la especificación de la w3c para que el OP pueda consultar mas a detalle, espero sea útil
    – user75901
    el 21 ene. 2019 a las 5:06
  • 2
    Después de src, las dos más importantes serían las que no comentas: async y defer. Aparte de los atributos globales.
    – Alvaro Montoro
    el 21 ene. 2019 a las 5:08
  • ¿Entonces usar class u id es una mala practica?, he editado mi pregunta y añadido una imagen.
    – qwerty
    el 21 ene. 2019 a las 5:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.