{ "componentChunkName": "component---node-modules-gatsby-theme-try-ghost-src-templates-post-js", "path": "/jquery-slideshow/", "result": {"data":{"ghostPost":{"id":"Ghost__Post__5a8c07c98cda356bbe9bbe44","title":"jQuery Slideshow","slug":"jquery-slideshow","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/jquery-logo-1.png","excerpt":"Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo\nprimero de todo es generarnos la estructura del proyecto, cada uno que la haga\ncomo quiera, yo tengo algo así\n\n\nEn mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado\nal index.html al igual que jQuery. También he creado mi propio fichero de estilo \nstyle.css y lo he añadido, quedando todo de esta manera:\n\n\n\n\n \n\n\n \n Ninja_slider\n\n \n\n \n \n \n\n\n \n\n\n\n\nLo siguiente es añadir donde estará el slider en el body de la página\n\n\n\n

Ninja-Slider

\n\n

\n \n\n\n\nNuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider\n, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle\nun poco de estilo y que se vea algo en la página. Le daremos un tamaño y un\ncolor de fondo para ir viendo algo.\n\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\n\n\nQuedando así\n\n\nBien ahora vamos a crear un fichero js donde meteremos toda la lógica de\nfuncionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo\nplugin, es decir que este encapsulado para poder usarlo en cualquiera de\nnuestros proyectos.\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la\ncarpeta correspondiente, lo siguiente son las imágenes para que slider tenga\nalgo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4\ny las metemos en la carpeta img.\n\nUna vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una\nfunción anónima que se ejecute nada más cargar el js en el HTML:\n\n(function(){\n //Aqui dentro meteríamos todo el código.\n})();\n\n\nVamos a empezar por algo sencillo, que es recibir las imagenes desde el html que\nes desde donde nos las mandarían si pensamos que este es un plugin. Estas\nimágenes las incluiremos en una lista, es decir, dentro de un ul de html.\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que\nnecesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que\ntenga las modificaciones que queramos hacer.\nPrimero creemos un método, que será el que realmente configure e inicie nuestro\nslider\n\n(function(){\n $.ninjaShow = function(config){\n \n }\n})();\n\n\nAqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar\ndesde cualquier sitio desde el que podamos llamar a jQuery. A esta función le\npasamos por parámetro un objeto config que tendrá todos los cambios sobre la\nconfiguración por defecto que establezcamos.\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen\ncuales son las imágenes a través del objeto config, podemos tener nuestras\nimagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba\npara que veáis de lo que estoy hablando, nos vamos a nuestro index.html y\nañadimos lo siguiente al final (pero siempre dentro del body)\n\n\n\n\n\n\n\nY luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.\n\n(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\n\n\nSi guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo\ncomo lo siguiente\n\n\nEs decir, un objeto con la propiedad images y dentro de esta un array con la\ndirección donde estan nuestras imágenes.\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.\n\n(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n\n //Abrimos la lista\n var imgList = \"

';\n })\n //Cerramos la lista\n imgList += \"

\";\n \n //Adjuntamos la lista al contenedor\n $(\".ninjaSlider\").append(imgList);\n }\n\n})();\n\n\nSi ejecutamos nuestro index.html veremos algo similar a esto:\n\n\n\nAhora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo\npara que veamos que realmente las cosas estan donde deben estar. Nos vamos a\nnuestro style.css y lo dejamos así\n\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\n\n\nAhora si veríamos algo aunque solo sean las imágenes\n\n\nPero si miramos el código fuente de la página deberíamos ver algo como esto:\n\n\nYa tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la\npropiedad overflow de css, la configuración correcta sería descomentado la línea\ny dejandola así\n\noverflow: hidden;\n\n\nPero la hemos comentado para explicar que es lo que vamos a hacer para ir\ncambiando de imágenes.\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al\nlado de otra, lo que haremos será ir moviendo el interior del contenedor en esa\nlinea horizontal, modificando el margin-left, es decir, supongamos que nuestro \nmargin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de\n600, pues lo que haríamos para movernos entre las imágenes sería ir modificando\nel margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un\nmargen de -600, la siguiente de -1200... y el - es necesario porque nuestro\nslide se movera de izquierda a derecha y como os podréis imaginar para que\nfuncione en este ejemplo es necesario que el ancho de las imágenes sea el mismo\no muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero\nprefiero dejar el código más claro).\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos\ncomo lo hacemos\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(\".ninjaSlider ul\").animate({\n marginLeft: position * -600\n },400);\n\n\nPor último descomentamos el overflow:hidden en el fichero css y listo, ya lo\ntenemos\n\n\n\nYa tenemos nuestro slide funcionando, en este punto podríamos añadir más\nfuncionalidad, que tuviera los puntitos típicos que te indican en que slide te\nencuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por\nejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo\nmostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que\nharemos será añadir un par de cosas al js para que se vaya pareciendo más a un\nplugin y podamos personalizarlo un poco más.\n\nSi miramos el código detenidamente y pensamos un poco que cosas podrían ser\nsusceptibles de cambiar, podrían ser:\n\n * El ancho básico de las imágenes para ir moviendo el slide.\n * La clase o id del slider (podriamos tener mas de uno por ejemplo)\n * El intervalo de transición de las imágenes.\n\nEstos son algunos de los cambios que se me han ocurrido con el código que\ntenemos actualmente podríamos tener más seguramente. Por el momento vamos a\npreparar esos.\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían\ntener una configuración por defecto. Las imágenes deben ser obligatorias, por\neso hemos puesto el control antes que nos lanzaría una alerta si no se pasa\nninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener\nvalores por defecto si no nos lo pasan por parámetro.\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa\npor parámetro\n\n$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n\nEste método lo que hace es sobreescribir el objeto local, que sería el primero\n(el que está entre { }) con el que se pasa por parámetro, pero solo las\npropiedades con el mismo nombre, es decir, no elimina el objeto por otro, es\ncomo si cambiaramos las propiedades que coincidan por las nuevas que se pasan\npor parámetro.\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como \n\".ninjaslider\" por la propiedad correspondiente y listo, ya tendríamos preparado\nel código como si fuera un plugin quedando así (dejo comentado el código)\n\n//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == \"\"){\n alert(\"Falta el nombre o id donde estará el slider\")\n return\n }\n\n //Abrimos la lista\n var imgList = \"

';\n })\n //Cerramos la lista\n imgList += \"

Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
\n $\"folders\"$

En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n    <title>Ninja_slider</title>\n\n    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>\n\n    <link rel="stylesheet" href="css/bootstrap.min.css">\n    <link rel="stylesheet" href="css/style.css">\n    \n</head>\n<body>\n    \n</body>\n</html>\n

Lo siguiente es añadir donde estará el slider en el body de la página

<body>\n\n    <div class="container" align="center">\n        <h1>Ninja-Slider</h1>\n        <hr>\n\n        <div class="ninjaSlider"></div>\n\n    </div>\n    \n</body>\n

Nuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.

.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\n

Quedando así
\n $\"background\"$

Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.

Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:

(function(){\n    //Aqui dentro meteríamos todo el código.\n})();\n

Vamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider

(function(){\n    $.ninjaShow = function(config){\n    \n    }\n})();\n

Aqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)

<!-- añadimos nuestro js al html -->\n<script src="js/slider.js"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n        images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\n

Y luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.

(function(){\n\n    $.ninjaShow = function( config ){\n\n        console.log(config);\n    }\n\n})();\n

Si guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n $\"images\"$

Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.

(function(){\n\n    $.ninjaShow = function( config ){\n                //Comprobamos que nos pasan alguna imagen\n            if (config.images.length == 0){\n                alert("Necesitamos alguna imagen para mostrar");\n                return;\n            }\n\n            //Abrimos la lista\n            var imgList = "<ul>";\n\n            //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n            config.images.map((img)=>{\n                imgList += '<li><img src="'+ img +'"</li>';\n            })\n            //Cerramos la lista\n            imgList += "</ul>";\n            \n            //Adjuntamos la lista al contenedor\n            $(".ninjaSlider").append(imgList);\n    }\n\n})();\n

Si ejecutamos nuestro index.html veremos algo similar a esto:

$\"example\"$

Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así

.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\n

Ahora si veríamos algo aunque solo sean las imágenes
\n $\"example2\"$

Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n $\"example3\"$

Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así

overflow: hidden;\n

Pero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos

 //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n   move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion       \n   position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n   if (position >= images ){\n        position = 0\n   }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n   $(".ninjaSlider ul").animate({\n     marginLeft: position * -600\n   },400);\n

Por último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos

$\"slideExample\"$

Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.

Si miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:

El ancho básico de las imágenes para ir moviendo el slide.
La clase o id del slider (podriamos tener mas de uno por ejemplo)
El intervalo de transición de las imágenes.

Estos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro

$.ninjaShow = function( config ){\n            \n            config = $.extend({\n                slideName: "",\n                width: 600,\n                timeTransition: 1400,\n                images: []\n            }, config);\n\n

Este método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como ".ninjaslider" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)

//Función anonima\n(function(){\n\n    $.ninjaShow = function( config ){\n            \n            config = $.extend({\n                slideName: "",\n                width: 600,\n                timeTransition: 1400,\n                images: []\n            }, config);\n\n\n            //Comprobamos que nos pasan alguna imagen\n            if (config.images.length == 0){\n                alert("Necesitamos alguna imagen para mostrar");\n                return;\n            }\n            \n            //Comprobamos que nos han pasado un nombre para slider\n            if (config.slideName == ""){\n                alert("Falta el nombre o id donde estará el slider")\n                return\n            }\n\n            //Abrimos la lista\n            var imgList = "<ul>";\n\n            //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n            config.images.map((img)=>{\n                imgList += '<li><img src="'+ img +'"</li>';\n            })\n            //Cerramos la lista\n            imgList += "</ul>";\n            \n            //Adjuntamos la lista al contenedor\n            $(config.slideName).append(imgList);\n\n            //Variable de ayuda para gestionar la posicion\n            var position = 0;\n            //Numero de imagenes para controlar\n            var images = config.images.length;\n\n            //intervalo en el que se cambia la imagen\n            var interval = setInterval(function(){\n                move();\n            }, config.timeTransition);\n\n            function move(){\n                \n                position++;\n\n                if (position >= images ){\n                    position = 0\n                }\n\n                $(config.slideName + " ul").animate({\n                    marginLeft: position * - config.width\n                },400);\n            }\n    }\n\n})();\n

Como véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:

<script>\n\t\n\t$.ninjaShow({\n        slideName: ".ninjaSlider",\n        ancho: 600,\n        timeTransition: 1400,\n        images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n    });\n</script>\n

Y podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow

$.ninjaShow({\n        slideName: ".ninjaSlider",\n        ancho: 600,\n        timeTransition: 1400,\n        images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n    });\n    \n$.ninjaShow({\n        slideName: ".ninjaSlider2",\n        ancho: 600,\n        timeTransition: 1200,\n        images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n

$\"2Sliders\"$

Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.

Sin mucho más nos vemos en el siguiente, un abrazooorrrr.

\n","url":"https://jlgarcia.fulldev.ninja/jquery-slideshow/","canonical_url":null,"uuid":"3b1de9f2-e3a4-45a7-a056-dc806e105a19","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a8c07c98cda356bbe9bbe44","reading_time":8,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n    <title>Ninja_slider</title>\n\n    <script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n\n    <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"css/style.css\">\n    \n</head>\n<body>\n    \n</body>\n</html>\n

Lo siguiente es añadir donde estará el slider en el body de la página

<body>\n\n    <div class=\"container\" align=\"center\">\n        <h1>Ninja-Slider</h1>\n        <hr>\n\n        <div class=\"ninjaSlider\"></div>\n\n    </div>\n    \n</body>\n

.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\n

Quedando así
\n $\"background\"$

Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:

(function(){\n    //Aqui dentro meteríamos todo el código.\n})();\n

(function(){\n    $.ninjaShow = function(config){\n    \n    }\n})();\n

<!-- añadimos nuestro js al html -->\n<script src=\"js/slider.js\"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n        images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\n

Y luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.

(function(){\n\n    $.ninjaShow = function( config ){\n\n        console.log(config);\n    }\n\n})();\n

Si guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n $\"images\"$

Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.

(function(){\n\n    $.ninjaShow = function( config ){\n                //Comprobamos que nos pasan alguna imagen\n            if (config.images.length == 0){\n                alert(\"Necesitamos alguna imagen para mostrar\");\n                return;\n            }\n\n            //Abrimos la lista\n            var imgList = \"<ul>\";\n\n            //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n            config.images.map((img)=>{\n                imgList += '<li><img src=\"'+ img +'\"</li>';\n            })\n            //Cerramos la lista\n            imgList += \"</ul>\";\n            \n            //Adjuntamos la lista al contenedor\n            $(\".ninjaSlider\").append(imgList);\n    }\n\n})();\n

Si ejecutamos nuestro index.html veremos algo similar a esto:

$\"example\"$

Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así

.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\n

Ahora si veríamos algo aunque solo sean las imágenes
\n $\"example2\"$

Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n $\"example3\"$

Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así

overflow: hidden;\n

 //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n   move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion       \n   position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n   if (position >= images ){\n        position = 0\n   }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n   $(\".ninjaSlider ul\").animate({\n     marginLeft: position * -600\n   },400);\n

Por último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos

$\"slideExample\"$

Si miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:

El ancho básico de las imágenes para ir moviendo el slide.
La clase o id del slider (podriamos tener mas de uno por ejemplo)
El intervalo de transición de las imágenes.

$.ninjaShow = function( config ){\n            \n            config = $.extend({\n                slideName: \"\",\n                width: 600,\n                timeTransition: 1400,\n                images: []\n            }, config);\n\n

Este método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como \".ninjaslider\" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)

//Función anonima\n(function(){\n\n    $.ninjaShow = function( config ){\n            \n            config = $.extend({\n                slideName: \"\",\n                width: 600,\n                timeTransition: 1400,\n                images: []\n            }, config);\n\n\n            //Comprobamos que nos pasan alguna imagen\n            if (config.images.length == 0){\n                alert(\"Necesitamos alguna imagen para mostrar\");\n                return;\n            }\n            \n            //Comprobamos que nos han pasado un nombre para slider\n            if (config.slideName == \"\"){\n                alert(\"Falta el nombre o id donde estará el slider\")\n                return\n            }\n\n            //Abrimos la lista\n            var imgList = \"<ul>\";\n\n            //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n            config.images.map((img)=>{\n                imgList += '<li><img src=\"'+ img +'\"</li>';\n            })\n            //Cerramos la lista\n            imgList += \"</ul>\";\n            \n            //Adjuntamos la lista al contenedor\n            $(config.slideName).append(imgList);\n\n            //Variable de ayuda para gestionar la posicion\n            var position = 0;\n            //Numero de imagenes para controlar\n            var images = config.images.length;\n\n            //intervalo en el que se cambia la imagen\n            var interval = setInterval(function(){\n                move();\n            }, config.timeTransition);\n\n            function move(){\n                \n                position++;\n\n                if (position >= images ){\n                    position = 0\n                }\n\n                $(config.slideName + \" ul\").animate({\n                    marginLeft: position * - config.width\n                },400);\n            }\n    }\n\n})();\n

Como véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:

<script>\n\t\n\t$.ninjaShow({\n        slideName: \".ninjaSlider\",\n        ancho: 600,\n        timeTransition: 1400,\n        images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n    });\n</script>\n

Y podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow

$.ninjaShow({\n        slideName: \".ninjaSlider\",\n        ancho: 600,\n        timeTransition: 1400,\n        images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n    });\n    \n$.ninjaShow({\n        slideName: \".ninjaSlider2\",\n        ancho: 600,\n        timeTransition: 1200,\n        images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n

$\"2Sliders\"$

Sin mucho más nos vemos en el siguiente, un abrazooorrrr.

\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos con un ejemplo de creación de un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Slideshow"}]},{"type":"text","value":" muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/folders.JPG","alt":"folders"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jQuery"}]},{"type":"text","value":". También he creado mi propio fichero de estilo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"style.css"}]},{"type":"text","value":" y lo he añadido, quedando todo de esta manera:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n \n Ninja_slider\n\n \n\n \n \n \n\n\n \n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo siguiente es añadir donde estará el slider en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" de la página"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n

Ninja-Slider

\n\n

\n \n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nuestro slider como os podéis imaginar estará en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" con la clase "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjaSlider"}]},{"type":"text","value":", y esto es todo por el momento en el html, ahora vamos a nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"css"}]},{"type":"text","value":" para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Quedando así"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/background.JPG","alt":"background"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien ahora vamos a crear un fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":" donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBien lo primero como hemos comentado es crearnos el fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":" y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(function(){\n //Aqui dentro meteríamos todo el código.\n})();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ul"}]},{"type":"text","value":" de html."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"objecto"}]},{"type":"text","value":" que tenga las modificaciones que queramos hacer."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(function(){\n $.ninjaShow = function(config){\n \n }\n})();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Aqui hemos añadido la función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjaShow"}]},{"type":"text","value":" a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"config"}]},{"type":"text","value":" que tendrá todos los cambios sobre la configuración por defecto que establezcamos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"config"}]},{"type":"text","value":", podemos tener nuestras imagenes bajo la propiedad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"images"}]},{"type":"text","value":" dentro del objeto "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"config"}]},{"type":"text","value":". Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" y añadimos lo siguiente al final (pero siempre dentro del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"body"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y luego en nuestro fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":", ponemos un log para ver que estamos recibiendo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si guardamos y miramos la consola al ejecutar nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":", veremos algo como lo siguiente"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/images.JPG","alt":"images"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Es decir, un objeto con la propiedad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"images"}]},{"type":"text","value":" y dentro de esta un array con la dirección donde estan nuestras imágenes."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n\n //Abrimos la lista\n var imgList = \"

';\n })\n //Cerramos la lista\n imgList += \"

\";\n \n //Adjuntamos la lista al contenedor\n $(\".ninjaSlider\").append(imgList);\n }\n\n})();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ejecutamos nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" veremos algo similar a esto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example.JPG","alt":"example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"style.css"}]},{"type":"text","value":" y lo dejamos así"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora si veríamos algo aunque solo sean las imágenes"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example2.JPG","alt":"example2"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pero si miramos el código fuente de la página deberíamos ver algo como esto:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example3.JPG","alt":"example3"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"overflow"}]},{"type":"text","value":" de css, la configuración correcta sería descomentado la línea y dejandola así"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"overflow: hidden;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"margin-left"}]},{"type":"text","value":", es decir, supongamos que nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"margin-left"}]},{"type":"text","value":" en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"margin-left"}]},{"type":"text","value":" en conjuntos de 600, es decir, la siguiente imagen tendria un margen de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"-600"}]},{"type":"text","value":", la siguiente de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"-1200"}]},{"type":"text","value":"... y el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"li"}]},{"type":"text","value":" dentro de la lista pero prefiero dejar el código más claro)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(\".ninjaSlider ul\").animate({\n marginLeft: position * -600\n },400);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Por último descomentamos el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"overflow:hidden"}]},{"type":"text","value":" en el fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"css"}]},{"type":"text","value":" y listo, ya lo tenemos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/slideExample.gif","alt":"slideExample"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":" para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"El ancho básico de las imágenes para ir moviendo el slide."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"La clase o id del slider (podriamos tener mas de uno por ejemplo)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"El intervalo de transición de las imágenes."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara ellos basta con usar el método "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"extend"}]},{"type":"text","value":" de jQuery sobre el objeto que se pasa por parámetro"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"{ }"}]},{"type":"text","value":") con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\".ninjaslider\""}]},{"type":"text","value":" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == \"\"){\n alert(\"Falta el nombre o id donde estará el slider\")\n return\n }\n\n //Abrimos la lista\n var imgList = \"

';\n })\n //Cerramos la lista\n imgList += \"

\";\n \n //Adjuntamos la lista al contenedor\n $(config.slideName).append(imgList);\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, config.timeTransition);\n\n function move(){\n \n position++;\n\n if (position >= images ){\n position = 0\n }\n\n $(config.slideName + \" ul\").animate({\n marginLeft: position * - config.width\n },400);\n }\n }\n\n})();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis ahora tenemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"config.algo"}]},{"type":"text","value":" por todas partes. Y para usarlo nos vamos a nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" y añadimos las propiedades necesarias:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjaShow"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$.ninjaShow({\n slideName: \".ninjaSlider\",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n \n$.ninjaShow({\n slideName: \".ninjaSlider2\",\n ancho: 600,\n timeTransition: 1200,\n images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/2Sliders.JPG","alt":"2Sliders"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sin mucho más nos vemos en el siguiente, un abrazooorrrr."}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"jquery-logo-1.png","publicURL":"/static/d41803bc36890b1c71051dc26c29c3ea/jquery-logo-1.png","imageMeta":{"width":665,"height":405},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwklEQVQoz2MQVjYkGzFgFRVRMRJVNSZOs4oRCCkbQYTE1Iz55XW5pLWA+iGmiAGRmrEolDQCCgopGcA0A1lK+iBSGSTKIamhZGhv4ugH1M8np8Mrp8MlrckuocYjq80qpsonr8srqy0CsgyoWclASM1UwMBZSNuaX05HxdghJD5r2tzFK9Zuzi6ptXALdPCJ8I9KzStvtPMOr2npNXLwySiqDoxJ55TUYAA6mNcjDYgE3JPYZfUiErMvXr4Wn1kcnpR7+tzlgqrmJavWX7p6Y+vu/Zu276lp69tz4OiUOYuAXgC6kUFEXofHJ4cruonPO4tLwXDyjPn17f1ADRs2b+/tn7pqzYbuvsmbN2/r7J3c1jlBXtN05uyFhvbenFKaQP0MYK8aCtiFs2s7WHsEz1uySkBRX0nfWt3Oj986WNEnWdAmWNw2WM0rQdQ6UMgmWNjcR1DRAOZnSNzIaQrJaUtpmYurmwgpGQJDm0fZRMDInUfHQcDQhV/fhUfLTkDfCSgioOcoAosXWDyrGAORoKI+0CdAU0ExpGwgqqAjqqgnoqArqqgLYijqAv0IZOBMJBD3wEwExz/IXCMUNv4URiQCANQ+lfCXnaknAAAAAElFTkSuQmCC","aspectRatio":1.6455696202531647,"src":"/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo-1.png","srcSet":"/static/d41803bc36890b1c71051dc26c29c3ea/bcfcb/jquery-logo-1.png 260w,\n/static/d41803bc36890b1c71051dc26c29c3ea/19d75/jquery-logo-1.png 520w,\n/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo-1.png 665w","srcWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo-1.webp","srcSetWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/dc8f3/jquery-logo-1.webp 260w,\n/static/d41803bc36890b1c71051dc26c29c3ea/2db4b/jquery-logo-1.webp 520w,\n/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo-1.webp 665w","sizes":"(max-width: 665px) 100vw, 665px"}}}},"prev":{"id":"Ghost__Post__5be004332dd6610fd828c9e4","title":"Docker I: Comandos básicos","slug":"docker-basics-i","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2018/12/docker_facebook_share.png","excerpt":"Un contenedor Docker es en realidad un grupo de recursos que se reserva del\nhardware de nuestra máquina para una función específica. Este grupo de recursos\nfunciona prácticamente como una máquina independiente.\nEn Mac y en Windows al instalar Docker, lo que realmente se instala es un\nmáquina virtual Linux donde realmente se hará la gestión de nuestros\ncontenedores.\n\nComandos básicos\ndocker run nombreDeContenedor\n\n\nEste es el comando básico que aprendemos cuando empezamos a trabajar con Docker.\nE","custom_excerpt":null,"visibility":"public","created_at_pretty":"5 Nov 2018","published_at_pretty":"1 Jul 2018","updated_at_pretty":"19 Jan 2021","created_at":"2018-11-05T09:49:55.000+01:00","published_at":"2018-07-01T12:32:00.000+02:00","updated_at":"2021-01-19T20:51:39.000+01:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"docker","url":"https://jlgarcia.fulldev.ninja/tag/docker/","name":"Docker","visibility":"public","feature_image":null,"description":null,"meta_title":"Docker Issues","meta_description":"Veremos algunos de los problemas que me he ido encontrando trabajando con contenedores y que no es tan fácil encontrar la solución en internet.","featureImageSharp":null},"tags":[{"slug":"docker","url":"https://jlgarcia.fulldev.ninja/tag/docker/","name":"Docker","visibility":"public","feature_image":null,"description":null,"meta_title":"Docker Issues","meta_description":"Veremos algunos de los problemas que me he ido encontrando trabajando con contenedores y que no es tan fácil encontrar la solución en internet.","featureImageSharp":null}],"plaintext":"Un contenedor Docker es en realidad un grupo de recursos que se reserva del\nhardware de nuestra máquina para una función específica. Este grupo de recursos\nfunciona prácticamente como una máquina independiente.\nEn Mac y en Windows al instalar Docker, lo que realmente se instala es un\nmáquina virtual Linux donde realmente se hará la gestión de nuestros\ncontenedores.\n\nComandos básicos\ndocker run nombreDeContenedor\n\n\nEste es el comando básico que aprendemos cuando empezamos a trabajar con Docker.\nEste comando hace lo siguiente:\n1. Comprueba si tenemos en nuestro disco duro la imagen o el fichero de imagen\nque hemos solicitado.\n2. Si no lo tenemos se va a buscarlo a la Docker Hub (marketplace con todos los\ncontenedores públicos) y lo descarga.\n3. Crea un contenedor a partir de la imagen que tenemos o teniamos ya en nuestro\ndisco duro.\n4. Inicia el contenedor pertinente ejecutando el comando de inicio que tenga\nconfigurado el contenedor.\n5. Nos muestra un log con la salida de información que tenga configurado ese\ncontenedor (o con los errores que nos haya generado)\n\ndocker create nombreDeContenedor\n\n\nEsto serían solo los pasos 1,2 y 3, es decir, nos crea el contenedor pero no lo\narranca.\n\ndocker start idDeContenedor\n\n\nEsto nos inicializa un contenedor a partir del ID que nos ha generado al crearlo\no el NOMBRE (OJO no es el nombre de la imagen si no el del propio contenedor).\nCon docker start no veríamos nada en la consola, esto simplemente arranca el\ncontenedor en segundo plano (por decirlo de alguna manera)\n\ndocker start -a idDeContenedor\n\n\nIgual que el anterior pero si nos muestra el log por la consola.\n\ndocker ps\n\n\nCon docker ps vemos la información de los contenedores que tenemos activos\nactualmente\n\n\n\nAquí podemos ver:\n\n * Container ID: El id único que tiene el contenedor que hemos creado\n * IMAGE: La imagen de la que parte el contenedor, es decir, el fichero de\n configuración a partir del cual se ha creado\n * COMMAND: El comando de inicio que ejecuta nuestro contenedor al iniciarse.\n * CREATED: Hace cuanto hemos creado el contenedor.\n * STATUS: El estado actual del contenedor, si esta arrancado, apagado o en\n error.\n * PORTS: En el caso de que tuvieramos algún puerto de nuestro equipo\n direccionado a alguno del contender aparecería aquí.\n * NAMES: Los nombres que tiene el contenedor, a partir del cual podemos\n llamarlo como si fuera su ID. Este nombre se crea automáticamente o lo\n podemos indicar nosotros a la hora de crear el contenedor (docker create o\n docker run)\n\ndocker ps --all\n\n\nNos muestra todos los contenedores que tenemos creados, tanto si están\nencendidos como si no.\n\n\n\ndocker system prune\n\n\nElimina todos los contenedores parados, las redes sin usar, las imagenes\ndescargadas....\n\ndocker stop Id/NameContainer\n\n\nEnvia la señal SIGTERM al contenedor para que se apague correctamente cerrando\nlos procesos de la manera correcta.\n\ndocker kill id/NameContainer\n\n\nEnvía la señal SIGKILL al contenedor, que lo que hace es cerrar todo en plan\nguantelete del infinito.\n\nQue hacer cuando un contenedor ya esta arrancado y quiero ejecutar un comando?\ndocker exec -it idContainer Comando\n\n\n * exec: Indicamos que ejecute un comando.\n * it: básicamente es que queremos que nos devuelva la consola con el comando\n que hemos ejecutado. Sin it ejecutaría el comando pero no veríamos que pasa.\n\nVeamos un ejemplo con un contenedor de Redis\n\n\n\nVemos que se esta ejecutando\n\n\nEn este estado podemos ejecutar comandos y tomar control de la sesion","html":"

Un contenedor Docker es en realidad un grupo de recursos que se reserva del hardware de nuestra máquina para una función específica. Este grupo de recursos funciona prácticamente como una máquina independiente.
\nEn Mac y en Windows al instalar Docker, lo que realmente se instala es un máquina virtual Linux donde realmente se hará la gestión de nuestros contenedores.

Comandos básicos

docker run nombreDeContenedor\n

Este es el comando básico que aprendemos cuando empezamos a trabajar con Docker. Este comando hace lo siguiente:
\n1. Comprueba si tenemos en nuestro disco duro la imagen o el fichero de imagen que hemos solicitado.
\n2. Si no lo tenemos se va a buscarlo a la Docker Hub (marketplace con todos los contenedores públicos) y lo descarga.
\n3. Crea un contenedor a partir de la imagen que tenemos o teniamos ya en nuestro disco duro.
\n4. Inicia el contenedor pertinente ejecutando el comando de inicio que tenga configurado el contenedor.
\n5. Nos muestra un log con la salida de información que tenga configurado ese contenedor (o con los errores que nos haya generado)

docker create nombreDeContenedor\n

Esto serían solo los pasos 1,2 y 3, es decir, nos crea el contenedor pero no lo arranca.

docker start idDeContenedor\n

Esto nos inicializa un contenedor a partir del ID que nos ha generado al crearlo o el NOMBRE (OJO no es el nombre de la imagen si no el del propio contenedor). Con docker start no veríamos nada en la consola, esto simplemente arranca el contenedor en segundo plano (por decirlo de alguna manera)

docker start -a idDeContenedor\n

Igual que el anterior pero si nos muestra el log por la consola.

docker ps\n

Con docker ps vemos la información de los contenedores que tenemos activos actualmente

$\"Captura-de-pantalla-2018-11-05-a-las-10.01.53\"$

Aquí podemos ver:

Container ID: El id único que tiene el contenedor que hemos creado
IMAGE: La imagen de la que parte el contenedor, es decir, el fichero de configuración a partir del cual se ha creado
COMMAND: El comando de inicio que ejecuta nuestro contenedor al iniciarse.
CREATED: Hace cuanto hemos creado el contenedor.
STATUS: El estado actual del contenedor, si esta arrancado, apagado o en error.
PORTS: En el caso de que tuvieramos algún puerto de nuestro equipo direccionado a alguno del contender aparecería aquí.
NAMES: Los nombres que tiene el contenedor, a partir del cual podemos llamarlo como si fuera su ID. Este nombre se crea automáticamente o lo podemos indicar nosotros a la hora de crear el contenedor (docker create o docker run)

docker ps --all\n

Nos muestra todos los contenedores que tenemos creados, tanto si están encendidos como si no.

$\"Captura-de-pantalla-2018-11-05-a-las-10.07.33\"$

docker system prune\n

Elimina todos los contenedores parados, las redes sin usar, las imagenes descargadas....

docker stop Id/NameContainer\n

Envia la señal SIGTERM al contenedor para que se apague correctamente cerrando los procesos de la manera correcta.

docker kill id/NameContainer\n

Envía la señal SIGKILL al contenedor, que lo que hace es cerrar todo en plan guantelete del infinito.

Que hacer cuando un contenedor ya esta arrancado y quiero ejecutar un comando?

docker exec -it idContainer Comando\n

exec: Indicamos que ejecute un comando.
it: básicamente es que queremos que nos devuelva la consola con el comando que hemos ejecutado. Sin it ejecutaría el comando pero no veríamos que pasa.

Veamos un ejemplo con un contenedor de Redis

$\"Captura-de-pantalla-2018-11-06-a-las-9.14.04\"$

Vemos que se esta ejecutando
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.14.25\"$

En este estado podemos ejecutar comandos y tomar control de la sesion
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.15.05\"$
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.15.31\"$

\n","url":"https://jlgarcia.fulldev.ninja/docker-basics-i/","canonical_url":null,"uuid":"ba86bb58-93de-4ff7-8487-456a33e237f2","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5be004332dd6610fd828c9e4","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"

Comandos básicos

docker run nombreDeContenedor\n

docker create nombreDeContenedor\n

Esto serían solo los pasos 1,2 y 3, es decir, nos crea el contenedor pero no lo arranca.

docker start idDeContenedor\n

docker start -a idDeContenedor\n

Igual que el anterior pero si nos muestra el log por la consola.

docker ps\n

Con docker ps vemos la información de los contenedores que tenemos activos actualmente

$\"Captura-de-pantalla-2018-11-05-a-las-10.01.53\"$

Aquí podemos ver:

Container ID: El id único que tiene el contenedor que hemos creado
IMAGE: La imagen de la que parte el contenedor, es decir, el fichero de configuración a partir del cual se ha creado
COMMAND: El comando de inicio que ejecuta nuestro contenedor al iniciarse.
CREATED: Hace cuanto hemos creado el contenedor.
STATUS: El estado actual del contenedor, si esta arrancado, apagado o en error.
PORTS: En el caso de que tuvieramos algún puerto de nuestro equipo direccionado a alguno del contender aparecería aquí.
NAMES: Los nombres que tiene el contenedor, a partir del cual podemos llamarlo como si fuera su ID. Este nombre se crea automáticamente o lo podemos indicar nosotros a la hora de crear el contenedor (docker create o docker run)

docker ps --all\n

Nos muestra todos los contenedores que tenemos creados, tanto si están encendidos como si no.

$\"Captura-de-pantalla-2018-11-05-a-las-10.07.33\"$

docker system prune\n

Elimina todos los contenedores parados, las redes sin usar, las imagenes descargadas....

docker stop Id/NameContainer\n

Envia la señal SIGTERM al contenedor para que se apague correctamente cerrando los procesos de la manera correcta.

docker kill id/NameContainer\n

Envía la señal SIGKILL al contenedor, que lo que hace es cerrar todo en plan guantelete del infinito.

Que hacer cuando un contenedor ya esta arrancado y quiero ejecutar un comando?

docker exec -it idContainer Comando\n

exec: Indicamos que ejecute un comando.
it: básicamente es que queremos que nos devuelva la consola con el comando que hemos ejecutado. Sin it ejecutaría el comando pero no veríamos que pasa.

Veamos un ejemplo con un contenedor de Redis

$\"Captura-de-pantalla-2018-11-06-a-las-9.14.04\"$

Vemos que se esta ejecutando
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.14.25\"$

En este estado podemos ejecutar comandos y tomar control de la sesion
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.15.05\"$
\n $\"Captura-de-pantalla-2018-11-06-a-las-9.15.31\"$

\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un contenedor Docker es en realidad un grupo de recursos que se reserva del hardware de nuestra máquina para una función específica. Este grupo de recursos funciona prácticamente como una máquina independiente."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn Mac y en Windows al instalar Docker, lo que realmente se instala es un máquina virtual Linux donde realmente se hará la gestión de nuestros contenedores."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"comandosbsicos"},"children":[{"type":"text","value":"Comandos básicos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker run nombreDeContenedor\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este es el comando básico que aprendemos cuando empezamos a trabajar con Docker. Este comando hace lo siguiente:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"1."}]},{"type":"text","value":" Comprueba si tenemos en nuestro disco duro la imagen o el fichero de imagen que hemos solicitado."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2."}]},{"type":"text","value":" Si no lo tenemos se va a buscarlo a la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Docker Hub"}]},{"type":"text","value":" (marketplace con todos los contenedores públicos) y lo descarga."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3."}]},{"type":"text","value":" Crea un contenedor a partir de la imagen que tenemos o teniamos ya en nuestro disco duro."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"4."}]},{"type":"text","value":" Inicia el contenedor pertinente ejecutando el comando de inicio que tenga configurado el contenedor."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"5."}]},{"type":"text","value":" Nos muestra un log con la salida de información que tenga configurado ese contenedor (o con los errores que nos haya generado)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker create nombreDeContenedor\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto serían solo los pasos 1,2 y 3, es decir, nos crea el contenedor pero no lo arranca."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker start idDeContenedor\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto nos inicializa un contenedor a partir del ID que nos ha generado al crearlo o el NOMBRE (OJO no es el nombre de la imagen si no el del propio contenedor). Con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"docker start"}]},{"type":"text","value":" no veríamos nada en la consola, esto simplemente arranca el contenedor en segundo plano (por decirlo de alguna manera)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker start -a idDeContenedor\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Igual que el anterior pero si nos muestra el log por la consola."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ps"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"docker ps"}]},{"type":"text","value":" vemos la información de los contenedores que tenemos activos actualmente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-05-a-las-10.01.53.png","alt":"Captura-de-pantalla-2018-11-05-a-las-10.01.53"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Aquí podemos ver:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Container ID"}]},{"type":"text","value":": El id único que tiene el contenedor que hemos creado"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"IMAGE"}]},{"type":"text","value":": La imagen de la que parte el contenedor, es decir, el fichero de configuración a partir del cual se ha creado"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"COMMAND"}]},{"type":"text","value":": El comando de inicio que ejecuta nuestro contenedor al iniciarse."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CREATED"}]},{"type":"text","value":": Hace cuanto hemos creado el contenedor."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"STATUS"}]},{"type":"text","value":": El estado actual del contenedor, si esta arrancado, apagado o en error."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"PORTS"}]},{"type":"text","value":": En el caso de que tuvieramos algún puerto de nuestro equipo direccionado a alguno del contender aparecería aquí."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NAMES"}]},{"type":"text","value":": Los nombres que tiene el contenedor, a partir del cual podemos llamarlo como si fuera su ID. Este nombre se crea automáticamente o lo podemos indicar nosotros a la hora de crear el contenedor (docker create o docker run)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ps"}]},{"type":"text","value":" --all\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos muestra todos los contenedores que tenemos creados, tanto si están encendidos como si no."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-05-a-las-10.07.33.png","alt":"Captura-de-pantalla-2018-11-05-a-las-10.07.33"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker system prune\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Elimina todos los contenedores parados, las redes sin usar, las imagenes descargadas...."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker stop Id/NameContainer\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Envia la señal "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SIGTERM"}]},{"type":"text","value":" al contenedor para que se apague correctamente cerrando los procesos de la manera correcta."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"kill"}]},{"type":"text","value":" id/NameContainer\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Envía la señal "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SIGKILL"}]},{"type":"text","value":" al contenedor, que lo que hace es cerrar todo en plan guantelete del infinito."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"quehacercuandouncontenedoryaestaarrancadoyquieroejecutaruncomando"},"children":[{"type":"text","value":"Que hacer cuando un contenedor ya esta arrancado y quiero ejecutar un comando?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"docker "},{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"exec"}]},{"type":"text","value":" -it idContainer Comando\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"exec"}]},{"type":"text","value":": Indicamos que ejecute un comando."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"it"}]},{"type":"text","value":": básicamente es que queremos que nos devuelva la consola con el comando que hemos ejecutado. Sin "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"it"}]},{"type":"text","value":" ejecutaría el comando pero no veríamos que pasa."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un ejemplo con un contenedor de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Redis"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-06-a-las-9.14.04.png","alt":"Captura-de-pantalla-2018-11-06-a-las-9.14.04"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vemos que se esta ejecutando"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-06-a-las-9.14.25.png","alt":"Captura-de-pantalla-2018-11-06-a-las-9.14.25"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este estado podemos ejecutar comandos y tomar control de la sesion"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-06-a-las-9.15.05.png","alt":"Captura-de-pantalla-2018-11-06-a-las-9.15.05"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/11/Captura-de-pantalla-2018-11-06-a-las-9.15.31.png","alt":"Captura-de-pantalla-2018-11-06-a-las-9.15.31"},"children":[]}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"comandosbsicos","heading":"Comandos básicos"},{"id":"quehacercuandouncontenedoryaestaarrancadoyquieroejecutaruncomando","heading":"Que hacer cuando un contenedor ya esta arrancado y quiero ejecutar un comando?"}]},"featureImageSharp":{"base":"docker_facebook_share.png","publicURL":"/static/8250fb6cd246dd294ed3fc4d99218f71/docker_facebook_share.png","imageMeta":{"width":336,"height":287},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAADmElEQVQ4y21Ua0wUVxQ+s8PMvbvgo0YlaWP8UZvYGK2JsU39Y2IwNcZWiI+aqt2YIGjLuhRdtYDFBXlUBbQtLnQXV80uuCi0FNvaovFBUdEpxl9qamtTAR8FY+sfKbC3350dwFU3+XJ2zr3nO995zBA989M3N5GeczyGvJ9t+vYfbOo7LmKlBjHvL2Q/LshxQpDuCsfhuZ90sqKLpGdHSN9UH8PWFjOBluEfB7IqtuO00x58RLy6R+EV1214JlZwllj+KdIkcdZTxLr7KPEv/iAtvTr2vOXbMSCcpXu+m6Z/ciyVlXUKVnihOfGsoIlCEK+8QbZFUL7zfIL6roe09TWoqnGUkBWcI1bcQXr+KY1520j3NL/FdnUIVnJlkJUYT1jZrwIqg9zXTfqnJ19in52pSFhe4AAhqam5LyAEGdt1ycZ2thEue1lh+1VWfHnQJCw1BlgpCIsudiFZPdQv4ftvCfhCLK91hZYVcsjK4giRVdE+Oow+hKayogtdrOyqVPcfLzWGoA7oHDRJAQyrin95+z7Khuo2wzbfyW0pGYTWjBLyypsqr7ghSy/nB+4Iu6/7SWJ1dzTBdzfKfN1RHsMQ93X185p7Ancf6+7IQlJ1xRxIdkSJL7nEUHlhOybWuhaBQqn9t598vdG0pj+jkw/9HdX8fVF7oG/AHvxngFf9JXBvG1pEUzAgbIQi1cWXnN2gUJqX6L3cJEdJx63XAr+L5S09Q3MiD4aYvzdqr30o7IFegU0QWJWqpHZBSW1C0V11ilwvuToj+2guJ9bmdW+z+kpuIyW7gzMqf7pm9DzoE+XGQzG+Gor2/dbPyzov69u/f98R6jfj5CC0TH/8YmtYRgk41bE5ESKnn1burpdHygRPw1z34dNLZxe3LCZnzRQyBMmVsh98ZNM+PqJiulAYllAtKwlDcssVaeGYCDuPNh4hWuWjWd5vaNlXP9KkrceIbQq/reU0JWuZteZbZMbFYkYAYcqoIyu8CLYcSJeksE76MEAOd10Kc4VXIOnn8E3H2Zuwk4FVwKvAG0CmPMPK0TDzGtgNQBZw0rqwGvABeVbQXuASgtJg9wMBoA5olSIg6GXzXY7JDq2HU5KmAg1IsBZWKm7AmQc2Gff2WiRS2ddAEMgH9lgVSnHKcC9kUzPgXGe14IOYWrNHS6DKhSQpKFsDFlilbgRmArPhS9SGP2PPftfMFoz8Dz3VcDm8+CFYqqyY2Nn/8hrXL6If80cAAAAASUVORK5CYII=","aspectRatio":1.174496644295302,"src":"/static/8250fb6cd246dd294ed3fc4d99218f71/5742b/docker_facebook_share.png","srcSet":"/static/8250fb6cd246dd294ed3fc4d99218f71/847ef/docker_facebook_share.png 175w,\n/static/8250fb6cd246dd294ed3fc4d99218f71/5742b/docker_facebook_share.png 336w","srcWebp":"/static/8250fb6cd246dd294ed3fc4d99218f71/8cfb4/docker_facebook_share.webp","srcSetWebp":"/static/8250fb6cd246dd294ed3fc4d99218f71/9fca7/docker_facebook_share.webp 175w,\n/static/8250fb6cd246dd294ed3fc4d99218f71/8cfb4/docker_facebook_share.webp 336w","sizes":"(max-width: 336px) 100vw, 336px"}}}},"next":{"id":"Ghost__Post__5a81da9b8cda356bbe9bbe20","title":"jQuery Basics I","slug":"jquery-basics-i","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/jquery-logo.png","excerpt":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una\nmanera dinámica, hacer peticiones, manipular datos..... y de una manera muy\nsencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo\nen varios post.\nPrimero vamos con un ejemplo sencillo\n\nEjemplo de uso básico de jQuery\n\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

\n\n \n\n\n\n\n\n\n\n\nComo véis tenemos un html básico con dos listas, y en ellas cambiamos\nproopiedades, añadimos una clase css en una de las funciones de jQuery y en la\notra le añadimos un estilo de css directamente, esto seria lo mismo que tener un\nhtml de esta forma\n\n\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

\n\n \n\n\n\n\n\n\n\nSi os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente\nen uno la clase y en el otro un estilo de css.\n\nEsperando a que la página esté cargada para ejecutar algo\nAlgunas veces tenemos en distintos lugares ciertas funciones o variables, esto\nnos puede dar problemas en lenguajes como html ya que el lenguaje es\ninterpretado de arriba hacia abajo es posible que estemos ejecutando un cambio\nen un elemento que todavía no ha sido leído por el interprete por lo que el\ncambio no se producirá, para ello jQuery nos proveé de el método ready que nos\npermite esperar hasta que algo haya sido cargado o leído completamente, veamoslo\ncon un ejemplo.\n\nSi nosotros pusieramos los métodos anteriormente mencionados en el header, por\nejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi\nprobarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo\npodríamos hacer de esta forma\n\n\n\n\nMetiendo nuestro código dentro de la función o método anterior, todo se\nejecutará tras la carga de la página o documento completo.\njQuery nos da una forma más corta para hacer lo mismo:\n\n\n\n\nEsto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía\npodemos ahorrarnos algo más:\n\n\n\n\nLas tres son la misma función, solo que como es algo muy habitual de usar, le\nhan dado algo de azúcar sintactico para hacer más cómodo su uso.\n\nTrabajando con selectores y otras cosas\nVamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar\nclases y atributos a elementos del DOM\n\n\n\n\nEsto lo que hace es: primero cambia el atributo src de la imagen, segundo\nelimina la clase img-circle y tercero añade la clase img-thumbnail\n\nEstas son algunas de las cosas más básicas que podemos ir haciendo con jQuery,\niré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente,\nun abrazooorrrr","html":"

Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post.
\nPrimero vamos con un ejemplo sencillo

Ejemplo de uso básico de jQuery

<!DOCTYPE html>\n<html lang="es">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="Content-type" content="text/html">\n    <title>Leccion 01</title>\n    <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul>\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul>\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        jQuery('ul').addClass('textoVerde');\n\n        jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n<script></script>\n\n</html>\n

Como véis tenemos un html básico con dos listas, y en ellas cambiamos proopiedades, añadimos una clase css en una de las funciones de jQuery y en la otra le añadimos un estilo de css directamente, esto seria lo mismo que tener un html de esta forma

<!DOCTYPE html>\n<html lang="es">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="Content-type" content="text/html">\n    <title>Leccion 01</title>\n    <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul class="textoVerde">\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul style="font-weight:bold;">\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        //jQuery('ul').addClass('textoVerde');\n\n        //jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n\n</html>\n

Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.

Esperando a que la página esté cargada para ejecutar algo

Algunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método ready que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo.

Si nosotros pusieramos los métodos anteriormente mencionados en el header, por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma

<script>\n    $(document).ready(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:

<script>\n    $(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Esto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:

<script>\n    $(() => {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.

Trabajando con selectores y otras cosas

Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM

<script>\n\n\t$("img")\n\t\t.attr("src","img/photo2.jpg")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\n

Esto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail

Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr

\n","url":"https://jlgarcia.fulldev.ninja/jquery-basics-i/","canonical_url":null,"uuid":"09e07f3e-e198-4216-b950-9b024c3142e4","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a81da9b8cda356bbe9bbe20","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"

Ejemplo de uso básico de jQuery

<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html\">\n    <title>Leccion 01</title>\n    <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul>\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul>\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        jQuery('ul').addClass('textoVerde');\n\n        jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n<script></script>\n\n</html>\n

<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html\">\n    <title>Leccion 01</title>\n    <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul class=\"textoVerde\">\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul style=\"font-weight:bold;\">\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        //jQuery('ul').addClass('textoVerde');\n\n        //jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n\n</html>\n

Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.

Esperando a que la página esté cargada para ejecutar algo

<script>\n    $(document).ready(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:

<script>\n    $(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Esto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:

<script>\n    $(() => {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.

Trabajando con selectores y otras cosas

Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM

<script>\n\n\t$(\"img\")\n\t\t.attr(\"src\",\"img/photo2.jpg\")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\n

Esto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail

Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr

\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPrimero vamos con un ejemplo sencillo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"ejemplodeusobsicodejquery"},"children":[{"type":"text","value":"Ejemplo de uso básico de jQuery"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

\n\n \n\n\n\n\n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis tenemos un html básico con dos listas, y en ellas cambiamos proopiedades, añadimos una clase css en una de las funciones de jQuery y en la otra le añadimos un estilo de css directamente, esto seria lo mismo que tener un html de esta forma"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

\n\n \n\n\n\n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"esperandoaquelapginaestcargadaparaejecutaralgo"},"children":[{"type":"text","value":"Esperando a que la página esté cargada para ejecutar algo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Algunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ready"}]},{"type":"text","value":" que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si nosotros pusieramos los métodos anteriormente mencionados en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"header"}]},{"type":"text","value":", por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"documento"}]},{"type":"text","value":" completo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\njQuery nos da una forma más corta para hacer lo mismo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es lo mismo que lo anterior, y si pensamos en las "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"arrow functions"}]},{"type":"text","value":" todavía podemos ahorrarnos algo más:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"azúcar sintactico"}]},{"type":"text","value":" para hacer más cómodo su uso."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"trabajandoconselectoresyotrascosas"},"children":[{"type":"text","value":"Trabajando con selectores y otras cosas"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto lo que hace es: primero cambia el atributo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" de la imagen, segundo elimina la clase "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"img-circle"}]},{"type":"text","value":" y tercero añade la clase "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"img-thumbnail"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"ejemplodeusobsicodejquery","heading":"Ejemplo de uso básico de jQuery"},{"id":"esperandoaquelapginaestcargadaparaejecutaralgo","heading":"Esperando a que la página esté cargada para ejecutar algo","items":[{"id":"trabajandoconselectoresyotrascosas","heading":"Trabajando con selectores y otras cosas"}]}]},"featureImageSharp":{"base":"jquery-logo.png","publicURL":"/static/d41803bc36890b1c71051dc26c29c3ea/jquery-logo.png","imageMeta":{"width":665,"height":405},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwklEQVQoz2MQVjYkGzFgFRVRMRJVNSZOs4oRCCkbQYTE1Iz55XW5pLWA+iGmiAGRmrEolDQCCgopGcA0A1lK+iBSGSTKIamhZGhv4ugH1M8np8Mrp8MlrckuocYjq80qpsonr8srqy0CsgyoWclASM1UwMBZSNuaX05HxdghJD5r2tzFK9Zuzi6ptXALdPCJ8I9KzStvtPMOr2npNXLwySiqDoxJ55TUYAA6mNcjDYgE3JPYZfUiErMvXr4Wn1kcnpR7+tzlgqrmJavWX7p6Y+vu/Zu276lp69tz4OiUOYuAXgC6kUFEXofHJ4cruonPO4tLwXDyjPn17f1ADRs2b+/tn7pqzYbuvsmbN2/r7J3c1jlBXtN05uyFhvbenFKaQP0MYK8aCtiFs2s7WHsEz1uySkBRX0nfWt3Oj986WNEnWdAmWNw2WM0rQdQ6UMgmWNjcR1DRAOZnSNzIaQrJaUtpmYurmwgpGQJDm0fZRMDInUfHQcDQhV/fhUfLTkDfCSgioOcoAosXWDyrGAORoKI+0CdAU0ExpGwgqqAjqqgnoqArqqgLYijqAv0IZOBMJBD3wEwExz/IXCMUNv4URiQCANQ+lfCXnaknAAAAAElFTkSuQmCC","aspectRatio":1.6355140186915889,"src":"/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo.png","srcSet":"/static/d41803bc36890b1c71051dc26c29c3ea/847ef/jquery-logo.png 175w,\n/static/d41803bc36890b1c71051dc26c29c3ea/91cba/jquery-logo.png 350w,\n/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo.png 665w","srcWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo.webp","srcSetWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/9fca7/jquery-logo.webp 175w,\n/static/d41803bc36890b1c71051dc26c29c3ea/37a4e/jquery-logo.webp 350w,\n/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo.webp 665w","sizes":"(max-width: 665px) 100vw, 665px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5a81da9b8cda356bbe9bbe20","title":"jQuery Basics I","slug":"jquery-basics-i","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/jquery-logo.png","excerpt":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una\nmanera dinámica, hacer peticiones, manipular datos..... y de una manera muy\nsencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo\nen varios post.\nPrimero vamos con un ejemplo sencillo\n\nEjemplo de uso básico de jQuery\n\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

Ejemplo de uso básico de jQuery

<!DOCTYPE html>\n<html lang="es">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="Content-type" content="text/html">\n    <title>Leccion 01</title>\n    <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul>\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul>\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        jQuery('ul').addClass('textoVerde');\n\n        jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n<script></script>\n\n</html>\n

<!DOCTYPE html>\n<html lang="es">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="Content-type" content="text/html">\n    <title>Leccion 01</title>\n    <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul class="textoVerde">\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul style="font-weight:bold;">\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        //jQuery('ul').addClass('textoVerde');\n\n        //jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n\n</html>\n

Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.

Esperando a que la página esté cargada para ejecutar algo

<script>\n    $(document).ready(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:

<script>\n    $(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Esto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:

<script>\n    $(() => {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.

Trabajando con selectores y otras cosas

Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM

<script>\n\n\t$("img")\n\t\t.attr("src","img/photo2.jpg")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\n

Esto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail

Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr

Ejemplo de uso básico de jQuery

<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html\">\n    <title>Leccion 01</title>\n    <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul>\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul>\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        jQuery('ul').addClass('textoVerde');\n\n        jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n<script></script>\n\n</html>\n

<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html\">\n    <title>Leccion 01</title>\n    <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n    .textoVerde {\n        color: green;\n    }\n</style>\n\n<body>\n\n    <ul class=\"textoVerde\">\n        <li>Hola 1</li>\n        <li>Hola 2</li>\n        <li>Hola 3</li>\n    </ul>\n\n    <ul style=\"font-weight:bold;\">\n            <li>Negrita</li>\n            <li>Negrita 2</li>\n            <li>Negrita 3</li>\n        </ul>\n\n    <script>\n        //jQuery('ul').addClass('textoVerde');\n\n        //jQuery('ul').css('font-weight','bold')\n    </script>\n\n\n</body>\n\n</html>\n

Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.

Esperando a que la página esté cargada para ejecutar algo

<script>\n    $(document).ready(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:

<script>\n    $(function() {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Esto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:

<script>\n    $(() => {\n        $('ul').addClass('textoVerde');\n        $('ul').css('font-weight','bold')\n    });\n</script>\n

Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.

Trabajando con selectores y otras cosas

Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM

<script>\n\n\t$(\"img\")\n\t\t.attr(\"src\",\"img/photo2.jpg\")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\n

Esto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail

Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr

\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPrimero vamos con un ejemplo sencillo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"ejemplodeusobsicodejquery"},"children":[{"type":"text","value":"Ejemplo de uso básico de jQuery"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n\n \n \n Leccion 01\n \n\n\n\n\n\n

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

Hola 1
Hola 2
Hola 3

\n\n

Negrita
Negrita 2
Negrita 3

\n\n \n\n\n\n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"esperandoaquelapginaestcargadaparaejecutaralgo"},"children":[{"type":"text","value":"Esperando a que la página esté cargada para ejecutar algo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Algunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ready"}]},{"type":"text","value":" que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si nosotros pusieramos los métodos anteriormente mencionados en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"header"}]},{"type":"text","value":", por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"documento"}]},{"type":"text","value":" completo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\njQuery nos da una forma más corta para hacer lo mismo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es lo mismo que lo anterior, y si pensamos en las "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"arrow functions"}]},{"type":"text","value":" todavía podemos ahorrarnos algo más:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"azúcar sintactico"}]},{"type":"text","value":" para hacer más cómodo su uso."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"trabajandoconselectoresyotrascosas"},"children":[{"type":"text","value":"Trabajando con selectores y otras cosas"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto lo que hace es: primero cambia el atributo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" de la imagen, segundo elimina la clase "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"img-circle"}]},{"type":"text","value":" y tercero añade la clase "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"img-thumbnail"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"ejemplodeusobsicodejquery","heading":"Ejemplo de uso básico de jQuery"},{"id":"esperandoaquelapginaestcargadaparaejecutaralgo","heading":"Esperando a que la página esté cargada para ejecutar algo","items":[{"id":"trabajandoconselectoresyotrascosas","heading":"Trabajando con selectores y otras cosas"}]}]},"featureImageSharp":{"base":"jquery-logo.png","publicURL":"/static/d41803bc36890b1c71051dc26c29c3ea/jquery-logo.png","imageMeta":{"width":665,"height":405},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwklEQVQoz2MQVjYkGzFgFRVRMRJVNSZOs4oRCCkbQYTE1Iz55XW5pLWA+iGmiAGRmrEolDQCCgopGcA0A1lK+iBSGSTKIamhZGhv4ugH1M8np8Mrp8MlrckuocYjq80qpsonr8srqy0CsgyoWclASM1UwMBZSNuaX05HxdghJD5r2tzFK9Zuzi6ptXALdPCJ8I9KzStvtPMOr2npNXLwySiqDoxJ55TUYAA6mNcjDYgE3JPYZfUiErMvXr4Wn1kcnpR7+tzlgqrmJavWX7p6Y+vu/Zu276lp69tz4OiUOYuAXgC6kUFEXofHJ4cruonPO4tLwXDyjPn17f1ADRs2b+/tn7pqzYbuvsmbN2/r7J3c1jlBXtN05uyFhvbenFKaQP0MYK8aCtiFs2s7WHsEz1uySkBRX0nfWt3Oj986WNEnWdAmWNw2WM0rQdQ6UMgmWNjcR1DRAOZnSNzIaQrJaUtpmYurmwgpGQJDm0fZRMDInUfHQcDQhV/fhUfLTkDfCSgioOcoAosXWDyrGAORoKI+0CdAU0ExpGwgqqAjqqgnoqArqqgLYijqAv0IZOBMJBD3wEwExz/IXCMUNv4URiQCANQ+lfCXnaknAAAAAElFTkSuQmCC","aspectRatio":1.6355140186915889,"src":"/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo.png","srcSet":"/static/d41803bc36890b1c71051dc26c29c3ea/847ef/jquery-logo.png 175w,\n/static/d41803bc36890b1c71051dc26c29c3ea/91cba/jquery-logo.png 350w,\n/static/d41803bc36890b1c71051dc26c29c3ea/d5882/jquery-logo.png 665w","srcWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo.webp","srcSetWebp":"/static/d41803bc36890b1c71051dc26c29c3ea/9fca7/jquery-logo.webp 175w,\n/static/d41803bc36890b1c71051dc26c29c3ea/37a4e/jquery-logo.webp 350w,\n/static/d41803bc36890b1c71051dc26c29c3ea/20521/jquery-logo.webp 665w","sizes":"(max-width: 665px) 100vw, 665px"}}}}}]}},"pageContext":{"slug":"jquery-slideshow","prev":"docker-basics-i","next":"jquery-basics-i","tag":"jquery","limit":3,"skip":0,"primaryTagCount":2,"collectionPaths":{}}}, "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}