JavaScript
La fonction à rajouter :
function date(){
let now = new Date();
alert('Nous sommes le :\n' + now);
}
Et pour placer l'écouteur :
btn.addEventListener('wheel', date);
function date(){
let jours = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
let mois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
let now = new Date();
let aujourdhui = jours[now.getDay()] + ' ' + now.getDate() + ' ' + mois[now.getMonth()];
let heure = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
alert('Nous sommes le :\n' + aujourdhui + '\nIl est :\n' + heure);
}
Vous pouvez créer par exemple un autre bouton dans la page; cependant, il faudra pouvoir le différencier de l'autre !
En effet, la méthode de sélection utilisée précédemment ( querySelector() ) sélectionne le premier élément du type donné
qu'elle rencontre dans la page; à partir de deux éléments du même type, elle n'est donc plus adaptée, à moins
de lui spécifier un sélecteur CSS plus compliqué...
On peut plutôt utiliser la méthode getElementById() qui, comme son nom l'indique, sélectionne un élément
selon son id : il faut donc en donner un à notre nouveau bouton, mais, du coup, également au premier si on veut
pouvoir continuer à les sélectionner indépendamment l'un de l'autre !
Dans le code HTML :
<button id="time" type="input">Je donne la date</button>
.......
<button id="calcul" type="input">Ma note au Bac</button>
Et dans le code JS :
// Sélection des boutons
let time = document.getElementById("time"); // premier bouton
let calc = document.getElementById("calc"); // deuxième bouton
// gestionnaire d'évènements du premier bouton
function date(){
..............
}
// gestionnaire d'évènements du deuxième bouton
function calcul(){
...............
}
// écouteurs sur les boutons
time.addEventListener('wheel', date);
calc.addEventListener('click', calcul);
On notera qu'utiliser le même nom pour une variable et pour un id ( time et "time", calc et "calc" ) ne pose
aucun problème, ces deux termes ne désignent absolument pas les mêmes objets.
Il ne faut bien sûr pas, par contre, donner le même nom à une variable et à une fonction !!
Pour sélectionner tous les éléments correspondant à un nom de balise donné, on utilisera la méthode
getElementsByTagName(); on récupère alors dans la variable la liste de ces éléments, que l'on parcourt pour modifier
le style de chacun.
function titres(){
let titles = document.getElementsByTagName('h2'); // sélection de toutes les balises "h2"; "titles" contient la liste de ces éléments
for ( let titre of titles){ // parcours de la liste des élément sélectionnés
titre.style.fontSize = '5em'; // modification du style ( ici taille des caractères )
}
}
Comme on doit mettre en forme des paragraphes ( balise <p> ), on peut penser utiliser la même méthode de sélection que précédemment...
mais on ne doit pas agir sur tous les paragraphes, uniquement ceux qui sont inclus dans la section d'id t2.
La solution est d'utiliser plutôt la méthode querySelectorAll(), qui sélectionne tous les éléments
correspondant à un sélecteur CSS donné; dans notre cas, ce sélecteur est : #t2 p, qui signifie effectivement "les paragraphes
descendants de t2" ( pas seulement les enfants "directs"...)
function rouge(){
let red = document.querySelectorAll('#t2 p');
for ( let p of red){
p.style.color = 'red';
}
}
Pour modifier le fond du document, on peut directement sélectionner l'élément <body> sous cette forme :
function fond(){
document.body.style.backgroundColor = "blue";
}
function modifie(){
let paraf = document.getElementById('mod'); // sélection du paragraphe d'id "mod"
paraf.innerHTML = "Ah c'est quand même vachement plus intéressant !..."; // remplacement de son contenu
}
function nouveau(){
let nvl = document.createElement('p'); // création d'un élément de type paragraphe
let parent = document.getElementById('t1'); // sélection du parent
nvl.innerHTML = "Je suis un petit nouveau ;-)"; // modifications du contenu du nouveau paragraphe
parent.appendChild(nvl); // ajout du nouveau paragraphe comme dernier enfant direct du parent
}