Lo primero, deberías mantener el código JavaScript separado del documento HTML siempre que sea posible. Dicho esto, puedes imprimir un valor que usarás en JS igual que cualquier otro elemento de la página:
<?php
// Este bloque contiene HTML
echo '<h1>Ejemplo</h1>';
// Este bloque contiene JS
// La variable name JS tendrá el valor de la variable PHP $name
// El código muestra una ventana emergente con un mensaje
echo '<script>';
echo 'var name = "' . $name . '"';
echo 'alert("El nombre es: " + name)';
echo '</script>';
// Este bloque contiene HTML
echo '<p>Lorem ipsum</p>';
Y como yo lo hago:
El JavaScript en sus propios ficheros. Los cargo en el head del documento HTML en un orden determinado, incluyendo el atributo defer
, p.e.:
Los valores se "imprimen" en el HTML de la página. Puedes optar por varias soluciones, algunas veces incluso se hace innecesario el JS:
Se puede imprimir HTML oculto y mostrarlo en su momento con JS o mediante CSS.
Los datos pueden imprimirse en el HTML como valores de campos de tipo hidden o como atributos data-x
de elementos HTML a conveniencia.
Con esta última técnica se pueden guardar números, palabras, textos... o incluso JSONs si requieres más datos con algún tipo de estructura. Para recuperar y usar esos datos en JS se cargan los nodos donde se han incluido y se extraen. Para mantener cierta separación entre el HTML destinado a estructurar y visualizar el contenido de la página y el que se usa para almacenar datos, los campos ocultos con atributos data-x
son una buena elección.
NOTA: esta forma de trabajo es independiente del lenguaje utilizado en el servidor web, al final el navegaodor esta trabajando con el HTML, JS y CSS que le llega...
Ejemplo (HTML impreso con PHP u otra tecnología de servidor):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- constructor de nodos DOM -->
<script defer
src="https://rawcdn.githack.com/oricis/JS-UI/e467ecb5a515e235cc85bdf9972399ef37fa92cf/src/dom/NodeBuilder.js"></script>
<!--
El JS va en los siguientes ficheros, lo pongo en la parte inferior
del body para poder ejecutarlo en el ejemplo:
<script defer src="./assets/js/utils/queries.js"></script>
<script defer src="./assets/js/app.js"></script>
-->
</head>
<body>
<header>
<h1>Ejemplo lista de personas</h1>
</header>
<main>
<input type="hidden" id="people-total" value="2">
<section id="name-list"
data-people='[{"name":"Foo","age":21},{"name":"Baz","age":36}]'>
<h3>Nombres y edades:</h3>
<ul id="people"></ul>
<p>Total: <strong class="people-total">0</strong></p>
</section>
</main>
<footer>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
<script>
window.onload = () => {
////////////////////////////////////////////////////////////
// Contenido del fichero "queries.js"
function qs(strSelector) // js node
{
return document.querySelector(strSelector);
}
function getDataValue(node, strDataName) // string
{
return (strDataName
&& node.nodeType === 1
&& node.hasAttribute('data-' + strDataName))
? node.getAttribute('data-' + strDataName)
: '';
}
////////////////////////////////////////////////////////////
// Contenido del fichero "app.js"
const peopleTotal = qs('#people-total').value;
const peopleDataContent = getDataValue(qs('section#name-list'), 'people');
const peopleData = JSON.parse(peopleDataContent);
const ulNode = qs('ul#people');
for (let index = 0; index < peopleData.length; index++) {
const personData = peopleData[index];
const liNode = composeLiNode(
personData.name,
personData.age
);
ulNode.appendChild(liNode);
}
qs('strong.people-total').innerText = peopleTotal;
function composeLiNode(name, age) // js node
{
const liText = name + ', ' + age;
return nodeBuilder.build('li', {}, null, liText);
}
};
</script>
</body>
</html>
En el ejemplo, he incluido un número como valor de un campo oculto, seguidamente lo recupero con JS y lo añado a la página.
Se ha incluido un pequeño JSON dentro de un atributo data-people
, de un section
HTML que se usa para llenar de contenido una lista.
Hay que tener en cuenta, que lo que se imprime como HTML se recupera como string. Si los números se usaran en cálculos hay que convertirlos al primitivo correspondiente, un JSON de datos tambien hay que "parsearlo".
html
y luego leer ese campo con JavaScript. Saludos