Accueil du site > WEBMASTERING > JAVASCRIPT

Javascript : Cours + exemples

Il faut un navigateur pour tester les scripts et un bloc-notes pour taper les scripts. Conseil : taper les exemples et les exécuter. Ensuite essayer de les analyser avec les commentaires du cours.

TYPES D’INTERACTIONS

Il existe 2 façons d’exécuter du code Javascript :

- exécution au chargement (vu dans l’exercice 1).
- Le code est inséré entre les balises <SCRIPT> et exécuté dans tous les cas, une fois le document chargé.

• Notion d’événements

Principe
Lorsqu’un événement, résultat d’une action de l’utilisateur se produit. Les événements sont liés à des balises HTML

Evénement	Balise	Action utilisateur
onBlur	INPUT	dé-sélection d’un champ de saisie
onClick	FORM	clic sur 1 élément de formulaire
	A	ou un lien hypertexte
onChange	INPUT	changement de contenu de champ
	SELECT	ou d’une sélection
onFocus	INPUT	activation champ de saisie
onLoad	BODY	chargement du document HTML
onMousOver	A	déplacement souris sur lien
onSelect	INPUT	sélection champ de saisie
onSubmit	FORM	soumission formulaire
onUnload	BODY	Sortie du document HTML

Remarque : on peut gérer plusieurs événements pour un même objet HTML.

Syntaxe
<BALISE POINTEUR_EVENEMENT="Code Javascript"

Ex :
<INPUT TYPE="button" VALUE="Evaluer" ONCLICK="calcule(this.form)">

- On associe ainsi l’appel d’une fonction (ici calcule()) à un événement (ici, le clic sur le bouton).

Classement
On classe les événements en différentes catégories :

- Changement du contenu : sélection ou changement de sélection d’un champ
- clic : sur boutons, radio, boutons de soumission et de réinitialisation de formulaire
- position de la souris sur un lien hypertexte

<HTML>
<HEAD>
<SCRIPT>
function Affiche(msg.event)
alert(msg + "\n" + event) :

</SCRIPT>
</HEAD>
<BODY onLoad="Affiche(’Le document a été chargé’,’onLoad’) ;" onUnload="Affiche(’Au Revoir’,’onUnload’) ;">
<H3 align=center> Gestion des Evenements <HR> </H3>
<A href=""
onClick="Affiche(’Vous avez cliqué sur le premier lien hypertexte’, ’onClick’)"> Lien hypertexte 1</A>
<A href=""
onMouseOver= "Affiche(’Vous êtes positionné sur le second lien hypertexte’,’onMouseOver’)"> Lien hypertexte 2</A>
<FORM METHOD=POST >
<TABLE>
<TR> <TD> Appuyez sur ce bouton
<TD><input type=button VALUE="ICI"
onClick="Affiche(’Vous avez cliqué sur un bouton’,’onClick’)">
<TR> <TD> Champ de saisie
<TD> <input type=text SIZE= 14
onBlur="Affiche(’ Vous avez saisi(onBlur) :’,this.value)" onChange="Affiche(’Vous avez saisi(onChange) :’,this.value)">
<TR> <TD> Selections
<TD> <SELECT Name=Sélection
onChange="Affiche(’Vous avez choisi :’, this.options[this.selectedIndex].text)"> <OPTION VALUE=Option1> Selection 1
<OPTION VALUE=Option2 SELECTED> Selection2
<OPTION VALUE=Option3> Selection3
</SELECT>
</TABLE></FORM>
</BODY>
</HTML>

Commentaires
-Il est préférable de définir les fonctions (par les balises SCRIPT) dans l’entête du document car celui-ci est chargé en premier => évite l’utilisation de la fonction avant définition.
-On peut mettre le code Javascript à l’intérieur des guillemets, mais il est recommandé d’écrire des fonctions pour des raisons de modularité et lisibilité.
-Les guillemets : Quand on doit inclure des guillemets à l’intérieur d’autres, ou alterne guillemets (double quotes) et apostrophes (quotes simples).

Application : la navigation
On peut changer de document en utilisant les propriétés et les fonctions des objets prédéfinis :
On peut :

- charger une page définie :
window.location="adresse_url"
- retourner en arrière dans l’historique :
window.history.back() ;
- avancer dans l’historique :
window.history.forward() ;

LES DONNEES EN JAVASCRIPT

Javascript comporte 3 manières de représenter les données :
- les valeurs
- les variables
- les valeurs littérales

Les valeurs
4 types :
- les nombres : 1, 2, ...
- les booléens : truc et false
- les chaînes de caractères : « Bonjour Toto »
- Le type null (valeur nulle)

Javascript est un langage non typé, ainsi lorsqu’on déclare une variable, il n’est pas nécessaire de déclarer son type. Le contenu de la variable sera converti au cours de l’exécution du programme selon l’utilisation. Dans une expression, la conversion sera basée sur l’opérande de gauche.

Les variables
Les variables sont utilisées pour représenter des valeurs dans une application. Leurs noms doivent respecter les règles suivantes :

- le nom de la variable doit débuter par unit lettre ou par le caractère "_"
- les caractères suivants peuvent être des chiffres.
- Javascript ne distingue (théoriquement) pas minuscules et majuscules.

Les valeurs littérales
Les valeurs littérales sont fixes et correspondent aux données transcrites littéralement.

Par exemple :
42
2.71828
"Bonjour tout le monde"

Les chaînes de caractères sont définies par une successions de caractères alphanumériques délimités par des guillemets (") ou des apostrophes (’).

Par exemple :
"une chaine"
’une autre chaine ’
" 12-34"
"une ligne \n une autre ligne"

Les chaînes de caractères peuvent contenir des caractères spéciaux précisant la mise en forme. Ces caractères sont :