Missions - JavaScript
Mission 1 : introduction JavaScript
Coder les fichiers HTML et js, [Link] et [Link] de l’exemple du polycopié du cours dans un
éditeur de texte.
Tester le code en ouvrant le fichier HTML avec un double-clic et le navigateur de votre choix.
Info : la page web s’affiche et en plus une fenêtre (souvent qualifiée de surgissante ou pop-up en
anglais) qui apparaît.
L’apparition de cette fenêtre est due à l’instruction « alert » présente dans le fichier js : il s’agit
d’une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant
un message. Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses
de la fonction alert().
Mission 2 : les premiers clics
Il s’agit de visualiser ce qu’il est possible de faire sur une page web grâce à js et l’utilisation d’un
bouton.
1) Créer un affichage au clic.
Créer un bouton qui permet d’afficher la date lorsque l’utilisateur crée sur un bouton.
Dans un éditeur de texte, créer un fichier html mon_premier_bouton.html et saisir le code
ci-dessous. Tester en ouvrant le fichier à l’aide d’un navigateur.
Infos :
- Pour accéder à un élément html à partir du js, la méthode [Link]
permet de sélectionner un élément html à partir de son id (on peut modifier le texte
affiché sur un bouton ou le texte d’une étiquette). Pour cela il faut que la balise ait un
attribut id sinon son accès est impossible.
- En js, La propriété innerHTML permet de modifier le contenu des éléments d’un
document HTML.
- L’attribut id est un attribut global utilisé pour cibler certains éléments d’une page HTML.
Il doit avoir une valeur propre et unique dans une page.
2) Modifier du contenu HTML au clic.
1ère Spécialité NSI IHM sur le web Page 1
Dans l’éditeur de texte, modifier le fichier html mon_premier_bouton.html comme ci-dessous :
- Changer le titre par Modifier du texte HTML
- Modifier du contenu de la balise du paragraphe <p> </p> (nommée « demo » grâce à
l’identifiant id= « demo ») : <p id="demo"> JavaScript peut changer le contenu HTML</p>
- Changer la valeur Date() par « Eh hop, cela a changé ! » et le texte par Cliquez ici !
Enregistrer le fichier html sous le nom [Link]. Tester en ouvrant le fichier à l’aide
d’un navigateur.
Comment-a-t-il été modifié ?
3) Cacher du contenu HTML au clic.
Dans l’éditeur de texte, modifier le fichier html [Link] comme ci-dessous :
- Changer le titre par Cacher du texte HTML
- Modifier du contenu de la balise du paragraphe <p> </p> (nommée « demo » grâce à
l’identifiant id= « demo ») : <p id="demo"> JavaScript peut cacher le contenu HTML</p>
- Changer la ligne de définition du bouton :
<button type="button" onclick="[Link]('demo').[Link]=’none’ ">
Cliquez ici !</button>
Enregistrer le fichier html sous le nom [Link]. Tester en ouvrant le fichier à l’aide d’un
navigateur.
Comment-a-t-il été modifié ?
Mission 3 : gestion d’événements
Analyser le code du fichier gestion_évé[Link] dans un éditeur de texte et le tester. On
peut avoir plusieurs gestionnaires d’événements sur un même élément.
Infos :
- Les événements ondblclick et onkeypress correspondent respectivement au fait que
l’utilisateur a double-cliqué sur un élément HTML et à l’appui sur une touche produisant
un caractère.
- La balise <input> permet de récupérer les entrées utilisateur. La balise <input
type="text" ...: />, récupère par défaut l’entrée de texte.
Mission 4 : changer la feuille de style d’une page à l’aide d’un bouton
1) Préparer une page HTML contenant un bouton appelé changeCSS et un titre.
2) Préparer deux feuilles de style CSS, l’une avec un fond sombre appelée [Link] et
l’autre avec un fond clair appelée [Link].
Placer ces deux fichiers dans le même dossier.
1ère Spécialité NSI IHM sur le web Page 2
3) Comment utiliser la feuille de style [Link] dans la page web ?
4) Configurer le bouton changeCSS de façon à déclencher la fonction js changeCSS()
lorsqu’on clique dessus.
Infos :
- La balise <input type="button" value= « mon bouton »/>, r écupère un bouton appelé mon
bouton.
- Aide : voir le fichier [Link] qui est un exemple d’une fonction qui change la
couleur de fond de la page lors d’un clic sur un bouton.
5) Coder le début de la fonction changeCSS() en utilisant la fonction js queryselector ()
pour sélectionner l’élément de type link de la page.
Info : [Link]() est un sélecteur plus générique qui sélectionne les
éléments à la manière des sélecteurs css.
6) Compléter le code de la fonction changeCSS en faisant usage de la fonction
getAttribute() pour lire la valeur de la feuille de style utilisée (attribut href), puis la
fonction setAttribute() pour modifier cette valeur et faire en sorte que la feuille de
style soit modifiée à chaque clic sur le bouton.
Info : la déclaration de variables se fait en js à l’aide des mots let ou const selon que la
variable sera ou non réallouée en cours de programme.
Mission 5 : changer la couleur de fond d’une page avec une couleur aléatoire (facultatif)
Concevoir une page web avec un bouton sur lequel sera affiché « Changer la couleur ».
Lorsqu’on clique sur ce bouton, une fonction js changeCouleurFond se lance et change la couleur
de fond de la page en une couleur généree aléatoirement au format RGB.
Infos :
- Une couleur au format RGB s’écrit avec un # suivi de 6 caractères hexadécimaux.
- On peut tirer au sort un nombre décimal de l’intervalle [0 ; 1[avec la fonction JavaScript
random de l’objet Math.
- On peut arrondir un nombre avec la méthode floor du même objet Math.
- On peut convertir un nombre en une base quelconque à l’aide de la fonction toString()
avec en paramètre la base souhaitée.
- On peut écrire une fonction intermédiaire coulHexa() qui tire au sort un nombre entre 0
et 256 puis le transforme en hexadécimal et enfin utiliser cette fonction pour générer
une couleur aléatoire au format RGB.
En complément : [Link]
Pour aller plus loin :
Nous nous sommes contentés de voir quelques instructions simples. Il est possible de programmer
en JavaScript. Si cela vous intéresse, vous pouvez consulter le lien suivant :
[Link]
1ère Spécialité NSI IHM sur le web Page 3