dupontquizz

Mélanger un tableau :

const s = "123456789"; //string

const t = Array.from(s,s => Number(s)); //String transform tab

// Array.from({length: 9}, (v, k) => k);

test

Voici une archive de DS :

Attention : de nombreuses questions sont obsolètes avec l'apparition de flex !

https://docs.google.com/document/d/1oa4LQ11eBYLl49nW-pAThcGTmxL1xYs1F6fL3gau7L8/pub

https://docs.google.com/document/d/1NHfdXdMkLWNYzCAC40D-EiYpv93ACtsn7P7PxtsDepA/pub

https://docs.google.com/document/d/116M1eMxVHhvr--MyPWuYowqWWCPf8muBQVTZ5O1GxHU/pub

https://docs.google.com/document/d/1DhE7n2Kl18e_a37gwLRB4Dv54S5jFVW2NqCga7jj0U8/pub

https://docs.google.com/document/d/1vdLcTbfcq1dpScJQYSQO6KBcCNeq2Kjq5O_XhgJZPYo/pub

https://docs.google.com/document/d/1ezfapsMI3qm1XeVSp4R6tjFDgl_sGib1nVgxhqcN11g/pub

examen 1

Event

JS Bin

Compléter le code pour obtenir la gestion de la souris !

<div id="game">

</div>

//init array and find the id
var dots = [],

game =document.--?--("#game");

// create and store 200 divs

for (var i = 0; i < 200; i++) {

var node = document.createElement("div");

game.--?--

dots.--?--

}

var currentDot = 0;

// gestion de la souris

game.addEventListener("--?--", function (--?--) {

--?--.style.color="green"; // in the example color = random

var dot = dots[currentDot],

rect = game.getBoundingClientRect(),

offsetX = e.clientX - rect.left,

offsetY = e.clientY - rect.top;

dot.--?--.left = offsetX + "px";

dot.--?--.top = offsetY + "px";

currentDot = (currentDot + 1) % dots.length;

});

// leave the game

game.addEventListener(--?--, function (e) {

game.style.backgroundColor="white";

});

Ne vous préoccupez pas des effets.

remarque : les effets de mouvement et couleur sont gérés par les transitions css
.trail {
position: absolute;
border-radius: 50%;
background: red;
transition: all 3s;

}

Style

html :
<section id="anim">
<img id="denis" src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg" alt="me">

</section>

js :

let me = --?-- ;
let body = --?-- ;
let angle = 0, lastTime = null;

let bodyW = body.getBoundingClientRect().width,
bodyMe = me.getBoundingClientRect().width;

