web-dev-qa-db-fra.com

Quand mettez-vous Javascript dans le corps, quand dans la tête et quand utilisez doc.load?

Duplicata possible:
Où placer Javascript dans un fichier HTML?
Dois-je écrire un script dans le corps ou la tête du HTML?

Je me suis toujours demandé, principalement parce que lors de la création de pages, je rencontre toujours des problèmes, en me basant sur la chose suivante:

Quand écrivez-vous votre javascript

  • Dans le <head>
  • Dans le <body>
  • avec une $(document).ready()

Je pourrais être stupide, mais j'ai eu quelques fois où mon JavaScript (/ jQuery) n'a pas été exécuté à cause du mauvais endroit ou de la commande oui ou non doc.ready(). Je me le demande vraiment.

Il en va de même pour jQuery et la commande 'var'

javascriptjquerylocationheaddocument-body
21
Sander Schaeffer

$(document).ready() s'assure simplement que tous les éléments DOM sont chargés avant le chargement de votre javascript.

Quand cela n'a pas d'importance

Sans attendre que cet événement se déclenche, vous pouvez finir par manipuler des éléments ou des styles DOM qui n'existent pas encore sur la page. l'événement DOM ready vous offre également plus de flexibilité pour exécuter des scripts sur différentes parties de la page. Par exemple:

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

s'exécutera car le div de carte a été chargé avant l'exécution du script. En fait, vous pouvez obtenir quelques améliorations de performances assez bonnes en plaçant vos scripts en bas de la page.

Quand c'est important

Cependant, si vous chargez vos scripts dans le <head> élément, la plupart de votre DOM n'a pas été chargé. Cet exemple ne fonctionnera pas:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

ne le sera pas, car le div de carte n'a pas été chargé.

Une solution sûre

Vous pouvez éviter cela en attendant simplement que le DOM entier soit chargé:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

Il y a beaucoup de articles qui expliquent cela, ainsi que la documentation jQuery elle-même.

15
Kyle

Selon les "meilleures pratiques" modernes, c'est comme ceci:

  • Mettez les scripts dans le <head> quand cela devrait se produire avant que la page ne commence à être rendue. Les exemples sont des choses comme les bibliothèques shim HTML 5 ou Modernizr.
  • Placez les scripts dans des gestionnaires "prêts" lorsque le contrôle sur la façon dont le script est importé est limité. Des choses comme les utilitaires qui peuvent être inclus sur une page pour ajouter discrètement des fonctionnalités utilisent généralement des gestionnaires "prêts" car ils ne peuvent pas être sûrs de la façon dont ils seront utilisés.
  • Mettez les scripts à la fin du <body> si vous pouvez vous en tirer dans tous les autres cas.

Parfois, vous vous retrouvez avec des dépendances dans des pages qui nécessitent des éléments que vous aimeriez autrement charger à la fin de l'élément body. C'est une situation indésirable, mais si vous ne pouvez pas l'éviter, cela peut forcer le chargement des scripts dans le <head> au lieu de la fin du <body>.

Il est bon de charger des éléments à la fin du document car les navigateurs évaluent le contenu de <script> tags lorsqu'ils les chargent. (Il existe des moyens "modernes" d'éviter cela, mais cela se fait dans un territoire plus compliqué.)

La décision de savoir quand utiliser des gestionnaires "prêts" (ou des gestionnaires "charger", d'ailleurs) est un peu différente de la décision sur l'endroit où placer le <script> tag. Si vous avez des widgets intra-page provenant d'un système de modèles côté serveur qui génèrent (indésirable, mais que pouvez-vous faire?) Des références jQuery par exemple, alors vous devez importer jQuery en haut de la page, même si un autre code peut reporter l'initialisation aux gestionnaires "prêts". C'est-à-dire que la décision de savoir quand utiliser "ready" a à voir avec le fait que votre script est prêt à compter sur l'importation dans une page au bon moment, ou s'il veut s'assurer que la bonne chose se produit, peu importe où son <script> la balise est placée.

12
Pointy

Il s'agit de savoir quand vous avez besoin que le code soit exécuté.

Si vous allez manipuler l'arborescence DOM (par exemple déplacer des éléments/afficher-masquer, etc.) et que vous mettez votre code dans la tête de votre document, vos éléments ne seront pas là lorsque votre code sera exécuté, donc votre code ne fonctionnera pas .

Dans ce cas, vous pouvez mettre votre code dans la tête de votre document et l'invoquer lorsque le document DOM est prêt, avec $(document).ready()

Il est rarement nécessaire de mettre du code à la fin de votre document, je pense à une fois au bouton google plus +1, qui vous oblige à placer un script après le dernier bouton +1, vous devez donc le coller à la fin de votre document être sûr.

7
ppp