Programación del lado del cliente y del lado del servidor

El uso de JavaScript en los sitios web, que con el tiempo se ha vuelto cada vez más complejo
y, a menudo, contiene una lógica muy sofisticada, se denomina programación del lado del
cliente. El código a ejecutar se carga junto con la página en el navegador, del lado del
usuario, y el intérprete que forma parte del navegador web permite su ejecución.

Hoy en día, JavaScript es el único lenguaje compatible con todos los principales navegadores
web, y aproximadamente el 95 % de las páginas web de todo el mundo incorporan código
JavaScript en ellas. Desde el principio, las páginas web utilizaron JavaScript en el lado del
cliente para agregar interactividad y cambiar dinámicamente el contenido.

JavaScript ofrece muchos frameworks sobre los cuales podemos construir aplicaciones
web y redes sociales enormes y complejas (probablemente hayas escuchado los nombres
de frameworks como React o Angular).

Todo esto puede funcionar en una variedad de equipos, desde estaciones de trabajo de alto
rendimiento hasta simples teléfonos inteligentes. Gracias al poder de JavaScript, podemos
pedir comida, jugar en el navegador, ver películas en plataformas de transmisión y estar en
contacto constante con las personas importantes para nosotros. JavaScript es tan popular que
continuamente se dedica más y más esfuerzo a usarlo, no solo como una solución del lado del
cliente.

JavaScript comenzó a aparecer en otras áreas, como en la programación de lado del

servidor de aplicaciones web complejas, también llamadas back-end. Estos programas se
ejecutan en servidores, procesando datos (por ejemplo, de bases de datos), que después
del procesamiento estarán disponibles en el lado del cliente. La flexibilidad de este
lenguaje y su relativa sencillez lo han hecho mucho más aplicable, por ejemplo, en
aplicaciones móviles, o incluso en la programación de UAVs - Vehículo Volador No
Tripulado (algunos drones ejecutan programas escritos en este lenguaje).

¿Es este el lenguaje de programación perfecto? - Desventajas

Desde 2015, muchos aspectos de JavaScript han cambiado y se han agregado muchas
características nuevas. Muchos de estos cambios se introdujeron para facilitar la
migración a JavaScript para los programadores que conocen otros Lenguajes populares, de
los cuales originalmente difería bastante en ciertos aspectos, como el manejo de objetos.
Todavía podemos usar el lenguaje de la manera antigua, pero se recomienda usar el
JavaScript moderno.
JavaScript no es un lenguaje de programación perfecto. Debido a su naturaleza, no es
adecuado para ciertas aplicaciones. Por ejemplo, no tiene sentido usarlo para escribir
programas que requieran cálculos matemáticos avanzados o un rendimiento muy alto.

Algunas limitaciones se deben al propio concepto del lenguaje, pero la gran mayoría están
relacionadas con la plataforma en la que lo usamos. Esto es especialmente visible cuando
se escribe código para ser ejecutado en un navegador, que como dijimos anteriormente se
denomina del lado del cliente. En tal situación, la funcionalidad de JavaScript está limitada
por el hecho de que los navegadores, por razones de seguridad, ejecutan código de
secuencia de comandos en un entorno sandbox (un entorno separado del mundo
exterior), que no permite acceso a archivos y recursos locales (es decir, aquellos archivos
que están en la computadora donde se inicia el navegador).

Un sandbox en informática o un entorno de pruebas, es una máquina virtual aislada en la

que se puede ejecutar código de software potencialmente inseguro sin afectar a los
recursos de red o a las aplicaciones locales.

Otro inconveniente es que como el código no está compilado, entra en el navegador de la

misma forma, o muy similar, a la que lo escribimos nosotros. ¿Por qué es esto una
desventaja? Esto se debe a que todos pueden ver nuestra solución en una forma fácil de
leer y usarla (ya sea en fragmentos o incluso en su totalidad) sin nuestro permiso.

Algo de ayuda aquí puede ser la ofuscación del código, que consiste en transformar
nuestro script listo en una forma un poco menos legible (por ejemplo, generando nombres
aleatorios cortos de variables y funciones, eliminando los signos de final de línea, etc.),
pero el simple hecho es que, si alguien quiere robar nuestro código JavaScript, es muy
poco lo que podemos hacer para detenerlo.

¿Es este el lenguaje de programación perfecto? -

Ventajas
Por otro lado, JavaScript tiene muchas ventajas sobre otros lenguajes de programación, y
una de las más grandes es una comunidad muy activa y solidaria. Es fácil encontrar
soluciones a problemas comunes y encontrar ayuda en general. Esto también significa que
se desarrollan activamente herramientas que funcionan con JavaScript.

