Javascript client

Besoin

Ajouter de la logique programmable aux pages Web.

Analyse

Conception

JavaScript est un langage interprété.

Il est exécuté :

Des initiatives visent également à en faire un véritable langage autonome, comme CommonJS.

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 :

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

Versions

Version Date Features Commentaire
ES1 en
ES2 en Conforme à ISO/CEI 16262
ES3 en RegExp, manipulation de chaînes de caractères, gestion des exceptions
ES3.1 en Fork de Yahoo, Microsoft, Google
ES4 Microsoft JScript en Implémenté dans IE
" en AJaX, JSON Emergence des SPA
" en V8 engine Boost de performance
ES5 en strict mode, JSON.parse/stringify, String .trim, map/filter/reduce/forEach array functions
ES5.1 en Mise à jour mineure
ES6/ES2015 en ES modules, let/const, arrow functions, class, ellipsis, default values, WeakMap, template literals
ES7/ES2016 exponential operator, Observable API
ES8/ES2017 async/await
ES9/ES2018 spread operator, Promise.finally
ES10/ES2019 Array.flat/flatMap, Object.fromEntries
ES11/ES2020
ES12/ES2021
ES13/ES2022
ES14/ES2023
ES15/ES2024
ES15/ES2025

Support

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

Exemples

Bibiothèques

  • JQuery

Frameworks

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>
    <p>Voici un exemple de code JavaScript:</p>
    <script>
      <!--
      document.write('Hello World!')
      -->
    </script>
  </body>
</html>

Notes

Bibliothèques

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

Tests 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 n1Il 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
  • Dédié à Node.js
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

Limitations

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;">monlien</a>
  </body>
</html>

Ouvrir une nouvelle fenêtre


window.open("https://www.javarome.net")

Faire communiquer une applet Java avec JavaScript

La communication entre JavaScript et une applet Java est possible grâce à LiveConnect, qui est automatiquement fourni à 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" height="100" mayscript="" width="100"></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 (<span class="codeString">"document"</span>);
JSObject formulaire = (JSObject) doc.getMember (<span class="codeString">"testForm"</span>);
JSObject caseACocher = (JSObject) formulaire.getMember (<span class="codeString">"testCheck"</span>);
Boolean estCochee = (Boolean) caseACocher.getMember (<span class="codeString">"checked"</span>);

Les méthodes JavaScript, qu'elles soient 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 vide) :


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 JavaScript à exécuter. Par exemple :


win.eval ("nomMethode(" + premierArg + "," + secondArg + ")");

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.nomPackage.nomClasse.nomMéthode(paramètres)

(A noter que les alias java, sunet netscapedé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 :

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

Voici 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=valeur;expires=dateExpiration;
  • 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