position d'un element :getBoundingClientRect()

il est important de noter que :
 La position du coin en haut à gauche est relative à la zone de visualisation (viewport).

Autrement dit si vous utilisez le scrool (et changez la zone de visualisation) les valeurs peuvent changer.

⍈ code

La valeur retournée est un objet.

Voici un exemple :

 [object DOMRect] {
  bottom: 3525.3125,
  height: 18,
  left: 8,
  right: 377,
  toJSON: function toJSON() { [native code] },
  top: 3507.3125,
  width: 369,
  x: 8,
  y: 3507.3125
}

Ainsi document.getElementById("id99").getBoundingClientRect().y; donne la position en y de l'élément id99.

event : onload

Il est classique de lancer une fonction lorsque la page est chargée (on garantie que la structure du dom est en mémoire).

   window.onload = function() {
        corps de la fonction 

      };

ici la fonction est anonyme, elle ne sera pas réutilisée.

Par exemple : 

   window.onload = function() {
        
        test("Compris ?", function() {
          assert("oui", "oui");
        });
       

      };

Remarquer la syntaxe classique de la fonction test. Elle dispose d'un argument qui est elle même une fonction. Cette fonction est souvent une fonction de callBack. Ici la fonction de callBack est anonyme est contient un appel à une fonction assert.


Exemple complet :

(function() {
        var results;
        this.assert = function assert(value, desc) {
          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);
          if (!value) {
            li.parentNode.parentNode.className = "fail";
            // si un faux le test est faux
          }
          return li;
        };
        this.test = function test(name, fn) {
          results = document.getElementById("results");
          results = assert(true, name).appendChild(
              document.createElement("ul"));
          fn();
        };
})();

      window.onload = function() {
        test(" test ", function() {
          assert(2==2, "2==2");
          assert(1=='1', "1=='1'");
          assert(1==='1', "1==='1'");
        });
        test("Compris ?", function() {
          assert("oui", "oui");
          assert(true,"oui oui oui");
        });
        test("(function(){})()", function() {
          assert(null, "dur dur");
          assert(5, " du courage");
        });
      };

Le conteneur et son comportement

Cette animation pose le problème du choix du conteneur d'un bloc.

Modification du html



<div id="conteneur">

    <div id="a">

    <div id="b">

    <div id="c">

<div>

Modification du CSS

#conteneur{
    position: relative;
}

#b{
    position: absolute;
}

Display : absolute

Simuler

1. sort du flux (disparaît)
2. position au dessus à la position indiquée

Situation de départ

le code HTML est 

<div id="a"> Bloc A </div>
<div id="b"> Bloc B </div>
<div id="c"> Bloc C </div>

Le code CSS est

div {
    border: 2px dotted black;
    margin :2px;
}

Modifications

Position absolue

#b{
    position: absolute;
}

En Action

display : Float

Il est parfois difficile de comprendre les conséquences de la modification de la valeur d'une propriété.

Nous proposons des animations pour comprendre le résultat obtenu.
Pour chaque animation nous partons de la situation suivante.

Situation de départ

le code HTML est

<div id="a"> Bloc A </div>
<div id="b"> Bloc B </div>
<div id="c"> Bloc C </div>

Le code CSS est

div {
    border: 2px dotted black;
    margin :2px;
}

Modifications

Float left

Une modification est apportée au CSS. le bloc "#a" passe en position  flottante.

#a{
    float:left;
}

action

Les trois blocs sont contenus dans un div de taille fixe.

Nous fixons la taille du conteneur
                                                  taille < taille(a+b+c)

Modification du html

<div id="conteneur">
    <div id="a">
    <div id="b">
    <div id="c">
<div>

Modification du CSS

#conteneur {

    width: 250px;

}

div{
    ...    float:left;    
}

En action

Autre cas

#a,#c{
    float:left;
}

action

Fonctions fléchées : ES6

Voici un cas d'écriture de fonction fléchées :

var motL = "anticonstitutionnelement myélosaccoradiculographie cyclopentanoperhydrophénanthrène intergouvernementalisation";

motT = motL.split(" ");

console.log(motT.map(el => el.length).reduce((a, b) => Math.max(a, b)));

console.log(motT.reduce((a, b) => a.length > b.length ? a : b));

Voici une utilisation sur le DOM ! 

motL = document.querySelector("div");

motT = motL.innerHTML.split(" ");

var Max = motT.reduce((a, b) => a.length > b.length ? a : b);


motL.innerHTML = motL.innerHTML.replace(Max, "<span>"+Max+"</span>");

JS Bin on jsbin.com

Lire l'article suivant pour découvrir le this lexical dans les fonctions fléchées.

perte du this : objet

Voici un exemple montrant la perte de la référence du this dans les objets.

