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
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 :
On peut aussi faire appel à un script placé dans un fichier externe d’extension .js avec l’attribut src.
Exemple : "monfic.js">.<>
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.
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().
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.
À 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.