Supongamos que tienes un valor en PHP, por ejemplo un precio:
$price = 17.99;
Y quieres trabajar con el en JS.
El JavaScript en línea (dentro del documento HTML) es como cualquier otra parte de la página, simplemente se imprime... lo mismo con las variables, por ejemplo, pongamos que tienes una función en JS que recibe un precio y le añade un 25%. Voy a imprimir el precio en la página usando un ID, por hacer algo, entonces, dentro de PHP se imprime un bloque de script con la función:
echo '<script>
function getFinalPrice(price) // number
{
return price + price * 0.25;
}
</script>';
Las funciones que vayas a usar deben estar definidas previamente.
Imprimo algo de HTML:
echo '<section>
<h3>The big Foo</h3>
<p>Lorem ipsum</p>
<p>Price <strong id="item-price"></strong></p>
</section>;
Luego imprimo el script:
echo '<script>
// aquí pasas tu valor de PHP a JS
let price = ' . $price . ';
// ahora llamo a la función anterior para tener el "precio final":
price = getFinalPrice(price);
// Añado el precio en el lugar que le corresponde del documento:
document.querySelector('#item-price').textContent = price;
</script>';
No puedes verlo funcionando aquí porque no puedo pasar cosas desde PHP, pero el contenido que tendrías una vez cargada la página es este:
<script>
function getFinalPrice(price) // number
{
return price + price * 0.25;
}
</script>
<section>
<h3>The big Foo</h3>
<p>Lorem ipsum</p>
<p>Price <strong id="item-price"></strong></p>
</section>
<script>
// aquí pasas tu valor de PHP a JS
let price = 17.99;
// ahora llamo a la función anterior para tener el "precio final":
price = getFinalPrice(price);
// Añado el precio en el lugar que le corresponde del documento:
document.querySelector('#item-price').textContent = price;
</script>
Ahora, usar JS en el propio documento NO esta recomendado, debes ponerlo en ficheros externos, y esos, por lo que yo se no puedes imprimirlos en PHP, y deben recoger los valores de otra forma, siguiendo el ejemplo anterior, lo más fácil, sería imprimir el precio base en su lugar, y luego tratarlo con el script y volver a ponerlo, ejemplo de PHP:
echo '<section>
<h3>The big Foo</h3>
<p>Lorem ipsum</p>
<p>Price <strong id="item-price">' . $price . '</strong></p>
</section>;
Y en un documento aparte tendré el siguiente JS:
function getFinalPrice(price) // number
{
return price + price * 0.25;
}
// aquí recoges el valor del precio base, del DOM:
const priceNode = document.querySelector('#item-price'); // strong
let price = priceNode.textContent;
// ahora llamo a la función anterior para tener el "precio final":
price = getFinalPrice(price);
// Añado el precio en el lugar que le corresponde del documento:
priceNode.textContent = price;
Sólo tienes que asegurarte de que el JS carga una vez construido el DOM de la página, para que pueda trabajar sobre él.
Tradicionalmente se hacía llamando los scripts externos al final del documento HTML, puedes hacerlo dentro del header
, añadiendo el atributo defer
, por ejemplo:
<script defer src="js/app.js"></script>
En el JS externo no importa donde estén definidas las funciones, a efectos del interprete, se carga todo el documento y luego se ejecuta, entonces puedes añadirlas al final y funcionaría.
Por último, para prevenir que aparezca un precio incorrecto si el script falla, puedes imprimir en precio base oculto para el usuario final, por ejemplo en un data-attribute
, asi el HTML impreso con PHP:
echo '<section>
<h3>The big Foo</h3>
<p>Lorem ipsum</p>
<p>Price <strong id="item-price" data-price="' . $price . '"></strong></p>
</section>;
Y el JS:
function getFinalPrice(price) // number
{
return price + price * 0.25;
}
// aquí recoges el valor del precio base, del DOM:
const priceNode = document.querySelector('#item-price'); // strong
let price = parseFloat(priceNode.getAttribute('data-price')); // NOTE: aquí hay un cambio
// ahora llamo a la función anterior para tener el "precio final":
price = getFinalPrice(price);
// Añado el precio en el lugar que le corresponde del documento:
priceNode.textContent = price;
En este último ejemplo he añadido también la llamada a la función JS parseFloat
para recoger el valor del precio base del DOM, debe tenerse en cuenta que todo lo que se recupere del DOM, solo hace como un string y en este caso la función getFinalPrice
lo que hace es concatenar, si el precio fuera 100, tendría una salida de 10025 y no de 125, problemas con los lenguajes no tipados.
echo
no es necesario anidar otro. Lo único que debe hacer es interrumpir la construcción del script con comillas simples y punto para concatenar la variable:echo'<script language="javascript">swal ... contrato.php?rut=' . $rut . ' ... elRestoDelCodigo ... </script>';