FAQ JavaScriptConsultez toutes les FAQ

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.

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…).

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.

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

L'attribut language n'est évoqué ici que pour indiquer qu'il ne faut plus l'utiliser !

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

1. 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 ;
2. 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 ;
3. 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éconiser d'utiliser un id à la place lorsque c'est possible.

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>