Salut ! J'ai besoin de ton aide pour mon travail !Bonjour Arthur, qu'est ce que je peux faire pour toi?
Je dois apprendre le javascript en une semaine, pour commencer à travailler sur une application web au travail, tu pourrais m'aider?En une semaine? Je pense qu'on peut faire le tour des bases javascript sur ce délai, je te propose que l'on commence par les variables.
Ok, je te fais confiance je n'y connais rien !Les types de variables
Les types simples
Pour commencer, sais tu ce qu'est une variable?
Quelque chose qui change souvent?Pas tout à fait. En fait c'est un moyen informatique d'enregistrer une information dans un éléments nommé, que l'on pourra récupérer plus tard et l'utiliser ou la modifier. Elles nous permettent de conserver ces informations en mémoire et les transmettre à des fonctionnalités qui vont en avoir besoin. Par exemple, il existe la fonction console.log en javascript qui permet d'afficher un message dans la console.
{"language":"application/json","content":"console.log(\"Hello world\");//affiche \"Hello world\"","filename":""}
Et bien, plutôt que de passer directement la chaine de caractère "Hello world" au console.log, on pourrait le stocker dans une variable pour lui passer :
{"language":"application/json","content":"var hello = \"Hello world\";\nconsole.log(hello);//affiche \"Hello world\"","filename":""}
Jusque là je te suisPour commencer, il faut savoir qu'il existe beaucoup de type de variables différents, pour te faire une première liste non exhaustive on a :
- Boolean : une valeur qui ne peut être que "vrai" ou "faux", "true" et "false" en anglais
- String : une chaine de caractère, comme je te l'ai montré dans l'exemple précédent
- Number : un nombre
Et comment on fait pour définir le type de la variable?En javascript c'est gérer automatiquement en fonction des données que tu va lui affecter
Affecter?Oui, c'est le verbe pour dire "la valeur que l'on donne à une variable", par exemple la ligne que j'avais écrit tout à l'heure s'appelle une affectation :
{"language":"application/json","content":"var hello = \"Hello world\";","filename":""}
Et le symbole = utiliser dans ce cadre là s'appelle un opérateur d'affectation.
Ok je retiens ça !Par contre une fois qu'une variable est crée, on peut facilement connaitre son type avec l'opérateur "typeof" par exemple :
{"language":"application/json","content":"var chaine = \"Hello world\";\nvar nombre = 27.5;\nvar bool = true;\n\nconsole.log(typeof chaine);//affiche \"string\"\nconsole.log(typeof nombre);//affiche \"number\"\nconsole.log(typeof bool);//affiche \"boolean\"","filename":""}
Il existe un autre type simple de variable que l'on va utiliser assez souvent, c'est le "undefined"
Euh, ça veux dire "non définit"?Exactement, c'est une valeur non définit, pour le moment nous n'en verrons pas beaucoup, mais quand on parlera des fonctions tu verra que c'est très souvent utile !
Les types complexes
Il existe aussi des type complexes en javascript.
Je sens que ça va être compliqué...Pas tellement, on parle de type complexe, car on ne peut pas les afficher comme s'ils étaient des chaines de caractères, les deux types principaux sont array et object.
Array représente un tableau, ou si tu préfère c'est une variable avec des cases, et on peut affecter une valeur différente dans chaque case. On utilise les crochet [] pour définir un nouveau tableau.
{"language":"application/json","content":"var tableau = [];","filename":""}
Pour définir des valeur à la création du tableau, il suffit de placer ces valeurs à l'intérieur des crochets et de les séparer par des virgules :
{"language":"application/json","content":"var tableau = [1,3,5,7];","filename":""}
Et on a ensuite beaucoup de fonctions qui nous permettent de manipuler les données du tableau, par exemple, push permet d'ajouter un éléments à la fin du tableau :
{"language":"application/json","content":"var tableau = [1,3,5,7];\ntableau.push(9);\nconsole.log(tableau); //affiche [1,3,5,7,9]","filename":""}
Il faut tout de même retenir, par défaut un tableau est indexé, c'est à dire qu'il y a un numéro pour chaque case du tableau. L'index de la première case est le 0, et ensuite au augmente de 1 à chaque fois, donc on peut récupérer les données du tableau pour les afficher de la façon suivante :
{"language":"application/json","content":"var tableau = [1,3,5,7];\n\nconsole.log(tableau[0]);// affiche 1\nconsole.log(tableau[1]);// affiche 3\nconsole.log(tableau[2]);// affiche 5\nconsole.log(tableau[3]);// affiche 7","filename":""}
Quant au type Object, il représente un objet, on en verra plus quand on parlera de la POO, mais pour faire simple c'est comme un tableau, sauf que chaque case est nommée. On le définit avec des accolades pour ce que l'on appelle un objet anonyme :
{"language":"application/json","content":"var objet = {\n\t\"nom\": \"Vaast\",\n\t\"prenom\" : \"Aurélien\",\n\t\"age\" : 33\n};","filename":""}
Ici cet objet a trois propriétés, c'est le nom que l'on donne à chaque variable nommé d'un objet. On pourra facilement manipuler les propriétés d'un objet avec l'opérateur ".", par exemple si je souhaite accéder au prénom de l'objet créer précédemment pour l'afficher dans la console, il suffit de faire :
{"language":"application/json","content":"var objet = {\n\t\"nom\": \"Vaast\",\n\t\"prenom\" : \"Aurélien\",\n\t\"age\" : 33\n};\n\nconsole.log(objet.prenom); //affiche \"Aurélien\"","filename":""}
Ok, je pense que j'ai tout compris jusque là.Juste un dernier détail, on parle de type complexe aussi parce qu'on ne peut pas définir à l'avance combien de niveau de données il va y avoir dans un tableau ou un objet.
C'est à dire?Et bien tout simplement qu'une case d'un tableau peut très bien être un autre tableau, ou un objet, et une propriété d'un objet, peut tout aussi être un tableau ou un autre objet. Pour te donner un exemple simple, voici un tableau qui représente les salariés d'une entreprise :
{"language":"application/json","content":"var salaries = [{\n\t\"nom\": \"Dupond\",\n\t\"prenom\": \"Jean\",\n\t\"age\": 31,\n\t\"poste\": {\n\t\t\"titre\": \"Ingénieur étude et développement\",\n\t\t\"dateEntree\" : \"17/10/2017\"\n\t}\n},{\n\t\"nom\": \"Dufresne\",\n\t\"prenom\": \"Marina\",\n\t\"age\": 24,\n\t\"poste\": {\n\t\t\"titre\": \"Chef de projet\",\n\t\t\"dateEntree\" : \"02/01/2019\"\n\t}\n}];","filename":""}
Effectivement, je commence à bien sentir le côté "complexe" ...Ce n'est pas très compliqué en soit, c'est un tableau avec deux cases, la première contient un objet qui représente le premier employé, et ligne 9 on a une virgule qui permet de séparer la deuxième case avec le deuxième employé.
Ensuite dans chaque employé on a des propriétés simples, nom, prénom et age, mais aussi une propriété sous fomr d'un autre objet, qui contient le titre du poste et la date d'entrée en service. Si par exemple on voulait récupérer le titre du poste du premier employé il suffirait de faire :
{"language":"application/json","content":"var salaries = [{\n\t\"nom\": \"Dupond\",\n\t\"prenom\": \"Jean\",\n\t\"age\": 31,\n\t\"poste\": {\n\t\t\"titre\": \"Ingénieur étude et développement\",\n\t\t\"dateEntree\" : \"17/10/2017\"\n\t}\n},{\n\t\"nom\": \"Dufresne\",\n\t\"prenom\": \"Marina\",\n\t\"age\": 24,\n\t\"poste\": {\n\t\t\"titre\": \"Chef de projet\",\n\t\t\"dateEntree\" : \"02/01/2019\"\n\t}\n}];\n\nconsole.log(salaries[0].poste.titre);// affiche \"Ingénieur étude et développement\"","filename":""}
Effectivement, vu comme ça, ça parait simple à utiliser.La portée des variables
Pour les types de variables ont a vu les bases, maintenant il reste une chose importante à connaitre et comprendre : la portée des variables !
Comment ça? On peut les porter?Pas du tout, c'est un concept qui permet de définir dans quelle portion de code une variable existe.
Ah elle n'existe pas toujours quand elle est affectée?Pas nécessairement non, tout dépend comment on va la créer justement ! Mais avant d'en parler, on va déjà voir ce que l'on appelle une portée. C'est en fait une portion de code entourée d'accolades.
Mais... les accolades ce n'est pas pour définir un objet?Si, aussi, mais selon le contexte dans lequel tu utilises les accolades ça pourra être une portée ou un objet anonyme. On a vu tout à l'heure dans le cas d'une affectation, ça crée un objet anonyme, mais si par exemple tu utilises des accolades pour entourer des instructions, ça va créer une portée :
{"language":"application/json","content":"var hello = \"Hello world\";\n{\n\tconsole.log(hello);//affiche \"Hello world\"\t\n}","filename":""}
Tout à l'heure je t'ai montré que l'on pouvait créer une variable avec le mot clé "var", mais il en existe d'autre qui vont changer la portée de la variable. Il y a le mot clé let, la différence est que le var crée une variable globale, alors que le let crée une variable scoped, c'est à dire qui n'existe que dans la portée.
Pour te donner deux exemples :
{"language":"application/json","content":"var x = 1;\nlet y = 2;\n\n\nconsole.log(x); // affiche 1\nconsole.log(y); // affiche 2","filename":""}
Celui ci n'as pas d'impact étant donnée que nous n'avons pas définit de portée, par contre celui là :
{"language":"application/json","content":"{\n\tvar x = 1;\n\tlet y = 2;\n}\n\n\nconsole.log(x); // affiche 1\nconsole.log(y); // affiche \"Uncaught ReferenceError: y is not defined\"","filename":""}
Car la variable y a été définit dans une portée, et ensuite on sort de la portée et elle n'existe donc plus !
Ok, je comprend, donc on utilise des let à l'intérieur des portées et sinon on utilise des varNon, c'est un peu plus compliqué que ça, déjà on ne va jamais, ou alors extrêmement rarement définir une portée juste pour le plaisir, tu verras ça plus tard, mais de nombreuses structures du javascript vont directement crée une nouvelle portée, comme les fonctions par exemple. Et il faut donc bien prévoir ses portées variables pour cela.
Il existe un autre mot clé pour définir une variable, le "const". Il va permettre de définir une constante, c'est à dire une variable qui une fois affecter ne peux plus être modifiée. Cette variable utilise le même niveau de portée qu'un let, voici un dernier exemple :
{"language":"application/json","content":"let num1 = 10;\nconsole.log(num1);//affiche 10\nnum1 = 25;\nconsole.log(num1);//affiche 25\n\nconst num2 = 10;\nconsole.log(num2);//affiche 10\nnum2 = 25;//affiche \"uncaught TypeError: Assignment to constant variable.\"","filename":""}
Voilà, tu sais tout, ou presque sur les variables Javascript, on se revoit demain pour la suite !
Merci, je vais retravailler un peu tout ça pour être sûr d'avoir bien compris, et je suis impatient d'être demain !J'ai terminé cette partie