Comment le lieu d'une balise de script dans une page d'affecter une fonction JavaScript qui est défini?

J'ai lu que vous devez définir vos fonctions JavaScript dans le <head> tag, mais comment le lieu de la <script> (que ce soit dans le <head>, <body>, ou toute autre balise) affecter une fonction JavaScript.

Plus précisément, quelle est son incidence sur la portée de la fonction et où vous pouvez appeler à partir d'?

InformationsquelleAutor Mark Rogers | 2009-01-30

25

De dire aux gens d'ajouter <SCRIPT> seulement dans la tête sons comme une chose raisonnable à faire, mais comme d'autres l'ont dit, il ya beaucoup de raisons pour lesquelles cela n'est pas recommandé ou même pratiques, principalement de la vitesse et de la façon dont les pages HTML sont générées dynamiquement.

C'est ce que le Spécification HTML 4 dit :

De l'élément SCRIPT lieux d'un script
au sein d'un document. Cet élément peut
apparaissent un certain nombre de fois dans la TÊTE
ou le CORPS d'un document HTML.

Et un exemple de code HTML. N'est-il pas l'air joli tout formaté ici 🙂
```
<!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>
```
Et quelque chose à la hâte dans HTML 5 :

Nouvel attribut async dans <SCRIPT> :

Remarque: Il existe des moyens [sic] un script peut être
exécuté:

L'attribut async est "vrai": L'
le script sera exécuté asynchrously
avec le reste de la page, de sorte que le
le script sera exécuté lorsque la page
continue l'analyse.

L'attribut async est "faux", mais
l'attribut defer est "vrai": L'
le script sera exécuté lorsque la page
est fini avec l'analyse syntaxique.
- j'ai surtout voulu faire le point supplémentaire qui n'avait pas été faite qu'il est OK pour mettre le SCRIPT dans le CORPS pour ceux qui pensaient qu'ils ne le devraient pas. en outre, le Yahoo performance des règles de l'article mentionné, c'est bien la peine de lire et couvre la question à fond
- Il suffit de voir tous les tags être écrit en majuscules rend la crédibilité de cette réponse chutent...
- Le code avec les balises en majuscule est un copier/coller direct à partir de la W3.org spec.
- Votre lien est rompu. Est-il supposé être la source de cette "citation" expliquant l'utilisation de l'attribut async? Quelle que soit la source, il est assez déroutant façon de le dire, car il donne l'impression que l'on devait définir les attributs de la valeur à "true" ou "false". Cependant, l'attribut async ne prend pas en charge les valeurs "vrai" ou "faux". Sa simple présence implique "vrai", par exemple <script async src='... où que, s'il est manquant, alors il est "faux". Voir: le html 5 de pec pour une explication plus détaillée.
- Je voulais savoir si il est ok pour mettre des balises script dans la section de corps. Cette réponse dit que je peux, alors, pourquoi ne les chapeaux de nuire à sa crédibilité?
InformationsquelleAutor Simon_Weaver
19

Les règles normales de jouer encore debout; ne pas utiliser de trucs avant de elle est définie. 🙂

Aussi, prenez note que le " tout mettre à bas l'avis n'est pas la seule règle dans le livre - dans certains cas, il peut ne pas être possible, et dans d'autres cas, il peut faire plus de sens de mettre le script d'ailleurs.

La principale raison pour mettre un script en bas d'un document est pour la performance, scripts, contrairement à d'autres requêtes HTTP, de ne pas charger en parallèle, ce qui signifie qu'ils ralentit le chargement du reste de votre page. Une autre raison pour mettre les scripts en bas est si vous n'avez pas à utiliser tout 'DOM ready" des fonctions. Depuis la balise script est en dessous de tous les éléments du DOM sera prêt pour la manipulation!

EDIT: à Lire: http://developer.yahoo.com/performance/rules.html#js_bottom
- ajouter au bas affecte seo ainsi, je me suis dit
- Excellent point, m4bwav
- vous avez dit qu'il affecte seo. t-il sur le référencement d'une façon bonne ou une mauvaise façon? merci
- J'ai demandé à Jennyfofenny à ce sujet, et elle a dit que c'est mieux si le javascript chargement se produit à la fin du fichier. De cette façon, le contexte peut être chargé et indexé première, permettant la page à indexer plus facilement et pour le contenu de la page à charger, plus naturellement.
InformationsquelleAutor James
9

L'un des aspects de placement est la performance. Voir ce bel article dans le YSlow discussion pour pourquoi il est parfois recommandé de les placer au bas du document.

Comme pour les questions de portée, l'habitude, les règles de visibilité pour le Javascript (variables définies à l'intérieur ou à l'extérieur de fonctions, local, global, fermetures, etc.) ne sont pas concernés autant que je sache.
- Ce lien semble brisé.
- Merci de noter que. J'ai mis à jour le lien du plus général (et, espérons-le, plus permanente) YSlow page.
InformationsquelleAutor Alan

Position de la balise de script qui importe.
Si vous liez une Fonction de l'Élément de document, le document doit être chargé en premier, avant de nous mettre en œuvre la fonction. supposons que getTeachers() est la fonction de getTeachers.js fichier.
Cela vous donnera une erreur:

<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>

Il donne une erreur avant de la tête est chargé en premier, et il ne trouve pas d'élément avec l'id spécifié.
Le code ci-dessous est la correction:

<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>

Bel exemple, pourquoi avez-vous besoin de script avec getTeachers.js tag? il a juste déclenche une erreur.

InformationsquelleAutor Dhwaneel

2

Il ne le fait pas. La plupart cadre de la programmation de dispersion des scripts tout au long de la page. Je n'ai que rarement vu des problèmes à cause de ça (et seulement à partir de navigateurs plus anciens).
- hey! qui downvoting ce, sans une explication. peut-être quelqu'un qui avait beaucoup de problèmes ??
InformationsquelleAutor TheSmurf
2

Si votre script fait référence à un ID sur la page et la page n'a pas été rendu (c'est à dire de script est avant de HTML, ou votre script est exécuté avec onload, plutôt que le DOM est prêt) vous pouvez également faire une erreur.

InformationsquelleAutor Diodeus - James MacFarlane
2

Si vous tirez Javascript via XMLHttpRequest, comme Diodeus dit, il ne sera probablement pas travailler. Dans mon cas, il n'y a pas d'erreur, le navigateur ignore simplement le nouveau script(s).

J'ai fini avec cela, pas très élégant, mais fonctionne pour moi jusqu'à présent:

http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/

Comment utiliser execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

Remarque: faites attention à l' < dans cette ligne: for(var i=0;i<st.length; i++)

InformationsquelleAutor PJ Brunet
1

Si vous avez un script en ligne (en dehors des fonctions) situé à l'avant de fonctions, il peut appeler, vous pouvez obtenir une erreur, car ils ne peuvent peut-être pas encore disponible. Pas en disant que c'est toujours se passer, tout ce qu'il peut, selon le type de navigateur ou une version.

InformationsquelleAutor Otávio Décio
1

Portée de Javascript règles sont similaires à perl - vous pouvez appeler n'importe quelle fonction à l'actuel ou le plus haut niveau d'étendue. La seule restriction est que la fonction doit être définie au moment de l'appel à elle. La position de la source est hors de propos - que la position dans le temps des questions.

Il faut éviter de mettre les scripts dans le <head> si possible car elle ralentit l'affichage de la page (voir le lien Alan posté).

InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.