bottom - ¿Cuándo coloca Javascript en el cuerpo, cuando está en la cabeza y cuando usa doc.load?
position() javascript (3)
Es una cuestión de cuándo necesitas que se ejecute el código.
Si va a manipular el árbol DOM (por ejemplo, mover elementos alrededor / mostrar-ocultar, etc.) y coloca su código en el encabezado de su documento, sus elementos no estarán allí cuando su código se ejecute, por lo tanto, su código no funcionará. .
En ese caso, puede poner su código en el encabezado de su documento e invocarlo cuando el documento DOM esté listo, con $(document).ready()
Poner el código al final de su documento rara vez es necesario, una ocasión que se me ocurre es el botón +1 de google, que requiere que coloque una secuencia de comandos después del último botón +1, por lo que solo debe pegarlo al final del documento. para estar seguro.
Posible duplicado:
¿Dónde colocar Javascript en un archivo HTML?
¿Debo escribir un script en el cuerpo o la cabeza del html?
Siempre me he preguntado, principalmente porque al crear páginas siempre me encuentro con problemas, en base a lo siguiente:
Cuando escribes tu javascript
- En el
<head> - En el
<body> - con un
$(document).ready()
Podría ser estúpido, pero he tenido algunas veces cuando mi JavaScript (/ jQuery) no se ejecutó debido al lugar incorrecto o el comando sí o no doc.ready() . Así que realmente me lo estoy preguntando.
Lo mismo ocurre con jQuery y el comando ''var''
Por "mejores prácticas" modernas, es así:
- Ponga guiones en el
<head>cuando deberían ocurrir antes de que la página comience a representarse. Los ejemplos son cosas como HTML 5 bibliotecas shim o Modernizr. - Coloque los scripts en controladores "listos" cuando haya un control limitado sobre cómo se importa el script. Cosas como las utilidades que se pueden incluir en una página para agregar características de manera discreta generalmente usan controladores "listos" porque no pueden estar seguros de cómo se usarán.
- Coloque scripts al final del
<body>si puede salirse con la suya en todos los demás casos.
A veces terminas con dependencias en páginas que requieren cosas que de otra manera te gustaría cargar al final del elemento del cuerpo. Esa es una situación indeseable, pero si no puede evitarla, puede forzar que los scripts se carguen en el <head> lugar de al final del <body> .
Es bueno cargar cosas al final del documento porque los navegadores evalúan el contenido de las etiquetas <script> cuando las cargan. (Hay algunas formas "modernas" para evitar esto, pero eso está llegando a un territorio más complicado).
La decisión de cuándo usar los manejadores "listos" (o los manejadores "cargar", en realidad) es un poco diferente a la decisión sobre dónde colocar la etiqueta <script> . Si tiene widgets dentro de la página de un sistema de plantillas del lado del servidor que generan (no es deseable, pero ¿qué puede hacer?) Referencias a jQuery, por ejemplo, debe importar jQuery en la parte superior de la página, aunque haya otro código puede diferir la inicialización a los manipuladores "listos". Es decir, la decisión sobre cuándo usar "listo" tiene que ver con si su script está dispuesto a confiar en ser importado a una página en el punto correcto, o si quiere asegurarse de que suceda lo correcto sin importar dónde Se coloca su etiqueta <script> .
$(document).ready() simplemente garantiza que todos los elementos DOM se carguen antes de que se cargue su javascript.
Cuando no importa
Sin esperar a que se active este evento, puede terminar manipulando elementos o estilos DOM que aún no existan en la página. El evento listo para DOM también le permite más flexibilidad para ejecutar scripts en diferentes partes de la página. Por ejemplo:
<div id="map"></div>
<script type="text/javascript">document.getElementById(''map'').style.opacity = 0;</script>
se ejecutará porque el div de mapa se ha cargado antes de que se ejecute el script. De hecho, puede obtener algunas mejoras de rendimiento bastante buenas colocando sus scripts en la parte inferior de la página.
Cuando importa
Sin embargo, si está cargando sus scripts en el elemento <head> , la mayoría de su DOM no se ha cargado. Este ejemplo no funcionará:
<script type="text/javascript">document.getElementById(''map'').style.opacity = 0;</script>
<div id="map"></div>
No lo hará, ya que el mapa div no se ha cargado.
Una solución segura
Puedes evitar esto simplemente esperando hasta que todo el DOM se haya cargado:
<script type="text/javascript">$(document).ready(function () {
document.getElementById(''map'').style.opacity = 0;
});
</script>
<div id="map"></div>
Hay muchos articles que explican esto, así como la propia documentación de jQuery .