Una introducción a JavaScript

Veamos qué tiene de especial JavaScript, qué podemos lograr con él y qué otras tecnologías
funcionan bien con él.

¿Qué es JavaScript?
JavaScript se creó inicialmente para "dar vida a las páginas web".

Los programas en este lenguaje se denominan scripts . Se pueden escribir directamente en el HTML
de una página web y ejecutarse automáticamente a medida que se carga la página.

Los scripts se proporcionan y ejecutan como texto sin formato. No necesitan preparación especial o
compilación para funcionar.

En este aspecto, JavaScript es muy diferente de otro lenguaje llamado Java .

¿Por qué se llama Java Script?

Cuando se creó JavaScript, inicialmente tenía otro nombre: “LiveScript”. Pero Java era muy popular en
ese momento, por lo que se decidió que ayudaría posicionar un nuevo lenguaje como un "hermano
menor" de Java.

Pero a medida que evolucionó, JavaScript se convirtió en un lenguaje completamente independiente

con su propia especificación llamada ECMAScript , y ahora no tiene ninguna relación con Java.

Hoy en día, JavaScript puede ejecutarse no solo en el navegador, sino también en el servidor, o en
realidad en cualquier dispositivo que tenga un programa especial llamado motor de JavaScript .

El navegador tiene un motor incorporado, a veces llamado "máquina virtual de JavaScript".

Diferentes motores tienen diferentes "nombres en clave". Por ejemplo:

• V8 : en Chrome, Opera y Edge.

• SpiderMonkey – en Firefox.
• …Hay otros nombres en clave como “Chakra” para IE, “JavaScriptCore”, “Nitro” y “SquirrelFish”
para Safari, etc.

Es bueno recordar los términos anteriores porque se usan en artículos para desarrolladores en
Internet. Los usaremos también. Por ejemplo, si "una característica X es compatible con V8", entonces
probablemente funcione en Chrome, Opera y Edge.

¿Cómo funcionan los motores?

Los motores son complicados. Pero lo básico es fácil.

1. El motor (integrado si es un navegador) lee ("analiza") el script.

2. Luego convierte ("compila") el script al lenguaje de máquina.
3. Y luego el código de la máquina se ejecuta bastante rápido.
El motor aplica optimizaciones en cada paso del proceso. Incluso observa el script compilado
mientras se ejecuta, analiza los datos que fluyen a través de él y optimiza aún más el código de la
máquina en función de ese conocimiento.

¿Qué puede hacer JavaScript en el navegador?

JavaScript moderno es un lenguaje de programación "seguro". No proporciona acceso de bajo nivel a
la memoria ni a la CPU, ya que inicialmente se creó para navegadores que no lo requieren.

Las capacidades de JavaScript dependen en gran medida del entorno en el que se ejecuta. Por
ejemplo, Node.js admite funciones que permiten que JavaScript lea/escriba archivos arbitrarios,
realice solicitudes de red, etc.

El JavaScript en el navegador puede hacer todo lo relacionado con la manipulación de páginas web, la
interacción con el usuario y el servidor web.

Por ejemplo, JavaScript en el navegador puede:

• Agregue nuevo HTML a la página, cambie el contenido existente, modifique estilos.

• Reaccione a las acciones del usuario, ejecute clics del mouse, movimientos del puntero,
pulsaciones de teclas.
• Envíe solicitudes a través de la red a servidores remotos, descargue y cargue archivos (las
llamadas tecnologías AJAX y COMET ).
• Obtenga y configure cookies, haga preguntas al visitante, muestre mensajes.
• Recuerde los datos en el lado del cliente ("almacenamiento local").

¿Qué NO PUEDE hacer JavaScript en el navegador?

Las capacidades de JavaScript en el navegador están limitadas por el bien de la seguridad del
usuario. El objetivo es evitar que una página web malvada acceda a información privada o dañe los
datos del usuario.

Ejemplos de tales restricciones incluyen:

• JavaScript en una página web no puede leer/escribir archivos arbitrarios en el disco duro,
copiarlos o ejecutar programas. No tiene acceso directo a las funciones del sistema operativo.

Los navegadores modernos le permiten trabajar con archivos, pero el acceso es limitado y solo
se brinda si el usuario realiza ciertas acciones, como "soltar" un archivo en una ventana del
navegador o seleccionarlo a través de una <input>etiqueta.

Hay formas de interactuar con la cámara/micrófono y otros dispositivos, pero requieren el

permiso explícito del usuario. Por lo tanto, es posible que una página habilitada para JavaScript
no active furtivamente una cámara web, observe los alrededores y envíe la información a
la NSA .
 • Las diferentes pestañas/ventanas generalmente no se conocen entre sí. A veces lo hacen, por
ejemplo, cuando una ventana usa JavaScript para abrir la otra. Pero incluso en este caso, es
posible que JavaScript de una página no acceda a la otra si provienen de sitios diferentes (de
un dominio, protocolo o puerto diferente).

Esto se llama la “Política del Mismo Origen”. Para evitarlo, ambas páginas deben aceptar el
intercambio de datos y contener un código JavaScript especial que lo maneje. Cubriremos eso
en el tutorial.

Esta limitación es, nuevamente, para la seguridad del usuario. Una página
desde http://anysite.comla que un usuario ha abierto no debe poder acceder a otra pestaña
del navegador con la URL http://gmail.comy robar información de allí.

• JavaScript puede comunicarse fácilmente a través de la red con el servidor de donde proviene
la página actual. Pero su capacidad para recibir datos de otros sitios/dominios está
paralizada. Aunque es posible, requiere un acuerdo explícito (expresado en encabezados HTTP)
del lado remoto. Una vez más, eso es una limitación de seguridad.

Dichos límites no existen si JavaScript se usa fuera del navegador, por ejemplo, en un servidor. Los
navegadores modernos también permiten complementos/extensiones que pueden solicitar permisos
extendidos.

¿Qué hace que JavaScript sea único?

Hay al menos tres cosas geniales sobre JavaScript:

• Integración completa con HTML/CSS.

• Las cosas simples se hacen simplemente.
 • Compatible con todos los principales navegadores y habilitado de forma predeterminada.
JavaScript es la única tecnología de navegador que combina estas tres cosas.

Eso es lo que hace que JavaScript sea único. Por eso es la herramienta más extendida para crear
interfaces de navegador.

Dicho esto, JavaScript también permite crear servidores, aplicaciones móviles, etc.

Lenguajes de programación “sobre” JavaScript

La sintaxis de JavaScript no se adapta a las necesidades de todos. Diferentes personas quieren
diferentes características.

Eso es de esperar, porque los proyectos y requisitos son diferentes para todos.

Recientemente apareció una cantidad significativa de nuevos lenguajes que se precompilan a

JavaScript (código intermedio) antes de que se ejecuten en el navegador.

Las herramientas modernas hacen que la precompilación sea muy rápida y transparente, lo que
permite a los desarrolladores codificar en otro idioma y convertirlo automáticamente "bajo el capó".

Ejemplos de tales lenguajes:

• CoffeeScript es un "azúcar sintáctico" para JavaScript. Introduce una sintaxis más corta, lo que
nos permite escribir un código más claro y preciso. Por lo general, a los desarrolladores de
Ruby les gusta.
• TypeScript se concentra en agregar "tipado estricto de datos" para simplificar el desarrollo y el
soporte de sistemas complejos. Está desarrollado por Microsoft.
• Flow también agrega escritura de datos, pero de una manera diferente. Desarrollado por
Facebook.
• Dart es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que
no son de navegador (como aplicaciones móviles), pero también se puede precompilar a
JavaScript. Desarrollado por Google.
• Brython es un precompilador de Python a JavaScript que permite escribir aplicaciones en
Python puro sin JavaScript.
• Kotlin es un lenguaje de programación moderno, conciso y seguro que puede apuntar al
navegador o Node.

Resumen
• JavaScript se creó inicialmente como un lenguaje solo para navegadores, pero ahora también
se usa en muchos otros entornos.
• Hoy en día, JavaScript tiene una posición única como el lenguaje de navegador totalmente
integrado con HTML/CSS.
• Hay muchos lenguajes que se "precompilan" a JavaScript y brindan ciertas características.
Núcleo de JavaScript
Primero, veamos cómo adjuntamos un script a una página web. Tenga en cuenta que para entornos
del lado del servidor (como Node.js), puede ejecutar el script con un comando como "node my.js".

¿Cómo integrar código JavaScript a una página html?

Si tenemos código JavaScript, podemos ponerlo en un archivo separado con extensión .js; estos
archivos de script se adjuntan a HTML con el atributo src que se define en la etiqueta script:

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

Nota: en esta instrucción se utiliza una ruta absoluta al script desde la raíz del sitio (/).

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

Nota: en estas instrucciones se utiliza una ruta relativa al script desde la página actual

También podemos proporcionar una URL completa. Por ejemplo:

<script src="https://cdnjs.cloudflare.com/libs/lodash.js"></script>

Para adjuntar varios scripts, use varias etiquetas:

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

Para tener en cuenta:

Los scripts de JavaScript se pueden colocar en las etiquetas <head> y/o <body>.

Cuando los scripts se incluyen en el encabezado, etiqueta <head>, se cargan o ejecutan antes del
contenido de la página. Cuando los incluye en el cuerpo, etiqueta <body>, se cargan o ejecutan
después del html anterior.

Por lo general, es una buena práctica poner las etiquetas <script> antes de finalizar la etiqueta
</body>.

Ventajas de tener el código JavaScript en archivos separados:

• El beneficio de un archivo separado es que el navegador lo descargará y lo almacenará en

su Web caché o HTML Cache.
 • Otras páginas que hacen referencia al mismo script lo tomarán del caché en lugar de
descargarlo, por lo que el archivo se descarga solo una vez; Esto reduce el tráfico y hace que
las páginas sean más rápidas.

• El código JavaScript y HTML es más fácil de leer y mantener.

Practica:
Digite el siguiente código de javascript en el archivo con extensión .js

1. Archivo: js/script.js

alert("Número de etiquetas <li> en el documento: " +

document.getElementsByTagName("li").length);
Digite el siguiente código en el archivo html

Archivo: prueba.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
2. <script src="js/script.js"></script>

</head>
<body>
<h1>Temas</h1>
<ul id="temas">
<li>Lenguaje JS</li>
<li>Frameworks de Javascript </li>
</ul>
</body>
</html>

3. Ejecute el código y anote el resultado

Cambie el código del archivo html

Archivo: prueba.html

4. <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<h1>Temas</h1>
<ul id="temas">
<li>Lenguaje JS</li>
<li>Frameworks de Javascript </li>

<script src="js/script.js"></script>
</ul>
</body>
</html>

5. Ejecute el código y anote el resultado

6. Compare los resultados obtenidos y saque una conclusión