Otra gran ventaja es una gran cantidad de frameworks y librerías listas para usarse que
brindan la mayoría de las funcionalidades y características comúnmente requeridas. El
lenguaje en sí es relativamente fácil de aprender y nos permite centrarnos en el trabajo en
lugar de luchar con la sintaxis (es decir, la forma de construir las instrucciones que
componen el código de nuestro programa).

Además, JavaScript no requiere que compres herramientas costosas para trabajar con él, y
las herramientas realmente buenas ya están integradas dentro de tu navegador web. Por
último, pero no menos importante, los grandes jugadores como Google, Facebook y
Mozilla apoyan activamente las herramientas de JavaScript y su desarrollo.

Sin embargo, lo que es una ventaja para unos puede resultar una desventaja para otros.
Un ejemplo de esto es el manejo dinámico de los tipos de datos en JavaScript. Consiste en
que podemos almacenar datos de cualquier tipo en una variable (una variable es un
contenedor en el que almacenamos los datos que utilizaremos).

Por ejemplo, durante la ejecución del programa, podemos almacenar el número 10 en una
variable, y en el siguiente paso usar la misma variable para almacenar la cadena "abc"
(borrando el valor anterior automáticamente. No te preocupes si no entiendes en este
momento, porque cubriremos todos estos términos más adelante).

Por lo general, esto es muy conveniente, pero varias personas han encontrado que esta
característica del lenguaje es una desventaja. En su opinión, facilita que un programador
cometa errores en ciertas situaciones. Al agregar manejo estático de los tipos de datos,
donde una variable solo puede contener un tipo de dato (por ejemplo, números) durante
la ejecución del programa, se creo un nuevo lenguaje llamado TypeScript.

Recuerda también que si aprendes a programar en un lenguaje, normalmente te será

mucho más fácil aprender el siguiente, que por alguna razón puede ser mejor para
resolver un problema en particular.

Pero comencemos ahora con JavaScript, que, debido a su sintaxis flexible y simple, es
perfecto para aprender como primer lenguaje.

Preparémonos para trabajar

Como mencionamos anteriormente, JavaScript se puede usar en varios entornos, aunque la
mayoría de las veces será un navegador web o un servidor con un entorno [Link]. Cada
entorno impone una manera un poco diferente de usar este lenguaje, y aparecen algunos
mecanismos o funciones propias del mismo. Sin embargo, la parte esencial del lenguaje, su
núcleo, sigue siendo el mismo.

Fundamentos de JavaScript 1 (JSE):

Módulo 1
Sección 2
Configuración del entorno de programación

Temas en esta sección:

 Herramientas de desarrollo
 Entorno de desarrollo en línea
 Entorno de desarrollo local (editor de código, intérprete, depurador)

Herramientas de desarrollo
Como cualquier otra tarea, la programación requiere las herramientas y el espacio de trabajo
adecuados. El desarrollo de software, en la mayoría de los casos, requiere un editor de
código y un compilador o intérprete de un lenguaje determinado. Este es el conjunto
mínimo, que podemos ampliar según sea necesario con otras herramientas.

También podemos utilizar el depurador, que es una herramienta que nos permite, entre otras
cosas, pausar el programa en el lugar indicado y analizar su estado actual (por ejemplo, los
valores de las variables indicadas).

Entorno de desarrollo en línea

Los entornos en línea, son sitios que actúan como un editor sencillo y un entorno de
ejecución. Todos ellos tienen conjuntos similares de características. Tienen diferentes
interfaces de usuario, pero en principio se comportan de manera similar. Te permiten escribir
código, ejecutarlo con fines de prueba y, en la mayoría de los casos, compartirlo con otros
usuarios.

En el caso de JavaScript, donde la preparación de un entorno local que funcione se reduce a

instalar un editor de código y ejecutar el navegador, no son tan importantes como los entornos
de desarrollo regulares. Se utilizan principalmente como plataformas de prueba y
capacitación, o lugares para publicar soluciones de muestra a problemas de programación.

Entre los programadores de JavaScript, los más populares son los siguientes:

 JSFiddle
 CodePen
 JsBin
 Plunker

Durante el curso, utilizaremos un entorno en línea integrado con la plataforma de capacitación.

OpenEDG proporciona un entorno simple para escribir y ejecutar código en varios lenguajes
de programación, incluido JavaScript.

Entorno de desarrollo local

Al comienzo del desarrollo, solo tres elementos son suficientes: un editor de código, un
intérprete (es decir, un entorno de arranque) y un depurador.

ependiendo del nivel de sofisticación, la complejidad del proyecto escrito o el entorno

para el que escribimos nuestros programas (del lado del cliente, o del lado del servidor),
es posible que también se necesiten otras herramientas.

Existirán, entre otras:

 Administradores de paquetes: que permiten la gestión de librerías (que contienen

soluciones listas para usar, que podemos emplear en nuestros programas) o
componentes del entorno de desarrollo (por ejemplo: npm o yarn).

 Ejecutores de tareas y empaquetadores de módulos: utilizados, en términos

simples, para automatizar el proceso de desarrollo de software y unir el código
resultante de muchos archivos y librerías (por ejemplo Grunt o Webpack).

 Frameworks de pruebas: permiten realizar pruebas automáticas para la corrección

de nuestro programa, al buscar posibles errores (por ejemplo Mocha, Jasmine, o
Jest).

 Analizadores de seguridad: como puede adivinar, se usan para controlar la

seguridad de nuestra solución (por ejemplo, Snyk, RetireJS u OWASP Dependency
Check).

La apertura de los entornos de desarrollo web es tanto una bendición como una
maldición. Podemos elegir entre cientos de componentes, a partir de los cuales podemos
crear el entorno más cómodo para nosotros.

Sin embargo, su cantidad, más los cambios dinámicos de herramientas particulares o

incluso las tendencias entre los programadores hacen que sea difícil mantenerse al día con
todo lo que sucede dentro de estos entornos.

Pero para nosotros, este es un problema para el futuro lejano.

Por ahora, necesitamos el trío mínimo: un editor de código, intérprete y depurador

Editor de Código
El código de casi todos los lenguajes de programación se compone de alguna forma de
texto. Entonces, para escribir el código, necesitamos un editor de texto. Pero debe ser una
aplicación que escriba texto sin formato (no puede ser un editor de texto enriquecido,
como MS Word). En otras palabras, solo un bloc de notas simple que pueda escribir
archivos .txt es suficiente para escribir código, aunque es mucho más fácil si se usa un
editor de código dedicado. El mercado está repleto de editores de código profesionales,
tanto gratuitos como de paga. Algunos de ellos son universales, mientras que otros son
exclusivos de lenguajes específicos. La principal ventaja de usar un editor de código
dedicado es el resaltado de sintaxis, el autocompletado de texto y la verificación de
errores. Esto mejora la eficiencia del trabajo y la comprensión del código, y reduce la
cantidad de errores y errores tipográficos. Hay muchos buenos editores de código, pero
puede ser realmente difícil seleccionar uno que funcione bien para ti.

Aquí se mencionan algunos populares:

 Visual Studio Code

[Windows, macOS, Linux]

Potente editor de código gratuito para uso personal y comercial. Se ha convertido

rápidamente en uno de los favoritos cuando se trata de desarrollo web. Tiene
funciones integradas como un depurador de JavaScript y herramientas para
optimizar los proyectos web. También es altamente personalizable a través del
sistema de extensiones (existen muchas adiciones especialmente para el lenguaje
JavaScript).

 WebStorm

[Windows, macOS, Linux]

 Un entorno de desarrollo comercial popular, en el que el editor de código es solo
uno de los elementos más pequeños en un gran conjunto de herramientas que
mejoran el desarrollo de código (por ejemplo, soporta realizar pruebas al código).
Destinado para proyectos grandes, puede resultar demasiado pesado y complejo
para programas pequeños. Aunque está destinado a un uso comercial, es posible
obtener una licencia educativa gratuita.

 Sublime Text

[Windows, macOS, Linux]

Editor de código rápido y fácil de usar con muchas funciones avanzadas, como
edición de varias líneas, búsqueda rápida y otras. Hay una versión de prueba
disponible, pero para uso a largo plazo, se debe comprar una licencia ya sea para
un uso privado y/o comercial.

 Notepad++

[Windows]
 Editor de código y texto gratuito y ligero. El programa es pequeño y rápido, admite
docenas de lenguajes de programación y se puede ampliar con complementos
(plugins). Puede ser viejo y feo, pero sigue siendo muy útil.

Existen muchos otros editores de código, tanto gratuitos como de paga, y puedes usar el
que prefieras. Muchos desarrolladores usan, entre otras cosas, editores de consola,
incluido el legendario vim. Los editores de consola no se ejecutan en un entorno gráfico,
sino en una consola de texto. Sin embargo, solo puedes buscar tales soluciones si las
tareas que vas a hacer resultan ser demasiado simples y quieres hacer tu vida un poco
más difícil.

Intérprete
Ya hemos hablado un poco sobre el intérprete y su función. Funciona como un
entorno de ejecución para nuestro programa. Comprueba si hemos cometido algún
error formal, por ejemplo, cometer un error tipográfico en el nombre de una
función u olvidar cerrar un paréntesis, y luego ejecuta el programa instrucción por
instrucción.

