L'Interactivité avec Javascript et PHP

Le html et le css permettent de créer des pages web mais celles-ci restent statiques (ou quasiment, certaines propriétés css telles que hover permettent d'apporter un peu de vie à une page).

Afin de rendre une page web réactive aux actions de l'internaute on peut utiliser deux langages :

le Javascript, côté client
le PHP, côté serveur

I. Javascript :¶

JavaScript a été créé en 1995 par Brendan Eich (en 10 jours pour la première version !).

IL est standardisé par l'Ecma International (European association for standardizing information and communication systems).

Il en est actuellement à la version 8.

HTML CSS

Initialement, le javascript a été créé en s'inspirant de la structure du langage java. Mais attention, ces langages n'ont rien à voir.

Dernière remarque avant de débuter : débugger du javascript est assez pénible. Il faut passer par le mode "Examiner l'élément" du navigateur et sélectionner la console.

I.1 Structure de base :¶

Le javascript est un langage de programmation à part entière : il contient des variables, des boucles, des bibliothèques...

Le code javascript peut être lié de deux façons dans une page web :

dans la page entre des balises <script> :

                            <script>
                            alert("Hello World");
                            </script>

                        

Dans ce cas, l'usage est de les placer dans le head de la page

dans un fichier avec l'extension .js à part. Inutile de mettre les balises <script> dans ce cas:

                            <script src="js/monscript.js">
                            </script>

Ici, le fichier monscript.js est dans un sous dossier js.

Dans ce cas aussi, l'usage est de les placer dans le head de la page

Voici quelques points de base du langage :

Les tests :

On déclare les variables avec le mot clé var :

var a = 5;
var b, c = 9, "toto";
a = b / 2;

Remarquez comment dans la deuxième déclaration on crée deux variables en même temps.

Une fois une variable créée, on peut l'appeler sans le var.

Les lignes d'instructions se terminent toujours par un ;.

Les tests / if :

Tout simple :

if (condition1) {
  // block of code to be executed if condition1 is true
} else if (condition2) {
  // block of code to be executed if the condition1 is false and condition2 is true
} else {
  // block of code to be executed if the condition1 is false and condition2 is false
}

Les blocs sont entre accolades et les conditions entre parenthèses.

Au passage on voit les commentaires qui débutent avec `//.

Les pour / for :

Tout simple :

for (var i = 0; i < 50; i +=1) {
// code block to be executed
}

On précise entre parenthèses, le nom et la valeur de départ de la variable, la condition d'arrêt et l'incrément.

Les tant que / while :

while (condition) {
//code block to be executed
}

La condition est entre parenthèses

Les fonctions :

function functionName(parameters) {
code to be executed
return truc; }

Le mot clé de définition est function. On passe en arguments un ou des paramètres. On renvoie un résultat avec return.

I.2 Quand éxécuter le code ? :¶

Javascript est un langage d'événements. Cela signifie qu'il va réagir, et s'éxécuter, lorsque certains évènements seront observés dans le page.

Par exemple :

onchange

Un élément html a été modifié

onclick

L'utilisateur a cliqué sur un élément html

onmouseover

L'utilisateur passe sa souris sur un élément html

onmouseout

L'utilisateur sort sa souris d'un élément html

onkeydown

L'utilisateur presse une touche du clavier

onload

La l'élément html a fini dêtre chargé par le navigateur

La syntaxe est la suivante :

                            <element event='Some Javascript'>

                        

Ainsi, on peut par exemple changer la couleur d'une div lors d'un clic de souris sur un bouton:

                            <div id='maDiv' >

                              Clique-le bouton !

                            </div>

                            <button onclick='document.getElementById("maDiv").style.backgroundColor = "lightblue";' >

                              Ici !

                            </button>

Clique-le bouton ! Ne fonctionne pas dans le notebook...

</div>

Le plus souvent on appelle une fonction (qui s'appliquera dès que l'on rentrera dans la zone) :

                            <script>

                            function maFonction() {

                              document.getElementById("maDiv").style.backgroundColor = "lightblue";

                            }

                            </script>

                            <div id='maDiv' onmouseover='maFonction()' >
                            Passe la souris ici !
                            </div>

                        

Passe la souris ici ! Ne fonctionne pas dans le notebook...

II. PHP :¶

Il ne s'agit pas ici de présenter en détails le PHP mais simplement d'expliquer son rôle.

Ce langage a été créé en 1994 par Rasmus Lerdorf.

PHP

Il en est à sa version 7

Le PHP ets un langage éxécuté côté serveur. Il permet entre autres choses de générer des pages web automatiquement.

Imaginons qu'un utilisateur souhaite s'identifier sur un site web. Il va saisir un identifiant et un mot de passe. On aura par exemple le code suivant :

                            <form action="identification.php" method="post" >

                              Login :
                              <input type="text" name="login" />

                              Mot de passe :
                              <input type="password" name="mdp" />

                              <input type="submit" value="Valider" />

                            </form>

Ce qui donne :

On remarque que le form est soumis lorsque l'on clique sur le bouton "Valider" et envoyer avec la méthode POST du protocole HTTP.

Cette méthode permet de faire transiter des informations entre un client et un serveur. Les informations envoyées sont celles qui ont été nommées dans la page (ici le login et le mdp) et le sont dans la requête du POST :

    POST /test/demo_form.php HTTP/1.1
    Host: w3schools.com
    name1=value1&name2=value2

Cette requête est donc envoyée à un serveur web avec la demande d'éxécuter le fichier identification.php.

Celui-ci reçoit donc la requête et éxécute le code contenu dans identification.php.

Fonctionnement PHP

Le serveur va donc récupérer les informations passées dans la requête POST en utilisant la variable superglobale $_POST(sic): $_POST['login']) et $_POST['mdp']

Il interrige ensuite sa base de données afin de récupérer les informations correspondantes (programme de NSI - Terminale) et vérifie enfin la correspondance des informations :

if ($eleve['login'] == $_POST['login'] and $eleve['mdp'] == $_POST['mdp']) {
    echo 'Votre mot de passe correspond à votre login';
}

Le code dans echo est envoyé sous forme html au client. A aucun moment celui-ci ne se rend compte du travail réalisé par le serveur avec php.

Le client ne reçoit normalement jamais de php.