Exercice de création

Exercice 1: // Créer un Mondrian interactif

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

Partie 1: création du tableau

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).

Partie 2: ajouter des interactions

b) Si vous avez terminé la partie précédente, compléter vos fichiers index.html et style.css avec ce qui suit.

Ce n'est pas le cas ? Dépliez moi !

c) Avant d’ajouter les interactions, réalisez ce qui suit:
(i) si ce n’est pas déjà fait, ouvrez le fichier index.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 devienne Artiste: suivi du prénom donné.
(vii) créer un fichier script.js dans le même dossier que index.html et style.css et, si ce n’est pas déjà fait, ajouter dans l’en-tête (entre <head> et </head>) de votre fichier index.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.