{"id":3546,"date":"2017-11-22T07:41:53","date_gmt":"2017-11-22T13:41:53","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/11\/22\/introduccion-javascript\/"},"modified":"2024-04-06T01:49:35","modified_gmt":"2024-04-06T07:49:35","slug":"introduccion-javascript","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/introduccion-javascript\/","title":{"rendered":"Introducci\u00f3n Javascript"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"quesjavascript\">\u00bfC\u00f3mo naci\u00f3 Javascript?<\/h2>\n\n\n\n<p><a href=\"https:\/\/pensemosweb.com\/en\/paradigma-programacion-javascript\/\">Javascript es un lenguaje de programaci\u00f3n multiparadigma,<\/a> es orientado a objetos y funcional, por eso es un lenguaje muy potente. Est\u00e1 basado principalmente en dos lenguajes de programaci\u00f3n con caracter\u00edsticas \u00fanicas:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>scheme<\/strong>, Paradigma funcional. Influenciado por <strong>Lisp<\/strong><\/li><li><strong>Self<\/strong>, Paradigma orientado a objetos, basado en prototipos en lugar de clases. Influenciado por <strong>Smalltalk<\/strong><\/li><\/ol>\n\n\n\n<p>A mediados de los noventa, la <strong>compa\u00f1\u00eda Netscape <\/strong>necesitaba un lenguaje para su navegador web. Entonces contrataron a&nbsp;<strong>Brendan Eich<\/strong> quien inicialmente quer\u00eda usar algo como <strong>scheme <\/strong>dentro del navegador.<\/p>\n\n\n\n<p>En esa \u00e9poca, Netscape ten\u00eda tratos con <strong>Sun microsystems<\/strong> para mostrar Java en el navegador a trav\u00e9s de applets.  As\u00ed que ten\u00edan en mente un lenguaje hermano, mucho m\u00e1s simple. Pero poquito despues sintieron que ya no deber\u00edan crear este lenguaje, que con Java era suficiente.<\/p>\n\n\n\n<p>Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una p\u00e1gina web. Y que pudiera ser utilizado por personas que no supieran lo que es un compilador.<\/p>\n\n\n\n<p><strong>Brendan Eich<\/strong> tom\u00f3 la sintaxis de <strong>Java<\/strong>, el modelo funcional de <strong>scheme<\/strong>, y la programaci\u00f3n orientado a objetos basada en prototipos de <strong>Self<\/strong>. <\/p>\n\n\n\n<p>Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de <strong>C\/C++ <\/strong>de los cuales Java surgi\u00f3. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/11\/path-to-js-1024x683.jpg\" alt=\"Javascript: scheme, self y Java en uno\" class=\"wp-image-369\"\/><figcaption>Javascript: scheme, self y Java en uno<\/figcaption><\/figure><\/div>\n\n\n\n<p>JavaScript fue creado a prisas y con mucha presi\u00f3n, en diez d\u00edas<strong> Brendan Eich<\/strong> cre\u00f3 la primera versi\u00f3n, aun as\u00ed la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programaci\u00f3n <strong>Scheme, Self y C\/C++<\/strong> han hecho de JavaScript un lenguaje muy potente y expresivo.<\/p>\n\n\n\n<p>Si quieres saber m\u00e1s al respecto, puedes visitar <a href=\"https:\/\/pensemosweb.com\/en\/javascript-scheme-self-java\/\">\u00bfQu\u00e9 relaci\u00f3n tiene JavaScript con Scheme, Self y Java? Nacimiento de JavaScript<\/a> donde seguro despejaras dudas y te recomiendo que lo leas despu\u00e9s de esta introducci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nombre y estandarizaci\u00f3n<\/h2>\n\n\n\n<p>En un inicio se llam\u00f3 <strong>mocha<\/strong>, despu\u00e9s <strong>LiveScript<\/strong> en su primer lanzamiento oficial en 1995 y tres meses despu\u00e9s lo llamaron <strong>JavaScript<\/strong>. Este \u00faltimo nombre tiene muy poco que ver con el lenguaje, seg\u00fan se entiende, lo llamaron as\u00ed por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.<\/p>\n\n\n\n<p>Tiempo despu\u00e9s Netscape anuncio una reuni\u00f3n con la organizaci\u00f3n de est\u00e1ndares <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ecma_International\" target=\"_blank\" rel=\"noreferrer noopener\">Ecma International<\/a> para dar paso a la estandarizaci\u00f3n de Javascript. As\u00ed la primera edici\u00f3n<strong> ECMA-262<\/strong>, fue aceptada por la asamblea general de Ecma en junio de <strong>1997<\/strong>.  Realmente el est\u00e1ndar del lenguaje se llama <strong>ECMAScript<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfD\u00f3nde se usa Javascript?<\/h2>\n\n\n\n<p>Javascript es un lenguaje de programaci\u00f3n muy flexible, <a href=\"https:\/\/pensemosweb.com\/en\/paradigma-programacion-javascript\/\">multiparadigma<\/a>, din\u00e1mico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes \u00e1reas, por mencionar algunas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Navegadores web<\/strong> como Firefox, Google Chrome, Opera, Safari.<\/li><li>Aplicaciones m\u00f3viles, incrustados en la aplicaci\u00f3n nativa mediante WebViews, o con herramientas como <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/cordova.apache.org\/\" target=\"_blank\">Cordova<\/a><\/strong> and <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/ionicframework.com\/\" target=\"_blank\">Ionic<\/a><\/strong><\/li><li>En <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/nodejs.org\/es\/\" target=\"_blank\">Node.js<\/a><\/strong> para crear servidores http, ftp y cualquier tipo de tecnolog\u00eda de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.<\/li><li>Bases de datos como <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.mongodb.com\/\" target=\"_blank\">MongoDB<\/a><\/strong>.<\/li><li>Aplicaciones de escritorio, un ejemplo es <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/electronjs.org\/\" target=\"_blank\">Electron<\/a><\/strong>, los editores <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/atom.io\/\" target=\"_blank\">Atom<\/a><\/strong> and <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\/?wt.mc_id=DX_841432\" target=\"_blank\">Visual Studio Code<\/a><\/strong> est\u00e1n hechos con electron.<\/li><li>Programaci\u00f3n de Robots e IoT (Internet de las cosas), por ejemplo <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.arduino.cc\/\" target=\"_blank\">Arduino<\/a><\/strong> and <strong><a rel=\"noreferrer noopener\" href=\"http:\/\/johnny-five.io\/\" target=\"_blank\">johnny-five<\/a><\/strong>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cmoseusajavascript\">\u00bfC\u00f3mo se usa Javascript?<\/h2>\n\n\n\n<p>Javascript es un lenguaje compilado en el momento (Just-in-time compiled), el motor de JavaScript recorre linea por l\u00ednea y as\u00ed va traduciendo el c\u00f3digo a lenguaje maquina para que la computadora lo pueda entender. En las primeras versiones de JavaScript se ocupaba un int\u00e9rprete.<\/p>\n\n\n\n<p>Como ya mencionamos, Javascript no solo se puede ejecutar en el <strong>navegador web<\/strong>, sino tambi\u00e9n del lado del servidor, como lo hace en <strong>node.js<\/strong>, a estos lugares donde javascript se puede ejecutar se les llama <strong>ambientes hu\u00e9sped<\/strong>. Estos ambientes tienen sus propias funcionalidades y APIs que no son parte del est\u00e1ndar de ECMAScript. Por ejemplo, en el navegador encontramos los objetos <strong>window<\/strong> and <strong>document<\/strong>, en node.js podemos encontrar los objetos <strong>http<\/strong> and <strong>fs<\/strong>.<\/p>\n\n\n\n<p>Para aprender cualquier otro lenguaje, todos sabemos que necesitamos saber su gram\u00e1tica, es por eso que vamos a ver la definici\u00f3n de gram\u00e1tica sacada de Wikipedia:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>La gram\u00e1tica es el estudio de las reglas y principios que gobiernan el uso de las lenguas y la organizaci\u00f3n de las palabras dentro de unas oraciones y otro tipo de constituyentes sint\u00e1cticos.<\/p><\/blockquote>\n\n\n\n<p>Solo veremos la gram\u00e1tica b\u00e1sica para poder empezar a crear c\u00f3digo. De tal manera que se combinen con ejemplos pr\u00e1cticos y en pr\u00f3ximas publicaciones iremos aumentando nuestro entendimiento de la misma forma.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"declararelementosreutilizables\">Variables<\/h2>\n\n\n\n<p>One of the most used elements are <strong>variables<\/strong>, las variables son cajitas con etiquetas, y tienen un espacio de memoria para guardar alg\u00fan tipo de dato.<\/p>\n\n\n\n<p>Las etiquetas de las cajitas deben cumplir ciertas reglas. Su nombre o <strong>identifier<\/strong> no puede iniciar con un n\u00famero, deben iniciar con alguna letra (incluyendo _ y $), y adem\u00e1s Javascript es sensible a may\u00fasculas y min\u00fasculas.<\/p>\n\n\n\n<p>There are two ways to declare a variable. One is using <strong>var<\/strong> and the other using <strong>let<\/strong>.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"js,result\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"JrrPWb\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Variables\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/JrrPWb\">\n  Variables<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Es importante describir correctamente el contenido de las variables, porque as\u00ed le facilitamos la vida a la siguiente persona que necesite leer y modificar nuestro c\u00f3digo. Esta siguiente persona muy a menudo eres t\u00fa del futuro, y al menos que seas un robot, no podr\u00e1s recordar cada detalle de tu c\u00f3digo.<\/p>\n\n\n\n<p>Del c\u00f3digo anterior, presta atenci\u00f3n solo a las definiciones de variables, ah\u00ed tanto <strong>let<\/strong> como <strong>var<\/strong> tienen el mismo efecto, definen una variable global que puede ser accedida en cualquier parte de la ejecuci\u00f3n.<\/p>\n\n\n\n<p>Tambi\u00e9n podemos ver que no es necesario definir el tipo de dato, y realmente no lo necesitamos, vemos claramente que las variables contienen cadenas de caracteres (string), <strong>un string se declaran dentro de unas comillas simples o dobles.<\/strong><\/p>\n\n\n\n<p>A las variables que no le definimos alg\u00fan valor, Javascript les asigna el valor <strong>undefined<\/strong>.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"239\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"MEEWKb\" style=\"height: 239px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"undefined\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/MEEWKb\">\n  undefined<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Constantes<\/h2>\n\n\n\n<p>Adem\u00e1s de las variables existe un tipo de cajita que no puede cambiar lo que guarda una vez definido su valor, por eso se llaman constantes.<\/p>\n\n\n\n<p>Al tratar de reasignar un valor a una constante como en la cuarta l\u00ednea del c\u00f3digo, JavaScript mostrara un <strong>TypeError<\/strong>, indicando que no se puede reasignar un valor a una constante.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"177\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"BwwgwX\" style=\"height: 177px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Constantes\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/BwwgwX\">\n  Constantes<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tiposdedatos\">Tipos de datos<\/h2>\n\n\n\n<p>Javascript es un lenguaje d\u00e9bilmente tipeado, o sea, que no es necesario definir el tipo de dato. Pero no quiere decir que no tenga tipos, pues el tipo de dato es definido en tiempo de ejecuci\u00f3n por Javascript, recordemos que Javascript es un lenguaje compilado en el momento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"datosprimitivos\">Datos primitivos<\/h3>\n\n\n\n<p>Casi todo en JavaScript es un Objeto, la excepci\u00f3n son los datos primitivos, los cuales no son Objetos y no tiene m\u00e9todos, entonces tenemos siete tipos de datos, <strong>objects <\/strong>y los siete <strong>primitive data<\/strong> de abajo:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>number<\/strong>, n\u00fameros como; 1, 0, 18500, 89.95124<\/li><li><strong>BigInt<\/strong>, agregado en el 2020, para representar n\u00fameros enteros muy, pero muy grandes.<\/li><li><strong>String<\/strong>, cadena de caracteres como \u2018Hola\u2019 y \u2018Buenas noches\u2019.<\/li><li><strong>Boolean<\/strong>, solo acepta true o false, es decir, si o no.<\/li><li><strong>null<\/strong>, sirve para indicar que algo es nada, su \u00fanico valor es null.<\/li><li><strong>undefined<\/strong>, serves to indicate that something is not yet defined.<\/li><li><strong>symbol<\/strong>, nuevo en el lenguaje a partir de EcmaScript 6, a\u00f1o 2015<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Objects<\/h3>\n\n\n\n<p>Todo lo dem\u00e1s son <strong>objects<\/strong>, incluso los tipos de datos <strong>String, Boolean, Number y Symbol<\/strong> tiene su correspondiente representaci\u00f3n en Objeto. Una funci\u00f3n es un objeto. Ejemplos de objetos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>object<\/strong><\/li><li><strong>function<\/strong><\/li><li><strong>array<\/strong><\/li><li><strong>date<\/strong><\/li><li><strong>RegExp<\/strong><\/li><li><strong>Mistake<\/strong><\/li><\/ul>\n\n\n\n<p>La verdad que no preocuparme por el tipo de dato me ha facilitado el desarrollo de software. Adem\u00e1s los editores de c\u00f3digo vienen con muchas herramientas y plug-ins que te ayudan mucho en este aspecto, te ahorras bastante dolor de cabeza al tratar de convertir entre tipos.<\/p>\n\n\n\n<p>Solo nos interesa lo que nuestro objeto puede hacer, no de que tipo es o si es padre o hijo&nbsp; de algo. Cuando realizas una suma entre n\u00fameros en el mundo real, no te importa que tipo es, solo te importa que se puedan sumar, sin importar si es un entero o decimal, o fracci\u00f3n.<\/p>\n\n\n\n<p>Normalmente si nombras tus variables\/objetos de manera adecuada y de manera muy entendible, con el contexto de tu funci\u00f3n, modulo o componente sabr\u00e1s que tipo de datos son.<\/p>\n\n\n\n<p>Su valor ya te indica de que tipo es, me parece redundante definir el tipo de algo a lo que yo mismo le asigno el valor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comentarios<\/h2>\n\n\n\n<p>Aunque los comentarios no los recomiendo porque son un indicador de que nuestro c\u00f3digo no es f\u00e1cil de entender, se pueden usar para casos en los que ya no tenemos de otra.<\/p>\n\n\n\n<p>La sintaxis de los comentarios fue tomada de C++.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Este es un comentario de mucho valor\n\/**\n* Este es un comentario con mas de una linea\n* y esta es la segun linea\n* y una tercera linea\n*\/<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Funciones<\/h2>\n\n\n\n<p>Las <strong>funciones<\/strong> son otro de los elementos m\u00e1s importantes del lenguaje. Si no es que el m\u00e1s importante. Con una funci\u00f3n podemos realizar un conjunto de acciones sin volverlo a escribir y nos permitir\u00e1 obtener un resultado seg\u00fan los argumentos que recibe a la hora de ejecutarla. <\/p>\n\n\n\n<p>Pero no solo eso, nos permite resolver problemas desde el punto de vista de paradigmas de programaci\u00f3n como funcional y orientado a objetos. Por poner un ejemplo, nos permite crear <a href=\"https:\/\/pensemosweb.com\/en\/patrones-de-diseno-en-javascript-singleton-factory\/\">patrones de dise\u00f1o<\/a> muy \u00fatiles como el <strong><a href=\"https:\/\/pensemosweb.com\/en\/patrones-de-diseno-en-javascript-singleton-factory\/\">Singleton<\/a><\/strong> o el <strong><a href=\"https:\/\/pensemosweb.com\/en\/implementar-patron-observador-javascript\/\">Patron de dise\u00f1o Observador<\/a><\/strong>.<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 las funciones son tan flexibles en JavaScript? Porque las funciones <strong>son objetos de primera clase<\/strong> en el lenguaje. Es decir, pueden ser tratadas como cualquier otra variable, pueden ser pasadas como par\u00e1metros y pueden ser el valor de retorno de otra funci\u00f3n.<\/p>\n\n\n\n<p>Un consejo, selecciona bien tus nombres, <strong>un nombre de funci\u00f3n debe ser un verbo<\/strong>, porque internamente realiza una acci\u00f3n.<\/p>\n\n\n\n<p>Otro consejo procura usar <strong>muy pocos argumentos<\/strong>, no m\u00e1s de tres, cr\u00e9eme, no todos tenemos memoria de fotogr\u00e1fica y con muchos argumentos es dif\u00edcil reusar la funci\u00f3n. Porque no sabremos que par\u00e1metros recibe y en que orden.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"276\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"pWWJaz\" style=\"height: 276px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/pWWJaz\">\n  Funciones<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Cuando queremos que el c\u00f3digo de una funci\u00f3n se ejecute, se dice que necesitamos <strong>invocar<\/strong> la funci\u00f3n. Para invocar a una funci\u00f3n se deben poner un par de par\u00e9ntesis <code>()<\/code>, y si tiene par\u00e1metros o argumentos, estos se separan con comas.<\/p>\n\n\n\n<p>En el ejemplo vemos como invocamos dos veces la funci\u00f3n <code>getNombreCompleto(nombre, apellido)<\/code> ahorrando tiempo y esfuerzo obteniendo un resultado similar. Esta funci\u00f3n recibe dos par\u00e1metros, los cuales separamos con una coma.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c1mbito de variables<\/h2>\n\n\n\n<p>En Javascript no existe \u00e1mbitos de bloques como en C y Java, donde las variables definidas en un bloque utilizando llaves <strong>{}<\/strong> solo existen en ese \u00e1mbito y no puede ser accedidas desde afuera.<\/p>\n\n\n\n<p>JavaScript tiene \u00e1mbito de funci\u00f3n, para ilustrar este tipo de \u00e1mbito vamos a crear una funci\u00f3n donde se definen dos variables. M\u00e1s adelante en el c\u00f3digo, fuera de la funci\u00f3n se intenta obtener el valor de la variable <code>James<\/code>, pero esto no es posible y tendremos un <strong>ReferenceError<\/strong>.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"307\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"dVVXpj\" style=\"height: 307px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Ambito de variables 1\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/dVVXpj\">\n  Ambito de variables 1<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Hasta junio del 2015 solo exist\u00eda la forma de <code>var<\/code> para declarar variables. Actualmente la forma <code>let<\/code> de declarar variables permite utilizar \u00e1mbito de bloque. Por ejemplo en un bloque <code>if<\/code>, o simplemente dentro de llaves:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"366\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"qPPNjK\" style=\"height: 366px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"\u00c1mbito de variables 2\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/qPPNjK\">\n  Ambito de variables 2<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Objeto literal<\/h2>\n\n\n\n<p>Por \u00faltimo veamos como crear un objeto. Un objeto literal es una colecci\u00f3n de pares nombre: valor, parecido a los arrays asociativos de PHP. Estos pares de nombre\/valor se les llama propiedades, una propiedad es como una variable y puede contener cualquier tipo de valor. <\/p>\n\n\n\n<p>Para crear un objeto no necesitas crear una clase, t\u00fa simplemente creas el objeto y lo empiezas a utilizar.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"357\" data-theme-id=\"dark\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"zEEVLP\" style=\"height: 357px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Objetos\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/zEEVLP\">\n  Objects<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>In the example we have an object <code>person<\/code>, has several properties of different types, its name is a <strong>String<\/strong>, his age is a <strong>number<\/strong>, <code>getName<\/code> and <code>talk<\/code> are of type <strong>function<\/strong>, functions that are members of an object are called <strong>methods<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-pensemos-web\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.pensemosweb.com\/javascript-scheme-self-java\/\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es Javascript? Javascript es un lenguaje de programaci\u00f3n orientado a objetos, funcional, imperativo y declarativo, es decir, multi-paradigma, por eso es un lenguaje muy potente. La raz\u00f3n de ser multi-paradigma es que esta basado principalmente en dos lenguajes con caracter\u00edsticas \u00fanicas.<\/p>","protected":false},"author":2,"featured_media":3764,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,32],"tags":[54,67],"class_list":["post-3546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-basico","tag-javascript","tag-basico"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3546"}],"version-history":[{"count":1,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3546\/revisions"}],"predecessor-version":[{"id":3635,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3546\/revisions\/3635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3764"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}