PHP ou JavaScript : serveur, navigateur et Node.js

PHP s'exécute sur le serveur : il construit la page, envoie le HTML terminé, puis s'arrête. JavaScript s'exécute dans le navigateur du visiteur, où il réagit aux clics et modifie la page après son chargement ; avec Node.js, il peut aussi tourner sur le serveur. Les deux sont donc moins rivaux que partenaires : un site typique utilise PHP (ou Node.js) sur le serveur et JavaScript dans le navigateur.

Ce code PHP s'exécute sur le serveur. Le navigateur ne reçoit que ce qu'il affiche, et l'onglet Page montre ce résultat :

<?php
$products = [
    ["name" => "Keyboard", "price" => 49],
    ["name" => "Mouse", "price" => 19],
    ["name" => "Monitor", "price" => 189],
];
$total = array_sum(array_column($products, "price"));
?>
<h2>Cart</h2>
<ul>
<?php foreach ($products as $p): ?>
    <li><?= $p["name"] ?>: $<?= $p["price"] ?></li>
<?php endforeach; ?>
</ul>
<p>Total: $<?= $total ?></p>

Regardez l'onglet Output : il ne reste plus de PHP, seulement du HTML. La même liste construite par JavaScript dans le navigateur ressemble à ceci :

const products = [
  { name: "Keyboard", price: 49 },
  { name: "Mouse", price: 19 },
  { name: "Monitor", price: 189 },
];

const ul = document.querySelector("#cart"); // an empty <ul id="cart"> in the HTML
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}: $${p.price}`;
  ul.append(li);
}

La version PHP envoie une page complète, que les moteurs de recherche et les téléphones lents lisent immédiatement. La version JavaScript peut mettre la liste à jour plus tard sans recharger, par exemple quand le visiteur retire un article.

Où chaque langage s'exécute

La dernière ligne compte pour la sécurité : tout ce qui est dans le JavaScript du navigateur est visible par le visiteur, donc les mots de passe, les clés d'API et les vérifications de prix ont leur place sur le serveur.

La syntaxe côte à côte

Les deux langages se ressemblent car ils empruntent tous deux au C : accolades, if, for, while, function, return. Les différences sont dans les détails :

Voici une fonction avec un callback en PHP :

<?php
$prices = [12.5, 8, 30, 4.25];

$withTax = array_map(fn($p) => round($p * 1.2, 2), $prices);
$cheap = array_filter($withTax, fn($p) => $p < 15);

echo implode(", ", $withTax), "\n";
echo "Under 15: " . implode(", ", $cheap) . "\n";
echo "Count: " . count($cheap) . "\n";

Et en JavaScript, où map et filter sont des méthodes du tableau :

const prices = [12.5, 8, 30, 4.25];

const withTax = prices.map((p) => Math.round(p * 1.2 * 100) / 100);
const cheap = withTax.filter((p) => p < 15);

console.log(withTax.join(", "));
console.log("Under 15: " + cheap.join(", "));

L'opérateur + : le piège classique

En JavaScript, + additionne les nombres et concatène les chaînes, donc une chaîne n'importe où transforme l'addition en concaténation. PHP sépare les deux : + additionne toujours et . concatène toujours.

<?php
var_dump("10" + 5);     // int(15): + always adds
var_dump("10" . 5);     // string "105": . always joins
var_dump(10 . "");      // number to string
var_dump("3" * "4");    // numeric strings multiply
var_dump(0.1 + 0.2 === 0.3); // floats are inexact in both languages

console.log("10" + 5);  // "105"
console.log("10" - 5);  // 5
console.log("3" * "4"); // 12
console.log(0.1 + 0.2 === 0.3); // false

Les deux langages ont aussi un == souple et un === strict. Le conseil est le même dans les deux : utilisez === sauf si vous voulez comparer des types différents.

Passer des données de PHP à JavaScript

PHP s'exécute en premier, il peut donc écrire des données directement dans la page pour que le JavaScript du navigateur les utilise. json_encode transforme un tableau PHP en JavaScript valide :

<?php
$user = ["name" => "Ada", "role" => "admin", "unread" => 3];
?>
<p id="greeting">Loading...</p>
<script>
const user = <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_AMP) ?>;
document.getElementById("greeting").textContent =
    "Hi " + user.name + ", you have " + user.unread + " new messages";
</script>

L'onglet Output montre le script généré avec les données déjà remplies. L'option JSON_HEX_TAG échappe < et >, si bien qu'une valeur contenant </script> ne peut pas terminer le script trop tôt. Les options sont détaillées dans json_encode.

Dans l'autre sens, cela passe par HTTP : le JavaScript du navigateur appelle fetch("/api/cart.php"), le script PHP s'exécute et répond en JSON :

<?php
// api/cart.php
header('Content-Type: application/json');
echo json_encode(['items' => 3, 'total' => 257]);

const res = await fetch("/api/cart.php");
const cart = await res.json();
console.log(cart.total); // 257

PHP ou Node.js côté serveur

Quand JavaScript tourne sur le serveur avec Node.js, la comparaison devient un vrai choix.

Le modèle de PHP pardonne beaucoup : un bug ou une fuite de mémoire n'affecte qu'une requête, et chaque requête repart de zéro. Celui de Node peut garder un état et des connexions ouvertes, ce qui convient au chat et aux tableaux de bord en direct, mais un plantage ou une boucle bloquante affecte tous les utilisateurs de ce processus.

Lequel apprendre

Vous aurez besoin de JavaScript pour toute page web interactive, car c'est le seul langage que les navigateurs exécutent. La question est de savoir ce qui tourne sur le serveur :

• Apprenez ensuite PHP si vous voulez travailler avec WordPress, Laravel ou les nombreux sites PHP existants, ou si vous voulez le moyen le plus simple de mettre un site dynamique sur un hébergement bon marché. Commencez par ce qu'est PHP.
• Restez sur JavaScript (Node.js) si vous voulez un seul langage pour toute la pile ou si vous construisez des fonctions en temps réel.

Un parcours courant : HTML et CSS, puis JavaScript dans le navigateur, puis un langage serveur. Quel que soit le langage serveur choisi, formulaires, sessions, bases de données et API JSON reposent sur les mêmes principes HTTP, donc les connaissances se transposent.