[Tutorial] Apprendre le Javascript

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

il vous faudra boucoup de patience rien que pour finir de lire.... :

Histoire et compatibilité

a) Petite histoire
--------------------------------------------------------------------------------

En l'an 2000, le JavaScript avait presque dix ans, à la base, Netscape développa un langage de Script (et non un langage de programmation) du nom de code "LiveScript". Vers les années 1995, SUN Microsystems prit le contrôle de LiveScript et l'appela JavaScript, un petit clin d'oeil à Java, développé aussi par Sun...

On dit alors que le JavaScript est né en 1995. De même, JavaScript est supporté par différentes versions de Netscape.

Ce petit langage plut beaucoup à Monsieur MicroSoft qui décida de l'intégrer un petit peu à MicroSoft Internet Explorer... Sous MicroSoft Internet Explorer 4.0 l'intégration est déjà un peu plus réussie, notamment dans le domaine du DHTML...

Ce langage a tellement plut à MicroSoft qu'il décida d'en faire un, il créa donc le JScript, qui ressemble très très fortement au JavaScript !
Le JScript est très peu utilisé du fait qu'il n'est pas supporté par Netscape, et que l'on peut faire pratiquement la même chose avec du JavaScript.

Ainsi la bagarre Sun - MicroSoft existe depuis longtemps et existera encore et encore...
b) ECMAScript ? Qu'est ce que c'est ?
--------------------------------------------------------------------------------

Comme dans toute chose que l'on fait, il existe des réglementations, des lois, sur Internet aussi, ainsi le W3C définit un certain nombre de "lois"... A la sortie de JavaScript 1.1, l'ECMA (European Computer Manufacturers Association) fut chargé de mettre de l'ordre, de créer une norme sur les langages de scripts. Cette norme s'appelle l'ECMAScript, ainsi tous les langages de scripts pour le Web doivent être compatibles ECMAScript.

La Norme 262 de L'ECMAScript en est à sa 3ème édition (dernière édition en décembre 99), la première édition du standard a été approuvée en 1997, la 3ème édition implante à l'ECMAScript les expressions régulières, la gestion des erreurs et des exceptions... Pour plus de détails, lisez la Norme 262 de l'ECMA, en anglais. (Disponible sur www.echma.ch ).
c) JavaScript, ce n'est pas du JScript
--------------------------------------------------------------------------------

Comme il est dit un tout petit plus haut dans ce chapitre, JavaScript est développé par Netscape et JScript par MicroSoft. Ainsi JScript est différent de JavaScript, ce n'est pas une abréviation. Certaines différences existent en ces 2 langages.
d) JavaScript, ce n'est pas du Java
--------------------------------------------------------------------------------

Java est un langage assez complexe, certaines personnes diront ( je n'ouvre pas de polémique ) que JavaScript est "le petit frère" ou "une version plus simple" de Java.
Le Java est un langage compilé, et JavaScript est un langage interprété, le champ d'action du JavaScript est très petit tandis qu'il est presque infini avec le Java.
Pour une différence complète, apprenez les 2 langages...

.......................................................................................................
Les bases

a) Où se met le code JavaScript ?
--------------------------------------------------------------------------------

Il existe deux endroits où l'on peut mettre du code JavaScript, le premier, dans la page elle-même, le second dans un fichier JavaScript séparé.

Dans le code HTML :
--------------------------------------------------------------------------------

Le code JavaScript inséré dans l'HTML sert souvent à un script précis, une animation seulement pour cette page, un vérificateur de formulaire...

Il se place entre les tags <head> et </head> ou entre <body> et </body> et parfois à l'intérieur du tag <body>.

Le plus souvent, le code est réparti dans ces trois endroits, si votre code n'affecte en rien la page HTML, si vous n'utilisez pas document.write(), le code doit se trouver dans la partie <head>.

Exemple, un vérificateur de formulaire qui affiche une boîte de dialogue et empêche l'envoie du formulaire si un champ requis est vide ou mal rempli, ce script n'affecte en rien la page, il n'écrit rien sur la page !

Tandis qu'un script qui affiche la date sur la page affecte la page.

Un script qui affiche l'heure dans la barre de statut n'affecte pas la page, la barre de statut ne fait pas partie de la page.

Donc, si le code affecte la page HTML, il va se trouver entre <body> et </body>, et s'il n'affecte pas la page, entre <head> et </head>

En fait, ceci n'a pas vraiment d'importance, vu que l'en-tête d'une page acceptera d'écrire sur la page et qu'un script qui n'affecte pas la page marchera dans le corps du document.
Pour des raisons de clareté, on différencie l'en-tête et le corps.
Dans un fichier séparé :
--------------------------------------------------------------------------------

Mettre du code JavaScript dans un fichier séparé peut s'avérer assez utile si par exemple vous mettez ce code sur toutes vos pages, si vous voulez afficher la date sur toutes vos pages.

Ou si vous voulez "protéger" (un peu) votre code des regards indiscrets, mais ceci ne marchera pas avec un "expert", il suffit de taper l'URL du fichier JavaScript, ou même d'aspirer la page, et hop ! Le tour est joué !

Par "normalisation" on ne doit pas mettre de code JavaScript qui affecte la page, comme afficher la date, mais bon, ça marche, alors pourquoi s'en priver !

Donc, le code JavaScript dans un fichier séparé sert à protéger un peu le code et à ne pas avoir à le retaper pour chaque page (vous gagnerez du temps à l'écriture et l'Internaute gagnera du temps au chargement, la première fois, il télécharge le fichier et après il ne le fait plus ! (le fichier est dans le cache)).

Info : les fichiers JavaScript (et JScript) ont une extension en .js
b) Les tags
--------------------------------------------------------------------------------

Si vous mettez le code JavaScript dans le document HTML ou dans un fichier séparé, il faut prévénir le navigateur qu'il va rencontrer du code JavaScript et l'interpréter.

La balise <script>...</script> sert à introduire un langage de script comme le JavaScript par exemple, JScript, VBScript et même PHP

( côté serveur si le php.ini le permet... ! )

Vous l'avez compris, il faut donc dire au navigateur (ou au serveur, pour PHP

) quel langage de script est utilisé, pour cela, on a recours à un attribut HTML nommé "language" (avec un "u", c'est de l'anglais !).

Exemple :

--------------------------------------------------------------------------------
<script language="JavaScript">
Mon code javascript
</script>

--------------------------------------------------------------------------------

On peut même préciser la version de JavaScript, cela sert par exemple si vous utilisez des entités JavaScript qui ne sont pas compatibles avec les anciennes versions :

--------------------------------------------------------------------------------
<script language="JavaScript1.4">
Mon code javascript, mais j'utilise des entités JavaScript propres à JavaScript 1.4, qui ne sont pas compatibles avec JavaScript 1.3
</script>

--------------------------------------------------------------------------------

Comme cela, on peut tester la version JavaScript d'un navigateur :

--------------------------------------------------------------------------------
<script language="JavaScript1.0">
Navigateur avec JavaScript 1.0 ( Pensez à le changer, on fait mieux ! )
</script>

<script language="JavaScript1.1">
Navigateur avec JavaScript 1.1 ( Pareil que pour la version 1.0 )
</script>

<script language="JavaScript1.2">
Navigateur avec JavaScript 1.2 ( C'est déjà mieux ! )
</script>

<script language="JavaScript1.3">
Navigateur avec JavaScript 1.3 ( Ca va, vous êtes à la page )
</script>

<script language="JavaScript1.4">
Navigateur avec JavaScript 1.4 ( Vous êtes pénard pour un bon moment ! )
</script>

--------------------------------------------------------------------------------

Si vous utilisez un fichier externe (.js), c'est la même démarche, sauf que l'on rajoute l'attribut HTML src pour donner l'URL du fichier .js :

--------------------------------------------------------------------------------
<script src="/page/js/mon_js.js" language="JavaScript1.4"></script>

--------------------------------------------------------------------------------

Vous n'avez pas de code JavaScript à mettre entre ces deux tags !

Vous pouvez utiliser du code JavaScript, à l'intérieur de ces tags, il sera interprété si le fichier n'a pas été trouvé, ce qui peut être une bonne chose :

--------------------------------------------------------------------------------
<script src="/page/js/mon_js.js" language="JavaScript1.4">
Un code qui alerte l'internaute que le fichier n'a pas été trouvé, ou actualise la page, ou renvoie à une autre page, c'est votre imagination qui fait la suite !
</script>

--------------------------------------------------------------------------------

Il existe très peu de navigateurs Internet qui ne "connaissent" pas le JavaScript, c'est à dire qu'ils sont incapables de l'interpréter. Si un tel cas se présente, que faire pour dire au navigateur de ne pas s'occuper du JavaScript ?
Pour cela, on a recours à la commentarisation (mot que je viens juste d'inventer). La commentarisation est le fait de mettre le code entre des commentaires HTML. De ce fait, les navigateurs qui savent interpréter le JavaScript l'interpréteront (ils sont au courant que même entre des commentaires, ils doivent l'interpréter). Pour les navigateurs qui ne reconnaissent pas le JavaScript, ils ne l'interpréteront pas car ce code se trouve entre des commentaires HTML.

Voici la syntaxe :

--------------------------------------------------------------------------------
<script language="JavaScript">

</script>

--------------------------------------------------------------------------------

Chose intéressante à voir, les commentaires HTML sont compatibles avec le code JavaScript, c'est à dire qu'un commentaire HTML dans du JavaScript sera considéré comme un commentaire...

Toutes les lignes qui commencent par  ne sont ni des commentaires HTML, ni des commentaires JavaScript, c'est pour cette raison que la fin de la commentarisation se fait par // --> (// signifie début d'un commentaire JavaScript).
...........................................................................................................
Règles d'écriture

a) Une instruction finie par un point virgule ( ; )
--------------------------------------------------------------------------------

Le titre en dit assez, toutes les instructions JavaScript finissent par un point virgule ! En fait, il n'est pas obligatoire, mais c'est tout comme. Donc, mettez un point virgule ( ; ) à la fin de chaque instruction.
b) JavaScript, sensible à la casse ?
--------------------------------------------------------------------------------

Oui, le JavaScript est sensible à la casse (faire la différence entre les majuscules et minuscules), contrairement au HTML. Ainsi, la variable "Toto" n'est pas la même que la variable "TotO" ou même "toto".

De même, la fonction "parseInt()" n'est pas la même que la fonction "parseint()" ou même "PARSEINT()"...

L'objet "RegExp" s'écrit tel quel et non "regExp" ni "regexp"...

La propriété "window.document.machin_chose.innerHTML" ne veut rien dire si elle est écrite "window.document.machin_chose.innerhtml" ou même "WINDOW.DOCUMENT.MACHIN_CHOSE.INNERHTML"...

Tout ceci ne vous dit encore rien, mais plus pour très longtemps !
c) Les commentaires
--------------------------------------------------------------------------------

Un commentaire est une "zone libre" de texte qui ne sera pas pris en compte par le navigateur. Vous pouvez y mettre des explications sur ce que vous faites, mettre un copyright, abusez-en, ils sont gratuits et très utiles...

Vous pouvez utiliser des commentaires, sur une seule ligne ou sur plusieurs lignes :

--------------------------------------------------------------------------------
<script language="JavaScript">

// Ceci est un commentaire sur une seule ligne
// Il commence par deux barres obliques (slash)

/* Ceci est un commentaire sur plusieurs lignes
Il commence par un slash et une étoile et se termine par une étoile
et un slash
*/

</script>

--------------------------------------------------------------------------------

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

d) Conseils d'écriture
--------------------------------------------------------------------------------

Le JavaScript ne fait pas attention aux sauts de ligne ni aux espaces. Abusez-en ! Cela coûte presque rien (en octet) et c'est tellement plus clair pour la lecture.
Voici quelques exemples qui ne vous disent rien pour l'instant mais qui vous montrent comment on peut écrire un code lisible :

--------------------------------------------------------------------------------
var a = "Toto"; // Bien. Clair, lisible et tout et tout...
var b="Titi"; // Pas bien. Pas clair, illisible (enfin...)

if(a == "Toto") { // Bien. Clair, lisible et tout et tout...
Mon code JavaScript...
}

if(a=="Toto"){ // Pas bien. Pas clair, illisible (enfin...)
Mon code JavaScript...
}
--------------------------------------------------------------------------------

Ensuite, c'est une question de goût. A vous de trouver votre style d'écriture qui vous plaît le plus.
e) Indentation
--------------------------------------------------------------------------------

Qu'est ce que l'indentation ? Indenter un code est le fait de déclaler les différents blocs qui composent le script. Nous verrons par la suite qu'un script est une suite d'instructions rangées dans un ordre précis et quelques fois dans des blocs d'instructions. Pour définir un bloc d'instructions, il faut définir le début et la fin du bloc. Tout ce qui se trouvera dedans sera une suite d'instructions définie dans un bloc...

Pour décaler ces blocs, chacun a sa méthode, soit la Tabulation ([Tab]), sois l'espace ([Espace]), à vous de choisir votre méthode. Vous pouvez aussi choisir de ne pas intenter votre code, mais là, c'est un risque à prendre pour la relecture quasi-impossible si le script est assez compliqué.

Voici un exemple d'indentation :

--------------------------------------------------------------------------------
function toto() { // Début du bloc 1
if(a == "") { // Début du bloc 2
Code JavaScript.... // Bloc 2 dans Bloc 1
Code JavaScript.... // Bloc 2 dans Bloc 1
Code JavaScript.... // Bloc 2 dans Bloc 1
if(b == "") { // Début du bloc 3
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
for(i = 0; i < 10; i++) { // Début du bloc 4
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
} // Fin du bloc 4
} // Fin du bloc 3
} // Fin du bloc 2
} // Fin du bloc 1

--------------------------------------------------------------------------------

Voici la même chose sans l'indentation :

--------------------------------------------------------------------------------
if(a == "") { // Début du bloc 2
Code JavaScript.... // Bloc 2 dans Bloc 1
Code JavaScript.... // Bloc 2 dans Bloc 1
Code JavaScript.... // Bloc 2 dans Bloc 1
if(b == "") { // Début du bloc 3
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
Code JavaScript.... // Bloc 3 dans Bloc 2 et dans Bloc 1
for(i = 0; i < 10; i++) { // Début du bloc 4
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
Code JavaScript... // Bloc 4 dans Bloc 3, dans Bloc 2 et dans Bloc 1
} // Fin du bloc 4
} // Fin du bloc 3
} // Fin du bloc 2
} // Fin du bloc 1

--------------------------------------------------------------------------------

Vous devez tout de suite comprendre qu'il faut indenter le code !
f) Sauts de ligne
--------------------------------------------------------------------------------

Les sauts de ligne n'ont pas d'importance en JavaScript, faire ceci est tout à fait autoriser :

--------------------------------------------------------------------------------
var ma_variable =
"ma valeur";

--------------------------------------------------------------------------------

Par contre, vous ne pouvez pas faire un saut de ligne en JavaScript dans une chaîne, comme en PHP

, ceci est faux :

--------------------------------------------------------------------------------
var ma_variable = "ma
valeur";

--------------------------------------------------------------------------------

Si vous voulez faire un saut de ligne dans une chaîne, vous devez soit utiliser "\n" soit "<br>" selon ce que vous voulez faire.
...........................................................................................................
Les variables

a) Qu'est ce que c'est ?
--------------------------------------------------------------------------------

Une variable est un emplacement mémoire qui contient des données, comme un livre contient du texte ou comme une boîte de conserve contient des haricots verts...
Il existe différents types de variables, nous les verrons pas la suite dans ce chapitre.
b) Pourquoi ces différences ?
--------------------------------------------------------------------------------

Contrairement au Java, JavaScript n'est pas un langage fortement typé (faire la vraie différence entre les types de variables), mais ceci n'empêche pas que JavaScript n'avance pas à l'aveuglette quand on lui donne deux variables.

Mais dommage, l'opérateur d'addition et l'opérateur de concaténation (mot savant que nous définiront au chapitre Cool

soit le même, mais bon, tant pis !

Alors comment savoir si JavaScript va transformer 1 + 1 en 2 ou en 11 ?

C'est pour cela que l'on a recours à différents types de variables, on va étudier en premier temps, les variables dites "scalaires", c'est à dire des variables qui contiennent juste une (1) donnée, aussi grosse soit-elle...
c) Convention
--------------------------------------------------------------------------------

Une variable est définie par le mot clé var, avec la syntaxe :

--------------------------------------------------------------------------------
var nom_variable = valeur_variable;
--------------------------------------------------------------------------------

Une variable ne doit pas voir le même nom qu'un mot réservé JavaScript.
Aucun espace dans les noms de variables, pour "simuler" un espace, utilisez l'underscore ( _ ).
Tous les caractères alphanumériques, l'underscore ( _ ) et le dollar ( $ ) ( à partir de la version 1.1 ) sont admis.
Une variable ne doit pas commencer par un chiffre.
Les variables sont sensibles à la casse ! Ainsi, la variable "maison" n'est pas la même que la variable "MaiSon" !.
d) Le type "String" ou "Chaîne"
--------------------------------------------------------------------------------

