Breaking News

Home / Unlabelled / JavaScript - Ubicación en archivo HTML

JavaScript - Ubicación en archivo HTML

July 03, 2018

JavaScript - Ubicación en archivo HTML


Existe una flexibilidad para incluir código JavaScript en cualquier parte de un documento HTML. Sin embargo, las formas más preferidas de incluir JavaScript en un archivo HTML son las siguientes:
  • Script en <head>... </head> sección.
  • Script en <body>... </body> sección.
  • Script en <body>... </body> y <head>... </head> secciones.
  • Script en un archivo externo y luego incluirlo en <head>... </head> sección.
En la siguiente sección, veremos cómo podemos colocar JavaScript en un archivo HTML de diferentes maneras.


JavaScript en <head>... </head> sección

Si desea que un script se ejecute en algún evento, como cuando un usuario hace clic en algún lugar, colocará ese script en el encabezado de la siguiente manera:
<html>

   <head>
   
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>
   
</html>
Este código producirá los siguientes resultados:


JavaScript en <body>... </body> sección

Si necesita una secuencia de comandos para ejecutar mientras la página se carga para que la secuencia de comandos genere contenido en la página, la secuencia de comandos se encuentra en <body> porción del documento. En este caso, no tendría definida ninguna función usando JavaScript. Eche un vistazo al siguiente código.
<html>

   <head>
   </head>
   
   <body>
   
      <script type="text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
      
   </body>
</html>
Este código producirá los siguientes resultados:

JavaScript en <body> y <head> Secciones

Puede poner su código JavaScript en <head> y <cuerpo> sección en conjunto de la siguiente manera -
<html>
   <head>
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type="text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type="button" onclick="sayHello()" value="Say Hello" />
      
   </body>
</html>
Este código producirá el siguiente resultado:

JavaScript en archivo externo


A medida que comienza a trabajar más extensamente con JavaScript, es probable que descubra que hay casos en los que está reutilizando el código JavaScript idéntico en varias páginas de un sitio.
No tiene restricciones para mantener código idéntico en múltiples archivos HTML. La etiqueta scriptproporciona un mecanismo que le permite almacenar JavaScript en un archivo externo y luego incluirlo en sus archivos HTML.
Aquí hay un ejemplo para mostrar cómo puede incluir un archivo JavaScript externo en su código HTML usando la etiqueta script y su atributo src .
<html>

   <head>
      <script type="text/javascript" src="filename.js"></script>
   </head>
   
   <body>
     .......
   </body>
</html>
Para usar JavaScript desde un origen de archivo externo, debe escribir todo el código fuente de JavaScript en un archivo de texto simple con la extensión ".js" y luego incluir ese archivo como se muestra arriba.
Por ejemplo, puede mantener el siguiente contenido en el archivo filename.js y luego puede usar la funciónsayHello en su archivo HTML después de incluir el archivo filename.js.
function sayHello() {
   alert("Hello World")
}

No comments

Subscribe to: Post Comments ( Atom )