Curso Javascript y jQuery en Dreamweaver

vamos a hablar de javascript java es un lenguaje de programación en contra de lo que hemos aprendido el estrés que no es lenguaje de programación es un lenguaje de marcar cuál es la diferencia de un lenguaje de programación a un lenguaje de marcado te voy a decir a parece un poco tonta pero es mucho más allá de lo que parece y es que en un lenguaje de programación nosotros vendemos unos datos trabajamos los datos lo tenemos un resultado con html no podemos trabajar los datos no podemos realizar operaciones y con javascript sin contar con el hamas estamos hablando un lenguaje de programación pero más importante es que el rol de un lenguaje dinámico dinámico quiere decir que van a responder acciones que van a hacer cosas cuando tú le digas que hará cosas no está riesgo es el control de la web es fuertemente estático no permite tener comportamientos dinámicos al valor de cositas de css pero no la norma por tanto existen para los lenguajes donde el lenguaje que más se ha extendido como el lenguaje habiendo mejorado en siguientes si quieres venir es un lenguaje dinámico del lado del cliente no del lado del servidor al final haverhill se lleva muy bien con el lenguaje php hamás y trabaja en el cliente php trabajando exterior qué quiere decir esto tienes impartidas cosas implica varias cosas primer lugar trabajas con javascript todo el código javascript que tenga la página se baja a tu ordenador y se ejecuta en tu ordenador eso quiere decir que gasta recursos del ordenador y también que decirte cómo se basa en su ordenador cualquiera lo puede interceptar y lo pueden entrecomillar estírate ar evidentemente hay trucos para esconder tu correo jamás escrita de la gente un tropo de habilidades también quiere decir que tú mismo vas a poder entrar en el mayan webs a la hora de inspiración al conjunta y al estrés además más grande del lenguaje [Música] muy bien hp y permite también información es un momento pero que muchas veces aparece insertarlo dentro de una por eso voy a crear una página está voy a cerrar esto y voy a hacer un documento nuevo y así poder elegir quiero trabajar con html5 y no comienza este mes con eso les voy a crear método la vista del editor y voy a decirte las cosas lo primero que te voy a decir es que el código javascript que pongas en tu página web puede estar tanto en la cabeza como en el cuerpo aunque de manera general suele estar en la cabeza para trabajar con con javascript primero hay que introducir una etiqueta script a la cual le debemos que sea de tipo texto barra javascript a día de hoy prácticamente todos los navegadores del mercado soportan la base sin embargo sin embargo hay una etiqueta llamada nos fit la etiqueta me gusta sólo aparece en aquellos navegadores por qué no [Música] no soporta javascript por tanto probablemente [Música] falta actualizado si un navegador soporta javascript novell novedad este este mensaje de su navegador no soporta sabes qué una cosa que te voy a contar es un truco llega fuerte con truco y es que el eje que ponéis un comentario por aquí y un comentario por aquí dentro meter el código javascript por qué pues porque en un navegador que no soporta javascript el código java si la gomita como si fueran 30 meses en medio de la pantalla pero si yo le pongo un código no tiene hacer es que si se ejecuta como java pasado y no se ve porque esto no es así pero es un truco para viejos vamos a empezar por lo tanto con javascript y vamos a ver las dos instrucciones más comunes en house que una de ellas es la ribera con la que siempre sentirá cuando javascript que por cierto es la más molesta la instrucción llamada alerta y la sintaxis es la siguiente a leer para crisis y dentro del paréntesis entre comillas pones el mensaje que se va a mostrar si yo ahora veo la página verdes quiero mirar al estar vivo pero sin ponga este mismo para hacer oro es decir aparece vamos a encontrarnos las voy a guardar en el escritorio es quitarlo como jugarse por qué por qué es una página cuando escribe a continuación por cierto que el código para bloquear existe código para comentar es doble bien barra asterisco hasta el disco barra para cerrar argumentales a continuación lo que voy a hacer es los dos juntos blanco el país y escribí un texto hola cuál es el resultado de esto el resultado es si estamos en vivos es holanda pantalla ahora básicamente es que él está aquí está vacío pero hay un código de javascript ves al documento y escribe la palabra bola así que que ha hecho ir al documento y escribir la palabra hola así que está aquí sólo la más voy a demostrar que una cosa y es que se llama document write tres másters no vengo aquí el recargo es a veces qué pasaba hasta ahora en el 33 bueno y aquí voy en html 13 + 3 si ahora vamos a saber tres más tres porque porque el lenguaje de marca renault de programación html no puede calcular a javascript por eso si lo que quiero no es que vemos la pantalla de leds más resignación o calcular realmente documentos bytes y le pongo un 3 + 3 y esa pequeña tontería es lo que marca la diferencia entre un lenguaje de programación y lenguaje de marcado 7 fijas yo ahí lo que hace es cumplir la definición de una nueva de producción un lenguaje donde entran unos datos 3 no es 3 se realiza una operación la que sea y se devuelve un resultado pues vamos a continuar con el lenguaje una de las cosas más interesantes que tienen los lenguajes de programación y hamás que evidentemente es uno de ellos son las variables las variables son contenedores de información para declarar las variables tenemos que hacer algo tan sencillo como lo siguiente [Música] y voy a escribir la palabra la palabra reservada para un poco [Música] me dijo generar variables solo la palabra por tanto va por los errores además curiosamente no es comparativo que voy a trabajar con una variedad a continuación indicó el nombre de la mañana primera mariam no hay menores detalles yo puedo crear una variable primera realidad de notable valor [Música] el valor más adelante o bien 3 aunque estoy haciendo por tanto es asignar un valor al mismo tiempo pero la variable y por tanto a partir de ahora siempre viene de llegar al programa hoyer dime quién es primera variable el programa me dirá estrés y si yo lo dijera 66 de lo que estoy haciendo es usar un contenedor y decirles primera variable equivale a 6 no es correcto no se debe hacer poner que una variable será igual a un texto sin comillas porque entonces el programa directamente relacionado javascript en este sentido es muy poco amigable cuando haces algo más que difícil es hecho a mano y te dice que tienes que hacer para solucionarlo sino que simplemente no funciona que he hecho mal en este caso cuando yo escribo un número lo puedo escribir sin comillas pero cuando yo escribo en letras las tengo que poner con comillas se haga por esto ahora veréis que el lado de la pantalla es pueblo por tanto es mayores números con comillas o sin comillas pero textos sin escribir con comillas yo me pongo una variable de la mano segunda variable ese mal amigo por tanto al área de operadores le puedo decir document.write primera variable a la segunda vaya [Música] el resultado es diferente 2018 porque lo que ha hecho cuando el cálculo primera manera vez más una variable es realmente calcular 3 + 5 a continuación viene una tarde fácil que son los operadores estos de javascript las palabras de troles a las que son prácticamente iguales a cualquier lenguaje de programación por tanto el primer operador realmente ya lo has visto es el operador aritmético de surf el operario de médicos a través de mis médicos nos permite realizar operaciones militares con los operados es por tanto si yo quiero hacer una suma simplemente tengo que poner por ejemplo 8 más 3 y el resultado de la pantalla evidentemente es el gran forma quiero decir que estamos aquí que a diferencia de otros lengua de signos es a la vez [Música] qué bueno si yo le pongo por ejemplo aquí entre comillas esas artes porque son letras hola y en lugar de tres pongo un mundo [Música] por qué pero que era cuando nuestras letras en las nosotros obtener fuman sino que se produce un entrenamiento y el encadenamiento básicamente es que detrás de hollande con edmundo por tanto por ejemplo un encantamiento es el punto más los operadores de encadenamiento con los rovers aritméticos cuando energías por tanto te puedes imaginar básicamente que el operador de resta es el sr 8 – 35 el operador de méxico de multiplicación es el asterisco 8 asterisco 3 el simulador 24 el operador de división es la barra que está en mayúsculas 7 evidentemente 8 partido 32.6 pero hay una muy divertido que es el módulo el módulo el resto de la división 8 porcentaje 3 me da 2 que quiere decir 2 pues que 8 cabe a 3 a 2 y me sobran dos centros es lo que mejor de la revisión más cosas más cosas a partir de aquí por ejemplo tenemos los incrementos y los incrementos y hacer una variable que se llame bar unidad es igual a 3 que es un incremento pues por ejemplo si yo tengo mi bar que crees que me volví está en la pantalla 3 pero siempre van más más me va en vez de volver ahora a la pantalla más más equivale a aumentar un valor por tanto señora le digo que poner en pantalla 4 por qué pues porque es 3 pero yo he dicho un valor [Música] otra cosa que puedo hacer esto de aquí se llama tres incrementos otra cosa que puedo hacer es un post incremento si yo tengo un post incremento el valor de estrés es un poco lioso porque yo ahora mismo confiamos pero quiero recuperar mi baja 4 porque bueno porque aquí he puesto un post incremento este incremento que primero me dará el área y después de dármelo le suman parado por eso cuando llega aquí cuánto vale me va 73 porque primero este domingo y luego se sumó 4 [Música] este más más es el grado de incremento luego está el menos menos – incremento de incremento del estrés y le pongo directamente a nuestros puestos porque 3 necesitados en lugar de un pre incremento pongo un pre de incremento con grupos de incremento lo siento 3,3 de arroz en el 33 y la siguiente una cosa y ahora ver cosa muy interesante vamos a ver los obradores aritméticos resumidos entonces claro si de un lugar es un valor le quiero sumar 2 le pongo más para sumarle un valor y más más paso más renovador no es decir que tengo una prótesis y taxis y limpiador para esto no se hace así sino que hay dos maneras de hacerlo la enorme subida y el resumido la más recomendada sería decir que mi bar es igual a mirar más 2 cuanto vale ahora mira vale 5 directamente porque me va a grabar en mi bar tres más dos no vale cinco directamente el resto de pantalla explicó esta es la extendida no forzarlo fíjate que tengo que escribir 2 metros es una manera de hacer la ruta más difícil tres más resumidas de escribirlo es más igual 2 poner más llevar dos equipos de otra organizada decir 5 porque básicamente equivale a decir y privada es igual a mil almas 2 de la misma manera que existe un operador resumido para sumar también existe un operador resumido para restar evidentemente no existe un operador resumido para la multiplicación y existe un operador resumido para división vamos a cantar ahora con los otros reyes lógicos y vamos a empezar con los operadores lógicos más sencillos que son los operadores lógicos de igualdad y hasta ahora falta para este ejemplo en la pantalla fíjate que yo voy a poner 3 es igual a 4 cuando tenía una variable y decía mira creo que tendré que gracias igual a 3 en la vida no me deja perfectamente bueno para uno es correcto no es igual a tres barrios es igual a tres uno es igual a dos y el resultado es 3 bueno porque lo que está haciendo es básicamente validarlo en la pantalla pero es que no es cierto que sea igual a 2 estás era uno de los tres es igual al revés así que es cierto que creces igual haces si luego en la pantalla el programa me indica [Música] es cierto que 3 es igual a 4 luego el programa de campos estas son las valoraciones de verdaderos pasos elecciones lógicas más sencillas presentas más es cierto que 3 es menor que 4 el tiempo es cierto que 3 es mayor que 4 espalda es cierto en tres es mayor entre los dos en taxis es cierto que 3 es mayor o igual que 4 no es ni mayor ni igual pero por ejemplo es cierto que 5 es mayor de 44 en este caso estruch no es igual pero es mayor lo que estamos haciendo por tanto mediante estas comparaciones es comparar la veracidad de los dos elementos que se están formando entre sí y se están comparando mediante este operador de igualdad mayor o de menor pero ante esto tenemos por los operadores lógicos en varias cosas para que me puede servir para mí este este operador que están usando lógico pues por ejemplo esto podría ser un año 2009 2012 y vimos sólo quiero ver aquellos artículos de un blog cuyo año sea mayor o igual a 2012 cuáles resultados fueron en ningún artículo pero si el artículo opuesto en 2013 me tira a este sitio pero vuestro preocupen las condiciones vamos a estar validando las interfaz de estructuras de control todo el rato la tercera o la falsedad de algunas estimaciones en programación y eso ayudará a que el programa todavía de decisiones en base a las respuestas a estas preguntas más cosas vamos a hablar ahora de las operaciones lógicas compuestas yo te digo es cierto que 3 es igual a 3 y 5 592 la persona se saca con mayúsculas 6 te digo es cierto esto y es cierto esto el resultado es sí y también es cierto que 8 es igual a 8 el resultado es sí pero el año que viene es cierto que tres es igual a tres y es cierto que cinco y semana cinco y es cierto que el consejo para 9 el responsable de vender estos porque aunque estas dos son verdaderas la tercera es falsa posterior de dicho y es cierto que esa y ésta y ésta más felices y la respuesta es no este es el operador del hambre el numerador me y pero luego tenemos el operador de oro reparador de horas o la decisión de sacar porque se saca con la letra al tecla al ángel y con esta tecla número uno me sentí una barra vertical que no es admiración es salvar a vertical sacan conexión y con el número uno el operador oro es como decir en castellano o pregunto es cierto que esto es verdadero o que esto es verdadero o que esto es verdadero es cierto por uno o por otro en este caso el resultado es cierto es cierto estrés es igual a 3 o 5 s para 6 859 en los grados es cierto que 3 4 5 6 9 ya no hay ninguna condición de certeza por eso los operadores compuestos se diferencian que el pan con el ordenador tiene que ser todo verdadero para que el compuesto de medio pero con uno que sea falso ya nada más en cambio con el operador por dos barras verticales tiene que haber al menos uno que sea cierto para reformar de cierto y si todos son pasos en este caso nuestro de uno más bajas vamos a hablar a continuación de estructuras de control donde la estructura de control lo que vamos a hacer es hacer que el programa realice acciones novedad más o menos automatizada la de controles voy a ver nos da más útil pero la más divertida esa estructura de control foro la estructura de control del foro repite una canción una serie de veces nuestro actual de control y forma tiene la siguiente estructura forma inicio sin nada incremente y aquí dentro realizará una nación [Música] cuál es el inicio por ejemplo crea una variable que se llama allí que empieza siendo igual ahora es más bien el día del mes deshaciendo igualador final ya el mes es menor que entre menos incremento un día del mes más más qué quiere decir esto lo que quiere decir esto es que el diestro cree alguna variable que va a verlo y le digo vas a ejecutar este bucle hasta que vienes meses severos y cada vez que pasas por allí le sumará un valor la primera de este caso por aquí cuánto vale una suma un valor que pasa por aquí 2 2 – es cierto sí cuanto más 3 es cierto que 3 es menor que terceros si por otra vez hasta que llegará un momento en el que sea igual a 32 cuando ésta sea falsa entonces yo aquí voy a poner documentó puntos mares hola más y ahora puntos cerramos y nos dice hola hola hola hola repite tres veces y cuando llega a 10 32 nos dice se acabó sólo cuando ha repetido esto 31 veces es 4 ejecuta sale de este bucle y ejecuta esta instrucción se acabó que nos permite esto bueno pues aquí es donde vamos a empezar a ver la utilidad de así [Música] los 30 días de un mes impresionantes sin embargo yo vengo aquí vivo hoy es el día más días del mes del mes a ver vamos a ver qué dice recargo y hoy es el día 1 del mes hoy es el día 23 hoy es sencilla el presente es hasta 31 por qué pues porque hoy es el día más la variable del día del mes lo que vale en cada momento del mes desde aquí esto es estático pero esto es dinámico esto cambia según la programación lo que he hecho con esta simple línea es ahorrar es tener que escribir 31 casillas dentro de edad pero es que te digo más tenemos más lo que voy a hacer ahora es hacer un vídeo ivette asilo y y ahora digo está bien quiero poner un estilo de acuerdo ante ese un estilo donde el will sea cuesta píxeles sea de 50 píxeles y el borde sea de pixel sólido resultado en pantalla 50 veces y además pasando lo que dijo quiero que exploten en tierra me acabo de hacer un calendario me acabo de hacer un calendario de la verdad tan sencilla como que de 1 a 31 cada vez que pasa por aquí me hace una casilla y por tanto me ahorrado tener que escribir yo manualmente 31 casillas directamente en el código java me gustó calcular cada una que disponen cada una de estas casillas más no se acabó ya por año tenemos que alcanzar pero sin embargo si un calendario un poco la bestia porque son todos los días uno detrás de otro entonces cada siete días de todo cómo hacer que ese color rojo los festivos de color rojo así que te recuerdo es cierto que cada siete días tiene que bajar abajo así pues en ese caso vamos a programar algo que nos permita mediante el verdadero o falso elegir cuándo vamos a bajar de idioma cuando nos ha dejado hay una estructura de control que hacer lo siguiente hubiese un poco de hueco y voy a estar con ella por aquí aquí voy a insertar una estructura de control llamada si la condición es cierta entonces ejecutará este código y si es falsa entonces ejecutarán este otro código la condición es una expresión que nosotros mismos vamos a crear para el uso así que qué días en este calendario son los días domingo pues por ejemplo el 7 evidentemente de 14 evidentemente el 21 todas ellas así que digo sí enviar al mes es igual y siempre o bien es cierto qué bien del mes es igual a 14 o bien es cierto que día del mes es igual a 21 o bien es cierto que día del mes es igual a 28 en este caso se ejecuta y este color rayos y voy a poner por ejemplo esto y salen click tres puntos el truco es asegurarte que dejar de explotar sí no [Música] el resultado en pantalla es que lo que estamos haciendo es que cada siete días se ejecuta este código y las letras al embajada libia si el código del vídeo del mes es igual a que todos están atrás si es meses 21 621 atrás a veces este código [Música] esta es la más importante de todas porque es la que te permite tomar decisiones pero con dibujas un calendario en el convoy [Música] tú estás tomando estas decisiones mentalmente este día del domingo es más [Música] de lo mismo estamos actuando de la misma manera que tiene toda persona pero pensando a través del ordenador y por último lo que teníamos hacer es el siguiente ahora si bien el mes es igual que te diría yo a 7 vamos a todos los lugares sí también me explicara sería en el mes no es igual a 7 en programación prácticamente en cualquier lenguaje de programación no equivale a poner una nominación por tanto admiración igual quiere decir no es igual allí muy bien si el día del mes no es llegó a la asistencia igual a 14 venció para vestir un lienzo para todo esto en ese caso me pones este vídeo pero si es cierto entonces pues no existe vivo julio baccaro es rojo qué hace esto lo que estamos haciendo es decirle el día del mes no es igual la gente no es igual a 14 no es su cara 21 no es lo mínimo en definitiva pues pueden poner un día cuyo fondo sea transparente pero el día del mes es 7 6 14 21 28 pues pongo un día que tenga el fondo rojo y ya que te pones haz que la línea de salte hacia abajo con este pequeño código de programación en el que si te fijas lo que hemos hecho es usar aritméticos es usar lógicos y es usar dos estructuras de control hemos hecho algo práctico como en este caso es un calendario el calendario podría así pero ha sido complejo se estrena yo quiero es ir cumpliendo en esa complejidad no sea evitarlo el tener que hacer manualmente 31 filas y tener que ir diciendo que una una sea roja para qué nos sirve por tanto en lengua dari fernanda ción de cuerda de programación en gran medida nos sirve para automatizar el programa las cosas por los problemas es como si permite ponerte un ejemplo muy hispano es como si dijera oye [Música] porque mientras esté solo pero el problema es periodista en el otro lado vale y hay veces que estoy me cuesta más diseñar un robot o limpiar el suelo de la respuesta a esta pregunta es la siguiente pues todo depende porque si los robots es de actuar tu vida se robo por lo que sea es una traba tu vida es cierto que diseñar el robot te costará bastante más clic en el juego pero oye una vez lo tengas ya lo tienes es para siempre vale por tanto con programación en casa igual en este caso tú dirás fuera nos verán costado menos hacer en html cultural calendario porque aquí hemos tenido que pensar y qué perfil y 721 hemos tenido que pensamos pero a cambio en unas pocas de ellas ya tenemos un calendario y sabes que te digo más adelante viene a una solución permíteme hacerlo desde que respetan pero permiten asumir que todos los meses del año [Música] insertando [Música] voy a tener unos 500 metros x va mes empieza siendo igual alguno hasta que sea menor a 13 es más más y aquí me pongo un golpe que sólo por poner esa línea automáticamente tengo un calendario de 12 meses esto es lo que tienes jamás cuanto más código escribes más dispuesto a horas que he hecho pues todo esto lo he metido en un súper boom pero esto va a repetir 12 meses una vez para cada vez para cada mes [Música] a un mes estábamos planteando igual que hacer cómo sería el código de ambiente para hacer con el calendario de tucumán con una de las contras cuando más conmigo escribes más tiempo [Música] tengamos por tanto a ver más estructuras de control ya hemos visto todos que una vez el bucles por que repiten cosas y otra vez el bucle y que toma de decisiones en planta de hojas voy a hacer mañana más voy a guardar y podría crear una región nuevo de html5 y te voy a llamar pues no quiere ser me pongo de tipo texto javascript y si realmente otros móviles de control que quiero usar que quiero decir es decir wire el bucle wire es parecido al verbo no seis núcleos switch no tienen contra el switch el bucle de control y si es un bucle que al final distingue entre verdadero o falso nuestra mente humana si quieres a veces es un poquito nomás pero es un poquito más inteligente que el buque porque yo cuando me levanto por la mañana no digo este lunes preguntas que tienen respuesta para eso precisamente está el bucle 6 por tanto yo digo días de la semana recuerda que esto quiere decir que acabó de crear una variable que se llama ya digo switch una expresión qué manera y tengo una serie de casos en caso de que sea por ejemplo pero si queréis lunes escribir ahora vamos allá en lugar de espesor evidentemente marcará este día de la semana en caso de que sea lunes dos jóvenes juntos right e hoy de su familia en caso de poner sagrado para que veas siempre derecha en caso de que sea martes ya que la veloz el calor para que la misma voy a más casos con [Música] tengo tiempos cuerpos ya estábamos a mitad ya no queda nada voy a crear tres días más evidentemente en case viernes cómo comicios si no fuera porque todo el mundo más risas todo sería genial sábado el mejor día cuidado con las joyas y lo mismo [Música] la reducción de verdadero o falso si no es la cuestión de un día del día de la semana por ejemplo es igual pasado si yo ejecuto esto me dice nada y si me dice nada pero sabe que he cometido un error switch día de la semana vamos a poner punto 5 menos y luego voy a activar [Música] esa mano es el día de la semana 6 lunes estamos en el lunes 6 martes el sábado 6 miércoles no deseado que el sábado así que este es el mejor día en ese caso el hijo está por ejemplo el miércoles miércoles 27 y los diferentes con un razón switch simplemente construir uno llamado una cosa que tenemos que decir y así cada vez que haga son casos suites le tienes que poner el break después de cada casa porque sólo algo que no suele entender y yo tampoco funciona así y es que si yo por ejemplo dijera que es lunes no pusiera break ha sido el mismo que es lunes tengo que hoy es un mal día y break como diciendo ya estás al sale de este bucle y continuar haciendo cosas porque porque si no le pongo cree que ejecuta el lunes a las que luego ejecuta el martes el miércoles el jueves y el viernes santo es capaz de ejecutar esto y salir y final por tanto los breaks son necesarios en cada uno de los casos para que todo termine el resultado de ese caso se salga y se vayan a otras cosas perder ahora los bucles de control los bucles también toma las decisiones con respecto a con respecto al móvil héctor para ser útil por mí me gusta mucho porque el núcleo ford tiene en sí mismo las condiciones de inicio de palabra y de incremento dentro de los paréntesis el booker wine es como un bucle por recortarlos en el sentido de trabajar el tipo texto de javascript y empezamos a llamar para voy a crear la variable por ejemplo adiós porque estaba muy mal y digo while mientras mis años sea menor que 34 en ese caso documento quinto uruguay el joven años igual a 30 por ejemplo que crees que va a pasar qué crees que hará este código de programación va a entrar en un bucle por qué porque años igual aprenda es cierto tiene cuatro de cuatro eres joven que vuelve a empezar es cierto que los resguardos de cuatro es menor de 24 eres joven es cierto pero 34 eres joven estoy repitiendo esto de manera infinita y no le estoy dando opción a que finalice de acuerdo aquí decirle esto es una condición de inicio empieza siendo 1 esta es una condición del final siempre que sea menor 34 se ejecutan dolo pero no tengo una protección preparada por tanto se hará guardo esto no va lado como el escritorio como js 3 y lo ejecutó vista previa del navegador esto como verás entramos en bucles y es como nunca para ver como aquí siempre está cargando encargado de cargando y aquí nunca dice que ha parado además probablemente dentro de unos segundos el propio safari o se abra este script está tardando demasiado en responder lo voy a parar porque porque ha entrado en un bucle existe los lugares y no es que nos guste para ciertas aplicaciones necesitaremos bucle sin fin por ejemplo una aplicación de correo electrónico tiene un buque ese fin y es que siempre que estés en aplicación de correo electrónico cada cinco segundos te creas es correr luego eso nunca para ti es para siempre pero tenemos que tener cuidado porque hay ciertos móviles sin fin que nos pueden colgar los trabajadores referente avanza nos muestran en pantalla ni siquiera llega a demostrar que eres joven sino que simplemente está colgado bien no voy a parar y básicamente lo que voy a decir aquí es lo siguiente adiós más cuando eres joven pero luego sumar un valor cuanto vale ahora uno no hará valer porque es cierto que los verdes de cuadros y vale suman un valor tres ya momento es que el valor superará al cen de cuatro llegan el juego en vivo las tres jóvenes suelen es joven hasta tres de cuatro veces por tanto que estén muy bien varios el bucle en wilde podríamos decir la manera un poco resumida que es muy parecido en bucles por con la diferencia de que el núcleo foro tiene incluido el inicio la parada y el incremento sin embargo el rugbier while sólo tiene incluida la parada y hay que incluir el inicio y el incremento aparte o bien fuera o bien dentro del correo ahora nieve a continuación vamos a ver el bucle uruguay el núcleo de uruguay es muy grande eso mira si yo digo años es igual a 35 cuántas plantas de estrés se va a hacer para este bucle ninguno por qué por qué año se guardó amplificó es cierto que años 35 es menor de 34 no es cierto pues no no la van a ejecutar ninguna vez sin embargo hay un bucle es para deciros el primo hermano del guardia que es el uruguayo el rebaño no document.write eres joven baile pero ya ves documental eres joven guardia se cumpla una condición mientras que los años sean menores que 34 qué hace esto [Música] vamos a separarlo correctamente y a desangrar lo correctamente y una cosa los móviles estructuras de control ninguno de ellos tiene que acabar con un punto de comer salvo tu web mobile debe acabar con un punto comercial qué hace esto me dices que eres joven como es posible que me lo diga porque el bucle de usuario es muy gracioso años es llevar a 35 años tiene que ser ejecutado sin embargo el problema del bucle de uruguay es que es un club es un poco un bucle de norteamérica son bucles de vista del hombro por tanto lo que esto es a esto y luego pregúntate si lo tenías que haber hecho es decir el simplemente dice hay un solo 35 a nivel y me ha dicho que vale nada yo hago esto hago y pongo el es joven y dice mientras hay un ser de 4 pero no lo demás como esto es falso meza y bajo aquí bajo pero ya no es limitado por tanto el ruc lenguaje ejecuta una acción siempre que se cumpla una protección del uruguay ejecuta una acción al menos una vez si se cumple la condición más veces pero al menos una vez la ejecuta vamos a ver una cosa de javascript que se llama funciones en mi opinión no es de lo más fácil que tiene un lenguaje de programación y por eso me espero a acabar de explicar estructuras de control para explicar las funciones es un documento que podríamos decir que martes pellegini bell de complejidad de hacerlo señales escribe de dicho texto javascript y yo voy a hacer unas cosas que se llama una función en la fórmula una función de la fórmula de unión es una función le das un nombre mi función le escribe unos paréntesis porque sí y en tres lo escribes un código es por ejemplo mi función hace que yo diga document.no es ejemplo tu nombre es pepito tiene es una cámara hay que hacerlo mediante el documento punto farc es decir no es tan sencillo como se puede escribir lo mejor es cuando quieras pueda es experimentar en cinco años yo creo que ya está vamos a darle a actualizar y aunque ponga la vista en vivo no vamos a ver nada porque ya yo entonces te explico para qué sirve una función una función no ejecuta directamente un código una función encapsula un código una función agrupa un código y lo deja preparado en una cápsula en una pastilla para cuando yo no quiera usar si todo lo anterior para carente de sentido este para tener más carente de sentido todavía pero no porque lo que hacemos básicamente con esto con estas funciones es construir dos herramientas por ejemplo es como si yo puedo construir un martillo estuvieras para que lo has hecho lo vas a usar proyecto quiero construido y me dejo mi caja las herramientas y gonzález y cuando lo use me vendrá muy bien pero lo construido pues las funciones son como herramientas de una caja de herramientas yo construyo herramientas luego más adelante usaré la fórmula para crear una función es ésta que hemos visto aquí la fórmula para usar una función es simplemente llamarla mi función aquí arriba lo que hecho simplemente es definir una función y no usarla está guardada en la memoria aquí lo que he hecho es usar la función es llamar a cuando llegó aquí el resultado nuestro nombre de este mito fue hace 35 años ahora mismo no veo exactamente las ventajas de haber usado una función porque podría haber escrito directamente el código sin necesidad de una función supongamos que te digo que mi función [Música] la copia y la pegó la película pero la entregaron cuatro veces simplemente repitiendo este código cuántas veces he hecho el programa de bordar cuatro veces por tanto ocho líneas está este cordón y tú ahora mismo me dirás si vale es cierto funciona pero no sé para qué sirve porque realmente podría haber copias relegado de esto existentes realmente sirve para hacer herramientas que luego sean personalizables en un momento dado yo te he dicho que los paréntesis que los dejaron vacíos porque más adelante mira este campo que servían y ahora te voy a explicar la rigidez sirven para poner para micos y por tanto para personalizar el comportamiento de las rabietas por ejemplo dentro de esta porción yo voy a decir que te voy a pasar una variable llamada el nombre y que te voy a pasar una variable llamada edad si todo el bien no está bien voy a declarar las variables nombre edad que el nombre era errores tu nombre es nombre pero voy a hacer el doble de cuidado el snet y dijo que era por 2 y ahora ejecutó esta función no va a pasar nada en pantalla tu nombre es harvey shine el doble de lectura es notable es un número que no sé qué decir pero si ahora digo efe coma 30 me dice tu nombre y el doble de toral y 60 y ahora digo me compré esta función y por tu nombre es juan titular el 25 de gente que solo haciendo eso el programa automáticamente se encarga de tener tu nombre es jugar y el doble mentón al es 50 fíjate de esta manera como estoy ahorrando escribir cada vez más una barbaridad de código porque me estoy ahorrando de escribir tu nombre es porque ya me lo escribe directamente tu nombre es jaime pintura es 20 y me está ahorrando yo simplemente le pasó un parámetro y me está ahorrando decirme el nombre y poner mi mirar y calcular me el doble de unidad y tu edad 40 para esto y esto no sirve las funciones imagínate que por ejemplo una función puede ser calcular el referente y luego quiero que quede eso cálculo y luego calcular se viera y luego en ese resultado [Música] la base de una función que siempre cree un número automáticamente ya sabes que quiere calcular esto lo otro sumar menos a esta región en definitiva de funciones una cápsula que te permite a la larga es uno de esos casos en jarras kim en los que hay que dar un paso atrás para lograr tres adelante principio partes es decir cuatro tipos entre las funciones del hospital pero luego cuando las cosas especialmente si la vamos ponen las veces te das cuenta de que a otras y continuamos con el método principal por tanto vemos que algún error es que primero que no ha acabado escrito de olivier y segundo el texto que escrito está mal es bueno así que le voy a poner por haciendo una función inicial que se llama 9 y aquí escribo un poco de código lo único distinto mal de aquí es la palabra selector dónde voy a seleccionar el documento y cualquier documento prácticamente cualquier documento tacuary empieza con esta línea que nos dice desea vivir vamos a analizarlo porque lo bueno que tiene jquery es que si aprendemos la sintaxis de una línea ya sabemos la sintaxis del resto de líneas porque todos los rotos igual es lo bueno que tiene foto que lo que hace es simplificar los escritura de javascript y lo que hace es simplificar la y entiendo verdad es formalizarlo es decir que siempre lleva igual por eso voy a hacer lo siguiente voy a decirte que fíjate que esta parte esta línea está separado por un punto lo que hay antes del punto es el selector y lo que hay después del punto es la acción no quieren desde el punto me dice que seleccionó el documento después del punto me dice que cuando el documento esté preparado ejecutaré la función de inicio la función de inicio existe para crear por tanto a continuación recordamos lo que aprendimos anteriormente sobre creación de funciones y recordamos es estudiar así función inicio y cortes recuerda siempre de sintaxis recuerda siempre que todo aquello que escribo en castellano se puede cambiar por lo que quieras pero todo aquello positivo en inglés tiene que ser así y no puede ser de ninguna otra manera por tanto la función de inicio el nombre inicio lo decido yo la función de inicio realmente pero podría funcionar con equipo y aquí también para organizar coincidirá perfectamente y ahora lo que voy a hacer es poner una vez con él y decir funciona y si todo va bien cuando ve al código en vivo de la función es una muestra de qué jquery ya estaba considerando que he hecho jota acuerdo por lo que he hecho es decir que cuando el documento esté preparado ejecutará la función de inicio y la función del inicio me alerta de que jquery esta función tú dirás dónde podríamos habernos ahorrado el rollo este de jquery y haber puesto directamente a funcionar aquí en medio sin nada más sí pero no porque jquery hace una cosa que yo no era capaz de hacer hasta ahora y es que cuando el palo sellador cuando un navegador web va ejecutando el código va ejecutando el código y cuando llegas a más título ejecuta y luego de ejecutar javascript ejecutar html ejecuta el body el problema es que hay veces que con hamás que llamó al móvil de primero ejecutó javascript y luego ejecutó algo de él hay veces cuando yo llego aquí por ejemplo a esta zona no sabe todavía lo que veis después hay veces que hago referencia a cosas que todavía no han sido creadas en el navegador por tanto para qué me sirve nada más ya empezar jq para decirle que sólo ejecuta e inició cuando el documento esté preparado y que quiere decir que el documento esté preparado porque todo el documento haya sido cargado por contado ya estoy diciendo es oye sólo cuando todo esto de aquí abajo esté cargado solo en ese caso ejecutarla con cemento y así nos aseguramos de que java decir siempre bajos de una perfectamente vamos por tanto a quitar este alero de aquí dentro de esta función de inicio vamos a empezar a hacer cosas vamos a empezar a hacer cosas y voy a hablar de varias cosas aquí dentro del mobile tm l voy a crear una etiqueta nueva que no había muchas ahora que se llama el button la ett de la etiqueta del motor a que no te imaginas qué sería un botón pero sabes qué pasa a pulso crea un motor pero no hace nada el motor por eso no habíamos visto hasta ahora no sabía sin embargo es una etiqueta que con javascript sirve para muchas cosas y ahora voy a hacer lo siguiente lo que voy a hacer es aquí dentro de la función de inicio voy a volver a usar jquery y vimos en esta misma fórmula que vamos que hemos visto aquí dentro pongo dólar paréntesis y dentro del paréntesis tengo que poner mucho elector lo bueno que tienen los selectores de jquery es que son exactamente igual que los esteros de css por tanto si sabes css ya prácticamente sabes trabajar con los selectores de jquery cuando yo en css quiero llamar a una etiqueta que pongo el css pues simplemente el nombre de la etiqueta si yo quiero maquetar una etiqueta h1 que pongo en css h1 y ya es pues mejor tal cual es igual si yo quiero especificar qué le pasa a la etiqueta el botón yo simplemente con más votos yo estoy dijo que lo que haga continuación la acción a continuación la voy a aplicar sobre la etiqueta fotos otra cosa que veremos a continuación es que es muy bueno que cuando me refiero a una etiqueta si no olvide le pongo una almohadilla y cuando me refiero vamos class y no le pongo un punto porque no funciona igual que eses bien ya he seleccionado algo que he seleccionado el botón pero ahora a continuación he puesto un punto y lo que hago es aplicar alguna de las muchas funciones abordando los muchos métodos que tiene jquery esto es la ventaja de dreamweaver y es que cuando el programa es a palo seko algún editor nos dice cuándo y cuántos métodos y que puede usar que no pueden usar dreamweaver en cambio detecta que están usando jquery y por tanto nos ofrece porque ya los conoce una lista de métodos que podemos usar por ejemplo uno de los métodos más sencillos es el método que el método clic evidentemente realiza una acción cuando yo haga clic sobre él sobre el botón aquello que ocurre dentro del clic es lo que definirá lo que pasa al hacer clic en el botón y es que es ejecutar la función y ahora por tanto aquí a continuación digo la función viola amén hola vamos a ver que hay un claro es que la función ahora como la prioridad debe tener el programa que hace ahora este programa a ver si funciona aquí o lo tenemos que ejecutar directamente dentro del navegador te doy a pulsa mail y me dice hola y esto es un ejemplo de joda cuello y es un ejemplo en el que hemos podido asignar un comportamiento a este elemento al elemento que tenemos aquí que en este caso es un botón vamos a revisar un poco el código antes porque lo que hemos hecho es aquí en primer lugar decir cuando si tienes el castellano cuando el documento esté preparado ejecuta la función beneficio la función de inicio es que si dice atención vamos a leer del botón cuando hagas clic ejecutar la función viola en el botón cuando hagas clic se ejecuta viola y viola qué es lo que hace o simplemente dice hola al amal baño lo único por tanto tiene que aprenderse es la sintaxis pero fíjate que siempre igual esta estructura es la misma que repetir aquí dólar y paréntesis para decir a quién te refieres punto para separar y a continuación la instrucción que vas a hacer motor sí pero qué pasa con el votante y quieres que haga con el botón pues cuando hagas clic sobre el botón no podemos hacer que el botón y cuando mires al botón ni cuando le tienes al botón sino cuando hagas clic al botón en este caso ejecuta viola y viola va a realizar una serie vamos a ver muchos más ejemplos de jocolí durante el diario pero todos van a seguir esta estructura por tanto la mano que tiene de jquery como cualquier facebook es que al principio al principio de todo es que aprender un poco sobre qué reglas pero lo bueno que tienes tú me dejas las reglas es simplemente aplicar las mismas ferias para 7 más elementos vamos a ver más funciones de d de jquery son por ejemplo la función 3 es yo voy a tener por ejemplo aquí un texto voy a poner un día y ver y dentro de este texto voy a sacar por ejemplo el clásico texto lorem ipsum para copiar libera bueno tengo esto la función css lo que hace es que nos permite dinámicamente cambiar cualquier propiedad css de cualquier elementos de grados uso un selector y seleccionó el día que tiene el y de texto como seleccionamos en css algo que tiene un nivel color amarilla pues de jquery es igual digo almohadilla a las que tengo disponibles y ahora con esto que quiero hacer con esto lo que quiero hacer es aplicar un método que se llama css voy a ver las pistas es el consejo que esté en el consejo que quiero y tiene una siguiente forma de escribirse comillas coma comillas por ejemplo si yo quiero cambiar el fondo digamos amarillo pongo comillas background coma comillas hielo sobre la propiedad comillas y el valor que le tiraban qué va a hacer esto pues que cuando yo pulse el botón de pulsar el fondo del texto se pondrá de color amarillo que acs es css por tanto lo que sientes es el método css css lo que está haciendo es cambiar cualquier propiedad css y tú quieras por ejemplo ahora en lugar de esto lo que quiero es cambiar con family por areal ahora fíjate que la familia de la fuente es un poco asidero ir del río roma pero si yo aquí hace clic impulsa me agrando cuenta como la fuente ha cambiado radial puedo cambiar lo que quieras por ejemplo ahora voy a cambiar font-size con saiz quiero que sea de 8 píxeles y por tanto ahora cuando se vota la fuente cambia de tamaño a 815 es así que acabas de ver cómo hacer un botón que te permita cambiar el tamaño de letra en la pantalla pero continua vamos a continuar todo esto que acabamos de aprender lo podemos lo podemos aplicar y lo comemos con villar con lo que ya sabemos de javascript por ejemplo voy a borrar todo esto si quieres me entrar desde cero junto a mi inicio fue primero voy a hacer un botón con el tibet aumentar en cuya leyenda ponga a aumentar y voy a hacer otro botón con el tibet disminuye con la leyenda disminuir y ahora sólo tiene un pequeño poco a poco el texto pero si le voy a dar a este botón poco a poco pero si bien este botón que poco a poco se va haciendo más pequeño es decir quiero aumentar la accesibilidad de este sitio web mediante una amplia loro o un traductor del camino de la fuente y eso sólo con hamás que apoyan el mejor square y lo puedo hacer así que dijo voy a crear una variable de acuerdo a variables cuya fórmula va la mano fuente recuerda que no me gustan las series como partes del componente de javascript yo te digo el tamaño de fuente que quieres por defecto por ejemplo jueves para casa por tanto cuando arrancó la función de inicio cuando el documento esté preparado ejecutó la función de inicio lo que hago es lo siguiente seleccionó el texto del texto donde está en un día cuyo ive es texto cierto así que digo aquello que tenga el líder texto pues aparecen los tres que tengo disponibles texto quiero que te apliques un css cuyo font size se ve a manu fuente pizzas qué va a hacer esto cuando venga aquí me va a colocar automáticamente la fuente al 12 píxeles si aquí en lugar de 12 hubiera puesto 24 me la podría 24 miller aportó 16 me la ponía a 16 lo que quiero que veas es que en definitiva lo que estoy haciendo aquí es usar ese parámetro 12 medios dichos para colocar el cambio en las partituras mejor que yo porque no lo has puesto directamente esto porque no lo has puesto simplemente esto están simplemente 12 12 píxeles por qué por qué cuando llega a clic en aquel elemento en aquel motor que tenga el nivel aumenta cuando yo haga clic quiero que se ejecute la función aumenta y cuando llega aquí en aquel elemento que tenga la función disminuir cuando estaba aquí quiero que se ejecute en la función disminuye son 31 existen por supuesto las voy a crear ahora la función aumenta simplemente lo que va a decir spoiler camino fuente más más vive que hace esta mano fuente más más coge la fuente y le añade un valor y a continuación le digo vuelve a ejecutar inicio vuelve al principio la función realidad y un espacio la función recuerde que si están inglesas que no tocan disminuye la mano fuente menos menos que van a quitarle un besito y me vuelve a ejecutar la función de hélice antes de ejecutar este sea nuestro primer programa que te diría yo fuerte si yo estaba compuesto por qué pues porque tiene una cosa tiene aunque no lo creas este programa realmente es de lo más difícil que vamos a escribir todos describimos a partir de aros fuertes tendrán esta estructura y te voy a comentar la estructura la estructura lo que hace es lo siguiente primero declaramos las variables que entrar en el juego segundo creamos una función principal y tercero declaramos a las funciones accesorias esta es la estructura del 90% de los programas informativos por frontal no ha sido lo más difícil que me disfrutar hasta ahora pero es muy es muy bueno para aprender esa estructura porque vamos a ver si hemos tenido suerte y todo solucionado se la tengo a ti y el voto de aumentar veo como poco a poco va aumentando el tamaño del texto y si ahora tengo aquí y disminuye veo cómo aumenta quizás demasiado fuerte bien estoy viendo que tiene un problema no tuvieses no volver a ejecutar la función de inicio porque probablemente no sea necesario no sólo ver la probada aumentar por sí que tengo que ejecutar la función de inicio inicio y generalmente hay algún problema o bien del voto nombre estar bien porque me parece que están aumentando demasiado demasiado fuertemente voy a decirle más igual 1 y también la fuente – igual 1 disminuimos ahora parece que sí qué aumentan muy rápidamente diría que estaba aumentando en manos de un píxel en cada más de un píxel en cada momento por tanto bueno tendríamos que ver que puede ser lo que está pasando pero de momento por lo menos ya tenemos y tenemos un mercado de pantallas regalos algún problema por aquí o por lo menos estás viendo como ya tenemos en funcionamiento algo que nos permite aumentar y disminuir pero sólo incontroladamente el tamaño de la fuente de la letra con javascript fíjate lo que tenemos de html que nos da la estructura podríamos tener css que nos den la presentación pero es que cuando pulse un botón pase algo en la pantalla esos son los javascript pero puede dar vamos a generar más efectos vamos a aprender más electores dentro del metro de jquery por tanto lo voy a hacer es un nuevo archivo de todo esto lo copió y ahora voy a hacer un nuevo archivo html 5 que voy a guardar dentro de la cartera proyecto cómodos 2.7 l para todo el código pero voy a hacerlo es que es un poco diferente bien en vivo y vamos tengo un botón la llamada mostra y tengo otro botón que se va a llamar ocultar mostrar no culpa en este programa sí cuándo sobre el botón mostrar ocultar por ejemplo ocultar haga clic con el ratón lo que quiero es ejecutar una función llamada oculta y cuando sobre el botón que tiene mostrar a fácil a ejecutar una función que se llama muestra qué van a hacer estas funciones pues la solución vamos a empezar por eso oculta va a alejar el bid que tiene el ibr texto y lo va a ocultar como algo que simplemente por la h encontramos hai encontramos el método hartl el método jaén lo que hace es el texto y ocultarlo pero digo nada amelia algo así y pulsar el botón ocultar simplemente el texto desaparece como te puedes imaginar de la misma manera voy a crear un método llamados muestra muestra que en lugar de hi hi en inglés es esconder show es mostrar por tanto de la misma manera que el botón oculta oculta el botón mostrar muestra y me sirve para poder ocultar en mostrar gráficamente cosas en una página web por ejemplo el típico mensaje de que cuando pulso es un botón enviar un formulario de parece juego de reanimación que dice hola una ventana donde estás flotante más cosas no hemos acabado porque el botón mostrar y ocultar son un poco duros porque hacen para mostrar y ocultan una animada de animación no me dan nada de interacción y bueno pues tienen varios modificadores como por ejemplo si yo le pongo flow cuando le voy a ocultar en la oculta poco a poco la animación es muy bien para la muestra y cuando el oculto vez que desaparece poco a poco pero cuando lo voy a mostrar se muestra de repente porque mostrar no le cueste slow por tanto de puedo poner slow y de saber cuándo ocultos oculta poco a poco cuando lo muestro lo muestro poco a poco de la misma manera que esta es la también estaba por ejemplo fase más rápido inglés así que paz y lo que hago ahora es que ocultar se oculta necesita descuenta a una velocidad más rápida que antes tú dirás bueno tengo otras velocidades lento y rápido realmente no es lo único son accesos rápidos a velocidades pero otra cosa que se puede hacer es por ejemplo poner mil una cosa que te voy a decir y recuerda la para siempre es que javascript el tiempo se mide en milisegundos por tanto me quiere decir mil segundos es igual al segundo y eso quiere decir por ejemplo que cuando yo oculto cuando yo oculto este texto nada ni más ni menos que un segundo para ocultar que un segundo en ocultar demostración quieren ocultar por ejemplo pongo diez mil 10.000 milisegundos y que menos diez segundos quiere le voy a ocultar fíjate cómo tarda diez segundos ni más ni menos en ocultarse lo que te recomiendo hacer esto sino simplemente para que usemos a mí si te soy sincero no vemos porque mi jardín y show me gusta porque nos deparará a 2 segundos cada uno y si te das cuenta ocultar no sólo oculta el campo de texto sino que además medio de dimensión y observarás cómo las palabras van cambiando la región si lo hubiere ocultar fíjate como las palabras van cambiando de arreglo y se debería mostrar fíjate cómo van cambiando los palabras van apareciendo solamente realmente haydee show me hacen dos efectos a la vez que es la transparencia y el descaro que me parece muy bien pero veamos a mí me gusta mucho más dos efectos parecidos a jaén y show que son rating y felicidad en lugar de high voy a escribir a vos y el lugar eso voy a escribir y cuál es el efecto de esto bueno pues cuando yo lo oculto fíjate que albert valentín al traste a demostrar fíjate que ocultar lo oculta en dos segundos y mostrar lo muestra en dos segundos pero fíjate que las palabras no van bailando porque no cambia el renglón por tanto yo no te hago con haydée con sol es ocultar la visibilidad pero no el tamaño hay otra función a la tercera función [Música] es decir que aun le quita toda la transparencia toda la transparencia y si no quiero dejar a mitad de transparencia horas para hacer tu atrás cuando llega nadie hace tu yo específico de 0 a 1 la transparencia por ejemplo cuando se oculte yo no quiero que se oculte del todo quiero que se quede al 0.1 al 10% de transparencia y cuando se muestre no quiero que se muestre completamente opaco quiero que se quede al 0.7 de transparencia así que se ocultó hola hola hola mamá efecto 7% y vamos a ver con con comidas aunque creo que los problemas de comillas hay un problema de sintaxis está bien vamos a ver qué problemas imprecisas si tiene un problema de sintaxis en esa línea y no hay en la otra línea pero ese caso voy a arreglar documentación la documentación que puede encontrar en unas páginas por ejemplo ahora mismo estoy de jquery ya entonces que está en la base ya un punto conjunto de rr aire barra jquery y en este caso veo una documentación por ejemplo que me hacía falta un parámetro que es lo más o en definitiva la velocidad con la que quiera trabajar por eso lo que voy a hacer en este caso yo tenemos es decir que se ve tú no como hasta 0.1 y facebook jaja hasta 0.7 vamos a probar nada así que le digo ocultar cómo se ha ocultado pero no del todo no es como si no es como hai ni como face agua sino que te lo deja y con semi transparencia y ahora te voy a mostrar y fíjate que no te lo ha mostrado del todo así que se hacía así si recargo este texto está más negro si lo demostraré fíjate cómo se queda el 0.7 de transparencia por eso me gusta mucho más facebook seguida de itaipú porque te permite encontrar exactamente hasta qué punto quieres desactivar las cosas a priori bastante sencillo y es por ejemplo decir estas son páginas yo voy a poner aquí un día y ver igual quién soy y de ser soy de en esta página te cuento quién soy [Música] lo que hay esta es por tal forma de vida de esta página te cuento mi portafolio de ver esta vez es compacto vitz en esta página pondré un formulario de contacto tengo todo lo que quiero cuando sé quién soy me aparezca sólo quién soy para pulse portafolio me aparece es me parece sola por solo portafolio y cuando fuese contacto que aparezca sólo el formulario de contacto y eso lo vamos a hacer con javascript has aprendido a esta hora de jquery y dejaba still para darle un uso práctico y además un uso bastante extenso que prácticamente vas a usar en cualquier proyecto es la creación de un recurso que internet se llama la xbox live box es una ventana flotante hecha en javascript así que por ejemplo este es mi blog este es un bloque con wordpress y por ejemplo cuando yo le doy aquí a una nueva entrada a subir insertar aparece una ventana flotante desde la que yo pueda insertar archivos tiene el efecto de que en la parte de atrás en el oscurecido pero no ha desaparecido yo no he cambiado de páginas no me ha ido a otra pantalla sino que estoy en la misma pantalla pero ha aparecido una caja flotante pues este mismo efecto lo vamos a conseguir a continuación voy a estar aquí me voy a ir a veces weaver en lo que voy a hacer es un sitio nuevo la que estaba por tanto dentro del centro de ventanas sitios sitios sitios archivos y archivos que está pero no pero yo quiero administrarse muy bien me voy a crear un nuevo sitio este sitio va a estar en sitios sin nombre se llama mi portal forma iba a estar en documentos documentos voy a crear una nueva carpeta quisiera llamar mi portal for me lo creo él dijo en documentos con figura trabajada no quiere design hotels no quiero esperar el vuelto así que vamos a hacer contra la versión acceso bueno creo que haya creado un sitio de portafolio así que le digo listo vamos a verlo momento por lo tanto esto es chrome voy a me voy a documentos me voy a ir a mi portafolio y creo que le comento lo tengo grabado por tanto cierro aquí no hablaba voy a crear un nuevo archivo html así permanece 5 lo creo y con archivo lo guardo en mi portafolio index.html y además además el finders lo que voy a hacer es copiar me de la carpeta proyecto el archivo jquery que usaba antes por tanto copio copió copió copió jquery punto de ese y el documento y portafolio y así lo tengo disponible dentro de la carpeta principal me voy a crear un script de tipo texto javascript cuya fuente recuerda de la fuente me permite examinar y decir que dentro del portafolio de js quiero usar j clin bueno vamos a dejar de estar aquí de momento y ahora nos vamos a los vuelos y voy a esperar por ejemplo una estructura voy a crear un día y d con tenedor dentro del contenedor crear un gel crear un sexo si crear un router dentro del género voy a poner un título h1 hola soy jose vicente centro de gestión género y esta es mi página y dentro del fútbol voy a poner copyright 2012 jose si ya tengo una página básica de una página web y dentro del eje con la etiqueta de estilo del tipo texto css creo un poquito tampoco mucho pero por lo menos teníamos que combinar los lenguajes y de esa manera el mismo aquello que tenga el contenedor pero pues por ejemplo que tengan week de 500 píxeles y un martín auto ya que estamos el marq ground sea igual porque pues por qué el body en el body y el cuerpo del html probablemente voy a querer que más ground rey el borde en vivo tenemos siete ya que estamos el hajj sea de 500 píxeles y así tenemos hasta la parcela de cruz ya que estamos persona que me explayé volver radios es igual la mente píxeles y que tenga un box ciao de 0 30 píxeles pixel de píxeles bla qué hace esto debería hacerme si no me lo hace probablemente los veremos exportando la vista previa del navegador safar y webkit vista previa del navegador y ahora si es una sombra trabajo así que tiene una página web para que el texto que el parking margen interior sea como de alrededor de 15 píxeles y si habrá un poco de separación entre el borde tengo ya una mínima página web y ahora dentro del html me voy a hacer un menú de navegación basado en botones un motor por aquí kevin a quién soy y de igual a james para poder identificarlo pero por tan solo y contacto que tengo aquí un menú de navegación basado en motores y luego se pueden utilizar preocupes parte los locales antes quiero contacto hasta ahora que tengo realmente pues hasta ahora tengo html y tengo ceses pero no hace falta javascript para que el cual medio pulse aquí realmente pase algo en la verdad así que ahora vamos a hacer ese algo lo que vamos a hacer dentro de javascript esos siete grados hoy aquí arriba pero estoy en youtube y esta es mi página no voy a meter dentro de un día que va a tener vive llamado defecto porque es lo que aparece por defecto corto pero todo cambió pero ahora el javascript hemos analizado primero lo que queremos a continuación le vamos otro a barreras que analizando lo que queremos realmente programar es muy fácil simplemente convertir en realidad aquello que queremos yo lo que quiero cuando el documento está preparado es ejecutar la función de inicio y la función de inicio va a hacer lo siguiente no es cierto que al principio ya no quiero ver la página de descuento tenso y lo que me hicieron en el portafolio de sjögren conformar el compacto es lo que hago por tanto porque verás conmigo que se tiene pues mira el día de contacto y me lo oculto cojo el día del portafolio vi y me lo oculto y cojo es decir de compacto vil dímelo por tanto cuando yo cargué la página idea la función de inicio que me ocultará quién soy mi portafolio y el programa de contacto a lo que se atina a la religión y yo veo que aunque en el código diga que te cuento que soy esta es mi página de portafolio y el formulario de contacto realmente nada más entrar en la página los estoy escondiendo con hamás t ahora coincidirán conmigo en que si le doy a quién soy que re esconder esta es mi página y que resaca el texto de quién soy por ser seleccionó el botón de quién soy y cuando haga clic sobre este botón que ejecutar la función quién soy lo mismo lo mismo para el botón de portafolio y lo mismo para el botón de contactos porque te recuerdo que tengo un botón jason y porta forma y contacto ejecutar el portafolio le gusta el compacto una cosa muy divertida y es que la función a quien soy mira a este elemento que tiene vive inicio de efecto perdón lo juntos aquellos que soy quien soy bea’ portafolio de vida y compacto bien los adjuntos y el único que muestro es quién soy complete con esto ya está casi acabado lo quiero pero y pero la función corta solo me oculta defecto me oculta acción sol y me muestra portafolio y la función con tacto me oculta que importa a todos y me muestra contar si ahora la probamos comprobaremos cómo y sólo en esta página [Música] portafolio en esta página de cuento de portafolio y contacto para saberlo he puesto contacto efectivamente pues nada le pongo show vamos a verlo ahora algún error que he cometido algunos errores cometido sólo fíjate cuando el convento un error lo que puede pasar es que solo desarrolla sentido y no funciona pero no ha pasado realmente corregimos el error y ya está quién soy mi portafolio y contacto y lo que es más divertido y lo que es más divertido es que incluso si queremos estar organizo y hacerlo bonito aquí le puedo empezar a aplicar transiciones en plan sólo wi-fi voy a copiar las ahora tardará mucho en fijarlas y así no solo no sólo tendremos ese efecto sino que sería quien soy fíjate que ha hecho una liberación de que aparecen portafolios y fíjate cómo no sólo aparecen y desaparecen sino que además hacen un pequeño efecto y una transición es lo que te dejabas que es una navegación dentro de la página web sin tener que recurrir a hacer múltiples páginas y encima con animaciones y con efectos que hasta ahora en principio parecía que eran exclusivos eran únicos de mezclas y por último decirte que no te preocupes por la forma horrible que tienen los botones por defecto porque como tú no has dicho css como quieres utilizar un botón por defecto el programa de este cuerpo es por defecto un botón es así pero si yo me voy a css yo simplemente marco la etiqueta botón y yo me puedo estilizar perfectamente y de verdad normalmente controlable el botón pasando le digo que borde es igual a cero píxeles soy el bla así el momento ya la borda y ahora digo el background es gringo porque le puedo decir el color es igual a white y el padding es igual a 10 píxeles y el margin es igual a un píxel y como verás poco a poco lo que voy a decir nuestros analizarme la forma de los botones y por ejemplo le digo que el borde radios es igual a 5 píxeles y es más le digo y tenemos terminantemente transición de animación es que cuando aunque estoy orden en ese momento que cuando pasó por encima del botón pues hoy por ejemplo el background se convierte a color rojo y cuando pasó el ratón se convierte con los rojos definitiva no te preocupes por esos horribles botones de porque luego con css se ve por encima de la oficina y por supuesto siguen teniendo la función que se supone que deben tener hacer vamos a hacer una página nueva voy a guardar voy a hacer un archivo nuevo de html5 y lo voy a guardar por aquí labarga como dos puntos m de hecho voy a copiar y lo voy a pegar y me voy a un montón de cosas así que incluso podría dejar esto con una plantilla porque como plantilla está súper bien tener un poco de todo inicio ah vamos a vernos es fácil decir contenedor me voy a dejar porque ves sí ya no sólo él esto no muy bien pues lo que voy a hacer es a enseñarte unas cuantas funciones más por ejemplo hay una que se llama html y otra que su hermana se llama text lo que hacen estas funciones es escribir texto villasante es por tanto un botón voy a crear como todo [Música] y ahora aquí por un día al que le pongo una idea y le digo receptor quiero que veas una cosa estar vacío verdad en blanco de inicio le voy a decir que cuando van aquí en aquel elemento que tiene una etiqueta botón para dar clic entonces voy a ejecutar una función que se llama crear la función crear texto van a hacer los siguientes de aquiles entes a la caja la función crear texto lo que va a hacer es llamar and it que tiene el ide llamado receptor es que recibe la información y poner con el método html concretamente html strings poner una cadena este es un texto que he creado con jota cuero si yo ahora lo que hago es decir pulsar aquí aparece este es un texto que he creado de acuerdo lo que he hecho por tanto es un elemento que no tenía nada de texto y poner texto dentro el efecto visual es como el hide y el show pero no es lo mismo porque con haydée con software que esto existía pero que hacía era ocultarlo mostrar algo a lo que es que no existía y lo he creado dinámicamente el método html de un peligro y el peligro es que ya hubiera y algo de texto el peligro por tanto consiste en que el método html chafa todo el texto que hubiera anteriormente por tanto si ya había algo de texto y le doy a pulsar me me quita el texto anterior y de poner el texto nuevo para evitar esto en lugar del método html puedo usar el método apple app en añadir a realizar un apéndice lo que hace es que en lugar de sustituirlo lo añado por tanto podemos comprobar que si ya hubiera o de texto le doy a pulsar y me añade después texto hecho se puede usar tantas veces como quiera y me va añadiendo siempre texto el método test es un poco parecido al método html lo que hace es ponerme texto esto es un texto que crearon jquery cuál es la diferencia por tanto entre el método text y el metro al tate en el que el método text está pensado para poner texto plano puro y duro y el método htm además de texto permite poner etiquetas html verdes bodies y cosas así y mezclar texto con etiquetas html esta ha sido la primera parte de los métodos y los métodos html ya que lo que hacen es poner texto donde no lo hay sin embargo estos métodos son dobles porque por ejemplo ahora el receptor le digo este es un texto que ya existía bueno pues si uso por ejemplo el método texto sin parámetros con parámetros servía para escribir cosas pero test sin parámetros sirve para leer cosas o html hacen lo mismo así que yo con esto voy a decirle a ver estoy aquí vamos a comer este es un texto que ya existía pero el barça me dice este es un texto que ya existía curiosamente es lo mismo que aquí desde que he hecho pues lo que hace es decir alerta me sacan de un mensaje emergente de aquello que está en el receptor su html no quiero que escribas 7m quiero que leas el html que hay en el receptor por eso es un poco confuso vale porque el mismo método te sirve para leer y para escribir simplemente es automático simplemente sino de con dos parámetros jquery entiende que tiene que leer y si pones parámetros jquery entiende que pide escribir como ejercicio para ilustrar todo aquello que estamos aprendiendo y que no sea tan duro vamos a crear un pasaporte por tanto lo primero que vamos a seleccionar para hacer nuevos proyectos o si vas a crear aquí un nuevo sitio en archivos y en deportación y administrar sitios y voy a crear un nuevo sitio que se va a llamar pasa fotos que va a estar en documentos con el nombre pasa fotos guardar listo y voy a cerrar los archivos que pueden usar me han servido para aprender lo que estaba haciendo hasta ahora y me voy a archivo nuevo html 5 y lo que voy a hacer es entrar dentro de dentro de google y sacaría imágenes para hacer un paso a fotos así que no sé tengo porque sé que es es buena cruce y vamos a fotos grandes al recoger este vamos a este vamos a este y cómo lo vamos a éste bien por tanto tengo un coche con tamaño y me voy a documentos por tanto me voy aquí a documentos me voy a casa fotos y por ejemplo lo dejo aquí 1024 me lo como ayer el paso fotos 1920 1080 solamente tenemos que rebajar un poco de tamaño mil 94 y por último no es por ello que no es importante aquí está el mar y tengo unas imágenes a hacer pasa fotos en la web y me voy a ir a la carpeta del proyecto a la carpeta a esas fotos pero aquí que tengo las imágenes a dispuestas por tanto alguna carpeta ing imágenes y lo que voy a hacer es renombrar porque los nombres son muy largos y luego de cada programa sería peor le voy a decir que quiero y quiero renombrar imagen 1 no la quiero con extensión jpg me pongo la vejez que es lo mismo al final imagen 2 junto jpg imagen 3 imagino 4 en imagen estas imágenes fíjate que van apareciendo en formas con explicaciones en el escritorio de archivos aparecen aquí las voy a pasar a la carpeta ing por tanto aquí desaparece en algún momento actualizó para comprobar que la reforma de la carpeta de tejer dice un documento lo que voy a hacer es guardarlo dentro de pasa fotos como invex punto externo a las que aparece y por tanto esta es la estructura del sitio incluso ahora me voy a crear una nueva carpeta vuelve la nueva nueva carpeta no lo veo así que sí [Música] bueno para crear una carpeta no lo estoy viendo así que defender así que me hago de nuevo la carpeta que se había barajado es que por qué porque en esa carpeta merece de todos los jaulas bits que esté usando en mis proyectos pues sobre recoger este javascript no voy a copiar y dentro del documento un centro de pasa fotos dentro gran carpeta javascript no voy a llegar así ya estoy preparado para todo son proyectos así que ahora una carpeta una analítica script de tipo texto javascript donde la fuente será dentro de la carpeta de java script del archivo jquery fíjate cómo es capaz de entrar dentro de una carpeta y ese ancho y ahora dentro del móvil voy a cargar imágenes como se cargan las imágenes os recordamos que las imágenes se cargan con una etiqueta y en el gen srf y cargo dentro de la carpeta de imágenes con la imagen 1 que ya aparece por aquí evidentemente voy a copiar y pegar y pegar pegar y pegar en la imagen 2 para la gente para rellenar en cuatro y para la imagen 5 cuál es el resultado los que fíjate que tengo las imágenes una detrás de otra esto no es lo que yo quería yo quería un paso a fotos donde las imágenes puedan pasando poco a poco de otra buena tranquilidad al obedecer además bueno a la css y buenas estilo de tipo texto ceses y todo aquello que sea una imagen para ver si puede ser sería igual que el week sea de 600 píxeles a ver qué pasa y fíjate como todas las imágenes han cambiado automáticamente a 600 píxeles pero es más te digo más le voy a decir además que la posición sea absoluta qué va a hacer esto esto lo que va a hacer es que tú veas una única imagen pero aunque no lo parezca es no me dejado claro efectivamente estaba abajo lo que te quiero decir aunque no lo parezca estar las cinco imágenes puestas una de traslado y el por tanto ahora efectivamente muy bien me voy a hacer cinco botones un botón con ive es igual a 11 y con un número me parece que es pero creo que está por allá arriba si lo ves bueno voy a decir lo siguiente aquí a ver si fuera pero acá me veré el botón está allí abajo y al final bien absolute y por tanto en los botones me va a tocar hacer una botonera dile que se va a llamar botonera sí que va a almacenar a los botones si hay suerte le diré que todo aquello que tenga nivel botonera tenga un estilo clear sigue sin aparecer por tanto la botonera por sitio relativa si tendré que decirle ahí aparecen partes y tendré que decirme que tenga más de 500 grises para que aparezcan las desaparecer por ello parece haber ese maldito y con la misma facilidad y lógica que es un botón 1 voy a hacer un botón 234 3 4 2 3 4 y 5 y tengo ya hay 5 botones donde cada vez que yo pulso un botón quiero que cambie la foto correspondiente como lo voy a hacer en javascript miras para pasar una cosa luego yo espero que pase y es que en este ejercicio ya no vas a tener que aprender tantas cosas nuevas sino este ejercicio va a ser muy para celebrar anterior y cuanto más avancemos en java speed más te va a hacer eso que cuanto más avancemos más dirás si estos no son lo mismo pues recibir es un poco traumático pero cuanto más aprendemos de javascript y dijo está fuera pero nos cuesta como toda la vida realmente texto barajas feat cierro la escritora digo que como puede cuando el documento esté preparado ejecutará la función de inicio y la función del inicio tendrá el siguiente código voy a probarlo en el siguiente vídeo vamos a hacer la programación que nos va a permitir [Música] trabajadores y madres que cuando yo pulse un botón sólo aparezca imagen corresponde por eso yo lo que voy a hacer es decir igualmente sobre el botón que tiene el nivel b1 click en este caso ejecutaré la función llamada imagen 1 esta función no existe pero a continuación me la voy hacer de la misma manera así que si quieres puedo copiar y pegar haré lo mismo para el resto de botones cuando haga clic sobre el botón 2 ejecutará la función imagen 2 cuando haga clic sobre el botón 3 al ejecutar la función imagen 3 cuando haga clic sobre el botón b 4 ejecutará la función imagen 4 y cuando haga clic en 5 ejecutaré la función imagen fin voy a hacer una de las funciones de la función imagen 1 tiene las siguientes características cojera o tengo que darles idea las imágenes porque si no no puedo llamarlas así que les digo ing 1 para así poder es como una sartén un asa para poder algo pero luego pegó y pego no lo sé 4 y si le digo aquí en el elemento qué tiene que libre y el g1 quiero que me lo primero muestres lo bueno muestres lentamente y aquellos elementos que tenga los víveres 23 45 o salud quiero que hagas un face out es decir quiero que me los ocultes de la misma manera voy a hacer el resto de las cinco confianza ahora mismo yo sé que en tu mente se activaron los mecanismos pero también se han activado otros se ha activado el mecanismo de vale esto ya los cristianos porque se parece mucho al ejercicio anterior pero también se estará activando el mecanismo de vale permítame la más sencilla el programar lo que tener que repetir ahora cinco funciones por supuesto que hay una verdad más corta pero no más sencilla porque estamos viendo la manera digamos primitiva la manera a la bestia repitiendo el código más adelante tenemos una manera que será más sencilla para escribir código evidentemente todo aquello con lo que escriben menos código también es más difícil de comprender pues ahora nos interesa más digamos hacerlo a la bestia bueno la imagen tenemos la función imagen 2 imagen 3 imagen 4 imagen 5 esta imagen 2 la imagen 1 la esconde la imagen 2 la muestra la imagen 3 la imagen 1 la esconde la imagen 3 la muestra la imagen en la función imagen 4 la imagen 1 la esconde la imagen 4 muestra y por último y no por ello menos importante la imagen 1 la oculta y el imagen 5 la muestra es un buen momento para guardar claro tenemos un código claro pero largo vamos a probar a ver qué pasa entonces si veía el botón 1 tengo la imagen 1 si le doy al botón 2 tengo la imagen 2 silvia el botón 3 tengo la imagen tres silos día el botón 4 tengo la imagen 4 y si le doy algo con 5 tengo una imagen 5 y además por supuestísimo en cualquier momento puedo pasar de cualquier imagen a parte de imagen con lo cual al final lo que tengo hecho no es ni más ni menos pero este ejercicio no acaba este número tiene dos extensiones una de css y otra de más javascript con css vamos a hacer que éstas otra vez no sean tan arcaicos sino que sean un poquito más bonitas así que lo que voy a hacer en definitiva es lo siguiente me voy al css y domina todo aquello que sea un botón va a tener las siguientes características va a tener un wish de 20 píxeles y un hurt debéis peticiones quizás un poquito más 25 y 25 pero lo que es más divertido es que le voy a decir que tengan un volver de estar bien se crea un border de 0 píxeles soy black lo que si van a decir que no tengan bordes ya les voy a decir si esto va peor pero les voy a decir que tengan un borde radios de 25 partido tal pues 12 13 píxeles con lo cual voy a conseguir que los cuadros se conviertan en círculos y ahora les voy a decir a ver si de suerte que tenga buena primera bomba creo dzeko no va rgb a que será 025 500 puntos pero no ese verde por tanto le voy a decir el jefe de 200 como 25 5,200 que eso si todo va bien le dará nombre de clarito y por último dentro de éste css a ver si lo pillan y si no tendré que exportar a un navegador voy a decirle aquí quiero un huevo 2 ya no de cero píxeles 0 píxeles 10 píxeles rgb pero como 000 puntos 415 sin ser que es metido dentro del ciclo veo así esto una sonrisa adentro después hará así ya como ver cómo voy pasando de una imagen a otra verdad pero oye hay una cosa que me gustaría hacer vamos a empezar a mezclar ss con javascript html y no sé tú pero yo es cuando tienes me disfrutar porque ya es cuando dices estamos viendo cosas y prácticas ya vamos viendo como selecta dos lenguajes y todo funciona bien claro través que pasa es que es un verso pues me gustaría que cuando yo hiciera clic en este botón por finalmente algo me marcará y que estoy viendo en el margen 4 y no cuente otra imagen y cuando hago tiene que ver voto número 2 algo me marcará que estoy viendo esa imagen como pasa en muchos en muchos de estos bueno pues pero es muy sencillo porque te recuerdo que hace un rato hemos visto la función css la css acá vamos a hacer es el siguiente cuando yo hago esto si tienes voy a dejarlo así y aquello ahorrando el máximo esfuerzo posible aquello que tiene de 1 le pongo una propiedad css que es que su background se lo pongo en verde yo solo quiero que pase esto es que el puesto de funcionario que no lo he puesto lo que no quería poner aquí sólo cuando yo pulse el botón número 1 se ponga de color verde y ahora por tanto debe complementar con el resto es un poco rollo lo siento pero que el botón 2 tenga background se refiere 200 255 formaciones creo que sabe y si nuestro ingreso ahora fallara en otros tres 4 ahora cuando pulsó el botón uno se volverá de color verde pero ahora lo que voy a hacer lo siento una vez más vas a decir copio pero pero tu mente está ahí pero ahora en el 2 es el botón 2 el que se pone de color verde y el botón 1 recupera el 36 botón verde y éste recupera es el botón 4 que se pueda vincular menos se recupera y es el botón 5 el que se pone de color verde y esté recuperado cuál es el resultado a que se impulsan uno se puede color verde si pulso tres fíjate cómo he conseguido mediante ese código que sólo aquel elemento en el que yo he pulsado se ponga del color que sea demostrar el uso vamos a poner esto por allí vamos a demostrar el uso de setas en java spears en este caso 79 jquery sino que es totalmente de javascript y aquí lo que voy a hacer es poner en el menú de inicio de la función de inicio voy a poner set time out y le pongo el código que voy a aceptar y el dylan por ejemplo le vivo funciona sin nombre de esta función ya mayor línea de alert hola vamos a ver esto que hace parece que nuestro día bien en un segundo mucho uno después debería haberle sacado un mensaje en la pantalla que me dijera hola no pasa nada porque si no ha funcionado veamos una función llamada ola sin parámetros y dentro de esa función pongo el código que yo quería amén hola así yo aquí en el nombre de la función te quiero ejecutar bueno vamos a ver el momento en lo que ha pasado no está bien lo que ha pasado porque ahora aquí en lugar de 1000 voy a poner 5 y ahora me vengo aquí y cuento 1 2 3 4 5 y por hora o sea que no me ha sacado ese mensaje automáticamente sino que es a este lado cinco segundos o el tiempo que yo le diga ya ha sacado ese mensaje en definitiva de que salgan mensajes lo de menos lo que importa es que puedo decir puedo controlar cuando el tratando de ejecutar una tarea y eso quiere decir lo siguiente chao y eso quiere decir que por ejemplo me voy a hacer aquí arriba un contador para contador es igual a 1 y ahora yo vivo hacia abajo le digo sí y contador es exactamente igual a 1 entonces me ejecutas la función imagen 1 recuerda como no funciona clic esto si tienes de momento el momento de desactivar al usar y miren se me ha ido a imágenes automáticamente pero quieren comprobar si siguen funcionando si es perfecto porque sabes que cuando haya arrancado cuando haya arrancado señaló automáticamente la imagen ahora le voy a decir imagen unos contador es igual a 1 en la función imagen 2 quiere decir contador es igual a 2 os voy a decir [Música] con calor es igual a 3 realmente realmente creo que lo de los contadores no me hace falta para nada creo que estoy programando estos controles para nada pero los contadores para lo que sea es bueno y ahora me aprovecho de este set time out se denomina pues ya que estamos si ejecutas esta foto te esperas 5 segundos y me ejecutas imagen 2 me lo copio aquí y le digo pues si me estás ejecutando imagen 2d esperas 5 segundos y me ejecuta de imagen 3 como te podrás imaginar voy a hacer lo mismo para la imagen 4 como te podrás imaginar también voy a hacer lo mismo a la imagen 5 y qué pasa cuando llego a imagen 5 pues que evidentemente ejecutó imagen vamos a ver cómo funciona y ahora lo que hago es que pongo la imagen 1 mes pero 5 segundos y si todo ha ido bien pasa automáticamente de imagen 2 y semestre otros 5 segundos y todo ha ido bien pasa automáticamente la imagen 3 y lo mismo pasa con la imagen 4 con la imagen 5 y si todo ha ido bien cuando acaba con la imagen 5 desde ya volver de imagen uno pero eso no quita que yo en cualquier momento puedo cambiar de imagen manualmente y el programa en cualquier momento le deja combinar el cambio de imágenes manual con el cambio de imagen es automático esto qué quiere decir pues esto tiene decir que tú puedes coordinar que las decisiones arrollarnos los contadores pero eso quiere decir que sí pero eso quiere decir que por una parte ya puedo hacer un portafolio de imágenes que vaya pasando puedo hacer el banner y nacional online que vaya pasando productos e incluso puede hacer que está muy de moda los periódicos un banner de noticias que vaya pasando noticias las revistas principales cada 10 o 15 segundos pero de los contadores que se vuelven locos y empiezan a contarse unos a otros el problema el problema si queréis miramos verlo explicado es que el programa cuando arrancó un nuevo contador no para el anterior cuando tengo que ser capaz de los contadores que estos va a ser fácil pero no se puede parar un contador las bravas sino que antes requiere vamos a ver qué hace un contador más antes requiere que yo meta los contadores en variables por tomar el contador 1 es igual aceptada o lo que sea bar contador 2 es igual contador dos adjuntos mejor ahí es igual a lo que sea bah contador 3 es igual a lo que sea con valor 4 es igual a esto y va contador 5 es igual a esto porque porque yo ahora me vengo al contador 1 y le dije tú haz lo que quieras pero si había un contador funcionando malo y conmigo y lo valoramos a inicial ahora verás cómo en cinco segundos ahora pero a la hora de javascript resulta que cliente animado de la variable por tanto le vivo clear calma de la variable contador 2 y a cuestas incluso contador quiero que se pare a sí mismo si tuviera menos de media se infectó es posible todos y el 5 y que luego de haber parado los contadores ejecute de nuevo con todos que es incluso si todo ha ido bien puede incluso copiar método este código y lo pegando en cada una de las funciones bien y ahora reiniciamos y contrabajos comprobamos cómo funciona el paso fotos no fue algo hecho mal porque se ha parado la espacial pero aunque claro erróneo es que hay manos tienen que ir después tienen que ir antes del parón porque si lo ejecutaron en los paros y luego los ejecutó como te digo arrancar el coche de parte del coche porque el coche se ha parado para que lo que he dicho que para que esto sea bueno ahora hay algo hay algún error ya enrique más funciones porque el primero se te funciona bueno es tan largos y voy a decirle vamos a verlo pues con él claro claro porque porque no puede parar algo que no sabe que es contador 1 lo que estoy haciendo es declarar las variables para que el programa cuando se encuentre con ella sepa que solo y no falta probamos claramente no pasará a la 3 porque hay cosas claro sí que pasa porque eliminado logos los demás con favores en los pies y vamos a probar comprobamos si en 5 segundos pasa entonces ya puedo ir a javascript y copiarlas bajo los pies y manos pero sabiendo que el error era simplemente que el programa los desconocía y cuando el programa desconocido si tenemos y aquí pasa del segundo al tercero si todo ha ido bien los brazos y el bucle completo al 4 luego pasa al 5 debería volver al 1 era que comprobado que funciona bien puedo ir al cuadro se debería esperar cinco segundos pues no he conseguido parar los contadores libertad llamados tendré que pasar los contadores porque de alguna manera no he conseguido que con esa variable s para probarlo debe ser ahora tontería nos vamos a empezar nuevos a empezar el congreso se alejaba skil que se me olvidaba esto debe enseñar no es jquery sabas cinco euros de hecho cuando llegó pródigo lo realmente quiere decir por el dolo pero sin embargo sin embargo es algo que aunque no tiene el momento no puedas ver para qué te sirve a un nivel un medio avanzado de hamás para manejar por tanto les voy a enseñar aunque es posible que unos cuantos ejercicios que hagamos sin matices se puede hacer con variables sea cierto pero para ejercicios más complejos nos podríamos escapar por tanto voy a crear un nuevo proyecto pero no te voy a crear desde archivo luna de cogidas siempre tengo una posibilidad es decir de 5 lo creo pero tenía por aquí una carpeta del proyecto se ha visto pero tengo muy claro que haya que había dentro por si hasta abajo por tanto voy a escribir una carpeta proyectos 2 y lo que voy a hacer es copiar y copia a proyectos no importando esto me lo voy a guardar como en pasa fotos no me voy a escritorio y me vuelve a sacar lo mejor me voy a escritorio el proyecto desde aquí lo voy a guardar como index.hr ml y aquí vamos a hablar de las variables en este ejercicio no son las heras y así nos ahorramos de escribir un poco de códigos directamente agrandó a probar dicho que esto de las variables es independiente de jquery es porque estás cargando huawei [Música] bueno vamos a ver vamos vamos a detener esta línea y aquí voy a eliminar esto le voy a cargar las funciones secundarias voy a quedar con lo que sería la estructura básica de un documento en el javascript como recuerdo y lo que vamos a hacer y siempre cualquier profesor de programación que te enseña matrices te enseña a matrices con una agenda que es la más fácil de prender agendas es que vamos a crear una agenda para que veas las ventajas que tienen las matrices o sobre las acciones de las variables porque las matrices no son más que variables hinchadas y este nuevo madrid es probablemente francés en serio porque el instituto [Música] pues más o menos son más sencillas porque hay que trabajar con más veces lo que quiero es que entiendas para qué sirve una matriz verás supongamos que tengo que hacer una de esas las gigantes verdad de delito una agenda que tiene nombres teléfonos direcciones y todo esto así que yo puedo hacer una variable que sea nombre un hombre es igual con el bar y apellido es igual ala ibar ese tipo de manos innovar de este tipo grad email es igual primero y van desde esa colección teléfono hasta robar rápido el teléfono igual han externado aquí hasta que muy sencillo el problema viene cuando yo tengo que crear la segunda entrada del teléfono es una tarjeta de visita para sí es cierto que podría hacer dar nombre 2 pero sería igual a jugar y apellidos sería igual a lópez pero el problema de estar en que yo lo que estaría haciendo es añadir un número creo que sea un problema es una solución definitiva añadir un número al nombre de las variables originales pues para eso precisamente están las matrices porque aquí fíjate que lo que yo quiero es crear una variable pero que no contenga una pieza de información sino que pueda contener l quizás la información es decir siempre un ejemplo de teléfonos no pone un nombre pone en nombres vamos a ordenados por categorías por número por internet y ccoo o por lo que sea son en definitiva las matrices por los muy felices porque realmente por dentro lo sean pero no me suelen ser las matrices como las guarniciones de álgebra o de cálculo sino las matrices como multi contenedores de información a mí me gusta decir para que lo vean bien que una variable una variedad villa de juego es decir que usas una variable es una caja esa información una matriz es una cajonera el programa es un armario lleno de cajones es un cajón pero es la evolución de un cajón dicho esto como se hace en la matriz es que hacer matrices estabas pieters notablemente fácil simplemente digo dar nombre es igual a new a la red y lo que yo estoy diciendo este nombre es igual a una nueva matriz confío para el teléfono tiene el por ejemplo y ahora y ahora yo te pego nombre corchetes no sabes que están aquí sino cortes que están justo arriba consiste que abre y corte que cierra nombre 1 es igual como se dice email pero lo correcto email 1 es igual a info arroba no soy como el sabor de las acciones kyle korver y los números es la sas es que curioso entonces hay quiere decir que si yo puedo ser coman y uno va a parecer según los interesantes a verlos no lo sabían y teléfono y es número uno luis las épocas pérez que cosas y tengo un teléfono pero es que ahora tengo nombre y tengo 2 y poner aquí a jugar tu teléfono 2 y es igual a un teléfono eso es no hace falta declararlo en el mismo orden y luego cuando lo lees y medir pues por ejemplo que se van a casar hasta aquí podríamos seguir esta distrito es decir podríamos seguir hasta septiembre declarando evidentemente cada una de las entradas de la agenda tú me dirás concierto mejor esto es lo mismo que hemos hecho al principio poner mi nombre los nombre 3 pues si es lo mismo pero más adelante le das que hacerlo así hacerlo con matrices aunque la otra vez que hemos hecho que se ha tenido variables con número la vez funcionaria incorrecto no es para hacerlo con matrices tiene ventajas es que luego hacer cálculos con matrices o hacer listados de matrices entonces por ejemplo yo simplemente para grabar el discurso iluminado document.write quiero que me devuelvas en pantalla aquel nombre el nombre 1 de la agenda es más un hombre con el índice 1 cuál es el resultado en pantalla el resultado en pantalla vamos a ver algo hecho mal ya no no así probablemente porque realmente hasta este punto no estoy usando jquery el nombre 1 de la agenda es josé vicente sin embargo el nombre no estaba bien cargado pero ahora veremos por qué dos nombres dos y el nombre de dos en la agenda es cual es decir lo que quiero que veas realmente es que es como el nombre ahora ya no es una caja ahora es un armario donde cada cajón está la cajón de un número y cada número de cajón puede guardar una información diferente a mi voluntad lo que he hecho es crear ahora cuatro entradas básicamente cuatro entradas de esta agenda para ilustrar t el para qué nos puede servir trabajar con matrices dentro de dentro de asset pero supongamos que ahora vemos una escena y pongamos que las queremos devolver la agenda de la pantalla queremos que la cantidad nos diga este esto general de teléfonos no se dice en el correo estaba jorge está atado a inventar un listado llama al organizador de agendas de teléfonos en un futuro listado de productos nosotros ya conocemos es la sorpresa pero nosotros le conocemos una estructura de control que se avanzó lo que hacía el estructura repite equis veces una acción y por eso sí yo sé x el problema si yo sé que tengo una agenda que va del 1 al 4 le digo for bar en el que empieza siendo 1 hasta que m sea menor que 5 y cada vez que pase por aquí en el más más lo que la práctica quiere decir bs 1 a 4 le voy a decir de una vez nombre más nombre porque él porque en la primera vez era un nombre euro la segunda vez será dos nombre n 2 será recorriendo una ajena nombre más un espacio teléfono más teléfono qué más email y por último déjame evidentemente que me meta aquí un breve para que salte la línea cada vez así que yo aquí realmente que tengo bueno pues tengo nombre josé vicente teléfono tal email nombre juan teléfono tal email lo que tengo básicamente con una sencilla lista con un sencillo el bucle fort que parece perfecto y que no sirve para nada gracias y qué sirve que es en un momento dado como te podrás imaginar es el momento donde tenemos una fina valencia de productos quieres vomitar en la rampa ya todos los productos para que el cliente los pueda elegir soy el problema el problema aquí y por eso hoy antes de volver a y volver a divertirnos porque quería empezar un poco con esta parte de javascript y es que si vale esto es muy bonito esto es muy bonito porque yo sé que mi agenda ha empezado con el número uno y ha acabado con el número cuatro pero qué pasa si yo no sé y esto es lo más común mi agenda donde uno empieza y logra taba es decir cómo puedo hacer un force automático pues esto es la gracia existe una estructura de control que se llama force sino que se llama foris que se encarga de procesar matrices específicamente y al encargarse de procesionar matrices no me es necesario porque ella lo detecta automáticamente que le indiquemos cuál es la longitud de la matriz bueno lo que vamos a hacer en este caso es crear una pequeña variación con una una estructura de control que se llama fortín que en otros lenguajes de programación son 0 for its pero que sirve lo mismo para lo que sirve de java sé que es básicamente no tener que saber tú como un ser humano los índices el número del índice es típico de madrid porque esta gente de teléfonos por ver cuatro teléfonos con público del 40.000 y tú cómo lo sabes pues el programa se supone que lo gestiona pues ese fortín nos sirve para cambiarlo por este foro y hacer que no tenga que gestionar de forma el número de índices lápiz sino que sea ese color y el que lo gestione tengo por aquí la silueta con lo cual yo reacciones los siguientes de copiar voy a pegar y hago esta diferencia y es que primero voy a crear con aquí arriba una variable de radar m ya que cualquier elemento parte tiene que existir y ahora en lugar de decirles como en un foro como es aquí las condiciones de inicio final e incremento yo aquí le digo por l y lo que sea y claro aquí se va mi nombre documento juntos rayos el terror como el punto hay que mezclar el son como persona personal el nombre vamos a ver lo que hace de momento esto me lo voy a comentar yo voy a comentar y digo por el nombre de error está arriba de dónde sale eso wright y nombre en el que quieres decirme jose vicente juan jaime jorge te das cuenta de la importancia de lo que he hecho todas ellas pero el futuro no pasa nada porque le pongas por lo que ha hecho porque fíjate que esto está comentado eso ya no sirve es está invalidado es que automáticamente me han sabido detectar cuántos elementos hay en la lista ha empezado por el primero y los ha ido recorriendo uno a uno hasta el último y cuando llegado al último simplemente ha parado es decir es como el foro pero otro material si lleva aquí por lo que sea por coronada por como va discurriendo el programa le pongo una matriz número 5 que se llama javier con este número del teléfono con este correo electrónico si yo era el vuelvo a ejecutar el código fíjate como ya aparece automáticamente javier al expreso del foro en el foro de otros lenguajes de programación lo que hace es gestionar auto más automáticamente la longitud de las matrices y esto no lo podríamos hacer poniendo variables con números sino sólo lo hemos podido hacer poniendo más grises es una de las bastantes ventajas que tienen las matrices sobre las reales con números y tú dirás si está siendo muy bonito pero qué pasa te has puesto en un nombre y ya está el fondo y el diferencial bebé aunque pasa allí tendría que hacer una vez otra vez para cada una de las cosas lo cierto es que no por qué porque si te fijas nombre todo esto yo lo que he hecho aquí es en el nombre con lo cual lo que ha hecho sacar el número de nombres que hay 35 pero casualidad que se viene también sirve para email para teléfono y para lo que sea bueno les puedo decir bueno sin cortar por qué no esto por aquí se lo ruego y tengo aquí nombre jose vicente el teléfono tal nombre pero con esta si quieres podemos borrar es capaz de confundir con esa estructura de control llamada for in está ahí dentro lo que hagas recorrer matrices sin preocuparme de cuántos elementos tienen ni de cuántos índices tienen ni de cuántos elementos tiene cada vez dice lo único que eso sí se nos pide dentro de lo posible es que los índices aunque pueden ir con el nombres para los médicos pero se notifique siempre que podamos supongamos en números porque luego es más fácil de procesar para monforte parte divertida de la clase porque vamos a volver volver a una parte de jquery específica de manejo de eventos y los manejos elementos el 80 por ciento de las veces te diría yo que son eventos relacionados con el ratón y el 20% restante es elementos relacionados con el teclado básicamente esta gran muchos programas que que te diría yo funcionan algo un poco alocados o tres programas que respondan nuestras acciones y cuando llegara algo entonces entrenaba a cualquier otra cosa de hecho técnicamente ya hemos visto uno de esos elementos de venta fue escrito por qué porque habíamos tener para que el programa hicieran vale hoy vamos a ver qué clic es sólo la punta del iceberg de lo que podemos hacer con el ratón dentro de jo de acuerdo por eso voy a empezar haciendo un proyecto es más errónea al alzheimer me voy a hacer un proyecto 3 dentro del proyecto 3 me gustaría copiar y pegar jquery punto carece y me gustaría copiar desde aquí todo esto para decir que el archivo nuevo hago un archivo un proyecto de html 5 y dentro del gel le pegó esto pero voy a grabarlo igual este ha sido mi fallo antes el proyecto 3 como index.hr l vamos a asegurarnos que funciona preso eliminó las funciones secundarias asociadas accesorias dibujo alert hola tamaños fuentes ya no necesito para este programa que voy a escribir particularmente y vamos a comprobar que esto funciona por tanto guardamos por tanto documento en vivo y bueno me parece que está funcionando correctamente bueno muy bien dentro del body voy a hacer un butrón a lo mismo y voy a hacer hola y voy a hacer un viva con el texto y luego ya sabes que yo tengo esa página fantástica que la encanta que es la página de clic xoom.com al abierto en prestación nueva que me sirve para copiar y pegar todos bien voy a empezar haciendo verdad para arrancar suave un ejemplo que ya conocíamos que es básicamente que cuando haga clic con el botón x pase algo quitamos desear y yo vivo cuándo cuando yo sobre el botón haga clic ejecutaré la función esconde y la función esconder paréntesis para los parámetros queremos influía la función esconde lo que va a hacer es seleccionar aquello que tenga el texto vaya siendo tenía y para seleccionar y lo va a esconder si quieres más convierte iba a hacer un federal que me gusta mucho más y él hace un final con de tipo cloud por tanto se haga ahora así verdad tengo que aguardar que no tengo un botón que cuando le hago clic desaparece poco a poco el texto y aquí estamos ya que estamos de derecho que te voy a enseñar más funciones de eventos de manejo de dentro especialmente con el ratón pero también en otra cosa no es que sea más o menos importante pero es otra cosa te voy a enseñar a comprimir el código y esto yo no sé letra a gustar por tanto yo te lo voy a enseñar y tú lo usarás o no lo usarás según lo que tú quieras hacer qué quiere decir esto hasta ahora yo este código que acabo de escribir cómo funciona la función porque es porque es un código que dice cuando abran predicción cuando haga clic al botón esconder y entonces tengo que declarar la función esconde aquí a continuación esto es lo que se llama una extendida de escribir es más compleja porque tienes que ir buscando escondes con de dónde está pero a la vez es más fácil de leer cuando vázquez que el botón esconde y esconde coja el texto y la sinceridad pero no podría escribir esto de una manera más comprimida la respuesta es yes we can hay un problema y es que si escribo en tensionado de la más comprimida también es más difícil de leer por tanto frío que acabo de diseñar una manera te voy a enseñar la obra no es que yo prefiera ninguna de las dos según el proyecto esté haciendo es decisión fue una hay veces que hizo otra de micro había hacer lo mismo en cada momento escoger la que mejor que ver por motivos personales por rapidez por legibilidad por lo que quieras básicamente en lugar de decirle oye esconder empecé a buscar una función que sea más contigo no aquí directamente te creó una función pero una función sin nombre porque la voy a usar ahora mismo y la función lo que hace es esto y pegarlo ahí y ya está y cuál es cuál es el efecto el efecto es el mismo problema cosas buenas cosas malas lo bueno es que he hecho es lo mismo escribiendo bastante veloz que también si quieres aunque en otros donde es muy en serio también si quieres es una de las funciones de jquery que es escribirlo todo lo más compactado posible pero claro la legibilidad del código se ha ido un poco por el deshago porque porque tengo hay un montón de cosas y digo madre mía que hace todo eso antes lo llevó no es más claro te fijas todo es ahí cuando en el botón haga clic como cuando en el botón haga clic ejecuta la función que coge el texto y ya son autores lo leído así es fácil retuviera así que todo esto antes que después el paréntesis y batí el punto aquí pues lo difícil es lo difícil por eso no te recomiendo en ningún caso tirarse a la piscina a escribir código comprimido sin antes haber escrito unas cuantas semanas hacer lo mismo ponte a escribir ahora así como así cuando ya haya escrito el código español te pongo a escribir con huevo primero aún así fallarás porque todo el mundo fallamos porque alguna como te dejas alguna paréntesis te dejas algún puntito te dejas y ya esa vez que ya estamos en java si esto ya los 7m ellis ya los css por tanto un puntito un dólar unas comillas que te dejes solo uno que te dejes y ya no funciona nada y así bajaba siempre es muy perro y no te dice porque se equivocaron y cómo arreglarlo uno de los días con hamás es ir demostrando digamos hasta dónde llegan a olivera no para que te metas ya sino para que sepan a dónde te puedes meter vamos a seguir con los eventos de y vamos a seguir modificando sobre todo modificando este evento que se llama que el evento clic nos sirve para definir el clic ya sabemos del ratón que tenemos todos en la mano probablemente a menos que es más común el ratón en la tableta es esencialmente el caso es que no nos damos cuenta que el tic del ratón realmente está decidido está segmentado en dos acciones que se llama un clic yo lo que hago es pulsar el botón y de expulsar el botón a eso se le llama click dado cuenta que hay algunos programas que no aplican una función hasta que no sueltas el ratón algunos programas que haces clic dices al no tener recursos y saca está el rotor a la secuela no quiere ser el botón y cuela desde roque suerte tal es por qué pues porque hay dos eventos del ratón separados que se llama ground clic lo que hace es simplificar los sistema igual lo que hace es un clic y ya está pero si quieres especificar un evento sólo ocurra el mouse de pausa lo que hacemos lo siguiente por ejemplo vamos dar un es cuando llamó cuando yo pulso accidente el radar es lo primero que pase cuando haga un clic por tanto pongo manos hago clic aquí y en cuanto clic aquí vamos a ver la documentación porque hay algo que me está fallando el mouse tanto le voy a quitar esto aquí vamos a ver y es el más buscado el problema es que yo ahora en cuanto clic sin soltar ya ha desaparecido es dado en cuenta que no he soltado todavía el ratón cuando el suelto realmente da igual porque ya ha desaparecido el que es maldad vamos dar es que cuando hagas clic en cuantos bases el botón de cuando pulsas el botón y lo mismo sirve para un ratón normal para un touch pack de teclado o para el magic trackpad de mar o para una tableta cuando yo pulso y mantengo pulsado la primera vez eso es maldad y cuando yo lidero la presión o bien del ratón o bien de la tableta o bien del trackpad eso es malo sab por ejemplo ahora lo que voy a hacer es más entonces ahora lo que voy a hacer es que la acción no se realice hasta que yo no haga con el botón con el pelo del ratón hasta que no suelte sino libere bordando yo ahora o clic y no pasa nada mientras que sólo cuando hago mouse a cuando liberó el ratón entonces se ejecuta esa acción álex por tanto que hace clic al final pues clic al final es un mouse a porque aquí ese concepto se comporta igual sin a un clic a ok y hasta que nos suelto el ratón realmente es un manjar para qué pasa pues que es más fácil de recordar la palabra clic que la palabra la hoja vale no todo el mundo empieza con clic para que la gente sepa claramente qué es lo que estamos haciendo con el rollo bien pero te es que la cosa no acaba aquí la cosa no acaba aquí porque por ejemplo hay otro comportamiento que es mouse vamos a ver vamos a ver lo que hace es enseñar tele al cuando el ratón hace por encima el texto se expone van a quedar sin texto para que abbas porque hay otro comportamiento que te lo voy a escribir ahora a continuación copiar y pego que es vamos listo vamos a ver es cuando estés encima del objeto más lindo es cuando abandones el objeto por tanto debe decidir es decir cuando yo paso el ratón por encima el botón desaparece pero cuando hago más live el botón vuelve a aparecer p a lo que sí está claro es que pasa para este comportamiento que no está allá porque esto te fijas en cierta manera tú podrías pensar aunque espacialmente ss ss cuando pulsamos el botón por encima del roto por fin un botón el rodeo pudiera cambiar sí pero no es lo mismo porque fíjate que en css cuando pasábamos el ratón por encima de un botón de cambiar el botón pero javascript cuando pasamos el ratón por el final del motor cambia otra cosa que no es el botón pero creo que es parecido pero no es igual pero el caso el caso es que he tenido que escribir dos funciones diferentes una para lo que pasa cuando entró otra para lo que pasa cuando salgo la buena noticia es que en jquery tenemos una función que se llama hv que ahora vamos a ver a continuación que con una misma función castigaremos los dos comportamientos y tú dirás y si con esa única función a tve gestionamos del comportamiento es porque tenemos que tener más objetiva un clip pues porque depende del proyecto en el que estés te puede interesar usar más joven y nada más y ya está o bien te puede interesar usar hv oye te puede interesar lo que sea en definitiva es que tengas mejor pues vamos a ver lo que hace más que nada es resumir el mouse over y hermanos live podía hacer resumirlos en un solo evento entonces por ejemplo y lo puede hacer es cuándo haga clic en el botón smart 4h o berni button hv en el button lo que hace es hamlet in heart out es decir de coma y coma aquí hombre lo que pasa cuando hago y aquí pasar el sombrero que para ser perdonado al por eso yo hago esto como la función oculto lo tengo lo corto y lo que he hecho es hv and over fíjate que tiene una función por aquí separada por una coma sacó más decisiva eso es lo que pasa cuando meto el ratón dentro esto es lo que pasa cuando un método con fuera vamos a comprobar lo hago así método el ratón dentro y se esconde saco por fuera y sale lo que esto en definitiva es con con atv resumir esas dos funciones en una sola pero qué pasa es que una vez más estamos en las mismas que es mejor resumirlo o no porque ahora y tengo una señora longaniza que tengo que meterme ahí dentro para ver qué es lo que hace y qué es lo rebaje una vez más nos podemos separar las funciones podemos seguir todos juntos para elegir qué género de control o qué grado de dificultad queremos en el código bueno pues vamos a ver el evento que a mí me parece de los más interesantes y no más interesantes de eventos por la cantidad de juego que va a rodear nuestro medio 4 de hecho hoy me gustaría tener un software completo que creas lo que hace proyecto cuando tengo jquery y voy a hacer un archivo nuevo en html5 crear código ya sabes el código de javascript ordenando que escribir cada vez y voy a guardar esto dentro de la carpeta proyecto 4 como index con todo en la función de inicio de momento lo que voy a hacer es simplemente decir a leer todas para comprobar que funciona está en vivo me dice hola lo cual hathaway está funcionando perfectamente y ahora lo que voy a hacer es para usar esta página de periciar voy a copiar este ejemplo donde en este caso lo voy a usar el mismo portal dentro del documento que no tenía por qué algo que digo porque este accidente siempre que haga un mouse quiero ejecutar la función mueve el ratón en este caso lo voy a hacer extendido para que lo veas mejor porque pues porque la función mueve el ratón con el evento la palabra mágica la hora mágica que gestiona cuando muevo el motor va a hacer lo siguiente vamos yo aquí dentro del hall y voy a hacer un día no es un spa 3 qué voy a hacer otro espacio y de y de manera que yo cuando me coges aquello que tenga el x y me pones el texto vamos a ver el punto x que es cliente existente que es la posición en x del ratón en la pantalla mientras que evidentemente copio y espejo y digo que y quiero que me ponga la posición del código para medir el estado de graduado en punto cliente x yo creo que esto va más allá y yo voy a hacer así y fíjate hoy cuántos números contantes que están peleadas perdóname les voy a poner x dos puntos esto y luego quieren llegar dos puntos estamos a grados a horas entonces me dice que la equis fíjate que la equis cuando estoy en la esquina superior izquierda tiende a cero mientras voy avanzando en el frontal la equis va avanzando cuando voy avanzando en vertical la y va avanzando así que qué es lo que estoy haciendo lo que estoy haciendo es detectar la posición del ratón en cualquier momento en la pantalla y todas ellas y eso para qué sirve eso sirve para un montón de cosas podríamos pasarnos esta tarde explicando ejemplos de para qué decir de esto y no acabaríamos un ejemplo es el cristal o todavía es el que cuando yo subo el ratón que se me reconozca la posición del ratón para que haya un botón que vaya siguiendo al ratón y es que hay muchas otras por ejemplo una muy malvada que se me ocurre es la de ser capaces de registrar cuáles son las posiciones del ratón de la gente que visita la web y poder guardar la sorna base de datos para cualquier momento puedes recuperar nuestra saber que ante la gente y te visita a la gente de otros días hablamos de usabilidad y hablamos de mapas de calor el mapa del calor de lo que la gente ve es caro porque para cámaras calidad la cámara de todo eso pero ahora verás cómo hacer un mapa de calor de por dónde pasa el ratón la gente es barato y de interesa porque te interesa porque estudian al momento que tú quieras interesa que no les interesa tener un mapa qué podemos hacer con esto déjame hacer una demostración lo que podemos hacer con esto es algo tan sencillo como lo siguiente mira voy a hacer aquí un día con nivel demostración y ahora etiquetas de estilo el tipo texto css y le digo todo aquello que sea demostración todo aquello que sea demostración quiero saber es que tenga nada del original pero que tenga un wii de 25 píxeles haider en 25 píxeles y un background mira pero le digo ahora por ciclo absolute pero yo ahora quiero que la distancia alto sería de 200 píxeles y la distancia ley tiene 200 píxeles y fíjate que está ahí está ahí porque la distancia del top es de 200 píxeles y las distancias que me quiere decir con todo esto es que yo ahora igual que digo no es suficiente y ahora tenemos que además de esto quiero que de aquí el elemento que tiene dice demostración le pongas un css guardaste ss donde su led sean igual con todo cliente x pero no bajo la r x más un píxel copio pero y le digo todo lo que he hecho es que la fíjate como el bid me va siguiendo el ratón esta es una de las muchas aplicaciones que tiene ya ese día pues puede ser por ejemplo las aperturas nosotros que nunca lo puedes pulsar por fin porque cuando te vas hacia el semana verdad qué trampa el botón de saberse que la broma de la tienes pequeña pulseras y yo no llego donde se nos escapaba perdón por es un poco lo mismo pero no pasa nada porque nosotros ya sabemos cómo usar los animados 69 no sólo refrescar a una acción cada equis tiempo por tanto yo le puedo decir bueno pues esto estoy aquí con el cabrero aquí yo no fuera y digo función mira a ver la función miravet y la función mira a ver solo se ejecuta cuando mira a ver creo que no entre son los ejecutan cada tres segundos recuerda en mi misión mira a ver no tengo que eliminarlos al final cada 3 milisegundos está pasando claro una vez mira a ver qué está haciendo el club aquí que hacer esto voy a arriesgar más yo voy a poner un buen rato voy a decirle muere el ratón mira a ver lo quitamos porque ya no hace falta si todos funcionamos vamos función ponemos ahí sí no camacho en ese caso en él para luego que leamos más con esto pero antes de ello quiere enseñarte otra cosa mons y bien dejarlo como estaba ahí el jarro así y ahora vamos a hablar de otra cosa porque hemos hablado de lo que es la posición de xy la posición y nuestro respecto de que por respecto de la horizontal y la vertical de la pantalla la horizontal y la vertical de la pantalla pueden variar bastante con respecto de cada monitor cada momento tiene una solución pero la veas lo fácil que es en javascript detectar y usar la información de la anchura y la altura del navegador por el que estamos trabajo en el club para poner dentro d esta página de tres cursos de la referencia de javascript donde estoy viendo la referencia del objeto dental el objeto ventana es la ventana dentro de la cual se ubica en todos los elementos html todos los elementos la web que nosotros estamos viendo y es importante que sepamos conocer algunas de las cosas que nos da como por ejemplo dejémonos el en el height es el aila la altura de el contenido de la ventana de contenido de un armador la anchura evidentemente pero también también nos permite conocer cómo por ejemplo en el navegador es decir el tipo de la guerra pero que estamos usando o nos permite navegador deben conocer en la anchura exterior de la ventana aunque realmente el actual exterior el margen que hay por aquí arriba no nos interesa tanto o sobre todo sobre todo nos interesa también conocer el screen x o el script y es decir la altura y la altura de la verdad de cómo se relaciona nuestra web con el resto del navegador bueno lo que vamos a hacer básicamente por aquí este incluso no hace falta mi cuerpo jajaja dentro de aquí dentro de estos ríos operación y b 2x no conseguí altura navegador y el equilibrio altura primero y ahora copio pero anchura del navegador y así lo que hago ahora es decir bueno en el inicio en la que el elemento que tenga el live altura de navegador quiero que dentro de él se le ponga el texto de windows y punto del punto de tener esto esa altura en el hard y ahora evidentemente una pura copia le ponemos altura del navegador le ponemos inner guys qué pasa que si ahora vengo aquí me dice a altura del navegador 693 anchura 2 896 ojo no estamos hablando de la ventana del navegador por donde el navegador es esta ventana blanca de aquí esto fíjate estas tareas que señaló hago más pequeña nevera y recargo y recargo media altura del navegador 399 mientras que altura 6 más de 3 porque es mucho más alto que ancho es estar bien esto está bien pero hay veces si tú dices no crees que además yo no sólo quiero saber cuál es la altura de la ciudadela valor y además quiero saber cuál es la resolución de la pantalla que tienes visitantes bueno pues esto lo vamos a medir igual básicamente con otra propiedad de window que es cine y si es que en y por eso lo que voy a hacer es copiar estos dos en estos dos fans y decir altura del monitor y actur a él montoro es pan de anchura altura monitor anchura y ahora lo que hago es decir que aquí coke lejos esto qué es esto era lo que yo quería convierte pero si digo windows punto screen x creés 33 x estas alturas bien y mente y esto es punto con lo cual fíjate qué altura del monitor no me lo dice pero voy a ejecutar momento de navegador normal eso lo van a ver por tanto y el agua nada ah y los ejecutó en un navegador o lo que sea y un poco menos está diciendo ahora vamos a averiguarlo porque no me está diciendo del navegador la altura no ande windows que vamos a hacer es screen junto whisky no esto es la altura por tanto silvia heart y escribí punto with ya que no nos estamos recibiendo el verdadero error sino que no estamos recibiendo a la pantalla del momento describen junto a horas y vamos a probarlo retornarla dije pero yo era mi hermano – ejecuto por aquí y debo haber escrito algo mal así que me dice que el monitor es de 1920 x 1080 es cierto que no está pero es que lo demuestra que por tanto no era última marcador donde yo lo quería poner si no era en gran monitor de acuerdos y algún amuleto ya han muerto si ahora guardo y recargo de aquino vacío que está funcionando pero vengo aquí y fíjate que me está diciendo algo está bien tanto la altura del monitor como el punto anchura del navegador oxígeno correctamente el navegador fíjate que tiene mil 29 píxeles desde aquí hasta aquí 898 hasta aquí y luego el monitor tiene mil 900 píxeles desde aquí hasta aquí y 1080 píxeles desde aquí bueno y por último porque podría alargar el hombre al alargar este ejercicio para que veas todo es de información para que os sirve qué podemos hacer con ella pero quería hacer una cosa y es hacer un spam y decir navegadores y los navegadores navegador y en la referencia del objeto windows tenemos para mí en la referente al objeto que me diga aitor entonces sigue como por aquí quiero saber el navigator está vivo la tengo aquí y en navegador screen punto bien alto no es un punto punto es una propiedad de madera guardo recargo y me dice que una vida entorno es capaz de decirme consolarlo window navigator no es capaz de hacerlo 1 y no hay otro que pueda decir por tanto más vamos a ver la vida de noche vale vale pero quiero un ejemplo a comer mal director a córner vamos a guardo ah recargo hubo como sí y evidentemente fina que en este caso mi nombre es cierto porque es chrome [Música] ma a comer más en el más adverso todo esto si yo seré dicho es mejor ella puede ser el nombre completo en estos 25 en macintosh con la versión de mac con la versión de en este caso de weaver y esa pared que estoy usando si puedo saberlo prácticamente todo del visitante tiene está licitando la página y por tanto y esto es lo que vamos a hacer en ejercemos a continuación que guardarlo en una base de datos así así y por tanto mozilla y del macro 6.8 y éste encontró un versión 21 un safari en esta hora que nos ocupa a continuación yo lo que quiero es hacer una demostración de ajax y lo que quiero es también demostrar cómo mediante jquery podemos conectar a brad pitt con php y por tanto con una base era de este ejemplo tuviera lo mismo probablemente no comprenderemos la mitad del ejemplo no comprenderemos la mitad de php porque tenemos historia php lo importante es es comprender lo que hace más que como lo hace y hasta ahora he conseguido programar una aplicación que me dice dónde está el ratón en mi página web me dicen a la altura del ganador la anchura el monitor y el navegador pero yo qué puedo hacer con esto yo no puedo hacer nada con esto realmente porque cuando cierro la página esta información se va a perder así que yo lo que quiero de alguna manera es ser capaz de poder guardar esta información de manera permanente en una base de datos para más adelante es lo primero que voy a hacer es si hablo de bases de datos automáticamente prácticamente en mi cabeza tiene que aparecer la palabra piacere base de datos es hablar de php o de s&p de jsp dentro de un bazar de servidor en nuestro caso va a ser php y trabajar con php no es tan fácil como lo que hemos trabajado hasta ahora porque estaremos trabajando con html y con java selling no hace falta instalar nada prácticamente por ordenador para trabajar con php hace falta convertir nuestro ordenador en un pequeño servidor web y eso es mejor de hecho sí que es un problema es un plano muy grande porque porque hace que un ordenador no es de la doméstica se convierta en un origen un servidor web haces algo que para hacerlo bien hace falta horas días e incluso semanas para conseguirlos pero sin embargo hay atajos porque nosotros no vamos a convertir este ordenador en un servidor web lo que vamos a hacer es convertirlo en un pequeño servidor web para poder hacer pruebas para poder desarrollar programas en un servidor por tanto este proceso de porque de montar un servidor en nuestro medio se puede simplificar con paquetes como uno que me gusta mucho que es el saludo escrito con 23 nos vamos apache friends chart y tenemos para windows para elsa para minutos sanz para windows y sean para marcos 10 que es evidentemente en este caso es que vamos a usar champ que quiere decir este nombre bueno la x es de punto lo que quieras punto 1 w para windows mail para la para linux el man panamá o sano para solares a la es de aparte la n es de mysql la primera p es de php y luego a de gente que dice que la segunda p esp externa pero todo caso me da igual porque lo que vamos abajo y le digo que me lo quiero bajar en download chamacos 1.7 punto 3 es un binario universal y en un momento nos lo vamos a bajar vamos a esperar un segundo a que empiece la descarga y garantiza les quiero descargar este archivo y es un archivo que ocupa 81 megas ocupa un poquito unos pocos minutos estará bajado pero no debemos no debemos asustarnos por una razón muy sencilla es que es un archivo que él solito instará todo lo que hace falta para que la máquina tenemos seguir funcionando para que el servidor esté funcionando hace falta un montón de operaciones y configuraciones y ahora tenemos que ser automatiza ese proceso de una manera brutal por tanto la descarga son 80 megas pero a cambio en esa parte contienen un montón de cosas que nosotros no nos vamos a tener que preocupar la red instalada y julia literal instalamos de contribuir en ella solas y empezará a funcionar y vamos ahora el samp descargado vamos a instalar los problemas de tener que abrir algunos permisos de esta máquina o saberlo bien voy a arrastrar el santo a aplicaciones qué raro nunca rápido a valeria dirección son 302 amigas y ahora me voy a aplicaciones estaba allí en el finder me voy a aplicaciones y dentro del sunp a protestar hoy y dentro del sunp voy a abrir el control panel de control panel bien es una aplicación que ha sido descargada de empezar seguro que desea ver este ítem si me he hecho de esta aplicación así cabe y esta aplicación lo que hace es permitirme arrancar apache mysql y el servidor de fp que esto para ti ahora mismo será como valentino pero no pasa nada porque yo te lo digo apache es un servidor de páginas web y mysql es un servidor de bases de datos por tanto lo voy a hacer es pulsar estar y si todo va bien en nombre de formación contraseña cursos en el curso su curso curso si todo va bien ya lo debería poner verde lo cual me dice que aparte ya está aparcado y mysql lo mismo mysql ya está arrancado lo cual la práctica debe querer decir que ya puedo empezar a hacer páginas en thc ya que ahora ya he convertido mi ordenador en un pequeño servidor web armamento dentro de h&m ops bhp no debería decir esto poco a poco explicando paso a paso tres cargos bueno esto me voy a dejar por aquí guardado voy a poner localhost detenernos la hora mágica host simplemente para ver que ya funciona ya está instalado como un español y ahora incluso aquí dentro le voy a hacer una carpeta llamada curso llamada prueba y renombrar prueba curso si no pasaba casi que voy a acabar antes diciéndole que obtener información voy a decir que en compartir y permisos que cualquiera pueda escribir por tanto es bloqueo así cada cosa que haga no tendré que estar otra vez pudiendo verdad leer y escribir pues leer y escribir leer y escribir al igual que fueron dejar aquí hacer cosas aquí al cierre y bueno creo un archivo que se llama mayor de cosas no creo quería hacerlo con efe crearon y los guardo como y aplicaciones 72 prueba index.php dentro del 9 dijo hola me voy aquí los gajos prueba y sale ola lo cual quiere decir que ya estoy llegando a ese archivo verdad es más ahora voy a hacer una cosa que no vas a comprender y es más voy a accionar muy bien ya ah porque hace unos días creo recordar que lo bajen por rama que era el heavy tenemos la primera imagen en esto el ganador por tanto en aplicaciones busco el health y si veo que no está me lo voy a volver a bajar por tanto s x para más este tarda mucho menos bajarse deshonrada más pequeños 6 si no siempre me muero me lo descargo a lo mejor para en los pocos segundos de verano

Deja una respuesta

Tu dirección de correo electrónico no será publicada.