Modelo de objetos del documento en javascript. #9 Caso practico Ree a Mu ee ee a proyecto. Por ejemplo, ya ha realizado casi toda la Neen eR cru ee Pa On elaoR i eee Ser MM Sure Mea Coen Mem Re ue MAC een Cot cet ns urate ete cgi Eta Se icone Reo nominee eg Ceca ee CM ecco a cee aT emcee Orcas aL) tablas, afiadir 0 modificar atributos a elementos, modificar contenido textual de Crete tC Renan ccm me en on Saiat Juan le informa que todo eso que solicita se puede hacer con JavaScript, pero tendra que hacer uso del DOM de una forma mas intensiva, El DOM organiza todo el documento en una especie de arbol de elementos, de tal forma que, a través de REN Ser ee eee Ree MR oes Maes eae esa ce ee aa ies ON Me emer a ome eM melee es ei el érbol de nodos, es refiejado de forma automética por el navegador web, con lo Ciel Saeco sae eke ela Por titimo, Antonio pregunta si es posible detectar qué botones del ratén han sido ee eo m cama Rn ie nce hoo mK Pea eRe de Reese teR ocd ogc e unt peek mets) RC enone et sac ecto e oe er ie tca ce RC ie ce a Ren ecu Roe keen eet Krone were tun Sere Re ce Ne Eee cok a Re ota eC CCN ne Mc Ree Osan Mn Ce coc ar ao eee eM eee eteen rane Mota ean co scae Retoe ste ae Ly Pee ett Ret ane Rete Re Meee cee eat fete ee crm net MMe cco OMe eco et mt Pees cues oooh La eM CMs eon Reo Tenet ee ae ene en Ns ce ONE Reem ceed cde go navegadores.eee Peete Maree ee MOM at aR SS Eo Bee Monet ie oc olo-ltacmole el mcos Mel Mc Moves Merc Me Mul mccer- acme! Tener i A aC ible a de Serene iy ewes ek 1het eM Sue me oa Re Me i Mec eee tee -ae) tea coe LeYl elec | l aT ) a1.1.- Objetos del DOM HTML, propiedades y métodos.VRRP H PAPA HPYWWHWWPHP©9 Debes conocer Le Citas para pensar Set eae et ie Oe a tech ra PUT1.2.- El arbol del DOM y tipos de nodos.1.3.- Acceso a los nodos. Marz Pee Neste Mego Met AV wel -c-t PCM tcc merck:Sj slo tenemos un elemento con name="apellidos" para acceder a é| haremos: var elemento = document. getElementsByName(“apellidos")(0); Por ejemplo, si tuviéramos 3 elementos con el atributo name="apellidos" para acceder al segundo elemento harlamos: var segundo = document.getlementsByName("apellidos")[1]; //, recordarte que los arrays comienzan en la posicién 0. Lo que nos permiten estas colecciones de elementos, es el poder recorrerlas facilmente empleando un bucle, por ejemplo: for (var jel; jedocument getElementsyName"apelidos’) length; j++) {( varclemento = document getElementsByNamo(‘apellidos"jly } -getElementsByTagName() Esta funcién es muy similar a la anterior y también devuelve una colecoién de elementos cuya etiqueta XHTML coincida con la que se pasa como parémetro. Por ejemplo: var elementos = document getFlementsByTagName("inpat"); 11 Bste array de elementos contended todas los elementos input del documento. var cuarta = document getBlementsByTagName("inpt")[3] -getElementByld() Esta funcién es la mas utilzada, ya que nos permite acceder directamente al elemento por el ID. Entre paréntesis escribiremos la cadena de texto con el ID. Es muy importante que el ID sea unico para cada elemento de una misma pagina. La funcién nos devolverd Unicamente el nodo buscado. Por ejemplo: var elemento= document getElement By1d(*apellidos"); Si tenemos por ejemplo una tabla con id="datos" y queremos acceder a todas las celdas de esa tabla, tendriamos que combinar getElementByld con getElementsByTagName. Por ejemplo: ‘var miTabla= document getlementB yd" datos var filas= miTabla getlementsByTagName(* v1.4.- Acceso a los nodos de tipo atributo.1.5.- Acceso a los nodos de tipo texto. Modu co.mNc.saYl eee Bela) Lc}1.6.- Creacion y borrado de nodos.Ejemplo de creacién de elementos insercién en el documento: ‘1iCreamos tes elementos nuevos: pb. br var elementoP = document createElement(p); var clementoB = documentcreateElement(); var elementoBR = document createElement(br); ‘Me asignamos un nuevo atibuto ttle al elementoP que hemos creado. ‘elementoP setAttribute(tile!,Parrafo creado desde JavaScript’); ‘UPreparamos los nodos de texto var extol = document.createTextNode(Con JavaScript se) var texto? = document.createTextNodet'pueden realizar’ var texto3 = document cresteTextNode(/un monton’); document.createTextNode de cosas sobre el documento); ‘11Afiadimos al elemento B los nodos de texto2, elemento BR y texto3, addEventlListener(evento, funcion, truelfalse} tenemos la opcién de indicar cuando queremos que se dispare el evento: ® on la fase de captura (, , true) © enla fase de burbujeo (, , false) * También disponemos de un nuevo método para cancelar eventos con preventDefault, y de un método para detener la propagacién de eventos en la fase de burbujeo, con stopPropagation().Corer) ure Descripcién | Burbujea | 5° Puede PTT cod Percedbiclick Cue Cert CC cc oeke] botén del raton sobre un Preneasy mousedownmouseup TRO) botén del ratén error) Peet ea Cag Ta ec Peet Cae Cre tay fore) ecm nee Reet Cen Cite g fore) enon) de un Cem) Pew ranyNeeliae a) Ceetnny modificar el een cane ke one Cuando se Cece) carga de un ro oan) cargado, Cuando se eect) carga de un emo cal (ote) cory ees oy un documento. ando nos ene ees os Cea) cee Yl eee el aT) DO nL Rea ete Re NM see eeu Eo ane Dd2.3.- El objeto Event.ETC PCa Ped shift en el r CEU) Por Tere) Oar ag Te eee ene) to) mientras que target de aT a Reels (CIT are kero} que est Sone)ee) luta o relativams aia ge erate PageX, pageY POEs screenX, screenY Peer Seems Pa) Aer Ket Itsy je, excepto Pee eri Peace oe = rN 1p eee Baer} re divA que n divB hijo. Cuando Meencer: ree Nets Petes eur ae ete aa Te enone Nae) Eales oe2.3.2.- Eventos del teclado en JavaScript.‘