Une chaîne ?
Une chaîne est l'ensemble des caractères qui la compose. On peut y mettre tous les caractères que l'on veut dedans, des alphanumériques (alphabétiques + numériques), des caractères spéciaux ( & # { [ | \ @ ] } = + - * ...) et des "séquences d'échappement"...
Une chaîne est une ligne de caractères dits "isolés", des caractères mis bout à bout pour former des mots, des phrases...
Une chaîne doit commencer par des guillemets (ou par des apostrophes) et se finir par des guillemets si on a commencé par des guillemets et des apostrophes si on a commencé par des apostrophes.
Mais que ce passe-t-il si on veut utiliser la chaîne :

...................................................................................................
Et il m'a dit : "bonjour !"
--------------------------------------------------------------------------------

Le code serait donc :

--------------------------------------------------------------------------------
var ma_variable1 = "Et il m'a dit : "bonjour !""; // Avec des guillemets
var ma_variable2 = 'Et il m'a dit : "bonjour !"'; // Avec des apostrophes
--------------------------------------------------------------------------------

Dans les deux cas, les variables "ma_variable1" et "ma_variable2" sont les mêmes, la première commence et finie par un guillemet ( " ) et la seconde commence et finie par une apostrophe ( ' ).

Tout va bien, alors non ? Mais si on a l'oeil (et le bon...), on peut voir que la valeur de "ma_variable1" est "Et il m'a dit : " avec un espace au bout, et que la valeur de "ma_variable2" est "Et il m" sans espace.

Pourquoi ? C'est logique, la variable "ma_variable1" commence et se finit par un guillemet, la chaîne se finit par le deuxième guillemet rencontré (le premier sert à ouvrir), mais dans cette chaîne, il y en a trois !

C'est la même chose pour la variable "ma_variable2", sauf que le problème vient des apostrophes !

Heureusement, il existe une méthode pour éviter ce problème, c'est le caractère d'échappement. L'anti-slash (backslash, barre inversée, le nom c'est à vous de choisir...) est utilisé pour cet effet. Il se place juste devant le caractère et dit à la machine : "ce qui suit, tu ne t'en occupes pas !", en fait , elle lui envoie des 0 et des 1, mais bon, restons simple et humain !

Voici donc les deux chaînes correctes :

--------------------------------------------------------------------------------
var ma_variable1 = "Et il m\'a dit : \"bonjour !\""; // Avec des guillemets
var ma_variable2 = 'Et il m\'a dit : \"bonjour !\"'; // Avec des apostrophes
--------------------------------------------------------------------------------

Il existe des caractères d'échappement prédéfinis qui nous rendent la vie un peu plus rose, exemple, pour dire à la machine de sauter une ligne ([Entrée]), le tag <br> sert pour l'HTML, mais le JavaScript peut accéder à plus de chose que le simple document HTML, comme une boîte de dialogue, où le code HTML ne sert à rien !

Les codes qui suivent ne servent pas seulement au JavaScript, ce sont les codes "internationaux", ils marchent pour tous les langages :

\n Nouvelle ligne
\r Retour chariot
\t Tabulation
\" Guillemet
\' Apostrophe
\\ Anti-slash
...........................................................................................................
Donc si vous voulez faire une arboressence sous MS-DOS, vous mettrez :

--------------------------------------------------------------------------------
C:\\mon_repertoire\\mon_sous_repertoire\\mon_fichier.txt
--------------------------------------------------------------------------------

Les simples anti-slashs ont été remplacés par des doubles, le premier étant le caractère d'échappement.

Récapitulons :
Une chaîne doit commencer soit par des guillemets, soit par des apostrophes et doit se finir par des guillemets, si on a commencé par des guillemets ou par des apostrophes si on a commencé par des apostrophes !
Si vous utilisez les caractères suivants : " ' [ ] { } \..., vous devez mettre un anti-slash devant ( \ ) !
e) Le type "Number" ou "Numérique"
--------------------------------------------------------------------------------

Dans les langages fortement typés, il existe différents types numériques, en Pascal ou en Java, il existe une différence entre 1 et 1.1 ! Le premier est un nombre entier (integer), le second est ce que l'on appelle un nombre à virgule flottante (float number).

Il existe un autre type de nombre, les nombres avec exposant, 88 s'écrit sous la forme "x^y" où "y" est l'exposant de "x". La forme dite expodentionnelle concerne les nombres en puissance de 10 ( x.10y ), écrit sous la forme xey où "y" est un entier positif ou négatif.

Ainsi 2000 peut s'écrire 2000.000, 44.72135955^2 ou 2e+3 ...
Et -2000 peut s'écrire -2e3 et 0.002 peut s'écrire 2e-3...

Il existe aussi les nombres sous la forme hexadécimale, octale, mais ceci ne nous intéresse pas !

Vous pouvez utiliser des valeurs infiniment grandes (10308) et des valeurs infiniment petites (10-324). Le type numérique s'écrit donc sous la forme :

--------------------------------------------------------------------------------
var mon_nombre1 = 8;
var mon_nombre2 = 8.8;
var mon_nombre3 = 8^8; // 8 puissance 8 = 16777216
var mon_nombre4 = 8e+2; // 8 multiplié par 10 puissance 2 = 800
--------------------------------------------------------------------------------

f) Le type "Boolean" ou "Booléen"
--------------------------------------------------------------------------------

Le type booléen admet que deux valeurs, la valeur true (vrai) et la valeur false (faux), tout ce qui n'est pas vrai est faux et tout ce qui n'est pas faux est vrai en logique binaire. A retenir :
false n'est pas égal à 0 comme en PHP

par exemple.
true n'est pas égal à 1 comme en PHP

