> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> Tout sur le Javascript !

> Faire connaissance avec le JavaScript

> Présentation

> Lecture du tutoriel

Présentation

Par

JoSé2

Mise à jour : 22/07/2009

5 116 visites depuis 7 jours, dont 267 sur ce chapitre classé 38/786

Avant de nous lancer dans des lignes de code, je vous ai préparé un petit avant-propos qui ne vous fera aucun mal

. Vous en apprendrez un peu plus sur le JS (JavaScript), et nous ferons par la même occasion un peu d'histoire.
Ce chapitre n'est pas placé en annexe car il apporte des éléments importants : prenez donc le temps de le lire.

Au risque de me répéter, le JS s'insère dans une page Web et nécessite donc de bonnes bases en (x)HTML.

Retour en haut

Sommaire du chapitre :

Le JavaScript : c'est quoi ?
Comment ça marche ?
JavaScript et Java
Q.C.M.

Retour en haut

Le JavaScript : c'est quoi ?

Qu'est-ce que c'est ?

Définition

Le JavaScript est un langage de programmation.
Pour être plus précis, c'est un langage orienté objet : quand on code en JavaScript, on se base sur des objets. Je n'en dis volontairement pas plus pour l'instant, car ce sujet sera abordé un peu plus loin, lorsque vous aurez déjà acquis les connaissances requises.

Pour une définition plus complète, voici un "remix" de ce que nous propose notre ami Google :

Citation : Google, define: JavaScript

Le JavaScript est un langage de script basé sur la norme ECMAScript.
Il s'insère dans le code (x)HTML d'une page web, et permet d'en augmenter le spectre des possibilités.
Ce langage de POO [Programmation Orientée Objet], faiblement typé, est exécuté côté client.

Je l'avoue, c'est très compliqué... Mais pas de panique, nous allons aborder les différents points de cette définition au fil du tuto.

Utilisation

