Recibí una gran pregunta del lector Josh Kreis:
He notado que en un <script>
etiqueta, hay todo tipo de variaciones que parecen funcionar en todos los navegadores. ¿Qué es necesario y qué no?
<script>
//some javascript here
</script>
<script type="text/javascript">
//some javascript here
</script>
<script type="text/javascript" language="javascript">
//some javascript here
</script>
<script language="javascript">
//some javascript here
</script>
<script type="text/javascript">
//<![CDATA[
// some javascript here
//]]>
</script>
Esta es la primicia hasta donde yo lo entiendo. Si a alguien le importa dar más detalles o corregirme si me equivoco, por favor hágalo en los comentarios.
/* WAY OLD - DO NOT USE */
<script language="javascript">
//some javascript here
</script>
Realmente nunca hubo un language
atributo (o si lo hubo, hace tiempo que está en desuso). Hay un lang
atributo, pero eso es para un propósito completamente diferente: identificar el lenguaje humano, no el lenguaje informático. Esta sintaxis con el language
El atributo era para decirle a los navegadores (antiguos) que identificaran y ejecutaran el script como JavaScript. Solía funcionar, pero nunca fue estándar.
Ahora tenemos una forma estándar de hacerlo:
<script type="text/javascript">
//some javascript here
</script>
El type
El atributo es la forma estándar y correcta de identificar y decirle al navegador qué tipo de secuencia de comandos contiene la etiqueta. A veces, verá código que utiliza tanto el atributo de idioma como el de tipo. Que yo sepa eso nunca es necesario.
Explicación realmente específica de la especificación, el lenguaje es una característica “obsoleta pero conforme”:
Los autores no deben especificar un atributo de idioma en un elemento de script. Si el atributo está presente, su valor debe ser una coincidencia ASCII que no distinga entre mayúsculas y minúsculas para la cadena “JavaScript” y el atributo de tipo debe omitirse o su valor debe ser una coincidencia ASCII que no distinga entre mayúsculas y minúsculas para la cadena “text/javascript”. En su lugar, el atributo debe omitirse por completo (con el valor “JavaScript”, no tiene ningún efecto) o reemplazarse con el uso del atributo de tipo.
Más recientemente, probablemente hayas visto mucho de esto:
<script>
//some javascript here
</script>
Sin atributos en absoluto. Esta es la forma HTML5 de manejar etiquetas de secuencias de comandos que contienen JavaScript. Simplemente se supone que el tipo es text/javascript
. Si no es así (nunca he visto un tipo diferente de script), deberá cambiarlo con el type
atributo. Recomiendo esto si está usando HTML5.
Uno más raro:
<script type="text/javascript">
//<![CDATA[
$("<div />").appendTo("body"); // Some JS with HTML in it.
//]]>
</script>
SI todavía estás usando XHTML y SI su JavaScript tiene HTML (o incluso solo el carácter <, como podría ser necesario en una lógica superior), necesitará estos comentarios CDATA alrededor del script SI le importa que el script pase la validación (obtendrá un error como: el tipo de documento no permite el elemento “div” aquí). Y SI, está colocando la secuencia de comandos literalmente entre las etiquetas de secuencia de comandos de apertura y cierre, sin vincular a una secuencia de comandos src
.
Eso es un montón de SI.
comida para llevar
- Si está utilizando HTML5, simplemente use
<script>
. - Si está usando algo más antiguo, use
<script type="text/javascript">
. - Si está escribiendo scripts para que las personas los usen en sus propios sitios (por ejemplo, código copiable y pegable, complementos de WordPress, etc., use
<script type="text/javascript">
y CDATA.