¿Qué Es el JavaScript? Un Repaso al Lenguaje de Programación de Scripts Más Popular de la Web

¿Quién no ha experimentado una solicitud de actualización de Java al intentar acceder a ciertos sitios web?

Mientras que mucha gente está familiarizada con Java por las funciones interactivas de los sitios web, los usuarios pueden estar menos familiarizados con JavaScript – o, de hecho, pueden considerar erróneamente que ambos son lo mismo.

En este artículo, discutiremos qué es JavaScript y las diferencias entre Java y JavaScript. A continuación, ofreceremos una visión general de algunas de las características más significativas de JavaScript.

¡Empecemos!

Consulta nuestra guía en vídeo sobre JavaScript

¿Qué es el JavaScript?

En pocas palabras, JavaScript es un popular lenguaje de programación de scripts para añadir funcionalidades interactivas y otros contenidos web dinámicos a las páginas web. Algunos ejemplos conocidos de contenido en JavaScript son los formularios rellenables, las presentaciones de galerías de fotos y los gráficos animados.

Además, JavaScript es relativamente intuitivo y fácil de aprender. Es un excelente punto de partida para aquellos que buscan aprender más sobre el desarrollo de sitios web.

JavaScript es la última capa de funcionalidad en los sitios web altamente interactivos. HTML proporciona la estructura básica de la página. CSS es el elemento de moda de tu sitio web: determina el estilo de tu sitio. A continuación, JavaScript añade emoción.

Cuando se aprende JavaScript, es esencial entender la relación entre HTML, CSS y JavaScript, y cómo se unen para mostrar un sitio web.

Para qué se usa el JavaScript

JavaScript tiene varias aplicaciones que cualquiera que haya visitado páginas web interactivas o aplicaciones para móviles probablemente habrá experimentado. Aunque el desarrollo de sitios web -incluyendo la adición de elementos como formularios interactivos y animaciones- es el uso más tradicional de JavaScript, también se utiliza en:

• Juegos basados en el navegador web, incluidos los juegos 2D y 3D
• Desarrollo de aplicaciones para móviles: beneficioso porque es independiente de la plataforma telefónica
• Presentaciones: creación de presentaciones de diapositivas animadas en la web

Aunque la mayoría de las aplicaciones de JavaScript son del lado del cliente, este lenguaje también es útil en aplicaciones del lado del servidor, como la creación de servidores web.

Diferencias entre Java y JavaScript

En primer lugar, es importante señalar que Java y JavaScript no están relacionados, a pesar de compartir el término «Java». Tanto Java como JavaScript son lenguajes para desarrollar páginas y aplicaciones web. Sin embargo, tienen claras diferencias, entre ellas:

• Programación orientada a objetos: Java es un lenguaje de programación orientado a objetos. JavaScript es un lenguaje de programación de scripts orientado a objetos.
• Sintaxis: La sintaxis de JavaScript no es tan formal o estructurada como la de Java. Por lo tanto, es más sencilla para la mayoría de los usuarios.
• Compilación: Java es un lenguaje compilado, mientras que JavaScript es un lenguaje interpretado que se interpreta línea por línea en tiempo de ejecución; los lenguajes compilados suelen ser más rápidos, pero los interpretados suelen ser más flexibles.
• Entorno: Las aplicaciones Java se pueden utilizar básicamente en cualquier entorno, ejecutándose en máquinas virtuales o en navegadores; JavaScript es solo para navegadores.
• Uso de memoria: Java consume más memoria que JavaScript, por lo que este último es preferible para las páginas y aplicaciones web.

¿Es seguro JavaScript?

Aunque JavaScript es ampliamente aceptado y utilizado para el desarrollo web, tiene vulnerabilidades bien conocidas. Uno de los ciberataques más comunes introducidos a través de las vulnerabilidades de JavaScript es el ataque Cross-site scripting (XSS). Los ciberdelincuentes utilizan los ataques XSS para acceder y robar información de identidad.

Para minimizar los ataques, es fundamental probar y revisar el código durante el desarrollo. Los métodos de prueba, como las pruebas de seguridad de aplicaciones estáticas y dinámicas (SAST y DAST), ayudan a identificar las vulnerabilidades en todos los puntos del ciclo de vida de desarrollo del software.

Según los analistas de seguridad de Cloud Defense, SAST comprueba si tu código viola las normas de seguridad y compara las vulnerabilidades encontradas entre las ramas de origen y destino. Recibirás una notificación si las dependencias de tu proyecto se ven afectadas por las nuevas vulnerabilidades reveladas.

Vanilla JavaScript

Vanilla JavaScript es una implementación ligera del lenguaje JavaScript puro sin bibliotecas añadidas. Aquí, el término «vainilla» se refiere a un JavaScript no personalizado.

Muchas empresas importantes utilizan Vanilla JS, como Google, Microsoft, Apple, Amazon y otras. Vanilla JavaScript es una excelente manera de aprender los fundamentos de la programación en JavaScript antes de añadir lazos a características más avanzadas ofrecidas en las bibliotecas.

Bibliotecas de JavaScript

Una biblioteca de JavaScript es una colección de código pre-escrito que realiza determinadas funciones. Las bibliotecas permiten incluso a los usuarios principiantes construir rápidamente sitios web útiles. Y ahorran tanto a los usuarios novatos como a los experimentados un tiempo considerable en la construcción de sitios y aplicaciones.

Aunque hay muchas bibliotecas de JavaScript, algunas de las más populares son jQuery, Anime.js, Animate on Scroll y Leaflet.js.

Cómo se relaciona JavaScript con los frameworks de los sitios web

Los frameworks de sitios web son constructores de sitios web avanzados, normalmente con extensas bibliotecas de funcionalidad pre-construida y conjuntos de pruebas. Puede que estés familiarizado con los frameworks del lado del servidor como Laravel, Ruby on Rails o Django. Pero también hay varios marcos populares basados en JavaScript del lado del cliente, como React.js, Vue.js y Node.js.

El DOM de JavaScript

El DOM, o Modelo de Objetos del Documento, actúa como una interfaz entre un lenguaje de programación como JavaScript y un documento subyacente – específicamente, documentos HTML y XML.

El DOM es un estándar del W3C (World Wide Web Consortium), definido como «una interfaz independiente de la plataforma y el lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento». Los documentos consisten en una colección de elementos individuales y propiedades (texto, botones, enlaces, etc.).

Componentes básicos de JavaScript

Al igual que otros lenguajes de programación de scripts, JavaScript utiliza variables para identificar las ubicaciones de almacenamiento de los datos. Las variables pueden ser globales (accesibles por cualquier función del código) o locales, también conocidas como «block-scoped» (accesibles solo en el bloque donde se declaran).

Las variables pueden contener valores fijos (constantes conocidas como literales) o valores alterables. JavaScript tiene una sintaxis particular para declarar (crear) constantes y variables, y asignarles valores.

Declarar una constante

Las constantes verdaderas se crean utilizando una declaración const. Const crea constantes de solo lectura, inmutables y de ámbito de bloque («de ámbito de bloque» significa que la constante no es accesible desde fuera de su bloque declarado).

Un ejemplo de uso de const para crear una constante es:

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

Observa el uso de mayúsculas para nombrar la constante; es una convención de nomenclatura comúnmente aceptada, aunque no es obligatoria. Los nombres de las variables, incluyendo los nombres de las const, deben comenzar con una letra (minúscula o mayúscula), el carácter de subrayado (_), o el signo de dólar ($). Son sensibles a las mayúsculas y minúsculas, así que asegúrate de recordar cómo nombras tus variables.

Las constantes, a diferencia de las variables, deben tener un valor asignado al crearse. La siguiente sentencia devolverá un error:

