Bienvenue H811 sur le Mémento du langage JavaScript

RETOUR HAUT

Définition

JavaScript est un langage de programmation (interprété) de scripts orienté objet :

Constitution

Le code JavaScript distingue :
• les instructions : c'est-à-dire des commandes, des ordres, ou plutôt des actions que l'ordinateur va devoir réaliser.
• assignation de variable,
• exécution de fonction,
• etc ...
Une instruction peut être l'appel d'une fonction. alert('message à afficher'); est une instruction simple, qui appelle la fonction alert.
L'instruction se termine TOUJOURS par un point-virgule.


• les structures : Ne se terminent JAMAIS par un point-virgule.
• les conditions,
• les boucles,
• les fonctions, une fonction est composée de deux choses : son nom, suivi d'un couple de parenthèses (une ouvrante, et une fermante), à l'intérieures desquelles se trouvent les arguments, que l'on appelle aussi paramètres.: nom_fonction(); // "function" veut dire "fonction" en anglais
• etc ...

La syntaxe JavaScript

• il faut TOUJOURS mettre les points-virgules en fin d'instruction.
• le langage JavaScript respecte l'indentation pour une meilleure présentation du code.
• les commentaires :
• Commentaires sur une seule ligne se font avec un double-slash comme ceci
  // Ceci est ma première instruction.
• Commentaires multilignes commence par /* et se termine par */
  /* Ceci est ma première instruction.
  elle permet d'ouvrir une fenêtre
  et d'afficher un message */

L'insertion du code JavaScript

Les codes JavaScript sont insérés au sein d'un élément <script> qui possède un attribut facultatif, en HTML5, type qui sert à indiquer le type de langage que l'on va utiliser. Il prend comme valeur text/javascript, qui est en fait le type MIME d'un code JavaScript.
[...] paramètre facultatif
• Insertion directement dans la page

<script   [type="text/javascript"] > <!– – instructions JavaScript; //– –> </script>

Si vous utilisez les normes HTML 4.01 et xHTML 1.x, il est souvent nécessaire d'utiliser des commentaires d'encadrement des caractères réservés, (comme ci-contre) pour que votre page soit conforme à ces normes. Ils servent à isoler le code JavaScript pour que le validateur du W3C ne l'interprète pas.

Si par exemple votre code JavaScript contient des chevrons < et >, le validateur va croire qu'il s'agit de balises HTML mal fermées, et donc va invalider la page. Une page sans erreurs, c'est toujours mieux.

• Insertion externe, dans un fichier
<script src="fichier.js" > </script>
Il vaut mieux l'usage d'un fichier externe plutôt que d'inclure le code JavaScript directement dans la page : le fichier externe est mis en cache par le navigateur, et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page.
Il est conseillé de placer les éléments <script> juste avant l’élément </body> de la fermeture, pour ne pas ralentir le chargement de la page.

Les variables

La définition d'une variable :

Une variable est un élément qui stocke TEMPORAIREMENT des informations de toute sorte en mémoire : des chiffres, des résultats de calcul, des tableaux, des renseignements fournis par l'utilisateur …

Les caractéristiques des variables :

• nom composé des caractères alphanumériques, autrement dit, les lettres de A à Z et les chiffres de 0 à 9 ; l'underscore (_) et le dollar ($) sont aussi acceptés.
• le nom de la variable ne peut pas commencer par un chiffre et ne peut pas être constitué uniquement de mots-clefs utilisés par le JavaScript.
• le mot réservé var permet de déclarer la variable de cette manière : var nomdevariable;
• Le signe égal "=" sert à attribuer une valeur à la variable.
• quand vous utilisez une seule fois l'instruction var pour déclarer plusieurs variables, vous devez placer une virgule après chaque variable (et son éventuelle attribution de valeur)
  var montant, taux=2.5, total; permet de déclarer 3 variables et d'affecter une valeur à la variable taux.
• les nombres à virgule s'écrivent avec un point.
• déclaration multiple : var myVariable1, myVariable2 = 4, myVariable3; permet de déclarer plusieurs variables.
• affectation multiple : Variable_1 = Variable_2 = 3; permet d'affecter 3 aux deux variables.

Les types de variable :

• Le type numérique (alias number).
  Plusieurs écritures pour les nombres comme :
  • l'écriture décimale var Exemple_decimal = 5.5;
  • l'écriture scientifique var Exemple_scientifique = 3.65e+5;
  • l'écriture hexadécimale var Exemple_hexa = 0x391;
• Les chaînes de caractères (alias string).
  • var text1 = "Mon premier texte est avec des guillemets";
  • var text2 = 'C\'est avec des apostrophes'; // l'utilisation d'un apostrophe à l'intérieur de la variable demande d'être « échapper » : caractère anti-slach
• Les booléens (alias boolean) :
  • Un booléen en logique et en programmation informatique est un type de variable à deux états :condition = TRUE;
  • renvoie TRUE (vrai) ou FALSE (faux) lors du test d'une condition.

  Les booléens

  l'état			valeur de l'octet	Explication
  vrai	TRUE	OUI	1	vérifie la condition lorsque toutes les valeurs qui lui sont passées valent TRUE.
  faux	FALSE	NON	0	renvoie FALSE lorsque la condition NE se vérifie PAS.

  • La fonction confirm('Question ?'); renvoie une booléenne

