- \n
- Una variable es un elemento que contiene informaci\u00f3n <\/b>(datos) que puede ser ejecutada por el c\u00f3digo.<\/li>\n
- Las variables sirven para guardar<\/b> informaci\u00f3n que ser\u00e1 utilizada posteriormente.<\/li>\n
- Cada variable tiene un tipo de datos<\/b> (n\u00famero, cadena, fecha\u2026)<\/li>\n
- Javascript es un lenguaje impl\u00edcito<\/b> por lo que no necesita especificar previamente el tipo de dato que contiene una variable.<\/li>\n
- Las variables pueden cambiar de tipo de dato, pero no es recomendable.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/29f3a-js30-1533981613-50.png\")
<\/figure>\n![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/81227-js31-1533981745-37.png\")
<\/figure>\nEn este ejemplo (JsFidle)<\/a> o Codepen<\/a> x se define como una variable. Luego, asignamos a x el valor de 6:<\/p>\n
Ejercicio<\/h3>\n
Sobre el ejemplo de creaci\u00f3n de variable anterior, modif\u00edcalo para:<\/p>\n
- \n
- Declarar e inicializar la variable x en el mismo paso<\/li>\n
- Declara otra variable, y, e inicial\u00edzala con una cadena (string)<\/li>\n
- Crea un encabezado de segundo nivel (h2) debajo del p\u00e1rrafo y haz que se muestre la nueva variable en \u00e9l<\/li>\n<\/ol>\n
Soluci\u00f3n JSFidle<\/a> – Codepen<\/a><\/i><\/p>\n
Explicaci\u00f3n: 1. Creamos un h2 vac\u00edo con un id 2. Declaramos la variable y y le damos un valor como string 3. Sobre el objeto document, aplicamos el m\u00e9todo getElementByID() para capturar el id del h2, y le pasamos con innerHTML el valor de la variable y<\/p>\n
\n
Ejercicio<\/h3>\n
Abre el siguiente ejercicio<\/b><\/a> (JSFidle) o Codepen<\/a> que usa variables con datos num\u00e9ricos y modif\u00edcalo para incluir el IVA en el precio total:<\/p>\n
- \n
- Crea un nuevo <p> con id subtotal<\/li>\n
- Declarar una tercera variable llamada IVA e inicializarla con el valor 1.21<\/li>\n
- A la variable total ll\u00e1mala subtotal<\/li>\n
- Crea una nueva variable total que multiplique subtotal por iva<\/li>\n
- Utiliza el m\u00e9todo getElementById para escribir el resultado<\/li>\n<\/ol>\n
Soluci\u00f3n JSFidle<\/i><\/a> – Codepen<\/a><\/p>\n
Explicaci\u00f3n: 1.Creamos el p\u00e1rrafo con el nuevo id 2.Creamos la variable IVA y le damos el valor 1.21 (para que luego haga el m\u00faltiplo sumatorio del 21%) 3.Cambiamos la variable total original a subtotal 4.Creamos la nueva variable total como la multiplicaci\u00f3n de las otras dos variables, subtotal * iva Escribimos con getElementById().innerHTML =\u00a0 el valor con IVA<\/p>\n
[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbAlcance o \u00e1mbito de una variable\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<\/p>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/292c9-js32-1533982243-10.png\")
<\/figure>\nUna variable es local normalmente en cualquier lugar en la que aparece acotada por llaves.<\/p>\n
Se pueden tener una variable global y local que se llamen igual, pero no es recomendable, porque induce a confusi\u00f3n y hace m\u00e1s complejo trabajar con ellas.<\/p>\n
[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbOperadores\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<\/p>\n
Los operadores son instrumentos b\u00e1sicos para realizar operaciones en cualquier lenguaje de programaci\u00f3n.<\/p>\n
\n
Recuerda que en Javascript el operador =<\/b> se utiliza para la asignaci\u00f3n<\/b> de valor a una variable.<\/p>\n<\/blockquote>\n
Operadores aritm\u00e9ticos<\/h3>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/ec6fe-js33-1533982602-81.png\")
<\/figure>\nLos operadores aritm\u00e9ticos sirven para realizar manipulaciones matem\u00e1ticas<\/b> sobre el valor de las variables num\u00e9ricas.<\/p>\n
Un operador aritm\u00e9tico siempre dar\u00e1 como resultado un n\u00famero.<\/b><\/p>\n
Vamos a realizar algunos ejercicios<\/b> para conocer <\/b>su funcionamiento:<\/p>\n
- \n
- Suma<\/b><\/a> (JSFidle) – Codepen<\/a>. A partir de este c\u00f3digo, realiza la suma de dos variables. [Soluci\u00f3n\u00a0 JSFidle<\/a> – Codepen<\/a>]<\/li>\n
- Multiplicaci\u00f3n y divisi\u00f3n<\/a><\/b>(JsFidle) – Codepen<\/a>. A partir de este ejemplo: a) Inicializa las dos variables d\u00e1ndoles un valor num\u00e9rico. b) Crea una tercera variable y as\u00edgnale un valor. c) Escribe sobre este texto el resultado de multiplicar x * y, y dividir el resultado por la tercera variable. [Soluci\u00f3n JsFidle<\/a> – Codepen<\/a>]<\/li>\n
- Incremento y disminuci\u00f3n<\/b><\/a> (JsFidle) – Codepen<\/a>. El incremento y disminuci\u00f3n sirven para aumentar o disminuir un n\u00famero dado. Sobre el ejemplo, vamos a restar de nuevo, con el operador de disminuci\u00f3n para que se vuelva a quedar la variable en 5. a) Crea un nuevo p\u00e1rrafo con id \u201cdisminuci\u00f3n\u201d; b) utiiza el operado de dismunici\u00f3n para x; c) crea una nueva variable que asigne el valor a x; d) escribe el resultado en el p\u00e1rrafo disminuci\u00f3n. [Soluci\u00f3n JSFidle<\/a> – Codepen<\/a>]<\/li>\n<\/ul>\n
![\"Operadores](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/aa8a3-js34-1533998119-64.png\")
<\/p>Operadores aritm\u00e9ticos combinados con operador de asignaci\u00f3n.<\/figcaption><\/figure>\n Los operadores aritm\u00e9ticos se pueden combinar con el operador de asignaci\u00f3n.<\/p>\n
En este enlace del tutorial JS<\/a> del W3School puedes profundizar en c\u00f3mo funcionan el reto de operadores aritm\u00e9ticos.<\/p>\n
Operadores relacionales y condicionales<\/h3>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/bb14c-js35-1533998274-68.png\")
<\/figure>\nLos operadores condicionales o relacionales permiten comparar n\u00fameros<\/b> y son esenciales para realizar aplicaciones complejas que se basen en el cumplimiento de condiciones<\/p>\n
Un operador relacional siempre dar\u00e1 como resultado un valor booleano<\/b>.<\/p>\n
Veamos algunos ejemplos de operadores relacionales:<\/p>\n
- \n
- Igual a<\/a> ==<\/b>. Hace una comparativa entre una sentencia y el valor esperado. Si el valor es cierto, dar\u00e1 como resultado \u00abtrue\u00bb; en caso contrario, indicar\u00e1 \u00abfalse\u00bb.<\/li>\n
- Igual valor e igual tipo<\/a><\/b> ===. Como en el anterior, hace una comparativa entre una sentencia y el valor esperado, pero en este caso solo dar\u00e1 \u00abtrue\u00bb si es igual el valor y el tipo de dato; en caso contrario dar\u00e1 \u00abfalse\u00bb. Por ejemplo, el valor 12 (number) y \u00ab12\u00bb (string) dar\u00edan false porque son igual valor pero distinto tipo.<\/li>\n<\/ul>\n
Operadores l\u00f3gicos<\/h3>\n
Los operadores relacionales sirven para realizar operaciones l\u00f3gicas de comparaci\u00f3n<\/a><\/b> y se utilizan para tomar decisiones en los scripts.<\/p>\n
Se utilizan valores booleanos, por lo que un operador relacional siempre dar\u00e1 como resultado un valor booleano<\/b>.<\/p>\n
Los operadores l\u00f3gicos son:<\/p>\n
- \n
- Negaci\u00f3n l\u00f3gica<\/a><\/li>\n
- AND (&&)<\/a><\/li>\n
- OR (||)<\/a><\/li>\n<\/ul>\n
![\"Se](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f6c21-js36-1533998879-7.png\")
<\/p>Se pone el ! Delante del nombre de la variable. Retorna falso para sentencias verdaderas y verdadero para sentencias falsas. Para qu\u00e9 se usa: Cuando se necesitan evaluar expresiones complejas, y se usan tablas de verdad, con el fin de evitar incluir muchas sentencias con if anidados (permiten agrupar sentencias)\u00a0\u00a0<\/figcaption><\/figure>\n ![\"Operaci\u00f3n](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f0dd5-js37-1533998899-76.png\")
<\/p>Operaci\u00f3n l\u00f3gica AND: Combina dos valores boolenaos que compara. Es verdad si los dos valores son verdad\u00a0\u00a0<\/figcaption><\/figure>\n ![\"Operaci\u00f3n](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c1aa9-js38-1533998926-94.png\")
<\/p>Operaci\u00f3n l\u00f3gica OR: Combina dos valores boolenaos que compara.\u00a0 Es verdad si uno de los valores es verdad<\/figcaption><\/figure>\n [\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbConceptos de POO\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<\/p>\n
La POO (Programaci\u00f3n Orientada a Objetos)<\/b> es un paradigma de programaci\u00f3n que permite optimizar los procesos de programaci\u00f3n y los resultados que se obtienen con ellos. Permite pre-dise\u00f1ar objetos que son almacenados en librer\u00edas o bibliotecas para que puedan ser reutilizados por los programas sin necesidad de tener que volver a escribir las funciones necesarias cada vez que se quiere hacer uso de ellas.<\/p>\n
Javascript es uno de los muchos lenguajes que funcionan bajo este paradigma. Dentro de las dos corrientes existentes (basarse en clases o basarse en prototipos), JS corresponde al modelo basado en prototipos<\/b> en el que solo hay objetos. Otros lenguajes similares en este sentido, muy utilizados actualmente, son Python y Ruby.<\/p>\n
Elementos fundamentales<\/h3>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/81901-js39-1533999648-35.png\")
<\/figure>\nLos elementos fundamentales de la POO incorporan un n\u00famero amplio de componentes (clase, herencia, objeto, m\u00e9todo..), pero nos centraremos solo en los que resultan fundamentales para manejarnos en el entorno de trabajo de un proyecto period\u00edstico<\/p>\n
- \n
- Objetos<\/li>\n
- Eventos<\/li>\n
- Funciones<\/li>\n
- M\u00e9todos<\/li>\n<\/ul>\n
Objetos<\/b><\/p>\n
Un objeto es una entidad definida por un estado, caracterizado por un conjunto de atributos que toman valores (datos) concretos, un comportamiento definido por los m\u00e9todos, operaciones o mecanismos de interacci\u00f3n que pueden realizarse sobre \u00e9l, y una identidad que le diferencia del resto (un identificador).<\/p>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/dd704-js40-1533999786-81.png\")
<\/figure>\n![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e12a6-js41-1533999961-95.png\")
<\/figure>\nEventos<\/b><\/p>\n
Los eventos son sucesos<\/b>, producidos normalmente por una acci\u00f3n del usuario, que producen alg\u00fan efecto<\/b>. Por ejemplo, cuando un usuario pulsa un bot\u00f3n o hace clic sobre un enlace.<\/p>\n
Algunos de los eventos DOM m\u00e1s habituales son:<\/p>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/78189-js42-1534000073-32.png\")
<\/figure>\nVeamos un par de ejemplos para entender c\u00f3mo funcionan:<\/p>\n
– Onload<\/a><\/b>. Lanza un comportamiento cuando se ha cargado la p\u00e1gina completamente.<\/p>\n
– Onmouseover<\/a> – (ver en Codepen<\/a>)<\/b>. Cuando pasamos por encima de un elemento, se lanza el comportamiento.<\/p>\n
Hay muchos otros eventos como el blur<\/i> que es cuando se dispara el evento al perder el foco un elemento, o On Keyup<\/i> que ejecuta el evento cuando el usuario suelta una tecla.<\/p>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1fd3d-js43-1534000563-16.png\")
<\/figure>\nAqu\u00ed puedes ver un ejemplo del funcionamiento de onkeyup<\/a>, (Ver en Codepen<\/a>) que se utiliza en muchas ocasiones para modificar los datos de entrada en un formulario. En este caso, transforma las letras min\u00fasculas en may\u00fasculas.
En este ejemplo<\/a>, usamos tambi\u00e9n onkeyup pero para contar el n\u00famero de caracteres que introducimos en un input.<\/p>\nTodo evento lleva asociado, normalmente, una funci\u00f3n<\/b>.<\/p>\n
Las funciones son fragmentos de c\u00f3digo que realizan alguna acci\u00f3n cuando son invocadas por un evento. Por ejemplo, cuando el usuario pulsa el bot\u00f3n, y sucede algo.<\/p>\n
Visto en c\u00f3digo, y explicado, ser\u00eda esto:<\/p>\n
![\"\"](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/2bdaa-js44-1534000890-73.png\")
<\/figure>\n[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbLibrer\u00edas y APIs\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<\/p>\n
Librer\u00edas y APIs: \u00bfqu\u00e9 son y c\u00f3mo se relacionan?<\/h1>\n
Estos dos conceptos van de la mano. Una librer\u00eda<\/strong> es un conjunto de funciones y comportamientos listos para usar, y una API<\/strong> son las instrucciones que nos indican c\u00f3mo<\/em> usar esas funciones dentro de nuestro propio c\u00f3digo.<\/p>\n
\u00bfQu\u00e9 es una librer\u00eda?<\/h2>\n
Una librer\u00eda o biblioteca<\/a> es un conjunto de c\u00f3digo que alguien ya ha escrito y organizado para resolver tareas comunes. En otras palabras: es una colecci\u00f3n de funciones<\/strong> que podemos \u201cimportar\u201d a nuestro programa para no tener que escribirlas desde cero.<\/p>\n
Por ejemplo, hay librer\u00edas para crear gr\u00e1ficos, manipular fechas o mostrar mapas. En lugar de programar todo eso t\u00fa mismo, usas la librer\u00eda.<\/p>\n
![\"Ejemplo](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/26cfd-js48-1534007069-58.png\")
<\/figure>\n\u00bfQu\u00e9 es una API?<\/h2>\n
Una API<\/a> (Application Programming Interface<\/em>) es el manual de uso<\/strong> de una librer\u00eda o servicio. Te explica qu\u00e9 funciones existen, qu\u00e9 datos necesitan y qu\u00e9 resultados devuelven.<\/p>\n
Podemos pensar en una cafetera Nespresso<\/strong> como una librer\u00eda (el sistema para hacer caf\u00e9) y en su libro de instrucciones<\/strong> como la API: te indica c\u00f3mo preparar cada tipo de caf\u00e9 y qu\u00e9 botones pulsar.<\/p>\n
Las APIs permiten que distintos programas \u201chablen entre s\u00ed\u201d. Por eso son tan \u00fatiles cuando queremos conectar, por ejemplo, nuestro sitio web con Google Maps o Twitter.<\/em><\/p>\n
Ventajas de usar Librer\u00edas y APIs<\/h2>\n
\n![\"Ventajas](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d68e1-js49b-1534007306-88.jpg\")
<\/figure>\n<\/div>\nTrabajar con librer\u00edas y APIs ahorra tiempo y esfuerzo<\/strong>. En lugar de escribir miles de l\u00edneas de c\u00f3digo, aprovechamos soluciones ya creadas y probadas.<\/p>\n
Por ejemplo, con la librer\u00eda de Google Maps<\/strong> podemos dibujar mapas, a\u00f1adir marcadores o calcular rutas sin necesidad de programar la l\u00f3gica desde cero. Solo seguimos las instrucciones de su API.<\/p>\n
- \n
- Las librer\u00edas contienen las funciones.<\/li>\n
- Las APIs explican c\u00f3mo usarlas.<\/li>\n
- Nosotros solo tenemos que \u201cllamarlas\u201d desde nuestro programa.<\/li>\n<\/ul>\n
API Keys<\/h2>\n
Para acceder a la mayor\u00eda de las APIs necesitamos una API Key<\/strong>, una clave de autenticaci\u00f3n que identifica nuestra aplicaci\u00f3n y limita su uso.<\/p>\n
Esto permite:<\/p>\n
- \n
- Controlar cu\u00e1ntas veces se usa el servicio.<\/li>\n
- Evitar abusos o accesos no autorizados.<\/li>\n<\/ul>\n
C\u00f3mo obtener la API Key de Google Maps<\/h3>\n
- \n
- Entra en la Google API Console<\/a>.<\/li>\n
- Crea un nuevo proyecto.<\/li>\n
- Asigna un nombre a la clave (no hace falta restringirla para la pr\u00e1ctica).<\/li>\n
- Copia la clave de API<\/strong> que te genera Google.<\/li>\n<\/ol>\n
En un proyecto real deber\u00edas restringir la clave por seguridad (por dominio, IP o aplicaci\u00f3n).<\/em><\/p>\n
L\u00edmites de uso<\/h2>\n
Casi todas las APIs tienen l\u00edmites de uso gratuito<\/strong>. Por ejemplo, la Google Maps API<\/a> permite un n\u00famero m\u00e1ximo de llamadas sin coste cada d\u00eda.<\/p>\n
![\"L\u00edmites](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/bbd14-js50-1534009983-71.png\")
<\/figure>\n[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbTipos de Librer\u00edas y APIs\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ custom_css_free_form=\u00bb||.api-table {|| width: 100%;|| border-collapse: collapse;|| font-family: system-ui, -apple-system, %22Segoe UI%22, Roboto, Helvetica, Arial, sans-serif;|| font-size: 15px;|| margin-top: 1rem;|| color: #111; \/* negro principal *\/||}||.api-table thead {|| background-color: #b91c1c; \/* rojo fuerte *\/|| color: #fff;||}||.api-table th,||.api-table td {|| border: 1px solid #d1d5db; \/* gris claro *\/|| padding: 10px 12px;|| vertical-align: top;|| text-align: left;||}||.api-table tbody tr:nth-child(even) {|| background-color: #f9fafb; \/* blanco gris\u00e1ceo *\/||}||.api-table tbody tr:nth-child(odd) {|| background-color: #ffffff; \/* blanco puro *\/||}||.api-table th {|| font-weight: 700;|| text-transform: uppercase;|| letter-spacing: 0.5px;||}||.api-table a {|| color: #b91c1c; \/* rojo *\/|| text-decoration: none;|| font-weight: 500;||}||.api-table a:hover {|| text-decoration: underline;||}||.api-table em {|| color: #374151; \/* gris oscuro *\/|| font-style: italic;||}||.api-table caption {|| caption-side: top;|| font-weight: 700;|| font-size: 1.1rem;|| text-align: left;|| color: #111;|| padding-bottom: 0.5rem;|| border-bottom: 3px solid #b91c1c;||}||||||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb sticky_enabled=\u00bb0″]<\/p>\n
APIs y librer\u00edas \u00fatiles para proyectos period\u00edsticos<\/h2>\n
Estas son algunas de las librer\u00edas y APIs m\u00e1s usadas en proyectos de periodismo de datos e interactivos. Incluyen tanto opciones abiertas como servicios de Google muy populares.<\/p>\n
- <\/ul>\n
- Entra en la Google API Console<\/a>.<\/li>\n
- AND (&&)<\/a><\/li>\n
- Igual valor e igual tipo<\/a><\/b> ===. Como en el anterior, hace una comparativa entre una sentencia y el valor esperado, pero en este caso solo dar\u00e1 \u00abtrue\u00bb si es igual el valor y el tipo de dato; en caso contrario dar\u00e1 \u00abfalse\u00bb. Por ejemplo, el valor 12 (number) y \u00ab12\u00bb (string) dar\u00edan false porque son igual valor pero distinto tipo.<\/li>\n<\/ul>\n
- Multiplicaci\u00f3n y divisi\u00f3n<\/a><\/b>(JsFidle) – Codepen<\/a>. A partir de este ejemplo: a) Inicializa las dos variables d\u00e1ndoles un valor num\u00e9rico. b) Crea una tercera variable y as\u00edgnale un valor. c) Escribe sobre este texto el resultado de multiplicar x * y, y dividir el resultado por la tercera variable. [Soluci\u00f3n JsFidle<\/a> – Codepen<\/a>]<\/li>\n
- Suma<\/b><\/a> (JSFidle) – Codepen<\/a>. A partir de este c\u00f3digo, realiza la suma de dos variables. [Soluci\u00f3n\u00a0 JSFidle<\/a> – Codepen<\/a>]<\/li>\n
- Las variables sirven para guardar<\/b> informaci\u00f3n que ser\u00e1 utilizada posteriormente.<\/li>\n