{"id":76096,"date":"2018-08-10T04:28:14","date_gmt":"2018-08-10T04:28:14","guid":{"rendered":"http:\/\/estructuras-control-js"},"modified":"2023-11-27T18:44:14","modified_gmt":"2023-11-27T18:44:14","slug":"estructuras-control-js","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/","title":{"rendered":"Estructuras de control, DOM y JSON"},"content":{"rendered":"\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2 wp-block-heading\">Estructuras de control<\/h2>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Estructuras condicionales<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">         <!--StartFragment-->Las estructuras de control o condicionales establecen comportamientos en funci\u00f3n de que se den determinadas circunstancias.<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/180d2-js62-1534089749-9.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">IF<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Permite tomar decisiones en funci\u00f3n del estado de las variables.<!--EndFragment--><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En JS se utilizan:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\n<b>If<\/b> \u2013 El c\u00f3digo se ejecuta si la condici\u00f3n es verdadera, como en <a href=\"https:\/\/jsfiddle.net\/gertrudix\/mw8g9e7m\/6\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a>.\n<\/li><li>\n<b>Else<\/b> \u2013 Especifica el c\u00f3digo que se ejecuta si la condici\u00f3n es falsa&nbsp;&nbsp;\n<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio If<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modifica la funci\u00f3n anterior para que muestre el resultado de un a\u00f1o:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utiliza el m\u00e9todo getFullYear() para el objeto Date()\n<\/li><li>Haz una comparaci\u00f3n para un a\u00f1o para que salga un mensaje: \u201cEstamos en el a\u00f1o 2018\u201d\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/mw8g9e7m\/4\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">else IF<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jsfiddle.net\/gertrudix\/h7615wfa\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">else IF<\/a> especifica una nueva condici\u00f3n si la primera es falsa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se eval\u00faa una segunda y, en caso de que tambi\u00e9n sea falsa, pasa a un else final.<!--EndFragment--><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio else If<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modifica la funci\u00f3n anterior para que se adapte ahora al d\u00eda de la semana:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utiliza el m\u00e9todo getDay() para el objeto Date()\n<\/li><li>Haz una comparaci\u00f3n en funci\u00f3n del d\u00eda en el que estamos: 0-1 (principio de semana), 2-4 (mediados de semana), 5-6 (fin de semana)\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <a href=\"https:\/\/jsfiddle.net\/gertrudix\/0942yoo2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><i>Soluci\u00f3n<\/i><\/a><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n\n<p class=\"has-small-font-size wp-block-paragraph\"><!--StartFragment-->&nbsp; 1. Usamos el m\u00e9todo getDay() que da el d\u00eda de la semana en el que estamos, en valores de 0-6 | 2. Ponemos tres opciones (if, else if e if) en funci\u00f3n de que estemos en 0-1 (Inicia la semana), 2-4 (en medio), 5-6 (en fin de semana)&nbsp;&nbsp;<!--EndFragment--><\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Switch<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b3ae8-js64-1534092821-19.png\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b><a href=\"https:\/\/jsfiddle.net\/gertrudix\/9r63o2k4\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Switch<\/a><\/b> (interruptor, conmutador) se utiliza para que sucedan cosas diferentes en funci\u00f3n de las diferentes condiciones que se den.<!--EndFragment--><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">         <!--StartFragment-->Default se usa cuando, dadas unas condiciones, si no se cumplen, se pasa a la general.<!--EndFragment--><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Break se utiliza para que, en el caso de que la sentencia sea correcta, el bucle pare la evaluaci\u00f3n y no contin\u00fae examinando las siguientes. Si no se indica el break, podr\u00eda quedarse \u201ccolgado\u201d en bucle intentando encontrar la sentencia verdadera.<!--EndFragment--><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. Switch<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modifica la funci\u00f3n anterior para que se\u00f1ale el mes en el que estamos<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ideas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Usa el m\u00e9todo getMonth() para el objeto Date()\n<\/li><li>Modifica la variable day por month y pon unos cuantos casos (mese del a\u00f1o)\n<\/li><li>No hacen falta muchos (estamos cerca del principio)\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/np6g2ad4\/7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">Recuerda que en JS la numeraci\u00f3n es base cero.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Bucles. Loop<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los Loops se utilizan para ejecutar un c\u00f3digo, que necesita ser repetido un n\u00famero de veces, por ejemplo con un valor diferente cada vez. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hay varios tipos de Loop: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\n<b>for<\/b> \u2013 Repite un bloque de c\u00f3digo un n\u00famero de veces <\/li><li>\n<b>for<\/b> <b>\/ in<\/b> \u2013 Loop en las propiedades de un objeto <\/li><li>\n<b>while<\/b> \u2013 Repite en un bloque con una condici\u00f3n espec\u00edfica de verdad <\/li><li>\n<b>do \/ while<\/b> \u2013 Repite un bloque con una condici\u00f3n espec\u00edfica de verdad\n<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For repite una o m\u00e1s instrucciones varias veces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tiene tres partes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\n<b>Inicializaci\u00f3n<\/b>: Se ejecuta antes de que el loop empiece y suele llevar la variable que indica las veces que se ejecutar\u00e1 el bucle\n<\/li>\n<li>\n<b>Condici\u00f3n<\/b>: Define la condici\u00f3n que se eval\u00faa para que el loop siga funcionando\n<\/li>\n<li>\n<b>Actualizaci\u00f3n<\/b>: Indica los cambios en la variable cada vez que termina una iteraci\u00f3n del bucle\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Entre llaves se ubican las sentencias que deben ejecutarse en cada iteraci\u00f3n.<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4ab38-js65-1534155760-66.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">En el siguiente ejemplo podemos ver un ejemplo de loop: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Declaramos la variable text y la inicializamos como string vac\u00eda<\/li>\n<li>Declaramos la variable i <\/li>\n<li>En los par\u00e1metros del bucle, establecemos los valores de inicializaci\u00f3n de i, la condici\u00f3n, y la actualizaci\u00f3n <\/li>\n<li>En el for, se establece una sentencia que determina que, para cada iteraci\u00f3n, se actualiza la variable text y la variable i y se muestra el valor en el id \u201cdemo\u201d\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. Loop for<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modifica la funci\u00f3n anterior para que cree un loop mediante for que:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Comience en 200\n<\/li><li>Imprima en pantalla \u201cEstudiante n\u00ba: \u201c\n<\/li><li>Con el n\u00famero correlativo descendente desde 200 hasta 1\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <a href=\"https:\/\/jsfiddle.net\/gertrudix\/261equu6\/3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><i>Soluci\u00f3n<\/i><\/a><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. Loop para cargar elementos de un array unidimensional<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sobre la <a href=\"https:\/\/jsfiddle.net\/gertrudix\/eLLvpdx2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">base de este c\u00f3digo<\/a>, vamos a crear un bucle que cargue los elementos de un array unidimensional.<\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pistas para el for:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Inicializa la variable (i) en 0\n<\/li><li>La condici\u00f3n debe ser menor o igual al n\u00famero m\u00e1ximo de elementos del array (food) [Recuerda que los array son base 0]\n<\/li><li>Actualiza el incremental de 1 en 1\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/eLLvpdx2\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Loop para cargar elementos de un array multidimensional<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos ahora c\u00f3mo hacerlo con un <a href=\"https:\/\/jsfiddle.net\/gertrudix\/bd6q1hos\/21\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">array multimensional<\/a>. En el ejemplo vamos a ver c\u00f3mo funciona&nbsp; dos bucles para acceder a un array multimensional y crear una tabla con los datos de este.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4f56c-js66-1534156708-70.png\" alt=\"\u00a0 Si recuerdas, este ejemplo lo analizamos cuando vimos los arrays multidimensionales, en los tipos de datos. Ahora lo usaremos para analizar el uso del for.\u00a0\"\/><figcaption><!--StartFragment-->&nbsp; Si recuerdas, este ejemplo lo analizamos cuando vimos los arrays multidimensionales, en los tipos de datos. Ahora lo usaremos para analizar el uso del for.&nbsp;<!--EndFragment--><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Aplicaciones de for en mapas. Cargar un array GeoJSON y dibujar marcadores en un mapa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hasta ahora hemos visto ejemplos algo abstractos del uso de los bucles, pero en el \u00faltimo ya nos hemos aproximado a un ejemplo pr\u00e1ctico en el que se cargan datos para armar una tabla.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/effa7-js67-1534157183-51.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos ahora c\u00f3mo se usa el for para <a href=\"https:\/\/jsfiddle.net\/gertrudix\/ofr4260p\/3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">importar datos autom\u00e1ticamente en un mapa<\/a> mediante el uso de un loop. El ejemplo siguiente hace uso de la API de Google Maps y cargar los datos formateados mediante <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/importing_data#data\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">GeoJSON<\/a>, que es un formato que veremos m\u00e1s adelante, pero que ya avanzamos que sirve para georeferenciar la informaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En los comentarios del c\u00f3digo se explica el detalle para realizar la carga, pero este ser\u00eda el resumen fundamental de la funci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Creamos una funci\u00f3n con un par\u00e1metro (resultados), que es la variable que va a recibir los valores\n<\/li><li>Inicializamos el bucle con 0, para que vaya al primer \u00edtem del array (recordamos que los array son de base cero)\n<\/li><li>Le indicamos como condici\u00f3n que siga recorriendo el array  (i++) mientras i sea menor que el n\u00famero de features del fichero GeoJSON (i&lt;resultados.features.lenght)\n<\/li><li>Mientras funcione el bucle: a) la var coords mandar\u00e1 a la funci\u00f3n el valor que encuentre, para cada item del array (features [i]) los valores de geometry.coordinates; b) la var latLng crear\u00e1 un nuevo valor de las coordenadas (1 y 0, Lat Long); y c) la var marker crear\u00e1 un nuevo marcador con los valores latLng en el mapa<\/li><li>Con ello ir\u00e1n apareciendo en el mapa todos los marcadores\n<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Bucles for\/in<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/a8ac8-js68-1534158083-51.png\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b><a href=\"https:\/\/jsfiddle.net\/gertrudix\/fo4p9eqh\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">For \/ In<\/a><\/b> es un bucle dentro de las propiedades de un <b>objeto.<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es igual que for, pero en este caso, se utilizan las propiedades definidas para un objeto determinado. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las propiedades del objeto est\u00e1n en formato JSON.<!--EndFragment--><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Caso de uso de Bucle for \/ in: Mostrar datos en un mapa<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos ahora a cargar datos de un objeto mediante for\/in para crear c\u00edrculos en un mapa.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/3de8d-js69-1534158268-6.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Para este ejemplo utilizamos como fuente algunos datos de la Wikipedia sobre aglomeraciones urbanas y su densidad poblacional<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Primero se crea una variable con los datos de las ciudades, incluyendo su posici\u00f3n y su poblaci\u00f3n.\n<\/li>\n<li><p>Luego creamos el mapa.<\/p><\/li>\n<li><p>Mediante un for, construimos el c\u00edrculo para cada ciudad, en funci\u00f3n del valor de su poblaci\u00f3n definido en la variable citymap, y a\u00f1adimos el c\u00edrculo de cada ciudad en el mapa.<\/p><\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. <\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sobre la base del ejemplo anterior, vamos a probar a incluir alguna otra ciudad. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>De la p\u00e1gina de wikipedia sobre <a href=\"https:\/\/es.wikipedia.org\/wiki\/Anexo:Aglomeraciones_urbanas_m%C3%A1s_pobladas_del_mundo\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">aglomeraciones urbanas<\/a> coge el valor de Madrid. <\/li>\n<li>Incluye en el c\u00f3digo los datos de la ciudad de Madrid para comprobar la diferencia. <\/li>\n<li>Cambia los valores del c\u00edrculo, los colores, y el multiplicador de la\n<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/39cghp4a\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a> <\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Caso de uso de Bucle for \/ in: Cargar datos de una tabla<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jsfiddle.net\/gertrudix\/jogabmz3\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Veamos ahora en este ejemplo<\/a> c\u00f3mo crear una <b>tabla html con filtro y un buscador<\/b> usando for\/in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tras crear la tabla en html con todos los datos, el loop for\/in funciona como un bucle que recorre todas las filas de la tabla y nos sirve para ocultar las que no coinciden con la consulta de b\u00fasqueda.<\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio.<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sobre el ejemplo anterior vamos a realizar una modificaci\u00f3n para ver c\u00f3mo podr\u00edamos utilizar este caso para nuestra web, cargando otros datos.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Abre el <a href=\"https:\/\/jsfiddle.net\/gertrudix\/jogabmz3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ejemplo anterior para crear una copia<\/a>.<\/li>\n<li>Descarga de Datos.gob.es el set de datos de <a href=\"http:\/\/datos.gob.es\/es\/catalogo\/l01100377-monumentos-caceres\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Monumentos de C\u00e1ceres<\/a> en formato CSV <\/li>\n<li>\n<a href=\"http:\/\/www.convertcsv.com\/csv-to-html.htm\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Convierte el CSV <\/a>con el servicio <a href=\"http:\/\/www.convertcsv.com\/csv-to-html.htm\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Convertcsv<\/a> en una tabla HTML, seleccionando solo la columna 8 [Puedes limitar el n\u00famero de elementos que se cargan. Por ejemplo: a) En Choose input options limita la carga a 30 filas; b) En Choose outpuy options limita el display a las columnas que nos interesan (en el ejemplo, dejamos s\u00f3lo 2: 5,6)]\n<\/li>\n<li>Copia el resultado html de la tabla de &lt;tr&gt; a &lt;\/tr&gt; y sustit\u00fayelo por los datos que ten\u00eda la tabla anterior.<\/li>\n<li>En el ejemplo anterior la b\u00fasqueda se realizaba solo en la primera columna. Ahora puedes probar para que realice la b\u00fasqueda en las dos columnas que hemos dejado. Para ello, en el script, dentro del for, ponemos que la b\u00fasqueda la haga en las dos columnas, idncando [0, 1] en la l\u00ednea 13<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/a0fjno7h\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">While<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jsfiddle.net\/gertrudix\/q8efs6pd\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">While ejecuta el loop<\/a> hasta que la condici\u00f3n especificada es verdadera.<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/2925e-js70-1534162610-78.png\" alt=\"\"\/><\/figure>\n\n\n\n<div class=\"wp-block-group aligncenter has-background\" style=\"background-color:#EEEEEE\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">&nbsp; For lo usamos normalmente cuando tenemos una previsi\u00f3n del n\u00famero de iteraciones que necesitamos, como en lo casos que hemos visto de extraer datos de un arreglo.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While se usa cuando desconocemos el n\u00famero de ciclos que necesitamos y usamos una variable \u201ccentinela\u201d (est\u00e1 pendiente) hasta que se cumpla la condici\u00f3n del bucle.&nbsp;&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. While<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sobre <a href=\"https:\/\/thimbleprojects.org\/gertrudix\/428092\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">el ejercicio anterior<\/a>, vamos a crear un bucle con while que en este caso haga un conteo descendente desde 1000 hasta 0, incluido, de 100 en 100<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ideas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Debe inicializar la variable (i) en 1000\n<\/li><li>Establecer la condici\u00f3n para (i) mayor o igual a 0\n<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">  <!--EndFragment-->    <a href=\"https:\/\/jsfiddle.net\/gertrudix\/0voqkf46\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><i>Soluci\u00f3n<\/i><\/a><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n\n<p class=\"has-small-font-size wp-block-paragraph\"><!--StartFragment-->&nbsp; 1.Creamos una funci\u00f3n y en ella: | 2.Declaramos la variable text y la inicializamos como string vac\u00edo | 3.Declaramos la variable i y la inicializamos como el valor 1000 | 4.En el while indicamos la condicion (i &gt;= 0)  Dentro del while establecemos dos declaraciones:&nbsp;&nbsp; &#8211; El valor de text&nbsp;&nbsp; &#8211; El decremental i = i &#8211; 100;<!--EndFragment--><\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Evaluaci\u00f3n de condiciones con while<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Otro uso de while es ejecuta el loop hasta que la condici\u00f3n especificada como verdadera sea resuelta por un evento del usuario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, cuando tenemos un formulario en el que solicitamos al usuario que introduzca el valor. Hasta que este no introduce el valor correcto, el bucle <b>sigue evaluando la condici\u00f3n<\/b>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jsfiddle.net\/gertrudix\/1k1a5wy3\/9\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Veamos este ejemplo<\/a> en el que se nos pide que introduzcamos un valor concreto a trav\u00e9s de un cuadro de di\u00e1logo que utiliza la funci\u00f3n <b><\/b>.<!--EndFragment--><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Declaramos la variable color y la inicializamos como string vac\u00edo <\/li>\n<li>En el while indicamos la condici\u00f3n: Mientras el texto del  string sea diferente (!=) a rojo, sigue el bucle evaluando <\/li>\n<li>Lanza con la funci\u00f3n prompt la ventana emergente para introducir un valor <\/li>\n<li>En el momento que indique rojo, que es el valor de la condici\u00f3n, se cierra la ventana\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2 wp-block-heading\">DOM<\/h2>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el DOM?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">DOM (<b>D<\/b>ocument <b>O<\/b>bject <b>M<\/b>odel) es la representaci\u00f3n del \u00e1rbol de objetos que componen una p\u00e1gina web HTML<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Todos los elementos son considerados como un nodo: <i>window y document, elementos y atributos html, texto y contenido de los nodos\u2026<\/i><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f0ec2-js71-1534174221-33.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El DOM es una <b>Interfaz de Programaci\u00f3n<\/b> para los documentos HTML y XML&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es una representaci\u00f3n estructurada del documento que permite que los programas puedan acceder y modificar:&nbsp;&nbsp;<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b72cb-js72-1534174293-94.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Javascript<\/b> usa el DOM para acceder al documento y sus elementos, y poder manipularlos<!--EndFragment--><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Funcionamiento del DOM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cada <b>objeto <\/b>puede activar varias interfaces (<i>formas de manipular dicho objeto<\/i>) mediante m\u00e9todos o propiedades <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El listado de m\u00e9todos es muy amplio, y puede afectar al <a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_document.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Objeto documento<\/a>, al <a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_all.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Objeto Elemento<\/a> o al <a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_attributes.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Objeto Atributo<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/fccde-js73-1534174433-13.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/33386-js74-1534174602-76.jpg\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Accediendo al \u00e1rbol DOM, JavaScript puede realizar <b>cualquier cambio <\/b>dentro del documento HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Todos los elementos HTML son considerados objetos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Con sus propiedades\n<\/li><li>Con sus m\u00e9todos\n<\/li><li>Sus contenidos&nbsp;&nbsp;\n<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En este <a href=\"https:\/\/thimbleprojects.org\/gertrudix\/428141\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">primer ejemplo<\/a> accedemos al atributo title de la p\u00e1gina para coger su contenido y mostrarlo en la p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este otro ejemplo accedemos a un atributo css para <a href=\"https:\/\/jsfiddle.net\/gertrudix\/47r13oLy\/3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">modificar el background color<\/a> de la p\u00e1gina en funci\u00f3n del lugar sobre el que pasa el rat\u00f3n (el fondo coge el color del cuadro sobre el que est\u00e1 activo el foco).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Eventos en el DOM<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/9a88f-js75-1534176493-32.jpg\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Las acciones que realizamos sobre los elementos del DOM pueden, como en otros casos, activarse a trav\u00e9s de <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/events?hl=es-419%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">diferentes eventos<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos aqu\u00ed un <a href=\"https:\/\/jsfiddle.net\/gertrudix\/49t23zg7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ejemplo en la API de Google Maps<\/a>, con el m\u00e9todo <i>addListener<\/i> y el evento <i><\/i>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este caso se muestra un marcador centrado en el Congreso de los Diputados. Cuando hacemos clic sobre el marcador, se abre una ventana <i>popup<\/i>.<!--EndFragment--><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. Eventos DOM<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sobre el ejemplo anterior, sustituye en el infowindow el texto por un v\u00eddeo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utiliza este c\u00f3digo para insertar el v\u00eddeo: &lt;<i>iframe width=\u00bb560&#8243; height=\u00bb315&#8243; src=\u00bbhttps:\/\/www.youtube.com\/embed\/p0efuzumOCw\u00bb frameborder=\u00bb0&#8243; allowfullscreen&gt;&lt;\/iframe&gt;<\/i> <\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/9c4xsrry\/1\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2 wp-block-heading\">JSON y GeoJSON<\/h2>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es JSON y para qu\u00e9 sirve?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSON es el acr\u00f3nimo de <b>J<\/b>avaScript <b>O<\/b>bject <b>N<\/b>otation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es un lenguaje independiente con una sintaxis basada en Javascript para <i>almacenamiento e intercambio de datos.<\/i><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se utiliza en aplicaciones AJAX y es una alternativa a XML <b>m\u00e1s sencilla<\/b> de usar.<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/cc940-js76-1534177068-22.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">JSON y AJAX<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.w3schools.com\/js\/js_ajax_intro.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AJAX<\/a> es el acr\u00f3nimo de (<i>Asynchonous JavaScript And XML<\/i>) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Permite actualizar partes de una p\u00e1gina web de forma din\u00e1mica; es decir, modifica solo lo que ha cambiado.<!--EndFragment--><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando hacemos una solicitud de datos almacenados en un fichero JSON externo, o <i><\/i> cualquier otro fichero en este formato, hacemos una llamada mediante el objeto .&nbsp;&nbsp;<!--EndFragment--><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/ee31a-js78-1534177457-53.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 nos interesa JSON?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSON resulta relevante por: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Es la respuesta de datos que devuelven la mayor\u00eda de las APIs web&nbsp;&nbsp;<\/li><li>Muchos portales de datos abiertos ofrecen la informaci\u00f3n en este formato<\/li><li>Porque facilita la integraci\u00f3n y visualizaci\u00f3n de informaci\u00f3n\n<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/6073b-js79-1534177568-28.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Sintaxis de JSON<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El formato JSON es id\u00e9ntico al que se utiliza en JS para crear <b>objetos. <\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los datos son convertidos y tratados como objetos, por lo que: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Se le aplican m\u00e9todos, se crean variables, etc.\n<\/li><li>Es m\u00e1s sencillo que XML ya que es <b>m\u00e1s corto<\/b> y <b>no requiere etiquetas de cierre<\/b>\n<\/li><li>Puede usar arrays de datos.\n<\/li><li>Puede ser \u201cparseado\u201d con una funci\u00f3n JS est\u00e1ndar.\n<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En <a href=\"https:\/\/jsfiddle.net\/gertrudix\/ojwofxh6\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a> vemos c\u00f3mo creamos un objeto JSON en Javascript.<\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">La principales reglas que debemos seguir en JSON son:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/60a16-js80-1534177946-65.jpg\" alt=\"Los nombres en JSON requieren ir entre dobles comillas (a diferencia de JS)\"\/><figcaption>Los nombres en JSON requieren ir entre dobles comillas (a diferencia de JS)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ejemplo de JSON en visualizaciones<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este <a href=\"http:\/\/jsfiddle.net\/gertrudix\/pxjy9vpo\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ejemplo de visualizaci\u00f3n creada con HighChart<\/a> podemos ver c\u00f3mo se usan datos en formato JSON para cargarlos en un mapa.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/cbae4-js81-1534178351-73.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>En primer lugar preparamos los datos con un array en formato JSON, mediante pares nombre\/valor, que ser\u00e1n los que se carguen cuando el usuario explore el mapa\n<\/li>\n<li><p>Luego jacemos la llamada al fichero json que contiene las localizaciones para que se cargue, y creamos una funci\u00f3n<\/p><\/li>\n<li><p>3. Por \u00faltimo, iniciamos el mapa<\/p><\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">GeoJSON<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/tools.ietf.org\/html\/rfc7946\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">GeoJSON<\/a> es un formato para el intercambio de <b>datos geoespaciales<\/b> <i>basado en JSON<\/i>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Permite informar <b>diferentes tipos de geometr\u00edas<\/b>: puntos, multipuntos, l\u00edneas, multil\u00edneas, pol\u00edgonos, m\u00faltiples pol\u00edgonos, y colecciones de geometr\u00edas&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Uso de GeoJSON para cargar datos masivos<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/7d35c-js82-1534178654-55.jpg\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a trabajar con ejemplo de un mapa creado con la API de Google Maps. Vamos a <b>cargar ficheros GeoJSON <\/b>con miles de datos<b> <\/b>y customizar los resultados del mapa convirtiendo los marcadores en c\u00edrculos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los datos los obtenemos, para este ejemplo, del sistema de feeds del USGS que ofrece datos en varios formatos, entre ellos GeoJSON, sobre diferentes <a href=\"https:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/geojson.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">sucesos naturales, en este caso, terremotos<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como su sistema no permite directamente hacer llamadas de manera gratuita, tenemos que descargarnos el fichero que queramos y <a href=\"http:\/\/comunicaciondigital.es\/files\/masterdatos\/demo2_GeoJSON\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ubicarlo en servidor propio<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que tenemos el fichero en nuestro servidor, con una URL p\u00fablica, podemos cargarlo y <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/earthquakes\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">customizar el mapa<\/a> obteniendo <a href=\"https:\/\/jsfiddle.net\/gertrudix\/fs2bv0sa\/5\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este resultado<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-group aligncenter has-background\" style=\"background-color:#EEEEEE\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Nota:&nbsp;La funci\u00f3n &nbsp;Math.pow()&nbsp;devuelve la base elevada al&nbsp;exponente para calcular el tama\u00f1o del c\u00edrculo en funci\u00f3n de la magnitud del terremoto.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Uso de JSON para personalizar mapas<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1854e-js83-1534196358-49.jpg\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Otra de las utilidades de JSON es la personalizaci\u00f3n de estilos. La API de Google Maps facilita un <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/styling?hl=es-419#styling_the_default_ma\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">completo sistema de estilos para customizar<\/a> el mapa a voluntad, algo que con otras soluciones de Google como Mymaps es m\u00e1s limitada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a ver un <a href=\"https:\/\/jsfiddle.net\/gertrudix\/hx58bjms\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ejemplo usando el elemento <i>StyledMapType<\/i><\/a>. En este, los estilos se aplican a trav\u00e9s de: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>La modificaci\u00f3n de las <b>funciones de mapas<\/b> (elementos geogr\u00e1ficos incluidos)\n<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Los <b>par\u00e1metros de estilo<\/b> (color y visibilidad) de dichas funciones\n<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Todos los estilos se agrupan en un <b><i>array de estilos <\/i><\/b>en formato JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos los pasos para crear este ejemplo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Creamos el array con el nuevo estilo mediante el objeto google.maps.StyledMapType, y le pasamos a la funci\u00f3n los valores cargados en el arreglo.\n<\/li>\n<li>Le pasamos el nombre del estilo\n<\/li>\n<li>Creamos una variable para asignar el estilo nuevo\n<\/li>\n<li>Creamos el objeto mapa e incluimos el mapTypeId para a\u00f1adir al control del mapa el nuevo tipo\n<\/li>\n<li>Asociamos el estilo del mapa con el MapTypeId y lo presentamos para que se muestre\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Asistente de mapa de Google Maps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En todo caso, configurar estilos complejos creando escribiendo directamente el c\u00f3digo de los estilos lleva tiempo. As\u00ed que muchas veces lo m\u00e1s eficaz es usar el <a href=\"https:\/\/mapstyle.withgoogle.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>asistente de estilos de mapa<\/b><\/a> de la API de Google Maps.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/16597-js84-1534196918-82.jpg\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Los <a href=\"https:\/\/jsfiddle.net\/gertrudix\/43eezm2s\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">pasos para hacerlo<\/a> son: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\n<a href=\"https:\/\/mapstyle.withgoogle.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Accedemos al asistente<\/a>.\u00a0\u00a0\u00a0\n<\/li>\n<li>Configuramos el estilo bien con las features b\u00e1sicas, bien con las avanzadas que nos permiten modificar y acceder a cualquiera de las funciones y par\u00e1metros de estilo.\n<\/li>\n<li>Finalizamos el estilo y copiamos el codigo JSON del array de estilos (ser\u00e1 muy largo)\n<\/li>\n<li>Vamos en el mapa al objeto google.maps.StyledMapType y copiamos el array con todo el contenido entre [ ] incluidos estos.\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><b>Ejercicio. Personalizaci\u00f3n del mapa<\/b><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Retoma el <a href=\"https:\/\/jsfiddle.net\/gertrudix\/LLsgr4ms\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">c\u00f3digo del ejemplo del Bucle for \/ in<\/a>, de las aglomeraciones urbanas <\/li>\n<li>Customiza el mapa mediante el <a href=\"https:\/\/mapstyle.withgoogle.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">editor de estilos de mapa<\/a> <\/li>\n<li>Copia el array de estilos en el editor dentro del objeto google.maps.StyledMapType [<i>Recuerda: como es un array JSON es todo el c\u00f3digo entre [ ], incluidos estos<\/i>]<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><i><a href=\"https:\/\/jsfiddle.net\/LLsgr4ms\/5\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n\n\n\n<div class=\"wp-block-group atavist-embed\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76096?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Estructuras de control Estructuras condicionales Las estructuras de control o condicionales establecen comportamientos en funci\u00f3n de que se den determinadas circunstancias. IF Permite tomar decisiones en funci\u00f3n del estado de las variables. En JS se utilizan: If \u2013 El c\u00f3digo se ejecuta si la condici\u00f3n es verdadera, como en este ejemplo. Else \u2013 Especifica el&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/\">Continua leyendo<span> Estructuras de control, DOM y JSON<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":76097,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[221],"tags":[],"class_list":["post-76096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-banco-conocimiento"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Estructuras de control, DOM y JSON - Portal de proyectos multimedia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estructuras de control, DOM y JSON - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"Estructuras de control Estructuras condicionales Las estructuras de control o condicionales establecen comportamientos en funci\u00f3n de que se den determinadas circunstancias. IF Permite tomar decisiones en funci\u00f3n del estado de las variables. En JS se utilizan: If \u2013 El c\u00f3digo se ejecuta si la condici\u00f3n es verdadera, como en este ejemplo. Else \u2013 Especifica el&hellip; Continua leyendo Estructuras de control, DOM y JSON\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-10T04:28:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-27T18:44:14+00:00\" \/>\n<meta name=\"author\" content=\"Manuel Gertrudix Barrio\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/\"},\"author\":{\"name\":\"Manuel Gertrudix Barrio\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"headline\":\"Estructuras de control, DOM y JSON\",\"datePublished\":\"2018-08-10T04:28:14+00:00\",\"dateModified\":\"2023-11-27T18:44:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/\"},\"wordCount\":3129,\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"banco-conocimiento\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/\",\"name\":\"Estructuras de control, DOM y JSON - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2018-08-10T04:28:14+00:00\",\"dateModified\":\"2023-11-27T18:44:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/estructuras-control-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Estructuras de control, DOM y JSON\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\",\"name\":\"Manuel Gertrudix Barrio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610\",\"contentUrl\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610\",\"caption\":\"Manuel Gertrudix Barrio\"},\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/en\\\/author\\\/gertrudix\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Estructuras de control, DOM y JSON - Portal de proyectos multimedia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/","og_locale":"en_GB","og_type":"article","og_title":"Estructuras de control, DOM y JSON - Portal de proyectos multimedia","og_description":"Estructuras de control Estructuras condicionales Las estructuras de control o condicionales establecen comportamientos en funci\u00f3n de que se den determinadas circunstancias. IF Permite tomar decisiones en funci\u00f3n del estado de las variables. En JS se utilizan: If \u2013 El c\u00f3digo se ejecuta si la condici\u00f3n es verdadera, como en este ejemplo. Else \u2013 Especifica el&hellip; Continua leyendo Estructuras de control, DOM y JSON","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/estructuras-control-js\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2018-08-10T04:28:14+00:00","article_modified_time":"2023-11-27T18:44:14+00:00","author":"Manuel Gertrudix Barrio","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/"},"author":{"name":"Manuel Gertrudix Barrio","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"headline":"Estructuras de control, DOM y JSON","datePublished":"2018-08-10T04:28:14+00:00","dateModified":"2023-11-27T18:44:14+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/"},"wordCount":3129,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#primaryimage"},"thumbnailUrl":"","articleSection":["banco-conocimiento"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/","url":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/","name":"Estructuras de control, DOM y JSON - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#primaryimage"},"thumbnailUrl":"","datePublished":"2018-08-10T04:28:14+00:00","dateModified":"2023-11-27T18:44:14+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/estructuras-control-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"Estructuras de control, DOM y JSON"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337","name":"Manuel Gertrudix Barrio","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1782754610","caption":"Manuel Gertrudix Barrio"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=76096"}],"version-history":[{"count":2,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76096\/revisions"}],"predecessor-version":[{"id":76901,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76096\/revisions\/76901"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=76096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=76096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=76096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}