Pages

Après les vacances : le dom

JS Bin on jsbin.com
JS Bin on jsbin.com

with closure !
JS Bin on jsbin.com

la balise marquee

<marquee>La balise marquee en Action  !</marquee>
La balise marquee en Action !
Libellés :

tout en 1 !

TD map reduce and Co !

transposée : explication

const A = [ [4,5,6], [1,2,3] ]; 

let At = A[0].map( (_,col) => A.map( (lig,_) => lig[col]));

Parcours du DOM

Ecrire une fonction de parcours du DOM : printDomEle



HTML

<body>
article{article $}>section{section $}*2>p{para $}*3(puis Tab)
</body>


JS
fonctions utiles :   console.groupCollapsed(); console.groupEnd();
on utilise children pour avoir les enfants d'un noeud.
on utilise for of pour réaliser une boucle

printDomEle(document.body);




Libellés :

transformer le code

const B=[
  [1,2,3],
  [4,5,6],
];

 // c = col, l = lig
function maxi(A){
      let maxC = [];
      for( let c=0; c < A[0].length; c++){ // A[0]=indique la dim
          let tmp = [];
          let max = -10000; //  
          for ( let l=0; l < A.length; l++){
                 tmp.push(A[l][c]); 
                 if ( max < A[l][c] ) max = A[l][c];
          }
          console.log(tmp);
          //console.log(Math.max(...tmp)); //top version
          console.log(max);
          maxC.push(max);
      }
      console.log(maxC);
      return maxC;

 }

console.log(`les valeurs Max par colonnes : ${maxi(B)}`);

 Remplacer ce code avec reduce et map 
Libellés : ,

reduce en action

Utiliser reduce  pour rechercher le plus grand mot dans :
motL = "anticonstitutionnelement myélosaccoradiculographie cyclopentanoperhydrophénanthrène intergouvernementalisation";

Utiliser le code suivant pour afficher le résultat :

 let newL = motL.replace(Max, "**" + Max + "**");

 console.log(newL);


"anticonstitutionnelement myélosaccoradiculographie **cyclopentanoperhydrophénanthrène** intergouvernementalisation"


Libellés : ,

reduce

Utiliser reduce pour afficher t = ["abcdefghi"] ainsi :

 "abc
 def
 ghi"
ou ainsi

"ab
 cd
 ef
 gh
 i"

 ou

...
sol
Libellés :

correction projet : reduce, map

Enoncé

Solution :

DS = 1H

EX1

const liste = [
    {prenom : "Lalo", nom: "Madone", age:"18"},
    {prenom : "Denis", nom: "Moutrond" , age:"28"},
    {prenom : "Alice", nom: "Mooogo",  age:"8"}
];

Ecrire le code pour afficher les personnes de plus de 17 ans de la façon suivante
["MADONE Lalo", "MOUTROND Denis"]

EX2

Compléter le code de la transposée d'un tableau avec deux fonctions map

 let At = ?.map( (_,col) => A.map( (lig,_) => ? ));

const A = [
  [1,3,5],
  [2,4,6]
];

EX3


Ecrire la fonction Process permettant de garder les nombres entre [1,10]

function Process(prevA, cur) {
   
}
var Moyennes = [20, 1, -5, 6, 50, 3];

 var resultArray = Moyennes.reduce(Process, []); // [1,6,3]

Sol

Libellés :

Paramètres des fonctions

Lire article

Révision sélecteur CSS


Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
          <h1>h1</h1>
          <ul id="tmpPlants" class="tmpExample">
             <li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
             <li class="A tmpExample" id="b">li : class =A id=b</li>
             <li class="B tmpExample" id="c">li : class =B id=c</li>
          </ul>
          <footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple : 

Selecteurs ('h1')


------------- Auto correction
div : class top

h1

  • li : class =A et B id=item.A
  • li : class =A id=b
  • li : class =B id=c

footer

********* Projet



Etudier et compléter le code pour obtenir l'alignement du texte !

le plus grand nombre de mots dans un paragraphe


nous sommes editables
C'est moi le plus grand !
Ecrivez ici des mots
Libellés : ,

Projet

