Le Langage JavaScript

Par N. Chenfour

1. Le conteneur <script language="JavaScript"> ... </script>

La balise <Script Language="JavaScript"> permet d’ouvrir une zone
particulière du document HTML dans laquelle on peut écrire du code JavaScript. Il
s’agit du principe de développement de pages web dynamiques à l’aide de script coté
client. Ce langage permet donc d’enrichir les possibilités de présentation de documents
HTML avec les techniques de programmation.

Exemple :
<script language="JavaScript">
<!--Commentaire HTML, et début des instructions en JavaScript
document.write('Ceci est un test du langage JavaScript');
// Fin du programme mis en commentaire HTML -->
</script>
Ce qui permettra d’ajouter dynamiquement une nouvelle ligne au document courant.

Cependant, et afin d’alléger le code d’une page web et de séparer le code HTML du code Javascript, il
est conseillé d’utiliser des fichiers contenant uniquement du code JavaScript. Ces fichiers peuvent
ensuite être invoqués à partir de n’importe quel document HTML à l’aide de la syntaxe suivante :
<script src="nom_fichier.js">
</script>

2. Elément de base du Langage

1- Affectation + Opérateurs + Expressions + conditions + instructions de choix +
boucles + commentaires + respect de la casse (les mots clés sont en minuscule) : Identique au
langage C (ou Java)

2- Chaînes de caractères entre guillemets ou cotes.

3- Instruction for … in
Utilisée pour parcourir les propriétés d’un objet :
for (x in objet) {
…
}

4- Déclaration implicite

5- Définition de fonctions/procédures
function nomFonctionOuProcedure(param1, param2, …) {
…
[ return valeur ; ]
}

Le type des paramètres n’est pas précisé.

6- Le passage de paramètres est comme en Java (Le passage par adresse pour les
primitifs et réalisé à l’aide du symbole & qui devra précéder le paramètre).

7- La déclaration implicite dans une fonction (utilisation d’une variable sans

déclaration) crée une variable globale. Pour que la variable soit locale on la déclare à l’aide du
mot clé var sans préciser le type :

N. Chenfour 1
 var x ;

8- Le mot clé var peut aussi être utilisé pour déclarer des variables globales (en dehors
des fonctions).

3- Classes et objets :
3.1- La création des objets est réalisée comme en Java :

nomObjet = new TypeObjet(arg1, arg2, …) ;

Remarques :
1- Il existe plusieurs Objets et classes prédéfinies qu’on peut
manipuler en JavaScript.

2- On peut créer de nouvelles classes utilisateur.

3.2- Création des classes :

Elles sont définies avec un constructeur qui utilise l'instruction function.

function Class1(paramètres du constructeur) {

this.Propriete_1 = valeur_1;
this.Propriete_2 = valeur_2;
...
this.Propriete_N = valeur_N;
};
Le mot clé this est utilisé pour créer des propriétés.
On remarque qu’il n’y a pas d’héritage entre les classes.

Les objets de la classe sont ensuite créés à l’aide de l’opérateur new :

var Objet = new Class1(...);

L’accès à une propriété est réalisé à l’aide de la notation : Objet.propriété

Ou encore :