La elección del intérprete de JavaScript dependerá de la plataforma para la que

escribamos nuestro software. Por ejemplo, si queremos escribir una aplicación
sencilla del lado del servidor, es casi seguro que elegiremos el entorno [Link],
que tendremos que instalar directamente en nuestro sistema operativo. En el caso
del software del lado del cliente, nuestro intérprete será simplemente el navegador
web que ya tienes instalado (porque, ¿de qué otra forma estarías leyendo este
curso?).

Nuestro curso trata sobre los fundamentos de JavaScript, es decir, aquellos

elementos del lenguaje que serán igualmente útiles en soluciones móviles, del lado
del cliente y del lado del servidor. Así podemos practicarlos en cualquier entorno,
utilizando cualquier intérprete. La forma más fácil de hacer esto es limitarse a un
navegador web.
Como hemos dicho anteriormente, prácticamente todos los navegadores tienen
motores (o intérpretes) JavaScript integrados, pero recomendamos
encarecidamente usar Chrome de Google, o FireFox de Mozilla . Ambos son
conocidos por su eficiencia y herramientas avanzadas integradas para
desarrolladores web (ese eres tú). Están disponibles para Windows, macOS y Linux.

Recuerda actualizar regularmente tu navegador elegido y usar la última versión.

Esto es especialmente importante cuando se trabaja con JavaScript. El lenguaje
cambia constantemente, con nuevas características y mecanismos que se
agregan. Es posible que tu navegador favorito, pero algo anticuado, no admita
ciertas funciones del lenguaje. Tu navegador ahora es una herramienta, así que
intenta mantenerlo en buen estado actualizándolo periódicamente.

Depurador
Los programas de computadora son bestias complicadas, miles o incluso millones
de líneas de código (pero tranquilo, comenzaremos con solo unas pocas). Con tal
complejidad y tamaño, es imposible producir código sin errores. Algunos tipos de
errores, especialmente los lógicos (formalmente, el programa está escrito
correctamente, pero probablemente inventamos la solución incorrecta al
problema), solo se pueden encontrar mientras el programa se está ejecutando y, a
menudo, solo en circunstancias especiales. Es realmente difícil averiguar qué
sucede exactamente dentro de un programa que se ejecuta a la velocidad del
rayo, y para esos problemas existen los depuradores.

Un depurador es una herramienta que te permite alentar o incluso detener la

ejecución de un programa, ejecutar instrucciones paso a paso, ver y analizar el
estado del programa en un momento dado.
Afortunadamente, en el momento en que decidimos usar el navegador web como
nuestro entorno de arranque e intérprete de JavaScript, también obtuvimos un
depurador. Todos los navegadores modernos están equipados con las
herramientas de desarrollo. Durante el funcionamiento normal, son invisibles y
tenemos que habilitarlos en las opciones del navegador (más sobre esto en el
próximo capítulo).

Dependiendo del navegador, allí encontraremos varias herramientas, pero

seguramente habrá:

 El inspector, que nos permitirá, por ejemplo, analizar los elementos HTML
individuales de un sitio web abierto.

 La consola de JavaScript, que en primer lugar muestra toda la

información sobre los errores y, en segundo lugar, nos permite ejecutar
comandos de JavaScript únicos en el contexto de la página actual.

 El depurador, que entre otras cosas, muestra los valores actuales de las
variables y te permite pausar la ejecución del código en el lugar indicado y
ejecutarlo paso a paso (es decir, ejecutar instrucciones del programa).

¿Cómo habilitas las herramientas para desarrolladores? Desafortunadamente, no

hay una respuesta única; depende del navegador que estés utilizando (a veces
también de su versión) y del sistema operativo. Las interfaces del navegador
cambian con bastante frecuencia, por lo que es mejor aprender los atajos correctos
en lugar de buscar la opción correcta en el menú. Prueba las siguientes
combinaciones de teclas:

 Sistemas operativos Windows y Linux, todos los navegadores comunes

excepto Internet Explorer y Edge:

 Sistema operativo Windows, Internet Explorer y Edge:

  Sistema operativo macOS, todos los navegadores comunes:

En el próximo capítulo, volveremos a este tema y aprenderemos algunas cosas

más sobre estas útiles herramientas.

En el próximo capítulo escribiremos nuestra primera pieza de código JavaScript. Lo

probaremos en primer lugar en el entorno de ejecución integrado con nuestra
plataforma de formación. También lo utilizaremos para comprobar cómo funciona
nuestro entorno de desarrollo local.

Fundamentos de JavaScript 1 (JSE):

Módulo 1

Sección 3
¡Hola, Mundo!

Temas en esta sección:

 Algunas palabras sobre HTML

 ¿Cómo puedes ejecutar tu código JavaScript?
 Ejecutando el código directamente en la consola

El Programa "¡Hola, Mundo!"

¿Por qué "¡Hola, Mundo!"? Durante casi 50 años, esta frase y sus derivados han
marcado a alguien aprendiendo un nuevo lenguaje de programación, aunque es
más una tradición que otra cosa. La frase se usó hace mucho tiempo en un libro
muy importante sobre el lenguaje C, pero el texto en sí no es relevante ahora.

La idea es escribir algo en la pantalla utilizando un lenguaje específico. Primero,

nos permite ver la sintaxis básica del lenguaje y compararlo con otros lenguajes de
programación. En segundo lugar, es un programa muy simple y cualquiera puede
escribirlo o copiarlo fácilmente de Internet y verificar si sus herramientas y su
entorno están configurados correctamente. En tercer lugar, es un programa que
genera algo, por lo que proporciona información sobre si se ejecutó correctamente
o no.

En el caso de JavaScript del lado del cliente, mostrar algo en la pantalla se puede
entender de dos maneras.

Primero, el JavaScript del lado del cliente siempre se ejecuta en el contexto de un

sitio web y te permite manipular elementos de ese sitio web. Entonces podemos,
por ejemplo, usar la función apropiada para insertar algún texto, cambiar un título,
crear una tabla, etc. en la página. De esta manera, controlamos la parte visual del
sitio web.

Segundo, podemos usar la consola como una pantalla para escribir alguna
información. La consola, como mencionamos en el capítulo anterior, es parte de las
herramientas del desarrollador. Por lo tanto, no está visible de forma
predeterminada y debe estar habilitada correctamente (también escribimos sobre
esto en el capítulo anterior). Para nuestras necesidades, será mucho más cómodo
utilizar la consola, ya que evitaremos la necesidad de un análisis exhaustivo de la
estructura del sitio web.

Pero, ¿qué es realmente una consola? En primer lugar, es un lugar donde se

muestran varios mensajes, normalmente invisibles para el usuario del navegador.
Estos mensajes pueden, por ejemplo, ser generados por el intérprete de JavaScript
tras encontrar un error o si lo imprimimos, llamando a la función adecuada. En
segundo lugar, podemos ejecutar comandos de JavaScript individuales en la
consola, que se ejecutarán en el contexto de la página web actualmente cargada
(se hablará un poco más sobre eso en un momento).

La función básica que nos permite escribir información en la consola es llamada

[Link]. Entonces, para referirnos al eterno "¡Hola, Mundo!", deberíamos
mandarlo llamar de la siguiente manera:

[Link]("¡Hola, Mundo!");

Podemos tratar a [Link] como una función*. De hecho, la función es solo un

registro y la consola es el objeto al que pertenece la función.

*Este tipo de función, perteneciente a un objeto, generalmente se denomina

método. Pero una vez más, por el momento, para simplificar ciertas cosas,
supongamos que se trata de una función ordinaria: no nos molestará en absoluto
(aprenderemos sobre los objetos mucho más adelante).

Una función es un fragmento de código que te permite realizar una tarea

específica (en nuestro caso, mostrar algo en la consola). Las funciones a menudo
toman argumentos, en otras palabras, datos que usarán durante la operación. En
JavaScript, ejecutamos una función llamándola, y la llamamos escribiendo su
nombre seguido de un par de paréntesis, donde se proporcionan los argumentos
(si la función no necesita argumentos, los paréntesis se dejan vacíos). En nuestro
ejemplo, el argumento es el texto que queremos mostrar. Toma en cuenta que
para indicar que "¡Hola, Mundo!" es el texto, lo ponemos entre comillas.

Para que el intérprete sepa dónde termina el comando, colocamos un punto y

coma al final de la llamada a la función. En este caso, el intérprete se las arreglaría
sin esa ayuda, pero es una buena costumbre terminar cada comando con un punto
y coma, para que no lo olvides cuando realmente lo necesites.
Ya sabemos qué escribir, y la única pregunta ahora es, ¿dónde hacerlo?

Entorno de desarrollo en línea

Afortunadamente, nuestra plataforma utiliza un entorno en línea listo para usarse, como
mencionamos en el capítulo anterior. El entorno OpenEDG te permite editar y ejecutar
programas escritos en JavaScript. Toma en cuenta que la parte de la pantalla dedicada a este
entorno se divide en tres partes. La parte superior es el editor, donde podemos elegir si editar
un archivo JavaScript, HTML o CSS (diremos algunas palabras sobre HTML y CSS en un
momento). Todos estos archivos juntos forman el código a ejecutar en nuestro entorno de
entrenamiento. Nos interesará principalmente la pestaña del archivo JavaScript: [Link]. En la
parte inferior izquierda de la pantalla, hay una ventana que simula la consola, en la que
aparecerán los mensajes del intérprete y la información que escribimos. La ventana del lado
derecho está diseñada para mostrar la página en cuyo contexto se ejecuta nuestro código
JavaScript. Esta ventana será la menos útil en esta parte del curso.

