JAVASCRIPTAVANZADOADOLFOSANZDEDIEGO

MAYO2015

1ACERCADE

1.1AUTORAdolfoSanzDeDiegoBlog:Correo:GitHub:Twitter:Linkedin:SlideShare:

asanzdiego.blogspot.com.esasanzdiego@gmail.comgithub.com/asanzdiegotwitter.com/asanzdiegoin/asanzdiegoslideshare.net/asanzdiego

1.2LICENCIAEsteobraestbajounalicencia:

Elcdigofuentedelosprogramasestnbajounalicencia:

CreativeCommonsReconocimiento-CompartirIgual3.0

GPL3.0

1.3EJEMPLOSLasslidesyloscdigosdeejemplolospodisencontraren:https://github.com/asanzdiego/curso-javascript-avanzado-2015

2JAVASCRIPT

2.1HISTORIALocreaBrendanEichenNetscapeen1995parahacerpginaswebdinmicasApareceporprimeravezenNetscapeNavigator2.0Cadadamsusado(clientesweb,videojuegos,windows8,servidoresweb,basesdedatos,etc.)

2.2ELLENGUAJEOrientadoaobjetosBasadoenprototiposFuncionalDbilmentetipadoDinmico

3ORIENTACINAOBJETOS

3.1QUESUNOBJETO?Coleccindepropiedades(paresnombre-valor).Todosonobjetos(lasfuncionestambin)exceptolosprimitivos:strings,nmeros,booleans,nulloundefinedParasabersiesunobjetoounprimitivohacertypeofvariable

3.2PROPIEDADES(I)Podemosaccederdirectamenteocomosifueseuncontenedor:

objeto.nombre===objeto[nombre]//true

3.3PROPIEDADES(II)Podemoscrearlasydestruirlasentiempodeejecucin

varobjeto={};objeto.nuevaPropiedad=1;//aadirdeleteobjeto.nuevaPropiedad;//eliminar

3.4OBJETOINICIADORPodemoscrearunobjetoas:varobjeto={nombre:"Adolfo",twitter:"@asanzdiego"};

3.5FUNCINCONSTRUCTORAOconunafuncinconstructorayunnew.functionPersona(nombre,twitter){this.nombre=nombre;this.twitter=twitter;};varobjeto=newPersona("Adolfo","@asanzdiego");

3.6PROTOTIPOS(I)Lasfuncionessonobjetosytienenunapropiedadllamadaprototype.Cuandocreamosunobjetoconnew,lareferenciaaesapropiedadprototypeesalmacenadaenunapropiedadinterna.Elprototiposeutilizaparacompartirpropiedades.

3.7PROTOTIPOS(II)Podemosaccederalobjetoprototipodeunobjeto:

//FallaenOperaoIE

3.8HERENCIAEjemplo:functionConstructorA(p1){this.p1=p1;}