const GOLDEN_RATIO;

Declarar una variable

Las variables se declaran con la palabra clave var. No es necesario asignarles un valor en el momento de la declaración, aunque es permisible hacerlo y se hace con frecuencia. La palabra clave var tiene alcance global en lugar de alcance de bloque (a menos que esté en una función, entonces tiene alcance de función).

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

Ten en cuenta que las declaraciones en JavaScript deben terminar con un punto y coma. Puedes crear comentarios usando // – JavaScript ignora cualquier cosa entre // y el final de la línea.

Las variables pueden contener una variedad de tipos de datos, incluyendo números, cadenas y objetos. La asignación de variables en JavaScript es dinámica. Por lo tanto, se puede asignar una variable a un tipo de datos diferente en el mismo código.

Hoisting

Ahora que entiendes la declaración de variables en JavaScript, podemos discutir cómo JavaScript trata la ubicación de la declaración de variables. La práctica de codificación comúnmente aceptada exige declarar las variables antes, o al mismo tiempo, de definirlas. Algunos lenguajes de programación lo exigen.

Sin embargo, JavaScript permite declarar las variables después de definirlas o utilizarlas. Usando una característica llamada hoisting, JavaScript mueve las declaraciones a la parte superior de un script o función actual. Aunque la elevación puede simplificar la programación al permitir que un programador corrija un fallo de declaración sin tener que retroceder por el código, declarar variables después de su uso no es coherente con las mejores prácticas de programación.

La elevación también puede causar problemas inesperados, principalmente porque la elevación solo se aplica a la declaración. Si una variable se declara e inicializa en la misma sentencia, el hoisting creará una declaración en la parte superior del bloque y asignará a la variable un valor indefinido. Así, cualquier uso de la variable en el bloque antes de la declaración real asumirá que la variable está indefinida en lugar de tener el valor de inicialización.

Utilizamos el ejemplo anterior para revisar el comportamiento de la elevación:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

Mientras que la elevación mueve la declaración variable_2 a la parte superior del bloque, no mueve el valor asignado. Esta lógica funciona más o menos equivalente a la siguiente sintaxis:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

En cualquiera de los dos casos, el valor final «Menos mal que estamos en 2021» no forma parte de la salida.

Te recomendamos que utilices la mejor práctica de declarar las variables para evitar posibles problemas y crear un código más limpio.

Objetos

JavaScript se basa en el concepto de objetos. Los objetos son contenedores que pueden encerrar propiedades, métodos o ambos.

Considera un ejemplo sencillo. Tienes un objeto llamado «país». Sus propiedades incluyen su nombre, continente, capital y población. Puede crear este objeto de varias maneras con JavaScript.

En primer lugar, puedes utilizar el enfoque de literal de objeto o inicializador de objeto:

var country = {

    name:"France",

    continent:"Europe",

    capital:"Paris",

    population:62250000;

}

También se puede instanciar un objeto y luego asignar sus propiedades:

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

Ten en cuenta que para referirse a las propiedades de un objeto se utiliza la sintaxis object.property.

Por último, se pueden crear objetos mediante funciones constructoras:

function country(name, continent, capital, population) {

    country.name = name;

    country.continent = continent;

    country.capital = capital;

    country.population = population;

}

La creación de una instancia del objeto se haría entonces mediante:

france = new country("France","Europe","Paris",62250000)

Las propiedades de los objetos pueden ser variables o funciones. Como se explica más adelante, cuando una propiedad de objeto es una función, se llama método.

Objetos vs. Clases

En pocas palabras, una clase es una plantilla de estructura genérica para un objeto. Las clases utilizan la forma de constructor para describir objetos.

class country {

    Constructor (name,continent,capital,population) {

        country.name = name;

        country.continent = continent;

        country.capital = capital;

        country.population = population;

    }

}

Al igual que los objetos, las clases pueden tener métodos.