En el editor, deberías ver la pieza de código que acabamos de discutir, que contiene la función
[Link]. Intenta ejecutarlo. Debes presionar el botón resaltado con el ícono de
reproducción, ubicado directamente sobre el editor. Como resultado, la ventana inferior que
simula la consola debería mostrar:

¡Hola, Mundo!

Ve al editor nuevamente y cambia la palabra "Mundo" por tu nombre. Ejecuta el programa

nuevamente y verifica lo que aparece en la ventana de la consola. Felicitaciones, acabas de
modificar un programa escrito en JavaScript.

Podríamos discutir tu primer programa de JavaScript basado en este ejemplo. Aprendiste la

sintaxis, lo ejecutaste en línea, se comprobó su efecto e incluso lo modificaste por ti mismo.
Puedes probar todos los ejemplos que discutimos en este curso de esta manera. Sin
embargo, en el capítulo anterior, te instamos a configurar tu entorno de desarrollo local. Por lo
tanto, sería bueno mostrarte cómo se puede ejecutar este ejemplo en dicho entorno. Y esto
requerirá una introducción un poco más larga.

[Link]("¡Hola, Mundo!");

[Link]("Leonel Coronel");

Entorno de desarrollo local

El JavaScript del lado del cliente es un lenguaje de la web y solo existe en el
ecosistema web. En esta configuración, JavaScript no puede existir por sí mismo. El
código JavaScript debe estar incrustado en un documento HTML. Cuando usamos el
entorno en línea para ejecutar nuestro programa, se nos ocultaron ciertos
aspectos. Esta vez tendremos que mirarlos más de cerca.
Unas palabras sobre HTML

HyperText Markup Language, o HTML, es un conjunto de etiquetas utilizadas

para describir la estructura de un sitio web. Nos permite dar a una página el
formato de un documento que contiene secciones, encabezados, párrafos, listas y
similares. HTML definitivamente está más allá del alcance del curso actual, por lo
que presentaremos solo información básica al respecto, lo suficiente para que
comprendas dónde y cómo podemos ejecutar el código JavaScript asociado con
una página determinada.

Los tipos de etiquetas están predefinidos. Por ejemplo, la etiqueta que especifica
un párrafo es <p> y la etiqueta para el encabezado de primer grado (el más
grande) es <h1> . El nombre de la etiqueta debe colocarse entre corchetes. Las
etiquetas se suelen utilizar en pares, limitando un área determinada del
documento (tenemos una etiqueta de apertura y otra de cierre). La etiqueta de
cierre es diferente de la etiqueta de apertura porque aparece una barra antes del
nombre. Por ejemplo, un párrafo puede verse así:

<p>un párrafo ordinario</p>

A menudo, las etiquetas pueden (y a veces deben) colocarse dentro del rango de
otras etiquetas. Por ejemplo, nuestro párrafo debe colocarse dentro de la
etiqueta <body> , que separa la parte principal de nuestro documento.

<body>

<p>un párrafo ordinario</p>

</body>

Documento HTML

Intentemos crear un HTML sencillo que defina una página vacía.

<!DOCTYPE html>

<html>

<head>

<title>Empty Page</title>

</head>

<body>

</body>
</html>

Comencemos con la declaración <!DOCTYPE html>. Esta no es una etiqueta típica,

ya que se utiliza para informar al navegador que todo el documento se ha
preparado de acuerdo con HTML5. La descripción del documento en si comienza
con la etiqueta <html>, la cual junto con la etiqueta </html> establece los límites
del documento. Cualquier otra etiqueta debe estar dentro de estas. Si una etiqueta
dada tiene otro contenido, habrá una etiqueta de cierre correspondiente, formando
una especie de contenedor.

La siguiente etiqueta, <head>, contiene información adicional sobre el documento,

que también debe colocarse en etiquetas. La más básica es la etiqueta <title>,
que establece el título de la página mayormente visible en la barra de título del
navegador. Después de <head> esta el elemento <body>, y allí se debe colocar el
contenido visible de la página web (por ejemplo, nuestro párrafo).

La etiqueta <script>

El código JavaScript que ejecutará el navegador en la página debe adjuntarse al

