Cours ⇒ Javascript et AJAX facebook twitter youtube

Les objets & tableaux | Les objets & tableaux


 Les objets

Javascript n'est pas un langage orienté objet (C++,  ou Java), mais un langage orienté objet par prototype.Les objets contiennent trois choses :

  1. un constructeur
  2. des propriétés
  3. des méthodes.

Par exemple :

<script>
var myString = 'Ceci est une chaîne de caractères'; // On crée un objet String

alert(myString.length); // On affiche le nombre de caractères, au moyen de la propriété « length »
alert(myString.toUpperCase());
// On récupère la chaîne en majuscules, avec la  méthode toUpperCase()
// l'inverse étant la méthode toLowerCase()
</script>

 

Les tableaux

Un tableau,  ou plutôt  un array  en anglais,  est  une variable qui  contient  plusieurs valeurs,  appelées  items.  Chaque item est  accessible au moyen d'un indice (index  en anglais) et dont la numérotation commence à partir de 0.

<script>
var myArray = ['Ahmed', Marie', 'Guillaume', 'Jérôme', 'Jean'];
// Le contenu se définit entre crochets, avec une virgule entre chaque valeur.
// La chaîne 'Ahmed' correspond à l'indice 0, 'Marie' à l'indice 1...
alert(myArray[1]); // Affiche : « Marie »
</script>

On peut modifier une valeur :

<script>
var myArray = ['Ahmed', Marie', 'Guillaume', 'Jérôme', 'Jean'];
myArray[1] = 'Amine';
alert(myArray[1]); // Affiche : « Amine »
</script>

 Opérations sur les tableaux

On peut ajouter des items avec la méthode push() :

<script>
var myArray = ['Marie', 'Amine'];
myArray.push('Ahmed'); // Ajoute « Ahmed » à la fin du tableau
myArray.push('Jérôme', 'Guillaume');
 // Ajoute « Jérôme » et « Guillaume » à la fin du tableau
 alert(myArray );
</script>

La méthode unshift() fonctionne comme push(), excepté que les items sont ajoutés au début du tableau. Les méthodes shift() et pop() retirent respectivement le premier et le dernier élément du tableau.

<script>
var myArray = ['Ahmed', 'Marie', 'Guillaume', 'Jérôme', 'Jean'];
myArray.shift(); // Retire « Ahmed »
myArray.pop(); // Retire « Jean »
alert(myArray); // Affiche « Marie, Guillaume, Jérôme »
</script>

On peut découper une chaîne de caractères en tableau avec split() :

<script>
var cousinsString = 'Ahmed Marie Dylan Amine';
cousinsArray = cousinsString.split(' '); // Avec les espaces, on a trois items
alert(cousinsString);
alert(cousinsArray);
</script>

On fait l'inverse avec join() :

<script>
var cousinsString = 'Ahmed Nadia Paul Guillaume',
cousinsArray = cousinsString.split(' '); // Avec les espaces, on a trois items
var cousinsString_2 = cousinsArray.join('-');
alert(cousinsString_2);
</script>

 Parcourir un tableau

On peut parcourir un tableau avec for :

<script>
var myArray = ['Amine', 'Mathilde', 'Ahmed', 'Nadia', 'Guillaume']; // La length est de 5
for (var i = 0, c = myArray.length; i < c; i++) {
// On crée la variable c pour que la condition ne soit pas trop lourde en caractères
alert(myArray[i]);
// On affiche chaque item, l'un après l'autre, jusqu'à la longueur totale du tableau
}
</script>

 

Les objets littéraux

On peut remplacer  l'indice par un identifiant.  Dans ce cas on crée un objet  (dansl'exemple family). Les identifiants créés (self, sister...) sont des propriétés, avec plusieurs possibilités d'affichage (ce qui convient à toutes les propriétés, également pour  length par exemple). On peut ajouter des données (avec une méthode différente que pour un tableau).

<script>
var family = {
self: 'Amine',
sister: 'Mathilde',
brother: 'Ahmed',
cousin_1: 'Jérôme',
cousin_2: 'Dylane'
};
var id = 'sister';
alert(family[id]); // Affiche : « Mathilde »
alert(family.brother); // Affiche : « Ahmed »
alert(family['self']); // Affiche : « Rafael »
family['uncle'] = 'Pauline'; // On ajoute une donnée, avec un identifiant.
family.aunt = 'Karim'; // On peut ajouter aussi de cette manière.
alert(family.uncle);
 </script>

Parcourir un objet avec for in

On ne peut  pas  parcourir  l'objet  avec  for,  parce  for s'occupe d'incrémenter  des variables numériques. Là on fournit une variable-clé pour le parcours

<script>
var family = {
self: 'Rafael',
sister: 'Mathilde',
brother: 'Ahmed',
cousin_1: 'Jérôme',
cousin_2: 'Guillaume'
};
for (var id in family) { 
// On stocke l'identifiant dans « id » pour parcourir  l'objet « family »
alert(family[id]);
} </script>

 

Exercice

Demandez les prénoms aux utilisateurs et stockez-les dans un tableau.  Pensez à la méthode  push().  À  la  fin,  il  faudra  afficher  le  contenu  du  tableau,  avec  alert(),seulement si le tableau contient des prénoms ; en effet, ça ne sert à rien de l'afficher s'il ne contient rien. Pour l'affichage, séparez chaque prénom par un espace. Si le tableau ne contient rien, faites-le savoir à l’utilisateur, toujours avec alert().

 

<script>
var prenoms = [],
prenom;
while (prenom = prompt('Entrez un prénom :')) {
prenoms.push(prenom); // Ajoute le nouveau prénom ainsi qu'un espace
}
if (prenoms.length > 0) {
alert(prenoms.join(' '));
} 
else {
alert('Il n\'y a aucun prénom en mémoire');
}
</script>

 





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces