Best Practices: Iterating over Arrays

To iterate over an array arr, you have two options:

• A simple for loop (see for):

  for (var i=0; i<arr.length; i++) {
      console.log(arr[i]);
  }

• One of the array iteration methods (see Iteration (Nondestructive)). For example,forEach():

  arr.forEach(function (elem) {
      console.log(elem);
  });

Do not use the for-in loop (see for-in) to iterate over arrays. It iterates over indices, not over values. And it includes the keys of normal properties while doing so, including inherited ones.

http://speakingjs.com/es5/ch18.html

Quelques types primitifs

Environnement : la console !

Evaluez les expressions

déterminer l'affichage dans les deux cas !

function f1(){     var a=1;      return f2(); } function f2(){     return a; } console.log(f1());

function g1(){                   var a=1;                       function f2(){        return a;    }    return f2(); } console.log(g1());

Nous devrons apprendre la notion de 

1. portée lexical et 
2. closure

for in with array : don't use it

itération sur les indices et non sur les valeurs

var arr = [ 'a', 'b', 'c' ];
for (var key in arr) { console.log(key); }
0
1
2

De plus, 

 var arr = [ 'a', 'b', 'c' ];
 arr.foo = true;
 for (var key in arr) { console.log(key); }
0
1
2
foo

correction : hasOwnProperty(key) !

for (var key in arr) {
    if (arr.hasOwnProperty(key)) {
        console.log(key);
    }
}

Finalement, on choisit

for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

arr.forEach(function (elem) {
    console.log(elem);
});

... est un opérateur !

Editeur en ligne : repl.it

Générateur de couleur : que vient faire map !