Tester l'existence de variables ou d'en vérifier son type :

avec l'instruction alert (typeof variable);

• alert(typeof nombre); // Affiche : "number"
• alert(typeof texte); // Affiche : "string"
• alert(typeof Boolenne); // Affiche : "boolean"
pour tester l'existence d'une variable : alert(typeof nothing); // Affiche : "undefined"
• Si le typeof vous renvoie "undefined" c'est soit que votre variable est inexistante, soit qu'elle est déclarée mais ne contient rien.

Les opérateurs arithmétiques :

• En plus des opérateurs que vous connaissez (+,-,*,/), il y en a un autre nommé modulo et noté % qui donne le reste d'une division.
• number += 5; équivaut à number = number + 5;

La concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre.

la concaténation de caractères :
• var pseudo = prompt('Entrez votre pseudo :');
• var message = "Bienvenue " , texte = " dans le cours de JavaScript";
• message += pseudo ;
• message = message + texte;

la concaténation de chiffres :
• var somme_1 = prompt('Entrez un nombre entre 0 et 5');
• var somme_7 = prompt('Entrez un nombre entre 6 et 9');
• var somme_caractere = somme_1 + somme_7;
• alert(typeof somme_caractere); // Affiche : "string"
• alert(somme_caractere); // Affiche la concaténation : 17


la fonction parseInt(somme_1) permet de convertir en nombre, une chaine de caractère (contenant un nombre). Ainsi, la concaténation se transforme en addition.
• var somme_number = parseInt(somme_1) + parseInt(somme_7);
• alert(typeof somme_number); // Affiche : "number"
• alert(somme_number);// Affiche la somme : 8

la concaténation de plusieurs nombres en chaîne de caractère :
• var text, number_1 = 4, number_2 = 2;
• text = number_1 + '' + number_2;
• alert(text);// Affiche : « 42 »
• var somme_caractere = number_1 + number_2;
• alert(somme_caractere);// Affiche la concaténation : « 6 »

Les conditions

• Une condition est un test qui comprend des valeurs à tester et un opérateur (de comparaison OU logique).
• Les différents opérateurs : de comparaison, logique, binaire.



Les opérateurs de comparaison

Opérateur	Description
==	égal à
!=	différent de
===	contenu et type égal à
!==	contenu ou type différent de
>	supérieur à
>=	supérieur ou égal à
<	inférieur à
<=	inférieur ou égal à



var nombre1 = 2, nombre3 = 4, result;
result = nombre1 == nombre3;
alert(result); // Affiche "false"
la condition n'est pas vérifiée car 2 est différent de 4
result = nombre1 < nombre3;
alert(result); // Affiche "true"
la condition est vérifié car 2 est bien inférieur à 4



Les opérateurs logiques

Opérateur	Type de logique	Explication	Exemple
&&	ET	vérifie la condition lorsque toutes les valeurs qui lui sont passées valent true.	valeur1 && valeur2
| |	OU	renvoie true si une des valeurs qui lui est soumise contient true Permet de renvoyer la première variable possédant une valeur évaluée à true. var VIDE = '', PLEIN = 'remplie';alert(VIDE || PLEIN);	valeur1 | | valeur2 affiche une fenêtre JavaScript avec le message : remplie
!	NON	inverse la valeur qui lui est passée, ainsi true deviendra false et inversement.	!valeur



var booleen1, booleen2, result;
les opérateurs de comparaison acceptent deux valeurs en entrée et renvoient un booléen,
booleen1 = 2 > 8; // false
booleen2 = 8 > 2; // true
ET
les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen.
result_booleen = booleen1 && booleen2;
alert(result_booleen); // Affiche "false";



Les opérateurs binaires

Opérateur	Type de logique	Explication	Exemple	En binaire
&	ET	il donne 1 si les deux bits de même poids(1) sont à 1.	12 & 10 = 8	1100 & 1010 = 1000
|	OU inclusif	il donne 1 si l'un ou l'autre de chacun des bits de même poids est à 1.	12 | 10 = 14	1100 | 1010 = 1110
^	OU exclusif	il retourne 0 dans le cas où les deux bits de même poids seraient à 1.	12 ^ 10 = 6	1100 ^ 1010 = 0110
~	NON	il inverse tous les bits de son (unique) opérande.	~12 = 3	~1100 = 0011
>>	décalage à droite	Les bits "sortis" sont perdus, les bits "entrants" sont des 0. La seconde opérande indique le nombre de rangs de décalage.	12 >> 2 = 3	1100 >> 2 = 0011
<<	décalage à gauche		10 << 2 = 8	1010 << 2 = 1000

(1) même poids : à la même position.



• Les types de conditions :

Remarque : Tout d'abord, sachez que les mots-clefs des déclarations if / else et switch / case, doivent s'écrirent en minuscules : ainsi nous aurons : if et non pas IF

