Cómo inyectar una variable javascript en HTML

Escrito por michael carroll | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo inyectar una variable javascript en HTML
Cómo inyectar una variable javascript en HTML. (Comstock/Comstock/Getty Images)

JavaScript ofrece código de proceso dinámico orientado al desarrollo web, en contraste con los diseños estáticos se pueden definir en HTML. Puedes escribir un código HTML especial que consulta una función Javacript cuando se cargue la página, lo que te permitirá influir en la forma en la que se comporte una página en función de los resultados de un algoritmo JavaScript. Logra esto mediante la etiqueta "script" en HTML y el método document.write () en JavaScript. De este modo puedes "inyectar" variables de JavaScript en el código HTML de una página Web, la cual puede aparecer de forma diferente cada vez que se cargue basada en el código JavaScript que escribas.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Inserta el código siguiente en la sección del cuerpo del documento HTML donde desees que la variable JavaScript afecte el diseño:

    myFunction language="javascript"> Messenger (); </ script>

    La función de JavaScript llamada "myFunction" es invocada cuando esta parte de la página se carga. Puedes nombrar tu función como quieras, siempre y cuando sea un nombre de función JavaScrip válido.

  2. 2

    Inserta el siguiente código entre las etiquetas "head" de tu documento HTML:

    <script language="javascript">  function myFunction() {  var randomNumber = Math.round(Math.random()*10);  document.write("<b>" + randomNumber + "</b>");  }  </script> 

    Este sencillo script añade código HTML cuando éste es llamado usando la sentencia document.write(), e inyecta la variable "randomNumber" en el diseño HTML después de asignarle un valor aleatorio. También ten en cuenta cómo el código HTML -entre comillas- y la variable de JavaScript están concatenadas usando el signo más (+) dentro de la llamada a document.write (). Utiliza múltiples concatenaciones para afectar el código HTML de una manera específica -asignando una variable a un atributo de una etiqueta, por ejemplo- y usa varias llamadas a document.write () para hacer que a tu código le sea más fácil trabajar con éstas.

  3. 3

    Guarda el archivo HTML, ábrelo en un navegador Web. Recarga la página un par de veces y observa que el número cambia aleatoriamente

Consejos y advertencias

  • Amplia este ejemplo para explorar las muchas maneras de las que puedes inyectar contenido en un fichero HTML con código JavaScript. Puedes incluso escribir todo el diseño en una función de JavaScript, e inyectarlo con una sola llamada a document.write ().

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles