Bootstrap les grilles

Mais que veut dire col-xs-12 col-sm-6 col-md-2 col-lg-8 ?

Examinons d'abord le comportement des class en redimensionnant votre fenêtre.

Les classes possibles

col-xs-12 col-sm-6 col-md-2 col-lg-8

col-xs-6 col-sm-6 col-md-10 col-lg-4

La classe appliquée

JS Bin on jsbin.com

Les vacances !

Si vous n'avez rien d'autre à faire !
Commencez, comme moi, un cours

Expressivité

Nous connaissons le manque d'expressivité du HTML (qui ne donne que la structure du document).

Il suffit de comparer ce code HTML
<p> <span>12 <span> rue de lagny </p>

avec cette syntaxe

<adresse>
   <numero>12 </numero>
   <rue> rue de lagny </rue>
</adresse>

Encore une fois, Angular cherche a se rapprocher de XML. Il est possible d'écrire des expressions.

Exemple

Expression

app.directive("coursTabNiveau", function() {

    return {

      restrict: 'E',

      templateUrl: "description.html"

    };

  });

html

  <cours-tab-niveau></cours-tab-niveau>

noté le passage de la notion html à JS (camelCase)

description.html

<table class="table table-striped">

  <thead><tr>

    <th>Edit</th>

    <th>Cours</th>

    <th>Niveau</th>

  </tr></thead>

  <tbody>

   <tr ng-repeat="c in c2016.cours | orderBy:'niveau' ">

   <td>

      <button class="btn" ng-click="" ng-disabled="true">

      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit

      </button>

    </td>

    <td> {{c.nom}}</td>

    <td> {{c.niveau}}</td>

 </tr>

</tbody>

</table>

test

box-sizing: border-box;

On voit de plus en plus la règle box-sizing: border-box; appliquée aux balises.

Cliquer sur le test, pour appliquer la règle box-sizing: border-box;

Voir fichier->
Sur l'exemple suivant, les deux blocs de taille respective (60% et 40%) peuvent avoir une bordure à l’intérieur ou à l’extérieur.
Dans le cas d'une bordure à l'extérieur, la somme tille + bordure dépasse les 100% du conteneur. Les blocs sont réparti sur deux lignes. En cliquant sur les blocs, vous mettez soit une bordure extérieure (dépassement-> deux lignes) soit une bordure intérieure (pas de dépassement -> une ligne).

1

2

Règles CSS

Comment écrire le AND de deux classes

<div class="bleu jaune">vert</div>

.bleu.jaune{
  background-color : green;
}

JS Bin on jsbin.com

My bootstrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Comment obtenir ce comportement sans la classe ↠breadcrumb de bootstrap ?

L'idée est simple, tous les balises li sauf la premiere, auront un symbole devant eux.

Ecriture de la règle :

.breadcrumb > li + li:before {

    ...

    content: "/\00a0";

}

⇥ Démonstation

ng-model

JS Bin on jsbin.com

Dom : clonage

Le code utilise la balise <template> et le clonage.

JS Bin on jsbin.com Pour en savoir plus.

Recherche de bugs

Voici le comportement attendu.

1. 1
2. 2
3. 3
4. 4
5. 5

click : select

dlbclick : unselect

flêche haut,bas : ajout au dessus en dessous de la selection

touche suppr : delete selected

Corriger le code suivant

Ajouter plusieurs éléments, la sélection ne marche plus.

JS Bin on jsbin.com

Corriger le code suivant

la suppression puis l'ajout d'élément, la numérotation est erronée.

JS Bin on jsbin.com

Vidéo jquery

Angular

• {{c.nom}}

informations

{{c.desp}}

les tabs : angular2

Les étapes pour arriver à un code "propre"

ng-click="action"

JS Bin on jsbin.com

ng-show="cond"

  JS Bin on jsbin.com

ng-controller

  JS Bin on jsbin.com

ng-init

  JS Bin on jsbin.com

class active 

JS Bin on jsbin.com

Améliorations

Logique dans un nouveau contrôleur

JS Bin on jsbin.com

ng-repeat ! 

JS Bin on jsbin.com

John rezig !

---

Annonce du cours de jquery sur la khan academy

