Está en la página 1de 34

RepúblicaBolivarianadeVenezuela

MinisteriodelPoderPopularParalaDefensa

UniversidadNacionalExperimentalDelasFuerzasArmadasNacional

SanTome-Edo.Anzoategui

JAVASCRIPTJQUERYYAJAX

Tutor:

Autor:

Karinaleal

Cl26124152

Santome,4denoviembre

INTRODUCCION

Javascritesunlenguajedeprogramaciónqueseutilizaparacrearpáginawebdinámicaque incorporaefectoscómotextoqueapareceydesaparece,animacionesqueseactivanalprobar botonesyventanascomomensajesdeavisoalusuarioespecíficamentejavascritpesun lenguajedeprogramacióninterpretadoesoquieredecir,quenoesnecesariocompilarlos programasparaejecutarlo.Javascriptnosepuedeprobardirectamenteinteracciónondade navegadorconotrosprogramassinnecesidaddeprocesosintermedios.JavaScriptsediseñó conunasintaxissimilarallenguajedeprogramaciónC,aunqueadoptanombresy convencionesdellenguajedeprogramaciónJavasinembargoJavayJavaScriptnoestán relacionadosytienensemánticasypropósitosdiferentesseutilizaprincipalmenteenelladodel clienteimplementandocomopartedeunnavegadorwebpermitiendocrearinteracciónconel usuarioaunqueactualmenteesposibleejecutarJavascriptenelpropioservidor.JavaScriptes unaBaséacciónprogramacióninterpretado,dialectodelestándarECMAScriptsedefinecomo orientadoaobjetos,basadoenprototipos,imperactivo,débilmentetipadoydinámico.A principiosdelosañosConunasaplicacioneswebcadavezmáscomplejasyunavelocidadde navegacióntanlenta,surgiólanecesidaddeunlenguajedeprogramaciónqueseejecutaraen elnavegadordelusuario.Deestaforma,sielusuarionorellenabacorrectamenteunformulario, noselehacíaesperarmuchotiempohastaqueelservidorvolvieraamostrarelformulario indicandoloserroresexistentes. BrendanEich,unprogramadorquetrabajabaenNetscape,pensóquepodríasolucionareste problemaadaptandootrastecnologíasexistentes(comoScriptEase)alnavegadorNetscape

Navigator2.0,queibaalanzarseen1995.Inicialmente,Eichdenominóasulenguaje

LiveScript.Posteriormente,NetscapefirmóunaalianzaconSunMicrosystemsparaeldesarrollo delnuevolenguajedeprogramación.Además,justoantesdellanzamientoNetscapedecidió cambiarelnombreporeldeJavaScript.Larazóndelcambiodenombrefueexclusivamentepor marketing,yaqueJavaeralapalabrademodaenelmundoinformáticoydeInternetdela época.

LaprimeraversióndeJavaScriptfueuncompletoéxitoyNetscapeNavigator3.0ya

incorporabalasiguienteversióndellenguaje,laversión1.1.Almismotiempo,Microsoftlanzó

JScriptconsunavegadorInternetExplorer3.JScripteraunacopiadeJava

Paraevitarunaguerradetecnologías,Netscapedecidióquelomejorseríaestandarizarel

lenguajeJavaScript.Deestaforma,en1997seenviólaespecificaciónJavaScript1.1al

organismoECMAEuropeanComputerManufacturersAssociation).ECMAcreóelcomitéTC39

conelobjetivode"estandarizardeunlenguajedescriptmultiplataformaeindependientede

cualquierempresa".ElprimerestándarquecreóelcomitéTC39sedenominóECMA-262,enel

quesedefinióporprimeravezellenguajeECMAScript.Porestemotivo,algunosprogramadores

prefierenladenominaciónECMAScriptparareferirseallenguajeJavaScript.Dehecho,

JavaScriptnoesmásquelaimplementaciónquerealizólaempresaNetscapedelestándar

ECMAScript.

Javascriptnacióconlanecesidaddepermitiralosautoresdesitiowebcrearpáginasque

permitanintercambiarconlosusuarios,yaquesenecesitabacrearwebsdemayorcomplejidad.

ElHTMLsolopermitíacrearpáginasestáticasdondesepodíamostrartextosconestilos,pero

senecesitabainteractuarconlosusuarios.

QueesJavascript?

Javascriptesunlenguajeconmuchasposibilidades,utilizadoparacrearpequeñosprogramas

queluegosoninsertadosenunapáginawebyenprogramasmásgrandes,orientadosaobjetos

muchomáscomplejos.ConJavascriptpodemoscreardiferentesefectoseinteractuarcon

nuestrosusuarios.Estelenguajeposeevariascaracterísticas,entreellaspodemosmencionar

queesunlenguajebasadoenaccionesqueposeemenosrestricciones.Además,esun

lenguajequeutilizaWindowsysistemasX-Windows,granpartedelaprogramacióneneste

lenguajeestácentradaendescribirobjetos,escribirfuncionesquerespondanamovimientos

delmouse,aperturas,utilizacióndeteclas,cargasdepáginasentreotros.

EsnecesarioresaltarquehaydostiposdeJavaScript:porunladoestáelqueseejecutaenel

cliente,esteeselJavascriptpropiamentedicho,aunquetécnicamentesedenominaNavigator

JavaScript.PerotambiénexisteunJavascriptqueseejecutaenelservidor,esmásrecientey

sedenominaLiveWireJavascript

JAVASCRIPTENLAACTUALIDAD

JavaScript,esunodelosmáspotenteseimportanteslenguajesdeprogramaciónenla actualidad,portresenfoquesclaros:esútil,prácticoyestádisponibleencualquiernavegador

web.JavaScriptescreadoporBrendanEichyviolaluzenelaño1995conelnombrede

LiveScript,queluegofuenombradoJavaScript,nacecomounlenguajesencillodestinadoa

añadiralgunascaracterísticasinteractivasalaspáginasweb.Sinembargo,hoyendíaha

crecidodemaneraaceleradayesellenguajedeprogramaciónqueseutilizaencasitodoslos

sitioswebenelmundo.ElpoderdeJavaScriptestádisponibleprincipalmenteenladofrontend,

agregandomayorinteractividadalaweb,tambiénpuedesusarlaslibreríasyframeworkcomo:

jquery,angular,backbone,reactydemás,escritassobreJavaScript,yqueteayudanacrearuna

mejorexperienciadeusuarioennuestrossitiosweb.DeigualmaneraJavaScriptsepuede

utilizarenlosservidoresweb.Node.JSestumejoropciónparausarestelenguajedellado

servidor.Multiplataforma,yaquesepuedeutilizarenWindows,LinuxoMacoenelnavegador

detupreferencia,esImperativoyestructurado,medianteunconjuntodeinstruccionesindicaal

computadorquétareadeberealizar.prototipado,clasesparaelusodeherenciaOrientadoa

objetosyeventos,esInterpretado,nosecompilaparapoderejecutarse.Estassonlas

característicasquehacendejavascriptunlenguajequetepermitedesarrollaraplicaciones

gigantesypotentes,comoloes:googledoc,facebook,twittereinclusocapazdeejecutarseen

elservidorcomounservidorWebmuyrápido.

VariablesenJavascript

AunquetodaslasvariablesdeJavaScriptsecreandelamismaforma(mediantelapalabra

reservadavar),laformaenlaqueselesasignaunvalordependedeltipodevalorquesequiere

almacenar(números,textos,etc.)

Tiposdevariables

Numéricas

Seutilizanparaalmacenarvaloresnuméricosenteros(llamadosintegereninglés)odecimales

(llamadosfloateninglés).Enestecaso,elvalorseasignaindicandodirectamenteelnúmero

enteroodecimal.Losnúmerosdecimalesutilizanelcarácter.(punto)envezde,(coma)para

separarlaparteenteraylapartedecimal:

variva=16;

vartotal=234.65;//variabletipodecimal

//variabletipoentero

Cadenasdetexto

Seutilizanparaalmacenarcaracteres,palabrasy/ofrasesdetexto.Paraasignarelvalorala

variable,seencierraelvalorentrecomillasdoblesosimples,paradelimitarsucomienzoysu

final:

varmensaje="Bienvenidoanuestrositioweb";

varnombreProducto='ProductoABC';

varletraSeleccionada='c';

Enocasiones,eltextoquesealmacenaenlasvariablesnoestansencillo.Siporejemploel

propiotextocontienecomillassimplesodobles,laestrategiaquesesigueesladeencerrarel

textoconlascomillas(simplesodobles)quenoutiliceeltexto:

/*Elcontenidodetexto1tienecomillassimples,porloque

seencierraconcomillasdobles*/

vartexto1="Unafrasecon'comillassimples'dentro";

/*Elcontenidodetexto2tienecomillasdobles,porloque

seencierraconcomillassimples*/

vartexto2='Unafrasecon"comillasdobles"dentro';

Noobstante,aveceslascadenasdetextocontienentantocomillassimplescomodobles.

Además,existenotroscaracteresquesondifícilesdeincluirenunavariabledetexto(tabulador,

ENTER,etc.)Pararesolverestosproblemas,JavaScriptdefineunmecanismoparaincluirde

formasencillacaracteresespecialesyproblemáticosdentrodeunacadenadetexto.

Elmecanismoconsisteensustituirelcarácterproblemáticoporunacombinaciónsimplede

caracteres.Acontinuaciónsemuestralatabladeconversiónquesedebeutilizar:

Sisequiereincluir Sedebeincluir Unanuevalínea\n Untabulador\t Unacomillasimple \' Unacomilladoble \" Unabarrainclinada \\ Deestaforma,elejemploanteriorqueconteníacomillassimplesydoblesdentrodeltextose puederehacerdelasiguienteforma:

vartexto1='Unafrasecon\'comillassimples\'dentro';

vartexto2="Unafrasecon\"comillasdobles\"dentro";

Array

Enocasiones,alosarraysselesllamavectores,matriceseinclusoarreglos.Noobstante,el

términoarrayeselmásutilizadoyesunapalabracomúnmenteaceptadaenelentornodela

programación.

Unarrayesunacoleccióndevariables,quepuedensertodasdelmismotipoocadaunadeun

tipodiferente.Suutilidadsecomprendemejorconunejemplosencillo:siunaaplicación

necesitamanejarlosdíasdelasemana,sepodríancrearsietevariablesdetipotexto:

vardia1="Lunes";

vardia2="Martes";

vardia7="Domingo";

