Introduction au Javascript

· Niveau : DÉBUTANT
· Compatibilité : Tous les navigateurs

Le Javascript est issu de la technologie Netscape® qui travailla conjointement avec ECMA, le consortium européen des normes, afin d’adopter formellement le Javascript comme standard international. Le Javascript a été créé pour Internet. Il est très populaire car il lie au HTML la plupart des éléments de programmation rencontrés sur le Net. Comme le C ,le Java, ou les modules externes plugiciels ou « plug-in »! Il permet à ces objets de communiquer et opérer entre eux. C’est le langage parfait pour le développement d’interfaces multiple et pour le contrôle du HTML dynamique, le « DHTML ».

Netscape® continue de développer le langage Javascript pour lui fournir une plus grande puissance et pour faciliter son utilisation. Le Javascript 1.2 contient de nouveaux dispositifs comprenant entre autres un modèle de soutien de sécurité "capabilities-based" . Et du côté serveur, une facilité d’accès aux bases de données de presque tous les constructeurs.

Techniquement, le langage Javascript est un langage interprété au même titre que le HTML. C’est dire que ce langage n’a pas besoin d’être compilé avant d’être fonctionnel. C’est le navigateur qui se charge d’interpréter le langage Javascript et d’exécuter les tâches soumises par le langage. C’est d’ailleurs pour cette raison que le Javascript n’est pas toujours compatible selon le navigateur. Le DOM (document object model) est une méthode qui permet de définir plusieurs types d’objet justement pour réaliser des de documents le plus compatible possible. Le Javascript n’y échappe pas. Le tableau ci-dessous démontre la compatibilité du Javascript.

Télécharger un document HTML officiel de Netacape sur le Javascript
jscript.zip

Compatibilié du Javascript entre les navigateurs
Navigateur	JS 1.0	JS 1.1	JS 1.2	JS 1.3
IExplorer® 3.0	x	-	-	-
IExplorer® 4.0	x	x	x	-
IExplorer® 5.0 5.5	x	x	x	x
Netscape® 2.0	x	-	-	-
Netscape® 3.0	x	x	-	-
Netscape® 4.04-5	x	x	x	-
Netscape® 4.06 4.7	x	x	x	x

Compatibilité du Javascript

Ce langage est aussi dit « embed script » ou script imbriqué, parce que le Javascript peut-être placé ou imbriqué à tout endroit entre les balises <html> et <html>. En général on le retrouve entre les balise d’en-tête <head> et </head> parce que cette section du HTML est interprétée en premier. Le navigateur interprète le code d’une page Web en partant d’en haut pour finir en bas de la page. Donc, si par exemple vous désirer faire un préchargement de vos images en Javascript, placer le script en question entre les balises d’en-tête feront en sorte que les images seront chargées avant même que la page ne s’affiche. D’un autre côté, si vous désirez afficher la date en bas de votre page, le script Javascript devra être imbriqué en bas de votre page à l’endroit même ou la date devra être affichée, donc entre les balises <body> et </body>.

jQuery : c’est d’ailleurs un des principaux problèmes rencontré avec la librairie jQuery. On place généralement les scripts jQuery en bas de la page, juste avant la fermeture </html>. Il faut donc que la page entière soit chargée avant de l’exécuter en toute confiance.

C’est pourquoi la méthode « ready » est toujours utilisé avec la librairie jQuery. Le code inclue à l’intérieur du $( document ).ready() s’exécutera une foie le document chargé, c’est à dire quand le DOM (Document Object Model) est près à être manipulé par le Javascript.Le code inclue à l’intérieur du $( window ).load(function() { ... }) s’exécutera une foie l’ensemble des élément de la page seront chargés incluant les images et les cadre « iFrame ».

Tester le avec le code suivant qui ouvre les Trucsweb dans un cadre « iFrame ». Le premier code s’exécute une foie la page chargée et le second une fois la page du cadre chargée.

<html>
  <head>
    <title>Chargement d’une page Web et jQuery</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js">>/script>
    <script>
      $( document ).ready(function() {
        console.log( "« document » chargé" );
      });
      $( window ).load(function() {
        console.log( "« window » chargé" );
      });
    </script>
  </head>
  <body>
    <iframe src="http://trucsweb.com.com"></iframe>
  </body>
</html>

Déclaration