Découvrez le caractère dun code numérique

  (function(){    
  
  affiche = function(){
    document.querySelector("div").innerHTML="";
    var i;
    for (i=33;i<2000;i++){
      //conversion nb->charactere
      var val = String.fromCharCode(i);

//création bouton
      var newNode = 

//ajout des attributs pour le CSS bootstrap
      // type bouton
      newNode.set...

      // class "btn"
      newNode.classList.add("btn");

//ajout du contenu
      // mettre comme valeur "val  i ";
      newNode.... = ...

//ajout dans le DOM -> div
      document...
        
      if (document.getElementById("val").value==i){
        
//clonage du newNode pour memoriser les recherches
        extraNode = ...
        //ajout class "btn-info"
        extraNode....
        // ajout class "btn-success" à newNode
        newNode...
         
//ajout dans le DOM de extra node juste avant le container
         document.querySelector(".container").insertBefore(extraNode,document.querySelector(".container").firstChild);
      }    
    }
  };

// creation du listeneur sur le input id = val
document.getElementById("val").addEventListener("change",affiche,true);

})();

Evénements clavier

JS Bin on jsbin.com

Passage de paramêtres Event

Prenons l'exemple de mozilla pour illustrer le passage de paramètre à un événement
JS Bin on jsbin.com

JS Bin on jsbin.com
JS Bin on jsbin.com
Cette solution n'est pas applicables dans le cas de boucles !
 Les closures sont très utiles pour le passages de paramètre lors d'un événement
JS Bin on jsbin.com

Angular partie 1

JS Bin on jsbin.com

quizz

dupontquizz.blogspot.com

Événement propagation

Dans le exemples suivant cliquer sur un élément.

 Cas de la propagation montante

fichier

Cas de la propagation descendante

fichier

Valeur de e et de this

fichier

Evénements la propagation

Nous allons utiliser le débogeur pour mieux comprendre la propagation des événements dans le DOM.

Il va de soit que body contient les balises. Supposons que Body contienne un p. Si vous cliquer à l'endroit où se trouve le paragraphe, vous avez cliqué sur le body et sur le paragraphe ?
Mais dans quel ordre !

  "Qui de la poule ou de l’œuf était avant  ?" 

un p dans un body : sens de propagation des événement

La réponse est la suivante  : c'est vous qui choisissez.

Examinons le cas, où l'on considère que vous avez cliqué d'abord sur le Body puis sur le paragraphe ; autrement dit il y a propagation de l'événement par le bas (voir figure précédente)

Cas Body->paragraphe

Remarquez le troisième paramètre de EventListener à true.

addEventListener(event, callback , true);

Utiliser le débogueur pour observer les priorités en mettant deux points d'arrêts (lig. 30, 37) et relancer le débogueur.

Lancer l'exécution et cliquer sur le paragraphe

Avancer le débogueur : on voit que body a réagi.

Avancer le débogueur : on voit que le paragraphe à réagi.

Cas paragraphe->body

Remarquez le troisième paramètre à false.

addEventListener(event, callback , False);

Comme précédemment, mettre deux points d'arrêts et lancer l'exécution puis cliquer sur le paragraphe

Avancer le débogueur : c'est maintenant le paragraphe qui réagi en premier.

Avancer le débogueur : c'est au tour du body.

Comparaison : le troisième paragraphe permet de contrôle le sens de propagation.

Le style est d'abord appliqué au body (1 cas)

Le style est d'abord appliqué au paragraphe (2 cas)

Stop propagation

On peut empêcher la propagation de l'événement.

Simuler des fonctions de base

Soit le code HTML suivant

Cliquez sur le code précédant pour accéder au fichier test.

Tapez le code suivant dans la console.

Nous détectons la présence du retour chariot. Le test du type confirme notre hypothèse

Voici l'écriture d'une fonction permettant d'obtenir le premier élément (avec ou sans retour chariot).

function next( elem ) {

do {elem = elem.nextSibling;} while ( elem && elem.nodeType != 1 );return elem;

}

function first( elem ) {

elem = elem.firstChild;
return elem && elem.nodeType != 1 ?
next ( elem ) : elem;

}

first(document.body);

Para 1

second Para 2

dernier Para

inserBefore ?

parentOfBeforeNode.insertBefore( nodeToInsert, beforeNode ); 

The mnemonic that we use to remember the order of the arguments is the phrase

“You’re inserting the first element, before the second.”