Guide du   routard

My Twitter

Aperçu

Aperçu

My Google+

Bases de javascript


Base de javascript


 Objectifs 
L’objectif principal de ce cours est de vous familiariser avec les principes de base de la programmation.
Comprendre les concepts de la programmation est l’étape primordiale d’un futur développeur, vient ensuite l’apprentissage d’un langage de programmation et de son environnement.
Pour éviter un cours trop théorique, nous avons choisi d’introduire dès le départ un langage de programmation.
Les exemples et les exercices vous permettront de comprendre et d’appliquer les principes de base dans des cas concrets.
Pour ce cours, nous avons fait le choix d’un langage de programmation simple et attrayant : le JavaScript.
Le JavaScript est un langage de programmation créé pour le Web et destiné à rendre les sites Internet plus interactifs (messages d’alerte, validation de formulaires, menus déroulants, images interverties, …).

 Ce que vous allez voir dans ce cours

Ce cours a pour but de vous donner une première approche de la programmation, de manière très pratique.
Nous utiliserons le langage JavaScript pour les exemples et exercices.
A la fin de ce cours, vous aurez acquis des connaissances générales sur la programmation et vous serez capable d’utiliser le langage Javascript pour créer de simples programmes.

 Ce que vous n’allez pas voir dans ce cours

Ce cours n’a pas la prétention de vous rendre EXPERT en programmation, ni en un langage en particulier.
Il nous faudrait consacrer beaucoup plus de temps à cette tâche !
De même, ce cours n’a pas pour but de vous apprendre toutes les particularités du langage JavaScript, ni de ce que l’on appelle le "Dynamic HTML".
Il est toutefois envisageable, suite à cette formation, d’approfondir ces matières…

 Le déroulement du cours

Dans les premiers modules, vous appréhenderez la programmation en général.
A l’aide d’exemples et d’exercices, vous allez directement approcher "l’univers" de la programmation.
Ensuite, toujours par la pratique, vous approcherez plus précisement le langage JavaScripttout en continuant à apprendre les principes de base de la programmation.

 Fonctionnement du cours

Le cours est centré sur la mise en pratique des notions exposées : nous vous proposerons aussi souvent que possible d'exercer ce que vous avez appris, au travers de questionnaires et d’exercices pratiques.
Bien sûr, plus vous ferez d'exercices, plus vous retiendrez ce qui est présenté.
Nous vous donnerons aussi accès à des ressources pour aller plus loin dans les différents thèmes abordés.
Bien que le cours soit compatible avec les tablettes, nous vous recommandons d’effectuer les exercices pratiques sur un ordinateur (de bureau ou portable).
Pour plus de facilité, nous vous proposons de créer un dossier de départ appelé "monsite". Vous pouvez placer celui-ci sur votre bureau. Ce dossier sera utilisé durant toute la formation.

 Les prérequis du cours

Il est certain que vous ne pouvez pas commencer ce cours sans avoir quelques connaissances de base.
Que devez-vous savoir ?
Une bonne connaissance de l’environnement Web :
- Qu’est-ce qu’une page Web ?
- Qu’est-ce qu’un navigateur ?
Une bonne connaissance du langage HTML est nécessaire !
- Savoir créer une page HTML
- Connaître les principales balises HTML (<body>, <head>, <p>, <input>, …)
- Savoir lire du code HTML simple
(N’hésitez pas à vous reporter au cours "Initiation au langage HTML" !)

Le matériel

Voici ce dont vous avez besoin pour le cours:
- Un éditeur de texte comme le Bloc-notes, par exemple
Vous trouverez le Bloc-notes dans le menu Démarrer > Programmes > Accessoires
- Un navigateur (Internet Explorer de préférence)
Remarque : Ce cours a été conçu plus spécifiquement pour le navigateur Internet Explorer sur PC. Le langage JavaScript, au même titre que le langage HTML, peut présenter quelques différences d’un navigateur à l’autre (Google Chrome, Internet Explorer, Firefox…) et d’une plateforme à l’autre (PC, Mac, …).

Les exercices du cours

Les exercices du cours sont toujours présentés par un énoncé. A la suite de celui-ci, vous trouverez le nom du fichier entre parenthèses :
(nom du fichier : ecrire.htm)
Ce qui signifie que vous développerez vous-même l’exercice et l’enregistrerez sous le nom proposé dans un dossier particulier créé au préalable.
!!!! N’oubliez pas les règles pour les noms de fichiers :
A éviter :
· Espaces
· Accents
· Caractères spéciaux (# "@. ;?-)
(les majuscules/minuscules n’ont pas d’importance dans l’environnement Windows)




-----------------------------------------------------



1. Objectifs


Pour vous plonger directement dans l’univers de la programmation,

 nous vous proposons d’exécuter un premier exercice que vous allez développer de A à Z. Vous allez apprendre à créer, éditer et visualiser un document HTML contenant du code JavaScript. Bien sûr, toutes les étapes seront détaillées et expliquées !
Dans un deuxième temps, vous aurez l’occasion de découvrir quelques exemples de programmes écrits en JavaScript dans des pages HTML.

2. Préparation

Tout au long de ce cours, vous allez appliquer la matière en effectuant des exercices ; c’est pourquoi nous vous proposons d’organiser votre travail en créant un dossier sur votre disque dur. Vous pourrez ainsi stocker et retrouver tous les exercices. Le nom du fichier sera précisé entre parenthèses après chaque énoncé.
Ouvrez l’explorateur Windows (raccourci : touche Windows + E) et placez-vous sur le disque C. Dans la barre de menu, choisissez l’option Fichier > Nouveau > Dossier. Nommez votre dossier "coursJavascript".
Quels sont les outils dont vous allez avoir besoin pour ce cours ?
Le JavaScript est un langage qui utilise le même environnement que l’HTML, vous utiliserez donc les mêmes outils :

· le Bloc-notes (pour ouvrir le Bloc-notes : menu Démarrer > Programmes > Accessoires > Bloc-notes)
· Microsoft Internet Explorer (version 5 ou supérieure)

Le Bloc-notes (Notepad) sera utilisé pour éditer les documents HTML.
Remarque : Tout éditeur de code HTML peut faire l’affaire ! Sous Windows, il y a l'excellent Notepad++ !!

Le navigateur Microsoft Internet Explorer sera utilisé pour visualiser le résultat.

3. Afficher du texte

Voici l’énoncé d’un programme simple :
Ecrire un programme qui affiche une fenêtre d'alerte contenant le texte "Bienvenue dans l’univers de la BD !" (nom du fichier : alerter.htm).
4. Ecriture du code
Pour commencer, ouvrez le Bloc-notes et recopiez le code ci-dessous.
Faites bien attention à l’écriture du code, celui-ci doit être en tout point IDENTIQUE à celui proposé ci-dessous!
Remarque : Pour copier ce code dans son intégralité, sélectionnez-le et copiez-le dans le presse-papier (clipboard) dont le raccourci clavier est Ctrl + C (ou clic droit > copier). Il ne vous restera plus qu’à le coller dans le Bloc-notes (Ctrl + V ou clic droit > coller)
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
      </title>
      <script>
         function Main(){
            alert("Bienvenue dans l’univers de la BD !") ;
         }
      </script>
   </head>
   <body onload="Main();">
   </body>
</html>
Enregistrez le document dans le dossier "coursJavascript" sous le nom "alerter.htm".
Remarque : Attention à l’extension ".htm" du fichier ! Lorsque vous enregistrez votre document, choisissez "tous les fichiers" dans la liste "type"sinon votre document risque d’être sauvé sous le nom "alerter.htm.txt" et sera pris comme un fichier texte et non un document HTML !!!
Dans l’Explorateur Windows, il est facile de reconnaître une page HTML d’un simple fichier texte : l’icône du fichier est différente.

5. L’exécution du programme

Visualisons maintenant le résultat du premier exercice, dans le jargon, on appelle cela exécuter le programme.
Comme pour une simple page HTML, ouvrez le navigateur et allez dans Fichier > Ouvrir… > Parcourir et allez rechercher le fichier "alerter.htm".

Remarque : Vous pouvez également double-cliquer dans l’Explorateur Windows sur le fichier "alerter.htm", il s’ouvrira tout seul dans votre navigateur.
SUPER ! Vous venez d’exécuter votre premier programme !
Si tout se passe bien, vous devriez avoir une fenêtre d’alerte vous affichant le texte "Bienvenue dans l’univers de la BD !".
Une fenêtre d’alerte est une simple fenêtre d’avertissement contenant un message. Le message est le seul élément paramétrable d’une fenêtre d’alerte.

Si vous n’avez pas de fenêtre d’alerte, c’est qu’il y a une erreur dans votre code, il faut éditer le document dans le Bloc-notes et vérifier le code. Faites très attention aux points suivants :
· Les majuscules / minuscules ;
· Les points-virgules ;
· Les guillemets ;
· L’orthographe des mots-clés.

Une fois le code modifié, enregistrez à nouveau votre travail et recommencez cette étape.
Vous pouvez également visualiser le résultat attendu en ligne :

6. Quizz

Quel outil utilise-t-on pour écrire du code JavaScript ?
 Un éditeur de texte
 Un navigateur
Quel outil utilise-t-on pour "exécuter un programme" écrit en JavaScript ?
 Un éditeur de texte
 Un navigateur
7. Ce que l’on a fait
Pour que vous puissiez suivre la démarche du développement de ce code, nous allons revoir ce code pourvus de commentaires.
Note : Qu’est-ce qu’un commentaire ? C’est une annotation du développeur qui est complètement ignorée par le programme (ou par le navigateur dans le cas d’un commentaire HTML) et qui est utilisée pour rendre le code plus clair ou pour donner quelques explications sur celui-ci.
Testez l'utilisation des commentaires! Ajoutez-en dans le fichier "alerter.htm", vous verrez que les commentaires n’ont aucune influence sur le programme!
Remarque :
En HTML, les commentaires s’écrivent comme suit : 
<!-- commentaire HTML -->

En JavaScript, les commentaires sur UNE ligne s’écrivent comme suit : 

// commentaire JavaScript sur une ligne

Quelques exemples de commentaires en JavaScript se trouvent dans les compléments.
Continuons pour voir le code en détail.


8. Explication 1/5 - Le code complet

Voici le code complet et commenté de cette première page.
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
      <script>
         // fonction PRINCIPALE appelée au chargement de la page
         function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!-- éxécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
Voyons-le plus en détail.

9. Explication 2/5 - les balises HTML

En surbrillance, lignes 1 à 7 et 13 à 18, ce cont les balises HTML de la page.
Vous retrouvez les balises <html><head><title> et <body> que vous utilisez à chaque création de document HTML.
Sont comptés parmi ces éléments HTML :
·         la balise <script></script> : c'est la balise HTML qui permet de placer le Javascript au sein du HTML,
·         les commentaires HTML : <!-- COMMENTAIRE -->
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
   <script>
      // fonction PRINCIPALE appelée au chargement de la page
      function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>

Remarque : en complément, vous pouvez revoir la structure de base d’un document HTML. 10. Explication 3/5 - le script

La balise <script> est une balise HTML qui signifie l’intégration d’un script dans le document HTML : tout ce qui se trouve entre les balises <script> et </script> doit être écrit en JavaScript.
Qu’est-ce qu’un script ? 
Un script est une suite d’instructions (ordres) interprétées à l’exécution d’un programme. (vous verrez cela plus en détail dans le module suivant).

<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
   <script>
      // fonction PRINCIPALE appelée au chargement de la page
      function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>

11. Explication 4/5 - la fonction Main();

function Main(){…} est la fonction PRINCIPALE du programme. Tout ce qui se trouve à l’intérieur des accolades {} fait partie de la fonction Main().
Cette fonction est appelée à un certain moment. Ce moment est, dans ce cas-ci, le CHARGEMENT de la page, ligne 16 : <body onload="Main();">
Remarque : "onload" signifie "au chargement".
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
   <script>
      // fonction PRINCIPALE appelée au chargement de la page
      function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>

12. Explication 5/5 - l'instruction alert();

alert("Bienvenue dans l’univers de la BD !"); est la commande qui dit au programme d’ouvrir une fenêtre d’alerte et d’y afficher le texte "Bienvenue dans l’univers de la BD !".
Remarquez que la commande se termine par un .
Vous pouvez revoir l´exécution du programme à la page suivante.
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
   <script>
      // fonction PRINCIPALE appelée au chargement de la page
      function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>

13. Synthèse

Pour écrire un programme en JavaScript, il suffit d’ajouter les balises <script></script> dans un document HTML.
Ces balises <script></script> sont généralement placées dans l’en-tête d’une page, cela permet de regrouper le code et de ne pas trop mélanger l’HTML et le JavaScript.

Le code JavaScript sera inséré à l’intérieur de ces balises.
Comme le code JavaScript se trouve dans un document HTML, on peut l’éditer dans n’importe quel éditeur de document HTML. Le plus simple des programmes est le Bloc-notes.
Pour exécuter le programme, il suffit d’ouvrir le document HTML dans un navigateur.
Le langage JavaScript est sensible à la casse, c’est-à-dire aux majuscules/minuscules. La commande alert("Bonjour") est exécutée normalement alors que la commande Alert("Bonjour") produit une erreur.

14. Appliquez : afficher une alerte

Appliquez directement cette matière en créant un programme similaire à l’aide du bouton "action" :
"Créer un simple programme qui affiche le texte "Bonjour tout le monde !" dans une fenêtre d’alerte."
Le squelette du "programme" est déjà écrit.
Pour vous aider, récupérez le code du programme alerter.htm.

Attention ! Faites bien attention aux :
- fautes de frappe
- majuscules / minuscules


Résultat

Solution
<html>
      <head>
            <title></title>
            <script>
                  function Main(){ 
                        alert("Bonjour tout le monde !");
                  }
            </script>
      </head>
      <body onload="Main();">
       
      </body>
</html>

15. Afficher du texte dans le document

Voici une variante du premier exercice :
Plutôt que d’afficher le texte "Bienvenue dans l’univers de la BD !" dans une fenêtre d’alerte, affichons-le dans le document 
(nom du fichier : ecrire.htm).
Pour ce faire, il suffit de changer la commande alert("Bienvenue dans l’univers de la BD !") en document.write("Bienvenue dans l’univers de la BD ! ")
Voici le code modifié :
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
      </title>
      <script>
         // Intégration d’un script dans le document
         function Main(){
            // fonction PRINCIPALE appelée au chargement de la page
            document.write("Bienvenue dans l’univers de la BD !") ;
            // écriture dans le document
         }
      </script>
   </head>
   <body onload="Main();">
   </body>
</html>
Enregistrez ce code sous "ecrire.htm" et ouvrez le fichier…

16. Pourquoi Main() ?

Voici encore un commentaire sur le code que nous venons de découvrir.
Nous avons vu que le code était englobé dans la fonction Main(){ }.
Cette fonction est utilisée dans un but pratique : elle permet d'exécuter le programme lors de différents événements. Ainsi par exemple, si vous remplacez onload par onunload dans le code, le programme s'exécutera non pas au chargement de la page mais lorsque l'utilisateur quitte celle-ci. Dans les compléments, vous verrez différents exemples de ce type.
D'autre part, au module 2, vous verrez que le programme peut aussi être exécuté lorsque l'utilisateur clique sur un bouton, dans un formulaire.
appeler la fonction cocotte() au lieu de main() fonctionnerait tout autant. Mais par convention, il est conseillé d'utiliser main(). À vous de voir...

17. Fonction principale

L’utilisation de la fonction Main() est également utile pour la prise en main d’un langage de programmation car de nombreux langages, comme par exemple le langage Java, nécessitentl’utilisation d’une fonction dite "principale".
Dans le complément "une solution encore plus simple", vous verrez qu'on peut cependant travailler sans cette fonction.

18. Quizz

La commande qui permet d’afficher un texte dans une fenêtre d’alerte est…
 Main()
 alert()
 document.write()
La commande qui permet d’afficher un texte dans le document est …
 Main()
 alert()
 document.write()

19. Synthèse

Un programme écrit en JavaScript est en fait une simple page HTML contenant :
· des balises HTML
· du code JavaScript

On différencie le code HTML et le code JavaScript en plaçant ce deuxième entre les balises HTML <script> et </script>.
Pour acquérir de bonnes habitudes de programmation, on utilise une fonction "principale" que l’on appelle communément "Main()". Cette fonction est appelée à un certain moment dans l’affichage de la page (par ex. : onload qui est l’événement "au chargement de la page").
_____

20. Mémo

Préparons-nous

Afin de travailler dans les meilleures conditions possibles, voici ce dont nous aurons besoin pour ce cours:
- Le 
bloc notes (ou Notepad++, disponible ici: https://notepad-plus-plus.org/fr/)
- Un 
navigateur (Internet Explorer, Chrome, Firefox, Safari, ...)
N'oubliez pas qu'une fois votre fichier sauvegardé, vous devez modifier son extension en .htmà la place de .txt (le .html est également autorisé).

Lancez votre premier programme

Une fois votre première page créée, vous pouvez avoir envie de la tester. Il vous suffit pour cela de double-cliquer sur le fichier html, et votre premier programme s'exécutera.
Si rien ne se passe, n'oubliez pas de vérifier les points suivants:
· Les 
majuscules / minuscules, le langage Javascript est en effet sensible à la casse
· Les 
points-virgules
· Les 
guillemets
· L’
orthographe des mots-clés

Les commentaires

Ceux-ci sont différents, en fonction de la partie de la page dans laquelle on se trouve.
Si vous êtes dans le code HTML, les commentaires s’écrivent comme ceci :
<!-- commentaire HTML -->

En JavaScript, les commentaires sur UNE ligne s’écrivent comme suit :
// commentaire JavaScript sur une ligne

Sur plusieurs lignes, il suffit de commencer par /* et de finir par */ comme dans cet exemple:
/*
Si vous lisez ceci
votre cours de JavaScript
avance énormément!
*/

Le code

Vous avez vu tout au long de ce premier chapitre comment le JavaScript se marie au langage HTML.
Pour rappel, voici le squelette d'une page HTML contenant du 
JavaScript :
<html>
   <head>
      <title>
         Titre de la page
      </title>
      <script>
      </script>
   </head>
   <body>
   </body>
</html>
La différence avec une "simple" page HTML vient donc de ces balises: <script></script>

La fonction Main();

Choisir le nom Main() n'est qu'une convention, vous pouvez l'appeler LaFraise(), ou comme il vous plaira, tant que vous respectez son nom (et les majuscules) quand vous y faites référence dans votre programme.
Cette fonction englobe votre code. Elle est utilisée dans un but pratique : elle permet d'exécuter le programme lors de différents événements. Si vous remplacez par exemple onload par onunload dans le code, le programme s'exécutera non pas au chargement de la page mais lorsque l'utilisateur quitte celle-ci.

Afficher du texte

1. Pour afficher du texte dans une fenêtre d’alerte (attention aux majuscules) : alert("") ;
2. Pour afficher du texte dans le document : document.write("") ; C'est tout simple, on part du "document", et on utilise sa fonction "write". Ce qui est inscrit entre guillemets sera affiché dans le document (la page web).

Les événements

Dans la partie HTML, on peut choisir de déclencher une fonction Javascript lors d'un événement.
Voici quelques exemples d’événements :

- <body onload="Main() ;"> // appel de la fonction Main() au chargement de la page
- <body onunload="Main() ;"> // appel de la fonction Main() au déchargement de la page
- <img src="…" onmouseover="Main() ;"> // appel de la fonction Main() lors du survol de l’image
- <img src="…" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur l’image
- <input type="button" value="quitter" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur le bouton

Bon à savoir

Le JavaScript est interprété et non compilé. C'est le navigateur qui se charge de cette interprétation. De ce fait, il peut y avoir des différences d'interprétation entre différents navigateurs.

Compléments

En complément, vous trouverez des informations plus détaillées sur les notions vues, des exemples de programmes exécutés lors de différents événements et un exercice récapitulatif.

A. Rappel : Structure HTML de base

Certaines balises sont nécessaires à la bonne interprétation d’une page.
Voici le squelette de base d’un document HTML :
<html>
   <head>
      <title>
      </title>
   </head>
   <body>
   </body>
</html>
(la balise <title> est requise pour toutes les pages HTML)

B. Exécuter un programme JavaScript

Pour exécuter un programme JavaScript, il suffit d’ouvrir la page HTML qui contient le code JavaScript dans un navigateur. Ce code est interprété en même temps que l’ouverture du fichier par le navigateur, comme l'HTML.
Il y a donc cohabitation entre le code JavaScript et le code HTML dans un même fichier, c’est ce qui fait toute la particularité de ce langage !
Il y a tout de même un petit "HIC" à tout cela : c’est le navigateur qui interprète le langage HTML et les scripts JavaScript. Il existe donc quelques petites différences d’interprétation entre les différents navigateurs.
Dans ce cours, nous nous limitons à montrer des exercices utilisant des commandes "compatibles". Il y a toutefois quelques cas particuliers dans les compléments de modules.

C. Une solution encore plus simple !

Reprenons l’énoncé du premier exercice : "Ecrire un programme qui affiche une fenêtre d'alerte contenant le texte "Bienvenue dans l’univers de la BD !"".
Pour le même résultat, il existe un code plus simple :
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
      </title>
   <!--début du script JavaScript -->
   <script>
      // Intégration d’un script dans le document
      alert("Bienvenue dans l’univers de la BD !") ;
      // ouverture de la fenêtre d’alerte
   </script>
<!--fin du script JavaScript -->
</head>
<body>
</body>
</html>
On a retiré la fonction "Main()" et le programme s’exécute correctement. La commande JavaScript "alert()" est exécutée au même moment que son interprétation. En clair, cela signifie que le navigateur lit les instructions du document HTML de haut en bas et va donc exécuter l’instruction "alert()" dès le début de notre exemple puisque cette instruction est située avant le <body>.
Cette fonction Main() n’est en fait pas obligatoire mais simplement utile car elle permet d’associer une action (par ex. alert(…)) à un événement (par ex. onload="Main() ;").
Pour une meilleure approche de programmation, nous continuerons à travailler avec cette fonction Main(), cela vous permettra de passer plus facilement à d’autres langages de programmation comme, par exemple, Java.
Notez que le nom n'a pas d'importance ici : vous pourriez remplacer Main() par Zozo() ou Pomme() dans le code de la page sans modifier le résultat

D. Les événements

Les événements ont été créés pour ajouter de l’interactivité entre un visiteur et une page Web.
Voici quelques exemples d’événements :
- <body onload="Main() ;"> // appel de la fonction Main() au chargement de la page
- <body onunload="Main() ;"> // appel de la fonction Main() au déchargement de la page
<img src="…" onmouseover="Main() ;"> // appel de la fonction Main() lors du survol de l’image
- <img src="…" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur l’image
- <input type="button" value="quitter" onclick="Main() ;"> // appel de la fonction Main() lors duclic sur le bouton
Ces événements se retrouvent toujours dans une balise HTML. A ces événements, on associe l’appel d’une fonction JavaScript, par exemple la fonction Main() ; .
Voici quelques exemples (code + exécution) de programmes appelant la fonction Main() lors de différents événements.

1. Afficher un message d'au revoir

Un programme affiche "Merci de votre visite. A bientôt !" lorsque l’utilisateur quitte la page.
L’événement utilisé est onunload, cet événement peut uniquement être placé dans la balise <body>, il signifie "au déchargement de la page".
<html>
   <head>
      <title>
         Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 
      </title>
   <!-- début du script -->
   <script>
      // fonction PRINCIPALE appelée 
      function Main(){
         // ouverture de la fenêtre d’alerte
         alert("Bienvenue dans l’univers de la BD !");
      }
   </script>
</head>
<!--exécution du script au DECHARGEMENT de la page (onunload="") -->
<body onunload="Main();">
</body>
</html>
Au lieu d’appeler la fonction Main() au chargement de la page (onload), on l’appelle au déchargement de la page (onunload). Vous ne verrez l’alerte que lorsque vous quitterez la page.

2.Afficher un message lors du survol d'une image

Un programme affiche "Voici le dernier tome de Spirou et Fantasio !" lorsque l’on survole l’image avec le curseur de la souris.
L’événement utilisé est onmouseover. Cet événement se déclenche lorsque l’on survole l’élément dans lequel il a été placé.
<html>
   <head>
       <title>
         Un programme qui alerte "Voici le dernier tome de Spirou et Fantasio !" lorsque l’on survole l’image
      </title>
       <script>
         // Intégration d'un script dans le document
         function Main(){
            alert("Voici le dernier tome de Spirou et Fantasio !") ;
            // ouverture de la fenêtre d'alerte 
         } 
      </script>
   </head>
   <body>
      <img src="spirou33.gif" onmouseover="Main();">
      </body>
   </html>
La fonction Main() est appelée lors du survol de l’image (onmouseover). 

E. Les commentaires JavaScript

Il existe deux moyens d’écrire des commentaires en JavaScript :
Commentaires sur une ligne :
// ceci est un commentaire sur une ligne
Commentaires sur plusieurs lignes :
/*
Ceci
est
un
commentaire
sur
plusieurs
lignes
*/


En résumé :
// … pour une ligne de commentaires
/* … */ pour plusieurs lignes de commentaires
Lequel de ces commentaires est incorrect ?
 // ce programme alerte l’utilisateur d’un message de bienvenue // cette alerte s’affiche automatiquement au chargement de la page
 /* ce programme alerte l’utilisateur d’un message de bienvenue cette alerte s’affiche automatiquement au chargement de la page */
 // ce programme alerte l’utilisateur d’un message de bienvenue cette alerte s’affiche automatiquement au chargement de la page //

F. Ecrire dans le document

La commande document.write() est bien pratique pour afficher du contenu dans le document. Ce contenu peut contenir des balises HTML :
document.write("<b>Bienvenue dans le monde de la BD !</b>") ;
Attention ! N’essayez pas d’écrire au format HTML dans une fenêtre d’alerte. Une fenêtre d’alerte n’affiche que du texte et pas d’HTML.

G. Exercice : Ecrire dans le document

"Ecrire un programme qui affiche le texte "Bienvenue dans le monde de la bd !" au format titre1 (<h1>)."

Résultat

Solution
<html> 
      <head>
            <title></title>
            <script>
                  function Main(){ 
                        document.write("<h1>Bienvenue dans le monde de la BD !</h1>")
                  }
            </script>
      </head>
      <body onload="Main();">
       
      </body>
</html>

1. Objectifs

Dans ce module, vous allez apprendre à :
afficher du texte dans un champ texte d’un formulaire.
récupérer de l’information à partir d’un champ texte d’un formulaire.
C’est grâce aux formulaires qu’un utilisateur peut communiquer avec un programme.
C’est cette 
communication entre un programme et l’utilisateur qui rend un outil interactif et qui permet une gestion personnalisée des actions menées.

2. Communiquer à l’aide des formulaires

Un formulaire permet une communication entre l’utilisateur et le site (ou les pages du site).
Les données sont envoyées au serveur, généralement dans une base de données via un programme ou une application Web.
Le JavaScript est utilisé, entre autres, pour éviter l’envoi d'un formulaire vide au serveur en validant le formulaire avant l’envoi.
Un formulaire peut aussi fonctionner sans base de données, simplement pour rendre une page plus interactive. Nous en verrons quelques exemples dans ce cours.

3. Rappel sur les formulaires

Un formulaire peut contenir différents types de champs : champs texte, cases à cocher, boutons radio, boutons...
Dans le cadre de ce cours, nous travaillerons uniquement avec des champs texte et des boutons.
Voici un exemple de formulaire :
Votre nom :   Votre prénom :   
Le code est le suivant :
<form name="info" action="mailto:spirou@franquin.be">
   Votre nom : <input type="text" name="nom">
      Votre prénom : <input type="text" name="prenom">  
         <input type="button" value="Envoyer" onclick=" Main( );">
          </form>

4. Les balises des formulaires

Pour insérer un formulaire dans une page Web, on utilise la balise suivante :
<form name="info" action="mailto:spirou@franquin.be">
<!-- Contenu du formulaire -->
</form>

Dans ce cas-ci, le formulaire est envoyé à une adresse email, 
spirou@franquin.be.
Dans ce cours, nous ne nous intéresserons qu’à l’interaction entre une page Web et l’utilisateur, nous ne préciserons donc pas l’attribut action.
Par contre, l'attribut "name" est très important : en JavaScript, il faut nommer un formulaire et les champs qui y sont inclus pour pouvoir les atteindre. Dans ce cas-ci, le nom du formulaire est info.
La balise pour un champ texte est : <input type="text" name="nom">.
Dans ce cas-ci, le nom du champ texte est 
nom.
La balise pour un bouton est:
<input type="button" value="Envoyer" onclick="Main();">
Attention ! Les noms du champ texte et du formulaire sont très importants !
Le nom d’un élément HTML (un formulaire ou un champ) doit toujours:

· être en un seul mot,
· être sans accent,
· commencer par une lettre ou " _ ".

5. Un programme qui écrit

Vous allez voir comment un programme peut transmettre des messages à l’utilisateur à l’aide des formulaires…
Reprenons l’énoncé de "alerter.htm" avec une petite modification :
"Créer un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" dans un champ texte d’un formulaire" 
(nom du fichier : ecrireForm.htm).

6. Le code du programme

Voici le code du programme :
<html>
   <head>
      <title>
         Créer un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" dans un champ texte d’un formulaire
      </title>
      <script>
         function Main(){
            document.accueil.message.value = "Bienvenue dans l’univers de la BD !" ;
          }
      </script>
   </head>
   <body onload="Main();">
      <form name="accueil">
         <input type="Text" name="message" size="40">
         </form>
      </body>
   </html>
Recopiez ce code dans le Bloc-notes, enregistrez-le sous "ecrireForm.htm" et exécutez-le.

Ce programme écrit un message dans un champ texte se trouvant dans un formulaire.

Ce code mérite quelques explications supplémentaires :
1. On a créé un formulaire portant le nom "accueil"
2. Dans ce formulaire, on a créé un champ texte portant le nom "message"
3. Dans le programme, on 
atteint la valeur du champ "message" se trouvant dans le formulaire "accueil" par la commande suivante : document.accueil.message.value. Cette valeur est égale à "Bienvenue dans l’univers de la BD !".
document.accueil.message.value : on atteint le document
document.accueil.message.value : on atteint le formulaire nommé "accueil"
document.accueil.message.value : on atteint le champ texte nommé "message"
document.accueil.message.value : on atteint la valeur du champ texte

La propriété value permet d’assigner une valeur dans le champ texte (vous allez voir plus loin que, grâce à la propriété value, on peut aussi récupérer le texte se trouvant dans un champ).

7. Appliquez : dire bonjour dans un champ texte

Appliquez directement la matière vue en effectuant un exercice similaire à l'aide du bouton "action":
"Ecrire un programme qui affiche "Bonjour tout le monde !" dans un champ texte nommé "message" se trouvant dans un formulaire nommé "accueil". Ce texte doit s’afficher lors d’un clic sur un bouton (<input type="button" value="Dis Bonjour !" onclick="Main() ;">)."
Les étapes de développement : 
1.    Créer le formulaire contenant un champ texte et un bouton,
2.    Ajouter le contenu de la fonction Main,
3.    Ajouter l’événement qui appelle la fonction Main.
Quelques petits conseils :
- N’oubliez pas de bien nommer le formulaire et le champ texte,
- Pour que le texte s’affiche entièrement, n’hésitez pas à agrandir la taille du champ texte : 
<input type="Text" name="message" 
size="40">,
- Faites attention aux majuscules/minuscules,
- N’oubliez pas de guillemet, d’accolade, de parenthèse, …

Résultat

Solution
<html>
      <head>
            <title></title>
            <script>
                  function Main(){
                        document.accueil.message.value="Bonjour tout le monde!";
                  }
            </script>
      </head>
      <body>
            <form name="accueil">
                   <input type="text" name="message" size="40">
                  <input type="button" value="Dis bonjour" onClick="Main();">
             </form>
      </body>
</html>

8. Conclusion

Nous avons vu ici des exemples de communication du programme vers l'utilisateur :
un programme 
transmet de l’information à l’utilisateur en affichant des messages à l’écran.
En JavaScript, on peut écrire du texte à l’aide de :
- La méthode "alert("…")" : cette méthode affiche du texte dans une fenêtre d’alerte
- La méthode "document.write("…")" : cette méthode écrit du texte dans le document
- La propriété "document.formulaire.champ.value = "…"" : on écrit dans un champ texte d’un formulaire (formulaire étant le nom du formulaire et champ étant le nom du champ texte).
_____

9. Quizz

Lequel de ces formulaires HTML porte un nom correct ?
 <form name="l’accueil">
 <form name="accueil">
 <form name="accueil site">
Laquelle de ces commandes permet de récupérer la valeur du champ "montant" du formulaire "calcul" ?
 document.calcul.montant.valeur
 document.montant.value
 document.calcul.montant.value

10. Un programme qui lit

Voyons maintenant un exemple de communication de l'utilisateur vers le programme.
L'utilisateur va écrire dans un formulaire. Afin de nous assurer que le programme a bien reçu l'information, nous allons lui demander de répéter l'information reçue.
(pour les besoins de cet exemple, nous utiliserons la notion de variable, qui sera expliquée au module 4)

11. Exemple de programme qui lit

"Ecrire un programme qui demande à l’utilisateur de proposer une injure du capitaine Haddock dans un champ texte. Lorsque l’utilisateur clique sur le bouton "Répéter l’injure", la proposition s’affiche dans un autre champ texte du formulaire" (nom du fichier : demanderForm.htm)
<html>
   <head>
      <title>
         Programme qui lit
      </title>
      <script>
         var prop;
         // on déclare la variable proposition
         function Main(){
            prop = document.echo.proposition.value ;
             // on enregistre la proposition dans la variable proposition
            document.echo.injure.value = prop; 
            // on écrit la valeur proposée dans le champ texte " injure "
         }
      </script>
   </head>
   <body>
      <form name="echo">
         <input type="text" name="proposition">
            <input type="button" value="Répéter la proposition" onclick="Main()">
               Le capitaine Haddock dit : 
               <input type="text" name="injure">
               </form>
            </body>
          </html>
Remarque : Dans ce programme, prop est le nom d’une variable. Cette variable va contenir une valeur. Cette notion de variable est expliquée plus en détail dans le module 4.
Enregistrez ce programme sous "demanderForm.htm" et exécutez-le.
Le résultat :
Vous obtenez un formulaire.
Vous insérez votre proposition dans le champ texte et cliquez sur le bouton "Répéter l’injure".
Automatiquement, votre proposition s’affiche dans le deuxième champ du formulaire.

Ce programme lit un message inséré par l’utilisateur dans un champ de formulaire.

12. Appliquez : demander le prénom

Appliquez directement la matière vue en effectuant un exercice :
"Voici un programme qui demande votre prénom via un formulaire et qui affiche le texte "Bonjour [PRENOM]" dans une fenêtre d’alerte. Modifiez ce programme pour que ce texte s’affiche dans un 2ème champ du formulaire placé après le bouton (Code du deuxième champ : <br><input type="text" name="echo" size="40">)".

Résultat

Quel est votre prénom?


Solution
<html> 
      <head> 
            <title>Afficher le texte "Bonjour [PRENOM]" dans un champ texte du formulaire</title> 
            <script> 
                  var proposition; 
                  function Main(){ 
                        proposition = document.questionnaire.prenom.value ; 
                        document.questionnaire.echo.value="Bonjour "+proposition;  
                  } 
            </script> 
      </head> 
      <body> 
            <h1>Quel est votre prénom? </h1> 
            <form name="questionnaire"> 
                  <input type="Text" name="prenom"> 
                  <input type="Button" value="Envoyer" onclick="Main();"> 
                  <br> 
                  <input type="text" name="echo" size="40"> 
            </form> 
      </body>  
</html>

13. Conclusion

Communication utilisateur => programme :
Le programme récupère de l’information de l’utilisateur en lisant des messages.
En JavaScript, on peut récupérer du texte à l’aide de l'instruction"document.formulaire.champ.value" qui permet la récupération de la valeur insérée dans le champ nommé "champ" du formulaire nommé "formulaire".
Il existe une autre méthode permettant de récupérer de l’information provenant de l’utilisateur: la méthode "prompt". Cette méthode est expliquée dans les compléments de ce module.

14. Quizz

Laquelle de ces commandes récupère le contenu du champ "montant" du formulaire "calcul" dans la variable "prix" ?
 prix = document.calcul.montant.value ;
 prix = document.montant.calcul.value ;
 document.calcul.montant.value = prix ;

15. Synthèse

Informer l’utilisateur et récupérer de l’information provenant de l’utilisateur rend votre programme interactif.
Le dialogue programme/utilisateur permet la transmission à l’utilisateur d’information comme des messages d’avertissement, des messages d’erreur, … C’est cette interactivité qui rendra votre programme attrayant, abordable et accessible à tous.
Le dialogue utilisateur/programme permet la récupération d’information provenant de l’utilisateur. En JavaScript, on utilise cette communication pour valider les données d’un formulaire, récupérer le nom d’une personne afin de personnaliser un message, afficher ou traiter des données fournies par l’utilisateur comme des calculs (âge, TVA, année bissextile, …), des petits jeux (serpent, puissance 4, démineur, …), …

16. Exercice récapitulatif

Cet exercice vous permettra de mettre en pratique les notions vues au cours de ce module :
Ecrire un programme qui demande un mot de passe via un formulaire, ce mot de passe est récupéré lors du clic sur le bouton "connexion". Le programme affiche ensuite une alerte pour remercier l’utilisateur (nom du fichier : login.htm).
Etapes du développement :
1. Créer le formulaire contenant
un titre : <h3>Ce site est sécurisé !</h3>
un champ texte : <input type="password" name="motdepasse">
Attention ! Au lieu de mettre <input type="text">, il vaut mieux utiliser la balise <input type="password"> afin que le mot de passe soit masqué lors de l’encodage.
un bouton : <input type="button" value="connexion">

2. Dans la fonction Main() :
Récupérer le mot de passe, ce mot de passe doit être enregistré dans une variable.
Afficher un message de remerciement dans une alerte.

3. Appeler la fonction Main() lors du clic sur le bouton
Conseil : Reportez-vous aux exemples de ce module !
Remarque : Cet exercice n’est bien sûr pas complet, il faudrait ajouter une vérification du mot de passe. Pour un maximum de sécurité, cette vérification s’effectue côté serveur.

17. Mémo

Les formulaires

Un formulaire permet d'établir une communication entre le site et le visiteur. Le JavaScript permet entre autres de vérifier que le formulaire n'est pas vide au moment de l'envoi des données.
Les formulaires contiennent plusieurs types de champs: du texte, des boutons, des cases à cocher, ...
Les balises d'un formulaire sont <form></form>

Voici un formulaire avec quelques champs :
<form name="quizz" >
   <input type="text" name="q1">
       <input type="button" value="Envoyer" onclick="Main()"> 
      </form>
N'oubliez pas de lui donner un nom (ici "quizz") pour pouvoir exploiter son contenu plus tard. Ceci est également valable pour les champs insérés.
Ces noms doivent toujours :
· être en un seul mot,
· être sans accent,
· commencer par une lettre ou " _ ".


Pour écrire une information

Voici les trois notions vues jusqu'ici pour afficher quelque chose à l'écran :
On peut afficher du contenu dans une pop-up qui va s'ouvrir dans le navigateur.
 alert("information");
On peut également afficher ce contenu dans la page.
document.write("information");
Et pour finir, on peut afficher une valeur dans un formulaire.
C'est assez simple, il suffit d'écrire dans le document (la page web), qui contient un formulaire (ici appelé "formul1"), lui-même contenant un champ texte "message", auquel nous allons assigner une valeur :

document.formul1.message.value = "information";

Pour lire une information

C'est simplement le contraire, on prend la variable "information" et on y glisse le contenu de la valeur qui est dans le champ "message" du formulaire "formul1", lui-même stocké sur ce document (la page web) :
information = document.formul1.message.value;
(information est une variable. La notion de variable sera expliquée dans le module 4.)

Il existe une autre méthode permettant de récupérer de l’information provenant de l’utilisateur: la méthode "prompt".

On s'en sert de la façon suivante :
proposition = prompt("Quel est votre fruit préféré? :","Ecrivez votre réponse ici"); 
 document.write(proposition); 

Les actions et événements

Dans un programme contenant des formulaires, il y a souvent :
· un événement : l’utilisateur clique sur un bouton (par exemple: "paiement")
· une action : par exemple, alerter l’utilisateur avec le texte : "Cette page est sécurisée !"
Cette action doit être exécutée lorsque l’événement se produit.

Voici le code adéquat :
<form> 
   <input type="Button" value="paiement" onclick="Main();">
    </form>

Ainsi que quelques exemples d'événements

onclick : lorsque l’on clique (sur un bouton, par exemple)
onchange : lorsque l’on effectue un changement (dans une liste déroulante, par exemple)
onfocus : lorsque l’on "active" un élément (clic dans un champ texte, par exemple)
onblur: lorsque l’on "désactive" un élément (utilisation de la touche "tabulation" pour sortir d’un champ texte, par exemple)
onsubmit : lorsque l’on soumet le formulaire (se place dans la balise <form>)

Les différents langages rencontrés

Toutes ces informations semblent compréhensibles car écrites dans un langage "humain", mais ce n'est qu'une traduction du binaire, composé de 0 et de 1, vers quelque chose de plus lisible pour un être humain normalement constitué.
On appelle cela un langage de programmation, à l'opposé du langage machinebinaire. Le HTML, quant à lui, n’est pas un langage de programmation car il ne crée pas des programmes, il décrit la façon dont une page doit s’afficher, c’est un langage de description.
Un langage de programmation est composé de mots-clés et d’une structure logique. Actuellement, les langages de programmation ont atteint une certaine maturité : on y retrouve toujours les mêmes notions de base : variables, structures itératives, structures conditionnelles, fonctions, …

Le DHTML

Le JavaScript permet de rendre une page web interactive. Cette technologie qui permet la communication entre le langage JavaScript et le langage HTML s’appelle DOM pour Document Object Model (Modèle Objet du document).
L’ensemble des technologies rendant une page plus dynamique s’appelle le DHTML (dynamic HTML). Ce n'est pas un langage, mais plutôt le résultat de la collaboration entre 4 technologies : HTML, CSS (les feuilles de style), DOM et JavaScript.

Compléments

Dans les compléments, nous allons voir plus en détails ce qu'est un programme. Nous découvrirons aussi un autre moyen de communication utilisateur-programme : la fenêtre prompt. Enfin, nous verrons des exemples intéressants d'événements dans des formulaires.

A. Comment passer de l’énoncé au programme ?

Maintenant que vous commencez à programmer, vous vous posez peut-être une des questions suivantes :
- Par quoi commencer ?
- Comment réaliser ceci ?
- Comment récupérer l’information ?
Je vous propose de prendre un énoncé et de l’analyser pour déterminer les étapes du développement du programme…

Voici l’énoncé d’un programme à réaliser :
"Ecrire un programme qui alerte l’utilisateur que la page est sécurisée lorsque l’utilisateur clique sur le bouton "Paiement"". 
(nom du fichier : securite.htm)
Mettez-vous à la place de l’utilisateur du programme :
En tant qu’utilisateur, vous devriez voir s’afficher une fenêtre d’alerte contenant le texte suivant : " Cette page est sécurisée ! ". Cette alerte devrait s’afficher au moment où l’utilisateur clique sur le bouton "Paiement" se trouvant dans la page.

Dans ce programme, il y a :
· 
un événement : l’utilisateur clique sur le bouton "paiement"
· 
une action : alerter l’utilisateur avec le texte : "Cette page est sécurisée !"
Cette action doit être exécutée lorsque l’événement se produit.
1. L’événement qui déclenche l’action est le "click" du bouton "paiement"
<input type="Button" value="paiement" onclick="Main();">

2. L’action du programme est :
function Main(){
alert("Cette page est sécurisée !") ;
}

Assemblons ces morceaux de code pour former le programme.
Voici le code du programme répondant aux spécifications de l’énoncé :

<html>
   <head>
      <title>
         Ecrire un programme qui alerte l’utilisateur que la page est sécurisée lorsque l’utilisateur clique sur le bouton
      </title>
      <script>
         function Main(){
            alert("Cette page est sécurisée !");
         }
      </script>
   </head>
   <body>
      <form>
         <input type="Button" value="paiement" onclick="Main();">
         </form>
      </body>
   </html>
Remarque : Ce code est similaire au programme "alerter.htm" réalisé au module 1. La seule différence est que l’action est exécutée à l’événement onclick d’un bouton et non à l’événement onload de la page.
Enregistrez ce code sous "securite.htm". Vous pouvez exécuter votre programme…

B. Ce que l’on a fait

Techniquement, vous venez de traduire une spécification exprimée en langue française en une suite d’instructions compréhensibles par une machine.
Pour vous faciliter la tâche de programmation, il faut structurer les idées de manière à pouvoir les représenter sous forme schématique.
La représentation logique d’un programme s’appelle l’
algorithmique : un algorithme est une suite d'opérations visant à la résolution d'un problème.

C. Langage machine et langage de programmation

Il est certain qu’une machine (à moins qu’elle ne soit programmée pour ça) ne peut pas comprendre un ordre écrit en français. La langue française est composée d’une grammaire et d’une conjugaison trop complexes pour une machine.
Un ordinateur est une machine somme toute très basique puisqu’elle ne comprend que des suites de 0 et de 1 ! La plus grande difficulté est de "traduire" ce que l’on veut faire en une suite de 0 et de 1 compréhensibles par la machine…pas si simple !
Afin d’éviter de programmer en une suite de 0 et de 1, on a créé des langages intermédiairesqui sont
· compréhensibles à l’être humain de par ses mot-clés (vocabulaire) en anglais et sa structure logique (grammaire)
· compréhensibles par la machine car chaque instruction correspond à une suite de 0 et de 1.

Ces langages intermédiaires sont appelés " langages de programmation ".

D. Conclusion

La traduction entre le "langage humain" et le "langage machine" s’effectue via un langage de programmation.
Un langage de programmation est un langage qui, comme son nom l’indique, permet de créer des programmes.
Remarque : Le langage HTML n’est pas un langage de programmation car il ne crée pas des programmes, il décrit la façon dont une page doit s’afficher, c’est un langage de description !
Un langage de programmation est composé de mots-clés et d’une structure logique.

E. Quizz

Un langage de programmation est
 une suite de 0 et de 1 compréhensibles par la machine
 est composé d’instructions qui correspondent à une suite de 0 et de 1 compréhensibles par la machine
 est composé d’une grammaire et d’une conjugaison compréhensibles par la machine

F. Historique des langages de programmation

Le premier langage de programmation "officiel" est le FORTRAN, apparu en 1958. Depuis, beaucoup d’autres langages ont été créés, chacun différent selon l’environnement d’utilisation. Certains n’ont pas eu de succès et ont disparu ; d’autres, par contre, sont toujours utilisés de nos jours.
Voici quelques langages de programmation assez connus :
- COBOL
- BASIC
- Pascal
- Visual Basic
- C,C++
- Perl
- Java

Actuellement, les langages de programmation ont atteint une certaine maturité : on y retrouve toujours les mêmes notions de base : variables, structures itératives, structures conditionnelles, fonctions, …
·         Pour en savoir plus sur l'histoire des langages de programmation :

G. Le JavaScript, un langage de programmation

Le JavaScript a été conçu par Netscape en collaboration avec Sun dans le but de créer un langage simple, léger, s’exécutant côté client (exécuté par le navigateur sur votre propre PC), permettant l’interactivité entre une page Web et un utilisateur.

Le JavaScript est également utilisé par des technologies côté serveur comme ASP (Active Server Pages).

Ce langage est devenu "standard" en 1998 sous le nom 
d’EcmaScript (ECMA262).
·         Pour en savoir plus sur les spécifications du langage :

H. Quizz

EcmaScript…
 Est un langage tout à fait différent de JavaScript
 Est le nom repris pour la standardisation du JavaScript
 N’existe pas
On utilise le JavaScript
 Principalement dans les technologies du Web
 Dans divers domaines de l’informatique : Applications Windows, Applications pour PDA, …

I. JavaScript et l’interactivité

La puissance de JavaScript vient de sa capacité à communiquer avec les éléments d’une page Web et à les modifier (changer le contenu, changer de taille, changer de couleur, …). Cette technologie qui permet la communication entre le langage JavaScript et le langage HTML s’appelle DOM pour Document Object Model (Modèle Objet du document).
L’ensemble des technologies rendant une page plus dynamique s’appelle le DHTML (dynamic HTML).
Le DHTML n’est donc pas un langage, il est le résultat de la collaboration entre 4 technologies: HTML, CSS, DOM et JavaScript.
·         Pour en savoir plus sur le DHTML :

J. Quizz

La technologie servant à rendre les pages Web plus dynamiques s’appelle
 Le JavaScript
 Le DHTML
 Le DOM
La technologie permettant l’accès aux éléments (objets) du document s’appelle
 Le JavaScript
 Le DHTML
 Le DOM

K. La fenêtre "prompt"

Vous avez vu comment afficher du texte dans le document, dans une fenêtre d’alerte et dans un champ du formulaire.
Vous avez également vu comment récupérer de l’information à partir d’un champ texte.
Voici un autre moyen qui va vous permettre de récupérer de l’information : La fenêtre "prompt".
Voici l’énoncé d’un programme :
" Ecrire un programme qui demande à l’utilisateur de proposer une injure du capitaine Haddock dans une fenêtre prompt. Lorsque l’utilisateur clique sur le bouton "Répéter l’injure", la proposition s’affiche dans le document" 
(nom du fichier : demander.htm)
<html>
   <head>
      <title>
         Ecrire un programme qui demande à l’utilisateur de proposer une injure du capitaine Haddock dans une fenêtre prompt. Lorsque l’utilisateur clique sur le bouton "Répéter l’injure", la proposition s’affiche dans le document
      </title>
      <script>
         var proposition;
         //déclaration de la variable proposition
         function Main(){
            proposition = prompt("Proposez une injure du capitaine Haddock :","Ecrivez votre proposition ici") ; 
            // stockage de la valeur proposée dans la variable proposition
            document.write("Le capitaine Haddock dit : ") ;
             document.write(proposition) ;
             // on écrit la valeur de la proposition dans le document
         }
      </script>
   </head>
   <body onload="Main();">
   </body>
</html> 
Enregistrez ce programme sous "demander.htm" et exécutez-le.
Remarque : Dans ce programme, proposition est le nom d’une variable. Cette variable va contenir une valeur. Cette notion de variable est expliquée plus en détail dans le module 4 mais vous l’utilisez déjà pour les besoins de l’exercice.

L. La fenêtre "prompt" (suite)

Ce programme lit un message inséré par l’utilisateur dans une fenêtre prompt
La commande " prompt " a deux paramètres :
prompt("Quel est votre âge ?","insérez votre âge ici")
1. la question ou l’introduction (Quel est votre âge ?)
2. la phrase d’aide se trouvant dans le champ texte de la fenêtre (insérez votre âge ici)

La commande prompt la plus simple serait prompt("","") mais n’aurait aucun intérêt.
Par contre, la phrase d’aide est optionnelle, comme ceci : prompt("Quel est votre âge ?","")

M. Quizz

Quelle commande ne récupère pas l’âge de l’utilisateur ?
 age = prompt("Quel est votre âge ?","") ;
 age = prompt("Quel est votre âge ?","insérez votre âge ici") ;
 age = alert("Quel est votre âge ?") ;
Trouvez la commande erronée :
 age = prompt("Quel est votre âge ?", "insérez votre âge ici", "") ;
 age = prompt("Quel est votre âge ?"," insérez votre âge ici ") ;
 age = prompt("Quel est votre âge ?","") ;

N. Les événements d’un formulaire

Nous avons vu dans ce module comment exécuter un programme en cliquant sur un bouton. En fait, il est possible d'exécuter un programme lors de différents événements.
Voici les principaux événements que l’on retrouve dans les éléments d’un formulaire :
- onclick : lorsque l’on clique (sur un bouton, par exemple)
- onchange : lorsque l’on effectue un changement (dans une liste déroulante, par exemple)
- onfocus : lorsque l’on "active" un élément (clic dans un champ texte, par exemple)
- onblur: lorsque l’on "désactive" un élément (utilisation de la touche "tabulation" pour sortir d’un champ texte, par exemple)
- onsubmit : lorsque l’on soumet le formulaire (se place dans la balise <form>)
Voici quelques exemples en ligne utilisant ces différents événements :

O. Appliquez : une fenêtre prompt

Appliquez directement la matière vue en effectuant un exercice similaire :
"Ecrire un programme qui demande le prénom de l’utilisateur à l’aide d’une fenêtre prompt et qui l’affiche dans le document."
La variable doit etre nommée "proposition".
La fenêtre prompt doit comporter ces textes :
1. "Quel est votre prénom ?"
2. "Inscrivez votre prénom ici"

Résultat

Solution
<html> 
      <head> 
            <title>Ecrire un programme qui demande le prénom du visiteur via une fenêtre prompt et qui affiche son nom dans le document</title> 
            <script> 
                  var proposition; 
                  function Main(){ 
                        proposition = prompt("Quel est votre prénom ?","Inscrivez votre prénom ici");  
                        document.write("Bonjour ");  
                        document.write(proposition); 
                  } 
            </script> 
      </head> 
      <body onLoad="Main();"> 
      </body>  
</html>  

P. Quizz

Lequel de ces événements ne retrouve-t-on pas dans un élément de formulaire ?
 onclick
 onchange
 onload
L’événement que l’on utilise pour vérifier s’il y a eu un changement de valeur est
 onclick
 onchange
 onsubmit
A quoi sert l’événement onsubmit ?
 A soumettre le formulaire
 A effectuer une action juste avant l’envoi du formulaire
 A effectuer une action juste après l’envoi du formulaire

Q. Appliquez : l’événement onblur

Voici un exercice permettant de mettre en pratique ce que nous avons vu dans le complément qui précède.
"Ecrire un programme qui affiche le message de remerciement dans une alerte, lorsque l'on perd le focus d'un formulaire (onblur)"

Résultat

Veuillez entrer votre remarque:

Solution
<html> 
      <head> 
            <title>Ecrire un programme qui affiche un message de remerciement dans une alerte lors de la perte de focus dans un formulaire (onblur)</title> 
            <script> 
                  function Main(){ 
                        alert("Merci pour votre remarque");  
                  } 
            </script> 
      </head> 
      <body> 
            <form name="accueil"> 
                  <h3>Veuillez entrer votre remarque:</h3> 
                  <input type="text" name="remarque" onblur="Main();"> 
            </form> 
      </body> 
</html> 

1. Objectifs 

Dans ce module, vous apprendrez à mieux connaître le langage JavaScript, quelles sont ses particularités, comment il est interprété, …
En réalisant les exercices des modules précédents, vous avez sans doute remarqué qu’une faute de frappe, et donc une erreur, est vite arrivée. Il est donc important de savoir détecter et corriger une erreur

2. Qui interprète un programme JavaScript ?

Comme pour une page HTML, c’est le navigateur qui interprète le code JavaScript.
C’est donc le navigateur qui traduit, au fur et à mesure, le code JavaScript en un format compréhensible par l’ordinateur.
Remarque : Contrairement au langage Java, le Javascript n’est pas un langage compilé, il est interprété. Un programme écrit dans un langage "compilé" est traduit dans un langage compréhensible par la machine "une fois pour toutes" avant de pouvoir être utilisé, cette étape s’appelle la compilation. Les instructions du langage "interprété" seront par contre traduites au fur et à mesure lors de l’exécution du programme.
L’avantage du JavaScript : l’utilisateur n’a pas besoin d’installer un plugin (contrairement à une animation Flash), tout ce dont il a besoin est un navigateur qui interprète le JavaScript (c’est-à-dire pratiquement tous les navigateurs actuels : Internet Explorer, Firefox, Chrome, etc.).
L’inconvénient du JavaScript : Comme pour le code HTML, le code JavaScript peut être interprété différemment en fonction des navigateurs. Cela signifie que l’on pourra constater des différences à l’écran lors de l’exécution de certaines instructions.

3. Les particularités du JavaScript

JavaScript est un langage de programmation. Chaque langage de programmation possède
- un ensemble de mots représentant le "vocabulaire" du langage
- une structuration logique représentant la "grammaire" du langage

Voici quelques particularités propres au langage JavaScript…

4. La sensibilité à la casse

Le langage JavaScript est sensible à la casse. Cela signifie qu’il fait la différence entre un "A" majuscule et un "a" minuscule.
La fonction :
function main(){

}

est différente de la fonction :
function Main(){

}

Remarque : Vous pouvez bien évidemment utiliser les majuscules/minuscules dans le contenu textuel : "bienvenue dans l’univers de la bd !" ou "BIENVENUE DANS L’UNIVERS DE LA BD !". Les majuscules/minuscules n’auront d’importance au niveau du texte que lorsque l’on comparera deux valeurs. Par exemple : "TINTIN" est différent de "tintin".

5. Appliquez : la sensibilité à la casse

Il y a 3 erreurs dans ce code. Corrigez-le afin qu'il s'éxécute correctement.

Résultat

Solution
<html> 
      <head> 
            <title>Casse</title> 
            <script> 
                  function Main(){  
                        document.write("Bienvenue dans le monde de la BD !") ;  
                  } 
            </script> 
      </head> 
      <body onload="Main();"> 
      </body>
</html>

6. Un ";" à la fin de chaque instruction

Vous avez certainement remarqué qu’en fin de ligne, on ajoute un point-virgule.
Ce point-virgule sert à séparer les 
instructions.
Qu’est-ce qu’une instruction ?
Une instruction, c’est 
l’ordre (l’action) que le programme va commander à la machine.
Un programme est composé d’une suite d’instructions.

Pour un code plus lisible, on écrit une instruction par ligne :
alert("Bienvenue dans l’univers de la BD !") ; 
alert("Merci de votre visite !") ; 
Dans ce cas, les points-virgules en fin d’instructions ne sont 
pas obligatoires.
Pour un code plus compact, on peut écrire plusieurs instructions sur une ligne :
alert("Bienvenue dans l’univers de la BD !") ; alert("Merci de votre visite !") ; 
Dans ce cas, le point-virgule est 
nécessaire entre deux instructions !
Remarque : Pour un code plus homogène et bien écrit, on met un point-virgule à la fin de chaque instruction, même s’il y a un retour à la ligne.

7. Appliquez ! Un ";" à la fin de chaque instruction

Ajoutez les points-virgules à la bonne exécution du programme.

Résultat

Solution
<html> 
      <head> 
            <title>Casse</title> 
            <script> 
                  function Main(){  
                        document.write("Bienvenue dans le monde de la BD!<br>");document.write("Sur ce site, vous trouverez toute information concernant la bande dessinée...<br>");document.write("...Bonne visite!"); 
                  } 
            </script> 
      </head> 
      <body onload="Main();"> 
      </body> 
</html>

8. Les mots réservés

alert, function, prompt, … sont des mots réservés à l’exécution du programme, on ne peut donc pas utiliser ces mots autrement que dans la structure logique (grammaire) définie par le langage.
Par exemple, on ne pourra jamais appeler une fonction function sans obtenir une erreur :
function function(){
alert("Bienvenue dans l’univers de la BD !") ;
}

N’oubliez pas que le JavaScript est sensible à la casse ! Il faut donc faire très attention à l’utilisation des majuscules/minuscules des mots réservés !
Document.Write("Bienvenue dans l’univers de la BD !") vous apportera une erreur dans votre programme.

Dans les compléments, vous trouverez un tableau contenant la liste des mots réservés en JavaScript.

9. Les caractères spéciaux

Dans du contenu, on peut retrouver des caractères spéciaux, par exemple, un guillemet (").
Or, le guillemet est utilisé pour délimiter le début et la fin d’une chaîne de caractères, comme ceci :
alert("Bienvenue dans l’univers de la BD !")

Comment faire pour écrire "Bienvenue dans l’univers de la "BD" !" sans obtenir une erreur ?
Il va falloir dire au programme de ne pas 
interpréter les guillemets se trouvant autour de BD. Ces guillemets représentent simplement du texte.
Voici comment on ajoute des guillemets dans du texte :
alert("Bienvenue dans l’univers de la \"BD\" !") 
Il suffit de mettre un antislash (ou backslash ou "\") devant le guillemet pour qu’il soit interprété comme du texte.

En complément, vous trouverez la liste de tous les caractères spéciaux en JavaScript.

10. Quizz

Pour qu’un guillemet soit interprété comme du texte, on ajoute devant celui-ci…
 message="Vous avez dit \"bizarre\" !" ;
 message="Vous avez dit /"bizarre/" !" ;
 message="Vous avez dit //"bizarre//" !" ;

11. Accès à un objet du document

En JavaScript, on travaille en "collaboration" avec une page HTML.
Comme vous l’avez vu dans le module 2, il est possible de communiquer avec des éléments d’une page HTML comme par exemple un champ texte :
document.accueil.message.value = "Bienvenue dans l’univers de la BD !" ;
(accueil étant le nom du formulaire et message étant le nom du champ texte) 

Chaque élément d’une page HTML est accessible via un chemin hiérarchique logique :
dans le document, on trouve un formulaire accueil dans lequel on trouve le champ message.
On atteint donc la valeur du champ par le chemin : document.accueil.message.value.

A ne pas oublier : Pour atteindre un élément d’un document, il faut lui donner un nom. C’est par son nom que l’on atteindra l’élément.

12. Appliquez : accès à un objet du document

Complétez le HTML afin que le script s'éxécute correctement.

Résultat

Solution
<html> 
      <head> 
            <script> 
                  function Main(){ 
                        document.quizz.question1.value = "Quel est le nom du chien de Boule ?"; 
                  } 
            </script> 
      </head> 
      <body onload="Main();"> 
            <form name="quizz"> 
                  <input type="text" name="question1"> 
            </form> 
      </body> 
</html> 

13. Conclusion

Chaque langage de programmation possède des particularités qu’il faut maîtriser pour éviter des erreurs de syntaxe.
Il existe de nombreux livres et sites Internet concernant la "grammaire" du langage JavaScript. Vous trouverez des ressources dans les compléments de ce module.

14. L’erreur est humaine

Toutes ces particularités du langage peuvent vous amener à faire des erreurs, par exemple mettre un "A" majuscule pour la commande "alert()".
Il faut bien admettre que 
l’erreur est humaine et que, si ce n’est pas la première, ce ne sera pas non plus la dernière !
Dans un programme, on peut retrouver deux types d’erreurs :
- les erreurs de syntaxe : faute de frappe, oubli de guillemet, …
- les erreurs logiques : appel de la fonction Main() alors qu’elle n’existe pas, oubli d’appel de la fonction Main() au chargement de la page, …

Voici comment gérer les erreurs d’un programme.

15. Comment détecter une erreur ?

Une erreur se détecte facilement dans un programme car généralement, il ne tourne pas correctement ;-)
Néanmoins, le navigateur prévient lorsqu’il rencontre une erreur dans un programme : généralement, vous obtenez un " horrible " message d’alerte …


… et un picto d’alerte s’affiche dans la barre d’état (en bas à gauche) du navigateur.

Généralement, une erreur en entraîne une autre : vous pouvez obtenir plusieurs messages d’alerte à la suite !

Remarque : Si vous n’obtenez pas la grande fenêtre d’alerte, il vous suffit de double-cliquer sur le picto d’alerte en bas à gauche de l’écran du navigateur.

16. Comment retrouver une erreur ?

Les messages d’erreur du navigateur Internet Explorer précisent la ligne et l’endroit sur la ligne où il trouve l’erreur… ATTENTION ! L’emplacement réel de l’erreur n’est pas toujours celui proposé par le navigateur !
Le meilleur moyen de détecter l’emplacement exact d’une erreur est de mettre la ligne suspecte en commentaire, comme ceci :
<html>
   <head>
      <title>
         Comment retrouver une erreur
      </title>
      <script>
         function Main(){
            // alert("Bienvenue dans le monde de la "BD" !");
          }
      </script>
   </head>
   <body onload="Main();">
   </body>
</html>
Si la page s’affiche sans erreur, c’est que l’erreur se trouve bien au niveau de la ligne en commentaire.
Comme il n’existe pas d’outils de débogage (= détecteur de bug) vraiment performants pour le langage JavaScript, cette astuce de programmeur va vous être bien utile !
=> Il ne reste plus qu’à trouver l’erreur dans la ligne…

17. Les points importants à vérifier

Quelles sont les erreurs possibles dans un programme ?
- Erreur d’écriture :
functoin Main() au lieu de function Main()

- Problème de majuscule/minuscule
document.Write() au lieu de document.write()

- Oubli de fermeture de parenthèses ou d’accolades
alert("Bienvenue" au lieu de alert("Bienvenue")

- Conflit d’utilisation de guillemets
alert("Qui a dit :"Je pense donc je suis ! " ?") au lieu de alert("Qui a dit:\"Je pense donc je suis ! \" ?")

- Oubli de point-virgule entre deux instructions se trouvant sur la même ligne
document.write("Bonjour !<br>") document.write("Comment allez-vous ?") au lieu de document.write("Bonjour !<br>"); document.write("Comment allez-vous ?")

- Utilisation d’un mot réservé pour le nom d’une fonction
function function(){…} au lieu de function messageBienvenue(){…}

18. Conclusion : Les bonnes manières pour programmer

Pour éviter un maximum d’erreurs, il faut être systématique :
- Chaque fois que vous ouvrez une accolade, fermez-la directement. Idem pour une parenthèse ou un guillemet. Cela vous évitera d’omettre un élément fermant.
- Placez une instruction par ligne. Le code sera plus lisible et retrouver les erreurs sera plus simple.
- Indentez votre code (ajoutez des retraits), cela permet également de rendre le code plus clair.

19. Mémo

Interprété ou compilé?

A la différence d'autres langages comme le Java, le JavaScript n'est pas compilé mais interprété par le navigateur. De ce fait, son code est portable sur plusieurs navigateurs sans la moindre modification, mais son interprétation peut être légèrement différente d'un à l'autre.

Les particularités du JavaScript

Etant donné qu'il s'agit d'un langage de programmation, il possède des mots qui forment son "vocabulaire", et une structuration logique, qui représente sa "grammaire".
Ce langage est sensible à la casse (majuscule / minuscule): Main() et main() sont donc deux fonctions différentes.
Il est également sensible à la ponctuation, n'oubliez jamais votre ; à la fin d'une instruction.
Les caractères spéciaux, quant à eux, doivent être précédés d'un \ pour s'afficher sans être interprétés par le navigateur.
Voici comment on ajoute des guillemets dans du texte :
alert("Bienvenue dans l’univers de la \"BD\" !")

Les mots réservés

Le JavaScript n'autorise pas l'usage de certains mots pour nommer une fonction ou une variable, comme alertfunction, ou encore prompt.
La liste des mots réservés (déjà utilisés ou à venir) peut être trouvée sur ce site:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Mots_r%C3%A9serv%C3%A9s
Une fois tous vos éléments nommés correctement, vous pouvez enfin y accéder, voici la façon pour y parvenir:
Si on suit un chemin hiérarchique logique dans le document, on trouve un formulaire "accueil" dans lequel est placé le champ "message".
On atteint donc la valeur du champ "message" par le chemin : document.accueil.message.value

Ca ne marche pas?

Pas de stress, la plupart des erreurs viennent de trois sources :
- les erreurs de syntaxe : faute de frappe, oubli de guillemets, de point-virgule, utilisation d'un mot réservé, ...
- les fautes de frappe : différence entre majuscules/minuscules, inversion de lettres, ...
- les erreurs logiques : appel de la fonction Main() alors qu’elle n’existe pas, oubli d’appel de la fonction Main() au chargement de la page, ...
Pour voir la source de l'erreur, vous pouvez vous inspirer du message d'alerte ou du pictoprésent dans la barre d'état du navigateur.
En général, les messages d'erreur sont assez incompréhensibles. On peut toutefois s'en sortir avec un peu de logique: tout ce qui a été ouvert doit être fermé, les majuscules respectées, les ; bien placés, les noms d'objets bien écrits, ...
Ensuite, rien de plus simple, vous mettez les lignes suspectes en commentaire (avec le // comme vu précédemment), et vous relancez la page incréminée.
Pensez également à changer de navigateur, Firefox vous offre une description des bugs plus claire. En règle générale, il est souvent recommandé de tester son programme dans plusieurs navigateurs.

Améliorez-vous

Pour finir, n'oubliez pas les bonnes manières pour programmer: tout ce qui est ouvert doit être fermé directement, aérez votre code, commentez-le au besoin et indentez-le.

Compléments

Voici quelques explications supplémentaires concernant les particularités du langage JavaScript

A. Langage compilé / Langage interprété

Il existe deux types de langages :
· les langages interprétés (par exemple le JavaScript)
· les langages compilés (par exemple le Java).

Un langage interprété est un langage qui est traduit en un langage compréhensible par la machine au moment de son exécution.
Un langage compilé est un langage qui est traduit en un langage compréhensible par la machine lors de la compilation, ce qui rend l’exécution du programme plus rapide car il n’y a plus de "traduction" à effectuer pendant l’exécution du programme.
Les avantages et les inconvénients des deux types de langages :
Contrairement au langage interprété, chaque modification d’un langage compilé nécessite une recompilation du programme pour que les modifications soient prises en compte à l’exécution de celui-ci…
Pour un langage compilé, les erreurs de syntaxe sont détectées à la compilation et non à l’exécution. Vous obtiendrez donc moins d’erreurs à l’exécution de votre programme puisqu’elles auront été détectées avant !
Remarque : Le fait que le JavaScript soit un langage interprété est un choix délibéré : cela le rend
· plus accessible car il se trouve directement dans une page HTML,
· 
plus léger car le format du code est de type ASCII (on peut visualiser le code avec le Bloc-notes).

B. Quizz

Le langage JavaScript est un langage
 interprété par le navigateur
 compilé et exécuté par le navigateur

C. Liste des mots réservés

Voici la liste des mots à éviter en tant que nom de fonction ou nom de variable.
Sachez que certains mots ne sont pas encore utilisés par le langage mais sont prévus pour une utilisation future. C’est le cas pour le mot réservé "debugger" qui n’a pas encore d’utilisation mais qui pourrait en avoir dans le futur…
Liste des mots reserves en Javascript
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implement
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

D. Liste des caractères spéciaux

Pour éviter des conflits de guillemets (guillemets déclarant du contenu textuel et guillemets faisant partie du contenu textuel), on utilise les caractères spéciaux en précédant le guillemet d’un antislash (\) .
alert("Dans quelle BD trouve-t-on la phrase : \"Je ne suis pas gros, je suis juste un petit peu enveloppé !\" ?")
Une fenêtre d’alerte n’accepte pas le format HTML. Impossible, donc, d’écrire en couleur ou en gras… Par contre, les caractères spéciaux permettent l’ajout d’un retour à la ligne avec le caractère \n (l’équivalent du <br> en HTML).
Pour formater le contenu textuel d’une fenêtre d’alerte, on utilise également les caractères spéciaux :
alert ( "Bienvenue dans l’univers de la BD  !\ nSur ce site, vous trouverez toute l’information concernant la bande dessinée…\n…Bonne visite !")
Liste des caractères spéciaux
\b
\f
\n
\r
\t
\"
\'
\\
touche de suppression
saut de ligne d'impression
retour à la ligne
appui sur la touche ENTREE (retour chariot)
tabulation
guillemets doubles
guillemets simples
caractère antislash

E. Savoir lire les messages d’erreur…

Il n’est pas simple de comprendre les messages d’erreurs affichés par les navigateurs. En effet, ceux-ci sont des messages génériques et traduits de l’anglais… Ce qui les rend donc moins lisibles !
Voici quelques erreurs possibles en fonction des différents messages obtenus avec Internet Explorer :
Objet attendu :
- Vous avez fait une faute de frappe : Alert au lieu de alert
- Vous faites appel à un objet qui n’existe pas : <body onload="fctPrincipale() ;"> alors que la fonction fctPrincipale() n’existe pas

‘)’ attendu :
- Il y a un conflit de guillemets dans une chaîne de caractères : alert("Qui a dit : "Je pense donc je suis" ?")

‘ ;’ attendu
- Il y a un conflit de guillemets dans une chaîne de caractères : message ="Qui a dit : "Je pense donc je suis" ?" ;

Constante de chaîne non terminée
- Il manque les guillemets de fermeture de la chaîne de caractères

‘document.form.message.valeur’ a la valeur NULL ou n’est pas un objet
- La propriété "valeur" n’existe pas pour un élément du formulaire

‘document.form.messagessssss.value’ a la valeur NULL ou n’est pas un objet
- Le champ messagessssss n’existe pas ou bien le formulaire form n’existe pas

Cet objet ne gère pas cette propriété ou cette méthode
- La propriété ou la méthode de l’objet est incorrecte : document.Write()

F. Les erreurs JavaScript avec Firefox

Un des atouts de Firefox est son débogueur JavaScript. Beaucoup plus puissant que celui d’Internet Explorer, il décrit les "bugs" plus clairement.
Voici le message obtenu lors de l’exécution du programme erreur.htm (voir complément précédent) :

Ce message est clair : le programme n’arrive pas à trouver la fin de la chaîne de caractères. Le pointeur est placé au début de la chaîne de caractères en question.
Pour obtenir cette petite fenêtre appelée Console JavaScript, il vous suffit de taper dans la barre des adresses (à la place de l’URL) : javascript:
Remarque : Lorsque vous êtes bloqué sur une erreur, essayez votre programme dans différents navigateurs, les différents messages pourront peut-être vous mettre sur la voie…

1. Objectifs

Dans les modules précédents, vous avez appris à afficher du contenu et à récupérer des informations provenant de l’utilisateur.
Dans ce module, vous apprendrez à stocker ces données afin de les réutiliser.

2. Dire plusieurs fois la même chose

Dans le premier module, vous avez affiché le texte "Bienvenue dans l’univers de la BD !" dans le document.
Reprenons cet énoncé avec une petite amélioration :
"Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document" 
(nom du fichier : ecrire3fois.htm)
Ecrivez le code du programme répondant à cette spécification et enregistrez-le sous le nom "ecrire3fois.htm".
Vous trouverez la solution de l’exercice à la page suivante.

3. Solution de l’exercice

Le code est assez simple :
<html>
   <head>
      <title>
         Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document
      </title>
      <script>
         function Main(){
            document.write("Bienvenue dans l’univers de la BD !<br>") ;
                
               // afficher une 1re fois
               document.write("Bienvenue dans l’univers de la BD !<br>") ;
                   // afficher une 2e fois
                  document.write("Bienvenue dans l’univers de la BD ! <br>") ;
                      // afficher une 3e fois
                  }
               </script>
            </head>
            <body onload="Main()">
            </body>
         </html>
Remarque: A la suite de "Bienvenue dans l’univers de la BD", on a ajouté la balise HTML <br>. Cette balise permet d’effectuer un retour à la ligne. Sans cette balise, le texte se serait affiché comme suit : Bienvenue dans l’univers de la BD !Bienvenue dans l’univers de la BD!Bienvenue dans l’univers de la BD ! (les trois phrases se suivent sans retour chariot !)

4. Conclusion

Le texte est bien affiché 3 fois, mais le code est "lourd" :
1. Il est inutilement long, vous avez dû recopier le texte plusieurs fois
2. Si le texte de bienvenue change, vous voilà bon pour modifier plusieurs fois le texte !

5. Une solution plus "propre"

Voici un moyen d’éviter la répétition du texte : stockons-le dans une variable (nom du fichier : ecrire3foisV2.htm, V2 pour version 2).
<html>
   <head>
      <title>
         Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document
      </title>
      <script>
         var message;
          
         function Main(){
            message="Bienvenue dans l’univers de la BD !<br>";
                document.write(message); 
               document.write(message);
               document.write(message);
            }
         </script>
      </head>
      <body onload="Main()">
      </body>
   </html>
Enregistrez ce code sous le nom "ecrire3foisV2.htm" et exécutez le programme.
Voilà qui résout les problèmes :
Le code est moins long et dans le cas de la modification du texte, le changement est 
automatique.

6. Ce que l’on a fait

Plutôt que d’écrire à chaque fois une valeur, vous l’avez stockée dans une variable.
Une variable est une 
étiquette qui permet au programme de référencer une valeur.
Dans l’exemple précédent, la valeur est
"Bienvenue dans l’univers de la BD !"
et l’étiquette de cette valeur (le nom de la variable) est
message.

Cette variable a été définie au préalable avec la commande: var message ; .
Et on lui a 
associé une valeur avec la commande : message = "Bienvenue dans l’univers de la BD !" ; .

7. Un programme qui lit (cf. module 2)

Rappelez-vous, dans le module 2, vous avez déjà utilisé la notion de variable en stockant le contenu inséré par l’utilisateur dans la variable prop :



<html>
   <head>
      <title>
         Lecture de la valeur d’une variable
      </title>
      <script>
         var prop;
         // on déclare la variable proposition
         function Main(){
            prop = document.echo.proposition.value;
             // on enregistre la proposition dans la variable proposition
            document.echo.injure.value = prop;
             // on écrit la valeur proposée dans le champ texte "injure"
         }
      </script>
   </head>
   <body>
      <form name="echo">
         <input type="text" name="proposition">
            <input type="button" value="Répéter la proposition" onclick="Main()">
               Le capitaine Haddock dit : <input type="Text" name="injure">
               </form>
            </body>
          </html>

8. Bien déclarer une variable

1. Généralement , on déclare (crée) les variables en début de programme .
Remarque : il est possible de déclarer une variable dans une fonction. Dans ce cas, elle n’existe que dans cette fonction et n’est pas "utilisable" en dehors de celle-ci (vous verrez ceci plus en détail dans le module 9 : Les fonctions).
<html>
   <head>
      <title>
         Déclaration de variable
      </title>
      <script>
         var message;
         function Main(){
            //instructions de la fonction
         }
      </script>
   </head>
   <body onload="Main()">
   </body>
</html>
2. N’oubliez jamais de refermer les guillemets, vous obtiendriez une erreur !
var message = "coucou; 
3. Le nom d’une variable doit être écrit :
·

·         en un seul mot,
·         sans accent
·         et commencer par une lettre ou par "_" (underscore).
var message ; // nom de variable correct
var _message ; // nom de variable correct
var 1message ; // nom de variable incorrect

9. Quizz

Pour les réutiliser, on stocke les données dans une
 Variable
 Valeur
Parmi ces 3 noms de variable, lequel est correct ?
 catégorie
 1reProposition
 _couleur
Laquelle de ces déclarations est correcte ?
 Var texte ;
 var var ;
 var mode ;

10. Appliquez : utiliser les variables

Ce programme affiche 4 fois le texte "Bienvenue dans l'univers de la BD!" de plus en plus grand. Modifiez le code de ce programme afin de stocker le message dans une variable nommée "texte".

Résultat

Solution
<html> 
      <head> 
            <title>Ecrire un programme qui affiche 4 fois le texte "Bienvenue dans le monde de la BD!" de plus en plus grand </title> 
      <script> 
            var texte; 
            texte="Bienvenue dans le monde de la BD!"; 
            function Main(){ 
                  document.write("<h4>"); 
                  document.write(texte); 
                  document.write("</h4>"); 
                  document.write("<h3>"); 
                  document.write(texte); 
                  document.write("</h3>"); 
                  document.write("<h2>"); 
                  document.write(texte); 
                  document.write("</h2>"); 
                  document.write("<h1>"); 
                  document.write(texte); 
                  document.write("</h1>"); 
            } 
            </script> 
      </head> 
      <body onload="Main();"> 
      </body> 
</html>

11. Quizz

Laquelle de ces instructions ne récupère PAS la valeur du champ proposition dans la variable injure ?
 injure = document.form.proposition.value ;
 document.form.proposition.value = injure ;

12. Manipulez plusieurs variables

Jusqu’à présent, vous avez appris à stocker une valeur dans une variable et à afficher la valeur de la variable telle quelle. Maintenant, vous allez travailler avec les variables . Vous allez les réutiliser pour afficher du texte dynamique.
Insérer, dans une page HTML, le texte lacunaire suivant :
Les … de cette bande … sont des petits … tout bleus
"Créer un programme qui demande les mots manquants (à l’aide d’un formulaire) à l’utilisateur et affiche le texte complété avec les mots proposés par l’utilisateur dans une fenêtre d’alerte." 
(nom du fichier : txtLacun.htm)
Si vous vous sentez d’attaque, essayez de faire l’exercice seul(e) !
Traduisons cet énoncé et trouvons les étapes principales du développement du programme :
1. La page HTML contient le texte " Les … de cette bande … sont des petits … tout bleus".
2. Le programme récupère LES propositions de l’utilisateur dans des variables à l’aide d'un formulaire.
3. Le programme affiche (dans une fenêtre d’alerte) le texte lacunaire complété par les propositions de l’utilisateur.

Les étapes de développement de ce programme sont décrites dans les 3 points suivants.

13. Explication du code 1/3

Voici le code de départ.
<html>
   <head>
   <title>Texte lacunaire</title>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:</h1>
<p>Les … de cette bande … sont des petits … tout bleus</p>
</body>
</html>

Continuons ! 14. Explication du code 2/3

Demandons les mots manquants par le biais d'un formulaire (lignes 18 à 23) et stockons-les dans des variables : prop1, prop2, prop3.
Remarque : pour la première fois, vous avez utilisé 3 variables. Un programme peut contenir plusieurs variables.
<html>
   <head>
   <title>Texte lacunaire</title>
   <script>
      var prop1;
      var prop2;
      var prop3;
      function Main(){
         prop1=document.form.prop1.value;
         prop2=document.form.prop2.value;
         prop3 = document.form.prop3.value;
      }
   </script>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:</h1>
<p>Les … de cette bande … sont des petits … tout bleus</p>
<form name="form">
1er mot manquant: <input type="text" name="prop1"/><br>
2ème mot manquant: <input type="text" name="prop2"><br>
   3ème mot manquant: <input type="text" name="prop3"><br>
      <input type="button" value="Compléter le texte" onClick="Main();">
      </form>
   </body>
</html>
Continuons !

15. Explication du code 3/3

Affichons la phrase complétée par l'utilisateur (ligne 12).
<html>
   <head>
   <title>Texte lacunaire</title>
   <script>
      var prop1;
      var prop2;
      var prop3;
      function Main(){
         prop1=document.form.prop1.value;
         prop2=document.form.prop2.value;
         prop3 = document.form.prop3.value;
          alert("Les " + prop1 + " de cette bande " + prop2 + " sont des petits " + prop3 + " tout bleus ") ;
      }
   </script>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:</h1>
<p>Les … de cette bande … sont des petits … tout bleus</p>
<form name="form">
1er mot manquant: <input type="text" name="prop1"/><br>
2ème mot manquant: <input type="text" name="prop2"><br>
   3ème mot manquant: <input type="text" name="prop3"><br>
      <input type="button" value="Compléter le texte" onClick="Main();">
      </form>
   </body>
</html>


Recopiez l’entièreté du code dans votre éditeur et enregistrez votre document sous le nom "textLacun.htm". Il vous reste à exécuter ce programme.
16. Conclusion

Dans la commande "alert("Les " + prop1 + " de cette bande " + prop2 + " sont des petits " + prop3 + " tout bleus ")", on a "collé" des chaînes de caractères et des variables à l’aide de l’opérateur "+" : c’est ce qu’on appelle la concaténation.
N’oubliez pas d’ajouter un espace autour de la variable car vous pourriez obtenir le résultat suivant : Leshérosde cette bandedessinéesont des petitsbonshommestout bleus

17. Appliquez : la concaténation

Ecrire un programme qui demande un prénom via un formulaire et qui affiche le texte :"Il était une fois l’histoire de [PRENOM]. [PRENOM] se promenait sur la plage. Soudain, [PRENOM] entendit une personne appeler : [PRENOM] ![PRENOM] !… [PRENOM] se retourna mais se rendit vite compte que la personne était en train de rappeler son chien [PRENOM] !!!".
[PRENOM] étant la valeur de la variable prenom définie au préalable." (nom du fichier : concat.htm)
Etapes du développement :
1. créer le formulaire (name="form") demandant un prénom (name="prenom")
2. récupérer la proposition dans une variable (prenom)
3. afficher dans le document, avec write(), le texte "Il était une fois l’histoire de [PRENOM]. [PRENOM] se promenait sur la plage lorsque, soudain, [PRENOM] entendit une personne appeler : [PRENOM] ![PRENOM] !… [PRENOM] se retourna mais se rendit vite compte que la personne qui venait d’appeler était en train de rappeler son chien [PRENOM] !!!"

Résultat

Solution
<html> 
      <head> 
            <title>Concaténation</title> 
      <script>  
            var prenom; 
            function Main(){  
                  prenom = document.form.prenom.value;  
                  document.write("Il était une fois " + prenom + ". " + prenom + " se promenait sur la plage lorsque, soudain, "+prenom+" entendit une personne appeler : " + prenom + " !" + prenom + "!! " + prenom + " se retourna mais se rendit vite compte que la personne était en train de rappeler son chien " + prenom + " !!!"); 
            } 
      </script> 
      </head> 
            <form name="form"> 
                  Votre prénom: <input type="text" name="prenom"> 
                  <input type="button" value="Afficher" onClick="Main();"> 
            </form> 
      </body> 
</html>

18. Quizz

Pour "coller" du texte et des variables, on a utilisé l’opérateur :
 +
 "
 *
Quel terme utilise-t-on pour signifier que l’on "colle" du texte et des variables ensemble ?
 La déclaration
 La concaténation
 La collation
Laquelle de ces instructions est correcte ?
 alert("Les " + prop1 + " de cette bande " + prop2 + " sont des petits " + prop3 + " tout bleus ") ;
 alert("Les + prop1 + " de cette bande " + prop2 + " sont des petits " + prop3 + " tout bleus ") ;
 alert("Les " + prop1 + " de cette bande " prop2 + " sont des petits " + prop3 + " tout bleus ") ;
Sachant que la variable "compteur" vaut 3, laquelle de ces instructions s’affichera sans erreur ?
 alert("Vous avez gagné "+ compteur + BD d’Astérix et Obélix") ;
 alert("Vous avez gagné " + compteur + " BD d’Astérix et Obélix) ;
 alert("Vous avez gagné " + compteur + " BD d’Astérix et Obélix") ;

19. Synthèse

Dans tout programme, dès que l’on travaille avec des données, on utilise des variables pour les stocker afin de pouvoir les réutiliser.
Les variables rendent le code plus clair, plus réutilisable, plus générique.

Les variables sont faites pour être manipulées, la concaténation est un exemple de manipulation de variables.

20. Mémo

Les variables

Une variable permet de stocker une valeur. Cela limite les répétitions, allège le code, et diminue le nombre d'erreurs dues à une faute de recopiage.
Il s'agit donc d'une étiquette qui permet au programme de référencer une valeur.
Le nom d’une variable doit être écrit :
· en un seul mot
· sans accent
· et commencer par une lettre ou par "_" (underscore).

La déclaration (ou création) d'une variable se fait généralement en début de programme. On peut la définir dans une fonction, mais elle n'existerait que dans cette fonction, et pas en dehors.
Les types de variables les plus fréquents:
· texte (on entoure le contenu de guillemets)
· numérique
· tableau de données, ce point sera abordé dans un chapitre ultérieur
· booléen (vrai/faux)

Définir une variable

var proposition;
Et on lui attribue une valeur comme ceci:
proposition = "The quick brown fox jumps over the lazy dog";

Lire du contenu

Pour lire le contenu d'une variable, il suffit d'utiliser son nom sans guillemets, de cette façon:
alert ("Nous sommes le " + jour);
Ceci affichera une pop-up indiquant la phrase "Nous sommes le " suivie du contenu de la variable jour.
Pour ajouter une variable dans du texte, nous avons fait une concaténation entre une chaîne de caractères et une variable grâce au signe "+".

Voici un second exemple

document.write ("Nous sommes le " + NumJour + " jour de l'année.");

Peut-on utiliser une variable non déclarée ?

Oui, on appelle cela une déclaration implicite. Cela n'est toutefois pas conseillé, pour deux raisons:
- la plupart des autres langages nécessitent la déclaration des variables dans leur code, autant directement prendre de bonnes habitudes.
- en déclarant vos variables, vous avez un endroit où elles sont toutes reprises, leur type (entier, booléen, ...) ainsi que leur nom, ceci permet de limiter les erreurs dans votre code.

Travailler sur du texte

En plus de la concaténation, il existe d'autres fonctions permettant de traiter du texte.
Une d'entre-elles est le "substring", qui isole une partie d'une chaîne de caractères:
var prop ; 
var prop6let ; // proposition 6 lettres 
prop = document.BD.prop.value; // on récupère la proposition dans le formulaire
prop6let = prop.substr(0,6); // on part de la lettre 0, on reprend les 6 premières lettres, et on stocke tout ça dans la variable prop6let

Si d'autres méthodes permettant de traiter les chaînes de caractères vous intéressent, vous pouvez lire les compléments de ce cours, qui vous parlent de l'objet String() plus en détail.

Compléments

Dans les compléments, vous découvrirez plus d'informations sur les variables et le travail avec du texte. Vous apprendrez ainsi à manipuler des chaînes de caractères, les tronquer, les mettre en gras ou en majuscules...

A. Déclarer une variable ?

Comme il a été dit dans ce module, une variable doit en principe être déclarée avant d’être utilisée.
Voici cependant un exemple de programme utilisant une variable sans la déclarer :
<html>
   <head>
      <title>
         Pas de déclaration de variable
      </title>
      <script>
         function Main(){
            injure = document.BD.prop.value;
             // récupération de la valeur insérée
            // la variable injure n'a pas été déclarée
            document.BD.echo.value = injure;
            // affichage de la variable injure dans le champ echo
         }
      </script>
   </head>
   <body>
      <form name="BD">
      <h1>Proposez une des injures du capitaine Haddock</h1>
      <input type="text" name="prop">
         <input type="button" value="r&eacute;p&eacute;ter" onclick="Main()">
            <input type="text" name="echo">
            </form>
         </body>
      </html>
Recopiez ce code et enregistrez-le sous "echoV2.htm".

 Faut-il vraiment déclarer une variable ? 

La réponse est NON … en JavaScript !
Lorsqu’on ne déclare pas une variable, la déclaration s’effectue d’elle-même. C’est ce que l’on appelle la déclaration implicite.
Voici encore une souplesse du JavaScript : la déclaration de variables n’est pas obligatoire.
Sachez que peu de langages acceptent cette méthode et que l’on vous conseille de l’éviter si vous souhaitez prendre de bonnes habitudes pour la suite ;-)

B. Quizz

En JavaScript, la déclaration d’une variable
 Est automatique
 Est nécessaire et obligatoire
2. La déclaration implicite de variables existe
 Dans tous les langages
 Dans quelques langages

C. Texte, nombres, booléens, …

Jusqu’à présent, vous avez rencontré un seul type de variable : le type texte (ou chaîne de caractères).
Ex : var message="Bonjour tout le monde" ;
Bien sûr, il n’y a pas que des variables de type texte, il existe d’autres types de variables :
·         type numérique
·         type booléen
·         type tableau de données
Pour différencier le type d’une variable de type texte, il suffit "d’entourer" le contenu par des guillemets :
var message="Bonjour tout le monde" ;
Sans les guillemets, vous auriez obtenu une erreur…
Dans le module suivant, vous allez apprendre à déclarer et utiliser des variables de type numérique. Par la suite, vous apprendrez également à déclarer et à utiliser des tableaux de données.

D. Travailler sur du texte

"Ecrire un programme qui demande à l’utilisateur (via un formulaire) de proposer le nom d’un héros de BD qui a 6 lettres. Cette proposition est répétée dans un deuxième champ du formulaire." (nom du fichier : tronquerTxt.htm)
Explication :
Peu importe la proposition de l’utilisateur, le programme n’affichera que les 
6 premières lettres.
Par exemple :
L’utilisateur propose capitaine Haddock.
Le programme répète : capita.
L’utilisateur propose spirou.
Le programme répète spirou.
=> Le programme doit tronquer la proposition de l’utilisateur en ne prenant que les 6 premières lettres.

Voici la commande (ligne 5) qui permet de tronquer une chaîne de caractères :
var prop;
var prop6let; 
prop=document.BD.prop.value;
 // récupération de la proposition
prop6let = prop.substr(0,6);
 // troncature de la variable prop
prop.substr(0,6) est la méthode qui permet de tronquer la chaîne de caractères contenue dans la variable prop en commençant au début de la chaîne (0) et en prenant exactement 6 lettres (6).
substr signifie substringsous-chaîne de caractères ou morceau de chaîne de caractères.
Vous pouvez essayer de faire l’exercice seul. Voici le code du programme .
<html>
   <head>
   <title>Tronquer du texte</title>
   <script>
      var prop;
      var prop6let;
      function Main(){
         prop = document.BD.prop.value;
 // récupération de la proposition 
         prop6let = prop.substr(0,6); // troncature de la variable prop 
         document.BD.echo.value = prop6let; // affichage de la variable prop6let
       } 
   </script>
</head> 
<body>
   <form name="BD"> 
   <h1>Proposez le nom d'un héros de BD contenant 6 lettres</h1> 
   <input type="text" name="prop">
      <input type="button" value="Répéter" onclick="Main();">
         <input type="Text" name="echo">
         </form>
      </body>
    </html>
Exécuter le code
Ce programme n’affiche que les six premiers caractères de la proposition introduite par l’utilisateur. 
Voir la page

 Quizz

Soit la variable message contenant le texte "Bienvenue dans l’univers de la BD !". Laquelle de ces commandes récupère uniquement le mot "Bienvenue" ?
 message.substr(0,8)
 message.substr(0,9)
 message.substr(0,10)
Toujours avec la même variable message, quel mot récupère la commande message.substr(31,2) ? (Conseil : faites le test dans un petit programme !)
 BD
 BD !
 la

F. Encore du travail sur le texte !

Il existe une grande quantité de commandes permettant de travailler sur une chaîne de caractères. Voici quelques exemples de ce qu'il est possible de réaliser avec celles-ci.
Il existe encore d’autres méthodes permettant de travailler sur une chaîne de caractères. Vous trouverez la liste de ces méthodes dans une référence du langage JavaScript en regardant à l’objet String() (qui signifie "chaîne de caractères").
http://devguru.com/content/technologies/javascript/home.html

Bases de javascript (suite) :



Aucun commentaire:

Enregistrer un commentaire

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.