ts (Uy > Aprender rTM LOR elt eoleCaitnerdAprender con 100 ejercicios practicos Ax Alfaomega EimarcomboDiseio de la cubita: NDENU/ DISSENT GRAFIC Datos catalograficos MEDIAActive Aprender JavaScript Avanzado con 100 ejercicios practicos Primera Edicién Alfaomega Grupo Editor, S.A. de C.V, México ISBN: 978-607-622-621-6 Formato: 17x 23cm Paginas: 216 Aprender JavaScript Avanzado con 100 ejercicios précticos MEDIAActive ISBN: 978-84-267-2241.6, edicion en espaol publicada por MARCOMBO, S.A. Barcelona, Espaiia Derechos reservados © 2015 MARCOMBO, S.A. Primera edicidn: Alfaomega Grupo Editor, México, febrero 2016 © 2016 Alfaomega Grupo Editor, S.A. de C.V. Pitagoras 1139, Col. Del Valle, 03100, México DF. ‘Miembro de la Camara Nacional de la Industria Editorial Mexicana Registro No. 2317 Pag. Web: http://www.alfaomega.com.mx E-mail: atencionalcliente@alfaomega.com.mx ISBN: 978-607-622-621-6 Derechos reservados: Esta obra es propiedad intelectual de su autor y los derechos de publicacién en lengua espaiiola han sido legalmente transferidos al editor. Prohibida su seproducciéa parcial o total por cualquier medio sin permiso por escrito del propietatio de los derechos del copyright. Nota importante: La informacién contenida en esta obra tiene un fin exclusivameate éidéctico y, por lo tanto, xo esta previsto su aprovechamiento a nivel profesional o industrial. Las indicaciones técnicas ¥ programas incluidos, han sido elaborados con gran cuidado por el autor y reproducidos bajo estrictas normas de coatrol. ALEAOMEGA GRUPO EDITOR, S.A. de C.V. no sera Jjuridicamente responsable por: enrores u omisiones; dafics y perjuicios que se pudieran stribuir al uso de la informacién comprendida en este libro, ni por Ia utilizacién indebida que pudiera dirsele, Edicion autorizada para venta en México y todo el continente americano. Impreso en México. Printed in Mexico. Empresas del grupo: México: Alfaomega Grupo Editor, $.A. de C-Y.— Pitagoras 1139, Col. Dal Valle, México, DF. ~CP. 03100. Tel: (52-39) 5575-5022 ~ Fax: (52-55) 3375-2420 / 2490. Sin costo: 01-800-020-4396 E-mail: atencionalcliente@alfzomeza.com.mx Colombia: Alfsomega Colombiana S.A. - Calle 62 No. 20-46, Barrio San Luis, Bogotié, Colombia, TTels.:(97-1) 746 0102 / 210 0415 ~ E-mail: clente@alfaomegacom.co Chile: Alficmega Grape Editor, S.A. —Av. Providensia 1443. Oficiaa 24, Santiago, Chile Tel: (56-2) 2235-4248 — Fax: (56-2) 2235-5786 - E-mail: agechile@alfaomega.cl Argentina: Alfeomega Grupo Editor Argentino, SA. —Paraguay 1307 PB. Of 11, CP. 1057, Buenos Aires, ‘Argentina, — Tel Fas: (S411) {811.0987 y 4811 7183 E-mail: ventas@alfaomegacditercom 2APRENDER JAVASCRIPT AVANZADO CON 100 EJERCICIOS PRACTICOS 100 ejercicios, en este caso mas tedricos, que conforman una guia de los principales elementos que forman parte del lenguaje de programacién JavaScript. Si bien es imposible recoger en las paginas de este libro todas las prestaciones de estos elementos, hemos escogido las mis interesantes ¢ imprescindibles. Una vez consultados los 100 ejercicios que componen este manual, el lec- tor seri capaz de comprender por si mismo cémo se consigue la interactividad mas habitual de una pagina web. LA FORMA DE APRENDER ‘Nuestra experiencia en el ambito de la ensefianza nos ha lle- vado a disefiar este tipo de manual, en el que cada una de las fun- ciones se ejercita mediante la realizacion de un ejercicio practico. Dicho ejercicio se halla explicado paso a paso y pulsacion a pulsa- Gién, a fin de no dejar ninguna duda en su proceso de ejecucion. Ademés, lo hemos ilustrado con imagenes descriptivas de los pa- sos mas importantes o de los resultados que deberfan obtenerse y con recuadros IMPORTANTE que oftecen informacién comple- mentatia sobre cada uno de los temas tratados en los ejercicios. Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario podra desen- volverse cmodamente con el citado lenguaje de programacisn.A QUIEN VA DIRIGIDO EL MANUAL JAVASCRIPT Si se inicia usted en la practica y el trabajo con JavaScript, encontraré en estas paginas un completo recorrido por sus prin- cipales funciones. Pero si es usted un experto en este elemento de programaci6n, le resultaré también muy itil para consultar deter- minados aspectos mas avanzados 0 repasar funciones especificas que podrd localizar en el indice. Cada ejercicio esté tratado de forma independiente, por lo que no ¢5 necesario que los realice por orden (aunque asi se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con tematica comiin). De este modo, si necesita realizar una consulta puntual, podra dirigirse al ejercicio en el que se tra- ta el tema y llevarlo a cabo sobre su propio proyecto. Javascript es un lenguaje de programaci6n que permite crear programas y sitios web précticamente idénticos a cualquier apli- cacign de escritorio, en cuanto a su respuesta se refiere. JavaScript aporta animaciones, interactividad y efectos visuales a un docu- mento HTML, la base de cualquler sitio o pagina web. No sélo encontramos JavaScript en las entraflas de muchos de los sitios web que visitamos diariamente. La gran mayoria de los widgets de escritorio que pueden instalarse en el ordenador han sido desarrollados con JavaScript, asf como miles y miles de apli- caciones para dispositivos méviles y un amplio elenco de carac- terfsticas de programas informéticos (como Photoshop, Dream- weaver, Acrobat, entre otros). A diferencia de la mayoria de los libros que conforman esta coleccién, el que tiene usted entre las manos ha sido disefiado como guia de consulta de los principales elementos del lengua- je de programacién JavaScript. Es por eso que no encontraré en estas paginas ejercicios resueltos, sino inicamente explicaciones detalladas, con ejemplos, de funciones, operadores, métodes, ete. de este lenguaje de programacién tan utilizado para conseguir interactividad.El tuo de cada ejeticioexpresa sin lugara dudas en ave consist este. De esta ‘orm, s leinteresa, puece accecer direciamente ag accion que desea aprender retesca. Los recuadios importante inclwen acciones que eben hacerse para asegurarse de que realia elejerccio conectamente y también contienen informacién que es interesante que aprenda (porque te factitaran su trabajo con el programe. Loseiericios se han escrito sistematicarente aso a paso, para ue nunca se pierda durarte su realzacion, En parte inferior de todas las paginas puede seguirel ejericio de forma cratica y paso a paso. Los nameros de los Pies de foto le remiten a entradss enel cuerpo de texto. El numero a & derecha ‘de a pagina le indica ‘laramente en qué ejercicio se encuentra entodo moment.001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 Qué es JavaScript La sintaxis de JavaScript .. Comentarios, expresiones y sentencias. El uso del punto y coma en JavaScript Datos primitivos Objetos en JavaScript. Valores y objetos indefinidos..... Comprobar valores indefinidos o nulos. Objetos envolventes para primitivos 30 Operadores de asignaci6n. Operadores de igualdad ... Operadores de comparacion...... El caso del operador ... Operadores légicos ... Operadores numéricos y especiales Comprobar datos en JavaScript El operador ‘instanceof’ Operadores de objeto. Conocer los tipos de datos booleanos. Convertir valores en booleanos.. Los operadores lly. Trabajar con ntimeros Convertir datos a ntimeros. La funcién parseFloat() Las funciones parselnt() ¢ isNaNQ)Aprender JavaScript Avanzado con 100 ejercicios pricticos 026 Valores numéricos especiale: 027 como se representan los ntimeros 028 Errores de redondeo. 029 sameros enteros.. 030 Numeros enteros seguros. 031 Convertir datos a mimeros enteros 032 Operadores aritméticos. 033 operadores bit a bit. 034 Propiedades del cbjeto Number... 035. \Métodos de mimeros primitivos 036 Aigunas funciones numéricas. 037 Cadenas de caracteres.. 038 secuencias de escape en strings... 039 Convertir valores en strings 040 comparar cadenas de caracteres .... 041 Combinar cadenas de caracteres 042 Métodos del constructor String. 043 Propicdades y otros métodos de String. O4A_ Meétodos para transformar strings .. 045 Buscar, comparar y comprobar strings. 102 046 Sentencizs de bucle.. 104 047 sentencias condicionales.. 106 048 £i caso dela sentencia with.. 108 049 Gestionar excepciones en JavaScript. 110 050 crear un objeto de error 112051 Funciones en JavaScript. 052 Definicion de funciones 053 -Declaracion o expresién de funciones? O54 controlar parimetros nulos o extra .. 055 Pardmetros con nombre 056 Deciaracion de variables. 057 £1 ambito de las variables 058 Variables globales y locales. 059 Deciaracién de variables con var... 060 odjetos sencillos 061 Convertir valores en objetos 062 £1 pardmetro this en funciones y método: 063 Relacion de prototipo entre objetos 064 Compartir datos entre objetos. 065 Crear nuevos objetos a partir de prototipos.. 066 Repetir y detectar propiedades I 067 Repetir y detectar propiedades II 068 Proteger objetos 069 constructores de objetos. 070 Herencias entre constructores .... 071 Métodos comunes a todos los objeto: 072 trabajar con matrices 073 crear matrices 074 1a propiedad length en una matriz 075. Huccos on matrices 114 116 118 120 122 124 126 128 B30 132 Bd 136 BS 140 142 144 146 148 150 152 154 156 158 160 162076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 Aprender JavaScript Avanzado con 100 ejercicios pricticos ‘Operaciones para gestionar huecos 164 ‘Afiadir y eliminar elementos de una mattiz.... ‘Ordenar y alterar elementos en una matriz Dividir y juntar elementos en matrices. 170 Buscar valores en una matriz. 172 Examinar, transformar y reducir matrices 174, Expresiones regulares. 176 Sintaxis de las expresiones regulares 178 Crear expresiones regulares . 180 ‘Trabajar con fechas en JavaScript... 182 El constructor Date... 184 ‘Métodos del constructor Date 186 ‘Métodos para el prototipo Date... 188 Formatos para la fecha.. 190 Formatos para mostrar la hora actual 192 ‘Trabajar con valores temporales 194 El objeto Math y sus propiedades... 196 Funciones numéricas. 198 Funciones trigonométrica 200 Otras funciones matematicas 202 Qué es el JSON. 204 ‘Métodos utilizados por el formato JSON. 206 Fanciones globales no constructoras 208 Evaluar c6digo dinémicamente..... 210 ‘Unicode y JavaScript. 212“importante JAVASCRIPT ES UN LENGUAJE DE PROGRAMACION que permi- ‘te crear programas y sitios web practicamente idénticos a cual- ~ Resulta de gran imporancia quier aplicacién de escritorio, en cuanto a su respuesta se refiere. ‘saber que JavaScript no tiene JavaScript aporta animaciones, interactividad y efectos visuales a ae eer) oe un documento HTML, la base de cualquier sitio o pagina web. eae neath JavaScript forma parte de un conjunto de elementos formado por ‘SunSystems. De hecho, cabe HTML y CSS: HTML aporta la estructura, CSS, el estilo y JavaS- destacar que, en sus inicios, iipt, el fancionamiento y la interactividad con el usuario. ‘Netscape bautiz6 su lenguaje {Ge programacion como 1. JavaScript fue creado en el afio 1995 por la compafifa Net- Fvescteny Bue na hei scape, responsable de uno de los primeros navegadores que ‘més adelante, por motivos de Pe TES els 8 gt ‘marketing, oue la compatia aparecieron en el mercado, Netscape Navigator, competencia decidi6 cambiar el nombre a directa de Microsoft Internet Explorer. §® Dicha competencia ‘Su producto, asemejandolo al provocd que el funcionamiento de JavaScript en dichos nave- del lenguaje mds exitoso en aquel momento. gadores no fuera tan satisfactorio como se hubiera esperado de un lenguaje de programacién tan potente. Afortunadamente, hoy en dia, todos los navegadores, incluidos Firefox, de Mo- Zilla, y Safari, de Apple, # aceptan programas o scripts genera- dos con JavaScript 2. Teniendo en cuenta que el principal objetivo de JavaScript es la Interactividad en programas y sitlos web, a continuacion Netscape Logotipo de la compalila Netscape, creado 12 del navegador Navigator y del lenguaje ‘de programacién JavaScript. mozilla Firefox lee ElAprender JavaScript Avanzado con 100 ejercicios pricticos veremos algunas de las aplicaciones en las cuales podemos en- contuar claramente este increible lenguaje de programacion. 3. Gracias a JavaScript, es posible que una pagina muestre el im- porte total de una serie de compras, asi como el IVA corres pondiente aplicado, justo en el momento en que el usuario pulsa el botén Comprar. 4. Otro ejemplo serfa al rellenar un formulario, en aquellos ca- 505 en que el usuario no completa los campos necesarios 0 lo hace de un modo no satisfactorio. En estos casos, el programa lanzard el correspondiente mensaje de error también generado con JavaScript. 5. Google Maps es otro claro ejemplo de como JavaScript permi- te interactuar con el usuario en tiempo teal. @@ 6. Pero no sélo encontramos JavaScript en las entrarias de mu- ‘chos de los sitios web que visitamos diariamente. La gran ma- yoria de los widgets de escritorio que pueden instalarse en el ordenador han sido desarrollados con JavaSciipt, asi como miles y miles ce aplicaciones para dispositivos mévile: y un amplio elenco de caracteristicas de programas informaticos (como Photoshop, Dreamweaver, Acrobat, entre otros). JavaScript es la lave a un mundo de interactividad préctica- mente infinito y espectacular. Compruébelo usted mismo y. idisfrute! m™ or ees DATOS DE ENVIO Seto wn fe de capraboacasa cm Indica tu usuario o registrate > Un Terete Glente Informade no ene formate correct: Inmediatamente cespués de que Netscape presentara su sorprendente lenguaje de programacion JavaScript, la compafiia Microsoft tambien Se propuso atacarel mercado con su propio lenguaje de irae anz6 jScript. En este caso, [Script estaba ‘incluido en el navegador intemet Explorer. Di rerecait Google Maps utiliza avaScript para conseguir una Interaccion cone! usuario en tlempe realsin necesisaa de cambiar de pagina web.| IMPORTANTE CUANDO HABLAMOS DE SINTAXIS DE UN lenguaje de progra- maciOn nos estamos refiriendo al conjunto de reglas en que se 1uso celsigno de puntwacin: Sa la escritura del cOdigo fuente de los diferentes programas (punto y coma) al finalzar cada -—_generados. La sintaxis de JavaScript es muy parecida a la de otros sentencia no es obligatorio lenguajes de programacién, como Java o C. ‘en javascript, aunque si nr 1. Eneste ejercicio trataremos de definir de forma clara y concisa en qué se basa la sintaxis bésica de JavaScript. Aunque pueda parecer lo contrario, la sintaxis de JavaScript es bastante sen- cilla. Para empezar, podemos indicar que los intérpretes de JavaScript no tienen en cuenta los espacios en blanco ni las nuevas Ifneas, lo que supone que el desatrollador puede orga- nizar el cédigo como mejor le convenga. 2. JavaScript hace distincién entre mayiiseulas y minisculas, 1o que significa que si el cédigo no se escribe segiin esta distin- ci6n, el programa no funcionard segin lo previsto. 3. Otro aspecto a tener en cuenta es que las variables creadas pueden almacenar diferentes tipos de datos, por lo que no es, necesario definirlas al escribir el cédigo. 4. JavaScript es un lenguaje de programacién totalmente dind. mico. ;Queé significa esta afirmacién? Sencillamente significa que todo cuanto se escribe en el cédigo puede ser cambiado en cualquier momento. ™ cacript.tipes"text/jevescriot"> var tora = new Datel; a Los comentarios insertados orel programador centro el codigo pueden ser frases enteras 0 palabras sueltas. En cualquier caso, siempre ayudlaran a aclarar partes concretas del cédigo, sobre todo en caso de necesitar modificarlo 0 enel momento de su depuracion. /Ma lista m script types socument cert / javascript countries vnshift( Islandia’); //La Lista tiene anor cocument.uritet' countries shart? ‘Cuango se utiiza un eaitor ae textos wen, los ‘comentarios se muestran de color ois, para que sea mas ‘cl reconocerios en el momento de la depuracion. ‘omodifcacién. LOS COMENTARIOS, LAS EXPRESIONES Y LAS sentencias forman parte de la sintaxis basica de JavaScript. En ocasiones existe cierta confusién entre la definicion y el uso de expresiones y sentencias, (ia asignacién de comentarios queda totalmente clara, como se verd en este ejercicio); en estas paginas trataremos de distinguir por completa ambos elementos. 1. Empezamos este ejercicio hablando de los comentarios. Los comentarios forman parte del cSdigo JavaScript peto no son interpretados por los navegadores web. Los programadores los ‘utilizan sencillamente para facilitar la lectura del codigo en determinadas partes del mismo. Existen dos tipos de comentarios de JavaScript y cada uno de ellos se representa con una puntuacién distinta. El primer tipo se utiliza para comentar tinicamente una Ifnea de cédigo yse indica con una doble barra, |/. El segundo tipo de comentario se utiliza para comentar mis de una linea de cédigo y requiere, en este caso, de una puntua- cion de apertura, /*, y otta de ciere, */. El.uso de comentarios en un documento de cédigo JavaScript es ilimitado ¢, incluso, recomendable en aquellos casos en que se prevean confusiones en el momento de la interpretacion del mismo. /* counteses peel, 335 Seat ie oes tn com aay soontriestil 6 *s/ems7or‘) 9 paises exactonente: Tslaraia, Conass, p19%0, Dinamar “aon Lope que mds me ha snpactaso Gocument.wrate(countriestil © " atMinesccountry wm ‘Corast') document write~

i Counc ) ise it (bestCountey w= Gocunent.writel"cpeAin ne conateo ” + d else ¢ Gocunent.write("ep>iSi! * + bestCount var aleatorio Es posible escribir sentencias ‘condicionales utlizardo una ‘expresién con un operador condicional. Por ejemplo, éstas serian las lineas de cédigo con la sentencia condicioral = var premio; if (si) { jEnhorebuena!" premio ='Lo sentimos’ ; : ‘Yes la misma linea con el ‘operador condicional: var premio = si? (Todo se escribe en una misma linea.) Los bucies (loops) tambien son un ejemplo de sentenda en JavaScript. jath. floor (Math.random() «preguntas. length) ; ai Var atest = preguntas (aleatorio j Podemos decirque un gregrama o un scriptes una secuencia de sentencias. una expresion. Enla descrinciOn de estas dos variabes, tdo cuanto se encuentra ala erecta de! signo =, el cual indica f descnpcion de a vanable en simisma,EL USO DEL PUNTO Y COMA al final de cada sentencia no es obligatorio en el c6digo JavaScript, aunque s{ altamente recomen- dable. En este ejercicio le mostraremos por qué es recomendable utilizar este signo de puntuaci6n y en qué casos precisamente no debe utilizarse. 1. Conel fin de evitar posibles ertores detectados por el nave- gador web en el momento de la interpretaci6n, las diferentes instrucciones contenidas en nuestros scripts deben separarse adecuadamente. ¢Cémo? Mediante un punto y coma al final de cada linea. ™ 2. Sin embargo, existen ciertas excepciones a esta norma del pun to y coma. En concieto, las sentenclas que finalizan con un bloque no deben llevar punto y coma al final de las mismas. Y todavia podemos concretar mas esta excepcién: sélo los bus cles (Como fox Y while), los conectores (como if, switch 0 ‘tzy) y las declaraciones de funciones que finalizan con un bloque no se ciean con un punto y coma. 3. Este seria un ejemplo de una sentencia con un bucle for que no finaliza con un punto y coma: @@ for (var nun=1l; num<=20; numt+) { ooument .weite(‘Nimere ‘ + num + ‘ebe>’); ars meet ‘socuseat Socuaent vritelcouttriesL] + " 1) countries unshift Islandia’ ls //La Lista ti nore 8 elenestod Socunent veitelcourtrieste] + '")1 ‘countries. smi ft ocuaentavrsRel ' ‘couneries. ‘it (ruatav) ( Socunent vritel “

'); ‘counaries.spuicet Seema write jCcincide contigo! China tanbién

”) ; a 5. Por timo, un ejemplo de la tercera de las excepciones lista- ; das en el punto 2, es decir, una deciaracion de funcion, serian a coer las Iineas siguientes: fen que una sentencia fnalza y functica printToday() { le agrega un punto y coma var hey = nev Date); document .write(hoy.getDete()); } 6. Sin embargo, sepa que la insercin de un punto y coma en estos casos concretos no conlleva un emor de sintaxis, debido 2 que dicho signo se considera una sentencia vacia y las sen- tendias vacias pueden aparecer en el punto en que el cédigo prevé encontrar una sentencia 22 (beatCountzy 7. JavaScript cuenta con un mecanismo que se ocupa de insertar um punto y coma alld donde prevé que es necesario. Este meca- nismo se denomina ASI, sigias del término en inglés Automatic Semicolon Insertion, y aunque a primera vista puede resultar muy Util, en ocasiones produce resultados inesperados. Por esta raz0n, lo mejor y mas recomendable es utilizar el punto y coma nosotros mismos alli donde sea necesario. “ Paises que he visitado Normalmente, el tipo de datos tiunzex no utiiza comills, como en ‘Wompertines experieocian? el caso de las cadenas de caracteres. En este efempb, las comilas i begur mids bonito 00 eine Uiside se ublzan porque las valores numércos ceperden dei ce mento| a en umber, e! cuallo utiiza para realizar un célculo matemitico. El ugar con més historia es Italia Ellugar que més me ha sorprendido es undefined a —_—_—_—_——— undefinedCOMO HEMOS INDICADO EN EL EJERCICIO anterior, JavaScript cuenta con datos primitivos y con objetes. Todo cuanto no puede situarse dentro de alguno de los tipos de datos descritos en las paginas anteriores puede considerarse un objeto. 1. Existen tes tipos de objetos en JavaScript, considerados mas ‘comunes, que se mueven con los denominados constructores: los objetos simples, las matrices y las expresiones regulares. Los objetos tiene propiedades y valores y, a diferencia de los datos primitivos, si pueden ser cteados por el programador. ‘Veamos paso a paso cada uno de estos tipos de objetos. 2. Elconstructor ozject envuelve los objetos simples, los cuales se representan mediante nombres o datos. Un ejemplo de un objeto simple serfa el siguiente: { nombre: ‘Ménica’, apellide: ‘Gonzalez’ ) 3. Este objeto tiene dos propiedades (noxbre y apellide) y cada una ée ellas, un valor ( ‘uénica’ y ‘Sonzélez"). Como hemos indicado, es el programadot quien decide el nombre de los objetos, siendo consecuente en su uso en todo el script. ista sera la descripcién de un peauefo scrint ue cuenta con una variable que contiene un objeto con varias propiedades y valores. “Oaniel Mariano", 013, "Todes somos todos", getinte: function £ fuente de esta imagen: return this.tena + ':' + this.artista + ', ' + this.afo +'.'; > aprerderaprogramar.com y alert(cancion.getInfo()); Aprender JavaScript Avanzado con 100 gjercicios pricticos 4. El segundo tipo destacable de objetos son las matrices, en in- glés arrays. Una matiiz es, sencillamente, una lista de elemen- tos. Las matrices son la mejor forma de almacenar més de un valor en un mismo lugar, puesto que de otro modo seria nece- saria crear una variable para cada elemento de la lista. Las ma- trices se envuelven dentro del constructor array y tienen el aspecto siguiente: [ ‘lunes’, ‘nartes’, ‘miércoles’, ‘jueves’, ‘viernes’] — Byiste un listado de caracteres 5. Todos los elementos de una matriz corresponden aun miime- speciale Que pueden ulizarse ro en un indice, siendo el primero de estos miimeros €10; esto SD EXPIsSones reguares, sonifi i" Tenga en cuenta que cada uno significa que, en nuestro ejemplo, el elemento ‘une’ es el ge estos caracteres se utiliza en numero 0, el elemento ‘martes’, el 1, yasisucesivamente. ** — combinacion concaracteres imps y ti ificado 6. El tercer tipo de objetos de JavaScript es el de las expresiones _orhtatd Lor earseterse regulares, regidas por el constructor Regexp. Las expresiones _ especiales que se pueden regulares estan formadas por caracteres simples, /abe/, 0 por _tilzar en JavaScript para ‘generar expresiones regulares sonlos siguientes: Una expresion regular sirve para localizar patrones en maz $4 #42 [] > cadena de texto, para comprobar que una cadena tiene una determinada estructura o para verificar que una direccion de correo electrénico estd escrita correctamente. una combinacién de caracteres simples y especiales, /a*»_/. 7. Las caracteristicas que comparten estos tres tipos de objetos son las siguientes: cada objeto tiene su propia identidad y, por tanto, pueden compararse; es posible modificar las propieda- des de los objetos, afiadir de nuevas y eliminar las sobrantes, y Lzimagen 5 muestra un ejemplo de los constructozes pueden ser considerados como implementa-_cédigoenel cualse ulilza una expresién del ipo Regexp, /@/, para verficar ue un campo de e-mail cuenta con una direccibn de correo electrénico valida, es decir, cone simboio @. ciones de tipos personalizados. En este caso, ni el uso de las comilas permite interpretar a JavaScrint que se tata de némeros, sino que los lee como cagenas de caracteres.Aprender JavaScript Avanzado con 100 gjercicios pricticos 4. EL ejemplo anterior, el de la concatenacion de textos, puede ser solventado mediante dos procedimientos: eliminando las comillas inciuidas en la descripcién de las variables o bien uti- lizando el método turer () . El primer procedimiento queda- ia como sigue: var valorl = 5; var valoz2 = ; document .urite(valori + valor2); 5. Yel resultado seria el esperado, es decir, 13. El empleo del mé- todo wanhex() resulta también del todo eficaz. ;Cémo funcio- na este método? Muy sencillo. Permitiendo que el programa convierta en ndimero cualquier cadena de caracteres. El modo en que se utiliza este método es el siguiente: var valorl = ‘5’; var valoz2 = ‘5/7 document .write (Number (velorl) + Number (valor2)); 6. Como ve, en este caso es necesario recuperar las comillas en la definicion de las variables para que el método tuner () realice corectamente la conversion entre datos. El signo + realiza asi Ja suma de los dos valores. Dicho esto podemos acabar dicien- do que el operador + realiza una suma de valores cuando, al tatarse de operandos distintos, puede convertirlos a ambos en valores numéricos. En cualquier otro caso, el operador + realizard una concatenacion de valores. a Para voder distinauirensu editor de textos web si T estd babajando con valores numéricoso textuales, Va valor = '5'; sepa que los nimeros se muestran ce cobrazuly var valor2 = 'B* bs caracteres, e cobr mp. document .write(Nunber(valori) + Number(valor2)); ” 1/ EL nétodo Number() convierte texto en ndmeros. 1/ bhora el resultado es 13, una suma de valores.if (x==2 & y!=3){ #/la variable x vale 2 } Eneste ejemplo, se evaldan dos comprobaciones document.write("

i Perfect ‘meaante un operadcr logo. En la primera de estas ‘comprobaciones, x==2 daré como resuitado crue siempre ‘cuando le variable denominaca x valga 2. Enla segunca LOS DATOS BOOLEANOS DISPONEN DE OPERADORES espectii- cos que producen resultados de cada uno de estos tipos. Los ope- radores booleanos son && (AND) y Il (OR) yel no légico ! (NOT). 1. Eneste ejercicio trataremos los operadores légicos y los numé- ricos. Los operadores légicos son lo que producen valores boo- leanos y se asignan a operandos de este tipo. Se utilizan para realizar operaciones légicas, es decir, aquellas que producen resultados verdaderos o falsos (true 0 false). ™ 2. Elprimero de estos operadores, conocido como binario, es «6, es decir, AND. En una sentencla que confronte dos operan- dos, dicha operacién produciré el primero de los operandos siempre y cuando este valor pueda convertirse en Zals¢; sino, dara como resultado el otro operando. Si los dos operandos son verdaderos, el valor producitio ¢s true y sino, producira false 42 (numFav < 20 eg numFav > 1) { document write (“ep>] Perfecto!

") ; ) 3. Este es un ejemplo en que se utiliza el operador ldgico e< para comparar dos valores. Si el valor de la variable denominada nunfev es Menor que 20 y también mayor que 1, entonces la & y la variable y es distinta de 3/« om if (numFav < 20 && numFav > 1) { p>"); comprobacién, y!~3.daré como resultado trve sib \arlable denominada y tiene un vaior aistinto de 3Aprender JavaScript Avanzado con 100 gjercicios pricticos operacién produciré el valor true y, consecuentemente, apa- recerd escrito en pantalla (decunent.wxite) el mensaje indica- do. Pasemos ahora al segundo operador légico que queremos tratar, el operador |, es decir, OR. En una sentencia que con- fronte dos operandos, el operador produciré como resultado teueen el caso en que uno de los dos operandos sea verda- dero; en el caso en que ambos valores sean falsos, entonces el resultado sera false, 2 (numFav==7 || numfav==9) { document write (“

jE1 mic también!

"); 4. El ejemplo ser‘a idéntico al anterior aunque s6lo debe cum- plirse una de las dos condiciones mostradas en los dos ope- randos. Existe un tercer operador booleano que es no légico y se representa con el signo !. Este operador sdlo cuenta con un operando, el cual debe poder convertirse en verdadero para que el operador produzca un resultado Zaize. Si no es asf, el resultado que devolverd serd true. Un ejemplo sencillo de este operador es el siguiente: 5 22 (552 66 y!=3) 5. Enel cual como puede verse se utilizan dos de los operadores aqui mencionados: el operador «sy el operador negativo |. Es el segundo operando el que contiene este operador. En los ejercicios siguientes trataremos con todo detalle ottos tipos de operadores de JavaScript: los numéricos y otros denominados especiales. = v if (nunFav==7 || numFav==9) { document .write(*

iEl mfo también!

"); */ En este caso, si el valor de la variable nunFav es 7 09, una de las dos citras, el operador devolverd lun valor’ verdadero y se imprimiré en pantalla el mensaje indicado /«puntost+; function 4 dwestiontorepental { Yc tenn oF . Sica J einer Us response cl Jecta os * + propemtetttls P30. = Nath. Fleor(Math.randoat) spreguntes. Length); LOS OPERADORES NUMERICOS O ARITMETICOS, IGUAL que ocurte con los booleanos, trabajan con operandos del tipo Num- ber y, por tanto, producen resultados s6lo de este tipo. Los opera- dores numéricos son los aritméticos en todas sus combinaciones (4 - * / & ++ —).Porsu parte, existen tres tipos de operadores conocidos como especiales: el operador condicional (2:) y el ope- rador coma (,). 1. En un ejercicio anterior tuvimos un primer contacto con los operadores aritméticos bisicos (+ - + /). En este ejercicio tra- taremos otro tipo de operador aritmético o numérico: se trata de la combinaci6n ++ y --, que puede situarse delante o detras de un valor numérico incluido en una variable. 2. La posicién de cada uno de estos operandos puede ayudarle a recordar si el resultado devuelto se situard antes o después de lasuma (++) o la resta (--). En el caso en que el operando esté situado detrds del operador ++, el resultado va antes del incre- mento. Y viceversa. 3. Veamos esta descripcién en ejemplos. Los operadores ++ y-- situados delante del nombre de la variable devuelven el valor actual de dicha variable mas o menos 1. Estas lineas son una muestra de este uso: casol = 15; ++casol 16 // ++ suma 1 al valor 15 semtenlaientoriels casol = 15; —caso1 4 {En estas dos tunciones puede ver que se ublizan // — resta 1 at valor 15 ‘en determinados purtos de las distintas sentencias iversos operadores aritmeéticos, entre os cuales se ‘encuentra el operador ++ detrés del nombre ce la Estos ejemplos son basicos para ayudar a comprender \afiabe puntos. con sencille €l so de estos operadores.Aprender JavaScript Avanzado con 100 gjercicios pricticos casol = 15; +toascl, 16 4. Ytambien: casol = 15; ~-cazol “ naa 5. Como hemos indicado, la posicién de estos operadores puede cambiar respecto a la variable que acompatian. En este caso, Masadelante en este libro. el incremento 0 el decremento se realiza antes y después se scenes de openires es s de operadores para devuelve el resultado. ® Veamos un ejemplo bisico de ello: DERE tea casol = 19; funcionamiento en JavaScript. casolt+ 6 casol = 16 6. Fasemos ahora a tratar brevemente otro tipo de operadores, que se consideran especiales debido a su uso concreto en de- terminados scripts. El operador condicional 2: sirve para rea- lizar expresiones condicionales, sin tener en cuenta el grado de complejidad de las mismas. Sila condicién escrita es verda- dera, dara como resultados el valor if true; de otto modo, si la condici6n no es cierta, el resultado seté if false. @@ 7. Eloperador , (coma) es para las expresiones lo que el punto y coma es para las sentencia. Su procedimiento consiste en eva luar los dos opztandos a los que acompana y devuelve como resultado el valor right. = m oevie a axe pese cai var casot = 0; lara comasen ver caso? = (casoite, 1 cenel caso de sents muy largos, es ‘ecomendavie no ublzarel operador 1 yortar porla Separacién habitual ce sentences, es decir, con un; 15; // Lo que significa que: casol 14 casoz var ahora = new Date(); var saludo = "Buenas" + ((ahora.getHours() > 17) 7" tardes." : * dia. '#/ la variable ahora contiene 1a hora actual. Eloperadorconcicioral 2: Si ésta pasa de las cinco de la tarde se puede ublizar como forma se generaré el mensaje "Buenas tardes/* abreviada de una sentencia condiconaldel tipo if ... else.En muchas ocasiones, resulta recomendable utilizar o:ras ‘funciones para cambiar los ‘tipos de datos de una variable nies de utlizar el operacor ‘sypeot. Una de estas funciones eSparseInt(). COMO HEMOS PODIDO COMPROBAR HASTA EL momento, el uso de operadores concretos y de operaciones realizadas depende del tipo de datos con el que se asocien dichos operadores. La com- probacion de datos se puede llevar 2 cabo con un operador espe- cial: el operador tysecé, el cual nos envia un texto que contiene el tipo de datos objeto de nuestra comprobacién. 1. Debido a su utilidad, hemos crefdo conveniente dedicar un ejerciclo completo al operador zypect, aunque en una lecclén anterior (008) ya tuvimos la ocasién de nombratlo y describir- lo brevemente. @ 2. typesf es un operador que devuelve una cadena o string que describe el tipo de dato que corresponde con el objeto, ya sea una variable, una funcién..., que se escribe a continuacién. ‘Mas concretamente, el operador typec# distingue los valores primitivos de los objetos y, en el caso de las primitivos, de- termina el tipo al que pertenecen: “number”, “string”, “boo- lean”, “object”, “function” y “undefined”. @ 3. Enelcaso de los datos booleanos, como recordard, los valores que se manejan son =zue y alee. if (typeof(caso1) === “undefined”) { alert(*casol no esté definido.”); + Tal y como se traté en un ejercicio anterior, el uso de type paracategorizrsiun dato esun waaetneao | OQ zal es una de las scluciones para lvara cabo esta ‘compiobacion, var declarada: var resultado = (declarada 1) true undefines) ; var resultado = (typeot declarada === ‘undetined') 1 true var resultado = (typeof noDeclarada === ‘undef ined" ) 7 trueAprender JavaScript Avanzado con 100 gjercicios pricticos 4. (Como se utiliza en un script el operador typess? A continua- cién le mostramos «mn ejemplo para cada uno de los tipos de datos mis bisicos: var booleano = false; alert ("Tipo de dato: “ + typeof beoleanc} var numero = 107; alert ("Zipe de date: “ + typeof numero) var caracteres = “Barcelona”; alert (“Tipe de dato: + typeof caracteres) var hoy = nevDate() alezt ("Papo de dato: “ + typeot hey) 5. Los resultados que devolverd el operador typeof para cada uno de estos tipos ser Scolean, Nunber, stringy Oaject (0b ject comesponde a una funcién, elemento distinto a los datos primitivos). 6. Los paréntesis en el uso del operador :ypec#son totalmente opcionales; apliquelos cuando crea que pueden ayudar 2 la comprensi6n y la lectura del script. ™ 7. A modo informativo diremos que los mimeros, tanto enteros como decimales, siempre son del tipo ruber. 8. Ademés de distinguir entre datos primitivos y objetos, typso# también permite comprobar métodos (parsetnt|}), valores de propiedades (window.length 0 document. lastiodifies) y objetos predefinidos (eth u o2jec:). # a var booleano = false; alert("Tipo de dato: " + typeof booleano) /[Typeot devolverd el valor Boolean typeof document. lastModified 2 + typeof numero) // Bl valor devuelto seré ‘string’ typeof window. Length // El valor devuelto seré ‘number’ var caracteres = alert("Tipo de date: * + typeof caracteres) /ypeot devolvers et valor String typeof eval var hoy = newate( // BL valor devuelto seré ‘function’ alert("Tipo de dato: ~ + typeot hoy) 1/ Typeot devolvers el valor Object m typeof parseInt // El valor devuelto sera ‘function’ typeof caracteres typeof Math // EL valor devuelto sera ‘object’ // es Yo mismo que: typeof (caracteres)™ function constructores() { var casol = new Coche('Dieset* var caso2 = new Cocte("Gasolina'); alert ("EL vehicuto 1 soporte alert (El vehiculo 2 soporta y emplo de constructor en jaaseript. + caso.gettitros() + * Litros\n'); + caso2.getlitros() + ' Litros\n'); ASI COMO EL OPERADOR rvezor SE utiliza en JavaScript para distinguir entre los diferentes datos primitivos ylos objetos, existe otto operador que permite comprobar si un objeto es una instan- cla o un constructor (de los constructores hablaremos con todo detalle mds adelante en este libro): se trata del operador inoten- ceoe. 1. En este ejercicio describiremos el operador inetencecs, el cual, como ya hemos adelantado en la introducci6n de este ejercicio, se utiliza para saber si un objeto es una instancia 0 un constructor. Por si todavia no sabe qué es un constructor diremos que son funciones con nombre que ayudan en la pro- duccién de objetos que son parecidos en algiin aspecto. Los constructores serén ttatados con todo detalle en un ejercicio posterior de este libro. 2. El uso del operador :nstencecs se recomienda en aquellos ca- sos en que se desea comprobar el tipo de objeto con quese esta trabajando en tiempo de ejecucion. 3. Elmodo en que se utiliza este operador en la sintaxis de JavaS- cript necesita el nombre del objeto cuyo tipo de desea com- parar y €] tipo de objeto en cuestién. 7 Lo que debe tener en cuenta es que como operando derecho, es decir, como tipo de objeto, debe declarar un objeto, no su descripcién. Con ello queremos decir que, por ejemplo, en un objeto tipo String, deberd indicar la palabra ‘String’ en lugar dela cadena de texto comtespondiente. a nombre instanceof t:Aprender JavaScript Avanzado con 100 gjercicios pricticos 4. A continuacién, mostramos unos ejemplos de script en los, ‘cuales se utiliza el operador inetancecé. Con el primero de ellos podremos comprobar si un dato es un objeto del tipo Date: hoy = new Date(2015, 02, 28] 32 (ney instanceo: Deve) { document.urite(*;Hoy es tu dia!"); } 5. hoy ¢s el nombre del objeto que se desea comprobar y Daze, al tipo de objeto. Si el resultado es exue, es decir, sihoy es un objeto nate se ejecutard la funci6n indicada a continuacién (Gocument .write). 6. Veamos un segundo ejemplo del uso del operador insten- ceot. En esta ccasién, lo utlllzaremos para comprobar si dos objetos del tipo String y Number son del tipo Object: texte = new Steing() cifza = new Number () texto instanceof String texts instances? Chject ‘texto instanceof Date cifza instanceof Date cifza instanceof object cifga instencesf String 7. Como puede ver, los valores que devuelve el operador snsten- ceoé en este caso son valores booleanos del tipo truey false. ‘Otro caso en el cual se podria utilizar el operador que estamos tuatando es la comprobacién de que un tipo de objeto creado por nosotros es de un tipo concreto y del tipo Object. a hoy = new Date(2015, @2, 29) Af (hoy instanceof Date) { document.write(‘iHoy es tu dia: } // Si 1a variable hoy es un objeto del tipo Da se imprimird en pantalla el mensaje indicado. function Prenda(tipo, tejido, color) { this.tipo = tipo this. tej ido = tejido this.color= color » a . huPrenda = new Prenda(“Fatda", “Lena texto = new String() a = miPrenda instanceof Prenda cifra = new Number() b= niprenda instanceof Object texto instanceof String texto instanceof Object == true texto instanceof Date == false Elyalor stuado a la derecha de! cifra instanceof Date == true operador == ¢s el que cevolierd el cifra instanceof Object == true optrador instanceotal evaluar cifra instanceof String == false los tipos de datos inaicados en cada caso.AUNQUE SERAN TRATADOS POR SEPARADO Y con todo éetalle mas adelante en este libro, en este ejercicio introduciremos los denominados operadores de objeto. Como su nombre indica, se trata de una serle de operadores que trabajan wnicamente con ob- jetos, nunca con otro tipo de datos. 1. Son ties los operadores que ttabajan sobre objetos: new! este opetador crea una instancia de un objeto. Gelete: este operador elimina propiedades de un objeto. in! este operador comprueba que un objeto disponga de una propiedad ya definida. 2. Veamos uno a uno en qué consisten estos operadores de obje- to y cémo se utilizan. E] operador new se utiliza para crear una instancia de un objeto, tanto si éste ha sido generado de forma personalizada o bien si es de uno de los tipos predefinidos: Atay, Boolean, Date, Function, Number, etc. 3. El operador new va siempre seguido del nombre de una fun- cion, la cual se utiliza para inicializar el nuevo objeto creado. Los pardmetros que se necesitan son, por un lado el construc- tor, es decir, una funcién que especifica el tipo de instancia del objeto y por otro, los argumentos, es decir, una lista de new Date() valores con los que el constructor ser llamado: ™ Seat Tee var hoy = new Date(); var textoFecha = fechaCompletalhoy, '#OIASENANAS, FDIAF de #MES# de #YEARA"); docunent.write(textoFecha) ;