Un problema muy común es cómo hacer para utilizar información que se tiene en PHP en la ejecución de código JavaScript.
Detrás de esta inocente pregunta sin embargo, se esconde un error conceptual similar al que tratamos en este artículo: no se domina por completo el esquema de ejecución de una aplicación web.
Es entendible: la confusión se produce porque en muchas ocasiones se escribe un único texto que se ejecutará en diferentes lugares y momentos. Es un poco como jugar a este juego:
Para entenderlo bien veamos un ejemplo simple:
<table>
<?php
for ( $i = 0; $i < 5; $i++ ) {
?>
<tr>
<td><?php echo $i; ?></td>
</tr>
<?php
}
?>
</table>
Este código está mezclando puro código HTML con PHP, pero el PHP se ejecuta en el servidor, mientras que el HTML es interpretado del lado del cliente…
Recordemos cómo es que funciona un pedido de este estilo:
El cliente solicita un archivo llamado «pagina.html», pero lo que recibirá no será su contenido si no el resultado de la interpretación de ese archivo por PHP.
Y ¿qué hace PHP con ese archivo? Todo lo que no esté encerrado entre <?php y ?> será emitido literalmente como se encuentra en el archivo original, mientras que el texto que sí está entre <?php y ?> será analizado según las reglas del lenguaje y, si genera alguna salida, será adicionado a la salida que se estaba generando.
En definitiva, después de pasar por el intérprete de PHP, la salida generada será:
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
Y será eso lo que el cliente (el navegador probablemente) interprete y genere algo como:
| 0 |
| 1 |
| 2 |
| 3 |
| 4 |
Bien… y ¿qué hay del JavaScript?
JavaScript es un lenguaje de programación que se ejecuta del lado del cliente (Salvo en casos como NodeJs, pero para nuestro ejemplo diremos que lo usaremos en su versión clásica).
Esto quiere decir que, desde el punto de vista del servidor, HTML y JavaScript son indistinguibles (O mejor dicho, la diferencia entre ellos es irrelevante): para el servidor, todo lo que no es PHP es texto que debe ser enviado en forma literal al cliente (Y será el cliente el responsable de decidir qué quiere hacer con ese texto).
De modo que hacer algo como:
<?php $a = "Hola Mundo!"; ?> <script type="text/javascript"> alert( $a ); </script>
No va a dar el efecto que buscamos (Mostrar en la pantalla del cliente el mensaje «Hola Mundo!» ya que la variable $a es conocida al momento de ejecutar PHP (Es decir, del lado del servidor), mientras que el alert es JavaScript (se ejecutará del lado del cliente).
Para hacerlo más claro, lo único que el cliente recibirá es:
<script type="text/javascript"> alert( $a ); </script>
Ya que PHP se ejecutó antes (Cuando se estaba generando la respuesta) y, como todo este código está fuera de los tags de apertura y cierre de PHP, es enviado así como está.
¿Cómo se puede resolver este problema? La clave está en comprender bien los tiempos en los que cada evento sucede.
Si pensamos en que JavaScript es parte del texto que se envía al cliente y que PHP es una herramienta para generar ese código… ¿por qué no generar texto JavaScript usando PHP?
Algo como:
<?php $a = "Hola Mundo!"; ?> <script type="text/javascript"> alert( "<?php echo $a; ?>" ); </script>
De esta forma lo que recibe el cliente es:
<script type="text/javascript"> alert( "Hola Mundo!" ); </script>
En definitiva, si lo mirás con detenimiento notarás que no estamos realmente pasando la variable $a a JavaScript, si no que estamos usando su valor (El que tenía al momento de ejecutar PHP) hacia JavaScript para poder usarla (que no es lo mismo pero se acerca bastante 🙂 )
No es del todo infrecuente usar este tipo de trucos para generar código JavaScript en forma dinámica… sólo hay que ser muy consciente de qué parte de nuestro código se ejecutará en cada momento (Para esto ayuda mucho tener un buen IDE a mano).
¿Te quedó alguna pregunta? Me encantará leerla en los comentarios 😉