Tout d'abord, plantons le décor : de quelle manière s'utilise-t-il ?
Sa principale utilisation est, comme je vous l'ai dit, à l'intérieur des pages web : on dit alors que le JavaScript est une extension du (x)HTML. Il permet de rendre celles-ci interactives.
Voici quelques exemples (on pourrait en citer beaucoup d'autres) de ce que l'on peut en faire dans une page Web :

ouvrir des pop-up (les petites fenêtres qui s'ouvrent de manière intempestive)
faire défiler un texte
insérer un menu dynamique (qui se développe au passage de la souris)
proposer un diaporama (changement d'image toute les X secondes, boutons pour mettre en pause, aller à l'image précédente / suivante, etc.)
avoir une horloge "à aiguilles" (avec la trotteuse)
faire en sorte que des images suivent le pointeur de la souris
créer de petits jeux (comme le classique "Plus ou Moins", cf. TP)
insérer des balises du zCode (les balises qui apparaissent en cliquant sur le bouton)
faire un aperçu du zCode en direct.

Vous voyez que les possibilités sont donc nombreuses (le JavaScript sert en effet beaucoup sur ce site).
Il ne faut cependant pas "polluer" son site avec trop de scripts inutiles... Les pop-up ou les images qui suivent la souris partout peuvent agacer le visiteur, et "charger" un site, si bien qu'il est difficile d'accéder clairement aux informations qu'il propose...

L'utilisation du JavaScript ne se limite toutefois pas aux pages web : étant un langage pratique à mettre en oeuvre (il suffit d'un navigateur et d'un éditeur de texte tel que Bloc-notes), il s'est répandu et se répand ailleurs.
Un exemple : vous pouvez créez vos propres plugins pour Messenger Plus! Live en JScript (c'est JavaScript à quelques différences près).
Il est également possible de faire facilement de petites "applications" en DHTML !

Attends, c'est quoi le DHTML ? o_O

Le DHTML (Dynamic HyperText Markup Language) désigne des pages dont le contenu (ou la mise en forme) est modifié sans avoir à recharger la page. (Ce terme n'a pas de définition officielle du W3C.)
C'est bien le cas des exemples cités ci-dessus : on modifie une image, on la déplace, on fait défiler du texte, ...

Un peu d'histoire ...

Le JavaScript, inventé par un certain Brendan Eich et développé par Netscape, fait son apparition en 1995, sous le nom de LiveScript, dans le but de dynamiser les pages web.
Son utilisation s'est largement répandue, et il se fait rapidement accepter par d'autres navigateurs.
Il est aujourd'hui très présent sur les sites web : de plus en plus de webmasters s'y intéressent, et il est de mieux en mieux accepté, à la fois par les navigateurs et par les visiteurs ; ce qui lui réserve sans doute un bel avenir...

Les caractéristiques du JavaScript

Voici un petit résumé de ce que l'on a déjà pu dire à propos des caractéristiques du JS. Ceci est à retenir.

C'est un script (cf. juste après).
C'est un langage orienté objet, comme je vous l'ai déjà dit (nous y reviendrons).
Le code n'est pas compilé :

il est donc plus rapide à produire (pas besoin de compilateur, un seul fichier, ...),
mais il est moins puissant qu'un programme en C, par exemple,
et relativement limité : il se limite plus ou moins à la page web sur laquelle il se trouve. Il ne permet donc pas de faire des choses comme manipuler des fichiers sur votre disque dur (heureusement ) ; seulement des choses assez simples.

Il est exécuté par le navigateur du visiteur (le client), et dépend donc de celui-ci.
Il est déterminé par une norme, nommée ECMA-262 ou ECMAScript. De la même manière que le W3C se charge de définir clairement le (x)HTML, le JS possède une norme qui fixe également des lois et des limites pour celui-ci, rendant ainsi ce langage plus "officiel". Ainsi, le code est plus facile à écrire, car il y a beaucoup moins de problèmes de compatibilité. Il y a cependant pour le JS quelques différences d'un navigateur à l'autre (des fonctions de l'un qui ne marchent pas sur l'autre, ...), mais cela n'a pas beaucoup de conséquences.

Retour en haut

Comment ça marche ?

Primo : un script

Un script ?

Oui, script, comme dans JavaScript...

Comme beaucoup de mots d'utilisation usuelle (ici dans le milieu de l'informatique), script a deux sens : l'un, qu'on pourrait qualifier de "global", l'autre de strict.

La définition la plus simple est la définition globale, celle qu'on utilise tout le temps et qui pourtant ne veut rien dire :
un script, c'est tout simplement un bout de code JavaScript qui a une tâche précise.
Dès que l'on parlera de script, ce sera pour désigner le code que l'on aura inséré à notre page Web.

Mais, si ça n'a pas vraiment de sens, c'est parce que la véritable signification du mot script en informatique est bien plus rigoureuse.

Grosso modo, pour faire simple, un script est, par opposition à un langage compilé, un langage qui s'interprète. Ici, l'interprète du JavaScript, c'est le navigateur du visiteur (le client).

Cette dernière définition, nous ne l'utiliserons sûrement presque pas : dès qu'on a compris, ça ne sert plus vraiment à grand-chose de le savoir.

L'intérêt des scripts est sans doute leur manière d'être utilisés : en effet, ils ne sont pas obligatoirement exécutés au chargement de la page. Ils sont lancés lorsqu'un événement spécifique se produit.
Pour illustrer ceci, voici quelques exemples d'événements qui peuvent se dérouler lors de la visite d'une page Web :

lorsque vous chargez la page (exemple : ouvrir un pop-up)
lorsque vous changez de page (un autre pop-up )
lorsque vous cliquez sur un lien (vous aimez les pop-up ? )
lorsque vous sélectionnez un élément d'un menu déroulant (vous serez par exemple redirigé vers une autre page)
lorsque vous validez un formulaire (avant qu'il soit envoyé : vous pouvez alors vérifier si les champs sont correctement remplis).

Et vous vous retrouvez avec un site très interactif : vous ne pouvez plus bouger la souris sans déclencher un script

.
Ceci étant, ce n'est pas un très bon exemple. Je l'ai peut-être déjà dit, mais les pop-up qui s'ouvrent tout le temps, et les scripts à n'en plus finir, c'est chiant très agaçant ( :-°

Secundo, un client

Un client ?

Oui, un client (ou encore visiteur, enfin celui qui visite la page web en question).
Vous avez peut-être déjà rencontré ce mot (dans le sous-chapitre précédent), mais quelques explications s'imposent tout de même...

Si vous avez suivi les cours sur le PHP, vous devriez savoir que celui-ci est exécuté côté serveur.
Autrement dit, vous demandez au serveur de vous donner une page (par exemple la page d'accueil du SdZ) : il va lire cette page, exécuter le code PHP et vous donner la page ainsi générée.

Eh bien en JavaScript, ce n'est pas comme ça.
Vous demandez la page au serveur : il vous la donne (après avoir exécuté les éventuels scripts PHP), et c'est votre navigateur qui exécute le script (soit immédiatement, soit lorsqu'un événement précis se produit).

Schématiquement, pour ceux qui justement n'y connaissent rien en PHP, voici comment ça marche :

Schéma du processus d'interprétation d'un script

votre ordinateur récupère le code source de la page en question.
Votre navigateur interprète la page et les scripts qu'elle contient.
La page formatée s'affiche sur votre écran. Les scripts, quant à eux, sont mis en mémoire et seront lancés dès que l'événement attendu se produira.

Et ça change tout !
Comme c'est votre navigateur qui exécute le script, il a donc accès au code de celui-ci (sinon comment ferait-il pour l'exécuter ? :-°

). Et si votre navigateur y a accès... vous pouvez vous aussi y avoir accès (pour les curieux, c'est dans la source de la page, entre les balises (x)HTML, comme nous l'apprendrons rapidement).

Ce n'est donc pas sécurisé du tout !
N'importe qui peut voir le script de votre page !

Les scripts d'une page ne vous plaisent pas ? Qu'à cela ne tienne : il suffit par exemple de désactiver le JavaScript (parmi les options du navigateur web)...

Retour en haut

JavaScript et Java

JavaScript n'est pas Java !

Je termine avec un point important (comme diraient nos confrères anglais, "Last, but not least"

) :

Ne pas confondre JavaScript et Java !!!

J'insiste sur ce point. C'est une confusion courante, mais ces langages sont totalement différents. Le Java a été développé par Sun Microsystems au début des années 90.
Pour vous donner une idée, le langage Java serait plus proche du C++ que du JavaScript.

Le JavaScript est placé directement dans le code (x)HTML et fait partie intégrante du code source. Le navigateur lit et interprète ce code source, et exécute alors vos scripts (ou les garde en mémoire pour les lancer plus tard, lorsqu'un événement particulier se produit).
Le Java, quant à lui, est compilé pour former un programme. Comme nous l'avons déjà vu, les langages compilés sont les opposés des scripts.

Si "LiveScript" (en rappel, c'est la tout première appellation du JavaScript) a pris le nom qu'on lui connaît aujourd'hui, c'est parce que Java et JavaScript ont un seul point commun : ce sont des langages orientés objet (comme le C++ si vous connaissez, c'est pour cela qu'ils sont proches). A part cela, je le dis et je le répète, ces deux langages sont strictement opposés !

Alors, s'il y en a un qui confond ces deux langages, ça va chi mal se passer :pirate:

!!!

Retour en haut

Maintenant que vous savez ce qu'est le JS, direction le chapitre suivant.
Au programme : la création de votre premier script

Retour en haut

Retour en haut

21 commentaires pour "Présentation"

Note moyenne : 3.51 / 4 (260 votes)

Pseudo	Commentaire
Zapata	# Posté le 22/04/2009 à 22:19:50
	Bonsoir, J'avais acheté 'Javascript Le guide complet". Plus je lisais et relisais le bouquin, plus j'étais perdu et je ne savais plus comment aborder JS. J'ai donc abandonné quelque temps avant de me brancher sur ce tuto que je trouve bien plus clair et détaillé sur les explications.
Noaric	# Posté le 23/04/2009 à 14:52:29
	Salut, Je ne suis pas encore allé bien loin mais je note une petite grosse erreur Citation # Le code n'est pas compilé : (...) * et relativement limité : il se limite plus ou moins à la page web sur laquelle il se trouve. Il ne permet donc pas de faire des choses comme manipuler des fichiers sur votre disque dur (heureusement ) ; seulement des choses assez simples. Le fait que le code ne soit pas compilé n'induit pas le fait que javascript ne puisse pas manipuler les fichiers (php n'est pas compilé et le fait pourtant très bien), cela viens plutôt du fait que javascript soit éxécuté côté client. http://noaric.labrute.fr
fab@c++	# Posté le 08/05/2009 à 15:14:24
Impossible n'est pas français Avis : Très bon	J'ai lu le debut de ce cours et il a repondu a de nombreuses quetions que je me posais ! legeekcafe.com : site communautaire d'informatique et bien plus. The Blender Community : site de tutoriaux gratuits (déjà 1 tuto !!) So-pix.fr site web de graphisme \|\| ma brute \|\| WIP Play Station 2 Slim
damien123456	# Posté le 29/01/2010 à 21:19:45
	pas mal ce tuto! il peut être utile (\__/) Lapinou. Copiez/collez le dans votre (='.'=) signature pour l'aider à dominer le monde (")8(")
anoxie	# Posté le 18/11/2010 à 22:04:55
	Très bon tuto, qui se lit sans difficulté, très progressif. Félicitation, et merci pour ce tuto.