Il est parfois nécessaire d'imbriquer des balises les unes dans les autres.

À faire vous-même 6.1

Modifier 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>
    <h1>Mon super site</h1>
    <div id="div_1" class="mesDiv"></div>
    <div id="div_2" class="mesDiv"></div>
</body>
</html>

style.css


h1{
    text-align: center;
}
.mesDiv{
    margin-left:auto;
    margin-right:auto;
    height : 250px;
    width : 960px;
}
#div_1 {
    background-color: red;
}
#div_2 {
    background-color: green;
    margin-top:2%;
}

script.js


function setup(){
    noCanvas();
}
function draw(){
}

Dans l'exemple ci-dessus, nous avons mis en place 2 "div" qui sont pour l'instant vide (le fond coloré est juste là pour vous montrer la position des "div", pas pour des raisons esthétiques !). Je vous laisse étudier le css qui pourrait vous donner des idées pour la construction de votre propre site.

Nous allons maintenant ajouter du texte (paragraphes) dans les "div" depuis le fichier JavaScript. Nous allons utiliser la fonction "parent" qui prend pour paramètre le nom de l'élément qui doit "accueillir" nos paragraphes (dans notre exemple cela sera donc nos "div").

À faire vous-même 6.2

Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) :

script.js


var p1;
var p2;
var div1;
var div2;
function setup(){
    noCanvas();
    p1=createP("Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ullamcorper lorem, fringilla volutpat dolor. Nullam at ligula elit. Mauris nec accumsan justo, at luctus sapien.");
    p2=createP("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at euismod tellus. Phasellus sit amet laoreet ex. Morbi sagittis enim eget ipsum volutpat volutpat vitae eu metus. Nunc vitae malesuada purus. Fusce gravida gravida ante in lobortis. Donec lacus purus, elementum et tempor id, rutrum vitae nibh. Pellentesque viverra fermentum");
    div1=select("#div_1");
    div2=select("#div_2");
    p1.parent(div1);
    p2.parent(div2);
}
function draw(){
}

Si vous vous interrogez sur l'étrangeté du contenu des paragraphes que nous avons ajouté, faites une recherche sur le "lorem ipsum".

Rien de difficile dans cet exemple, les 2 "div" ont "accueilli" les 2 paragraphes.

À faire vous-même 6.3

Créez un programme permettant de reproduire l'exemple ci-dessous (le fichier "index.html" est donné) :

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>Entrez un nom ci-dessous</p>
    <input></input>
    <button>Valider</button>
    <ul></ul>
</body>
</html>