Vous devez travailler connectés (lien « Connexion » en haut à droite de la page). Sinon, vous rencontrerez des problèmes d'avancement et vous risquez d'être comptés absent. En étant connectés vous retrouverez l'endroit où vous en étiez à la séance suivante.
Révisons les notions vues au Sujet-7
<body>
<h1> Bonjour,
<span>Cliquez sur le <input type="button" value="bouton"/></span>
<i>important</i>
</h1>
<p>Merci</p>
</body>
document.querySelector('h1').addEventListener('click',()=>console.log('hello'))Sur quel(s) élément(s) peut cliquer l'utilisateur pour afficher « hello » sur la console ?
<body>
<h1> Bonjour,
<span>Cliquez sur le <input type="button" value="bouton"/></span>
<i>important</i>
</h1>
<p>Merci</p>
</body>
document.querySelector('body' ).addEventListener('click',()=>console.log('Click sur body' ));
document.querySelector('h1' ).addEventListener('click',()=>console.log('Click sur h1' ));
document.querySelector('span' ).addEventListener('click',()=>console.log('Click sur span' ));
document.querySelector('input').addEventListener('click',()=>console.log('Click sur input'));
document.querySelector('i' ).addEventListener('click',()=>console.log('Click sur i' ));
document.querySelector('p' ).addEventListener('click',()=>console.log('Click sur p' ));
L'utilisateur clique sur le bouton. Qu'est-ce qui est affiché dans la console ?
(ne tenez pas compte de l'ordre)
<body>
<h1> Bonjour,
<span>Cliquez sur le <input type="button" value="bouton"/></span>
<i>important</i>
</h1>
<p>Merci</p>
</body>
document.querySelector('h1' ).addEventListener('click',(event)=>console.log(event.target.nodeName));
Qu'est-ce qui est affiché dans la console quand l'utilisateur clique sur le bouton ?
<body>
<h1> Bonjour,
<span>Cliquez sur le <input type="button" value="bouton"/></span>
<i>important</i>
</h1>
<p>Merci</p>
</body>
document.querySelector('h1' ).addEventListener('click',(event)=>console.log(this.nodeName));
Qu'est-ce qui est affiché dans la console quand l'utilisateur clique sur le bouton ?
<body>
<h1> Bonjour,
<span>Cliquez sur le <input type="button" value="bouton"/></span>
<i>important</i>
</h1>
<p>Merci</p>
</body>
document.querySelector('body' ).addEventListener('click',(event)=>console.log(this.nodeName));
Qu'est-ce qui est affiché dans la console quand l'utilisateur clique sur le bouton ?
<input type="button"/>
<ul>
</u>
document.querySelector('input').addEventListener('click',function(){
let l=document.createElement('li');
l.textContent='hello';
document.querySelector('ul').append(l);
});
document.querySelector('XYZ').addEventListener('click',()=>console.log('click'))
Quand l'utilisateur clique sur le bouton une ligne <li> est ajoutée dans le <ul>.
Que faut-il écrire à la place de XYZ pour afficher 'click' dans la console quand l'utilisateur clique sur un de ces <li> ?
document.querySelector('XYZ').addEventListener('click',()=>console.log('click'))s’exécute au démarrage de la page. Les <li> n'existent pas encore. Donc document.querySelector('li') retourne « null »<input type="button"/>
<ul>
<li>Tomate</li>
<li>Poire</li>
<li>Orange</li>
</u>
document.querySelector('ul').addEventListener('click',function(event){
if(XYZ){return;}
console.log('click');
})
Que faut-il écrire à la place de XYZ pour que « click » ne soit affiché que quand l'utilisateur clique sur un LI ?Révisons les notions vues au Sujet-8
Écrivez une fonction fléchée, simplifiée au maximum, qui prend en paramètre deux entiers x et y et retourne la somme de ces deux entiers.
Écrivez une fonction fléchée, simplifiée au maximum, qui prend en
paramètre un paramètre « s » et l'affiche dans la console.
Traduisez cette fonction anonyme en fonction fléchée, en simplifiant au maximum.
function(a){return Math.max(a,0);}
Traduisez cette fonction anonyme en fonction fléchée, en simplifiant au maximum.
function(x,y,z){let a=x+y;return z*a;}Traduisez cette fonction fléchée en fonction anonyme non fléchée.
(u,v)=>u+':'+v
let tab=['train','voiture','vélo','train'];
Utilisez une boucle for ... of pour afficher chacun des véhicules du tableau dans la console.
Utilisez la variable « v » pour la boucle.
const ps=document.querySelectorAll('p');Utilisez une boucle for ... of pour afficher tous les paragraphes en rouge.
Utilisez la variable « p » pour la boucle.
const ps=document.querySelectorAll('p');Utilisez forEach pour afficher tous les paragraphes en rouge.
Utilisez la variable « p » et « ps »
let tab=['train','voiture','vélo','train'];Utilisez forEach et ma_fonction pour afficher le tableau.
function ma_fonction(x)
{
console.log(x);
}
tab.forEach(ma_fonction());
vous exécutez ma_fonction avant que la fonction tab.forEach ne soit appelée.
Révisons les notions vues au Sujet-9
En utilisant jQuery, affichez en rouge tous les paragraphes du document.
Décomposons la ligne suivante en plusieurs parties:
$('p').css('color','red');Que faut-il écrire pour créer une liste jQuery contenant tous les éléments ayant class="actu" ?
XYZ
z.css('color','red');
En jQuery, que faut-il écrire à la place de XYZ pour que le code ci-dessus affiche en rouge tous les <li> du document ?
En jQuery que faut-il écrire pour transformer la première ceci:
<div>bla bla</div>
en ceci:
<div style="left:100px">bla bla</div>
function ma_fonction()
{
console.log('click');
}
Que faut-il écrire en jQuery pour que ma_fonction soit appelée quand un utilisateur clique sur un paragraphe ?
<span>Cerise</span><span>Framboise</span><span>Fraise</span>
function afficher(){
console.log('click');
}
Traduisez le code DOM suivant en jQuery:
document.querySelectorAll('span').forEach(s=>s.addEventListener('click',afficher));
<p id="p1">Tom</p>
<p id="p2">Joe</p>
Que faut-il écrire en jQuery pour que le deuxième paragraphe affiche « Liam » à la place de « Joe » ?
<input type="text"/>
console.log(XYZ);
Que faut-il écrire à la place de XYZ pour afficher dans la console ce que l'utilisateur a tapé dans le champs texte ?
<div>
<p>bonjour</p>
<p>aurevoir</p>
<div>
let n=XYZ;
n.text('coucou');
$('div').append(n);
On voudrait créer un nouveau paragraphe et l'insérer dans le div. La création d'un élément se fait en plusieurs étapes.
Que faut-il écrire à la place de XYZ ?
<span>Cerise</span><span>Framboise</span><span>Fraise</span>
$('span').on('click',function(){XYZ});Quand l'utilisateur clique sur un <span>, il devient rouge. Que faut-il écrire à la place de XYZ ?
.ok{
color: green;
}
<ul>
<li>Avion</li>
<li>Train</li>
<li>Voiture</li>
</u>
Traduisez le code suivant en jQuery (en une seule ligne):
const lis=document.querySelectorAll('li');
for(const li of lis){
li.classList.add('ok');
}Quelles sont les fonction jQuery correspondant aux notion DOM suivantes: