Vous savez déjà que tout ce qui concerne la décoration de la page fait partie du domaine du css.
Modifiez comme suit les fichiers suivants :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p>Hello World</p>
<p>Un deuxième paragraphe</p>
</body>
</html>
style.css
p {
background-color:rgb(255,0,0);
}
script.js
function setup(){
noCanvas();
}
function draw(){
}
Rien d'extraordinaire dans l'exemple ci-dessus : nous avons utilisé le fichier "style.css" pour attribuer un style (couleur de fond rouge) à toutes les balises "p" de la page. Au passage, vous pouvez vérifier que la balise "p" est bien une balise de type "block", par défaut, elle prend toute la largeur de la page. Vous pouvez compléter le fichier "style.css" en ajoutant un "width:50%;" juste en dessous du "background-color:rgb(255,0,0);", vous constaterez alors que les paragraphes ne prennent plus que 50 % de la largeur disponible. En revanche, le "passage à la ligne" est toujours d'actualité : les 2 paragraphes se placent toujours sur 2 lignes différentes.
Si nous rajoutons un paragraphe depuis le code JavaScript avec la fonction "createP", ce nouveau paragraphe aura aussi un fond rouge :
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) :
script.js
function setup(){
noCanvas();
para=createP("ce paragraphe a été créé depuis le JavaScript, il a un fond rouge");
}
function draw(){
}
La fonction "style" permet de modifier le css lié à un élément html. Cette fonction prend 2 paramètres, la propriété à modifier et la valeur à donner à cette propriété.
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) :
script.js
function setup(){
noCanvas();
para=createP("ce paragraphe a un fond vert");
para.style("background-color","rgb(0,255,0)");
}
function draw(){
}
Créez un programme permettant d'obtenir ceci :
Pour vous aider : vous aurez sans doute besoin d'utiliser les 2 listeners "mouseOver" (qui appelle une fonction de "callback" quand le curseur de la souris survole l'élément "surveillé" par "mouseOver") et "mouseOut" (qui appelle une fonction de "callback" quand le curseur de la souris "quitte" l'élément "surveillé" par "mouseOut"). Si nécessaire, vous pouvez consultez la documentation officielle ici).
Dans les exemples précédents, les 2 premiers paragraphes ont été créés depuis le html et le 3ème depuis le JavaScript. Est-il possible de modifier (avec, par exemple, les fonctions "html" et "style") les 2 paragraphes créés depuis le html ?
La réponse est oui, mais avant d'étudier cette possibilité, il faut, si nécessaire, revoir la fonction d'id et de class en html.
Pour faire court, il est possible d'identifier un élément html particulier en lui attribuant un id ou une class (pour la différence entre id et class, replongez-vous dans les activités consacrées au html et au css).
Créez un nouvel exemple avec les fichiers suivants et testez-le :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p id="para1">Un premier paragraphe</p>
<p id="para2">Un deuxième paragraphe</p>
</body>
</html>
style.css
#para1 {
background : rgb(255,255,0);
font-size : 15px;
}
#para2 {
background-color : rgb(0,255,255);
font-size : 20px;
}
script.js
function setup(){
noCanvas();
}
function draw(){
}
Pour modifier le style (ou le contenu) des paragraphes d'id "para1" et "para2", nous allons utiliser la fonction "select" afin de créer des éléments "modifiables". Cette fonction "select" prend un paramètre : l'id de l'élément concerné (il est aussi possible d'utiliser la classe d'un élément (select(".maClasse")) ou même le type de balise (select("p")). Une fois l'élément créé avec la fonction "select", vous pouvez le manipuler comme bon vous semble, comme s'il avait été créé depuis le JavaScript.
Modifiez le fichier "script.js" de l'exemple précédent (les 2 autres fichiers restent identiques
var p1;
var p2;
function setup(){
noCanvas();
p1=select("#para1");
p2=select("#para2");
p1.mouseOver(modifIn_p1);
p1.mouseOut(modifOut_p1);
p2.mouseOver(modifIn_p2);
p2.mouseOut(modifOut_p2);
}
function draw(){
}
function modifIn_p1(){
p1.style("background-color","rgb(255,0,0)");
p1.style("font-size","20px");
}
function modifIn_p2(){
p2.style("background-color","rgb(255,0,0)");
p2.style("font-size","25px");
}
function modifOut_p1(){
p1.style("background-color","rgb(255,255,0)");
p1.style("font-size","15px");
}
function modifOut_p2(){
p2.style("background-color","rgb(0,255,255)");
p2.style("font-size","20px");
}
Imaginez que dans l'exemple ci-dessus, j'ai besoin de modifier 5 paramètres css ; il faudrait donc que j'utilise 5 fois la fonction "style". Il existe une solution plus simple : attribuer une classe, qui aura été préalablement définie dans le fichier css, à un élément html en utilisant la fonction "class"). Cette fonction prend un paramètre : le nom de la classe à attribuer.
Créez un nouvel exemple avec les fichiers suivants et testez-le :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p id="para1">Un premier paragraphe</p>
<p id="para2">Un deuxième paragraphe</p>
</body>
</html>
style.css
.survol {
background-color : rgb(255,0,0);
font-size : 20px;
}
script.js
var p1;
var p2;
function setup(){
noCanvas();
p1=select("#para1");
p2=select("#para2");
p1.mouseOver(modifIn_p1);
p1.mouseOut(modifOut_p1);
p2.mouseOver(modifIn_p2);
p2.mouseOut(modifOut_p2);
}
function draw(){
}
function modifIn_p1(){
p1.class("survol");
}
function modifIn_p2() {
p2.class("survol");
}
function modifOut_p1(){
p1.removeClass("survol");
}
function modifOut_p2(){
p2.removeClass("survol");
}
Vous aurez sans doute compris tout seul que la fonction "removeClass" permet de supprimer l'attribution d'une classe à un élément.
Il est possible, en utilisant la fonction "selectAll" de sélectionner plusieurs éléments. Cette fonction permet de créer un tableau contenant plusieurs éléments html. Cette fonction prend en paramètre le type de balise (par exemple : selectAll("p"), permettra de constituer un tableau contenant tous les paragraphes de la page web) ou une class (par exemple : selectAll(".maClass") permettra de constituer un tableau contenant tous les éléments qui auront la class "maClass").
Créez un nouvel exemple avec les fichiers suivants et testez-le :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
<p>Un troisième paragraphe</p>
</body>
</html>
style.css
.normal {
background-color : rgb(255,255,0);
font-size : 15px;
}
script.js
var paras;
function setup(){
noCanvas();
paras=selectAll("p");
for (i=0;i<paras.length;i=i+1){
paras[i].class("normal");
}
}
function draw(){
}
Comme vous pouvez le constater ci-dessus, nous utilisons une boucle "for" pour parcourir le tableau "paras" afin d'attribuer à chaque élément de ce tableau la class "normal".
Il est possible de définir un "listener" sur chaque élément à l'aide d'une boucle "for" :
Créez un nouvel exemple avec les fichiers suivants et testez-le :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p>Un premier paragraphe class="normal"</p>
<p>Un deuxième paragraphe class="normal"</p>
<p>Un troisième paragraphe class="normal"</p>
<h3></h3>
</body>
</html>
style.css
.normal {
background-color : rgb(255,255,0);
font-size : 15px;
}
.survol {
background-color : rgb(255,0,0);
font-size : 20px;
}
script.js
var paras;
var h;
function setup(){
noCanvas();
paras=selectAll("p");
for (i=0;i<paras.length;i=i+1){
paras[i].mouseOver(modifIn);
paras[i].mouseOut(modifOut);
}
h=select("h3");
}
function draw(){
}
function modifIn(){
h.html("Vous survolez un des paragraphes");
}
function modifOut(){
h.html("");
}
Une question se pose : imaginons que nous voulions que tout paragraphe survolé se voit appliquer la class "survol", comment faire ?
Pour l'instant, il nous suffisait d'écrire "p1.class("survol")" dans la fonction de callback qui gère le "survole" de l'élément "p1". Problème, ici, nous ne connaissons pas à l'avance le paragraphe qui sera survolé, par quoi faut-il remplacer "p1" ? La réponse est simple : par le mot-clé "this" qui signifie "l'élément courant" ou "l'élément concerné".
Créez un nouvel exemple avec les fichiers suivants et testez-le :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p>Un premier paragraphe class="normal"</p>
<p>Un deuxième paragraphe class="normal"</p>
<p>Un troisième paragraphe class="normal"</p>
<h3></h3>
</body>
</html>
style.css
.normal {
background-color : rgb(255,255,0);
font-size : 15px;
}
.survol {
background-color : rgb(255,0,0);
font-size : 20px;
}
script.js
var paras;
var h;
function setup(){
noCanvas();
paras=selectAll("p");
for (i=0;i<paras.length;i=i+1){
paras[i].mouseOver(modifIn);
paras[i].mouseOut(modifOut);
}
h=select("h3");
}
function draw(){
}
function modifIn(){
this.class("survol");
}
function modifOut(){
this.class("normal");
}