Affectation données dans un tableau

Version imprimable

Bonsoir,

je sèche sur un truc, j'ai espionné la variable mesContacts , Et je comprend pas pourquoi le contact ne suit pas vers mesContacts[nContact] , car en utilisant la méthode push(nouveauContact) sur le tableau mesContacts c'est censé l'incrémenter vers une place de libre.

J'ai aussi observé en déboguant que le premier contact par défaut dans la variable mesContacts[0] est bien inscrit mais ensuite le deuxieme contact est réécris dessus, l’effaçant donc mais est aussi écris vers mesContacts[1] .

Je débute dans ce langage donc n'hésitez pas apporter des détails que je comprenne bien ^^ .

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//================================ F o n c t i o n   D u   R e p e r t o i r e ===================================================
 
function menuPrincipal() 
{
    var choixMenu = 4;
    while( choixMenu < 0 || choixMenu > 2 )
    {
        console.log("1 : Lister les contacts");
        console.log("2 : Ajouter un contact");
        console.log("0 : Quitter");
        choixMenu = Number( prompt("Choisissez une option : ") );
    }
 
    return choixMenu;
}
 
 
 
function listerLesContacts()
{
    console.log("Voici la liste de tous vos contacts :");
    mesContacts.forEach( function(profil)
    {
        console.log(profil.decrire());
    });
    console.log("\n\n");
}
 
 
 
function ajouterContact(nouveauContact)
{
    nouveauContact.prenom = prompt("Entrez le prenom du nouveau contact ");
    nouveauContact.nom = prompt("Entrez le nom du nouveau contact: ");
 
    mesContacts.push(nouveauContact);
}
 
 
 
//============== Le R e p e r t o i r e =======================
console.log("Bienvenue dans le gestionnaire de contacts !");
 
// Voici mon modèle.
var FormulaireContact = 
    {
        nom: "",
        prenom: "", 
 
 
        init: function(prenom, nom)  // Que j'utiliserais pour les contacts par défaut et peux être aussi utiliser pour effacer un contact en   mettant tout à "undefined".
        {
            this.prenom = prenom;
            this.nom = nom;
        },
 
        decrire: function()
        {
            var description = "Nom : " + this.nom + ", prénom : " + this.prenom;
            return description;
        }
    };
 
 
var mesContacts = [];
var nouveauContact = Object.create(FormulaireContact);
 
// Inscription des contacts par défaut
nouveauContact.init("Carole" , "Lévisse");
mesContacts.push(nouveauContact);
 
 
nouveauContact.init("Mélodie" , "Nelsonne");
mesContacts.push(nouveauContact);
 
 
//========== Lancement des fenêtres ==============================
var CONTINUER = 1, QUITTER = 0;
while(CONTINUER)
{
    switch(menuPrincipal())
    {
        case 0:
            CONTINUER = QUITTER;
            break;
        case 1: 
            listerLesContacts();
            break;
        case 2:
            ajouterContact(nouveauContact);
            console.log("Le nouveau contact a été ajouté");
            break;
 
        default: 
            console.log("Tu as un gros soucis dans le code");
            break;
    }
}
 
console.log("Au revoir !");

merci d'avance.

:salut:

let nouveauContact = Object.create(FormulaireContact); pour le premier nouveau contact, puis nouveauContact = Object.create(FormulaireContact); pour le suivant, etc.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
let FormulaireContact = {
    nom: "",
    prenom: "",
 
    init: function (prenom, nom) {
        this.prenom = prenom;
        this.nom = nom;
    },
 
    decrire: function () {
        let description = "Nom : " + this.nom + ", prénom : " + this.prenom;
        return description;
    }
};
 
let mesContacts = [];
let nouveauContact = Object.create(FormulaireContact);
 
function menuPrincipal() {
    let choixMenu = 4;
 
    while (choixMenu < 0 || choixMenu > 2) {
        console.log("1 : Lister les contacts");
        console.log("2 : Ajouter un contact");
        console.log("0 : Quitter");
 
        choixMenu = Number(prompt("Choisissez une option : "));
    }
 
    return choixMenu;
}
 
