Interaction client-utilisateur, éléments de JavaScript

Merci !

Fiches
Classe(s) : 1re Générale | Thème(s) : Interface homme-machine et Web


JavaScript est un langage de programmation qui permet d’implémenter l’interactivité d’une page web. Il est le plus souvent utilisé côté client, dans un navigateur internet.

I Introduction à JavaScript

05230_chap05_08

Interactions avec le navigateur

JavaScript (JS) est l’un des langages pivots du Web. Il est principalement utilisé pour gérer l’interactivité dans un navigateur web (côté client) mais peut également être utilisé côté serveur via la plateforme NodeJS. Le format d’échange JSON (JavaScript Object Notation) est couramment utilisé dans les échanges sur le Web.

JavaScript a été ainsi nommé en référence au langage Java, bien qu’il en diffère sensiblement.

II JavaScript et HTML

De très nombreux attributs événementiels sont associés à des balises HTML et utilisés en lien avec JavaScript. Voici quelques-uns des plus importants :

Événement

Description

Domaine d’utilisation

onclick

Réponse à un clic

Pointage (souris ou autre)

onchange

Changement d’une valeur de champ

Formulaire (select, etc.)

oninput

Champ de formulaire modifié

Formulaire

onkeyup

Touche relâchée

Formulaire

On place le code JS dans un élément script, plutôt à la fin du document pour éviter que le script ne se déclenche avant le chargement de la page. L’attribut type n’est pas obligatoire :

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_6

On peut aussi faire appel à un script placé dans un fichier externe d’extension .js avec l’attribut src.

Exemple : <script src="monfic.js"></script>.

III Traitements événementiels en JavaScript

1 Réponse à un clic sur un élément

Il s’agit de l’interaction la plus simple. Un élément avec l’attribut onclick déclenche une fonction JS lorsqu’il reçoit un clic.

Dans l’exemple suivant, cette fonction change la couleur de fond de la page lors d’un clic sur un bouton.

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_3

2 Choix dans une liste déroulante

On détecte un changement sur l’élément select via la méthode indiquée par l’attribut onchange, ici la méthode selection().

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_4

Dans la fonction selection(), on cible l’élément select par son identifiant (id="choix").

Puis on accède au choix effectué à l’aide de selecteur.selectedIndex. Enfin on affiche, ici, la valeur et le texte de l’option choisie.

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_5

À noter

La déclaration de variables se fait en JS à l’aide des mots clefs let ou const selon que la variable sera ou non réallouée en cours de programme.

L’opérateur + réalise la concaténation des chaînes de caractères comme en Python.

Annabac est gratuit en septembre !

Inscris-toi pour en profiter.