Trabajar con constantes y variables

Al igual que con otros lenguajes, Java tiene varios tipos de operadores para usar con variables y funciones, la mayoría de los cuales serán inmediatamente reconocibles:

• Operadores de asignación (=, +=, -=, *=, /=, %=)
• Operadores de comparación (==, ===, !=, !==, >, >=, <, <=)
• Operadores Bitwise y Logical (ver más abajo)
• Operadores aritméticos (+, -, *, /, %, ++, --)
• Operadores especiales

Algunos operadores son menos familiares para los programadores novatos, como los operadores de comparación idénticos y no idénticos.

=== compara si dos operandos tienen el mismo valor y tipo (es decir, son idénticos). !== compara si dos operandos no son idénticos.

Considera el siguiente ejemplo:

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

La salida de este fragmento de código sería:

FALSE
TRUE

También es esencial entender la diferencia entre = (un operador de asignación) y == (un operador de comparación).

Mientras que = establece el valor de una variable, == comprueba si dos operandos tienen el mismo valor, incluso si una variable tiene un valor determinado. No debe utilizar el operador = en sentencias condicionales (como las sentencias IF) para comprobar la equivalencia.

Operadores Bitwise y Logical

JavaScript admite las operaciones AND (& ), OR (|), NOT (~) y XOR (^). En JavaScript, se conocen como operadores a nivel de bits. Las operaciones a nivel de bits convierten los operandos en representaciones binarias de 32 bits antes de operar (por ejemplo, 20 se convierte en 10100). Estas operaciones se denominan bitwise porque comparan los operandos convertidos bit a bit, y luego devuelven un resultado binario de 32 bits convertido en un entero.

Ejemplo:

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

Convierte los operandos a binario:

20 = 010100

50 = 110010

Una operación OR devuelve verdadero (1) cuando cualquiera de los dos bits es 1, por lo que el valor de comparación mostrado es 110110 o 53. En JavaScript, el término operador lógico se refiere a las operaciones cuyos operandos solo tienen los valores booleanos 0 o 1. Los operadores lógicos de JavaScript son && (AND lógico), || (OR lógico) y ! (NOT lógico).

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

Funciones y métodos

Piensa en las funciones como los caballos de batalla de JavaScript. Son bloques de código que realizan tareas específicas. Si estás familiarizado con los procedimientos y subrutinas de otros lenguajes de programación, reconocerás inmediatamente las funciones.

Las funciones se definen utilizando la siguiente sintaxis:

function function_name(parameter list) {

    // tasks to be performed

}

La definición de las funciones es solo el primer paso; más tarde hay que invocar las funciones utilizando () en el código:

$()

La función $() es la abreviatura del método getElementByID, que, como se ha indicado anteriormente, devuelve el ID de un elemento específico de un DOM HTML. Se utiliza frecuentemente para manipular elementos en un documento. $() permite una codificación de JavaScript más corta y eficiente.

Método tradicional:

document.getElementByID("element_id")

$() method:

$("element_id")

Características vs. Método

Las funciones realizan tareas; los métodos son propiedades de los objetos que contienen una definición funcional. La sintaxis para llamar a los métodos es object.function(). Las funciones son autónomas; los métodos están asociados a los objetos.

En el ejemplo anterior, el método document.getElementByID("element_id") hace referencia a un objeto (document) y a una propiedad asociada a ese objeto (getElementbyID()).

Hay dos tipos de métodos en JavaScript:

• Métodos de instancia
• Métodos estáticos

Los métodos de instancia pueden acceder y manipular las propiedades de una instancia de objeto. Los métodos de instancia también pueden llamar a otro método de instancia o a un método estático.

Los métodos estáticos contienen lógica relacionada con una clase en lugar de una instancia de la misma. Para crear un método estático, debe utilizar la palabra static antes de la definición de la función. Los métodos estáticos sólo pueden acceder a los campos estáticos; no pueden acceder a los campos de instancia.

