Lycée   >   Premiere   >   NSI   >   Interagir avec une page HTML : boutons cliquables

Interagir avec une page HTML : boutons cliquables

  • Fiche de cours
  • Quiz
  • Profs en ligne
Objectif

Analyser et modifier une page web en modifiant des boutons cliquables.

Points clés
  • Le DOM (Document Object Model) permet d’identifier de manière unique chaque élément de la page HTML.
  • En utilisant l’id du DOM, on peut analyser et modifier un bouton pour interagir avec la page.
Pour bien comprendre

Les bases HTML & CSS (SNT 2de)

1. Analyser un bouton
En informatique, un bouton est un composant d’interface graphique qui permet d’effectuer une opération qui a été programmée en cliquant dessus.

Pour pouvoir analyser un bouton, il faut tout d’abord repérer quel est l’élément de la page (HTML ou CSS) sur lequel il agit.

Le langage JavaScript (Js) utilise pour cela le DOM (Document Object Model), qui est une représentation standardisée de la page HTML et qui permet à un script de modifier tout ou partie de la page.

Pour identifier l’élément utilisé par le script, il suffit de regarder l’attribut id contenu dans la balise.

Remarque : « id » pour identité ou identifiant.
Exemple
Les lignes de codes suivantes permettent d’identifier l’élément paragraphe comme un bouton cliquable.

Pour que JavaScript agisse sur la balise ayant l’identifiant paragraphe, on indique document.getElementById("nom de l’identifiant"), puis la commande qui suit indique ce que l’on fait.

Exemple

La commande .style.color permet ici de changer la couleur. La fonction « maFonction » change ainsi la couleur du paragraphe concerné en bleu.
2. Modifier une page
a. Modifier la page en entier

La page HTML a pour identité « body » dans le DOM.

Si l’on veut changer la couleur de fond de la page HTML, il faut donc taper .style.background comme option (à la suite de body), ce qui donne le code suivant.

document.body.style.background="couleur que l’on choisit";
Exemple
Le code suivant permet de changer la couleur de fond de la page en jaune.

b. Modifier le texte d’une page

Pour modifier le texte d’une page, on utilise le code suivant.

document.getElementById("id").innerHTML="Nouveau texte";

Cet élément permet de modifier la balise d’identité « id » et de remplacer son contenu par « Nouveau texte ».

Exemple
Les lignes de code suivantes permettent de récupérer le contenu HTML de l’élément d’identité « id », et de le remplacer par « Vive l’informatique ! ».

Comment as-tu trouvé ce cours ?

Évalue ce cours !

 

Note 2.3 / 5. Nombre de vote(s) : 10
Question 1/5

La médiane de 6 notes est 13. Cela signifie que :
Question 2/5

On a obtenu la série statistique suivante :

Combien vaut la médiane ?
Question 3/5

On a obtenu la série ci-dessous :

Quelle est la médiane de cette série ?
Question 4/5

On a relevé les tailles en cm des élèves d’une classe :

 

Parmi les propositions suivantes, laquelle est vraie ?
Question 5/5

Les notes en français de deux classes littéraires sont données dans le tableau suivant :

Quelle est la note médiane ?

Vous avez obtenu75%de bonnes réponses !

Reçois l’intégralité des bonnes réponses ainsi que les rappels de cours associés

Une erreur s'est produite, veuillez ré-essayer

Consultez votre boite email, vous y trouverez vos résultats de quiz!

Découvrez le soutien scolaire en ligne avec myMaxicours

Le service propose une plateforme de contenus interactifs, ludiques et variés pour les élèves du CP à la Terminale. Nous proposons des univers adaptés aux tranches d'âge afin de favoriser la concentration, encourager et motiver quel que soit le niveau. Nous souhaitons que chacun se sente bien pour apprendre et progresser en toute sérénité ! 

EXERCE TOI EN T'ABONNANT

Fiches de cours les plus recherchées

NSI

Comprendre les requêtes HTTP et la réponse serveur

NSI

Comprendre la notion de cookie

NSI

Comprendre l'intérêt du protocole HTTPS

NSI

Comprendre le fonctionnement d'un formulaire

NSI

La transmission d'un formulaire avec GET ou POST

NSI

Reconnaitre différents constituants d'un ordinateur

NSI

Comprendre la structure des circuits combinatoires

NSI

Exécuter une séquence d'instructions

NSI

Comprendre la notion de réseau et de protocole

NSI

Comprendre les protocoles de la couche physique