• la structure conditionnelle : if (la condition à analyser) { la portion de code à exécuter si la condition se vérifie ;}
• la structure else :
         if (condition) {
              la portion de code si la condition se vérifie
         } else {
              la portion de code à exécuter si la condition NE se vérifie PAS;
         }
• la structure else if :
         if (condition 1) {
              la portion de code si la condition 1 se vérifie
         } else if {condition 2       // Une 2^ème condition est présente et sera testée si la 1^ère échoue.
              la portion de code à exécuter si la condition 1 ne se vérifie PAS et la 2 se vérifie;
         } else {
              la portion de code à exécuter si les conditions NE se vérifient PAS;
         }
• La condition "switch" : permet de faire une action en fonction d'une valeur mais aussi en fonction du type de la valeur
  • case '1' : valeur numérique saisie comme caractère.
  • case  1  : valeur numérique saisie comme caractère et converti comme nombre.
  
         var cours = parseInt(prompt('Choisissez votre option (1 à n) :'));
         switch (cours) {
         case 1:
                alert('Cours de cuisine, ');
         break;
         case 2:
                alert('Cours d\'informatique');
         break;
         ...
         case n
                alert('Cours de bricolage');
         break;
         default:
                alert('Info du jour : cours inexistant.');
         }
• Les ternaires : var_T = var_A ? '5+' : '13'; ou encore var_T = var_A ? 'belle' : 'beau';
• La variable var_T qui va accueillir le résultat de la ternaire.
• La variable var_A qui va être analysée par la ternaire.
• Un point d'interrogation suivi d'une valeur (un nombre, du texte, etc...).
• Deux points suivis d'une deuxième valeur et enfin le point-virgule marquant la fin de la ligne d'instructions.


• Tester une variable comme une booléenne : if (variable_à_controler)
le test d'une variable est une booléenne à false pour :
• un nombre qui vaut zéro
• un nombre NON renseigné équivalent à la valeur NaN
• une chaîne de caractères vide
• la valeur undefined est aussi évaluée ainsi.

Les boucles

L'incrémentation

L'instruction pour incrémenter number = number + 1; peut être remplacée par ces instructions dont voici l'explication de leur différence :


++number	number++
var number = 0; var output = ++number; alert(number);// Affiche : "1" alert(output);// Affiche : "1"	var number = 0; var output = number++; alert(number);// Affiche : "1" alert(output);// Affiche : "0"
L'affectation se fait après l'incrémentation	L'affectation se fait avant l'incrémentation


L'instruction pour décrémenter s'ecrit : number - -; OU - - number;



Définition :

• Une boucle est une structure de contrôle destinée à exécuter une portion de code plusieurs fois.
• Il est nécessaire de définir une condition, qui permette de sortir de cette itération (répétition).
• Selon les boucles, (while) tant qu'une condition de continuation est remplie, ou, qu'une condition de sortie n'est pas remplie.
• Condition de sortie : Quand la condition n'est pas remplie,

Instruction	Explication
forcer la condition à FALSE.	// permet de sortir de la boucle.
mettre BREAK;	// permet de sortir de la boucle.
mettre CONTINUE;	// permet de mettre fin à une itération elle ne provoque pas la fin de la boucle : l'itération en cours est stoppée, et la boucle passe à l'itération suivante.

Les types de boucles :

TYPE	Explication	Exemple
WHILE	Tant que la condition est vraie (true), la série d'instruction est exécutée. à l'intérieur de la boucle, la condition sera à un moment invalidée. var number = 1; while (number < 10) {           number++; }	while (condition){      instruction_1;      instruction_2;      instruction_3; }
DO WHILE	la boucle est toujours exécutée au moins une fois.	do {      instruction_1;      instruction_2; } while (condition);
FOR	facultatif for (initialisation;condition; incrémentation) {      instructions; } for (var iter = 0; iter < 5; iter++) {      instruction_1;      instruction_2; }	for (var message = '', mot; true; [...]) {      mot = prompt('Entrez un mot :');      if (mot) {           message += mot + ' ';      } else {           break;      } } alert(message);

Les variables d'une boucle

Définition :

En JavaScript,
• - Un variable est une information utilisée dans la boucle.
• il est déconseillé de déclarer des variables au sein d'une boucle (entre les accolades).
• Il est conseillé de déclarer les variables avant la boucle : avant un WHILE ou dans le bloc initialisation du FOR.

Portabilité des variables de boucles :

• Mais, une fois que la boucle est terminée, la variable existe toujours, contrairement à de nombreux autres langages (où une variable déclarée dans une boucle est « détruite » une fois la boucle exécutée).
• En JavaScript, on peut donc récupérer la variable déclarée dans le bloc initialisation, une fois la boucle terminée.

Les fonctions

Description

• a pour but de réaliser une action précise.
• reconnaissable par un nom explicite limité aux caractères alphanumériques (dont les chiffres) et aux deux caractères suivants : _ et $.
• elle a éventuellement quelques paramètres.
• « appeler » une fonction signifie « exécuter » son code.
• elle va renvoyer éventuellement un résultat en sortie.
• une fonction peut-être native, il s'agit d'un élément déjà pré-intégré au langage.
• le code écrit dans une fonction s'exécutera lorsque la fonction sera appelée.