label for="nombre"> Nombre: «label for="provincia’> Provincia: - En la estructura HTML del formulario, los campos del formulario no llevan saltos de linea entre unos y otros, por las siguientes razones:# this.nextSibiing - hace referencia al siguiente hermano al actual (la siguiente etiqueta label del siguiente campo). # this.nextSibling.nextSibling - hermano siguiente, al hermano del elemento actual. (seré otro elemento input. Si pusiéramos un salto de linea entra campos input entonces ya ese this.nextSibling.nextSibling ya no seria un campo input y seria un nodo de texto con el caracter del salto de linea que hemos puesto como separador de los campos input). © Eventos de teclado en formularios > sumsnsatsmsin2.3.3.- Eventos del rat6én en JavaScript.ry Para saber masYl eee tel an) a>ross-Bro' pe practico Pen ce a cura Title): 14} c Tura cen Mee ake tM cee MC Cur renee Seon eta ekers SR eon mientras que si funcionaban en la version 9, y claro, si adapta el cddigo para que fun Camus Explorer dejard de funcionar en Firefox, Chrome, e' DO Ren UE ene tte Romy le su aplica Reem re eectCuando hablamos de aplicaciones cross-browser, nos estamos refiriendo a aplicaciones que se vean exactamente igual en cualquier navegador. ‘Como bien sabes los navegadores son desarrollados por diferentes empresas de software, cada una con sus propios intereses y, desde siempre, han sido patentes las diferencias entre unos y otros. El WSC define esténdares para HTML, CSS y JavaScript, pero muchas veces estas empresas interpretan el estandar de forma distinta, o incluso, a veces, agregan funcionalidades o etiquetas que no estan contempladas ni permitidas en el esténdar. EI WSC ha ido mejorando y actualizando los estandares, definiendo nuevos niveles del DOM, y por el otro lado, las empresas desarrolladoras de software también se van adaptando, cada vez més, alos estandares propuestos por el W3C. La historia de cross-browser comenz6 con la “guerra de navegadores" al final de 1990 entre Netscape Navigator y Microsoft internet Explorer y, por lo tanto, también entre JavaScript y JScript (los primeros lenguajes de scripting implementados en estos navegadores respectivamente). Netscape Navigator era el navegador web mas usado en ese momento, y Microsoft habia sacado Mosaic para crear Internet Explorer 1.0. Nuevas versiones de estos navegadores fueron surgiendo rapidamente, y debido a la feroz competencia entre ellos, muchas veces se afiadieron caracteristicas nuevas, sin ningun tipo de coordinacién 0 control entre fabricantes. La introduccién de estas nuevas caracteristicas a menudo tuvo prioridad sobre la correccién de errores, dando como resultado navegadores inestables, bloqueos, navegadores que no cumplen el esténdar y fallos de ejecucién, llegando incluso a provocar cierres accidentales de las aplicaciones o del navegador. Durante todo ese tiempo los programadores de paginas web han sido los encargados de ir parcheando estas diferencias para conseguir que sus aplicaciones se ejecuten de la misma forma en unos u otros navegadores, independientemente de la versién o fabricante utilizado. Estas soluciones que se adaptan a cualquier tipo de navegador son las que se conocen como "soluciones cross-browser". Las soluciones cross-browser no s6lo se aplican a JavaScript, sino que también se pueden aplicar a otras tecnologias como CSS 0, incluso, HTML. Lo que se busca por lo tanto es que, esas incompatibilidades 0 diferencias entre navegadores no sean apreciables por el cliente, y que la pagina web o aplicacién funcione indistintamente en cualquier navegador sin producir fallos o efectos indeseados. En Internet puedes encontrar mtittiples paginas con tablas donde ver las incompatibilidades entre navegadores a nivel de, CSS 2, CSS 3, base del DOM, DOM HTML, eventos del DOM, ete. En estas tablas se muestran todas las caracteristicas de cada tecnologia, se ven las diferentes versiones de navegadores, y se indica si soportan 0 no, cada una de las caracteristicas, propiedades, métodos, etc. A continuacién, tienes un enlace muy interesante que es una referencia completa, que te permitira consuttar si ciertas propiedades o métodos que utiizas en JavaScript, son compatibles en todos los navegadores.ry Para saber mas3.1.- Métodos para programar aplicaciones cross-browser (parte 1).function crearEvento(elemento, evento, funcion) 4 if (typeof elemento addEventListener !== undefined’) 4 ‘evento compatible con W3C ) elseif (ypeofelem.atachEvent !== undefined!) 4 ‘evento compatible con Internet Explorer y » La funcién anterior es una funcién cross-browser muy simplificada para crear eventos. Pero ,qué pasaria en el siguiente caso? var elementos = document getElementsByTagName(div);_/! supongamos que nos devuelve S000 divs vari longitud = elementos length; for (i= 0; 1

You might also like

• Ocupaciones - SISPE - Web SEPE-20 Octubre 2023

  

  Document63 pages

  Ocupaciones - SISPE - Web SEPE-20 Octubre 2023

  Mohamed Assadki

  No ratings yet
• Proyecto Unidad 2

  

  Document2 pages

  Proyecto Unidad 2

  Mohamed Assadki

  No ratings yet
• Mohamed Assadki ED01 Tarea1

  

  Document4 pages

  Mohamed Assadki ED01 Tarea1

  Mohamed Assadki

  No ratings yet
• • Magazines
  • Podcasts
  • Sheet music
• Mohamed Assadki ED02 Tarea

  

  Document7 pages

  Mohamed Assadki ED02 Tarea

  Mohamed Assadki

  No ratings yet
• Mohamed Assadki ED02

  

  Document2 pages

  Mohamed Assadki ED02

  Mohamed Assadki

  No ratings yet