Chantier d'Innovation Pédagogique

Chantier d'Innovation Pédagogique

JavaScript

Chapitre 4 : Programmer en JavaScript

(10heures  1ère TI)

Par NDJO'O Pierre Anicet

IPR/INFO/OUEST


Initier l'élève à la programmation en JavaScript. Le professeur évitera d'entrer dans les subtilités de ce langage. . L'élève sera capable d'écrire des scripts

 

Introduction :

JavaScript est un langage de programmation complètement lié au langage HTML. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript.  

C'est le navigateur qui interprète le code HTML et JavaScript.

     JavaScript est un langage objet et événementiel (ces deux notions vous seront explicitées dans le supérieur). Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le   visiteur (passage de souris, clic, saisie clavier, etc...)

I- Intégration du code JavaScript dans une page HTML

Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript : dans le corps de la page,       en entête de page,    dans un événement d'un objet de la page.

a)      La structure classique d'une page HTML contenant du JavaScript est la suivante :

 

       <HTML>

                     <HEAD>

                     <TITLE>Titre de page</TITLE>

                   <SCRIPT language="JavaScript"> Code javascript  </SCRIPT>

                     </HEAD>

                     <BODY>

                         <SCRIPT type="text/JavaScript">

Code javascript

                         </SCRIPT>

                     </BODY>

        </HTML>

Il est aussi possible de placer votre code dans un fichier Javascript, comportant l’extension « .js ». Ensuite, il faut l’insérer dans la page HTML ave la balise <script>.  Ne pas oublier il est préférable de placer le fichier JS dans la même dossier que la page.

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

II- Déclaration de variables :

JavaScript utilise l'instruction var pour la déclaration.

Toute nouvelle variable peut être initialisée. On peut également déclarer une nouvelle variable en lui affectant une valeur sans la précéder du mot clé var.

Exemple : var Numero = 12; ou encore: Numrero = 12 ;

  Pour déclarer une variable basique, c'est-à-dire de type entier, numérique, chaîne de caractères, etc, il ne faut pas déclarer le type. Le navigateur le détecte.

Il existe 5 types de variables en Javascript :

  • Les nombres : number
  • Les chaînes de caractères : string
  • Les booléens: boolean
  • Les objets : object
  • Les fonctions : function

 

 

EXEMPLES de déclaration de variables basiques  en JavaScript:

                     var prenom_visiteur="Pascal";

                     var nom_visiteur="Tagne";

                     var age_visiteur=16;

On remarque la présence du point virgule (;) à la fin de chaque instruction.  Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.

Une variable déjà déclarée s'utilise ensuite normalement :

 Exemple : var accueil="Bonjour " & prenom_visiteur & " " & nom_visiteur; équivaut à variable accueil prend la valeur :  Bonjour Pascal  Tagne

JavaScript intègre d'origine plusieurs types d'objets.   La déclaration se fait toujours avec var. Pour créer un objet, il faut utiliser le mot-clé new suivi du type d'objet.

ATTENTION, le respect des majuscules/minuscule est indispensable et source de   nombreuses erreurs.

Exemple création de la date du jour :

                     var date_jour=new Date();

 

 

 

Les mots réservés avec JavaScript :

LETTRE

 MOT-CLÉ

A

abstract

B

boolean / break / byte

C

case / catch / char / class / const / continue

D

default / do / double

E

else / extends

F

false / final / finally / float / for / function

G

goto

I

if / implements / import / in / instanceof / int / interface

L

long

N

native / new / null

P

package / private / protected / public

R

return

S

short / static / super / switch / synchronized

T

this / throw / throws / transient / true / try

V

var / void

W

while / with

 

Les mots de la liste ci-dessus  ne peuvent être utilisés pour des noms de fonctions et de variables.

III-  Les opérations :

a)        Opérateurs de calcul :  (x a la valeur 11)

 

 Signe

Nom

Signification

Exemple

Résultat

+

plus

addition

x + 3

14

-

moins

soustraction

x - 3

8

*

multiplié par

multiplication

x * 2

22

/

divisé par

division

x / 2

5.5

%

modulo

reste de la division par

x % 5

1

=

affectation

a la valeur

x = 5

5

 

  

b)                                            Opérateurs de comparaison :

Signe

Nom

Exemple

Résultat

==

Egal

x == 11

true

Inférieur

x < 11

false

<=

Inférieur ou égal

x <= 11

true

Supérieur

x > 11

false

>=

Supérieur ou égal

x >= 11

true

!=

Différent

x != 11

false

 

c)                                        Opérateurs associatifs : (x=11 et y=5)

 Signe

Description

Exemple

Signification

Résultat

+=

plus égal

x += y

x = x + y

16

-=

moins égal

x -= y

x = x - y

6

*=

multiplié égal

x *= y

x = x * y

55

/=

divisé égal

x /= y

x = x / y

2.2

 

d)                                               Les opérateurs logiques :

 Signe

Nom

Exemple

Signification

&&

et

(condition1) && (condition2)

condition1 et condition2

||

ou

(condition1) || (condition2)

condition1 ou condition2

 

e)                                          Opérateurs d’incrémentation : (x=5)

Signe

Description

Exemple

Signification

Résultat

x++

incrémentation

y = x++

y  = x + 1

6

x--

décrémentation

y= x--

y  = x - 1

4

 

IV-  Déclaration des fonctions et des instructions :

 

Les fonctions et instructions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page. Pour déclarer une fonction ou une instruction, on utilise le mot-clé "function", suivi de son nom et des éventuels paramètres.

Syntaxe :

                     function ma_fonction(param1, param2)

                             {

                             ....

                             }

Ou encore sans paramètre :

                     function mon_autre_fonction()

                             {

                             ....

                             }

 

  Le corps des fonctions et instructions est délimité par "{" et "}" dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements.

     Une fonction aura dans son corps une ou plusieurs instructions return qui permet de renvoyer une valeur ou un objet. L'instruction return n'est pas obligatoire; on a alors affaire à une instruction qui ne renvoie   pas de valeur (procédure).

    Les fonctions déclarées dans l'entête de la page peuvent être appelées elles-mêmes, de manière   itérative, dans d'autres fonctions et dans le corps de la page.

a)      Appel d’une function javascript:  

<A HREF="javascript:nom_fonction()">Cliquez ici</A>

 

b)        Manipulation

Javascript convertit automatiquement les entiers en chaîne de caractères on parle de transtypage automatique. Il est ainsi possible de concaténer des entiers avec des chaînes de caractères.

   Dans la fonction d’écriture document.write() , les données peuvent être séparés par des ‘,’ ou des ‘+’.

   On peut insérer des codes HTML dans les chaînes de caractères. Ces dernières seront interprétées comme de vraies balises.

Une fonction peut retourner une valeur. Il suffit alors de placer le mot-clé return suivi de la valeur ou de la variable à retourner.

Exemple :

function cube(nb) { //Définition de la fonction
var c = nb*nb*nb ;
return c;             //Retour du cube du paramètre
}

var x = cube(5) ; // appel avec paramètre

document.write (x) ; //affichage

toute variable déclarée à l’extérieur d’une fonction ou déclarée à l’intérieur sans le mot clé var sera dite variable globale. Celle déclarée dans la fonction avec le mot clé var est dite locale.

 

V-  Structure d’un programme JavaScript

Le JavaScript a une structure de programmation proche du langage C,  il a :

      • Les commentaires
      • Le groupement d'instructions
      • Les tests conditionnels
      • Les structures de boucle

 

a)      Ecrire un commentaire

Le commentaire sur une ligne par //

Exemple : var age=25; // Ceci est en commentaire

Commentaire sur plusieurs lignes : par /* et terminé par */

Exemple :  /* Ceci est en commentaire sur des lignes  */

 

b)        Grouper des instructions

Les instructions sont regroupées par les accolades { et }. Dans un script, il doit y avoir autant d'accolades ouvertes que d'accolades fermées.

Le groupement d'instructions est utile. Il permet par exemple de regrouper les instructions d'une fonction.

Exemple :

                         function somme(a,b) {

                            var sum=a+b;

                            return sum;

                         }

  Cette fonction  retourne la somme de deux paramètres et a deux instructions.

 

VI-  Le test conditionnel

                      Test simple : si

                      L'instruction if permet de diriger l'exécution du script suivant le résultat d'un test. C’est le si vu en algorithmique.

                      Il y a 2 moyens d'utiliser if.

                      Si l'action à réaliser tient en une instruction(test simple) :

                         if (age<18) alert("Vous devez être majeur");

                      Ici, si l'âge du visiteur est inférieur à 18 ans, un message est affiché. Dans ce cas pas d’accolade à l’instruction.

                      Si l'action à réaliser tient en plusieurs instructions, on y met des accolades :

                         if (age<18) {

                            alert("Vous devez être majeur");

                            window.location="mineur.html";

                         }

Ici, si l'âge du visiteur est inférieur à 18 ans, un message est affiché et le visiteur est redirigé vers la

  Page mineur.html.

 

                      Test complet :  Si – Sinon

Syntaxe :

If (condition) {

   Instruction1

   }

else {

   Instruction2

   }

                      Reprenons notre dernier exemple :

                         if (age<18) {

                            alert("Vous devez être mineur");

                            window.location="mineur.html";

                         } else {

                            alert("Vous devez être majeur");

                            window.location="majeur.html";

                         }

   Ici, si le visiteur est mineur, il est redirigé vers mineur.html, sinon il est redirigé vers la page

     majeur.html.

 

la structure de test si peut aussi s’utiliser par la syntaxe suivante :

(condition) ? instruction 1 : instruction 2

Exemple :

x = prompt ("votre age?","age");

age = (x < 10)? “jeune pour la première” : “vieux pour la maternelle”;

alert ('vous êtes ' + age) ;  

c)         Les  boucles

 Le JavaScript reconnaît les boucles itératives et les boucles conditionnelles.

 Les boucles itératives: Une boucle itérative exécute un groupe d'instructions tant que le compteur d'itérations n'a pas atteint   une valeur donnée. Voici la syntaxe générale :

                         for(initialisation;condition;opération) {

                            // Vos instructions

                         }

  Initialisation permet d'initialiser la valeur du compteur.

   Condition teste si le compteur a atteint la valeur limite. Si condition est vraie, la boucle continue.

     Opération permet d'incrémenter le compteur à chaque passage de la boucle.

  Exemples concrets.

-     Faire une boucle pour i variant de 0 à 100 inclus par pas de 1

                         for (var i=0; i<=100; i=i+1)

-     Faire une boucle pour i variant de 10 à 0 inclus par pas de -1

                         for (var i=10; i>0; i=i-1)

-     Voici une application mathématique. Il s'agit de calculer la somme des nombres de 1 à N.

        Entrez N dans le champ texte :    

      La fonction qui calcule cette somme est déclarée par :

                         function somme(N) {

                            var sum=0;

                            for (var i=1; i<=N; i=i+1) {

                               sum=sum+i;

                            }

                            alert("Somme de 1 à "+N+" = "+sum);

                         }

 

         Astuces d'écriture :

      Le JavaScript a une syntaxe particulière pour les additions et soustractions.

       Ainsi, écrire a=a+1; est équivalent à a++;

        Et a=a-1; est équivalent à a--;

         Dans la même idée, on peut aussi remplacer a=a+5; par a+=5;

       Vous trouverez donc souvent les boucles for avec cette syntaxe :

         for(var i=0 ; i<100 ; i++)

d)      Les boucles conditionnelles

                      Il peut être utile de faire une boucle tant qu'une condition est vraie.

                      La boucle "tant que" est déclarée par while :

                         while (condition) {

                            // Les instructions de la boucle

                         }

Ici, tant que condition est vraie, la boucle est exécutée.

On peut imaginer de demander au visiteur de saisir un nombre supérieur à 100 et de recommencer tant que ce nombre n'est pas supérieur à 100.

 

                      Voici la fonction appelée par le bouton :

                         function demander() {

                            var nb=0;

                            while (nb<=100) {

                               nb=prompt("Entrez un nombre supérieur à 100");

                            }

                            alert("Merci !");

                         }

 Ici, la boucle est répétée tant que nb n'est pas supérieur à 100. Dès que la variable nb est plus grande que 100, on quitte la boucle et le message Merci est affiché.

 

Exercices :

    Couleur de fond adaptée à la bonne réponse : <html>

<head>

<title>exercice1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">

function change(q){

if (q==1) {document.bgColor="red";}

if (q==2) {document.bgColor="yellow";}

if (q==3) { window.location="victoire.html";}

if (q==4) {document.bgColor="purple";}

}

</script>

<style type="text/css">

<!--

.vert {  background-color: #00FF00}

.rouge {  background-color: #FF0000}

-->

</style></HEAD>

<BODY> <BR>

<FORM NAME=TestForm>

Q1 : Un entier A est repr&eacute;sent&eacute; en binaire par 10101010 et un

entier B par 01010101. Alors:

<br>

<INPUT NAME="Q1"  TYPE="radio" onClick="change(1)">

  <span id="c1" >

   A+B=127 en d&eacute;cimal</span>

   <BR>

   <INPUT NAME="Q1" TYPE="radio" onClick="change(2)">

   <span id="c2" > A=B+1 en d&eacute;cimal</span>

   <BR>

   <INPUT NAME="Q1" TYPE="radio" onClick="change(3)">

   <span id="c3" >  A+B=255 en d&eacute;cimal</span>

   <BR>

   <INPUT NAME="Q1" TYPE="radio" onClick="change(4)"> 

   <span id="c4" > A=B+11 en d&eacute;cimal</span>

<hr> </form> </body> </html>

 

Les boîtes de message

Alert()    Nous avons déjà utilisé cette méthode précédemment, sans savoir forcément ce qui en retournait. Il ne comporte qu’un texte informatif et un bouton « OK ».

Syntaxe :  alert (paramètres) ;

 

Paramètres :

  • Une chaîne de caractère
  • Une variable
  • Un enchaînement des deux, séparés par le signe "+"

 

Exemple :

 x = 25 ;

alert ('Le nombre est ' + x) ;

 

Prompt()  Il s’agit d’une boite d’invite, composée d’un texte, d’une zone de texte, d’un bouton « OK » et d’un bouton « Annuler ».

 

Syntaxe : variable = prompt ("texte", "valeur");

Paramètres :

  • Le texte à afficher dans la boite de message
  • La valeur par défaut à afficher dans la boite d’invite.

 

Exemple  :

x = prompt ('Votre prénom ?','prénom') ;

alert (x) ;

Confirm()   Il s’agit d’une boite de confirmation, composée d’un texte, d’un bouton « OK » et d’un bouton « Annuler ».

 

Syntaxe : variable = confirm ("texte");

Paramètre :

  • Le texte à afficher dans la boite de message

 

Exemple :

x = prompt ('Votre prénom ?','prénom') ;

y = confirm ('Votre prénom est bien ' + x + ‘ ?’) ;

 

VII-  NOTION D’OBJET

 

Un objet  en général  possède des caractéristiques et des compétences. On peut voir ces caractéristiques et utiliser les compétences. En informatique, un objet possède des variables et des fonctions, qui permettent de décrire son comportement. Ces variables sont appelées propriétés et ces fonctions sont appelées méthodes. De cette façon, on peut voir les propriétés et utiliser les méthodes.

Un objet est créé en utilisant une fonction spéciale, précédée du mot new. Cette fonction est appelée constructeur, et porte le nom de la classe. Un objet est appelé instance de la classe.

 

Syntaxe : var objet = new classe ();

Exemple : var montableau = new Array ();

Dans cet exemple, la variable montableau est une instance de la classe Array().

 

a)      Accéder aux propriétés et aux méthodes :

On accède aux propriétés et aux méthodes d’un objet en accolant l’objet et sa propriété avec l’opérateur « ».

Syntaxe : objet.propriété

                  objet.méthode()

 

Exemple : dans la classe des hommes, il y’a un homme appelé Paul, il est un objet de la classe des hommes.

Paul = new Homme () ; // création d’un objet Paul de la classe Homme

Paul.yeux = "bleus" ;

Paul.cheveux = "bruns" ;

Exemple: document.write ("Bonjour!");

L’objet document est intégré au langage, et sa méthode write() permet d’écrire dans la page courante.

b)      L’objet this :

Il existe un objet très utile en JavaScript  objet : this. Même s’il sera plus utile en programmation objet (au supérieur), lorsque vous créerez vos classes. Il s’agit d’un objet qui représente l’objet en cours. Il possède alors les propriétés et les méthodes de l’objet.

 

VIII       Les formulaires

Pour les éléments du formulaire, Voir formulaires avec HTML.

-     Comment accéder aux éléments du formulaire ?

Syntaxe : document.formulaire.élément.propriété

Exemple :

<html>

<head>

<script language = "Javascript">

function fou() {  document.form1.texte.value="voici du texte";  }

</script>

</head>

<body onLoad="fou();">

<form name="form1">

<input type="text" name="texte" value="">

</form>

</body>

</html>

-          Les événements

Les événements sont l’intérêt du JavaScript  en matière de programmation Web. Ils donnent une interactivité à la page que vous consultez, ce qui n’existe pas avec le HTML.  On nomme évènement le mot Event, et gestionnaire d’événement le mot-clé onEvent.

Les évènements sont indiqués dans la balise, d’un formulaire, le plus souvent. Ils apparaissent comme un paramètre supplémentaire et suivent une syntaxe particulière.

Syntaxe : <balise onEvent=”code">

  • Le code inséré entre guillemets fait le plus souvent référence à une fonction définie dans les balises <head>…</head>. Il peut cependant s’agir d’instructions directement.

Plusieurs gestionnaires d’évènements peuvent être placés dans la même balise. Certaines balises n’appartenant pas à un formulaire peuvent supporter des gestionnaires d’évènement.

 

Exemple:

<a href=”http://www.google.fr” onClick=”alert(‘vous avez cliqué!’);” onMouseOver=”alert(‘Attention !...’) ;”> click?</a>

onClick  s’utilise avec les balises suivantes : <input type="button">, <input type="checkbox">, <input type="radio">, <input type="reset">, <input type="submit">, <a href..>

exemple :

<input type=”button” onClick=”alert(‘vous avez cliqué sur le bouton’) ;">

onLoad : s’utilise avec les balises : <body>, <frameset> pendant le chargement de la page.

Exemple : <body onLoad=”alert(‘la page est chargée !’) ;">

UnLoad s’utilise lorsque vous quittez la page, avec les balises : <body>, <frameset>

Exemple :  <body onUnLoad=”alert(‘Vous quittez la page !’) ;">

 

onError :  Lorsque le chargement d’une page ou d’un image s’interrompt en erreur. Dans les balises  <body>, <frameset>, <img>

Exemple :

 <img src="pix.gif" onError=”alert(‘Erreur de chargement !’) ;">

onAbort Lorsque vous interrompez le chargement d’une image. Avec la balise <img>

Exemple :

<img src="pix.gif" onAbort=”alert(‘Vous avez interrompu le chargement de l’image !’) ;">

onMouseOver : Lorsque vous survolez un lien ou une zone d’image activable. Un zone d’image activable est une partie d’image qui a été transformée en lien. Je ne reviendrai pas sur ce sujet, ce n’est pas l’objet de ce cours. S’utilise avec <a href…>, <area href…>

Exemple :

<a href="http://www.google.fr" onMouseOver=”alert(‘Pour aller sur google.fr, cliquer ici’) ;">http://www.google.fr</a>

onMouseOut : Lorsque vous sortez de la zone de survol d’un lien ou d’une zone d’image activable. Avec les balises <a href…>, <area href…>

Exemple:

<a href="http://www.google.fr" onMouseOut=”alert(‘Vous ne voulez pas y aller ?’) ;">http://www.google.fr</a>

OnFocus : Lorsque vous activer un contrôle texte ou sélection. S’utilise avec : <input type="text">, <select>, <textarea>, <input type="password">

Exemple :

<input type="text" value="votre nom" name=”nom” onFocus=”alert(‘Ecrivez votre nom ici’) ;">

onBlur : Lorsque vous quitter un contrôle texte ou sélection.

Exemple:

<input type="text" value="votre nom" name=”nom” onBlur=”alert(‘Vous n’avez rien oublié ?’) ;">

onChange : Lorsque la valeur d’un texte ou d’une option change dans un formulaire. Si vous cliquez dans la zone de texte mais que vous ne touchez pas au texte, rien ne se produit. Avec les balises : <input type="text">, <select>, <textarea>, <input type="password">

Exemple:

<input type="text" value="votre nom" name=”nom” onChange=”alert(‘Vous avez changé votre nom ??’) ;">

onSelect : Lorsque vous sélectionnez du texte dans un champ de texte. Avec les balises : <input type="text">, <textarea>

 

Exemple :

<input type="text" value="votre nom" name=”nom” onSelect=”alert(‘Vous avez sélectionné un champ’) ;">

onSubmit : Lorsque vous cliquez sur un bouton « submit » d’un formulaire de type « post » ou « get ». s’utilise avec  la balise <input type="submit">

Exemple:

<input type="submit" value="Envoyer" name=”envoi” onSubmit=”alert(‘Message posté !’) ;">.

onReset :  Lorsque vous sélectionnez un champ de texte. S’utilise  avec <input type="reset">

Exemple:

<input type="reset" value="Effacer" name=”effacer” onSubmit=”alert(‘On efface tout !’) ;">

L’utilisation de l’objet document :

Exemple: Voici un exemple parmi tant d’autres  de ce que pourrait être un formulaire interactif, avec tous les évènements auxquels on peut penser.

 

<HTML>

<HEAD>

<TITLE>objet document</TITLE>

<script language="Javascript">

var TestLogin = 0; //test pour le login

function ChangeLog() {

                TestLogin ++; //incrémente le test         //si le login a été changé plus d'une fois

if (TestLogin > 1) {  

                               alert("Vous changez de login? Décidez-vous!");                         }              }

function VerifPass () {

// si les deux password sont différents

                if (document.form1.pass1.value != document.form1.pass2.value) {                      alert("Vous avez entré deux password différents ! Vérifiez les deux.");                          }              }

function VerifMail () {

                //confirmation du mail

var test = confirm ("Votre mail est bien : " + document.form1.mail.value + " ?");

                if (test == false) { //si l'internaute ne confirme pas

                               alert("N'oubliez pas de changer votre mail!");

                               }

                }

</script>

</HEAD>

<BODY>

<form name="form1">

  <center>Formulaire d'inscription sur notre site</center><br/>

  Login : <input type="text" name="login" onChange="ChangeLog();" value="login"><br/>

  Password : <input type="password" name="pass1"><br/>

  Password (vérification) : <input type="password" name="pass2" onBlur="VerifPass();"><br/>

  Adresse e-mail : <input type="text" name="mail" onBlur="VerifMail();" value="@"><br/>

  Vous voulez recevoir la newsletter? <input type="radio" name="news" value="yes">Oui <input type="radio" name="news" value="no" onClick="alert('Tant pis pour vous!')">Non<br/>

  <input type="submit" name="sub" value="Envoi"> <input type="reset" name="reset" value="Effacer">

</form>

</BODY>

</HTML>

 

Son principal inconvénient est le fait qu’il ne dispose pas de débogueur, la détection des erreurs en devient fastidieuse. Ensuite, il le code est accessible, puisque contenu dans la page envoyée au navigateur.



06/12/2011
3 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 259 autres membres