par exemple.
Un test logique ( Chapitre 9 ) seulement sur une variable revient à tester si la variable est vraie (contient la valeur booléenne true), ainsi si (toto) revient à faire si (toto égal vrai).
Un test logique avec un opérateur de comparaison ( Chapitre 8 ) revient à tester quelle valeur bouléenne renvoie le test.
true et false sont sensibles à la casse, n'écrivez pas TRUE, ni True, ni FALSE, ni False mais bel et bien true et false !
Vous pouvez vous demander à quoi cela sert, vous le comprendrez très vite !

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

g) Le type "NaN"
--------------------------------------------------------------------------------

Le type NaN est un type de numérique, qui n'est pas un nombre, c'est en fait le résultat d'une opération mathématique sans sens (la division de 0 par 0, la racine carrée d'un nombre négatif, l'arc cosinus d'un nombre supérieur à 1, il existe plein d'exemples...).

NaN est le sigle de "Not a Number", soit en français : "Ce n'est pas un nombre !".

Attention : NaN a été implanté à JavaScript 1.3, si vous avez une version antérieure à JavaScript 1.3, changez de navigateur, ou exprimez clairement ce nouveau type :

--------------------------------------------------------------------------------
var NaN = Math.acos("1.1");

--------------------------------------------------------------------------------

ou

--------------------------------------------------------------------------------
var NaN = 0/0;

--------------------------------------------------------------------------------

Vous pouvez utiliser la racine carrée ( Math.sqrt("-2") )....

Vous pouvez tester une valeur avec la fonction isNaN(), exemple :

--------------------------------------------------------------------------------
var ma_variable = 0/0;
document.write(isNaN(ma_variable));
--------------------------------------------------------------------------------

On demande via la fonction isNaN() si le nombre est du type NaN, la fonction va renvoyer oui (true) ou non (false), dans ce cas là, c'est oui (true), vous savez un peu maintenant à quoi sert le type booléen...
h) Le type "Infinity"
--------------------------------------------------------------------------------

Le type Infinity fait partie de la même classe que le type NaN, c'est un nombre qui n'est pas un nombre, tout le monde aura surement compris que c'est un nombre qui est trop grand (ou trop petit) pour être traîté par JavaScript.

Il a le même problème que NaN, à savoir il a été implanté à JavaScript 1.3, donc si vous voulez l'utiliser avec des versions antérieures :

--------------------------------------------------------------------------------
var Infinity = 1e+500 * 1e+500;
--------------------------------------------------------------------------------

Il existe une fonction qui s'appelle isFinite() qui teste si le nombre est nombre fini.

Elle renvoie false si la valeur n'est pas un nombre valide (NaN), si le nombre est infiniment négatif (NEGATIVE_INFINITY), si le nombre est infiniment positif (POSITIVE_INFINITY) et si le nombre est du type Infinity.

isFinite() renvoie true si le nombre est fini :

--------------------------------------------------------------------------------
var a = 1;
var b = 1e+500;
var c = 0/0;

isFinite(a); // Renvoie true
isFinite(b); // Renvoie false
isFinite(c); // Renvoie false

--------------------------------------------------------------------------------

i) Le type "undefined"
--------------------------------------------------------------------------------

Le type undefined, comme on pourrait le croire, s'applique quand la variable est vide ! Hé bien non !

Si vous créez une variable sans lui donner une valeur, elle est du type undefined jusqu'à temps qu'on lui donne une valeur.

Une variable est du type undefined si vous n'avez pas crée cette variable ou si elle n'existe pas (c'est différent).

Petit exemple :

--------------------------------------------------------------------------------
<script language="JavaScript">
var ma_variable;
document.write(ma_variable);
document.write("<br>");
document.write(ma_variable2);
</script>
--------------------------------------------------------------------------------

Si vous exécutez ce code, l'interpréteur va écrire :

--------------------------------------------------------------------------------
undefined
undefined
--------------------------------------------------------------------------------

L'interpréteur risque aussi de vous alerter qu'il y a une erreur dans le code et ne pas écrire le deuxième undefined.

La première variable a été créée, mais sans valeur, elle est donc du type indéfini (undefined), on ne sait pas si c'est un type chaîne, numérique... Tandis que la deuxième variable n'est même pas créée.

Petite parenthèse : Nous n'avons pas utilisé de guillemet à document.write() pour les variables, tandis qu'oui pour <br>, car <br> n'est pas une variable mais une chaîne, et comme vous avez bien suivi le cours, vous savez qu'une chaîne commence par un guillemet (ou une apostrophe).

On aurait pu créer une variable avec la valeur <br>, cela aurait tout aussi bien marché !

Si on avait mis des guillemets à document.write(ma_variable) (tel que : document.write("ma_variable")), JavaScript aurait imprimé ma_variable et non la valeur de la variable (undefined).

Parenthèse close.
j) Le type "null"
--------------------------------------------------------------------------------

Le type null sert à spécifier une variable sans valeur ! C'est assez complexe et sans interêt pour des scripts simples et un peu complexes.
k) Propriété length
--------------------------------------------------------------------------------

La propriété length contient le nombre de caractères présents dans une chaîne (et non un nombre), on y accède comme ceci : nom_variable.length avec un point entre ma_variable et length.

--------------------------------------------------------------------------------
var a = "azertyuiopqsdfghjklmwxcvbn";
var b = '0123456789'; // Du type String et non Number du fait des apostrophes
var c = a.length; // Contient 26
var d = b.length; // Contient 10
var e = c.length; // Contient undefined car "c" est du type numérique (Number) et non du type chaîne (String)

--------------------------------------------------------------------------------

l) Fonctions
--------------------------------------------------------------------------------

Voici une petite liste des fonctions qui traitent les chaînes :
big()
bold()
charAt()
charCodeAt()
fixed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
toLowerCase()
toSource()
toString()
toUpperCase()
valueOf()

ET LA SUITE DEMAIN

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

Les tableaux

a) Qu'est ce que c'est ?
--------------------------------------------------------------------------------

Un tableau est une rangée de colonnes et une rangée de lignes !

Il regroupe différentes données dans une même variable (un objet, pour être plus précis), pratique pour regrouper des données dans le même nom de variable, par exemple les jours de la semaine, les mois d'une année...

Un tableau est un objet, nous verrons par la suite ce qu'est un objet ( Chapitre 11 ), c'est pour cela qu'on l'instance par le mot clef new. Le nom de l'objet pour un tableau est Array (tableau en anglais) :

--------------------------------------------------------------------------------
var mon_tableau = new Array();
--------------------------------------------------------------------------------

On pourrait traduire ceci en français : "La variable mon_tableau est un nouveau tableau".

Ensuite, pour remplir ce tableau et délimiter les différentes valeurs de ce tableau, on utilise la ressource la plus inépuisable qui exite : les nombres !

Imaginez le tableau comme une commode (simple ?) et que chaque tiroir correspond à un emplacement dans ce tableau, le tiroir du haut renferme les chaussettes, celui juste en dessous les chemises...

Ainsi le tiroir 1 renferme les chaussettes et le tiroir 2 les chemises :

--------------------------------------------------------------------------------
var ma_commode = new Array();
ma_commode[0] = "chaussette";
ma_commode[1] = "chemise";
ma_commode[2] = "pantalons";
--------------------------------------------------------------------------------

Chose qui pourrait vous étonnez, nous les bons vieux français commençont à compter à partir du chiffre 1, sachant qu'il y a dix chiffres dans la base décimale, quel est le dixième ?

En JavaScript on commence à compter à 0, donc les tableaux commencent à 0, si cela vous gêne vraiment, laissez le tiroir 0 vide et utilisez le tiroir 1, en sachant que le tiroir 0 existe mais qu'il est vide...

En JavaScript, on peut préciser la taille du tableau, obliger l'interpréteur à créer un tableau de 13 lignes, même si on n'en utilise que 3 :

--------------------------------------------------------------------------------
var ma_commode = new Array(13);
ma_commode[0] = "chaussette";
ma_commode[1] = "chemise";
ma_commode[2] = "pantalons";
--------------------------------------------------------------------------------

Il existe d'autres écritures pour créer un tableau, comme :

--------------------------------------------------------------------------------
var tiroir1 = "chaussettes";
var ma_commode = new Array(tiroir1,"chemise","pantalon");

--------------------------------------------------------------------------------

Observez l'écriture, on ne met pas de guillemet au premier élément car c'est une variable, tandis qu'aux autres, oui, ce sont des chaînes, et une chaîne commence par un guillemet...

On n'est pas obligé de prendre le même ordre que l'ordre numérique pour les index (mot savant qui veut en fait dire le petit nombre qui se cache entre les deux crochets et qui permet de délimiter les différentes parties du tableau) :

--------------------------------------------------------------------------------
var ma_commode = new Array();
ma_commode[12] = "chaussette";
ma_commode[58] = "chemise";
ma_commode[54] = "pantalons";
--------------------------------------------------------------------------------

Il est bien entendu que la variable ma_commode[0] est du type undefined et que la variable ma_commode[54] et du type String (chaîne) et a pour valeur pantalon.

On peut mettre tout ce que l'on veut dans un tableau, aussi bien du type numérique que booléen, chaîne, tableaux...

Donc si vous êtes perspicace et comme vous savez que les variables peuvent se fauffiler partout, vous serez capable de me donner la valeur de ma_commode[11] de ce script :

--------------------------------------------------------------------------------
var a = 12;
var b = a-1;
var ma_commode = new Array();
ma_commode[5] = "chaussette";
ma_commode[45] = "chemise";
ma_commode[b] = "pantalons";
--------------------------------------------------------------------------------

Suivons le déroulement de ce script, la variable a a pour valeur 12, à la ligne suivante, la variable b reçoit la valeur de la variable a soustraitre de 1, soit 12-1 (11).
La variable ma_commode[b] est la même que la variable ma_commode[11], alors là, vous avez trouvé la valeur de ma_commode[11].

Il faut bien penser que des différentes "lignes" du tableau sont des variables à part entière, soit :

--------------------------------------------------------------------------------
var a = 11;
var couleur_de_mes_chaussettes = new Array();
couleur_de_mes_chaussettes[0] = "bleu";
couleur_de_mes_chaussettes[0+1] = "rouge";
couleur_de_mes_chaussettes[0+2] = "vert";
couleur_de_mes_chaussettes[0+3] = "jaune";
couleur_de_mes_chaussettes[0+4] = "à petits pois";

var taille_de_mes_chaussettes = new Array("12","13","14");

var composition_de_mes_chaussettes = new Array();
composition_de_mes_chaussettes[0] = "coton";
composition_de_mes_chaussettes[1] = "laine";
composition_de_mes_chaussettes[2] = "lycra";
composition_de_mes_chaussettes[3] = "veilles bouteilles de Volvic recyclées";

var lavable_en_machine_point_d_interrogation = new Array();
lavable_en_machine_point_d_interrogation[a] = false;
lavable_en_machine_point_d_interrogation[33] = true;
lavable_en_machine_point_d_interrogation[a+12] = false;
lavable_en_machine_point_d_interrogation[a*3] = false;
lavable_en_machine_point_d_interrogation[4] = true;

--------------------------------------------------------------------------------

Question : quelle est la valeur de lavable_en_machine_point_d_interrogation[33] ? true ou false, réflechissez bien !

Vous avez ici une bonne partie des exemples tordus ou pas pour créer des tableaux.

Info : on appelle ce type de tableau, des "tableaux indexés par des nombres", ou "tableaux de vecteurs", tandis que l'autre type de tableau est celui indéxé par des chaînes, appellé aussi "tableau associatif", "tableau de hachage"...
b) Tableaux indéxés par des chaînes
--------------------------------------------------------------------------------