Dans l’exemple, le code de votre script doit toujours être entouré des balises <script> et </script> pour indiquer au navigateur que le code a interprété est du Javascript à l’aide de l’attribut « language ». Mais vous avez peut-être déjà remarqué un Javascrip déclaré comme ceci :

HTML5 : Les normes du HTML5 recommande de ne plus utiliser l’attribut « language » ! <script ~~language="Javascript"~~>...</script>

C’est que le langage SCRIPT est par défaut le Javascript. Il n’apparait donc pas nécessaire de préciser le langage, chose que je ne vous conseil pas de faire. Indiquer plutôt le langage et aussi la version du Javascript utilisée. Vous verrez plus loin pourquoi. Voici la façon d’imbriquer un script Javascript :

<html>
  <head>
    <title>Déclaration Javascript</title>
    <script language="javascript1.2">
      
    </script>
  </head>
  <body>
    -- Code de votre page HTML --
  </body>
</html>

Noter l’indication de la version 1.2 et l’ajout de HTML au Javascript avec la balise ou pseudo-balise "". Ce code dénote à quel point le navigateur change de conscience lorsqu’il rencontre la balise SCRIPT. Il fera abstraction de la remarque et continuera d’interpréter le code. Quand le navigateur interprète du Javascript c’est la balise "//" qui indique une remarque. Balise utilisée pour terminer notre remarque HTML. Alors pourquoi cette remarque HTML. C’est pour les navigateurs qui ne comprennent pas le Javascript, comme ils ne le comprennent pas, tout code Javascript sera donc en remarque, seule la balise indiquant un script sera interprétée sans aucun effet puisque le HTML n’indique jamais ce qu’il ne comprend pas.

Vous pouvez imbriquer autant de script que vous désirez soit en ouvrant et fermant à chaque fois les balises <SCRIPT> soit en les ajoutant une après l’autre dans une seule déclaration <SCRIPT>.

Pour les plus avancés, ce langage peut aussi être interprété par le serveur. En effet, si le serveur le permet, comme IIS par exemple, l’ajout de " RUNAT=server " dans la déclaration d’un script fera en sorte que le langage sera interprété par le serveur et non le navigateur, mais attention, il ne peut être manipulé de la même façon. Vous ne pouvez par exemple utiliser des fonctions qui obtiennent certaines informations via le visiteur.

Exemple :
<script language="javascript1.2" runat=server>

LE JAVASCRIPT AVEC ÉVÉNEMENTS
La Javascript peut aussi être interprété lorsqu’un événement survient. Un événement est une action qui est provoquée par le visiteur. Par exemple, lorsqu’il clique sur le bouton de la souris. Vous pouvez déclarer se qu’on appelle des " Event handlers " (manipulateur d’événement ) qui réagiront seulement à un événement précis. La syntaxe est :

Par exemple, vous avez créé un script qui fait un calcul et vous voulez qu’il soit exécuté seulement quand le visiteur clic sur un bouton.

La balise HTML INPUT est utilisée pour afficher un bouton (voir section HTML) et l’événement Javascript pour indiquer un clic est "onClick" . Voir plus loin les événements Javascript.

ATTENTION En terminant il faut mentionner le problème de l’utilisation des guillemets. Puisque le guillemet " est utilisé couramment en Javascript, qu’il permet entre autres d’indiquer une chaîne de caractère, vous ne pouvez ajouter des guillemets dans une chaîne de caractère. Vous pouvez alors utiliser le guillemet simple ’. Mais encore une fois cela peut causer des problèmes dans une chaîne délimitée par des guillemets simples. Alors utiliser le symbole / qui indique d’interpréter le caractère qui suit ce symbole comme étant un simple caractère.

Exemple :
Chaine = "Voilà une chaîne de caractères avec /"guillemet/" qui fonctionne."
Chaine = ’Autre exemple avec "guillemet simple" qui fonctionne et l/’apostrophe.’

Ajax (acronyme d’Asynchronous JavaScript and XML)

L’architecture Ajax est essentiellement une méthode Javascript (XMLHttpRequest) permettant de charger du contenu externe de façon asynchrone. C’est à dire n’importe quand, de n’importe qui et n’importe où. Après un événement ou un clic, charger et intégrer à la page la chaine http retournée par une adresse (URL). Récupérer sur un serveur des données après le chargement de la page pour un contenu dynamique et interactif localement, c’est à dire directement sur le poste client.

