PROGRAMMER LES PAGES WEB DYNAMIQUES.
Présenté par : MESSI Guy Richard
Introduction.
Contexte :
Depuis février 2011 au Cameroun, un vent de révolution souffle sur l’informatique. Tout d’abord, elle est devenue une matière certificative, ensuite l’ouverture d’une série TI (technologies de l’information) et tout récemment, un nouveau programme. Ce dernier intervient même dans les classes terminales de l’enseignement général.
Difficulté :
Dans ces classes, les enseignants se trouvent confronter à certaines difficultés d’ordre didactique qui découlent logiquement de l’introduction de nouvelles notions telles que la création des sites web dynamiques et la programmation en javascript.
Pendant nos visites dans les établissements les enseignants ont avoué qu’ils éprouvent des difficultés à enseigner la programmation en JavaScript.
Face à cet obstacle, l’on se pose donc les questions suivantes : comment enseigner la programmation en javascript en classe de terminale ? Quelle est la méthode d’enseignement à adopter ? Est-il possible de faire des suggestions pour mieux faire comprendre notre cours ? Si oui, lesquelles ?
Solution :
Pour remédier à ces manquements, nous proposons d’élaborer un guide qui permettra aux d’améliorer, faciliter l’enseignement de JavaScript.
Plan :
Dans cet exposé, il ne s’agit pas de faire un cours magistral sur le langage javascript, mais présenter la didactique de l’enseignement de javascript. Cet exposé traitera de l’amorçage de la programmation en javascript en classe de terminale d’une part et les méthodes d’enseignement de quelques leçons d’autre part.
PARTIE I :
AMORÇAGE DE
EN TERMINALE.
A la question comment débuter le chapitre sur la programmation en javascript en terminale, nous dirons qu’il est normal de commencer par la vérification des prés requis, la présentation de javascript et les suggestions.
I. Implantation du cours sur le langage JavaScript.
Il s’agit de l’introduction de javascript en classe de terminale. Elle passe par la vérification des prés requis, l’exécution de quelques scripts, la présentation de quelques scripts et la présentation de JavaScript.
I.1 La vérification des prés requis.
Avant la première leçon, il serait sans doute nécessaire de vérifier les connaissances antérieures que doivent réunir les élèves avant d’aborder le javascript. Il s’agit pour l’enseignant de s’assurer que les élèves peuvent mettre en pratique les connaissances acquises en classe de première sur l’algorithmique et la « programmation » des pages web statiques.
C’est donc après révision, que l’enseignant peut présenter le langage de programmation javascript.
I.2 Exécution de quelques scripts.
La présentation de javascript doit être faite de manière à susciter l’intérêt des élèves. L’on se pose donc la question de savoir comment enseigner javascript en suscitant l’intérêt des élèves ?
L’enseignant doit commencer par une projection de quelques pages web intégrant le langage javascript. Ce qui attirera sans doute l’attention et l’intérêt des élèves. Il leur expliquera par la suite que ce qui venait d’être présenté n’est qu’une petite illustration de ce que peut faire le langage de programmation appelé javascript. Et leur dire qu’ils seront capable eux aussi de programmer en ce langage s’ils suivent réellement les cours qui leur seront proposés.
I.3 Présentation de javascript.
L’enseignant doit amener les élèves à répondre à la question : Qu’est ce que javascript ?
Il s’agit de votre première leçon. Elle vise à définir : javascript, le script, à présenter l’avantage qu’on à insérer javascript dans une page web, et exposer ses limites.
a) Définitions.
Le Javascript est un langage de programmation de scripts incorporés dans un document HTML. Ce langage a pour but de permettre l’interactivité entre des pages web et l’utilisateur. Il s’exécute coté client.
C’est un langage non compilé interprété par un navigateur.
Le script. Il existe plusieurs scripts écrits dans plusieurs langages de programmation. En javascript, le script peut être compris comme étant un bout de programme inséré dans un document HTML.
b) Avantage et limites du langage JavaScript.
L'enseigner doit amener ses élèves à connaitre l' avantage qu'on a à intégrer javascript dans une page HTML ainsi que ses inconvénients.
II. Suggestions pour la bonne compréhension du langage Javascript.
Pour la suite de ce chapitre, et pour ne pas rendre la compréhension délicate à nos élèves, l’enseignant doit au préalable leur faire comprendre certaines notions. Il s’agit des notions qui ne sont pas prévues dans le programme officiel, mais qui sont d’une importance capitale pour la compréhension et la manipulation du JavaScript. Il s’agit :
- Du fonctionnement du langage javascript ;
- Des caractéristiques de javascript ;
- De la notion d’objet ;
- Des méthodes ;
- Et de l’étude de quelques opérateurs.
II.1 Le fonctionnement de JavaScript.
L’enseignant doit veiller à ce que le fonctionnement de javascript soit compris.
Le fonctionnement est le suivant :
- Le client demande un document HTML au serveur ;
- Le serveur envoie ce document au client ;
- Le document possède un script ;
- Le navigateur interprète le script.
Schéma synthétisant le fonctionnement de JavaScript.
II.2 Les caractéristiques de javascript.
- Le code s’exécute coté client : Le code est directement inclus dans la page web et s’exécute dans la machine du client ;
- C’est un langage peu typé : le contenu d’une variable peut successivement changer de type de donnée (numérique, chaine de caractères, …) ;
- La sensibilité à la casse : JavaScript fait la différence entre les majuscules et les minuscules, contrairement à HTML ;
- Langage événementiel : réaction à certaines actions du client (action des boutons de la souris, ouverture d’une page, …) ;
- Langage orientée objet : le javascript consiste en la manipulation d’objets. Exemple : contenu de la page qui contient des objets tels que les images, les paragraphes.
Ainsi, la manipulation d’une page web via un script javascript consiste en la manipulation d’objets.
- Javascript est un langage séquentiel et procédural : parce qu’il exécute les instructions par séquence dans la sens de lecture de la page web. Certaines parties du programme sont placées dans les procédures (appelées fonctions) afin d’être utilisées à plusieurs endroits du programme.
II.3 La notion d’objet.
Dans le programme officiel de la classe de terminale, aucun objectif ne permet aux élèves de comprendre la notion d’objet. Il revient donc à l’enseignant de trouver le moyen et le temps de le faire. A la fin de cet enseignant l’élève doit être capable de répondre aux interrogations suivantes :
- Pourquoi dit on que javascript est un langage orienté objet ?
- Quels sont les objets de JavaScript ?
JavaScript est un langage de programmation orienté objet parce qu’il ne manipule que les objets. En fait, pour bien comprendre javascript, tout doit être imaginé en termes d’objets. Ainsi :
- La fenêtre du navigateur (appelée « window ») est un objet. « window » contient des sous objets crées automatiquement dès l’ouverture du navigateur :
· document : donne le contenu de la page web ;
· location : donne les informations sur l’adresse actuelle du navigateur ;
· history : donne l’historique de navigation du client.
L’accès au sous objets :
On accédera à ces sous objets en les faisant précéder de l’objet parent qui est window, et en les séparant d’un point.
Exemple : window.document window.location window.history
L’objet document possède également des objets (sous objets) tels que :
- forms : représente l’ensemble des formulaires présents dans la page.
- images : représente des images présents sur la page.
Accès à ces objets.
Exemple : window.document.forms window.document.images
NB :
window est l’objet global, il est la référence de toute chose dans Javascript, ainsi le nommer devient facultatif.
Exemple : Pour accéder aux formulaires on peut tout simplement écrire :
document.forms au lieu de window.document.forms
La hiérarchie des objets dans le langage de programmation JavaScript doit être présentée aux élèves.
L’enseignant doit également amener les élèves à maitriser la notion de méthode.
II.4 Les méthodes :
Chaque objet a des actions propres qu’on peut lui faire exécuter : ce sont des méthodes. Les méthodes sont des fonctions propres à tout objet et permettant de le manipuler.
Exemple :
Pour l’objet window ses méthodes sont par exemple :
- moveBy(…) : permettant de déplacer la fenêtre du navigateur ;
- alert( ) : qui permet d’afficher un avertissement dans une boite de dialogue.
Pour l’objet «document» l’une de ses méthodes est :
write() : qui permet d’écrire ou modifier le contenu de l’objet document.
La syntaxe est : document.write() ;
Les objets sont crées dynamiquement en fonction des balises rencontrées pendant le chargement de la page.
II.5 Etude de quelques opérateurs.
Les opérateurs sont des symboles qui permettent de manipuler des variables, en effectuant des opérations ou des évaluations. On distingue plusieurs types d'opérateurs. Dans le cadre de ce cours, il est mieux de se limiter aux opérateurs de calcul, opérateurs d’affectation, opérateurs d’incrémentation, opérateurs de comparaison, opérateurs logiques et opérateurs de manipulation des chaînes de caractères.
Une fois ces connaissances acquises, l’enseignant peut maintenant continuer son cours comme le veut le livre programme d’informatique.
PARTIE II :
MÉTHODES D’ENSEIGNEMENT DE QUELQUES LEÇONS SUR
I. ENSEIGNER
Dans cette leçon, l’enseignant doit faire comprendre aux élèves que le langage javascript a des règles qui lui sont propres. Et que pour écrire un programme en JavaScript, l’on doit impérativement l’insérer dans le document écrit en HTML les balises :
<script type="text/javascript"> et </script> ou
<script language=’’javascript’’> et </script>.
N.B :
La balise <script language=’’javascript’’> est mieux d’être utilisée car est lue par les anciennes et nouvelles versions de navigateurs. Alors que <script type="text/javascript"> n’est lu que par les nouvelles versions de navigateurs.
Leur dire également que ce code peut s’insérer :
- Soit dans un fichier extérieur. Ne sera pas étudié.
- Soit directement dans la page web écrite en HTML.
Nous devons expliquer le fonctionnement du script selon que le programme est inséré dans l’entête ou dans le corps. Faites même un schéma au tableau qui explique que dans l’entête le code sera chargé avant l’affichage de la page, et dans le corps du document, le code sera chargé au fur à mesure de l’apparition de la fenêtre du navigateur à l’écran.
L’esprit d’initiative :
L’enseignant ne doit pas hésiter à prendre des initiatives louables pour la bonne marche de son cours. Par exemple sachant que javascript est sensible à la casse, vous pouvez décider avec vos élèves de tout écrire en minuscule et sans accents pour éviter tout dysfonctionnement.
II. ENSEIGNER LE CHANGEMENT DES TYPES DE VARIABLES.
La leçon étant pratique, amener les élèves en salle de travaux pratiques. Dites leur qu’il s’agit tout simplement de convertir les types de variables.
L’enseignant doit leur faire comprendre que JavaScript a dans son noyau certaines fonctions prédéfinies qui sont : isNaN(), eval(), parseInt() et parseFloat(). Après cette énumération, expliquez brièvement leurs rôles. Par la suite, demandez aux élèves celles qui, selon eux, leur permettra d’atteindre l’objectif du cours. La réponse sera : les fonctions parseInt() et parseFloat().
1. Utilisation de la fonction parseInt() ;
L’enseignant peut maintenant leur faire exécuter les exemples ci-dessous. En affichant les résultats sur la fenêtre du navigateur avec la méthode write(). Commencer par des exemples simples.
Exemple 1 :
|
Exemple 2 :
|
Exemple 3 :
|
<script language="javascript">
var a=1.5;
document.write(parseInt(a));
</script>
|
<script language="javascript">
var a = "F" ;
document.write(parseInt(a)) ;
</script>
|
<script language="javascript">
var a = F;
document.write(parseInt(a, 16)) ;
</script>
|
// affichera 1
|
// affichera NaN
|
//affichera 15
|
Une fois cela fait, demandez à chaque élève ou groupe d’élèves ce qu’il(s) peut dire sur cette fonction. Après cela, l’enseignant et les élèves peuvent donc faire la synthèse (résumé) et donner la syntaxe d’utilisation de cette fonction :
La fonction parseInt() convertit une variable passée en paramètre (chaîne de caractère ou un nombre dans la base précisée en second paramètre) en un nombre entier. Elle retourne NaN (Not a Number) lorsque la valeur de la variable n’est pas un nombre.
Sa syntaxe est :
Var nomdelavariable= valeur ;
parseInt (variable [, base]);
Vous ferez de même avec la fonction parseFloat() qui permet de convertir une chaine en nombre à virgule flottante si elle commence par un chiffre. Elle retourne NaN (Not a Number) si cela n’est pas possible.
III. ENSEIGNER LES STRUCTURES DE CONTRÔLE.
C’est la leçon 4 de la progression harmonisée. Elle est intitulée : Utilisation des instructions.
La nouvelle approche pédagogique est celle qui est préconisée actuellement. Elle place l’élève au centre de l’apprentissage. Mais vous conviendrez avec moi que celle-ci ne peut pas s’appliquer dans toutes les leçons et du début à la fin. Si possible elle la rendra très longue.
La leçon sur les instructions dans JavaScript, à voir ses objectifs ne peut pas être dispensé en deux(2) heures en utilisant la méthode active.
L’enseignant pour atteindre son objectif peut dispenser sa leçon en deux(2) séances.
Séance N° 1 :
Ce cours est purement théorique. Les instructions à étudier sont : if…, if…else, while…, do…while, for… et new.
Regroupez toutes ces instructions en trois groupes :
I. Les instructions de contrôle.
1. L’alternative réduite : l’instruction «if…»
2. L’alternative complète : l’instruction «if…else…»
II. Les boucles.
1. L’instruction « while….»
2. L’instruction « do…while… »
3. L’instruction « for… »
III. Le constructeur « new ».
NB :
« new » n’est pas une instruction, mais un constructeur.
Pour chaque instruction, l’enseignant doit :
- Préciser à quel moment et comment l’utiliser.
- Préciser sa syntaxe.
- Expliquer son fonctionnement.
- Et donner au moins un exemple.
La séance N° 2 :
Vous pourrez la dispenser en une (1) heure seulement.
Il s’agit dans ce cours d’amener les élèves en salle d’informatique dans le but de vérifier le fonctionnement des instructions étudiées pendant le cours théorique.
Compte tenu des effectifs pléthoriques, l’enseignant peut lui-même déjà enregistrer les fichiers de chaque instruction dans les ordinateurs. Les élèves n’auront qu’à vérifier l’exactitude du code et à passer à l’exécution.
IV. ENSEIGNER LES FONCTIONS EN JAVASCRIPT.
L’enseignant peut introduire cette leçon par la vérification des prés requis. Il peut donc poser les questions suivantes :
- Qu’est ce qu’une fonction en algorithmique ?
- Qu’est ce qu’une procédure ?
- Comment écrit on une fonction en algorithmique ?
- Comment fait-on l’appel d’une fonction en algorithmique ?
- Quelles sont les fonctions prédéfinies dans javascript ? (voir changement de types de variables).
L’enseignant construira son cours autour des réponses à ces questions.
Lorsqu’il aura amené les élèves à trouver des réponses satisfaisantes, il leur dira que bien que javascript ayant déjà des fonctions prédéfinies (telles que parseInt(), parseFloat(), eval() et isNaN()), il est possible d’en créer d’autres. Et que la différence n’est pas grande avec la création des fonctions en algorithmique. La différence repose dans l’utilisation des mots clés « function » et « return », la précision des types de variables reste facultative.
Les élèves sous le guide de l’enseignant trouveront la syntaxe de création de la fonction en Javascript. Illustrez par la ensuite cette syntaxe (c'est-à-dire prenez un exemple).
Cette illustration doit ensuite être testée sur ordinateurs en utilisant la méthode write (document.write() ;). Testez deux (2) ou trois (3) fonctions si possibles.
Exemple :
<script language="JavaScript">
var a=12;
var b=3;
function multiplication(a,b){
return a*b;}
document.write(multiplication(a,b));
</script>
// Affichera 36
V. ENSEIGNER
Dans cette leçon, l’enseignant peut d’abord se contenter de :
- Présenter les types de fenêtres de dialogue et donner leurs rôles ;
- Présenter les types de boutons.
Ceci parce ayant déjà perdu du temps à combler les manquements du programme, il serait mieux que l’insertion des boutons et la création des fenêtres de dialogue ne fassent plus l’objet d’un cours particulier. L’enseignant doit écrire un programme qui fera apparaître une fenêtre de dialogue lorsque surviendra un événement sur le bouton crée.
La fonction « multiplication() » que l’on a exécuté avec la méthode «write » (document.write() ;) dans la leçon précédente, peut cette fois ci s’exécuter grâce à un bouton crée et qui réagira à un événement.
Exemple 1 :
<html><head><title>création d’un bouton qui réagit à un événement</title>
<script language="JavaScript">
var a=12;
var b=3;
function multiplication(a,b){
return a*b;}
</script>
</head>
<body>
<form>
<input type="button" value="calculer" onClick='document.write(multiplication(a,b));'>
</form></body></html>
// Affichera 36 sur la fenêtre du navigateur, lorsqu’on aura cliqué sur le bouton « calculer ».
Exemple 2 :
<html><head><title>Une fenêtre de dialogue réagissantt à un événement sur le bouton</title>
<script language="JavaScript">
var a=12;
var b=3;
function multiplication(a,b){
return a*b;}
</script></head><body>
<form>
<input type="button" value="Clic" onClick='alert(multiplication(a,b));'>
</form></body></html>
// Affichera 36 sur la fenêtre de dialogue, lorsqu’on aura cliqué sur le bouton « Clic ».
L’enseignant et ses élèves peuvent maintenant donner la syntaxe de création de boutons et de la fenêtre de dialogue.
Il en sera de même avec l’insertion des images.
Pour terminer sa leçon, l’enseignant doit présenter la liste des événements aux élèves. Ces derniers l’utiliseront dans quelques exercices à faire à la maison.
Toutes les connaissances réunies par les élèves dans ce chapitre doivent être mises ensemble pour atteindre une certaine compétence qui est la réalisation d’un site web dynamique. L’enseignant doit donc veiller dans cette partie du programme à créer un site web dynamique qui intègrera d’abord les connaissances acquises en classe.
Conclusion :
Au regard de ce qui précède chers collègues, nous pensons que vous êtes mieux armés pour affronter le langage JavaScript dans l’enseignement secondaire sur le plan didactique. Il revient donc à chacun d’entre nous de trouver un moyen pour adapter les enseignements reçus à son contexte.