C'est le même principe que les tableaux indéxés par des nombres sauf que l'index est une chaîne, cela peut être pratique, en Perl (un langage de programmation !), on fait la distinction entre les deux (nombres / chaîne), mais pas en JavaScript :

--------------------------------------------------------------------------------
var ma_commode = new Array();
ma_commode["tiroir 1"] = "chaussettes";
ma_commode["tiroir 2"] = "chemise";
--------------------------------------------------------------------------------

Vous pouvez utiliser des espaces dans vos chaînes, il n'y a pas de problème, et observez la présence des guillemets, car une chaîne commence par un guillemet !

Avec IE et Netscape, vous pouvez utiliser la forme : ma_commode.index, mais dans le cas présent, cela ne marchera pas ! Ni avec IE, ni avec Netscape, vous pouvez utiliser cette notation que s'il n'y a pas d'espace car la chaîne de définition (mot savant que nous étudierons au Chapitre 13 ) est rompue, tandis que là, tout va bien marcher :

--------------------------------------------------------------------------------
var ma_commode = new Array();
ma_commode["tiroir_1"] = "chaussettes";
ma_commode["tiroir_2"] = "chemise";
document.write(ma_commode.tiroir_1);
--------------------------------------------------------------------------------

Ceci s'explique parce qu'un tableau est un objet...
c) Tableau multi-index (Tableau 3D)
--------------------------------------------------------------------------------

Comme je vous l'ai dit, une "ligne" de tableau est une variable à part entière, on peut tout mettre dedans, même des tableaux ? Si j'ai dit tout...

Donc on peut faire des tableaux dans des tableaux qui sont eux même dans des tableaux, et ainsi de suite, ça va vite devenir l'enfer !

On peut rester dans l'ordre du raisonnable si on ne fait pas cent tableaux dans cent tableaux...
Ceci peut être utilisé pour différentes choses, un tableau à 1 index, c'est bien, mais les données sont vite limitées, tandis qu'un tableau multi-index, les données sont illimitées, petit exemple avec la table de vérité de OR (mot savant que nous définirons au Chapitre 8 ...) :

--------------------------------------------------------------------------------
var table = new Array(2);
table[0] = new Array(2);
table[1] = new Array(2);

table[0][0] = 0;
table[0][1] = 1;
table[1][0] = 1;
table[1][1] = 1;

--------------------------------------------------------------------------------

d) Les littéraux de tableaux
--------------------------------------------------------------------------------

Les littéraux de tableaux sont une autre forme d'écriture (pour simplifier). Les données ne sont pas enregistrées dans les variables mais dans des littéraux :

--------------------------------------------------------------------------------
var jour = ["lundi","mardi","mercredi..."];
var mois = ["janvier","février","mars",,,,,,"septembre..."];
var annee = [00,01,02,03,04,05,06];
var chapitre = [1,2,3,[3.1,3.2,3.3],4,5,[5.1],6];
--------------------------------------------------------------------------------

Question : Quelle est la valeur de mois[5], mois[8] ?

Nous allons essayer de résoudre ce problème ensemble, sachant que mois[0] a pour valeur "janvier", et que mois[3] à pour valeur undefined car aucune donnée n'est spécifiée, vous avez tout de suite trouvé que mois[5] avait pour valeur undefined et mois[8] avait pour valeur "septembre..."

Alors, quelle est la valeur de chapitre[3] et de chapitre[3][1] ?

La valeur de chapitre[3] est 3.1,3.2,3.3 et non "3.1,3.2,3.3", et la valeur de chapitre[3][1] est 3.2.
e) La propriété length
--------------------------------------------------------------------------------

La taille d'un tableau (dernière ligne utilisée + 1 (n'oubliez pas le 0)) est disponible à nom_tableau.length, exemple :

--------------------------------------------------------------------------------
var couleur_de_mes_chaussettes = new Array();
couleur_de_mes_chaussettes[0] = "bleu";
couleur_de_mes_chaussettes[1] = "rouge";
couleur_de_mes_chaussettes[2] = "vert";
couleur_de_mes_chaussettes[3] = "jaune";
couleur_de_mes_chaussettes[4] = "à petit pois";
document.write(couleur_de_mes_chaussettes.length);
--------------------------------------------------------------------------------

Et ceci donnera :

--------------------------------------------------------------------------------
5
--------------------------------------------------------------------------------

Tandis que :

--------------------------------------------------------------------------------
var couleur_de_mes_chaussettes = new Array();
couleur_de_mes_chaussettes[0] = "bleu";
couleur_de_mes_chaussettes[1] = "rouge";
couleur_de_mes_chaussettes[2] = "vert";
couleur_de_mes_chaussettes[3] = "jaune";
couleur_de_mes_chaussettes[46] = "à petit pois";
document.write(couleur_de_mes_chaussettes.length);
--------------------------------------------------------------------------------

Donnera :

--------------------------------------------------------------------------------
47
--------------------------------------------------------------------------------

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

Les opérateurs

a) Les opérateurs arithmétiques
--------------------------------------------------------------------------------

On connaît mieux ces opérateurs sous le nom d'opérateurs (de) mathématiques, c'est le quadro des opérateurs d'addition ( + ), de soustraction ( - ), de multiplication ( * -- et non x --) et de division ( / ).
Il en existe un autre moins connu, le modulo ( % ), qui est le reste de la division euclidienne de 2 nombres :

--------------------------------------------------------------------------------
var addition = 96 + 69;
var soustraction = 96 - 69;
var multiplication = 96 * 69;
var division = 96 / 69;
var modulo = 96 % 69;
--------------------------------------------------------------------------------

Et voici les résultats :

--------------------------------------------------------------------------------
addition = 165
soustraction = 27
multiplication = 6624
division = 1.391304347826087
modulo = 27
--------------------------------------------------------------------------------

