JavaScriptAvanzado

AdolfoSanzDeDiegoOctubre2015

1Acercade

1.1AutorAdolfoSanzDeDiegoBlog:Correo:GitHub:Twitter:Linkedin:SlideShare:

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

1.2LicenciaEsteobraestábajounalicencia:

Elcódigofuentedelosprogramasestánbajounalicencia:

CreativeCommonsReconocimiento-CompartirIgual3.0

GPL3.0

1.3EjemplosLasslidesyloscódigosdeejemplolospodéisencontraren:https://github.com/asanzdiego/curso-javascript-avanzado-2015

2JavaScript

2.1HistoriaLocreaBrendanEichenNetscapeen1995parahacerpáginaswebdinámicasApareceporprimeravezenNetscapeNavigator2.0Cadadíamásusado(clientesweb,videojuegos,windows8,servidoresweb,basesdedatos,etc.)

2.2EllenguajeOrientadoaobjetosBasadoenprototiposFuncionalDébilmentetipadoDinámico

3Orientaciónaobjetos

3.1¿Quéesunobjeto?Coleccióndepropiedades(paresnombre-valor).Todosonobjetos(lasfuncionestambién)exceptolosprimitivos:strings,números,booleans,nulloundefinedParasabersiesunobjetoounprimitivohacertypeofvariable

3.2Propiedades(I)Podemosaccederdirectamenteocomosifueseuncontenedor:objeto.nombre===objeto[nombre]//true

3.3Propiedades(II)Podemoscrearlasydestruirlasentiempodeejecuciónvarobjeto={};objeto.nuevaPropiedad=1;//añadirdeleteobjeto.nuevaPropiedad;//eliminar

3.4ObjetoiniciadorPodemoscrearunobjetoasí:

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

3.5FunciónconstructoraOconunafunciónconstructorayunnew.

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<=8Object.getPrototypeOf(objeto);

//NoesestandaryfallaenIEobjeto.__proto__;

3.8Eficiencia(I)Siqueremosquenuestrocódigoseejecuteunasolavezyqueprepareenmemoriatodolonecesarioparagenerarobjetos,lamejoropciónesusarunafunciónconstructorasoloconelestadodeunanuevainstancia,yelresto(losmétodos)añadirlosalprototipo.

3.9Eficiencia(II)Ejemplo:

functionConstructorA(p1){this.p1=p1;}

//losmétodoslosponenmosenelprototipoConstructorA.prototype.metodo1=function(){console.log(this.p1);};

3.10HerenciaEjemplo:

functionConstructorA(p1){this.p1=p1;}

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

//HacemosqueBherededeA//PrototipodeFunciónConstructoraBapuntaal//PrototipodeFunciónConstructoraAConstructorB.prototype=Object.create(ConstructorA.prototype);

3.11Cadenadeprototipos

Cuandoseinvocaunallamadaaunapropiedad,JavaScriptprimerobuscaenelpropioobjeto,ysinoloencuentrabuscaensuprototipo,ysinoenelprototipodelprototipo,asíhastaelprototipodeObjectqueesnull.

3.12Cadenadeprototiposdelainstancia

Enelejemploanterior:instanciaB.__proto__==ConstructorB.prototype//trueinstanciaB.__proto__.__proto__==ConstructorA.prototype//trueinstanciaB.__proto__.__proto__.__proto__==Object.prototype//trueinstanciaB.__proto__.__proto__.__proto__.__proto__==null//true

3.13Cadenadeprototiposdelafunción

constructoraEnelejemploanterior:

expect(ConstructorB.__proto__).toEqual(Function.prototype);expect(ConstructorB.__proto__.__proto__).toEqual(Object.prototype);expect(ConstructorB.__proto__.__proto__.__proto__).toEqual(null);

3.14Esquemaprototipos

Esquemaprototipos

3.15OperadorinstanceofLaexpresióninstanciaBinstanceofConstructorAdevolverátrue,sielprototipodelaFunciónConstructorA,seencuentraenlacadenadeprototiposdelainstanciaB.Enelejemploanterior:

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

3.16ExtensiónConlosprototipospodemosextenderlafuncionalidaddelpropiolenguaje.Ejemplo:

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

"Adolfo".hola();//"HolaAdolfo"

3.17Propiedadesymétodosestáticos(I)

Loquesedefinedentrodelafunciónconstructoravaaserpropiodelainstancia.Perocomohemosdicho,enJavaScript,unafunciónesunobjeto,alquepodemosañadirtantoatributoscomofunciones.Añadiendoatributosyfuncionesalafunciónconstructoraobtenemospropiedadesymétodosestáticos.

3.18Propiedadesymétodosestáticos(II)

Ejemplo:functionConstructorA(){

ConstructorA.propiedadEstatica="propiedadestática";}

ConstructorA.metodoEstatico=function(){console.log("métodoestático");}

3.19Propiedadesymétodosprivados(I)

Lavisibilidaddeobjetosdependedelcontexto.LoscontextosenJavaScriptsonbloquesdecódigoentredos{}yengeneral,desdeunodeellos,solotienesaccesoaloqueenélsedefinayaloquesedefinaenotroscontextosquecontenganaltuyo.

3.20Propiedadesymétodosprivados(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.21PolimorfismoPoderllamaramétodossintácticamenteigualesdeobjetosdetiposdiferentes.Estoseconsiguemedianteherencia.

4Técnicasavanzadas

4.1FuncionesSonobjetosconsuspropiedades.Sepuedenpasarcomoparámetrosaotrasfunciones.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:callyapplyqueenloúnicoquesediferencianesenlallamada.fn.call(thisArg[,arg1[,arg2[...]]])

fn.apply(thisArg[,arglist])

4.4Númerovariabledeargumentos

LasfuncionesenJavaScriptaunquetenganespecificadounnúmerodeargumentosdeentrada,puedenrecibirmásomenosargumentosyesválido.

4.5ArgumentsEsunobjetoquecontienelosparámetrosdelafunción.functionechoArgs(){console.log(arguments[0]);//Adolfoconsole.log(arguments[1]);//Sanz}echoArgs("Adolfo","Sanz");

4.6Declaracióndefunciones

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

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

4.7Transfiriendofuncionesaotras

funcionesHemosdichoquelasfuncionessonobjetos,asíquesepuedenpasarcomoparámetros.functionsaluda(){console.log("Hola")}functionejecuta(func){func()}ejecuta(saluda);

4.8Funcionesanónimas(I)

Hemosdichoquelasfuncionessepuedendeclarar.Perotambiénpodemosnodeclararlasydejarlascomoanónimas.

4.9Funcionesanónimas(II)

Unafunciónanónimaasídeclaradanosepodríaejecutar.function(nombre){console.log("Hola"+nombre);}

4.10Funcionesanónimas(III)

Perounafunciónpuededevolverunafunciónanónima.functionsaludador(nombre){returnfunction(){console.log("Hola"+nombre);}}

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

4.11Funcionesautoejecutables

Podemosautoejecutarfuncionesanónimas.(function(nombre){console.log("Hola"+nombre);})("mundo")

4.12Clousures(I)Unclosurecombinaunafunciónyelentornoenquesecreó.functioncreaSumador(x){returnfunction(y){returnx+y;};}

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

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

4.13Clousures(II)Enunaclosureslafuncióninternaalmacenaunareferenciaalúltimovalordelavariableestablecidocuandolafunciónexternaterminadeejecutarse.

4.14ElpatrónModuloSetratadeunafunciónqueactúacomocontenedorparauncontextodeejecución.miModulo=(function(){

varpropiedadPrivada;

functionmetodoPrivado(){};

//APIpublicareturn{metodoPublico1:function(){},

metodoPublico2:function(){}}}());

4.15Eficiencia(I)Siseejecutadesdeelnavegador,sesuelepasarcomoparámetroelobjetowindowparamejorarelrendimiento.Asícadavezquelonecesitemoselintérpreteloutilizarádirectameteenlugardebuscarloremontandoniveles.Ytambiénsesuelepasarelparámetroundefined,paraevitarloserroresquepuedendarsesilapalabrareservadahasidoreescritaenalgunapartedelcódigoysuvalornocorrespondaconelesperado.

4.16Eficiencia(II)miModulo=(function(window,undefined){

//Elcódigovaaquí

})(window);

4.17ElpatrónModuloRevelado(I)

ElproblemadelpatrónModuloespasarunmétododeprivadoapúblicooviceversa.Poresemotivoloquequesesuelehaceresdefinirtodoenelcuerpo,yluegoreferenciarsololospúblicosenelbloquereturn.

4.18ElpatrónModuloRevelado(II)

miModulo=(function(){

functionmetodoA(){};

functionmetodoB(){};

functionmetodoC(){};

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

4.19Espaciosdenombres(I)

Parasimularespaciosdenombres,enJavaScriptseanidanobjetos.miBiblioteca=miBiblioteca||{};

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

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

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

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

4.20Espaciosdenombres(II)

Sepuedecombinarloanteriorconmódulosautoejecutables:

miBiblioteca=miBiblioteca||{};

(function(namespace){

varpropiedadPrivada=p1;

namespace.propiedadPublica=p2;

varmetodoPrivado=function(){};

namespace.metodoPublico=function(){};

}(miBiblioteca));

5DocumentObjectModel

5.1¿QuéesDOM?AcrónimodeDocumentObjectModelEsunconjuntodeutilidadesespecíficamentediseñadasparamanipulardocumentosXML,yporextensióndocumentosXHTMLyHTML.DOMtransformainternamenteelarchivoXMLenunaestructuramásfácildemanejarformadaporunajerarquíadenodos.

5.2TiposdenodosLosmásimportantesson:Document:representaelnodoraíz.Element:representaelcontenidodefinidoporunpardeetiquetasdeaperturaycierreypuedetenertantonodoshijoscomoatributos.Attr:representaelatrributodeunelemento.Text:almacenaelcontenidodeltextoqueseencuentraentreunaetiquetadeaperturayunadecierre.

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

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

5.5PropiedadesNodos(I)Losnodostienenalgunaspropiedadesmuyútiles:attributes[]classNameidinnerHTMLnodeNamenodeValuestyletabIndextagNametitle

5.6PropiedadesNodos(II)Losnodostienenalgunaspropiedadesmuyútiles:childNodes[]firstChildlastChildpreviousSiblingnextSiblingownerDocumentparentNode

6LibreríasyFrameworks

6.1jQuery:libreriaquereducecódigo("writeless,do

more").jQuery

//VanillaJavaScriptvarelem=document.getElementById("miElemento");

//jQueryvarelem=$("#miElemento");

6.2jQueryUI&Mobile:diseñointerfacesgráficas.

:versiónadaptadaparamóviles(eventosytamaño).

jQueryUIjQueryMobile

6.3FrameworksCSSy .

Fácilmaquetación,sistemarejilla,clasesCSS,temas,etc.

Bootstrap Foundation

6.4MVCenelfront:ligeroyflexible.

:"ConventionoverConfiguration",muypopularentredesarrolladores .

extiendeetiquetasHML(g-app,ng-controller,ng-model,ng-view),detrásestáGoogle,tienegranpopularidad,abruptacurvadeaprendizaje.

BackboneJSEmberJS

RubyonRailsAngularJS

6.5NodeJSpermiteejecutarJSfueradelnavegador.

Vieneconsupropiogestordepaquetes:NodeJS

npm

6.6Automatizacióndetareas

:máspopularidadymásplugins.:másrápidotantoalescribir("Codeover

Configure")comoalejecutar(streams).

GruntJSGulpJS

6.7Gestióndedependencias

:paraelladocliente.PuedetrabajarconrepositoriosGit.

:permiteescribirmóduloscomoenycompilarlosparaquesepuedanusaren

elnavegador.:lasdependenciassecargandeforma

asíncronaysolocuandosenecesitam.:esunempaquetadordemódulos

Bower

BrowserifyNodeJS

RequeriJS

WebPack

6.8Aplicacionesdeescritoriomultiplataforma

,ysufork :losmásantiguos,unpocoabandonados.

:opciónmáspopularymadurahoyendía.:creadaparael :

estácreciendoenpopularidad.

AppJS DeskShell

NW.jsElectron editorAtomdeGitHub

6.9Aplicacionesmóvileshíbridas

:unadelosprimeros.Hoyendía,otrosframeworkssebasanenél.

:utilizaAngularJS,tieneunaCLI,muypopular.:reciénliberadoporfacebook.

cordova

ionicReactNative

6.10WebComponentsesunaespecificacióndelaW3C

parapermitircrearcomponentesyreutilizarlos.:proyectodeGoogleparapoderempezar

ausarlosWebComponentsentodoslosnavegadores.

WebComponents

polymer

6.11Otros:libreríahechoporFacebookparacrear

interfacesqueserenderizanmuyrápido,yaseaenclienteoservidor.

:frameworkhechoporFacebookqueutilizaReact.

:esunaplataformaquepermitedesarrollaraplicacionesreal-timeconJSIsomófico(seejecutaenfrontyback)

React

Flux

Meteor

7Eventos

7.1ElpatrónPubSub(I)varEventBus={topics:{},

subscribe:function(topic,listener){if(!this.topics[topic])this.topics[topic]=[];this.topics[topic].push(listener);},

publish:function(topic,data){if(!this.topics[topic]||this.topics[topic].length<1)return;this.topics[topic].forEach(function(listener){listener(data||{});});}};

7.2ElpatrónPubSub(II)EventBus.subscribe('foo',alert);EventBus.publish('foo','HelloWorld!');

7.3ElpatrónPubSub(III)varMailer=function(){EventBus.subscribe('order/new',this.sendPurchaseEmail);};

Mailer.prototype={sendPurchaseEmail:function(userEmail){console.log("Sentemailto"+userEmail);}};

7.4ElpatrónPubSub(IV)varOrder=function(params){this.params=params;};

Order.prototype={saveOrder:function(){EventBus.publish('order/new',this.params.userEmail);}};

7.5ElpatrónPubSub(V)varmailer=newMailer();varorder=newOrder({userEmail:'john@gmail.com'});order.saveOrder();"Sentemailtojohn@gmail.com"

7.6Principaleseventos(I)Evento Descripciónonblur Unelementopierdeelfocoonchange Unelementohasidomodificadoonclick Pulsarysoltarelratónondblclick Pulsardosvecesseguidasconelratón

7.7Principaleseventos(II)Evento Descripciónonfocus Unelementoobtieneelfocoonkeydown Pulsarunateclaynosoltarlaonkeypress Pulsarunateclaonkeyup Soltarunateclapulsadaonload Páginacargadacompletamente

7.8Principaleseventos(III)

Evento Descripciónonmousedown Pulsarunbotóndelratónyno

soltarloonmousemove Moverelratónonmouseout Elratón"sale"delelementoonmouseover Elratón"entra"enelelementoonmouseup Soltarelbotóndelratón

7.9Principaleseventos(IV)

Evento Descripciónonreset Inicializarelformularioonresize Modificareltamañodelaventanaonselect Seleccionaruntextoonsubmit Enviarelformularioonunload Seabandonalapágina

7.10SuscripciónParaañadiroeliminarunListenerdeuneventoaunelemento:varwindowOnLoad=function(e){console.log('window:load',e);};

window.addEventListener('load',windowOnLoad);

window.removeEventListener('load',windowOnLoad);

7.11Eventospersonalizados(I)Podemoscreareventospersonalizados:

varevent=newEvent('build');

elem.addEventListener('build',function(e){...},false);

7.12Eventospersonalizados(II)

Podemoscreareventospersonalizadoscondatos:varevent=newCustomEvent('build',{'detail':detail});

elem.addEventListener('build',function(e){log('Thetimeis:'+e.detail);},false);

7.13DispararuneventoPodemosdisparareventos:

functionsimulateClick(){varevent=newMouseEvent('click');varelement=document.getElementById('id');element.dispatchEvent(event);}

7.14Propagación(I)12||/\+-------------||------------||-------------+|DIV1||||||+---------||------------||---------+|||DIV2||||||||+-----||------------||-----+|||||A\/|||||||+----------------------------+|||+------------------------------------+||FASEDEFASEDE||CAPTURABURBUJA||DEEVENTOSDEEVENTOS|+--------------------------------------------+

7.15Propagación(II)//enfasedeCAPTURAaddEventListener("eventName",callback,true);

//enfasedeBURBUJAaddEventListener("eventName",callback,false);//pordefecto

7.16Propagación(III)//detienelapropagacióndeleventoevent.stopPropagation();

//eliminalasaccionespordefecto(ejemplo:abrirenlace)event.preventDefault();

8WebSockets

8.1¿QuésonlosWebSockets?

Nospermitencomunicaciónbidireccionalentreclienteyservidor.

8.2Socket.IOLibreríaclienteyservidor(NodeJS)parautilizarWebSockets:SimplificalaAPI.Permiteenvíarnosólotexto.Permitecreareventospropios.PermiteutilizarnavegadoressinsoportedeWebSockets.

9AJAX

9.1¿QuéesAJAX?AcrónimodeAsynchronousJavaScriptAndXML.TécnicaparacrearaplicacioneswebinteractivasoRIA(RichInternetApplications).Estasaplicacionesseejecutanenelcliente,esdecir,enelnavegadordelosusuarios.Mientrassemantienelacomunicaciónasíncronaconelservidorensegundoplano.Deestaformaesposiblerealizarcambiossobrelaspáginassinnecesidadderecargarlas.

9.2TecnologíasAJAX

AJAXnoesunatecnologíaensímisma,enrealidad,setratadevariastecnologíasindependientesqueseunendeformasnuevasysorprendentes.LastecnologíasqueformanAJAXson:XHTMLyCSS,comoestándaresdepresentación.DOM,paralamanipulacióndinámicadelapresentación.XML,JSONyotros,paralalamanipulacióndeinformación.XMLHttpRequest,paraelintercambioasíncronodeinformación.JavaScript,paraunirtodaslasdemástecnologías.

9.3¿QuéeselXMLHttpRequest?

ElintercambiodedatosAJAXentreclienteyservidorsehacemedianteelobjetoXMLHttpRequest,disponibleenlosnavegadoresactuales.NoesnecesarioqueelcontenidoestéformateadoenXML.Sumanejopuedellegarasercomplejo,aunquelibreríascomojQueryfacilitanenormementesuuso.

9.4Ejemplovarhttp_request=newXMLHttpRequest();varurl="http://example.net/jsondata.php";

//DescargalosdatosJSONdelservidor.http_request.onreadystatechange=handle_json;http_request.open("GET",url,true);http_request.send(null);

functionhandle_json(){if(http_request.status==200){varjson_data=http_request.responseText;varthe_object=eval("("+json_data+")");}else{alert("OcurriounproblemaconlaURL.");}}

10JSON

10.1¿QuéesJSON?AcrónimodeJavaScriptObjectNotation.EsunsubconjuntodelanotaciónliteraldeobjetosdeJavaScript.Sirvecomoformatoligeroparaelintercambiodedatos.Susimplicidadhageneralizadosuuso,especialmentecomoalternativaaXMLenAJAX.EnJavaScript,untextoJSONsepuedeanalizarfácilmenteusandolafuncióneval().

10.2ParsemiObjeto=eval('('+json_datos+')');

Evalesmuyrápido,perocomocompilayejecutacualquiercódigoJavaScript,lasconsideracionesdeseguridadrecomiendannousarlo.Lorecomendableusarlaslibreríasde :JSON.orgJSONinJavaScript-ExplanationJSONinJavaScript-Downloads

10.3Ejemplo{curso:"AJAXyjQuery",profesor:"Adolfo",participantes:[{nombre:"Isabel",edad:35},{nombre:"Alba",edad:15},{nombre:"Laura",edad:10}]}

10.4JSONPPorseguridadXMLHttpRequestsólopuederealizarpeticionesalmismodominio.JSONPenvuelveelJSONenunafuncióndefinidaporelcliente.EstonospermitehacerpeticionesGET(sóloGET)adominiosdistintos.

10.5CORS(I)ProtocoloCross-OriginResourceSharing(Comparticiónderecursosdedistintosorígenes).Realizarpeticionesaotrosdominiossiempreycuandoeldominiodedestinoestédeacuerdoenrecibirpeticionesdeldominiodeorigen.Tantonavegadorcomoservidortienenqueimplementarelprotocolo.

10.6CORS(II)Desdeelservidor,seenvíaencabecera:

Access-Control-Allow-Origin:http://dominio-permitido.com

11APIsREST

11.1¿QuéesunAPIREST?

REST(RepresentationalStateTransfer)esunatécnicadearquitecturasoftwareparasistemashipermediadistribuidoscomolaWorldWideWeb.Esdecir,unaURL(UniformResourceLocator)representaunrecursoalquesepuedeaccederomodificarmediantelosmétodosdelprotocoloHTTP(POST,GET,PUT,DELETE).

11.2¿PorquéREST?Esmássencillo(tantolaAPIcomolaimplementación).Esmásrápido(peticionesmásligerasquesepuedecachear).Esmultiformato(HTML,XML,JSON,etc.).SecomplementamuybienconAJAX.

11.3EjemploAPIGETahttp://myhost.com/personDevuelvetodaslaspersonas

POSTahttp://myhost.com/personCrearunanuevapersona

GETahttp://myhost.com/person/123Devuelvelapersonaconid=123

PUTahttp://myhost.com/person/123Actualizalapersonaconid=123

DELETEahttp://myhost.com/person/123Borralapersonaconid=123

11.4ErroresHTTP200OK201Created202Accepted301MovedPermanently400BadRequest401Unauthorised402PaymentRequired403Forbidden404NotFound405MethodNotAllowed500InternalServerError501NotImplemented

12Gestióndedependencias

12.1AMDDefinicióndeMódulosAsíncronos(AMD)Laimplementaciónmáspopulardeesteestándares .Sintaxisunpococomplicada.Permitelacargademódulosdeformaasíncrona.Seusaprincipalmenteennavegadores.

RequireJS

12.2RequireJS(I)index.html

<!DOCTYPEhtml><html><head><title>Page1</title><scriptdata-main="js/index"src="js/lib/require.js"></script></head><body><h1>HolaMundo</h1></body></html>

12.3RequireJS(II)js/index.js

requirejs(['./common'],function(common){requirejs(['app/main']);});

12.4RequireJS(III)app/main.js

define(function(require){var$=require('jquery');varpersona=require('./persona');

$('h1').html("Holarequery.js");

varp=newpersona("Adolfo",30);p.saludar();});

12.5RequireJS(IV)app/persona.js

define(function(){

varPersona=function(nombre,edad){

this.nombre=nombre;

Persona.prototype.saludar=function(){alert("Hola,minombrees"+this.nombre);};}

returnPersona;});

12.6CommonJSLaimplementaciónusadaen y .Sintaxissencilla.Cargalosmódulosdeformasíncrona.Seusaprincipalmenteenelservidor.

NodeJS Browserify

12.7Browserify(I)Instalarbrowserify

npminstall-gbrowserify

12.8Browserify(II)Instalardependenciasdepackage.json

npminstall

12.9Browserify(III)package.json

{"name":"browserify-example","version":"1.0.0","dependencies":{"jquery":"^2.1.3"}}

12.10Browserify(IV)Compilarlasdependenciasabundle.js

browserifyjs/main.js-ojs/bundle.js

12.11Browserify(V)index.html

<!doctypehtml><html><head><title>BrowserifyPlayground</title></head><body><h1>HolaMundo</h1><scriptsrc="js/bundle.js"></script></body></html>

12.12Browserify(VI)js/app/main.js

var$=require('jquery');varpersona=require('./persona');

$('h1').html('HolaBrowserify');

varp=newpersona("Adolfo",30);p.saludar();

12.13Browserify(VII)js/app/persona.js

varPersona=function(nombre,edad){

this.nombre=nombre;

Persona.prototype.saludar=function(){alert("Hola,minombrees"+this.nombre);};}

module.exports=Persona;

12.14ECMAScript6Cojelomejordelos2enfoques:SimilitudesconCommonJS:sintaxissencilla.SimilitudesconAMD:soporteparacargaasíncrona.

13ES6

13.1ComousarlohoynospermiteutilizarES6hoyendía.Babel

13.2FunciónArrow(I)//ES5vardata=[{...},{...},{...},...];data.forEach(function(elem){console.log(elem)});

13.3FunciónArrow(I)//ES6vardata=[{...},{...},{...},...];data.forEach(elem=>{console.log(elem);});

13.4FunciónArrow(III)//ES5varmiFuncion=function(num1,num2){returnnum1+num2;}

13.5FunciónArrow(IV)//ES6varmiFuncion=(num1,num2)=>num1+num2;

13.6This(I)//ES5varobjEJ5={data:["Adolfo","Isabel","Alba"],duplicar:function(){varthat=this;this.data.forEach(function(elem){that.data.push(elem);});returnthis.data;}}

13.7This(II)//ES6varobjEJ6={data:["Adolfo","Isabel","Alba"],duplicar:function(){this.data.forEach((elem)=>{this.data.push(elem);});returnthis.data;}}

13.8DefinicióndeClases(I)

//ES5varShape=function(id,x,y){this.id=id;this.move(x,y);};Shape.prototype.move=function(x,y){this.x=x;this.y=y;};

13.9DefinicióndeClases(II)

//ES6classShape{constructor(id,x,y){this.id=idthis.move(x,y)}move(x,y){this.x=xthis.y=y}}

13.10HerenciadeClases(I)

//ES5varRectangle=function(id,x,y,width,height){Shape.call(this,id,x,y);this.width=width;this.height=height;};Rectangle.prototype=Object.create(Shape.prototype);Rectangle.prototype.constructor=Rectangle;

varCircle=function(id,x,y,radius){Shape.call(this,id,x,y);this.radius=radius;};Circle.prototype=Object.create(Shape.prototype);Circle.prototype.constructor=Circle;

13.11HerenciadeClases(II)

//ES6classRectangleextendsShape{constructor(id,x,y,width,height){super(id,x,y)this.width=widththis.height=height}}classCircleextendsShape{constructor(id,x,y,radius){super(id,x,y)this.radius=radius}}

13.12let(I)//ES5(function(){console.log(x);//xnoestádefinidaaún.if(true){varx="holamundo";}console.log(x);//Imprime"holamundo",porque"var"//hacequeseaglobalalafunción;})();

13.13let(II)//ES6(function(){if(true){letx="holamundo";}console.log(x);//Daerror,porque"x"hasidodefinidadentrodel"if"})();

13.14Scopes(I)//ES5(function(){varfoo=function(){return1;}foo()===1;(function(){varfoo=function(){return2;}foo()===2;})();foo()===1;})();

13.15Scopes(II)//ES6{functionfoo(){return1}foo()===1{functionfoo(){return2}foo()===2}foo()===1}

13.16const(I)//ES6(function(){constPI;PI=3.15;//ERROR,porquehadeasignarseunvalorenladeclaración})();

13.17const(II)//ES6(function(){constPI=3.15;PI=3.14159;//ERRORdenuevo,porqueesdesólo-lectura})();

13.18TemplateStrings(I)//ES6letnombre1="JavaScript";letnombre2="awesome";console.log(`Sóloquierodecirque${nombre1}is${nombre2}`);//SoloquierodecirqueJavaScriptisawesome

13.19TemplateStrings(II)

//ES5varsaludo="ola"+"que"+"ase";

13.20TemplateStrings(III)

//ES6varsaludo=`olaquease`;

13.21Destructuring(I)//ES6var[a,b]=["hola","mundo"];console.log(a);//"hola"console.log(b);//"mundo"

13.22Destructuring(II)//ES6varobj={nombre:"Adolfo",apellido:"Sanz"};var{nombre,apellido}=obj;console.log(nombre);//"Adolfo"console.log(apellido);//"Sanz"

13.23Destructuring(III)//ES6varfoo=function(){return["180","78"];};var[estatura,peso]=foo();console.log(estatura);//180console.log(peso);//78

13.24Parámetrosconnombre(I)

//ES5functionf(arg){varname=arg[0];varval=arg[1];console.log(name,val);};functiong(arg){varn=arg.name;varv=arg.val;console.log(n,v);};functionh(arg){varname=arg.name;varval=arg.val;console.log(name,val);};f(["bar",42]);g({name:"foo",val:7});h({name:"bar",val:42});

13.25Parámetrosconnombre(II)

//ES6functionf([name,val]){console.log(name,val)}functiong({name:n,val:v}){console.log(n,v)}functionh({name,val}){console.log(name,val)}f(["bar",42])g({name:"foo",val:7})h({name:"bar",val:42})

13.26Restoparámetros(I)

//ES5functionf(x,y){vara=Array.prototype.slice.call(arguments,2);return(x+y)*a.length;};f(1,2,"hello",true,7)===9;

13.27Restoparámetros(II)

//ES6functionf(x,y,...a){return(x+y)*a.length}f(1,2,"hello",true,7)===9

13.28Valorespordefecto(I)

//ES5function(valor){valor=valor||"foo";}

13.29Valorespordefecto(I)

//ES6function(valor="foo"){...};

13.30Exportarmódulos//ES6

//lib/math.jsexportfunctionsum(x,y){returnx+y}exportfunctiondiv(x,y){returnx/y}exportvarpi=3.141593

13.31Importarmódulos//ES6

//someApp.jsimport*asmathfrom"lib/math"console.log("2π="+math.sum(math.pi,math.pi))

//otherApp.jsimport{sum,pi}from"lib/math"console.log("2π="+sum(pi,pi))

13.32Generadores//ES6function*soyUnGenerador(i){yieldi+1;yieldi+2;yieldi+3;}

vargen=soyUnGenerador(1);console.log(gen.next());//Object{value:2,done:false}console.log(gen.next());//Object{value:3,done:false}console.log(gen.next());//Object{value:4,done:false}console.log(gen.next());//Object{value:undefined,done:true}

13.33Set//ES6lets=newSet()s.add("hello").add("goodbye").add("hello")s.size===2s.has("hello")===truefor(letkeyofs.values()){//insertionorderconsole.log(key)}

13.34Map//ES6letm=newMap()m.set("hello",42)m.set(s,34)m.get(s)===34m.size===2for(let[key,val]ofm.entries()){console.log(key+"="+val)}

13.35NuevosmétodosenString

//ES6"hello".startsWith("ello",1)//true"hello".endsWith("hell",4)//true"hello".includes("ell")//true"hello".includes("ell",1)//true"hello".includes("ell",2)//false

13.36NuevosmétodosenNumber

//ES6Number.isNaN(42)===falseNumber.isNaN(NaN)===trueNumber.isSafeInteger(42)===trueNumber.isSafeInteger(9007199254740992)===false

13.37Proxies//ES6lettarget={foo:"Welcome,foo"}letproxy=newProxy(target,{get(receiver,name){returnnameinreceiver?receiver[name]:`Hello,${name}`}})proxy.foo==="Welcome,foo"proxy.world==="Hello,world"

13.38Internacionalization(I)

//ES6vari10nUSD=newIntl.NumberFormat("en-US",{style:"currency",currency:"USD"vari10nGBP=newIntl.NumberFormat("en-GB",{style:"currency",currency:"GBP"i10nUSD.format(100200300.40)==="$100,200,300.40"i10nGBP.format(100200300.40)==="£100,200,300.40"

13.39Internacionalization(II)

//ES6vari10nEN=newIntl.DateTimeFormat("en-US")vari10nDE=newIntl.DateTimeFormat("de-DE")i10nEN.format(newDate("2015-01-02"))==="1/2/2015"i10nDE.format(newDate("2015-01-02"))==="2.1.2015"

13.40Promesas(I)//ES6varpromise=newPromise(function(resolve,reject){

vartodoCorrecto=true;//ofalsedependiendodecomohaido

if(todoCorrecto){resolve("PromesaResuelta!");}else{reject("PromesaRechazada!");}});

13.41Promesas(II)//ES6

//llamamoselmetodo'then'delapromesa//con2callbacks(resolveyreject)promise.then(function(result){console.log(result);//"PromesaResuelta!"},function(err){console.log(err);//Error:"PromesaRechazada!"});

13.42Promesas(III)//ES6

//podemostambiénllamaral'then'conelcallback'resolve'//yluegoal'catch'conelcallback'reject'promise.then(function(result){console.log(result);//"PromesaResuelta!"}).catch(function(err){console.log(err);//Error:"PromesaRechazada!"});

13.43Promesas(IV)//ES6

Promise.all([promesa1,promesa2]).then(function(results){console.log(results);//cuandotodaslaspromesasterminen}).catch(function(err){console.log(err);//Error:"Errorenalgunapromesa!"});

13.44Promesas(V)//ES6

Promise.race([promesa1,promesa2]).then(function(firstResult){console.log(firstResult);//cuandoterminelaprimera}).catch(function(err){console.log(err);//Error:"Errorenalgunapromesa!"});

14Enlaces

14.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/

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

14.3OrientaciónObjetos(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/

14.4OrientaciónObjetos(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/

14.5OrientaciónObjetos(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

14.6Técnicasavanzadas(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

14.7Técnicasavanzadas(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

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

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

14.10Frameworks(ES)https://carlosazaustre.es/blog/frameworks-de-javascript/https://docs.google.com/drawings/d/1bhe9-kxhhGvWU0LsB7LlJfMurP3DGCIuUOmqEOklzaQ/edithttp://www.lostiemposcambian.com/blog/javascript/backbone-vs-angular-vs-ember/http://blog.koalite.com/2015/06/grunt-o-gulp-que-uso/

14.11Frameworks(EN)http://www.slideshare.net/deepusnath/javascript-frameworks-comparison-angular-knockout-ember-and-backbonehttp://stackshare.io/stackups/backbone-vs-emberjs-vs-angularjshttp://www.hongkiat.com/blog/gulp-vs-grunt/https://mattdesl.svbtle.com/browserify-vs-webpackhttp://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/http://devzum.com/2014/02/10-best-node-js-mvc-frameworks-for-javascript-developers/http://www.tivix.com/blog/nwjs-and-electronjs-web-technology-desktop/http://stackshare.io/stackups/phonegap-vs-ionic-vs-react-nativehttps://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options

14.12Eventos(ES)http://cevichejs.com/3-dom-cssom#eventoshttp://www.arkaitzgarro.com/javascript/capitulo-15.htmlhttp://codexexempla.org/curso/curso_4_3_e.php

14.13Eventos(EN)https://developer.mozilla.org/en-US/docs/Web/API/EventTargethttps://developer.mozilla.org/en-US/docs/Web/API/Eventhttp://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault

14.14WebSockets(ES)http://www.html5rocks.com/es/tutorials/websockets/basics/https://carlosazaustre.es/blog/websockets-como-utilizar-socket-io-en-tu-aplicacion-web/

14.15WebSockets(EN)https://davidwalsh.name/websockethttp://code.tutsplus.com/tutorials/start-using-html5-websockets-today--net-13270

14.16AJAX,JSON,REST(ES)

https://fernetjs.com/2012/09/jsonp-cors-y-como-los-soportamos-desde-nodejs/http://blog.koalite.com/2012/03/sopa-de-siglas-ajax-json-jsonp-y-cors/https://eamodeorubio.wordpress.com/category/webservices/rest/https://eamodeorubio.wordpress.com/category/webservices/rest/

14.17ES6(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/http://asanzdiego.blogspot.com.es/2015/06/principios-solid-con-ecmascript-6-el-nuevo-estandar-de-javascript.htmlhttp://www.cristalab.com/tutoriales/uso-de-modulos-en-javascript-con-ecmascript-6-c114342l/https://burabure.github.io/tut-ES6-promises-generators/

14.18ES6(EN)http://es6-features.org/http://kangax.github.io/compat-table/es5/http://www.2ality.com/2015/11/sequential-execution.htmlhttp://www.html5rocks.com/en/tutorials/es6/promises/http://www.datchley.name/es6-promises/