Pour chacune de ces cinq tâches, dire lequel des trois langages —…

Application directe du cours · niveau 1 (application) · NSI (première), chapitre 10 — Interagir sur le Web · HTML, CSS et composants

Énoncé

Pour chacune de ces cinq tâches, dire lequel des trois langages — HTML, CSS ou JavaScript — en est responsable : (a) centrer le titre de la page ; (b) déclarer une case à cocher ; (c) griser le bouton d'envoi tant que le champ « courriel » est vide ; (d) donner à l'onglet du navigateur le nom « Inscription » ; (e) changer la couleur de fond d'un bouton lorsque la souris le survole.

Corrigé

Langage Comment

(a) CSS `h1 { text-align: center; }`

(b) HTML ``

(c)

JavaScript

	Langage	Comment
(a)	CSS	`h1 { text-align: center; }`
(b)	HTML	``
(c)	JavaScript	il faut réagir à un événement `input` et modifier `bouton.disabled`</td></tr><tr style=""><td style="text-align:center;padding:8px 12px;color:#34332D;vertical-align:top">(d)</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">HTML</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">`<title>Inscription</title>`</td></tr><tr style="border-bottom:1.5px solid #2E2C26"><td style="text-align:center;padding:8px 12px;color:#34332D;vertical-align:top">(e)</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">CSS</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">`button:hover { background: gold; }`</td></tr></table></div> Le piège est en (e). « Quand la souris survole » ressemble à un événement, donc à du JavaScript. C'est pourtant du CSS : la pseudo-classe `:hover` décrit un état de l'élément, pas une action à exécuter. La règle de partage est nette : si l'on peut le dire sous la forme « dans tel état, tel aspect », c'est du CSS ; s'il faut calculer quelque chose, c'est du JavaScript. En (c), la condition dépend du contenu du champ : aucun sélecteur ne sait l'exprimer, il faut du code. Les autres exercices de ce chapitre Le cours du chapitre Un blocage sur cet exercice ? Le tuteur d'Adloun guide par questions, sans donner la réponse. Adloun — cours, exercices corrigés et annales du bac, du lycée aux classes préparatoires. Découvrir la plateforme · Tous les exercices de NSI (première) · Annales du bac Mentions légales · CGV · Confidentialité

il faut réagir à un événement `input` et modifier

bouton.disabled</td></tr><tr style=""><td style="text-align:center;padding:8px 12px;color:#34332D;vertical-align:top">(d)</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">HTML</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top"><title>Inscription</title></td></tr><tr style="border-bottom:1.5px solid #2E2C26"><td style="text-align:center;padding:8px 12px;color:#34332D;vertical-align:top">(e)</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">CSS</td><td style="text-align:left;padding:8px 12px;color:#34332D;vertical-align:top">button:hover { background: gold; }</td></tr></table></div>

Le piège est en (e). « Quand la souris survole » ressemble à un événement, donc à du JavaScript. C'est pourtant du CSS : la pseudo-classe :hover décrit un état de l'élément, pas une action à exécuter. La règle de partage est nette : si l'on peut le dire sous la forme « dans tel état, tel aspect », c'est du CSS ; s'il faut calculer quelque chose, c'est du JavaScript. En (c), la condition dépend du contenu du champ : aucun sélecteur ne sait l'exprimer, il faut du code.

Les autres exercices de ce chapitre Le cours du chapitre

Un blocage sur cet exercice ? Le tuteur d'Adloun guide par questions, sans donner la réponse.