Vous savez déjà qu'un des avantages du JavaScript est la possibilité d'afficher quelque chose qui n'existait pas lors de la création de la page, telle que le résultat d'une multiplication.

Maintenant vous savez créer un formulaire, y placer les champs et boutons. Reste plus qu'apprendre à faire des calculs.

JavaScript : un langage de programmation

Avant de faire des calculs, signalons qu'il existe deux types de langage. L'un ne permet pas de faire des calculs ( HTML, CSS, XML, ... ), l'autre type permet de faire des calculs ( JavaScript, PHP, Java, C++, C, ... ).

Le HTML et le CSS sont des langages descriptifs. Le code HTML ou CSS décrit ce qu'on veut. Aucun calcul n'est possible.

Le JavaScript est un langage de programmation ( essentiellement lié aux pages web ). Ici, on peut calculer, utiliser des algorithmes.

Un algorithme est une méthode pour résoudre un problème.
Exemple de problème : Comment trouver la surface d'un rectangle ?
Algorithme : Surface du rectangle = multiplier sa longueur par sa largeur.
Code : surface = longueur * largeur

Tous les langages de programmation permettent de faire, au minimum, 4 choses :

définir des fonctions ( en JavaScript : function ),
mettre en mémoire ( en JavaScript : var ),
choisir les instructions à exécuter ( if ),
répéter des instructions ( while, for )

Cependant, le code JavaScript doit bien être mis quelque part ...

Où placer le code JavaScript ?

Le code peut être placé :

comme valeur d'un attribut d'une balise HTML.

Tous les attributs ne peuvent pas recevoir comme valeur du code JavaScript. Seuls les attributs dont le nom commence par on peuvent recevoir du code JavaScript comme valeur de l'attribut.

On l'a déjà vu avec :
```
<form onsubmit="alert('Correctement rempli !'); return false;">
```
Ici, que 2 instructions. La valeur de l'attribut ne contient généralement qu'un appel vers une fonction et parfois un return false;

Lorsque le code contient de nombreuses instructions, on peut le placer comme contenu de la balise <script> ( hormis les appels de fonctions liées aux événements ).
comme contenu de la balise HTML <script>.

Dans un fichier HTML, il peut exister plusieurs balises <script>. Toutefois, il est recommandé de n'avoir qu'une seule balise <script> (notamment pour une meilleure lisibilité et éviter de donner le même nom à plusieurs fonctions ...) et de placer cette balise à la fin du fichier HTML (pour que la taille du script ne ralentisse pas l'affichage de la page).

Toutefois, il est toujours préférable de mettre le code dans un fichier externe, car votre éditeur pourrait "corriger" votre code HTML et encadrer le code JavaScript ... le rendant inopérant !
dans un fichier externe d'extension .js (relié au fichier HTML par l'attribut src de la balise <script>).
```
        ...
        <script src="monScript.js"></script>
    </body>
</html>
```
Placer l'appel du fichier JavaScript juste avant la fin du body présente l'avantage suivant : toute la structure de la page est connue. La modification de cette structure pourra alors être faite sans appel de fonction via l'événement onload de la balise body.

Cependant, l'appel des libraries JS est placé dans le head. Dans ce cas, il vaut mieux appeler les fichiers JS après les fichiers CSS (car un fichier JS peut modifier une instruction CSS).

Les fichiers texte ( HTML et JS ) devront être encodés avec la même table de caractères ( UTF-8 sans BOM )

Pour que le code s'exécute, il faut qu'un événement se produise. Par exemple, un clic sur un bouton.

Les événements

Les événements permettent d'appeler une fonction.

Disons - pour le moment - qu'une fonction contient une suite d'instructions ( séparées par des point-virgules ).

Les principaux événements, pour toutes les balises du body ayant une "surface" (donc excepté br) :

click : Cliquer ( appuyer puis relâcher ) sur l'élément
dblclick : Double-cliquer sur l'élément
mouseover : Faire entrer le curseur sur l'élément
mouseout : Faire sortir le curseur de l'élément
mousedown : Appuyer ( sans relâcher ) sur le bouton gauche de la souris sur l'élément
mouseup : Relâcher le bouton gauche de la souris sur l'élément

Les interfaces web sont créées grâce à des formulaires où l'utilisateur introduit des données, généralement, via le clavier.

Il existe des événements spécifiques à ( ou généralement utilisés avec ) certaines balises d'un formulaire :

keydown : Appuyer ( sans relâcher ) sur une touche de clavier sur l'élément
keyup : Relâcher une touche de clavier sur l'élément
keypress : Frapper ( appuyer puis relâcher ) une touche de clavier sur l'élément
change : Changer la valeur d'un élément ( input, checkbox, ... )
select : Sélectionner le contenu d'un champ de texte (input, textarea )
submit : Envoyer le formulaire
reset : Réinitialiser le formulaire
focus : « Cibler » l'élément
blur : Annuler le « ciblage » de l'élément
mousemove : Faire déplacer le curseur sur l'élément

D'autres événements existent, tel que load : fin du chargement d'un fichier en mémoire

Finalement, on constate qu'il existe assez bien d'événements !
Rassurez-vous, comme il s'agit d'un mini-cours, on ne va utiliser que les événements les plus fréquents.

L'événement le plus courant est le click. Le nom de l'attribut est composé des deux lettres « on » et le nom de notre événement. Si l'événement est click ; l'attribut est donc « onclick ».

Le JavaScript a été inventé par des anglophones ...
clic ( en français ) s'écrit click ( en anglais )

Les attributs que nous ne verrons pas dans ce cours sont donc : ondblclick, onmouseover, onmouseout, on...
Nous avons déjà vu : onsubmit

<button>

Le lien est un élément qui réagit au clic. Cependant, son rôle est davantage de rediriger vers une page web que d'exécuter une fonction.
Les boutons d'un formulaire réagissent aussi au clic. Cependant, son rôle est davantage d'envoyer les données que d'exécuter une fonction.
Lorsque le but n'est pas de rediriger vers une page web ou d'envoyer des données, la balise <button> est l'élément HTML le plus appropriée.

bouton (en français) s'écrit button (en anglais)

Dans ce cours, les données ne seront pas envoyées à un serveur, mais à un script (écrit en JavaScript). Les balises input ne seront donc pas dans une balise form.

La balise <button> est dédiée aux clics qui modifient la page elle-même pour afficher des résultats (et ne devrait pas être utilisée pour diriger l'utilisateur vers une nouvelle page, ou pour envoyer des données à un serveur).

Le bouton ci-dessous ne fera rien. Il s'agit juste de le présenter (et non de l'utiliser)

  <p><button>Un bouton</button><p>

Un bouton peut être de trois types : "submit", "reset" et ... "button" !

Par défaut, il est de type="submit".

Mais, comme, dans le cadre de ce cours, nous n'enverrons pas de données à un serveur, nous utiliserons le type="button".

Normalement, un bouton devrait être codé en JS. Et non en HTML, pour éviter que le bouton apparaisse alors que le moteur JS du navigateur est désactivé.

La création d'un bouton, à la volée, sera vue dans le cours Javascript pour Pro

alert()

Lors de l'étude du formulaire, nous avons découvert une "fonction" alert().

alert() n'est pas une fonction, mais une méthode de l'objet window.
Toutefois, alert() se comporte comme une fonction, comme toutes les méthodes ...
Nous verrons ce qu'est une méthode plus tard ( avec la notion d'objet ).

<form onsubmit="alert('Correctement rempli !'); return false;">

Soyons, maintenant plus précis.

alert() est une "fonction" qui permet d'afficher une boîte de dialogue contenant un message. Cette boîte de dialogue surgit sur la page web et bloque la lecture vers le bas ou le haut de la page jusqu'à ce que l'utilisateur clique sur ( ou ferme cette boîte de dialogue via la croix de fermeture )

Pour afficher un message, il doit être tapé entre les parenthèses de la "fonction" alert() et être entouré de guillemets ou d'apostrophes.

Par exemple, 'Correctement rempli !'

Les guillemets ou apostrophes, entourant le message, ne seront pas affichés. Ils servent à indiquer le début et la fin du message. ( En HTML, une zone est délimitée par deux balises. En JavaScript, une chaîne de caractères est délimitée par deux guillemets ou deux apostrophes )

Comme cette "fonction" est utilisée comme instruction ( comme un ordre : "Affiche un message !" ), il ne faut pas oublier de placer à la fin un point-virgule.

alert('Correctement rempli !');

Rappel : Lorsqu'on tape du code, il faut être précis.
alert() ne contient pas de majuscule. Alert() n'est pas une fonction !
Toutes les fonctions ( et méthodes ) ont une paire de parenthèses. On les reconnaît donc facilement.

Hello world !

En anglais Hello world ! signifie Bonjour tout le monde !

Nous savons afficher une phrase dans une boîte de dialogue.

Nous savons que la balise <button> est dédiée aux clics, que l'événement s'appelle click, que le nom de l'attribut est donc onclick, que le code JavaScript est la valeur de cet attribut et que la fonction alert() affiche un message.

La tradition dans l'étude des langages de programmation veut que le premier exercice soit d'afficher comme premier message : " Bonjour tout le monde ! "

Respectons la tradition !

  <p>
    <button type="button" onclick="alert(' Bonjour tout le monde !');">
    Cliquez et un message s'affichera !
    </button>
  </p>

Reste une petite difficulté ...

On sait que la valeur de l'attribut est mise entre guillemets, que se passe-t-il si on tape un ou plusieurs guillemets entre les parenthèses de la fonction alert() ?

  <p>
    <button onclick="alert(" Bonjour tout le monde!");">
      Cliquez et un message s'affichera !
    </button>
  </p>

Tester le bouton ci-dessous.

Rien ne s'affiche ! Car le code n'est pas valide. Où se trouve le problème ?

Le navigateur lit ceci :

  <p>
    <button onclick="alert("

Donc, pour le navigateur, la valeur de l'attribut onclick est alert(. Or, ce n'est pas du code JavaScript ...

Lorsque la valeur de l'attribut est mise entre guillemets et que le message ne contient pas d'apostrophe, on peut mettre le message tout entier entre apostrophes.

  <p>
    <button onclick="alert(' Bonjour tout le monde !');">
      Cliquez et un message s'affichera !
    </button>
  </p>

On comprend que cette "solution" est bancale, car elle ne fonctionne que dans le cas où le message ne contient pas une ou plusieurs apostrophes.

La bonne solution sera donnée demain !

En résumé, vous avez appris

2 balises supplémentaires : <script> et <button>
que le JavaScript est un langage de programmation.
que le code JavaScript se place
1. comme valeur d'un attribut d'une balise HTML
2. comme contenu de la balise HTML script
3. dans un fichier externe d'extension .js
  ( vivement recommandé, même pour une seule ligne de code )
Lorsque le nom de l'attribut commençant par « on » suivi du nom de notre événement, la valeur de cet attribut peut contenir du code JavaScript.
Les événements permettent de déclencher une fonction.
L'événement le plus courant est le click ( = le clic de souris )
Il existe trois types de bouton correspondant à trois événements.
1. Événement submit : <form onsubmit="..."><input type="submit"...">
2. Événement reset : <form onreset="..."><input type="reset"...">
3. Événement click : <button onclick="...">Cliquez sur moi !</button>
alert() permet d'afficher une boîte de dialogue.
Après l'affichage de la boîte de dialogue, le programme va être suspendu jusqu'à ce que l'utilisateur clique sur "OK".
Toutes les fonctions ( et méthodes ) ont une paire de parenthèses.
On doit être attentif aux guillemets et aux apostrophes.