|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 C'est
quoi Javascript ?
Principe
Insérer
du Javascript dans votre page HTML |
|
1. C'est quoi Javascript ?
Javascript a été créé par Netscape pour
développer des applications Internet et, par la même
occasion, pour étendre les possibilités du HTML.
Il s'agit d'un langage léger et orienté objet,
permettant d'écrire des scripts.
Attention : il ne faut pas confondre Java et Javascript !
Java est un langage de programmation développé par SUN
et non un langage de script comme Javascript.
De plus, les scripts écrits avec Javascript sont interprétés
par le navigateur et incorporés dans le code HTML, ce qui
n'est pas le cas du langage Java.
Les programmes en JavaScript sont notés directement dans
le fichier HTML ou dans des fichiers séparés.
Ils ne sont pas compilés comme par exemple les programmes
Java mais interprétés comme code source en temps réel.
Pour cela les navigateurs WWW modernes comme Netscape ou l'Explorer
Internet Microsoft sont équipés de logiciel d'interprétation
correspondants.
Dans un langage de programmation comme JavaScript il y a beaucoup
d'éléments prêtant à confusion pour les
débutants;
ce sont les caractères spéciaux, les variables,
les commandes conditionnelles, les boucles les fonctions,
les méthodes, les paramètres, les objets, les propriétés
et plus encore.
JavaScript est un langage de programmation relativement simple,
dans lequel manquent beaucoup de tâches d'un "grand"
langage de programmation - comme par exemple la gestion de la mémoire
ou le maniement de fichiers. En outre, JavaScript est employé
dans un environnement déterminé, à savoir la
page WWW affichée ou à afficher.
|
| |
 |
| |
2. Principe de base
Pour intégrer un script Javascript dans une page HTML, le code
du script doit être placé à l'intérieur
des balises <script> et </script>.
Le langage doit être spécifié avec l'attribut
language :
Exemple :
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!--
Votre code Javascript
//-->
</script>
</head>
<body>
</body>
</html>
Il n'y a pas de règle précise qui stipule à quel
endroit d'un fichier HTML un passage pour JavaScript doit être
défini.
Mais il est usuel pour les programmeurs en JavaScript de définir
un tel passage dans l'entête du fichier HTML, à savoir
entre <head> et </head>.
Ainsi on s'assure au plus vite que le code soit déjà
lu par le navigateur WWW et disponible au moment où il doit
être exécuté.
Remarques :
Il est important d'insérer à l'intérieur de votre
balise <script> des commentaires.
Ainsi les navigateurs WWW plus anciens qui ne connaissent pas JavaScript,
ignorent le code JavaScript qui suit et ne l'interprètent pas
par erreur comme du texte faisant partie du fichier HTML.
Cliquez sur ce bouton pour faire apparaître une fenêtre
d'alerte Javascript standard :  |
|
| |
3. Insertion de Javascript dans
vos pages HTML
Plusieurs techniques existent pour insérer du code Javascript
au sein de vos pages HTML :
• A l'intérieur des balises <HEAD> et
</HEAD>
Avec <script language="JavaScript">
vous introduisez un passage pour JavaScript dans un fichier HTML.
Avec </script>, vous
refermez votre code Javascript.
A l'intérieur de la balise <script>, vous
écrivez votre code Javascript.
Exemple :
<script
language="JavaScript">
<!--
function PopupCentrer(page,largeur,hauteur,options)
{
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"","top="+top+",left="+left+",width="
+largeur+",height="+hauteur+","+options);
}
-->
</script>
Avec l'aide de fonctions, vous pouvez programmer
vos propres procédures JavaScript autonomes que vous pouvez
ensuite exécuter par l'appel de la fonction.
Pour cela vous pouvez spécifier lors de quel évènement
* la fonction doit être appelée et son code
programme exécuté (par exemple lorsque l'utilisateur
clique un bouton où survole une image).
* Nous reviendrons plus en détail sur les différents
évênements Javascript dans la partie consacrée
à ce langage.
Appel de la fonction dans la page HTML :
<a
href='javascript:PopupCentrer("popup/img_exercice.htm",750,450,"scrollbars=yes")'>
<img src="img/apercu.gif"
width="66" height="13"
border="0">
</a>
Cette fonction détermine la hauteur et la largeur de votre
écran et centre la fenêtre au milieu de votre écran
quel que soit votre résolution.
Pour appeler une fonction Javascript au sein de votre page HTML,
il faut que celle-ci ait été déclarée
au préalable dans le <HEAD> de la page.
|
|
| |
• Au sein d'une page HTML, à l'intérieur
de la balise <BODY>
Pour écrire du code HTML à l'intérieur de
votre page, vous pouvez utilisez Javascript.
Dans ce cas, il faut insérer la balise <script></script>
à l'endroit où vous souhaitez saisir le code HTML.
Exemple :
<html>
<head><title>Mon premier script</title></head>
<body>
<script language="Javascript">
if (navigator.appName
== "Microsoft Internet Explorer")
document.write("Vous utilisez Internet
Explorer, <br>donc voici le code HTML
pour ce navigateur...") ;
else
document.write("Vous utilisez Netscape
ou un autre navigateur, <br>donc voici
le code HTML pour ces navigateurs...")
;
</script>
</body>
</html>
Résultat :
Dans cet exemple, le script teste le navigateur de l'internaute
et un texte alternatif apparaît selon le type de navigateur
( IE ou Netscape ).
• Insertion de Javascrit dans des fichier .js séparé
Depuis la version HTML 4.0, il est possible de noter du
code JavaScript dans des fichiers séparés.
C'est très utile si vous voulez utiliser les mêmes
fonctions JavaScript dans plusieurs fichiers HTML car ainsi, vous
n'avez besoin de noter le code qu'une seule fois et pouvez le
référencer dans plusieurs fichiers HTML.
Exemple :
|
|
| |
En cliquant sur le bouton "=", le résultat s'affiche
à droite.
La fonction qui multiplie la valeur des deux premiers champs est
placée dans un fichier .js externe nommé script.js
Dans ce fichier, il ne faut inscrire que les fonctions Javascript,
mais aucun code HTML.
Voici le contenu du fichier externe script.js :
function resultat()
{
var x = 0;
var y = 0;
x = eval(window.document.formu.affiche.value);
y = eval(window.document.formu.affiche1.value);
window.document.formu.result.value = x*y;
}
Voici le code à insérer dans chaque page :
- Dans le <HEAD> de chaque page :
<script language="javascript"
src="../script.js"></script>
- Dans le <body> de votre page :
<form name="formu">
<input name="affiche" size="10"
maxlength="30" value="0">
multiplié par
<input name="affiche1" size="10"
maxlength="30" value="0">
<input type="button" name="calcul"
value=" = " onClick="resultat();">
<input name="result" size="20"
maxlength="40" value="0">
<br>
<br>
<input type="reset" name="Submit"
value="Réinitialiser">
</form>
|
|
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
