Scribd
Cargar
17K vistas22 páginas

Chuleta Javascript

chuleas y chuletas

Cargado por

Shao Kahn
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
17K vistas22 páginas

Chuleta Javascript

chuleas y chuletas

Cargado por

Shao Kahn
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
Está en la página 1/ 22
‘wer017 JAVASCRIPT console. 106() prompt ("introduce datos aqui") confira(*Aaceptas si o no") Javascript —brusbils alert("Ventana en 1a pantalla") 1 Comentarios de una tines 7 se. /* Comentarios multlines OPERADORES + Aritmeticos + Suma - Resta * Mutipticacion 1 Division %Modulo, lo que sobra de la division entera ‘++ Ineremento == Decremento + Asignacion + Comparacion igual igual valor ¢ igual tipo 2 igual ro igual valor ni gual tipo > mayor que ‘= menor 9 igual que + Logicos aR AND ILor| 1NOT + Ternario condicién ? true : false var edad = 21 Var mayorEéad = (edad > 18 + Unitarios P alert("Eres mayor"): alert("Eses menor")); ‘typeof (vardablequesea) 0 typeof valor - Devuelve una string con el tiga dela variable dato ‘sypeof (undefined) // sypeot(null) uw sypeof(valor booleano) // typeot(valor nuserico) // ‘ypeot(eadena) uv typeof funcion) u typeor(atros valores) // hps:fousbils.com/chuletastrontond)s! ‘uncefined ‘object’ boolean" “number string “function” object” 22 ai9)2017 Javascript — brusbils, 11 a21 devolviendo object es un bug que no se puede arreglar debido 11 @ todo el codigo ya existente que cascaria valor instanceof Constr - devuelve true sil valor ha sido creado por el constructor Constr 4) Anstanceot object // true [] instanceot object // true, Array es un subconstouctor de object pull instanceot Object /7 false Var b = new Bar(); b instanceot bars // true in Devwelve true sila propiedad especiticada existe en el objeto especificado propiedadNonbredrNunero in nonbredbjeto var trees = new Arcay("redhood", "bay", "cedar", “oak”, maple"); @ in trees; 7 true 3 in trees} 1 true 6 in trees i false bay" in trees; // false (especificar indice, no valor en ese indice length” in trees; // true (length is una propiedad de Array) VARIABLES NOMBRE DESCRIPCIONarerderpograrar com sung Cadonasderem Nee Volcan pos Prnarivos: ecnan nde ofa at ‘eo enact cotone ncered Tin espacal canine wdetres a cus) “105 DE DATOS EN ‘he pine | agtay(eeesnes ees) JAVASCRIPT reso eee ro (a6 sro ‘tonsdeinds poe { Frsones ros pareincee |) Ged ‘TPs OBsETO ‘Sav de somertos 0 Are 9) atte coredearomes Un woes ogeo get En javascript las variables no tienen tipos, son los valores quienes tienen tipos + Las variables se pasan siempre por valor, pro cuando una variable se refiere a un objeto (incluyendo arrays) ese valor es una referencia al objeto + Asi cambiar el valor de la variable no cambia el objeto 0 valor primitive subyacente, solo apunta la variable a una nueva primitiva u objeto + Al cambiar una propiedad de un objeto referenciado por una variable cambia el objeto que subyacente Aleance hps:tousbilis.com/chuletastontond!s! 2122 ai9)2017 Javascript — brusbils, La visibldad es hacia fuera en las funciones, Yo veo las variables de las funciones externas que me contisnen pero no veo las de dentro + Global - Declarada fuera de una funcion var cartiane = ‘volvo"s 77 codigo. aqui puece sar carNane ‘unetion nyFunction() { 71 codigo aqui puece usar carwane ? - Siasigno un valor a una variable no declarada, esta se convierte en global UF codigo aqui puede usar carNane ‘Funetion myFunction() { ‘carNane »"volve" 5 17 codigo aqui puede usar cartane ? - Shadowing var carwane = ‘yolvo's Function myFunction().{ Var carnane = "seat Console. log(carNane); // seat, 1a var local oculta a 1a global ? + Local Variables declaradas dentro de una funcion permanecen locales a esa funcion 11 codigo aqus NO puede usar carnane ‘Funetion nyFunctlon() { ‘var carwane = "volvo"; 11 codigo aqut puede tsar carane ) + Hoisting Significa mover al comienzo del alcance o rango de vision (scope) ‘Todas las declaraciones de variables son hoisted (levantadas) - La declaracion se mueve al comienzo de la funcion aunque la asignacion permanece donde estan funetion foo () { ‘Console.log(tap); // undefined en vez de cascar par top 4s not defined if (False) { var tmp = 35 // aqui no entra } 11 es por el hofsted que hace que la funcion se ejecute asi ‘Funetion f00() { Var tap; // hoisted declaration , aqui se hace 1a declaracion console. 1og(tap); iF (false) ( ‘tap '= 33 // aqui permanece 23 asignacion ? ? Conversion de tipos Nueber(string) ~ Convierte cadena string en un numero parseint (string) - Convierte la cadena string en un numero entero parseFloat (string) - Convierte la cadena string en un numero flotante String(nunero) - Convierte el numero en una sting hps:tousbilis.com/chuletastontond!s! a2 ai9)2017 Javascript — brusbils, rurero.tostring() - equivale a String(numera) y devuelve una string Array. toString() - convierte un array en una string con los elamentas soparados por una coma NUMEROS Intemamente son un numero flotante de 64 bits NaN (Not 2 number’) -no equivale a ningun valor ni siquiera a el mismo Infinity - es mayor que cualquier otro numero (excepto NaN) y es menor que cualquier numero (excepto NaN). util como valores por defecto para buscar minimos y maximos + Metodos 4isNan(numero) - Detecta si es numero 0 no runero.toFixed(n) - Redondea a n decimales (devuelve una string) rnurero.toPrecision(n) - Redondea an digitos decimales incluidos (devuelve una string) rurero.tofxponential(n) - Representa el numero en notacion exponencial (devuelve una string) rnunero.tostring()- equivale a String(aunero) y devuelve una string STRING Puede estar entre comrillas simples 0 comillas dobles Las cadenas tienen un propiedad length. "cadena" length Las cadenas son inmutables. no se pueden cambiar pero si crear nuevas Para escapar caracteres usamos \ \n nueva linea por ejemplo Metodos parsernt (string) - Convierte la cadena string en un numero String. froncharCode() - Convierte un codigo de letra en una cadena con la letra var codigo = 655 Var letra = String. froncharCode(codigo); _// letra = “A ‘string. charAt(pos) - Devuelve Ia letra en la posicion pos var name = “Curty's var initial = nanescharat(2); Uy Apstian is °C string. charCodeAt(pos) - Devuelve el codigo de la letra en la posicion pos var name = “curty's Var initial = nane:charcodett(@); // initial is 67 string.concat(stri, str2, ...) -Junta los strings. Mejor usar + ceoneat('3", "25 IDs es "cat string. indexOF(cadenaBuscada, pos) - Busca una cadenaBuscada en a string y sila encuentra devuelve la posicion del primer ccracter, sino devuelve -1 El parametro opcional pos indica a partir de donde buscar var text = ‘Mississippi; Var p= texts andexoF('ss)5 Wpesz pie text.indenor(es', 3 Wp es 5 ext sindexOF('S5") 6): pes string. lastIndexoF(cadenaBuscada, pos) - Como indexOf pero busca desde atras hacia adelante UI returns 3 11 returns 1 11 returns = hps:tousbils.com/chuletastrntendls! 422 ai9)2017 Javascript — brusbils, string. replace(valorbuscado, valortuevo) - Reemplaza el valorBuscado por el valorNuevo solo una ver salvo que el valorBuscado sea una expresion regular var str = “Visite mi casas var res = strereplace("casa", “huerta"); // "Visita mi huerta string. search(regexp) - Busca una cadena que case con Ia expresion regular pasada y devuelve la posicion del primer caracter 0 4 Por 1a maflana " yo se levanto’; ‘extssearen(/1""1/)3 71 pos es 16 string.slice(conienzo, Fin) - Crea una nueva string desde la posicion comienzo incluida hasta la posicion fin NO includa. Fin € opcional y por defecto es string length var cadena = ‘Hola mundo"; var res = cadena,s1sce(3 4); I] res es ‘ola Var res = cadena, s1ice(2}; 11 res es “Ta mundo string.split(separador, Linite) - Grea un array de cadenas al separar el sting original en piezas separadas por el parametro separador Limite es e! limite de nuevas cadenas var cadena = "Como lo 1Levas hoy amigo"; var res'= cadenarsplit(" ", 4) // res es [*Cono',"Lo', “Llevas*, hoy") string. substring(comienzo, fin) - Usar string.sLice() en su lugar string. toLoxerCase() - Convierte la string a minusculas ‘string. toUpperCase()) - Convierte la sting a mayusculas string. froncharcode(cart, car2, ...) var a = String. froncharcode(6?, 97, 116); Wass ct ‘string.match(regexp) - busca la regexp en la cadena string y devuslve las coincidencias en un array var ste = "The rain in SPAIN stays mainly in the plain"; Var res = stramaten(/ain/e)s console-log(res) //[ ‘ain’, ‘ain’, ‘ain string. trim(cadena) - Elimina los espacios en blanco y los saltos de linea del comienzo y del final de la cadena ARRAYS Los arrays en Javascript son falsos arrays pero aun asi renta su uso Heredan de array.pratotype muchos metados muy utiles + Creacion de Arrays + Array Literal var vacto = (1; Var numeros = ['cero', ‘uno’, "dos", "tres", "cuatro", ‘cinco’, Sets", 'slete", "ocho", nueve, "ele?" Jj vaciof1] // undefined umeras(1] 7/ one’ + Array constructor var colores = new Array("blanco’, ‘rojo’, ‘azul") hps:fousbils.comichuletastrontend!js! ai9)2017 Javascript — brusbils, + eracion de arrays No usar for in que da muchos problenas por no sex objetos puros for (var i= @; 4 € muneres.tength; f= i +2) ( ‘console. 1og(numeros[i]); ? + Lazy intaization En arrays multidimensionales, el segundo array no se crea por defecto y hay que inicializarlo antes de usarlo initializeMultiArray: function (cols, rows, value) ( ‘var-areay = [3 for (var t= 8} 1 < cols; +) ( arraylil = (5 For (var j = 8; J < rows; e+) { 4 rts) = values ? etuen arrays ? Metodos D Destructives - modifican los arrays sobre los que se invocan ND No destructivas - NO modifican los arrays sobre los que se invocan + Afadir mentos Darray.push(item, iten2, ...) ~ Aflade los items al final del array, Pero cada item que afiade lo hace como un array item var a= ('a', ‘bt, tet]s as ooo var ¢ = a.push¢b, ‘true! Hassan ey Lx, y's 2], true Weiss D array.unshift(itent, iten2, ...) - come push pero afiade las items al principio del aray. Devuelve la nueva length var a= ['3', "bis *eTy var nS aunshife('?', te"): eas RC BE fees 5 + Eliminar elementos. D array.pop() - Elimina y devuelve el ultimo elemento del array, Si el array vacio devuelve undefines var as a", "bY, *eh]y var € = 3.p0903 1/248 ['a", BD, € is *e D array. shift() - elimina el primer elemento del array y lo devuelve. Si el aray esta vacio dewelve undefined var a= [3's "bi “es Var ¢ = a-shiee( Maes (by 'e], cas + Iteracion| NO foreach(valor, indice) - Ejecuta una funcion una vez para cada elemento del aray, var people = [ {nane: ‘Casey’, rate: 60), hpe/forusbilis.com/chuletasrontends! 122 ai9)2017 Javascript — brusbils, ‘canilie', rate: 80), ‘cordon’, ‘rate: 75), nigel”, rate: 120) Li vir results = (15 people. foreach(Function(pesson) { Tf (person.rate >» 65 6 person.rate <= 98) { results. push(person); ? Di: ND sone() - Comprusba si algunos elementos del array pasan un test defnido por una funcion. Al primer elemento que da true se acaba do iteracion var ages = 13, 18, 38, 2015 Function checkaduit (age) { weetuon age >= 185 Junction ayFunction() { res = ages, sone(checkAdult); M1 ves = true ND every) - Comprueba si todos los elementos del array pasan un test definido por una funcion. Al primer elemento que da false se acaba la iteracion var ages = (3, 18, 18, 20); unetion checkadult (age) weetuen age > 18; } Function myFunetion() { res = ages. every (checkAdult); V1 ves = false + Combinar NO array.concat(itest, item? ...) -Va afadiendo los tems, array no cambia [rats by te}: var b= Doe) "yy “2 DE Var € = a-coneat(b, true); Weis Fahy We tx, 22, tue] + Fittrar ND Filter() - Crea un nuevo array con todos los elementos que pasan un test especificado en una funcion var people = [ {nane: ‘Casey’, rate: 62), {none: ‘Cantine", rate: 88}, {nane: ‘cordon’, "rate: 75), {nane: ‘Nigel, rate: 120) Lb finetion priceRange(person) { ‘retuen (person.rate >= 65) && (person.rate <= 98); us results = people. filter(pricetange); El callback se invoca con tres elementos 1, EL valor del elemento 2. Elindice del elemento 3. Elobjeto Array que estamos fitrando result = result.Filter(function (val, 4, res) { ‘console. log(val, 1, res); hps:tousbilis.com/chuletastontond!s! ai9)2017 Javascript — brusbils, ND reduce() - Reduce el array a un solo valor. Ejecuta una funcion suministrada para cada valor del array(de izda a derecha). EL valor de return se guards en un acumulador 11 total [0, 4, 2, a}.reduce(runction(a, B){ return a + by Ds var numbers = (65, 44, 12, 4]; Funetion getsun(total, nua) { ‘eetush total + nuns > Console-log(unbers.reduce(getsun)); // resultado = 125 var array = [4,5,6,748)5, var singleval + 8; Singleval = array.reduce(functson(previousVal, current¥al) ( ‘return previousval + currentval;, Os + Buscar ND array.indexOF("elemento") - Busca el elemento en el array y devuelve su posicion 0 -1 sine lo encuentra var fruits = ["sanana*, "orange", “Rpple", “Mango]s Var a= fruits. indexof("apple'); Manz ND array. lastIndexof - Como indexOf pero desde atras hacia adelante var array = (2, 5, 9, 215 array. lastindexor(2)} ws array. lastingexo#()} wn array. lastInéexoF(2, 3); 7/3 array. lastIncexoF(2, 2); // @ array.includes(value) - Devuelve false or tue si encuentra o no el elemento dentro del array function diseavowel (str) { var vowels = ['a"y str, split("*) forEach(function (value, index) { 1# (vowels includes (valve)) res.push(valve) JF (vowels. ndexOf (value) == -1) res.push(value) ; Ds etuon res. Josn( ey TY, fo, Why TA, TES OT, 10", "UT + Ordenar D array. sort(funciondeconparacion) - Por defecto la comparacion la hace asumiendo que todos los elementos son strings var n= (4, 8, 15, 26, 23, 42]; nesort(function (a, b) retusn a= by ys Wo 3s (A, 8) 15, 26, 23, 42); D array.reverse() -invierte todos los elementos del array y devuelve una referencia al aay original (pero ya masificado) var a= (a, "bY, ces Var b = a.reverse( J: W1 tanto a cena B son ["c", "By *2 + Modificar NO map() ~ Llama una funcion sobre cada elemento del array y crea un nuevo array con los resultados var numbers = (4, 9, 16, 25]; hps:tousbilis.com/chuletastontond!s! a2 ai9)2017 Javascript — brusbils, Function ayFunction() { x = nunbers.map(hath. sqrt); [x= 3 a 5) } NO array.jein(separador) - crea un string concatenande todos los elementos del array usando el separador indicado que por defecto es. Si usas espacio en blanco como separador se unen todos sin separacion Sousne-e)s Ware's a.Jein('")5 // ¢ 4s ‘abed"s ND array.slice(comienzo, fin) - copia una parte del array desde el array[comienzo incluido hasta el array[fin] NO incluldo. Fin fs opcional y por defecto es arraylength var a= (a "bY, tes var b= a.stice(o, 1); // » es ['a") var ¢ = 3isitce(1}; // ces ['B', “e') var d= aishice(1, 2); //'6 es (*b"] Darray.splice(conienzo, borrarCont, item, iten2, ...) -Elimina elementos reemplazandolos otros nuevos (item, .) El primer elemento eliminado es rarrayicomienzo] y @ partir de aqui (el incluido) elimina los siguientes borrarCont. Inserta los tems en su lugar Devuelve los elementos borrados var a= (ats "bts “es Var n= assplsceC, 1, ache’, “bug")s Waves (ia, ‘ache’, ”"bug", te ares [ey //eara borrar por ejemplo el elenento con indice = 3 de un array array. splice(ndice, 1); BOOLEAN true o false + Operadores Logicos ano oR a 1 nor o3 + Operador tornario u operador condicional test ? expresion1 : expresion? Si test es true devuelve expresiont, si es falso devuelve expresion2 + Convertir valor no-booleano a booleano false - string : cadena Vacia rnumiers :0,-0, NaN null, undefined boolean : false - true: Todo lo demas NULL - UNDEFINED ‘Se usan para denotar la ausencia de valor COperaciones que producen undefined Variables sin inicializar hps:tousbilis.com/chuletastontond!s! ai9)2017 Javascript — brusbils, =Parametros perdidos - Leer propiedades inexistontes ~ Los retum de funciones que no devuelven nada explictamente COperaciones que producen nul: El ultimo elemento de la cadena de prototipa - RegExp prototype. exec) sino encuentra un valor que case null es para objetos Lunde#ined es para propiedades, metodos o variables que no han sido inicialzadas ‘chequear si algo es undefined 6 nul if 11 © aprovecnar que tanto undefined cono null se consideran false in ¢ 1 undefined || x wll) { ESTRUCTURAS DE CONTROL + if. else AF (condiciont) { Anstrucciones_if_condéciont_es_toue; } else 1f (condiciona) ( Insteucciones if condicion?_es_teues } else #F (condicions) ( instrucelanes_ifcondicion3_es_true; dew ease’ ¢ insteucciones_if_ninguna_condicion_es_true + while while El codigo puede que no se ejecute nunca while (condicion) { instruceianes, while_condicion_es_trues o while El codigo se ejecuta minimo una vez 60 ¢ insteucetones while_condicion_es_true } while (condicion) + for Anicializacion - Se ejecuta antes que ol bucle empiece Condicion - Define la condicion para seguir ejecutando el bucle actualizacion - Se ejecuta cada vez que el bucle se ha ejecutado for (inicializacion; condicion; actualizacion) { ‘codigo se_ejecuta:con cada. bucles for (var 1 = 0; 1 ¢ 10; ist) ‘document .ursteln(3)$ ? + forin hps:tousbilis.com/chuletastontond!s! 022 ai9)2017 Javascript — brusbils, Recorre todas las propiedades de un objeto o array incluidas las heredadas or artamie an [object | aeray]) ( } for (p in window) { Gocument wrsteln(p + "
")s » Para evitar las propiedades heredadas se usa hasomProperty for (var key in person) { Le (person-hasdanProperty(Key)) { ‘console log(key)s + foreach... in DepREcATED NO USAR + switch sultch(epresion) { nseeuecioness areas Snezruecioness breaks cerauit: Instrucciones_por_defecto; breaks itch (new Date() .getDay()) { //getday() nunero de dia de 1a senana ‘ease 6: ‘text = "Sabado"; breaks case 8. ‘cext = “Doningo"; breaks efauie ‘text = "Entre semana"; breaks > FUNCIONES Las funciones son enlazadas a Function. prototype que a su vez esta enlazado a Object prototype Cada funcion se crea con una propiedad prototype cuyo valor es un objeto con una propiedad constructor cuyo valor es la funcion Cada funcion se crea con dos propiedades ocultas El contexto de la funcion El codigo que implementa el comportamiento de Ia funcion + Parametros y Argumentos Pequefia diferencia entre ambos Parametros: son las variables que se definen cuando se deciara la funcion ‘Argumentos: son los valores que se pasan a la funcion al invocarla ‘Sia una funcion le pasamos demasiados parametros los que sobran fs ignora ‘Sia una funcion le pasamos menos parametros a los que falta les asigna undefined arguments object - Un objeto similar a un Array (pero sin ninguno de sus metados) que se correspende con los argumentos pasados alla funcion hps:tousbilis.com/chuletastontond!s! 22 ai9)2017 Javascript — brusbils, function fourargunents (ay by ©) { ‘console. 1og(argunents. Length) console. log(argunents({2])s ) cmsebecdo(argmerss(2)35 Fourargunents(‘uno", dos", ‘tres, ‘cuatro'); uw funetéon sinparanetros () { ‘retusn argunents > Var args = sinParanetros(“uno", argslength // 5 dos", "tres" Asignar valores por defecto a los parametros Function paints 9) xe || 8 yey IL e Fetutntxsy]s ? + Hoisting Significa mover al comienzo del alcance 0 rango de vision (scope) Las declaraciones de funciones son completamente hoi sted por ollo se puede llamar a una funcion antes de que sea declarada Las expresiones de funciones no son hoisted y por ello no se pueden llamar antes de ser declaradas + return multiples valores Para ello usan un array furcion getHedidas(anchura, altura, profundidad) ( ‘Ver area = anchura * altura; Var Volumen = anchura * altura * profundidad; var medidas = [area, volunen]; wretusn medidas; } Var area = getwedidas(5,4,10)(0); Var volument’ = getMedidas(5,4,18)(1]; + Invocacion Se realiza nonbrefuncion() (Cuando invocamos una funcion 1. Se suspence 1a ejecucion ée 1a funcion actual 2: Pasa ei control y 10s paranetros 3 1a nueva Function 3. Tambien Se pasan this y argunents| 4 EL valor ge ths cepende del patron de invocacion de los cuales existen & Patrones de invocacion Netodos, this se refiere al objecte desde el que se invoca el metodo Funcion, nis se refiere al objeto global Constructor, this se refdere al nuevo objeto que se esta construyendo ‘Apply PENDIENTE Tipos de funciones + Named functions + Declaracion de funciones function declaration - las puedes lamar cuando quieras antes de que se lean, incluso en el onload function nonbreFuncion () { codigo: ? hpe:forusbilis.com/chuletas/ontends! 202 ai9)2017 Javascript — brusbils, + Expresiones de funciones function expressions - no se pueden usar hasta que este encontrada y definida ANONDHAS ‘var nonbreFuncion = funetion() codigo}, > ‘Var referenclafuncion = function noabreFuncion() { ‘codigo; + Anonymous functions function () { codigos ? + Autoejecutables Immediately Invoked Function Expressions (IFES) Una vez declarada se llama a si misma para inicalizarse y estar ya disponible para otras partes de la apicacion Se usa para declarar varables que no afectan al resta del codigo fuera de la funcion pues contiene la vsibilidad de las variables Pueden usar tamiien return avontma (onetiont 7/<6digo de tu funcién 20; I cen paranetros (Cranetion(wa,ort Uithere wes un alias (shortcut) para window Wd es un alias de docunent [io = tn alias Ge otravariabteruyLargs Mowindow, cocunent, etraVariableMuylarga)); ane (runetion nanbreruncion()( 7/e6sige de tu funcion 20); Recursividad Una funcion que se llama a si misma es recursiva function power(base, exponent) { If (exponent == 8) ‘excien “Speturn base * power(base, exponent ~ 1); > ‘console. log(vower(2, 3))4 Woe CLOSURE Es una forma de "recordar" y tener acceso a las variables de una funcion una vez que ya ha terminado de ejecutarse. Closure ejemplot Funetion crearcontador(x) { Function sunarcantidad(y) { return x 95 ? ‘etuen sunarcantidad ? hps:tousbilis.com/chuletastontond!s! san2 ai9)2017 Javascript — brusbils, var sunarAdos = crearcontador(2); console. log(sumarab0s(1));.// 3 console. Log(sumarabos(5))3 // 7 Closure ejemplo2 function wrapvalue(n) { ‘Var localvariable = nz return function() ¢ ‘recuen JocalVarable; b ? ‘ar wrap = wrapvatue(1); Var wrap2 = wrapvalue(2)} consoles log(wrapl())5 wad console. log(wrap2())i Wa? OBJETOS Un Objeto es un contenedor de propiedades Una propiedad es un nombre y un valor (cualquiera menos undefined) Los objetos se pasan siempre por referencia or in -Itera sobre todas las propiedades del objeto incluso funciones o propiedades de los prototipas, Para evitarlo se usan fitros como typeof I= "function" 6 hasonProperty Tambien puede usar el for object. hasoanProperty (nonbre) Devuelve true si el objeto tiene la propiedad nombre y false si no. El prototipe no se examina var a = {nenber: true); var b = Onject.creste(a); var t = a.hasounProperty( menber’); // + is true var u = b.hasOunProperty(‘nenber'); // u is false var v = Binenber Ww as true set -usuario.name = usuario.newProperty = “ciudad” - crea una nueva propiedad ciudad in usuario- devuelve true usuario.ciudad !== unde#ined = true Gelete wuario.ciudad - elimina la propiedad del objeto + bind Extraer metodos de un objeto var fune = usuario. diiiots; ‘Func() // typeof + cannot read property “nase” of undefined var fune = usuario.ditiola.bind(usuario); 11 bind crea una nueva funcion cuyo this siempre tendra el valor pasado Fune() // "Hola de parte de Pepe Crear Objetos + Literales, ~ Los valores de las propiedades se pueden obtener de cualquier expresion incluso de otras objetos anidados = Bueno para la creacién de nuevas valores de objeto = NO son reusables: var ebjetovacio = (95 { ‘ethola. = function() { alert ("Hola de parte de", this.nane); hps:tousbilis.com/chuletastontond!s! sana ai9)2017 Javascript — brusbils, h name : "Pepe", edad : 50, aciniento : ¢ 1/ 10s objetos se pueden anidar ‘Fecha: "01-01-1980" lugar? “La Tierra” + Constructores Herencia En javascript los objetos heredan dirsctamente de otros objetos (prototipos) = Con el operador new podemos montarnos factorias de objeios y hacer un pseudociasico patron de diserio ‘Son factorias de objetos, sila a las clases de otros lenguajes 11 weussBLE Function Punto(x, y) { this. thisly } Purto.prototype.dist = function () return Mathesgrt(this.xethisix + this.y*this.y)s b Var pi = new Punto(2, 75 Var p2 = new Punta(s, 4); phy 7 praise 7/5 this Usada dentro de funciones y objetos para referrse a un objeto que lo normal es el objeto en el que la funcion opera + Funcion con alcance global (no esta dentro de ningun otro abjato o funcion) this se reflere al objoto window unetéon windousize() { ‘Var width = this. innerwidtn; Var height = this.innersesghts return (height, width} + Variables globales, las variables globales se convierten en propiedades del objeto window var width = 600; var Shape © (width: 300); Var showkieth = functson() ¢ ‘document. erste(thss.width); be Showidth(); ——// this.width = 69e ‘+ Metodo de un objeto, si ura funcion se define dentro de un objeto se convierte en un metodo de ese objeto. En un metodo this ‘0 reflere al objeto que lo contione var shape = { width: 609, height: 426, getArea: function() { ‘setuen ths.aidth * this hesghty ? ? + Funciones con nombre globales y usadas como metodos de un objeto, this se refer al objeto que contiene a la funcion var width = 600; var shape = (width: 300); Var showtisern = functson() ¢ Gocument.write(this.width); b hps:tousbilis.com/chuletastontond!s! 1622 ai9)2017 Javascript — brusbils, shape.getwidth = showwidth; shape getwidth()s 11 Ass.uidth = 300 Prototipos object.create crea un nuevo objeto que usa uno viejo como prototipa var proto = { sentencsa ‘condicional :'2 ? var creaPrisionera = function (nombre, 48) ( ‘var prisionera = dbject.create(prate); prisionera-nonbre = nombres prisienero.id = 1d etusn prisionero; > Var prinerPrisionera = creaPrisionero (°Juan',. 65891"); Var SegundoPristonero = crearPrissonero ("Pepe', *13698"); ERRORES Contexto de ejecucion ‘Se corresponden con el alcance o visiblidad de las variables = Contexte Global: codigo que esta en el script pero no en una funcion. Solo hay un contexto global en una pagina ~Contexte de funcion: codigo que se ejecuta dentro de una funcion. Cada funcion tiene su propio contexto Cada vez que un script entra en un nuevo contexto de ejecucion hay dos fases - Preparacion:, s@ crea un nuevo alcance. Se crean variables, funciones y argumentos y se determina el valor de this. = Ejecucton: ahora se pueden asignar valores a las variables, se referencian las funciones y se ejecuta su codigo y se elecutan tambien las sentencias Objeto variables = Cada contexto de ejecucion tiene su propio objeto variables que tiene las variables, unciones y parametros que estan disponibles para ese contexto, = Cada contxto de ejecucion tiene tambien acceso al padre de objeto variables Excepciones Cuando se produce un error, mira en su contexto a ver si hay codigo para manejar el error, si no lo hay sube hacia arriba por el stack buscando codigo para manejar el error. Si llega al contexto global y no lo encuentra termina la ejecucion del script y crea un objeto Ereor Objecto Error + Tipos de objetos error Error -etror generico SyntaxErrar -no se ha respetado la sintaxis ReFerencetrror - se ha referenciado una variable que o no esta declarada o esta fuera del alcance ‘TypeErrer - hay un inesperado tipo de datos que no puede ser forzado Rangeérror - numeros en un rango no aceptable +0 URTError - metodos del tipo encodeURI\) decodeURI() mal usados EvalError -funcion eval() mal usada + Propiedades: rnare - tipo de ejecucion mnessage = descripcion FileNusber - nomore del archivo javascript _LineNusber - numero de la linea con error hps:tousbilis.com/chuletastontond!s! 1622 ai9)2017 Javascript — brusbils, Manejo excepciones Interrumper la ejecucion del programa. Para evitarlo hay que capturartas ery 11 Sotenta ejecutar este codige } catch (exception) { 113i hay una excepeion ejecuta este codigo } finaly { 1/ @t0 Stenpre se ejecuta ? ‘Throwing errors Sisabes que algo podria causar un fll puedes generar tus propos erores antes que ol interprete lo haga ‘throw new Error(*nensaje"); vac width = 125 var height = “test; Function calchrea(wigth, height) ( ery { ‘Var area ~ width * hesgnt; AF (1ishau(area)) { 1) 18 it As 2 number peise (0 11 Otherwise throw an erron Throw new Ercor("calearea() received invalid number’); ¥ catenge) ¢ 11-1 there wos an error console, log(e.nane + * * + e.nessage); rretusn ‘We were unable to calculate the area." » Gocument. getElenentByLd( area") innerHTML = callcArea(width, height); function getPerson (1d) { if (id ©8) { ‘chrow new Ereor( "ID must not be negative: ' + id); Fetuen { 44: 44 }s // normally: retrieved fron database } Function getPersons (S45) { Var result = ()3 Js. foréacn(Funetion (4d) ¢ ery ‘Var person = getPerson(ie); result. push(person); } extch (exception) { console. log(exception) ; ? DH etucn results > PROGRAMACION ASINCRONA. + Tareas Asincronas - Peliciones de red (llamadas AJAX, peticiones al servidor.. etc) ~ Operaciones con el sistema de archivos (leer/escriir archivos... ete) + Operaciones retrasadas a proposito (alarmas, repeticiones periocicas... etc) Callback ‘Son funciones que se ejecutan una vez que el proceso asincrono que las llama se ha terminado function nonbreconpleto (nombre, apellido, callback) { Console log("Me llano "+ nanbre + " "+ spellido); hps:tousbilis.com/chuletastontond!s! s7a2 ai9)2017 Javascript —brusbils ccalaback(apel tide); Yar salucos = function (ape) ( console log("Hola, Se" + ape); b embrecompleto("arus", "Bilis", saludos); Jf urt.Js Gb. getiist(printtist)s function printList (rows) { ‘console. 1og(rows”, rows); } 11 database. j= getList: function (catlback) ‘console. log( list’); con.query( "SELECT * FROM ul", function (err, cows) { Tf i(err) throx eer // ertor-first cailbacks. convencion cal back(rows) ; DE Promises var p = new Prosise(‘unction(resolve, reject) { sf (/* condition */) { Pesolve(/* value */); // fulfilled successfully > aise { reject(/* reason */)5 // «1 rejected De (function () { tise strict; var body = docunent.querySelector( ‘body’; Var mylnage = new Inage();, Ji Gall the function with the URL we want to load, but then chain 11 he promise then() method on to the end of it. This contains to 11 eatibacks: ‘ngload( ‘darth Jpg")-then( Function (response) ¢ 7/ The first runs when the promise resolves, with the 11 request response specitieg within the resolve() method. ‘var imageURL. = window.URL .createdb jectURL (response); rytnagessre = inageURL; body. appendchild(ayimage) ; 11 "The second runs when the pronise is rejected, and logs the [encor specifies with the reject() method: 3, function (Enver) { ‘console. 1og(error); Ds J otra sintaxis y)ecateh(Funetion (Error) { console. log(error)s Ds oa 11 tanbien podenos alnacenar 12 pronesa en una variable para una W sintaxts' mas clara W1 var p = smgload(urt); 1 pethen(bla bla); 1 preaten(bla bla); function ingload (url) { 1// Create new pronize with the Pronise() constructor. This has as 11 385 argunene 3 function with two paraneters, resolve and reject ‘return new Pranise( function (resolve, reject) { 71 Standard RHR to load. an image Var request = new xmLittpRequest (); request open( GET’, url): eauest responseType = "blob's Ui wien the request loads, check whether it was successful request onload = function’ () IF (request.status === 208) { hps:tousbilis.com/chuletastontond!s! sa22 ai9)2017 Javascript — brusbils, JI, 1 successful, resolve the promise by passing back the 11 request response resolve(request.response) ; pelse ¢ IL-1 At fails, reject the promise with a erron message reject(Error(“Taage didn't load successfully; error code:" + ‘requast -statusText) )5, y * ecuest onercor = function () { Vi Alze deal with the case when the entire request fails to 11 begin wien 11 tis 15 probably 2 network enor, 0 reject the promise 71 with an appropriate message reject(crror( "There was a network error. "))s 1 send the reauest Meese Sted: » d 201 PATRONES DE DISENO Libro bueno de patrones de disefio ‘Se usa para replicar el concepto de clases para quardar metodos y variables publicas y privadas dentro de un objeto Eso nos permite crear una API publica para los metodos que queramos Funciones IIFE, + funciones autoejecutables IIFES (function ( { [1 Todas 125 variables y funciones son locales a esto 11 pero aun tlene acceso a todas las globales 10: + Importacion global (Function (8, YaHo0) 11 Nos da acceso a 2as globales jQuery (as $) y YAHOO aqui dentro }GQuery, YAHOO); var app = (function () { “use strict Function inst () { ‘Console. 1og{" inicio", Dungeon.hola()); rrenderer.setmycarvas(); init: init var renderer = (Function () ¢ "use strict” var cols, var ppp = 105 Function setmycanvas () { ‘canvas = docunent.getElementByTd‘myCanvas"); ctx = canvas. getContext("Z0")t Canvascnidth = cols * ppp} canvas height = rows * BPD: ? Function drawtycanvas () { hps:tousbilis.com/chuletastontond!s! 922 ai9)2017 Javascript — brusbils, console-1og( ‘Drawing Map. return { ‘gettyCanvas: sethyCanvas, GrautyCanvas: crawtycanvas he 203i var bungeos = { hola: function () { ‘eetuen "ROGUE" > B addEventListener("oad", app. init); + Con creacion manual de objetos function User()( Var username, password; Function dobogin(usersPm) { passhord + pws ? ar publicaPt = { Togin: dotogin by ‘etusn publicAPr; dae fred» yer) eat opin trea, Battery); 11 erea un moduto User + Module Export var Modulo = (Function () { ‘var mod = (5 Var privadavariable = 1; ‘Funetion privadonetodo () { ‘retuen privadavariablet+s > nod noduloPropiedad ~ ‘Hola; trod moculoMetodo = function () ( ‘return privadeMetodo(); hb fecuen nod; DO: Conséie.1og(Wodulo.noduloPropiedad); 11 Hora Console. log(Modulo nodulevetodo()); We ‘console. log(Madulo nodulemetodo()) We + Object Interface var weekbay = funetion() { ‘var names = ["Sunday", "Monday", "Tuesday", “Wednesday”, "Thursda) Feiday", "Saturday" }5 return ( rane: function(nuaber) ( ‘return nanes[nuaber]; b Aimer: functson(nane) { ‘return nanes. indexOF(nane); > a 103 console 1og(woekDay.ame(weekDay.nusber("Sunday"))); // + Sunday Object literal var mytodule = ¢ mybroperty: "sonevalue", myconfig: { lusecaching: true, Tanguage: "en" hps:tousbilis.com/chuletastontond!s! 20122 ai9)2017 Javascript — brusbils, b ‘ShySonething: function () { Console-log( "where 15 Paul Trish today?" » Feporttycontigs function () { ‘Console log "Caching is! ° + ( thisrayContig.usecaching 7 “enabled” : “éisabled") ); » Updatemycontig: function( newconfig ) ¢ EP (typeof nesConfig =e= “object” ) ¢ ‘his myContig = newontigs 1 censestog(tsssmyconFg.2anguage 35 by iyhodule. saySonething() UI Were 4s Paul Toish today? inytodule.reportsycontig() 11 Caching 8: enabled mnyhodule. updatenycontig({ ne Tanguage: "fr", usecaching: false Di: inyhodule. reportsycontig(); 11 Caching is: disables Datos: Arrays vs Objects Grupos de objetos se pueden almacenar en arrays 0 como propiedades de otros objotos + Objetos en un array var people = [ nase! ‘casey ', rate: 7, active: true), {ane: ‘Canilie’, rate: 88, active: true}, {nane: ‘Gordon’, ’nate: 75, active: false}, {name: "Nigel", rate! 126, active: true} + Objetos como propiedades de otros objetos var people = ( ‘Casey= (rate: 78, active: true}, ‘Si{rate:_88, active: true), fate: 75, active: false) 5 Nigel = {rate: 128, active: true} ES6 const - let + const rea constantes que no se pueden modificar, ha de asignarse el valor en la dectaracion + let Declara variables que no son accesibles mas alla del ambito de creacion Ejemplo mejor: para os for fancion arrow Para las funciones anonimas 1, 655 ar multiplicar = function(x, y) ( iretuon x" 95 } Wy 856 Var muttiplicar wnt hps:tousbilis.com/chuletastontond!s! 21122 ai9)2017 Javascript — brusbils, retumn xy » template strings let nombret = “savaseript; Jet nombre? = “avesone"s console. 1og(séio quiero decir que ${nenbre1} 1s ${nonbre2}” )s modulos barjs Funetion hello(who) { ‘etuon “Let me Sntroduce: "+ whos ? export hello; foojs ingort hello from "bar" var hungry = "hippos Funetion awesome) ‘console. Logt hel io( hungry ).touppercase() 11 Aaport only “he120()° from "bar" module 6 > export awesone; bazjs nodule foo fon "Foo! Imogue bar eon "bat Console. loge bbarsheLlo( “chino” ) 11 Amport the entire "Foo" and “bar* modules ds 11 Let me introduce: chino foo. awesone()s 71 LET ME INTRODUCE: HIPPO maps y sets iterators y generators hps:tousbilis.com/chuletastontond!s! 22122

También podría gustarte