HTML utilizando la etiqueta <script> , y existen dos formas de hacerlo. El código se
puede incrustar directamente dentro de las etiquetas <script> y </script> , pero
esto solo se recomienda cuando el código es corto. Otro enfoque es utilizar el
atributo "src" para apuntar a un archivo separado que contiene el código
JavaScript. Esto es especialmente cierto cuando se va a usar el mismo código en
varias páginas, porque repetir exactamente el mismo código muchas veces es una
mala práctica, ya que cualquier cambio debe aplicarse a todos los archivos; y
además, aumenta artificialmente el tamaño de la página. La extensión del archivo
JavaScript es .js.

HTML es leído por el navegador línea por línea, y las etiquetas se ejecutan justo en
el momento en que el navegador analiza la etiqueta <script> (analizar en
lenguajes de programación significa un análisis formal del código por parte de una
máquina para comprender su estructura). Generalmente las etiquetas <script> se
insertan en el encabezado de la página entre las etiquetas <head> y </head> , y
podemos insertar muchos de ellos en un archivo, por ejemplo, para incluir código
JavaScript de diferentes archivos. Este comportamiento se puede cambiar para
scripts externos señalados por el atributo "src" usando los atributos "defer" o
"async".

 defer : significa que el script debe ejecutarse después de cargar toda la

página.
 async : significa que el script se ejecutará inmediatamente, pero en paralelo
al análisis del resto de la página.

... y un poco acerca de CSS

CSS, o Cascading Style Sheets, es un lenguaje utilizado junto con HTML para
describir la apariencia de una página y sus elementos. En pocas palabras, HTML
describe la estructura de un documento, mientras que CSS describe su
presentación.

Por ejemplo, en HTML, podemos describir una página que tiene un encabezado,
dos párrafos y una tabla de datos.

En CSS, podemos definir qué fuente se usará en toda la página, qué color tendrá el
fondo o si el cursor del mouse, cuando se mueve sobre la tabla, debe cambiar de
forma.

Entonces podemos tratar CSS como una especie de configuración de la capa visual
de la página. Así, la mayoría de las veces el sitio web se construirá sobre la base
de un archivo HTML (es decir, una descripción de la estructura), código JavaScript
que nos permite agregar, por ejemplo, algunos mecanismos de interacción y un
archivo CSS (que describe la presentación de la página). Sin embargo, lo
importante es que no habrá página sin un archivo HTML, pero podemos crear
fácilmente una página sin usar archivos CSS. La descripción de CSS en sí está fuera
del alcance del curso actual y la mencionamos solo por orden.

Prev Next

¿Cómo podemos ejecutar nuestra código JavaScript?

Comencemos con un ejemplo simple, donde el navegador obtiene una página
simple (quizás incluso vacía) de [Link] La dirección es ficticia para este
ejemplo, así que no intentes ingresarla. Mira la figura de abajo.
 hacer clic para agrandar

Empecemos por el lado derecho de la figura. El usuario ejecuta un navegador web

en su computadora (por ejemplo, Chrome). Usando el atajo de teclado apropiado,
se activan las herramientas de desarrollo (ver el capítulo anterior) para poder
usar la consola. Recuerda que estas herramientas no son necesarias para el uso
normal del navegador y, por lo tanto, están ocultas por defecto. Luego, el usuario
escribe [Link] (la URL de nuestro sitio falso) en la barra de direcciones.

En el servidor remoto (lado izquierdo del dibujo), asociado a la

dirección [Link] se esta ejecutando un servidor web que, tras recibir una
solicitud de nuestro usuario, preparará una respuesta para ello. En el caso más
simple, la respuesta solo contendrá un archivo html, que se puede almacenar en el
mismo servidor. El archivo html (en este ejemplo, [Link]) se devuelve al
usuario y el navegador lo procesa. Si se define algún contenido (por ejemplo, un
párrafo con texto), se mostrará en la ventana del navegador.

Sin embargo, nos interesa más el hecho de que el archivo [Link] contiene las
etiquetas <script> y </script> , con una pieza de código JavaScript entre ellas.
¿Lo reconoces? Obviamente, esto es un intento de mostrar nuestro "¡Hola,
mundo!" en la consola al cargar la página, se debe ejecutar el código colocado
dentro de las etiquetas <script> y, si las herramientas para desarrolladores están
habilitadas y el panel de la consola está visible, la consola mostrará "¡Hola,
Mundo!" .

Como dijimos antes, la etiqueta <script> se puede usar de una manera diferente,
no solo para restringir el lugar donde escribimos código JavaScript directamente. Si
usamos el atributo "src" en esta etiqueta, podemos indicar un archivo JavaScript
separado que se adjuntará aquí.

Revisa el código en la pagina siguiente. En el archivo [Link] se encuentra de

nuevo la etiqueta <script> . Esta vez no hay código JavaScript colocado después,
pero al usar el atributo "src", se indica que el código del archivo [Link] debe
adjuntarse aquí.
 hacer clic para agrandar

