JavaScript: ubicación en archivo HTML

Existe la flexibilidad de incluir código JavaScript en cualquier lugar de un documento HTML. Sin embargo, las formas más preferidas de incluir JavaScript en un archivo HTML son las siguientes:

Secuencia de comandos en la sección <head> ... </head>.
Script en la sección <body> ... </body>.
Script en las secciones <body> ... </body> y <head> ... </head>.
Script en un archivo externo y luego incluirlo en la sección <head> ... </head>.

En la siguiente sección, veremos cómo podemos colocar JavaScript en un archivo HTML de diferentes formas.

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

Si desea que se ejecute un script 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 la sección <body> ... </body>

Si necesita que se ejecute una secuencia de comandos mientras se carga la página para que la secuencia de comandos genere contenido en la página, la secuencia de comandos se coloca en la parte <body> del documento. En este caso, no tendría ninguna función definida 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 las secciones <body> y <head>

Puede poner su código JavaScript en las secciones <head> y <body> 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 empiece a trabajar más extensamente con JavaScript, es probable que descubra que hay casos en los que está reutilizando código JavaScript idéntico en varias páginas de un sitio.

No está restringido a mantener un código idéntico en varios archivos HTML. losscript La etiqueta proporciona 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 script etiqueta y su src atributo.

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

Para usar JavaScript desde una fuente de archivo externa, debe escribir todo su código fuente 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 filename.js archivo y luego puede usar sayHello en su archivo HTML después de incluir el archivo filename.js.

function sayHello() {
   alert("Hello World")
}