Contenu

Introduction

Le javascript est un language de programmation très courant dans la production web. Il a été entièrement conçu pour être intégré au HTML, et il porte très mal son nom! Souvent on le confond avec le language Java qui est un language beaucoup plus complet, et aux applications multiples.

Le javascript est un language interprété, c'est-à-dire qu'il n'est pas compilé en un programme executable, mais directement lu et executé tel quel.

Le javascript est un language de programmation côté client: c'est la machine du visiteur du site qui execute le programme et non le serveur comme dans le cas du PHP. En fait, le programme javascript est executé au-travers du browser. Certaines fonctionnalités très utiles sont déjà intégrées, comme la possibilité d'ouvrir une nouvelle fenêtre du browser, de la placer de manière spécifique, contrôler les indications d'un formulaire, changer une image au vol (rollover), etc.... en fait on peut quasiment tout contrôler du côté client avec Javascript.

Un des grands défaut du Javascript est le fait qu'il ait été développé différement par les différentes compagnies de logiciels, et de ce fait, il n'est pas toujours interprété de la même manière par les différents browsers. Il faut parfois coder la même fonction plusieurs fois pour les différents browsers, et même prévoir une fonction spécifique pour le cas des anciens browsers qui n'intérpréteraient tout simplement pas le javascript!!

Finalement, le javascript est un language pseudo-objet. Il a la synthaxe d'un language OOP (Object Oriented Programmation), mais pas toutes les fonctionnalités. La synthaxe des OOP est un vaste sujet que nous aborderont ici simplement par les exemples de javascript. En deux mots, c'est une façon de coder un programme, avec des variables (objets) auquels on donne des propriétés et des méthodes, comme dans le monde réel. Par exemple, une voiture a entre autre les propriété couleur et puissance et les méthodes accélerer et allumer les phares.

Références

Insertion d'un Javascript

Un javascript peut s'insérer dans le HTML de deux manières principalement:

  1. Avec des tags <script type="text/javascript"></script> comme vous pouvez le voir en observant le code source des exemples.
    Pour éviter des confusions si la page est vue par un ancien browser, on ajouter encore des symboles de commentaires HTML, ce qui donne:

    <script type="text/javascript">
    <!--

    // le script vient ici

    // -->
    </script>


  2. On peut actionner une fonction javascript avec un click de souris en le mettant dans un lien HTML avec le tag
    <a href="javascript:fonction()">...</a>
    La fonction peut être une fonction intégrée ou une fonction définie par un autre script.
    Par exemple:

    HTML
    Résultat
    <a href="javascript:window.alert('coucou')">
    coucou
    </a>    		 coucou

Synthaxe

Une instruction est une ligne de symboles qui se termine par un ';', par exemple:

Javascript
Résultat
b = "hello world! ";
document.write(b);

Remarque:
dans tous les exemples de ce documents, j'utiliserais un tableau à deux colonnes, avec à gauche le code du javascript, et à droite le résultat du javascript.

La fonction document.write() sert à l'affichage du résultat.

Les commentaires sont des lignes de symboles qui ne sont pas interprétées pas le browser, mais qui sont très utiles aux humains pour comprendre le code! Pour indiquer une ligne de commentaires, il suffit de commencer la ligne par '//', par exemple:

Javascript
Résultat
// b est un mot de bienvenue
b = "hello world! ";
document.write(b);

Les variables sont employées pour stocker de l'information dans des scripts. Les variables ne sont pas typées, c'eat-à-dire qu'on peut utiliser la même variable pour stocker un nombre puis plus tard une chaîne de caractères, sans causer d'erreur.
On peut déclarer une variable sans lui attribuer de valeur avec l'instruction var ou alors lui attribuer directement une valeur avec '='. Par exemple:

Javascript
Résultat
// on créer une variable vide
var a;
document.write(a);
// on crée une variable b
//et on lui attribue une valeur
b = "hello world! ";
document.write(b);

Les type de données:

Type
Exemples
Chaîne de caractères "bonjour"
"Hello World! 1,2,3 Sunshine!"
Nombres 12 // nombre entier en base 10
153.128765 // nombre décimal en base 10
0xFF // nombre hexadécimal (255)
O77 // nombre en base octale (63)

NaN // not a number - valeur non numérique
Booléens true // équivalent à 1, 2, 3, 4 ...
false // équivalent à 0
Null & Undefined null // variable non déclarée
undefined // variable déclarée sans valeur

Les opérateurs

Opérateurs de calcul:

Opérateur
Description
+ Addition
- Soustraction
* Multiplication
/ Division
% Modulo
++ Incrémentation
-- Décrémentation

Exemples:

Javascript
Résultat
// on attribue à la variable c , la valeur a + b
a = 1;
b = 10;
c = a + b;
document.write(c);
// on augmente la variable a de 1
a++;
document.write(a);

Opérateurs de logiques:

Opérateur
Description
! NON logique
< plus petit que
> plus grand que
<= plus petit ou égal à
>= plus grand ou égal à
== égal
!= inégal
&& ET logique
|| OU logique
? : opérateur conditionnel
=== identité
!== Non identité

Exemples:

Javascript
Résultat
// si a vaut 2,
// on lui attribue la valeur 1
if (a == 2) a = 1;
document.write(a)

Opérateurs d'assignation:

Opérateur
Description
= assignation directe
+= assignation après addition
-= assignation après soustraction
*= assignation après multiplication
/= assignation après division

Exemples:

// ces deux instructions sont équivalentes:
a += b;
a = a + b;

Les structures conditionnelles:

if

L'instruction if...else permet d'executer une instruction si une condition est vérifiée et une autre sinon. La partie else est optionnelle.

Javascript
Résultat
// si a vaut 2,
// on lui attribue la valeur 1
if (a == 2) a = 1;
document.write(a)
// si a vaut 1 on lui
// attribue la valeur 2,
// sinon la valeur 3
if (a == 1) a = 2;
else a = 3;
document.write(a)

while

L'instruction while permet d'effectuer une instruction tant qu'une condition est vérifiée. Il faut vérifié que la boucle s'arrête bien au bout d'un moment, sinon le browser va se bloquer!

Javascript
Résultat
// temps que a est plus
// petit que 5, on
// augmente a de 1
a = 0;
while (a < 5){
a++;
};
document.write(a);

for

L'instruction for permet d'effectuer une instruction un nombre donnée de fois.

Javascript
Résultat
// on multiplie a par 2,
// 10 fois de suite
a = 1;
for (i=0; i<10; i++){
a *= 2;
};
document.write(a);

Les fonctions

Une fonction est un bloc d'instructions auquel on donne un nom pour la rappeler au moment voulu. Elles permettent d'alléger le code en le découpant en morceaux plus petits.

Une fonction se déclare avec l'instruction function suivie du nom de la fonction, des paramètres entre () et du code entre {}. Par exemple:

Javascript
Résultat
// on déclare la fonction
function hello(n) {
document.write("Hello, "+n+" !");
}
// on utilise la fonction
hello(" World ");

Exercices:

Construire un javascript qui affiche les nombre de 1 à 10'000, comme ici.

Construire un javascript qui affiche un tableau avec les nombres de 1 à 1'000 dans la colonne de gauche et leur carré à droite, en utilisant de fonctions, comme ici.


© Copyright 2004 - Vincent Stadelmann