TP : tableau

Récupérer les données

fichier ⇀⇀⇀

JS Bin on jsbin.com

Calcul des moyennes d'age par sex

exemple pour sex=M

• nb =21
• age = [73, 34, 90, 72, 47, 91, 28, 40, 67, 66, 63, 45, 68, 75, 71, 45, 54, 92, 41, 60, 73]
• moyenne = 62

Affichage

Name	sex	born	died	age	ecart/moyenne
dupont	znz	1832	1905	73	11
dupond	f	1876	1905	29	-26
dupont	ana	1850	0	0	0

Fonctions de filtre

function filter(array, test) {
  var passed = [];
  for (var i = 0; i < array.length; i++) {
    if (test(array[i]))
      passed.push(array[i]);
  }
  return passed;
}

code

AJAX + fx on jsbin.com

Nous pourrions ne pas utiliser tab.foreach, mais écrire nous même une fonction équivalente.

function map(array, transform) {
  var mapped = [];
  for (var i = 0; i < array.length; i++)
    mapped.push(transform(array[i]));
  return mapped;
}

voici une bibliothèque qui implémente map
https://lodash.com/docs#map

code 

: https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L6864
JS Bin on jsbin.com

JSON : JavaScript Object Notation

objet simple

var personne = {
  "nom" : "dupont",  // noter les ""
  "prenom" : "denis" // pas de ,
};

console.log(personne.nom, personne.prenom);

Objet imbriqué

var personneAdresse = {
  "lieu" : "Paris",  // noter les ""
  "personne" : {
      "nom" : "dupont",  // noter les ""
      "prenom" : "denis" // pas de ,
  }
};

console.log(personneAdresse.personne.nom);

Collection d'objets

var personnesEntreprise = [
    {
        "lieu" : "Paris",
         "personne" : {
              "nom" : "dupont",
              "prenom" : "denis"
          }
    },
    {
        "lieu" : "Paris",
         "personne" : {
              "nom" : "dupond",
              "prenom" : "lolo"
          }
    },
];

console.log(personnesEntreprise[0].personne.nom);


var entreprise = {
  "nom" : "univ",
  "personnels" :
   [
        {
            "lieu" : "Paris",
             "personne" : {
                  "nom" : "dupont",
                  "prenom" : "denis"
              }
        },
        {
            "lieu" : "Paris",
             "personne" : {
                  "nom" : "dupond",
                  "prenom" : "lolo"
              }
        },
   ];
};

console.log(entreprise.personnels[0].personne.nom);

Cas d'une bibliothèque 

[
    {
        "title": "You Better Not Cry: Stories for Christmas",
        "author": "Burroughs, Augusten",
        "date": "2011-12-08T13:00:00.000Z",
        "asin": "B002U2DQAW",
    },
    {
        "title": "59 Seconds: Think a Little, Change a Lot",
        "author": "Wiseman, Richard",
        "date": "2011-11-26T13:00:00.000Z",
        "asin": "B002W8QXHW",
    },
    {
        "title": "Amusing Ourselves to Death",
        "author": "Postman, Neil",
        "date": "2011-11-13T13:00:00.000Z",
        "asin": "B0023ZLLH6",

    }
]

JS + DOM + JSON

Il est facile d'afficher les détails d'un livre dans une page. Les information sont stocké dans un objet JSON.

JSON

var myBook = {
        "title": "HTML5: Up & Running",
        "author": "Mark Pilgrim",
        "date": "2010-11-18T13:00:00.000Z",
        "asin": "0596806027",
        "thumbnail": "http://images.amazon.com/images/P/0596806027.01.ZTZZZZZZ.jpg",
        "infos": ["A humorous, informative, and well-written introduction to various parts of HTML5",  "the new semantic tags, multimedia, microdata, geolocation, offline storage, and more.",
         
        ],

};

Ces informations seront intégrées à la page par modification du DOM.

DOM

var p = document.createElement('p');
p.innerHTML = "<strong> titre = "+ myBook.title + ' ' + myBook.author;
p.innerHTML += '</br> description ' + myBook.infos.join(',');
document.body.appendChild(p);

https://jsbin.com/botave/edit?html,css,js,output

youtube : objet static

var youtube = {
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the ID.
     */
    getIdFromUrl: function(videoIdOrUrl) {
        if (videoIdOrUrl.indexOf('http') === 0) {
            return videoIdOrUrl.split('v=')[1];
        } else {
            return videoIdOrUrl;
        }
    },
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the URL of the thumbnail for that video.
     */
    generateThumbnailUrl: function(videoIdOrUrl) {
        return 'http://i3.ytimg.com/vi/' + youtube.getIdFromUrl(videoIdOrUrl) + '/default.jpg';
    },

    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the URL for that video.
     */
    generateWatchUrl: function(videoIdOrUrl) {
        return 'https://www.youtube.com/watch?v=' + youtube.getIdFromUrl(videoIdOrUrl);
    },
    
    /**
     * Expects an argument that is either a youtube URL or a ID,
     * and returns back the embed URL for that video.
     */
    generateEmbedUrl: function(videoIdOrUrl) {
        return 'http://www.youtube.com/embed/' + youtube.getIdFromUrl(videoIdOrUrl);
    }

}

lien