Fiche de cours

Interagir avec une page HTML : événements

Lycée   >   Premiere   >   NSI   >   Interagir avec une page HTML : événements

  • Fiche de cours
  • Quiz et exercices
  • Vidéos et podcasts
Objectif

Repérer dans une page HTML les événements permettant une interaction.

Points clés
  • Un événement est une action déclenchée par l’utilisateur.
  • Il faut repérer les événements clés les plus utilisés pour pouvoir définir une action : onmouseover, onmouseout, onclick, onkeydown, etc.
Pour bien comprendre
  • Le langage HTML et les balises (SNT 2de)
  • Le langage CSS et les balises (SNT 2de)
1. Le principe

Dans une page web en langage HTML, on peut modifier le style en modifiant le langage CSS, mais une page peut interagir avec l’utilisateur via différentes actions : survol d’une zone, d’une image, clic d’un bouton, etc.

On utilise pour cela le langage JavaScript, en définissant une série d’événements (actions déclenchées par l’utilisateur). Le but ici n’est pas d’étudier ce langage créé en 1995, mais d’en faire une présentation.

Le langage JavaScript est un langage interprété par le navigateur, le code pourra être mis entre des balises <script> et </script>, mais il faudra pour cela identifier chaque balise du code HTML par un identifiant ou rajouter un attribut.

Exemple
Création d’une fenêtre d’alerte cliquable à l’ouverture de la page (pas d’attribut).
<script> Balise d’ouverture du langage JavaScript.
   alert("Ouverture du site") Permet de créer une fenêtre cliquable d’alerte avec le message « ouverture du site ».
</script> Balise de fermeture du langage JavaScript.

Ce script permet la création d'une fenêtre d’alerte cliquable.

2. Les évènements les plus usités
Un attribut est une valeur supplémentaire qui permet de configurer des éléments ou d’adapter leur comportement à des actions.

Dans le code HTML, on peut ajouter un attribut à une balise pour la faire réagir à un Événement. Pour cela, on ajoutera l’attribut suivant à l’intérieur de la balise : onÉvénement="fonction();".

Il y a une liste d’Événements prédéfinis que l’on verra ci-dessous.

La fonction, nommée fct, sera écrite entre les balises <script> et </script> en utilisant la syntaxe suivante :

<script>function fct(){...}</script>

Le tableau ci-dessous indique la traduction JavaScript des principaux événements.

Événements Traduction JavaScript
Survol de la souris onmouseover=
Souris enlevée d’un élément HTML onmouseout=
Clic gauche onclick=
Clic droit oncontextmenu=
Appui sur une touche du clavier onkeypress=
Envoi d’un formulaire (permet d’envoyer les données renseignées par l’utilisateur) onsubmit=
Exemple
<p onmouseover="fct();">Mon premier paragraphe</p>
   <script> function 
fct(){
      alert("survol du paragraphe");
   }</script>

Voici l’explication ligne par ligne de ce code.
<p onmouseover="fct();"> Mon premier paragraphe</p> La balise <p> crée un paragraphe, l’ajout de l’attribut « onmouseover » signifie que ce paragraphe, au survol de la souris appliquera le script de la fonction fct.
   <script> function fct(){ Balise d’ouverture du langage JavaScript avec la fonction fct.
      alert("survol du paragraphe"); Permet de créer une fenêtre cliquable d’alerte avec le message « survol du paragraphe ».
   }</script> Balise de fermeture du langage JavaScript.
Remarque
On peut aussi directement mettre l’alerte dans le corps de la balise <p>.

Évalue ce cours !

 

Des quiz et exercices pour mieux assimiler sa leçon

La plateforme de soutien scolaire en ligne myMaxicours propose des quiz et exercices en accompagnement de chaque fiche de cours. Les exercices permettent de vérifier si la leçon est bien comprise ou s’il reste encore des notions à revoir.

S’abonner

 

Des exercices variés pour ne pas s’ennuyer

Les exercices se déclinent sous toutes leurs formes sur myMaxicours ! Selon la matière et la classe étudiées, retrouvez des dictées, des mots à relier ou encore des phrases à compléter, mais aussi des textes à trous et bien d’autres formats !

Dans les classes de primaire, l’accent est mis sur des exercices illustrés très ludiques pour motiver les plus jeunes.

S’abonner

 

Des quiz pour une évaluation en direct

Les quiz et exercices permettent d’avoir un retour immédiat sur la bonne compréhension du cours. Une fois toutes les réponses communiquées, le résultat s’affiche à l’écran et permet à l’élève de se situer immédiatement.

myMaxicours offre des solutions efficaces de révision grâce aux fiches de cours et aux exercices associés. L’élève se rassure pour le prochain examen en testant ses connaissances au préalable.

S’abonner

Des vidéos et des podcasts pour apprendre différemment

Certains élèves ont une mémoire visuelle quand d’autres ont plutôt une mémoire auditive. myMaxicours s’adapte à tous les enfants et adolescents pour leur proposer un apprentissage serein et efficace.

Découvrez de nombreuses vidéos et podcasts en complément des fiches de cours et des exercices pour une année scolaire au top !

S’abonner

 

Des podcasts pour les révisions

La plateforme de soutien scolaire en ligne myMaxicours propose des podcasts de révision pour toutes les classes à examen : troisième, première et terminale.

Les ados peuvent écouter les différents cours afin de mieux les mémoriser en préparation de leurs examens. Des fiches de cours de différentes matières sont disponibles en podcasts ainsi qu’une préparation au grand oral avec de nombreux conseils pratiques.

S’abonner

 

Des vidéos de cours pour comprendre en image

Des vidéos de cours illustrent les notions principales à retenir et complètent les fiches de cours. De quoi réviser sa prochaine évaluation ou son prochain examen en toute confiance !

S’abonner

Découvrez le soutien scolaire en ligne avec myMaxicours

Plongez dans l'univers de myMaxicours et découvrez une approche innovante du soutien scolaire en ligne, conçue pour captiver et éduquer les élèves de CP à la terminale. Notre plateforme se distingue par une riche sélection de contenus interactifs et ludiques, élaborés pour stimuler la concentration et la motivation à travers des parcours d'apprentissage adaptés à chaque tranche d'âge. Chez myMaxicours, nous croyons en une éducation où chaque élève trouve sa place, progresse à son rythme et développe sa confiance en soi dans un environnement bienveillant.

Profitez d'un accès direct à nos Profs en ligne pour une assistance personnalisée, ou explorez nos exercices et corrigés pour renforcer vos connaissances. Notre assistance scolaire en ligne est conçue pour vous accompagner à chaque étape de votre parcours éducatif, tandis que nos vidéos et fiches de cours offrent des explications claires et concises sur une multitude de sujets. Avec myMaxicours, avancez sereinement sur le chemin de la réussite scolaire, armé des meilleurs outils et du soutien de professionnels dédiés à votre épanouissement académique.

Fiches de cours les plus recherchées

NSI

Interagir avec une page HTML : boutons cliquables

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