Premières lignes en javascript

Le javascript est un code exécuté côté client. Cela signifie qu’il s’exécute sur l’ordinateur qui visualise la page, contrairement au language php, qui comme on le verra s’exécute côté serveur, c’est à dire sur l’ordinateur qui envoie la page.

1/8 | Suivant

La page qui s’affiche sur votre ordinateur est en effet normalement "morte" : elle montre l’information qu’elle contient, point. Le javascript a été inventé pour contourner cette limitation : avec le javascript, la page peut réagir, modifier son contenu et son affichage, après son chargement. L’ajax, ce mot magique du web 2.0, est en grande partie due à lui.

Où placer du javascript et comment ?

On peut placer le javascript n’importe où dans la page. Et comme pour les css, on peut même externaliser le javascript, ce qui est recommandé d’ailleurs.

Pour placer le code, on doit d’abord déclarer que l’on va insérer du code, comme ceci :

<script type="texte/javascript">
// et on place du code
</script>

Pour placer le code dans une page externe, c’est comme ça :

<script type="texte/javascript" src="monfichier.js"></script>

Le javascript est un un code interprété, le navigateur va le lire ligne par ligne jusqu’à la fin. S’il rencontre une erreur, il s’arrêtera immédiatement. Le javascript n’est pas facile à débugger. Mais comme il est devenu incontournable, des outils existent, dont les bibliothèques javascripts, le plugin firebug pour firefox.

Coder en javascript est pour beaucoup une première expérience de programmation. Quelques uns des concepts sont parfois dur à intégrer, principalement les concepts de variable, de fonction, de boucle.

Chaque ligne d’instruction se termine par un " ;", qui est un délimiteur d’instruction. Oublier ce ; en fin de ligne est une erreur de syntaxe classique.

On peut utiliser le javascript de trois façons, globalement :

1) Pendant le chargement de la page

Le navigateur exécute le javascript qu’il rencontre dans la page pendant qu’il la lit. L’exécution du code est alors immédiate. On utilise cette méthode pour afficher certaines informations dynamique dans la page (l’heure, par exemple).
Exemple :

<script type="texte/javascript">
document.write('hello');
</script>

Ecrira "Hello" dans la page, à l’endroit où est placé ce code.

2) Quand le chargement de la page est juste terminé

On peut exécuter du code quand toute la page a été complètement chargée par le navigateur. Cela permet de faire des changements en fonction du contexte ou préparer le terrain pour d’autres scripts (typiquement du code non intrusif, pour une page dite dégradable). On ajoute pour cela, par exemple, une propriété à la balise "body" :

<body onLoad="declenche();">

Dans cet exemple, l’événement "onLoad" est déclenché dès que la page a terminé son chargement, et appelle la fonction "declenche()". J’expliquerais plus tard ce qu’est une fonction.
Pourquoi post-poser l’exécution de code javascript au moment où la page est totalement chargée ? Parce qu’on peut vouloir agir sur du code html (on verra comment) qui se trouve en bas de la page. Si on tente d’éxécuter le javascript alors que le navigateur n’a pas encore lu ce bas de page html, rien ne se passera (ou pire, il y aura erreur) car le navigateur ne peut agir sur quelque chose qu’il n’a pas encore lu. Donc exécuter le code une fois la page chargée, c’est s’assurer que tous les éléments de la page sont présents.

3) On peut enfin exécuter du code associé à des événements

Tout une série d’événements peuvent être associés à des éléments de la page, le "onLoad", que l’on vient de voir, en est un, mais le plus connu est le "onClick", qui déclenche un événement lorsque l’on clique sur un élément de la page.
Exemple :

<a href="" onClick="alert('fait gaffe !');">Cliquer ici</a>

Ce code fera apparaitre une fenêtre d’alerte avec "fait gaffe !" losque l’on clique sur un lien. Mais le même code placé sur une image :

<img src="" onClick="alert('fait gaffe !');" />

Donnera exactement le même résultat, même si une image n’est pas un lien.