Aunqueelcódigoanteriornoesincorrecto,síqueespocoeficienteycomplicaenexcesola programación.Sienvezdelosdíasdelasemanasetuvieraqueguardarelnombredelos mesesdelaño,elnombredetodoslospaísesdelmundoolasmedicionesdiariasde

temperaturadelosúltimos100años,setendríanquecreardecenasocientosdevariables.

Enestetipodecasos,sepuedenagrupartodaslasvariablesrelacionadasenunacolecciónde

variablesoarray.Elejemploanteriorsepuederehacerdelasiguienteforma:

vardias=["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];

Ahora,unaúnicavariablellamadadiasalmacenatodoslosvaloresrelacionadosentresí,en

estecasolosdíasdelasemana.Paradefinirunarray,seutilizanloscaracteres[y]para

delimitarsucomienzoysufinalyseutilizaelcarácter,(coma)parasepararsuselementos:

varnombre_array=[valor1,valor2, ,valorN]; Unavezdefinidounarray,esmuysencilloaccederacadaunodesuselementos.Cada elementoseaccedeindicandosuposicióndentrodelarray.Laúnicacomplicación,quees responsabledemuchoserrorescuandoseempiezaaprogramar,esquelasposicionesdelos

elementosempiezanacontarseenel0ynoenel1:

vardiaSeleccionado=dias[0]; //diaSeleccionado="Lunes"

varotroDia=dias[5];

//otroDia="Sábado"

Enelejemploanterior,laprimerainstrucciónquiereobtenerelprimerelementodelarray.Para ello,seindicaelnombredelarrayyentrecorcheteslaposicióndelelementodentrodelarray.

Comosehacomentado,lasposicionesseempiezanacontarenel0,porloqueelprimer

elementoocupalaposición0yseaccedeaelmediantedias[0].

Elvalordias[5]hacereferenciaalelementoqueocupalasextaposicióndentrodelarraydias.

Comolasposicionesempiezanacontarseen0,laposición5hacereferenciaalsextoelemento,

enestecaso,elvalorSábado.

Booleanos

Lasvariablesdetipobooleanobooleanotambiénseconocenconelnombredevariablesde

tipológico.Aunqueparaentenderrealmentesuutilidadsedebeestudiarlaprogramación

avanzadaconJavaScriptdelsiguientecapítulo,sufuncionamientobásicoesmuysencillo.

Unavariabledetipobooleanalmacenauntipoespecialdevalorquesolamentepuedetomar

dosvalores:true(verdadero)ofalse(falso).Nosepuedeutilizarparaalmacenarnúmerosy

tampocopermiteguardarcadenasdetexto.

Losúnicosvaloresquepuedenalmacenarestasvariablessontrueyfalse,porloquenopueden

utilizarselosvaloresverdaderoyfalso.Acontinuaciónsemuestraunpardevariablesdetipo

booleano:

varclienteRegistrado=false;

varivaIncluido=true;

OperacionesenJavascript

JavaScripttienelossiguientestiposdeoperadores,estáseccióndescribedichosoperadoresy

contieneinformaciónsobreelordendelosmismos:

JavaScripttienelossiguientestiposdeoperadores.Estaseccióndescribedichosoperadoresy

contieneinformaciónsobreelordendelosmismos:

Operadoresdeasignación

Operadoresdecomparación

Operadoresaritméticos

Operadoresbitabit

Operadoreslógicos

Operadoresdecadenadecaracteres

Operadorcondicional(ternario)

Operadorcoma

Operadoresunarios

Operadoresrelacionales

JavaScripttieneoperadoresbinariosyunarios,yunoperadorternarioespecial,eloperador

condicional.Unoperadorbinariorequieredosoperandos,unoantesdeloperadoryotro

despuésdeeste.

operando1operadoroperando2

Porejemplo,3+4ox*y.

Unoperadorunariorequieresolamenteunoperando,yaseaantesodespuésdeloperador:

operandooperador

o

operadoroperando

Porejemplo,x++o++x

Operadoresdeasignación

Unoperadordeasignaciónasignaunvaloraloperandodelaizquierdaenfuncióndelvalordel

operandodeladerecha.Eloperadorbásicodeasignacióneseldeigual(=),queasignaelvalor

deloperandodeladerechaaloperandodelaizquierda.Porejemplo,x=y,estáasignandoel

valordeyax.

Tambiénexistenoperadorescompuestosdeasignaciónquesonlaformaabreviadadelas

operacionesdelasiguientetabla:

Operadoresdeasignación

NombreOperadorabreviadoSignificado

Operadoresdeasignaciónx=y x=y Asignacióndeadiciónx+=y x=x+y Asignacióndesustracciónx-=y x=x-y Asignacióndemultiplicaciónx*=y x=x*y Asignacióndedivisión x/=y x=x/y

Asignaciónderesto x%=y x=x%y

Asignacióndeexponenciaciónx**=yx=x**y

Asignacióndedesplazamientoalaizquierda x<<=yx=x<<y

Asignacióndedesplazamientoaladerechax>>=yx=x>>y

Asignacióndedesplazamientoaladerechasinsignox>>>=yx=x>>>y

AsignaciónANDbinaria x&=y x=x&y AsignaciónXORbinaria x^=y x=x^y AsignaciónORbinaria x|=y x=x|y

Destructuración

Paraasignacionesmascomplejas,lasintaxisdeasignacióncondestructuraciónesuna

expresióndeJavascriptquepermiteextraerdatosdearreglosuobjetosusandounasintaxis

queseasemejaalacontruccióndearreglosoobjetosliterales.

varfoo=['uno','dos','tres'];

//sindestructuración

varuno=foo[0];

vardos=foo[1];

vartres=foo[2];

//condestructuración

var[uno,dos,tres]=foo;

Operadoresdecomparación

Unoperadordecomparacióncomparasusoperandosydevuelveunvalorlógicoenfunciónde

silacomparaciónesverdadera(true)ofalsa(false).Losoperadorespuedensernúmericos,de

cadenadecaracteres(Strings),lógicosodeobjetos.Lascadenasdecaracteresson

comparadasbasándoseenunordenlexicográficoestándar,usandovaloresUnicode.Enla

mayoríadeloscasos,silosdosoperandosnosondelmismotipo,JavaScriptintenta

convertirloseneltipoapropiadoparapermitirlacomparación,generalmenteestaconversiónse

realizademaneranumérica.Lasúnicasexcepcionesquetieneestaconversiónsonlos

operadores===y!==queejecutancomparacionesdeigualdadodesigualdaddemanera

estricta(chequeandosiambosoperandossondelmismotipo).Estosoperadoresnointentan

convertirlosoperandosauntipocompatibleantesdecomprobarsuigualdad.Lasiguiente

tabladescribelosoperadoresdecomparaciónenbasealsiguientecódigodeejemplo:

varvar1=3;

varvar2=4;

Operadoresdecomparación

Operador DescripciónEjemplosdevolviendotrue

Igualdad(==)Devuelvetruesiambosoperadorandossoniguales.3==var1

"3"==var1

3=="3"

Desigualdad(!=)Devuelvetruesiambosoperandosnosoniguales. var1!=4

var2!="3"

Estrictamenteiguales(===)

Devuelvetruesilosoperandossonigualesytienenelmismotipo.MiratambiénObject.isy

samenessinJS.

3===var1

Estrictamentedesiguales(!==)

Devuelvetruesilosoperandosnosonigualesy/onosondelmismotipo.

var1!=="3"

3!=="3"

Mayorque(>)

Devuelvetruesieloperandodelaizquierdaesmayorqueeloperandodeladerecha.

var2>var1

"12">2

Mayoroigualque(>=) Devuelvetruesieloperandodelaizquierdaesmayoroigualqueel

operandodeladerecha.var2>=var1

var1>=3

Menorque(<) Devuelvetruesieloperandodelaizquierdaesmenorqueeloperandodela

derecha.var1<var2

"2"<12

Menoroigualque(<=) Devuelvetruesieloperandodelaizquierdaesmenoroigualqueel

operandodeladerecha.var1<=var2

var2<=5

Nota:(=>)noesunoperador,sinounanotaciónparalasFuncionesFlecha.

Operadoresaritméticos

Losoperadoresaritméticostomanlosvaloresnúmericos(tantoliteralescomovariables)desus

operandosydevuelvenunúnicoresultadonumérico.Losoperadoresaritméticosestandarson

lasuma(+),laresta(-),lamultiplicación(*)yladivisión(/).Estosoperadoresfuncionancomo

enlamayoríadeloslenguajesdeprogramacióncuandosonusadosconnúmerosdecoma

flotante(enparticular,tengaencuentaqueladivisiónporceroproduceInfinity).Porejemplo:

1/2;//0.5

1/2==1.0/2.0;aritmético

Ademásdelasoperacionesdearitméticaestándar(+,-,*y/),JavaScriptbrindalossiguientes

operadoresaritméticosdescritosenlatabla:

Operadoresaritméticos

Operador DescripciónEjemplo Resto(%) Operadorbinariocorrespondientealmódulodeunaoperación.Devuelveelrestodeladivisión dedosoperandos.

12%5devuelve2.

Incremento(++) Operadorunario.Incrementaenunaunidadaloperando.Siesusadoantesdeloperando(++x)

devuelveelvalordeloperandodespuésdeañadirle1ysiseusadespuésdeloperando(x++)

devuelveelvalordeesteantesdeañadirle1.

Sixes3,entonces++xestablecexa4ydevuelve4,mientrasquex++devuelve3y,solo

despuésdedevolverelvalor,establecexa4.

Decremento(--)

Operadorunario.Restaunaunidadaloperando.Dependiendodelaposiciónconrespectoal

operandotieneelmismocomportamientoqueeloperadordeincremento.

Sixes3,entonces--xestablecexa2ydevuelve2,mientrasquex--devuelve3y,solodespués

dedevolverelvalor,establecexa2.

NegaciónUnaria(-)

Operaciónunaria.Intentaconvertiranúmeroaloperandoydevuelvesuformanegativa.

-"3"devuelve-3.

-truedevuelve-1.

Unariopositivo(+) Operaciónunaria.Intentaconvertiranúmeroaloperando.+"3"devuelve3.

+truedevuelve1.

Exponenciación(**)Calculalapotenciadelabasealvalordelexponente.Esequivalentea baseexponente 2**3devuelve8.

10**-1devuelve0.1.OperadoresBitabit

Losoperadoresbitabittratanasusoperandoscomounconjuntode32bits(cerosyunos),en

vezdecomonúmerosdecimales,hexadecimalesuoctales.Porejemplo,elnúmerodecimal9

serepresentaenbinariocomo1001.Losoperadoresbitabitrealizansusoperacionesendicha

representaciónbinaria,perodevuelvenunvalornúmericoestándar.

LasiguientetablamuestralosoperadoresbitabitconlosquecuentaJavaScript

Tabla3.4Operadoresbitabit

Operador UsoDescripción ANDbitabita&b Devuelveunoporcadaposicióndebitenlacualeslosbitscorrespondientesdeambos operandostienenvaloruno.

ORbitabita|b

Devuelveunoporcadaposicióndebitenlacualalmenosunodelosbitscorrespondientesde

ambosoperandostienevaloruno.

XORbitabita^b

Porcadaposicióndebitenlacuallosbitscorrespondientesdeambosoperandossoniguales

devuelveceroysisondiferentesdevuelveuno.

NOTbitabit~aInviertelosbitsdeloperando.

Desplazamientoalaizquierdaa<<b

Desplazabposicionesalaizquierdalarepresentaciónbinariadea,elexcesodebits

desplazadosalaizquierdasedescarta,dejandocerosaladerechadelosbitsdesplazados.

Desplazamientoaladerechaconpropagacióndesigno

a>>b

Desplazabposicionesaladerechalarepresentaciónbinariadea,elexcesodebits

desplazadosaladerechasedescarta.

Desplazamientoaladerechaconrellenodeceros a>>>b Desplazabposicionesaladerechalarepresentaciónbinariadea,elexcesodebits desplazadosaladerechasedescarta,dejandocerosalaizquierdadelosbitsdesplazados.

Operadoreslógicosbitabit

Conceptualmente,losoperadoreslógicosbitabitfuncionandelasiguientemanera:

Losoperandossonconvertidosaenterosde32bitsyexpresadoscomoseriesdebits(cerosy

unos).Sedescartaránlosbitsmásrelevantesdelosnúmerosconmásde32bits.Porejemplo

elsiguienteenteroconmásde32bitsseráconvertidoaunenterode32bits:

Antes: 11100110111110100000000000000110000000000001

Después:

Cadabitenelprimeroperandoesemparejadoconelcorrespondientebitenelsegundo operando:elprimerbitdelprimeroperandoconelprimerbitdelsegundooperando,elsegundo bitdelprimeroperandoconelsegundobitdelsegundooperandoyasíconsecutivamente. Laoperaciónseaplicaacadapardebitsyelresultadoesconstruidobitabit.

Porejemplo,larepresentaciónbinariade9es1001,ylarepresentaciónbinariade15es1111.

Cuandoseleaplicanaestosvaloreslasoperacionesbitabit,losresultadossonlossiguientes:

10100000000000000110000000000001

Ejemplodeoperadoresbitabit Expresión Resultado Descripciónbinaria 15&9 9 1111&1001=1001 15|9 151111|1001=1111 15^9 6 1111^1001=0110

~15-16~00000000 00001111=11111111 11110000 ~9-10~00000000 00001001=11111111 11110110

Observaquelos32bitssoninvertidoscuandoseusaeloperadorNOTbitabit(~),yquelos

valoresconlosbitsmásrelevantes(extremoizquierdo)convalor1representannúmeros

negativos(representaciónencomplementoados).

Losoperadoresdedesplazamientobinario

Losoperadoresdedesplazamientobinarioutilizandosoperandos:elprimeroeselnúmeroque

serádesplazado,yelsegundoeselnúmerodeposicionesbinariasqueelprimeroperandoserá

desplazado.Ladireccióndeldesplazamientoescontroladaporeloperadorutilizado.

Losoperadoresdedesplazamientobinarioconviertenlosoperandosenenterosde32bitsy

retornaránunresultadoqueserádelmismotipoqueeloperandodelaizquierda

Lasiguientetablarecogelosoperadoresdedesplazamientobinario:

Operadoresdedesplazamientobinario Operador DescripciónEjemplo Desplazamientoalaizquierda(<<) Esteoperadordesplazahacialaizquierdalarepresentaciónbinariadelprimeroperando.La cantidaddeposicionesdebitsdesplazadasesmarcadaporelsegundooperando.Elexcesode bitsdesplazadoalaizquierdasedescarta,dejandocerosaladerechadelosbitsdesplazados.

9<<2retorna36,puestoquelarepresentaciónbinariade9es1001yalserdesplazado2

posicionesdebitshacialaizquierda,dacomoresultado100100,cuyarepresentacióndecimal

es36.

Desplazamientoaladerechaconpropagacióndesigno(>>)

Esteoperadordesplazahacialaderechalarepresentaciónbinariadelprimeroperando.La

cantidaddeposicionesdebitsdesplazadasesmarcadaporelsegundooperando.Elexcesode

bitsdesplazadoaladerechasedescarta.

9>>2retorna2,puestoquelarepresentaciónbinariade9es1001yalserdesplazada2

posicionesdebitshacialaderecha,dacomoresultado10,cuyarepresentacióndecimales2.

Delmismomodo,-9>>2retorna-3,puestoquealmantenerlosbitsrelevantesalaizquierda,el

signosemantiene.

Desplazamientoaladerechaconrellenodeceros(>>>)

Esteoperadordesplazahacialaderechalarepresentaciónbinariadelprimeroperando.La

cantidaddeposicionesdebitsdesplazadasesmarcadaporelsegundooperando.Elexcesode

bitsdesplazadoaladerechasedescarta,dejandocerosalaizquierdadelosbitsdesplazados.

19>>>2retorna4,puestoquelarepresentaciónbinariade19es10011yalserdesplazada2

posicionesdebitshacialaderechadacomoresultado100,cuyarepresentacióndecimales4.

Paranúmerosnonegativosesteoperadorgeneraráelmismoresultadoqueelde

desplazamientoaladerechaconpropagacióndesigno(>>).

Operadoreslógicos

Losoperadoreslógicossoncomúnmenteutilizadosconvaloresbooleanos;estosoperadores

devuelvenunvalorbooleano.Sinembargo,losoperadores&&y||realmentedevuelvenelvalor

deunodelosoperandos,asiquesiestosoperadoressonusadosconvaloresnobooleanos,

podríandevolveranunvalornobooleano.Enlasiguientetablasedescribenlosoperadores

lógicos:

Operadoreslógicos Operador UsoDescripción

ANDLógico(&&)expr1&&expr2

Devuelveexpr1sipuedeserconvertidoafalsedelocontrariodevuelveexpr2.Porlotanto,

cuandoseusaconvaloresbooleanos,&&devuelvetruesiambosoperandossontrue,encaso

contrariodevuelvefalse.

ORLógico(||) expr1||expr2

Devuelveexpr1sipuedeserconvertidoatruedelocontrariodevuelveexpr2.Porlotanto,

cuandoseusaconvaloresbooleanos,||devuelvetruesialgunodelosoperandosestrue,o

falsesiambossonfalse.

NOTLógico(!) !expr Devuelvefalsesisuoperandopuedeserconvertidoatrue,encasocontrario,devuelvetrue.

Ejemplosdeexpresionesquepuedenserconvertidasafalsesonaquellasquepuedenser

evaluadascomonull,0,NaN,undefinedounacadenavacía.

Elsiguientecódigomuestraejemplosdeloperador&&(ANDLógico).

vara1=true&&true; //t&&tdevuelvetrue vara2=true&&false; //t&&fdevuelvefalse vara3=false&&true; //f&&tdevuelvefalse

vara4=false&&(3==4);//f&&fdevuelvefalse

vara5="Cat"&&"Dog"; //t&&tdevuelve"Dog" vara6=false&&"Cat"; //f&&tdevuelvefalse vara7="Cat"&&false; //t&&fdevuelvefalse Elsiguientecódigomuestraejemplosdeloperador||(ORLógico).

varo1=true||true; //t||tdevuelvetrue varo2=false||true; //f||tdevuelvetrue varo3=true||false; //t||fdevuelvetrue

varo4=false||(3==4);//f||fdevuelvefalse

varo5="Cat"||"Dog"; //t||tdevuelve"Cat" varo6=false||"Cat"; //f||tdevuelve"Cat" varo7="Cat"||false; //t||fdevuelve"Cat" Elsiguientecódigomuestraejemplosdeloperador!(NOTLógico).

varn1=!true;//!tdevuelvefalse

varn2=!false;//!fdevuelvetrue

varn3=!"Cat";//!tdevuelvefalse

Evaluaciónmínimaoevaluacióndecircuitocorto

Comolasexpresioneslógicassonevaluadasdeizquierdaaderecha,estassonevaluadasde

maneramínima(tambiénllamadadecircuitocorto)usandolassiguientesreglas:

false&&algoesmínimamenteevaluadaafalse.

true||algoesmínimamenteevaluadaatrue.

Lasreglasdelalógicagarantizanquelananterioresevaluacionessonsiemprecorrectas.Nota

queeloperandoalgonoesevaluado,porloquesituarlonosurteningúnefecto.

Operadoresdecadenasdecaracteres

Ademásdelosoperadoresdecomparación,quepuedenserusadosencadenasdecaracteres,

eloperadordeconcatenación(+)unedosvaloresdetipoString,devolviendootroString

correspondientealaunióndelosdosoperandos.

Porejemplo,

console.log("mi"+"string");//lanzaelString"mistring"enlaconsola.

Laversiónacortadadeesteoperadordeasignación(+=)puedeserusadatambiénpara

concatenarcadenasdecaracteres.

Porejemplo,

varmistring="alfa";

mistring+="beto";//devuelve"alfabeto"yasignaestevalora"mistring".

Operadorcondicional(ternario)

EloperadorcondicionaleselúnicooperadordeJavaScriptquenecesitatresoperandos.El

operadorasignaunodedosvaloresbasadoenunacondición.Lasintaxisdeesteoperadores:

condición?valor1:valor2

Silacondiciónestrue,eloperadortomaráelvalor1,delocontrariotomaráelvalor2.Puedes

usareloperadorcondicionalencualquierlugarqueuseunoperadorestándar.

Porejemplo,

varestado=(edad>=18)?"adulto":"menor";

Estasentenciaasignaelvaloradultoalavariableestadosiedadesmayoroiguala18,delo

contrarioleasignaelvalormenor.

Operadorcoma

Eloperadorcoma(,)simplementeevalúaambosoperandosyretornaelvalordelúltimo.Este

operadoresantetodoutilizadodentrodeunciclofor,permitiendoquediferentesvariablessean

actualizadasencadaiteracióndelciclo.

Porejemplo,siaesunArraybi-dimensionalcon10elementosencadalado,elsiguientecódigo

usaeloperadorcomaparaactualizardosvariablesalmismotiempo.Elcódigoimprimeenla

consolalosvalorescorrespondientesaladiagonaldelArray:

for(vari=0,j=9;i<=j;i++,j--)

console.log("a["+i+"]["+j+"]="+a[i][j]);

Operadoresunarios

Unaoperaciónunariaesunaoperaciónquesólonecesitaunoperando.

delete

Lafuncióndeloperadordeleteeseliminarunobjeto,unapropiedaddeunobjeto,ounelemento

enelindiceespecíficodeunArray.Lasintaxiseslasiguiente:

deletenombreObjeto;

deletenombreObjeto.propiedad;

deletenombreObjeto[indice];

deletepropiedad;//soloadmitidoconunadeclaración"with"

DondenombreObjetoeselnombredeunobjeto,propiedadelnombredelapropiedaddeun

objeto,eindiceunenteroquerepresentalalocalizacióndeunelementoenunArray.

Lacuartaformaesadmitidasolodentrodeunasentenciawith,paraeliminarunapropiedadde

unobjeto.

Puedesusareloperadordeleteparaeliminaraquellasvariablesquehansidodeclaradas

implícitamente,peronoaquellasquehansidodeclaradasconvar.

Silaoperacióndeletefinalizaconéxito,establecelapropiedadoelelementoaundefined.El

operadordeletedevuelvetruesilaoperaciónhasidoposibleyfalseencasocontrario.

x=42;

vary=43;

miObj=newNumber();

miObj.h=4; //crealapropiedad"h"

deletex;

//devuelvetrue(sepuedeeliminarsisedeclaróimplícitamente)

deletey;

//devuelvefalse(nosepuedeeliminarsisedeclaróconvar)

deleteMath.PI;//devuelvefalse(nosepuedeneliminarpropiedadespredefinidas) deletemiObj.h;//devuelvetrue(sepuedeneliminarpropiedadesdefinidasporelusuario) deletemiObj; //devuelvetrue(sepuedeeliminarsisehadeclaradoimplícitamente) EliminandoelementosdeunArray CuandoseeliminaunelementodeunArray,sutamañonoseveráafectado.Porejemplo,si

eliminaa[3],a[4]seguiráexistiendoperoelvalordea[3]seráundefinedyaquedejarádeexistir

enelArray.

Enelsiguienteejemplo,arboles[3]eseliminadocondeleteycomosepuedeconstatarelmismo

dejarádeexistirenelArray.

vararboles=newArray("secoya","laurel","cedro","roble","arce");

deletearboles[3];

if(3inarboles){

//Estonoseejecutará

}

SideseaqueunelementodeunArrayexistaperosuvalorseaundefined,debeasignarleel

valorundefinedenvezdeusareloperadordelete.Enelsiguienteejemploaarboles[3]sele

asignaelvalorundefined,peroelelementoseguiráexistiendo

vararboles=newArray("secoya","laurel","cedro","roble","arce");

arboles[3]=undefined;

if(3inarboles){

//Estetrozosiseejecutará

}

typeof

Eloperadortypeofesusadodelassiguientesmaneras:

typeofoperando

typeof(operando)

Eloperadortypeofdevuelveunacadenadecaracteresindicandoeltipodeloperandoevaluado.

Enlosejemplosanterioresoperandohacereferenciaalacadenadecaracteres,variable,

palabraclaveuobjetodelqueseintentaobtenersutipo.Losparéntesissonopcionales.

Supónquedefineslassiguientesvariables:

varmiFuncion=newFunction("5+2");

varforma="redonda";

varlargo=1;

varhoy=newDate();

Eloperadortypeofdevolverálossiguientesresultadosenestasvariables:

typeofmiFuncion;//devuelve"function" typeofforma; //devuelve"string" typeoflargo; //devuelve"number"

typeofhoy;

typeofnoExiste;//devuelve"undefined"

Conlaspalabrasclavetrueynull,eloperadortypeofdevuelvelossiguientesresultados:

//devuelve"object"

typeoftrue;//devuelve"boolean"

typeofnull;//devuelve"object"

Conlosnúmerosolascadenasdecaracteres,eloperadortypeofdevuelvelossiguientes

resultados:

typeof62;

//devuelve"number"

typeof'Helloworld';//devuelve"string"

Enelcasodequeseutilicecomooperandounapropiedad,eloperadortypeofdevolveráeltipo

dedichapropiedad:

typeofdocument.lastModified;//devuelve"string"

typeofwindow.length;

typeofMath.LN2;

Conmétodosyfunciones,eloperadortypeofdevolverálossiguientesresultados:

//devuelve"number"

//devuelve"number"

typeofblur;

//devuelve"function"

typeofeval;

//devuelve"function"

typeofparseInt; //devuelve"function" typeofshape.split;//devuelve"function" Paraobjetospredefinidos,elobjetotypeofdevuelvelossiguientesvalores:

typeofDate; //devuelve"function" typeofFunction;//devuelve"function" typeofMath; //devuelve"object" typeofOption; //devuelve"function" typeofString; //devuelve"function" void

Eloperadorvoidpuedeusarseencualquieradelassiguientesmaneras:

void(expresion)

voidexpresion

Eloperadorvoidespecificaunaexpresiónqueseráevaluadaynoretornaráningúnresultado.

Enlosejemplosanteriores,expresionhacereferenciaalaexpresiónqueseráevaluada.Sibien

losparéntesisqueenvuelvenalaexpresiónsonopcionales,encuantoaestilodelcódigo,es

unabuenaprácticausarlos.

Eloperadorvoidpuedeserusadoparaespecificarunaexpresióncomounlinkdehipertexto.La

expresiónseráevaluadaperonocargaráunapáginaeneldocumentoactual.

Elsiguientecódigocreaunlinkdehipertextoquenohacenadacuandoelusuariohaceclicken

él.Cuandoelusuariohaceclicksobreellink,void(0)seráevaluadacomoundefined,locualno

tieneefectoenJavaScript.

<ahref="javascript:void(0)">Hazclickaquíparanohacernada</a>

Elsiguientecódigocreaunlinkdehipertextoqueenvíaunformulariocuandoelusuariohace

clickenél.

<ahref="javascript:void(document.form.submit())">

Hazclickparaenviar</a>

Operadoresrelacionales

Unoperadorrelacionalcomparasusoperandosyretornaunvalorbooleanobasadoensila

comparaciónesverdadera.

in

Eloperadorindevuelvetruesilapropiedadespecificadacomoprimeroperandoseencuentra

enelobjetoespecificadocomosegundooperando.Lasintaxises:

nombrePropiedadoNumeroinnombreObjeto

DondenombrePropiedadoNumeroesunacadenaoexpresiónnuméricaquerepresentaun

nombredepropiedadoíndicedematrizynombreObjetoeselnombredeunobjeto.

Lossiguientesejemplosmuestranalgunosusosdeloperadorin.

//Arrays

vararboles=newArray("secoya","laurel","cedro","roble","arce");

0inarboles;

//devuelvetrue

3inarboles;

//devuelvetrue

6inarboles;

//devuelvefalse

"laurel"inarboles;//devuelvefalse(Sedebeespecificarelnúmerodeíndice,

//noelvalorcontenidoeneseíndice)

"length"inarboles;//devuelvetrue(lengthesunapropiedaddelArray)

//Objetospredefinidos

"PI"inMath;

varmiCadena=newString("coral");

"length"inmiCadena;//devuelvetrue

//devuelvetrue

//Objetoscreados

varmiCoche={marca:"Honda",modelo:"Accord",fecha:1998};

"marca"inmiCoche;//devuelvetrue

"modelo"inmiCoche;//devuelvetrue

instanceof

Eloperadorinstanceofdevuelvetruesielobjetoespecificadocomoprimeroperandoesdeltipo

deobjetoespecificadocomosegundoparámetro.Lasintaxises:

nombreObjetoinstanceoftipoObjeto

DondenombreObjetoeselnombredelobjetoquesedeseacompararytipoObjetoesuntipode

objeto,comoDateoArray.

Utiliceinstanceofcuandonecesiteconfirmareltipodeunobjetoentiempodeejecución.Por

ejemplo,alcaptarexcepciones,puedederivarseauncódigodemanejodeexcepciones

diferentedependiendodeltipodeexcepciónlanzada.

Porejemplo,elcódigosiguienteutilizainstanceofparadeterminarsielDiaesunobjetodetipo

Date.YdebidoaqueelDiaesunobjetoDate,lassentenciasenlasentenciaifseejecutarán.

varelDia=newDate(1995,12,17);

if(elDiainstanceofDate){

//códigoaejecutar

}

Precedenciadeoperadores

Laprecedenciadeoperadoresdeterminaelordenenqueestossonaplicadoscuandoseevalúa

unaexpresión.Estaprecedenciapuedeseralteradausandoparéntesis.

Lasiguientetabladescribelaprecedenciadeoperadores,demayoramenorimportancia.

Tabla3.7Precedenciadeoperadores

Tipodeoperadoroperadoresindividuales miembro .[] llamar/crearinstancia ()new

negación/incremento !~-+++--typeofvoiddelete multiplicación/división */%

adición/sustracción+-

desplazamientobinario <<>>>>>

relación<<=>>=ininstanceof

igualdad==!====!==

ANDbinario&

XORbinario^

ORbinario |

ANDlógico&&

ORlógico ||

condicional?:

asignación =+=-=*=/=%=<<=>>=>>>=&=^=|= coma ,

Unaversiónmásdetalladadeestalista,completayconlinksadetallesadicionalesacercade

cadaoperador,puedeencontrarseenReferenciadeJavaScript.

Expresiones

Unaexpresiónescualquierunidadválidadecódigoqueresuelveunvalor.

Cadaexpresiónsintácticaválidaresuelveaalgúnvalor,peroconceptualmente,haydostiposde

expresiones:lasquetienenefectossecundarios(porejemplo:aquellasqueasignanunvalora

unavariable)ylasquedealgunamanerasonevaluadasyresuelvenunvalor.

Laexpresiónx=7esunejemplodelprimertipo.Estaexpresiónusaeloperador=paraasignar

elvalorsietealavariablex.Laexpresiónensímismaevalúaasiete.

Elcódigo3+4esunejemplodelsegundotipodeexpresiones.Estaexpresiónusaeloperador+

parasumartresycuatrosinasignarelvalor(siete)aningunavariable.

JavaScriptcuentaconlassiguientescategoríasdeexpresiones:

Aritméticas:evalúanaunnúmero,porejemplo3.14159.(UsosgeneralesOperadores

aritméticos.)

Cadenasdecaracteres:evalúanaunacadenadecaracteres,porejemplo,"Juan"o"234".(Usos

generalesOperadoresdecadenasdecaracteres.)

Lógicas:evalúanatrueofalse.(AmenudoinvolucranalosOperadoreslógicos.)

Expresionesprimarias:PalabrasclavebásicasyexpresionesgeneralesenJavaScript.

Expresionesalladoizquierdo:Losvaloresizquierdossoneldestinodeunaasignación.

Expresionesprimarias

SonpalabrasclavesbásicasyexpresionesgeneralesenJavaScript.

this

Useestapalabrareservadathisparareferirsealobjetoactual.Engeneral,thishacereferencia

alobjetollamadorenunmétodo.Seusadelasiguientemanera:

this["nombreDePropiedad"]

o

this.nombreDePropiedad

Ejemplo1:

Supongamosunafunciónllamadavalidatequevalidalapropiedadvaluedeunobjeto,dadoun

objetoydosvalores,lowvalyhival,comoextremosdeunrango.

functionvalidate(obj,lowval,hival){

if((obj.value<lowval)||(obj.value>hival))

alert("¡Valorinválido!");

}

PuedesinvocaraestafunciónvalidateparacadaeventoonChangedeloselementosdeun

formulario,utilizandothisparapasarelcampodelformulariocomoelementoavalidar.Por

ejemplo:

<b>Ingreseunnúmeroentre18y99:</b>

<inputtype="text"name="age"size=3onChange="validate(this,18,99);">

Ejemplo2:

Cuandoescombinadaconlapropiedadform,thispuedehacerreferenciaalformulariopadre

delelementoactual.Enelsiguienteejemplo,elformulariomiFormulariocontieneunelemento

inputdetipotextyunelementoinputdetipobutton.Cuandoelusuariohaceclicenelbotón,se

leasignaelnombredelformularioalinputdetipotext.EleventoonClickdelbotónusathis.form

parahacerreferenciaalformulariopadre,miFormulario.

<formname="miFormulario">

Nombredelformulario:

<inputtype="text"name="text1"value="Beluga"/>

<inputtype="button"name="button1"value="Mostrarnombredelformulario"

onClick="this.form.text1.value=this.form.name;"/>

</form>

Operadordeagrupación

Eloperadordeagrupación()controlalaprecedenciadelaevaluaciónenlasexpresiones.Por

ejemplo,puedescambiarelordendelamultiplicaciónyladivisiónantesdelasumaylaresta

paraqueseevalúelasumaprimero:

vara=1;

varb=2;

varc=3;

//precedenciapordefecto

a+b*c

//seevalúapordefectocomo a+(b*c) //7

//7

//ahoracambiamoslaprecedenciapordefecto //sumaremosprimeroantesdemultiplicar (a+b)*c //9

//locualesequivalentea

a*c+b*c//9

Expresionesalladoizquierdo

Losvaloresizquierdossoneldestinodeunaasignación

new

Utiliceeloperadornewparacrearunainstanciadeuntipopropioodeunodelostiposde

objetospredefinidos:Array,Boolean,Date,Function,Image,Number,Object,Option,RegExpo

String.Lasemánticaeslasiguiente:

varnombreDeObjeto=newtipoDeObjeto([param1,param2, ,paramN]); super

Lapalabraclavesuperesusadaparallamarfuncionesenelobjetopadre.Esútilconclases

parallamaralconstructorpadre,porejemplo.

super([argumentos]);//llamaalconstructorpadre.

super.funcionEnPadre([argumentos]);

Operadordepropagación

Eloperadordepropagaciónpermitequeunaexpresiónseaexpandidaensituacionesdondese

esperanmúltiplesargumentos(parallamadasafunciones)omúltipleselementos(paraArrays

literales).

Ejemplo:

Hoy,sitienesunArrayydeseascrearunnuevoArrayquecontengatambiénloselementosdel

primero,lasintaxisdeunArrayliteralnoessuficienteydebesrecurrirapiezasdecódigoque

haganusodemétodoscomopush,splice,concat,etc.Conlasintaxisdepropagaciónestose

convierteenalgomuchomássimple:

varpartes=["hombros","rodillas"]; varletra=["cabeza", partes,"y","dedos"]; Demanerasimilareloperadordepropagaciónfuncionatambiénconllamadasafunciones:

functionf(x,y,z){}

varargs=[0,1,2];

f( args);

«AnteriorSiguiente»

FuncionesenJavascript

LasfuncionessonunodelospilaresfundamentalesenJavaScript,unafunciónesun

procedimientoenJavaScriptunconjuntodesentenciasquerealizanunatareaocalculanun

valor.Parausarunafunción,debedefinirlaenalgúnlugardelámbitodesdeelcualdesea

llamarla.

Definicióndefunciones

Declaracionesdefunción

Ladefinicióndeunafunción(tambiénllamadadeclaracióndefunciónosentenciadefunción)

consistedelapalabraclave(reservada)function,seguidapor:

Elnombredelafunción(opcional).

Unalistadeargumentosparalafunción,encerradosentreparéntesisyseparadosporcomas(,).

LassentenciasJavaScriptquedefinenlafunción,encerradasporllaves,{}.

Porejemplo,elsiguientecódigodefineunafunciónsimplellamadasquare:

functionsquare(number){

returnnumber*number;

}

Lafunciónsquaretomaunargumento,llamadonumber.Lafunciónconsistedeunasentencia

queexpresaelretornodelargumentodelafunción(elcuales,number)multiplicadoporsí

mismo.Lasentenciareturnespecificaelvalorretornadoporlafunción.

returnnumber*number;

Losparámetrosprimitivos(comopuedeserunnúmero)sonpasadosalasfuncionesporvalor;

elvalorespasadoalafunción,silafuncióncambiaelvalordelparámetro,estecambionoes

reflejadoglobalmenteoenotrallamadaalafunción.

Sipasaunobjecto(p.ej.unvalornoprimitivo,comounArrayounobjetodefinidoporelusuario)

comoparámetro,ylafuncióncambialaspropiedadesdelobjeto,estecambiosíesvisible

desdeafueradelafunción,comoseveenelsiguienteejemplo:

functionmyFunc(theObject){

theObject.make='Toyota';

}

varmycar={make:'Honda',model:'Accord',year:1998},

varx,y;

x=mycar.make; //xtomaelvalor"Honda"

myFunc(mycar); y=mycar.make; //ytomaelvalor"Toyota" //(lapropiedadmakefuecambidaporlafuncion) Tengaencuentaqueasignarunnuevoobjetoalparámetronotendráningúnefectofueradela función,porqueestoestácambiandoelvalordelparámetroenlugardeunadelaspropiedades delobjeto:

functionmyFunc(theObject){

theObject={make:'Ford',model:'Focus',year:2006};

}

varmycar={make:'Honda',model:'Accord',year:1998},

varx,y;

x=mycar.make; //xtomaelvalor"Honda"

myFunc(mycar); y=mycar.make; //ysigueconelvalor"Honda" Expresionesdefunción Sibienladeclaracióndelafunciónanterioressintácticamenteunasentencia,lasfunciones puedentambiénsercreadasporunaexpresióndefunción.Talfunciónpuedeseranónima;no debetenerunnombre.Porejemplo,lafunciónsquarepodríahabersidodefinidacomo:

varsquare=function(number){returnnumber*number};

varx=square(4)//xobtieneelvalor16

Sinembargo,sepuedeproporcionarunnombreaunaexpresióndefunción,yéstepuedeser

utilizadodentrodelafunciónparareferirseasímisma,oenundepuradorparaidentificarla

funcióneneltrazadodepila:

varfactorial=functionfac(n){returnn<2?1:n*fac(n-1)};

print(factorial(3));

Lasexpresionesdefunciónsonconvenientescuandosepasaunafuncióncomoargumentoa

otrafunción.Elsiguienteejemplomuestraunafunciónmapsiendodefinidayluegollamada

conunaexpresióndefuncióncomoprimerparámetro:

functionmap(f,a){ varresult=[],//CreaunnuevoArray i;

for(i=0;i!=a.length;i++)

result[i]=f(a[i]);

returnresult;

}

Elsiguientecódigo:

varmultiplicar=function(x){returnx*x*x;}//Expresióndefuncion

map(multiplicar,[0,1,2,5,10]);

retorna[0,1,8,125,1000].

EnJavaScript,unafunciónpuedeserdefinidaenbaseaunacondición.Porejemplo,la

siguientedefinicióndefunciónmyFuncesdefinidasólosinumesiguala0:

varmyFunc;

if(num==0){

myFunc=function(theObject){

theObject.make="Toyota"

}

}

Ademásdedefinirfuncionescomosedescribeaquí,sepuedeutilizarelconstructorFunction

paracrearfuncionesdesdeunacadenaentiempodeejecución,muyalestilodeeval().

Unmétodo,esunafunciónqueespropiedaddeunobjeto.Puedeleermásacercadeobjetosy

métodosenTrabajandoconobjetos.

Llamandofunciones

Definirunafunciónnolaejecuta.Definirunafunciónsimplementelanombrayespecificaque hacercuandolafunciónesllamada.Llamarlafunciónesloquerealmenterealizalasacciones especificadasconlosparámetrosindicados.Porejemplo,sidefinelafunción square,podría llamarlacomosigue:

square(5);

Lasentenciaanteriorllamaalafunciónconelargumento5.Lafunciónejecutasussentencias

yretornaelvalor25.

Lasfuncionesdebendeestardentrodelámbitocuandosonllamadas,peroladeclaracióndela

funciónpuedeserizada(aparecerpordebajodelallamadaenelcodigo),comomuestrael

siguienteejemplo:

console.log(square(5));

/* */ functionsquare(n){returnn*n} Elámbitodelafuncióneslafunciónenlaqueesdeclaradaoelprogramaenterosiéstaes declaradaenelnivelsuperior.

Estosólofuncionacuandosedefinelafunciónutilizandolasintaxisanterior(p.ej.function funcName(){}).Elsiguientecódigonofuncionará.Estoquieredecirqueelizadodefunciones sólofuncionaconunadeclaracióndefunciónynoconunaexpresióndefunción console.log(square);//squareescreadoconunvalorinicialindefinido

console.log(square(5));//TypeError:squarenoesunfuncion

square=function(n){

returnn*n;

}

Losargumentosdeunafunciónnoestánlimitadosacadenasynúmeros.Puedenenviarse

objetosenterosaunafunción.Lafunciónshow_props()(definidaenTrabajandoconobjetos)

esunejemplodeunafunciónquetomaunobjetocomoargumento.

Unafunciónpuedeserrecursiva;esdecir,quepuedellamarseasímisma.Porejemplo,a

continuacióntenemosunafunciónquecalculaelfactorialdeformarecursiva:

functionfactorial(n){

if((n==0)||(n==1))

return1;

else

return(n*factorial(n-1));

}

Entonces,podríacalcularlosfactorialesdesdeunohastacincodelasiguientemanera:

vara,b,c,d,e;

a=factorial(1);//aobtieneelvalor1

b=factorial(2);//bobtieneelvalor2

c=factorial(3);//cobtieneelvalor6

d=factorial(4);//dobtieneelvalor24

e=factorial(5);//eobtieneelvalor120

Hayotrasformasdellamaralasfunciones.Amenudohaycasosendondeunafunción

necesitaserllamadadeformadinámica,oendondeelnúmerodeargumentosdelamisma

varía;oenlacual,elcontextodelallamadadelafunciónnecesitaserajustadaparaunobjeto

específicodeterminadoeneltiempodeejecución.Resultaquelasfuncionesensímismasson

objetos,yestosobjetosasuveztienenmétodos(verelobjetoFunction).Unodeéstos,el

métodoapply(),sepuedeutilizarparalograresteobjetivo.

ÁmbitodeunaFunción

Lasvariablesdefinidasdentrodeunafunciónnopuedenseraccedidasdesdeningúnlugar

fueradelafunción,yaquelavariableestádefinidasóloenelámbitodelafunción.Sinembargo,

unafunciónpuedeaccederatodaslasvariablesyfuncionesdefinidasdentrodelámbitoenel

cualestádefinida.Enotraspalabras,unafuncióndefinidaenelámbitoglobalpuedeaccedera

todaslasvariablesdefinidasenelámbitoglobal.Unafuncióndefinidadentrodeotrafunción,

tambiénpuedeaccederatodaslasvariablesdefinidasensufunciónpadreyacualquierotra

variablealaquelafunciónpadretengaacceso.

//Lassiguientesvariablesestándefinidasenelámbitoglobal

varnum1=20,

num2=3,

nombre="Messi";

//Estafunciónsedefineenelámbitoglobal functionmultiplicar(){

returnnum1*num2;

}

