II) Mode de fonctionnement de JavaScript

dimanche 25 mars 2012 (), par Vader[FR]

Principe d’action de JavaScript

une fonction en javascript préalablement déclarée sera lancée par un évènement sur un objet de la page.

par exemple si l’on déclare la fonction ouvrir, acceptant en paramètre l’url d’une page web à ouvrir :

<script language="Javascript">
	function ouvrir(url){
		 fenetre=window.open(url);
	}
</script>

puis dans la page, on met un bouton, qui lancera ladite fonction lors de l’évènement onClick :

 <BUTTON name="Google" value="google"  onclick="ouvrir('http://www.google.fr')"> Google (Button)</BUTTON>

Cliquer sur le bouton lancera la fonction ouvrir, avec comme paramètre l’adresse de Google, qui s’ouvrira dans une nouvelle fenêtre ou un nouvel onglet.
La fenêtre étant référencée dans la page courante, par la variable fenetre, il sera possible de la refermer par un deuxième bouton qui aurait lancé une autre fonction, faisant fenetre.close();

Les évènements varient selon les objets.

Par exemple :

l’élément body dispose (entre autres) de l’évènement onLoad, qui se produira lorsque la page se chargera dans le navigateur.
les liens <a href=.....> </a> disposent (entre autres) de l’évènement onClick, qui se produira lorsque l’on clique dessus.
les images <img src=....> disposent (entre autres) des évènements onMouseOver, onMouseOut, qui se produiront respectivement lorsque la souris passera au dessus de l’image et lorsque la souris quittera l’image
les boutons <button>titre</button>, <input type="button" ....> et boutons de formulaire <input type="submit" ...> disposent (entre autres) de l’évènement onClick.

la liste complète des éléments et de leurs évènements serait trop longue à détailler ici : il existe des sites dédiés au JavaScript.

Intégrer du JavaScript à une page web

Comme indiqué dans l’article précédent, il y a deux manières d’intégrer du code javascript dans une page web :

en mettant le code directement dans la page
en liant la page à un fichier de scripts javascript

la manière la plus propre est de lier la page à un fichier de script.
Cela évite en effet d’avoir a éditer toutes les pages dans lesquelles un même code aurait pu être incorporé.

la déclaration de liaison d’un fichier de script se fait dans l’entête de la page, entre les balises <head> </head> au même niveau que la déclaration du titre de la page et des feuilles de style CSS.

<head>
<title>Titre de la page</title>
<script src="chemin_fichier_javascript.js" type="text/javascript"></script>
<link media="all" type="text/css" href="chemin_feuille_de_style_css.css" rel="stylesheet">
</head>

On peut bien sûr déclarer plusieurs feuilles de style et plusieurs fichiers de scripts.