Place de l'appel à routine JS dans un document HTML

Bonjour,

La plupart des ouvrages sur JS recommandent de placer l'appel à une routine dans la section <head> d'un document HTML.
Or cela ne fonctionne pas à tous les coups .

Quand doit-on placer l'appel à une routine JS , au contaire, à la fin du document HTML ?

En général, tout le JS peut être chargé dans le HEAD.

Sans le contexte - code CSS, HTML et JS - il est difficile de répondre autre chose que des généralités.

Citation:

Envoyé par danielhagnoul

En général, tout le JS peut être chargé dans le HEAD.

Sans le contexte - code CSS, HTML et JS - il est difficile de répondre autre chose que des généralités.

Et bien, par exemple avec cette routine JS que je vous avais soumis, il y a quelques jours, pour debuggage

http://www.developpez.net/forums/d15...ffichage-page/

Si on appelle le fichier externe JS dans la section <head> ça ne fonctionne pas; alors que si l'appel est mis à la fin du <body> ça fonctionne.

Je voudrai bien comprendre pourquoi .
Est-ce à cause des GetElementById ?

pour appeler un element du DOM avec getElementById, encore faut-il qu'il existe au moment de l'appel ...

Ce qui n'est pas le cas de ton script si tu le place dans le head

Il faudrait dans ce cas mettre ton code dans une fonction appelée sur le onload de la page, une fois que les éléments existent

Bonjour,

Est-ce qu'en général, il est toujours possible (et préférable) de mettre l'appel de la routine JS dans la section <head> du document HTML car si on doit la mettre à un autre endroit pour qu'elle fonctionne, il vaut mieux la ré-ecrire différemment ?

Si vous placez votre code juste avant le tag </body> il fonctionnera.

Mais dans le HEAD il faut attendre la fin de la construction du DOM ou la fin du chargement de la page (pour manipuler la structure de la page, une image ou un canvas).

Exemple avec vos codes.

Fichier routine.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
'use strict';
 
document.addEventListener( 'DOMContentLoaded', function( ev ){
 
  // code
 
}, false );
 
window.addEventListener( 'load', function( ev ){
 
  // Auditeur d'évènement pour le bouton ajouter
  var vBtnAj=document.getElementById("btnAjoute");
 
  vBtnAj.addEventListener("click",recupererDesir);
 
  //Auditeur d'évènement pour le bouton afficher
  var vBtnAff=document.getElementById("btnAffiche");
 
  vBtnAff.addEventListener("click",afficherListe);
 
  // creation tableau
  var maListe=[];
 
  //  variable maZoneListe
  var maZoneListe=document.getElementById("uListe");
 
  function recupererDesir() {
    var vDesir=document.getElementById("jeVeux");
 
    insererDansListe(vDesir);
    viderChamp(vDesir);
  }
 
  function insererDansListe(nouvDesir) {
    maListe.push(nouvDesir.value);
 
    var nouvEntree=document.createElement("li");
 
    nouvEntree.innerHTML=maListe[maListe.length-1];
    maZoneListe.appendChild(nouvEntree);
  }
 
  // affichage de la liste
  function afficherListe() {
    var vPL=document.getElementById("pageListe");
    var vZF= document.getElementById("zoneFormulaire");
 
    vZF.style.display="none";
    vPL.className="classAff";
    maZoneListe.innerHTML="";
    maListe.sort();
 
    var uListe = document.getElementById( "uListe"); // uListe !!!
 
    for ( var i = 0; i < maListe.length; i++ ){ // length !!! pas lenght
      uListe.innerHTML += '<li>' + maListe[i] + '</li>';
    }
  }
 
  // effacement de ce qui a été saisi
  function viderChamp(idChamp) {
    idChamp.value="";
  }
 
}, false );

Fichier routine.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    body {
      font-family :Arial,sans-serif;
    }
    #pageListe.classAff {
      background-color:#FAF2AD;
      padding:20px;
      font-family: cursive;
    }
    #pageListe.classAff ul {
      margin: 10px 0px ;
      padding: 0px ;
      border-left:4px double red ;
    }
    #pageListe.classAff li {
      list-style-type:none;
      margin: 0px -20px;
      padding-left: 26px;
      border-bottom: 1px solid blue;
      line-height: 36px;
      font-size: 24px;
      font-family:cursive;
    }
  </style>
  <script src="routine.js"></script>
</head>
<body>
 
  <div id="pageListe">
    <h1> Faire une liste</h1>
 
    <div id="zoneFormulaire"> <!-- au lieu de zoneformulaire !!! -->
 
      <label> Voici mon choix : <input type="text" id="jeVeux" /> </label>
 
      <!-- bouton d'ajout -->
      <button type="button" id ="btnAjoute"> AJOUTER</button>
 
      <br /> <br />
 
      <button type="button" id ="btnAffiche"> AFFICHAGE</button>
    </div>
 
    <ul id="uListe"></ul>
  </div>
 
</body>
</html>

D'accord.