multiplicar();//Retorna60

//Unejemplodefunciónanidada functionobtenerPuntaje(){

varnum1=2,

num2=3;

functionagregar(){

returnnombre+"puntaje"+(num1+num2);

}

returnagregar();

}

obtenerPuntaje();//Retorna"Messipuntaje5"

Ámbitoylapiladelafunción

Larecursividad

Unafunciónpuedereferirseyllamarseasímisma.Haytresformasdeunafunciónpara

referirseasímisma:

Elnombredelafunción

arguments.callee

Unavariableenelámbitoenelqueserefierealafunción

Porejemplo,considerelasiguientedefinicióndefunción:

varfoo=functionbar(){

//lassentenciasvanaqui

};

Dentrodelcuerpodelafunción,todolosiguienteesequivalente:

bar()

arguments.callee()

foo()

Unafunciónquesellamaasímismasedenominaunafunciónrecursiva.Enciertomodo,la

recursividadesanálogaaunbucle.Ambosejecutanelmismocódigovariasveces,yambos

requierenunacondición(paraevitarunbucleinfinito,omásbien,larecursividadinfinitaeneste

caso).Porejemplo,elsiguientebucle:

varx=0;

while(x<10){//"x<10"eslacondiciondelbucle

//hacercosas

x++;

}

