Généralités

• Créé par Netscape (1er nom : LiveScript 1.0)
• Script = ensemble d'instructions permettant de réaliser une action.
• Embarqué dans la page HTML -> lisible pour le client.
• Langage de programmation à la syntaxe proche du C++.
• Gestion des événements provoqués par le client.
• Exécution par le browser sans recours au serveur -> indépendant de la plate forme.
• Aucune analyse du code -> erreurs de syntaxe non signalées.
• Pas d'héritage entre les classes.
• Netscape a rendu public JavaScript en 1997 -> ECMAScript (ECMA-262) standard de l'European Computer Manufacturers Association.
• Versions :
  

  Navigator		Internet Explorer
  2.0	JavaScript 1.0	3.0	JScript 1.0
  3.0	JavaScript 1.1	3.02	JScript 2.0
  4.0-4.05	JavaScript 1.2	4.0	JScript 3.0
  4.06-4.7x	JavaScript 1.3
  > 4.5 compatible ECMA-262		> 4 compatible ECMA-262
  6.0 (Mozilla)	JavaScript 1.5	5.0	JScript 5.0
  7.0 (Mozilla)	JavaScript 1.5	6.0	JScript 5.6

• JavaScript peut être utilisé côté serveur pour générer dynamiquement des pages (i.e. scripts CGI écrits en JavaScript), à condition d'avoir un serveur qui l'interprète :
  • Enterprise Server de Netscape
  • Internet Information Server (IIS) de Microsoft
  • Intra Builder de Inprise (ex Borland)

Insertion d'un bloc de code JavaScript dans le fichier HTML

Élément SCRIPT

Pour intégrer du JavaScript dans du code HTML il faut utiliser l'élément SCRIPT :

<SCRIPT language="nom" type="type-mime">
    code JavaScript...
</SCRIPT>

Le code compris entre <SCRIPT> et </SCRIPT> n'est pas affiché, il est interprété par le navigateur.

attribut language et type

• définit la version du langage de script utilisé (VBScript, JavaScript)
  • language="JavaScript"
  • language="JavaScript1.1"
  • language="JavaScript1.2"
• déclassé en HTML 4
• remplacé par l'attribut type (attention, les navigateurs antérieurs aux versions 4.0 ne reconnaissent pas l'attribut type)
  type="text/javascript"

Position du code dans un fichier HTML

• dans l'en-tête : pour définir des fonctions dès le chargement ;
• entre l'en-tête et le corps ;
• dans le corps : pour gérer les événements.

Masquer les scripts pour les navigateurs non compatibles

Si un navigateur n'est pas capable d'exécuter les scripts, alors l'élément SCRIPT n'aura pas de sens pour lui et il fera ce que fait tout navigateur qui ne connaît pas un élément : il ignorera l'élément. Les éléments SCRIPT et /SCRIPT seront donc ignorées, par contre le texte contenu entre les deux (qui est du code JavaScript) sera lu comme du texte HTML et sera affiché dans la page. Pour éviter cela, il faut placer des commentaires HTML (<!-- texte en commentaire -->) qui auront pour effet de masquer le code JavaScript aux navigateurs qui ne comprennent pas les scripts.

JavaScript connaît le <!-- qui suit immédiatement l'élément SCRIPT, et il ignore le texte jusqu'à la fin de la ligne (ne pas mettre de code sur cette ligne), par contre il faut lui cacher le --> en ajoutant un commentaire // JavaScript devant.
<SCRIPT>
<!--
    Code JavaScript //-->
</SCRIPT>

Élément NOSCRIPT

Pour prévenir les clients qu'il y a du JavaScript
<SCRIPT>
<!--
   CODE JS //-->
</SCRIPT>
<NOSCRIPT>
   texte affiché uniquement si les scripts ne sont pas supportés </NOSCRIPT>

Insertion de code dans une URL d'un élément HTML

Le code se met sous la forme :

     javascript:code

Élément A

Pour exécuter du code JavaScript il est possible d'utiliser :

<A href="JavaScript:code">texte</A>

Quand on clique sur texte le code s'exécute (le plus souvent c'est un appel de fonction).

NB : dans href, le "JavaScript:void(0)" empêche le navigateur de faire un chargement quand on clique sur le lien (c'est ce qui est fait par exemple dans la permutation d'images (roll-over).

Code JavaScript pour les événements dans les éléments

On peut insérer du code JavaScript pour indiquer les actions à effectuer en réaction à un événement provoqué par l'utilisateur (souvent ce code inséré se contente d'appeler une fonction déclarée plus haut dans le document au sein d'un élément SCRIPT). Pour réagir à un événement provoqué par le client :

<ELEMENT onEvenement="code">

Attributs d'événements existants

nom	événement	s'applique à
onAbort	interruption de chargement	image
onBlur	perte du focus	champs de saisie, window
onFocus	attribution du focus
onClick	clic sur un objet	button, checkbox, radio, reset, submit, lien retourne false pour annuler l'action
onChange	changement de champ de saisie	fileupload, password, select, text, textarea
onDblClick	double clic	lien, image, bouton(JS1.2)
onError	erreur JS ou de chargement d'une image	image, window
onKeyDown	touche enfoncée	document, image, lien, text retourne false pour annuler
onKeyPress	l'utilisateur a appuyé sur une touche
onKeyUp	touche relâchée
onLoad	chargement	image, window
onMouseDown	un bouton de la souris est enfoncé	document, lien, image, button retourne false pour annuler
onMouseUp	le bouton de la souris est relâché
onMouseMove	déplacement de la souris
onMouseOut	la souris vient de quitter une zone	lien, image, layer retourne true pour empêcher l'affichage de l'URL
onMouseOver	la souris entre sur une zone
onReset	annulation des données saisies	formulaire ; retourne falsepour annuler, ex : <FORM action="fich.php3" onSubmit="return Verif()">
onSubmit	soumission du formulaire
onSelect	sélection d'un champ de texte	champs de saisie
onUnload	déchargement d'un document	image, window