Premières notions de Javascript

Présentation : quelques bonnes lectures

Plus loin :

La programmation objet en Javascript
Ajax, le retour de JavaScript (AJAX=Asynchronous JavaScript + XML)
Tutorial sur les requêtes serveur en JavaScript (XMLHTTPRequest)

Les évenements de base

<FORM NAME="form01" ACTION="#">
 <INPUT TYPE="button" VALUE="au départ..." NAME="monbouton"
        onMouseOver="this.value='souris présente'"
        onMouseOut="this.value='souris absente'"
        onFocus="this.value='focus'"
        onBlur="this.value='j\'ai perdu le focus'"
        onClick="this.value='ça chatouille...'"
 >
</FORM>

Ce que cela donne

Autres événements

Il existe d'autres événements :

onChange : on quitte une zone que l'utilisateur a modifié (un champ d'un formulaire par exemple) ;
onLoad : une page est chargée
onSelect : sélectionner un champ d'un formulaire
onSubmit : soumettre un formulaire (envoyer)
onUnload : quitter la page

Objets de base

Exemple

Page

Formulaire

Bouton

Texte

On atteindra le texte du bouton par document.nom_du_formulaire.nom_du_bouton.value

Ainsi on pourra modifier le texte du bouton de l'exemple précédent par :

<SPAN onMouseOver="document.form01.monbouton.value='Je suis au dessus...';"
      onMouseOut="document.form01.monbouton.value='Je n\'y suis plus';">
   <em>Passer au dessus de cette phrase et regardez le bouton précédent</em>
</SPAN>

Ce que cela donne
Passer au dessus de cette phrase et regardez le bouton précédent

Conséquence : une action quelque part peut sans difficulté avoir un effet ailleurs.

Écrire dans le texte

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  document.write('Ce texte n\'est pas dans le code source HTML, et ce calcul non plus:'+(5+8));
</SCRIPT>

Ce que cela donne

Des boîtes

Un bouton

<SPAN onMouseOver="alert('Quelqu\'un est passé par là...');"><em>Passer au dessus de cette phrase</em></SPAN>

Ce que cela donne
Passer au dessus de cette phrase

Saisie

<FORM NAME="form02" ACTION="#">
 <INPUT TYPE="button" VALUE="Cliquez ici..." NAME="unbouton"
        onClick="this.value='Vous avez tapé : '+prompt('Tapez quelque chose');">
</FORM>

Ce que cela donne

Deux boutons

<FORM NAME="form02" ACTION="#">
 <INPUT TYPE="button" VALUE="Cliquez ici..." NAME="unbouton"
        onClick="this.value='Cliquez ici... (Votre choix&nbsp;: '+confirm('Êtes vous d\'accord avec ça')+')';">
</FORM>

Ce que cela donne