Abrir el menú de navegación
Cerrar sugerencias
Buscar
Buscar
es
Change Language
Cambiar idioma
Cargar
Iniciar sesión
Iniciar sesión
Descargar gratis durante días
100%
(1)
100% encontró este documento útil (1 voto)
415 vistas
231 páginas
Desarrollo Web Entorno Cliente
Desarrollo FrontEnd
Cargado por
Aharon Alexander Aguas Navarro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido,
reclámalo aquí
.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
Descargar
Guardar
Guardar Desarrollo Web Entorno Cliente para más tarde
100%
100% encontró este documento útil, undefined
0%
, undefined
Insertar
Compartir
Imprimir
Reportar
100%
(1)
100% encontró este documento útil (1 voto)
415 vistas
231 páginas
Desarrollo Web Entorno Cliente
Desarrollo FrontEnd
Cargado por
Aharon Alexander Aguas Navarro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido,
reclámalo aquí
.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
Carrusel anterior
Carrusel siguiente
Descargar
Guardar
Guardar Desarrollo Web Entorno Cliente para más tarde
100%
100% encontró este documento útil, undefined
0%
, undefined
Insertar
Compartir
Imprimir
Reportar
Descargar ahora
Descargar
Está en la página 1
/ 231
Buscar
pantalla completa
BS Ua CICLOS FORMATIVOS CORREO) vis en Me AIAG Tam a | MARCOS LOPEZ SANZ TOLL) aa 2 Sa eu eau ed JENIFER VERDE MARIN aad Ra-Ma’ www.ra-ma.es/¢fINTRODUCCION eens - CAPITULO 1. SELECCION DE ARQUITECTURAS Y HERRAMIENTAS DE PROGHAMACION wns1d erie 1.1 EVOLUCION Y CARACTERISTICAS DB LOS NAVEGADORES WEB wy. 44 1.2 ARQUITECTURA DE EJECUCION wo Seah 1.3 LENGUAJES Y TECNOLOGIAS DE PROGRAMACION EN ENTORNO CLIENTE.. 19 1.8.1 HTMLy derivados 19 192 css, Siam ee ene 20 1338 JavaScript a < nO 184 Applets de Java. eee ee : 21 1.35 AJAX, om ese 21 41.86 Adobe Flash y ActionScript. oes cate ae 14 INTEGRACION DEL CODIGO CON LAS ETIQUETAS HTML. as 23 1.4.1 JavaScripten el mismo documento HTML. a ae 1.42 JavaScripten un archivo extern... ey 1.433 JavaScripton elementos HTML, ae eens RESUMEN DEL CAPITULO... Pr at 26 EJERCICIOS PROPUESTOS. = — ° Leena ‘TEST DE CONOCIMIENTOS reel 27 CAPITULO 2. INTRODUCCION AL LENGUAJE JAVASCRIPT cos : 29 21 CARACTERISTICAS DE JAVASCRIPT ro rene 30 22 “HOLAMUNDO" CON JAVASCRIPT sesso Seen a 23. ELLENGUAJE JAVASCRIPT: SINTAXIS.......- erat 34 23.1 Maydsculas y mindsculas 24 2.8.2 Comentarios en el eédigo. 34 2.3.8 Tabulacién y saltos de linea ........ a sso rm a 34 23.4 El puntoycoma 8B 2.35 Palabras roservadas, 36 24 TIPOSDEDATOS.. - 37 2.4.1 Naimeros. 37 2.42 Cadenas de texto. 37 2.4.3 Valores booleanos as 25 VARIABLES. 39, 2.5.1 Declaracion de variables # 39 2.5.2 Inicializacion de variables... 39 26 OPERADORES senses aL 26.1 Operadores aritmétions nn ame rials or 2.6.2 Operadores ligien.. it tn rAd2.6.8 Operadores de asignacin . 43 2.6.4 Operadores de comparacién.. 43 2.6.5 Operadores condicionales cu 4 27 SENTENCIAS CONDICIONALES .. 5 2.71 Sentenciaif. ‘ eee ae ve 2.72 Sentencia witch - 48 49 49 51 52 5a 2.7.8 Bucle while rou 2.7.4 Buele for RESUMEN DEL CAPITULO, EJERCICIOS PROPUESTOS, ‘TESTDE CONOCIMIENTOS... ‘CAPITULO, UTILIZACION DE LOS OBJETOS PREDEFINIDOS DE JAVASCRIPT ona 31 OBJETOSNATIVOS DE JAVASCRIPT. BALA Blobjeto Date. 3.1.2 Elobjeto Math : 8.13 Elobjeto Number. 3.1.4 Blobjeto String 32 INTERACCION DB LOS OBJETOS CON EL NAVEGADOR. ~ 42.1 Elobjeto Navigator. - 8.2.2 Elobjeto Serve... 8.2.8 Elobjeto Windom i i. a 3.244 El objeto Document. ment . 3.2.5 El objeto History ence a 3.2.6 El objeto Location wo. 38. GENERACION DE BLEMENTOS HTML DESDE CODIGO JAVASCRIPT. 34 APLICACIONES PRACTICAS DELOS MARCOS: ‘3.4.1 Uso de marcos con JavaScript. 35 GESTION DELASVENTANAS. 8.5.1 Abriry cerrar nuevas ventanas 3.5.2 Aparioncia de as ventanas 35.3 Comunicacién entre ventanas RESUMEN DEL CAPITULO. EJERCICIOS PROPUESTOS, ‘TEST DE CONOCIMIENTOS. USUARIO 41. FUNCIONES PREDEFINIDAS DEL LENGUAIE... : on 42. FUNCIONES DEL USUARIO 4.2.1 Definioin de fimeiones 422 Invocacion de funciones... AB ARRAYS sense 43.1 Declaracion de arrays 432 Inicializacién dearraye 483 Usode los arrays mediante bucles, Sts4.8.4 Propiedades delos arrays. 105 43.5 Métodosdelos array... 108 436 Arrays multidimensionales. . 109 44. OBJETOSDEFINIDOS POREL USUARIO... z e 18 4.4.1 Declaracién e inicializacin de loa objetos. . ated LTR 442 Definiion de propiedades y métodos. a4 RESUMBN DEL CAPITULO. x MIT EJERCICIOS PROPUESTOS, e att ‘TEST DE CONOCIMIENTOS ns CAPETULO 5. INTERACCION CON EL USUARIO. EVENTOS ¥ FORMULARIOS. 5.1 MODELO DE GESTION DE EVENTOS. 5.1.1 Eventos del ratén, 5.1.2 Eventosdelteclado 5.1.3 Evento HTML. 5.44 Evento DOM en 52. UTILIZACION DE FORMULARIOS DESDE CODIGO 5.2.1 Estractura de un formulario... 5.22 Elementos de un formulario 5.2.3 Estructurade una etiqueta input 5.24 Tipos de input... 53 MODIFICACION DE APARIENCIA ¥ COMPORTAMIENTO. 53.1 Modificaein dela apariencia de un formulario 5.32. Modificacién del comportamiento de un formularo 5a VALIDACIONYENVIO : 5.41 Bstrueturadel form para validar datos. : . 55. EXPRESIONES REGULARES., . 5.5.1 Caracteres especiales de as expresionesregulares, 852 Valen rmslcincn erprons regula 56 UTILIZACION DE COOKIES. 8.6.1 Usos delas vohies. 5.6.2 Lectura y eseritura de las cookies RESUMEN DEL CAPITULO. ‘EJERCICIOS PROPUESTOS. ‘TEST DE CONOCIMIENTOS.... ‘CAPITULO 6, UTILIZACION DEL MODELO DE OBJETOS DEL DOCUMENTO (DOM-DOCUMENT OBJECT MODEL ean 6.1 ELMODELODE OBJETOS DEL DOCUMENTO (DOM). 6.1.1 Tipos de modelos DOM 6.1.2 Bstructura del 4rbol DOM 62 OBJETOS DEL MODELO, PROPIEDADES ¥ MISTODOS DE LOS OBJETOS. 62.1 Objetns del modelo 6.22 Lainterfar Node 63 ACCES AL DOCUMENTO DESDE CODIGO. 163.1 Acceso alos tipos de nodo6.5.2 Acceso directo a los nodes, 6.3.3 Acceso aloe aributosde wn nodo tipo element. 6.3.4 Creacién y eliminacion de nodos 64 PROGRAMACION DE EVENTOS. 6.4.1 Carga della pagina HTML. 6.4.2 Comprobar sel érbol DOM esta eargad 6.4.9 Actuar sabre el DOMal desencadenarse eventos. 65 DIFERENCIAS EN LAS IMPLEMENTACIONES DEL MODELO. 5.1 Adaptaciones de cédigo para diferentes navegadores. 66 USODELIBRERIAS DETERCEROS.... RESUMEN DEL CAPITULO. EJERCICIOS PROPUESTOS. ‘TEST DE CONOCIMIENTOS. ‘CAPITULO 7. UTILIZACION DE MECANISMOS DE COMUNICACION ASINCRONA seo 7A MECANISMOS DE COMUNICACION ASINCRONA.. lal Definicién de AJAX. 7.1.2 Blecein de AJAX. 7.1.3 Repaso a las tenclogiasinvolueradas... 7.1.4 Perspectiva global de un desarrollo JAK een 712. FORMATOS PARA EL ENVIOY RECEPCION DE INFORMACION. XMLY JSON. 7.2.1 Sintaxis de JSON ro " 7.2.2 Bjemplos de intereambio de datos con JSON y XML. 73. EJEMPLO DE COMUNICACION ASINCRONA. 7.3.1 Comunicacién con XML. TA LIBRERIAS DE ACTUALIZACION DINAMICA .... 74.1 JQuery 74.2 Prototype. RESUMEN DEL CAPITULO. EJERCICIOS PROPUBSTOS....... ‘TEST DE CONOCIMIENTOS. CAPITULO 8. ALMACENAMIENTO DE DATOS EN EL LADO CLIENTE 8.1 ALMACENAMIENTOWEB BLA Las cookies 8.1.2 Problemas con las cookies. 8.1.3 Las cookies de Flash 8.1.4 La especitieacin web Storage do In WIC. 82 BASESDEDATOS SQL. (STANDARD QUERY LANGUAGE) EN ENTORNO CLIENTE. 82.1 WebSQL. pean 8.2.2 Indexed Database API 83 APLICACIONES EN CACHE. 8.3.1 Ventajasy desventajas, 88.2 MLB mes‘RESUMEN DEL CAPITULO. EJERCICIOS PROPUBSTOS, ‘TEST DE CONOCIMIENTOS.. 9.1 REPRODUCTORES MULTIMEDIA ¥ PLUGINS ASOCIADOS... : 9.1.1 Reproduecion de videos en HTML 5... = 228 9.12. Reproduceién de audio en HTML, 230 92 GHOLOCALIZACION. : 232 9.2.1 APIde geolocalizacion de HTML... ‘239 9.22 Utlizacin de la geolocalizacion . vn 2B RESUMEN DEL CAPITULO oon oe = ee 286 EJERCICIOS PROPUESTOS. Se Emer 238 TEST DE CONOCIMIENTOS won : : rnIntroduccion Ey Histrcamente, la aproximacién més utilizada en el desarrollo web ha sido trasladar toda In interacidn entre el ‘usuario y la aplicacin al servidor web. De esta forma cl usuario utiliza st navegador web para enviar sus peticiones ‘un servidor que as procesay le devuelv el resultado que se mostraba en el navegador. No obstante las mejoras ‘hardware han hecho que esta tendencia varie. Los usuaris finales dsponen de méquinas eon mayor capacidad de ‘procesamiento, por tanto, yu noes necesario que sea el sorvidor quien se ocupe de Ia mayor earga de procesamiento ‘Asi, la tendeneia generalizada pasa por desarrollar aplicaciones wob que trasladan a mayor carga de procesamiento ‘al navegador web del cliente, con lo que reducen Ia necesidad constante de intercambiar informacidn con el servidor Por tant, eliminan el retardo derivado de la Iatencia de la Red. Por todo ell, y ante el augo y explosidn de Internet como herramienta de comunicacin y trabajo y la crecente
(y para indicar a Goalizaion de un Dogue de eign embebid) sn etiquta puede inclirse en cualquier parte del documento, ngve se rotmionda quo el igo JavaSoript, nl para propos conretos de generain de contenido a visualina, we defna dentro de a cabeera del dcumenta HTML (entre las etiqutas Seay Hassles Weeate veer foape alam
chem) sane-"netp?//sone.n3.0rg/1999/xhtm1"> seta http-equiv="Content-Type” content="text/html; charset
ejenplo 1 pueden ‘almacenarse en un fichero externo con extension . jc. Al igual que sucede con los documentos HTML, os fcheros 4s pueden crearse con cualquier editor de texto. continuacidn se muestra el contenido de un fchero externo que ‘contiene eédigo JavaSeript, Archivo mensaje.4 alert ("Prueba de Javaseript”) + [La forma de aceder y enlazar sos cheros 5s con el dacumento HTML/KHTMI cs através dea propia etiqueta -ript>, No existe un limite en el niimero de fcheros .3¢ que pueden enlazarse en un mismo documento HTML ‘XHTML. El siguiente ejemplo muestra oimo se enlnzaria un documento HTMUXHTML con el fichero anterior
» chivEjemplo 2: fichers extarned/hi> A igual que en el ejemplo anterior, para que eta téenicafunclane, ademés del atributo toe tenemos que incluir clatributo =<. Este atributo contend un valor que indicar4 la ruta relativa (con respect al ichero HTMLIXHTML) {ela ruta donde se encuentra el archive JavaSeript que se quiere enlazar. En este caso est dentro de una carpet denominada inc. La dniea restriceiin de la etiqueta
es que solo puede enlazarse un archivo en eada etiquota. Podomosineluir ol numero de eiquetas
que necsitemos, Enie las ventajas de este método est que Ta vineulseén de un mismo ficheroexterno puede hacerse desde varios {documentos HTMLIXHTMEL distintos. De esta forma, enol easo de que haya que modifiar algo, solo hay que hacerlo fen tn nico fchero, Cualqaicr modifeacién realizada en el ichero externo ke ve refljnda inmediatamente en todas Ins paginas que lo enlacen(OE savascner ey ELEMENTOs HIM, El timo método sueleutilizarse habitualmente como forma de eontrolar Ios eventos que suceden asociados @ tun elements HTML conereto (aunque también puede utilizrse con otros fines), Consiate en insert fragmentos de “JavaSeript dentro de atribatos de etiquetas HTML de Ia pagina:
chemi sming="setp? //wane.93.079/1999/xhemL "> cheae>
ejempie 3 ‘alert (‘Prusba de Javascript’) ;“> sSdigo en atributes
s/nemt> La principal desventaja es que el eéidigo JavaScript se intereala con el cédigo HTTML y; dependiendo de la ‘complejidad y longitu de éste, el mantenimiento y modifcaci del eddigo puede recultar mds complieado. Jocrmowesss NE 2% En este capitulo se ha mencionado la “Guerra de los Navegadores” Se propone que el alurmno profundice fen este periodo,identiique sus consecuencas y debata con los compaferos acerca del momento actual (considerado com la "Segunda Guerra de los Navegadores") 1 a arguttoctura 6e referencia presentada en a Fgura 1.2 puede oplicaree a cualquier navegador. Se propone {que el alurmne apique esta argitectura invesigando los diferentes médulos y componentes sun navegador actual como Google Chrome, 1} La tecnologia Flash estdsiendo sustiuida progresiamente por capscidades similares dentro del estndar HTML. Se propone que el alumna Invastigue cual es el soporte que HTML 5 propane para la visualzacn de ‘contenido multimedia (puede consultase en la pina del esténder HTML del WAC). 2% La forma de vincular un ficero externo mediante el atibuto s== de la etiqueta
requlere une ruta felatva. Se propone que el alumno estudie las regas de esta vinculacién y los metacaracteres permitdos (puede consutarse en la pagina del esténdar HTML del WC)1 desarrollo de aplicaciones en elo del cliente parte de Ia base de un componente software especifico ‘que permite acceder a los eantenids offeeidos por un servidor, como parte de la arquitetura Cliente! Servidor, «través de Internet. Este componente se eanece con el nombre de “navegador web”, En los ‘times sfos muchos tipor de navegadores web han aparocido eon diferentes caractristicas y para ser jocutaos en diferentes plataformas. Un aspocto comtin a todos ells es el soporte para Ia gran mayoria de tecnologia que se pueden utilizar en el desarrollo de aplicaciones en el entormo dl lente. Ente estas ‘ecnoloran destaca HTML como lenguaje de deseripeién de mareas en documentos de texto accedidos a ‘txavéa de la Web, Otros lenguajesy tenologias como JavaSeript, CSS, AJAX, Flash o los applets de Java, Jhan permitido dotar al cliente de numerosas herramientas que faiitan Ta interaetividad con el usuario -mejorando su experiencia de navegacién en la Web, ‘Finalmente, debemos ser conacientes de las restricelones y paticularidedes que cada lenguaje equiere si _queremosintegrar estas toenologias con el lengusje HTML y crear paginas web atractivas y dinémicas, EJERCICIOS PROPUESTOS “1 Irmplementar los ejemplos propuestosen el apartado 14 yprobarlos con los navegadores web més utlizados que parecen en Ia Figura LLSenale Ia respuesta corrects con respecto a las caractersticas de un navegador web: 9) No pueden realizar peticiones al servidor sin Sntervencién directa del urvari, "Todos ls navegadores web actuales son gratuites. “Todos los navegadores actuales soportan la eje- cucién de JavaScript. <5 22 4a)'No pueden almacenar ningun tipo de dato relacionado on la navegacida del cliente {Cul de Ios siguientes modus no forma parte de Ta arquttectura de referencia do un navegador web? ‘Médulo de gestion de usuarios. “)) Médalo de persisteneia de datos, ©) Médlo de comunieaciones, Sofiale la respuesta correcta con rospecto a las construido para que sea valida. 0) Bs Ia unidn de los principios de XML. con el Jenguaje HTML. ©) No permite la inclusion de ebdigo JavaScript “o) Ningumna ls anteriores. Intexlea Uvoue Meter aut Grecacles Mole Rededtecde y |, tem YY Intiinate 25 Corr cewimty, )) Bs un esténdar que indica la forma en la que un servider debe ejeeutar un programa externo, jo) No se puede tilianr pare programar applets. 322 "s) Se puede utilizar para programar Flash. #2 fe iets te era eorrecto para integrar ego JavaSeript en HTML? a)
">, b). e)
Mensaje 40) Ninguna de las anteriores. éscipl type = ext / Java Seu 1" Secz “onthe. §S & e/seupt>Conover las principales caracteristicas del lenguaje JavaScript, Dominar la sintaxis bisiea del Tenguaje. 4 Comprender y utilizar los distintos tipos de variables y operadores presentes en el lenguaje JavaScript. ¥ Conover Ins diferentes sentencias condicionales de JavaScript xy saber realizar operaciones complejas con elias.En el capitulo anterior hemos visto algunos de los legusjesy tecnologins de programacién en el entorno del liente, Algunos de estos lenguajes permiten mejorar Ia inteactividad con el usuario tno de los Tenguajes més utilizados para este propésito os JavaScript. En este capitulo veremos las principales caratoristicas deste lenguaje, fomenzando con el ejemplo “Hola Mundo”, el cual se suele usar como un primer ejrcicio tipico que sirve como {ntroduocin al estudio de cualquier longue de programacién. A continuacién estudiaremos la sintaxs del lenguaje, _adems de los conceptos relacionados con lo tipos de datos, ls variables y lo operadores utlizados por JavaSeript Pr sltimo, vemos ls sentencias condicionale, lax cuales nos permitirén aumentar Is complejidad de los ejemploe Y elercicis propuestos durante tedo ol eapitul Zo al CARACTERISTICAS DE JAVASCRIPT v JavaScript et un lenguaje de programacién interpretado que se utiliza fundamentalmente para dotar de ‘omportamiento dindmico a las paginas web, Por ello, cualquier navegador web actual incorpora un intérprete para cédigo JavaScript te Bl primer lengua de scripting para la Web fue LiveSeript, desarrollado por Netscape para proporcionar una alternativa “ligera” a Java a Ia hora de soportar comportamiento dinémico tanto en el lado del seridor como en el = del cliente, No obstante, dado el auge y papularidad do Java, en 1995 Netseape y Sun aprovecharon el lanzamiento de la versiGn 2 de Navigator, el navegador web de Netscape para anunciar que el lengusje pasaba a denominarae JavaScript. Por otro lado, el éxito de JavaScript provoeé que, inchiso cuando ya exiatia VBSeript, otro lenguaje de ‘eripting para la Web basado en BASIC, Microsoft lanzase su propia versin de JavaScript, denominada JSeript © Integrada en sus navegadores a partir de Internet Explorer . ‘A posar de que las diferencias entre JavaScript y JScript no fueran muy grandes, el hecho de que cada navegador soportase su propio lenguaje obligaba a veces alos desarrolladores a programar das veces la misma funcionalidad (na con eada lenguaj)e introdueir en sus paginas web sentencias condiionales para dstinguir en qué navegador =~ se estaba ejecutando la pagina e invoear ln elecucin del ebdigo eserito con el Lenguaje soportado por el navegador en nest. En respuesta a este tipo de problemas la ECMA (European Computer Manufacturers Association) emprendis un sfuorzo de estandarizacién que desembacé en la publicacén del estandar ECMAScript! Aunque a dia de hoy, tanto “JavaSeript como JScript aon canformes a dicho estdndar, eel término JavaSeriptel que se impuso y se utiliza como
script>, De esta forma el ‘navegador sabe que el Bloque do texto contenido entre a tiqueta deine y fin no se correspond con esdigo HTML, ‘ino que se trata de cédigo que dobe ser proceeado antes de mostrar el resultado en pantalla. Asi el navegador, que Incluye un intérprete de JavaScript, se encaryara automaticamente de ejeeutar el eGdigo euanda cargue la pagina y roflejar el efeeto dela ejecucin sabre Ia pagina que tiene que mostrarHoy dos formas de embeber el eédigo JavaScript uilizando In etiqueta
. Crea un fichero Hlolatfundo. ‘nti. y copia y pega el siguiente cédigo en el fichero: - <1D0CTYPE heml> . meta http-equiv= “content-type” content="text/htmls charset=utf-3"> uy stitle>tola Mondoc/eitie>
S
alert (‘Hola mondo en JavaScript!) 2 (© Utilizar el atributo sre de dicha etiqueta para ospeciicar l fichero que contione ol eddigo JavaScript ‘meta http-equiv-"content-type” content="text /ht charser-ute-e">
S I ACTIVIDADES 2.1 °® Guarde a pigina con otro nombre (Act ividad-2.1-Canbiarcolor-h yeompruebe el resutaco, aa : Podemos observar que en la primera actividad hemos uiizado una cadena de escape para mattrar correctamente los coracterestidados. Para evitar este problema debernos emplea a cadena | ‘i, donde cs corresponde al caréter especial especticado por dos cgitos hexadecimales segin e! ‘estindar Unicode. Exsten diferentes secuencas de escape que son utes 2 la Rora de introdutirno slo ‘caracterestidedos, sin también saltos de lines (\n),tabuladores(\=), et m1), Abra con sy navegador23 EL LENGUAJE JAVASCRIPT: SINTAXIS 2 Ellenguaje JavaScript tiene una sintaxis muy similar a lade Java o ala del enguajo C++. La sintaxisexpecfien aspects, amo lao caracteres que se deben utilizar para definir os comentarios, la forma de Tos nombres de Ins variables oe! modo de separar la diferentes instrucciones del eSdign, ‘GN mavtscuras yamescutas: ‘Une dela primera difeultades que encuentran ls programadoresnovatee en JavaScript es que este Tense ‘istinguo entre maytsculas y mindsculas, a diferencia de HTML, que no realiza ninguna diferencia entre elias. sta regla cobra importancia cuando uilizamos variables, objets, fncones o cualquier otro simbolo del lengua. Por ejemplo, noo lo mismo utilizar Ia func aioe () que ALer* (). Tay eomo hemos visto en el ejemplo de otattind. nem, ln primera muestra un texto en una ventana emergente del navegador, mientras que la segunda no existe a menos que la defina el programador ‘QEE comentarios en et covico ear cio. tds inns de cig no won iterpretadas pore navegador. Su ncn principal sla deft a eta del ign al programed. xisen dos formas de insertar comentario. Una de cllas es. través dea dbl barr (//,con a sal omens ‘una ena linen de digo La otra forma qu podomosuilizar para cmentar un cig através de oe signs /= al ini dl oman y Lng */ a fn al ten. Da en do aon cesta vin Tn Gs ee lee ae eee
/ Bate modo permite conentar una sola lines @ nods permite realizar BED tapuracion y sattos ve Linea “JavaScript ignora los espacos, las tabulacionesy ln xltos de linen presentes entre lo simboloe del eédigo. La “iniea restrieeién en cuanto a los salto de lines Ia vemos en el siguiente apartado, En cl momento en que los programas empiczan a ser eomplejos, podemos aprecar la utiidad de emplear las tabulacionesy los saltos de linea adecuados para mejorar la presentacién ylaleibilidad del eédigo. A eontinuaciéa,podemos observar la diferencia entre un eddig bien estructurado que focilita la lctura y un cig que no eta bien estructurade Versa 1: 1 Antes de vere resultado, Zeul cree que seré el valor en a ventana emergente?2.6 OPERADORES Hasta ¢] momento hemos utiizado elemplos con sentencias bastante sencillas pero, partir de shora, podremos construir diferentes expresiones en las que tendremos una coleecién de simbolos, palabras o nmerot con los que pdremos realizar eélculos més compljos. Ee posible construir este tipo de expresiones gracias al so de los operadores e de JavaScript. 3 JevaScript utilize principalmente cinco tipo de operadores 1 Operadores aritmeétiens. S © Operadores légicos 1 Operadores de asignacién. Operadores de comparacion. "® Operadores condiciones. Los elementos utilizados ‘continuacin presentamos los una expresin y unidos a través de un operador se definen como operandas. A rentestipos de operadores, OPERADORES ARITMETICOS ‘os operadores aritmtics permiten reslzarecuos clomentales entre vrishles numéicas. En la Tabla 2.3 ~ _podemes vr las eutr operaciones avtmetias elementals: suma, rest, mulpicain y divin, adem de otros tres operadores menos comunes: mula, increment ydecrementa Tabla 2.3 Operadores aritméticos a pee nay re Sei ca eee © in eaten a ee Spee cr eee 2 ees mi Se een RrBl operador médulo divide un nimero entre otro y lo que devuelve es el resto de dicha divisén. Por ejomplo, si ‘Qusidramos comprobar que el alo 2012 es un afiobisesto(teniendo en cuenta algunas excepeiones, le afosbsiertos son divisible por 4) debomos realizar la siguiente operacién: Sila variable bisieoto almacona ol valor 0, podemos afirmar que 2012 os un afoDisiesto, ‘Los operadores ineremento y decremento permiten realizar una de las operaciones més comunes en los lenguajes {do programacién, os decir inerementar o deerementar un valor en uns unidad. Es posible ular estos operadores “antes o después de la variable, aunque su efecto es diferente en ambos casos, Pr ejemplo, siguiente edigo almacena ‘elvalor 2 en ambas variables jariablet = Mientras que en este otro ejemplo la primera variable contend al valor 2yla segunda I: variable t= 1 variable = variable itt [EE oreravones Locicos Los operadores légicos tionen la uilidad de combinar 0 manipular diferentos exprosiones Iigicas con el fin de evalua sil resultado de esta combinacién es verdadero falso. Generalmente, se utiliea est tipo de operadores en ‘el casoen que debamos tomar decsiones dentro de un programa. Pedemos ver los tres operadores lgicos que existen cen la Tabla 24. Tabla 2.4 Operadores légicos an 'Y——_Sjecuta la eperacién booleana AND sobre los valores. Devueve true solo si todos las valores son vzsn. Devuelve £2120 en case contrario. 1 No Invierte el valor booleane desu operand,OPERADORES DE ASIGNACION ‘dems del operador de asignacin igual (~), JavaScript cuenta con otros operadores de asignacién que tienen ‘an caraetaristien en eoman eon los oporadores aritmétiens de inerementov decremento. Esta enracterfsiea es lado shorrarnos tiompo y disminuir la cantidad de eédigo escrito en los programas. Gracias al uso de estos oporadores, podem obtener métodos abrevindos que permiten evita el tener que escribir dos veces la variable qu se eneventra ‘la inquierda del operador. La Tabla 2.5 muestra todos los operadores de asignacin. Tabla 2.5 Operadores de asignacién = Sumay asigna _—_Ejecuta'una suma y asgna el valor al operando de la Iaqulerda. ‘= Muttinca yasigna Ejecuta una multilcacén y aigna el valor al operendo de la inquierda. = _Médulo yasigna__Ejecuta el médulo yasigna ol valor al operando de I ixquied, Por ejemple, pdriamos usar ol operador de restar yasigner de este modo: var deudas = 1500) // tenenos unas deudas de 1500 «1 deudas ~= 200; // nu as deudas disminuyen de 300 20 // este es lo misno que escribir deudas = doudas - 300 SINE operapones pe companacion ‘Loe operadores de comparacin tal y como indica su nombre, nos permiten comparar todo tipo de variables on ol fin de veriticar sus valores El resultado de dicha comparacién nos devolverd un valor booleano y determina el londen relaivo de dos valores. La comparadinejeeutada por estos operadores se puede realizar solo sobre ndmeros y cadenas. Si utlizames otro tipo de dats, estos se convertirén automsticamente para intentar que la comparacin se puoda lovar a cabo‘Tabla 2.6 Operadores de comparacién \erica sl operand a la iquierda del operadores mener que el ‘operando de la derecha, Dewelve crus en ese caso 0 raise en caso contri. era os dos operands son iguaes. Dewelve srs en ese 2500 >= Mayor oqual que Verica sie! operando ala laqulerda del operador es mayor 0 igual que cl operando dela derecha. Oevuelve te en e8@ C280 0 fa120/@n CaSO contrarie. 2 === Estrctamente __Verifica si el operando ala laquerda del operador es igual y del mismo Igual tipo de datos que el operanda de la derecha, Devuolve teen ese caso 0 fen caso contra. 9D) opmranones conprcronats Existe otro tipo de operador un poco mas complejo, pero bastante tila la hora de tomar decisiones en los programas de JavaScript, Se trata del operador condicionl. Con este operador podemos indicarle al navegador que ‘jecute una accién en concreto después de evaluar uns expresién, El operador eondicional consta de tres parts: la primera es ln expresion aevaluar,la segunda es Ia aocin a realizar sila expresion es verdadera la tercera parte es Inccin a realizar si la expresin es falsaTabla 2.7 Operadores condicionales 2% Condlconal Sia expresion antes del operadores verdadera, se utza el primer valor a la derecha, En caso conraro se utiliza el segundo ‘olor la derecho, Por ejemplo, si queremos avisar al usuario que no se puede efectuar una divisin par oer, es posible hacerlo ‘mediante un operador condicional: dividendo = pr. var divisor ~ prom pt (*introduce el dividen alert ("Ne es posible 1s division por cexo’ ado asi * + resultado) | scrvioaves 25 “ Es "© Laprecedencia de os operadores determina el orden en queseejecuta una expresién. Resice una bisqueds con fn de encontrar alguna e as tablos que inciquenel orden de pracedencia dels operadores de JovaserDt ye SENTENCIAS CONDICIONALES ‘Los ejemplos que hemos utilizado hasta el momento han sido ejemplos Tinesles en los que las sentencias las ‘jecutsbames unas detris de otras, desde la primera hasta la ltima. Podemos controlar le tamsa de decisionesy el posterior resultado por parte del navegador através dl uso de sentenciaecondicionales, Dichas sentencias permiten ‘cvaluar condiciones y elecutar ciortas instrucciones ai a cundicién os verdadera y ejecutar otras instrucciones Aiferontes sla condein es fale, Existon tros tipos de sentencias condicionales: Ia sentencia ££, la sentencia svi y las sentencias en bucle voile y for. Lasentencia i+ indin al navegador si debe ejecutar una parte de cbdig en base al valor Iégieo de una ‘expresién condcional, La sentencia switch compara el valor de una variable con una serie de valores conocidos, Si ‘uno de ls valores conocidos coincide con el valor dela variable, eejeeuta el digo anociado a dicho valor conacid Las sentencias en bucle permiten al navegador ejeeutar un fragmento de edigo de forma repetida mientras la condicin sea verdadersUE) senrencia [La sentencia s£ e8 una senteneia fundamental a la hora de realizar controles en la ejecucién de los programas. De este modo, el navegndor tomaré una decisin y ejecutara eiortas instruccones de forma condicional. Su sintaxis a siguiente: if (expresién) snsteucelor La expresion puede ser una comparacién 0 una expresin ligica que devuelve los valores true 0 raise. Las Instruceiones sone digo que ejoeataremos a a expresién devuelve el valor eve. JavaSeript iors las instruciones fen ol easo en que la expresién devuelva ol valor false, fa 1 uso de las aves |) no es obligatoio en e! caso en que debamos elecutar una sola instruccién, Delo contri si que es obligatoro su uso ‘La sogunda forma de utilizar la sontoncia + es agregando la palabra clave ©1so,De este modo podemos ejecutar {nstrucsiones en el caso on que la expresién devuelva el valor £2112. Asf os como definimos una sentensia i f=c1 se: it texpresion)( else ( ih instruociones_si_fales ' Bl diagrama de flujo de control de la sentensia { £~eis0 lo vemos en la Figura 2.8: = Figura 28. Diagame defo decane dela wntania ioe1a tercera forma de utiliza la sentencia {¢ et modinnte Is sentencin {£-else-<#, La Figura 2 muestra su iagrama de Mujo de control. De este modo, le pedimos al navegador que evalie tna expresiGn, y si érta devuelve el valor fase, I navegador evaluaré una nueva expresin, Si ninguna de as dos o mas expresiones uilizadas devuelve lvalor crue, es posible utilizar un iltimo e1se, donde es posible escribir el cédigo que se ejecutard en este caso, La ‘estructura de la sentencia £-e1 20% es Ia siguiente: At enpresion_t) ( instrveciones_1 Jelse if (oxpresion 2)( Anetrvcciones 2 Jetset inetrvcetones_3 En l easo en que debamos utilzar demasiadas sentenciss de ipo e1s=-s¢, es preferble utizar le sentenciaaxitch, que estudiaremos en el siguiente spartado, Este es un error muy comin en los programadores prncpiantes. I navegador no tendréningin problem en ejecutr el digo, pero Ia lectura y mantenimiento de una sentenca compleja de varios \-sise se puede convertr en una tarea dif, Una vez que conozcamos y dominemos el uso de la sentencia 5 ord posible escribir ipos de céigo com tomas de {ecisiones mas complejas através de if anidados, Las +f anidados nos permitiran solucionar problemas que se not presentan més menudo, eomo por ¢omplo la toma de devises basadas en decisiones precedentes.DE senrencra swrrcet Bn alunos catos es necrarioconparar ol valor den variable can algunos valores conuids. Para estas situacnes, JavaScript proporionalasentencia switch En ett aentencia a ene una expesn a evalua ¥ un tere de eribns valores de cha expe, Iamadce cose low qos ententran las neice asia ado eacan el vane dl expres vler cada cor. La tered cnt senonia ol og sente: owitch (expresién)( case valori: Anstruccionss a ejecutar si expresién break: cage valor2+ instrucclones a ejecutar ef expresién = valor? break: case valor: instrucciones a ejecutar si expresién = valor3 break inetrucciones a efecutar st expresi¢n es diferente Cada caso termina oon Ia palabra clave break. La wtilidad de exta palabra clave es la de detener la ejecueién del ‘uszon en el momento en que tno de los caso reeute verdadere. De este modo no perdemos tiempo en evaluar los ‘demés casos. El diagrama de flujo de I sentencia switch podem verlo en la Figura 25: ‘gera 25 Dagrama de fie dcontr dea sete oe Las instruceiones que ce eneuentren dentro de a senteneiaopeional Iamada de #21, 8 jeeutardn solo cuando ‘ninguno de lo valores de cada caso coincida con el valor dela express.EEE wucie wae 1B bucle mas wencilo en JavaSérpt es el bucle wn: Le. través de bucles de este tipo, el navegador ejecutard una 0 més instrucciones continuamente hasta que uns cierta eondcidn deje do sor vordadera. La Figura 2.6 muestra sa ‘iagrama de ajo. Bste buco e el mas utilizado cuando no disponemas de a informacién que nos indique el nimero ‘de voc que debemos repetr Ia iteracidn del bucle. Bl bucle while consta de tres partes fundamentals: la palabra ‘lave wnt Le, a expresién condicional y las instruceiones que se sjcutan en el caso en que la expresidn eondicional sea vordadera Su sintaxis es Ia siguiente: while (expres: 8 ‘Una varincin del buelewni.12 eel denominado do-whte. Su estructura es la siguiente J tie lexpresién) vals si ‘Do ceto medio nos asogura que la ejeeucidn del buee se Hevea eabo al menos una ves y sole al fina, ‘5 debe seguir ejeeutando o no. Sin embargo, podemos realizar este proceso através de un bucle white, Esta es una Drictica recomendable visto que el bucle c~ni.e ae introdajo solo a partir de la versa 1.2 de JavaScript, con lo ‘cual no tee los navegadores soportan este dim bucle. Pigura 26 Dicara ef de otra EEE pvc ror EL bucle for permite que un navegador etete las nstruccions que se encuentren dntr del mismo buce hasta au la express cndional devurva valor £0 Est tipo de entenca const de neo pts a palabra ve oa valor nical del variable de contr In cndiin baa en ica variable neremento o decremento dla esi yal ce dtlSu sintaxis general e la siguiente: tor(valor_iniesal_variable; expresiéi increnente_o_decrenento_de | condietonals ‘Tal y como podremos verifier, este bucle es una herramienta bastante potente a la hora de poder realizar Aiferentos actividades en pocas incas de eédigo. Bl diagrama de flujo de este bucle Tos vemos on la Figura 27. En ‘este diagrama, la fase del incremento del contador se efechia después de llevar a cabo las instruccones del bucle, ‘sin embargo, este incremento lo podemos realizar inmediatamente después de hacer le eomprobacién ineil de la ceondicién o en alguna de las mismas instrueciones del buce Figura 21 Dgrama de aj deat bce £05 Para comprender mejor su funcionamiento, podemos utilizar un ejemplo que muestra en pantalla un valor que se {ncrementa en cada una de las die iteraciones dl buce: for(ia0; L107 £4401 document.write (*El valor de 1a variable de control es: ” +i + Set) [oon 2% Abra el chero nctivisna-2.6-if. 21m e ntroduza la nformacn requeréa por el navegador. Posteriormente ‘mire et cbcgo para que vea un ejemplo del uso dele sentencia condcionalEn este capitulo hemos presentado una breve introduecién de las earactersticas principales del lenguaje JavaScript, ademés de un primer ejemplo elésico donominada “Hola Mundo’, el cual se utiliza en el ‘aprendizaje de cualquier lenguaje de programacién. Por otro lado, hemos introduc Ia sintaxis bdsica el lenguaie,teniendo en eventa algunos de los errores mas frecuentes en ls programadores con poca experiencia. A continuacisn, hemos presentado los tipos de datos usados por JavaSeript: nimeras,cadenas de texto ¥ valores booleanos, Estos tipos de datos son usados por las variables, las cuales presentan dos fases principales para un correct funcionamiento: la deelaracién y la inicializacién. Posteriormente, hemos presentado twas las eategorias de los operadores del lenguaje: operadores aritmétios, operadores logicos, operadores do asignacién, operadores de comparacion y operadores condicionales. Los tipos de datos, as variables y los oporadores son conceptos fundamentales en JavaSeript, Estos cemeeptos se pueden defini como Ia base de cualquier aplicacién de este lengua, Por timo, hemos introdueido las principales sentencias eondicionales: {£, suiten, white y ¢or, De cada una do ellas, hemos ensefiado Ine posible variantes con su respectva sintaxia. Con eats conceptos se ha aprendido a utilizar un navegador para Tevar a cabo tareas de toma de decisiones 0 ejcucién de instruceiones de forma repetitiva1. Cree un fichero HTML EjercicioPropuesto-2.1-Mumeroa. tml Anda el siguiente eédigo JavaScript en el everpo de Ja pina (entre la etiquetas y ): cecript typenttext /Javascript”> ‘var maxvale = Nunber.¥Ax VALUE? var minValue = Nonber sm VALUE? alert ("hax Value alert ("Hin Valuer" + ninvalue) 4+ naxialue) 2 alert (Valor eopecial: * + manvaluet2); De este modo posiremos comprobar el ndmero més _mrande representable por JavaScript, el nimero més cereano a cero y el valor especial que representa el infinite = 2, Usilice ol siguiente script para comprobar et operadarlogien 63: ‘Con este eerssio pedimos al usuario que introduzea dos valor Logics y posteriormente compruche el ‘resultado del operadar = 8. Usilice el siguiente script en un fichero HTML ¥y compruebe su funcionamienta. Posteriormente, ‘cambie la linea countdoun-- por countaown++ y ‘oncluyaexplicando por qué el navegador no deja de ‘slicitarnos valores , {Cuél de los siguientes comentarios es correcta en evaSeript? 1b) #7 comentas +) 11 Comenta )
sretbateo ‘Devuelve el nimere correspondiente ol ais del mes entre t y 31 DDenelve un ndmero de 4 cifras correspondiente al af. getwtiiteeconds Dewuelve los milisegundos entre 0 y 9999. get¥onth() yf mes Dewelve el mes entre 0 (enero) y 11 (diciembre). > sttinee Dewelve el mero de milsegundes transcuridos Sete el 1 de enero de geturcrunivear() DDewvelve el nimero del afi, respecto al tempo universal coordinado.. (get ireuiit Leesonde ‘Devuelve os milsegundos, expecta al tiempo universal coordinado, cgetiTewonen ) Develve el nimero del mes, respecto al tempo universal coordinado,RAMA ‘3 UTILIZACION DE LOS OBJETOS PREDEFINIDOS DE JAVASCRIPT qet Dewelve sets entablewo getoresecsas setttioars () sstotseoonds () DDewelve los segundes, respecte al tiempo universal coordinado, ‘Anaiza una fecha y devueve el nimero de mllsegundos pasados desde el {de enero de 1970 hasta la fecha anlizada, stablece el valor del da det mes. Establece el valor del af, Establece el valor dela hor. Establece el valor de los milsegundes. Establece el valor de los minutos Establece ol valor del mes. Establece el valor de los segundos Establece une fecha, agregando 0 sustrayendo un ndmeroespeciic de rnlsegundos hasta 0 deade la medianoche del 1 de enero de 1970. Establece ol valor del ela del mes, respecto al tiempo univers ‘enordinads, Establece ef valor del afo, respecto a! tempo universal coordinado, Establce ol valor dela hora, respecto ol tempo universal coorcnado, Establece el valor de os milsegundos, especto al tiempo universal ‘coordinado, Establec el valor de fos minutos, especto al tiempo universal coordinado, Establece el valor del mes, respecto al tiempo universal coordnede, Establece el valor de los segundos, respecte al tiempo universal cnordinad. Convirt la fecha del objeto nate en una eadena de caracteres CConviert ta fecha del objeto nace en una cadena de caracteres, sean las onvencionesloales. Dewelve la parte del tempo de un objeto r= en una cadena segin las corwenciones locales, ‘Convierte un objeto oa: en una cadens de texto, segin ls convenciones recsles CConviere la parte de tempo de un objeto nate en una cadena, CConvierte un objeto oats en una cadena segtin el lempo universal, DDevwelve el ndmero de milsegundos en una cadena de tipo fecha desde | medianoche dl Ide enero de 1976, 9‘Todas ls operaciones relacionadas con fechas recaen sobre el objeto D3t.2. Para instanciar un ohoto de este tipo cxisten dos formas: erear un objeto con Ta fecha actual y crear un objeto con una fecha diferente a la actual. Esto depend de los perimetros que definamos a la hora de erear el objeto. A eontinuscién, veremos un ejemplo con dos abjeto de tipo Date en el eval realizamos una operacin de resta entre ellos [oo TTT |} Enel apartago del objeto vst: hemos utlizado un ejemplo para calcula el dea de'un circulo, Reale una aplcacén similar pro que calcule el rea de un trdngulo en el cual la base ¥ Io altura las propercione el ‘svar. strine() + "
") Recuerde que el ea de un tingul es igual a: (Dage * akuray/2, a 2 INTERACCION DE LOS OBJETOS CON EL NAVEGADOR. En la seceién anterior hemos prosentade algunos de los principales objetos predefinidos de JavaSeript, Sin embargo, existen otro tipo de objetor que permiten el contrl del navegador en mismo, Estos objetos nos permiten ‘controlar diferentes caractristicas del navegador como, por ejemplo, qué mensaje mostramos en la barra de estado 0 ‘6m erear nuevas ventana. A continuacién presentaremos los principales objetas que permiten manipular y gestionar algunas de las ‘caracteritiens del navegader, D2 evonsero navicaror El objeto Navigator permite identificar las caructeristicas de la plataforma sobre Ia cual se esté ejeeutando ln aplicacion web eserita con JavaSeript. En eonereto, permite conocer datos como el tipo de navegador que se ests utilizando, su version y el sistema operativo del usuario, Este objeto se suele utilizar para obtener este tipo de informacidn y en base al resultado, tomar una delsisn sobre qué tipo de eidigoejecutar Eto se debe a que no todos los navegadores se eomportan del mismo modo con el mismo eédigo. Por ellen algunos caso, ea necessrio adaptar algun fragmento de eédigo para cada navegador.Tabla 3.8 Propiedades del objeto Navigator specodetane Devwelve el cédigo del nombre del navegador Speioaitie Dewelve Ia versién del navegador Dewelve la platforms sobre lacus! se est electando el navegador Tabla 3.9 Métodos del objeto Navigator Javatnabie( Informa sie navegador est habilitado pare soportar le ejecucin de programas cexzritos en Java, En el siguiente ejemplo realizamos algunas consultas sabre el navegador, ademés de verifier si estt preparado para Ia ejeeuciin do applets de Java. Bn este caso simplemente imprimimas el resultado en la pantalla, pero en aplicaciones web avanzadas es posible realizar tareas més complejas on base a este resultadoI objeto Screen corresponde a la pantalla utilizada por usuario, Este objeto cuenta con seis propiedades, ‘aunque no posee ningin método. Todas sus propiedades son solamente de leetura, lo que significa que podemos ‘consultar los valores de ls propiedade del objeto, pero no las podemos modifier Tabla 3.10 Propiedades del objeto Screen ‘Corresponde ala altura disponible dela pantala para el uso de venta ccolozbepts ‘Corresponde al nimero de colores que puede representar la pantalla pixeiepe ‘Corresponde ala resolucién dela pantalla expresada en bits por phe. ‘La altura y anchura disponibles para las ventana es menor que Ia altura y anchura total de la pantalla, debido a ‘que cada sistema operative ocupa wna parte de la pantalla eon barras de tareas 0 mend El uso del objeto soxeen y sus propiedades, os muy eoman en Ios disehadores de paginas wob que necesita saber la resoluein de la pantalla del usuario para poder adaptar sus disetos antes de eargarios. Otro us bastante comin de teste objeto, es consultar todas sus propiedades con l fin de adaptar Ia posicin y tamatio de las ventanas emergentes ‘que bra Ta aplicacién web, cecespt typer"text/Javascript”> document .weite(*cbe>Alturs total: * weite(Mcbe>Alturs disponible: * + write ("cbe>anchss Iwrite("
Profundidad de color -colorDepth) 7 "ex onser0 wmvow Como hemos moncionado anteriormente, cl objeto window se considera el objeto més importante del Lenguaje “JevaScript partir de l, podemos gestionar las ventanas del navegador y utilizar una serie de propiedades y métodos {que presentamos en las siguientes tables,Bl objeto Window ae considera como un chet implicit, ya que no es necesario nombrarlo para accede ls cjetos {quo se eneventran en el nivel ubieado bajo su nivel de jerarqui, Por ejemplo, tay como hemos realizado en alguna de las quisiésomos accodor ala propiedad que cambia el colo de fondo de Enlosejemplos anterioreshemes padido omitirlaescritura Tabla 3.14 Propiedades del objeto Window loses CCorresponde a valor booleano que indica sila ventana estécerrada ono. Corresponde al documento actual dela ventana, a: ‘Coremponie alconinesaeneeoemve Ey corona IEA TREAT me essa in a cancun AME core A TNS RR ci Coreen a acca eee aaee ister ee -swenieight __Garespondea la altura exterior ela ping, outermiach Corresponde al ancho exterior de la pagina. oeret apt aa psn de swtanas paetostest Corresponde ala posicién veteal dels ventana. espana are eeaonalbar Corresponde a is barra de herramientas personal, (srt) cores tit daca tyro 2 ‘Corresponde a ia ventana actual Conse eter cn eect ‘Corresponde a a bara de herramientas de navegadc corresponde ala‘Todas estas propiedades podemos manipularas con ol fin de mostrar ono una parte de la ventane del navegador modificar algunas earacteristica como su tama oposicén, A To largo del capitulo mostraremos ejemplos de cme realizar estas operaciones, Algunos de los métados del objeto rsow ya lo hemos usado en ejemplos o actividades de secciones anteriores. La mayor parte de estos métodoe estan relacionados con la gestidn de las Ventanas y la navogacin de ls paginas web ‘Tabla 3.12 Métodos del objeto Window Genera un cuadro de dilogo con un mensaje y un baton Aceptar e ‘taro Desactive une psn. eae ‘Genera un cuadr desloge con fos botones Aceptary Cancear focus) Activa una ventana. home) ‘Cara le pigina defnia como pigina por detect de navegador. - pent) ‘Are una nueva ventana. :. promt) Genere un cusdro de dilogo con un cuadro de texto para que el usuario Inerosuzes valores. 5 seeinterval) Evalia una expesién después de un tempo especticado, seston nla esto tempo, serotlay Muay coer de ne vetna en ann de na cara epee en ct Algunos de los métodos ya los hemos utilizado en ejemplos anteriores del libro y otros més completos los presentaremos en los siguientes apartados dedicados a la gestin de las ventana. ext) Detiene una pina.(EE et onsero pocumenr tobjeto Docunent so refiore alos decumentas que se cargan en la ventana del navegador Dado que con est objeto es posible manipular las propiedades y el contenido de ls elementos principales de las paginas web, probablemente: sea l objeto mas utilizado en los programas esritos en JavaScript Bl objeto cocunent euenta con una serie de subobjetos como son los vinculs, puntos de ancaje, imagenes 0 {formuilarios. Esta eolecién de subobjetos representa el verdadero potencial del objeto Socunen. A continuscién presentamos las principales propiedades y métodos de dicho objeto. Tabla 3.13 Propiedades del objeto Document alinkcolor Corresponde al color de los vnevles activos de le pina. ‘Corresponde a los applets (etquetas
) Java del decumento. apie cookie Corresponde a un fichero quardado en el equipo del clente del navegador con Informacion sabre el usuario Corresponde alos objetos embebldos (tiqueta
) en el documento. EN Src eal TO forms CCorresponde los formularios Cetiqueta
) de documento. Cinrespondea etna fecha en a ue se mec docu[La mayor parte do estas propiedades contiene una lista con eada un de los elementos presentes en el documento HTML. Una ver que se obtine la lista es posible acceder a cada elemento para gestionar o medficar cada uno de clos. Bl objeto cocusent tiene diferentes métodos bastante stiles, que resumimos en la Tabla 3.14 Tabla 3.14 Métodos del objeto Document SSE en Fs Se TSE To ae eS cetSeactiont) Dawah tt sleds a docimena seater) Ai aire i mS. cant Corea dec En eee SS _ssstepenst) ep un evry pe red aor tts uta : writed) Escribe datos en el documento, SEE = onsero mstory Fl objeto t12tozy almacena las referencine de todos los sitios web visitadas. Estas referencias se guardan on ‘una lista y sus propiedades y métodos se utilizan prineipalmente para que el usuario de una aplicacién web pueda Aesplazarce para adelante, para arés. Sin embargo al ser una lista de referencias, no poems aeceder alos nombres 4e las drecciones URL visitadas, ya que son informscién privada del usuario, Tabla 3.15 Propiedades del objeto History urcent ‘Corresponde a a cadena que contiene la URL dela entrada actual del historiaTabla 3.16 Métodos del objeto History back) ‘Carga la URL del documento anterior del histori 0 ‘carga la URL del documento especineado por el indice que pasames como parametro dentro del historia. Por ejemplo, nel fchere HTML que queramoe usar este objeto, podeiamos erear dos botones para que el usuario puoda deeplazarse adelante oatras sori su historial de navegaci. ct SEE et onsero vocanion El objeto Location correspond a la URL de le pégina web en uso, Sus principales funcionos son las de consultar las diferentes partes que forman una URL, eomo por ejemplo el dominio, el protocolo 0 el puerto. De este modo, ppodemos extraer cada componente de la URL. y trabajar con ellos de forma separada. Gracias a este objeto podemos ‘ean una pdgina,cergar una nueva 0 emplazae una por otra Tabla 3.17 Propledades del objeto Location ma Corresponde ala cadena que representa el anda dela URL. ES ded, a parte Ge a URL que ve despuds dela erqueta Sane Corresponde ala cadena que representa el nombre del dominio de servidor Sentra. de la URL. SRR Teatessonde st urtamaea: pathname Corretponde a cara eu su abr dl servi CCorresponde al protocloutlizado para pagina web. aTabla 3.18 Métodos del objeto Location ‘carga un nueve document Susttuye la URL del documento actual por otra URL. Enel siguiente ejemplo utilizamos tes de las propiedad del objeto Locst-ioa, adamds de creer un botsn que al presionarlo, lama al métade lost ion.reioad\) con lo eval eargamos de nuevo el documenta actual. Bate bata podria ser una alternativa al botén refresh de un navegndor: 1 econplebsresi-ratbeweaslhaae + En ol ejemplo anterior hemos utiizedo un controlador de eventos lamado cris cx. Este tipo de controladores son un enlace entre le objets del documento y el cbaiga JavaScript. La descipeén y andisis de los eventos los estudiaremos més adeionte [ocovmeesss TE ara modifar
También podría gustarte
Libro Aplicaciones Web
PDF
Aún no hay calificaciones
Libro Aplicaciones Web
380 páginas
Programacion Mario Dorrego Ed Sintesis
PDF
100% (2)
Programacion Mario Dorrego Ed Sintesis
314 páginas
Libro Aplicaciones Web
PDF
100% (1)
Libro Aplicaciones Web
105 páginas
Sitios Multiplataforma Con HTML5 + CSS3
PDF
Aún no hay calificaciones
Sitios Multiplataforma Con HTML5 + CSS3
395 páginas
Programación - B: Ilerna
PDF
Aún no hay calificaciones
Programación - B: Ilerna
185 páginas
Sistemas Informaticos DAM
PDF
100% (1)
Sistemas Informaticos DAM
312 páginas
Implantación de Aplicaciones Web - Garceta
PDF
100% (5)
Implantación de Aplicaciones Web - Garceta
484 páginas
Dam M08 2112
PDF
67% (3)
Dam M08 2112
257 páginas
Windows Server 2012 R2
PDF
Aún no hay calificaciones
Windows Server 2012 R2
569 páginas
Temario M01 2101 Qa03
PDF
Aún no hay calificaciones
Temario M01 2101 Qa03
183 páginas
Programación Orientada A Objetos (Material Didáctico)
PDF
100% (1)
Programación Orientada A Objetos (Material Didáctico)
159 páginas
m.05. Entornos de Desarrollo
PDF
Aún no hay calificaciones
m.05. Entornos de Desarrollo
159 páginas
DAM - Sintesis. Accesos A Datos
PDF
67% (3)
DAM - Sintesis. Accesos A Datos
305 páginas
Lenguaje de Marcas
PDF
100% (1)
Lenguaje de Marcas
173 páginas
MP1 Libro Sistemas Informáticos PDF
PDF
100% (1)
MP1 Libro Sistemas Informáticos PDF
183 páginas
Planificacion y Administracion de Redes
PDF
0% (1)
Planificacion y Administracion de Redes
320 páginas
Bases de Datos B.
PDF
Aún no hay calificaciones
Bases de Datos B.
135 páginas
Acceso A Datos
PDF
100% (2)
Acceso A Datos
332 páginas
m.07. Desarrollo de Interfaces
PDF
0% (1)
m.07. Desarrollo de Interfaces
116 páginas
Módulo 9 Programación de Servicios y Procesos
PDF
Aún no hay calificaciones
Módulo 9 Programación de Servicios y Procesos
75 páginas
PHP y MySQL - Angel Cobo
PDF
100% (1)
PHP y MySQL - Angel Cobo
526 páginas
Libro Lenguaje de Marcas
PDF
100% (1)
Libro Lenguaje de Marcas
408 páginas
Programación Multimedia y Dispositivos Móviles (Material Didáctico)
PDF
Aún no hay calificaciones
Programación Multimedia y Dispositivos Móviles (Material Didáctico)
88 páginas
Curso Javascript Intermedio
PDF
Aún no hay calificaciones
Curso Javascript Intermedio
164 páginas
Garceta - Seguridad y Alta Diponibilidad
PDF
Aún no hay calificaciones
Garceta - Seguridad y Alta Diponibilidad
360 páginas
Apuntes Sistemas Informáticos 1º Ciclos DAM/DAW/ASIR
PDF
100% (2)
Apuntes Sistemas Informáticos 1º Ciclos DAM/DAW/ASIR
95 páginas
Módulo 6 Acceso A Datos
PDF
100% (1)
Módulo 6 Acceso A Datos
134 páginas
LMGI - Garceta PDF
PDF
Aún no hay calificaciones
LMGI - Garceta PDF
407 páginas
Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 01
PDF
0% (1)
Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 01
28 páginas
Dam M08 2009 Qa03
PDF
100% (1)
Dam M08 2009 Qa03
231 páginas
Sistemas Informáticos (Material Didáctico) PDF
PDF
100% (2)
Sistemas Informáticos (Material Didáctico) PDF
134 páginas
Bases de Datos (B) (Material Didáctico)
PDF
Aún no hay calificaciones
Bases de Datos (B) (Material Didáctico)
80 páginas
Despliegue de Aplicaciones Web PDF
PDF
100% (2)
Despliegue de Aplicaciones Web PDF
338 páginas
Programación A - Material Didáctico
PDF
Aún no hay calificaciones
Programación A - Material Didáctico
107 páginas
Apuntes Entornos de Desarrollo
PDF
Aún no hay calificaciones
Apuntes Entornos de Desarrollo
175 páginas
Libro1 EnDe Completo
PDF
100% (1)
Libro1 EnDe Completo
364 páginas
Despliegue de Aplicaciones Web
PDF
100% (3)
Despliegue de Aplicaciones Web
338 páginas
Seguridad y Alta Disponibilidad
PDF
100% (1)
Seguridad y Alta Disponibilidad
76 páginas
Dam M07 03 1909 Qa03
PDF
0% (1)
Dam M07 03 1909 Qa03
105 páginas
Despliegue de Aplicaciones Web: Ilerna
PDF
Aún no hay calificaciones
Despliegue de Aplicaciones Web: Ilerna
88 páginas
Dam M05 03 1909 Qa03
PDF
Aún no hay calificaciones
Dam M05 03 1909 Qa03
133 páginas
Sistemas Informáticos, Garceta PDF
PDF
0% (2)
Sistemas Informáticos, Garceta PDF
20 páginas
Planificacion y Administracion de Redes Rama
PDF
Aún no hay calificaciones
Planificacion y Administracion de Redes Rama
320 páginas
Programacion Multimedia y Dispositivos Moviles
PDF
Aún no hay calificaciones
Programacion Multimedia y Dispositivos Moviles
241 páginas
Introducción A Las Bases de Datos NoSQL Clave-Valor Usando Redis (2019)
PDF
100% (1)
Introducción A Las Bases de Datos NoSQL Clave-Valor Usando Redis (2019)
151 páginas
Bases de Datos DAW
PDF
100% (1)
Bases de Datos DAW
326 páginas
Daw M03B 2101 Qa03
PDF
Aún no hay calificaciones
Daw M03B 2101 Qa03
185 páginas
Administración de SO
PDF
100% (2)
Administración de SO
336 páginas
Despliegue de Aplicaciones Web 2 Daw 1
PDF
Aún no hay calificaciones
Despliegue de Aplicaciones Web 2 Daw 1
15 páginas
Programacion Web
PDF
Aún no hay calificaciones
Programacion Web
204 páginas
Programacion Web
PDF
Aún no hay calificaciones
Programacion Web
201 páginas
Programador Web Full Stack 17 - Buenas Prácticas Análisis Tests y Optimización
PDF
Aún no hay calificaciones
Programador Web Full Stack 17 - Buenas Prácticas Análisis Tests y Optimización
28 páginas
Sistemas Informaticos DAM
PDF
0% (1)
Sistemas Informaticos DAM
365 páginas
Programador Web Full Stack 6 - JavaScript Orientado A Objetos
PDF
Aún no hay calificaciones
Programador Web Full Stack 6 - JavaScript Orientado A Objetos
28 páginas
Programador Web Full Stack 2 - HTML5
PDF
Aún no hay calificaciones
Programador Web Full Stack 2 - HTML5
28 páginas
Servidores Web
PDF
Aún no hay calificaciones
Servidores Web
60 páginas
GD CFGS Daw M04 2S 19 20
PDF
Aún no hay calificaciones
GD CFGS Daw M04 2S 19 20
16 páginas
Diseño Web Con HTML y CSS - Creación de Sitios Atractivos y Profesionales (2012)
PDF
Aún no hay calificaciones
Diseño Web Con HTML y CSS - Creación de Sitios Atractivos y Profesionales (2012)
196 páginas
Programador Web Full Stack 12 - Sitios Multiplataforma Con Bootstrap
PDF
100% (1)
Programador Web Full Stack 12 - Sitios Multiplataforma Con Bootstrap
28 páginas
Programación Multimedia y Dispositivos Móviles
PDF
0% (1)
Programación Multimedia y Dispositivos Móviles
6 páginas
Lenguaje de Marcas - Apuntes PDF
PDF
Aún no hay calificaciones
Lenguaje de Marcas - Apuntes PDF
118 páginas
Programador Web Full Stack 11 - Diseño Web Responsive
PDF
100% (1)
Programador Web Full Stack 11 - Diseño Web Responsive
28 páginas
01 - Apuntes Programación B - V03
PDF
Aún no hay calificaciones
01 - Apuntes Programación B - V03
83 páginas
XPath XQuery
PDF
Aún no hay calificaciones
XPath XQuery
19 páginas
Guía Didáctica de Lenguajes de Marcas
PDF
Aún no hay calificaciones
Guía Didáctica de Lenguajes de Marcas
12 páginas
Programador Web Full Stack 7 - Integración de HTML5 y JavaScript
PDF
Aún no hay calificaciones
Programador Web Full Stack 7 - Integración de HTML5 y JavaScript
28 páginas
2DAW Despliegue Aplicaciones WEB
PDF
100% (1)
2DAW Despliegue Aplicaciones WEB
15 páginas
Programador Web Full Stack 10 - CSS Avanzado
PDF
Aún no hay calificaciones
Programador Web Full Stack 10 - CSS Avanzado
28 páginas
Programador Web Full Stack 8 - Formularios Web
PDF
Aún no hay calificaciones
Programador Web Full Stack 8 - Formularios Web
28 páginas
Un Mejor Scrum
PDF
Aún no hay calificaciones
Un Mejor Scrum
29 páginas
Programador Web Full Stack 3 - CCS3
PDF
Aún no hay calificaciones
Programador Web Full Stack 3 - CCS3
28 páginas
Programador Web Full Stack 9 - Multimedia y APIs
PDF
Aún no hay calificaciones
Programador Web Full Stack 9 - Multimedia y APIs
28 páginas
Programador Web Full Stack 1 - Ecosistema Web
PDF
Aún no hay calificaciones
Programador Web Full Stack 1 - Ecosistema Web
28 páginas
Lenguaje de Marcas y Sistemas de Gestion de La Inform
PDF
Aún no hay calificaciones
Lenguaje de Marcas y Sistemas de Gestion de La Inform
11 páginas
Programador Web Full Stack 5 - Introducción A JavaScript
PDF
Aún no hay calificaciones
Programador Web Full Stack 5 - Introducción A JavaScript
28 páginas
Entornos de Desarrollo
PDF
Aún no hay calificaciones
Entornos de Desarrollo
3 páginas
39 Es
PDF
Aún no hay calificaciones
39 Es
6 páginas