Annotation

function   nom_de_ma_fonction ([variable ^{de_l'argument_1}, ..., variable ^{de_l'argument_n}]) {
     // Le code qui sera exécuté
}

Appel de la fonction

nom_de_ma_fonction([argument_1, ..., argument_n]); // On exécute ici le code contenu dans la fonction déclarée.

Les variables globales et les variables locales

• Les variables spécifiques à une seule fonction sont des variables locales.
• Toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction car après l'exécution de la fonction, la variable locale est détruite.
• Les variables globales déclarées en-dehors d'une fonction sont accessibles partout dans votre code, y compris à l'intérieur de vos fonctions.
• La variable locale prend le dessus sur la variable globale de même nom^(a) pendant tout le temps de l'exécution de la fonction.
  Mais une fois la fonction terminée (et donc, la variable locale détruite), c'est la variable globale qui reprend ses droits.
• Il existe une solution pour utiliser la variable globale dans une fonction malgré la création d'une variable locale de même nom.
^(a)déconseillé.

Les arguments

Définition :

• Un argument est une information envoyée en paramètre à la fonction.
• Le passage des valeurs en paramètres à une fonction sont les arguments de la fonction.
• Une fonction peut avoir de 0 à n arguments.
• Ils se placent dans la parenthèse de l'appel de la fonction, séparés par une virgule.
• Ils peuvent être le résultat d'une fonction la saisie au clavier par la la fonction prompt.
• Un argument dans l'appel d'une fonction qui a été passé en paramètre, se retrouve stocké dans la variable écrite entre les parenthèses dans la déclaration de la fonction.
• l'absence d'un argument comme variable dans une fonction qui en attend une, induit la déclaration de la variable par la fonction mais sans qu'elle soit initialisée. cela retourne l'ouverture d'un fenêtre JavaScript avec le message "undefined".
• Il existe aussi des arguments facultatifs que vous n'êtes pas obligés de spécifier.

Portabilité des arguments :

• la variable « nom_de_la_variable » déclarée à la déclaration de la fonction, est créée, au début de l'exécution de la fonction, avec le contenu de l'argument qui a été passé à la fonction
• A la fin de la fonction, la variable, contenant l'argument, est détruite
• Les arguments sont propres à leur fonction, ils ne serviront à aucune autre fonction.

Les arguments facultatifs :