sepuedeconvertirenunafunciónrecursivayunallamadaaesafunción:

functionloop(x){

if(x>=10)//"x>=10"eslacondiciondesalida(equivalentea"!(x<10)")

return; //hacercosas

loop(x+1);//lallamadarecursiva

}

loop(0);

Sinembargo,algunosalgoritmosnopuedenserbuclesiterativossimples.Porejemplo,obtener

todoslosnodosdeunaestructuradeárbol(p.ej.elDOM)esmásfácilutilizandorecursividad:

functionwalkTree(node){ if(node==null)// return; //haceralgunacosaconelnodo

for(vari=0;i<node.childNodes.length;i++){

walkTree(node.childNodes[i]);

}

}

Encomparaciónconlafunciónloop(definidaanteriomente),aquí(enelejemplowalkTree)cada

llamadarecursivaasímisma,hacemuchasllamadasrecursivas.

Esposibleconvertircualquieralgoritmorecursivoaunono-recursivo,peroamenudolalógica

esmuchomáscomplejayhacerlorequiereelusodeunapila.Dehecho,larecursividadensí

mismautilizaunapila:lapiladelafunción.

Elcomportamientotipo-pilapuedeservistoenelsiguienteejemplo:

functionfoo(i){

if(i<0)

return; console.log('inicio:'+i);

foo(i-1);

console.log('final:'+i);

}

foo(3);

//Salida:

//inicio:3

//inicio:2

//inicio:1

//inicio:0

//final:0

//final:1

//final:2

//final:3

Funcionesanidadasycierres

Sepuedeanidarunafuncióndentrodeunafunción.Lafunciónanidada(interna)esprivadaa

sufuncióncontenedora(externa).Tambiénformauncierre.Uncierre,esunaexpresión

(típicamenteunafunción)quepuedetenervariableslibresjuntoconunentornoqueataesas

variables(que"cierra"laexpresión).

Dadoqueunafunciónanidadaesuncierre,estosignificaqueunafunciónanidadapuede

"heredar"losargumentosyvariablesdesufuncióncontenedora.Enotraspalabras,lafunción

internacontieneelámbitodelafunciónexterna.xnmll.

Lafuncióninternasólosepuedeaccederapartirdesentenciasdentrodelafunciónexterna.

Lafuncióninternaformauncierre:lafuncióninternapuedeutilizarlosargumentosyvariables

delafunciónexterna,mientrasquelafunciónexternanopuedeutilizarlosargumentosylas

variablesdelafuncióninterna.

Elsiguienteejemplomuestrafuncionesanidadas:

functionaddSquares(a,b){

functionsquare(x){

returnx*x;

}

returnsquare(a)+square(b);

}

a=addSquares(2,3);//retorna13

b=addSquares(3,4);//retorna25

c=addSquares(4,5);//retorna41

Dadoquelafuncióninternaformauncierre,sepuedellamaralafunciónexternayespecificar

argumentosparaambas,tantoparalafunciónexternacomoparalainterna:

functionoutside(x){

functioninside(y){

returnx+y;

}

returninside;

}

fn_inside=outside(3);//Pensarenestocomo:darunafuncionquesuma3aloqueseaque

des

result=fn_inside(5);//retorna8

result1=outside(3)(5);//retorna8

Preservacióndevariables

Observacómoxseconservacuandoinsideesretornada.Uncierredebepreservarlos

argumentosyvariablesdentrodetodoslosámbitosquereferencía.Dadoquecadallamada

proporcionapotencialmentediferentesargumentos,unnuevocierreescreadoparacada

llamadaaoutside.Lamemoriapuedeserliberadasólocuandola(función)insideretornada

yanoesaccesible.

Estonoesdiferentedealmacenarreferenciasenotrosobjetos,peroamenudoesmenos

evidenteporqueunonoestablecelasreferenciasdirectamenteynopuedeinspeccionarlas.

FuncionesMulti-anidadas

Lasfuncionespuedensermulti-anidadas,p.ejunafunción(A)quecontieneunafunción(B)que

contieneunafunción(C).AquiambasfuncionesByCformancierres,asíqueBpuedeacceder

A,yCpuedeaccederB.Además,dadoqueCpuedeaccederB,lacualpuedeaccederA,

entoncesCpuedetambiénaccederA.Enconsecuencia,loscierrespuedencontenermúltiples

ámbitos;quecontienendeformarecursivaelámbitodelasfuncionesqueloscontienen.Esto

seconocecomoencadenamientodeámbito.(¿Porquéselellama"encadenamiento"se

explicarámásadelante.)

Considereelsiguienteejemplo:

functionA(x){

functionB(y){

functionC(z){

console.log(x+y+z);

}

C(3);

}

B(2);

}

A(1);//registra6(1+2+3)

Enesteejemplo,CaccedeaydeByaxdeA.Estosepuedehacerporque:

BformauncierrequeincluyeA,esdecirBpuedeaccederalosargumentosyvariablesdeA.

CformauncierrequeincluyeB.

DebidoaqueelcierredeBincluyeaA,yelcierredeCincluyeaA,estopermitequeCpuede

accederalosargumentosyvariablesdeByA.Enotraspalabras,Cencadenalosámbitosde

ByAeneseorden.

Locontrario,sinembargo,noescierto.AnopuedeaccederaC,yaqueAnopuedeaccedera

ningunargumentoovariabledeB,delqueCesunavariable.Así,queCpermanceprivadosólo

paraB.

Conflictosdenombres

Cuandodosargumentosovariablesenlosámbitosdeuncierretienenelmismonombre,ocurre

unconflictodenombre.Losámbitosmásinternostomanprecedencia,asiqueelambitomás

internodetodostomalaprecedenciamásalta,mientrasqueelámbitomásexternotomala

másbaja.Estaeslacadenadeámbito.Elprimeroenlacadenaeselámbitomásinternode

todos,yelúltimo,eselámbitomásexterno.Considerelosiguiente:

functionoutside(){

varx=10;

functioninside(x){

returnx;

}

returninside;

}

result=outside()(20);//retorna20enlugarde10

Elconflictodenombressucedeenlasentenciareturnxyesentreelparámetroxdeinsideyla variablexdeoutside.Aquílacadenadeámbitoes{inside,outside,objetoglobal}.Porlotanto,x

deinsidetomaprecedenciasobrexdeoutside,y20(laxdeinside)sedevuelveenlugarde10

(laxdeoutside).

Clausuras(ocierres)

Lasclausuras(informalmentellamadascierres)sonunadelascaracterísticasmáspoderosas

deJavaScript.JavaScriptpermitedebidoalanidamientodefuncionesyconcesionesala

funcióninterna,elaccesototalatodaslasvariablesyfuncionesdefinidasdentrodelafunción