Cette mnéthode existe depuis toujours mais les navigateurs empêchaient les requêtes asynchrones pour des préoccupations évidentes de sécurité. Mais il faut revenir en 2000 pour savoir que l’ActionScript 2 de Macromedia (Flash) le permettait déjà (voir « Envoyer un formulaire Flash avec un script serveur »). Une des raisons des nombreuses applications Flash qui pouvait communiquer de façon asynchrone avec le serveur alors que le Javascript ne le permettait pas. Le Web 2 a remis les pendules à l’heure, notamment parce que l’on développait de toute façon des appel Javascript asynchrone via les images par exemple.

Avec une limite toute fois, les requêtes doivent être envoyé sur le même serveur. Même l’ActionScript 3 a maintenant cette restriction contournable toute fois avec des autorisations spéciales.

Outre le XML, les échanges de données entre client et serveur peuvent utiliser d’autres formats, csv, text, html, ou encore JSON (pourquoi pas le « Ajaj » alors !!) inventé pour palier au manque de support XML du PHP avant la version 5!

Chaine de caractères

var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'Je l\'ignore';       // \n = nouvelle ligne
var len = abc.length;           // longeur de la chaine
abc.indexOf("lmno");            // trouve une chaine dans la chaine (retourne -1 si elle n'existe pas) 
abc.lastIndexOf("lmno");        // dernière occurrence
abc.slice(3, 6);                // élimine "def", les valeurs négatives comptent vers l'arrière
abc.replace("abc","123");       // trouve et remplace, permet les expression régulières
abc.toUpperCase();              // conversion en majuscule
abc.toLowerCase();              // conversion en minuscule
abc.concat(" ", chaine2);       // abc + " " + chaine2
abc.charAt(2);                  // caractère selon l'index : « c »
abc.charCodeAt(2);              // code de caractère selon l'index : "c" = 99
abc.split(",");                 // fractionnement d'une chaîne sur des virgules retourne une matrice
abc.split("");                  // fractionnemen sur un caractère
128.toString(16);               // nombre en hexadécimal (16), octal (8) ou binaire (2)

Variables

var a;                                    // variable
var b = "init";                           // chaine
var c = "Bonjour" + " " + "le monde";     // = "Bonjour le monde"
var d = 1 + 2 + "3";            // = "33"
var e = [2,3,5,8];              // matrice (array)
var f = false;                  // booléenne
var g = /()/;                   // Expression régulière (RegEx)
var h = function(){};           // objet fonction
const PI = 3.14;                // constante
var a = 1, b = 2, c = a + b;    // sur une ligne
let z = 'zzz';                  // variable locale pour un seul bloc

Mode stricte (Strict mode)

"use strict";   // Utiliser le mode strict pour écrire du code sécurisé
x = 1;          // En mode stricte, retourne une erreur car la variable n'est pas déclarée

Valeur

false, true                     // booléenne
18, 3.14, 0b10011, 0xF6, NaN    // number
"Ville", 'Montréal'             // chaine
undefined, null , Infinity      // spéciale

Opérateurs

a = b + c - d;      // addition, soustraction
a = b * (c / d);    // multiplication, division
x = 100 % 48;       // modulo. 100 / 48 reste = 4
a++; b--;           // suffix : incrémenter et décrémenter

Opérateurs binaires

& 	ET  	 5 & 1 (0101 & 0001)	1 (1)
| 	OU  	 5 | 1 (0101 | 0001)	5 (101)
~ 	NON  	 ~ 5 (~0101)	10 (1010)
^ 	XOR  	 5 ^ 1 (0101 ^ 0001)	4 (100)
<< 	left shift  	 5 << 1 (0101 << 1)	10 (1010)
>> 	right shift  	 5 >> 1 (0101 >> 1)	2 (10)
>>> zéro remplissage right shift  	 5 >>> 1 (0101 >>> 1)	2 (10)

Arithmétique

a * (b + c)         // regroupement
pays.ville          // membre
pays[ville]         // membre
!(a == b)           // non logique
typeof a            // type (nombre, objec, fonction...)
x << 2  x >> 3      // décalage binaire
a = b               // assignation
a == b              // égal
a != b              // inégal
a === b             // égal stricte
a !== b             // inégal stricte
a < b   a > b       // plus petit et plus grand que
a <= b  a >= b      // plus petit ou égal, plus grand ou égal
a += b              // a = a + b (fonctionne avec - * %...)
a && b              // et logique
a || b              // ou logique