Un peu de javascript ?


Un peu de Javascript ?

<script> </script>

Cette balise permet d'inclure dans la page une série d'instructions dans un langage différent du HTML.

Comme le javascript par exemple.

On peut la placer n'importe où dans la page, mais les scripts sont le plus souvent placés entre les balises <head>. 

    1  <script type="text/javascript">
    2  alert('Bienvenue sur cette page !');
    3  </script>

La balise script admet un attribut obligatoire :

type : il aura pour valeur le type mime d'un fichier externe ecrit dans ce langage (ex: le type mime de l'HTML est text/html, celui du javascript est text/javascript.
Ici, le code est contenu entre les deux balises, mais il existe une autre méthode pour
inserrer un langage externe dans un document HTML : 


   1  <script type="text/javascript" src="./javascript.js"></javascript>

Ici, le
code étranger est appelé dans un fichier externe (javascript.js), on utilise alors l'attribut src (qui signifie source).

src : il aura pour valeur l'adresse relative ou absolue d'un fichier contenant le code, c'est le même attribut que pour la balise <img>.
Note aux utilisateurs de HTML 4 : l'attribut language est devenu obsolète dans la norme XHTML, il est remplacé par type.


// Ouvrir la page dans une nouvelle fenêtre

Avant, il suffisait d'ajouter l'attribut target="_blank" pour ouvrir un lien dans une nouvelle fenêtre, mais cette balise est devenue obsolète : d'après le W3C, le visiteur doit choisir s'il
souhaite voir la page dans la même fenêtre ou une nouvelle.
Pourtant parfois, cet attribut était bien utile. Mais ne vous inquiétez pas, Javascript peut palier à ce manque.


     1  <a href="http://monsite.com" onclick="window.open(this.href);
        return false;">L'autre site</a>
          
Il y a plusieurs choses à analyser ici :

 l'événement onclick : le terme attribut n'est plus correct ici, cet événement
indique que le javascript qu'il contient doit être exécuté lorsque l'on clique sur l'élément (ici un lien).

       Il existe d'autres événements, mais pas toujours autorisés sur tous les éléments, en voici
les principaux :

  • ondblclick : Lorsque le visiteur effectue un double clic sur l'élément

  • onmouseover : Lorsque le visiteur passe la souris sur l'élément

  • onmouseout : Lorsque le pointeur de la souris sort de l'élément

  • onfocus : concerne essentiellement les champs de formulaires : lorsque le focus est sur l'élément (le focus est sur un champ quand le pointeur est sur ce champ).


Javascript fonctionne à partir de l'objet window, qui possède une série de fonctions

comme open(), certains sous-objets, comme document.

Ici, la fonction open() permet d'ouvrir une nouvelle fenêtre.


Entre parenthèses, il faut indiquer l'adresse de la page, mais pour éviter de devoir
la recopier, car nous l'avons déjà indiqué dans l'attribut href, nous utilisons l'objet this, qui signifie "l'élément dans lequel nous travaillons" (ici <a>).

Le sous-objet href correspond à l'attribut du même nom.

Nous précisons à la fois la valeur de href et le javascript, car dans le cas ou un utilisateur aurait désactivé javascript, la page aurait été inaccessible.

Si on clique sur le lien, la page s'ouvre dans une nouvelle fenêtre et la fenêtre
actuelle (puisque le javascript agit et le lien normal également. On utilise donc return false;
pour que la page ne se charge plus que dans la nouvelle page.
Nous n'irons pas plus loin en javascript, vous avez vu quelques notions simples,
mais pour l'instant, il n'est pas utile dans savoir plus.
Il existe de nombreux tutoriaux complets disponibles sur internet, mais c'est à
vous de les trouver.

> retour au sommaire

> voir la suite