La finalité de cet exercice est de créer une page web interactive inspirée de Composition en rouge, jaune, bleu et noir réalisé par Piet Mondrian en 1921.
Composition en rouge, jaune, bleu et noir, 1921, Piet Mondrian |
Oeuvre interactive à concevoir |
a) Créer une page web semblable à l’image ci-dessous.
Pour se faire, vous pourrez notamment faire appel à ce qui est présent dans le cours précédent (5.3) notamment le module CSS de mise en page Flexbox (voir >ICI< pour une aide).
b) Si vous avez terminé la partie précédente, compléter vos fichiers
index.html
etstyle.css
avec ce qui suit.
c) Avant d’ajouter les interactions, réalisez ce qui suit:
(i) si ce n’est pas déjà fait, ouvrez le fichierindex.html
avec votre navigateur web,
(ii) appuyez sur la touche \(\fbox{F12}\),
(iii) ouvrez la console Javascript
(iv) y testez les instructions suivantes :
> navigator
???
> slogan = "La NSI, c'est cool !"
???
> typeof(slogan)
???
> slogan[3]
???
> slogan.slice(3, 6)
???
> console.log(slogan)
???
> alert(slogan)
???
> document.getElementById("artiste").innerHTML
???
> document.getElementById("artiste").innerHTML = "Artiste:"+" "+"Mondrian Piet"
???
> document.getElementById("artiste").innerHTML
???
> document.getElementById("artiste").style.backgroundColor = "orangered"
???
(v) complétez sur la page web la zone de texte adjacent à la droite de
Prénom
, puis testez:
> document.getElementById("prenom").value
???
(vi) Proposez une instruction afin de modifier le contenu de l’élèment d’identifiant
"artiste"
afin qu’il devienneArtiste:
suivi du prénom donné.
(vii) créer un fichierscript.js
dans le même dossier queindex.html
etstyle.css
et, si ce n’est pas déjà fait, ajouter dans l’en-tête (entre<head>
et</head>
) de votre fichierindex.html
la ligne<script type="text/javascript" src="script.js"></script>
.
(ix) complétez ce fichier avec ce qui est présent dans l’onglet JavaScript dans la zone précédente.
(x) remplacez les???
présents dans celui-ci afin d’ajouter les interactions souhaitées.