samedi 27 octobre 2012

Apprendre le Javascript : les bases du langage


Cette partie du site consacrée à Javascript ne ressemble en rien aux pages web que vous avez déjà visitées sur le même sujet !
En effet, je n'ai pas l'intention de faire un cours magistral avec des chapîtres, des tomes I et II (d'ailleurs, j'en serai bien incapable :o) et je ne pense pas que cela vous plairait !)
Non, je vais vous faire aborder Javascript comme je l'ai moi-même abordé, ce qui veut dire avec plus ou moins de bonheur...
Allez, c'est parti !
En HTML, pour écrire ou afficher des données, vous insérez ces données directement dans le <body> pour le texte, par la balise <img src=""> pour les images, et <embed> pour le reste.
Ce qui fait surtout l'interêt de Javascript, c'est sa capacité à s'intégrer au code html environnant. En Javascript, la fonction qui combine toutes ces... combinaisons(!) est la fonction write(), embarquée (c'est-à-dire intégrée dans le code-même de Javascript).
** Exemple :

<html>
<body>
<script language="Javascript">
document.write("Bonjour")
</script>
</body>
</html>


va afficher Bonjour sur le "document" que constitue la page web. Vous noterez au passage que les guillemets ont pour fonction de délimiter la variable à afficher.

** Vous pouvez dans le code de Javascript insérer des codes HTML :

<script>
document.write("<b>Bonjour</b>")
</script>


va afficher Bonjour

** On peut aussi insérer des images :

<script>
document.write("<img src='mon_image.jpg'>")
</script>
On notera simplement que habituellement en HTML, dans <img src=""> on met des guillemets et qu'ici on a mis des guillemets "simples" qu'on nomme "quotes". Pourquoi ? Parce qu'en Javascript, lorsqu'une variable est déjà délimitée par des guillemets "doubles", tout ce qui se trouve à l'intérieur ne peut recevoir que des "quotes", des apostrophes. C'est ainsi !
Vous savez maintenant afficher avec document.write() du texte, des images. La belle affaire !
Le HTML vous le permettait déjà ! Alors c'est quoi l'interêt de Javascript ?
En HTML, vous pouviez afficher du texte, des images mais pas l'utilisateur... Pour que l'utilisateur, il le mérite bien :o), puisse lui-aussi sortir de sa passivité, il doit faire appel à des fonctions, qui elles-mêmes vont faire appel à Javascript. Une chaîne donc, dont vous serez l'initiateur.
**Pour faire appel à des fonctions Javascript, l'utilisateur doit agir. Agir sur les éléments de votre page web, par des "Event Handlers", en français des gestionnaires d'évenements (survol ou clic d'un lien, d'un bouton, d'un texte, d'une image...)
Exemple :



** Nouvelle fonction :
L'exemple que vous venez de voir a fait appel à une autre fonction embarquée alert().Cette fonction, vous l'aurez remarqué :o) fait apparaître une boîte de dialogue. La syntaxe est la même que pour la fonction document.write().

<script>
alert("Vous êtes bien curieux !")
</script>
Mais cette fonction est incapable par elle-même d'être, d'exister, d'agir ! Elle a besoin pour "vivre" d'un "event handler", ici, un bouton par lequel vous avez activé la fonction alert().
<input type="button" value="exemple" onClick="javascript:alert('Vous êtes bien curieux !')">

Traduction :
Au moment du clic, le bouton va faire appel à Javascript pour activer la fonction nommée alert(). Ici la fonction alert() est définie au sein même de l'event handler, mais ce n'est pas toujours le cas.

Aucun commentaire:

Enregistrer un commentaire