Ahora que ya conoces las herramientas que puedes utilizar para comenzar a programar en JavaScript, vamos a ver la forma de integrar el código de JavaScript en tu código HTML.

Los navegadores web te permiten varias opciones de inserción de código de JavaScript. Podremos insertar código usando las etiquetas <script> </script> y empleando un atributo type indicaremos qué tipo de lenguaje de script estamos utilizando:

Por ejemplo:

<script type="text/javascript">
      //  El código de JavaScript vendrá aquí.
</script>

Otra forma de integrar el código de JavaScript es utilizar un fichero externo que contenga el código de JavaScript y referenciar dicho fichero. Ésta sería la forma más recomendable, ya que así se consigue una separación entre el código y la estructura de la página web y como ventajas adicionales podrás compartir código entre diferentes páginas, centralizar el código para la depuración de errores, tendrás mayor claridad en tus desarrollos, más modularidad, seguridad del código y conseguirás que las páginas carguen más rápido. La rapidez de carga de las páginas se consigue al tener el código de JavaScript en un fichero independiente, ya que si más de una página tiene que acceder a ese fichero lo cogerá automáticamente de la caché del navegador con lo que se acelerará la carga de la página.

Para ello tendremos que añadir a la etiqueta script el atributo src, con el nombre del fichero que contiene el código de JavaScript. Generalmente los ficheros que contienen código JavaScript tendrán la extensión .js.

Por ejemplo:

<script  type="text/javascript"  src="miScript.js"></script>

Si necesitas cargar más de un fichero .js repite la misma instrucción cambiando el nombre del fichero. Las etiquetas de <script> y </script> son obligatorias a la hora de incluir el fichero .js. Atención: no escribas ningún código de JavaScript entre esas etiquetas cuando uses el atributo src .

Para referenciar el fichero origen .js de JavaScript dependerá de la localización física de ese fichero. Por ejemplo en la línea anterior el fichero miScript.js deberá estar en el mismo directorio que el fichero .html. Podrás enlazar fácilmente a otros ficheros de JavaScript localizados en directorios diferentes de tu servidor o de tu dominio. Si quieres hacer una referencia absoluta al fichero, la ruta tendrá que comenzar por http://, en otro caso tendrás que poner la ruta relativa dónde se encuentra tu fichero .js.

Ejemplos:

<script  type="text/javascript"  src="http://www.midominio.com/miScript.js"></script>

En este caso estamos referenciando nuestro script mediante una referencia absoluta, que hace referencia a nuestro dominio en primer lugar y posteriormente a la ruta dentro de nuestro domino. Es decir, estamos referenciando mediante una URL que se refiere a nuestro domino.

<script  type="text/javascript"  src="./js/miScript.js"></script>

En este caso estamos referenciando nuestro script mediante una referencia relativa, que hace referencia a nuestro nuestro script desde el mismo directorio o carpeta en la que se encuentra la página .html en la que está incrustado dicho código, pero situado en el directorio js.

Cuando alguien examine el código fuente de tu página web verá el enlace a tu fichero .js, en lugar de ver el código de JavaScript directamente. Ésto no quiere decir que tu código no sea inaccesible, ya que simplemente copiando la ruta de tu fichero .js y tecleándola en el navegador podremos descargar el fichero .js y ver todo el código de JavaScript. En otras palabras, nada de lo que tu navegador descargue para mostrar la página web podrá estar oculto de la vista de cualquier programador.

A veces te puedes encontrar que tu script se va a ejecutar en un navegador que no soporta JavaScript. Para ello dispones de una etiqueta <noscript>Texto informativo</noscript> que te permitirá indicar un texto adicional que se mostrará indicando que ese navegador no soporta JavaScript. Pero eso no es lo habitual hoy día.

Para insertar código Javascript en HTML (suponemos que trabajamos en HTML5) utilizaremos el siguiente código:

• Insertando el código directamente en el archivo index.html:
  

  <!DOCTYPE html>
  <html lang="es-ES">
      <head>
          <meta charset="UTF-8">
          <title>Hola mundo desde DWEC</title>
          <script>
              const saludar = () => {
                  alert('Hola mundo desde DWEC');
              }
          </script>
      </head>
      <body>
          <h1>
              Hola Mundo desde DWEC
          </h1>
          <button onclick="saludar()">Saludar</button>
      </body>
  </html>

• Haciendo referencia al código existente en otro archivo .js:
  Creamos un archivo nombrado miScript.js cuyo contenido es el siguiente:
  

  const saludar = () => {
      alert('Hola mundo desde DWEC');
  }

  Y ahora lo referenciamos desde el archivo index.html:
  

  <!DOCTYPE html>
  <html lang="es-ES">
      <head>
          <meta charset="UTF-8">
          <title>Hola mundo desde DWEC</title>
          <script src="miScript.js"></script>
      </head>
      <body>
          <h1>
              Hola Mundo desde DWEC
          </h1>
          <button onclick="saludar()">Saludar</button>
      </body>
  </html>

Seguramente estarás pensando en cómo puedes proteger el código de JavaScript que vas a programar, del uso fraudulento por otros programadores o visitantes a tu página: la respuesta rápida a esa pregunta es que es imposible hacerlo.

Para que el código de JavaScript pueda ejecutarse correctamente deberá ser cargado por el navegador web y por lo tanto su código fuente deberá estar visible al navegador. Si realmente te preocupa que otras personas usen o roben tus scripts, deberías incluir un mensaje de copyright en tu código fuente. Piensa que no solamente tus scripts son visibles al mundo, sino que los scripts del resto de programadores también lo son. De esta forma puedes ver fácilmente cuando alguien está utilizando al pie de la letra tus scripts, aunque ésto no evita que alguien copie tu código y elimine tu mensaje de copyright.

Lo más que se puede hacer es ofuscar el código, o hacerlo más difícil de entender. Las técnicas de ofuscación incluyen la eliminación de saltos de línea, espacios en blanco innecesarios, tabuladores, utilización de nombres ininteligibles en las funciones y variables, utilización de variables para almacenar trozos de código, uso de recursividad, etc. La forma más rápida de hacer todas esas tareas de ofuscación es utilizar un software que producirá una copia comprimida del script que has programado para facilitar su carga rápida.

Para que veas un ejemplo de ofuscador de JavaScript visita:

Herramienta para ofuscar JavaScript.

Lo mejor es que cambies ese paradigma y pienses de una manera diferente. En lugar de proteger tu código, lo mejor es promocionarlo y hacer ostentación de él, añadiendo comentarios útiles en el código fuente, publicándolo en tu blog o en webs de programación, etc. Lo suyo sería que lo compartieras con toda la comunidad, con la licencia que estimes oportuno, por ejemplo en GitHub.