Script dans Navigateur

• Utiliser JavaScript dans une page HTML
• Liens vers les fonctions Javascript
• Trucs et Astuces

JavaScript peut être intégré à un document HTML de deux manières:

• Comme fonction en utilisant le tag SRCIPT.
• Comme un lien vers une fonction en utilisant les tags HTML.

Le tag SCRIPT

Le tag LANGUAGE est optionnel, et spécifie le langage du script utilisé:

Le tag HMTL, <SCRIPT>, et sa contrepartie, </SCRIPT> peut contenir autant de fonctions que vous voulez.

Attention: JavaScript respècte la casse, c'est-à-dire Qu'il voit la difference entre les MAJUSCULES et les minuscules.

Exemple 1: un script simple.

Affichage de l'exemple 1.

Salut tout le monde! C'est tout!

Cacher le script

Definir et appeler des fonctions

Les scripts placés dans le tag SCRIPT sont évalués à la fin du chargement de la page. Ces fonctions sont sockées, mais pas éxécutées. Les fonctions, pour être éxecutées doivent être appelées par un lien dans la page.

Il est important de faire la difference entre définir une fonction et appeler une fonction. Définir une fonction ne fait que la nommer, et dire quoi faire quand cette fonction est appelée. Appeler une fonction fait executer une fonction avec ses parametres.

Exemple 2: un script avec une fonction et un commentaire.

Fini.

Le tag HEAD

Exemple 3: un script avec deux fonctions.

Affichage de l'exemple 3

Merci.

Apostrophes

Les applis javascript sont en trés grande majoritées appelées à la suite d'un evenement. Un evenement dépend d'une action de l'utilisateur. Par exemple, un click sur un bouton est un evenement, comme le passage de la souris sur une image ou un texte. Navigateur reconnait un certain nombre d'evenements. Vous devez utiliser des evenements liens pour declencher une fonction aprés un evenement.

Les evenemenets-lien sont intégrés aux tags HTML comme un attribut supplementaire, auquel vous assignez le nom de la fonction à executer. La syntaxe générale est:

Par exemple, supposez que vous ayez créé une fonction appelée Calcul. Vous pouvez la faire s'exeuter quand l'utilisateur click sur un bouton par l'evenement-lien onClick:

Vous pouvez mettre n'importe quelles instructions dans les guillemets suivant onClick. Ces instructions sont éxecutées quand l'utilisateur click sur le bouton. Si vous voulez inserer plus d'une instruction, séparez les par un point virgule (;).

En général, c'est une bonne idée de definir des fonctions pour vos evenements-lien, parceque:

• Cela rend votre code modulable, puisque vous pouvez utiliser la même fonction pour plusieurs evenements-liens.
• De plus, votre code devient plus lisible et plus clair.

Notez l'utilisation de this.form pour se réferer au formulaire courant. Le mot cléf this se refere à l'objet courant, dans l'exemple ci-dessus le boutton. La construction this.form se refere au formulaire contenant le boutton. Dans l'exemple précedent, l'evenement-lien onClick est un appel à la fonction compute() avec this.form, le formulaire courant, comme paramètre.

Les evenements sont integrables aux tags de certains objets:

• Les évenements Focus, Blur, Change: zones, cadres et selection de textes
• L'évenement Click: Bouttons, Boutons "Radio", cases à cocher, boutons envoyer et reset, et les liens
• L'évenement Select: Zones et cadres de texte
• L'évenement MouseOver: liens

Si un evenement peut s'appliquer à un tag HTML, alors vous pouvez définir un evenement-lien pour celui-ci

Beaucoup d'objets ont des procédures qui simulent un évenement. Néanmoins, ces procedures qui émulent un évenement ne déclenche pas d'évenement-lien.

Evenement	se déclenche quand..	Evenement-lien
blur	L'utiliateur se déplace de l'objet courant du formulaire vers un autre	onBlur
click	L'utilisateur click sur un element d'un formulaire ou un lien	onClick
change	L'utilisateur change la valeur d'un cadre ou d'une zone de texte	onChange
focus	L'utilisateur passe d'un objet d'un formulire à l'objet auquel l'evenement est associé	onFocus
load	L'utilisateur charge la page dans Netscape	onLoad
mouseover	L'utilisateur passe son curseur sur un lien quelconque ou sur une image	onMouseOver
select	L'utilisateur selectionne le contenu d'une zone de texte	onSelect
submit	L'utilisateur envoie le formulaire	onSubmit
unload	L'utilisateur quitte une page	onUnload

Exemple 4: un script avec un formulaire et un attribut even,ement-lien

Affichage de l'exemple 4

Exemple 5: un script avec un formulaire, un evenement-lien avec un tag BODY

Affichage de l'exemple 5.

Entrez un nombre dans la zone de texte et ensuite cliquez n'importe où en dehors cette zone Suivant ce que vous avez entré, Javascript vous demandera d'entrer autre chose ou vous remerciera.

Cette section decris plusieures techniques utiles de programmationde JavaScript

Mettre à jour une page

JavaScript dans Navigateur génere ses resultats de bas en haut. Une fois qu'un script a été pris en compte, on ne peut pas le mettre à jour sans recharger toute la page. Néanmoins, vous pouvez recharger une sous-fenetre dans une frame séparée.

Imprimer

Pour le moment, vous ne pouvez pas imprimer un texte généré par du JavaScript Par exemple, si vous aviez ceci dans une page:

Utiliser les apostrophes

Soyez bien sur de remplacer dans le html généré par JavaScipt les guillemets (") par des apostrophes ('). Comme tout ce qui est généré par JavaScript doit etre encadré par des guillemets, vou devez utiliser de simples apostrophes pour delimiter des arguments, par exemple:

Definnir des Fonctions

C'est toujours une bonne idée de définir les fonctions dans la section HEAD de vos pages HTML. Comme cela, toutes les fonction seront définies avant que quoi que ce sot soit affiché. Sinon, si l'utilisateur arrete le chargement de la page au milieu, et qu'il appele une fonction qui n'est pas encore définie, il aura un mesage d'erreur.

Créer des Arrays

JavaScript n'a pas de type de données explicite pour les arrays, mais à cause de l'étroite relation entre les arrays et les propriétées des objets (allez voir Les modèles d'objet JavaScript), il est facile de créer des arrays dans JavaScript. Vous pouvez définir un type d'objet array comme ceci:

function MakeArray(n) {
   this.length = n;
   for (var i = 1; i <= n; i++) { 
     this[i] = 0 }
     return this
     }
}

Ceci définie un array pour que la premiere propriété, length (avec un index de 0) represente le numero de l'élement dans l'array. Les propriétées restantes ont un entier index de un ou plus, et initialisé à 0.

Vous pouvez ensuite créer un array par un appel à nouveau avec le nom de l'array, specifiant le nombre d'element qu'il possède. Par exemple:

emp = new MakeArray(20);

Ceci crée un array appelé emp avec 20 élements, et initialise l'element à zero (0)

Populer un array

Vous pouvez populer un array simplement en assignant une valeur à un de ses elements. Par exemple: etc...

Vous pouvez aussi créer des arrays d'objets. Par exemple, supposez que vous vouliez définir un type d'objet nommé employé, comme ceci:

function Employé(empno, name, dept) {
   this.empno = empno;
   this.name = name;
   this.dept = dept;
}

Ensuite, les instructions suivantes définissent un array de ces objets:

emp = new MakeArray(3)
emp[1] = new Employee(1, "Casey Jones", "Engineering")
emp[2] = new Employee(2, "Phil Lesh", "Music")
emp[3] = new Employee(3, "August West", "Admin")

Ensuite, vous pouvez facilement afficher les objets dans cet array en utilisant la fonction show_props (définie dans la section sur les Modèles d'objet JavaScript) comme ceci:

for (var n =1; n <= 3; n++) {
   document.write(show_props(emp[n], "emp") + "
");
}