• Doivent être TOUJOURS placés en dernier,
• Doit généralement (mais pas obligatoirement) posséder une valeur par défaut dans le cas où l'argument n'a pas été rempli,
• On teste si la variable (devant contenir l'argument facultatif) est non définie et on lui attribue alors (dans la fonction) la valeur par défaut.

function nom_fonction(text, arg_facultatif) {

if (typeof arg_facultatif === 'undefined') { // vérifier le type d'une variable,

arg_facultatif = false;
}
// ici, le traitement en fonction de la valeur de la variable arg_facultatif
if (arg_facultatif == true) {...}
if (arg_facultatif == false) {...}
}
nom_fonction('Valeur du premier argument'); // On exécute la fonction seulement avec le premier argument, pas besoin du deuxième

Les valeurs de retour

• Cela se fait avec l'instruction return 'variable_à_retourner';
• Cette instruction return met fin à la fonction : les instructions qui suivent au sein de la fonction, ne sont pas exécutées.
• Une fonction ne peut retourner qu'une seule et unique valeur.
• Si on veut retourner plusieurs variables, il faut les placer dans un tableau et retourner ce dernier.
• Mais il est plus commode d'utiliser un objet littéral.
• return { x: 12, y: 21 };

Les fonctions anonymes

• Une fonction anonyme n'a pas de nom.
• Une fonction anonyme permet d'isoler une partie de votre code.
• Les variables créées dans une fonction anonyme, zone isolée, sont détruites, après la fonction.
• Pour déclarer et appeler une fonction anonyme :
• Une fonction anonyme exécutée ultérieurement.
• l'assigner à une variable : La variable devient la « référence » de la fonction.
var FAN = function (arguments) {

ici, les instructions de la fonction

}; // suivi d'un point-virgule après l'accolade fermante de la fonction, car c'est une instruction et non une structure.


• l'appeler par le nom de la variable à laquelle nous l'avons affectée :
FAN (arguments) ;
• Une fonction anonyme exécutée immédiatement.
• l'utilisation de paires de parenthèses.



Type de fonction	Appel de la fonction pour exécuter son code	Explications
Une fonction traditionnelle	Ce qui est équivalent à
Lorsqu'une fonction est déclarée, elle n'exécute pas immédiatement le code qu'elle contient, elle attend d'être appelée. Function nom_fonction(arguments) { ici, les instructions de la fonction } nom_fonction(arguments);	(Function nom_fonction(arguments) { ici, les instructions de la fonction }) ( arguments );	Les 1ère parenthèses (en rouge) permettent de remplacer ce qu'elles contiennent par le nom de la fonction. On obtient ainsi : nom_fonction (arguments); Le 2ème couple de parenthèses (en vert) permettent d'exécuter la fonction.
Une fonction anonyme	abrégées IEF	Immediately Executed Functions
Function (arguments) { ici, les instructions de la fonction }	(Function (arguments) { ici, les instructions de la fonction }) ( );	appeler une fonction annonyme par son nom n'étant pas possible, il n'y a que deux moyens de l'appeler : l'affectation à une variable, et l'appeler par le biais de celle-ci. l'utilisation des deux paires de parenthèses.

Les objets et les tableaux

• La programmation traditionnelle
• permet de différencier les types de données (numériques, chaînes de caractères, etc.).
• ne contrôle pas la nature de ces données.
• En programmation objet,
• On ne manipule plus des données indifférenciées mais des «objets».
• Un objet est un concept, une idée ou une chose. Un objet possède une structure qui lui permet de pouvoir fonctionner et d'interagir avec d'autres objets.
  var nom_variable=4, nom_variable_texte="enfin un objet !", vous_comprenez=true;
  décrit successivement 3 objets qui contiennent respectivement un nombre, une chaîne de caractères ou un booléen.
• C'est pouquoi JavaScript n'est pas un langage «typé» car les variables contiennent toujours la même chose : un «objets», qui peut-être de nature différente.

Les Objets

• Un objet :
• Un objet ou occurence d'objet appartient à une «classe d'objets» (qui est l'ensemble des objets possédant en commun les mêmes caractéristiques et traitements).
• Ces caractéristiques sont appelées « propriétés» seules parties «visibles» d'un objet. Certaines propriétés ne sont visibles que par l'intermédiaire de méthodes de la classe de l'objet.
• Ces traitements sont appelés « méthodes» (qui permettent de modifier l'objet).
• Un point . permet d'accéder aux propriétés et aux méthodes d'un objet.

Propriété OU Méthode	P/M	Explication
nom_variable.length	P	récupère le nombre de caractères, au moyen de la propriété « length ». La propriété length contient ce nombre à la création ou la modification de l'objet.
nom_variable.toUpperCase()	M	récupère la chaîne en majuscules, avec la méthode « toUpperCase() ».
nom_variable.toLowerCase()	M	récupère la chaîne en minuscules, avec la méthode « toLowerCase() ».



• Et enfin, certaines opérations comme le « + » n'auront pas le même sens selon les objets manipulés.
• Classe d'objets JavaScript :
• Les principales classes d'objets JavaScript prédéfinies sont Number, String. Boolean, Array, Date, Function, Global, Math, et Object
• On peut définir une classe d'objets à partir d'une classe existante. La nouvelle classe d'objets «hérite» des propriétés et méthodes de sa «mère».

Les Tableaux

Description

• Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs, appelées items.

Type de Tableaux :

Les Arrays

Annotation

                                                          valeur_item_2
var nom_tableau_Array = [42, 'valeur_item_1', 2, 'valeur_item_3'];      avec l'utilisation de crochets.
var nom_tableau_Array = new array (42, 'valeur_ ...' ,     ... );            Ancienne méthode que tend à disparaître


• Chaque item est accessible au moyen d'un indice (index en anglais) et dont la numérotation commence à partir de 0
  
  nom_tableau_Array[variable_d_indice]
  
  remarque : l'indice est inférieur de 1 à l'item.

Les actions sur le tableau Array

• La méthode push() : ajoute de 1 à n items à la fin d'un tableau :
  • nom_tableau_Array.push ('valeur 1^er item', ... , 'valeur n^ème item');
• La méthode unshift : ajoute 1 ou plusieurs items au début d'un tableau.
  • nom_tableau_Array.unshift ('valeur 1^er item', ... , 'valeur n^ème item');
• La méthode shift() : supprime le 1^er items d'un tableau.
• La méthode pop() : supprime le dernier items d'un tableau.
• alert(nom_tableau_Array); : L'affichage du tableau affiche les items séparées par une virgule.
• La méthode split() : nom_de_la_chaine.split (' '); coupe la chaîne de caractères à chaque fois qu'elle va rencontrer la valeur définie entre ' '.
                           Les parties de la variable ainsi découpée, seront placées dans un tableau, ici nom_tableau_Array = nom_de_la_chaine.split (' ');
• La méthode join() : créer une chaîne de caractères depuis un tableau :
  
  • var nom_de_la_chaine_2 = nom_tableau_Array.join ('-'); alert (nom_de_la_chaine_2);
  • Remarque : le « - » est le caractère choisi qui remplacera le caractère de séparation des éléments du tableau. Sans celui-ci, les éléménts seront collés .
• La méthode toString() : transforme un objet en une chaîne de caractères.

Parcourir le tableau Array

• La propriété length() : récupére le nombre d'items d'un tableau. nom_tableau_Array.length



Exemple d'utilisation

Boucle for Traditionnelle	Boucle for revue pour JavaScript
L'utilisation de cette dernière propriété n'est pas judicieuse dans le bloc de condition d'une boucle, car exécutée à chaque itération cela ralenti la boucle.	Voici une solution, si le nombre d'items du tableau NE change PAS au cours de la fonction.
for (var i = 0   ;   i < nom_tableau_Array.length()   ;   i++) { alert(nom_tableau_Array[i]); }	for (var i = 0  ,  Count=nom_tableau_Array.length()   ;   i < Count   ;   i++) { alert(nom_tableau_Array[i]); }
Dans le bloc condition, nom_tableau_Array.length est utilisé à chaque itération.	En définissant une variable dans le bloc d'initialisation, qui contiendra la valeur de length, nom_tableau_Array.length est utilisé qu'une fois. On utilisera cette variable pour la condition.

Les objets littéraux

• Il existe une possibilité de décrire un tableau sous forme d'un objet littéral, pour accéder à chaque item au moyen d'un identifiant :
• Un Objet littéral est un tableau associatif dont la clef correspondant à l'indice numérique d'un tableau numérique, est remplacé par une étiquette en leur donnant à chacune un nom différent : l'identifiant.
Méthode d'accés :
• Le tableau avec des identifiants est un Objet dont l'identifiant est une Propriété de cet Objet.
  On y accéde comme ceci : nom_de_l_objet.ident2 (vu dans l'accés aux propriétés et aux méthodes d'un objet)
• Manière semblable à celle qui permet d'accéder aux items d'un tableau en connaissant l'indice, spécifiant ici le nom de la propriété :
  nom_tableau_Objet['ident2']; ou bien nom_tableau_Objet[identifiant] avec la variable identifiant alimentée avec 'ident2'.

Annotation

var nom_tableau_Objet = { etiquette1 : 'valeur item 1' , ... , etiquetteN : 'valeur item N' };      avec l'utilisation d'accolades.

Dans un seul tableau, pour enregistrer les coordonnées de quelqu'un (nom, prénom, téléphone, Email, etc.).


• Si le tableau est un Array numéroté, comment savoir que le n°0 est le nom, le n°1 le prénom, le n°2 le téléphone ... ?
• Si le tableau est un Objet littéral avec coordonnees = { nom : 'PRIOUL' , prenom : 'Fabienne' , telephone : '0698834544' , Email : 'osmvs@free.fr' };
• Il est facile de retrouver ainsi l'adresse Email :
coordonnees = { nom : 'PRIOUL', prenom : 'Fabienne', telephone : '0698834544', Email : 'osmvs@free.fr' };
Pour récupérer l'adresse Email :                   coordonnees.Email          OU          coordonnees['Email']          OU          coordonnees[id]      avec var id = 'Email';
• Il est possible de créer chaque case, une à une :
• var nom_du_tableau.nom_itemN='valeurN'; var coordonnees.telephone='0698834544';
• var nom_du_tableau['nom_itemN']='valeurN'; var coordonnees['Email']='osmvs@free.fr';

Parcourir un Objet littéral

TYPE	Explication	Exemple	Tableau
FOR ( ... IN ...)	On stocke l'identifiant dans « id » pour parcourir l'objet « nom_tableau_Objet_litteral » soit une fenetre JavaScript avec // affichera nom_tableau_Objet_litteral['nom'] PRIOUL,      Puis affichera nom_tableau_Objet_litteral['prenom'] Fabienne etc.	for (var id in nom_tableau_Objet_litteral) { alert(nom_tableau_Objet_litteral[id]); }	Objet littéral

Les fonctions natives :

• alert('message à afficher'); permet d'afficher une boîte de dialogue contenant un message.
  Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses de la fonction alert().
• confirm('Question ?');
  • Permet l'ouverture d'une fenêtre en affichant un message.
  • Cela demande une réponse de l'utilisateur sur son choix de valider la toucher 'OK' ou la touche 'Annuler'.
  • Elle retourne un booléen en fonction de l'action de l'utilisateur.
• alert(typeof Variable_d_un_certain_type); Affiche le type de la variable si elle est déclarée :
  
  "number" pour un numérique, "string" pour une chaîne de caractères, "boolean" pour une variable TRUE ou FALSE et undefined si elle n'a pas était renseignée ou définie.
• parseInt(somme_1); permet de convertir une chaine de caractère en nombre.
• prompt('Saisir votre Pseudo');
• Permet l'ouverture d'une fenêtre de saisie en affichant un message.
• Elle renvoie ce que l'utilisateur a écrit sous forme d'une chaîne de caractères.

Les pratiques de développement :

• la redirection vers une autre page
  • <script> document.location="<?php echo 'nom_de_la_page.php'; ?>";< /script>
  • Cela permet une redirection vers la page sans avoir nécessairement cliqué sur un bouton

Manipulation du code HTML

Préambule

• Chaque paire de balises (ouvrante et fermante) étant vue comme un objet en JavaScript, on parlera d'élément HTML, (et non plus de balises HTML) :
• souvent composés d'attributs (l'attribut href d'un <a> par exemple) et/ou d'un contenu (de type #text ou peut aussi être un autre élément HTML).
• possédant des propriétés et des méthodes.


• Versions :

Warning: main() [function.main]: open_basedir restriction in effect. File(../../../INCLUDES/mess_sess_html1.php) is not within the allowed path(s): (/mnt/132/sda/5/4/osmvs) in /mnt/132/sda/5/4/osmvs/TUTORIAL/MEMENTO/JavaScript/JavaScript.php on line 1095

Warning: main(../../../INCLUDES/mess_sess_html1.php) [function.main]: failed to open stream: Operation not permitted in /mnt/132/sda/5/4/osmvs/TUTORIAL/MEMENTO/JavaScript/JavaScript.php on line 1095

Warning: main() [function.include]: Failed opening '../../../INCLUDES/mess_sess_html1.php' for inclusion (include_path='/mnt/132/sda/5/4/osmvs/include:.:/usr/php4/lib/php') in /mnt/132/sda/5/4/osmvs/TUTORIAL/MEMENTO/JavaScript/JavaScript.php on line 1095

Warning: file_exists() [function.file-exists]: Unable to access ../../../ANNEXES/script_insertion_image_flottante.php in /mnt/132/sda/5/4/osmvs/TUTORIAL/MEMENTO/JavaScript/JavaScript.php on line 1127


• Le W3C a publié (pour unifier le code face aux différents navigateurs) une nouvelle spécification « DOM-1 » (pour DOM Level 1) qui définit clairement ce qu'est le DOM, et surtout comment un document HTML ou XML est schématisé. Depuis lors, un document HTML ou XML est représenté sous la forme d'un arbre, ou plutôt comme une hiérarchie d'éléments.
  
  Ainsi, l'élément <html> contient deux éléments enfants : <head> et <body>, qui à leur tour contiennent d'autres éléments enfants. <meta> ne contient pas d'enfant tandis que <title> en contient du texte, élément de type #text.


• Ensuite, la spécification « DOM-2 » a été publiée. La grande nouveauté de cette version 2 est l'introduction de la méthode getElementById() qui permet de récupérer un élément HTML ou XML en connaissant son ID.

Objectif

Voir le DOM, API qui s'utilise avec les documents XML et HTML, et qui va nous permettre, via le JavaScript, d'accéder au code XML et/ou HTML d'un document. C'est grâce au DOM que nous allons pouvoir modifier, ajouter, déplacer ou même supprimer des éléments HTML (afficher ou masquer un <div> par exemple).

Introduction

• Chaque « élément » est appelé « nœud » (node en anglais).
  Du texte présent dans une page Web est vu par le DOM comme un nœud de type « #text ».


• L'objet « window » est ce qu'on appelle un objet global qui représente la fenêtre du navigateur. C'est à partir de cet objet que le JavaScript est exécuté.
  « window » est un objet implicite. Donc « alert » est en faite une méthode de cet objet :
  : window.alert('Hello world!');
  • Mais, les fonctions comme isNaN(), parseInt() ou encore parseFloat() ne dépendent pas d'un objet. Ce sont des fonctions globales.


• De même :
  • une variable globale, utilisée dans une fonction anonyme, peut-être appelée ainsi :
    : alert(window.variable_globale);
  • toute variable non déclarée, absence du mot-clé « var » (déconseillé) deviendra immédiatement une propriété de l'objet window, quel que soit l'endroit où elle sera utilisée.


• « document » est un sous-objet de window, représentant la page Web et plus précisément la balise <html>. C'est grâce à cet élément là que nous allons pouvoir accéder aux éléments HTML et les modifier. Voyons donc, dans la sous-partie suivante, comment naviguer dans le document.

La propriété « innerHTML »

• Elle permet d'accéder au contenu d'un élément HTML.
• Ce n'est pas une propriété standard du DOM mais elle est très utile pour les scripts nécessitant la performance (et les scripts simplistes)
• A longtemps été une propriété non standardisée, mais depuis le HTML5 elle est reconnue par le W3C
• Avec la propriété « innerHTML », Il est plus rapide — à écrire et à exécuter —
  • Pour rajouter des centaines d'éléments à une page, ou,
  • Pour remplacer toute une zone de notre page avec du nouveau contenu, ou,
  • Quand on veut supprimer tous les enfants d'un élément.
  que de le faire qu'avec le « DOM ».
• Mais il faut rester prudent sur son utilisation. En utilisant (mal) innerHTML on peut « casser » le (x)HTML et les performances auxquelles on s'attendait.

Accéder aux éléments

L'objet document possède trois méthodes principales :
• document .getElementById('le nom de id recherché') :
  ==> Accéde à un élément en connaissant son ID qui est simplement l'attribut id de l'élément.
  
  
• 
Voir exemple d'utilisation :

<div id="myDIV" >
<p>Un peu de texte <a>et un lien</a></p>

</div>
<script>
var selection = document.getElementById('myDiv');
alert(selection);


</script>
• élément HTML, Objet.getElementsByTagName('valeur') :
  ==> Récupère, sous la forme d'un tableau, tous les éléments identiques à celui demandé.
  ==> Si, dans une page, on veut récupérer :
  valeur='DIV' ==> tous les <div>
  valeur= '*' ==> tous les éléments HTML contenus dans l'élément ciblé (ici, document)
  ==> Cette méthode est accessible sur n'importe quel élément HTML et pas seulement sur l'objet document.
  
  
• 
Voir exemple d'utilisation :
var selection = document.getElementsByTagName('div');
for (var i = 0, c = selection.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + selection[i]);
}
• élément HTML, Objet .getElementsByName('nom de l'attribut name') :
  ==> Récupère uniquement les éléments qui possèdent un attribut name que vous spécifiez.
  L'attribut name
  • n'est utilisé qu'au sein des formulaires,
  • est déprécié depuis la spécification HTML5 dans tout autre élément,
  • peut être utilisé pour un élément <input> mais pas pour un élément <map>
  • est dépréciée en XHTML mais est maintenant standardisée pour l'HTML5.

Autres moyens d'accéder aux objets :
• querySelector('élémt_pos_n^-n ... élémt_pos_n^-2 élémt_pos_n^-1 élémt_pos_n ') et querySelectorAll(valeur) :
  ==> Récupère tous les éléments que vous spécifiez dans le paramètre.
  • Paramètre : Un seul argument : une chaîne de caractères contenant noms de balises, de class , d'ID, ...
  #menu .item span
  • Récupère les élèments de type "sélecteurs CSS, tels ceux figurants dans un fichier CSS", cité dans le paramètre en position n contenus dans les éléments de type cité en position n^-1 eux-mêmes contenus dans un élément de type cité en position n^-2, ...
  sélectionner les balises de type <span> contenues dans les classes .item elles-mêmes contenues dans un élément dont l'identifiant est #menu
  • Simplification de la sélection d'éléments dans l'arbre DOM.
  • NE sont PAS supportées par les vieilles versions des navigateurs. Leur support commence à partir de la version 8 d'Internet Explorer.
  • Ces deux méthodes supportent aussi les sélecteurs CSS 3. Vous pouvez consulter leur liste sur la spécification du W3C.
  Nous reverrons ultérieurement cette partie
  
• 
Voir exemple d'utilisation :
<div id="menu" >
<div class="item">
<span>Élément 1</span>
<span>Élément 2</span>
</div>
<div class="publicite">
<span>Élément 3</span>
<span>Élément 4</span>
</div>
</div>
<div id="contenu">
<span>Début du contenu de la page...</span>
</div>
var query = document.querySelector('#menu .item span'), queryAll = document.querySelectorAll('#menu .item span');
alert(query.innerHTML);                                                            // Affiche : "Élément 1"
alert(queryAll.length);                                                                 // Affiche : "2" (c'est à dire nombre d'éléments.)
alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML);    // Affiche : "Élément 1 - Élément 2"

L'héritage des propriétés et des méthodes

Nous reverrons ultérieurement cette partie
Rappel : Les éléments possédent des propriétés et des méthodes, dont certaines sont communes.


• En anglais inheritance.
• Est un principe propre à la programmation orientée objet, permettant de créer une nouvelle « classe dérivée » à partir d'une classe existante.
• Contient les attributs et les méthodes de sa superclasse (la classe dont elle dérive).
• Son intérêt majeur est de pouvoir définir de nouveaux attributs et de nouvelles méthodes pour la classe dérivée, qui viennent s'ajouter à ceux et celles héritées.


• L'objet « Node ou Noeud » apporte un certain nombre de propriétés et de méthodes qui pourront être utilisées depuis un de ses sous-objets.
• Réciproquement, les sous-objets héritent des propriétés et méthodes de leurs objets parents.

Editer les éléments HTML, c'est à dire les modifier

Comme dit précédemment, un élément HTML est un objet qui appartient à plusieurs objets, et de ce fait, qui hérite des propriétés et méthodes de ses objets parents.

Après avoir accéder à un élémént HTML, il est possible d'agir sur lui, grâce à deux méthodes :
• getAttribute('le nom de l'attribut') :
  ==> permettant de récupérer un attribut avec comme seul paramètre, le nom de l'attribut.
• setAttribute('le nom de l'attribut','la nouvelle valeur a donner à l'attribut')
  ==> permettant, après avoir récupéré l'attribut, de l'éditer (modifier) avec comme
  • 1^er paramètre, le nom de l'attribut, et
  • 2^ème paramètre, la nouvelle valeur à donner à l'attribut.

• 
Voir exemple d'utilisation : Un lien modifié dynamiquement vers le site : osmvs.

Un lien modifié dynamiquement vers le site : <a id="monLien" href="http://osmvs.free.fr" >osmvs
<p>Un peu de texte <a>et un lien</a></p>
</a>
<script>
document.getElementById('monLien').innerHTML="du don du sang";
var selection = document.getElementById('monLien'); // Accés à l'élémént HTML dont l'ID est nommé
var hreference = selection.getAttribute('href'); // On récupère l'attribut « href »
alert(hreference);
selection.setAttribute('href', 'http://www.dondusang.net'); // On modifie dynamiquement l'attribut « href »







</script>