Por otro lado el lado-del-servidor es leído por el servidor, entonces el resultado es descargado y mostrado en el navegador. Ejemplos del empleo popular del lenguaje web del lado-del-servidor incluye PHP, Python, Ruby y ASP.NET. ¡Y JavaScript! Este lenguaje también puede ser usado como un lenguaje de lado-del-servidor, por servirnos de un ejemplo en el popular ambiente de Node.js – puedes localizar más información sobre JavaScript del lado del servidor en nuestro tema.

Código dinámico en frente de código estático

La palabra
dinámicoes utilizada para describir ambos lados-del-cliente del servicio en JavaScript, y lenguajes del lado-del-servidor. Es referido a la habilidad para actualizar lo visualizado de una página/app para mostrar contenido diferente en diferentes circunstancias, requiriendo nuevo contenido a generar. Por ejemplo, subir ficheros desde una base de datos, donde el lado-del-cliente de JavaScript produce dinámicamente nuevo contenido dentro del navegador del cliente, por servirnos de un ejemplo, creando una nueva tabla en código HTML, insertando datos que son llamados desde un servidor propio, para entonces visualizarlo en la tabla de la página web y mostrárselo al usuario, El significado es un tanto diferente entre los 2 contextos, pero teniendo relación, y aprovechando el trabajo mutuo entre (lado-del-servidor y lado-del-cliente).

Una página web sin ninguna actualización de contenido dinámico es llamada como
estática– puesto que únicamente muestra el mismo contenido todo el tiempo.

¿Cómo añadir JavaScript a tu página web?

JavaScript es aplicado a tu página en código HTML de una manera afín al CSS. Donde el CSS usa el elementopara aplicar hojas de estilos externas y la etiquetaes un factor para aplicar hojas de estilos de manera interna al HTML, JavaScript solamente necesita de un solo amigo en el mundo del HTML - que es el elemento. Aprendamos cómo funciona esto.

JavaScript por dentro

1. Primero que nada, haz una copia de nuestro archivo ejemplo. Guárdalo en algún sitio donde puedas hallarlo.


2. Abre el fichero en tu navegador y en tu editor de texto. Verás que el HTML creará una simple página web conteniendo un botón.


3. Luego, ve a tu editor de texto y añade lo siguiente justo antes del cierre de la etiqueta
   </body>:
   

   <script> // JavaScript goes here</script>

   
   


4. Ahora, añadiremos algo de JavaScript dentro de nuestra etiquetapara que la página haga algo más interesante – añade el próximo código justo debajo de la línea de código "// JavaScript goes here":
   

   function createParagraph()  var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para);var buttons = document.querySelectorAll('button');for (var i = 0; i < buttons.length ; i++)  buttons[i].addEventListener('click', createParagraph);

   
   


5. Guarda tu archivo y actualiza tu navegador – ahora deberías ver cuando das clic en el botón, que un nuevo párrafo es generado y posicionado bajo él.

Nota: Si según lo que parece tu ejemplo no funciona, examina tu código pasito a pasito y asegúrate que todo lo hayas hecho bien, ¿verificaste si guardaste tu archivo con la extensión
.html? ¿Añadiste el tagjusto después del tag
</body>? ¿Introduciste el código JavaScript como se mostraba anteriormente?
JavaScript es sensitivo y exigente con mayúsculas y minúsculas, así que necesitas introducir la sintaxis exactamente como se muestra, de otra forma no funcionará.

JavaScript Externo

Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en un archivo externo? Entonces exploremos esto ahora.

1. Primero, crea un nuevo archivo en la misma dirección o bien sitio de tu archivo muestra de HTML. Llámalo
   script.js– asegúrate que lleve la extensión .js así es como es reconocido un fichero JavaScript.


2. Siguiente, copia todo el código que has escrito previamente dentro del elementoy pégalo dentro del fichero .js y guárdalo.


3. Ahora remplaza todo del código que está dentro del elementopor lo siguiente:
   

   <script src="script.js"></script>

   
   


4. Guarda y refresca tu navegador, y ¡deberías de ver exactamente lo mismo! Realmente hiciste exactamente el mismo trabajo, mas ahora conseguimos que el código esté en un archivo externo. En general esto es algo bueno en términos de organizar tu código y hacerlo reusable a través de múltiples archivos HTML. Además los archivos HTML son fáciles de leer sin tantos pedazos de script por todas partes.

Nota: Puedes ver esta versión en GitHub comoy().

Gestores de JavaScript en línea

A veces puedes apreciar que te encontrases con ciertas líneas de JavaScript dentro de ficheros HTML. Es posible que se vean algo similar a esto:

Puedes procurar esta versión de nuestro demo abajo.

Este demo tiene la misma funcionalidad tanto como en las 2 secciones precedentes, excepto que el elementoincluye un controlador de línea
onclickpara hacer marchar el código cuando el botón en presionado.

Por favor no hagas esto, de otra manera.Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente – Deberías de incluir el atributo
onclick="createParagraph()"en cada botón que quieras para ser aplicado por JavaScript.

Usar los constructores de JavaScript deja seleccionar todos los botones utilizando una sola instrucción. El código que usamos arriba sirve para este propósito viéndose así:

Esto puede verse un poco más grande que el atributo
onclickpero esto funcionará para todos y cada uno de los botones sin importar lo más mínimo cuantos haya en la página, aun cuando sean añadidos o removidos. JavaScript no necesita ser alterado.

Nota: Intenta editar tu versión de
apply-javascript.htmly añade un poco más de botones en el archivo. Cuando vuelvas a cargar la página, deberías notar que todos y cada uno de los botones crean un párrafo cuando son cliqueados. ¿Estupendo no?

Estrategias de carga de scripts

Hay una serie de problemas relacionados con conseguir que los scripts se carguen en el instante conveniente. Nada es tan simple como semeja! Un inconveniente común es que todo el HTML de una página se carga en el orden en que aparece. Si utiliza JavaScript para manipular elementos de la página (o más precisamente, el), su código no funcionará si el JavaScript es cargado y analizado ya antes que el código HTML al que está intentando manipular.

En los ejemplos de código anteriores, en los ejemplos internos y externos el JavaScript se carga y ejecuta en la cabecera del documento, antes de que se analice el cuerpo HTML. Esto podría causar un error, así que hemos utilizado algunas construcciones para evitarlo.

En el ejemplo interno, puede ver esta estructura alrededor del código:

Se trata de un receptor de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo que quiere decir que el cuerpo HTML está absolutamente cargado y analizado. El JavaScript en este bloque no se ejecutará hasta después de que se dispare ese evento, por consiguiente se evita el error (más adelante en el curso).

En el ejemplo externo, empleamos una función JavaScript más moderna para solucionar el problema, el atributo
async, que le señala al navegador que prosiga descargando el contenido HTML una vez que se haya alcanzado el elemento de la etiqueta
<script>.

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará..

Nota: En el caso externo, no necesitábamos utilizar el acontecimiento
DOMContentLoadedporque el atributo
asyncnos solventaba el problema. No empleamos la solución de
asyncpara el ejemplo interno de JavaScript pues
asyncsólo funciona para scripts externos.

Una solución anticuada a este inconveniente solía ser poner su elemento de script justo en la parte inferior del cuerpo (por ejemplo, inmediatamente antes de la etiqueta
</body>), de forma que se cargara después de que todo el HTML haya sido analizado. El problema con esta solución (y la solución
DOMContentLoadedvista previamente) es que la carga/análisis del script está completamente bloqueada hasta el momento en que se haya cargado el DOM HTML. En sitios más grandes con mucho JavaScript, esto puede ocasionar un gran inconveniente de rendimiento, ralentizando su sitio. Esta es la razón por la que se agregó
asynca los navegadores!

async y defer

En realidad hay dos maneras de eludir el problema del script de bloqueo —
asyncy
defer. Veamos la diferencia entre estos dos.

Los scripts async descargarán el script sin bloquear la renderización de la página y lo ejecutarán tan pronto como el script termine de descargarse. No se garantiza que los scripts se ejecutarán en un orden específico, sólo que no impedirán que se muestre el resto de la página. Es mejor utilizar
asynccuando los scripts de la página se ejecutan independientemente uno del otro y no dependen de ningún otro script de la página.

Por ejemplo, si tiene los próximos elementos de script:

No puede confiar en el orden en que se cargarán los scripts.
jquery.jspuede cargar ya antes o después de
script2.jsy
script3.jsy si este es el caso, cualquier función en esos scripts que dependa de
jqueryproducirá un fallo porque
jqueryno se definirá en el momento en que se ejecute el script.

Deferejecutará los scripts en el orden en que aparecen en la página y los ejecutará tan pronto como el script y el contenido sean descargados:

Todos los scripts con el atributo
deferse cargarán en el orden en que aparecen en la página. Así que en el segundo ejemplo, podemos estar seguros de que
jquery.jsse cargará ya antes que
script2.jsy
script3.jsy que
script2.jsse cargará antes que
script3.js.

Para resumir:

• Si sus scripts no precisan esperar para el análisis y pueden ejecutarse independientemente sin dependencias, entonces use
  async.


• Si sus scripts necesitan aguardar a ser analizados y dependen de otros scripts, cárguelos usando
  defery coloque sus elementos
  <script>en el orden pertinente en el que usted desea que el navegador los ejecute.

Comentarios

Así como en HTML y CSS, es posible redactar comentarios dentro de tu código de JavaScript que serán ignorados por el navegador, sencillamente existe para proveer instrucciones a tus colegas desarrolladores de como el código marcha (y para ti, por si retornas a tu código después de 6 meses y no recuerdas lo que hiciste). Los comentarios son muy útiles, deberías emplearlos más de manera frecuente, particularmente para grandes aplicaciones. He aquí 2 tipos:

• Comentarios de una sola línea escritos después de dos barras inclinadas (//), Ejemplo:
  

  // Soy un comentario

  
  


• Comentarios de múltiples líneas escritos entre las cadenas /* y */, ejemplo:
  

  /* Yo tambíen soy un commentario*/

  
  

Entonces por poner un ejemplo, podemos anotar nuestro último demo de JavaScript con comentarios como:

Resumen

Ahí vas, tus primeros pasos dentro del planeta de JavaScript, hemos empezado únicamente con teoría, para comenzar a entender por qué empleamos JavaScript, y qué tipo de cosas puedes utilizar con él. En el camino viste varios ejemplos de código y aprendiste cómo JavaScript encaja con el resto del código de tu página web, entre otras muchas cosas.

JavaScript es posible que se vea un poco desmoralizador de momento, pero deja de preocuparte – en este curso te vamos a llevar a través de pasos simples que harán que sigas adelante. En el siguiente artículo iremos, logrando un salto directo para edificar tus propios ejemplos en JavaScript.​​​​​

En este módulo