He leído que debe definir sus funciones de JavaScript en la etiqueta <head>, pero cómo la ubicación de <script> (ya sea en <head>, <body>, o cualquier otra etiqueta) afecta a una función de JavaScript.¿Cómo afecta la ubicación de una etiqueta de script en una página a una función de JavaScript definida en ella?
Específicamente, ¿cómo afecta el alcance de la función y desde dónde puede llamarla?
Decir a la gente para agregar <SCRIPT> sólo en la cabeza suena como una cosa razonable a hacer, pero, como otros han dicho que hay muchas razones por las cuales esto no es recomendable o incluso Práctico: principalmente velocidad y la forma en que las páginas HTML se generan dinámicamente.
Esto es lo que el HTML 4 spec says:
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
Y algo de HTML muestra. No se ven bastante todo este formato :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
Y algo que esperar en el HTML 5:
nuevo atributo async en <SCRIPT>:
Note: There are ways [sic] a script can be executed:
The async attribute is "true": The script will be executed asynchrously with the rest of the page, so the script will be executed while the page continues the parsing.
The async attribute is "false", but the defer attribute is "true": The script will be executed when the page is finished with the parsing.
Si tiene un script en línea (funciones externas) ubicado antes de las funciones a las que puede llamar, puede recibir un error porque es posible que aún no esté disponible. No digo que siempre va a suceder, solo que puede depender del tipo de navegador o la versión.
No es así. La mayoría del marco de programación dispersa los scripts por toda la página. Raramente he visto problemas debido a eso (y solo de navegadores más antiguos).
hey! ¿Quién está bajando esto sin una explicación? tal vez alguien que tuvo muchos problemas ?? –
Uno de los aspectos de la ubicación es el rendimiento. Consulte this fine article within the YSlow discussion para saber por qué a veces se recomienda que los coloque en la parte inferior del documento.
En cuanto a los problemas de alcance, las reglas de visibilidad habituales para Javascript (vars definidos dentro o fuera de funciones, locales, globales, cierres, etc.) no se ven afectados por lo que sé.
Este enlace parece haberse roto. –
@CaptainBlammo - Gracias por notar eso. Actualicé el enlace a una página YSlow más general (y con suerte más permanente). – Alan
Si su secuencia de comandos se refiere a una identificación en la página y la página no se ha procesado (es decir, la secuencia de comandos está antes de HTML o la secuencia de comandos se ejecuta con onload), también puede obtener un error.
Las reglas de búsqueda de JavaScript son similares a Perl: puede llamar a cualquier función en el nivel actual o de mayor alcance. La única restricción es que la función debe definirse en el momento en que la llame. La posición en la fuente es irrelevante, solo importa la posición en el tiempo.
Debe evitar poner scripts en el <head> si es posible, ya que ralentiza la visualización de la página (consulte el enlace publicado por Alan).
Las reglas normales de juego siguen en pie; no use cosas antes de que esté definido. :)
Además, tenga en cuenta que el 'poner todo en la parte inferior' consejo no es la única regla en el libro - en algunos casos puede que no sea factible y en otros casos, puede tener más sentido pon el script en otro lado El motivo principal para colocar un script en la parte inferior de un documento es el rendimiento; los scripts, a diferencia de otras solicitudes HTTP, no se cargan en paralelo, lo que significa que ralentizarán la carga del resto de la página. Otra razón para colocar scripts en la parte inferior es para no tener que usar ninguna función 'DOM ready'. ¡Dado que la etiqueta del script está debajo de todos los elementos, el DOM estará listo para la manipulación!
EDIT: Lea esto: http://developer.yahoo.com/performance/rules.html#js_bottom
Si tira Javascripts a través de XMLHttpRequest, como dijo Diodeus, probablemente no funcionará. En mi caso, no hubo ningún error, el navegador simplemente ignora los nuevos guiones.
Terminé usando esto, no muy elegante, pero funciona para mí hasta ahora:
http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/
Cómo utilizar execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Nota: Tenga cuidado con los < en esta línea: for(var i=0;i<st.length; i++)
La posición de la etiqueta de secuencia de comandos sí importa. Si vincula una función con elemento de documento, entonces el elemento de documento debe cargarse primero antes de implementar la función. supongamos que getTeachers() es función en el archivo getTeachers.js. Esto le dará un error:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<span id="results" /></span>
</body>
</html>
Da error antes de que la cabeza se carga por primera vez y que no puede encontrar el elemento con id especificado. El siguiente código es la corrección:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
<span id="results" /></span>
</body>
</html>
Buen ejemplo, ¿por qué necesitas el script con la etiqueta getTeachers.js? solo arroja un error. – peresisUser
@ m4bwav - principalmente quería hacer un comentario adicional que no se haya hecho, que es correcto colocar SCRIPT en BODY para cualquiera que piense que no debería hacerlo. además, vale la pena leer el artículo de Yahoo sobre "reglas de rendimiento" y cubre el problema minuciosamente. –
El solo hecho de ver todas las etiquetas escritas en mayúsculas hace que la credibilidad de esta respuesta disminuya enormemente ... –
El código con las etiquetas en mayúscula es directo copiar/pegar de la [especificación W3.org] (http://www.w3.org/TR/REC-html40/interact/scripts.html). – Homer