[Autre] Comprendre la balise script

Bovino · 03/02/2012, 18h18

S'il est bien une balise qui est souvent mal utilisée en HTML, c'est la balise <script>.
Nous allons essayer dans ce billet de faire le point sur cette balise en comprenant pourquoi.

La syntaxe

La syntaxe de base est relativement simple et ne pose pas de problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script></script>

Il est toutefois important de noter que même si elle ne possède pas forcément de contenu, elle reste susceptible d'en avoir (le script en lui-même) ce qui fait que contrairement à une balise <link /> mais à l'instar d'une balise <style>, elle n'est pas autofermante et doit posséder une balise fermante.

Les attributs

L'attribut src ne pose habituellement pas de gros soucis.
Cet attribut correspond à l'URL à laquelle se trouve le fichier correspondant. Attention toutefois, dans le cas d'une URL relative, de bien comprendre où se trouve le script en fonction de l'URL effective (celle affichée par le navigateur) qui appellera le script. Attention donc par exemple aux include en PHP.

En revanche, deux attributs sont assez souvent confondus, il s'agit des attributs language et type.
Il faut déjà savoir que le premier est deprecated depuis HTML 4 alors qu'au contraire, le second est required. Cela signifie qu'il faut bannir language.
La syntaxe correcte devient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript"></script>

Mais alors, si l'attribut language est à bannir, pourquoi le retrouve-t-on si souvent ?
Parce que, malheureusement, plusieurs facteurs empêchent de l'éradiquer.
Déjà, de nombreux scripts usuels sont bien référencés et recopiés tels quels bien que très anciens. Du coup, l'attribut se propage facilement.
D'autre part, peut-être surtout, parce que beaucoup ignorent la signification de cet attribut.
A la base, il servait à indiquer le langage et la version du langage de script utilisé. Cependant, aucune norme n'a été trouvée pour savoir ce qu'il pouvait bien contenir, ce qui a donc amené à ce qu'il soit déprécié. De toute façon, le seul langage de script universellement reconnu par les navigateurs est JavaScript (quelle que soit sa déclinaison : ECMAScript, JScript, ...) donc l'information n'a que peu d'intérêt. De même, préciser une version à utiliser n'a pas vraiment de sens : JavaScript, pour des raisons de rétro-compatibilté ne perd pas de fonctionnalités, il ne fait qu'en accepter de nouvelles !

Note : en HTML5, l'attribut type n'est plus requis et dans cette version, la syntaxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script[ src="..."]></script>

est désormais suffisante.

Le contenu

Pendant longtemps (et on retrouve encore couramment la syntaxe), les scripts étaient entourés soit de commentaires HTML soit d'entités CDATA :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type="text/javascript"><!-- 
  // Code JavaScript 
--></script> 
<script type="text/javascript"><![CDATA[ 
  // Code JavaScript 
]]></script>

Là encore, la pratique remonte à un temps que les moins de 20 ans (voire plus !) n'ont pas connue !
Ces syntaxes, héritées du XML, servaient à l'origine à éviter que les navigateurs ne possédant pas d'interpréteur JavaScript (on ne parle pas de ceux qui ont JavaScript désactivé, bien de ceux pour lesquels JavaScript n'existe tout simplement pas !) n'essayent d'interpréter le contenu du script comme du HTML. De mémoire, on parle là de IE3 et de NS3. Il me semble que la part de marché de ces navigateurs atteint depuis longtemps un seuil qui rend cette technique quelque peu obsolète !

Où placer les scripts ?

Plusieurs écoles s'affrontent à ce niveau.
Une chose est sure : il est demandé de séparer les différentes couches du document : le HTML pour le contenu, le CSS pour la mise en forme et le JavaScript pour l'ergonomie (ou le le comportement). Ainsi, insérer ses scripts en plein milieu du document est assez maladroit.
Pendant un temps, les bonnes pratiques recommandaient de placer les scripts entre les balises <head> et de les initialiser via l'événement onload de l'objet window.
Cette façon de procéder est plutôt satisfaisante mais l'événement onload implique que l'ensemble du contenu de la page soit chargé avant de lancer les scripts (donc y compris les éléments dits remplacés : images, iframes, object, etc.) et comme les pages Web deviennent de plus en plus gourmandes en ressources externes, cela fini par nuire à l'expérience utilisateur.
Différentes techniques existent pour pallier cela, entre autre, l'utilisation de l'événement DOMContentLoaded, mais qui n'est pas (encore) suffisamment universel pour être totalement satisfaisant.
La problématique est que pour pouvoir utiliser un script, il faut que les éléments du DOM qu'il va utiliser existent au moment où il est appelé. Une solution efficace est alors de placer les scripts juste avant la fermeture du document (avant la balise </body>), ce qui permet d'être sûr que les éléments du DOM ont été créés et de conserver la notion de séparation des couches.
Gardez toutefois à l'esprit que quelle que soit la solution choisie, elle aura une importance majeure lors de l'écriture de codes destinés à être réutilisés.

Billet original publié sur les blogs de developpez.com...

NoSmoking · 03/02/2012, 18h32

Bonjour,
que voilà un article qu'il manquait et qui prend directement place dans mes favoris afin d'être distillé sur le forum.

Encore merci pour cette prose comme d'habitude claire et concise

danielhagnoul · 03/02/2012, 23h13

Bonsoir

Citation:

Note : en HTML5, l'attribut type n'est plus requis et dans cette version, la syntaxe

Il est toujours requis pour d'autres types de script.

Je propose : En HTML5, si l'attribut type est omis, il prend la valeur par défaut : "text/javascript".

Bovino · 07/02/2012, 11h33

Je comprends bien ta remarque Daniel, mais dans la phrase, "requis" doit se comprendre comme la traduction de "required" et l'attribut "type" n'est pas "required" dans la DTD (contrairement à celles de HTML 4 ou xhtml), bien qu'il en fasse toujours partie.

03/02/2012, 18h32	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 954 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 954 Points : 4 790 Points : 4 790	Bonjour, que voilà un article qu'il manquait et qui prend directement place dans mes favoris afin d'être distillé sur le forum. Encore merci pour cette prose comme d'habitude claire et concise
	00

07/02/2012, 11h33	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 778 Points : 35 778	Je comprends bien ta remarque Daniel, mais dans la phrase, "requis" doit se comprendre comme la traduction de "required" et l'attribut "type" n'est pas "required" dans la DTD (contrairement à celles de HTML 4 ou xhtml), bien qu'il en fasse toujours partie. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email