Comment utiliser la classe Array en JavaScript, php,… ?

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Il s’agit d’un élément indispensable à connaitre en programmation (quelque soit le langage).

Découvrez l’utilisation des tableaux ou comment les tableaux peuvent vous servir à stocker et classer vos données !

Tout est dans le cours vidéos ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment utiliser la classe Array en JavaScript, php,… ?

Bonjour à tous et bienvenu sur développement facile

Dans ce nouveau cours vous allez apprendre à utiliser la classe Array en JavaScript et en PHP. C’est une classe très importante, je vous l’ai dit, les tableaux c’est quelque chose dont on se sert très souvent en programmation.

HTML 5, JavaScript, PHP, CSS et MySQL

Un petit rappel HTML 5 en fait c’est une combinaison de JavaScript, PHP, CSS, MySQL.
À quoi ça sert JavaScript ?
Ca permet de rendre vos pages Web interactives. C’est à dire avec JavaScript, vous pouvez contrôler les formulaires, faire apparaître ou disparaître des menus, créer des fenêtres, adapter une page Web à une résolution d’écran, par exemple, le site qui s’affiche sur un ordinateur, sur un Smartphone, sur une tablette. Vous pouvez manipuler des éléments HTML, créer des animations et même des jeux combinés à JavaScript, avec le HTML 5 tout ça. JavaScript, PHP, CSS, MySQL.
PHP, MySQL ils fonctionnent ensembles, ça permet de stocker et d’ajouter des informations dynamiques sur une page Internet. Et CSS lui s’occupe de toute la mise en forme d’une page Web, d’un jeu, d’un jeu JavaScript ou autre.

Spécificités du JavaScript

Alors revenons, rappelez-vous les cours précédents, sur les principes de programmation. JavaScript possède quelques particularités, c’est l’utilisation, ensemble nous allons voir l’utilisation des types de données, les tableaux, les chaînes de caractères et les booléens avec JavaScript.

Les tableaux en JavaScript

Donc je vous encourage à revoir le cours sur les tableaux, en tout cas la création, l’ajout d’éléments et le parcours de plusieurs dimensions, et avec la syntaxe JavaScript, vous allez découvrir la classe Array, donc vous créez un nouveau tableau, qui contient différents éléments, comme d’habitude, vous avez une propriété length qui vous renvoie le nombre d’éléments dans le tableau, et ensuite, il ne vous reste plus qu’à parcourir votre tableau avec une boucle for et ça va vous permettre d’afficher les différents éléments du tableau. Rappelez-vous l’indexe d’un tableau, la première position d’un tableau c’est 0.
Faites attention c’est une erreur que font souvent les débutants, c’est à dires qu’ils oublient que le tableau commence à zéro et après il y a un décalage lorsqu’ils affichent le contenu de leur tableau.

Les méthodes de la classe Array

Vous avez différentes méthodes dans la classe Array. Donc ses méthodes splice, unshift, push, indexOf, elles sont disponibles avec la classe Array de JavaScript, elles existent aussi en ActionScript et elles existent sûrement dans d’autres langages de programmation et dont le votre sûrement.
Donc aSplice, ça permet de supprimer un élément d’un tableau, donc vous spécifiez au premier paramètre, l’indexe et ensuite le nombre d’éléments d’un tableau à supprimer. Donc vous pouvez supprimer 1, 2, 3, 4 ou 5 éléments d’un seul coup d’un tableau, à partir de la position index que vous choisissez ici.
Unshift, ça ajoute des éléments au début du tableau c’est-à-dire que là, vous allez ajouter l’élément orange au début de votre tableau.
Push, au contraire, ça va ajouter des éléments à la fin de votre tableau.
Et indexOf ça va vous permettre de connaître la position de l’élément que vous avez donné en paramètre, et si l’élément n’existe pas dans le tableau, ça vous retourne la valeur -1.

Il y a d’autres méthodes dans la classe Array, par exemple vous avez la possibilité de créer un nouveau tableau, c’est à dire vous créez un tableau qui contient ananas et mangue, et vous pouvez assembler ces deux tableaux, aFruits et aFruitsNouveau, cela va vous créer un nouveau tableau. Donc comme je vous le dis, la méthode concate ça assemble le contenu de deux tableaux et ça vous retourne un nouveau tableau, tout en sachant que le tableau de départ aFruits n’est pas modifié.
La méthode toString ça renvoi tous les éléments du tableau.
La méthode join ça renvoi une chaîne de caractère qui contient tous les éléments du tableau, et remarquez que vous pouvez ajouter un paramètre optionnel donc un séparateur, pour séparer par un tiret tous les éléments de votre tableau. Donc je vous le re-rappelle, un tableau commence à la position 0.

Les tableaux sont essentiels

Je vais vous montrer un exemple de code source, donc en JavaScript, avec, vous avez créé votre tableau aFruits qui contient différents fruits, vous voulez afficher le fruit à la position, de rappelez-vous 0, 1, et 2 donc ça va afficher banane, ensuite vous voulez parcourir votre tableau, afficher tous les éléments du tableau, vous voulez renvoyer votre tableau sous forme de chaîne de caractères, avec toString, là vous supprimez deux éléments dans le tableau à partir de la position 0, 1, 2 donc ces deux éléments et ensuite vous ajoutez au début de votre tableau orange à la fin de votre tableaux banane et vous pouvez concaténer deux tableau. Donc là c’est un exemple de code source en JavaScript, ça vous montre justement, comment utiliser la classe Array en JavaScript.
Comme je vous l’ai dit, la syntaxe est légèrement différente suivant le langage de programmation que vous utilisez que ce soit du Java, de l’ActionScript, dans le CSS encore un petit peu différent la gestion des tableaux. Et la classe Array simplifie énormément la manipulation des tableaux, sachez que l’Array n’existe pas en C, donc les tableaux sont très pratiques pour stocker et organiser des informations, parcourir une collection de données, par exemple.

A vous de jouer !

Donc là vous trouverez un exemple de code source directement sous ce cours vidéo, et je vous encourage comme d’habitude à utiliser les tableaux dans votre langage de programmation, parcourez des collections de données, manipulez des objets avec les tableaux, posez moi vos questions sous ce cours directement et je vous dis à très bientôt pour le prochain cours sur développement facile.

 

 

[/ppmtoggle][/ppmaccordion]

Téléchargez un exemple de code source

Retrouvez un exemple JavaScript avec les array / tableaux.

Downloads

Dans quels cas, utilisez-vous un tableau plutôt qu’un objet ?

Plusieurs développeurs préfèrent utiliser des tableaux à la place d’un objet. Dans des cas particuliers, cela est très pratique, notamment en php.

Dites-moi, dans les commentaires, vos cas typiques d’utilisation d’un tableau à la place d’un objet.

Créez des Applications Hyper-Intéractives avec la Formation Gratuite JavaScript Facile !

 

3 Comments

  • Laurent

    10 mai

    Bonjour Matthieu,

    Lorsque j’utilise le code source fourni, rien ne s’affiche dans le navigateur, à part le titre ‘résultat’…c’est normal ??

    J’ai essayé sur plusieurs navigateurs, je ne comprends pas…

    merci

    • Matthieu

      10 mai

      Bonjour Laurent,

      Pour tester cet exemple :
      – utilisez firefox avec l’extension Firebug
      – activez Firebug
      – lancez la page main.javascript.html
      – regardez le code source Array.js
      – regardez la sortie debug dans Firebug.

      L’objectif de ce cours est d’enseigner la création de tableau avec JavaScript.
      C’est pour cela, que l’affichage HTML est vide.

      A bientôt,

      Matthieu.

  • Laurent

    10 mai

    Super merci Matthieu pour la réponse, en effet dans firefox avec firebug çà fonctionne, merci.

    Laurent