- · Niveau : AVANCÉ
- · Compatibilité : Navigateur 4+
C’est bien beau de pouvoir garder des données dans un tableau mais si chaque donnée contient plus d’une valeur nous ne sommes pas plus avancés. C’est pourquoi un tableau permet non seulement des lignes mais aussi des colonnes à l’image d’un chiffrier.
Créer un tableau à deux dimensions manuellement
Prenons par exemple un tableau qui contient les noms de personnes. Vous pouvez bien sûr les ajouter dans un tableau à une dimension et extraire ensuite le nom et le prénom à l’aide d’une méthode "string.method". Une autre technique consiste à créer un tableau à deux dimensions. Il suffit de créer deux tableaux qui seront ensuite les données ou éléments d’un troisième tableau. La récupération se fait de la même façon qu’un tableau simple. Le premier index référence au tableau x dans le tableau "monTableau" et le deuxième index à la données du tableau x.
<html>
<script type="text/javascript" language="javascript">
<!--
aNoms = new Array("Nom1","Nom2","Nom3");
aPrenom= new Array("Prénmom1","Prénmom2","Prénmom3");
monTableau = new Array(aNoms,aPrenom);
document.write(monTableau.length+"<br />"); // Résultat = 2
document.write(monTableau[0].length+"<br />"); // Résultat = 3
document.write(monTableau[1].length+"<br />"); // Résultat = 3
document.write(monTableau[0][2]); // Résultat = Nom3
document.write(monTableau[1][1]); // Résultat = Prénmom2
// -->
</script>
</html>
Autre technique
aNoms = new Array(["Nom1","Nom2","Nom3"],["Prénmom1","Prénmom2","Prénmom3"]);
document.write(aNoms.length+"<br />"); // Résultat = 2
document.write(aNoms[0][2]); // Résultat = Nom3
document.write(aNoms[1][1]); // Résultat = Prénmom2
Créer un tableau horizontal
Une autre façon de créer un tableau est de définir des propriétés. Bien que plus lisible, cette technique n’offre pas les mêmes capacités dynamiques que les tableaux simples. Par contre, ce peut être très utile dans un tableau à deux dimensions. Je vais créer le tableau de Jours "aJour" qui spécifie 3 propriétés.
aJour = new Array();
aJour.nom = "Dimanche";
aJour.prof = "Lui Même";
aJour.matiere = "Informatique";
Ce tableau n’est pas basé avec un Index. Vous pouvez accéder de deux façons aux données mais utiliser l’index retourne "undefined" ou "null", donc "aJour.length" retournera toujours 0.
document.write( aJour.matiere ); // Résultat = Informatique
document.write( aJour["matiere"] ); // Résultat = Informatique
document.write( aJour[2] ); // Résultat = undefined ou null
document.write( aJour.length ); // Résultat = 0
Tableau à deux dimensions
La grande force des tableaux est de pouvoir créer des tableaux à deux dimensions. En reprenant l’exemple précédent, nous allons créer un tableau de locals dont les données seront un autre tableau des jours de la semaine avec leurs propriétés respectives. J’ai fait une fonction pour créer chaque tableau des journées.
<html>
<script type="text/javascript" language="javascript">
<!--
function fait_Jour(nNom,nProf,nMatiere) {
this.nom = nNom;
this.prof = nProf;
this.matiere = nMatiere;
}
aLocal = new Array(7)
aLocal[0] = new fait_Jour("Dimanche","Luc","Informatique");
aLocal[1] = new fait_Jour("Lundi","Pierre","Mathématique");
aLocal[2] = new fait_Jour("Mardi","Claude","Informatique");
aLocal[3] = new fait_Jour("Mercredi","Simon","Chimie");
aLocal[4] = new fait_Jour("Jeudi","",""); // Le local est vide le jeudi ;-)
aLocal[5] = new fait_Jour("Vendredi","Pierre","Mathématique");
aLocal[6] = new fait_Jour("Samedi","Claude","Mathématique");
// -->
</script>
</html>
Pour récupérer le nom du professeur qui sera dans le local le vendredi vous devez faire:
document.write( aLocal[5].prof ); // Résultat = Pierre
Récupération dynamique
En utilisant l’objet "date()" et la méthode "getDat()" vous pouvez récupérer le numéro du jour de la semaine courante. Puisque cet objet est aussi un tableau basé à zéro, il suffit de passer cette valeur à notre tableau "aLocal" pour accéder aux informations de ce local selon la journée courante. N’est-ce pas merveilleux!
// Disons qu’aujourd’hui c’est mardi
// Donc, le jour 3 (dimanche étant 0 dans l’objet date())
var nJour = new Date();
document.write(nJour.getDay()); // Résultat = 3
document.write(aLocal[nJour.getDay()].prof); // Résultat = Simon
A chaque journée, le résultat sera différent.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion