UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  2. JavaScript (client-side), introduction

2. JavaScript (client-side), introduction

2.1 Origine

2.2 Utilisation principale de JavaScript

2.3 Versions

2.4 Ressources et outils de développement

A. Outils de développement

            JavaScript:
           JavaScript:alert("salut")

B. Tutoriels on-line

C. Livres

D. Pointeurs

2.5 Caractéristiques du langage JavaScript

A. Caractéristiques clefs:

Les éléments dans cette section ne sont qu'indicatifs !

B. Les objets

C. Instructions liées aux objets

   objectName.propertyName
   objectName.methodName(arguments...)

Méthodes (fonctions) ou propriétés (variables attachées aux objets) vous permettent de traiter une page HTML (essentiellement des formulaires), créer des boites de dialogues, de nouvelles pages, faire du DHTML etc.

   objectName = new objectType ( param1 [,param2] ...[,paramN] )
   "this" réfère à l'objet courrant.
   with (object){
             statements
   }

Exemple 2-1: l'objet "document":

Grace à ces structures et méthodes informatiques vous pouvez créer dynamiquement des documents ou encore obtenir qq informations sur le contenu d'un document.

Exercice 1: Trouvez la documentation de l'objet "document"

Etape 1.a: voir: http://tecfa.unige.ch/guides/js/pointers.html#man

Etape 1.b: sélectionner un manuel de référence Javascript

Etape 1.c: chercher ....

D. La fonction

         function <nom> (<paramètre, ......) {
            <instructions >
        }

 

E. Variables

    var number = 10;

F. Opérateurs arithmétiques et logiques

G. Instructions de contrôle

   if (condition) {
             statements1 
   [ } else {
             statements2 ]
   }
   for ([initial-expression]; [condition]; [increment-expression]) {
      statements
   }
   while (condition) {
             statements
   }
   switch (expression){
      case label : 
         statement;
         break;
      case label : 
         statement;
         break;
      ...
      default : statement;
   }

2.6 Insertion de code JavaScript dans une page HTML

Il existe plusieurs possibilités:

A. Insertion dans un fichier *.html

<script language=JavaScript>

Exemple 2-2: Bonjour avec Javascript

    <HEAD>
    <TITLE>Hello World avec JavaScript (18-Nov-1997)</TITLE>

    <script language=JavaScript>
      // ICI on definit une fonction JavaScript
      function sayhello() {
        alert("Bonjour cher lecteur !!! ")
      }
    </script>
    </HEAD>
    <BODY>

B. Autre possibilités:

       <SCRIPT SRC="mon_programme.js">
       ...
       </SCRIPT>

C. Gestion de browsers qui ne comprennent pas JavaScript

Cacher un script:

<SCRIPT>
<!-- Begin to hide script contents from old browsers.

..... expressions JavaScript...

// End the hiding here. -->
</SCRIPT>

Afficher un contenu alternatif pour ces browsers: <noscript>


<NOSCRIPT>

<B>This page uses JavaScript, so you need to get Netscape Navigator 2.0
or later!
<BR>
<A HREF="http://home.netscape.com/comprod/mirror/index.html">
<IMG SRC="NSNow.gif"></A>
If you are using Navigator 2.0 or later, and you see this message,
you should enable JavaScript by on the Advanced page of the 
Preferences dialog box.

</NOSCRIPT>

Gérer différentes versions de JavaScript:

 

D. Commentaires:

    <script language=JavaScript>
      // CECI EST UN COMMENTAIRE
      // faites des commentaires pour documenter votre code !

2.7 Utilisation de code JavaScript

une fonction JavaScript est déclenchée par 2 moyens:

A. Appel de fonction dans le <body> d'une page HTML

      <script>
       // ICI on apelle la fonction
      sayhello()
      </script>

 

B. Appel de fonction par un "événement"

la notion d'événement en bref:

Exemple 2-3: Hello avec un événement Javascript

      <FORM METHOD="post">
      <INPUT TYPE="button" VALUE="Clickez ICI" onClick="sayhello()">
      </form>

 

UP PREVIOUS NEXT -- TIE