JavaScript et PHP

On pose souvent la question, en particulier sur le forum, de l'intégration du javascript dans du code PHP ou ASP, c'est-à-dire dans un langage exécuté côté serveur. Si des difficultés sont rencontrées, c'est que le principe de génération d'une page web n'est pas bien compris.
Ce tutorial n'a pas pour objectif de présenter le langage PHP en détail, mais de montrer comment associer les deux langages afin de profiter de leur complémentarité. PHP ne remplacera jamais le javascript et le javascript montre vite ses limites (voir la page sur les limites du javascript). Le tutorial traite plus particulièrement du PHP, mais le principe reste le même pour tous les autres langages serveur.
Cette page décrit les différences de fonctionnement entre javascript et langages serveur.
La page suivant propose 2 exemples concrets d'intégration de javascript dans du PHP.

1 - La communication entre un visiteur et le serveur

Dans le cas d'une page HTML classique, l'échange est très simple. Le visiteur envoie une requête au serveur : l'url de la barre d'adresse. Le serveur lit le fichier index.html stocké sur son disque dur et l'envoie directement et tel quel au visiteur. Le navigateur reçoit alors le fichier HTML, interprète le code HTML et javascript qu'il contient et l'affiche à l'écran.

Dans le cas d'une page PHP ou ASP, le serveur a un rôle plus actif et ne fait pas simplement office de facteur. Le visiteur envoie toujours et de la même manière une requête au serveur, par exemple http://www.toutjavascript.com/main/index.php3. Le serveur ouvre le fichier index.php3 du répertoire main. Ici l'extension de la page est différente pour montrer au serveur qu'il a une action supplémentaire à faire. Le fichier index.php3 est un script, c'est-à-dire une succession d'instructions, que le serveur exécute. Le résultat de ce script est un fichier contenant du code HTML et javascript qui est ensuite renvoyé au navigateur du visiteur.
Ici, il y a une étape supplémentaire, un ensemble de traitements exécutés par le serveur, entre la requête et l'envoi de la page. Ces traitements peuvent être de tous types, mais le plus souvent, le serveur lit une base de données pour en extraire les dernières news du site ou les résultats actuels du sondage. Il peut aussi compter le nombre de visiteurs connectés au site et l'afficher sur la page. C'est le cas pour la page d'accueil de ce site.
Ces traitements font travailler le serveur et consomme de la mémoire et du temps processeur. C'est pour cette raison que les hébergeurs gratuits ne proposent que seulement depuis quelques temps des langages serveur, le plus souvent PHP, à la fois pour être compétitifs et grâce à l'augmentation de la puissance des machines serveurs.

2 - L'ordre d'exécution

Il faut bien comprendre que la page PHP ou ASP contient un script PHP ou ASP qui est d'abord lu et exécuté par le serveur. Le résultat du script est ensuite envoyé au navigateur. Le javascript contenu dans le résultat est interprété après le code PHP ou ASP.
L'objectif du PHP (ou de l'ASP) est bien de générer du code HTML (+ éventuellement du javascript) que le navigateur du visiteur pourra lire, interpréter et afficher.
Cela signifie :
* En javascript, on ne peut pas appeler de fonctions ou de variables PHP.
* En PHP, on ne peut pas utiliser de fonctions ou de variables javascript.
* Le code PHP n'est plus visible sur la page générée.