Aprendiendo javascript - carlos azaustre-freelibros PDF

Preview

Summary

Download Aprendiendo javascript - carlos azaustre-freelibros PDF

Description

AprendiendoJavaScript

TableofContents Introduction

0

Sobreéstelibro

1

HistoriadeJavaScript

2

Orígenes

2.1

Node.js

2.2

Tiposdevariables

3

Definición

3.1

Tipos

3.2

Operadores

4

Operadoresaritméticos

4.1

Operadortypeof

4.2

Operadoresbooleanos

4.3

Operadoreslógicos

4.4

Condicionales

5

Asignacióncondicional

5.1

SentenciaIF

5.2

SentenciaSWITCH

5.3

ClasesCoreyMódulosdeJavaScript

6

Object

6.1

Number

6.2

Array

6.3

String

6.4

Funciones

7

Parámetrospordefecto

7.1

Ámbitosdeunafunción

7.2

Clousures

7.3

Funcionescomoclases

7.4

2

AprendiendoJavaScript ClasesenECMAScript6

7.5 8

Bucles BucleWhile

8.1

BucleDo/While

8.2

BucleFor

8.3

BucleForEach

8.4

BucleForIn

8.5

JSON

9

AJAX

10

XMLHttpRequest

10.1

FetchenECMAScript6

10.2 11

Eventos Manejandoeventos

11.1

Propagacióndeeventos

11.2

PatrónPubSub

11.3

PatrónPubSubconDatos Websockets

11.3.1 11.4

Promesas

12

DOMDocumentObjectModel

13

¿QuétraenuevoECMAScript6?

14

Recapitulación

15

3

AprendiendoJavaScript

AprendiendoJavaScript Aprendelasbasesdellenguajewebmásdemandado.DesdecerohastaECMAScript6. Copyright©2015-2016CarlosAzaustreporlaobraylaedición. 1ªEdición:Abril2016 Versión1.2:19deAbrilde2016 Versión1.1:4deAbrilde2016 AgradecimientosespecialesaMiguelRuiz,LeonelContrerasyBorjaCampinaporsu feedbackyrevisiónparalaversión1.1deesteebook.Agradecimientosespecialesa ChuchurexyNelsonRojasporsusaportesparalarevisión1.2deesteeBook. Estelibroestáalaventaenhttp://leanpub.com/aprendiendojavascript,ytambiénen SellfyyAmazon. Publicadoporcarlosazaustre.es

SobreelAutor CarlosAzaustre(Madrid,1984)DesarrolladorWebyTechnicalBlogger.Amante deJavaScript.Convariosañosdeexperienciatantoenempresasprivadas, StartupsycomoFreelance.ActualmenteesCTOyCo-FundadordelaStartup Chefly IngenieroenTelemáticaporlaUniversidadCarlosIIIdeMadridyconestudiosde MásterenTecnologíasWebporlaUniversidaddeCastilla-LaMancha(España). Fueradelaeducaciónformal,esunamantedelautoaprendizajeatravésde internet.Puedesseguirsusartículosytutorialesensublogcarlosazaustre.es

Otroslibrospublicados DesarrolloWebágilconAngularJS.

Introduction

4

AprendiendoJavaScript

Aprendebuenasprácticaseneldesarrollodeaplicacioneswebconelframeworkde JavaScriptAngular.jsAutomatizatustareascotidianasenelFrontendconelgestor GulpJS Publicación:Agosto2014 Páginas:64 Lenguaje:EdicionesenEspañoleInglés Autores:CarlosAzaustre(EricaHuttnertraducciónenInglés) ComprarenSellfy ComprarenAmazon

InstantZurbFoundation4

Introduction

5

AprendiendoJavaScript GetupandrunninginaninstantwithZurbFoundation4Framework ISBN:9781782164029(Septiembre2013) Páginas:56 Lenguaje::Inglés Autores:JorgeArévaloyCarlosAzaustre ComprarenAmazon

Introduction

6

AprendiendoJavaScript

Sobreestelibro JavaScriptesellenguajedelaweb.Sinecesitasprogramarenunnavegadorweb, necesitasJavaScript.Bienesciertoquepuedesutilizarotroslenguajes,comoDart,pero elestándaresJavaScript. GraciasaéltenemosaplicacionescomoGmail,oTwitter,quesonfuertemente dinámicasyhacenquelaexperienciadeusoseamuchomejorqueantaño,cuandolas páginaswebteníanquerecargarsecadavezquerealizábamosunaacción. Esunlenguajemuydemandadoenlaindustriahoyendía,yaqueademásdeutilizarse enelnavegador,tambiénpuedeusarseenelladodelservidor(Node.js).Conlamultitud deframeworksqueexistenpuedencrearseSinglePageApplicationsqueemulanla experienciadeunaaplicaciónmóvilenelnavegador.Tambiénpuedencrearse aplicacioneshíbridasconherramientascomoIonicyCordova.¿Hasoídohablardel desarrollobasadoencomponentes?TesonaránentoncesPolymery/oReact.Con ReactNativepuedescrearaplicacionesnativasparaiOSyAndroidconúnicamente JavaScript.¿AplicacionesIsomórficas?HoyendíatodoesposibleconJavaScript. Sieslaprimeravezqueteincursasenelmundoweb,tepuederesultarabrumadorala cantidaddeherrmaientas,preprocesadores,frameworks,etc..Perosiempreque empezamos,cometemoselmismoerror.Aprendemoslaherramientaantesqueel lenguaje. Poresomeheanimadoaescribiresteebookqueestásleyendoahoramismo.Para enseñartedesdelasbaseshastalasmásrecientesnovedadesypatronesdediseño utilizandoJavaScriptpuro(TambiénllamadoVanillaJS).Unavezconoceslasbasesdel lenguaje,yapuedesadentrarteencualquierherramientadelmundoweb. RecientementefueaprobadoelestándarECMAScript6,lanuevaversióndeJavaScript (ActualmenteutilizábamoslaversiónECMAScript5.1)quetraemuchasnovedades.En esteebooknohequeridodejarlodeladoyhablodecualeselequivalenteencódigo entrelaversiónanteriorylapresente/futura. Esperoquedisfrutesdelebooktantocomoyolohehechoescribiéndoloparatiyte sirvaparatucarreraprofesional.Cualquiercosaquenecesitesmeencuentrasenmi blog: CarlosAzaustreBlog|WebDeveloper-TechnicalBlogger

Sobreéstelibro

7

AprendiendoJavaScript Yenlasredessociales: SíguemeenTwitter@carlosazaustre SíguemeenFacebook EstoyenInstragram@carlosazaustre TambiénenGoogle+con+CarlosAzaustre SnapeaconmigoenSnapchat:cazaustre Sinmás,tedejoconelebook.¡Disfrutayaprende!

Sobreéstelibro

8

AprendiendoJavaScript

BrevehistoriadeJavaScript Antesdeempezarconlasparticularidadesdellenguaje,esconvenienteconocerun pocodehistoria.DedóndevieneJavaScriptycómohacrecidosupopularidadenlos últimosaños.¡Prometoserrápidoypasarcuantoantesalcódigo!

Orígenes En1995,BrendanEich(ex-CEOdeMozilla)desarrollóloqueseríalaprimeraversión deJavaScriptparaelnavegadorNetscapeNavigator.Enaquelmomentosellamó MochaydespuésfuerenombradoaLiveScript.ElnombredeJavaScriptseledió debidoaqueNetscapeañadiócompatibilidadconJavaensunavegadoryerauna tecnologíamuypopularenaquelmomento.AdemásNetscapefueadquiridaporSun Microsystems,propietariadelamarcaJava.Estosuponequehoyendíahayauna pequeñaconfusiónymuchagenteconfundaJavaconJavaScriptoloconsidereuna extensióndellenguaje,peronoescierto,hayqueaclararqueJavayJavaScriptno tienennadaquever. En1997secreauncomité(llamadoTC39)paracrearunestándardeJavaScriptporla EuropeanComputerManufacturersAssociation,ECMA.Enesecomitésediseñael estándardelDOM,DocumentObjectModelpara,deestamanera,evitar incompatibilidadesentrelosnavegadores.Esapartirdeentoncescuandolos estándaresdeJavaScriptserigenporECMAScript.

HistoriadeJavaScript

9

AprendiendoJavaScript En1999seestandarizalaversión3deJavaScriptquesemantuvovigentehastahace relativamentepoco.Huboalgunosintentosdelanzarunaversión4,perolaque finalmenteseestandarizóysiguehastaelmomentoeslaversión5deECMAScript, aprobadaen2011. EnJuniode2013elborradordelaversión6sequedóparado,peroendiciembrede 2014finalmentefueaprobadoyseestandarizóenJuliode2015.

JavaScriptfuediseñadoparaañadirefectosyanimacionesalossitiosweb,perohaido evolucionandomuchololargodelosaños,convirtiéndoseenunlenguaje multipropósito.Esapartirde2005,conlallegadadeGMailysuusodelatecnología AJAX,AsynchronousJavaScriptAndXML(graciasalobjetoXMLHttpRequestcreado porMicrosoftparaInternetExplorer5.0),loquelanzósupopularidad.

Node.js En2009,RyanDahlcreóNode.js.NodeesunentornodeejecuciónparaJavaScripten elservidorapartirdelmotorV8derenderizadodeJavaScriptqueutilizaelnavegador ChromedeGoogle.Nodefacilitalacreacióndeaplicacionesdeservidoraltamente escalables.HoyendíaesmuypopularparaeldesarrollodeMicroservicios,APIs, aplicacioneswebFull-stack,isomórficas,etc...Sucomunidadesmuygrande,ysu sistemadepaquetesylibreriasNPM,NodePackageManager,(Aunquehoyendíaya nosoloenglobapaquetesdeNode,tambienparaJavaScriptdelladocliente)ha superadolos150.000módulos,conviertiéndoloenelmásgrandedetodospordelante deJava,Ruby,PHP,etc...

HistoriadeJavaScript

10

AprendiendoJavaScript

Fuente:ModuleCounts HoyendíaJavaScriptseutilizaenmuchossitios,Frontend,Backend,aplicaciones isomórficas,microcontroladores,InternetofThings,wearables,etc...Convirtiéndoleen ellenguajedeprogramacióndelpresente. Recientemente(22deMarzode2016),lawebStackoverflowpublicóuninformeapartir deunaencuestarealizadaalosdesarrolladoresusuariosdesuplataformadonde resultóqueJavaScriptesellenguajemásutilizadoenelmundo,nosólopor desarrolladoresdeFrontendsinotambiéndeBackend. TodaladocumentaciónyreferenciasobreJavaScriptsepuedeencontrarenelsitioweb dedesarrolladoresdeMozillaLink,muyrecomendabledevisitarcuandosetienen dudassobrecómoseusaoimplementaunafunciónuobjetodeterminado.

HistoriadeJavaScript

11

AprendiendoJavaScript

Tiposdevariables JavaScriptesunlenguajedébilmentetipado.Estoquieredecirquenoindicamosdequé tipoescadavariablequedeclaramos.Todaslasvariablesadmitentodoslostipos,y puedenserreescritas.EsunadelascosasbuenasymalasquetieneJavaScript.

Definición Lasvariablessonespaciosdememoriadondealmacenamostemporalmentedatos desdelosquepodemosaccederencualquiermomentodelaejecucióndenuestros programas.Tienenvariostiposyclasesqueveremosacontinuación. ParadefinirunavariableenJavaScript,utilizamoslapalabrareservada varyledamos unnombre,porejemplo: varmiDato;

Tambiénlepodemosasignarunvalorenlamismalíneaqueladeclaramos,por ejemplo,acontinuaciónalavariable datoleasignamoselvalor 5: vardato=5;

Opodemosprimerodeclararlavariableymásadelante,enotralínea,asignarleun valor: vardato; dato=5;

Debemosintentarquelosnombresdelasvariablesseanlomásdescriptivosposibles, demaneraqueconsololeerlossepamosquecontienenyasínuestrosdesarrollos seránmáságiles. Losnombresdelasvariablessiemprehandecomenzarporunaletra,elsímbolo $o _,nuncapuedencomenzarpornúmerosuotroscaracteresespeciales.JavaScript

tambiéndistingueentremayúsculasominúsculas,portantonoeslomismo miDato

Tiposdevariables

12

AprendiendoJavaScript que MiDatoo miDato,paraJavaScriptsonnombresdiferentesylastratarádemanera diferente.

Tipos JavaScripttiene4tiposprimitivosdedatosparaalmacenarenvariables.Estosson: number boolean string undefined

number Sirveparaalmacenarvaloresnuméricos.Sonutilizadosparacontar,hacercálculosy comparaciones.Estossonalgunosejemplos: varmiEntero=1; varmiDecimal=1.33;