with (Objet) {

utiliser propriété

Les méthodes de la classe sont des fonctions créées à l’extérieur du constructeur, puis on les
affecte à la classe comme une propriété dans le constructeur de la classe :

N. Chenfour 2
On construit d’abord la fonction qui sera la méthode de la classe. Exemple :
function methode1(paramètres) {
...
}

On remarque que pour accéder aux propriétés de la classe, on utilise le mot clé this dans cette
méthode.

On affecte ensuite le nom de la fonction à un nom de méthode dans le constructeur :

function Class1(paramètres du constructeur) {

this.Propriete_1 = valeur_1;
this.Propriete_2 = valeur_2;
...
this.nomMethode = methode1;
}
L’appel est réalisé à l’aide de l’instruction suivante :

Objet.nomMethode(….) ;

Exemple :

<script language="JavaScript">
function Produit(code, desig) {
this.code = code;
this.desig = desig;
this.getDesig = getDesig;
}

function getDesig() {
return this.desig;
}
p = new Produit('A01', 'Clavier');

alert( p.getDesig() );
</script>

N. Chenfour 3
4. Classes et Objets Prédéfinis
4.1. L’Objet Date :
La classe Date permet de créer des objets avec le constructeur prédéfini Date(), qui crée
un objet à base de la date système.
Exemple :

var d = new Date() ;

Quelques méthodes de la classe Date :
Méthode Définition. Exemple
getDate() retourne le jour du mois de 1 à 31 d.getDate()

getDay() retourne le jour de la semaine. Dimanche=0 d.getDay()

getMonth() retourne le numéro du mois. Janvier=0 d.getMonth()

getYear() Retourne l’année d.getYear()

getFullYear()
Retourne l'année système à 4 chiffres d.getFullYear()

getHours() Retourne l'heure. d.getHours()

getMinutes() Retourne les minutes. d.getMinutes()

getSeconds() Retourne les secondes. d.getSeconds()

Exemple :

<html>
<head>
<script language="JavaScript">
// 1ère méthode pour créer un tableau :
var jour = new Array(7);
jour[0]='dimanche'; jour[1]='lundi' ; jour[2]='mardi';
jour[3]='mercredi'; jour[4]='jeudi' ; jour[5]='vendredi';
jour[6]='samedi';

// 2ème Méthode pour créer un tableau :

var mois=new Array("Janvier", "Février", "Mars", "Avril","Mai",
"Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre",
"Décembre");
</script>
</head>
<body>
<script language="JavaScript">
var d = new Date(); // ou : d = new Date;
document.write(
"Date d’Aujourd’hui : "
+ jour[d.getDay()] + ' '
+ d.getDate() + ' '
+ mois[d.getMonth()] + ' '
+ d.getFullYear() );
</script>
</body>
</html>

N. Chenfour 4
4.2 Les objets du navigateur :

navigator links[]

location images[]
href elements[]

history applets[] tableau

d’objets de
back(), formulaire :
forward(), go(N) - Text
window document forms[] - TexArea
- Hiden
- Password
- Button
screen anchors[] - Submit
- Reset name
- Image value
- Select --> innerHTML
frames[] location - Checkbox options[]
on…
- Radio

parent et
autres objets Autres
objets et write(), writeln(), open, getSelection(),
et méthodes getElementById(),...
méthodes
bgColor, fgColor, title, URL, …

alert(), prompt(), confirm(), scroll(), setTimeout(), setInterval(),…

status, parent, name, menubar, scrollbars, statusbar, toolbar, ...

Exemple :
Générer le contenu d’un document dynamiquement en utilisant l’objet « document » :
<html>
<body>
<script language="JavaScript">
document.write('<table
border=1>'); for (i=1; i<5; i++)
{
document.write('<tr>'
); for(j=1; j<10; j+
+)
document.write('<td>'+(i*j)+'</
td>'); document.write('</tr>');
}
document.write('<table border=1>');
</script>

Résultat :
1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36

N. Chenfour 5
5. Les événements

Evénement Description
onAbort L'utilisateur interrompt le chargement d'une image.
onBlur Un objet perd le focus.
onClick L'utilisateur clique sur un objet.
onChange L'utilisateur a changé la valeur d'un champ de saisie.
onDblClick L'utilisateur double−clique sur un objet.
onDragDrop L'utilisateur fait glisser un objet sur le navigateur.
onError Une erreur se produit lors du chargement d'une image ou de code JavaScript.
onFocus Un objet reçoit le focus.
onKeyDown L'utilisateur enfonce une touche.
onKeyPress L'utilisateur à appuyé sur une touche.
onKeyUp L'utilisateur relâche une touche.
onLoad Un document ou image commence à ce charger.
onMouseDown L'utilisateur enfonce un des boutons de la souris.
onMouseMove L'utilisateur déplace la souris.
onMouseOut Le curseur de la souris vient de sortir d'une zone.
onMouseOver Le curseur de la souris vient de rentrer sur une zone.
onMouseUp L'utilisateur relâche un des boutons de la souris.
onMove Une fenêtre est déplacée.
onReset L'utilisateur annule les données saisies dans un formulaire.
onResize Une fenêtre ou une frame est redimensionnée.
onSelect L'utilisateur sélectionne du texte dans un champ de saisie.
onSubmit Un formulaire est soumis
onUnload Un document se décharge. C'est−à−dire un nouveau document se charge. NS

Exemple :
Ou encore :
<html>
<html>
<body >
<body onload=”alert(‘Bienvenue’)”>
<script language = "JavaScript">
</body>
alert("bienvenue") ;
</html> </script>
</body>
</html>

N. Chenfour 6