Todo funcionará exactamente igual que en el escenario anterior, excepto que el

servidor web proporcionará el archivo [Link] además de [Link]. El usuario no
notará ninguna diferencia. Por supuesto, colocar nuestro código en un servidor
remoto solo para probarlo sería un poco engorroso.

Tenemos otra posibilidad, que es que podemos cargar un archivo html local (es
decir, uno que está en nuestra computadora) en el navegador. Si este código
contiene una etiqueta <script> que indica algún archivo JavaScript, entonces este
archivo también se cargará desde los recursos locales.

La imagen muestra un escenario simple en el que el usuario carga un archivo

[Link] local en el navegador, en el que hay una referencia a [Link] (por lo
que este archivo también se cargará automáticamente).
 hacer clic para agrandar

Puedes cargar un archivo html local escribiendo su ruta local después de archivo:///
en la barra de direcciones, o simplemente abriéndolo en tu navegador usando el
comando Abrir del menú. Dado que el menú de los navegadores suele estar oculto,
una forma más sencilla puede ser utilizar un acceso directo para abrir documentos
existentes en las aplicaciones. El atajo es universal, no solo para navegadores y
probablemente ya lo hayas visto:

o en el caso de macOS:
Ejecutando el código directamente en la consola
Tenemos otra opción bastante conveniente cuando se trata de ejecutar fragmentos cortos de
código JavaScript en el navegador (y nuestro programa, que consta de una instrucción, es
definitivamente corto). Como dijimos antes, la consola no solo se usa para mostrar
información, sino que también te permite ejecutar instrucciones de JavaScript individuales.
Estas instrucciones deben ejecutarse en el contexto de alguna página HTML. Sin embargo, no
necesariamente tienes que escribir tu página, como hicimos hace un momento. Intenta abrir
una nueva pestaña y escribe about:blank: “page in withe” en la barra de direcciones.
Esta es una pseudodirección que le dice a su navegador que genere y cargue una página
HTML en blanco.

Luego, ejecuta las herramientas de desarrollo. Al principio, podemos comprobar cómo se ve el

HTML generado por el navegador. Para hacerlo, seleccione la primera herramienta del panel
(en Chrome, será Elementos, en Firefox Inspector). Deberías ver un código html mínimo:

<html>
<head></head>
<body></body>
</html>

Ahora elige la consola de las herramientas para desarrolladores. Deberías ver un aviso,
generalmente un signo > o >> seguido de un cursor parpadeante (si no hay cursor, has clic en
el aviso). Luego puedes ingresar la instrucción que mostrará "¡Hola, Mundo!" en la consola
(usando la función [Link]). El escenario se muestra en la siguiente figura.
Tareas

Tarea 1

Emplea [Link] para enviar tu nombre completo a la consola.

Ejemplo

[Link]("Mary Stuart");

Tarea 2

Muestra tu año de nacimiento.

Ejemplo

[Link]("1542");

Tarea 3

Vuelve a intentar mostrar tu año de nacimiento, esta vez pasando la fecha sin las comillas.

Ejemplo

[Link](1542);

[Link](24/01/2001);

Tarea 4

Podemos pasar varios argumentos a [Link] separados por comas, por ejemplo:
[Link]("abc", "def", "ghi");

Envía información sobre ti a la consola en el formato: Nombre Apellido (Año) por

ejemplo Mary Stuart (1542).

 Enviar toda la información como un solo argumento.

 Enviar la información nombre, apellido, año como argumentos separados.
Ejemplo

[Link]("Mary Stuart (1542)");

[Link]("Mary", " Stuart ", "(1542)");

[Link]("Leonel Coronel (2023)");

[Link]("Leonel", "Coronel", "(2023)");

Tarea 5

Envía la misma información (nombre, apellido, año) a la consola, no una al lado de la otra,
sino en líneas consecutivas.

[Link]("Leonel");

[Link]("Coronel");

[Link]("2023");

Tarea 6

Una cadena se puede concatenar usando el signo + , por ejemplo "abc" + "def" serán
tratados como "abcdef" . Intenta escribir tu nombre, apellido y año de nacimiento en una
línea nuevamente, esta vez no separados por comas, sino por el signo + .

Ejemplo

[Link]("Mary" + " Stuart" + "(1542)");

[Link]("Leonel" + "Coronel" + "(2023)");

Tarea 7
Coloca espacios en los lugares apropiados, de modo que cuando se muestre, se obtenga el
mismo efecto que en la Tarea 4.

Ejemplo

[Link]("Mary " + " Stuart " + "(1542)");

[Link](“Leonel ” + “ Coronel ” + “(2023)”);

FE065AB52323227ADEB8