boolean Estetipodedatoalmacenaunbitqueindica trueo false.Losvaloresbooleanosse utilizanparaindicarestados.Porejemplo,asignamosaunavariableelestado falseal iniciodeunaoperación,yalfinalizarlalocambiamosa true.Despuésrealizamosla comprobaciónnecesaria. varsi=true; varno=false;

string Lasvariablesdetipostringalmacenancaracteresopalabras.Sedelimitanentre comillassimplesodobles.Ejemplo: vardato="Estoesunstring"; varotroDato='Estoesotrostring';

Tiposdevariables

13

AprendiendoJavaScript

undefined Estetiposeutilizacuandoelvalordeunavariablenohasidodefinidoaúnonoexiste. Porejemplo: vardato;//suvaloresundefined vardato=undefined;

OtrotipodealmacenamientodedatosquetieneJavaScriptsonlosObjetos.En JavaScripttodoesunobjeto,hastalasfunciones.Todoheredadelaclase Object.Se puedendefinircomounaestructuradondeseagreganvalores.Dentrodelasclasesque heredande Objecttenemos Array, Date,etc...queveremosmásadelante.

Tiposdevariables

14

AprendiendoJavaScript

Operadores Operadoresaritméticos JavaScriptposeeoperadoresparatiposyobjetos.Estosoperadorespermitenformar expresiones.Lasmáscomunessonlasoperacionesaritméticas. Sumadenúmeros: 5+2 Resta: 5-2 Operacionesconparéntesis: (3+2)-5 Divisiones: 3/3 Multiplicaciones: 6*3 Eloperadorsuma +tambiénpuedeusarseparaconcatenarstringsdelasiguiente manera: "Hola"+"mundo"+"!"tendrácomoresultado "Holamundo!". JavaScripttambiénposeelosoperadorespostypreincrementoydecrementoque añadenunoorestanunoalavariablenuméricaenlaqueseaplican.Dependiendosi sonpreopost,lavariableesautoincrementadaodecrementadaantesodespuésdela sentencia.Veamosunejemplo: varx=1;//x=1 vary=++x;//x=2,y=2 varz=y+++x;//x=2,y=3,z=4

Comovemosenelejemplo,lasentencia y=++xloquehaceesincrementarx,que valía1ypasaatenerelvalor2,ylaasignación y=++xhaceque yvalgaloque x, esdecir2. Enlaúltimasentenciatenemosunpostincremento,estoloquehaceesprimeroevaluar laexpresiónydespuésrealizarelincremento.Esdecirenelmomentodelaasignación z=y+++x, yvale2y xtambién2,porlotanto zvale4,ydespuésdeesta

asignación yesincrementadapasandoatenerelvalor3.

Operador typeof

Operadores

15

AprendiendoJavaScript Eloperador typeofesunoperadorespecialquenospermiteconocereltipoquetiene lavariablesobrelaqueoperamos.Ejemplos: typeof5;//number typeoffalse;//boolean typeof"Carlos";//string typeofundefined;//undefined

Estoesmuyutilparaconocerenunmomentodadoquetipoestamosutilizandoy prevenirerroreseneldesarrollo.

Operadoresbooleanos Lostiposbooleanossólotienendosvaloresposibles: truey false(Verdaderoy Falso).Perodisponendevariosoperadoresquenospermitentransformarsuvalor.

Negación Esteoperadorconvierteunvalorbooleandoensuopuesto.Serepresentaconelsigno !.Siseutilizadosveces,nosdevuelveelvalororiginal.

!true=false !false=true !!true=true

IdentidadoIgualdad Eloperadordeigualdad(oigualdaddébil),serepresentacon ==yeldeidentidad(o igualdadestricta),con ===.Serecomiendaelusodeloperadordeidentidad(los3 iguales)frentealdeigualdaddébil,yaqueelcostedeprocesamientodeésteúltimoes muchomayorysusresultadosenocasionessonimpredecibles.Esunadelaspartes malasdeJavaScript,perosisetienecuidadonotieneporquédarnosningúnproblema. Ladesigualdadestrictaserepresentacon !==. true===true//true true===false//false true!==false//true true!==true//false

Operadores

16

AprendiendoJavaScript

Comparación Podemoscompararsidosvaloressonmenores,mayoresoigualesconlosoperadores decomparaciónrepresentadosporlossímbolos , =.Elresultadodela comparaciónnosdevuelve trueo falsedependiendodesiescorrectoono. 5>3//true 5=3//true 2...