JavaScript permet aussi le regroupement d'opérations par ordre de priorité arithmétique, exemple 5 + 5 * 5 fait 30 et non 50 !
Si vous voulez imposer vos ordres de priorité arithmétique, utilisez les parenthéses ( (-) ) :

--------------------------------------------------------------------------------
var test1 = 5 + 5 * 5;
var test2 = (5 + 5) * 5;

--------------------------------------------------------------------------------

Et voici les résultats :

--------------------------------------------------------------------------------
test1 = 30
test2 = 50

--------------------------------------------------------------------------------

La précédence des opérateurs (mot savant que je viens d'expliquer avec 5+5*5 et (5+5)*5) est valable avec toutes les sortes d'opérateurs, les arithmétiques, les logiques et les relationnels... !
Les opérateurs arithmétiques ne peuvent être utilisés qu'avec deux entités, deux nombres en l'occurence, ils font partie de la classe des opérateurs binaires (rien à avoir avec les 0 et les 1). Il existe des opérateurs unaires (1) et des opérateurs ternaires (3), nous les véront plus loin dans ce chapitre.

Un opérateur binaire (2) agit avec 2 opérandes, dans "a + b", a est la première opérande, le signe + est l'opérateur, et b est la deuxième opérande.
b) Les opérateurs relationnels
--------------------------------------------------------------------------------

Ces opérateurs servent à effectuer une comparaison sur deux termes, comme ils utilisent deux termes à comparer, ils font partie de la classe des opérateurs dite binaire.
Une comparaison renvoie true si elle est vraie ("3 est égal à 3", "2 est inférieur à 3..."), ou renvoie false si elle est fause ("3 est égal à 5", "12 est inférieur à 11", "5 est différent de 5...").

Il existe 8 opérateurs relationnels :
Opérateur Signification
== Egal à
=== Strictement égal à
!= Différent de
!== Strictement différent de
< Strictement inférieur à
> Strictement suppérieur à
<= Inférieur ou egal à
>= Suppérieur ou egal à

Vous vous demandez surement quelle est la différence entre "égal à" et "scritement égal à" !
Cette différence réside dans le type de variable, non seulement, les opérateurs "==="et "!==" font une comparaison du contenu de la variable mais aussi de son type !

Voici un exemple de tous ces opérateurs, on définit quelques variables :

--------------------------------------------------------------------------------
var a = 3; // type = numérique
var b = 15; // type = numérique
var c = 12; // type = numérique
var d = "15"; // type = chaîne
var e = "12"; // type = chaîne
document.write(a == b); // renvoie false;
document.write(c == e); // renvoie true;
document.write(c === e); // renvoie false;
document.write(a != b); // renvoie true;
document.write(a !== b); // renvoie true;
document.write(a < b); // renvoie true;
document.write(a > b); // renvoie false;
document.write(d < e); // renvoie false;
document.write(d > e); // renvoie true;
document.write(c <= e); // renvoie true;
document.write(c >= e); // renvoie true;
document.write(c <= a); // renvoie false;

--------------------------------------------------------------------------------

Au stade où nous en sommes, nous pouvons commencer à poser des conditions assez complexes :

--------------------------------------------------------------------------------
(a + b - c * d / e - (a - b * c)) === (d * b - a * b)
--------------------------------------------------------------------------------

A vous maintenant de faire le calcul pour savoir si cette condition renvoie true ou false !
Un indice pour vous aider : elle ne renvoie pas false !
c) Les opérateurs bit-a-bit
--------------------------------------------------------------------------------

Comme leur nom l'indique, les opérateurs bit-a-bit font des opérations sur des bits.
Ils travaillent sous des bits par mots de 32, (32 petits 0 ou 1 les uns à la suite), ce qui fait un codage sur 4 octets (1 octet = 8 bits, donc 32/8 = 4).

Pour comprendre la logique binaire ou même ce qu'est le binaire et pour comprendre comment cela marche, lisez cet article du site Comment Ca Marche.

Le binaire n'est pas trop dur à assimiler, mais ce n'est pas facile non plus !
Revenons à nos opérateurs :
Opérateur Symbole En français
NOT ~ (tilde) NON
AND & (ET commercial, (es)perluette...) ET
OR | (pipe, tube) OU inclusif
XOR ^ (accent circonflexe) OU exclusif
<< << Décalage à gauche
>> >> Décalage à groite

Petits exemples :

--------------------------------------------------------------------------------
var a = 10;
a = ~a;
document.write("La valeur de a est : <b>");
document.write(a);
document.write("</b><br>");

var b = 5;
b = b << 3;
document.write("La valeur de b est : <b>");
document.write(b);
document.write("</b><br>");

var c = -10;
c = c >> 3;
document.write("La valeur de c est : <b>");
document.write(c);
document.write("</b><br>");

--------------------------------------------------------------------------------

Et voici les résultats tant attendus :

--------------------------------------------------------------------------------
La valeur de a est : -11
La valeur de b est : 40
La valeur de c est : -2
--------------------------------------------------------------------------------

Vérifions mes dires :
5 en binaire et en 32 bits, c'est 00000000000000000000000000000101 (1 + 4).
Avec un décalage à gauche de 3 bits, cela donne : 00000000000000000000000000101000 soit maintenant 40 (8 + 32 = 40).

Si vous ne comprennez pas, ce n'est pas grave du tout, qui se sert des bits en JavaScript ? Personne ! Alors pas vous !

Assurance Nombre de messages : 32 Date d'inscription : 26/03/2005

chapeau

Assurance Nombre de messages : 40 Date d'inscription : 13/03/2005

il reste a peut pres 20 fois ce que j'ai fait la,mais je vais vous laisser rephelchir encor une bonne semaine avant d'en remettre je croit !

» un script (effet [tutorial]