javascript #6 : objets et tableaux

36
Javascript : Objets & tableaux

Upload: jean-michel

Post on 05-Jul-2015

230 views

Category:

Software


3 download

DESCRIPTION

Javascript #6 : objets et tableaux

TRANSCRIPT

Page 1: Javascript #6 : objets et tableaux

Javascript : Objets & tableaux

Page 2: Javascript #6 : objets et tableaux

1. Primitive values

Page 3: Javascript #6 : objets et tableaux

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

Page 4: Javascript #6 : objets et tableaux

Primitive values & immutability

var title = 'The Honourable Woman'; title.year = 2014; console.log(title.year); // undefined

Page 5: Javascript #6 : objets et tableaux

Wait a minute …

var title = 'The Honourable Woman'; console.log(title.length); // 20 console.log(title.indexOf('o')); // 5

Page 6: Javascript #6 : objets et tableaux

To be continued …

Page 7: Javascript #6 : objets et tableaux

2. Objets

Page 8: Javascript #6 : objets et tableaux

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

Page 9: Javascript #6 : objets et tableaux

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

Page 10: Javascript #6 : objets et tableaux

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

Page 11: Javascript #6 : objets et tableaux

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)

Page 12: Javascript #6 : objets et tableaux

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

Page 13: Javascript #6 : objets et tableaux

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

Page 14: Javascript #6 : objets et tableaux

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

Page 15: Javascript #6 : objets et tableaux

3. Tableaux

Page 16: Javascript #6 : objets et 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

Page 17: Javascript #6 : objets et tableaux

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"];

Page 18: Javascript #6 : objets et tableaux

Lire un tableau

var tvShows = ['True Detective', 'Fargo','The Leftovers','Silicon Valley'];

console.log(tvShows[0]); // True Detective

console.log(tvShows[10]); // undefined

Page 19: Javascript #6 : objets et tableaux

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

Page 20: Javascript #6 : objets et tableaux

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"]

Page 21: Javascript #6 : objets et tableaux

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"]

Page 22: Javascript #6 : objets et tableaux

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

Page 23: Javascript #6 : objets et tableaux

Tableau et chaine de caractère (2)

var tvShows = "True Detective, Fargo, The Leftovers";

console.log(tvShows.split(', ')); // ["True Detective", "Fargo", "The Leftovers"]

Page 24: Javascript #6 : objets et tableaux

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

Page 25: Javascript #6 : objets et tableaux

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

Page 26: Javascript #6 : objets et tableaux

Tableau associatif ?

Nope, Object literals!

Page 27: Javascript #6 : objets et tableaux

4. prototypes

Page 28: Javascript #6 : objets et tableaux

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

Page 29: Javascript #6 : objets et tableaux

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 {}

Page 30: Javascript #6 : objets et tableaux

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

Page 31: Javascript #6 : objets et tableaux

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

Page 32: Javascript #6 : objets et tableaux

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

Page 33: Javascript #6 : objets et tableaux

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

Page 34: Javascript #6 : objets et tableaux

Merci pour votre attention.

Page 35: Javascript #6 : objets et tableaux

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

Page 36: Javascript #6 : objets et tableaux

CréditsGame of Thrones - David Benioff et D. B. Weiss http://www.hbo.com/game-of-thrones