javascript #6 : objets et tableaux
Post on 05-Jul-2015
232 Views
Preview:
DESCRIPTION
TRANSCRIPT
Javascript : Objets & tableaux
1. Primitive values
A primitive value is a datum that is represented directly at the lowest level of the language implementation. In javascript, one of the types Undefined, Null, Boolean, Number, or String.
Primitive values
http://es5.github.io
Primitives are values, they have no propertieshttp://javascriptweblog.wordpress.com
Primitive values & immutability
var title = 'The Honourable Woman'; title.year = 2014; console.log(title.year); // undefined
Wait a minute …
var title = 'The Honourable Woman'; console.log(title.length); // 20 console.log(title.indexOf('o')); // 5
To be continued …
2. Objets
An object is a collection of properties and has a single prototype object. The prototype may be the null value.
Objets
http://es5.github.io
Objects are aggregations of properties. A property can reference an object or a primitive. http://javascriptweblog.wordpress.com
Objets & propriétés (1)
var tvShow = { title: "True Detective", year: 2014, author: "Nic Pizzolatto" }
console.log(tvShow.title); // True Detective console.log(tvShow['year']); // 2014
console.log(tvShow[0]); // undefined
tvShow.network = "HBO"; console.log(tvShow.network); // HBO
Objets & propriétés (2)
var tvShow = { title: "True Detective", year: 2014, author: "Nic Pizzolatto" }
for(var id in tvShow){ console.log(id + ' -> ' + tvShow[id]); }
// title: True Detective // year: 2014 // author: Nic Pizzolatto
Objets & méthodes
var tvShow = { title: "True Detective", year: 2014, author: "Nic Pizzolatto", fullName: function(){ return this.title + ' by ' + this.author + '(' + this.year + ')'; } }
console.log(tvShow.fullName()); //True Detective by Nic Pizzolatto(2014)
Objets & constructeurs
function TvShow(title, year, author){ this.title = title; this.year = year; this.author = author; }
var trueDetective = new TvShow("True Detective", 2014, "Nic Pizzolatto"); console.log(trueDetective.title); //True Detective var fargo = new TvShow("Fargo", 2014, "Noah Hawley"); console.log(fargo.title); // Fargo
Objets & références (1)
function TvShow(title, year, author){ this.title = title; this.year = year; this.author = author; }
var trueDetective = new TvShow("True Detective", 2014, "Nic Pizzolatto"); var trueDetectiveBis = trueDetective;
trueDetectiveBis.title = "True Detective Bis";
console.log(trueDetectiveBis.title); // True Detective Bis console.log(trueDetective.title); // True Detective Bis
Objets & références (2)function Author(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; }
function TvShow(title, year, authorFirstname, authorLastname){ this.title = title; this.year = year; this.author = new Author(authorFirstname, authorLastname); }
var trueDetective = new TvShow("True Detective", 2014, "Nic", null);
console.log(typeof trueDetective.author); // object console.log(trueDetective.author.firstname); // Nic console.log(trueDetective.author.lastname); // null
trueDetective.author.lastname = 'Pizzolatto'; console.log(trueDetective.author.lastname); // Pizzolatto
3. Tableaux
Tableaux & Objets
Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed.https://developer.mozilla.org
Créer un tableau
var tvShows = ['True Detective', 'Fargo','The Leftovers','Silicon Valley'];
var lostNumbers = [4, 8, 15, 16, 23, 42];
var things = [1, "deux", 3, 4, "five"];
Lire un tableau
var tvShows = ['True Detective', 'Fargo','The Leftovers','Silicon Valley'];
console.log(tvShows[0]); // True Detective
console.log(tvShows[10]); // undefined
Modifier un tableau
var tvShows = ['True Detective', 'Fargo','The Leftovers','Silicon Valley'];
console.log(tvShows[0]); // True Detective
tvShows[0] = 'Gotham';
console.log(tvShows[0]); // Gotham
Ajouter des éléments à un tableau
var tvShows = ['True Detective'];
console.log(tvShows); // ["True Detective"]
tvShows.push('Fargo');
console.log(tvShows); // ["True Detective", "Fargo"]
tvShows.push('The Leftovers','Silicon Valley');
console.log(tvShows); // ["True Detective", "Fargo", "The Leftovers", "Silicon Valley"]
tvShows.unshift('Gotham ');
console.log(tvShows); // ["Gotham ", "True Detective", "Fargo", "The Leftovers", "Silicon Valley"]
Supprimer des éléments d’un tableau
var tvShows = ["True Detective", "Fargo", "The Leftovers", "Silicon Valley"];
console.log(tvShows.shift()); // True Detective
console.log(tvShows); // ["Fargo", "The Leftovers", "Silicon Valley"]
console.log(tvShows.pop()); // Silicon Valley
console.log(tvShows); // ["Fargo", "The Leftovers"]
Tableau et chaine de caractère (1)
var tvShows = ["True Detective", "Fargo", "The Leftovers"];
console.log('Best TV shows of 2014 : ' + tvShows.join(', ')); // Best TV shows of 2014 : True Detective, Fargo, The Leftovers
Tableau et chaine de caractère (2)
var tvShows = "True Detective, Fargo, The Leftovers";
console.log(tvShows.split(', ')); // ["True Detective", "Fargo", "The Leftovers"]
Parcourir un tableau
var tvShows = ["True Detective", "Fargo", "The Leftovers"];
for (var i = 0; i < tvShows.length; i++) { console.log(tvShows[i]); }; // True Detective // Fargo // The Leftovers
Recherche dans un tableau
var tvShows = ["True Detective", "Fargo", "The Leftovers", "Fargo"];
console.log(tvShows.indexOf("Fargo")); // 1 console.log(tvShows.lastIndexOf("Fargo")); // 3
console.log(tvShows.indexOf("Looking")); // -1 console.log(tvShows.lastIndexOf("Looking")); // -1
Tableau associatif ?
Nope, Object literals!
4. prototypes
Objets & prototypes
Chaque objet possède un lien, interne, vers un autre objet, appelé prototype. Cet objet prototype possède lui aussi un prototype et ainsi de suite, jusqu'à ce que l'on aboutisse à un prototype null. null, n'a, par définition, aucun prototype et forme donc le dernier maillon de la chaîne des prototypes.https://developer.mozilla.org
Prototype d’un objet (1)
function TvShow(title, year, author){ this.title = title; this.year = year; this.author = author; }
var trueDetective = new TvShow("True Detective", 2014, "Nic Pizzolatto"); var fargo = new TvShow("Fargo", 2014, "Noah Hawley"); console.log(typeof TvShow.prototype); // object console.log(TvShow.prototype); // TvShow {}
Prototype d’un objet (2)
function TvShow(title, year, author){ this.title = title; this.year = year; this.author = author; }
TvShow.prototype.network = 'HBO';
var trueDetective = new TvShow("True Detective", 2014, "Nic Pizzolatto");
console.log(TvShow.prototype); // TvShow {network: "HBO"} console.log(trueDetective.network); // HBO
Prototype d’un objet (3)
function TvShow(title, year, author){ this.title = title; this.year = year; this.author = author; }
var trueDetective = new TvShow("True Detective", 2014, "Nic Pizzolatto"); console.log(trueDetective.network); // undefined
TvShow.prototype.network = 'HBO'; console.log(trueDetective.network); // HBO
var fargo = new TvShow("Fargo", 2014, "Noah Hawley"); console.log(fargo.network); // HBO
fargo.network = 'FX'; console.log(fargo.network); // FX
Prototype d’un objet (4)
String.prototype.sayYoupi = function() { return 'youpi'; } var test = "test"; console.log(test.sayYoupi()); // youpi
String.prototype.indexOf = function() { return 'nope'; }
console.log(test.indexOf()); // nope
Retour au primitives
var title = 'The Honourable Woman'; console.log(title.length); // 20 console.log(title.indexOf('o')); // 5
String.prototype.returnMe= function() { return this; } var a = "abc"; var b = a.returnMe(); a; // abc typeof a; // string b; // abc typeof b; // object
Merci pour votre attention.
BibliographieEloquent JavaScript - Marijn Haverbeke http://eloquentjavascript.net
JS101 - Alex Young http://daily js.com JavaScript Fundamentals - Jeremy McPeak http://code.tutsplus.com/courses/javascript-fundamentals
Guide JavaScript - teoli, BenoitL, delislejm, Ame_Nomade, SphinxKnight https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide
JavaScript JavaScript … - Angus Croll http://javascriptweblog.wordpress.com
ECMAScript Language Specification - Ecma International http://ecma-international.org/ecma-262/5.1/
Javascript: The Definitive Guide - David Flanagan https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th
CréditsGame of Thrones - David Benioff et D. B. Weiss http://www.hbo.com/game-of-thrones
top related