Compléter la fonction pour mettre en rouge le paragraphe qui contient le max de mots.
(ne pas utiliser Math.max()

 const paras = document.querySelectorAll('p.sel');
// recherche les paragraphes concernés du document

 const nodesP =  Array.from(paras, function(p){
  return {node : p, nbChar:p.textContent.length}
} );
// on crée un tableau des paragraphes et du nombre de mots/paragraphe

 // completer la fonction(
const maxMotP = nodesP.reduce(function(){});
//retourne le plus grand nombre de mots et le paragraphe

 if (maxMotP)
maxMotP.node.classList.add("red");
//met le paragraphe en rouge !

 


Un acide aminé est un acide carboxylique qui possède également un groupe fonctionnel amine. De tels composés organiques ont donc à la fois un groupe carboxyle –COOH et un groupe amine, par exemple une amine primaire –NH2 ou une amine secondaire –NH–. On connaît environ 500 acides aminés, dont environ 140 sont présents dans les protéines1. Ces acides aminés peuvent être classés de nombreuses manières différentes2 : on les classe ainsi souvent en fonction de la position du groupe amine par rapport au groupe carboxyle en distinguant par exemple les acides α-aminés, β-aminés, γ-aminés ou δ-aminés ; on peut également les classer en fonction de leur polarité, de leur point isoélectrique ou de leur nature aliphatique, aromatique, cyclique ou à chaîne ouverte, voire de la présence de groupes fonctionnels autres que le carboxyle et l'amine qui définissent cette classe de composés.
En biochimie, les acides α-aminés jouent un rôle crucial dans la structure, le métabolisme et la physiologie des cellules et de tous les êtres vivants connus, en tant que constituants des peptides et des protéines. Ils constituent à ce titre l'essentiel de la masse du corps humain après l'eau. Ils présentent, à de rares exceptions près3, une structure générique du type H2N–HCR–COOH, où R est la chaîne latérale identifiant l'acide α-aminé. Toutes les protéines de tous les êtres vivants connus ne sont constituées — à quelques exceptions près — que de 22 acides aminés différents, parfois légèrement modifiés, dits acides aminés protéinogènes. Parmi ceux-ci, 19 acides aminés ne contiennent que quatre éléments chimiques : le carbone, l'hydrogène, l'oxygène et l'azote ; deux acides aminés contiennent en plus un atome de soufre, et un acide aminé assez rare contient un atome de sélénium. Ces acides aminés forment de longs biopolymères linéaires, appelés polypeptides, dans lesquels les monomères sont unis entre eux par des liaisons peptidiques. Un acide aminé engagé dans une ou deux liaisons peptidiques au sein d'un polypeptide est un résidu d'acide aminé. L'ordre dans lequel ces résidus se succèdent dans les polypeptides est la séquence peptidique et est déterminé par les gènes à travers le code génétique, qui établit une relation entre les codons de trois bases nucléiques et chacun de ces résidus.
Les acides aminés naturels les plus abondants sont les acides α-aminés, dont font partie tous les acides aminés protéinogènes. Hormis la glycine, dont la chaîne latérale se réduit à un simple atome d'hydrogène et dont le carbone α n'est donc pas un centre stéréogène, tous ces acides aminés sont des composés chiraux présentant une stéréoisomérie D/L. Les acides aminés protéinogènes incorporés dans les protéines par les ribosomes sont tous des énantiomères L, mais des acides aminés D peuvent être présents dans des protéines à la suite de modifications post-traductionnelles, notamment dans le réticulum endoplasmique, comme c'est le cas chez certains organismes marins tels que les gastéropodes du genre Conus5. Des acides aminés D sont également des constituants importants du peptidoglycanne de la paroi bactérienne6, et la D-sérine jouerait le rôle de neurotransmetteur dans le cerveau7. La désignation D/L provient de la position respectivement à droite ou à gauche du groupe –NH2 dans la projection de Fischer, le carboxyle se trouvant en haut dans cette représentation, avec comme ordre de priorité des groupes est généralement (selon les règles de Cahn, Ingold et Prelog) : l'atome d'azote de l'amine primaire –NH2 ; l'atome de carbone du carboxyle –COOH ; l'atome de carbone α de la chaîne latérale R s'il ne porte pas d'atome de numéro atomique supérieur à celui de l'oxygène, sinon il passe en 2e position (c'est le cas pour la cystéine et la sélénocystéine) ; l'atome d'hydrogène.

Boucle sur un tableau

Voici différentes façons d’itérer sur un tableau !

let tab = [10, 11];

 console.log(tab);

 console.log('------- Boucle for in');
for (let index in tab){
console.log(` ${index} => ${tab[index]}`);
}
console.log('------- Boucle for in hasOwnProperty');
for (let index in tab){
if (tab.hasOwnProperty(index))
console.log(` ${index} => ${tab[index]}`);
}
console.log('------- Boucle for of ');
for (let val of tab){
console.log(` ${val} `);
}
console.log('------- Boucle forEach ');
tab.forEach(function (element, index,tab) {
console.log(` ${index} => ${element}`);
});
console.log('------- Boucle Object.keys');
Object.keys(tab).forEach(function (element, index) {
console.log(` ${index} => ${element}`);
});

 Les différences entre toutes ces méthodes apparaitra plus clairement en modifiant les attributs.

Object.prototype.objCustom = function AjoutFxObj() {};
Array.prototype.arrCustom = function AjoutFxArr() {};

 let tab = [10, 11];
tab[tab.length] = 12;
tab.myProp = "une propri";



Libellés :

Reduce : A fond la forme !

JS Bin on jsbin.com

  • Que peut faire cette fonction ?


 function getNumberCnt(arr){
    return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    },{});
}


JS Bin on jsbin.com
Inscription à : Articles (Atom)