van - en qué zona es recomendable colocar el código javascript en una página html
¿Cómo afecta la ubicación de una etiqueta de script en una página a una función de JavaScript definida en ella? (9)
Decirle a la gente que agregue <SCRIPT> solo en la cabeza suena como algo razonable, pero como otros han dicho, hay muchas razones por las que esto no es recomendable o práctico, principalmente la velocidad y la forma en que las páginas HTML se generan dinámicamente.
Esto es lo que dice la especificación de HTML 4 :
El elemento SCRIPT coloca una secuencia de comandos dentro de un documento. Este elemento puede aparecer varias veces en HEAD o BODY de un documento HTML.
Y algunos ejemplos de HTML. ¿No se ve muy bien todo el formato aquí? :)
<!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 HTML 5 :
Nuevo atributo asíncrono en <SCRIPT> :
Nota: Hay formas en que se puede ejecutar un script:
El atributo async es "verdadero": el script se ejecutará de manera asincrónica con el resto de la página, por lo que el script se ejecutará mientras la página continúa el análisis.
El atributo async es "falso", pero el atributo defer es "verdadero": el script se ejecutará cuando la página finalice con el análisis sintáctico.
Leí que debe definir sus funciones de JavaScript en la etiqueta <head> , pero ¿cómo la ubicación de la <script> (ya sea en <head> , <body> , o en cualquier otra etiqueta) afecta a una función de JavaScript.
Específicamente, ¿cómo afecta el alcance de la función y desde dónde puede llamarla?
La posición de la etiqueta del script 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 te 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 se cargue la cabecera primero y no puede encontrar el elemento con la identificación especificada. El siguiente código es 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>
Las reglas de búsqueda de JavaScript son similares a Perl: puede llamar a cualquier función en el nivel de alcance actual o superior. 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.
Debería evitar poner scripts en <head> si es posible, ya que ralentiza la visualización de la página (vea 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 consejo de "poner todo en el fondo" no es la única regla en el libro; en algunos casos puede no ser factible y en otros casos puede tener más sentido colocar el guión en otro lugar.
La razón principal para poner una secuencia de comandos en la parte inferior de un documento es el rendimiento, las secuencias de comandos, 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!
EDITAR: Lee esto: http://developer.yahoo.com/performance/rules.html#js_bottom
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).
Si extrae 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 usar execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Nota: Tenga cuidado con < en esta línea: for(var i=0;i<st.length; i++)
Si su secuencia de comandos se refiere a una ID en la página y la página no se ha procesado (es decir, la secuencia de comandos es anterior a HTML, o la secuencia de comandos se ejecuta con carga, el DOM está listo) también puede obtener un error.
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.
Uno de los aspectos de la colocación es el rendimiento. Vea este artículo fino en el debate de YSlow sobre por qué a veces se recomienda que los ponga al pie del documento.
En cuanto a los problemas de alcance, las reglas de visibilidad habituales para Javascript (vars definidos dentro o fuera de las funciones, locales, globales, cierres, etc.) no se ven afectados hasta donde yo sé.