'#'+'0123456789abcdef'.split('').map(function(v,i,a){ return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');

reduce ?

Ecrire une fonction reduce qui retourne une seule valeur d'un calcul sur un tableau.

function reduce(array, combine, start) {
    
// boucle sur les éléments de array


}

function sum(a,b){
  return a+b;

}

const = [1,2,3];
let average = reduce(tab,sum,0)/tab.length;

//average = 2

Création d'un tableau ! ES6 cool code

création d'un tableau de 10 éléments 

const t=  Array.from({length: 10}, (v, k) => k); 

création d'un tableau de 10 éléments pairs

const tP=  Array.from({length: 10}, (v, k) => k*2); 

création d'un tableau de 100 éléments pairs

const tI=  Array.from({length: 10}, (v, k) => k*2+1); 

mélanger un tableau ?

const s = "123456789"; //string


const t = Array.from(s,s => Number(s)); //String transform tab 

// Array.from({length: 9}, (v, k) => k);   

function shuffle(t){

  for (let i=t.length-1 ; i > 1 ; i--){

     let nb = Math.floor(Math.random() * i);

  //swap

    [t[nb],t[i]] =     [t[i],t[nb]] 

   }

}
while (t[0]< 8){
  shuffle(t);
  console.log(t);

}

incrément décrément : test

x = 2;
console.log(x++ + x);
Mise des parenthèses et évaluation de gauche à droite !
((x++) + x)   // x = 3
(   2     + x)
(   2     + 3)
          5

console.log(x + ++x); //x=3
Mise des parenthèses et évaluation de gauche à droite !
(x + (++x))
(3 + (++x))    // x= 4
(3 + 4)
   7

Evaluer les variables :

let x = 2,a,b,c,d;

a = x++ + x++;
b = ++x + ++x;
c = x++ + ++x;
d = ++x + x++;

Nous allons tenter de comprendre l'expression pour a :

a = ((x++) + (x++)); // ajout () évalue de gauche à droite 

a = (  2   + (x++)) // x=3

a = (  2   +   3)   // x=4

a =        5        // x=4

b = ((++x) + (++x)); // ajout () 

b = (  5   + (++x))  // x =5

b = (  5   +   6  )  // x =6

b =        11

Dessiner à Paper !

Tool permet une gestion simple des événéments

Clic on me !

JS Bin on jsbin.com

dance floor 

JS Bin on jsbin.com

Code school

Les bases !

• Environnements
• Editeurs
• HTML
• CSS
• Selecteurs
• Usage

Projet

A partir d'un tableau d'objets (voir ci-dessous) écrire les fonctions permettant
de calculer :
- le nombre d'hommes
- afficher les âges des hommes
- calculer l'âge moyen des hommes.

Etudier la flexibilité de votre code (même questions pour les homme nés avant 1900, les femmes ... )

Base de noms : un tableau d'objets !

[
  {"name": "Carolus Haverbeke", "sex": "m", "born": 1832, "died": 1905, "father": "Carel Haverbeke", "mother": "Maria van Brussel"},
  {"name": "Emma de Milliano", "sex": "f", "born": 1876, "died": 1956, "father": "Petrus de Milliano", "mother": "Sophia van Damme"},
  {"name": "Maria de Rycke", "sex": "f", "born": 1683, "died": 1724, "father": "Frederik de Rycke", "mother": "Laurentia van Vlaenderen"},
  {"name": "Jan van Brussel", "sex": "m", "born": 1714, "died": 1748, "father": "Jacobus van Brussel", "mother": "Joanna van Rooten"},
  {"name": "Philibert Haverbeke", "sex": "m", "born": 1907, "died": 1997, "father": "Emile Haverbeke", "mother": "Emma de Milliano"},
  {"name": "Jan Frans van Brussel", "sex": "m", "born": 1761, "died": 1833, "father": "Jacobus Bernardus van Brussel", "mother":null},
  {"name": "Pauwels van Haverbeke", "sex": "m", "born": 1535, "died": 1582, "father": "N. van Haverbeke", "mother":null},
  {"name": "Clara Aernoudts", "sex": "f", "born": 1918, "died": 2012, "father": "Henry Aernoudts", "mother": "Sidonie Coene"},
  {"name": "Emile Haverbeke", "sex": "m", "born": 1877, "died": 1968, "father": "Carolus Haverbeke", "mother": "Maria Sturm"},
  {"name": "Lieven de Causmaecker", "sex": "m", "born": 1696, "died": 1724, "father": "Carel de Causmaecker", "mother": "Joanna Claes"},
  {"name": "Pieter Haverbeke", "sex": "m", "born": 1602, "died": 1642, "father": "Lieven van Haverbeke", "mother":null},
  {"name": "Livina Haverbeke", "sex": "f", "born": 1692, "died": 1743, "father": "Daniel Haverbeke", "mother": "Joanna de Pape"},
  {"name": "Pieter Bernard Haverbeke", "sex": "m", "born": 1695, "died": 1762, "father": "Willem Haverbeke", "mother": "Petronella Wauters"},
  {"name": "Lieven van Haverbeke", "sex": "m", "born": 1570, "died": 1636, "father": "Pauwels van Haverbeke", "mother": "Lievijne Jans"},
  {"name": "Joanna de Causmaecker", "sex": "f", "born": 1762, "died": 1807, "father": "Bernardus de Causmaecker", "mother":null},
  {"name": "Willem Haverbeke", "sex": "m", "born": 1668, "died": 1731, "father": "Lieven Haverbeke", "mother": "Elisabeth Hercke"},
  {"name": "Pieter Antone Haverbeke", "sex": "m", "born": 1753, "died": 1798, "father": "Jan Francies Haverbeke", "mother": "Petronella de Decker"},
  {"name": "Maria van Brussel", "sex": "f", "born": 1801, "died": 1834, "father": "Jan Frans van Brussel", "mother": "Joanna de Causmaecker"},
  {"name": "Angela Haverbeke", "sex": "f", "born": 1728, "died": 1734, "father": "Pieter Bernard Haverbeke", "mother": "Livina de Vrieze"},
  {"name": "Elisabeth Haverbeke", "sex": "f", "born": 1711, "died": 1754, "father": "Jan Haverbeke", "mother": "Maria de Rycke"},
  {"name": "Lievijne Jans", "sex": "f", "born": 1542, "died": 1582, "father":null, "mother":null},
  {"name": "Bernardus de Causmaecker", "sex": "m", "born": 1721, "died": 1789, "father": "Lieven de Causmaecker", "mother": "Livina Haverbeke"},
  {"name": "Jacoba Lammens", "sex": "f", "born": 1699, "died": 1740, "father": "Lieven Lammens", "mother": "Livina de Vrieze"},
  {"name": "Pieter de Decker", "sex": "m", "born": 1705, "died": 1780, "father": "Joos de Decker", "mother": "Petronella van de Steene"},
  {"name": "Joanna de Pape", "sex": "f", "born": 1654, "died": 1723, "father": "Vincent de Pape", "mother": "Petronella Wauters"},
  {"name": "Daniel Haverbeke", "sex": "m", "born": 1652, "died": 1723, "father": "Lieven Haverbeke", "mother": "Elisabeth Hercke"},
  {"name": "Lieven Haverbeke", "sex": "m", "born": 1631, "died": 1676, "father": "Pieter Haverbeke", "mother": "Anna van Hecke"},
  {"name": "Martina de Pape", "sex": "f", "born": 1666, "died": 1727, "father": "Vincent de Pape", "mother": "Petronella Wauters"},
  {"name": "Jan Francies Haverbeke", "sex": "m", "born": 1725, "died": 1779, "father": "Pieter Bernard Haverbeke", "mother": "Livina de Vrieze"},
  {"name": "Maria Haverbeke", "sex": "m", "born": 1905, "died": 1997, "father": "Emile Haverbeke", "mother": "Emma de Milliano"},
  {"name": "Petronella de Decker", "sex": "f", "born": 1731, "died": 1781, "father": "Pieter de Decker", "mother": "Livina Haverbeke"},
  {"name": "Livina Sierens", "sex": "f", "born": 1761, "died": 1826, "father": "Jan Sierens", "mother": "Maria van Waes"},
  {"name": "Laurentia Haverbeke", "sex": "f", "born": 1710, "died": 1786, "father": "Jan Haverbeke", "mother": "Maria de Rycke"},
  {"name": "Carel Haverbeke", "sex": "m", "born": 1796, "died": 1837, "father": "Pieter Antone Haverbeke", "mother": "Livina Sierens"},
  {"name": "Elisabeth Hercke", "sex": "f", "born": 1632, "died": 1674, "father": "Willem Hercke", "mother": "Margriet de Brabander"},
  {"name": "Jan Haverbeke", "sex": "m", "born": 1671, "died": 1731, "father": "Lieven Haverbeke", "mother": "Elisabeth Hercke"},
  {"name": "Anna van Hecke", "sex": "f", "born": 1607, "died": 1670, "father": "Paschasius van Hecke", "mother": "Martijntken Beelaert"},
  {"name": "Maria Sturm", "sex": "f", "born": 1835, "died": 1917, "father": "Charles Sturm", "mother": "Seraphina Spelier"},
  {"name": "Jacobus Bernardus van Brussel", "sex": "m", "born": 1736, "died": 1809, "father": "Jan van Brussel", "mother": "Elisabeth Haverbeke"}
]

Révision et mise à niveau

A)La balise <header> peut

1. peut contenir des éléments de titre

2. est par défaut déclarée

3. se déclare avant le body

4. est unique

B) Les balises <p> <h1> <a> sont

