JavaScript prise en main et fondamentaux

553 vues

Publié le

Fondamentaux du langage Javascript

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
553
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

JavaScript prise en main et fondamentaux

  1. 1. JavaScript Prise en main & Fondamentaux Vincent PETETIN
  2. 2. Historique • Crée il y a presque 20 ans (1995), lorsque Java était à la mode sur Internet • « Java » dans « JavaScript » est purement commercial, seul la syntaxe à été pris comme concept • Typage dynamique : Scheme • Héritage par prototype : Self
  3. 3. Fondamentaux • Les objets • La portée des variables (var, function) • Les fonctions • Le contexte (this)
  4. 4. Fondamentaux - les objects • Dans JavaScript tout est objet • 1 objet = collection de clés/valeurs forme = { couleur: "vert", type: "carré", foo: "yahouu !" }; forme = new Object(); forme.couleur = "vert"; forme.type = "carré"; forme.foo = "yahouu !"; forme = { couleur: "vert", type: "carré", foo: "yahouu !" }; console.log(forme["couleur"]); // vert console.log(forme["type"]); // carré delete forme.foo; for (var propertyName in forme) { console.log(propertyName + ": " + forme[propertyName]); } // couleur: vert // type: carré
  5. 5. Les fondamentaux – portée des variables • Portée = vision de l’interpréteur à un instant t • Portée globale (window dans un navigateur) • 1 fonction = 1 portée • « var » indique de créer une variable visible que pour la portée de création test1 = function () { var x = 1; test2 = function () { var x = 2; test3 = function () { var x = 3; console.log(x); // 3 }(); }(); console.log(x); // 1 }(); console.log(x); // undefined function genericFunctionName() { for (i = 0; i < myArray.length; i++) { console.log(i); } } for (i = 0; i < 10; i++) { genericFunctionName(); } function genericFunctionName() { for (i = 0; i < myArray.length; i++) { console.log(i); } } for (var i = 0; i < 10; i++) { genericFunctionName(); } function genericFunctionName() { for (var i = 0; i < myArray.length; i++) { console.log(i); } } for (i = 0; i < 10; i++) { genericFunctionName(); }
  6. 6. Fondamentaux – portée des variables • Havre de paix (function () { var privateVariable = true; window.init = function () { console.log(privateVariable); } }()); init(); // true console.log(privateVariable); // undefined
  7. 7. • 2 façons de déclarer une fonction : • Implicite (la « mauvaise » façon de faire) : • Explicite (la bonne façon de faire) : Fondamentaux – les fonctions action(); function action() { } var action = function () { }; action(); if (1 == 1) { // l'exécution du code passe ici ... function action() { console.log('a == 1'); } } else { // ... pourtant le compilateur se souvient de cette fonction function action() { console.log('a != 1'); } } action(); // a != 1 if (1 == 1) { // l'exécution du code passe ici ... action = function () { console.log('a == 1'); } } else { // ... cette méthode n'est jamais appelée car la portée à été maitrisée action = function () { console.log('a != 1'); } } action(); // a == 1
  8. 8. • Auto-exécution : • JavaScript est un langage orientée prototype : les fonctions en sous le cœur • 1 fonction = 1 objet avec 1 propriété « prototype » • Opérateur new (prototype.constructor) • Héritage Fondamentaux – particularités des fonctions var autoInit = function () { console.log('hello world'); }(); // hello world var crypto = function () { this.seed = 10; this.version = "V1"; }; var myCrypto = new crypto(); console.log(myCrypto.version); // V1 var crypto = function () { } crypto.prototype.seed = 10; crypto.prototype.version = "V1"; var myCrypto = new crypto(); console.log(myCrypto.version); // V1 var crypto = function () { this.seed = 10; this.version = "V1"; }; var myCrypto = new crypto(); crypto.prototype.writeSeed = function () { console.log(this.seed); }; myCrypto.writeSeed(); // 10 String.prototype.firstChar = function() { return this[0]; } console.log("premier".firstChar()); // p
  9. 9. • Différent des langages de programmation orienté Object (C++, Java,C#) • JavaScript est capable de copier le corps du fonction d’un objet à l’autre • prototype.call permet de fixer le contexte d’exécution d’une fonction Fondamentaux – le contexte (ou this) var user = function () { this.name = "vp"; this.display = function () { console.log(this.name + " !!!"); } }; var user1 = new user(); document.onclick = user1.display; // undefined !!! var user = function () { this.name = "vp"; this.display = function () { console.log(this.name + " !!!"); } }; var user1 = new user(); document.onclick = user1.display; // my document !!! document.name = "my document"; var user = function () { this.name = "vp"; this.display = function () { console.log(this.name + " !!!"); } }; var user1 = new user(); document.onclick = user1.display; // vp !!! document.onclick.call(user1); document.name = "my document";
  10. 10. • Il n’y a pas de classe en JavaScript ! • JavaScript est un langage « orienté prototype » • Prototypage : • Le prototype d’une classe est sa définition Prototypage

×