Javascript

Besoin

Le logo de Javascript
Le logo de Javascript

Initialement : ajouter de la logique programmable aux pages Web.

Analyse

En Javascript tout est un objet, y compris les fonctions.

Un objet est créé à partir d'un autre objet (appelé prototype).

Conception

JavaScript est un langage dynamique, donc interprété n1Bien que des implémentations de Javascript comme V8 puissent avoir recours à une compilation native à la volée pour des raisons de performance.

Il peut être décomposé en modules.

Implémentation

Sa syntaxe s'inspire de celle du langage Java (d'où son nom), mais c'est là leur seul point commun. En effet Javascript offre plusieurs paradigmes :

Il est typiquement intégré à une page HTML :

Version 1 Commentaires
Release 0 1 2
Domaine Produit Service Pack
Navigateur Web Netscape Navigator 2.0 Oui Non
Navigateur Web Netscape Navigator 3.0 Obsolète Oui Non
Navigateur Web Netscape Navigator 4.0 Obsolète Oui
Navigateur Web MSIE 3.0 Oui Non
Navigateur Web MSIE 4.0 Obsolète Oui Non

Test

Test unitaires

Comme pour tout code, il devient important de pouvoir réaliser des tests automatisés lorsque celui-ci devient conséquent. Globalement, deux approches sont proposées : tester indépendamment du navigateur (léger mais généraliste) versus tester dans le navigateur (lourd mais précis). A moins de disposer d'un code généraliste (ce qui est rare), c'est cette dernière option qu'il faudra privilégier, en veillant à pouvoir exécuter les tests sur l'ensemble des navigateurs à supporter.

Produit Pour Contre
JsUnit
  • Invocable via Ant
  • S'exécute dans le navigateur
  • Plugin Eclipse
  • Lance le navigateur pour exécuter les tests, et donc :
  • Ne supporte pas les fichiers javascript directement (intégration dans une page html nécessaire
  • Ne semble plus maintenu n2Il y a un JsUnit (2).
RhinoUnit
  • Invocable via Ant
  • Supporte les fichiers javascripts directement
  • Très simple d'utilisation
  • Simulation d'un moteur JavaScript, donc susceptible de ne pas supporter tous les codes
crosscheck
  • Invocable via Ant
  • Simule le véritable comportement du navigateur
  • Simulation du moteur JavaScript d'un nombre limité de navigateurs/versions (pas de Firefox 2.x ni 3.x, etc.)
  • Ne semble plus maintenu
jsspec
  • S'exécute dans le navigateur
  • Framework Javascript ne pouvant être appelé depuis Ant
jspec
  • S'exécute dans le navigateur
  • Ne semble pas supporter tous les codes
  • Framework Javascript ne pouvant être appelé depuis Ant
Screw.unit
  • S'exécute dans le navigateur
  • Framework Javascript ne pouvant être appelé depuis Ant
Jasmine, Jasmine species
  • S'exécute dans le navigateur
  • Framework Javascript ne pouvant être appelé depuis Ant
Vows
Buster.js
  • S'exécute dans le navigateur (automation)
TestSwarm
JsTestDriver
Yeti
QUnit
  • S'exécute dans le navigateur
Sinon
  • Autonome
google-js-test
  • Autonome
  • Léger
  • Nécessite le moteur Javascript V8 de Chrome

Déploiement

Le Javascript peut être exécuté :

Exemples

Code

Un exemple de code JavaScript est : document.write ("Hello World !");

Intégré dans une page HTML, il apparaît comme suit :

<html>
  <head>
    <title>Page contenant un exemple de JavaScript</title>
  <head>
  <body> Voici un exemple de code JavaScript :
    <script language="JavaScript">
      document.write ("Hello World");
    </script>
  </body>
</html>

Bibiothèques

Domaine Produit Description
Généraliste JQuery
Généraliste Node.js Asynchrone
Généraliste Closure Tools Bibliothèques de Google
Test Kyuri Implémentation de cucumber en Node.js
Test cucumis Implémentation de cucumber en Node.js
GUI jQuery mobile
Dojo
GUI Three.js 3D via canvas HTML 5, WebGL ou SVG

Frameworks

Domaine Produit Description
Front end Angular
Front end ReactJS
Front end Mustache Templates sans logique
Front end Handlebars Extension de Mustache.

Notes

Limitations

  • Interprété
  • Souvent intégré à la page HTML qui l'utilise (donc téléchargé, donc non confidentiel)
  • Peu fiable (bugs)
  • variable (selon les navigateurs)

Trucs

Détecter le niveau de support de JavaScript

<html> <head><title>Detecteur JavaScript pour navigateur</title>
        <script language="JavaScript"> ver = 10; </script> <script language="JavaScript1.1"> ver = 11;
        </script> <script language="JavaScript1.2"> ver = 12; </script> <script
        language="JavaScript"> function nextPage() { // Si le navigateur est de type 4.0 on utilise latestver.html if
        (navigator.userAgent.indexOf ("4.0") >= 0) { window.location = "latestver.html"; } else if (ver >= 11) {
        // Sinon on regarde s'il ont JavaScript 1.1 avant d'utiliser newver.html { window.location = "newver.html"; }
        else // Par défaut on choisit oldver.html pour tous les autres. { window.location = "oldver.html"; } } // -->
        </script> </head>
<body> <!-- Met oldver.html sur le lien pour les navigateurs qui n'ont pas JavaScript
        --> <a href="oldver.html" onClick="nextPage(); return false;">mon lien</a> </body> </html>

Ouvrir une nouvelle fenêtre

window.open("https://www.rr0.org")

Faire communiquer une applet Java avec JavaScript

La communication entre JavaScript et une applet Java est possible grâce à LiveConnect, qui est automatiquement fournit à partir de Netscape Navigator 3.0 et activé par la double activation de Java et JavaScript dans la configuration du navigateur.

Une applet ne peut accéder à JavaScript et les objets que si elle importe le package netscape.javascript qui définit les classes JSObject et JSException :

import netscape.javascript.*;

(Note: Ce package se trouve dans le fichier java_30, généralement situé dans le sous-répertoire Program\java\classes du navigateur. Ce répertoire doit donc être ajouté au CLASSPATH lors de la compilation de l'applet)

De l'autre côté, le document HTML intégrant cette applet doit autoriser celle-ci à communiquer avec JavaScript grâce au paramètre mayscript du tag <applet>. Par exemple :

<applet code="monApplet.class" width=100 height=100 mayscript></applet>

La classe Java JSObject permet alors d'accéder aux objets JavaScript de la page, à commencer par l'objet window, récupérable à l'aide de la fonction getWindow() :

JSObject win = JSObject.getWindow (this);

Tout sous-objet ou propriété peut ensuite être accédé via la fonction getMember(<i>nomObjet</i>). Par exemple : 

JSObject doc = (JSObject) win.getMember ("document"); JSObject formulaire = (JSObject) doc.getMember
          ("testForm"); JSObject caseACocher = (JSObject) formulaire.getMember ("testCheck"); Boolean estCochee =
          (Boolean) caseACocher.getMember ("checked");

Les méthodes JavaScript, qu'elles soit utilisateur ou système, peuvent alors être appelées de deux manières différentes. Soit via la méthode call() de la classe JSObject, en passant en paramètres le nom de la méthode et un tableau de ses arguments (ne pouvant pas être null mais pouvant contenir une chaîne) : 

String arguments[] = {"premierArg", "secondArg"}; win.call ("nomMethode", arguments);

soit via la méthode eval() de cette classe, qui reçoit en paramètre une chaîne Jaît à exécuter. Par exemple :

win.eval ("nomMethode(" + premierArg + <span class="codeString">","</span> + secondArg + <span class="codeString">")"</span>);

Connaître le navigateur utilisé pour lire votre page

  • navigator.appName donne le nom du navigateur
  • navigator.appVersion donne la version du navigateur

Faire communiquer JavaScript avec une applet Java

La communication entre JavaScript et une applet Java est possible grâce à LiveConnect, qui est automatiquement fournit à partir de Netscape 3.0 et activé par la double activation de Java et JavaScript dans la configuration du navigateur.

Les packages et classes Java font alors partie pour JavaScript de l'objet Packages. On peut alors appeler la méthode d'une classe Java selon la syntaxe suivante :

Packages.<i>nomPackage</i>.<i>nomClasse</i>.<i>nomMéthode</i>(<i>paramètres</i>)

(A noter que les alias java, sun et netscape désignent respectivement Packages.java, Packages.sun et Packages.netscape).

Les applets Java présentes dans un document sont alors référençables à partir de l'objet document, selon les syntaxes suivantes, au choix :

document.<i>nomApplet</i> document.applets[<i>nomApplet</i>] (nomApplet étant attribué par le paramètre name de l'applet) document.applets[<i>indexApplet</i>]

Voici un l'exemple d'une applet affichant le nombre de clics effectués sur sa surface depuis sa création (essayez donc) : Il est possible dans cet exemple pour JavaScript de communiquer avec l'applet, dans un sens (ajouter un clic à l'applet, fixer le nouveau nombre de clics de l'applet) comme dans l'autre (lire le nombre de clics de l'applet), comme le montrent les boutons suivants :

Ecrire un cookie

Un cookie est une chaîne de caractères de la forme :

nom=<i>valeur</i>;expires=<i>dateExpiration</i>;

Stockée dans le document cookies.txt chez l'utilisateur et accessible depuis JavaScript via la chaîne document.cookie.

L'écriture d'un cookie peut s'effectuer par...

Voir

Alternatives