Promesas en JavaScript

Una promesa es un objeto que produce un resultado en un momento futuro. En la terminología de JavaScript, las promesas se conocen como producción y consumo de código.

Las funciones pueden tardar un tiempo indeterminado y significativo en completarse. El código consumidor espera los resultados del código productor asíncrono antes de ejecutar sus funciones. Las promesas definen la relación entre el código productor y el código consumidor.

Las promesas tienen tres estados posibles: pendiente, cumplido o rechazado. En la definición de una promesa se especifican dos argumentos: resolver o rechazar. Pendiente es el estado inicial de una promesa y significa que la promesa no se ha cumplido ni rechazado. Cumplida implica que la promesa ha vuelto resuelta. Rechazada significa que la promesa ha regresado. Una promesa que ya no está en estado pendiente se considera resuelta.

La sintaxis de ejemplo para crear una promesa es:

var newPromise = new Promise(

    function(resolve, reject) {

        // condition to be tested

    }

)

Cerramientos en JavaScript

Los cierres son una característica de JavaScript que a menudo desconcierta a los programadores, aunque no son tan complicados. Los cierres de JavaScript son métodos para abordar el funcionamiento de las funciones anidadas. En concreto, los cierres permiten que una función interna acceda al contenido de una función padre, además de las variables globales a las que normalmente se puede acceder. Ten en cuenta que mientras la función interna tiene acceso a las variables de la función externa, lo contrario no es cierto.

Para entender los cierres, debes recordar los fundamentos del ámbito. Las variables dentro de una función son generalmente accesibles solo desde esa función, y el ámbito se crea por llamada, no genéricamente para la función. Los cierres solucionan el hecho de que las variables normalmente desaparecen después de que una función se complete. También permiten que las variables sigan siendo accesibles después de que una función se haya ejecutado.

Considera el siguiente código de ejemplo:

function outer_closure_function() {

    var outer_variable = "we want to keep the outer variable";

    var inner_closure_function = function() {

        inner_variable = "use closures because"

        console.log(inner_variable + " " + outer_variable);

    }

    return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

Para entender cómo funciona este cierre, recorre el código línea por línea. En primer lugar, se define la función externa y luego una variable asociada a ella. A continuación, se define la función interna. Es importante tener en cuenta que no has llamado a la función interna, solo la has definido. A continuación hay una sentencia que devuelve la función interna. Pero lo que devuelve no es el resultado de la función interna, sino la propia función.

Así que cuando se define el cierre como outer_closure_function, no devuelve el valor real de la función interna. En su lugar, devuelve una referencia a inner_closure_function. A pesar de que la función externa se ha completado después de esta declaración y outer_variable oficialmente ya no existe. Pero todavía se conserva en la referencia a inner_closure_function. Ahora cuando se llama a closure en la última sentencia, se muestra el resultado deseado.

Para entender mejor los cierres, deberías codificar y probar tú mismo algunos ejemplos. Se necesita tiempo para hacerlos bien. Además, las actualizaciones y pruebas repetidas te ayudarán a crear una mentalidad de desarrollo ágil.

Pero a medida que vayas avanzando, ten siempre presente los problemas de seguridad: JavaScript puede ser susceptible de sufrir graves problemas de seguridad, como inyecciones SQL y LDAP, ataques XSS, etc.

Resumen

Si estás interesado en hacer más cosas con tus páginas web de las que puedes conseguir con servicios out-of-the-box como Wix y Square, deberías considerar aprender JavaScript. Es una introducción sencilla y fácil de aprender a la programación de sitios web y aplicaciones que puede ayudarte a añadir características altamente interactivas a tu sitio sin invertir demasiado tiempo en el proceso de aprendizaje.

JavaScript es también una excelente manera de empezar a desarrollar tus habilidades de codificación, si eventualmente decides pasar al siguiente nivel.