externa(yatodaslasvariablesyfuncionesalascualeslafunciónexternatieneacceso).Sin

embargo,lafunciónexternanotieneaccesoalasvariablesyfuncionesdefinidasdentrodela

funcióninterna.Estoproveeunaespeciedeseguridadalasvariablesdelafuncióninterna.

Además,yaquelafuncióninternatieneaccesoalámbitodelafunciónexterna,lasvariablesy

funcionesdefinidasenlafunciónexternaviviránmástiempoquelafunciónexternaensí

mismasilafuncióninternalasadministraparasobrevivirmásalládelciclodevidadela

funciónexterna.Unaclausuraescreadacuandolafuncióninternaes,dealgunamanera,hecha

disponibleacualquierámbitofueradelafunciónexterna.

varpet=function(name){

vargetName=function(){

returnname;

lafuncionexterna

//Lafuncionexternadefineunavariablellamada"name"

//Lafuncioninternatieneacesoalavariable"name"de

}

returngetName;

//Devolverlafuncioninterna,porlotantoexponiendola

aunambitoexterior

},

myPet=pet("Vivie");

myPet();

Estopuedesermuchomáscomplejoqueelcódigoanterior.Puedeserretornadounobjetoque

contienemétodosparamanipularlasvariablesinternasdelafunciónexterna.

//Devuelve"Vivie"

varcreatePet=function(name){

varsex;

return{

setName:function(newName){

name=newName;

},

getName:function(){

returnname;

},

getSex:function(){

returnsex;

},

setSex:function(newSex){

if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase()=="female")){ sex=newSex;

}

}

}

}

varpet=createPet("Vivie");

pet.getName();

pet.setName("Oliver");

pet.setSex("male");

//Vivie

pet.getSex();

//male

pet.getName();

//Oliver

Enelcódigoanterior,lavariablenamedelafunciónexternaesaccesibledesdelasfunciones

internas,ynohayotraformadeaccederalasvariablesinternasexceptoatravésdelas

funcionesinternas.Lasvariablesinternasdelasfuncionesinternasactúancomo

almacenamientossegurosparalasvariablesyargumentosexternos.Mantienen"persistente",y

aúnsegura,lainformaciónconlaquenecesitantrabajarlasfuncionesinternas.Lasfunciones

inclusonotienenporqueserasignadasaunavariable,otenerunnombre.

vargetCode=(function(){ varsecureCode="0]Eal(eh&2"; //Uncodigoquenoqueremosqueexternosseancapaces demodificar

returnfunction(){

returnsecureCode;

};

})();

getCode(); //Retornaelcodigosecreto Hay,sinembargo,unaserieobstáculosavigilarcuandoseusanclausuras.Siunafunción encerradadefineunavariableconelmismonombrequeunavariabledentrodelámbitoexterior, nohayformareferirsedenuevoalavariabledelámbitoexterior.

varcreatePet=function(name){//lafuncionexternadefineunavariablellamada"name" return{ setName:function(name){ //lafuncionencerradatambiendefineunavariablellamada "name"

//¿¿¿Comoaccedemosla"name"definidaporlafuncion

externa???

name=name;

}

}

}

Lavariablemágicathisesmuytramposaenlasclausuras.Debendeserusadas

cuidadosamente(lasclausurasqueusanthis),elmodoenquethisserefieredepende

completamentedeendondelafunciónfuellamada,enlugardeendondefuedefinida.

Unexcelenteyelaboradoartículosobreclosurespuedeencontrarseaqui.

Usandoelobjetoarguments

Losargumentosdeunafunciónsonmantenidosenunobjetosimilaraunarray.Dentrodeuna

función,losargumentospasadosalamismapuedenserdireccionadosdelasiguienteforma:

arguments[i] dondeieselnúmeroordinaldelargumento,comenzandodesdecero.Entonces,elprimer

argumentopasadoaunafunciónseríaarguments[0].Elnúmerototaldeargumentoses

mostradoporarguments.length.

Usandoelobjetoarguments,sepuedellamarunafunciónconmásargumentosdelosque

formalmentefuerondeclaradosquepuedeaceptar.Estoesamenudomuyútilcuandonose

sabeconantelacióncuantosargumentosseránpasadosalafunción.Sepuedeusar

arguments.lengthparadeterminarelnúmerodeargumentosrealmentepasadosalafunción,y

luegoaccederacadaargumentousandoelobjetoarguments.

Porejemplo,consideremosunafunciónqueconcatenavariascadenasdecaracteres(strings).

Elúnicoargumentoformalparalafunciónesunastringqueespecificaloscaracteresque

separanloselementosaconcatenar.Lafunciónesdefinidadelasiguienteforma:

functionmyConcat(separator){ varresult="",//initializelist i; //iteratethrougharguments

for(i=1;i<arguments.length;i++){

result+=arguments[i]+separator;

}

returnresult;

}

Sepuedenpasarcualquiernúmerodeargumentosaestafunción,ylamismaconcatenarácada

argumentoenuna"lista"destrings:

//returns"red,orange,blue,"

myConcat(",","red","orange","blue");

//returns"elephant;giraffe;lion;cheetah;"

myConcat(";","elephant","giraffe","lion","cheetah");

//returns"sage.basil.oregano.pepper.parsley."

myConcat(".","sage","basil","oregano","pepper","parsley");

Lavariableargumentsesde"estiloarray",peronoesunarray.

Parámetrosdefuncion

ApartirdeECMAScript6,haydosnuevostiposdeparámetros:Parámetrospordefectoy los parámetrosREST.

Parámetropordefecto

EnJavaScript,losparámetrosdefuncionesestánestablecidospordefectoaundefined.Sin

embargo,enciertassituacionespuedeserútilestablecerlosaunvalorsuministradopordefecto

diferente.Esentoncescuandolosparámetrospordefectopuedenayudar.

Enelpasado,laestrategiageneralparaestablecerlosparámetrospordefectoeracomprobar losvaloresdeéstosenelcuerpodelafunciónyasignarunvalorsiestoseranundefined.Sien elsiguienteejemploningúnvaloressuministradoparabduranteelllamado,suvalorsería undefinedcuandoseevalúea*b;ylallamdade multiply retornaríaNaN.Sinembargo,esto seevitaconlasegundalíneaenesteejemplo:

functionmultiply(a,b){

b=typeofb!=='undefined'?b:1;

returna*b;

}

multiply(5);//5

Conlosparámetrospordefecto,lacomprobaciónenelcuerpodelafunciónyanoesnecesaria.

Ahora,puedesimplementeponer1comovalorpordefectoparabenlacabezadelafunción.

functionmultiply(a,b=1){

returna*b;

}

multiply(5);//5

Paramásdetalles,puedeconsultarparámetrospordefectoenlareferencia.

Parámetrosrest

Lasyntaxisdeparámetrosrest(eninglés)nospermiterespresentarunnúmeroindefinidode

argumentosenformadearray.Enelejemplo,usamoslosparámetrosrestpararecolectarlos

argumentosapartirdelsegundoyhastaelfinal.Entonceslosmultiplicamosporelprimero.

Esteejemploestáusandounafunciónflecha,lacualesintroducidaenlasiguientesección.

functionmultiply(multiplier, theArgs){ returntheArgs.map(x=>multiplier*x);

}

vararr=multiply(2,1,2,3);

console.log(arr);//[2,4,6]

Funcionesflecha

Unaexpresióndefunciónflecha(tambiénconocidacomofunciónflechagruesaofatarrow functioneninglés)tieneunasintaxismáscortacomparadaconlasexpresionesdefuncióny nottienesupropiothis,arguments,superonew.target.Lasfuncionesflechasonsiempre

funcionesanónimas.Véasetambiénestaentradaenelbloghacks.mozilla.org:"ES6InDepth:

Arrowfunctions"(eninglés).

Dosfactoresinfluenciaronlaintroducióndelasfuncionesflecha:funcionesmáscortasyel

léxicothis.

Funcionesmáscortas

Enalgunospatronesfuncionales,lasfuncionesmáscortassonbienvenidas.Compare:

vara=[

"Hydrogen",

"Helium",

"Lithium",

"Beryl­lium"

];

vara2=a.map(function(s){returns.length});

vara3=a.map(s=>s.length);

Sinpropiothis

Hastaantesdelasfuncionesflecha,cadanuevafuncióndefiníasupropiovalorthis(unnuevo

objectoenelcasodeunconstructor,nodefinidoenllamadaafuncionesenmodoestricto,el

objetodecontextosilafuncionesllamadacomoun"metododeobjeto",etc.).Estoprobóser

molestoenunestilodeprogramaciónorientadaaobjetos.

functionPerson(){ //ElconstructorPerson()define`this`comoelmismo.

this.age=0;

setInterval(functiongrowUp(){ //Enmodonoestricto,lafunciongrowUp()define`this` //comoelobjetoglobal,elcualesdiferentedeel`this` //definidoporelconstructorPerson(). this.age++;

},1000);

}

varp=newPerson(); EnECMAScript3/5,estofuesolucionadoasignadoelvalorcontenidoporthisa unavariable sobrelaquesepodíacerrar(oclausurar).

functionPerson(){

varself=this;//Algunoseligen`that`enlugarde`self`.

//Elijaunoyseaconsistente.

self.age=0;

setInterval(functiongrowUp(){ //Laretrollamadaserefierealavariable`self`delacual //elvaloreselobjetoesperado. self.age++;

},1000);

}

Alternativamente,unafunciónligadapodríasercreadademodoqueelpropiovalorde this

seríapasadoalafuncióngrowUp().

Lasfuncionesflechacapturanelvalordethisdelcontextocircundante,porloqueelsiguiente

códigofuncionacomoseespera.

functionPerson(){

this.age=0;

setInterval(()=>{ this.age++;//|this|serefiereapropiadamentealobjetoinstanciadePerson.

},1000);

}

varp=newPerson();

InteraccióndeJavaScriptenHTML

HaydosformasdeincluirJavaScriptenHTMLyhacerquefuncionenjuntos,lasformasenque

podemosconectarJavaScriptconHTML.AgregarJavaScriptdirectamenteaunarchivoHTML

LaprimeraformadeinsertarJavaScriptenHTMLesdirecta.Puedeshacerloutilizandola

etiqueta<script></script>quedebeenvolvertodoelcódigoJSqueescribas.Sepuedeagregar

elcódigoJS:

entrelasetiquetas<head>

entrelasetiquetas<body>

DependiendodedóndeagregueselcódigoJavaScriptentuarchivoHTML,lacargaserá

