Tutoriales JavaScript | Modos de implementación

Curso completo de JavaScript para todos los niveles

//Tutoriales JavaScript | Modos de implementación
Tutoriales JavaScript | Modos de implementación2019-06-17T09:13:02+00:00

Lección 2 . Modos de implementación

Existen dos modos principales de implementación de JavaScript en una página web estática o dinámica: insertando directamente el código en la página o enlazando un archivo aparte.

Inserción de código directamente en la página – En línea

Vamos a partir de un ejemplo y lo explicamos:

Copy to Clipboard

En este ejemplo estamos viendo una página web muy básica con todas las etiquetas mínimas para cumplir los estándares, pero vamos a centrarnos en las dos siguientes:

Copy to Clipboard

Estas dos etiquetas sirven para comunicar al navegador que entre las mismas va a ir incrustado un código en JavaScript. Podemos extender este código tanto como queramos pero no es lo más eficiente, ya que los navegadores trabajan interpretando y cargando los archivos de uno en uno y si uno es demasiado grande tardaría mucho en mostrarnos los que vienen detrás.

Otra forma de incrustar código en directamente en un evento. Más adelante veremos los eventos, por ahora vamos a analizar el siguiente ejemplo:

Copy to Clipboard

Aquí ya no vemos etiquetas “script” por ningún sitio, sino que el código lo hemos incrustado en el evento “onclick” de un botón. Si nos fijamos en el código JavaScript que hay en el primer ejemplo y en el segundo, existe una pequeña diferencia pero muy importante que es el entrecomillado de texto.

Primer ejemplo:

Copy to Clipboard

Segundo ejemplo:

Copy to Clipboard

El texto “Esto es un alert” una vez va entre comillas dobles y otra vez va entre comillas simples. ¿A qué se debe? El evento “onclick” no deja de ser un atributo del botón, y como todos los atributos tienen que ir entre comillas, tenemos que diferenciar o hacerle saber al navegador que vamos a incluir un texto, entonces para diferenciar el inicio y el fin del atributo del inicio y el fin de un texto en JavaScript hay que usar las comillas contrarias. Sería totalmente válido utilizarlas en otro orden:

Copy to Clipboard

Según la situación en la que nos encontremos utilizaremos una forma u otra.

Existen otras formas de incrustar código JavaScript en línea, pero dependeremos de otros lenguajes de programación como PHP.

Inserción de código enlazando un archivo

Otra forma de insertar código JavaScript en una página web es enlazando un archivo .js en la cabecera de la página. Como hemos hecho antes, vamos a poner el código y después lo analizamos.

Copy to Clipboard
Copy to Clipboard

En este caso tenemos dos archivos: index.html y archivo.js

Un principio básico de la programación es la creación de un código limpio, tabulado, comentado, modularizado y comprensible así como una estructura de archivos jerarquizada. En ocasiones no vamos a trabajar solos y es de agrado encontrarse con un código que cumpla estas características. Existen diferentes estándares para crear un código comprensible como puede ser la Notación Húngara para la nomenclatura de las variables que vamos a utilizar en nuestro código  (https://es.wikipedia.org/wiki/Notaci%C3%B3n_h%C3%BAngara) pero no vamos a entrar en tanto detalle.

Después de esta pequeña aclaración sobre la estructura del código que hay que tener siempre presente, vamos a analizar el primer archivo: index.html.

Como podemos apreciar el “body” está vacío, y en el “head” vemos una línea nueva:

Copy to Clipboard

En esta línea de código estamos enlazando el archivo “archivo.js” que se encuentra en el directorio “js” (mantenemos una estructura de archivos). Para enlazar un archivo JavaScript en un archivo HTML tenemos que hacerlo abriendo y cerrando una etiqueta script. En la apertura debemos especificar qué tipo de archivo es y donde se encuentra localizado. La localización de este archivo puede ser local o externamente, es decir, el archivo puede estar alojado en otro servidor web diferente al nuestro.

Copy to Clipboard

Por otro lado tenemos el archivo “archivo.js” que es el que contiene el código en JavaScript. Podemos ver una función alert que muestra un texto. Al ejecutar el archivo “index.html” nos mostrará el alert que tenemos en el archivo “archivo.js” ya que lo hemos enlazado en la cabecera de la página.

Podemos enlazar tantos archivos como queramos. En páginas muy grandes como puede ser una tienda online, la cabecera de la página alcanza grandes tamaños debido a todos los archivos de todo tipo que tenemos que hacer referencia.

Valora este tutorial