function listerLesContacts() {
    console.log("Voici la liste de tous vos contacts :");
 
    mesContacts.forEach(function (profil) {
        console.log(profil.decrire());
    });
 
    console.log("\n\n");
}
 
function ajouterContact() {
    nouveauContact = Object.create(FormulaireContact);
 
    nouveauContact.prenom = prompt("Entrez le prenom du nouveau contact ");
    nouveauContact.nom = prompt("Entrez le nom du nouveau contact: ");
 
    mesContacts.push(nouveauContact);
}
 
// Inscription des contacts par défaut
nouveauContact.init("Carole", "Lévisse");
mesContacts.push(nouveauContact);
 
nouveauContact = Object.create(FormulaireContact);
 
nouveauContact.init("Mélodie", "Nelsonne");
mesContacts.push(nouveauContact);
 
//========== Lancement des fenêtres ==============================
let CONTINUER = 1,
    QUITTER = 0;
 
while (CONTINUER) {
    switch (menuPrincipal()) {
        case 0:
            CONTINUER = QUITTER;
            break;
        case 1:
            listerLesContacts();
            break;
        case 2:
            ajouterContact();
            break;
        default:
            break;
    }
}

16/06/2018, 11h19
inf.ormatique

Salut, dans le cours que je suis nous n'avons pas vue l'utilisation du mots clé let, qu'a t'il de plus par rapport à var. J'aimerais savoir si il y a une solution sans utiliser let
16/06/2018, 13h53
Watilin
let fait tout ce que sait faire var, en mieux. Il n’y a aucun problème à remplacer tous tes var par des let.

Les avantages de let :
- les variables sont locales au bloc actuel (entre accolades {}) et non plus à la fonction, quel que soit le type de bloc (for, if, while, ou même juste des accolades {} comme ça parce qu’on a envie) ;
- les variables globales ne sont plus des propriétés de window, ce qui permet d’éviter des collisions de noms avec les « vraies » propriétés de window qui ne devraient être que les fonctionnalités du navigateur.
16/06/2018, 14h55
inf.ormatique

Du coup, je voudrais tout de même savoir ce qui faisait mal déroulé mon code. Tu évoques la portée des variables, de ce que je sais avec var c'est que les variables sont locales si elles sont utilisées dans une fonction, locale à la fonction donc, dans le cas contraire elles sont dîtes globale n'est-ce pas ?

Dans mon code j'ai bien fait en sorte de créer le modèle FormulaireContact et l'objet nouveauContact à l'exterieur de toutes fonctions afin qu'elle soit globale et utilisable dans tout le fichier.

Ce que je ne parviens pas à comprendre, c'est pourquoi les deux premiers contacts que je rentre ( et les suivant aussi, par l'utilisateur cette fois ) ne se range pas dans le tableau mesContacts les uns derrière les autres mais à l'inverse, écris ( donc écraser ) dans chaque indice du tableau où il y avait déjà un contact d'enregistrer.

Citation:

les variables globales ne sont plus des propriétés de window, ce qui permet d’éviter des collisions de noms avec les « vraies » propriétés de window qui ne devraient être que les fonctionnalités du navigateur.

Les fonctionnalités du navigateur ne sont pas en parfaite adéquation avec l' OS, aurais-tu des exemples ? En quoi la notion de variable globales serait une propriétés de Windows ?

Merci d'avance ; ) J'insiste mais il faut que je comprenne ^^

EDIT : Je viens de comprendre pourquoi cela marche pas, je créer un objet nouveauContact et au fil du programme je le push dans le tableau, sauf qu'à chaque modification de nouveauContact lorsque j'ajoute un contact, la variable nouveauContact se voit modifié et donc forcément tout les indice du tableau précédent utilisant la même variable se voit aussi modifié en même temps.

