Quelle est la différence entre Javascript, HTML, CSS et PHP ?
HTML, PHP, Javascript et CSS sont tous des technologies web, et il peut-être un peu difficile de distinguer les différences et le rôle de tous ces langages.
Dans un premier temps, il est important de comprendre que toutes ces technos ne sont pas concurrentes, elles sont conçues pour fonctionner ensemble.
Mais alors qu'est-ce qui les différencie ?
Pour comprendre, il faut savoir comment fonctionne un site internet.
Client / Serveur
Tout commence dans la barre d'adresse d'un navigateur web (comme Firefox ou Chrome) : lorsque vous tapez une URL, le navigateur va demander la page que vous cherchez au serveur web qui l'héberge via le protocole HTTP.
Dans le jargon, ont dit qu'il envoie une requête HTTP. Voilà à quoi ressemble une requête HTTP :
GET /faq/ HTTP/1.1 Host: www.finalclap.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:16.0) Gecko/20100101 Firefox/16.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive Cache-Control: max-age=0
Voyons maintenant ce qui se passe à l'autre bout du fil, sur le serveur.
La machine va recevoir la requête HTTP grâce à un programme qui tourne en permanence et qui est dédié à cette fonction : attendre les requêtes HTTP qui pourraient arriver (sur le port 80), et y répondre.
Ce programme, c'est généralement Apache, le serveur HTTP le plus utilisé au monde.
Apache va donc lire la requête HTTP que votre navigateur vient de lui envoyer, et il va y répondre. Une réponse HTTP est constituée d'une série d'entêtes (qu'on appelle aussi les headers), suivi du corps (body), qui peut être par exemple le code HTML d'une page web.
Voilà par exemple le début de la réponse à la requête ci-dessus (y'a pas tout, la réponse est très longue... ^^) :
HTTP/1.1 200 OK Set-Cookie: 90plan=R4113940776; path=/; expires=Mon, 05-Nov-2012 09:57:02 GMT Date: Fri, 02 Nov 2012 21:39:40 GMT Server: Apache/2.2.X (OVH) X-Powered-By: PHP/5.2.17 Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 10203 Keep-Alive: timeout=5, max=93 Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <!-- _________ ____ ___ _ __ _ _______ _ __ ________ \ ____ / \ / | \ | | / \ | | | ____/ | | / \ | ____ | | |____ || | |\ \ | | / /\ \ | | | | | | / /\ \ | |____| | | ___/ || | | \ \ | | / /__\ \ | | | | | | / /__\ \ | ______| | | || | | \ \| | / _____\ \ | | | | | | / _____\ \ | | | | || | | \ | / / \ \ | |_____ | |____ | |_____ / / \ \ | | /_/ /__\ /_/ /__/ /_/ \_\ |______/ |______\ |______//_/ \_\ /__| --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> [...]
Ensuite, ça n'est pas terminé. Le navigateur va analyser la réponse du serveur. Il va interpréter tout ça pour faire le rendu de la page web, ce que vous voyez à l'écran (car au cas ou vous ne l'auriez pas remarqué, quand vous visitez un site web vous ne voyez pas son code HTML, vous voyez le résultat de ce code HTML : une mise en page, du texte, des images, des animations...).
Vous savez maintenant qu'un site web, c'est une communication entre votre navigateur, que l'on appelle le client, et un serveur. Cette notion de client/serveur est fondamentale, c'est la base du web.
Maintenant que tout ça est au point, on va pouvoir en venir au vif du sujet.
Si vous voulez en savoir plus c'est par ici : validation de la valeur d'une cellule excel.
Chacun sa place dans la chaine
PHP est un langage côté serveur, il permet de générer des pages web à la volée plutôt que de servir des pages web statiques. En fait quand on regarde ce qui se passe sur le serveur web d'un site utilisant PHP, c'est toujours Apache qui s'occupe de recevoir les requêtes HTTP qui proviennent d'internet, mais il va ensuite déléguer la réponse à cette requête à un programme qui s'appelle PHP, et qui va être chargé de générer les headers et le code HTML (body) qui sera retourné au client.
Inversement, HTML/CSS et Javascript sont tous des langages côté client, ils sont exécutés sur le navigateur.
HTML/CSS sont complémentaires : HTML est un langage de balise qui sert à définir la structure sémantique d'une page web : ses menus, ses blocs de texte, ses images... tandis que CSS permet de définir la manière dont s'affichent tous ces éléments à l'écran : la couleur du texte, les marges, les bordures, les images d'arrière-plan...
Le navigateur utilise le code HTML et les feuilles de style CSS pour faire son rendu à l'écran.
HTML et CSS ne sont pas à proprement parler des langages de programmation, il faut plus voir ça comme un traitement de texte (comme Word) pas très user-friendly mais aussi beaucoup puissant (il suffit de voir la diversité des sites internet pour se rendre compte des possibilités qu'ils offrent).
Mais ça n'est pas tout, il y a mieux : Javascript est quand a lui un véritable langage de programmation, qui permet de rendre les pages web interactives. Javascript permet tout simplement de modifier une page web sans avoir recours au serveur.
On peut ainsi modifier les éléments qui la composent, créer des animations, afficher des messages d'erreurs lors du remplissage d'un formulaire, et pleins d'autres choses.
Encore faim ? allez lire ça : dessin à la main !
