Curso de JQuery en Dreamweaver

a continuación vamos a ver j cuero j es un framework de javascript que nos permite automatizar todo el código que escribimos en el mundo el lema de jquery es escribe – y además cosas y al final lo que hacen es prácticamente eso es permitirnos escribir menos código por que automatiza el código y nos permite crear más contenido con menos dificultad lo primero que vamos a decir es que jota es la librería que nos tenemos que bajar nos tenemos que descargar y de donde la bajamos es muy sencillo entramos en jquery punto net buscamos contacto donde entramos en j punto com j [Música] cada uno y básicamente dice que esa vieja basti que hace escribe menos días más así que hacemos clic aquí y lo que vamos a hacer a continuación esta es la página principal que podemos elegir descargas hablaremos de plugins que son muy interesantes jquery para interfaz de usuario pero el primero creamos este en definitiva es bajarnos el jota puede bajar las librerías para poder usarla para poder vincular y poder usarla lo primero que tenemos aquí es la opción de bajar la librería en dos formatos o bien la librería para producción o bien la librería para el desarrollo cuál es la diferencia cualquiera de las dos nos va a servir sin embargo si yo elijo la librería de producción y pincho el autor comprueba de que este es el archivo jquery que me estoy bajando el jquery a día de hoy 164 mínimo 1000 que como podemos ver tiene todo comprimido tiene todo colapsado en principio que tenemos que usar la libra de jquery la vamos a usar pero llamándola no hace falta tocar nada dentro de la librería sin embargo si en algún momento queremos la librería del desarrollo queremos el framework del desarrollo tenemos la versión de volumen en lugar de ocupar 30 años tras ocupar 229 crash y que si descargamos evidentemente ésta no está comprimida ni está minimizada sino que está todas como digo lo normal evidentemente es la jarra la librería de producción porque estamos descargando en cada página que necesitamos 31 casas teniendo en cuenta lo mismo y lo que voy a hacer es download tengo por aquí la librería entera jquery y ahora lo que voy a hacer es pinchar en este caso en la herramienta google chrome guardar página común y me voy a hacer aquí en documentos me voy a hacer una carpeta que se llame jquery j juega y lo que voy a hacer es guardar por una parte este jquery ya lo tengo guardado y ahora me voy a bajar la producción la minimizada está aquí vengo a este botón guardar página común y me bajo la por tanto ya tengo este es el primer paso que tenemos que hacer prácticamente al empezar a desarrollar cualquier página para luego comentar en otro paso hay otra posibilidad que es en lugar de bajarnos jquery usar una versión online que tiene google permanentemente publicar y llamar a nuestro disco duro tendremos una página de google tiene poco las horas de comenta porque si un día por lo que sea google decide que da de baja atrayendo pues nuestros proyectos que va a llevar par de años publicados de repente dejaría de funcionar por eso por lo poco que cuesta y por lo tanto preocupa es ir más partidario de bajar la librería guardan nuestro disco duro bien pero que tenemos ahora bueno pues ahora lo que tenemos voy a sacar navegador de sacar el explorador ahora lo que tenemos es que en los documentos tenemos jquery tenemos dos archivos el 164 mínimo en unos es plato completo cada vez que yo haga un ejemplo de jquery lo que voy a hacer él se está llamando a esta librería por tanto va a ser un poco rollo tener cada vez que llamar a la universidad jquery y un 1 punto 6.4 punto lo que sea por tanto voy a la mínima por ejemplo [Música] hago una copia y lo llamo j cuello por tanto así cada vez que llamen esa librería lo que estaría haciendo es llamar a un archivo llamado jquery donde luego en cualquier momento lo que puedo hacer es que existiendo que la habilidad jquery en lugar de la mínima se haga completar la cambio y mis páginas web etcétera por dónde empezamos por aquí y vamos a empezar explicando cómo funciona cómo hacer uso de la librería de jquery así que voy a hacer una carpeta nueva 0 1 y ahora vuelvo a gregg weaver ahora sí minimizó esto pues en un nuevo sitio la posición que se va a llamar jquery no es obligatorio por supuesto los sitios y esto simplemente pactaron en este sitio vamos a preocuparnos de aprender y aplicar jquery y les voy a decir que la carpeta del sitio local me voy a hacer una cosa voy a hacer una cosa y esta carpeta jquery por unas razones que explicaría luego no va a estar en documentos sino que estará en una carpeta en el disco local llamada zhang hc docs ahí va a estar la jquery y más adelante explicar por qué en esa carpeta específica así que era administran sitio sin cartera del sitio local antes de correr más lo que voy a hacer es ir al equipo local al disco local a la carpeta sant a 7 talks y voy a decir que voy a trabajar en la carpeta j y así que seleccionó así que guardo y tengo ya ahora como puedo ver en mi sitio web configurado de jquery a continuación lo que vamos a hacer es crear un primer archivo html donde lo primero que haremos es cargar nuestra nuestra librería a nuestro framework jquery que tenemos que hacer por tanto vamos a ir a la carpeta 01 y dentro de la carpeta 01 voy a hacer clic con el botón derecho para crear nuevo archivo y voy a llamar a este archivo index.hr por tanto cuando le critique menos que este archivo está dentro de la carpeta hacer uno con doble clic lo que voy a hacer es entrando dentro del código y entrando dentro de hertz voy a importar nuestro spirit que va a ser el siguiente para importar un script de javascript lo que voy a hacer es estudiar una carpeta script tengo que especificar qué tipo de descrito estoy metiendo en este caso es un escribir tipo texto barra javascript a continuación si yo hiciera esto y pusieran aquí una etiqueta del cierre de escribir las etiquetas de script funcionan como cualquier otro tipo de etiqueta lo que estaría haciendo es escribir entre la de apertura y la de cierre mi contenido a las que sin embargo lo que voy a hacer en lugar de eso es decirle que no voy a escribir aquí jamás ti sino que voy a elegir un short o un examen jamás pincho en sos examinar y lo que hago es elegir este archivo jquery gateway así que pinchó aceptar veo que la url es dos puntos barra jquery es importante pincho aceptar y el programa por tanto lo que ha hecho es importarme mi librería de jquery el resultado en pantalla es ninguno porque se ve el diseño lo único que he hecho de momento es traer jquery y preparar para que sea usado cuando yo lo necesite pero de momento lo que hago simplemente es importarlo una cosa muy interesante igual que ocurre con otras muchas etiquetas html es que si en alguna ocasión que aprende esto abajo si en alguna ocasión estamos trabajando en un navegador que no soporta javascript lo cual a día de hoy ya es bastante raro podemos poner entre el script quien escribe un mensaje de tu navegador no soporta javascript y estos ejemplos que una de las grandes ventajas que tiene que tener javascript es que es un lenguaje de programación pero la desventaja es que al ser un lenguaje de programación si no nos ponemos las cosas perfectas nos da errores de sintaxis en este caso esto no lo vemos hasta ahora del html y vemos que en este caso lineweaver nos está marcando en rojo la línea en html digamos a considerar que no había errores y además dice hay un error de sentar islandia 10 así que lo que me dice es que no hay ninguna instrucción de javascript que se llame tu navegador no soporta javascript es lo correcto en comentarios por tanto si realmente en un comentario y los comentarios de javascript son prácticamente iguales en los comentarios de css ya no dará ningún problema si pongo por ejemplo barra asterisco y pongo al final asterisco barra es decir como como si fuera css ya no hay errores de sintaxis porque consideran que esto de aquí es un comentario que es lo que va a pasar la torá pasada es que si nuestro ordenador soporte java spine entonces estas siéntense intentar dar un comentario y no se verá pero si nuestro navegador no soporta javascript esto se interpretará como html y nos vemos buen toque pero aún así esto que te daría a revilla no está necesario porque prácticamente cualquier navegador no soporta javascript lo que vamos a hacer a continuación es demostrar como el código general siempre es más y más corto y más sencillo que el código que encontramos dentro del casting así que viene una carpeta llamada 02 de la carpeta 02 terreno la quiero aquí sino que la quiero dentro del sitio asiste la nueva al sitio tengo mi carpeta 02 donde hago un nuevo archivo llamado index.hr ml dentro de este archivo index lo que voy a hacer es básicamente en el body son dos botones por tanto voy a crear un título hace 1 y digo al arte porque quiere usar la función de sacarme una página una ventanita en la pantalla y ahora voy a poner dos botones voy a hacer es 2 y ferrer y digo pues por ejemplo página 1 punto html yo digo [Música] con método tradicional cierro en el lado pero lo que voy a hacer es poner lo siguiente lo que voy a hacer es poner a h revés página 2 html y con jota cuenta en las dos páginas en cada una de estas dos páginas lo que obtendré es un botón y cuando pulse el botón tendré un alerta vamos a ver lo que pasa sobre la lista de diseño un momento lo que tengo simplemente son dos enlaces voy a poner un pequeño br en pequeño retorno de carro para tener un retorno de carro por aquí bien tengo ya mi archivo index y lo que voy a hacer ahora es escribir mis dos archivos página 1 y página 2 html por tanto aquí voy a crear un nuevo archivo [Música] imaginen un punto html el nuevo archivo llamado página de 2.7 ml recordamos que página 1.7 ml tiene el código correspondiente a lo que va a ser el código con hamás que exportan de esta página va a tener un simple punto que va a ser de tipo botón recordamos qué recordamos que previamente explicado que cuando quiero hacer un botón el formulario se hace pero cuando quiero que son puntos en genérico en anillo formulario es el de la otra cosa ahora si el mismo gusto importante ahora importante ahora les digo que el ide es el botón 1 y hasta ahora lo que tengo es simplemente esto se haga guardo y voy a index voy a previsualizar la página y me dijo localhost y voy a la carpeta 2 y me encuentro la del como método tradicional y tengo un botón voy a poner un palo así que en la página 1 pongo un balón y el minuto fuerza por tanto ahora guardo y recargo qué pasa cuando pulsar en principio no pasa nada vamos a corregir esto no pasa nada y lo que vamos a hacer ahora es importar antes de que se acabe el gel un script una escribe el tipo texto barra javascript cuyos horas cuya fuente va a ser una fuente llamada javascript punto js lo que estoy haciendo por tanto es llamar a un archivo que todavía no existe y ahora voy a crear llamado javascript punto js que se va a encargar definir cómo se va a comportar ese botón ahora mismo el archivo no existe por cierto qué pasa cuando llama un archivo que no existe no pasa a otro la mano de error por eso ahora guarda y el recargo el ejemplo comprobar como página 1 simplemente no existe el archivo no de error si pulso no pasa nada voy a crear por tanto dentro de la carpeta 0 2 un nuevo archivo que se llama es justo como yo lo especificado en html javascript js y es un archivo que va a tener el siguiente código externa no sólo javascript en havas bien básicamente tengo dos tipos de comentarios como en css cuando quiere hacer un comentario de una sola línea lo que vamos poner dos barras cuando quiero poner un comentario de varias líneas puedo poner el asterisco el barras disco y luego asterisco barra así que voy a abrir un archivo y voy a hacer lo siguiente garantiza un poco la propia parte del código javascript pero lo voy a ir explicando paso a paso lo que voy a hacer es añadir un evento este evento va a tener las siguientes características va a ser un evento relacionado con la ventana más adelante veremos eventos relacionados con ratón con carga de página con cualquier cosa que en este caso más va a ser un evento relacionado con la ventana concretamente le digo que es un evento que va a ocurrir cuando la ventana quede cargada por tanto load y lo que voy a hacer es inicializar elementos voy a llamar a una función que he inventado en el nombre que se llama inicializar tenemos con un retorno foros y esta función con este evento tiene que ser definida a continuación fijamos que entra estaba escribiendo me estaba dando un error porque nos faltaban argumentos en este caso de ser paciente intenté esperar al finalizar la línea así finalizó la línea y sigo 3 bueno lo que he hecho es llamar a un evento cuando la ventana haya sido cargada ejecutó la función inicializar eventos tienes la función no existe todavía la voy a crearlo para crear una función puso la palabra mágica function cerrar tropas nada le digo cómo se va a llamar esa función inicializar eventos javascript distinguen entre mayúsculas y minúsculas por tanto si equipos de mayúsculas a que tengan en mayúsculas también es una función en la que no se pasan parámetros por tanto pongo el paréntesis que sean referentes que se cierren para aunque no se pasen parámetros dentro de la función es decir o parámetros vacíos y ahora creo dos ya esta es la definición básica ejemplos que aparecen dos errores de sintaxis de una función en javascript es palabra mágica function el nombre de la función que yo lo elijo espacios por favor por sobre es que he quitado el espacio después con mayúsculas parámetros aunque parezcan vacíos y entre las llaves voy a poner el código que ejecuta esa función y el código que se ejecuta es el siguiente primero define una variable con la palabra mágica bar y le digo en verlo no pasa nada bart botón 1 atención recordemos que nuestra página botón tenía el motor 1 sí y mao y de calabaza en jaulas que tenía que poner calabaza si identificamos uno si desconoces por tanto barbot onu no es igual a document punto que el evento by y ven a verme extremadura también que escribiendo y que y de es pues es un botón botón 1 muy importante dejar anfield acabar cada línea con un punto y coma si no nos la jugamos ajenos de error quiero lo que he hecho es crear una variable almacenado en el que el ebit vive en la variable botón 1 ahora añado un evento af events y le digo ahora el evento de eventos botón 1 ya no es cuando se cargue es cuando haga clic en el link en este caso ejecutó la función presión botón que devuelve solos así que estamos profundizando un poco más en la madriguera pero todavía nos queda un poco de tenemos un evento que cuando la ventana se ejecuta inicializa eventos que se queda esperando aquí pulsamos el botón y cuando pulsamos el botón entonces ejecutar en la función llamada presión botón pero cuál es la función presión botón no existe todavía vamos a crearla así que le digo function otra vez siempre que llame a una función tengo que crearla y le digo función presión botón sin parámetros con en este caso es porque es el botón y con el siguiente código y les digo que la función es simplemente para la alerta y dice en la ley presionamos el botón no hay errores en taxis voy a probar este archivo guardo todo y ahora lo que voy a hacer es cargar esta pantalla recordemos esto es con el método tradicional en vivo pulsa mente y de momento no pasa nada porque te hace falta un poco más de código vamos a poner por tanto a continuación el siguiente código qué va a añadir una función más y la función en él va a tener los siguientes parámetros y va a ejecutar el siguiente código y de copiarlos desde unos de notas va a copiar los siguientes elementos en elemento nombre evento ejecutará la función con el resto de la captura siempre siempre cualquier función tiene los cuatro elementos pero lo que voy a hacer es crear una estructura condicional le voy a escribir los siguientes lo que hago en este caso es decir voy a poner esto con un poco de sangría a ver lo mejor que siempre y yo pulse el botón o entonces ejecutará la función definida lo que están haciendo en este caso es para el elemento añadir un event lista el event disney lo que hace simplemente es quedarse a escucharlo y esperar a que yo pulse el botón del ratón a ejecutar la canción vamos por tanto a guardar vamos por tanto ahora a ejecutar aunque podría ejecutarlo en la vista diseño no porque ahora estoy en la banda javier vamos a ejecutar vamos a pulsar el botón de pulsar y comprobamos como solo en este caso ha funcionado a leer a leerte en este caso está diciendo as presionando el botón vamos a repasar el código una vez más para ver de qué partes se componen tenemos el código javascript punto js y lo que hace este código por tanto es que tiene tres partes tiene una función que iniciales a veces es decir esta función lo que hace es decir que cuando el botón 1 se ha aplicado ejecuta presión botón defino presión botón que simplemente me saca una alerta es presionado el botón el problema está en que hasta que no ponga un event disney es decir un escuchado pequeño steve que se queda esperando a que hagas algo no ejecuta el código por tanto usando javascript tradicional hasta que no escribo todo esto no funciona ese simple botón de alerta [Música] lo que voy a hacer ahora es crear lo mismo dentro de una página 2 que estoy a cuando abra a página 2 donde haré en el mismo leer pero en este caso usando jota puede por tanto dentro de 2 voy a crear un nuevo archivo llamado página 2 y existe un archivo con este nombre que estoy aquí voy a crear un archivo llamado jquery punto js no es como y recomendable en dallas recomendable con esto voy a llamarlo con jota cuenta carbon archivo página 2 de html y de hecho hago lo mismo que en página 1 montaigne de tipo botón con el botón 1 pero lo importante ahora es que voy a encargar así en este caso el archivo llamado cono jquery punto j s bailan vamos a hacer vamos a hacer y la cuestión está en que además de esto además de este script este escrito se apoya jquery por tanto antes de cargar ese skin tengo que cargar dos puntos jquery punto js los que digo bien entonces funcionará por tanto que hasta ahora ahora no he hecho nada hasta ahora voy aquí le digo ahora quiero está siendo el método tradicional pero quiero hacer lo mismo con jota jota cuando esfuerzo porque lo he hecho en la página 2 lo que he hecho es forma parte llamada jquery otra parte llamar al archivo con j js que de momento está vacío pero en dobles momentos lo va a dejar de estar así que vengo aquí y lo que voy a hacer es arrancar mi primer archivo en jp el primero creó una variable llamada x y punto y coma me dirán qué error [Música] y con punto y coma finalizamos cada una de las líneas en lo que voy a hacer es que x es igual al documento por tanto dólar documento y una parte muy importante de jquery es que le digo el document red y le digo x punto reding evidentemente si x es igual al documento estoy que van a decir que cuando el documento esté preparado cuando el documento esté preparado entonces ejecutó una función y la función se va a llamar inicializar eventos socializar [Música] eventos lo que le estoy diciendo por tanto a esta función es que aquí le pongo los voy a quitar asturias cuando el documento esté preparado ejecutaré la función inicializar eventos y inicializar eventos tendrán los siguientes parámetros inicializar eventos si revisamos que utilizar eventos y punto y coma al final obviamente y la función inicializar eventos la escribí aquí abajo tiene mi función inicializar eventos sin parámetros y en el siguiente grupo y el código es creo una variable en tenis yo digo que la equis quiero volar llamar y esto es interesante al botón 1 es interesante porque en este caso j es que nos están evitando usar el jet element by the element bai y del queda reflejado aquí con este dolor en paréntesis y otra cosa muy interesante de jquery es que la sintaxis es muy parecida a css recordamos que el css con un punto en este caso lo que vamos a escribir pero verdad muy parecida aire a ceses y le digo que x punto clic es decir cuando le haga clic a aquello que sea x y x es el botón 1 ejecutar es la función presión botón así que tu organismo lo único que me queda aquí es definir cuál es la función presión botón es el botón respetando mayúsculas y parámetros eso simplemente es que le digo a leer expulsado un botón con jota cuello así que tengo un por aquí ya lo veo mi documento de jquery vamos a probarlo voy a guardar todo voy a probar esto en navegador y digo como método tradicional esto es lo que sale pero con jquery esto es lo que sale expulsado un montón con hot and away vamos a comparar por tanto vamos a ver este primer ejemplo en jquery que nos da si este es el código hecho de javascript veo que en javascript lo tengo que hacer todo el javascript tengo que introducir tengo que escribir cada evento que quiera que ocurra en el código sin embargo aquí tengo que escribir mucho menos código porque la mayoría del código ya está regido dentro del archivo jquery punto js es decir lo que hace jquery por tanto es darnos un colchón nos da una serie de funciones ya pre hechas para luego simplemente llamarlas de una manera mucho más simplificada mucho más rápida y mucho más fácil vamos a por otro carlos en este caso vamos a ser capaces de reconocer elementos en base a su idea en principio hemos hecho del ejercicio anterior pero vamos a hacer un ejercicio para poder seleccionar varios elementos según sus diferentes así que voy a hacer una cartera nueva en mi sitio jquery una nueva carpeta 0-3 y dentro de esta carpeta ahora que está abierta a un nuevo archivo semana de html ya sea el html y un archivo llamado aquí un archivo llamado nuevo archivo jq punto js así que dentro de mi archivo inventé html dentro del código voy a hacer dos cabeceras voy a hacer una cabecera hace uno 1 y es la cabecera h1 que voy a decir que para el fin soy el título 2 la cuestión es que si yo ahora veo estas cabeceras al principio son iguales y quiero asignar propiedades diferentes de jquery a cada una de ellas por tanto aunque más adelante veremos cómo maquetar según etiquetas de html ahora de momento vamos a ver cómo trabajar como jquery puede trabajar con inglés por tanto lo que voy a hacer es que esta cabecera en gary de llamada título 1 mientras que esta cabecera [Música] se va a llamar título 2 hasta ahora mi control de la humedad diseño de nuevos cabeceras pero ahora quiero ver de jquery ser capaz de poder asignar el comportamiento de esas cabeceras por tanto primero puede copiar de la parte anterior en 0 2 voy a copiar máquina voy a copiar el script y voy a llamar al script llamado tenemos aquí en la carpeta 3 j js y por otra parte recordamos que también tengo que importar obligatorio entre el ejercicio obligatorio siempre que trabajemos con jquery tengo que hacer dos puntos barra jquery punto js recordemos que este primer archivo está importando realmente en la librería este segundo archivo es donde voy a escribir el propio código así que guardo voy a previsualizar en la web yo ya voy a medir aquí le voy a decir que la carpeta 3 y tengo por tanto dos títulos el problema de los títulos es que todavía no hacen nada porque haya dejado miles de viajó de acuerdo pero no programado usando estar inferior así que ahora voy a cargar jq punto jsb eliminarlo otra vez de falta jq punto js y dentro de este archivo jq punto js voy a escribir el siguiente código empezamos igual que el anterior primero creamos una variable x y luego le digo que la x es igual al documento como ven y le digo que lo que voy a hacer todo lo que voy a programar ocurrirá cuando el documento esté preparado y cuando el documento esté preparado ejecutan en la función inicializar eventos a cosa importante dentro de jquery ya que en havas que tradicional los elementos de hamás que tienden a no ejecutarse hasta que no se han cargado todos los elementos de la página incluidos ayudar a los ballets así que lo que hago con esto con el reading es decirle que en cuanto pueda ser vuestra función a cargo antes de cargar nada más y le digo función inicializar eventos y la función es visualizar eventos y en el siguiente código por una parte es mark x x le digo que x es igual recordemos voy a seleccionar según el vídeo a almohadilla título 1 y le digo que cuando hagan clic en el título uno realmente xx para decir el título uno entonces ejecutaré la función llamada expresión título 1 ahora voy a hacer que cuando x sea igual a título 2 entonces ejecutaré x punto clic presión siglos ya tengo por tanto dos funciones punto y coma para costumbre para finalizar ya tengo por tanto dos funciones lo que le dicho de jquery es que cuando un sí sobre aquello sea lo que sea que tenga aire título uno ejecutará esta función que no existe todavía y cuando haga clic sobre aquello que tenga aire título 2 ejecutaré la función presión título 2 por tanto ahora lo único que tengo que hacer es ejecutar tratando script cada una de las dos funciones expresiones título con mayúsculas 1 sin parámetros y tiene el siguiente código y lo que voy a hacer es definir otra vez una variable x y decir que siempre que sea dólar entre comillas almohadilla título 1 de equis quiero modificar el css y quiero modificar concretamente parejas de propiedades quiero que el color pero entre comillas quiero que el color sea como redd el color se convierte a color rojo tenemos que hacerlo por parejas de propiedades más cosas que puede hacer x css quiero que el bhang a un color sea igual a green y por último el css como comillas quiero que la family o sea cubierto por ejemplo ocurrieron ya tengo presión título 1 en este caso voy a hacer presión y culos pero sin título 2 se referirá a todo aquello que tienes la idea número dos y lo que voy a hacer es que el color sea bloom [Música] el background color sea hello y la fuente por ejemplo que sea la mejor vamos a probar este código en este caso este código es bastante fácil de comprender simplemente aquí arriba está cargando las funciones siendo cuando haga clic en prestación título 1m cuando haga clic en título uno ejecutó esta función cuando haga clic en títulos ejecutó esta función de aquí están las consideres definidas así que ahora guardo ahora recargo y en cuanto haga un clic sobre esta función vamos a ver por aquí que está fallando y en este caso el error está en que la función no va entre paréntesis sino que los parámetros de la función van entre paréntesis vamos a preparar ahora este código igual que aquí igual que aquí volvemos ahora al código y recargamos y ahora si hacemos clic todavía vemos algún error vamos a guardarlo todo vamos al navegador todavía hay algún elemento que corregirá otro claro que nos falta es que las definiciones el jquery tienen que estar usando el dólar por tanto colocamos un dólar aquí tocamos donde aquí igual que lo hemos colocado aquí igual que lo hemos colocado aquí ahora guardamos re vamos de nuevo vamos a ver ahora recargamos y tenemos otro error por alguna parte otro error que vemos en la pantalla es evidentemente que presión título 13 minúsculas látex mayúsculas sin embargo en las funciones todas minúsculas por tanto sólo esto ya puede hacer que no reconozca correctamente la función es decir está esperando a que haya corte función que tenga todos minúsculas por eso una vez más guardamos comprobamos el código recargamos y ahora cuando hago clic ahora sí que tengo que se convierte en la fuente a rojo el color de fondo en verde y la fuente se cambia a courier mientras que si pongo sobre el título 2 lo que hago es ejecutar el fondo amarillo el color y lo que sea hasta ahora lo que hemos hecho con la selección por idea es decir que cuando pulso el elemento título 1 quiero que se ejecuten presente 11 en definitiva ha sido un poco todo el manejo porque cuando llegué impulsados al título 1 he ejecutado por 100 títulos uno que cambiaba a aquel elemento que tenga sentido uno pero y si quisiera que presionen t 11 cambiará al título 2 pues lo que voy a decir es que presione 11 en lugar de cambiar aquel elemento que tenga el y de uno cambia el elemento que tenga el título 2 y presente todos lo que va a hacer es cambiar aquel elemento que tenga el aire título 1 esto a mí me parece bastante divertido porque sé ahora recargo por supuesto para recargar los cambios porque a menos que ahora luego quedemos allá que es una técnica que recargas pero a menos que hagamos esto teníamos click en el título según clic en el 2 esta misma acción interesante porque es lo que nos abre la llave al poder controlar que cuando haga clic en un elemento x en la pantalla se modifique un elemento y en la pantalla no esté atado a hacer a modificar el mismo elemento por el juez haciendo clic en el ejemplo anterior hemos sido capaces de seleccionar elementos mediante su nivel en este ejemplo vamos a ser capaces de seleccionar elementos directamente mediante su nombre de etiqueta por tanto vamos a cerrar estas dos pestañas vamos a crear un nuevo una nueva carpeta la carpeta 04 selector por etiqueta y aquí voy a crear dos nuevos archivos index.hr l jq [Música] punto j así que el index vuelvo a abrir con respecto de la anterior vuelvo a llamar por una parte vamos a verlo dentro de la red vuelvo a llamar a jquery la librería y ahora le sigo llamando j un punto js bach y que es el que contendrá todo el contenido si cuidado protecciones de ml vamos a quitar el punto de html js pero dentro del bullying voy a crear una tabla bien de la tabla y lo que voy a hacer es insertar una tabla donde le voy a decir que quiero pues por ejemplo cinco filas por cinco columnas pueden ser tratarla de 100% lo que sea tengo aquí por tanto mi tabla voy a quitar este th me ha puesto una cabecera y no quiero cabecera y voy a poner por ejemplo pues aquí 1 2 4 y 5 para enrollar me voy a copiar y pegar esto varias veces 1 2 3 para veces o 5 veces y esto lo que nos da es una tabla como podemos ver aquí es lo que quiero en este caso es que cada vez que yo haga clic no hay una en un nivel sino en una fila entera de la tabla por ejemplo esa fila se convierte a tenga el color gris de forma no es ya no es ya un nivel recordemos que te r tratado es fila n es columna por tanto voy a ir al archivo jq punto j s este atrás las que había creado como html atrás no tengo error y lo que voy a hacer es lo siguiente vuelvo a otra vez a crear una variable x y le digo que x es igual a dollar document estoy refiriendo al documento y le digo que cuando el documento esté ready x punto reading en ese caso inicial hizo entonces así que ahora otra vez destino cuál es la función inicial hizo eventos con parámetros vacíos y tengo el siguiente código voy a definir voy a definir una variable x otra vez ah y le digo que x es igual a dólar y entre paréntesis si no directamente tierra es decir para elegir esto es como el csd está realmente para elegir una idea me hacía falta pero si no pongo almohadilla y no me estoy refiriendo directamente a la etiqueta html y digo de 4 x punto clic cuando haga clic sobre el elemento pr quiero ejecutar la función llamada presión final la función versión fila no existe por tanto la voy a crear yo ahora presión fila sin parámetros contiene el siguiente código una vez más una variable x a la equis le digo que dice para qué voy a decir otra vez que me quiero referir a leer si le digo this es decir esto a esto mismo es lo que quiere aplicar la siguiente propiedad de vigo css en la nuestra propiedad y le decimos que parejas de parámetros y pareja el back up color es igual a red haciendo esto lo que tenemos es que cuando el documento esté preparado a todo aquello que tenga la etiqueta pr le aplicó presión fila por tanto a aquel que haya pulsado le aplicó el color de fondo llamado gris guardo todo ejecutó ahora estoy en la carpeta 04 y lo que hago por tanto vamos a ver si funciona bien vamos a ver qué puede haber pasado al mundo de la red de falta de este registro y si le falta una igualdad acuerdo recargo a optimizar así lo que consigo es que cada vez que hago clic en algo que tenga la etiqueta tr consigo que todo el tr todo el terreno sobre el que haya expulsado se vuelva de color gris qué pasaría si lo que quisiera fuera marcar solo una celda atrás para marcarse una celda en lugar de tr podría ponerte de si pongo tener recordemos que es columna era recargo cuando pulso sobre una celda se pone de color gris atención porque cuando pulsamos un bcr se ponen toda la fila en gris pero cuando él pulsando sur de columna se pone solo es hacer la solución encontramos en el código compruebo como si fui al código del archivo html cuando yo pulso cr una sola etiqueta pr fila contiene a cinco columnas por tanto cuando impulso aquí realmente estoy grabando las tengo columnas el problema está en que si yo digo tv tendría que estar englobando a todas unas columnas que en este caso no será que cuando pulso tv cuando lo digo es sólo vis solo esta etiqueta se podrían hacer lo de las columnas se pudren activas se podrá ir es por columna y de columna 1 y de columna 2 y de una detractora de aquí y en lugar de material de maquetar por etiqueta maquetar a por ebay en este caso sí que podría ser otros columnas vamos a ver ahora una función que me sirve para ocultar según un selector css según el selector de id por tanto lo que voy a hacer es crear la carpeta número 5 a la carpeta 05 aquí por supuesto me creó para crecer y quedarme aquí dentro del disco local para ir ahorrando para los siguientes ejercicios 720 y voy a hacer una carpeta pega que va a tener los siguientes va a ser los siguientes elementos va a tener un index.html mejor no voy a tener que rellenar bastante bien el contenido por defecto voy a refrescar aparece en la carpeta tenga dentro de pega voy a hacer me va a decirlo index.hr ml voy a hacer un nuevo archivo j punto j s y como en los siguientes ejercicios estaría usando de vez en cuando una hoja de estilo voy a crear un archivo llamado el estilo entonces sc sabalera lo que a continuación es irlos copiando y pegando dentro de cada una de las carpetas así que copio estos tres y por ejemplo voy a hacer la carpeta 6 creo que estaba 155 lo voy a hacer esperar estos 3 y así me ahorro tiempo porque será recargo y voy a la carpeta 5 veré qué puedo ya empezar a trabajar con los archivos bueno pues lo que voy a hacer dentro de esta página es crear dos listas vamos a ir a las vistas y voy a insertar un botón de tipo botón cuyo valor [Música] es oculta y el ide botón 1 por tanto lo que tengo es ahora bajo el motor voy a aumentar 1 1 que se va a llamar lista 1 obviamente una y otra vez que soy llamarlo estados y ahora voy a meter dos listas no ordenadas así que insertó un html objetos de texto una lista sin ordenar método elementos de la vista cierto html de texto elemento de la lista con uno esta es la misma diseño porque se puede perder 2 3 4 y 5 con estos elementos voy a pegar el código para copiar también las etiquetas [Música] lo que abona listados en este caso la lista 2 en lugar de 1 2 3 4 así que tengo dos listas ahora para poder ocultar las basando la función de jquery necesito meterles un ide por tanto cojo el 1 y le digo que esté uno tiene el tire llamado lista 1 y este uno tiene el líder llamado lista 2 por lo que ahora [Música] voy a llamar otra vez a los dos archivos javascript los copió los perros guardo y ahora lo que voy a hacer es abrir el archivo js jq perdón en la página 5 y escribiré dentro de este archivo el siguiente contenido empezaremos otra vez para x x igual cuando el documento esté preparado por tanto x punto débil iniciales arte el verde la función de igual de importante que lo que pongamos aquí este igual a continuación por tanto pongo función escrito inicializar sin parámetros en el siguiente código y el código que tiene una vez más es va x x es igual seleccionó el evento al cual le estoy haciendo referencia y le digo que el elemento a la cual estación de referencia es botón 1 elemento en el que hago clic a quien va a modificar ese elemento vamos a verle a continuación x punto clic es igual contiene hace la función de ocultar qué hace la función oculta pues la función función ocultar sin parámetros tiene este código bar x x es igual a dólar y selecciona por idl y le digo lista 1 y la vista adjunto lee pero tengamos en cuenta que eso tiene almohadilla porque es un nivel yo lo que hago es decir que esto no quiero hyde no quiero ocultar es decir en aquí seleccionó los elementos que usted quiera trabajar y con estos elementos realizó esta operación vamos a comprobarlo archivo guardaron y ahora voy a la carpeta 05 y compre como tengo una lista 1 una lista 2 si pulsa el botón oculta se oculta la lista número 1 porque porque era la que tenía el botón el ine aquí está lista 1 voy a hacerlo otra vez lo que voy a hacer ahora es decir que en inicializar copia de este código y le digo si pulsa el botón 2 quiero ejecutar la función ocultados cumple la función cambia el nombre por supuesto y le digo que cuando pulse el botón o que he cortado el botón 2 ejecutaré la función o petardos y la función ocultados lo que hace es ocultar aquella lista cuyo origen sea listados recordamos que instaló eran esta de aquí por tanto me hace falta evidentemente un segundo botón es importante de moto2 porque es el que vive es el que me permite atarlo cuando pulses el botón que tenga vida el botón 2 es un poco lioso porque debemos imaginarnos en javascript de jquery con una especie de cuerdas que van entre sí cuando yo pulso esta cuerda entonces tirar de ésta recuerda si ahora ejecutamos comprobamos como si pulsamos este botón se oculta esta lista es impulsamos este botón se ocultan estas otras lo que voy a hacer a continuación es que en lugar de que cada uno de los retos de software de cada una de las listas mientras que el primer botón ocultará el segundo mostrada por tanto ocultados ahora en lugar de apuntar a listados va a volver a apuntar a lista 1 porque en lugar de ejecutar la función de jquery height van a ejecutar la instrucción show por tanto en el segundo botón no tendrá el radio oculta sino que tendrá el value muestra esto es imprescindible evidentemente ayuda a entenderlo así que digo guardar todo y si ahora ejecutó el ejemplo compruebo como el botón oculta oculta a la vista uno pero el botón muestra muestra de estado porque le estoy diciendo mediante ese trozo de código javascript que la función ocultar lo que hace es jaime pero la función ocultar 2 lo que hace es show de aquel elemento que tenga el y de cristal vamos a continuar vamos a estar trabajando con css con jquery pero en este caso entonces es externo antes le hizo como estoy viendo que en todos los ejercicios voy a usar voy a usar estos dos archivos lo que voy a hacer es pegarnos la plantilla así que despuntó html voy a hacer es dejarlos justo abajo del title guardar ferran y así voy a crear nuevas carpetas voy a hacer lo siguiente voy a crear una carpeta llamada 06 donde copiar y pegar en estas tres lo que tienen es que ahora la carpeta el archivo html ya tiene las llamadas dos archivos javascript yo no voy a grabar en cada lección porque se siente lo mismo así que ahora me voy a dreamweaver y recargo el contenido creo que tengo ya la carpeta 06 y dentro del 06 voy a hacer es abrir este index que voy a que ya tiene los scripts cargados y trabajo ahora con lo siguiente lo que voy a hacer es abrir un archivo html donde lo que quiero es cargar un trozo de código que esté ya previamente preparado en un cese es así que dentro del bullying digo lo del bullying voy a crear una pregunta una respuesta y un código cuáles de estas ciudades son escándalos cierro el parágrafo pero en unas cuantas ciudades además de voy a hacer usando clases en lugar de vamos a ver frank class y veremos que la clase es igual a sí y pongo por ejemplo valencia y pongo por ejemplo [Música] a abrir y pongo por ejemplo barcelona y pongo por ejemplo sonido y ahora voy a poner algunas ciudades entre escaladas voy a poner el spam pero sin flash como por ejemplo aquí pares y pongo por ejemplo aquí los dos así que tengo unas cuantas ciudades y unas de ellas las que son españolas tienen la clase igual a sí por tanto ahora dentro del archivo css dentro de estilos css lo que voy a hacer es cargar definir qué es lo que pasa con la clase si y le digo que la clase así juntos recordemos que almohadilla extraíble y el punto es para class puntos y equivale al background your color es que creo que cuando se marque el color de fondo se vuelva amarillo y recordemos que para esto además tengo que llamar al style por tanto style qué tipo texto barra css y le digo que el hr es estilo punto veces bien en este caso lo que voy a hacer es ya la visa diseño al no saber en dónde html y vamos a archivo guardar tengo el body [Música] no es cerrado correctamente bien el estilo por eso aparece a todo como si fueran estilo horas así que guardo [Música] cuarto por aquí voy a la vista diseño tengo algunas ciudades que todavía que todavía no han sido marcadas bien lo que voy a hacer ahora es poner un botón así que voy a index voy a la vista de código y antes de que acabe el bonito lo que voy a hacer es lo siguiente voy a poner un minuto de tipo botón donde su vida va a ser el botón y el valor el valor no tiene muchas historias es ver resultados lo que ponen en el voto así que voy a la vista de diseño verde afectado cuando puedes el resultado las ciudades marcadas deberán quedar resaltadas bien vamos a ver esto vamos a comprobar que tenemos estilo entonces a ese todo está bien marcado guardamos es lo que haremos es dentro del archivo j js escribir el siguiente código el código va a ser muy sencillo en este caso lo que vamos a hacer es archivo javascript es en lugar de decirle que queremos sacar los elementos del archivo css le decimos que le añadimos al archivo css aquellos elementos que queramos poner aquí vamos a hacer lo siguiente [Música] vamos a poner como siempre para x decimos que es igual [Música] y cuando el documento x punto débil cuando el documento esté preparado en ese caso ejecuta la función inicializa la función inicializa función inicializa sin parámetros tiene el siguiente código bar x x es igual al documento cuando el pulso del voto alguno 1 de tres puntos clic en ti para ejecutar la función resalta y hacen la función resalta pues la función resalta entre paréntesis sin parámetros tiene la variable x tiene que x es igual dólar entre paréntesis entre comillas punto sí y le digo que x punto css el baja un color y es igual a yellow vamos a probar esta función a ver si funciona correctamente por tanto guardamos ejecutamos en la pantalla estamos con vamos a ver estamos con y vamos a la carpeta 6 y en este caso vamos a ver algún error habrá que corregir pero cuando pulsamos ver resultados lo que he conseguido es que aquellas ciudades cuyo cuya clase era igual a sí tienen como podemos ver el ritmo y ver o podemos ver el código el background color es igualdad pero lo que tenemos por tanto es que mediante mediante jquery ponemos sobre escribir un código css y darle otras propiedades lo cual nos viene muy bien por ejemplo para un corrector de exámenes o para las cosas aquí o para poner en algo de artículo detectar las palabras clave del artículo por supuesto pues el poder detectar y te subraya definitiva comportamiento dinámico que no es posible hacer con html5 css sólo que empezamos vamos a continuar vamos a estar trabajando con css con jquery pero en este caso con css externo antes de eso como estoy viendo que todos los ejercicios voy a usar voy a usar estos dos archivos lo que voy a hacer es pegarlos en la plantilla y así los tengo ya para siempre así que entregan en html yo voy a hacer es pegarlos justo abajo del title guardada y así voy a crear nuevas carpetas voy a hacer lo siguiente me crear una carpeta llamada al 0 6 donde copiar y pegar en estas tres lo que tienen es que ahora la carpeta del archivo de pml ya tiene las llamadas dos archivos javascript en los voy a grabar cada lección porque se siente lo mismo así que ahora me voy a dreamweaver y recargo el contenido creo que tengo ya la carpeta 06 y dentro del 06 voy a hacer es abrir este index que veo que ya tiene los scripts cargados y trabajo ahora con lo siguiente lo que voy a hacer es abrir un archivo html donde lo que quiero es cargar un trozo de código que esté ya previamente preparado el 11-s es así que dentro del botín digo todo el wedding voy a crear la pregunta una respuesta y un código por ejemplo cuáles de estas ciudades son españoles cierro el parágrafo debe poner unas cuantas en ciudades además no voy a hacer usando clases en lugar de class y le digo que la clase es igual a sí y pongo por ejemplo valencia y como por ejemplo abril y pongo por ejemplo barcelona y pongo por ejemplo sevilla y ahora voy a poner algunas ciudades intercaladas para el spam pero sin clase como por ejemplo aquí país y pongo por ejemplo aquí los dos así que algunas cuantas ciudades y unas de ellas las personas españolas tienen la clase igualada y por tanto ahora dentro del archivo css centro de estilos css lo que voy a hacer es cargar definir qué es lo que pasa con la clase si y le digo que la clase así puntos y recordemos que almohadilla extraída y punto es para class puntos y equivale a mcgraw york color es hielo que cuando se marque el color de fondo se vuelva amarillo recordemos que para esto además tengo que llamar al style por tanto style qué tipo esto barra ss y le digo que la eché red 3 estilo punto bien en este caso lo que voy a hacer es si tengo ya la visa diseño al no saber index.html y vamos a archivo guardar tengo el móvil [Música] no encerrado correctamente bien el estilo pues aparecerá todo como se forme ahora sí así que guardo [Música] cuarto por aquí voy a la vista diseño tengo algunas ciudades que todavía que todavía no han sido marcadas bien lo que voy a hacer ahora es poner un botón así que hoy hay índices voy a la vista de código y antes de que acabe el bonito lo que voy a hacer es lo siguiente voy a poner un mínimo de tipo botón donde su vida va a ser corta no no y el valor el valor no tiene mucha historia es ver resultados lo que ponen en el botón así que voy a la vista de diseño ver resultados cuando todo está el resultado las ciudades marcadas deberán quedar resaltadas bien vamos a ver esto vamos a comprobar que tenemos estilo entonces ese todo está bien marcado guardamos pero no queremos es dentro del archivo j js escribir el siguiente código el código va a ser muy sencillo en este caso lo que vamos a hacer es archivo javascript es en lugar de decirle que queremos sacar los elementos de un archivo css le decimos que le añadimos al archivo css aquellos elementos que queramos poner aquí vamos a hacer lo siguiente vamos a poner como siempre para x decimos que es igual a doblar documentos y cuando el documento éste es punto débil cuando el documento esté preparado en este caso ejecuta la función iniciales la confió inicializa dos puntos inicialista sin parámetros en el siguiente código para x x es igual al documento cuando pulse el botón 1 [Música] 1 qué punto clic equivale a ejecutar la función resalta qué hace la función resalta pues la función resalta entre paréntesis sin parámetros tiene la variable x tiene que x es igual dólar entre paréntesis entre comillas punto sí y le digo que x punto css el background color i es igual a hielo vamos a probar esta función a ver si funciona correctamente por tanto guardamos y ejecutamos en la pantalla estamos con vamos a ver estamos con el jueves vamos a la carpeta 6 en este caso vamos a ver algún error habrá que corregir pero cuando pulsamos ver resultados lo que he conseguido es que aquellas ciudades cuyo cuya clase era igual a sí tienen como podemos ver el ritmo y ver o podemos ver el código el background color es igualdad quiere lo que tenemos por tanto es que mediante mediante jquery podemos sobreescribir un código css y darle otras propiedades lo cual nos viene muy bien por ejemplo para un corrector de exámenes o para cosas así o para poner en algún artículo detectar las palabras el artículo por artículo en definitiva comportamiento dinámico que no es posible hacer con html5 css solo y que empezamos a hacer escalas vamos a trabajar con el texto y en este caso con el texto de lo que voy a hacer es una vez copiar los archivos de plantilla por tanto uso los archivos pero no los copió y los pegó en una nueva carpeta que se llama 7 no voy a hacer un ejercicio de introducción de texto dentro de jquery así que ahora refresco el proyecto tengo ahora la carpeta 07 cargo immex punto html y lo que voy a hacer es lo siguiente una parte voy a meter un párrafo así que esto es 40 p una barba la razón que quiero en el texto el que sea y le digo que tenga el nivel a ahora lo que voy a hacer es meter por ejemplo una tabla voy a entre una tabla insertar tabla de 55 que se va a convertir en cuatro por cinco porque quitó la cabecera y dejó estas cosas esto tiene ahora mismo esta herencia y ahora voy a poner unos botones para aquí arriba antes del párrafo que van a permitir realizar varias operaciones inputs de tipo button y ahora es importante que te voy a decir valor de momento vacío y vive y ve a hacer este caso y de igual anboto no es importante y como ya sabemos por qué hacer que luego nos permite identificar los botones de acuerdo y especificar una acción para cada botón voy a nadar como digo copiar a este botón lo voy a copiar dos veces más y le voy a decir que este es de dos y estás a nivel 3 y este va a ser leer este va a ser cambiar y estaba sentada con lo cual este botón leerá el contenido del párrafo este botón cambiará al considerar el párrafo y este botón cambiará el contenido de la tabla tengamos en cuenta que este texto a continuación veremos que nos permite fragmentos enteros por ejemplo para meterme a los comentarios por leer lo que sea así que voy ahora al archivo j js y voy a como siempre una variable x amigo x es igual al documento y cuando x punto reading entonces ejecutó la función iniciales la función inicializar hace los siguientes llamar a los tres botones siempre la misma estructura función inicializar sin parámetros importantes dos llaves y contiene el código para cada uno de los tres botones marc x x igual el botón en este caso se podría hacer así con la declaración la misma vida separada x con almohadilla el botón 1 y le digo que x punto clic ejecuta la función borrada a la función leer tenía bragin perfecto ahora copio esto un par de veces más lo copio aquí y le digo que el monto no no lo ejecuta la función leer el botón 2 ejecuta la función escribir y el botón 3 ejecuta la función gala y ahora las funciones donde está el este voy a decirle que la función función leer sin parámetros equivale a bajar x x igual dólar y les digo el ibex de párrafo 1 vamos a ver tenía para uno contenía barras perfecto lo dejó con párrafo y le digo a ver y quiero ver el contenido del barra de amigos x punto si quieres que tiene ese formato así que ahora se ejecutó vamos a ver si no verá ningún error guardar todo me voy a la carpeta 07 y tengo leer y de momento tengo un párrafo que quiere decir este lo que está haciendo es simplemente el contenido del párrafo y soltarlo aquí si fuera nivel en lugar de poner párrafos que quiero si era párrafo que no hicieron guardarían sobre escribirían general en leer podría párrafo que no quiero decir estoy consiguiendo te jquery lea el contenido de la página web programas interesante espejo tal cual y escriba el contenido de la página web así que por eso vuelvo a drink weaver vuelvo al archivo jq punto js y creó una función que va a ser una función muy parecida la función que se va a llamar escribir define una variable apunta al párrafo y lo que va a hacer es en lugar de alert y en lugar de alertar al texto va a poner x punto texto y el nuevo texto del párrafo cuando hago una leer y alertó sobre lo que hay en el texto no tenemos leer el texto pero cuando uso directamente x punto text o lo que sea punto t es lo que estoy haciendo es introducir texto en ese sitio así que guardo el recargo y si leo leo el párrafo que no quiero pero si cambio lo que hago es poner un nuevo texto de pago para cambiar algo de contenido poner noticias nuevas lo veremos mejor en la elección siguiente o lo que sea una última entidad función es la función tabla funcional se define una variable x y lo que van a hacer es definir no ya un nombre de etiqueta como esto previamente la etiqueta pp otra vez x text lo que hace es a todo aquello que tenga la etiqueta tv nuevamente en el nuevo texto de párrafo comprobable hagamos ejecutamos cambiar cambiar texto del párrafo pero tabla cambia todo aquello que tenga pongamos por ejemplo un botón para auto rellenar el formulario vamos a ver a continuación como mediante jquery podemos introducir elementos completos de html nuestro texto sino también elementos con etiquetas html por eso a la carpeta 08 pego estos elementos y voy a driver voy a recargar la carpeta 08 y voy a empezar a programar lagarde de 08 voy a abrir index.html y dentro del fodin ya que ya tengo los archivos javascript seleccionados voy a crear un vino no tengas libre del formulario aquí por ejemplo pondré si quiero poner algo porque pone esta grabación aquí el formulario y ahora voy a aguantar en el formulario por tanto voy al link código y antes del día voy a poner a button [Música] con d igual a botón y con el valium igual a muestra muestra que lo que voy a hacer es mostrar a los pulse el botón aquí y se rellenará un formulario en html si era móvil a mi archivo jq punto j s lo que voy a hacer es empezar como siempre voy a [Música] crear una variable x a x le asignó en jquery el documento y le dimos con el documento esté preparado en este caso ejecuta en la función inicializar eventos la función inicializar eventos con mayúsculas sin parámetros va a tener el siguiente código lo que voy a decir es que creó una variable x la igual a botón aquello que tenga y de botón que sólo tengo un botón y quiero que cuando haga clic ejecutó la función presión botón que hace la función presión botón pues aquí venimos a la novedad no está la función expresión botón [Música] sin parámetros tiene el siguiente código y el código es par x x punto dólar igual a dólares efectivamente y buenas horas y aquellos que tengan a nivel en almohadilla formulario x en lugar de pensar x punto html texto una cadena html y el html que introduzco los siguientes introduzco comillas y el contenido del formulario o de aquello que quiera meter forma el formulario pongo con el equipo de texto [Música] y un input de tipo 2 voy a copiar a par de veces este campo para demostrar qué si ahora guardo y el recargo voy a por la carpeta 8 y pongo muestra lo que hace es imputar submit no parece creer pero correctamente imputar en su mente eso está mal ahora sí guardo y lo que obtengo por tanto una vez más este cargo es que en cuanto pulsó el botón muestra no sólo con el quiste soy que recordé x text soy capaz de introducir texto sino con xhtml soy capaz de introducir trozos o de etiquetas enteras que incluso pueden llevar continuamos ahora con un ejercicio en el que vamos a poder asociar una clase contenida dentro de un archivo css a un elemento por tanto voy a la carpeta en este caso creo la carpeta 09 como los elementos y en river recargo ahora 09 me faltará el estilo por tanto en este ejercicio voy a usar una hoja de estilo por lo que escribo style de tipo sexto css y otra vez y la tierra va a ser igual a estilo css y voy a escribir varias cosas archivo guardar [Música] voy a recargarlo porque de esa manera ahora sí vamos a verlo para luego a cada uno de los estilos y los archivos pero de momento lo que voy a hacer falta por supuesto cerrar y el estilo ahora así que debería hacerlo el resto no sé por qué me parece de color dorado a la barrita ahora si el perrito y ahora si por aquí atención a los archivos jquery y csc a volver a cargar on ahora sí por acuerdo js falta de estilo ahora lo que hago es ese gran estilo y voy a decirles que lo tengo voy a decirle que el estilo css le pongo pues un estilo complejo y el estilo va a ser un recuadro recuadro como clase recuadro contiene el siguiente código por ejemplo ruiz va a ser igual a 600 píxeles va a ser igual a 600 píxeles volver a ser igual a punto píxel gas de color blooming garzón en la gran color base del hielo y el color del texto va a ser club voy a las propiedades esta serie de propiedades por lo que ahora me voy a la página principal y aguardar me voy a la página principal es estar aquí y dentro del voy voy a introducir un párrafo de hecho voy a la página de 9000 son a seleccionar este trozo y les digo que selecciona este trozo no lo hemos hecho a una vez la razón o el párrafo y todo esto lo voy a meter dentro de un día y este vino va a tener el video llamado maquetación the market acción así que hasta ahora [Música] no tengo nada especial simplemente guardo previsualiza tengo el contexto pero quiero ahora crear un botón que permita darle asociar a una clase css que en principio no tenía por tanto con un botón [Música] de tipo mimi pons de tipo botón con el marido clase y el ibex botón 1 ahora tanto guardo doy al documento voy a 09 y tengo clases el momento no hace nada vamos ahora por tanto una vez más al archivo j js es para darle contenido a las y voy ahora a rescatar el siguiente código una vez más lo de siempre empezamos con un bar x [Música] voy a copiar de hecho el código pero porque prácticamente es el código que ya conocemos y lo que hacemos es cuando el documento esté preparado inicializa mos los eventos así que cuando iniciales en los eventos obtenemos el botón 1 para este ejemplo tenía los dos botones y el botón 2 así que vamos a intentar html y hacemos un botón para poder votar para quitar y de botón 2 ustedes no creas j&j s lo que hacemos es que cuando hagan clic al botón con el botón 1 ejecutó la función asociada de cada set y cuando haga clic al botón con ella y por tondo se ejecutó la función disociar clase o desasociar clase la función más hacer clase aquí viene la novedad ejercicio lo que hace es a aquello que tenga el ide llamado cómo se llamaba el bebé maquetación [Música] le añade la clase llamada recuadro a aquello que tenga también el nivel maquetación reebok las elimina la clase de cuadrado lo veremos también para otro así que eso era ejecuto esto y recargo clásico clase cuando hago clic en el botón de clase ahora veremos por qué ha fallado les quita la clase vamos a repasar alcohol yo veamos tenemos tenemos un botón 2 asociar clase de jsa asociar clases el código fuente está localizando bien tengo botón 1 y de fotón 2 y el ir es maquetación y en estilo control porque tengo la clase recuadro el llamado el estilo o la jota como un punto js y en maquetación añado la clase recuadro en principio pulsar guardar vamos a previsualizar los de nuevo clase de clase mañana vamos a ver dónde puede estar la cuestión y lo que está incorrecto en el archivo html el css está mal vinculado por eso no lo reconoce y está en tiene que ser rl igual están sit tipo texto css con hr estilo entonces vamos a verlo ahora vamos a guardar todo [Música] vamos a volver a ejecutar pulsa sobre clase todavía no hay algo todavía que sigue fallando vamos a ver vamos a recargar en este caso el evento está en estar jugando correctamente por lo que voy a hacer es borrar toda esta línea actualizar voy a vincular una hoja de estilos estilo css vamos a verlo ahora y tal por tanto en principio está correcto vamos a guardar vamos a recargar ahora que pulsamos trasera ahora se hallaba la hoja de estilos en este caso lo que podemos hacer es poner y quitarle una clase pero si nos fijamos en el código javascript no parece que haya cogido el bar crown vamos a ver ahora que no pero en todo caso lo que estamos haciendo no es llamar a css directamente desde javascript sino llamar a una hoja de estilos que contiene el código vamos a ver el estilo css el background equivocado no es bajar un punto color está con un guión color por tanto si ahora volvemos a ejecutar si ahora aguardamos y recargamos ahora tendremos que el color de fondo ahora sí que nos propone de color amarillo y con una clase lo que hace es con el código aquí lo tenemos con el código de remezclas quitarle la clase asociada en esa hoja de estilos vamos a empezar a trabajar con comportamientos de ratón controlando que hace rato no hacer clic al entrar al salir al pasar por encima al entrar al formulario o cualquier cosa y por tanto vamos de nuevo a nuestra carpeta de proyecto vamos a crear la carpeta bien copiamos lo que hay dentro de pega y lo tengamos dentro de 10 por lo que habrá me vuelvo a dreamweaver cierro los archivos con los que estaba trabajando voy a abrir la carpeta 10 recargo carpeta 10 abro index.hr l en este caso lo que haga usted es crear en tres hipervínculos vamos a poner tres hombres de ciudad a ferrer y voy a poner valencia no voy a llegar a ninguna parte aparte de estos enlaces por tanto como una almohadilla y cierra así que tengo otras ciudades las tres típicas ciudades evidentemente y un pequeño ver para saltar señor tengo esto creo lo que voy a hacer es controlar qué pasa cuando el razón entra y cuando el ratón sale pero en lugar de controlarlo con css lo voy a controlar von hauske voy a hacer algo que en principio se podría hacer con css evidentemente hacerlo con javascript abre la puerta para luego ejecutar otras órdenes dentro de la función que no podríamos ejecutar si hiciéramos con css por eso entró dentro de kotaku js y voy a cargar lo siguiente voy a volver a tirar al recorrido de siempre y voy a hacer lo siguiente de copiarlo y pegarlo todo [Música] y recordamos este es el mismo código que tenemos siempre creamos una variable es la variable x la igualarlos en jquery el documento y le decimos que cuando el documento esté preparado inicializar eventos la función y sánchez elementos lo que hace es que y esto es lo importante de esta lección cuando estoy trabajando con la etiqueta andan 7 ml éste ya lo conocemos cuando en x cuando en la etiqueta a aragón rose cooper cuando el ratón entre lo que haré es ejecutar la función entramados y cuando a un mouse out esto evidentemente tiene que ver en inglés que es el orden de la función de jquery tengo que ejecutar la función salen dos así que el mouse lo que hace simplemente es ejecutar el css y cambiar el background color a amarillo mientras que sale mouse equivale a cambiar el background color blanco si ejecuta este código comprobar y ahora bien vamos a ver al acompañado ahora vamos a ver qué es a la pantalla por encima puedo comprobar como el color de fondo el macro un color que tenía aquí para crear un color pasa de ser amarillo a continuar ser blanco este ejercicio de todas formas se puede simplificar en lugar de introduciendo dos funciones o dos para uno para mouse over y otro para manos al hay una función [Música] jquery a preparada que se llama hv que es como un centro de css y lo que hay que hacer aquí vemos la ayuda vemos la ayuda de jquery para para green weaver tenemos que explicar qué es lo que pasa cuando entra qué es lo que pasa cuando sale the handler in and out lo que hago por tanto es poner que cuando entra vamos a originar la ayuda no necesito cuando entra quiero que se ejecute en tramos como cuando salen quiero que se ejecute esa lema 2 el error no pasa nada ahora en cuando pongo esto el error se corrige si ahora hago esto lo que hecho es simplificar la operación de malos enter vamos vamos impulsado por una más sencilla guarda por supuesto que hace lo mismo pero con mouse con h será puesto por encima comprobaré otra vez que puedo ejecutar en este caso un cambio de rss esto que podría ejecutar cualquier función como mostrar otras cajas o hacer cualquier otra cosa era un zambo javascript y no lo js aunque como siempre la sintaxis de jquery es intencionalmente parecida a la css para que nos cueste menos pasar de lado ah continuamos con una característica de jquery que a mí siempre me ha parecido muy divertida que es la posibilidad de averiguar de manera muy simplificada con respecto a javascript cuál es la posición x la posición y del rotor así que lo que voy a hacer es pegar los archivos correspondientes y ahora lo que voy a hacer es vamos a ver voy a abrir muy bien ámbar recargo voy a la carpeta 11 y en index.html lo que voy a es lo siguiente bien colocado dentro del running y simplemente voy a decir que en un texto del parágrafo donde pide es igual a x en el ordenador x 2 puntos y cierro paradas y ahora hago lo mismo para y pero para no ser x efe y así que ahora coordenada y archivo guardamos me voy a aj cook punto js y vamos a pegar este código que va a dar los siguientes queremos otra vez para empezar la definición del documento cargamos el documento y le decimos que cuando esté preparado inicializar los eventos y lo que vamos a hacer a continuación ejemplos que estamos cargando otra vez el documento porque no quiero trabajar cuando hago clic que no tiene trabajar con una idea no quiero trabajar con más clase no tiene trabajar con todo el documento y le digo cuando muevo el ratón dentro de todo el documento quiero ejecutar la función mover manos y la función mover el mouse que en este caso tiene un parámetro depende del evento tiene lo siguiente x es igual a c x y se refiere al que tiene que ir en corderos y de fx 6 y lo que hago es colocar texto recordemos que existe coloca texto coordenada x es igual esto es una cadena esto no es nada más está bastante cadena mos con los síntomas evento en punto un cliente x y cliente es cíclico y lo que hace simplemente es capturar nuestra posición del ratón y de volver a la pantalla y comprobamos ahora como a medida que vamos moviendo el ratón 0-0 esta esquina de la pantalla anti veas tú lo muevo en horizontal aumento en x a medida que me muevo en vertical aumenta y por tanto tengo una las coordenadas interactivas momento a momento de qué posición se encuentra hemos trabajado con los comportamientos de un software vamos a trabajar ahora con los comportamientos de cuando el ratón hace clic y cuando el otro agente explica entonces de scripts un poco es un poco raro que la gente debe de entender y es que nosotros entendemos que click es hacer clic y ya está pero no es decir el movimiento de clic del ratón realmente tienen dos movimientos uno es mouse con mouse el mouse down que es cuando el con el dedo baja sobre el botón y otra cosa es cuando hacemos lo que se llama el script cuando soltamos en relación del botón es el mouse de acuerdo pero ya las tiene es que nos permite introducir un comportamiento para cada uno de esos dos objetos cuando antes hemos visto que el clicker es vamos a pero podemos controlar como ahora vamos a ver la diferencia entre la entrada y nagua voy a crear por tanto una carpeta llamada carpeta 12 y ahora dentro de la carpeta 12 con que tengo confío pero y el tiempo y ver grito cada vez a 12 cierro estos archivos de aquí ahora index.html y lo que voy a hacer ahora es por ejemplo crear la etiqueta ferrer y esto es un vínculo y esto lleva a ninguna parte lleva a almohadilla vemos por tanto diseño que cuando haga clic en el vínculo se ponga de un color en el que sea con esto que con que con cesc es que se puede hacer una tropilla de juego con la pseudo clase focus con esto focus al haski sitio para atracos ahora veremos lo que vamos a hacer es escribir el siguiente código vamos a copiar esto vamos a pegarlo empezamos como siempre bar x documento cuando documento esté preparado inicializar de ventas y el inicialista de eventos la novedad en este en este vídeo es mouse down cuando hacemos clic hacia abajo con el ratón y vamos a cuando hacemos clic hacia arriba con el ratón en este caso lo puede hacer es simplemente poner otras propiedades sencillas css cuando haga vamos a un ejecutó presiona mouse y cambió el color amarillo cuando hago magos lo que hago es pasarlo a blanco no saberlo archivo guardar carpeta 12 lo que hago es no cuando pasó por encima sino cuando hago un click con el ratón en este caso se convierte el color rojo cuando hago suelto se vuelve a convertir en color azul una cosa muy interesante que en este caso evidentemente es que cuando algo más ordenado no puedo cambiar el comportamiento porque va a otra parte pero bueno voy a ver si funciona lo siguiente tengo un background color que en este caso me ha cambiado y me ha cambiado a rojo porque es el texto por tanto lo que voy a hacer es no ponerte de sólo poner a ya que lo que quiero trabajar es con él y con él con la hipervínculo recargo hago clic y compruebo como ahora lo que está pasando es que el fondo se vuelve de color amarillo eso podemos hacer cualquier cosas podemos aplicar cualquier propiedad podemos decirle por ejemplo que cuando presiona mouse atención las voy a hacer cortar no quiero copiar quiero pegar y voy a poner un fondo size igual a por ejemplo 24 ficciones si hago esto y ahora guardo que haga recargo comprobaré como al hacer clic el vínculo se hace grande pero al hacerte clic no se vuelve a hacer pequeño porque es por la sencilla razón de que he dicho aquí que se haga grande pero aquí no he dicho que se vuelve a hacer pequeño y esto nos puede ser de utilidad y esto ccss lo tiene peor para hacerlo para marcar de alguna manera aquellos elementos que ya han sido visitados de tal manera que aquellos elementos quedan marcados con una fuente con un color con lo que sea si no se puede decir que vuelvo a 12 píxeles archivo guarda recargo ahora sí cuando se hace pequeño y todo se puede hacer más pequeño de lo que era por defecto a continuación vamos a trabajar con la propiedad dan el clic de de jota cuenta una carpeta nueva carpeta 13 y luego entre 9 recargo sin distancias ml y hago lo siguiente cargo lo siguiente voy a hacer vivo con el pulso y a revivir y digo hola cuando haga doble clic a este vídeo deberá por ejemplo ocultar señora voy a actualizar voy a crear en la carpeta vamos a ver en la carpeta 13 voy a cargar el estilo css y el estilo punto css voy a decirle que el color y el color es igual y así lo mejor dónde empieza y dónde acaba el estilo css y ahora tengo que decir a quién estoy modificando a pulso aquel que tenga el impulso tendrá este código ahora si queremos estar aquí bueno pues ahora entramos j js y lo que voy a hacer es pegar este código copio inicial hizo el documento cuando el documento esté preparado inicializa los eventos y la función inicial ir a eventos tiene esta es la novedad lo que va a hacer es que cuando haga doble clic sobre aquello que se llame que tenga el ine pulsa ejecutará solo cuando haga doble clic la función llamada doble clic y la función llamada doble clic lo que hace es ocultar esto si ahora guardo una vez más se ejecutó voy a la carpeta 13 y guarda por supuesto para ver los cambios archivo guarda y estilo guardar recargo ahora 13 y vamos a ver [Música] la carpeta 13 vamos a ver muy ver qué ha pasado en el código fuente estoy trayendo javascript estoy trayendo j como punto j s estoy trayendo estilo vamos la noche 1 aunque esto probablemente no sera 1 para guardar ahora sí perfecto y si ahora hago doble clic según un clic no se oculta se llamó por un derecho más oculta pero si hago doble clic se oculta porque lo que ha hecho es reconocer con este doubleclick de ml con el doble clic que ejecuta la función de elegir y la función doble clic oculta este evento los efectos de focus y de luz me ayudan a trabajar en principio sobre formular es lo que pasa es que la realidad me permite trabajar sobre cualquier elemento de css que admita las propiedades focos y blur que prácticamente son todos focus es cuando llega clic encima de un objeto blur es cuando quite el click del objeto entonces una una utilidad bastante clásica de estos son los formularios voy a hacer algo bastante práctico y que todos entenderemos porque muchas veces nos habrá pasado voy a poner una carpeta 14 la toma la voy a pegar todo esto y ahora abrimos verón a cargo y perú así que hoy encargar index.html y en el bote voy a parecer el típico formulario en forma de l y voy a poner el típico campo inputs de tipo test pero no tex tex tex con el típico value d introduce el nombre cuando vemos esto la lista diseño queremos a introducir tu nombre entonces lo que quiero con este campo es que cuando los avisos cuando aparece en una web quiero que la gente borre el producto nombre y ponga su nombre entre todos sabemos que esto no ocurre así sino que la gente lo que hace es hacer clic meter su nombre y ya está por eso lo que vamos a hacer con javascript ís pero se puede hacer con css es hacer algo para que nada más hacer focus en el campo se fácil se corre el campo y la gente pueda escribir su nombre por eso vamos a dar un punto js y voy a escribir el siguiente código voy a copiar pegar este código [Música] crea una variable mis iniciales al documento le digo que está preparado cuando está preparado que ejecute la función realizar eventos y limpiar los eventos y enemigo que aquello que tenga el ibex buscar bastante con el código fuente y decirle que este input debe tener el pib buscar hoy de tu nombre de esa manera soy capaz de seleccionar el elemento dentro de havas que todo aquello que tenga él y de su nombre cumbre su nombre ejecutará la propiedad robos es decir cuando bush ejecutará la función toma foco y toma foco lo que va a hacer es aquello que tenga tu nombre recordemos que pinchando aquí podríamos cambiar otra cosa a x le pongo el atributo valor 0 qué hace esto lo que está haciendo es que cuando yo hago clic en este en este formulario se vacía vamos a aguardar hay algo que parece que no está bien guardado bien tu nombre tu nombre [Música] y bien tu nombre vamos a guardar y de su nombre tenemos almohadilla vamos a guardar vamos a recargar y ahora si podemos comprobar como en el momento en el que hacemos clic lo que hace es insertar un valor vacío por ejemplo siempre como tengo personas juan y el espacio se guardó y recargo la página cada vez que alguien da instrucción hombre ya sabemos 34 así que introducir tu apellido e introduces se introducen lo que hay dentro de exterior que por defecto evidentemente porque es realmente difícil encontrar un club de todo el mundo se llame juan pues lo que hacemos es poner un valor vacío donde cuando hago un clic simplemente se vacía todo el campo si hemos visto el focus el foco vamos a ver ahora el luz cuando hacemos pocos es cuando hemos hecho clic entre una página cuando hacemos lunes porque hemos perdido el fuego una nueva carpeta carpeta 15 pegamos el código tendrán muy permitamos así que vamos a por 15 vamos a por index y copiamos lo siguiente vamos a por el móvil y dentro del body vamos a poner un formulario formulario cerramos formularios un input de tipo texto y vamos a hacer un formulario por aquí creo que esta es otra canción esto terminamos pero ya se ha acabado así que vamos a aguardar vamos a la vista de diseño y tengo aquí el formulario voy a ponerle algo de valor un valium por defecto value hola y valió a dios y tras hacer esto tras hacer esto ahora me voy al archivo javascript copio este código lo pego cuando el documento esté reding esté preparado lo que hago es inicializar eventos y el inicial de eventos lo que voy a hacer es cuando hago fotos tomó el foco cuando hago blues pierde el foco y en este caso lo que voy a decir es que quiero llamar directamente a un input en lugar de llamar a lo que tenga y de quiero llamar directamente todas las etiquetas que sean el punto toma pongo que hace es cambiar el color y el de foco lo que hace es cambiar el color vamos a por ello guardamos vamos a por la carpeta 15 y comprobamos como cuando dejamos que el texto está negro cuando ya no focus el texto se convierte de rojo cuando pierdo el foco entonces vamos a verlo mejor porque con los códigos encima de estamos aclaramos mucho muchas veces así que le digo que cuando ganó juegos quiero que sea verme cuando quiere o cuando pierde los focus quiero que sea hielo compruebo de esta manera como cuando hago clic el texto se convierte en verde se ve poco pero allí están cuando pierdo el foco se convierte en amarillo en este caso éste se queda negro porque dado que no ha recuperado el foco me lo puede perder pero si recupera el foco se queda de color verde si pierde el foco se queda de colom aparición a continuación vamos a trabajar con los comportamientos file inifed out que nos permiten conseguir que los efectos de los otros objetos aparezcan y desaparezcan de la pantalla son los los efectos de la hora de hablar del efecto de jquery que están bastante interesantes ahora vamos a ver vamos a recargar carpeta 16 y lo que voy a hacer dentro del body es crear un vivo con y ver cuadro que tenga algo de contenido por supuesto vamos a la página el orden los que amos y perros y ahora dentro de css voy a adjuntar una hoja css en este caso en la carpeta 16 estilo punto css y dentro del estilo punto css voy a hacer en high sea de 300 píxeles y el valdrán color se abre lleno por lo que sea ejecutamos veremos que esto por supuesto se debe aplicar al [Música] 4 así que cuadro un corchete por aquí un corchete por allá y ahora si tenemos así que voy a crear ahora los botones un botón ‘pipo’ botón con el nivel muestra y ahora hago un tributo con el aire o junta tras lo que tengo estos cuatro botones faltan válidos así que valió y así me acuerdo creo que es cada uno muestra y opuesta es para que lo vea el programa value está dentro de nosotros no hace ninguno nada de momento [Música] muestra oculta bien qué está pasando aquí parece que hay algún problema algún tipo de problema con claro no ha guardado todo ahora sí pero no hace nada por eso voy a volver a dreamweaver y voy a pegar este código dentro de jk punto j s donde tengo el mismo código de siempre la única diferencia es que usó en lugar de las funciones de jaén y show que mostrar obviamente voy a ocultar voy a hacer face out estoy feliz out para que desaparezcan con la propiedad de slow de y face in para que aparezca esto es botón uno que sepa tener el aire es muestra vamos a ver este es oculta ocultar porque este ángulo está no oculta porque es culta recuadro y el mostrar recuadro es lo que tiene y me muestra así que muestra aquello que tenga el y de llamado cuadro por tanto cuadra y aquello que tenga de anime llamado cuando vamos a verlo ahora guardo todo y este cargo y si ahora pongo ocultan comprobar cómo me oculta lentamente el recuadro se pongo muestra me lo muestra si en lugar de ponerlo con gafas esto como siempre al gusto del consumidor tengo fans y previsualización veré lo mismo pero con una velocidad bastante mayor que en el caso anterior una variación también muy interesante de este ejercicio consiste en que en el 6 el shakedown sólo podemos quitar o poner toda la transparencia en lugar de usar feira otro feeling usamos facebook [Música] podemos tener un parámetro extra que nos dice hasta qué transparencia podemos llegar que se mide de 1 a 0 de 1 es realmente opaco 0 es culinaria de transparente voy a decirle que en facebook vaya a 0.5 y en el fritz tubo de mostrar [Música] vaya a uno no tenemos por tanto con esto al guardar todo recargo la página y le digo que muestra le digo que oculta el lugar disputarlo todo lo deja al 0.5 por ciento al 50% de transparencia mientras que muestra lo que hace es recuperar el 100% de la transparencia otra manera de mostrar y ocultar el contenido es usando tobel así que usar otro que el vamos a necesitar un solo botón vamos al código fuente tenemos el botón en el botón de muestra y dentro de j js vamos a pulsar vamos a rellenar con este código lo que hacemos en este caso es en lugar de tener un código para muestra y esto para ocultar tenemos para el botón muestra un código que lo que hace es ocultar e mostra el recuadro y ocultar y mostrar recuadro lo que hace es recurrir o funcionaban auto ver la función de marathón el la función pre hecha bastante interesante voy a guardar y vengo aquí y ahora recargo y vamos a ver si lo que podría hacer es ocultar y mostrar una descripción si no cuadro con culto y muestra el cuadro y ahora sí guardo guardada refrescar vamos a ver no he guardado todo guardar todo así que ahora vuelvo a la página si te digo muestra consigo ocultar y mostrar con una animación pre hecha la pre diseñada dentro de jquery este elemento en este caso muestra funciona el sordo de falta para tener listo para pagar sino que el suelo tiene el mismo toque de encender nada ajax es una técnica que nos permite tener lo mejor de sí y lo mejor desde ht en definitiva lo que nos permite es usar la script para hacer llamadas asíncronas qué quiere decir esto hasta ahora en cada vez que hacemos algo con php tenemos que por ejemplo podrán provocar en una página y enviarlo a la página siguiente y por tanto para hacer un buen uso de php tenemos que ir saltando de página a página ya veces estoy de saltar de página a página que es un poco incómodo por tanto que nos permite hacer año hay veces en la que sí que es cierto que podemos recargar la página pero igual tenemos una página con un don de cosas vamos a recargar toda la página sólo porque nos interesa recargar un cuadrito completo esto lo que hace es lo que es conseguir recargar solo aquella parte de la página que nos interesa sino obligando a recargar todo el resto de la página y estos dicho así hecho así de sencillo nos abre la puerta a un montón de oportunidades que vamos a ver en los siguientes ejemplos vamos a hacer un primer ejemplo ya crear la carpeta donde 1617 y se nos queda la carpeta jquery tiene que estar por supuesto [Música] tacuary esta carpeta tiene que estar en misa tacuary es decir tiene que estar en una carpeta de servidor ya que con jquery no es obligatorio pero muchas veces lo que hacemos es combinar php con javascript dentro de la carpeta 17 voy a crear un nuevo archivo que se va a llamar index.hu tml y dentro del mix punto html voy a copiar el siguiente código lo que voy a hacer es que voy a enlazar dentro de este vídeo por ejemplo los signos de los dos campos vamos a ver que nos da esto aquí lo que hacemos es que tenemos si vamos a en este caso página 1 punto que hp pero pero lo que hubiera hacer lo que voy a hacer ahora es cargar por supuesto mis scripts ahora no podría haber hecho eso es copiar y pegar que voy a copiar y pegar vamos el disco duro vamos vamos h de rocks y en jquery vamos a eliminar el contenido de la carpeta 17 porque así lo hacemos todo igual porque así vamos a pegar copiamos es más ahora voy a crear un archivo llamado script php porque en adelante voy a usarlo varias veces por tanto ahora como esta plantilla y la pego aquí y ahora sí puedo cerrar esto si desea volver a cargar ahora ahora puedo ya tengo mis tres cargados y puedo cargar directamente todo está bien hacer esto lo que hago es en cada uno de los enlaces obligarme enlace a con un nivel b1 me obliga a esta página con un código que con una variable en la url get ese código es igual a 1 jugadores tanto que hace esto pues esto lo que hace es que me está obligando a pulsar cada uno de los signos ir a la página index e.html esa página 1 punto html y en este caso que me dé la predicción para cada uno de los signos del horóscopo voy a ir voy a recargar voy a script php y el script php voy a ordenar el siguiente código este código lo que hace es un recuerdo lo que hace es decir si el código es igual a 1 entonces vida predicción para arios si es igual a 2 es para tauro porque recordemos que en este script uno es para ar y esto es para tauro 3 para genes después lo importante voy a cambiar página uno por punto de hp de corte script punto php ya que este script que estoy usando a cada una de las páginas yo lo que voy a hacer es lo siguiente justo antes de acabar algo de voy a poner un vídeo que se llame vivir es detalles es importante y voy a decir porque ahora cuando yo selecciono yo no quiero ir a otra página y entonces tienes otra paginación de selección en cuanto ocurre aquí aquí automáticamente los deportes elecciones del siglo se rellene con la previsión para mí sí no y lo más importante creo que eso provenga de un script php como álvarez con jquery lo haré con las posteriores ellas incorporan jquery por tanto ahora lo que hago es descargar el archivo j punto js y voy a copiar y pegar este código en este caso lo que voy a hacer es hacer uso de la función llamada logro vamos a ver creo una variable x apunta el documento el mismo que cuando esté preparado iniciales son los excedentes cuando inutilicen los eventos lo que hago es crear la nueva variable y le digo que todo aquello que tenga una etiqueta de menú comprobamos dentro del menú la etiqueta cuando haga clic ejecutaré la función presión enlace y cuando ejecute la función en el enlace lo que voy a hacer es poner en aquel día que tenga y de detalles recordamos que este vídeo tiene mi de detalles en aquel me quiero cargar aquello que sea la página y la página evidentemente es lo que encontramos en el script vamos a ver aquí el script de atp es el request es esta parte de la página vamos a ver vamos a ver si nos falta de seguro que sí nos faltan es un tope h así que voy a este punto guardo un recargo vamos a ver si ya lo podemos hacer funcionar por tanto aquí voy a hacer es ir a local juegos 4 afuera vamos a 17 y se hará por ejemplo el acero aries vamos a ver qué podemos con el código para que acabe de mostrarnos el contenido en este caso lo que tengo que hacer es en lugar de poner aquí el archivo script el punto php simplemente dejo aquí red para que haga referencia al archivo que había enlazado dentro del código fuente es que de ht sea ahora ejecutó este script lo que observo lo que hace es que si selecciona cualquiera de los signos que tengo aquí lo que obtengo por lo tanto es el volcaron del script php dejémonos que lo que estoy haciendo es sin tener que recargar la página que tenemos la página en ningún momento es recargada concretamente le estoy diciendo te quiero recargar únicamente aquello que se encuentra dentro de éste por tanto el hijo mediante mediante ajax sólo que scripts pero sólo que bits quiero recargar y por supuesto usando en este caso código del servidor que ha sido estático pero más adelante evidentemente pueden ser di nario si quiero que en lugar de cargarme en las definiciones de cada las proyecciones para cada signo en lugar de cargar medias aquí abajo de las carga bajo de cada uno de los elementos voy a modificar el código de esta sencilla parece la rueda de tres volverán en weaver y en lugar de poner un dip al final para detalles voy a poner dif espacios con cada uno de los signos por tanto pongo por ejemplo aquí un deal que es ares y no digo que es un momento voy a poner tres áreas 1 nosotros ahora voy a al conejo jquery [Música] y lo que voy a hacer es que en el lugar de enviar la obsesión enlace haga los oyentes dejémonos decir lo siguiente si el iii de este enlace 1 es decir menú en la c1 que se vive en ese caso presión en la fe y presión en la fe no se pone en detalles sino que se pone el aris comprobamos que vive era ario saber si funciona archivo guardar archivos guardar todo estará incompleto saberlo y si ahora seleccionó el signo aries se pone vamos a hacer merino a otra página muy bien js y lo que voy a hacer es decirle directamente que voy a ejecutar en la segunda ward o sea en la c1 le hago clic versión enlace e impresión enlaces lo que vamos a ponernos dentro de arte estamos ahora guardar [Música] recargar ejecutables para aries me lo ponía debajo de ahora está ahora no va a funcionar por tanto vamos a hacer que funcione vamos a ver qué funciones generales voy a ver voy a dentro de j&j s lo que he hecho es limitar que esto funcione sólo para enlace 1 pero si yo copio este código y lo pegó abajo en la c2 y c3 en la c2 va a llevar a presión enlace down enlace 3 va a llevar a presión enlace generes y ahora me fino mis nuevas funciones nuevas funciones presión en la centauro lo que hace es ponerme la definición en aquel día que tenga y de tauro y presión enlaces géminis lo que hace es ponerme la descripción era este líder que tenga el enlace genes ahora archivo guardar todo recargo y compruebo como si pongo áreas y ceares se comportaba el centauro si pongo géminis géminis evidentemente si pongo cáncer me dice que nada porque no he confirmado todavía una función para cáncer pero podemos personalizar por supuesto nuestro script para que haga lo que nosotros queremos vamos a trabajar a continuación con las funciones y de estos dentro de ellas voy a hacer la nueva carpeta voy a crear la carpeta 18 y completemos lo que hay aquí dentro por tanto cumplió pego lo abro dentro muy bien y vamos a empezar a trabajar para recargar a la carpeta 18 y voy a empezar con el archivo invest punto de h en este caso vamos a hacer el mismo ejemplo así que de hecho podría hacerlo sobre la carta 17 y la diferencia en este caso es que en el archivo j punto j s en lugar de usar la función load voy a utilizar esto voy a dejarlo como al principio en la c1 para aries y nuestra carga de ellas se ha realizado de una manera muy simplificada usando a la función no sin embargo si en algún momento queremos hacer uso de las funciones de inicio y de parón de ella es el lugar del que lo gestiona automáticamente lo podemos gestionar manualmente en este caso en lugar de lugar antes de löw lo que voy a hacer es hacer lo siguiente y decirle que x ajax start y ejecutó la función inicio envió la función que inventó a continuación tengo que decidir la función de inicio envío por tanto como la función de envío lo que hace es adiós es decir que hasta que no la acabé de cargar tiene que usar el archivo llamado cargando puntos o decir estoy cargamos archivo guardar en lo que hacemos teatro y visualizamos este cuando pinchó aries ahí por la descripción en este caso como lo que ustedes descargar simplemente una una ternera de texto esto se hace de manera inmediata sin embargo si nos fijamos durante un microsegundo pone por ahí encargado el ver nos permite que el servidor detecte cuando ha empezado la carga cuando ha parado la carga y por tanto mientras que no haya acabado la cara nos dice estoy cargando el contenido y cuando ha llegado la carga una suelta el contenido de pantalla ella puede usar tanto que como post para el cálculo de los elementos que introducimos por eso voy a ir ahora a la carpeta 18 y en index voy a introducir un pequeño formulario para insertar un formulario que será de tipo gay y que les llevará al archivo en la carpeta 18 el script php acepto el formulario y ahora voy a introducir dos elementos del formulario por supuesto un indulto html formulario campo de texto que va a hacer de tipo texto y se va a llamar número y por supuesto también un y en el portal de tipo sobre introducir el número de cálculos para ahora siempre en cualquier cosa que sea a ians necesitamos evidentemente [Música] así que igual vuelta y de igual resultado porque todo esto ya lo sabemos hacer pinchando enviar en yendo a otra página prefiero no quiera ir al trabajo yo quiero que cuando pulses vías automáticamente bueno que arregle esta página y esta es la gracia de el formulario y esta es la página la gracia de a ians así que voy ahora a trabajar sobre página sobre script punto php y voy a hacer algo tan sencillo como escribir simplemente voy a decir que cuadrado es igual al número por el número tiene más misterios por eso voy a cuadrado guardo y ahora tengo que trabajar con el archivo j&j js en ese archivo lo que voy a hacer es pegar este código démonos cuenta que en este caso en lugar de usar como anteriormente usábamos la función load lo que hacemos es usar la función que llamamos al script punto php y le decimos que vamos a pegar que el resultado vamos a hacer lo siguiente si vamos a poner este resultado el resultado quiero ver el script de php y quiero ejecutar ese script de php y por último la función de los datos lo que hará es alertar me sacará un mensaje en pantalla que me dirá cuál es el resultado un producto vamos a repasar lo y en este caso me hace falta ponerle widder al botón le voy a decir que summit se debe enviar para que el botón para llevar correctamente a ese dibujo está podríamos aprobar lo guardamos todo esto está guardado vamos ahora a la carpeta 18 [Música] y por ejemplo si pongo 2 nos dice que un número indefinido pero por lo menos no estamos en otra página sino que nos están devolviendo en la parte pantalla dice que número no existe vamos a ver por qué viendo es falta poner un nivel aquí en el it but por tanto por los inputs de número vamos a probar ahora guardamos volvemos supongo 5 y envío no variaron [Música] vamos a ver qué más nos puede faltar estamos trabajando con un número j lo que queremos es obtener el balón recordamos ejecutamos punto php y en este caso vamos a poner también número porque es aquel que tenga el vídeo llamado número guardamos ejecutamos para el 5 y me dice 25 lo bueno en este caso otra vez usando usando el metro y kate es que si es sin tener que ir a otra página simplemente dentro de esta misma página pulsando enviar pues evidentemente se transforman arena podría decir has introducido estos datos y se desviará correctamente el formulario y lo que fuera esto ha sido cometido que pero evidentemente también se podría hacer con métodos post en lugar de venir aquí y elegir método que ponemos método pulso podríamos cambiar también el código js si venimos aquí recargamos de 4 puede ser enviarte 16 lo ideal evidentemente es decir aj con punto js y decirle que en lugar de que queremos usar post para que hay una coincidencia entre los métodos de envío y de recepción guardamos recargamos si pongo 6 y en 2010 y 36 si queremos enviar los datos por mapeados lo podemos lo podemos activar mediante jotas o no voy a cargar voy a copiar en la carpeta número 19 voy a copiar a estos archivos será muy verde recargo carpeta 6 y 9 y voy a hacer lo siguiente index.php voy a escribir los siguientes introduzca su dni en este caso tengo un input que me lleva a un formulario y ahora dentro del archivo jq punto j s lo que haré es decidir lo que pasa con ese archivo voy a cargar funciones lo que hago es regular este código en este caso vamos a código fuente j js muy bien lo que estamos haciendo es una vez más realizar los eventos una función esencial hacer eventos y decir que cuando produce el botón lo que tiene y de vamos a ver el botón 1 en este caso ejecutó la función presión submit y presión subido lo que va a hacer es sacar de él escribe script php no el método sino donde en los valores no van a palo seco sino que tienen un formato de tres puntos valor y entonces ejecuta la función llegada así que haciendo esto lo que hagamos lo siguiente abro mi archivo php y lo que hago es copiar este código fijémonos en el código y lo que hace es que si el dni que he pedido es igual a 1 en ese caso me da una variable de nombre aprendido y dirección variable del nombre apellido y dirección si ahora ejecutó este código guardar es guardar todo voy a ejecutar la carpeta 19 y me encuentro con que si nos fijamos en el código del steampunk tengo si recuerdas igual a uno se recuerda asegurados se recueste es igual a tres y en este caso uno es juan rodríguez así que pongo 1 envío acaso vamos a ver algo nos falta voy a relajar uno ya no vamos a poder y vamos a ver qué pasa para un control más preciso de ajax jquery nos da la función propiamente llamada ajax voy a crear nueva carpeta 20 les copio el contenido de pega y lo que hago por tanto a continuación es recargar la carpeta 20 y voy a comentar voy a hacer que tendrás en el contenido que va a hacer es ejecutar la página script o php con método post y le va a enviar el cuadrado de el número que lencia por tanto voy a la página al formulario para el 2004 impresor fue árabes escribe me lo calculará bien por eso nuevos de lineweaver y ahora quiero que el vph correspondiente me calcular el cuadrado recordamos que esto lo tengo por hacer por ejemplo por aquí hay quien script le digo que cargo el script que hay en 20 para ejecutar el cuadrado guardo ejecutó y ahora compruebo cómo se pongo 4 me dicen que el cuadrado es 10 merece el número porque porque el script del index es nro recordamos en el index el mes enero en el ph te debe ser enero porque tiene que coincidir por lo que se aguarda y recargo 4 cuadrado 16 pero yo no quiero hacer esto con php sencillo sino que lo quiera hacer con ellas así que por eso lo que voy a hacer es abrir de archivo vamos a ver j&j algún punto js para guardar todo y le voy a pegar el siguiente código en este caso vamos a empezar nuestro archivo igual que siempre vamos a empezar nuestro archivo preparando que cuando la página esté preparada ejecutó la función inicializar eventos y cuando el botón enviar se ha presionado ejecutará impressions of wheat así que presenta un mid en lugar de tener un log lo que tiene directamente esta función hayas y la función ajax nos permite configurar muchos más parámetros de los que nos permite configurar la función aunque la función de un es cierto que se usa en el 90% de las ocasiones pero cuando queremos un control más preciso vemos que la función ajax tiene la posibilidad en específicas la será conexiones sincrónica o asincrónica el tipo de bio que estamos haciendo el tipo de datos el tipo de contenido la página que procesa el script el tipo de datos y sobre todo muy interesante nos permite incluso especificar la función que debo ejecutar 7 tenido éxito la función que voy a ejecutar 7 y los problemas así tenido un error y el time out del tiempo máximo que el server puede esperar a la respuesta en este caso recordemos que estamos trabajando con javascript y 4000 equivale de 4000 de segundos es decir 4 segundos así que ahora voy a en este caso voy a poner a encargando cargando [Música] y en el botón guardar ejecutó el resultado de cargo por supuesto pongo número 4 y cálculo el cuadrado en este caso bien en este caso me está diciendo que el script php en la línea 2 no existe el invex bueno pues nada vamos a script y no existe el principio existe ya estamos en la pantalla así que recargó número 5 y el script php a ver si es que cargaron decir que no tocaba que parece que va a ser eso escribe punto php efectivamente no por respuesta nr él está diciendo en la línea 2 hay un interno definido para el número por lo que en este caso sí número número ejecutó de nuevo el script cálculo en este caso pero fijémonos que hemos conseguido ejecutar la instrucción y si repasamos el código veremos como el jj con jf sí tengo éxito ejecutó la función a datos que llegarán a 2 lo que hace es mostrar los resultados y si tengo problemas lo que vamos a ejecutar la función problemas desde mount muy de cerca de cero se tardan más de 0 milisegundos en ejecutar la escritura y si hay algún problema haberse sentido con fuerza mágica así que le digo 5 ejecutó sabe que tarda menos de 0 milisegundos pero en otros casos y si hubiera algún problema lo que estaría haciendo es ejecutar la función problemas donde en lugar de devolverme números me diría hay algún tipo de problema

Deja una respuesta

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