FAQ JavaScript
FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 29 août 2021
- Qu'est-ce que le JavaScript ?
- Quel rapport entre JavaScript et ECMAScript ?
- Quelle relation entre JavaScript et le DOM ?
- À quoi sert le JavaScript ?
- Java ou JavaScript ?
- Comment ajouter du JavaScript à une page HTML ?
- Quels sont les attributs de la balise script ?
- Où placer les balises script dans le code de la page HTML ?
- Comment sélectionner un élément dans une page ?
- Comment faire si JavaScript est désactivé chez le client ?
JavaScript
(à ne pas confondre avec Java) est un
langage interprété à objet orienté prototype.
Il est principalement utilisé sur le Web côté client. C'est-à-dire que c'est le
navigateur qui exécute le code. Au contraire des langages de requêtes du style
PHP
ou
ASP
qui eux sont exécutés côté serveur :
le code que le serveur renvoie au navigateur n'est que du
(X)HTML
simple. Par conséquent, le
JavaScript
est utile pour tout ce qui
concerne les interactions du client sur la page Web. Il permet ainsi d'améliorer
la présentation et l'interactivité des pages Web.
Mais il peut aussi être utilisé côté serveur. Il existe plusieurs déclinaisons
du langage qui permettent de l'utiliser dans de nombreux domaines.
Lien : À quoi sert le JavaScript ?
JavaScript est ECMAScript ou presque.
Un peu d'histoire ne fait pas de mal :
Brendan Eich
développe initialement un langage de script côté serveur, appelé LiveScript, pour le compte de Mosaic Communications Corporation.
Le
National Center for Supercomputing Applications
propriétaire du nom
Mosaic
force
Mosaic Communications Corporation
à changer de nom. Ainsi naîtra Netscape. À cette époque
Netscape
et
SUN
collaborent pour porter
LiveScript
sur le navigateur. Ainsi sort en 1995 une nouvelle version du langage, la première à être largement diffusée qui est alors baptisée JavaScript.
Netscape
soumet son langage à
Ecma International
pour en faire un standard. Des premières drafts du standard,
Microsoft
sort JScript.
Adobe
s'en empare et crée ActionScript. Le Standard se nomme ECMAScript. Il traite du langage en lui-même.
JavaScript, comme toutes les déclinaisons nées avant le standard, ont été depuis révisées pour s'y conformer.
JavaScript
est donc une implémentation de
ECMAScript
.
JavaScript, dans son implémentation dans un navigateur, permet d'accéder aux éléments de celui-ci. Mais aussi et surtout au contenu d'une page (X)HTML.
Pour cela, un ensemble de méthodes et d'objets sont intégrés au langage. La norme régissant cette relation est gérée par le W3C. Elle fait partie de
l'ensemble de normes régissant le DOM.
- Dans le navigateur, JavaScript est très utilisé pour traiter les événements occasionnés par un internaute sur une page Web, ainsi que pour faire des contrôles sur les formulaires. De plus en plus, on l'utilise pour créer ou modifier l'interface utilisateur d'une page.
- Sur un serveur Web, il permet d'interagir avec les composants du serveur comme les fichiers, les sockets, les bases de données.
- Sur un système d'exploitation, il peut être utilisé comme Shell, ou encore pour automatiser certaines tâches d'administration. C'est, entre autres, le cas sous Windows avec l'utilisation de WindowsHostScript.
- Dans un lecteur SVG, il permet de gérer des animations. De même, ActionScript©, la déclinaison d'Adobe permet d'interagir avec Flash.
Il ne faut pas confondre Java et JavaScript. La ressemblance dans le nom vient d'une bête histoire de marketing, la société NetScape ayant
décidé de changer le nom initial "LiveScript" pour "JavaScript" afin de profiter de la popularité de la machine virtuelle Java à l'époque.
Les deux langages peuvent aujourd'hui être utilisés côté serveur et côté navigateur, néanmoins ils sont très différents :
- JavaScript est un langage de script interprété par un moteur JavaScript juste avant exécution, tandis que Java est un langage de programmation préalablement compilé en bytecode par des logiciels spécialisés pour être ensuite exécuté par une machine virtuelle Java ;
- Etant compilé, un programme Java est généralement plus performant que son équivalent en JavaScript. Cette compilation lui assure également la confidentialité du code (on n'accède pas au code en faisant clic droit > Afficher la source) ;
- Etant interprété, un code JavaScript peut être écrit avec un simple éditeur de texte et exécuté sur un navigateur. Java est plus compliqué à mettre en place (besoin d'une machine virtuelle, d'un compilateur, etc.).
1. Avec un script externe (recommandé).
<script src
=
"chemin/vers/script.js"
></script>
Dans ce cas, la balise doit être vide (de toute façon, si ce n'est pas le cas, son contenu ne sera pas interprété).
L'attribut src doit pointer vers un fichier contenant du code JavaScript (le plus souvent un fichier .js).
Celui-ci ne doit rien contenir d'autre que du code JavaScript.
Une erreur souvent commise est de mettre des balises <script> dans le fichier JavaScript, ce qui provoque une erreur.
Il est donc possible, par exemple, de créer un fichier JavaScript en PHP (ou tout autre langage serveur) :
<?php
header('Content-type: text/javascript; charset=iso-8859-1'
);
header('Accept-Encoding: gzip, deflate'
);
if
(!
empty($_GET
[
'infoScript'
]
)){
echo "alert('"
.
$_GET
[
'infoScript'
].
"');"
;
]
else
{
echo "alert('Pas de message à afficher...');"
;
}
?>
<script
src="script.php?infoScript=HelloWorld">
</script>
2. Avec un script intégré dans le code HTML.
<script
>
// Code JavaScript
</script>
Vous pouvez aussi écrire directement le code JavaScript à l'intérieur de la balise <script> sans préciser l'attribut src. Cela permet d'éviter de faire une requête HTTP supplémentaire, mais rend votre code moins modulaire et ne permet pas de mettre en cache le script.
3. Avec un attribut d'événement.
<p onclick=
"this.style.backgroundColor = 'orange';"
>
Cliquez sur moi, je deviendrais orange !
</p>
Cette dernière méthode est généralement déconseillée, notamment parce qu'elle va à l'encontre de la séparation des couches (HTML pour le contenu, CSS pour la mise en forme et JavaScript pour le comportement) rendant ainsi la maintenance du code plus compliquée.
Lien : Comprendre la balise script
Lien : Où placer les balises script dans le code de la page HTML ?
Attribut | Rôle | Remarques |
---|---|---|
type | Indique le type MIME correspondant au script | Le plus souvent, sa valeur est "text/javascript". Optionnel en HTML5, requis dans les autres versions. |
src | Indique l'adresse où récupérer le script. | Si l'attribut est présent, la balise <script> doit être vide (son contenu ne sera pas exécuté de toute façon). |
defer | Indique que le script doit être exécuté une fois que le document a été complètement créé. | N'agit que sur les scripts externes (présence de l'attribut src). Tous les navigateurs ne reconnaissent pas cet attribut ou l'interprètent différemment de sa spécification (notamment IE9 et inférieurs et Opera). |
async | Indique que le script doit être chargé de façon asynchrone permettant de continuer l'interprétation du document pendant le chargement. | N'agit que sur les scripts externes (présence de l'attribut src). IE9 et inférieurs et Opera ne reconnaissent pas cet attribut. |
charset | Indique l'encodage d'un script externe. | N'agit que sur les scripts externes (présence de l'attribut src). |
language | Indique quel langage de script est utilisé. | Même si on le rencontre encore trop souvent, cet attribut est obsolète et ne devrait plus être utilisé ! |
L'attribut language n'est évoqué ici que pour indiquer qu'il ne faut plus l'utiliser !
Lien : Comprendre la balise script
Il s'agit là d'un vaste débat !
Pendant longtemps, il était recommandé de placer les scripts dans la partie <head> de la page. Mais cette façon de procéder pose divers problèmes :
- un script étant susceptible de modifier le contenu de la page, il est nécessaire de bloquer l'interprétation de la page pendant le chargement et l'exécution des scripts ; placer les scripts dans le <head> réduit ainsi la vitesse d'affichage de la page ;
- en règle générale, les scripts agissent sur les éléments présents dans le document, or lorsque les scripts sont exécutés depuis le <head>, les éléments sur lesquels ils doivent agir n'existent pas encore, il faut donc attendre le chargement complet via un événement tel que window.onload pour lancer les fonctions utiles.
Une technique communément acceptée consiste donc à placer les scripts en fin de page, juste avant la fermeture du <body>, pour pallier ces deux inconvénients :
- l'essentiel du contenu étant déjà affiché (à l'exception des contenus dits remplacés : images, cadres intégrés, animations, …), le visiteur y a accès plus rapidement ;
- à la fermeture du <body>, toutes les balises existent dans le document et peuvent ainsi être utilisées par JavaScript.
Pour sélectionner un élément HTML en JavaScript afin d'interagir avec lui, il existe plusieurs solutions.
Prenons un exemple :
<form name
=
"exemple"
>
<table>
<tr>
<td>cellule 1</td>
<td id
=
"test"
>
cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
</form>
Supposons que nous voulons sélectionner la cellule 2 dans la première ligne, deuxième colonne. Voilà les solutions les plus couramment utilisées :
- via l'attribut id: var cellule = document.getElementById('test'); ; l'attribut id est un moyen simple d'identifier un élément, mais attention il doit être unique dans le document ;
- via les collections d'éléments : var cellule = document.exemple.children[0].rows[0].cells[1]; ; diverses collections d'éléments sont définies pour l'objet document ainsi que pour d'autres éléments HTML ;
- via querySelector : var cellule = document.querySelector("form table tr:first-child td + td"); ; cette méthode apparue en HTML5 avec querySelectorAll vous permet de disposer de la même souplesse qu'avec les sélecteurs CSS pour venir sélectionner un élémént.
Ajoutez des attributs id et class avec parcimonie afin de ne pas surcharger votre HTML et de réduire les risques de doublons. Pensez à utiliser les collections d'éléments et les méthodes comme querySelector lorsqu'elles vous aident à simplifier vos sélecteurs et vous évitent de rechercher à nouveau dans tout le document.
IE 6 et inférieurs ainsi que IE 9 en mode Quirks (pas de doctype dans le document) ne font pas la différence entre l'attribut name et l'attribut id. Par conséquent, prenez garde à ne pas avoir de doublons entre les noms et les identifiants.
L'attribut name n'est disponible que pour un nombre limité de balises, nombre qui a été encore réduit après que HTML5 déprécie son utilisation sur les éléments a et img. Il est préconisé d'utiliser un id à la place lorsque c'est possible.
Lien : Informations sur le doctype
On considère actuellement que le pourcentage d'internautes qui n'ont pas JavaScript activé dans leur navigateur est de plus en plus faible (environ 1% en 2014, variable selon les pays et le type d'appareil). Pour prévenir ces utilisateurs, vous pouvez utiliser les balises HTML :
<noscript>Ce message ne sera visible que pour les utilisateurs n'ayant pas activer JavaScript.</noscript>
Lien : PHP : Comment détecter si JavaScript est activé ou non?