function P() {

  this.age = 0;

  setInterval(function () {
    this.age++; // this ref sur global et non l'objet
  }, 1000);
}
var pPerte = new P();


En voici une version corrigée ! Les fonctions fléchées capturent la valeur this de leur contexte.

function Personne() {
  this.age = 0;

  setInterval(() => this.age++, 1000);
}

var p = new Personne();

setInterval(() => console.log(p.age), 3000);



Une autre solution fût l'utilisation de bind

asynchrone :nodejs

var content;
fs.readFile('./fichier', function read(err, data) {
    if (err) {
        throw err;
    }
    content = data;
});
console.log(content);

console.log ne donnera pas le contenu du fichier !

C'est une des conséquences de l'exécution asynchrone de readFile.

Espace de nom :

Soit un objet color

var color = {
   "aliceblue": "#F0F8FF",
  "lavender": "#E6E6FA",
  "powderblue": "#B0E0E6",
  "lightblue": "#ADD8E6"
};

la variable color est définie dans l'espace global..

Les espaces de noms permettent de protéger des variables et fonctions.

On peut utiliser les objets comme interface :

(function(exports) {
  var _color = {
    "aliceblue": "#F0F8FF",
   "lavender": "#E6E6FA",
   "powderblue": "#B0E0E6",
   "lightblue": "#ADD8E6"
   };
  
   exports.name = function (Hex) {
       return Object.keys(_color).find(key => _color[key] === Hex);
   };
  
   exports.Hex = function(name) {
        return _color[name];
   };
  
})(window.tColor = {});

console.log(tColor.Hex(tColor.name("#ADD8E6")));

module : node.js

Ecrire un fichier moduleDir.js

var fs = require('fs');

module.exports = function (dirPath, cb) {

  fs.readdir(dirPath, function (err, listFiles) {
    
    if (err) {
      return cb(err); //par convention
    }

    cb(null, listFiles);
  });
};

Ecrire un programme programmeDir.js

var filterDir = require('./moduleDir');

var dirPath = process.argv[2];

filterDir(dirPath, function (err, list) {
   if (err) {
    console.log('Erreur sur ' + dirPath);
    return err;
  }

  list.forEach(function (filename,i) {
    console.log(i,filename);
  });

});

lancer : node programmeDir.js .

TD CSS

Créer du CSS de base

CSS : before after

Comment indiquer par un point qu'un input est obligatoire ?

https://jsbin.com/talufeq/3/edit?html,css,output
https://jsbin.com/talufeq/4/edit?html,css,output
https://jsbin.com/talufeq/5/edit?html,css,output
https://jsbin.com/talufeq/7/edit?html,css,output

Vidéo pour les vacances !

Microsoft courses

Taille des H1

Découvrons pourquoi la taille des H1 dépend du degré d’imbrication. Commençons par trouver les feuilles de styles par défaut
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

On peut lire que :

/* children of the <head> element all have display:none */
	head {
	display: none
	}
	meta {
	display: none
	}
	title {
	display: none
	}

De plus on lit que le style de H1 est différent suivant les imbrications :

h1 {
	display: block;
	font-size: 2em;
	-webkit-margin-before: 0.67__qem;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	font-weight: bold
	}
	:-webkit-any(article,aside,nav,section) h1 {
	font-size: 1.5em;
	-webkit-margin-before: 0.83__qem; // quirky margins
	-webkit-margin-after: 0.83em;
	}

En action

Centrer : easy now !

      html, body {
        height: 100%;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container {
        width: 100%;
        text-align: center;
        font-size: 8em;
      }

Affichage dynamique la taille de la pagepage

window.innerWidth

permet de déterminer la largeur de la page !

L'affichage est dynamique grâce à l'utilisation de requestAnimation.

      function tick() {

        var width = window.innerWidth;

        container.textContent = width + " px";

        window.requestAnimationFrame(tick);

      }

      window.requestAnimationFrame(tick); // lancer en permanence

reduce en Action

JS Bin on jsbin.com

jsfiddle

Lorsque vous écrivez un script dans jsfiddle, il faut ouvrir la console pour voir son affichage.

si, vous incluez ce code dans le fichier HTML, la console apparaît dans le résultat !

<script>
    
    var _consoleLog = console.log;
    
    console.log = function(){
        var name = _consoleLog.apply(console,arguments);
        var str = "";
        for(var index in arguments){
            if(Array.isArray(arguments[index])){
               arguments[index] = arguments[index].map(function(item){
                    if(typeof item == "object"){
    item = JSON.stringify(item,null,4)+"<br>";
                    }
    
                    return item;
               });
               str += arguments[index]+" ";
                
            } else if(typeof arguments[index] == "object"){
                str = JSON.stringify(arguments[index],null,4);
            } else {
                str += arguments[index]+" ";
            }
        }
    $('body').append("<div>"+str+"</div>");
    }
   
</script>