diferente.Porlogeneralserecomiendaagregarloenlasección<head>paraquepermanezca

separadodelcontenidodetuarchivoHTML.Perocolocarlodentrode<body>puedeayudara

mejorarlavelocidaddecarga,yaqueelcontenidodelsitiowebsecargarámásrápido,ysolo

despuésdeesoseprocesaráelJavaScript.Paraesteejemplo,echemosunvistazoalsiguiente

archivoHTMLquedebemostrarlahoraactual:

<!DOCTYPEhtml> <htmllang="en-US"> <head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1">

<script>JAVASCRIPTISUSUALLYPLACEDHERE</script>

<title>Timerightnowis:</title>

</head>

<body>

<script>JAVASCRIPTCANALSOGOHERE</script>

</body>

</html>

Enestemomento,elcódigoanteriornocontieneJavaScripty,porlotanto,nopuedemostrarla

hora.Podemosagregarelsiguientecódigoparaasegurarnosdequemuestrelahoracorrecta:

vartime=newDate();

console.log(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

Envolveremosestecódigoconlasetiquetas<script>y</script>ylocolocaremosenla

cabecera(head)delcódigoHTMLparagarantizarquecadavezquesecarguelapágina,se

genereunaalertaquemuestrelahoraactualalusuario.AsíescomoseveráelarchivoHTML

despuésdeagregarelcódigo:

<!DOCTYPEhtml> <htmllang="en-US"> <head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1">

<title>Timerightnowis:</title>

<script>

vartime=newDate();

console.log(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

</script>

</head>

<body>

</body>

</html>

Siquieresmostrarlahoradentrodelcuerpo(body)delapágina,deberásincluirlascriptdentro

delasetiquetas<body>delapáginaHTML.Asíescomoseveráelcódigocuandolohagas:

<!DOCTYPEhtml> <htmllang="en-US"> <head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1">

<title>Timerightnowis:</title> </head> <body> <script> letd=newDate();

document.body.innerHTML="<h1>Timerightnowis:"+d.getHours()+":"+d.getMinutes()+

":"+d.getSeconds()

"</h1>"

</script>

</body>

</html>

Queesjquery?

jQueryesunabibliotecamultiplataformadeJavaScript,creadainicialmenteporJohnResig,que permitesimplificarlamaneradeinteractuarconlosdocumentosHTML,manipularelárbolDOM, manejareventos,desarrollaranimacionesyagregarinteracciónconlatécnicaAJAXapáginas

web.Fuepresentadael14deenerode2006enelBarCampNYC.Deacuerdoaunanálisisdela

Web(realizadoen2017)JQueryeslabibliotecadeJavaScriptmásutilizada,porunamplio

margen. jQueryessoftwarelibreydecódigoabierto,poseeundoblelicenciamientobajolaLicenciaMIT

ylaLicenciaPúblicaGeneraldeGNUv2,permitiendosuusoenproyectoslibresyprivados.

jQuery,aligualqueotrasbibliotecas,ofreceunaseriedefuncionalidadesbasadasen

JavaScriptquedeotramanerarequeriríandemuchomáscódigo,esdecir,conlasfunciones

propiasdeestabibliotecaselograngrandesresultadosenmenostiempoyespacio.

InteracciónjqueryJavascript

jQueryestádiseñadoparacambiarlaformaenqueescribimosJavaScript.jQueryessoftware libreydecódigoabierto,permitiendosuusoencualquierproyecto.jQuery,aligualqueotras bibliotecas,ofreceunaseriedefuncionalidadesbasadasenJavaScriptquedeotramanera requeriríandemuchomáscódigo,esdecir,conlasfuncionespropiasdeestabibliotecase lograngrandesresultadosenmenostiempoyespacio.Lacaracterísticaprincipaldela bibliotecaesquepermitecambiarelcontenidodeunapáginawebsinnecesidadderecargarla, mediantelamanipulacióndelárbolDOMypeticionesAJAX.ParaelloutilizalafunciónjQuery() osuformaabreviada$().jQueryconsisteenunúnicoficheroJavaScriptquecontienelas funcionalidadescomunesdeDOM,eventos,efectosyAJAX.Estearchivo(enelmomentode

escribiresto,laultimaversióndejQueryesla1.8.0,porlotantoelarchivoeseljquery-1.8.0.js)

lopodemosbajardelsitiooficialdejQuery.

Existendosversionesdelarchivo,unoparadesarrollo(jquery-1.8.0.js)de252KByotropara

producción(jquery-1.8.0.min.js)de32KB.

Unavezbajado,parautilizarloenunapáginaweb,debemosreferenciarloenlasección<head>

delapágina,delasiguientemanera:

<scripttype="text/javascript"src="jquery-1.8.0.js"/>

JqueryysufunciONenhtml

funciónjQueryhtml()podemosobtenercódigohtmldeunnododelDOMoasignárselo.Deesta

manerapodremosmanipulardeunamanerafácillosdiferenteselementosquehayenuna

páginaweb.

Secomplementaperfectamenteconlasfuncionesget()ypost().Otrasfuncionessimilaresson:

load()

empty()yremove()

text()

addClass()yremoveClass()

append(),prepend()yafter()

SintaxisdejQueryhtml()

VamosarepasarlassintaxisdeestafuncióndejQueryextraídadelaweboficial:

$(selector).html() $(selector).html(contenido)

Osexplicolas2manerasquehaydereferenciarla:

EnlaprimerallamadaobtendríamoselcontenidoHTMLdelprimernodoquecoincidaconel

selector.

Enlasegundaasignaríamosundeterminadocontenidoatodoslosnodosquecoincidanconel

selector.

Talycomohemosvisto,estafunciónescapazdeasignarcontenidouobtenerelcontenidode

undeterminadonododelDOM.

EjemplodejQueryhtml()paraobtenerelcontenidodeunnododelDOM

VamosconesteprimerejemploparavercómopodemosobtenerelvalordeunnododelDOM:

<!--libreriajquery--> <script

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script> $(document).ready(function(){

$("#boton01").click(function(){

alert($("p").html());

});

});

</script>

type='text/javascript'

QuéesAJAX?

AJAXsignificaJavaScriptasíncronoyXML(AsynchronousJavaScriptandXML).Esun

conjuntodetécnicasdedesarrollowebquepermitenquelasaplicacioneswebfuncionende

formaasíncrona,procesandocualquiersolicitudalservidorensegundoplano.

Elusodeajax

LaprimeraimpresiónquehetenidosobreelusodeAjaxenjQueryesrealmentegrata,porla facilidadconlaquesepuederealizarunprimerejemplo.Setratadeunejemplo extremadamentesencillo,perosirveparaabrirnoslaspuertasamuchasaplicaciones interesantes.HabíamosvistoenotrosframeworksJavascriptejemplossimilares,comoenel artículoAjaxconMootools,perotenemosquequitarnoselsombreroantelaextremada sencillezconlaquesepuedehacerunejemplosimilarenjQuery.Seasuficientedecirqueen

esteejemplodeAjaxutilizaremostansólo4líneasdecódigo,delascualessólo1espara

ejecutarlapropiallamadaalservidorporAjax.

TraeruncontenidoconAjaxalpulsarunenlace

EnestesencilloejemploharemosllamadaaAjax,paratraeruncontenido,cuandosepulseun

enlace.EstolohemospuestoenmarchaenelservidordeDesarrolloWeb.comoylopuedesver

enunapáginaaparte.

Aquípodemosverelenlace,alqueponemosunidentificador(atributoid)paraseleccionarlo

desdejQuery.

<ahref="#"id="enlaceajax">Hazclic!</a>

SihemosleídohastaaquíelManualdejQuerypodremossabercómoasignaruneventoaun

enlace.Noobstante,recordemoscómoasignarunafunciónparacuandosehagaclicenel

enlace:

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

//eliminoelcomportamientopordefectodelenlace

evento.preventDefault();

//AquípondríaelcódigodelallamadaaAjax

})

});

YasetratasólodeponerenmarchaAjaxdentrodelafuncióndelevento"click"sobreelenlace.

Peroantesvoyanecesitarunacapadondemostrarelcontenidoquevamosarecibirdel

servidorconlallamadaAjax.Lepondremosid="destino"parapoderreferirnosaelladesde

jQuery:

Yahoralapartemásinteresante,dondepodemosverquétanfácilessonlascosasconeste

frameworkJavascript.Unaúnicalíneadecódigoserásuficiente:

$("#destino").load("contenido-ajax.html");

ConestasimplesentenciaestamosrealizandounallamadaaAjaxconjQuery.Esunasimple

invocaciónalmétodoload()deunelementodelapágina,enconcretoelquehabíamospuesto

conid="destino".Almétodoload()lepasamoscomoparámetrolarutadelapáginaque

queremoscargardentrodelelemento.

Elarchivoquecargamosconload()enesteejemploes"contenido-ajax.html"ysimplementele

hemoscolocadountextocualquiera.Lohemosguardadoenelmismodirectorioquelapágina

webdondeestáelscriptjQuery.

paraqueesteejemplofuncionedebecolocarseenunservidorweb,puestoquelallamadapor

Ajaxsehaceporhttpyelarchivoquesecargaentoncestienequerecibirseporunservidorweb,

quelomandeconeseprotocoloalnavegador.Siponeslosarchivosentudiscoduroylos

ejecutastalcual,notefuncionará.Puedesutilizarcualquierespaciodehostingquetengaso

bienunservidorwebquepuedastenerinstaladoentuordenador.

Asídesimple!Podemosverelcódigocompletodeesteejemplo:

<html> <head> <title>AjaxSimple</title>

<scriptsrc="jquery-1.3.2.min.js"type="text/javascript"></script>

<script>

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

evento.preventDefault();

$("#destino").load("contenido-ajax.html");

});

})

</script>

</head>

<body>

<ahref="#"id="enlaceajax">Hazclic!</a>

<br>

<divid="destino"></div>

</body>

</html>

Basesdeinteracciondelostrestiposdelenguajesquesepuedelograrlos

resultadosdeunapáginaweb?

Conestostrestiposdelenguajessepuedelograrquelapaginawebseadinámicaquepermita

alusuariosinteractuarconlapáginaenlacualquierasinformarconstantementeelcontenido

delapaginawebparaofrecermayorposibilidaddedesarrolloquetengaunacapacidadeficaz

encadaunodeestostiposdelenguajes,ytienenunaexpectativaparaimplementarsu

interacciónypoderllevaracabosufunción