functionConstructorB(p1,p2){//llamamosalsuperparaquenosepierdap1.ConstructorA.call(this,p1);this.p2=p2;}

//HacemosqueBherededeA//PrototipodeFuncinConstructoraBapuntaal//PrototipodeFuncinConstructoraAConstructorB.prototype=Object.create(ConstructorA.prototype);

3.9CADENADEPROTOTIPOS(I)Cuandoseinvocaunallamadaaunapropiedad,JavaScriptprimerobuscaenelpropioobjeto,ysinoloencuentrabuscaensuprototipo,ysinoenelprototipodelprototipo,ashastaelprototipodeObjectqueesnull.

3.10CADENADEPROTOTIPOS(II)Enelejemploanterior:instanciaB.__proto__==ConstructorB.prototype//trueinstanciaB.__proto__.__proto__==ConstructorA.prototype//trueinstanciaB.__proto__.__proto__.__proto__==Object.prototype//trueinstanciaB.__proto__.__proto__.__proto__.__proto__==null//true

3.11OPERADORINSTANCEOFLaexpresininstanciaBinstanceofConstructorAdevolvertrue,sielprototipodelaFuncinConstructorA,seencuentraenlacadenadeprototiposdelainstanciaB.Enelejemploanterior:

instanciaBinstanceofConstructorB;//trueinstanciaBinstanceofConstructorA;//trueinstanciaBinstanceofObject;//true

3.12EXTENSINConlosprototipospodemosextenderlafuncionalidaddelpropiolenguaje.Ejemplo:

String.prototype.hola=function(){return"Hola"+this;}"Adolfo".hola();//"HolaAdolfo"

3.13EFICIENCIA(I)Siqueremosquenuestrocdigoseejecuteunasolavezyqueprepareenmemoriatodolonecesarioparagenerarobjetos,lamejoropcinesusarunafuncinconstructorasoloconelestadodeunanuevainstancia,yelresto(losmtodos)aadirlosalprototipo.

3.14EFICIENCIA(II)Ejemplo:functionConstructorA(p1){this.p1=p1;}

//losmtodoslosponenmosenelprototipoConstructorA.prototype.metodo1=function(){console.log(this.p1);};

3.15PROPIEDADESYMTODOSESTTICOS(I)Loquesedefinedentrodelafuncinconstructoravaaserpropiodelainstancia.Perocomohemosdicho,enJavaScript,unafuncinesunobjeto,alquepodemosaadirtantoatributoscomofunciones.Aadiendoatributosyfuncionesalafuncinconstructoraobtenemospropiedadesymtodosestticos.

3.16PROPIEDADESYMTODOSESTTICOS(II)Ejemplo:functionConstructorA(){

ConstructorA.propiedadEstatica="propiedadesttica";}

ConstructorA.metodoEstatico=function(){console.log("mtodoesttico");}

3.17PROPIEDADESYMTODOSPRIVADOS(I)Lavisibilidaddeobjetosdependedelcontexto.LoscontextosenJavaScriptsonbloquesdecdigoentredos{}yengeneral,desdeunodeellos,solotienesaccesoaloqueenlsedefinayaloquesedefinaenotroscontextosquecontenganaltuyo.

3.18PROPIEDADESYMTODOSPRIVADOS(II)Ejemplo:functionConstructorA(privada,publica){varpropiedadPrivada=privada;this.propiedadPublica=publica;varmetodoPrivado=function(){console.log("-->propiedadPrivada",propiedadPrivada);}this.metodoPublico=function(){console.log("-->propiedadPublica",this.propiedadPublica);metodoPrivado();}}

3.19POLIMORFISMOPoderllamaramtodossintcticamenteigualesdeobjetosdetiposdiferentes.Estoseconsiguemedianteherencia.

4TCNICASAVANZADAS

4.1FUNCIONESSonobjetosconsuspropiedades.Sepuedenpasarcomoparmetrosaotrasfunciones.Puedenguardarseenvariables.Sonmensajescuyoreceptoresthis.

4.2THISEjemplo:varnombre="Laura";

varalba={nombre:"Alba",saludo:function(){return"Hola"+this.nombre;}}

alba.saludo();//HolaAlba

varfn=alba.saludo;

fn();//HolaLaura

4.3CALLYAPPLYDosfuncionespermitenmanipularelthis:callyapplyqueenlonicoquesediferencianesenlallamada.

fn.call(thisArg[,arg1[,arg2[...]]])

fn.apply(thisArg[,arglist])

4.4NMEROVARIABLEDEARGUMENTOSLasfuncionesenJavaScriptaunquetenganespecificadounnmerodeargumentosdeentrada,puedenrecibirmsomenosargumentosyesvlido.

4.5ARGUMENTSEsunobjetoquecontienelosparmetrosdelafuncin.

functionechoArgs(){console.log(arguments[0]);//Adolfoconsole.log(arguments[1]);//Sanz}echoArgs("Adolfo","Sanz");

4.6DECLARACINDEFUNCIONESEstas2declaracionessonequivalentes:functionholaMundo1(){console.log("HolaMundo1");}holaMundo1();

varholaMundo2=function(){console.log("HolaMundo2");}holaMundo2();

4.7TRANSFIRIENDOFUNCIONESAOTRASFUNCIONES

Hemosdichoquelasfuncionessonobjetos,asquesepuedenpasarcomoparmetros.

functionsaluda(){console.log("Hola")}functionejecuta(func){func()}ejecuta(saluda);

4.8FUNCIONESANNIMAS(I)Hemosdichoquelasfuncionessepuedendeclarar.Perotambinpodemosnodeclararlasydejarlascomoannimas.

4.9FUNCIONESANNIMAS(II)Unafuncinannimaasdeclaradanosepodraejecutar.

function(nombre){console.log("Hola"+nombre);}

4.10FUNCIONESANNIMAS(III)Perounafuncinpuededevolverunafuncinannima.

functionsaludador(nombre){returnfunction(){console.log("Hola"+nombre);}}

varsaluda=saludador("mundo");saluda();//Holamundo

4.11FUNCIONESAUTOEJECUTABLESPodemosautoejecutarfuncionesannimas.(function(nombre){console.log("Hola"+nombre);})("mundo")

4.12CLOUSURESUnclosurecombinaunafuncinyelentornoenquesecre.

functioncreaSumador(x){returnfunction(y){returnx+y;};}

varsuma5=creaSumador(5);varsuma10=creaSumador(10);

console.log(suma5(2));//muestra7console.log(suma10(2));//muestra12

4.13ELPATRNMODULOSetratadeunafuncinqueactacomocontenedorparauncontextodeejecucin.

miModulo=(function(){

varpropiedadPrivada;

functionmetodoPrivado(){};//APIpublicareturn{metodoPublico1:function(){},metodoPublico2:function(){}}}());

4.14EFICIENCIA(I)Siseejecutadesdeelnavegador,sesuelepasarcomoparmetroelobjetowindowparamejorarelrendimiento.Ascadavezquelonecesitemoselintrpreteloutilizardirectameteenlugardebuscarloremontandoniveles.Ytambinsesuelepasarelparmetroundefined,paraevitarloserroresquepuedendarsesilapalabrareservadahasidoreescritaenalgunapartedelcdigoysuvalornocorrespondaconelesperado.

4.15EFICIENCIA(II)miModulo=(function(window,undefined){

//Elcdigovaaqu})(window);

4.16ELPATRNMODULOREVELADO(I)ElproblemadelpatrnModuloespasarunmtododeprivadoapblicooviceversa.Poresemotivoloquequesesuelehaceresdefinirtodoenelcuerpo,yluegoreferenciarsololospblicosenelbloquereturn.

4.17ELPATRNMODULOREVELADO(II)miModulo=(function(){

functionmetodoA(){};

functionmetodoB(){};

functionmetodoC(){};//APIpublicareturn{metodoPublico1:metodoA,metodoPublico2:metodoB}}());

4.18ESPACIOSDENOMBRES(I)Parasimularespaciosdenombre,enJavaScriptseanidanobjetos.

miBiblioteca=miBiblioteca||{};

miBiblioteca.seccion1=miBiblioteca.seccion1||{};

miBiblioteca.seccion1={priopiedad:p1,metodo:function(){},};

miBiblioteca.seccion2=miBiblioteca.seccion2||{};

miBiblioteca.seccion2={priopiedad:p2,metodo:function(){},};

4.19ESPACIOSDENOMBRES(II)Secombinarloanteriorconmdulosautoejecutables:

miBiblioteca=miBiblioteca||{};

(function(namespace){

varpropiedadPrivada=p1;

namespace.propiedadPublica=p2;

varmetodoPrivado=function(){};

namespace.metodoPublico=function(){};

}(miBiblioteca));

5DOCUMENTOBJECTMODEL

5.1QUESDOM?AcrnimodeDocumentObjectModelEsunconjuntodeutilidadesespecficamentediseadasparamanipulardocumentosXML,yporextensindocumentosXHTMLyHTML.DOMtransformainternamenteelarchivoXMLenunaestructuramsfcildemanejarformadaporunajerarquadenodos.

5.2TIPOSDENODOSLosmsimportantesson:Document:representaelnodoraz.Element:representaelcontenidodefinidoporunpardeetiquetasdeaperturaycierreypuedetenertantonodoshijoscomoatributos.Attr:representaelatrributodeunelemento.Text:almacenaelcontenidodeltextoqueseencuentraentreunaetiquetadeaperturayunadecierre.

5.3RECORRERELDOMJavaScriptproporcionafuncionespararecorrerlosnodos:

getElementById(id)getElementsByName(name)getElementsByTagName(tagname)getElementsByClassName(className)getAttribute(attributeName)querySelector(selector)querySelectorAll(selector)

5.4MANIPULARELDOMJavaScriptproporcionafuncionesparalamanipulacindenodos:

createElement(tagName)createTextNode(text)createAttribute(attributeName)appendChild(node)insertBefore(newElement,targetElement)removeAttribute(attributename)removeChild(childreference)replaceChild(newChild,oldChild)

5.5PROPIEDADESNODOS(I)Losnodostienenalgunaspropiedadesmuytiles:

attributes[]classNameidinnerHTMLnodeNamenodeValuestyletabIndextagNametitle

5.6PROPIEDADESNODOS(II)Losnodostienenalgunaspropiedadesmuytiles:

childNodes[]firstChildlastChildpreviousSiblingnextSiblingownerDocumentparentNode

5.7JQUERYjQuerypuedesermuyutilenciertoscasos,peroenmuchosotrosesmatarmoscasacaonados.

6ENLACES

6.1GENERAL(ES)http://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5http://cevichejs.com/http://www.arkaitzgarro.com/javascript/http://www.etnassoft.com/category/javascript/

6.2GENERAL(EN)http://www.javascriptkit.com/http://javascript.info/http://www.howtocreate.co.uk/tutorials/javascript/

6.3ORIENTACINOBJETOS(ES)(I)http://www.programania.net/diseno-de-software/entendiendo-los-prototipos-en-javascript/http://www.programania.net/diseno-de-software/creacion-de-objetos-eficiente-en-javascript/http://blog.amatiasq.com/2012/01/javascript-conceptos-basicos-herencia-por-prototipos/

6.4ORIENTACINOBJETOS(ES)(II)http://albertovilches.com/profundizando-en-javascript-parte-1-funciones-para-todohttp://albertovilches.com/profundizando-en-javascript-parte-2-objetos-prototipos-herencia-y-namespaceshttp://www.arkaitzgarro.com/javascript/capitulo-9.htmlhttp://www.etnassoft.com/2011/04/15/concepto-de-herencia-prototipica-en-javascript/

6.5ORIENTACINOBJETOS(EN)http://www.codeproject.com/Articles/687093/Understanding-JavaScript-Object-Creation-Patternshttp://javascript.info/tutorial/object-oriented-programminghttp://www.howtocreate.co.uk/tutorials/javascript/objects

6.6TCNICASAVANZADAS(ES)(I)http://www.etnassoft.com/2011/03/14/funciones-autoejecutables-en-javascript/http://www.etnassoft.com/2012/01/12/el-valor-de-this-en-javascript-como-manejarlo-correctamente/https://developer.mozilla.org/es/docs/Web/JavaScript/Closureshttp://www.variablenotfound.com/2012/10/closures-en-javascript-entiendelos-de.html

6.7TCNICASAVANZADAS(ES)(II)http://www.webanalyst.es/espacios-de-nombres-en-javascript/http://www.etnassoft.com/2011/04/11/el-patron-de-modulo-en-javascript-en-profundidad/http://www.etnassoft.com/2011/04/18/ampliando-patron-modulo-javascript-submodulos/http://notasjs.blogspot.com.es/2012/04/el-patron-modulo-en-javascript.html

6.8DOM(ES)http://cevichejs.com/3-dom-cssom#domhttp://www.arkaitzgarro.com/javascript/capitulo-13.html

6.9DOM(EN)http://www.javascriptkit.com/domref/http://javascript.info/tutorial/dom

6.10ES6(ES)http://rlbisbe.net/2014/08/26/articulo-invitado-ecmascript-6-y-la-nueva-era-de-javascript-por-ckgrafico/http://carlosazaustre.es/blog/ecmascript-6-el-nuevo-estandar-de-javascript/

6.11ES6(EN)http://es6-features.org/http://kangax.github.io/compat-table/es5/