1. deux balises sont de type blocs

2. des balises blocs

3. une balise est de type iblocs

4. ne peuvent contenir d’autres blocs

C) Une balise p peut contenir une balise

1. des balises in-line

2. des balises bloc

3. la balise <p>

4. autre

D) Une expression est-elle invalide?

1. <div><ul><li><ul></ul></li></ul></div>

2. <ul><li><ul></ul></li></ul><div></div>

3. <div><ul><ul><li></li></ul></ul></div>

E) La régle #intro s'applique à *

1. <div=intro>

2. <p class:intro>

3. <p class="intro">

4. <p id=”intro”>

5. autre

F) Le sélecteur de classe : h1.red correspond à la balise

1. <h1 class="red">

2. <h1 class.red>

3. <h1 id=”h1.red”>

4. <h1 class:"red">

G) Soit le code HTML

<div id="englobant">

<div> A <div>B</div>

<div>C </div>

</div><div>D</div></div>

La règle #englobant > div {border:1px solid black} s'applique à

1. tous les blocs

2. A B C

3. B C

4. A C

5. A D

6. Aucun

H) Comment sélectionner en CSS la balise d’identifiant ="denis.dupont”

1. #denis\.dupont

2. #denis.\#dupont

3. #denis.dupont

4. impossible

I) Soit le code CSS

div1 {width: 300px;height: 100px; border: 1px solid blue;box-sizing: border-box;}

La largeur est égale à

1. 300px

2. 100%

3. 302px

4. autre

J) Quelle que soit le type de liste le selecteur  $('ul li', 'li').css( "color", "red" );

1. Ne sélectionne rien

2. Sélection valide, mais écriture incorrecte.

3. Fonctionne parfaitement