Evenement : la souris

JS Bin

DOM : khan

DOM versus Jquery

Voici encore un exemple de comparaison du code jquery DOM

DOM	Jquery
var newItem = document.createElement("li"); newItem.className+="new"; var textnode = document.createTextNode("Water"); newItem.appendChild(textnode); var list = document.getElementById("myList"); list.insertBefore(newItem, list.childNodes[0]);	$("<li>Water</li>" ).insertBefore( "#List li:first" ).addClass("new");

 comparaison DOM et Jquery

className : en action

Voici en DOM une façon simple d'ajouter une classe à un élément.
document.body.className="nameClass";

exemples

JS Bin

Pour ajouter deux classes
document.body.className="class1  class2";

JS Bin

Ajouter une classe aux classes existantes
document.body.className += " newClass";

JS Bin
Notez la présence de la fonction classList

JS Bin

Event : en action

Exemple d'utilisation de l'événement window.onscroll 

  JS Bin

How to do

 



http://html5-demos.appspot.com/static/css/sticky.html

khan academy

W3C SCHOOL : vidéo

https://www.youtube.com/watch?v=kowh52NmZis

date : en action

Hier	Aujourd'hui	Demain
var a = new Date();	var h = new Date(); h.setDate(a.getDate()-1)	var d = new Date(); d.setDate(d.getDate()+1)

Création de son outil de développement

notion de grille
Mise en place de la grille
Les outils existants

Animation : étude de cas

JS Bin

Flex : en action

Voici un exemple de la force de Flex :

sur l'exemple suivant décoché le commentaire sur le body pour le rendre flexible.

-> fichier
Voici la source du code. Vous découvrirez comment définir par programmation la taille des colonnes.
 http://www.the-haystack.com/2015/03/05/conditional-multi-column-sublists/

last-child et last-of-type

Nous allons revenir sur plusieurs sélecteurs.

First-child

Le comportement est celui attendu.

JS Bin

First-of-type

JS Bin

Pour comprendre la différence entre ces deux sélecteurs, il suffirait d'introduire une balise </br> pour modifier l’arborescence.

JS Bin
JS Bin

Attention au comportement de JSbin.

Il s’avère nécessaire de lancer  Run with JS  pour obtenir le résultat attendu.

JS Bin

Besoin d'icônes pur CSS : une seule référence

http://www.uiplayground.in/css3-icons/