function animate(time) {
if (lastTime != null)
angle+= (time - lastTime)* 0.001;
lastTime = time;

--?-- = (Math.cos(angle)* (bodyW-bodyMe)/2)+"px";
--?-- = --?--

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

event

Click on me

Trouver le code pour obtenir le comportement précédent.

HTML :
<div id="event">
<div id="0">Click on me</div>
<div id="1">Click on me</div>
</div>

style :
.selected {
cursor: wait;
}

.selected:after{
content:" Afficher la console : " attr(id);
}

JS :

var zone = document.body.querySelector("#event");
var zoneD = zone.querySelectorAll('div');

var testPara= function(index, para){
-- compléter --
console.log("nb =" + index);

para.classList.toggle('selected');

};

for (var i = 0; i < zoneD.length; i++) {
-- compléter --
}

reduce

Donner avec la fonction "reduce" le min d'un tableau !

closure

Donner la fonction proportion qui permet de calculer le rapport de taille entre les div et le body.

function tick() {

let rapportBody = proportion(document.body.offsetWidth);
Array.from(document.querySelectorAll('div'),
el => el.textContent =rapportBody(el.offsetWidth)+ " : " +el.offsetWidth+ " px");
window.requestAnimationFrame(tick);
}

window.requestAnimationFrame(tick);

Voici l'affichage pour deux div !

createElement

<blockquote id="quote">
To be or not to be
</blockquote>

Ecrire la fonction elt pour que l'appel suivant

document.querySelector("#quote").appendChild(

elt("footer", " --- ", elt("strong","William Shakespeare"),", ", elt("em","Hamlet "), "1598"));

donne le html :

Exemple
To be or not to be
devient :
To be or not to be

createText

(function anonymous( _alt) {

var images = document.body.querySelectorAll("img");

Array.from( images ).forEach(function( image ) {
if(image.alt === _alt) {
image.parentNode.replaceChild(document.createTextNode(image.alt),image);
}
});

})("Cat");

Quel est le rôle de la fonction anonymous ?

récursif

(function talksAbout(node, _string) {
if ( --?-- )
Array.from( node.childNodes ).forEach( function( node ) {
talksAbout( node, _string )
});
else if ( --?-- )
if( node.nodeValue.indexOf( _string) > -1 )
action;
})(document.body, "Dupont");

Compléter le code --?-- pour pouvoir rechercher le string Dupont à partir de document.body

Exemple :

Modifier les paragraphes

Attention ici Dupond avec un D

ici pas de Dupont ?

createTextNode

<p>The <img src="img/cat.png" alt="Cat"> in the
<img src="img/hat.png" alt="Hat">.</p>

(function replaceImages() {

var images = document.body.getElementsByTagName("img");

for (var i = images.length - 1; i >= 0; i--) {
var image = images[i];
if(image.alt) {
var text = document.createTextNode(image.alt);
image.parentNode.replaceChild(text,image);
}
}
})();

Comment simplifier l'écriture de la boucle !

ClassList

HTML :

<p data-schedule="end">meeting visio.</p>
<p data-schedule="to-do"> call product.</p>
<p data-schedule="end">visio conf.</p>

<style>
.finded{
color : red;
}
</style>

Js :
function talksAbout(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (var i = 0; i < node.childNodes.length; i++) {
if( talksAbout(node.childNodes[i], string) ){
return true;
}
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if( node.nodeValue.indexOf(string) > -1 ){
node.parentNode.classList.add("finded");
return true;
}
return false;
}
}

console.log(talksAbout(document.body, "visi"));

Afficher le code !

removeChild

HTML :

<p>item 1</p>
<p>item 2</p>
<p>item 3</p>

JS :
var paras = document.body.querySelectorAll("p");

for (var i =0 ; i<paras.length ; i++) {
console.log(paras.length); // statique
paras[i].parentNode.removeChild(paras[i]);
}

Donner l'ensemble de l'affichage.

insertBefore

HTML :
<h1>item 1</h1>
<h1>item 2</h1>
<h1>item 3</h1>
<h1>item 4</h1>

JS :
var heads = document.body.querySelectorAll("h1");

document.body.insertBefore(heads[0], heads[4]);

Donner le résultat

JS

HTML :

<p data-schedule="end">meeting.</p>
<p data-schedule="to-do"> call product.</p>
<p data-schedule="end">visio conf.</p>

JS :

var paras = document.body.getElementsByTagName("p");

for (var i =0 ; i<paras.length ; i++) {
console.log(paras.length); // dynamique
if (paras[i].getAttribute("data-schedule") == "to-do")
paras[i].parentNode.removeChild(paras[i]);
}

Donner l'ensemble des résultats.

DOM

HTML :
<p> One </p>
<p> Two </p>
<p> Three </p>

JS :

var paragraphs = document.body.getElementsByTagName("p");

paragraphs[0].insertBefore(paragraphs[2]);

Que donne le code suivant ?

JS

HTML :
<p data-schedule="end">meeting.</p>
<p data-schedule="to-do"> call product.</p>
<p data-schedule="end">visio conf.</p>

Supprimer les noeuds data-schedule = to-do

DOM

HTML :
<body>
<span>A</span><span>B</span>
<span>C</span>
</body>

JS :
var n = document.body.firstChild.nextSibling;

document.body.removeChild(n);

Donner le code HTML résultant.

DOM

HTML :

<span>A</span>
<span>B</span>
<span>C</span>

JS :

var spans = document.getElementsByTagName("span");

spans[1].parentNode.removeChild(spans[3]);

Donner le résultat.

DOM

HTML :
<div> 1 </div>
<div> 2 </div>

JS :
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++){
div = document.createElement("div");
div.innerHTML = divs.length + i;
document.body.appendChild( div );
}

Donner le html résultant.

Dom

HTML :

<h1 id="modifier"> Urgent </h1>

JS :

Donner le code qui modifie le texte Urgent en utilisant la propriété NodeValue.

test

HTML :
<body>
<span>A</span><span>B</span><span>C</span>
</body>

JS :

var spanA = document.body.firstChild;

document.body.removeChild(spanA);

Donner l'affichage du code suivant.

dupontquizz

input

DOM 3

DS : filtre and Co

test

css *

Quizz

Test !

DS array

DS

test

examen 1

Event

Style

event

reduce

closure

createElement

createText

récursif

createTextNode

ClassList

removeChild

insertBefore

JS

DOM

JS

DOM

DOM

DOM

Dom

test