Je vais réfléchir à comment je peux ajouter un contact dans le tableau sans créer 100 objets nommé nouveauContact1,2,3,.... . N’empêche je reste ouvert aux réponse des questions précédentes ^^

Citation:

Envoyé par inf.ormatique

Du coup, je voudrais tout de même savoir ce qui faisait mal déroulé mon code.

Comme Danielhagnoul l’a dit, il faut instancier chaque nouveau contact avec Object.create. Actuellement, il n’y a qu’un seul appel à Object.create dans tout le déroulement de ton code, et donc c’est à chaque fois le même objet qui est modifié.

Citation:

Tu évoques la portée des variables, de ce que je sais avec var c'est que les variables sont locales si elles sont utilisées dans une fonction, locale à la fonction donc, dans le cas contraire elles sont dîtes globale n'est-ce pas ?

C’est un peu plus compliqué que ça. Pour des raisons historiques, JavaScript tolère qu’on ne déclare pas ses variables, mais c’est considéré comme un oubli. En mode strict, ça génère une erreur, dans le but de nous aider à repérer ces oublis.

Si tu veux qu’une variable soit globale, déclare-la simplement dans le contexte global, avec var ou let.

Citation:

Dans mon code j'ai bien fait en sorte de créer le modèle FormulaireContact et l'objet nouveauContact à l'exterieur de toutes fonctions afin qu'elle soit globale et utilisable dans tout le fichier.

Ce que je ne parviens pas à comprendre, c'est pourquoi les deux premiers contacts que je rentre ( et les suivant aussi, par l'utilisateur cette fois ) ne se range pas dans le tableau mesContacts les uns derrière les autres mais à l'inverse, écris ( donc écraser ) dans chaque indice du tableau où il y avait déjà un contact d'enregistrer.

À vrai dire, le tableau n’entre pas en jeu dans le problème. Pour t’aider à comprendre, prenons un exemple simplifié : j’ai un objet obj et un tableau arr.
Code:

1 2 let obj = {}; let arr = [];
Je peux ajouter l’objet plusieurs fois dans mon tableau :
Code:

1 2 3 arr.push(obj); arr.push(obj); arr.push(obj);
Ce ne sont pas des copies qui sont ajoutées au tableau, mais des références vers un seul et même objet : obj. Tu peux vérifier qu’il s’agit du même objet en utilisant l’opérateur de comparaison :

Code:

console.log(arr[0] === arr[1]); // true

De plus, si tu modifies arr[0], c’est en réalité obj que tu modifies, et les modifications seront reflétées par toutes les références à obj :
Code:

1 2 3 4 arr[0].unePropriete = "une valeur quelconque"; console.log(obj.unePropriete); // "une valeur quelconque" console.log(arr[1].unePropriete); // "une valeur quelconque" console.log(arr[2].unePropriete); // "une valeur quelconque"
En JS, tout est objet, à part les types primitifs qui sont :

les nombres
les chaînes
les booléens (true et false)
les symboles
null
undefined

Ça signifie que {} est un objet, les tableaux sont des objets, les fonctions sont des objets, ainsi que les expressions rationnelles et tous les objets du DOM.

Et tous les objets sont manipulés par référence, donc attends-toi à voir ce mécanisme souvent.

Citation:

Les fonctionnalités du navigateur ne sont pas en parfaite adéquation avec l' OS, aurais-tu des exemples ? En quoi la notion de variable globales serait une propriétés de Windows ?

Merci d'avance ; ) J'insiste mais il faut que je comprenne ^^

Comme je l’ai dit, quand je déclare une variable globale avec var (ou sans mot-clé en mode non strict), elle est automatiquement ajoutée à window :
Code:

1 2 var reponse = 42; console.log(window.reponse); // 42
Ça n’arrive pas avec let :
Code:

1 2 let raton = "laveur"; console.log(window.raton); // undefined
Les globales déclarées avec var peuvent entrer en collision avec des propriétés existantes de window. Par exemple window.innerHeight est une propriété standard (donc indépendante de l’OS) qui renvoie la hauteur actuelle de la fenêtre.
Si je déclare une variable nommée innerHeight, celle-ci va malencontreusement écraser la propriété de window du même nom.
Code:

1 2 var innerHeight = "abricot"; console.log(window.innerHeight); // "abricot"
Avec let, je peux avoir à la fois une variable globale nommée innerHeight, et la propriété window.innerHeight toujours accessible :
Code:

1 2 3 let innerHeight = "abricot"; console.log(innerHeight); // "abricot" console.log(window.innerHeight); // 781

16/06/2018, 18h07
inf.ormatique

Oui voilà tu as très bien expliqué l'erreur que j'ai fait.
Pour le reste j'ai pas du tout étudié la DOM, mais de ce que j'ai compris donc c'est que finalement par exemple la fonction alert() appartiendrais à l'objet window et que le fait que l'on écris dans le code juste alert("Coucou"); c'est comme dire console.log(window.alert("coucou"); et donc par conséquent utilisé var qui appartient à une propriété de l'objet window pourrait rentrer en conflit et rentrerait en conflit en mode strict ( que je ne connaissais pas,dans un but plus pédagogique je pense )

Du coup, de quel manière la méthode alert() de l'objet window est ajouté , n'est pas du sucre syntaxique de l'écrire simplement alert("coucou"); ou le navigateur se dit " T'en fais pas t'es pas le premier qui me fait ça , je m'occupe de tout" ?

En tout cas super intéressent le capot du javascript, enfin je dis capot ca se trouve c'est juste la boite à gant xD !
16/06/2018, 20h14
Watilin

Citation:

Envoyé par inf.ormatique

[…] de ce que j'ai compris donc c'est que finalement par exemple la fonction alert() appartiendrais à l'objet window et que le fait que l'on écris dans le code juste alert("Coucou"); c'est comme dire console.log(window.alert("coucou");

Oui, alert est équivalent à window.alert. Le préfixe window est optionnel, mais parfois on peut avoir envie de le mettre pour lever une ambigüité.
Cette histoire de variables globales, ça marche dans les deux sens : toutes les propriétés de window existent en tant que variables dans la portée globale.

En fait, même la variable window est une propriété de window, ce qui fait qu’on peut écrire window.window, window.window.window, etc. C’est ce qu’on appelle une référence cyclique.

Citation:

[…] en mode strict ( que je ne connaissais pas,dans un but plus pédagogique je pense )

Pas sûr d’avoir bien compris : tu penses que ton professeur / formateur n’a pas parlé du mode strict parce qu’il juge ça plus compliqué ? Je ne suis pas d’accord. Pour moi les débutants devraient utiliser le mode strict, car il donne un cadre plus rigoureux et permet d’éviter des situations « floues » de JS où les erreurs sont difficiles à comprendre.
16/06/2018, 20h56
inf.ormatique

Citation:

Envoyé par Watilin

Pas sûr d’avoir bien compris : tu penses que ton professeur / formateur n’a pas parlé du mode strict parce qu’il juge ça plus compliqué ? Je ne suis pas d’accord. Pour moi les débutants devraient utiliser le mode strict, car il donne un cadre plus rigoureux et permet d’éviter des situations « floues » de JS où les erreurs sont difficiles à comprendre.

Non ,non en fait je suis un cours sur les bases de JavaScript et cela n'a pas été aborder pour le moment.
Donc pour l'utilisation de var ou de let j'ai trouvé ça :

var : crée une variable sans spécification, accessible de n'importe-où dans le code (sauf si dans fonction)
let : comme var, mais si let est inclus dans une condition/boucle/fonction, il n'est pas accessible d'autre part
const : comme let, mais on ne le modifie pas par la suite.

Voilà. Bon bah sujet clos, je vais me remettre à mon exercice du repertoire et contact. Merci beaucoup pour les explications.
Bonne soirée.