DOM : querySelectorAll() not live !

This method returns a static instance of NodeList. ?

Exemple :

https://jsbin.com/zemiwi/2/edit?html,css,js,output

DOM : collections is considered “live,” ????

var divs = document.getElementsByTagName(“div”),
           i,
           div;

for (i=0; i < divs.length; i++){
        div = document.createElement(”div”);
        document.body.appendChild(div);
}

Dans l'exemple suivant le code devrait ajouter autant de div que de div existant dans le code de départ (ici 2).

https://jsbin.com/pagife/1/edit?html,css,js,output

 correction 

https://jsbin.com/kajiran/2/edit?html,css,js,output

 autre exemple : 

 var divs = document.getElementsByTagName("div"), i, div; 

 for (i=0; i < divs.length; i++){ 
//fait disparaitre le div et remplace par un p
      divs[i].outerHTML = "This is a paragraph."; 
//
      divs[i].innerHTML = i; 
}

https://jsbin.com/kajiran/5/edit?html,css,js,output

Une solution

https://jsbin.com/kajiran/6/edit?html,css,js,output

D3 ! un monument

D3

Boite de dialogue : jquery, js objet

Pour mémoire http://codepen.io/anon/pen/zxLdgz http://www.oaa-accessibility.org/example/2/

apprendre sur le web : code academy

requestAnimationFrame

cliqued sur reload

Challenge: Catwalk

Made using: Khan Academy Computer Science.

arrays of objects

Arrays of Objects

Made using: Khan Academy Computer Science.

Animation : les bases

Plusieurs solutions s'offrent à vous

1. lancer une fonction à intervalle régulier
2. utiliser une fonction développée pour animer le DOM
3. privilégier le CSS si possible

Trois étapes pour réaliser une animation !

1.  // Step . What element do we want to animate? 
2.  // Step . What function will change it each time? 
3.  // Step : Call that on an interval

JS Bin

 frame

JS Bin

Devenir maître de l'animation

l'animation est rapide. Lorsque l'on veut maîtriser les valeurs à modifier, nous pouvons utiliser une équation simple :

var newValue = (startValue + ((currTime - startTime)/1000) * increaseValue)

(currTime - startTime)/1000 représente le temps écoulé en seconde : autrement dit, toute les secondeon ajoute à la valeur initiale la valeur à ajouter increaseValue.

Cette équation est à insérer dans la fonction d'animation. currTime est une variable globale de référence de début d'animation.

JS Bin

Stopper l'animation

JS Bin

css

JS Bin

Animating styles with requestAnimationFrame

Made using: Khan Academy Computer Science.

Les événements : quoi faire

Voici dans l'ordre le code à générer

1.         // Step : Find the element we want the event on
2.         // Step : Define the event listener function
3.         // Step : Attach event listener to element

Utilisation de PreventDefault

Preventing default behavior of events

Made using: Khan Academy Computer Science.

bug ! : Event en action

Corriger le code suivant pour faire apparaître correctement votre nom !

JS Bin

Event : have fun

JS Bin