Consulta nuestra gu\u00eda en v\u00eddeo<\/a> sobre JavaScript<\/h3>\n<\/kinsta-video>\n\u00bfQu\u00e9 es el JavaScript?<\/h2>\n
En pocas palabras, JavaScript es un popular lenguaje de programaci\u00f3n de scripts<\/a> para a\u00f1adir funcionalidades interactivas y otros contenidos web din\u00e1micos a las p\u00e1ginas web. Algunos ejemplos conocidos de contenido en JavaScript son los formularios rellenables, las presentaciones de galer\u00edas de fotos y los gr\u00e1ficos animados.<\/p>\nAdem\u00e1s, JavaScript es relativamente intuitivo y f\u00e1cil de aprender. Es un excelente punto de partida para aquellos que buscan aprender m\u00e1s sobre el desarrollo de sitios web.<\/p>\n
JavaScript es la \u00faltima capa de funcionalidad en los sitios web altamente interactivos. HTML<\/a> proporciona la estructura b\u00e1sica de la p\u00e1gina. CSS<\/a> es el elemento de moda de tu sitio web: determina el estilo de tu sitio. A continuaci\u00f3n, JavaScript a\u00f1ade emoci\u00f3n.<\/p>\nCuando se aprende JavaScript, es esencial entender la relaci\u00f3n entre HTML, CSS y JavaScript, y c\u00f3mo se unen para mostrar un sitio web.<\/p>\n
Para qu\u00e9 se usa el JavaScript<\/h2>\n
JavaScript tiene varias aplicaciones<\/a> que cualquiera que haya visitado p\u00e1ginas web interactivas o aplicaciones para m\u00f3viles probablemente habr\u00e1 experimentado. Aunque el desarrollo de sitios web -incluyendo la adici\u00f3n de elementos como formularios interactivos y animaciones- es el uso m\u00e1s tradicional de JavaScript, tambi\u00e9n se utiliza en:<\/p>\n\n- Juegos basados en el navegador web<\/strong>, incluidos los juegos 2D y 3D<\/li>\n
- Desarrollo de aplicaciones para m\u00f3viles<\/strong>: beneficioso porque es independiente de la plataforma telef\u00f3nica<\/li>\n
- Presentaciones<\/strong>: creaci\u00f3n de presentaciones de diapositivas animadas en la web<\/li>\n<\/ul>\n
Aunque la mayor\u00eda de las aplicaciones de JavaScript son del lado del cliente, este lenguaje tambi\u00e9n es \u00fatil en aplicaciones del lado del servidor, como la creaci\u00f3n de servidores web.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/dinosaur-gameover-1024x358.png\")
El juego de los dinosaurios, un ejemplo de juego integrado en el navegador web creado con JavaScript<\/figcaption><\/figure>\nDiferencias entre Java y JavaScript<\/h2>\n
En primer lugar, es importante se\u00f1alar que Java y JavaScript no est\u00e1n relacionados, a pesar de compartir el t\u00e9rmino \u00abJava\u00bb. Tanto Java como JavaScript son lenguajes para desarrollar p\u00e1ginas y aplicaciones web. Sin embargo, tienen claras diferencias, entre ellas:<\/p>\n
\n- Programaci\u00f3n orientada a objetos: <\/strong>Java es un lenguaje de programaci\u00f3n orientado a objetos<\/a>. JavaScript es un lenguaje de programaci\u00f3n de scripts orientado a objetos.<\/li>\n
- Sintaxis:<\/strong> La sintaxis de JavaScript no es tan formal o estructurada como la de Java. Por lo tanto, es m\u00e1s sencilla para la mayor\u00eda de los usuarios.<\/li>\n
- Compilaci\u00f3n:<\/strong> Java es un lenguaje compilado, mientras que JavaScript es un lenguaje interpretado que se interpreta l\u00ednea por l\u00ednea en tiempo de ejecuci\u00f3n; los lenguajes compilados suelen ser m\u00e1s r\u00e1pidos, pero los interpretados suelen ser m\u00e1s flexibles.<\/li>\n
- Entorno: <\/strong>Las aplicaciones Java se pueden utilizar b\u00e1sicamente en cualquier entorno, ejecut\u00e1ndose en m\u00e1quinas virtuales o en navegadores<\/a>; JavaScript es solo para navegadores.<\/li>\n
- Uso de memoria: <\/strong>Java consume m\u00e1s memoria<\/a> que JavaScript, por lo que este \u00faltimo es preferible para las p\u00e1ginas y aplicaciones web.<\/li>\n<\/ul>\n
\u00bfEs seguro JavaScript?<\/h2>\n
Aunque JavaScript es ampliamente aceptado y utilizado para el desarrollo web, tiene vulnerabilidades bien conocidas. Uno de los ciberataques m\u00e1s comunes introducidos a trav\u00e9s de las vulnerabilidades de JavaScript es el ataque Cross-site scripting (XSS). Los ciberdelincuentes utilizan los ataques XSS para acceder y robar informaci\u00f3n de identidad.<\/p>\n
Para minimizar los ataques, es fundamental probar y revisar el c\u00f3digo<\/a> durante el desarrollo. Los m\u00e9todos de prueba, como las pruebas de seguridad de aplicaciones est\u00e1ticas y din\u00e1micas (SAST y DAST), ayudan a identificar las vulnerabilidades en todos los puntos del ciclo de vida de desarrollo del software.<\/p>\nSeg\u00fan los analistas de seguridad de Cloud Defense<\/a>, SAST comprueba si tu c\u00f3digo viola las normas de seguridad y compara las vulnerabilidades encontradas entre las ramas de origen y destino. Recibir\u00e1s una notificaci\u00f3n si las dependencias de tu proyecto se ven afectadas por las nuevas vulnerabilidades reveladas.<\/p>\nVanilla JavaScript<\/h2>\n
Vanilla JavaScript es una implementaci\u00f3n ligera del lenguaje JavaScript puro sin bibliotecas a\u00f1adidas. Aqu\u00ed, el t\u00e9rmino \u00abvainilla\u00bb se refiere a un JavaScript no personalizado.<\/p>\n
Muchas empresas importantes utilizan Vanilla JS<\/a>, como Google, Microsoft, Apple, Amazon y otras. Vanilla JavaScript es una excelente manera de aprender los fundamentos de la programaci\u00f3n en JavaScript<\/a> antes de a\u00f1adir lazos a caracter\u00edsticas m\u00e1s avanzadas ofrecidas en las bibliotecas.<\/p>\nBibliotecas de JavaScript<\/h2>\n
Una biblioteca de JavaScript es una colecci\u00f3n de c\u00f3digo pre-escrito que realiza determinadas funciones. Las bibliotecas permiten incluso a los usuarios principiantes construir r\u00e1pidamente sitios web \u00fatiles. Y ahorran tanto a los usuarios novatos como a los experimentados un tiempo considerable en la construcci\u00f3n de sitios y aplicaciones.<\/p>\n
Aunque hay muchas bibliotecas de JavaScript<\/a>, algunas de las m\u00e1s populares son jQuery, Anime.js, Animate on Scroll y Leaflet.js.<\/p>\nC\u00f3mo se relaciona JavaScript con los frameworks de los sitios web<\/h2>\n
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\u00e9s familiarizado con los frameworks del lado del servidor como Laravel<\/a>, Ruby on Rails o Django. Pero tambi\u00e9n hay varios marcos populares basados en JavaScript del lado del cliente, como React.js, Vue.js y Node.js<\/a>.<\/p>\n![\"Biblioteca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reactjs2.jpg\")
Biblioteca React (Fuente de la imagen: Betica)<\/figcaption><\/figure>\nEl DOM de JavaScript<\/h2>\n
El DOM, o Modelo de Objetos del Documento, act\u00faa como una interfaz entre un lenguaje de programaci\u00f3n como JavaScript y un documento subyacente – espec\u00edficamente, documentos HTML y XML.<\/p>\n
El DOM es un est\u00e1ndar del W3C (World Wide Web Consortium)<\/a>, definido como \u00abuna interfaz independiente de la plataforma y el lenguaje que permite a los programas y scripts acceder y actualizar din\u00e1micamente el contenido, la estructura y el estilo de un documento\u00bb. Los documentos consisten en una colecci\u00f3n de elementos individuales y propiedades (texto<\/a>, botones, enlaces, etc.).<\/p>\nComponentes b\u00e1sicos de JavaScript<\/h2>\n
Al igual que otros lenguajes de programaci\u00f3n de scripts<\/a>, JavaScript utiliza variables para identificar las ubicaciones de almacenamiento de los datos. Las variables pueden ser globales (accesibles por cualquier funci\u00f3n del c\u00f3digo) o locales, tambi\u00e9n conocidas como \u00abblock-scoped\u00bb (accesibles solo en el bloque donde se declaran).<\/p>\nLas 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.<\/p>\n
Declarar una constante<\/h3>\n
Las constantes verdaderas se crean utilizando una declaraci\u00f3n const<\/code><\/a>. Const<\/code> crea constantes de solo lectura, inmutables y de \u00e1mbito de bloque (\u00abde \u00e1mbito de bloque\u00bb significa que la constante no es accesible desde fuera de su bloque declarado).<\/p>\nUn ejemplo de uso de const para crear una constante es:<\/p>\n
const GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\nObserva el uso de may\u00fasculas para nombrar la constante; es una convenci\u00f3n de nomenclatura com\u00fanmente aceptada, aunque no es obligatoria. Los nombres de las variables, incluyendo los nombres de las const, deben comenzar con una letra (min\u00fascula o may\u00fascula), el car\u00e1cter de subrayado (_<\/code>), o el signo de d\u00f3lar ($<\/code>). Son sensibles a las may\u00fasculas y min\u00fasculas, as\u00ed que aseg\u00farate de recordar c\u00f3mo nombras tus variables.<\/p>\nLas constantes, a diferencia de las variables, deben tener un valor asignado al crearse. La siguiente sentencia devolver\u00e1 un error:<\/p>\n
const GOLDEN_RATIO;<\/code><\/pre>\nDeclarar una variable<\/h3>\n
Las variables se declaran con la palabra clave var<\/code><\/a>. No es necesario asignarles un valor en el momento de la declaraci\u00f3n, aunque es permisible hacerlo y se hace con frecuencia. La palabra clave var<\/code> tiene alcance global en lugar de alcance de bloque (a menos que est\u00e9 en una funci\u00f3n, entonces tiene alcance de funci\u00f3n).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\nTen en cuenta que las declaraciones en JavaScript deben terminar con un punto y coma. Puedes crear comentarios usando \/\/<\/code> – JavaScript ignora cualquier cosa entre \/\/<\/code> y el final de la l\u00ednea.<\/p>\nLas variables pueden contener una variedad de tipos de datos, incluyendo n\u00fameros, cadenas y objetos. La asignaci\u00f3n de variables en JavaScript es din\u00e1mica. Por lo tanto, se puede asignar una variable a un tipo de datos diferente en el mismo c\u00f3digo.<\/p>\n
Hoisting<\/h2>\n
Ahora que entiendes la declaraci\u00f3n de variables en JavaScript<\/a>, podemos discutir c\u00f3mo JavaScript trata la ubicaci\u00f3n de la declaraci\u00f3n de variables. La pr\u00e1ctica de codificaci\u00f3n com\u00fanmente aceptada exige declarar las variables antes, o al mismo tiempo, de definirlas. Algunos lenguajes de programaci\u00f3n lo exigen.<\/p>\nSin embargo, JavaScript permite declarar las variables despu\u00e9s de definirlas o utilizarlas. Usando una caracter\u00edstica llamada hoisting, JavaScript mueve las declaraciones a la parte superior de un script o funci\u00f3n actual. Aunque la elevaci\u00f3n puede simplificar la programaci\u00f3n al permitir que un programador corrija un fallo de declaraci\u00f3n sin tener que retroceder por el c\u00f3digo, declarar variables despu\u00e9s de su uso no es coherente con las mejores pr\u00e1cticas de programaci\u00f3n<\/a>.<\/p>\nLa elevaci\u00f3n tambi\u00e9n puede causar problemas inesperados, principalmente porque la elevaci\u00f3n solo se aplica a la declaraci\u00f3n. Si una variable se declara e inicializa en la misma sentencia, el hoisting crear\u00e1 una declaraci\u00f3n en la parte superior del bloque y asignar\u00e1 a la variable un valor indefinido. As\u00ed, cualquier uso de la variable en el bloque antes de la declaraci\u00f3n real asumir\u00e1 que la variable est\u00e1 indefinida en lugar de tener el valor de inicializaci\u00f3n.<\/p>\n
Utilizamos el ejemplo anterior para revisar el comportamiento de la elevaci\u00f3n:<\/p>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nMientras que la elevaci\u00f3n mueve la declaraci\u00f3n variable_2<\/code> a la parte superior del bloque, no mueve el valor asignado. Esta l\u00f3gica funciona m\u00e1s o menos equivalente a la siguiente sintaxis:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nEn cualquiera de los dos casos, el valor final \u00abMenos mal que estamos en 2021\u00bb no forma parte de la salida.<\/p>\n
Te recomendamos que utilices la mejor pr\u00e1ctica de declarar las variables para evitar posibles problemas y crear un c\u00f3digo m\u00e1s limpio.<\/p>\n
Objetos<\/h2>\n
JavaScript se basa en el concepto de objetos<\/a>. Los objetos son contenedores que pueden encerrar propiedades, m\u00e9todos o ambos.<\/p>\nConsidera un ejemplo sencillo. Tienes un objeto llamado \u00abpa\u00eds\u00bb. Sus propiedades incluyen su nombre, continente, capital y poblaci\u00f3n. Puede crear este objeto de varias maneras con JavaScript.<\/p>\n
En primer lugar, puedes utilizar el enfoque de literal de objeto o inicializador de objeto:<\/p>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nTambi\u00e9n se puede instanciar un objeto y luego asignar sus propiedades:<\/p>\n
var country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nTen en cuenta que para referirse a las propiedades de un objeto se utiliza la sintaxis object.property<\/code>.<\/p>\nPor \u00faltimo, se pueden crear objetos mediante funciones constructoras:<\/p>\n
function country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nLa creaci\u00f3n de una instancia del objeto se har\u00eda entonces mediante:<\/p>\n
france = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nLas propiedades de los objetos pueden ser variables o funciones. Como se explica m\u00e1s adelante, cuando una propiedad de objeto es una funci\u00f3n, se llama m\u00e9todo.<\/p>\n
Objetos vs. Clases<\/h3>\n
En pocas palabras, una clase es una plantilla de estructura gen\u00e9rica para un objeto. Las clases utilizan la forma de constructor para describir objetos.<\/p>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nAl igual que los objetos, las clases pueden tener m\u00e9todos.<\/p>\n
Trabajar con constantes y variables<\/h2>\n
Al igual que con otros lenguajes, Java tiene varios tipos de operadores<\/a> para usar con variables y funciones, la mayor\u00eda de los cuales ser\u00e1n inmediatamente reconocibles:<\/p>\n\n- Operadores de asignaci\u00f3n (
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n- Operadores de comparaci\u00f3n (
==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n- Operadores Bitwise y Logical (ver m\u00e1s abajo)<\/li>\n
- Operadores aritm\u00e9ticos (
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n- Operadores especiales<\/li>\n<\/ul>\n
Algunos operadores son menos familiares para los programadores<\/a> novatos, como los operadores de comparaci\u00f3n id\u00e9nticos y no id\u00e9nticos.<\/p>\n===<\/code> compara si dos operandos tienen el mismo valor y tipo (es decir, son id\u00e9nticos). !==<\/code> compara si dos operandos no son id\u00e9nticos.<\/span><\/p>\nConsidera el siguiente ejemplo:<\/p>\n
var variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nLa salida de este fragmento de c\u00f3digo ser\u00eda:<\/p>\n
FALSE\nTRUE<\/code><\/pre>\nTambi\u00e9n es esencial entender la diferencia entre =<\/code> (un operador de asignaci\u00f3n) y ==<\/code> (un operador de comparaci\u00f3n).<\/p>\nMientras que =<\/code> establece el valor de una variable, ==<\/code> comprueba si dos operandos tienen el mismo valor, incluso si una variable tiene un valor determinado. No debe utilizar el operador =<\/code> en sentencias condicionales (como las sentencias IF) para comprobar la equivalencia.<\/p>\nOperadores Bitwise y Logical<\/h3>\n
JavaScript admite las operaciones AND (&<\/code> ), OR (|<\/code>), NOT (~<\/code>) y XOR (^<\/code>). 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<\/a> bit a bit, y luego devuelven un resultado binario de 32 bits convertido en un entero.<\/p>\nEjemplo:<\/p>\n
var variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\nConvierte los operandos a binario:<\/p>\n
20 = 010100\n\n50 = 110010<\/code><\/pre>\nUna operaci\u00f3n OR devuelve verdadero (1) cuando cualquiera de los dos bits es 1, por lo que el valor de comparaci\u00f3n mostrado es 110110 o 53. En JavaScript, el t\u00e9rmino operador l\u00f3gico se refiere a las operaciones cuyos operandos solo tienen los valores booleanos 0 o 1. Los operadores l\u00f3gicos de JavaScript son &&<\/code> (AND l\u00f3gico), ||<\/code> (OR l\u00f3gico) y !<\/code> (NOT l\u00f3gico).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunciones y m\u00e9todos<\/h2>\n
Piensa en las funciones como los caballos de batalla de JavaScript<\/a>. Son bloques de c\u00f3digo que realizan tareas espec\u00edficas. Si est\u00e1s familiarizado con los procedimientos y subrutinas de otros lenguajes de programaci\u00f3n, reconocer\u00e1s inmediatamente las funciones.<\/p>\nLas funciones se definen utilizando la siguiente sintaxis:<\/p>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\nLa definici\u00f3n de las funciones es solo el primer paso; m\u00e1s tarde hay que invocar las funciones utilizando ()<\/code> en el c\u00f3digo:<\/p>\n$()<\/h3>\n
La funci\u00f3n $()<\/code> es la abreviatura del m\u00e9todo getElementByID, que, como se ha indicado anteriormente, devuelve el ID de un elemento espec\u00edfico de un DOM HTML. Se utiliza frecuentemente para manipular elementos en un documento. $()<\/code> permite una codificaci\u00f3n de JavaScript m\u00e1s corta y eficiente.<\/p>\nM\u00e9todo tradicional:<\/p>\n
document.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nCaracter\u00edsticas vs. M\u00e9todo<\/h3>\n
Las funciones realizan tareas; los m\u00e9todos son propiedades de los objetos que contienen una definici\u00f3n funcional. La sintaxis para llamar a los m\u00e9todos es object.function()<\/code>. Las funciones son aut\u00f3nomas; los m\u00e9todos est\u00e1n asociados a los objetos.<\/p>\nEn el ejemplo anterior, el m\u00e9todo document.getElementByID(\"element_id\")<\/code> hace referencia a un objeto (document<\/code>) y a una propiedad asociada a ese objeto (getElementbyID()<\/code>).<\/p>\nHay dos tipos de m\u00e9todos en JavaScript:<\/p>\n
\n- M\u00e9todos de instancia<\/li>\n
- M\u00e9todos est\u00e1ticos<\/li>\n<\/ul>\n
Los m\u00e9todos de instancia pueden acceder y manipular las propiedades de una instancia de objeto. Los m\u00e9todos de instancia tambi\u00e9n pueden llamar a otro m\u00e9todo de instancia o a un m\u00e9todo est\u00e1tico.<\/p>\n
Los m\u00e9todos est\u00e1ticos contienen l\u00f3gica relacionada con una clase en lugar de una instancia de la misma. Para crear un m\u00e9todo est\u00e1tico, debe utilizar la palabra static antes de la definici\u00f3n de la funci\u00f3n. Los m\u00e9todos est\u00e1ticos s\u00f3lo pueden acceder a los campos est\u00e1ticos; no pueden acceder a los campos de instancia.<\/p>\n
Promesas en JavaScript<\/h2>\n
Una promesa es un objeto que produce un resultado en un momento futuro<\/a>. En la terminolog\u00eda de JavaScript, las promesas se conocen como producci\u00f3n y consumo de c\u00f3digo.<\/p>\nLas funciones pueden tardar un tiempo indeterminado y significativo<\/a> en completarse. El c\u00f3digo consumidor espera los resultados del c\u00f3digo productor as\u00edncrono antes de ejecutar sus funciones. Las promesas definen la relaci\u00f3n entre el c\u00f3digo productor y el c\u00f3digo consumidor.<\/p>\nLas promesas tienen tres estados posibles: pendiente, cumplido o rechazado. En la definici\u00f3n 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\u00e1 en estado pendiente se considera resuelta.<\/p>\n
La sintaxis de ejemplo para crear una promesa es:<\/p>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nCerramientos en JavaScript<\/h2>\n
Los cierres son una caracter\u00edstica de JavaScript que a menudo desconcierta a los programadores<\/a>, aunque no son tan complicados. Los cierres de JavaScript son m\u00e9todos para abordar el funcionamiento de las funciones anidadas. En concreto, los cierres permiten que una funci\u00f3n interna acceda al contenido de una funci\u00f3n padre, adem\u00e1s de las variables globales a las que normalmente se puede acceder. Ten en cuenta que mientras la funci\u00f3n interna tiene acceso a las variables de la funci\u00f3n externa, lo contrario no es cierto.<\/p>\nPara entender los cierres, debes recordar los fundamentos del \u00e1mbito. Las variables dentro de una funci\u00f3n son generalmente accesibles solo desde esa funci\u00f3n, y el \u00e1mbito se crea por llamada, no gen\u00e9ricamente para la funci\u00f3n. Los cierres solucionan el hecho de que las variables normalmente desaparecen despu\u00e9s de que una funci\u00f3n se complete. Tambi\u00e9n permiten que las variables sigan siendo accesibles despu\u00e9s de que una funci\u00f3n se haya ejecutado.<\/p>\n
Considera el siguiente c\u00f3digo de ejemplo:<\/p>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nPara entender c\u00f3mo funciona este cierre, recorre el c\u00f3digo l\u00ednea por l\u00ednea. En primer lugar, se define la funci\u00f3n externa y luego una variable asociada a ella. A continuaci\u00f3n, se define la funci\u00f3n interna. Es importante tener en cuenta que no has llamado a la funci\u00f3n interna, solo la has definido. A continuaci\u00f3n hay una sentencia que devuelve la funci\u00f3n interna. Pero lo que devuelve no es el resultado de la funci\u00f3n interna, sino la propia funci\u00f3n.<\/p>\n
As\u00ed que cuando se define el cierre como outer_closure_function<\/code>, no devuelve el valor real de la funci\u00f3n interna. En su lugar, devuelve una referencia a inner_closure_function<\/code>. A pesar de que la funci\u00f3n externa se ha completado despu\u00e9s de esta declaraci\u00f3n y outer_variable<\/code> oficialmente ya no existe. Pero todav\u00eda se conserva en la referencia a inner_closure_function<\/code>. Ahora cuando se llama a closure en la \u00faltima sentencia, se muestra el resultado deseado.<\/p>\nPara entender mejor los cierres, deber\u00edas codificar y probar t\u00fa mismo algunos ejemplos<\/a>. Se necesita tiempo para hacerlos bien. Adem\u00e1s, las actualizaciones y pruebas repetidas te ayudar\u00e1n a crear una mentalidad de desarrollo \u00e1gil.<\/p>\nPero a medida que vayas avanzando, ten siempre presente los problemas de seguridad<\/a>: JavaScript puede ser susceptible de sufrir graves problemas de seguridad, como inyecciones SQL y LDAP<\/a>, ataques XSS, etc.<\/p>\nResumen<\/h2>\n
Si est\u00e1s interesado en hacer m\u00e1s cosas con tus p\u00e1ginas web de las que puedes conseguir con servicios out-of-the-box como Wix y Square, deber\u00edas considerar aprender JavaScript. Es una introducci\u00f3n sencilla y f\u00e1cil de aprender a la programaci\u00f3n de sitios web y aplicaciones<\/a> que puede ayudarte a a\u00f1adir caracter\u00edsticas altamente interactivas a tu sitio sin invertir demasiado tiempo en el proceso de aprendizaje.<\/p>\n
\u00bfQu\u00e9 es el JavaScript?<\/h2>\n
En pocas palabras, JavaScript es un popular lenguaje de programaci\u00f3n de scripts<\/a> para a\u00f1adir funcionalidades interactivas y otros contenidos web din\u00e1micos a las p\u00e1ginas web. Algunos ejemplos conocidos de contenido en JavaScript son los formularios rellenables, las presentaciones de galer\u00edas de fotos y los gr\u00e1ficos animados.<\/p>\n Adem\u00e1s, JavaScript es relativamente intuitivo y f\u00e1cil de aprender. Es un excelente punto de partida para aquellos que buscan aprender m\u00e1s sobre el desarrollo de sitios web.<\/p>\n JavaScript es la \u00faltima capa de funcionalidad en los sitios web altamente interactivos. HTML<\/a> proporciona la estructura b\u00e1sica de la p\u00e1gina. CSS<\/a> es el elemento de moda de tu sitio web: determina el estilo de tu sitio. A continuaci\u00f3n, JavaScript a\u00f1ade emoci\u00f3n.<\/p>\n Cuando se aprende JavaScript, es esencial entender la relaci\u00f3n entre HTML, CSS y JavaScript, y c\u00f3mo se unen para mostrar un sitio web.<\/p>\n JavaScript tiene varias aplicaciones<\/a> que cualquiera que haya visitado p\u00e1ginas web interactivas o aplicaciones para m\u00f3viles probablemente habr\u00e1 experimentado. Aunque el desarrollo de sitios web -incluyendo la adici\u00f3n de elementos como formularios interactivos y animaciones- es el uso m\u00e1s tradicional de JavaScript, tambi\u00e9n se utiliza en:<\/p>\n Aunque la mayor\u00eda de las aplicaciones de JavaScript son del lado del cliente, este lenguaje tambi\u00e9n es \u00fatil en aplicaciones del lado del servidor, como la creaci\u00f3n de servidores web.<\/p>\n En primer lugar, es importante se\u00f1alar que Java y JavaScript no est\u00e1n relacionados, a pesar de compartir el t\u00e9rmino \u00abJava\u00bb. Tanto Java como JavaScript son lenguajes para desarrollar p\u00e1ginas y aplicaciones web. Sin embargo, tienen claras diferencias, entre ellas:<\/p>\n Aunque JavaScript es ampliamente aceptado y utilizado para el desarrollo web, tiene vulnerabilidades bien conocidas. Uno de los ciberataques m\u00e1s comunes introducidos a trav\u00e9s de las vulnerabilidades de JavaScript es el ataque Cross-site scripting (XSS). Los ciberdelincuentes utilizan los ataques XSS para acceder y robar informaci\u00f3n de identidad.<\/p>\n Para minimizar los ataques, es fundamental probar y revisar el c\u00f3digo<\/a> durante el desarrollo. Los m\u00e9todos de prueba, como las pruebas de seguridad de aplicaciones est\u00e1ticas y din\u00e1micas (SAST y DAST), ayudan a identificar las vulnerabilidades en todos los puntos del ciclo de vida de desarrollo del software.<\/p>\n Seg\u00fan los analistas de seguridad de Cloud Defense<\/a>, SAST comprueba si tu c\u00f3digo viola las normas de seguridad y compara las vulnerabilidades encontradas entre las ramas de origen y destino. Recibir\u00e1s una notificaci\u00f3n si las dependencias de tu proyecto se ven afectadas por las nuevas vulnerabilidades reveladas.<\/p>\n Vanilla JavaScript es una implementaci\u00f3n ligera del lenguaje JavaScript puro sin bibliotecas a\u00f1adidas. Aqu\u00ed, el t\u00e9rmino \u00abvainilla\u00bb se refiere a un JavaScript no personalizado.<\/p>\n Muchas empresas importantes utilizan Vanilla JS<\/a>, como Google, Microsoft, Apple, Amazon y otras. Vanilla JavaScript es una excelente manera de aprender los fundamentos de la programaci\u00f3n en JavaScript<\/a> antes de a\u00f1adir lazos a caracter\u00edsticas m\u00e1s avanzadas ofrecidas en las bibliotecas.<\/p>\n Una biblioteca de JavaScript es una colecci\u00f3n de c\u00f3digo pre-escrito que realiza determinadas funciones. Las bibliotecas permiten incluso a los usuarios principiantes construir r\u00e1pidamente sitios web \u00fatiles. Y ahorran tanto a los usuarios novatos como a los experimentados un tiempo considerable en la construcci\u00f3n de sitios y aplicaciones.<\/p>\n Aunque hay muchas bibliotecas de JavaScript<\/a>, algunas de las m\u00e1s populares son jQuery, Anime.js, Animate on Scroll y Leaflet.js.<\/p>\n 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\u00e9s familiarizado con los frameworks del lado del servidor como Laravel<\/a>, Ruby on Rails o Django. Pero tambi\u00e9n hay varios marcos populares basados en JavaScript del lado del cliente, como React.js, Vue.js y Node.js<\/a>.<\/p>\n El DOM, o Modelo de Objetos del Documento, act\u00faa como una interfaz entre un lenguaje de programaci\u00f3n como JavaScript y un documento subyacente – espec\u00edficamente, documentos HTML y XML.<\/p>\n El DOM es un est\u00e1ndar del W3C (World Wide Web Consortium)<\/a>, definido como \u00abuna interfaz independiente de la plataforma y el lenguaje que permite a los programas y scripts acceder y actualizar din\u00e1micamente el contenido, la estructura y el estilo de un documento\u00bb. Los documentos consisten en una colecci\u00f3n de elementos individuales y propiedades (texto<\/a>, botones, enlaces, etc.).<\/p>\n Al igual que otros lenguajes de programaci\u00f3n de scripts<\/a>, JavaScript utiliza variables para identificar las ubicaciones de almacenamiento de los datos. Las variables pueden ser globales (accesibles por cualquier funci\u00f3n del c\u00f3digo) o locales, tambi\u00e9n conocidas como \u00abblock-scoped\u00bb (accesibles solo en el bloque donde se declaran).<\/p>\n 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.<\/p>\n Las constantes verdaderas se crean utilizando una declaraci\u00f3n Un ejemplo de uso de const para crear una constante es:<\/p>\n Observa el uso de may\u00fasculas para nombrar la constante; es una convenci\u00f3n de nomenclatura com\u00fanmente aceptada, aunque no es obligatoria. Los nombres de las variables, incluyendo los nombres de las const, deben comenzar con una letra (min\u00fascula o may\u00fascula), el car\u00e1cter de subrayado ( Las constantes, a diferencia de las variables, deben tener un valor asignado al crearse. La siguiente sentencia devolver\u00e1 un error:<\/p>\n Las variables se declaran con la palabra clave Ten en cuenta que las declaraciones en JavaScript deben terminar con un punto y coma. Puedes crear comentarios usando Las variables pueden contener una variedad de tipos de datos, incluyendo n\u00fameros, cadenas y objetos. La asignaci\u00f3n de variables en JavaScript es din\u00e1mica. Por lo tanto, se puede asignar una variable a un tipo de datos diferente en el mismo c\u00f3digo.<\/p>\n Ahora que entiendes la declaraci\u00f3n de variables en JavaScript<\/a>, podemos discutir c\u00f3mo JavaScript trata la ubicaci\u00f3n de la declaraci\u00f3n de variables. La pr\u00e1ctica de codificaci\u00f3n com\u00fanmente aceptada exige declarar las variables antes, o al mismo tiempo, de definirlas. Algunos lenguajes de programaci\u00f3n lo exigen.<\/p>\n Sin embargo, JavaScript permite declarar las variables despu\u00e9s de definirlas o utilizarlas. Usando una caracter\u00edstica llamada hoisting, JavaScript mueve las declaraciones a la parte superior de un script o funci\u00f3n actual. Aunque la elevaci\u00f3n puede simplificar la programaci\u00f3n al permitir que un programador corrija un fallo de declaraci\u00f3n sin tener que retroceder por el c\u00f3digo, declarar variables despu\u00e9s de su uso no es coherente con las mejores pr\u00e1cticas de programaci\u00f3n<\/a>.<\/p>\n La elevaci\u00f3n tambi\u00e9n puede causar problemas inesperados, principalmente porque la elevaci\u00f3n solo se aplica a la declaraci\u00f3n. Si una variable se declara e inicializa en la misma sentencia, el hoisting crear\u00e1 una declaraci\u00f3n en la parte superior del bloque y asignar\u00e1 a la variable un valor indefinido. As\u00ed, cualquier uso de la variable en el bloque antes de la declaraci\u00f3n real asumir\u00e1 que la variable est\u00e1 indefinida en lugar de tener el valor de inicializaci\u00f3n.<\/p>\n Utilizamos el ejemplo anterior para revisar el comportamiento de la elevaci\u00f3n:<\/p>\n Mientras que la elevaci\u00f3n mueve la declaraci\u00f3n En cualquiera de los dos casos, el valor final \u00abMenos mal que estamos en 2021\u00bb no forma parte de la salida.<\/p>\n Te recomendamos que utilices la mejor pr\u00e1ctica de declarar las variables para evitar posibles problemas y crear un c\u00f3digo m\u00e1s limpio.<\/p>\n JavaScript se basa en el concepto de objetos<\/a>. Los objetos son contenedores que pueden encerrar propiedades, m\u00e9todos o ambos.<\/p>\n Considera un ejemplo sencillo. Tienes un objeto llamado \u00abpa\u00eds\u00bb. Sus propiedades incluyen su nombre, continente, capital y poblaci\u00f3n. Puede crear este objeto de varias maneras con JavaScript.<\/p>\n En primer lugar, puedes utilizar el enfoque de literal de objeto o inicializador de objeto:<\/p>\n Tambi\u00e9n se puede instanciar un objeto y luego asignar sus propiedades:<\/p>\n Ten en cuenta que para referirse a las propiedades de un objeto se utiliza la sintaxis Por \u00faltimo, se pueden crear objetos mediante funciones constructoras:<\/p>\n La creaci\u00f3n de una instancia del objeto se har\u00eda entonces mediante:<\/p>\n Las propiedades de los objetos pueden ser variables o funciones. Como se explica m\u00e1s adelante, cuando una propiedad de objeto es una funci\u00f3n, se llama m\u00e9todo.<\/p>\n En pocas palabras, una clase es una plantilla de estructura gen\u00e9rica para un objeto. Las clases utilizan la forma de constructor para describir objetos.<\/p>\n Al igual que los objetos, las clases pueden tener m\u00e9todos.<\/p>\n Al igual que con otros lenguajes, Java tiene varios tipos de operadores<\/a> para usar con variables y funciones, la mayor\u00eda de los cuales ser\u00e1n inmediatamente reconocibles:<\/p>\n Algunos operadores son menos familiares para los programadores<\/a> novatos, como los operadores de comparaci\u00f3n id\u00e9nticos y no id\u00e9nticos.<\/p>\n Considera el siguiente ejemplo:<\/p>\n La salida de este fragmento de c\u00f3digo ser\u00eda:<\/p>\n Tambi\u00e9n es esencial entender la diferencia entre Mientras que JavaScript admite las operaciones AND ( Ejemplo:<\/p>\n Convierte los operandos a binario:<\/p>\n Una operaci\u00f3n OR devuelve verdadero (1) cuando cualquiera de los dos bits es 1, por lo que el valor de comparaci\u00f3n mostrado es 110110 o 53. En JavaScript, el t\u00e9rmino operador l\u00f3gico se refiere a las operaciones cuyos operandos solo tienen los valores booleanos 0 o 1. Los operadores l\u00f3gicos de JavaScript son Piensa en las funciones como los caballos de batalla de JavaScript<\/a>. Son bloques de c\u00f3digo que realizan tareas espec\u00edficas. Si est\u00e1s familiarizado con los procedimientos y subrutinas de otros lenguajes de programaci\u00f3n, reconocer\u00e1s inmediatamente las funciones.<\/p>\n Las funciones se definen utilizando la siguiente sintaxis:<\/p>\n La definici\u00f3n de las funciones es solo el primer paso; m\u00e1s tarde hay que invocar las funciones utilizando La funci\u00f3n M\u00e9todo tradicional:<\/p>\n Las funciones realizan tareas; los m\u00e9todos son propiedades de los objetos que contienen una definici\u00f3n funcional. La sintaxis para llamar a los m\u00e9todos es En el ejemplo anterior, el m\u00e9todo Hay dos tipos de m\u00e9todos en JavaScript:<\/p>\n Los m\u00e9todos de instancia pueden acceder y manipular las propiedades de una instancia de objeto. Los m\u00e9todos de instancia tambi\u00e9n pueden llamar a otro m\u00e9todo de instancia o a un m\u00e9todo est\u00e1tico.<\/p>\n Los m\u00e9todos est\u00e1ticos contienen l\u00f3gica relacionada con una clase en lugar de una instancia de la misma. Para crear un m\u00e9todo est\u00e1tico, debe utilizar la palabra static antes de la definici\u00f3n de la funci\u00f3n. Los m\u00e9todos est\u00e1ticos s\u00f3lo pueden acceder a los campos est\u00e1ticos; no pueden acceder a los campos de instancia.<\/p>\n Una promesa es un objeto que produce un resultado en un momento futuro<\/a>. En la terminolog\u00eda de JavaScript, las promesas se conocen como producci\u00f3n y consumo de c\u00f3digo.<\/p>\n Las funciones pueden tardar un tiempo indeterminado y significativo<\/a> en completarse. El c\u00f3digo consumidor espera los resultados del c\u00f3digo productor as\u00edncrono antes de ejecutar sus funciones. Las promesas definen la relaci\u00f3n entre el c\u00f3digo productor y el c\u00f3digo consumidor.<\/p>\n Las promesas tienen tres estados posibles: pendiente, cumplido o rechazado. En la definici\u00f3n 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\u00e1 en estado pendiente se considera resuelta.<\/p>\n La sintaxis de ejemplo para crear una promesa es:<\/p>\n Los cierres son una caracter\u00edstica de JavaScript que a menudo desconcierta a los programadores<\/a>, aunque no son tan complicados. Los cierres de JavaScript son m\u00e9todos para abordar el funcionamiento de las funciones anidadas. En concreto, los cierres permiten que una funci\u00f3n interna acceda al contenido de una funci\u00f3n padre, adem\u00e1s de las variables globales a las que normalmente se puede acceder. Ten en cuenta que mientras la funci\u00f3n interna tiene acceso a las variables de la funci\u00f3n externa, lo contrario no es cierto.<\/p>\n Para entender los cierres, debes recordar los fundamentos del \u00e1mbito. Las variables dentro de una funci\u00f3n son generalmente accesibles solo desde esa funci\u00f3n, y el \u00e1mbito se crea por llamada, no gen\u00e9ricamente para la funci\u00f3n. Los cierres solucionan el hecho de que las variables normalmente desaparecen despu\u00e9s de que una funci\u00f3n se complete. Tambi\u00e9n permiten que las variables sigan siendo accesibles despu\u00e9s de que una funci\u00f3n se haya ejecutado.<\/p>\n Considera el siguiente c\u00f3digo de ejemplo:<\/p>\n Para entender c\u00f3mo funciona este cierre, recorre el c\u00f3digo l\u00ednea por l\u00ednea. En primer lugar, se define la funci\u00f3n externa y luego una variable asociada a ella. A continuaci\u00f3n, se define la funci\u00f3n interna. Es importante tener en cuenta que no has llamado a la funci\u00f3n interna, solo la has definido. A continuaci\u00f3n hay una sentencia que devuelve la funci\u00f3n interna. Pero lo que devuelve no es el resultado de la funci\u00f3n interna, sino la propia funci\u00f3n.<\/p>\n As\u00ed que cuando se define el cierre como Para entender mejor los cierres, deber\u00edas codificar y probar t\u00fa mismo algunos ejemplos<\/a>. Se necesita tiempo para hacerlos bien. Adem\u00e1s, las actualizaciones y pruebas repetidas te ayudar\u00e1n a crear una mentalidad de desarrollo \u00e1gil.<\/p>\n Pero a medida que vayas avanzando, ten siempre presente los problemas de seguridad<\/a>: JavaScript puede ser susceptible de sufrir graves problemas de seguridad, como inyecciones SQL y LDAP<\/a>, ataques XSS, etc.<\/p>\n Si est\u00e1s interesado en hacer m\u00e1s cosas con tus p\u00e1ginas web de las que puedes conseguir con servicios out-of-the-box como Wix y Square, deber\u00edas considerar aprender JavaScript. Es una introducci\u00f3n sencilla y f\u00e1cil de aprender a la programaci\u00f3n de sitios web y aplicaciones<\/a> que puede ayudarte a a\u00f1adir caracter\u00edsticas altamente interactivas a tu sitio sin invertir demasiado tiempo en el proceso de aprendizaje.<\/p>\nPara qu\u00e9 se usa el JavaScript<\/h2>\n
\n
Diferencias entre Java y JavaScript<\/h2>\n
\n
\u00bfEs seguro JavaScript?<\/h2>\n
Vanilla JavaScript<\/h2>\n
Bibliotecas de JavaScript<\/h2>\n
C\u00f3mo se relaciona JavaScript con los frameworks de los sitios web<\/h2>\n
El DOM de JavaScript<\/h2>\n
Componentes b\u00e1sicos de JavaScript<\/h2>\n
Declarar una constante<\/h3>\n
const<\/code><\/a>. Const<\/code> crea constantes de solo lectura, inmutables y de \u00e1mbito de bloque (\u00abde \u00e1mbito de bloque\u00bb significa que la constante no es accesible desde fuera de su bloque declarado).<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\n_<\/code>), o el signo de d\u00f3lar ($<\/code>). Son sensibles a las may\u00fasculas y min\u00fasculas, as\u00ed que aseg\u00farate de recordar c\u00f3mo nombras tus variables.<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nDeclarar una variable<\/h3>\n
var<\/code><\/a>. No es necesario asignarles un valor en el momento de la declaraci\u00f3n, aunque es permisible hacerlo y se hace con frecuencia. La palabra clave var<\/code> tiene alcance global en lugar de alcance de bloque (a menos que est\u00e9 en una funci\u00f3n, entonces tiene alcance de funci\u00f3n).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\n\/\/<\/code> – JavaScript ignora cualquier cosa entre \/\/<\/code> y el final de la l\u00ednea.<\/p>\nHoisting<\/h2>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nvariable_2<\/code> a la parte superior del bloque, no mueve el valor asignado. Esta l\u00f3gica funciona m\u00e1s o menos equivalente a la siguiente sintaxis:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nObjetos<\/h2>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nvar country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nobject.property<\/code>.<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nfrance = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nObjetos vs. Clases<\/h3>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nTrabajar con constantes y variables<\/h2>\n
\n
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n===<\/code> compara si dos operandos tienen el mismo valor y tipo (es decir, son id\u00e9nticos). !==<\/code> compara si dos operandos no son id\u00e9nticos.<\/span><\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nFALSE\nTRUE<\/code><\/pre>\n=<\/code> (un operador de asignaci\u00f3n) y ==<\/code> (un operador de comparaci\u00f3n).<\/p>\n=<\/code> establece el valor de una variable, ==<\/code> comprueba si dos operandos tienen el mismo valor, incluso si una variable tiene un valor determinado. No debe utilizar el operador =<\/code> en sentencias condicionales (como las sentencias IF) para comprobar la equivalencia.<\/p>\nOperadores Bitwise y Logical<\/h3>\n
&<\/code> ), OR (|<\/code>), NOT (~<\/code>) y XOR (^<\/code>). 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<\/a> bit a bit, y luego devuelven un resultado binario de 32 bits convertido en un entero.<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\n20 = 010100\n\n50 = 110010<\/code><\/pre>\n&&<\/code> (AND l\u00f3gico), ||<\/code> (OR l\u00f3gico) y !<\/code> (NOT l\u00f3gico).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunciones y m\u00e9todos<\/h2>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\n()<\/code> en el c\u00f3digo:<\/p>\n$()<\/h3>\n
$()<\/code> es la abreviatura del m\u00e9todo getElementByID, que, como se ha indicado anteriormente, devuelve el ID de un elemento espec\u00edfico de un DOM HTML. Se utiliza frecuentemente para manipular elementos en un documento. $()<\/code> permite una codificaci\u00f3n de JavaScript m\u00e1s corta y eficiente.<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nCaracter\u00edsticas vs. M\u00e9todo<\/h3>\n
object.function()<\/code>. Las funciones son aut\u00f3nomas; los m\u00e9todos est\u00e1n asociados a los objetos.<\/p>\ndocument.getElementByID(\"element_id\")<\/code> hace referencia a un objeto (document<\/code>) y a una propiedad asociada a ese objeto (getElementbyID()<\/code>).<\/p>\n\n
Promesas en JavaScript<\/h2>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nCerramientos en JavaScript<\/h2>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nouter_closure_function<\/code>, no devuelve el valor real de la funci\u00f3n interna. En su lugar, devuelve una referencia a inner_closure_function<\/code>. A pesar de que la funci\u00f3n externa se ha completado despu\u00e9s de esta declaraci\u00f3n y outer_variable<\/code> oficialmente ya no existe. Pero todav\u00eda se conserva en la referencia a inner_closure_function<\/code>. Ahora cuando se llama a closure en la \u00faltima sentencia, se muestra el resultado deseado.<\/p>\nResumen<\/h2>\n