Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 1 de 121
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 2 de 121
Introducción:ManualdeJavaScript
ManualdeJavascriptdesdecero.Adéntrateenellenguajedeprogramaciónmáspopulardelawebyconocetodaslascaracterísticasdelaprogramacióndelladodelcliente.
Javascriptesellenguajedeprogramaciónusadoparalaspáginasweb,compatiblecontodoslosnavegadoresyqueformaunestándardedesarrolloqueahoratambiénseextiendeadispositivosoprogramasdepropósitogeneralmultiplataforma.
EstemanualdeJavascriptestádivididoendosgrandespartes.Enlaprimeraparteveremoslascaracterísticasfundamentalesdellenguaje,comosusintaxis,variables,estructurasdecontrol,funciones,arrays,etc.TodalainformaciónqueencontrarásenlaprimerapartetesirveparaprogramarJavascriptanivelgeneral,seadondeseaelentornodeejecucióndetusprogramas.
Enlasegundaparte,quetambiénencontrarásenestamismapágina,ahondaremosenelusodeJavascriptenelámbitodelnavegador,esdecir,aprenderemosamanejarlosrecursosquenosofreceelnavegadorparahacerpáginasinteractivas,capacesdeinteractuarconelusuariodemaneraavanzada.
Encuentrasestemanualonlineen:http://desarrolloweb.com/manuales/manual-javascript.html
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 3 de 121
Autoresdelmanual
Lassiguientespersonashanparticipadocomoautoresescribiendoartículosdeestemanual.
MiguelAngelAlvarez
MiguelesfundadordeDesarrolloWeb.comylaplataformadeformaciónonlineEscuelaIT.Comenzóenelmundodeldesarrollowebenelaño1997,transformandosuhobbyensutrabajo.
ManuGutierrez
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 4 de 121
IntroduccionesaJavascript
Artículosquenosserviránparaintroducirnosenestelenguaje,aprendiendolosconceptosmásbásicosdeJavascriptylaprogramacióndelladodelcliente.
IntroducciónaJavascript
VeamosquéesJavaScriptylasposibilidadesquenosofreceutilizarestelenguajealahoradedesarrollarpáginasweb.Conocemosalgodesuhistoria.
ConesteartículocomenzamoselManualdeJavascript,enelqueesperamosofrecerunpuntodepartidaparalaspersonasquequierenintroducirseenelmundodelaprogramaciónwebdelladodelcliente.
ElcursodeJavascriptquehemospreparadoenDesarrolloWeb.comestádivididoendospartesfundamentales.EnesteprimermanualpretendemosexplicarellenguajeJavascriptdemanerageneral,ofreciendoinformaciónsobrecómoincluirscriptsylidiarconloselementosmásbásicosdecualquierlenguajedeprogramación,comosonlasvariables,operadores,estructurasdecontrol,funciones,etc.LasegundapartedelmanualladedicaremosaexplorartemasmásespecíficossobrecómoJavascriptnospuedeayudaraaplicardinamismoaunapáginaweb,atravésdelcontroldinámicodeelementosdelapáginaylainteracciónconelusuario.
Nota:Portanto,enesteprimermanualencontraréisqueseofrecemuchamásinformaciónteóricatípicasobrelenguajesdeprogramación.Seráesencialparasabercómodarlosprimerospasosenlaprogramación,peroquizásresulteunpocomásaburridaquelasegundaparte,dondeaprenderemosaalterardinámicamentelapáginaweb,responderaaccionesdelusuario,etc.
Nosotroshemosqueridoexplicarlascosascondetenimiento,paraqueaprenderJavascriptconestemanualestéalalcancedepersonasinclusosinconocimientosdeprogramación.Noobstante,enDesarrolloWeb.comexistendiversosmanualesmásbásicostodavíaparaaprenderaprogramar,comopuedeserelcursodeprogramaciónenvídeo,omásespecíficosparalawebconelmanualdePáginasdinámicasolaintroducciónalaprogramación.
Sinembargo,quizáspersonasmásexperimentadaspuedanpreferirpasardirectamentealasegundapartedeestemanual,dondeexplicaremoscosasmásprácticasyvolversobreartículospuntualesdeestemanualparautilizarloscomoreferenciaamedidaquevayannecesitandoconocerlasintaxisdedeterminadasestructurasdecontrol,operadoresdellenguaje,construccióndefunciones,etc.
EnesteartículopretendemosexplicarquéesJavascriptyparaquésirveestelenguaje,almenosenlíneasgenerales.Alolargodeésteylospróximosartículosexplicaremoslos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 5 de 121
conceptosnecesariosparaquelaspersonastenganunaideamásomenosclarasobreJavascript,lasposibilidadesdedellenguajeousosmáscomunesylosmodosdetrabajoquepodemosemplearparadesarrollarnuestrospropiosscripts.
Nota:OtrorecursoquequeremosrecomendarparaaprenderJavascript,especialmenteindicadoparalaspersonasconmenosexperiencia,eselVideotutorialdeJavascript.Porsupuesto,tampoconosqueremosolvidardelosTalleresdeJavascript,asícomootrosmanualesmásespecíficosqueencontrarásenlasecciónJavascriptafondo.
QuéesJavascript
Javascriptesunlenguajedeprogramaciónutilizadoparacrearpequeñosprogramitasencargadosderealizaraccionesdentrodelámbitodeunapáginaweb.ConJavascriptpodemoscrearefectosespecialesenlaspáginasydefinirinteractividadesconelusuario.ElnavegadordelclienteeselencargadodeinterpretarlasinstruccionesJavascriptyejecutarlaspararealizarestosefectoseinteractividades,demodoqueelmayorrecurso,ytalvezelúnico,conquecuentaestelenguajeeselpropionavegador.
Javascripteselsiguientepaso,despuésdelHTML,quepuededarunprogramadordelawebquedecidamejorarsuspáginasylapotenciadesusproyectos.Esunlenguajedeprogramaciónbastantesencilloypensadoparahacerlascosasconrapidez,avecesconligereza.Inclusolaspersonasquenotenganunaexperienciapreviaenlaprogramaciónpodránaprenderestelenguajeconfacilidadyutilizarloentodasupotenciaconsólounpocodepráctica.
EntrelasaccionestípicasquesepuedenrealizarenJavascripttenemosdosvertientes.Porunladolosefectosespecialessobrepáginasweb,paracrearcontenidosdinámicosyelementosdelapáginaquetenganmovimiento,cambiendecolorocualquierotrodinamismo.Porelotro,javascriptnospermiteejecutarinstruccionescomorespuestaalasaccionesdelusuario,conloquepodemoscrearpáginasinteractivasconprogramascomocalculadoras,agendas,otablasdecálculo.
Javascriptesunlenguajeconmuchasposibilidades,permitelaprogramacióndepequeñosscripts,perotambiéndeprogramasmásgrandes,orientadosaobjetos,confunciones,estructurasdedatoscomplejas,etc.TodaestapotenciadeJavascriptseponeadisposicióndelprogramador,queseconvierteenelverdaderodueñoycontroladordecadacosaqueocurreenlapágina.
Enestemanualvamosatratardeacercarnosaestelenguajeenprofundidadyconocertodossussecretosymétodosdetrabajo.AlfinaldelmanualseremoscapacesdecontrolarelflujoennuestrosprogramasJavascriptysabercómocolocarscriptspararesolverdistintasnecesidadesquepodamostener.Todoloqueveremosacontinuaciónnosservirádebaseparaadentrarnosmásadelanteeneldesarrollodepáginasenriquecidasdelladodelcliente.
AlgodelahistoriadeJavascript
EnInternetsehancreadomultituddeserviciospararealizarmuchostiposdecomunicaciones,
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 6 de 121
comocorreo,charlas,búsquedasdeinformación,etc.PeroningunodeestosserviciossehadesarrolladotantocomoelWeb.Siestamosleyendoestaslíneasnovamosanecesitarningunaexplicacióndeloqueeselweb,perosipodemoshablarunpocosobrecómosehaidodesarrollandoconelpasodelosaños.
ElWebesunsistemaHipertexto,unacantidaddedimensionesgigantesdetextosinterrelacionadospormediodeenlaces.Cadaunadelasunidadesbásicasdondepodemosencontrarinformaciónsonlaspáginasweb.Enunprincipio,paradiseñarestesistemadepáginasconenlacessepensóenunlenguajequepermitiesepresentarcadaunadeestasinformacionesjuntoconunospequeñosestilos,estelenguajefueelHTML.
ConformefuecreciendoelWebysusdistintosusossefueroncomplicandolaspáginasylasaccionesquesequeríanrealizaratravésdeellas.AlpocotiempoquedópatentequeHTMLnoerasuficientepararealizartodaslasaccionesquesepuedenllegaranecesitarenunapáginaweb.Enotraspalabras,HTMLsehabíaquedadocortoyaquesólosirveparapresentareltextoenunpágina,definirsuestiloypocomás.
Alcomplicarselossitiosweb,unadelasprimerasnecesidadesfuequelaspáginasrespondiesenaalgunasaccionesdelusuario,paradesarrollarpequeñasfuncionalidadesmásalládelospropiosenlaces.ElprimerayudanteparacubrirlasnecesidadesqueestabansurgiendofueJava,queesunlenguajedepropósitogeneral,peroquehabíacreadounamaneradeincrustarprogramasenpáginasweb.AtravésdelatecnologíadelosApplets,sepodíacrearpequeñosprogramasqueseejecutabanenelnavegadordentrodelaspropiaspáginasweb,peroqueteníanposibilidadessimilaresalosprogramasdepropósitogeneral.LaprogramacióndeAppletsfueungranavanceyNetscape,poraquelentonceselnavegadormáspopular,habíarotolaprimerabarreradelHTMLalhacerposiblelaprogramacióndentrodelaspáginasweb.NocabedudaquelaaparicióndelosAppletssupusoungranavanceenlahistoriadelweb,peronohasidounatecnologíadefinitivaymuchasotrashanseguidoimplementandoelcaminoquecomenzóconellos.
LlegaJavascript
Netscape,despuésdehacersusnavegadorescompatiblesconlosapplets,comenzóadesarrollarunlenguajedeprogramaciónalquellamóLiveScriptquepermitiesecrearpequeñosprogramasenlaspáginasyquefuesemuchomássencillodeutilizarqueJava.DemodoqueelprimerJavascriptsellamoLiveScript,peronodurómuchoesenombre,puesantesdelanzarlaprimeraversióndelproductoseforjóunaalianzaconSunMicrosystems,creadordeJava,paradesarrollarenconjuntoesenuevolenguaje.
LaalianzahizoqueJavascriptsediseñaracomounhermanopequeñodeJava,solamenteútildentrodelaspáginaswebymuchomásfácildeutilizar,demodoquecualquierpersona,sinconocimientosdeprogramaciónpudieseadentraseenellenguajeyutilizarloasusanchas.Además,paraprogramarJavascriptnoesnecesariounkitdedesarrollo,nicompilarlosscripts,nirealizarlosenficherosexternosalcódigoHTML,comoocurríaconlosapplets.
Netscape2.0fueelprimernavegadorqueentendíaJavascriptysuestelafueseguidaporotrosclienteswebcomoInternetExplorerapartirdelaversión3.0.Sinembargo,lacompañíaMicrosoftnombróaestelenguajecomoJScriptyteníaligerasdiferenciasconrespectoa
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 7 de 121
Javascript,algunasdelascualesperduranhastaeldíadehoy.
Diferenciasentredistintosnavegadores
ComohemosdichoelJavascriptdeNetscapeyeldeMicrosoftInternetExplorerteníaligerasdiferencias,peroesquetambiénelpropiolenguajefueevolucionandoamedidaquelosnavegadorespresentabansusdistintasversionesyamedidaquelaspáginaswebsehacíanmásdinámicasymásexigenteslasnecesidadesdefuncionalidades.
LasdiferenciasdefuncionamientodeJavascripthanmarcadolashistoriadellenguajeyelmodoenelquelosdesarrolladoresserelacionanconél,debidoaqueestabanobligadosacrearcódigoquefuncionasecorrectamenteendiferentesplataformasydiferentesversionesdelasmismas.Adíadehoy,siguenhabiendomuchasdiferenciasyparasolucionarlohansurgidomuchosproductoscomolosFrameworksJavascript,queayudanarealizarfuncionalidadesavanzadasdeDHTMLsintenerquepreocuparseenhacerversionesdistintasdelosscripts,paracadaunodelosnavegadoresposiblesdelmercado.
AcontinuaciónseguiremosaprendiendocuriosidadesdellenguajeyaclararemosqueJavayJavascriptsondoscosasdistintas,enelartículosobrelasdiferenciasdeJavayJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/introduccion-javascript.html
DiferenciasentreJavayJavascript
JavayJavascriptsondosproductosdistintos.Ponemosdemanifiestoladiferenciaentreestosdoslenguajesconunnombresimilar.
EstamoscontandodiversosasuntosinteresantesycuriosidadesquesirvendeintroducciónparaelManualdeJavascriptyqueremostratarunadelasmástípicasasociacionesquesesehacenaloirhablardeJavascript.Nosreferimosarelacionarloconotrolenguajedeprogramación,llamadoJava,quenotienemuchoquever.RealmenteJavascriptsellamóasíporqueNetscape,queestabaaliadoaloscreadoresdeJavaenlaépoca,quisoaprovecharelconocimientoylapercepciónquelaspersonasteníandelpopularlenguaje.Contodo,secreóunproductoqueteníaciertassimilitudes,comolasintaxisdellenguajeoelnombre.Sehizoentenderqueeraunhermanopequeñoyorientadoespecíficamenteparahacercosasenlaspáginasweb,perotambiénsehizocaeramuchaspersonasenelerrordepensarquesonlomismo.
QueremosquequedeclaroqueJavascriptnotienenadaqueverconJava,salvoensusorígenes,comosehapodidoleerhaceunaslíneas.Actualmentesonproductostotalmentedistintosynoguardanentresimásrelaciónquelasintaxisidénticaypocomás.Algunasdiferenciasentreestosdoslenguajessonlassiguientes:
Compilador.ParaprogramarenJavanecesitamosunKitdedesarrolloyun
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 8 de 121
compilador.Sinembargo,Javascriptnoesunlenguajequenecesitequesusprogramassecompilen,sinoqueéstosseinterpretanporpartedelnavegadorcuandoésteleelapágina.Orientadoaobjetos.Javaesunlenguajedeprogramaciónorientadoaobjetos.(Mástardeveremosquequieredecirorientadoaobjetos,paraelquenolosepatodavía)Javascriptnoesorientadoaobjetos,estoquieredecirquepodremosprogramarsinnecesidaddecrearclases,talcomoserealizaenloslenguajesdeprogramaciónestructuradacomoCoPascal.Propósito.JavaesmuchomáspotentequeJavascript,estoesdebidoaqueJavaesunlenguajedepropósitogeneral,conelquesepuedenhaceraplicacionesdelomásvariado,sinembargo,conJavascriptsólopodemosescribirprogramasparaqueseejecutenenpáginasweb.Estructurasfuertes.Javaesunlenguajedeprogramaciónfuertementetipado,estoquieredecirquealdeclararunavariabletendremosqueindicarsutipoynopodrácambiardeuntipoaotroautomáticamente.PorsuparteJavascriptnotieneestacaracterística,ypodemosmeterenunavariablelainformaciónquedeseemos,independientementedeltipodeésta.Además,podremoscambiareltipodeinformacióndeunavariblecuandoqueramos.Otrascaracterísticas.ComovemosJavaesmuchomáscomplejo,aunquetambiénmáspotente,robustoyseguro.TienemásfuncionalidadesqueJavascriptylasdiferenciasquelosseparansonlosuficientementeimportantescomoparadistinguirlosfácilmente.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Antesdeempezar
MostramosejemplosdepáginasqueempleanJavaScriptensudesarrolloycomentamoslasaplicacionesnecesariasparaempezaraprogramar.
HayvariospuntosquequeremoscomentarcomointroducciónenelManualdeJavascriptyquepodrásquererconocerantesdecomenzaraprogramar.Primeroseríabuenohacernosunaideamásconcretadelasposiblesaplicacionesquepodríatenerellenguajeyquesepuedenencontrareninnumerablessitiosweb.Ademástambiénqueremoscomentarlasherramientasyconocimientospreviosquenecesitamosparaponernosmanosalaobra.
UsosdeJavascript
QuizásadíadehoysobradecirparaquésirveJavascript,peroveamosbrevementealgunosusosdeestelenguajequepodemosencontrarenelwebparahacernosunaideadelasposibilidadesquetiene.
Sinirmáslejos,DesarrolloWeb.comutilizaJavascriptparaelmenúsuperior,quemuestradiferentesenlacesdentrodecadaopciónprincipal.Vamoscambiandolapáginacadacierto
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 9 de 121
tiempo,peroeneldiseñoactualdeestesitioweb,elementoscomoelrecuadrode"Login"tambiéntienensudinamismoconJavascript.
ActualmentecasitodaslaspáginasunpocoavanzadasutilizanJavascript,puessehavueltounadelasinsigniasdeloquesedenominalaWeb2.0ylaexperienciaenriquecidadeusuario.Porejemplo,webstanpopularescomoFacebook,TwitteroYoutubeusanJavascriptaraudales.Parasermásconcretos,cuandoenlaredsocialapretamosunenlaceparacomentaralgo,semuestraenlapáginaunpequeñoformularioqueaparececomoporartedemagiayluegoseenvíasinsalirsedelapropiapágina.TambiéncuandovotamosporunvídeoenYoutubeocuandosecuentanloscaracteresquellevamosescritosenlosmini-postdeTwitter,seutilizaJavascriptpararealizarpequeñasfuncionalidadesquenoesposiblerealizarconHTMLsólo.EnrealidadsepuedenverejemplosdeJavascriptdentrodecualquierpáginaunpococompleja.Algunosquehabremosvistoeninnumerablesocasionessoncalendariosdinámicosparaseleccionarfechas,calculadorasoconvertidoresdedivisas,editoresdetextoenriquecido,navegadoresdinámicos,etc.
EsmuchomáshabitualencontrarJavascriptpararealizarefectossimplessobrepáginasweb,onotansimples,comopuedensernavegadoresdinámicos,aperturadeventanassecundarias,validacióndeformularios,etc.Nosatrevemosadecirqueestelenguajeesrealmenteútilparaestoscasos,puesestostípicosefectostienenlacomplejidadjustaparaserimplementadosencuestióndeminutossinposibilidaddeerrores.Sinembargo,apartedeesosunossimplesejemplos,podemosencontrardentrodeInternetmuchasaplicacionesquebasanpartedesufuncionamientoenJavascript,quehacenqueunapáginawebseconviertaenunverdaderoprogramainteractivodegestióndecualquierrecurso.Ejemplosclarossonlasaplicacionesdeofimaticaonline,comoGoogleDocs,OfficeOnlineoGoogleCalendar.
QuénecesitasparatrabajarconJavascript
ParaprogramarenJavascriptnecesitamosbásicamentelomismoqueparadesarrollarpáginaswebconHTML.UneditordetextosyunnavegadorcompatibleconJavascript.CualquierordenadormínimamenteactualposeedesalidatodolonecesarioparapoderprogramarenJavascrip.Porejemplo,unusuariodeWindowsdisponedentrodesuinstalacióntípicadesistemaoperativo,deuneditordetextos,elBlocdenotas,ydeunnavegador:InternetExplorer.
Nota:UsuariosquedeseenherramientasmásavanzadaspuedenencontrarenInternetfácilmenteprogramassimilaresenlaseccióndeprogramasparadesarrolladores.
Permitidmeunarecomendaciónconrespectoaleditordetextos.Setratadeque,aunqueelBlocdeNotasessuficienteparaempezar,talvezseamuyútilcontarconotrosprogramasquenosofrecenmejoresprestacionesalahoradeescribirlaslíneasdecódigo.Estoseditoresavanzadostienenalgunasventajascomoquecoloreanloscódigosdenuestrosscripts,nospermitentrabajarconvariosdocumentossimultáneamente,tienenayudas,etc.EntreotrosqueremosdestacarKomodoEdit,Notepad++oUltraEdit.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 10 de 121
Conocimientospreviosrecomendables
LociertoesquenohacefaltatenermuchabasedeconocimientosparaponerseaprogramarenJavascript.Lomásseguroesquesileesestaslíneasyasepastodolonecesarioparatrabajar,puestoqueyahabrástenidoalgunarelaciónconeldesarrollodesitioswebyhabrásdetectadoqueparahacerciertascosastevienebienconocerunpocodeJavascript.
Noobstante,seríabuenotenerundominioavanzadodeHTML,almenoselsuficienteparaescribircódigoeneselenguajesintenerquepensarquéesloqueestáshaciendo.TambiénseráútilunconocimientomediosobreCSSyquizásalgunaexperienciapreviasobrealgúnlenguajedeprogramación,aunqueenestemanualdeDesarrolloWeb.comvamosatratardeexplicarJavascriptinclusoparapersonasquenohayanprogramadonunca.
EnelsiguienteartículoseguiremoscontemasquesirvendeintroducciónallenguajedescriptingdelladodelclienteviendolasalgunasdiferenciasdeJavascriptqueexistenenlasversionesdenavegadoresquehanidoapareciendo.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
VersionesdenavegadoresydeJavascript
PresentamoslasdiferentesversionesdeJavaScript,losnavegadoresquelasaceptanysuscontribucionesconrespectoalaspredecesoras.
ParacontinuarconlaintroducciónallenguajequeestamosviendoenelManualdeJavascript,tambiénresultaapropiadointroducirlasdistintasversionesdeJavascriptqueexistenyquehanevolucionadoenconjuntoconlasversionesdenavegadores.Ellenguajehaidoavanzandodurantesusañosdevidaeincrementandosuscapacidades.Enunprincipiopodíarealizarmuchascosasenlapáginaweb,peroteníapocasinstruccionesparacrearefectosespeciales.
ConeltiempotambiénelHTMLhaavanzadoysehancreadonuevascaracterísticascomolascapas,quepermitentratarymaquetarlosdocumentosdemaneradistinta.Javascripthaavanzadotambiényparamanejartodasestasnuevascaracterísticassehancreadonuevasinstruccionesyrecursos.PararesumirvamosacomentarlasdistintasversionesdeJavascript:
Actualizado:Enelmomentodeactualizaresteartículo,podemosdecirquenotenemosquepreocuparnosmuchodelasversionesdeJavascriptquepuedanhaberexistido.RealmentecualquiernavegadormedianamentemodernotendráahoratodaslasfuncionalidadesdeJavascriptquevayamosanecesitarysobretodo,lasquepodamosutilizarennuestrosprimerospasosconellenguaje.NoobstantepuedevenirbienconocerlasprimerasversionesdeJavascriptquecomentamosenesteartículo,amododecuriosidad.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 11 de 121
Javascript1:nacióconelNetscape2.0ysoportabagrancantidaddeinstruccionesyfunciones,casitodaslasqueexistenahorayaseintrodujeronenelprimerestandar.Javascript1.1:EslaversióndeJavascriptquesediseñóconlallegadadelosnavegadores3.0.Implementabapocomásquesuanteriorversión,comoporejemploeltratamientodeimágenesdinámicamenteylacreacióndearrays.Javascript1.2:Laversióndelosnavegadores4.0.EstatienecomodesventajaqueesunpocodistintaenplataformasMicrosoftyNetscape,yaqueambosnavegadorescrecierondedistintomodoyestabanenplenaluchaporelmercado.Javascript1.3:Versiónqueimplementanlosnavegadores5.0.Enestaversiónsehanlimadoalgunasdiferenciasyasperezasentrelosdosnavegadores.Javascript1.5:Versiónactual,enelmomentodeescribirestaslíneas,queimplementaNetscape6.Porsuparte,Microsofttambiénhaevolucionadohastapresentarsuversión5.5deJScript(asíllamanaljavascriptutilizadoporlosnavegadoresdeMicrosoft).
Esobvioquetodavía,despuésdeescribirestaslíneas,sepresentaránohabránpresentadomuchasotrasversionesdeJavascript,pues,amedidaquesevanmejorandolosnavegadoresyvansaliendoversionesdeHTML,surgennuevasnecesidadesparaprogramacióndeelementosdinámicos.Noobstante,todoloquevamosaaprenderenestemanual,inclusootrosusosmuchomásavanzados,yaestáimplementadoencualquierJavascriptqueexistanenlaactualidad.
EnelsiguienteartículocomenzaremosyaamostrarpequeñoscódigosJavascriptqueserviránparahacerefectossimplesenpáginasweb.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
EfectosrápidosconJavascript
EnesteúltimoartículodeintroducciónaJavascriptveremosalgunosejemplosdecódigossencillosdegranutilidad.
AntesdemeternosdellenoenmateriapodemosverunaseriedeefectosrápidosquesepuedenprogramarconJavascript,loquenospuedehacerunaideamásclaradelascapacidadesypotenciadellenguaje.Acontinuaciónveremosvariosejemplos,quehemosdestacadoparaestaintroducciónenelManualdeJavascript,portenerunmínimodecomplejidadyaunqueseanmuybásicos,nosvendránbienparatenerunaideamásexactadeloqueesJavascriptalahoraderecorrerlossiguientescapítulos.
Abrirunaventanasecundaria
PrimerovamosaverqueconunalíneadeJavascriptpodemoshacercosasbastanteatractivas.PorejemplopodemosvercómoabrirunaventanasecundariasinbarrasdemenúsquemuestreelbuscadorGoogle.Elcódigoseríaelsiguiente.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 12 de 121
<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>
Podemosverelejemploenmarchaaquí.
Unmensajedebienvenida
Podemosmostrarunacajadetextoemergentealterminarsedecargarlaportadadenuestrositioweb,quepodríadarlabienvenidaalosvisitantes.
<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>
Puedesverelejemploenunapáginaaparte.
Fechaactual
Veamosahoraunsencilloscriptparamostrarlafechadehoy.Avecesesmuyinteresantemostrarlaenlaswebsparadarunefectodequelapáginaestáal"aldía",esdecir,estáactualizada.
<script> document.write(new Date()) </script>
Estaslíneasdeberíanintroducirsedentrodelcuerpodelapáginaenellugardondequeramosqueaparezcalafechadeúltimaactualización.Podemosverelejemploenmarchaaquí.
Nota:Undetalleadestacaresquelafechaapareceenunformatounpocoraro,indicandotambiénlahorayotrosatributosdelamisma,peroyaaprenderemosaobtenerexactamenteloquedeseemosenelformatocorrecto.
Botóndevolver
Otroejemplorápidosepuedeveracontinuación.Setratadeunbotónparavolverhaciaatrás,comoelquetenemosenlabarradeherramientasdelnavegador.AhoraveremosunalíneadecódigoquemezclaHTMLyJavascriptparacrearestebotónquemuestralapáginaanteriorenelhistorial,siesquelahubiera.
<input type=button value=Atrás onclick="history.go(-1)">
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 13 de 121
Elbotónseríaparecidoalsiguiente,unbotónnormalconelaspectopredeterminadoqueelnavegadorysistemaoperativoqueusasotorguealosbotones.Acontinuacióntienesunaimagensobrecómoseveríaelbotónenmisistema.
Comodiferenciaconlosejemplosanteriores,hayquedestacarqueenestecasolainstrucciónJavascriptseencuentradentrodeunatributodeHTML,onclick,queindicaqueesainstrucciónsetienequeejecutarcomorespuestaalapulsacióndelbotón.
Sehapodidocomprobarlafacilidadconlaquesepuedenrealizaralgunasaccionesinteresantes.Comopodréisimaginar,existiríanmuchasotrasmuestrassencillasdeJavascriptquenosreservamosparacapítulosposteriores.
Silodeseas,puedesvercómohemosdesarrolladoalgunosdeestosefectosrápidosJavascriptpasoporpasoyenvídeo.EnelsiguienteartículoempezaremosyaahablardelpropiolenguajedeprogramaciónJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen16/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 14 de 121
PrimerospasosconellenguajeJavascript
ComenzamosaaprendercosasquetienenqueverdirectamenteconlaprogramaciónenellenguajeJavascriptylamaneraconlaqueseintegraésteenunapáginaweb.
EllenguajeJavascript
VeamoscómoseescribeelcódigoenJavascriptyparaellocomentaremoslasprimerasreglasparainsertarscriptsenpáginasweb.
EnestapartedelmanualsobreJavascriptvamosaconocerlamaneramásbásicadetrabajarconellenguaje.Enesteartículodaremoslasprimerasinformacionessobrecómoincluirscripts,mezclandoelpropiocódigoJavascriptconelHTML.
Luegoveremostambiéncómosedebecolocarcódigoparaquenuestrawebseacompatiblecontodoslosnavegadores,inclusoaquellosquenosoportanJavascript.MuchasideasdelfuncionamientodeJavascriptyasehandescritoencapítulosanteriores,peroconelobjetivodenodejarnosnadaeneltinterovamosatratardeacapararapartirdeaquítodoslosdatosimportantesdeestelenguaje.
JavascriptseescribeeneldocumentoHTML
LomásimportanteybásicoquepodemosdestacarenestemomentoesquelaprogramacióndeJavascriptserealizadentrodelpropiodocumentoHTML.Esdecir,elcódigoJavascript,enlamayoríadeloscasos,semezclaconelpropiocódigoHTMLparagenerarlapágina.
Estoquieredecirquedebemosaprenderamezclarlosdoslenguajesdeprogramaciónyrápidamenteveremosque,paraqueestosdoslenguajespuedanconvivirsinproblemasentreellos,sehandeincluirunosdelimitadoresqueseparanlasetiquetasHTMLdelasinstruccionesJavascript.Estosdelimitadoressonlasetiquetas<SCRIPT>y</SCRIPT>.TodoelcódigoJavascriptquepongamosenlapáginahadeserintroducidoentreestasdosetiquetas.
Lacolocacióndelosscriptssíqueimporta
Enunamismapáginapodemosintroducirvariosscripts,cadaunoquepodríaintroducirsedentrodeunasetiquetas<SCRIPT>distintas.Lacolocacióndeestosscriptsnoesindiferente.Enunprincipio,conloquesabemoshastaelmomentoylosscriptsquehemosrealizadodeprueba,nosdaunpocoigualdondecolocarlos,peroendeterminadoscasosestacolocaciónsíqueserámuyimportante.Encadacaso,yllegadoelmomento,seinformarádeelloconvenientemente.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 15 de 121
TambiénsepuedeescribirJavascriptdentrodedeterminadosatributosdelapágina,comoelatributoonclick.Estosatributosestánrelacionadosconlasaccionesdelusuarioysellamanmanejadoresdeeventos.
Vamosaverenelsiguientecapítulocommásdetenidamenteestasdosmanerasdeescribirscripts,quetienencomodiferenciaprincipalelmomentoenqueseejecutanlassentencias.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen29/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ManerasdeejecutarscriptsJavascript
ExistendosmanerasbásicasdeejecutarscriptsJavascriptenunapágina:alcargarlapáginaocomorespuestaaaccionesdelusuario.
HastaahoraenelManualdeJavascriptyahemostenidolaocasióndeprobaralgunosscriptssencillos,noobstante,todavíatenemosqueaprenderunadelasbasesparapodertrabajarconellenguajeyesaprenderlasdosmanerasdeejecutarcódigoJavascript.Existendosmanerasfundamentalesdeejecutarscriptsenlapágina.Laprimeradeestasmanerassetratadeejecucióndirectadescripts,lasegundaesunaejecucióncomorespuestaalaaccióndeunusuario.
Explicaremosahoracadaunadeestasformasdeejecucióndisponibles,peroparaelquelodesee,recomendamostambiénverelvídeosobreManerasdeincluiryejecutarscripts.
Ejecucióndirecta
Eselmétododeejecutarscriptsmásbásico.Enestecasoseincluyenlasinstruccionesdentrodelaetiqueta<SCRIPT>,talcomohemoscomentadoanteriormente.Cuandoelnavegadorleelapáginayencuentraunscriptvainterpretandolaslíneasdecódigoylasvaejecutandounadespuésdeotra.Llamamosaestamaneraejecucióndirectapuescuandoseleelapáginaseejecutandirectamentelosscripts.
EstemétodoseráelqueutilicemospreferentementeenlamayoríadelosejemplosdeestapartedelManualdeJavascript.EnlasegundapartedelManualdeJavascriptpodremosaprendermuchascosasyentreellasveremoscondetalleelsegundomododeejecucióndescriptsquevamosarelataracontinuación.
Respuestaaunevento
Eslaotramaneradeejecutarscripts,peroantesdeverladebemoshablarsobreloseventos.Loseventossonaccionesquerealizaelusuario.LosprogramascomoJavascriptestánpreparadosparaatrapardeterminadasaccionesrealizadas,enestecasosobrelapágina,yrealizaraccionescomorespuesta.Deestemodosepuedenrealizarprogramasinteractivos,yaquecontrolamoslosmovimientosdelusuarioyrespondemosaellos.Existenmuchostiposde
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 16 de 121
eventosdistintos,porejemplolapulsacióndeunbotón,elmovimientodelratónolaseleccióndetextodelapágina.
LasaccionesquequeremosrealizarcomorespuestaauneventosehandeindicardentrodelmismocódigoHTML,peroenestecasoseindicanenatributosHTMLquesecolocandentrodelaetiquetaquequeremosquerespondaalasaccionesdelusuario.Enelcapítulodondevimosalgúnejemplorápidoyacomprobamosquesiqueríamosqueunbotónrealizaseaccionescuandosepulsasesobreel,debíamosindicarlasdentrodelatributoonclickdelbotón.
ComprobamospuesquesepuedeintroducircódigoJavascriptdentrodedeterminadosatributosdelasetiquetasHTML.Veremosmásadelanteestetipodeejecuciónenprofundidadylostiposdeeventosqueexisten.PeroparallegaraelloauntenemosqueaprendermuchasotrascosasdeJavascript.EnelpróximoartículomostraremoscómopodemosocultarelcódigoJavascriptparanavegadoresantiguos.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen29/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
OcultarscriptsJavascriptennavegadoresantiguos
NotodoslosnavegadoressoncompatiblesconJavascript,asíquetenemosqueaprendercómohacerquelosscriptsnomolestenennavegadoresquenolosentienden.
AlolargodelosanteriorescapítulosdelManualdeJavascriptyahemosvistoqueellenguajeseimplementóapartirdeNetscape2.0eInternetExplorer3.0.Incluso,paralosquenolosepan,estábiendecirquehaynavegadoresquefuncionanensistemasoperativos,dondesólosepuedevisualizartextoydondedeterminadastecnologíasyaplicacionesnoestándisponibles,comoelusodeimágenes,fuentestipográficasdistintasoelpropioJavascript.
Asípues,notodoslosnavegadoresquepuedanutilizarlosusuariosquevisitennuestrapáginacomprendenJavascript.Enloscasosenlosquenoseinterpretanlosscripts,losnavegadoresasumenqueelcódigodeéstosestextodelapropiapáginaycomoconsecuencia,presentanlosscriptsenelcuerpodeldocumento,comosidetextonormalsetratara.ParaevitarqueeltextodelosscriptsseescribaenlapáginacuandolosnavegadoresnolosentiendensetienenqueocultarlosconcomentariosHTML(<!-comentarioHTML-->).Además,enesteartículoveremostambiéncómomostrarunmensajequeseveasóloenlosnavegadoresquenosoncompatiblesconJavascript.
Actualizado:Enelmomentoactualpodemosdecirquecasiel100%delosnavegadoresdisponiblessoportanJavascript,oporlomenosreconocenlasetiquetasdescript,porloque,aunqueestédesactivado,nomostraráneltextodenuestrosprogramasJavascript.Porello,actualmenteyanoesfundamentalrealizarlaoperacióndeocultarelcódigodelosscriptsdelapáginaparanavegadoresantiguos.Noobstante,siqueremoshacerunapáginatotalmentecorrecta,convendráaprendercómosepuedeocultarunscriptparaqueen
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 17 de 121
ningúncasosemuestrecomotextoenlapágina.
OcultarelcódigoJavascriptconcomentariosHTML
VeamosconunejemplodecódigodondesehanutilizadocomentariosHTMLparaocultarJavascript,omejodicho,elcódigolosscriptsJavascript.
<SCRIPT>
<!--
Código Javascript
//-->
</SCRIPT>
VemosqueeliniciodelcomentarioHTMLesidénticoacómoloconocemosenelHTML,peroelcierredelcomentariopresentaunaparticularidad,queempiezapordoblebarrainclinada.EstoesdebidoaqueelfinaldelcomentariocontienevarioscaracteresqueJavascriptreconocecomooperadoresyaltratardeanalizarloslanzaunmensajedeerrordesintaxis.ParaqueJavascriptnolanceunmensajedeerrorsecolocaantesdelcomentarioHTMLesadoblebarra,quenoesmásqueuncomentarioJavascript,queconoceremosmásadelantecuandohablemosdesintaxis.
EliniciodelcomentarioHTMLnoesnecesariocomentarloconladoblebarra,dadoqueJavascriptentiendebienquesimplementesepretendeocultarelcódigo.Unaaclaraciónaestepunto:sipusiésemoslasdosbarrasenestalínea,severíanennavegadoresantiguosporestarfueradeloscomentariosHTML.Lasetiquetas<SCRIPT>nolasentiendenlosnavegadoresantiguos,porlotantonolasinterpretan,talcomohacenconcualquieretiquetaquedesconocen.
Mostrarunmensajeparanavegadoresantiguoscon<NOSCRIPT>
ExistelaposibilidaddeindicaruntextoalternativoparalosnavegadoresquenoentiendenJavascript,parainformarlesdequeeneselugardeberíaejecutarseunscriptyquelapáginanoestáfuncionandoal100%desuscapacidades.Tambiénpodemossugeriralosvisitantesqueactualicensunavegadoraunaversióncompatibleconellenguaje.Paraelloutilizamoslaetiqueta<NOSCRIPT>yentreestaetiquetaysucorrespondientedecierrepodemoscolocareltextoalternativoalscript.
<SCRIPT>
código javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu versión de navegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 18 de 121
EnelsiguienteartículoveremosalgunosotrosdetallessobrecolocarscriptsJavascriptquesehanquedadoeneltintero.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen29/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Mássobrecolocarscripts
Últimasnotassobrecómocolocarscripts.Indicarlaversiónutilizadayutilizarficherosexternos.
SeguimosofreciendocapítulosdelManualdeJavascript,coninformaciónútilparasabercómoutilizarellenguaje.Asíqueahoraveremosunpardenotasadicionalessobrecómocolocarscriptsenpáginasweb.
EnesteartículomostraremosunodelosatributosquesepuedenindicarenlaetiquetadeSCRIPT,queindicaellenguajequevamosautilizar.PerosobretododebemosprestarespecialatenciónalcasodeincluirarchivosexternosconJavascript,quesindudaesunamaneradetrabajar,queutilizaréisbastanteamenudo.
Indicarellenguajequeestamosutilizando
Laetiqueta<SCRIPT>tieneunatributoquesirveparaindicarellenguajequeestamosutilizando,asícomolaversióndeeste.Porejemplo,podemosindicarqueestamosprogramandoenJavascript1.2oVisualBasicScript,queesotrolenguajeparaprogramarscriptsenelnavegadorclientequesóloescompatibleconInternetExplorer.
Elatributoencuestióneslanguageylomáshabitualesindicarsimplementeellenguajeconelquesehanprogramadolosscripts.EllenguajepordefectoesJavascript,porloquesinoutilizamosesteatributo,elnavegadorentenderáqueellenguajeconelqueseestáprogramandoesJavascript.Undetalledondesesueleequivocarlagentesindarsecuentaesquelenguageseescribecondos-g-ynocon-g-ycon-j-comoencastellano.
<SCRIPT LANGUAGE=javascript>
Actualizado:Hoyyanimerecelapenanombrarotroslenguajesdescripting.Javascripteselúnicolenguajeparacrearscriptsenpáginaswebaceptadoporlaindustria.Luego,elatributolanguageesrealmenteinnecesario.Sinembargo,estamosobligadosadefinirelatributo"type",queseñalamosenelsiguientepunto.ApesarqueenHTML4.01transicionalnosvalidecorrectamenteelatributolanguage,novalidarásiestamoshaciendoHTMLstrict,conloquenorecomendamosusar"language"enningúncaso.EnlosejemplosdeDesarrolloWeb.comdondeseutilizabalanguage,porfavoreliminarlo,puesnovalidaríacorrectamenteconversionesestándardellenguajeHTMLactual.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 19 de 121
Usodelatributo"type":
CuandocolocamosunaetiquetaSCRIPTdebemosusarelatributo"type"paraindicarquetipodecodificacióndescriptestamoshaciendoyellenguajeutilizado.
<script type="text/javascript">
Elatributo"type"esnecesarioparaquevalidecorrectamentetudocumentoenlasversionesmásactualesdelHTML.
IncluirficherosexternosdeJavascript
Otramaneradeincluirscriptsenpáginasweb,implementadaapartirdeJavascript1.1,esincluirarchivosexternosdondesepuedencolocarmuchasfuncionesqueseutilicenenlapágina.Losficherossuelentenerextensión.jsyseincluyendeestamanera.
<SCRIPT type="text/javascript" src="archivo_externo.js">
//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>
Dentrodelasetiquetas<SCRIPT>sepuedeescribircualquiertextoyseráignoradoporelnavegador,sinembargo,losnavegadoresquenoentiendenelatributoSRCtendránaestetextoporinstrucciones,porloqueesaconsejableponeruncomentarioJavascriptantesdecadalíneaconelobjetivodequenorespondanconunerror.
Elarchivoqueincluimos(enestecasoarchivo_externo.js)debecontenertansolosentenciasJavascript.NodebemosincluircódigoHTMLdeningúntipo,nitansiquieralasetiquetas</SCRIPT>y</SCRIPT>.
VistosestosotrosusosinteresantesqueexistenenJavascriptyquedebemosconocerparapoderaprovecharlasposibilidadesdelatecnología,debemoshaberaprendidotodoloesencialparaempezarahacercosasmásimportantes.AsíqueenelpróximoartículoempezaremosarepasarlasintaxisdellenguajeJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen29/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
SintaxisJavascript
EmpezamosacontarlasintaxisdellenguajeJavascript,indicandosusprincipalescaracterísticas.
PorfinempezamosavercódigofuentedeJavascript!Esperamosquesehayanasimiladotodas
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 20 de 121
lasinformacionespreviasdelManualdeJavascript,enlasquehemosaprendidobásicamentediversosmodosdeincluirscriptsenpáginasweb.Hastaahoratodoloquehemosvistoenestemanualpuedehaberparecidomuyteórico,perodeaquíenadelanteesperamosqueosparezcamásamenoporempezaravercosasmásprácticasyrelacionadasdirectamenteconlaprogramación.
EllenguajeJavascripttieneunasintaxismuyparecidaaladeJavaporestarbasadoenél.TambiénesmuyparecidaaladellenguajeC,demodoquesiellectorconocealgunodeestosdoslenguajessepodrámanejarconfacilidadconelcódigo.Detodosmodos,enlossiguientescapítulosvamosadescribirtodalasintaxiscondetenimiento,porloquelosnovatosnotendránningúnproblemaconella.
Comentariosenelcódigo
Uncomentarioesunapartedecódigoquenoesinterpretadaporelnavegadorycuyautilidadradicaenfacilitarlalecturaalprogramador.Elprogramador,amedidaquedesarrollaelscript,vadejandofrasesopalabrassueltas,llamadascomentarios,queleayudanaéloacualquierotroaleermasfácilmenteelscriptalahorademodificarloodepurarlo.
YasevioanteriormentealgúncomentarioJavascript,peroahoravamosacontarlosdenuevo.Existendostiposdecomentariosenellenguaje.Unodeellos,ladoblebarra,sirveparacomentarunalíneadecódigo.Elotrocomentariolopodemosutilizarparacomentarvariaslíneasyseindicaconlossignos/paraempezarelcomentarioy/paraterminarlo.Veamosunosejemplos.
<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>
Mayúsculasyminúsculas
EnJavascriptsehanderespetarlasmayúsculasylasminúsculas.Sinosequivocamosalutilizarlaselnavegadorresponderáconunmensajedeerror,yaseadesintaxisodereferenciaindefinida.
Porponerunejemplo,noeslomismolafunciónalert()quelafunciónAlert().Laprimeramuestrauntextoenunacajadediálogoylasegunda(conlaprimeraAmayúscula)simplementenoexiste,anoserqueladefinamosnosotros.Comosepuedecomprobar,paraquelafunciónlareconozcaJavascript,setienequeescribirtodaenminúscula.Otroclaroejemploloveremoscuandotratemosconvariables,puestoquelosnombresquedamosalasvariablestambiénsonsensiblesalasmayúsculasyminúsculas.
Porreglageneral,losnombresdelascosasenJavascriptseescribensiempreenminúsculas,salvoqueseutiliceunnombreconmásdeunapalabra,puesenesecasoseescribiránconmayúsculaslasinicialesdelaspalabrassiguientesalaprimera.Porejemplodocument.bgColor
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 21 de 121
(queesunlugardondeseguardaelcolordefondodelapáginaweb),seescribeconla"C"decolorenmayúscula,porserlaprimeraletradelasegundapalabra.Tambiénsepuedeutilizarmayúsculasenlasinicialesdelasprimeraspalabrasenalgunoscasos,comolosnombresdelasclases,aunqueyaveremosmásadelantecuálessonestoscasosyquésonlasclases.
Separacióndeinstrucciones
Lasdistintasinstruccionesquecontienennuestrosscriptssehandesepararconvenientementeparaqueelnavegadornoindiqueloscorrespondienteserroresdesintaxis.Javascripttienedosmanerasdesepararinstrucciones.Laprimeraesatravésdelcarácterpuntoycoma(;)ylasegundaesatravésdeunsaltodelínea.
PorestarazónLassentenciasJavascriptnonecesitanacabarenpuntoycomaanoserquecoloquemosdosinstruccionesenlamismalínea.
Noesunamalaidea,detodosmodos,acostumbrarseautilizarelpuntoycomadespuésdecadainstrucciónpuesotroslenguajescomoJavaoCobliganautilizarlasynosestaremosacostumbrandoarealizarunasintaxismásparecidaalahabitualenentornosdeprogramaciónavanzados.
EnelpróximoartículocomenzaremosahablarossobrelacreacióndevariablesenJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen30/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 22 de 121
TrabajoconvariablesytiposdedatosenJavascript
Unadelascosasmásfundamentalesencualquierlenguajedeprogramaciónsonlasvariablesylostiposdedatos.VeremosquésonycómosetrabajaconellosenJavascript.
VariablesenJavascript
Vemosentérminosgeneralesquéesunavariable,paraquésirveycómodeclararvariablesenJavascriptantesdeusarlas.
EsteeselprimerodelosartículosquevamosadedicaralasvariablesenelManualdeJavascript.Veremos,sinolosabemosya,quelasvariablessonunodeloselementosfundamentalesalahoraderealizarlosprogramas,enJavascriptyenlamayoríadeloslenguajesdeprogramaciónexistentes.
Asípues,enesteartículoveremoscuáleselconceptodevariableyaprenderemosadeclararlasenJavascript.
Conceptodevariable
Unavariableesunespacioenmemoriadondesealmacenaundato,unespaciodondepodemosguardarcualquiertipodeinformaciónquenecesitemospararealizarlasaccionesdenuestrosprogramas.Porejemplo,sinuestroprogramarealizasumas,serámuynormalqueguardemosenvariableslosdistintossumandosqueparticipanenlaoperaciónyelresultadodelasuma.Elefectoseríaalgoparecidoaesto.
sumando1 = 23
sumando2 = 33
suma = sumando1 + sumando2
Enesteejemplotenemostresvariables,sumando1,sumando2ysuma,dondeguardamoselresultado.Vemosquesuusoparanosotrosescomosituviésemosunapartadodondeguardarundatoyquesepuedenaccederaellosconsóloponersunombre.
Losnombresdelasvariableshandeconstruirseconcaracteresalfanuméricosyelcaráctersubrayado(_).Apartedeesta,hayunaseriedereglasadicionalesparaconstruirnombresparavariables.Lamásimportanteesquetienenquecomenzarporuncarácteralfabéticooelsubrayado.Nopodemosutilizarcaracteresraroscomoelsigno+,unespaciooun$.Nombresadmitidosparalasvariablespodríanser:
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 23 de 121
EdadpaisDeNacimiento_nombre
Tambiénhayqueevitarutilizarnombresreservadoscomovariables,porejemplonopodremosllamaranuestravariablepalabrascomoreturnofor,queyaveremosquesonutilizadasparaestructurasdelpropiolenguaje.Veamosahoraalgunosnombresdevariablesquenoestápermitidoutilizar:
12mesestunombrereturnpe%pe
DeclaracióndevariablesenJavascript
Declararvariablesconsisteendefinirydepasoinformaralsistemadequevasautilizarunavariable.Esunacostumbrehabitualenloslenguajesdeprogramacióneldefinirlasvariablesquesevanausarenlosprogramasyparaello,sesiguenunasreglasestrictas.PeroJavascriptsesaltamuchasreglasporserunlenguajeuntantolibrealahoradeprogramaryunodeloscasosenlosqueotorgaunpocodelibertadesalahoradedeclararlasvariables,yaquenoestamosobligadosahacerlo,alcontrariodeloquepasaenlamayoríadeloslenguajesdeprogramación.
Javascriptcuentaconlapalabra"var"queutilizaremoscuandoqueramosdeclararunaovariasvariables.Comoeslógico,seutilizaesapalabraparadefinirlavariableantesdeutilizarla.
Nota:AunqueJavascriptnonosobligueadeclararexplícitamentelasvariables,esaconsejabledeclararlasantesdeutilizarlasyveremosenadelantequesetratatambiéndeunabuenacostumbre.Además,ensucesivosartículosveremosqueenalgunoscasosespeciales,noproduciráexactamentelosmismosresultadosunscriptenelquehemosdeclaradounavariableyotroenelquenolohagamos.
var operando1
var operando2
Tambiénsepuedeasignarunvaloralavariablecuandoseestádeclarando
var operando1 = 23
var operando2 = 33
Tambiénsepermitedeclararvariasvariablesenlamismalínea,siemprequeseseparenporcomas.
var operando1,operando2
Silodeseas,puedesverunejemplodepáginaquedeclaravariablesJavascript.
Enelsiguienteartículoseguiremosaprendiendocosasdevariablesyveremosunodelos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 24 de 121
conceptosmásimportantesquedeberemosaprendersobreellas,elámbitodelasvariables.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen30/07/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
AmbitodelasvariablesenJavascript
ElámbitodelasvariablesenJavascript:quésonlasvariableslocalesyglobalesycómosetrabajaconellasenJavascript.
Elámbitodelasvariablesesunodelosconceptosmásimportantesquedeberemosconocercuandotrabajamosconvariables,nosóloenJavascript,sinoenlamayoríadeloslenguajesdeprogramación.
Enelartículoanterioryacomenzamosaexplicarquésonlasvariablesycómodeclararlas.EnesteartículodelManualdeJavascriptpretendemosexplicarcondetenimientoquéesesteámbitodelasvariablesyofrecerejemplosparaquesepuedaentenderbien.
Conceptodeámbitodevariables
Selellamaámbitodelasvariablesallugardondeestasestándisponibles.Porlogeneral,cuandodeclaramosunavariablehacemosqueestédisponibleenellugardondesehadeclarado,estoocurreentodosloslenguajesdeprogramaciónycomoJavascriptsedefinedentrodeunapáginaweb,lasvariablesquedeclaremosenlapáginaestaránaccesiblesdentrodeella.
EnJavascriptnopodremosaccederavariablesquehayansidodefinidasenotrapágina.Portanto,lapropiapáginadondesedefineeselámbitomáshabitualdeunavariableylellamaremosaestetipodevariablesglobalesalapágina.Veremostambiénsepuedenhacervariablesconámbitosdistintosdelglobal,esdecir,variablesquedeclararemosytendránvalidezenlugaresmásacotados.
Variablesglobales
Comohemosdicho,lasvariablesglobalessonlasqueestándeclaradasenelámbitomásamplioposible,queenJavascriptesunapáginaweb.Paradeclararunavariableglobalalapáginasimplementeloharemosenunscript,conlapalabravar.
<SCRIPT>
var variableGlobal
</SCRIPT>
Lasvariablesglobalessonaccesiblesdesdecualquierlugardelapágina,esdecir,desdeelscriptdondesehandeclaradoytodoslosdemásscriptsdelapágina,incluidoslosmanejadores
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 25 de 121
deeventos,comoelonclick,queyavimosquesepodíaincluirdentrodedeterminadasetiquetasHTML.
Variableslocales
Tambiénpodremosdeclararvariablesenlugaresmásacotados,comoporejemplounafunción.Aestasvariableslesllamaremoslocales.Cuandosedeclarenvariableslocalessólopodremosaccederaellasdentrodellugardondesehadeclarado,esdecir,silahabíamosdeclaradoenunafunciónsolopodremosaccederaellacuandoestemosenesafunción.
Lasvariablespuedenserlocalesaunafunción,perotambiénpuedenserlocalesaotrosámbitos,comoporejemplounbucle.Engeneral,sonámbitoslocalescualquierlugaracotadoporllaves.
<SCRIPT>
function miFuncion (){
var variableLocal
}
</SCRIPT>
Enelscriptanteriorhemosdeclaradounavariabledentrodeunafunción,porloqueesavariablesólotendrávalidezdentrodelafunción.Sepuedenvercómoseutilizanlasllavesparaacotarellugardondeestádefinidaesafunciónosuámbito.
Nohayproblemaendeclararunavariablelocalconelmismonombrequeunaglobal,enestecasolavariableglobalserávisibledesdetodalapágina,exceptoenelámbitodondeestádeclaradalavariablelocalyaqueenestesitioesenombredevariableestáocupadoporlalocalyesellaquientienevalidez.Enresumen,lavariablequetendrávalidezencualquiersitiodelapáginaeslaglobal.Menosenelámbitodondeestádeclaradalavariablelocal,queseráellaquientengavalidez.
<SCRIPT>
var numero = 2
function miFuncion (){
var numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
</SCRIPT>
Unconsejoparalosprincipiantespodríasernodeclararvariablesconlosmismosnombres,paraquenuncahayalugaraconfusiónsobrequévariableeslaquetienevalidezencadamomento.
Diferenciasentredeclararvariablesconvar,onodeclararlas
Comohemosdicho,enJavascripttenemoslibertadparadeclararonolasvariablesconla
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 26 de 121
palabravar,perolosefectosqueconseguiremosencadacasoserándistintos.Enconcreto,cuandoutilizamosvarestamoshaciendoquelavariblequeestamosdeclarandosealocalalámbitodondesedeclara.Porotrolado,sinoutilizamoslapalabravarparadeclararunavariable,éstaseráglobalatodalapágina,seacualseaelámbitoenelquehayasidodeclarada.
Enelcasodeunavariabledeclaradaenlapáginaweb,fueradeunafunciónocualquierotroámbitomásreducido,nosesindiferentesisedeclaraonoconvar,desdeunpuntodevistafuncional.Estoesdebidoaquecualquiervariabledeclaradafueradeunámbitoesglobalatodalapágina.Ladiferenciasepuedeapreciarenunafunciónporejemplo,yaquesiutilizamosvarlavariableserálocalalafunciónysinoloutilizamos,lavariableseráglobalalapágina.Estadiferenciaesfundamentalalahoradecontrolarcorrectamenteelusodelasvariablesenlapágina,yaquesinolohacemosenunafunciónpodríamossobreescribirelvalordeunavariable,perdiendoeldatoquepudieracontenerpreviamente.
<SCRIPT>
var numero = 2
function miFuncion (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</SCRIPT>
Enesteejemplo,tenemosunavariableglobalalapáginallamadanumero,quecontieneun2.Tambiéntenemosunafunciónqueutilizalavariablenumerosinhaberladeclaradoconvar,porloquelavariablenumerodelafuncionserálamismavariableglobalnumerodeclaradafueradelafunción.Enunasituacióncomoesta,alejecutarlafunciónsesobreescribirálavariablenumeroyeldatoquehabíaantesdeejecutarlafunciónseperderá.
Enelpróximoartículocontinuaremoshablandodevariablesymostraremosqueenellassepuedenguardardistintostiposdeinformación.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen24/08/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Quépodemosguardarenvariables
VemoselconceptodetiposdedatosparaellenguajeJavascriptyporquéesimportantemanejarlosbien.
EnelManualdeJavascriptyahemoshabladosobrelasvariablesenvariosartículos.Perotodavíanosquedancosasporveryenconcretomostraremosenesteartículoqueenuna
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 27 de 121
variablepodemosguardardistintostiposdedatos.
Enunavariablepodemosintroducirvariostiposdeinformación.Porejemplopodríamosintroducirsimpletexto,númerosenterosoreales,etc.Aestasdistintasclasesdeinformaciónselesconocecomotiposdedatos.Cadaunotienecaracterísticasyusosdistintos.
VeamoscuálessonlostiposdedatosmáshabitualesdeJavascript.
Números
Paraempezartenemoseltiponumérico,paraguardarnúmeroscomo9o23.6
Cadenas
Eltipocadenadecarácterguardauntexto.Siemprequeescribamosunacadenadecaracteresdebemosutilizarlascomillas(").
Boleanos
Tambiéncontamosconeltipoboleano,queguardaunainformaciónquepuedevalersi(true)ono(false).
Porúltimoseríarelevanteseñalaraquíquenuestrasvariablespuedencontenercosasmáscomplicadas,comopodríaserunobjeto,unafunción,ovacío(null)peroyaloveremosmásadelante.
Enrealidadnuestrasvariablesnoestánforzadasaguardaruntipodedatosenconcretoyporlotantonoespecificamosningúntipodedatosparaunavariablecuandolaestamosdeclarando.Podemosintroducircualquierinformaciónenunavariabledecualquiertipo,inclusopodemosircambiandoelcontenidodeunavariabledeuntipoaotrosinningúnproblema.Vamosaverestoconunejemplo.
var nombre_ciudad = "Valencia"
var revisado = true
nombre_ciudad = 32
revisado = "no"
Estaligerezaalahoradeasignartiposalasvariablespuedeserunaventajaenunprincipio,sobretodoparapersonasinexpertas,peroalalargapuedeserfuentedeerroresyaquedependiendodeltipoquesonlasvariablessecomportarándeunmodouotroysinocontrolamosconexactitudeltipodelasvariablespodemosencontrarnossumandountextoaunnúmero.Javascriptoperaráperfectamente,ydevolveráundato,peroenalgunoscasospuedequenosealoqueestábamosesperando.Asípues,aunquetenemoslibertadconlostipos,estamismalibertadnoshaceestarmásatentosaposiblesdesajustesdifícilesdedetectaralolargodelosprogramas.Veamosloqueocurriríaencasodesumarletrasynúmeros.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 28 de 121
var sumando1 = 23
var sumando2 = "33"
var suma = sumando1 + sumando2
document.write(suma)
Estescriptnosmostraríaenlapáginaeltexto2333,quenosecorrespondeconlasumadelosdosnúmeros,sinoconsuconcatenación,unodetrásdelotro.
Veremosalgunascosasmásreferentesalostiposdedatosenelpróximoartículo.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen24/08/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
TiposdedatosenJavascript
VemoslostrestiposdedatosquesoportaJavascript:numerico,boleanoytexto.
EnelartículoanteriordelManualdeJavascriptyaempezamosamostrarqueenunavariablepodemosalmacenardistintostiposdeinformación.Noobstante,todavíahayalgunascosasquequeremosexplicarsobrelosdistintostiposdedatosdisponiblesenJavascript.
Ennuestrosscriptsvamosamanejarvariablesdiversasclasesdeinformación,comotextosonúmeros.Cadaunadeestasclasesdeinformaciónsonlostiposdedatos.Javasciptdistingueentretrestiposdedatosytodaslasinformacionesquesepuedanguardarenvariablesvanaestarencajadasenunodeestostiposdedatos.Veamosdetenidamentecuálessonestostrestiposdedatos.
Tipodedatosnumérico
Enestelenguajesóloexisteuntipodedatosnumérico,alcontrarioqueocurreenlamayoríadeloslenguajesmásconocidos.Todoslosnúmerossonportantodeltiponumérico,independientementedelaprecisiónquetenganosisonnúmerosrealesoenteros.Losnúmerosenterossonnúmerosquenotienencoma,como3o339.Losnúmerosrealessonnúmerosfraccionarios,como2.69o0.25,quetambiénsepuedenescribirennotacióncientífica,porejemplo2.482e12.
ConJavascripttambiénpodemosescribirnúmerosenotrasbases,comolahexadecimal.Lasbasessonsistemasdenumeraciónqueutilizanmásomenosdígitosparaescribirlosnúmeros.Existentresbasesconlasquepodemostrabajar
Base10,eselsistemaqueutilizamoshabitualmente,elsistemadecimal.Cualquiernúmero,pordefecto,seentiendequeestáescritoenbase10.Base8,tambiénllamadosistemaoctal,queutilizadígitosdel0al7.Paraescribirunnúmeroenoctalbastaconescribiresenúmeroprecedidodeun0,porejemplo045.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 29 de 121
Base16osistemahexadecimal,eselsistemadenumeraciónqueutiliza16dígitos,loscomprendidosentreel0yel9ylasletrasdelaAalaF,paralosdígitosquefaltan.Paraescribirunnúmeroenhexadecimaldebemosescribirloprecedidodeunceroyunaequis,porejemplo0x3EF.
Tipoboleano
Eltipobolean,booleaneninglés,sirveparaguardarunsiounnoodichodeotromodo,unverdaderoounfalso.Seutilizapararealizaroperacioneslógicas,generalmentepararealizaraccionessielcontenidodeunavariableesverdaderoofalso.
Siunavariableesverdaderoentonces-----EjecutounasinstruccionesSino-----EjecutootrasLosdosvaloresquepuedentenerlasvariablesboleanassontrueofalse.
miBoleana = true
<br>
miBoleana = false
Tipodedatoscadenadecaracteres
Elúltimotipodedatoseselquesirveparaguardaruntexto.Javascriptsólotieneuntipodedatosparaguardartextoyenelsepuedenintroducircualquiernúmerodecaracteres.Untextopuedeestarcompuestodenúmeros,letrasycualquierotrotipodecaracteresysignos.Lostextosseescribenentrecomillas,doblesosimples.
miTexto = "Pepe se va a pescar"
miTexto = '23%%$ Letras & *--*'
Todoloquesecolocaentrecomillas,comoenlosejemplosanterioresestratadocomounacadenadecaracteresindependientementedeloquecoloquemosenelinteriordelascomillas.Porejemplo,enunavariabledetextopodemosguardarnúmerosyenesecasotenemosquetenerencuentaquelasvariablesdetipotextoylasnuméricasnosonlamismacosaymientrasquelasdenuméricasnossirvenparahacercálculosmatemáticoslasdetextono.
Caracteresdeescapeencadenasdetexto
Hayunaseriedecaracteresespecialesquesirvenparaexpresarenunacadenadetextodeterminadoscontrolescomopuedeserunsaltodelíneaountabulador.Estossonloscaracteresdeescapeyseescribenconunanotaciónespecialquecomienzaporunacontrabarra(unabarrainclinadaalrevésdelanormal'')yluegosecolocaelcódigodelcarácteramostrar.
Uncaráctermuycomúneselsaltodelínea,queseconsigueescribiendon.Otrocaráctermuyhabitualescolocarunascomillas,puessicolocamosunascomillassinsucarácterespecialnoscerraríanlascomillasquecolocamosparainiciarlacadenadecaracteres.Lascomillaslastenemosqueintroducirentoncescon"o'(comillasdoblesosimples).Existenotroscaracteres
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 30 de 121
deescape,queveremosenlatabladeabajomásresumidos,aunquetambiénhayquedestacarcomocarácterhabitualelqueseutilizaparaescribirunacontrabarra,paranoconfundirlaconeliniciodeuncarácterdeescape,queesladoblecontrabarra.
Tablacontodosloscaracteresdeescape
Saltodelínea:\nComillasimple:\'Comilladoble:\"Tabulador:\tRetornodecarro:\rAvancedepágina:\fRetrocederespacio:\bContrabarra:\
Algunosdeestoscaracteresprobablementenolosllegarásautilizarnunca,puessufunciónesunpocorarayavecespococlara.
ConestoyahemosterminadodeexplicartodoloquesedebeconocersobrelasvariablesenJavascriptypodemoscomenzarconuntemanuevoqueseráeldeoperadores.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen24/08/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 31 de 121
OperadoresenJavascript
Tratamosendiversosartículoslosoperadores.OfreceremosexplicacionesdetodoslosoperadoresquepodremosencontrarnosenJavascript.
OperadoresJavascript
Estudiamosloqueesunoperadoryparaquésirve.VemoslosoperadoresdeJavascript,endiversasclasificaciones,aritméticos,asignación,comparación,condicionales,aniveldebitypreferenciadeoperadores.
EnelpresenteartículodelManualdeJavascriptvamosacomenzarunaseriedetextosenfocadosenexplicarlosdiferentesoperadoresdisponiblesenestelenguajedeprogramación.
Aldesarrollarprogramasencualquierlenguajeseutilizanlosoperadores,quesirvenparahacerloscálculosyoperacionesnecesariosparallevaracabotusobjetivos.Hastaelmenordelosprogramasimaginablesnecesitadelosoperadorespararealizarcosas,yaqueunprogramaquenorealizaseoperaciones,sóloselimitaríaahacersiemprelomismo.
Eselresultadodelasoperacionesloquehacequeunprogramavaríesucomportamientosegúnlosdatosquetengaparatrabajarynosofrezcaresultadosqueseanrelevantesparaelusuarioqueloutilice.Existenoperacionesmássencillasocomplejas,quesepuedenrealizarconoperandosdedistintostipos,comonúmerosotextos,veremosenestecapítulo,ylossiguientes,demaneradetalladatodosestosoperadoresdisponiblesenJavascript.
Ejemplosdeusodeoperadores
Antesdeentraraenumerarlosdistintostiposdeoperadoresvamosaverunpardeejemplosdeéstosparaquenosayudenahacernosunaideamásexactadeloqueson.Enelprimerejemplovamosarealizarunasumautilizandoeloperadorsuma.
3+5
Estaesunaexpresiónmuybásicaquenotienemuchosentidoellasola.Hacelasumaentrelosdosoperandosnúmero3y5,peronosirvedemuchoporquenosehacenadaconelresultado.Normalmentesecombinanmásdeunoperadorparacrearexpresionesmásútiles.Laexpresiónsiguienteesunacombinaciónentredosoperadores,unorealizaunaoperaciónmatemáticayelotrosirveparaguardarelresultado.
miVariable = 23 * 5
Enelejemploanterior,eloperador*seutilizapararealizarunamultiplicaciónyeloperador=
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 32 de 121
seutilizaparaasignarelresultadoenunavariable,demodoqueguardemoselvalorparasuposterioruso.
Losoperadoressepuedenclasificarsegúneltipodeaccionesquerealizan.Acontinuaciónvamosavercadaunodeestosgruposdeoperadoresydescribiremoslafuncióndecadauno.
Operadoresaritméticos
Sonlosutilizadosparalarealizacióndeoperacionesmatemáticassimplescomolasuma,restaomultiplicación.Enjavascriptsonlossiguientes:
SumadedosvaloresRestadedosvalores,tambiénpuedeutilizarseparacambiarelsignodeunnúmerosiloutilizamosconunsolooperando-23Multiplicacióndedosvalores/Divisióndedosvalores%Elrestodeladivisióndedosnúmeros(3%2devolvería1,elrestodedividir3entre2)++Incrementoenunaunidad,seutilizaconunsolooperando--Decrementoenunaunidad,utilizadoconunsolooperando
Ejemplos
precio = 128 //introduzco un 128 en la variable precio
unidades = 10 //otra asignación, luego veremos operadores de asignación
factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3
precio++ //incrementa en una unidad el precio (ahora vale 129)
Operadoresdeasignación
Sirvenparaasignarvaloresalasvariables,yahemosutilizadoenejemplosanterioreseloperadordeasignación=,perohayotrosoperadoresdeestetipo,queprovienendellenguajeCyquemuchosdeloslectoresyaconocerán.
=Asignación.Asignalapartedeladerechadeligualalapartedelaizquierda.Aalderechasecolocanlosvaloresfinalesyalaizquierdageneralmentesecolocaunavariabledondequeremosguardareldato.+=Asignaciónconsuma.Realizalasumadelapartedeladerechaconladelaizquierdayguardaelresultadoenlapartedelaizquierda.-=Asignaciónconresta*=Asignacióndelamultiplicación/=Asignacióndeladivisión%=Seobtieneelrestoyseasigna
Ejemplos
ahorros = 7000 //asigna un 7000 a la variable ahorros
ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500
ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 33 de 121
EnelsiguienteartículoseguiremosconociendootrosdelosoperadoresdeJavascript:Operadoresdecadenas,operadoreslógicosyoperadorescondicionales.
Operadoresdecadenas
Lascadenasdecaracteres,ovariablesdetexto,tambiéntienensuspropiosoperadorespararealizaraccionestípicassobrecadenas.Aunquejavascriptsólotieneunoperadorparacadenassepuedenrealizarotrasaccionesconunaseriedefuncionespredefinidasenellenguajequeveremosmásadelante.
Concatenadoscadenas,pegalasegundacadenaacontinuacióndelaprimera.
Ejemplo
cadena1 = "hola"
cadena2 = "mundo"
cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"
Undetalleimportantequesepuedeverenestecasoesqueeloperador+sirveparadosusosdistintos,sisusoperandossonnúmeroslossuma,perosisetratadecadenaslasconcatena.Estopasaengeneralcontodoslosoperadoresqueserepitenenellenguaje,javascriptessuficientementelistoparaentenderquetipodeoperaciónrealizarmedianteunacomprobacióndelostiposqueestánimplicadosenélla.
Uncasoqueresultaríaconfusoeselusodeloperador+cuandoserealizalaoperaciónconoperadorestextoynuméricosentremezclados.Enestecasojavascriptasumequesedesearealizarunaconcatenaciónytrataalosdosoperandoscomosidecadenasdecaracteressetrataran,inclusosilacadenadetextoquetenemosfueseunnúmero.Estoloveremosmásfácilmenteconelsiguienteejemplo.
miNumero = 23
miCadena1 = "pepe"
miCadena2 = "456"
resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"
resultado2 = miNumero + miCadena2 //resultado2 vale "23456"
miCadena2 += miNumero //miCadena2 ahora vale "45623"
Comohemospodidover,tambiénenelcasodeloperador+=,siestamostratandoconcadenasdetextoynúmerosentremezclados,trataráalosdosoperadorescomosifuesencadenas.
Nota:Comosepuedehaberimaginado,faltanmuchasoperacionestípicasarealizarconcadenas,paralascualesnoexistenoperadores.EsporqueesasfuncionalidadesseobtienenatravésdelaclaseStringdeJavascript,queveremosmásadelante.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 34 de 121
Operadoreslógicos
Estosoperadoressirvenpararealizaroperacioneslógicas,quesonaquellasquedancomoresultadounverdaderoounfalso,yseutilizanparatomardecisionesennuestrosscripts.Envezdetrabajarconnúmeros,pararealizarestetipodeoperacionesseutilizanoperandosboleanos,queconocimosanteriormente,quesonelverdadero(true)yelfalso(false).Losoperadoreslógicosrelacionanlosoperandosboleanosparadarcomoresultadootrooperandoboleano,talcomopodemosverenelsiguienteejemplo.
Sitengohambreytengocomidaentoncesmepongoacomer
NuestroprogramaJavascriptutilizaríaenesteejemplounoperandoboleanoparatomarunadecisión.Primeromirarásitengohambre,siescierto(true)mirarásidispongodecomida.Sisonlosdosciertos,sepuedeponeracomer.Encasodequenotengacomidaoquenotengahambrenocomería,aligualquesinotengohambrenicomida.EloperandoencuestióneseloperandoY,quevaldráverdadero(true)encasodequelosdosoperandosvalganverdadero.
Nota:Paranollevarnosaengaño,cabedecirquelosoperadoreslógicospuedenutilizarseencombinacióncontiposdedatosdistintosdelosboleanos,peroenestecasodebemosutilizarlosenexpresionesquelosconviertanenboleanos.Enelsiguientegrupodeoperadoresquevamosatratarenesteartículohablaremossobrelosoperadorescondicionales,quesepuedenutilizarjuntoconlosoperadoreslógicospararealizarsentenciastodolocomplejasquenecesitemos.Porejemplo:
if (x==2 && y!=3){
//la variable x vale 2 y la variable y es distinta de tres
}
Enlaexpresióncondicionalanteriorestamosevaluandodoscomprobacionesqueserelacionanconunoperadorlógico.Porunapartex==2devolveráuntrueencasoquelavariablexvalga2yporotra,y!=3devolveráuntruecuandolavariableytengaunvalordistintode3.Ambascomprobacionesdevuelvenunboleanocadauna,queluegoseleaplicaeloperadorlógico&¶comprobarsiambascomprobacionessecumplieronalmismotiempo.
Sobradecirque,paraverejemplosdeoperadorescondicionales,necesitamosaprenderestructurasdecontrolcomoif,alasquenohemosllegadotodavía.
!OperadorNOonegación.Sieratruepasaafalseyviceversa.&&OperadorY,sisonlosdosverdaderosvaleverdadero.||OperadorO,valeverdaderosiporlomenosunodeellosesverdadero.
Ejemplo
miBoleano = true
miBoleano = !miBoleano //miBoleano ahora vale false
tengoHambre = true
tengoComida = true
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 35 de 121
comoComida = tengoHambre && tengoComida
Operadorescondicionales
Sirvenpararealizarexpresionescondicionalestodolocomplejasquedeseemos.Estasexpresionesseutilizanparatomardecisionesenfuncióndelacomparacióndevarioselementos,porejemplosiunnumeroesmayorqueotroosisoniguales.
Nota:Porsupuesto,losoperadorescondicionalessirventambiénpararealizarexpresionesenlasquesecomparanotrostiposdedatos.Nadaimpidecomparardoscadenas,paraversisonigualesodistintas,porejemplo.Inclusopodríamoscompararboleanos.
Losoperadorescondicionalesseutilizanenlasexpresionescondicionalesparatomasdedecisiones.Comoestasexpresionescondicionalesseránobjetodeestudiomásadelanteserámejordescribirlosoperadorescondicionalesmásadelante.Detodosmodosaquípodemosverlatabladeoperadorescondicionales.
==Compruebasidosvaloressoniguales!=Compruebasidosvaloressondistintos
Mayorque,devuelvetruesielprimeroperandoesmayorqueelsegundo<Menorque,estruecuandoelelementodelaizquierdaesmenorqueeldeladerecha=Mayorigual<=Menorigual
Veremosejemplosdeoperadorescondicionalescuandoexpliquemosestructurasdecontrol,comolacondicionalif.
Demaneraadicional,enestetextoveremosunasuntodebastanteimportanciaenlaprogramaciónengeneral,queeslaprecedenciadeoperadores,quedebemostenerencuentasiemprequeutilicemosdiversosoperadoresenunamismaexpresión,paraqueserelacionenentreellosyseresuelvandelamanerahabíamosplaneado.
Operadoresaniveldebit
Estossonmuypococorrientesyesposiblequenuncaloslleguesautilizar.Suusoserealizaparaefectuaroperacionesconcerosyunos.Todoloquemanejaunordenadorsoncerosyunos,aunquenosotrosutilicemosnúmerosyletrasparanuestrasvariablesenrealidadestosvaloresestánescritosinternamenteenformadecerosyunos.Enalgunoscasopodremosnecesitarrealizaroperacionestratandolasvariablescomocerosyunosyparaelloutilizaremosestosoperandos.Enestemanualsenosquedaunpocogranderealizarunadiscusiónsobreestetipodeoperadores,peroaquípodréisverestosoperadoresporsialgúndíaoshacenfalta.
&Ydebits^Xordebits|Odebits<<>>>>>>>>=>>=<<=Variasclasesdecambios
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 36 de 121
Precedenciadelosoperadores
Laevaluacióndeunasentenciadelasquehemosvistoenlosejemplosanterioresesbastantesencillayfácildeinterpretar,perocuandoenunasentenciaentranenjuegomultituddeoperadoresdistintospuedehaberunaconfusiónalahoradeinterpretarlaydilucidarquéoperadoressonlosqueseejecutanantesqueotros.Paramarcarunaspautasenlaevaluacióndelassentenciasyqueestasseejecutensiempreigualyconsentidocomúnexistelaprecedenciadeoperadores,quenoesmásqueelordenporelqueseiránejecutandolasoperacionesqueellosrepresentan.Enunprincipiotodoslosoperadoresseevalúandeizquierdaaderecha,peroexistenunasnormasadicionales,porlasquedeterminadosoperadoresseevalúanantesqueotros.Muchasdeestasreglasdeprecedenciaestánsacadasdelasmatemáticasysoncomunesaotroslenguajes,laspodemosveracontinuación.
()[].Paréntesis,corchetesyeloperadorpuntoquesirveparalosobjetos!-++--negación,negativoeincrementos
/%Multiplicacióndivisiónymódulo+-Sumayresta<<>>>>>Cambiosaniveldebit<<=>>=Operadorescondicionales==!=Operadorescondicionalesdeigualdadydesigualdad&^|Lógicosaniveldebit&&||Lógicosboleanos=+=-=*=/=%=<<=>>=>>>=&=^=!=Asignación
Enlossiguientesejemplospodemosvercómolasexpresionespodríanllegaraserconfusas,peroconlatabladeprecedenciadeoperadorespodremosentendersinerrorescuáleselordenporelqueseejecutan.
12 * 3 + 4 - 8 / 2 % 3
Enestecasoprimeroseejecutanlosoperadores*/y%,deizquierdaaderecha,conloqueserealizaríanestasoperaciones.Primerolamultiplicaciónyluegoladivisiónporestarmásalaizquierdadelmódulo.
36 + 4 - 4 % 3
Ahoraelmódulo.
36 + 4 - 1
Porúltimolassumasylasrestasdeizquierdaaderecha.
40 - 1
Loquenosdacomoresultadoelvalorsiguiente.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 37 de 121
39
Detodosmodos,esimportantedarsecuentaqueelusodelosparéntesispuedeahorrarnosmuchosquebraderosdecabezaysobretodolanecesidaddesabernosdememorialatabladeprecedenciadelosoperadores.Cuandoveamospococlaroelordenconelqueseejecutaránlassentenciaspodemosutilizarlosyasíforzarqueseevalúeanteseltrozodeexpresiónqueseencuentradentrodelosparéntesis.
Paraacabarconeltemadeoperadoresnosquedaporverunúltimooperadoruntantoespecial,llamadotypeof.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen20/09/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Controldetipos
Esimportantequeconozcamoseltipodelasvariablesparatrabajarsinerrores.VemoscómoobtenerloconJavascript.
EllistadodeoperadoresquevenimosofreciendoparaelManualdeJavascriptsecompletaconeloperadortypeof,queveremosacontinuación.
Hemospodidocomprobarque,paradeterminadosoperadores,esimportanteeltipodedatosqueestánmanejando,puestoquesilosdatossondeuntiposerealizaránoperacionesdistintasquesisondeotro.
Porejemplo,cuandoutilizábamoseloperador+,sisetratabadenúmeroslossumaba,perosisetratabadecadenasdecaractereslasconcatenaba.Vemospuesqueeltipodelosdatosqueestamosutilizandosíqueimportayquetendremosqueestarpendientesestedetallesiqueremosquenuestrasoperacionesserealicentalcomoesperábamos.
Paracomprobareltipodeundatosepuedeutilizarotrooperadorqueestádisponibleapartirdejavascript1.1,eloperadortypeof,quedevuelveunacadenadetextoquedescribeeltipodeloperadorqueestamoscomprobando.
Nota:alolargodenuestraexperienciaconJavascriptveremosquemuchasvecesesmásútilcambiareltipodedatodeunavariableantesdehacerunacomprobacióncontipeofparaversilapodemosutilizarcomooperando.Existendiversasfuncionesparaintentarcambiareltipodeunavariable,comoparseInt(),queveremosmásadelanteenlaSegundaPartedelManualdeJavascript.
var boleano = true
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 38 de 121
var numerico = 22
var numerico_flotante = 13.56
var texto = "mi texto"
var fecha = new Date()
document.write("<br>El tipo de boleano es: " + typeof boleano)
document.write("<br>El tipo de numerico es: " + typeof numerico)
document.write("<br>El tipo de numerico_flotante es: " + typeof numerico_flotante)
document.write("<br>El tipo de texto es: " + typeof texto)
document.write("<br>El tipo de fecha es: " + typeof fecha)
Siejecutamosestescriptobtendremosqueenlapáginaseescribiráelsiguientetexto:
Eltipodeboleanoes:booleanEltipodenumericoes:numberEltipodenumerico_flotantees:numberEltipodetextoes:stringEltipodefechaes:object
Enesteejemplopodemosverqueserimprimenenlapáginalosdistintostiposdelasvariables.Estospuedenserlossiguientes:
boolean,paralosdatosboleanos.(Trueofalse)number,paralosnuméricos.string,paralascadenasdecaracteres.object,paralosobjetos.
Queremosdestacartansólodosdetallesmás:
1. Losnúmeros,yatenganonopartedecimal,sonsiempredeltipodedatosnumérico.2. Unadelasvariablesesunpocomáscompleja,eslavariablefechaqueesunobjetodela
claseDate(),queseutilizaparaelmanejodefechasenlosscripts.Laveremosmásadelante,asícomolosobjetos.
ConestoyahemosterminadodeverlalistadeoperadoresquepodemosutilizarenJavascriptyenelpróximoartículopasaremosaconocerlasestructurasdecontrol.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen03/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 39 de 121
EstructurasdecontrolenJavascript
Lasestructurasdecontrolnospermitiráncontrolarelflujodenuestrosprogramas.Porsupuesto,tambiénformanpartedelosasuntosmásbásicosdeJavascriptydecualquierlenguajedeprogramación,porloquelasveremoscondetenimiento.
EstructurasdecontrolenJavascript
Introducciónalasestructurasdecontrol.EnumeramoslasquetenemosdisponiblesenJavascript.
LosscriptsvistoshastaahoraenelManualdeJavascripthansidotremendamentesencillosylineales:seibanejecutandolassentenciassimplesunadetrásdelaotradesdeelprincipiohastaelfin.Sinembargo,estonotieneporquesersiempreasíydehecho,enlamayoríadeloscasoslascosassonbastantemáscomplejas.
Sitenemosalgunaexperienciaenlaprogramaciónsabremosqueenlosprogramasgeneralmentesenecesitaráhacercosasdistintasdependiendodelestadodenuestrasvariablesorealizarunmismoprocesomuchasvecessinescribirlasmismaslíneasdecódigounayotravez.Pararealizarcosasmáscomplejasennuestrosscriptsseutilizanlasestructurasdecontrol.Conellaspodemosrealizartomasdedecisionesybucles.EnlossiguientescapítulosvamosaconocerlasdistintasestructurasdecontrolqueexistenenJavascript.
Tomadedecisiones
Nossirvenpararealizarunasaccionesuotrasenfuncióndelestadodelasvariables.Esdecir,tomardecisionesparaejecutarunasinstruccionesuotrasdependiendodeloqueestéocurriendoeneseinstanteennuestrosprogramas.
Porejemplo,dependiendosielusuarioqueentraennuestrapáginaesmayordeedadonoloes,podemospermitirleonoverloscontenidosdenuestrapágina.
Siedadesmayorque18entoncesTedejoverelcontenidoparaadultosSinoTemandofueradelapágina
EnJavascriptpodemostomardecisionesutilizandodosenunciadosdistintos.
IFSWITCH
Bucles
Losbuclesseutilizanpararealizarciertasaccionesrepetidamente.Sonmuyutilizadosatodos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 40 de 121
losnivelesenlaprogramación.Conunbuclepodemosporejemploimprimirenunapáginalosnúmerosdel1al100sinnecesidaddeescribircienvecesellainstrucciónimprimir.
Desdeel1hastael100Imprimirelnúmeroactual
Enjavascriptexistenvariostiposdebucles,cadaunoestáindicadoparauntipodeiteracióndistintoysonlossiguientes:
FORWHILEDOWHILE
Comohemosseñaladoya,lasestructurasdecontrolsonmuyimportantesenJavascriptyencualquierlenguajedeprogramación.Esporelloqueenlossiguientescapítulosveremoscadaunadeestasestructurasdetenidamente,describiendosuusoyofreciendoalgunosejemplos.Comenzaremosconlaestructuradecontrolif.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen03/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
EstructuraIFenJavascript
VemoscómotrabajarconlaestruturadecontrolIFenJavascript.
EnelManualdeJavascriptdeDesarrolloWeb.comyaempezamosaexplicarloquesonlasestructurasdecontrol.Enelpresenteartículovamosadedicarnosamostrarcómofuncionalasentenciaif,queeslaestructuramáshabitualdelasutilizadasparatomardecisionesenprogramasinformáticos.
IFesunaestructuradecontrolutilizadaparatomardecisiones.Esuncondicionalquesirvepararealizarunasuotrasoperacionesenfuncióndeunaexpresión.Funcionadelasiguientemanera,primeroseevalúaunaexpresión,sidaresultadopositivoserealizanlasaccionesrelacionadasconelcasopositivo.
LasintaxisdelaestructuraIFeslasiguiente.
Nota:TodaslasestructurasdecontrolseescribenenminúsculasenJavascript.Aunquealgunasvecesparadestacarelnombredelaestructuralapodamosescribireneltextodelmanualconletrasmayúsculas,enelcódigodenuestrosscriptssiempretenemosqueponerloenminúsculas.Encasocontrariorecibiremosunmensajedeerror.
if (expresión) {
//acciones a realizar en caso positivo
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 41 de 121
//...
}
Opcionalmentesepuedenindicaraccionesarealizarencasodequelaevaluacióndelasentenciadevuelvaresultadosnegativos.
if (expresión) {
//acciones a realizar en caso positivo
//...
} else {
//acciones a realizar en caso negativo
//...
}
Fijémonosenvariascosas.Paraempezarvemoscomoconunasllavesenglobanlasaccionesquequeremosrealizarencasodequesecumplanonolasexpresiones.Estasllaveshandecolocarsesiempre,exceptoenelcasodequesólohayaunainstruccióncomoaccionesarealizar,quesonopcionales.
Nota:Aunquelasllavesparaenglobarlassentenciasaejecutartantoenelcasopositivocomonegativoseanopcionalescuandoqueremosejecutarunaúnicasentencia,larecomendaciónescolocarlassiempre,porqueobtendremosasíuncódigofuentemásclaro.Porejemplo:
if (llueve)
alert("Cae agua");
Seríaexactamenteigualqueestecódigo:
if (llueve){
alert("Cae agua");
}
Oincluso,igualaesteotro:
if (llueve) alert("Cae agua");
Sinembargo,cuandoutilizamoslasllaves,elcódigoquedabastantemásclaro,porquesepuedeapreciarenunrápidovistazoquéinstruccionesestándependiendodelcasopositivodelif.Estoesundetallequeahoraquizásnotengamuchaimportancia,peroqueseagradecerácuandoelprogramaseamáscomplejoocuandovariosprogramadoresseencarguendetocarunmismocódigo.
Otrodetallequesaltaalavistaeselsangrado(margen)quehemoscolocadoencadaunodelosbloquesdeinstruccionesaejecutarenloscasospositivosynegativos.Estesangradoestotalmenteopcional,sólolohemoshechoasíparaquelaestructuraIFsecomprendadeuna
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 42 de 121
maneramásvisual.Lossaltosdelíneatampocosonnecesariosysehancolocadotambiénparaqueseveamejorlaestructura.PerfectamentepodríamoscolocartodalainstrucciónIFenlamismalíneadecódigo,peroesonoayudaráaquelascosasesténclaras.
Nota:Nosotros,asícomoloharíacualquierpersonaconciertaexperienciaeneláreadeprogramación,aconsejamosqueseutilicenlossangradosysaltosdelíneanecesariosparaquelasinstruccionessepuedanentendermejor.Quizáseldíaquerealizasuncódigotengasclaroquéhashechoyporquéesasí,perodentrodeunmes,cuandotengasquereleeresecódigo,quizásteacuerdesmenosdeloquehicisteentusscriptsyagradecerásquetenganunformatoamigableparaquesepuedanleerconfacilidadporlaspersonas.Sitrabajasenequipoestasrecomendacionesserántodavíamásimportantes,puestoquetodavíaesmáscomplicadoleercódigofuentequehanrealizadootraspersonas.
VeamosalgúnejemplodecondicionalesIF.
if (dia == "lunes")
document.write ("Que tengas un feliz comienzo de semana")
Sieslunesnosdesearáunafelizsemana.Noharánadaencasocontrario.Comoenesteejemplosóloindicamosunainstrucciónparaelcasopositivo,noharáfaltautilizarlasllaves(aunquesíseríarecomendablehaberlaspuesto).Fíjatetambiéneneloperadorcondicionalqueconstadedossignosigual.
Vamosaverahoraotroejemplo,unpocomáslargo.
if (credito >= precio) {
document.write("has comprado el artículo " + nuevoArtículo) //enseño compra
carrito += nuevoArticulo //introduzco el artículo en el carrito de la compra
credito -= precio //disminuyo el crédito según el precio del artículo
} else {
document.write("se te ha acabado el crédito") //informo que te falta dinero
window.location = "carritodelacompra.html" //voy a la página del carrito
}
Esteejemploesunpocomáscomplejo,ytambiénunpocoficticio.Loquehagoescomprobarsitengocréditopararealizarunasupuestacompra.Paraellomirosielcréditoesmayoroigualqueelpreciodelartículo,siesasíinformodelacompra,introduzcoelartículoenelcarritoyrestoelprecioalcréditoacumulado.Sielpreciodelartículoessuperioraldinerodisponibleinformodelasituaciónymandoalnavegadoralapáginadondesemuestrasucarritodelacompra.
Expresionescondicionales
Laexpresiónaevaluarsecolocasiempreentreparéntesisyestácompuestaporvariablesquesecombinanentresimedianteoperadorescondicionales.Recordamosquelosoperadorescondicionalesrelacionabandosvariablesydevolvíansiempreunresultadoboleano.Por
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 43 de 121
ejemplounoperadorcondicionaleseloperador"esigual"(==),quedevuelvetrueencasodequelosdosoperandosseanigualesofalseencasodequeseandistintos.
if (edad > 18)
document.write("puedes ver esta página para adultos")
Enesteejemploutilizamosenoperadorcondicional"esmayor"(>).Enestecaso,devuelvetruesilavariableedadesmayorque18,conloqueseejecutaríalalíneasiguientequenosinformadequesepuedeverelcontenidoparaadultos.
Lasexpresionescondicionalessepuedencombinarconlasexpresioneslógicasparacrearexpresionesmáscomplejas.Recordamosquelasexpresioneslógicassonlasquetienencomooperandosalosboleanosyquedevuelvanotrovalorboleano.Sonlosoperadoresnegaciónlógica,YlógicoyOlógico.
if (bateria < 0.5 && redElectrica == 0)
document.write("tu ordenador portatil se va a apagar en segundos")
Loquehacemosescomprobarsilabateríadenuestrosupuestoordenadoresmenorque0.5(estácasiacabada)ytambiéncomprobamossielordenadornotieneredeléctrica(estádesenchufado).Luego,eloperadorlógicolosrelacionaconunY,demodoquesiestácasisinbateríaYsinredeléctrica,informoqueelordenadorsevaaapagar.
Nota:LalistadeoperadoresquesepuedenutilizarconlasestructurasIFsepuedenverenelcapítulodeoperadorescondicionalesyoperadoreslógicos.
Laestructuraifesdelasmásutilizadasenlenguajesdeprogramación,paratomardecisionesenfuncióndelaevaluacióndeunasentencia.EnelartículoanteriordelManualdeJavascriptyacomenzamosaexplicarlaestructuraifyahoravamosaveralgunosusosunpoquitomásavanzados.
SentenciasIFanidadas
ParahacerestructurascondicionalesmáscomplejaspodemosanidarsentenciasIF,esdecir,colocarestructurasIFdentrodeotrasestructurasIF.ConunsoloIFpodemosevaluaryrealizarunaacciónuotrasegúndosposibilidades,perositenemosmásposibilidadesqueevaluardebemosanidarIFsparacrearelflujodecódigonecesarioparadecidircorrectamente.
Porejemplo,sideseocomprobarsiunnúmeroesmayormenoroigualqueotro,tengoqueevaluartresposibilidadesdistintas.Primeropuedocomprobarsilosdosnúmerossoniguales,siloson,yaheresueltoelproblema,perosinosonigualestodavíatendréquevercuáldelosdosesmayor.VeamosesteejemploencódigoJavascript.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 44 de 121
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos números son iguales")
}else{
if (numero1 > numero2) {
document.write("El primer número es mayor que el segundo")
}else{
document.write("El primer número es menor que el segundo")
}
}
Elflujodelprogramaescomocomentábamosantes,primeroseevalúasilosdosnúmerossoniguales.Encasopositivosemuestraunmensajeinformandodeello.Encasocontrarioyasabemosquesondistintos,peroaundebemosaveriguarcuáldelosdosesmayor.Paraesosehaceotracomparaciónparasabersielprimeroesmayorqueelsegundo.Siestacomparacióndaresultadospositivosmostramosunmensajediciendoqueelprimeroesmayorqueelsegundo,encasocontrarioindicaremosqueelprimeroesmenorqueelsegundo.
Volvemosaremarcarquelasllavessonenestecasoopcionales,puessóloseejecutaunasentenciaparacadacaso.Además,lossaltosdelíneaylossangradostambiénopcionalesentodocasoynossirvensóloparaverelcódigodeunamaneramásordenada.Mantenerelcódigobienestructuradoyescritodeunamaneracomprensibleesmuyimportante,yaquenosharálavidamásagradablealahoradeprogramarymásadelantecuandotengamosquerevisarlosprogramas.
Nota:Enestemanualutilizaréunanotacióncomolaquehaspodidoverenlaslíneasanteriores.Ademásmantendréesanotaciónentodomomento.Estosinlugaradudasharáqueloscódigosconejemplosseancomprensiblesmásrápidamente,sinolohiciéramosasíseríaunverdaderoincordioleerlos.Estamismarecetaesaplicablealoscódigosquehasdecreartúyelprincipalbeneficiadoserástúmismoyloscompañerosquelleguenaleertucódigo.
OperadorIF
HayunoperadorquenohemosvistotodavíayesunaformamásesquemáticaderealizaralgunosIFsencillos.ProvienedellenguajeC,dondeseescribenmuypocaslíneasdecódigoydondecuantomenosescribamosmáselegantesseremos.Esteoperadoresunclaroejemplodeahorrodelíneasycaracteresalescribirlosscripts.Loveremosrápidamente,pueslaúnicarazónporlaqueloincluyoesparaquesepasqueexisteysiloencuentrasenalgunaocasiónporahísepasidentificarloycómofunciona.
UnejemplodeusodeloperadorIFsepuedeveracontinuación.
Variable = (condición) ? valor1 : valor2
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 45 de 121
Esteejemplonosólorealizaunacomparacióndevalores,ademásasignaunvaloraunavariable.Loquehaceesevaluarlacondición(colocadaentreparéntesis)ysiespositivaasignaelvalor1alavariableyencasocontrarioleasignaelvalor2.Veamosunejemplo:
momento = (hora_actual < 12) ? "Antes del mediodía" : "Después del mediodía"
Esteejemplomirasilahoraactualesmenorque12.Siesasí,esqueahoraesantesdelmediodía,asíqueasigna"Antesdelmediodía"alavariablemomento.Silahoraesmayoroiguala12esqueyaesdespuésdemediodía,conloqueseasignaeltexto"Despuésdelmediodía"alavariablemomento.
ParaampliarlainformaciónrecomendamosvertambiénelVideotutorialdeJavascript,enelvídeodondetratamoslaestructuraIF.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen03/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
EstructuraSWITCHdeJavascript
LaestructuradecontrolswitchdeJavascriptesutilizadaparatomardecisionesenfuncióndedistintosestadosovaloresdeunavariable.
Lasestructurasdecontrolsonlamaneraconlaquesepuededominarelflujodelosprogramas,parahacercosasdistintasenfuncióndelosestadosdelasvariables.EnelManualdeJavascriptyaempezamosaverlasestructurasdecontrolyahoralehatocadoelturnoaSWITCH,unaestructuraunpocomáscomplejaquepermitehacermúltiplesoperacionesdependiendodelestadodeunavariable.
Enesteartículoveremosqueswitchnossirveparatomardecisionesenfuncióndedistintosestadosdelasvariables.Estaexpresiónseutilizacuandotenemosmúltiplesposibilidadescomoresultadodelaevaluacióndeunasentencia.
LaestructuraSWITCHseincorporóapartirdelaversión1.2deJavascript(Netscape4eInternetExplorer4).Susintaxiseslasiguiente.
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 46 de 121
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
Laexpresiónseevalúa,sivalevalor1seejecutanlassentenciasrelacionadasconesecaso.Silaexpresiónvalevalor2seejecutanlasinstruccionesrelacionadasconesevaloryasísucesivamente,portantasopcionescomodeseemos.Finalmente,paratodosloscasosnocontempladosanteriormenteseejecutaelcasopordefecto.
Lapalabrabreakesopcional,perosinolaponemosapartirdequeseencuentrecoincidenciaconunvalorseejecutarántodaslassentenciasrelacionadasconesteytodaslassiguientes.Esdecir,siennuestroesquemaanteriornohubieseningúnbreakylaexpresiónvaliesevalor1,seejecutaríanlassentenciasrelacionadasconvalor1ytambiénlasrelacionadasconvalor2,valor3ydefault.
Tambiénesopcionallaopcióndefaultuopciónpordefecto.
Veamosunejemplodeusodeestaestructura.Supongamosquequeremosindicarquedíadelasemanaes.Sieldíaes1(lunes)sacarunmensajeindicándolo,sieldíaes2(martes)debemossacarunmensajedistintoyasísucesivamenteparacadadíadelasemana,menosenel6(sábado)y7(domingo)quequeremosmostrarelmensaje"esfindesemana".Paradíasmayoresque7indicaremosqueesedíanoexiste.
switch (dia_de_la_semana) {
case 1:
document.write("Es Lunes")
break
case 2:
document.write("Es Martes")
break
case 3:
document.write("Es Miércoles")
break
case 4:
document.write("Es Jueves")
break
case 5:
document.write("Es viernes")
break
case 6:
case 7:
document.write("Es fin de semana")
break
default:
document.write("Ese día no existe")
}
Elejemploesrelativamentesencillo,solamentepuedetenerunapequeñadificultad,consistenteeninterpretarloquepasaenelcaso6y7,quehabíamosdichoqueteníamosque
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 47 de 121
mostrarelmismomensaje.Enelcaso6enrealidadnoindicamosningunainstrucción,perocomotampococolocamosunbreakseejecutarálasentenciaosentenciasdelcasosiguiente,quecorrespondenconlasentenciaindicadaenelcaso7queeselmensajequeinformaqueesfindesemana.Sielcasoes7simplementeseindicaqueesfindesemana,talcomosepretendía.
Nota:AdemáscontamosconunvideotutorialsobreelSWITCHenJavascriptqueospuedeserdemuchaayudaparaentenderlotodomuchomejor.
EnelsiguienteartículocomenzaremosaexplorarlasestructurasdecontrolparahacerbuclesorepeticionesenJavascript,comenzandoporelbuclefor.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen03/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
BucleFORenJavascript
DescripciónyejemplosdefuncionamientodelbucleFOR.
ComenzamosconesteartículodelManualdeJavascriptaexplorarlasestructurasdecontrolparaproducirbuclesorepeticiones,comenzandoporelbuclefor,noporserelmássimple,perosíelmásutilizadoenlaprogramación.
ElbucleFORseutilizapararepetirunaomásinstruccionesundeterminadonúmerodeveces.Deentretodoslosbucles,elFORsesueleutilizarcuandosabemosseguroelnúmerodevecesquequeremosqueseejecute.Lasintaxisdelbucleforsemuestraacontinuación.
for (inicialización; condición; actualización) {
//sentencias a ejecutar en cada iteración
}
ElbucleFORtienetrespartesincluidasentrelosparéntesis,quenossirvenparadefinircómodeseamosqueserealicenlasrepeticiones.Laprimeraparteeslainicialización,queseejecutasolamentealcomenzarlaprimeraiteracióndelbucle.Enestapartesesuelecolocarlavariablequeutilizaremosparallevarlacuentadelasvecesqueseejecutaelbucle.
Lasegundaparteeslacondición,queseevaluarácadavezquecomienceunaiteracióndelbucle.Contieneunaexpresiónparadecidircuándosehadedetenerelbucle,omejordicho,lacondiciónquesedebecumplirparaquecontinúelaejecucióndelbucle.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 48 de 121
Porúltimotenemoslaactualización,quesirveparaindicarloscambiosquequeramosejecutarenlasvariablescadavezqueterminalaiteracióndelbucle,antesdecomprobarsisedebeseguirejecutando.
Despuésdelforsecolocanlassentenciasquequeremosqueseejecutenencadaiteración,acotadasentrellaves.
Unejemplodeutilizacióndeestebuclelopodemosveracontinuación,dondeseimprimiránlosnúmerosdel0al10.
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("<br>")
}
Enestecasoseinicializalavariableia0.Comocondiciónpararealizarunaiteración,setienequecumplirquelavariableiseamenoroigualque10.Comoactualizaciónseincrementaráen1lavariablei.
Comosepuedecomprobar,estebucleesmuypotente,yaqueenunasolalíneapodemosindicarmuchascosasdistintasymuyvariadas,loquepermiteunarápidaconfiguracióndelbucleyunaversatilidadenorme.
Porejemplosiqueremosescribirlosnúmerodel1al1.000dedosendosseescribiráelsiguientebucle.
for (i=1;i<=1000;i+=2)
document.write(i)
Sinosfijamos,encadaiteraciónactualizamoselvalordeiincrementándoloen2unidades.
Nota:Otrodetalle,noutilizamoslasllavesenglobandolasinstruccionesdelbucleFORporquesólotieneunasentenciayenestecasonoesobligado,talcomopasabaconlasinstruccionesdelIF.
Siqueremoscontardescendentementedel343al10utilizaríamosestebucle.
for (i=343;i>=10;i--)
document.write(i)
Enestecasodecrementamosenunaunidadlavariableiencadaiteración,comenzandoenelvalor343ysiemprequelavariabletengaunvalormayoroigualque10.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 49 de 121
Ejerciciodeejemplodelbuclefor
Vamosahacerunapausaparaasimilarelbucleforconunejercicioquenoencierraningunadificultadsihemosentendidoelfuncionamientodelbucle.
Setratadehacerunbuclequeescribaenunapáginaweblosencabezamientosdesde<H1>hasta<H6>conuntextoqueponga"Encabezadodenivelx".
LoquedeseamosescribirenunapáginawebmedianteJavascripteslosiguiente:
<H1>Encabezado de nivel 1</H1>
<H2>Encabezado de nivel 2</H2>
<H3>Encabezado de nivel 3</H3>
<H4>Encabezado de nivel 4</H4>
<H5>Encabezado de nivel 5</H5>
<H6>Encabezado de nivel 6</H6>
Paraellotenemosquehacerunbuclequeempieceen1ytermineen6yencadaiteraciónescribiremoselencabezadoquetoca.
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
}
Estescriptsepuedeverenfuncionamientoaquí.
Ahoraqueyaconocemoselbuclefor,estamosencondicionesdeaprenderamanejarotrasestructurasdecontrolpararealizarrepeticiones,comolosbucleswhileydo...while.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen18/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/bucle-for-javascript.html
BuclesWHILEyDOWHILE
DescripciónydiferentesusosdelosdostiposdebuclesWHILEqueseencuentrandisponiblesenJavascript,conalgunosejemplosprácticos.
EstamostratandoacercadelasdistintasestructurasdecontrolqueexistenenellenguajeJavascriptyenconcretoviendolosdistintostiposdebuclesquepodemosimplementarenestelenguajedeprogramación.EnartículosanterioresdelManualdeJavascriptvimosyaelprimerodelosbuclesquedebemosconocer,elbucleforyahoravamosatratarsobrelosotrosdostiposdeestructurasdecontrolparahacerrepeticiones.Asípues,veamosahoralosdostiposdebuclesWHILEquepodemosutilizarenJavascriptylosusosdecadauno.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 50 de 121
BucleWHILE
Estosbuclesseutilizancuandoqueremosrepetirlaejecucióndeunassentenciasunnúmeroindefinidodeveces,siemprequesecumplaunacondición.SemássencillodecomprenderqueelbucleFOR,puesnoincorporaenlamismalínealainicializacióndelasvariablessucondiciónparaseguirejecutándoseysuactualización.Sóloseindica,comoveremosacontinuación,lacondiciónquesetienequecumplirparaqueserealiceunaiteración.
while (condición){
//sentencias a ejecutar
}
Unejemplodecódigodondeseutilizaestebuclesepuedeveracontinuación.
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
Esteesunejemplodelomássencilloquesepuedehacerconunbuclewhile.Loquehaceespedirqueelusuariointroduzcauncolorylohacerepetidasveces,mientrasqueelcolorintroducidonosearojo.Paraejecutarunbuclecomoesteprimerotenemosqueinicializarlavariablequevamosutilizarenlacondicióndeiteracióndelbucle.Conlavariableinicializadapodemosescribirelbucle,quecomprobaráparaejecutarsequelavariablecolorseadistintode"rojo".Encadaiteracióndelbuclesepideunnuevocoloralusuarioparaactualizarlavariablecoloryseterminalaiteración,conloqueretornamosalprincipiodelbucle,dondetenemosquevolveraevaluarsiloquehayenlavariablecolores"rojo"yasísucesivamentemientrasquenosehayaintroducidocomocoloreltexto"rojo".
Nota:HemosutilizadoenesteejemplolafunciónpromptdeJavascript,quenohemosvistotodavíaenestemanual.Estafunciónsirveparaquemostrarunacajadediálogodondeelusuariodebeescribiruntexto.EstafunciónpertenecealobjetowindowdeJavascriptylacomentamosenelartículoMétodosdewindowenJavascript.
BucleDO...WHILE
Elbucledo...whileeslaúltimadelasestructurasparaimplementarrepeticionesdelasquedisponeenJavascriptyesunavariacióndelbuclewhilevistoanteriormente.Seutilizageneralmentecuandonosabemoscuantasvecessehabrádeejecutarelbucle,igualqueelbucleWHILE,conladiferenciadequesabemosseguroqueelbucleporlomenosseejecutaráunavez.
EstetipodebucleseintrodujoenJavascript1.2,porloquenotodoslosnavegadoreslossoportan,sólolosdeversión4osuperior.Encualquiuercaso,cualquiercódigoquequieras
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 51 de 121
escribirconDO...WHILEsepuedeescribirtambiénutilizandounbucleWHILE,conloqueennavegadoresantiguosdeberástraducirtubucleDO...WHILEporunbucleWHILE.
Lasintaxiseslasiguiente:
do {
//sentencias del bucle
} while (condición)
Elbucleseejecutasiempreunavezyalfinalseevalúalacondiciónparadecirsiseejecutaotravezelbucleoseterminasuejecución.
VeamoselejemploqueescribimosparaunbucleWHILEenesteotrotipodebucle.
var color
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
Esteejemplofuncionaexactamenteigualqueelanterior,exceptoquenotuvimosqueinicializarlavariablecolorantesdeintroducirnosenelbucle.Pideuncolormientrasqueelcolorintroducidoesdistintoque"rojo".
Ejemplodeusodelosbucleswhile
VamosaveracontinuaciónunejemplomásprácticosobrecómotrabajarconunbucleWHILE.ComoresultamuydifícilhacerejemplosprácticosconlopocoquesabemossobreJavascript,vamosaadelantarunainstrucciónqueaunnoconocemos.
Enesteejemplovamosadeclararunavariableeinicializarlaa0.Luegoiremossumandoaesavariableunnúmeroaleatoriodel1al100hastaquesumemos1.000omás,imprimiendoelvalordelavariablesumadespuésdecadaoperación.SeránecesarioutilizarelbucleWHILEporquenosabemosexactamenteelnúmerodeiteracionesquetendremosquerealizar(dependerádelosvaloresaleatoriosquesevayanobteniendo).
var suma = 0
while (suma < 1000){
suma += parseInt(Math.random() * 100)
document.write (suma + "<br>")
}
SuponemosqueporloquerespectaalbucleWHILEnohabráproblemas,perodondesiquepuedehaberlosesenlasentenciautilizadaparatomarunnúmeroaleatorio.Sinembargo,noesnecesarioexplicaraquílasentenciaporquelotenemosplaneadohacermásadelante.Detodosmodos,silodeseas,puedesveresteartículoquehablasobrenúmerosaleatoriosenJavascript.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 52 de 121
Podemosverunapáginaconelejemploenfuncionamiento.
ConestoyahemosconocidotodoslostiposdebuclesqueexistenenJavascript,noobstanteaunvamosadedicarunartículoparaexplicarlassentenciasbreakycontinuequenossirvenparaalterarelfuncionamientonormaldelosbuclesendossentidos.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen18/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Breakycontinue
DosinstruccionesqueaumentanelcontrolsobrelosbuclesenJavascript.Sirvenparapararycontinuarconlasiguienteiteracióndelbuclerespectivamente.
Javascripttienediferentesestructurasdecontrolparaimplementarbucles,comoFOR,WHILEyDO...WHILE,queyahemospodidoexplicarencapítulosanterioresdelManualdeJavascript.Comohemospodidocomprobar,conestosbuclespodemosabarcargrancantidaddenecesidades,peroquizásconeltiempoencuentresquetefaltanalgunasposibilidadesdecontroldelasrepeticionesdelosbucles.
Imaginaporejemploqueestashaciendounbuclemuylargoparaencontraralgoencientosomilesdesitios.Peroponteenelcasoquedurantelasprimerasiteracionesencuentresesevalorquebuscabas.Entoncesnotendríasentidocontinuarconelrestodelbucleparabuscareseelemento,puesyalohabíasencontrado.Enestassituacionesnosconvienesaberparaelbuclecancelarelrestodeiteraciones.Obviamente,éstoessolounejemplodecómopodríamosvernosenlanecesidaddecontrolarunpocomáselbucle.Enlavidarealcomoprogramadorencontrarásmuchasotrasocasionesenlasqueteinteresaráhacerestouotrascosasconellos.
Asípues,existendosinstruccionesquesepuedenusarendelasdistintasestructurasdecontrolyprincipalmenteenlosbucles,queteserviránparacontrolardostiposdesituaciones.Sonlasinstruccionesbreakycontinue.:
break:Significadetenerlaejecucióndeunbucleysalirsedeél.continue:Sirveparadetenerlaiteraciónactualyvolveralprincipiodelbuclepararealizarotraiteración,sicorresponde.
Break
Sedetieneunbucleutilizandolapalabrabreak.Detenerunbuclesignificasalirsedeélydejarlotodocomoestáparacontinuarconelflujodelprogramainmediatamentedespuésdelbucle.
for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 53 de 121
if (escribe == "no")
break
}
Esteejemploescribelosnúmerosdel0al9yencadaiteracióndelbuclepreguntaalusuariosideseacontinuar.Sielusuariodicecualquiercosacontinua,exceptocuandodice"no",situaciónenlacualsesaledelbucleydejalacuentapordondesehabíaquedado.
Continue
Sirveparavolveralprincipiodelbucleencualquiermomento,sinejecutarlaslíneasquehayapordebajodelapalabracontinue.
var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Esteejemplo,encondicionesnormalescontaríahastadesdei=0hastai=7,perocadavezqueseejecutaelbuclepreguntaalusuariosideseaincrementarlavariableono.Siintroduce"no"seejecutalasentenciacontinue,conloquesevuelvealprincipiodelbuclesinllegaraincrementaren1lavariablei,yaqueseignoraríanlassentenciaquehayanpordebajodelcontinue.
Ejemploadicionaldelasentenciabreak
Unejemplomásprácticosobreestasinstruccionessepuedeveracontinuación.SetratadeunbucleFORplaneadoparallegarhasta1.000peroquelovamosapararconbreakcuandolleguemosa333.
for (i=0;i<=1000;i++){
document.write(i + "<br>")
if (i==333)
break;
}
Podemosverunapáginaconelejemploenfuncionamiento.
ConladescripcióndelassentenciasbreakycontinuehemospodidoabarcartodoloquesedebesabersobrelacreacióndebuclesenJavascript.Ahorabien,enelsiguienteartículotodavíavamosaseguireneltemadelasestructurasdecontrol,porquequeremosofrecerunejemplounpocomásavanzadodondeaprenderemosaanidarbucles.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 54 de 121
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen18/10/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
BuclesanidadosenJavascript
Explicamosloqueesunbucleanidado,cómofuncionanyparaquésirven.Vemosalgunosejemplos.
EnelManualdeJavascripthemosrecorridoyadiversosartículosparahablardebucles.Enestemomentonodeberíahaberningúnproblemaparapodercrearlosdistintostiposdebuclessinproblemas,noobstante,queremosdedicarunartículocompletoatrataracercadeunodelosusosmáshabitualesdelosbucles,quepodremosencontrarcuandoestemoshaciendoprogramasmáscomplejos:laanidacióndebucles.
Anidarunbucleconsisteenmeteresebucledentrodeotro.Laanidacióndebuclesesnecesariaparahacerdeterminadosprocesamientosunpocomáscomplejosquelosquehemosvistoenlosejemplosanteriores.Sienvuestraexperienciacomoprogramadoresloshabéisanidadounbucletodavía,tenercertezaquemástardeotempranoosencontraréisconesanecesidad.
Unbucleanidadotieneunaestructuracomolaquesigue.Vamosatratardeexplicarloalavistadeestaslíneas:
for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
Laejecuciónfuncionarádelasiguientemanera.Paraempezarseinicializaelprimerbucle,conloquelavariableivaldrá0yacontinuaciónseinicializaelsegundobucle,conloquelavariablejvaldrátambién0.Encadaiteraciónseimprimeelvalordelavariablei,unguión("-")yelvalordelavariablej,comolasdosvariablesvalen0,seimprimiráeltexto"0-0"enlapáginaweb.
Debidoalflujodelprogramaenesquemasdeanidacióncomoelquehemosvisto,elbuclequeestáanidado(máshaciadentro)eselquemásvecesseejecuta.Enesteejemplo,paracadaiteracióndelbuclemásexternoelbucleanidadoseejecutaráporcompletounavez,esdecir,harásus10iteraciones.Enlapáginawebseescribiríanestosvalores,enlaprimeraiteracióndelbucleexternoydesdeelprincipio:
0-00-10-20-30-40-50-60-70-80-9
Paracadaiteracióndelbucleexternoseejecutaránlas10iteracionesdelbucleinternooanidado.Hemosvistolaprimeraiteración,ahoravamosaverlassiguientesiteracionesdelbucleexterno.Encadaunaacumulaunaunidadenlavariablei,conloquesaldríanestos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 55 de 121
valores.
1-01-11-21-31-41-51-61-71-81-9
Yluegoestos:
2-02-12-22-32-42-52-62-72-82-9
Asíhastaqueseterminenlosdosbucles,queseríacuandosealcanzaseelvalor9-9.
Veamosunejemplomuyparecidoalanterior,aunqueunpocomásútil.Setratadeimprimirenlapáginalastodaslastablasdemultiplicar.Del1al9,esdecir,latabladel1,ladel2,del3...
for (i=1;i<10;i++){
document.write("<br><b>La tabla del " + i + ":</b><br>")
for (j=1;j<10;j++) {
document.write(i + " x " + j + ": ")
document.write(i*j)
document.write("<br>")
}
}
Conelprimerbuclecontrolamoslatablaactualyconelsegundobucleladesarrollamos.Enelprimerbucleescribimosunacabecera,ennegrita,indicandolatablaqueestamosescribiendo,primeroladel1yluegolasdemásenordenascendentehastael9.Conelsegundobucleescribocadaunodelosvaloresdecadatabla.Sepuedeverelejemploenmarchaenesteenlace.
Nota:Veremosmáscosasconbuclesanidadosencapítulosposteriores,aunquesiqueremosadelantarnosunpocoparaverunnuevoejemploqueafianceestosconocimientospodemosirviendounejemploenelTallerdeJavascriptsobrebuclesanidados,dondeseconstruyelatablacontodosloscolorespurosendefinicionesde256colores.
Conesteartículomásbienprácticosobreanidacióndebucles,terminamoseltemadelasestructurasdecontrol.AhorapasaremosaotraseccióndeesteManualdeJavascript,enlaquetrataremossobrelasfunciones.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen10/12/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 56 de 121
FuncionesenJavascript
Lasfuncionesnospermitiránhacerprogramasyscriptsmásoptimizadosydefácilmantenimiento.Tambiénsonbásicasencualquierlenguajedeprogramaciónylesdedicaremosvariosartículos.
FuncionesenJavascript
ComenzamosconlasfuncionesenJavascript.Definimoselconceptodefunciónyaprendemosacrearlasyallamarlas.
SeguimostrabajandoyampliandonuestrosconocimientossobreJavascript.ConlovistohastaahoraenelManualdeJavascriptyatenemosunaciertasolturaparatrabajarenesteinteresantelenguajedeprogramación.Perotodavíanosquedamuchopordelante.
Ahoravamosaveruntemamuyimportante,sobretodoparalosquenohanprogramadonuncayconJavascriptestándandosusprimerospasosenelmundodelaprogramaciónyaqueveremosunconceptonuevo,eldefunción,ylosusosquetiene.Paralosqueyaconozcanelconceptodefuncióntambiénseráuncapítuloútil,puestambiénveremoslasintaxisyfuncionamientodelasfuncionesenJavascript.
Quéesunafunción
Alahoradehacerunprogramaligeramentegrandeexistendeterminadosprocesosquesepuedenconcebirdeformaindependiente,yquesonmássencillosderesolverqueelproblemaentero.Además,estossuelenserrealizadosrepetidasvecesalolargodelaejecucióndelprograma.Estosprocesossepuedenagruparenunafunción,definidaparaquenotengamosquerepetirunayotravezesecódigoennuestrosscripts,sinoquesimplementellamamosalafunciónyellaseencargadehacertodoloquedebe.
Asíquepodemosverunafuncióncomounaseriedeinstruccionesqueenglobamosdentrodeunmismoproceso.Esteprocesosepodráluegoejecutardesdecualquierotrositioconsolollamarlo.Porejemplo,enunapáginawebpuedehaberunafunciónparacambiarelcolordelfondoydesdecualquierpuntodelapáginapodríamosllamarlaparaquenoscambieelcolorcuandolodeseemos.
Nota:Siqueremos,podemosampliarestadescripcióndelasfuncionesenelartículoConceptodefunción.
Lasfuncionesseutilizanconstantemente,nosólolasqueescribestú,sinotambiénlasqueya
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 57 de 121
estándefinidasenelsistema,puestodosloslenguajesdeprogramaciónsuelentenerunmontóndefuncionespararealizarprocesoshabituales,comoporejemploobtenerlahora,imprimirunmensajeenlapantallaoconvertirvariablesdeuntipoaotro.Yahemosvistoalgunafunciónennuestrossencillosejemplosanteriores.Porejemplo,cuandohacíamosundocument.write()enrealidadestábamosllamandoalafunciónwrite()asociadaaldocumentodelapágina,queescribeuntextoenlapágina.
Enloscapítulosdefuncionesvamosprimeroavercómorealizarnuestraspropiasfuncionesycómollamarlasluego.AlolargodelmanualveremosmuchasdelasfuncionesdefinidasenJavascriptquedebemosutilizarpararealizardistintostiposdeaccioneshabituales.
Cómoseescribeunafunción
Unafunciónsedebedefinirconunasintaxisespecialquevamosaconoceracontinuación.
function nombrefuncion (){
instrucciones de la función
...
}
Primeroseescribelapalabrafunction,reservadaparaesteuso.Seguidamenteseescribeelnombredelafunción,quecomolosnombresdevariablespuedetenernúmeros,letrasyalgúncarácteradicionalcomoenguiónbajo.Acontinuaciónsecolocanentrellaveslasdistintasinstruccionesdelafunción.Lasllavesenelcasodelasfuncionesnosonopcionales,ademásesútilcolocarlassiemprecomoseveenelejemplo,paraquesereconozcafácilmentelaestructuradeinstruccionesqueenglobalafunción.
Veamosunejemplodefunciónparaescribirenlapáginaunmensajedebienvenidadentrodeetiquetas<H1>paraquequedemásresaltado.
function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}
Simplementeescribeenlapáginauntexto.Admitimosqueesunafuncióntansencilla,queelejemplonoexpresasuficientementeelconceptodefunción,peroyaveremosotrasmáscomplejas.LasetiquetasH1nosemuestranenlapágina,sinoquesoninterpretadascomoelsignificadodelamisma,enestecasoqueescribimosunencabezadodenivel1.Comoestamosescribiendoenunapáginaweb,alponeretiquetasHTMLseinterpretancomoloqueson.
Cómollamaraunafunción
Paraejecutarunafunciónlatenemosqueinvocarencualquierpartedelapágina.Conesoconseguiremosqueseejecutentodaslasinstruccionesquetienelafunciónentrelasdosllaves.
Paraejecutarlafunciónutilizamossunombreseguidodelosparéntesis.Porejemplo,asíllamaríamosalafunciónescribirBienvenida()queacabamosdecrear.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 58 de 121
escribirBienvenida()
Luegoveremosqueexistenmuchascosasadicionalesquedebemosconocerdelasfunciones,comoelpasodeparámetrosolosvaloresderetorno.PeroantesvamosaexplicardóndedebemoscolocarlasfuncionesJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen02/11/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
DóndecolocamoslasfuncionesJavascript
VemoslamaneradeincluirfuncionesJavascript,decliente,dentrodelaspáginasweb.
Lasfuncionessonunodelosprincipalescomponentesdelosprogramas,enlamayoríadeloslenguajesdeprogramación.EnelManualdeJavascriptyahemoscomenzadoaexplicarquéesunafunciónycómopodemoscrearlaeinvocarlaenestelenguaje.Ahoravamosatrataruntemaquenoestantodesintaxisyprogramación,sinoquetienemásqueverconelusocorrectoyhabitualquesehacedelasfuncionesenJavascript,quenoesotroquelacolocacióndelcódigodelasfuncionesenlapáginaweb.
Enprincipio,podemoscolocarlasfuncionesencualquierpartedelapágina,siempreentreetiquetas<SCRIPT>,claroestá.Noobstanteexisteunalimitaciónalahoradecolocarlaconrelaciónaloslugaresdesdedondeselallame.Teadelantamosquelomásfácilescolocarlafunciónantesdecualquierllamadaalamismayasíseguroquenuncanosequivocaremos.
Existendosopcionesposiblesparacolocarelcódigodeunafunción:
a)Colocarlafunciónenelmismobloquedescript:Enconcreto,lafunciónsepuededefinirenelbloque<SCRIPT>dondeestélallamadaalafunción,aunqueesindiferentesilallamadaseencuentraantesodespuésdelcódigodelafunción,dentrodelmismobloque<SCRIPT>.
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
Esteejemplofuncionacorrectamenteporquelafunciónestádeclaradaenelmismobloquequesullamada.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 59 de 121
b)Colocarlafunciónenotrobloquedescript:Tambiénesválidoquelafunciónseencuentreenunbloque<SCRIPT>anterioralbloquedondeestálallamada.
<HTML>
<HEAD>
<TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
miFuncion()
</SCRIPT>
</BODY>
</HTML>
VemosuncódigocompletosobrecómopodríaserunapáginawebdondetenemosfuncionesJavascript.Comosepuedecomprobar,lasfuncionesestánenlacabeceradelapágina(dentrodelHEAD).Ésteesunlugarexcelentedondecolocarlas,porquesesuponequeenlacabeceranosevanautilizartodavíaysiemprepodremosdisfrutardeellasenelcuerpoporquesabemosseguroqueyahansidodeclaradas.
Paraquequedeclaroesteasuntodelacolocacióndefuncionesveamoselsiguienteejemplo,quedaríaunerror.Examinaatentamenteelcódigosiguiente,quelanzaráunerror,debidoaquehacemosunallamadaaunafunciónqueseencuentradeclaradaenunbloque<SCRIPT>posterior.
<SCRIPT>
miFuncion()
</SCRIPT>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
ConestoesperamoshaberresueltotodaslasdudassobrelacolocacióndelcódigodelasfuncionesJavascript.Ensiguientesartículosveremosotrostemasinteresantescomolosparámetrosdelasfunciones.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 60 de 121
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen02/11/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Parámetrosdelasfunciones
Vemosloquesonlosparámetrosenlasfunciones.VemoscomodefinirfuncionesquerecibenparámetrosenellenguajeJavascriptycomohacerllamadasafuncionespasandoparámetros.
EnelManualdeJavascripthemoshabladoanteriormentesobrefunciones.Enconcretoesteeseltercerartículoqueabordamossobreeltema.
Lasideasquehemosexplicadoanteriormentesobrefuncionesnosonlasúnicasquedebemosaprenderparamanejarlasentodasupotencia.Lasfuncionestambiéntienenunaentradayunasalidadedatos.EnesteartículoveremoscómopodemosenviardatosalasfuncionesJavascript.
Parámetros
Losparámetrosseusanparamandarvaloresalasfunciones.Unafuncióntrabajaráconlosparámetrospararealizarlasacciones.Pordecirlodeotramanera,losparámetrossonlosvaloresdeentradaquerecibeunafunción.
Porponerunejemplosencillodeentender,unafunciónquerealizaseunasumadedosnúmerostendríacomoparámetrosaesosdosnúmeros.Losdosnúmerossonlaentrada,asícomolasalidaseríaelresultadodelasuma,peroesoloveremosmástarde.
Veamosunejemploanteriorenelquecreábamosunafunciónparamostrarunmensajedebienvenidaenlapáginaweb,peroalqueahoralevamosapasarunparámetroquecontendráelnombredelapersonaalaquehayquesaludar.
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Comopodemosverenelejemplo,paradefinirenlafunciónunparámetrotenemosqueponerelnombredelavariablequevaaalmacenareldatoquelepasemos.Esavariable,queenestecasosellamanombre,tendrácomovaloreldatoquelepasemosalafuncióncuandolallamemos.Además,lavariabledonderecibimoselparámetrotendrávidadurantelaejecucióndelafunciónydejarádeexistircuandolafunciónterminesuejecución.
Parallamaraunafunciónquetieneparámetrossecolocaentreparéntesiselvalordelparámetro.Parallamaralafuncióndelejemplohabríaqueescribir:
escribirBienvenida("Alberto García")
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 61 de 121
Alllamaralafunciónasí,elparámetronombretomacomovalor"AlbertoGarcía"yalescribirelsaludoporpantallaescribirá"HolaAlbertoGarcía"entreetiquetas<H1>.
Losparámetrospuedenrecibircualquiertipodedatos,numérico,textual,boleanoounobjeto.Realmentenoespecificamoseltipodelparámetro,poresodebemosteneruncuidadoespecialaldefinirlasaccionesquerealizamosdentrodelafunciónyalpasarlevalores,paraasegurarnosquetodoesconsecuenteconlostiposdedatosqueesperamostengannuestrasvariablesoparámetros.
Múltiplesparámetros
Unafunciónpuederecibirtantosparámetroscomoqueramosyparaexpresarlosecolocanlosnombresdelosparámetrosseparadosporcomas,dentrodelosparéntesis.Veamosrápidamentelasintaxisparaquelafuncióndeantes,perohechaparaquerecibadosparámetros,elprimeroelnombrealquesaludaryelsegundoelcolordeltexto.
function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
document.write("</FONT>")
}
Llamaríamosalafunciónconestasintaxis.Entrelosparéntesiscolocaremoslosvaloresdelosparámetros.
var miNombre = "Pepe"
var miColor = "red"
escribirBienvenida(miNombre,miColor)
Hecolocadoentrelosparéntesisdosvariablesenlugardedostextosentrecomillados.Cuandocolocamosvariablesentrelosparámetrosenrealidadloqueestamospasandoalafunciónsonlosvaloresquecontienenlasvariablesynolasmismasvariables.
Losparámetrossepasanporvalor
AlhilodelusodeparámetrosennuestrosprogramasJavascript,tenemosquesaberquelosparámetrosdelasfuncionessepasanporvalor.Estoquieredecirqueestamospasandovaloresynovariables.Enlapráctica,aunquemodifiquemosunparámetroenunafunción,lavariableoriginalquehabíamospasadonocambiarásuvalor.Sepuedeverfácilmenteconunejemplo.
function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 62 de 121
Enelejemplotenemosunafunciónquerecibeunparámetroyquemodificaelvalordelparámetroasignándoleelvalor32.Tambiéntenemosunavariable,queinicializamosa5yposteriormentellamamosalafunciónpasándoleestavariablecomoparámetro.Comodentrodelafunciónmodificamoselvalordelparámetropodríapasarquelavariableoriginalcambiasedevalor,perocomolosparámetrosnomodificanelvalororiginaldelasvariables,éstanocambiadevalor.
Deestemodo,unavezejecutadalafunción,alimprimirenpantallaelvalordemiVariableseimprimiráelnúmero5,queeselvalororiginaldelavariable,enlugarde32queeraelvalorconelquehabíamosactualizadoelparámetro.
EnJavascriptsólosepuedenpasarlasvariablesporvalor.
Ahoraquehemosaprendidoaenviardatosalasfunciones,pormediodelosparámetros,podemosaprenderahacerfuncionesquedevuelvenvalores.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen02/11/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ValoresderetornoenfuncionesJavascript
Lasfuncionespuedendevolvervalores,atravésdelasentenciareturn.TambiénvemosunapuntesobreelámbitodevariablesenfuncionesenJavascript.
EstamosaprendiendoacercadelusodefuncionesenJavascriptyenestosmomentosquizásyanoshayamosdadocuentadelagranimportanciaquetienenparahacerprogramasmásomenosavanzados.EnesteartículodelManualdeJavascriptseguiremosaprendiendocosassobrefuncionesyenconcretoqueconellastambiénsepuededevolvervalores.Además,veremosalgúncasodeusointeresantesobrelasfuncionesquenospuedeaclararunpocoelámbitodevariableslocalesyglobales.
Devolucióndevaloresenlasfunciones
LasfuncionesenJavascripttambiénpuedenretornarvalores.Dehecho,éstaesunadelasutilidadesmásesencialesdelasfunciones,quedebemosconocer,nosóloenJavascriptsinoengeneralencualquierlenguajedeprogramación.Demodoque,alinvocarunafunción,sepodrárealizaraccionesyofrecerunvalorcomosalida.
Porejemplo,unafunciónquecalculaelcuadradodeunnúmerotendrácomoentradaaesenúmeroycomosalidatendráelvalorresultantedehallarelcuadradodeesenúmero.Laentradadedatosenlasfuncioneslavimosanteriormenteenelartículosobreparámetrosdelasfunciones.Ahoratenemosqueaprenderacercadelasalida.
Veamosunejemplodefunciónquecalculalamediadedosnúmeros.Lafunciónrecibirálos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 63 de 121
dosnúmerosyretornaráelvalordelamedia.
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Paraespecificarelvalorqueretornarálafunciónseutilizalapalabrareturnseguidadeelvalorquesedeseadevolver.Enestecasosedevuelveelcontenidodelavariableresultado,quecontienelamediacalculadadelosdosnúmeros.
Quizásnospreguntemosahoracómorecibirundatoquedevuelveunafunción.Realmenteenelcódigofuentedenuestrosprogramaspodemosinvocaralasfuncionesenellugarquedeseemos.Cuandounafuncióndevuelveunvalorsimplementesesustituyelallamadaalafunciónporesevalorquedevuelve.Asípues,paraalmacenarunvalordedevolucióndeunafunción,tenemosqueasignarlallamadaaesafuncióncomocontenidoenunavariable,yesoloharíamosconeloperadordeasignación=.
Parailustrarestosepuedeveresteejemplo,quellamaráalafunciónmedia()yguardaráelresultadodelamediaenunavariableparaluegoimprimirlaenlapágina.
var miMedia
miMedia = media(12,8)
document.write (miMedia)
Múltiplesreturn
EnrealidadenJavascriptlasfuncionessólopuedendevolverunvalor,porloqueenprincipionopodemoshacerfuncionesquedevuelvandosdatosdistintos.
Nota:enlaprácticanadanosimpidequeunafuncióndevuelvamásdeunvalor,perocomosólopodemosdevolverunacosa,tendríamosquemetertodoslosvaloresquequeremosdevolverenunaestructuradedatos,comoporejemplounarray.Noobstante,esoseríaunusomásomenosavanzadoquenovamosaverenestosmomentos.
Ahorabien,aunquesólopodamosdevolverundato,enunamismafunciónpodemoscolocarmásdeunreturn.Comodecimos,sólovamosapoderretornarunacosa,perodependiendodeloquehayasucedidoenlafunciónpodráserdeuntipouotro,conunosdatosuotros.
Enestafunciónpodemosverunejemplodeutilizacióndemúltiplesreturn.Setratadeunafunciónquedevuelveun0sielparámetrorecibidoeraparyelvalordelparámetrosiesteeraimpar.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 64 de 121
function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
Paraaveriguarsiunnúmeroesparhallamoselrestodeladivisiónaldividirloentre2.Sielrestoesceroesqueeraparydevolvemosun0,encasocontrario-elnúmeroesimpar-devolvemoselparámetrorecibido.
Ámbitodelasvariablesenfunciones
Dentrodelasfuncionespodemosdeclararvariables.Sobreesteasuntodebemosdesaberquetodaslasvariablesdeclaradasenunafunciónsonlocalesaesafunción,esdecir,sólotendránvalidezdurantelaejecucióndelafunción.
Nota:Incluso,silopensamos,nospodremosdarcuentaquelosparámetrossoncomovariablesquesedeclaranenlacabeceradelafunciónyqueseinicializanalllamaralafunción.Losparámetrostambiénsonlocalesalafunciónytendránvalidezsólocuandoéstaseestáejecutando.
Podríadarseelcasodequepodemosdeclararvariablesenfuncionesquetenganelmismonombrequeunavariableglobalalapágina.Entonces,dentrodelafunción,lavariablequetendrávalidezeslavariablelocalyfueradelafuncióntendrávalidezlavariableglobalalapágina.
Encambio,sinodeclaramoslasvariablesenlasfuncionesseentenderáporjavascriptqueestamoshaciendoreferenciaaunavariableglobalalapágina,demodoquesinoestácreadalavariablelacrea,perosiempreglobalalapáginaenlugardelocalalafunción.
Veamoselsiguientecódigo.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
EnestecasovariableLocalesunavariablequesehadeclaradoenlafunción,porloqueserálocalalafunciónysólotendrávalidezdurantesuejecución.PorotrapartevariableGlobalnosehallegadoadeclarar(porqueantesdeusarlanosehautilizadolapalabravarparadeclararla).EnestecasolavariablevariableGlobalesglobalatodalapáginayseguiráexistiendoaunquelafunciónfinalicesuejecución.Además,siantesdellamaralafunciónexistieselavariablevariableGlobal,comoresultadodelaejecucióndeestafunción,se
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 65 de 121
machacaríaunhipotéticovalordeesavariableysesustituiríapor"qwerty".
Nota:Podemosencontrarmásinformaciónsobreámbitodevariablesenunartículoanterior.
Conestohemosterminadoeltemadelasfunciones,asíqueenadelantenosdedicaremosaotrosasuntostambiéninteresantes,comosonlosArraysenJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen02/11/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
LibreriadefuncionesJavascript
Javascript,aligualquecualquierotrolenguaje,poneanuestradisposiciónunconjuntodefuncionesquellamamosfuncionesnativasdeJavascript.
Entodosloslenguajesdeprogramaciónexistenlibreríasdefuncionesquesirvenparahacercosasdiversasymuyrepetitivasalahoradeprogramar.Laslibreríasdeloslenguajesdeprogramaciónahorranlatareadeescribirlasfuncionescomunesqueporlogeneralpuedennecesitarlosprogramadores.Unlenguajedeprogramaciónbiendesarrolladotendráunabuenacantidaddeellas.Enocasionesesmáscomplicadoconocerbientodaslaslibreríasqueaprenderaprogramarenellenguaje.
Javascriptcontieneunabuenacantidaddefuncionesensuslibrerías.Comosetratadeunlenguajequetrabajaconobjetosmuchasdelaslibreríasseimplementanatravésdeobjetos.Porejemplo,lasfuncionesmatemáticasolasdemanejodestringsseimplementanmediantelosobjetosMathyString.Sinembargo,existenalgunasfuncionesquenoestánasociadasaningúnobjetoysonlasqueveremosenestecapítulo,yaquetodavíanoconocemoslosobjetosynolosnecesitaremosparaestudiarlas.
FuncionesincorporadasenJavascript
EstassonlasfuncionesqueJavascriptponeadisposicióndelosprogramadores.
eval(string)
EstafunciónrecibeunacadenadecaracteresylaejecutacomosifueraunasentenciadeJavascript.
parseInt(cadena,base)
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 66 de 121
Recibeunacadenayunabase.Devuelveunvalornuméricoresultantedeconvertirlacadenaenunnúmeroenlabaseindicada.
parseFloat(cadena)
Conviertelacadenaenunnúmeroylodevuelve.
escape(carácter)
DevuelveunelcarácterquerecibeporparámetroenunacodificaciónISOLatin1.
unescape(carácter)
Haceexatamenteloopuestoalafunciónescape.
isNaN(número)
Devuelveunboleanodependiendodeloquerecibeporparámetro.Sinoesunnúmerodevuelveuntrue,siesunnumerodevuelvefalse.
Laslibreríasqueseimplementanmedianteobjetosylasdelmanejodelexplorador,quetambiénsemanejanconobjetos,lasveremosmásadelante.
Nota:NoqueremosllevaraengañoalaspersonasconestacortalistadefuncionesnativasdeJavascript.Realmenteexistenmuchasotrasfuncionesquevamosaveralolargodelpresentemanual,loqueocurreesqueestánasociadasaobjetos.Porejemplo,comohabíamosseñalado,existenfuncionesdecadenasdecaracteres,queestánasociadasaobjetosstring,funcionesparatrabajoconcálculosmatemáticosavanzados,queestánasociadasalaclaseMath,funcionesparatrabajoconelobjetodelaventanadelnavegador,coneldocumento,etc.
EjemplosdeusodelasfuncionesincorporadasenJavascript
HastaelmomentohemosconocidosimplementeunlistadodelasfuncionesnativasdellenguajeJavascript.AhorapodemosvervariosejemplosdeutilizacióndefuncionesnativasdeJavascript,quetenemosdisponiblesencualquiernavegadoryencualquierversióndeJavascript.
Veremostresfuncionesdediversoámbitoqueresultanbastantefundamentaleseneltrabajohabitualconestelenguaje,explicadasatravésdeejemplos.
Funcióneval
Estafunciónesmuyimportante,tantoquehayalgunasaplicacionesdeJavascriptquenosepodríanrealizarsinolautilizamos.Suutilizaciónesmuysimple,peropuedequeresulteun
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 67 de 121
pocomáscomplejoentenderenquécasosutilizarlaporqueavecesresultaunpocosutilsuaplicación.
Conlosconocimientosactualesnopodemoshacerunejemplomuycomplicado,peroporlomenospodemosverenmarchalafunción.Vamosautilizarlaenunasentenciaunpocoraraybastanteinservible,perosilaconseguimosentenderconseguiremosentendertambiénlafuncióneval.
var miTexto = "3 + 5"
eval("document.write(" + miTexto +")")
Primerocreamosunavariableconuntexto,enlasiguientelíneautilizamoslafunciónevalycomoparámetrolepasamosunainstrucciónjavascriptparaescribirenpantalla.Siconcatenamoslosstringsquehaydentrodelosparéntesisdelafunciónevalnosquedaesto.
document.write(3 + 5)
Lafunciónevalejecutalainstrucciónqueselepasaporparámetro,asíqueejecutaráestasentencia,loquedarácomoresultadoqueseescribaun8enlapáginaweb.Primeroseresuelvelasumaquehayentreparéntesis,conloqueobtenemosel8yluegoseejecutalainstruccióndeescribirenpantalla.
FunciónparseInt
Estafunciónrecibeunnúmero,escritocomounacadenadecaracteres,yunnúmeroqueindicaunabase.Enrealidadpuederecibirotrostiposdevariables,dadoquelasvariablesnotienentipoenJavascript,perosesueleutilizarpasándoleunstringparaconvertirlavariabledetextoenunnúmero.
Lasdistintasbasesquepuederecibirlafunciónson2,8,10y16.Sinolepasamosningúnvalorcomobaselafuncióninterpretaquelabaseesdecimal.Elvalorquedevuelvelafunciónsiempretienebase10,demodoquesilabasenoes10convierteelnúmeroaesabaseantesdedevolverlo.
VeamosunaseriedellamadasalafunciónparseIntparaverloquedevuelveyentenderunpocomáslafunción.
document.write (parseInt("34"))
Devuelveelnumero34
document.write (parseInt("101011",2))
Devuelveelnumero43
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 68 de 121
document.write (parseInt("34",8))
Devuelveelnumero28
document.write (parseInt("3F",16))
Devuelveelnumero63
Estafunciónseutilizaenlaprácticaparaunmontóndecosasdistintasenelmanejoconnúmeros,porejemploobtenerlaparteenteradeundecimal.
document.write (parseInt("3.38"))
Devuelveelnumero3
Tambiénesmuyhabitualsuusoparasabersiunavariableesnumérica,puessilepasamosuntextoalafunciónquenoseanumériconosdevolveráNaN(NotaNumber)loquequieredecirqueNoesunNúmero.
document.write (parseInt("desarrolloweb.com"))
DevuelveelnumeroNaN
Estemismoejemploesinteresanteconunamodificación,puessilepasamosunacombinacióndeletrasynúmerosnosdarálosiguiente.
document.write (parseInt("16XX3U"))
Devuelveelnumero16
document.write (parseInt("TG45"))
DevuelveelnumeroNaN
Comosepuedever,lafunciónintentaconvertirelstringennúmeroysinopuededevuelveNaN.
Todosestosejemplos,untantoinconexos,sobrecómotrabajaparseIntlosrevisaremosmásadelanteenejemplosmásprácticoscuandotratemoseltrabajoconformularios.
FunciónisNaN
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 69 de 121
Estafuncióndevuelveunboleanodependiendodesiloquerecibeesunnúmeroono.LoúnicoquepuederecibiresunnúmeroolaexpresiónNaN.SirecibeunNaNdevuelvetrueysirecibeunnúmerodevuelvefalse.Esunafunciónmuysencilladeentenderydeutilizar.
LafunciónsueletrabajarencombinaciónconlafunciónparseIntoparseFloat,parasabersiloquedevuelvenestasdosfuncionesesunnúmeroono.
miInteger = parseInt("A3.6")
isNaN(miInteger)
EnlaprimeralíneaasignamosalavariablemiIntegerelresultadodeintentarconvertiraenteroeltextoA3.6.ComoestetextonosepuedeconvertiranúmerolafunciónparseIntdevuelveNaN.LasegundalíneacompruebasilavariableanterioresNaNycomosiqueloesdevuelveuntrue.
miFloat = parseFloat("4.7")
isNaN(miFloat)
Enesteejemploconvertimosuntextoanúmerocondecimales.Eltextoseconvierteperfectamenteporquecorrespondeconunnúmero.AlrecibirunnúmerolafunciónisNaNdevuelveunfalse.
Referencia:ValidarenteroencampodeformularioTenemosunTallerdeJavascriptmuyinteresantequehasidorealizadoparaafianzarlosconocimientosdeestoscapítulos.Setratadeunscriptparavalidaruncampodeformulariodemaneraquesepamosseguroquedentrodelcampohaysiempreunnúmeroentero.Puedesermuyinteresanteleerloahora,yaqueutilizamoslasfuncionesisNaN()yparseInt().Vereltaller
Esperamosquelosejemplosvistosenesteartículohayanresultadointeresantes.Noobstante,comohabíamosseñaladoanteriormente,existenbastantesotrasfuncionesnativasenJavascriptquedebemosconocer,peroqueestánasociadasaclasesyobjetosnativosJavascript.PeroantesdepasaraesepuntoqueremosofrecerunapequeñaguíabásicaparaeltrabajoconprogramaciónorientadaaobjetosenJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen11/03/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 70 de 121
ArraysJavascript
Losarrays,tambiénllamadostablasomatrices,sonlaprimeraestructuradedatosquepodemosaprenderenJavascriptyenotroslenguajesdeprogramación.Sindudaseránimprescindiblesparadesarrollarprogramasmedianamenteavanzados.
ArraysenJavascript
VemosquesonlosarraysenJavascript,paraquésirvenycómoutilizarlos.Veremosdiversasformasdecrearlos,asícomodefiniryaccederasusvalores.
PasamosaunnuevotemaenelManualdeJavascript,enelquevamosaconocernuestraprimeraestructuradedatos.
Enloslenguajesdeprogramaciónexistenestructurasdedatosespecialesquenossirvenparaguardarinformaciónmáscomplejaquesimplesvariables.UnaestructuratípicaentodosloslenguajeseselArray,queescomounavariabledondepodemosintroducirvariosvalores,enlugardesolamenteunocomoocurreconlavariablesnormales.
Losarraysnospermitenguardarvariasvariablesyaccederaellasdemaneraindependiente,escomotenerunavariablecondistintoscompartimentosdondepodemosintroducirdatosdistintos.Paraelloutilizamosuníndicequenospermiteespecificarelcompartimientooposiciónalaquenosestamosrefiriendo.
Nota:LosarraysseintrodujeronenversionesJavascript1.1osuperiores,esdecir,sololospodemosutilizarapartirdelosnavegadores3.0.Paranavegadoresantiguossepuedesimularelarrayutilizandosintaxisdeprogramaciónorientadaaobjetos,perolaverdadesqueactualmenteestalimitaciónnodebepreocuparnos.Además,dadalacomplejidaddelatareadesimularunarraypormediodeobjetos,porlomenosenelmomentoenquenosencontramosylaspocasocasionesenquelonecesitaremos,opinamosqueesmejorolvidarnosdeeseasuntoytrabajarsimplementeconlosarraysnormalmente.AsíqueenesteartículoylossiguientesvamosavercómoutilizarelauténticoarraydeJavascript.
CreacióndeArraysjavascript
Elprimerpasoparautilizarunarrayescrearlo.ParaelloutilizamosunobjetoJavascriptyaimplementadoenelnavegador.Veremosenadelanteuntemaparaexplicarloqueeslaorientaciónaobjetos,aunquenoseránecesarioparapoderentenderelusodelosarrays.Estaeslasentenciaparacrearunobjetoarray:
var miArray = new Array()
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 71 de 121
Estocreaunarrayenlapáginaqueestaejecutándose.Elarraysecreasinningúncontenido,esdecir,notendráningunacasillaocompartimientocreado.TambiénpodemoscrearelarrayJavascriptespecificandoelnúmerodecompartimentosquevaatener.
var miArray = new Array(10)
Enestecasoindicamosqueelarrayvaatener10posiciones,esdecir,10casillasdondeguardardatos.
EsimportantequenosfijemosquelapalabraArrayencódigoJavascriptseescribeconlaprimeraletraenmayúscula.ComoenJavascriptlasmayúsculasyminúsculassiqueimportan,siloescribimosenminúsculanofuncionará.
Tantoseindiqueonoelnúmerodecasillasdelarrayjavascript,podemosintroducirenelarraycualquierdato.Silacasillaestácreadaseintroducesimplementeysilacasillanoestabacreadasecreayluegoseintroduceeldato,conloqueelresultadofinaleselmismo.Estacreacióndecasillasesdinámicayseproducealmismotiempoquelosscriptsseejecutan.Veamosacontinuacióncómointroducirvaloresennuestrosarrays.
miArray[0] = 290
miArray[1] = 97
miArray[2] = 127
Seintroducenindicandoentrecorcheteselíndicedelaposicióndondequeríamosguardareldato.Enestecasointroducimos290enlaposición0,97enlaposición1y127enla2.
LosarraysenJavascriptempiezansiempreenlaposición0,asíqueunarrayquetengaporejemplo10posiciones,tendrácasillasdela0ala9.Pararecogerdatosdeunarraylohacemosigual:poniendoentrecorcheteselíndicedelaposiciónalaquequeremosacceder.Veamoscómoseimprimiríaenlapantallaelcontenidodeunarray.
var miArray = new Array(3)
miArray[0] = 155
miArray[1] = 4
miArray[2] = 499
for (i=0;i<3;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("<br>")
}
Hemoscreadounarraycontresposiciones,luegohemosintroducidounvalorencadaunadelasposicionesdelarrayyfinalmentelashemosimpreso.Engeneral,elrecorridoporarraysparaimprimirsusposiciones,ocualquierotracosa,sehaceutilizandobucles.Enestecaso
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 72 de 121
utilizamosunbucleFORquevadesdeel0hastael2.
Podemosverelejemploenmarchaenotrapágina.
Tiposdedatosenlosarrays
Enlascasillasdelosarrayspodemosguardardatosdecualquiertipo.Podemosverunarraydondeintroducimosdatosdetipocarácter.
miArray[0] = "Hola"
miArray[1] = "a"
miArray[2] = "todos"
Incluso,enJavascriptpodemosguardardistintostiposdedatosenlascasillasdeunmismoarray.Esdecir,podemosintroducirnúmerosenunascasillas,textosenotras,boleanosocualquierotracosaquedeseemos.
miArray[0] = "desarrolloweb.com"
miArray[1] = 1275
miArray[1] = 0.78
miArray[2] = true
DeclaracióneinicializaciónresumidadeArrays
EnJavascripttenemosanuestradisposiciónunamaneraresumidadedeclararunarrayycargarvaloresenunmismopaso.Fijémonosenelcódigosiguiente:
var arrayRapido = [12,45,"array inicializado en su declaración"]
Comosepuedever,seestádefiniendounavariablellamadaarrayRapidoyestamosindicandoenloscorchetesvariosvaloresseparadosporcomas.EstoeslomismoquehaverdeclaradoelarrayconlafunciónArray()yluegohaberlecargadolosvaloresunoauno.
Enelpróximoartículoseguiremosviendocosasrelacionadasconlosarrays,enconcretoaprenderemosaaccederalalongituddeunarray.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen22/12/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Longituddelosarrays
Aprendemosmáscosassobreelfuncionamientodelosarraysyenconcreto
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 73 de 121
vemoscomoutilizarsupropiedadlengthparaaccederalnúmerodecasillasquetiene.
EnelartículoanteriordelManualdeJavascriptempezamosaexplicarelconceptodearrayysuutilizaciónenJavascript.Enesteartículovamosacontinuarconeltema,mostrandoelusodesupropiedadlength.
Todoslosarraysenjavascript,apartedealmacenarelvalordecadaunadesuscasillas,tambiénalmacenanelnúmerodeposicionesquetienen.Paraelloutilizanunapropiedaddelobjetoarray,lapropiedadlength.Yaveremosenobjetosquéesunapropiedad,peroparanuestrocasopodemosimaginarnosqueescomounavariable,adicionalalasposiciones,quealmacenaunnúmeroigualalnúmerodecasillasquetieneelarray.
Paraaccederaunapropiedaddeunobjetosehadeutilizareloperadorpunto.Seescribeelnombredelarrayquequeremosaccederalnúmerodeposicionesquetiene,sincorchetesniparéntesis,seguidodeunpuntoylapalabralength.
var miArray = new Array()
miArray[0] = 155
miArray[1] = 499
miArray[2] = 65
document.write("Longitud del array: " + miArray.length)
Estecódigoimprimiríaenpantallaelnúmerodeposicionesdelarray,queenestecasoes3.Recordamosqueunarraycon3posicionesabarcadesdelaposición0ala2.
Esmuyhabitualqueseutilicelapropiedadlengthparapoderrecorrerunarrayportodassusposiciones.Parailustrarlovamosaverunejemploderecorridoporestearrayparamostrarsusvalores.
for (i=0;i<miArray.length;i++){
document.write(miArray[i])
}
Hayquefijarsequeelbucleforseejecutasiemprequeivalgamenosquelalongituddelarray,extraídadesupropiedadlength.
Elsiguienteejemplonosserviráparaconocermejorlosrecorridosporlosarrays,elfuncionamientodelapropiedadlengthylacreacióndinámicadenuevasposiciones.Vamosacrearunarraycon2posicionesyrellenarsuvalor.Posteriormenteintroduciremosunvalorenlaposición5delarray.Finalmenteimprimiremostodaslasposicionesdelarrayparaverloquepasa.
var miArray = new Array(2)
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 74 de 121
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("<br>")
}
Elejemploessencillo.Sepuedeapreciarquehacemosunrecorridoporelarraydesde0hastaelnúmerodeposicionesdelarray(indicadoporlapropiedadlength).Enelrecorridovamosimprimiendoelnúmerodelaposiciónseguidodelcontenidodelarrayenesaposición.Peropodemostenerunadudaalpreguntarnoscuálseráelnúmerodeelementosdeestearray,yaquelohabíamosdeclaradocon2yluegolehemosintroducidounterceroenlaposición5.Alverlasalidadelprogramapodremoscontestarnuestraspreguntas.Seráalgoparecidoaesto:
Posición0delarray:ColombiaPosición1delarray:EstadosUnidosPosición2delarray:nullPosición3delarray:nullPosición4delarray:nullPosición5delarray:Brasil
Sepuedeverclaramentequeelnúmerodeposicioneses6,dela0ala5.Loquehaocurridoesquealintroducirundatoenlaposición5,todaslascasillasquenoestabancreadashastalaquintasecreantambién.
Lasposicionesdela2ala4estánsininicializar.Enestecasonuestronavegadorhaescritolapalabranullparaexpresaresto,perootrosnavegadorespodránutilizarlapalabraundefined.Yaveremosmásadelantequéesestenullydóndelopodemosutilizar,loimportanteahoraesquecomprendascómotrabajanlosarraysylosutilicescorrectamente.
Podemosverelefectodeestescriptentunavegadorenunapáginaaparte.
Continuaremoseltemadearraysenlasiguienteentregadeestemanual:Arraysmultidimensionales.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen22/12/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ArraysmultidimensionalesenJavascript
Vemosquésonlosarraysmultidimensionales(arraysdemásdeunadimensión)ycómoutilizarlos.Ademásexplicamoscómoinicializararraysensudeclaración.
Comoestamosviendo,losarrayssonbastanteimportantesenJavascriptytambiénenlamayoríadeloslenguajesdeprogramación.EnconcretoyahemosaprendidoacreararraysyutilizarlosenartículosanterioresdelManualdeJavascript.Peroaunnosquedanalgunascosasimportantesqueexplicar,comosonlosarraysdevariasdimensiones.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 75 de 121
Losarraysmultidimensionalessonunestructurasdedatosquealmacenanlosvaloresenmásdeunadimensión.Losarraysquehemosvistohastaahoraalmacenanvaloresenunadimensión,poresoparaaccederalasposicionesutilizamostansolouníndice.Losarraysde2dimensionesguardansusvalores,pordecirlodealgunamanera,enfilasycolumnasyporellonecesitaremosdosíndicesparaaccederacadaunadesusposiciones.
Dichodeotromodo,unarraymultidimensionalescomouncontenedorqueguardaramásvaloresparacadaposición,esdecir,comosiloselementosdelarrayfueranasuvezotrosarrays.
EnJavascriptnoexisteunauténticoobjetoarray-multidimensinal.Parautilizarestasestructuraspodremosdefinirarraysquedondeencadaunadesusposicioneshabráotroarray.Ennuestrosprogramaspodremosutilizararraysdecualquierdimensión,veremosacontinuacióncómotrabajarconarraysdedosdimensiones,queseránlosmáscomunes.
Enesteejemplovamosacrearunarraydedosdimensionesdondetendremosporunladociudadesyporelotrolatemperaturamediaquehaceencadaunadurantedelosmesesdeinvierno.
var temperaturas_medias_ciudad0 = new Array(3)
temperaturas_medias_ciudad0[0] = 12
temperaturas_medias_ciudad0[1] = 10
temperaturas_medias_ciudad0[2] = 11
var temperaturas_medias_ciudad1 = new Array (3)
temperaturas_medias_ciudad1[0] = 5
temperaturas_medias_ciudad1[1] = 0
temperaturas_medias_ciudad1[2] = 2
var temperaturas_medias_ciudad2 = new Array (3)
temperaturas_medias_ciudad2[0] = 10
temperaturas_medias_ciudad2[1] = 8
temperaturas_medias_ciudad2[2] = 10
Conlasanterioreslíneashemoscreadotresarraysde1dimensiónytreselementos,comolosqueyaconocíamos.Ahoracrearemosunnuevoarraydetreselementoseintroduciremosdentrodecadaunadesuscasillaslosarrayscreadosanteriormente,conloquetendremosunarraydearrays,esdecir,unarrayde2dimensiones.
var temperaturas_cuidades = new Array (3)
temperaturas_cuidades[0] = temperaturas_medias_ciudad0
temperaturas_cuidades[1] = temperaturas_medias_ciudad1
temperaturas_cuidades[2] = temperaturas_medias_ciudad2
Vemosqueparaintroducirelarrayenterohacemosreferenciaalmismosinparéntesisnicorchetes,sinosóloconsunombre.Elarraytemperaturas_cuidadesesnuestroarraybidimensinal.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 76 de 121
Tambiénesinteresantevercómoserealizaunrecorridoporunarraydedosdimensiones.Paraellotenemosquehacerunbuclequepaseporcadaunadelascasillasdelarraybidimensionalydentrodeéstashacerunnuevorecorridoparacadaunadesuscasillasinternas.Esdecir,unrecorridoporunarraydentrodeotro.
Elmétodoparahacerunrecorridodentrodeotroescolocarunbucledentrodeotro,loquesellamaunbucleanidado.EnesteejemplovamosameterunbucleFORdentrodeotro.Además,vamosaescribirlosresultadosenunatabla,loquecomplicaráunpocoelscript,peroasípodremosvercómoconstruirunatabladesdeJavascriptamedidaquerealizamoselrecorridoanidadoalbucle.
document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");
for (i=0;i<temperaturas_cuidades.length;i++){
document.write("<tr>")
document.write("<td><b>Ciudad " + i + "</b></td>")
for (j=0;j<temperaturas_cuidades[i].length;j++){
document.write("<td>" + temperaturas_cuidades[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table>")
Estescriptresultaunpocomáscomplejoquelosvistosanteriormente.Laprimeraacciónconsisteenescribirlacabeceradelatabla,esdecir,laetiqueta<TABLE>juntoconsusatributos.Conelprimerbuclerealizamosunrecorridoalaprimeradimensióndelarrayyutilizamoslavariableiparallevarlacuentadelaposiciónactual.Porcadaiteracióndeestebucleescribimosunafilayparaempezarlafilaabrimoslaetiqueta<TR>.Además,escribimosenunacasillaelnumerodelaciudadqueestamosrecorriendoenesemomento.Posteriormenteponemosotrobuclequevarecorriendocadaunadelascasillasdelarrayensusegundadimensiónyescribimoslatemperaturadelaciudadactualencadaunodelosmeses,dentrodesuetiqueta<TD>.Unavezqueacabaelsegundobuclesehanimpresolastrestemperaturasyporlotantolafilaestáterminada.Elprimerbuclecontinúarepitiéndosehastaquetodaslasciudadesestánimpresasyunavezterminadocerramoslatabla.
Nota:HabráspodidoobservarqueenocasionesgenerarcódigoHTMLdesdeJavascriptsehacecomplejo.Peroelproblemanoessoloqueelcódigoseadifícildeproducir,sinolopeoresquecreasuncódigodifícildemantener,enelquesemezclatantolapartedelaprogramaciónenJavascriptconlapartedelapresentaciónenHTML.Loquehasvistoademásessolouncódigobiensimple,conunatablarealmenteelemental,imaginaquépasaríacuandolatablaolosdatosfueranmáscomplejos.Afortunadamente,haymanerasdegenerarcódigoHTMLdesalidamejoresquelasquehemosvistoahora,aunqueresultaunpocoavanzadoparaelmomentoenelqueestamos.Detodosmodos,tedejamosunenlacealmanualdelsistemadetemplatesJavascriptHandlebars,queesunaalternativadelibreríasencillaparagenerarsalidaenHTMLdesdeJavascript.
Podemosverelejemploenmarchayexaminarelcódigodelscriptentero.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 77 de 121
Inicializacióndearrays
Paraterminarconeltemadelosarraysvamosaverunamaneradeinicializarsusvaloresalavezquelodeclaramos,asípodemosrealizardeunamaneramásrápidaelprocesodeintroducirvaloresencadaunadelasposicionesdelarray.
ElmétodonormaldecrearunarrayvimosqueeraatravésdelobjetoArray,poniendoentreparéntesiselnúmerodecasillasdelarrayonoponiendonada,demodoqueelarraysecreasinningunaposición.Paraintroducirvaloresaunarraysehaceigual,peroponiendoentrelosparéntesislosvaloresconlosquedeseamosrellenarlascasillasseparadosporcoma.Veámosloconunejemploquecreaunarrayconlosnombresdelosdíasdelasemana.
var diasSemana = new Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")
Elarraysecreacon7casillas,dela0ala6yencadacasillaseescribeeldiadelasemanacorrespondiente(Entrecomillasporqueesuntexto).
Ahoravamosaveralgomáscomplicado,setratadedeclararelarraybidimensionalqueutilizamosantesparalastemperaturasdelasciudadesenlosmesesenunasolalínea,introduciendolosvaloresalavez.
var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))
Enelejemplointroducimosencadacasilladelarrayotroarrayquetienecomovaloreslastemperaturasdeunaciudadencadames.
Javascripttodavíatieneunamaneramásresumidaquelaqueacabamosdever,queexplicamosenelprimerartículodondetratamoslosarrays.Paraellosimplementeescribimosentrecorcheteslosdatosdelarrayqueestamoscreando.Paraacabarvamosamostrarunejemplosobrecómoutilizarestasintaxisparadeclarararraysdemásdeunadimensión.
var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];
Enesteejemplohemoscreadounarraymuypocouniforme,porquetienecasillasconcontenidodesimplesenterosyotrasconcontenidodecadenayotrasquesonotrosarrays.Podríamosaccederaalgunasdesuscasillasymostrarsusvaloresdeestamanera:
alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])
ConestohemosllegadoalfindelosartículosquetratansobrearraysenJavascriptyahorapodemoscontinuarconunapequeñapausayconsejosquevendránbienparamejorarnuestrarelaciónconestelenguajedeprogramación.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 78 de 121
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen22/12/2001Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 79 de 121
ObjetosenJavascript
EnlossiguientesartículosvamosaabordarelmundodelosobjetosenJavascript.Seránesencialesparacualquierpersonaqueestácomenzandoenlaprogramaciónengeneral,yaquesetrataránconceptosmuyrecurrentesencualquierlenguaje.AdemástrataremoscondetallelasparticularidadesdelosobjetosenellenguajeJavascript,yaquesonbastantedistintasenrelaciónaotroslenguajesmástradicionales.
IntroduccióngeneralalosobjetosenJavascript
Breveintroducciónalmundodelosobjetos,enprogramaciónengeneral,yalasparticularidadesdelusodeobjetosenellenguajeJavascript.
VamosaintroducirnosenuntemamuyimportantedeJavascriptcomosonlosobjetos.EsuntemaqueaunnohemosvistoysobreelqueenadelantevamosatratarconstantementepueslamayoríadelascosasenJavascript,inclusolasmássencillas,lasvamosarealizaratravésdelmanejodeobjetos.Dehecho,enlosejemplosrealizadoshastaahorahemoshechograndesesfuerzosparanoutilizarobjetosyaunasíloshemosutilizadoenalgunaocasión,puesesmuydifícilencontrarejemplosenJavascriptque,aunqueseansimples,nohaganusodeellos.
Laprogramaciónorientadaaobjetos(POO)representaunanuevamaneradepensaralahoradehacerunprograma.Javascriptnoesunlenguajedeprogramaciónorientadoaobjetospuroporque,aunqueutilizaobjetosenmuchasocasiones,nonecesitamosprogramartodosnuestrosprogramasenbaseaellos.Dehecho,loquevamosahacergeneralmenteconJavascriptesusarobjetosynotantoprogramarorientadoaobjetos.Porello,lamaneradeprogramarnovaacambiarmuchoconrespectoaloquehemosvistohastaahoraenelManualdeJavascript.Enresumen,loquehemosvistohastaaquírelativoasintaxis,funciones,etc.siguesiendoperfectamenteválidoypuedeserutilizadoigualquesehaindicado.Solovamosaaprenderunaespeciedeestructuranuevacomosonlosobjetos.
Nota:ParaempezaraempaparnosunpocosobrelosobjetostenemosunpequeñoartículopublicadoenDesarrolloWebsobrelaprogramaciónorientadaaobjetos.Seríamuyrecomendablequeloleyeras,porqueseexplicanvariosconceptosenloscualesnovamosaentrarcontantodetalle.SiconocesyalaPOOcontinúaleyendosinpausa,perosideseasprofundizarrecuerdaquetenemostambiénunManualcompletodeOrientaciónaobjetos.SitegustavervídeosterecomendamostambiénlaclaseQuésonlosobjetosimpartidaenelCursodeProgramaciónenvídeo.
Quéesunobjeto
Aunquenovamosaentrarendetalleconlosconcetos,puesseencuentranmuybienexplicados
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 80 de 121
enreferenciasqueyahemosindicado,losobjetossonunaherramientadelenguajesdeprogramaciónenlaqueseunendoscosasfundamentales:losdatosylafuncionalidad.Todoprogramainformáticotratabásicamenteesasdoscosasdealgunamanera.Conloquehemosvistohastaahoralosdatoslosteníamosenvariablesylafuncionalidadenfunciones¿noesasí?puesenelmundodelosobjetos,tantodatoscomofuncionalidadestánenlamismaestructura,elobjeto.
Elasuntoesqueahoranecesitasaprendernuevosnombresconlosquereferirtealosdatosyfuncionalidadagrupadosenunobjeto:
Propiedades:EnlosobjetoslaspropiedadesserefierenalosdatosMétodos:Enobjetos,losmétodosserefierenalafuncionalidad
Imaginaquetienesunobjetobotón(unbotóndelnavegador,algoquepuedespulsarpararealizarunaacción).Elbotóntieneuntextoescrito,puesesetextoseríaundatoyporlotantolellamaríamospropiedad.Otrapropiedaddeunbotónseríasiestáonoactivado.Porotraparte,unbotónpodríatenerfuncionalidadasociada,queestaríaenunmétodo,comoprocesarlaaccióndeunclic.Imaginaalgomásgenéricocomounteléfono.Elteléfonopuedetenerpropiedadescomolamarca,modelo,sistemaoperativoymétodoscomoencender,apagar,llamaraunnúmero,etc.
Enlenguajesdeprogramaciónorientadosaobjetospuros,comopuedeserJava,tienesqueprogramarsiempreenbaseaobjetos.Paraprogramartendríasquecrear"clases",quesonunaespeciede"moldes"apartirdeloscualessecreanobjetos.Elprogramaresolveríacualquiernecesidadmediantelacreacióndeobjetosenbaseaesosmoldes(clases),existiendovarios(decenas,cientosomiles)deobjetosdediversasclases.Losobjetostendríanquecolaborarentresipararesolvercualquiertipodeacción,igualqueensistemascomounaviónexistendiversosobjetos(elmotor,hélices,mandos...)quecolaboranentresípararesolverlanecesidaddellevarpasajerosomercancíaenviajesaéreos.
Sinembargo,comoveníamosdiciendo,enJavascriptnoestantoprogramarorientadoaobjetos,sinousarobjetos.Muchasvecesseránobjetosyacreadosporelpropionavegador(laventanadelnavegador,undocumentoHTMLqueseestávisualizando,unaimagenounformulariodentrodeesedocumentoHTML,etc),yotrasvecesseránobjetoscreadosportimismooporotrosdesarrolladoresquetesirvenparahacercosasespecíficas.Portanto,loquenosinteresasaberparacomenzareslasintaxisquenecesitasparausarlosobjetos,básicamenteaccederasuspropiedadesyejecutarsusmétodos.
Nota:Paraconocercuálessonlosobjetosdelnavegador,quetenemosadisposiciónenJavascriptpararesolverlasnecesidadesdelaspáginasweb,tienesqueleerelmanualsobretrabajoconJavascriptparausoymanipulacióndelosrecursosdelnavegador.
Cómoaccederapropiedadesymétodosdelosobjetos
EnJavascriptpodemosaccederalaspropiedadesymétodosdeobjetosdeformasimilaracomosehaceenotroslenguajesdeprogramación,coneloperadorpunto(".").
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 81 de 121
Laspropiedadesseaccedencolocandoelnombredelobjetoseguidodeunpuntoyelnombredelapropiedadquesedeseaacceder.Deestamanera:
miObjeto.miPropiedad
Parallamaralosmétodosutilizamosunasintaxissimilar,peroponiendoalfinalentreparéntesislosparámetrosquepasamosalosmétodos.Delsiguientemodo:
miObjeto.miMetodo(parametro1,parametro2)
Sielmétodonorecibeparámetroscolocamoslosparéntesistambién,perosinnadadentro.
miObjeto.miMetodo()
Cómocrearobjetos
Comohemosdicho,lamayoríadelosobjetosconlosquevasatrabajarenJavascriptparapodercrearinteracción,efectosycomportamientosdiversosenpáginasweb,telosdanyahechos.Elpropionavegadortelosofreceparaquetúsimplementelostengasqueusar.EsoesmaterialdeestudiodelManualdeJavascriptylosobjetosdelnavegador.AclaradoesepuntohayqueadvertirqueJavascriptesuntantoparticularalahoradecrearobjetos,básicamenteporquetradicionalmentenoexisteelconcetode"clase".
Parasermásexactos,enJavascript,ES5,lasclasessecreanpormediodefuncionesyconeloperadornewcreasobjetosapartirdeesasfunciones,peronoexistenlasclasescomolasqueconocemosenotroslenguajesmástradicionales.
Nota:AhoraenES6yaexistenlasclasesyJavascriptescapazdegenerarclasesyapartirdeellasproducirobjetos,comootroslenguajes.ObtienesmásinformaciónenelManualdeES6.
LaotraalternativaparacrearobjetosenJavascriptespormediodeliteralesdeobjeto,quenosonmásqueladefinicióndelobjetopormediodecódigoencerradoentrellaves,indicandosuspropiedadesométodostalcual.
{
nombre: 'Miguel Angel Alvarez',
sitioWeb: 'DesarrolloWeb.com'
}
Enelcódigoanteriorsolohemosdefinidopropiedades,perotenemosotrosartículosdondepodrásvercómodefinirmétodostambién.Parasabermássobrelosliteralesdeobjetoste
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 82 de 121
recomendamoslalecturadelartículosobreLiteralesdeobjetosJavascript,dondevamosaexplicartemásdetenidamenteestasintaxishabitualdecreacióndeobjetosenestelenguaje.
EnJavascripttradicionalhemosdichoquenoexistenlasclases,peropodremoscrearinstanciasdeobjetosapartirdefunciones,comoveremosenelsiguientepunto.
Creareinstanciarobjetosapartirdefunciones
Paraquiennolosepa,instanciarunobjetoeslaaccióndecrearunejemplardeunaclase,parapodertrabajarconélluego.Laclaseesladefinicióndelascaracterísticasyfuncionalidadesdeunobjeto.Conlasclasesnosetrabajadirectamente,éstassólosondefiniciones.Paratrabajarconunaclasedebemostenerunobjetoinstanciadodeesaclase.RecordamosqueenJavascriptnoexistenclases,peropodemosusarfunciones.
EstasimplefunciónpodríamosusarlacomomoldeparaconstruirobjetosdelaclasePersona:
function Persona(nombre) {
this.nombre = nombre;
}
Observarásqueestamosusandodentrolapalabra"this".Esapalabraesunareferenciaalobjetoquesevaacrearconestafunción.Enjavascriptparacrearunobjetoapartirdeunafunciónseutilizalainstrucciónnew,deestamanera.
var miguel = new Persona('Miguel Angel Alvarez');
Enunavariablequellamamos"miguel"asignounnuevo(new)ejemplardelaclasePersona.Losparéntesisserellenanconlosdatosquenecesitelaclaseparainicializarelobjeto,sinohayquemeterningúnparámetrolosparéntesissecolocanvacíos.Enrealidadloquesehacecuandosecreaunobjetoesllamaralafunciónqueloconstruyeylapropiafunciónseencargarádeinicializarlaspropiedadesdelobjeto(paraloqueusalareferencia"this").
Ciertamente,silosconceptosdeprogramaciónorientadaaobjetossonnuevosparati,quizásmuchospuntosdeesteartículosequedaránunpococomplejos.Noqueremosqueteasustes,puestoquevolveremossobretodoestoenfuturosartículosylopodrásirentendiendomejor.Enconcreto,estapartedelacreacióndeobjetosapartirdefuncionesestáexplicadaenelartículoCreacióndeclasesenJavascriptconES5.RecuerdatambiénaclarartusdudasmásteóricassobreclasesyobjetosenelManualdelateoriadelaprogramaciónorientadaaobjetos.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen19/12/2016Disponibleonlineenhttp://desarrolloweb.com/articulos/introduccion-objetos-javascript.html
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 83 de 121
LiteralesdeobjetoenJavascript
CómopodemoscrearobjetosenJavascriptapartirdeunliteral,operacionestípicasquepuedesrealizarconesosobjetos.
VoyacomenzarunaseriedeartículosquemesirvencomoapuntesdeprogramaciónorientadaaobjetosenJavascript.Estelenguajeesbastanteparticularenestesentidoyenocasionestepermitehacercosasqueenotroslenguajesseríanimpensables.Tambiénalcontrario,algunascosasbásicasdelenguajestradicionalesenProgramaciónOrientadaaObjetosnoexistenenJavascript.
Javascriptnotieneclasescomotal,porlomenoshastaquelleguelanuevaactualizaciónEcma6previstapara2015,perosíquetieneobjetos.Ademástienealgoquenotodosloslenguajesposeen,unmecanismoparalacreacióndeobjetosapartirdeloqueconocemoscomo"literal".
Nota:Paralosquenoconozcaneltérmino"literal",cabedecirqueesunapalabraqueindicaalgoescritodemanera"literal".Aunqueseamuyfeousarlamismapalabraparadefiniralgo,melovasapermitirporqueeslamejorqueexiste.Unliteralesalgoextremadamentesencillodeentenderconunejemplo.
var x = "hola";
Enesalíneadecódigo"hola"esunliteral.Enconcretodecimosqueesun"literaldecadena".Ahoramiraestaotralínea:
y +=5;
Cuandovesunnúmeroescritotalcualentucódigodecimosqueesunliteralnumérico.
PodemoscrearunobjetoenJavascriptasignandounvalorliteraldeobjetoenunavariable.Esoseconsiguecolocandodicholiteralentrellavesydentrodeellastantaspropiedadesométodosconpares"clave/valor",pormediodeunasintaxiscomoesta:
var dimensiones = {
altura: 34,
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 84 de 121
anchura: 455
}
Comoestásviendo,tenemosunavariabledimensiones.Alasignarleunliteralobjetoestamosrealmenteasignandounareferenciaaunobjetoenlamemoriacreadoconlaspropiedadesqueacabamosdeasignar.
Laspropiedadesseseparanporcomasysecolocasiempreelnombredelapropiedad,elcaracter":"yluegoelvalordelapropiedad.
Porsupuesto,tambiénpodremosasignarmétodosanuestrosobjetosliterales.
var dimensiones = {
altura: 34,
anchura: 455,
area: function(){
return this.altura * this.anchura;
}
}
Comoves,losmétodosenJavascriptsimplementesonpropiedadesalosquelesasignasunafunción.Dentrodelcódigodetusmétodospuedesaccederalaspropiedadesdelobjetoatravésdelavariablethis.
Unavezcreadoeseobjeto,puedesusarlanotaciónpuntoparaaccederasuspropiedades(ométodos).
dimensiones.altura = 90 //accede a la propiedad altura y le asigna el valor 90
Nota:LosliteralesdeobjetonosonlaúnicamaneradecrearobjetosenJavascript.Ademásexisteunmaneradedefiniralgoparecidoaunaclase,peronoesexactamenteloqueconocemosenlaprogramaciónorientadaaobjetostradicionalynopodríamosllegaraconsiderarlatal.Enlugardeellopodemoscrearfuncionesque,alinvocarlasconlapalabra"new"tecreannuevosobjetosinicializadosconesafunción.Técnicamente,envezdedefinirclases,enJavascriptdefinimosfuncionesconstructorasdeobjetos.Endefinitiva,unaimplementaciónmuyparticularqueavecesnospuedeliarsiestamosfamiliarizadosconlenguajesdeenfoquemástradicional(enloquerespectaaOOP"ObjectOrientedPrograming")comoJavaoPHP.Estaesunadiscusióninteresante,quepodríascomplementarconelartículodedicadoacrearclasesenJavascript,peroquenoeslaquenosocupaenestaocasión.
¿EstonoesJSON?
ElformatodeintercambiodedatosJSONsehapopularizadomuchoyquizásloconozcasantesdeconocerestosdetallessobrelosliteralesdeobjetoJavascript.EnesecasopuedequetehayasdadocuentaquelosliteralesdeobjetoJavascriptnosonmásqueestructurasJSON.Si
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 85 de 121
esasípermítemeapuntarquerealmentetendríamosquedarlelavueltaaesafraseydecirquelanotaciónJSONutilizalasintaxisdelosliteralesdeobjetoJavascriptcomoformato.
Asípues,loqueconozcasdeJSONlopuedesaplicaralmundodeJavascriptinmediatamente.Dehecho,sihastenidoocasióndetrabajarconesteformatodesdeJavascript,habráscomprobadoqueenlamayoríadeloscasospuedesvolcarunobjetoJSONenunavariableJavascripteinmediatamentetrabajarconélcomosifueraunobjetoquetienesenlamemoria.
Nota:PuedessabermásdeJSONenelartículoQuéesJSON.
Crearnuevaspropiedadesymétodossobreobjetoscreados
Javascriptesmuypermisivoynosdejahacercosasqueproduciríanerroresenotroslenguajes.Eselcasodelaasignacióndevaloresapropiedadesquenohansidocreadaspreviamente.
Tengomiobjetocoche:
var coche = {
color: "rojo",
marca: "Opel"
}
Ahorapodríacrearnuevaspropiedadeseneseobjetoasignandovaloresalaspropiedadesquenoexistíanpreviamente.
coche.anoFabricacion = 2014;
Losmétodosloscreasasignandofunciones:
coche.arrancar = function(){
alert("rum rum");
}
Losmétodosyfuncionesqueacabamosdecrearsontanválidoscomolosqueyaestuvieranenmiobjetocuandofuedefinidopormediodesuliteral.Podréaccederasuselementosconlanotaciónpunto,queyaconoces.
console.log(coche.color);
console.log(coche.anoFabricacion);
coche.arrancar();
Ejemploparapracticarconliteralesdeobjeto
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 86 de 121
EnelsiguientecódigoponemosenmarchalosnuevosconocimientosquehasadquiridosobreliteralesdeobjetoenJavascript.
var miObjeto = {
propiedad1: "Algo",
propiedad2: "Otra cosa",
propiedad3: true,
propiedad4: 344,
metodo1: function(){
alert("Ejecutaste metodo1");
},
metodo2: funcionMetodo2
}
function funcionMetodo2(){
//puedo usar la variable this para acceder a mis propias propiedades o métodos
this.propiedad2 = "Esto lo he modificado desde el método metodo2";
}
//Veamos el valor de esas propiedades
console.log(miObjeto.propiedad1);
console.log(miObjeto.propiedad2);
//ejecutemos algún método
miObjeto.metodo1();
miObjeto.metodo2();
//creamos nuevas propiedades
miObjeto.otraPropiedad = "Esto está creado a posteriori";
//creamos nuevos métodos
miObjeto.otroMetodo = function(){
console.log("ejecutaste otro método");
}
//veamos el contenido de todo el objeto
console.log(miObjeto);
Esoestodoporelmomento,esperoquetehayamosaclaradoalgo.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen31/10/2014Disponibleonlineenhttp://desarrolloweb.com/articulos/literales-objeto-javascript.html
forinenJavascript
BucleforinJavascript.Unaalternativaalbuclefor,pararecorridosapropiedadesdeobjetosenJavascript.Cómoiterarporlaspropiedadesylos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 87 de 121
valoresdelaspropiedadesdeunobjeto,demaneragenéricaenJavascriptconelbuclefor...in.
EnJavascriptnoexistenarraysasociativosycomosabes,éstossonsiemprebuenosaliadoscomorecursosparalaprogramación.Siqueremosusaralgoparecidoaunarrayasociativotendremosqueutilizarlasconstruccionesdeobjetos.Detodosmodos,conloquenosofreceellenguajesomoscapacesderealizartodaslascosasqueenotroslenguajeshacesconlosarraysasociativos.
Enesteartículopretendemosexplicartecómorealizarunrecorridogenéricoatodaslaspropiedadespresentesenunobjeto,conelbucleforinJavascript.Medianteestaestructuradecontrolpodremosobtenerlosnombresdelaspropiedadesjuntoconsusvalores.Eserecorridoes"genérico",esdecir,esindependientedelnúmerodepropiedadesqueseencuentreenelobjetoqueestamosrecorriendoyesindependientetambiéndesusnombresdepropiedadosusvalores.
Nota:Porsinolosabes,losarraysasociativossonaquellosquenotieneníndicesnuméricossinoalfabéticos.Nossirvenparamuchascosasenloslenguajesdeprogramación.Sinolosabías,yatedaráscuenta.Demomentoentoncesolvidalamenciónalosarraysasociativosypiensasoloenobjetosysuspropiedades.
Buclefor...in
EnJavascripthayunaconstrucciónespecialdelbuclefordetodalavida,quetepermiterecorrertodaslaspropiedadesdeunobjeto.Esparecidoaloqueenotroslenguajestenemosenelbucleforeach(JavascripttambiéntieneelforEachperoessoloparaarraysynoesunbuclesinounmétododearrays,quesirveparaiterar,peronoesunaestructuradecontrolcomotal).Susintaxiseslasiguiente:
for (var propiedad in objeto){
// código a repetir por el bucle.
// dentro de este código la variable "propiedad" contiene la propiedad actual
// actual en cada uno de los pasos de la iteración.
}
Nohaymuchomásqueexplicarsobreestaestructuradelbucleforin,solodecirquedeesta
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 88 de 121
maneratalcualpuedesaccederalosnombresdelaspropiedadesdelobjeto.Graciasalbucle,elcódigoqueseincluyedentrodelforseejecutaráunavezporcadaunadelaspropiedadesdelobjeto.Luegoveremosalgunosejemplosdecódigoparaquequedesuficientementeclaro.
Habrásnotadoquehemosdichoqueasípodrásaccederalaspropiedades.Notepreocupesqueparaaccederasusvalorestendrásqueusaruntruquillo.Loveremostambiénenesteartículo,perononosadelantemos.
Bucleparaaccederalaspropiedadesdeunobjeto
Veamosunaaplicacióndeestebucleforinconunejemplosencilloquenosarrojealgodeluz.
Tenemosunobjetocreadoapartirdeunliteraldeobjeto.
var diasMes = {
enero: 31,
febrero: 28,
marzo: 31,
abril: 30,
mayo: 31
}
Sonlosmesesdelañoylosdíasquetieneesemes.Esverdadquefebreropuedetenerotrosdíasyquemefaltanmeses,peroafinesdidácticosessuficiente.Observarásqueestaestructuraenresumenesmuyparecidaaloqueseríaunarrayasociativo.Silosnecesitamosennuestroprogramalapodemosusarcomosilofuera.
Nota:Sinoentiendesladefinicióndeunobjetopormediodeunliteral,simplementeleeelartículosobreliteralesdeobjeto.
Puesparaaccederalaspropiedadesdeeseobjeto(enestecasoseríaparaaccederalosnombresdecadaunodelosmeses)usaríasestebucle.
for (var mes in diasMes){
console.log(mes);
}
ConestoconseguirásenlaconsolaqueaparezcantodoslosnombresdelosmesesdelañoquetenemoseneseobjetodiasMes.
Accederalosvaloresdelaspropiedades
Unasituacióncomúnesquenoquierasaccederalosnombresdelaspropiedades,sinoalosvalores.Paraellopodemosusarunpequeñotrucoquenospermiteellenguaje.Estonoesalgo
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 89 de 121
enconcretodelbucleforinJavascript,sinodeltratamientoquehaceestelenguajealosobjetos.Setratadequepodemosaccederalaspropiedadesdelosobjetoscomosifueranarrays,indicandocomoíndicedelarrayunacadenaconelnombredelapropiedad.
alert(diasMes["mayo"]);
Esonosmostraráenunacajadealertaelvalor31queeselqueestáasociadoalapropiedad"mayo"delobjeto"diasMes".
Tehabrásdadocuentaqueestasintaxisparaaccederalosvaloresdelaspropiedadesesjustamenteigualalasintaxisqueseusaparaaccederavaloresdecasillasdeunarrayasociativo.
Bueno,puessabiendoestopodrásaccederalosvaloresdelobjeto,unoporuno,conunbuclefor...inmuyparecidoalqueteníamosantes.
for (var mes in diasMes){
console.log(diasMes[mes]);
}
Seguroqueahorateparecesencillo.Esquerealmenteloes.
Todojunto,accesoalapropiedadysuvalor
Estaparteyaseguroquenitehacefaltaleerla.Simplementequieromostrarunmensajeenlaconsolamáslegible,accediendoenelmismobuclealapropiedadysuvalor.
for (var mes in diasMes){
console.log("El mes " + mes + " tiene " + diasMes[mes] + " dias.");
}
Otroejemplopuedesverloenelcódigoacontinuación.Vamosahacerunrecorridoaesteobjeto,quetieneensuspropiedadesotrosobjetos,esdecir,esunobjetodeobjetos.Esalgocomounarray,perorealmentenoesunarray,sinounacolección.Cadaunodelosobjetostieneunidentificador,queessunombreycomovalortieneunobjetoconotraspropiedades.EstaconstrucciónesmuycomúnenFirebase,dondenopodemosguardararraysenlabasededatos.
{
"Miguel Angel Alvarez" : {
"isFav" : true
},
"DesarrolloWeb.com" : {
"isFav" : false
},
"EscuelaIT" : {
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 90 de 121
"isFav" : true
},
}
AhorapuedesverelbucleforinJavascript,conelquerealizamoselrecorrido,comprobandoparacadaunodelosobjetosdelacolecciónsiesfavorito.
for(var usuario in usuarios) {
if(usuarios[usuario].isFav) {
console.log('El usuario con índice (usamos su nombre como índice) ' + usuario + ' es uno de tus favoritos');
}
}
Esoestodo,conestosconocimientosyanosetepuedenescaparlasposibilidadesderecorridosaobjetosylaconstruccióndelútilbucleforinJavascript.Además,sinecesitasarraysasociativosparaconstruirtusprogramassabráslamaneraalternativadeimplementarlosyusarlos,pormediodeobjetos,enJavascript.Seguroqueteservirádeayuda,inclusoaunqueahoranosepasparaqué.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen29/12/2016Disponibleonlineenhttp://desarrolloweb.com/articulos/recorridos-propiedades-objetos-javascript-forin.html
CreacióndeclasesenJavascripttradicional
Ahoraqueyasabemosloquesonlosobjetos,vamosavercómopodemoscrearyusarnuestrospropiosobjetosenJavascripttradicional,ES5,abordandodiversosejemplosprácticos.
EncapítulosanterioresdeestasegundapartedelManualdeJavascriptvimoslasgeneralidadessobrelaprogramaciónorientadaaobjetos.Además,estuvimosdandounrepasobastantecompletoalosdistintosobjetosnativosdeJavascript.
Ahoraqueyahemosconocidounpocolosobjetosyhemosaprendidoamanejarlospodemospasarauntemamásavanzado,comoeseldeconstruirnuestrospropiosobjetos,quepuedesernosútilenciertasocasionesparatemasavanzados.
Asíquevamosavercómopodemosdefinirnuestrospropiosobjetos,consuspropiedadesymétodos,demaneraqueaprendamoselmecanismo,perosinentrardemasiadoenaspectosprácticosquelosdejamosparaejemplosdelfuturo.
Paracrearnuestrospropiosobjetosdebemoscrearunaclase,querecordamosqueesalgoasícomoladefinicióndeunobjetoconsuspropiedadesymétodos.ParacrearlaclaseenJavascriptdebemosescribirunafunciónespecial,queseencargarádeconstruirelobjetoen
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 91 de 121
memoriaeinicializarlo.Estafunciónselellamaconstructorenlaterminologíadelaprogramaciónorientadaaobjetos.
function MiClase (valor_inicializacion){
//Inicializo las propiedades y métodos
this.miPropiedad = valor_inicializacion
this.miMetodo = nombre_de_una_funcion_definida
}
Esoeraunconstructor.Utilizalapalabrathisparadeclararlaspropiedadesymétodosdelobjetoqueseestáconstruyendo.Thishacereferenciaalobjetoqueseestáconstruyendo,puesrecordemosqueaestafunciónlallamaremosparaconstruirunobjeto.Aeseobjetoqueseestáconstruyendolevamosasignandovaloresensuspropiedadesytambiénlevamosasignandonombresdefuncionesdefinidasparasusmétodos.Alconstruirunobjetotécnicamenteeslomismodeclararunapropiedadounmétodo,solodifiereenqueaunapropiedadleasignamosunvaloryaunmétodoleasignamosunafunción.
LaclaseAlumnoUniversitario
Loveremostodomásdetenidamentesihacemosunejemplo.Enesteejemplovamosacrearunobjetoestudianteuniversitario.Comoestudiantetendráunascaracterísticascomoelnombre,laedadoelnúmerodematrícula.Ademáspodráteneralgúnmétodocomoporejemplomatricularalalumno.
Constructor:Colocamospropiedades
VeamoscómodefinirelconstructordelaclaseAlumnouniversitario,perosolamentevamosacolocarporahoralaspropiedadesdelaclase.
function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
}
Losvaloresdeinicializaciónlosrecibeelconstructorcomoparámetros,enestecasoessóloelnombreylaedad,porqueelnúmerodematrículanolorecibeunalumnohastaqueesmatriculado.EsporelloqueasignamosnullalapropiedadnumMatrícula.
Escribirmétodos
Ahoravamosacontinuarconesadefinicióndelaclaseparaincorporarmétodos.
Paraconstruirunmétododebemoscrearunafunción.Unafunciónqueseconstruyeconintencióndequeseaunmétodoparaunaclasepuedeutilizartambiénlavariablethis,quehacereferenciaalobjetosobreelqueinvocamoselmétodo.Puesdebemosrecordarqueparallamaraunmétododebemostenerunobjetoythishacereferenciaaeseobjeto.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 92 de 121
function matriculate(num_matricula){
this.numMatricula = num_matricula
}
LafunciónmatricularrecibeunnúmerodematrículaporparámetroyloasignaalapropiedadnumMatriculadelobjetoquerecibeestemétodo.Asírellenamosellapropiedaddelobjetoquenosfaltaba.
Vamosaconstruirotrométodoqueimprimelosdatosdelalumno.
function imprimete(){
document.write("Nombre: " + this.nombre)
document.write("<br>Edad: " + this.edad)
document.write("<br>Número de matrícula: " + this.numMatricula)
}
Estafunciónvaimprimiendotodaslaspropiedadesdelobjetoquerecibeelmétodo.
Constructor:Colocamosmétodos
Paracolocarunmétodoenunaclasedebemosasignarlafunciónquequeremosqueseaelmétodoalobjetoqueseestácreando.VeamoscómoquedaríaelconstructordelaclaseAlumnoUniversitarioconelmétodomatricular.
function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
this.matriculate = matriculate
this.imprimete = imprimete
}
Vemosqueenlasúltimaslíneasasignamosalosmétodoslosnombresdelasfuncionesquecontienensucódigo.
Parainstanciarunobjeto
ParainstanciarobjetosdelaclaseAlumnoUniversitarioutilizamoslasentencianew,queyahemostenidoocasióndeverenotrasocasiones.
miAlumno = new AlumnoUniversitario("José Díaz",23)
Trabajandoconlaclase,creandoinstanciasyusandoobjetos
ParailustrareltrabajoconobjetosyterminarconelejemplodelAlunnoUniversitario,vamosa
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 93 de 121
vertodoesteprocesoenunsoloscriptenelquedefiniremoslaclaseyluegolautilizaremosunpoquito.
//definimos el método matricularte para la clase AlumnoUniversitario
function matriculate(num_matricula){
this.numMatricula = num_matricula
}
//definimos el método imprimete para la clase AlumnoUniversitario
function imprimete(){
document.write("<br>Nombre: " + this.nombre)
document.write("<br>Edad: " + this.edad)
document.write("<br>Número de matrícula: " + this.numMatricula)
}
//definimos el constructor para la clase
function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
this.matriculate = matriculate
this.imprimete = imprimete
}
//creamos un alumno
miAlumno = new AlumnoUniversitario("José Díaz",23)
//le pedimos que se imprima
miAlumno.imprimete()
//le pedimos que se matricule
miAlumno.matriculate(305)
//le pedimos que se imprima de nuevo (con el número de matricula relleno)
miAlumno.imprimete()
Silodeseamos,podemosverelscriptenfuncionamientoenunapáginaaparte.
Novamosahablarmásporelmomentosobrecómocrearyutilizarnuestrospropiosobjetos,peroenelfuturotrataremosestetemaconmásprofundidadyharemosalgúnejemploadicional.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen21/05/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/clases-javascript-es5.html
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 94 de 121
LibreríasdeclasesyobjetosenJavascript
EnJavascript,comoencualquierlenguaje,existenmuchasfuncionalidadesbásicasyadesarrolladasparaelresolvernecesidadeshabitualesenlosprogramas,comocálculosmatemáticos,ocontroldefechas.EnlossiguientesartículospodrásconocercómoesaslibreríasestándisponiblesenJavascriptpormediodediversasclasesyobjetosdeutilidadgeneral.Aprenderemosypracticaremoscondiversosrecursosdellenguajepararealizartodotipodeoperacionesmatemáticasavanzadas,trabajoconcadenasdecaracteres,trabajoconfechas,tiposprimitivos,etc.
ObjetosincorporadosenJavascript
ListadelosobjetosquetenemosanuestradisposiciónalahoradetrabajarconJavascript.
LlegamosaunpuntointeresantedentrodelasegundapartedelManualdeprogramaciónenJavascript.Enestosmomentossabemosyaloqueeslaprogramaciónorientadaaobjetos,asíquevamosaintroducirnosenelmanejodeobjetosenJavascriptyparaellovamosaempezarconelestudiodelasclasespredefinidasqueimplementanlaslibreríasparaeltrabajoconstrings,matemáticas,fechasetc.
LasclasesqueseencuentrandisponiblesdemaneranativaenJavascript,yquevamosaveracontinuación,sonlassiguientes:
String,paraeltrabajoconcadenasdecaracteres.Date,paraeltrabajoconfechas.Math,pararealizarfuncionesmatemáticas.Number,pararealizaralgunascosasconnúmerosBoolean,trabajoconboleanos.
Nota:Lasclasesseescribenconlaprimeraletraenmayúsculas.Tienequequedarclaroqueunaclaseesunaespeciede"declaracióndecaracterísticasyfuncionalidades"delosobjetos.Dichodeotromodo,lasclasessondescripcionesdelaformayfuncionamientodelosobjetos.Conlasclasesgeneralmentenoserealizaningúntrabajo,sinoquesehaceconlosobjetos,quecreamosapartirdelasclases.
Unavezcomprendidaladiferenciaentreobjetosyclases,cabeseñalarqueStringesunaclase,lomismoqueDate.SiqueremostrabajarconcadenasdecaracteresofechasnecesitamoscrearobjetosdelasclasesStringyDaterespectivamente.Comosabemos,Javascriptesunlenguajesensiblealasmayúsculasylasminúsculasyenestecaso,lasclases,porconvención,siempreseescribenconlaprimeraletraenmayúsculaytambiénlaprimeraletradelassiguientespalabras,siesqueelnombredela
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 95 de 121
claseestácompuestodevariaspalabras.Porejemplosituvieramoslaclasede"Alumnosuniversitarios"seescribiríaconla-A-dealumnosyla-U-deuniversitariosenmayúscula.AlumnosUniversitariosseríaelnombredenuestrasupuestaclase.
Hayotrosquepertenecenaestemismoconjunto,losenumeramosaquíparaquequedeconstanciadeellos,peronolosvamosatocarencapítulossiguientes.
Array,yaloshemosvistoencapítuloscorrespondientesalprimermanualdeJavascript.TambiénlaclaseFunction,lohemosvistoparcialmentealestudiarlasfunciones.HayotraclaseRegExpquesirveparaconstruirpatronesqueveremostalvezjuntoconFunctioncuandotratemostemasmásavanzadostodavía.
Nota:Usodemayúsculasyminúsculas.Yaquenoshemosparadoanteriormenteahablarsobreelusodemayúsculasenciertasletrasdelosnombredelasclases,vamosaterminardeexplicarlaconvenciónquesellevaacaboenJavascriptparanombraraloselementos.
Paraempezar,cualquiervariablesesueleescribirenminúsculas,aunquesiestenombredevariablesecomponedevariaspalabras,sesueleescribirenmayúsculalaprimeraletradelassiguientespalabrasalaprimera.Estosehaceasíencualquiertipodevariableonombremenosenlosnombresdelasclases,dondeseescribetambiénenmayúsculaelprimercaracterdelaprimerapalabra.
Ejemplos:
Number,queesunaclaseseescribeconlaprimeraenmayúscula.RegExp,queeselnombredeotraclasecompuestopordospalabras,tienelaprimeraletrasdelasdospalabrasenmayúscula.miCadena,quesupongamosqueesunobjetodelaclaseString,seescribeconlaprimeraletraenminúsculaylaprimeraletradelasegundapalabraenmayúscula.fecha,quesupongamosqueesunobjetodelaclaseDate,seescribeenminúsculasporserunobjeto.miFunción(),queesunafuncióndefinidapornosotros,seacostumbraaescribirconminúsculalaprimera.
Comodecimos,estaeslanormageneralparadarnombresalasvariables,clases,objetos,funciones,etc.enJavascript.Silaseguimosasí,notendremosproblemasalahoradesabersiunnombreenJavascripttieneonoalgunamayúsculayademástodonuestrotrabajoserámásclaroyfácildeseguirporotrosprogramadoresonosotrosmismosencasoderetomaruncódigounavezpasadountiempo.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen21/03/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
TratamientodeStringenJavascript
LascadenasenJavascriptsonobjetosdelaclaseString,quecontienendiversosmétodosquenossirvenparamanejarcadenasdecaracteres.Estudiamossuspropiedadesylalistacompletademétodos.
EnjavascriptlasvariablesdetipotextosonobjetosdelaclaseString.Estoquieredecirquecadaunadelasvariablesquecreamosdetipotextotienenunaseriedepropiedadesymétodos.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 96 de 121
Recordamosquelaspropiedadessonlascaracterísticas,comoporejemplolongitudencaracteresdelstringylosmétodossonfuncionalidades,comopuedenserextraerunsubstringoponereltextoenmayúsculas.
ParacrearunobjetodelaclaseStringloúnicoquehayquehaceresasignaruntextoaunavariable.Eltextovaentrecomillas,comoyahemosvistoenloscapítulosdesintaxis.Tambiénsepuedecrearunobjetostringconeloperadornew,queveremosmásadelante.LaúnicadiferenciaesqueenversionesdeJavascript1.0nofuncionaránewparacrearlosStrings.
PropiedadesdeString
Length
LaclaseStringsólotieneunapropiedad:length,queguardaelnúmerodecaracteresdelString.
MétodosdeString
LosobjetosdelaclaseStringtienenunabuenacantidaddemétodospararealizarmuchascosasinteresantes.Primerovamosaverunalistadelosmétodosmásinteresantesyluegovamosaverotralistademétodosmenosútiles.
charAt(indice)
Devuelveelcarácterquehayenlaposiciónindicadacomoíndice.Lasposicionesdeunstringempiezanen0.
indexOf(carácter,desde)
Devuelvelaposicióndelaprimeravezqueapareceelcarácterindicadoporparámetroenunstring.Sinoencuentraelcarácterenelstringdevuelve-1.Elsegundoparámetroesopcionalysirveparaindicarapartirdequeposiciónsedeseaqueempiecelabúsqueda.
lastIndexOf(carácter,desde)
BuscalaposicióndeuncarácterexáctamenteigualacomolohacelafunciónindexOfperodesdeelfinalenlugardelprincipio.Elsegundoparámetroindicaelnúmerodecaracteresdesdedondesebusca,igualqueenindexOf.
replace(substring_a_buscar,nuevoStr)
ImplementadoenJavascript1.2,sirveparareemplazarporcionesdeltextodeunstringporotrotexto,porejemplo,podríamosuilizarloparareemplazartodaslasaparicionesdelsubstring"xxx"por"yyy".Elmétodonoreemplazaenelstring,sinoquedevuelveunresultantedehaceresereemplazo.Aceptaexpresionesregularescomosubstringabuscar.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 97 de 121
split(separador)
Estemétodosóloescompatibleconjavascript1.1enadelante.SirveparacrearunvectorapartirdeunStringenelquecadaelementoeslapartedelStringqueestáseparadaporelseparadorindicadoporparámetro.
substring(inicio,fin)
Devuelveelsubstringqueempiezaenelcarácterdeinicioyterminaenelcarácterdefin.Siintercambiamoslosparámetrosdeinicioyfintambiénfunciona.Simplementenosdaelsubstringquehayentreelcaráctermenoryelmayor.
toLowerCase()
Ponetodasloscaracteresdeunstringenminúsculas.
toUpperCase()
Ponetodasloscaracteresdeunstringenmayúsculas.
toString()
Estemétodolotienentodoslosobjetosyseusaparaconvertirlosencadenas.
Hastaaquíhemosvistolosmétodosquenosayudaránatratarcadenas.Ahoravamosaverotrosmétodosquesonmenosútiles,perohayqueindicarlosparaquequedeconstanciadeellos.TodossirvenparaaplicarestilosauntextoyescomosiutilizásemosetiquetasHTML.Veamoscómo.
anchor(name)
Convierteenunancla(sitioadondedirigirunenlace)unacadenadecaracteresusandocomoelatributonamedelaetiqueta<A>loquerecibeporparámetro.
big()
Aumentaeltamañodeletradelstring.Escomosicolocásemosenunstringalprincipiolaetiqueta<BIG>yalfinal</BIG>.
blink()
Paraqueparpadeeeltextodelstring,escomoutilizarlaetiqueta<BLINK>.SolovaleparaNetscape.
bold()
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 98 de 121
Comosiutilizásemoslaetiqueta<B>.
fixed()
Parautilizarunafuentemonoespaciada,etiqueta<TT>.
fontColor(color)
Ponelafuenteaesecolor.Comoutilizarlaetiqueta<FONT color=el_color_indicado>.
fontSize(tamaño)
Ponelafuentealtamañoindicado.Comosiutilizásemoslaetiqueta<FONT>conelatributosize.
italics()
Ponelafuenteencursiva.Etiqueta<I>.
link(url)
PoneeltextocomounenlacealaURLindicada.Escomosiutilizásemoslaetiqueta<A>conelatributohrefindicadocomoparámetro.
small()
Escomoutilizarlaetiqueta<SMALL>
strike()
Comoutilizarlaetiqueta<STRIKE>,quesirveparaqueeltextoaparezcatachado.
sub()
Actualizaeltextocomosiseestuvierautilizandolaetiqueta<SUB>,desubíndice.
sup()
Comosiutilizásemoslaetiqueta<SUP>,desuperíndice.
EjemplosdefuncionamientodelosobjetosdeclaseString
HastaahorahemosvistomuchosmétodosinteresantesdeelementosdetipoString,peronoestarádemáspasaralaprácticaparaentendertodomuchomejor.Asípues,veamosunosejemplossobrecómoseutilizanlosmétodosypropiedadesdelobjetoString.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 99 de 121
Ejemplodestrings1
Vamosaescribirelcontenidodeunstringconuncarácterseparador("-")entrecadaunodeloscaracteresdelstring.
var miString = "Hola Amigos"
var result = ""
for (i=0;i<miString.length-1;i++) {
result += miString.charAt(i)
result += "-"
}
result += miString.charAt(miString.length - 1)
document.write(result)
Primerocreamosdosvariables,unaconelstringarecorreryotraconunstringvacío,dondeguardaremoselresultado.Luegohacemosunbuclequerecorredesdeelprimerhastaelpenúltimocarácterdelstring-utilzamoslapropiedadlengthparaconocerelnúmerodecaracteresdelstring-yencadaiteracióncolocamosuncarácterdelstringseguidodeuncarácterseparador"-".Comoaunnosquedaelúltimocarácterporcolocarloponemosenlasiguientelíneadespuésdelbucle.UtilizamoslafuncióncharAtparaaccederalasposicionesdelstring.Finalmenteimprimimosenlapáginaelresultado.
Podemosverelejemploenfuncionamientoenunapáginaaparte.
Ejemplodestrings2
Vamosahacerunscriptquerompaunstringendosmitadesylasimprimaporpantalla.Lasmitadesserániguales,siemprequeelstringtengaunnúmerodecaracterespar.Encasodequeelnúmerodecaracteresseaimparnosepodráhacerlamitadexacta,peropartiremoselstringlomásaproximadoalamitad.
var miString = "0123456789"
var mitad1,mitad2
posicion_mitad = miString.length / 2
mitad1 = miString.substring(0,posicion_mitad)
mitad2 = miString.substring(posicion_mitad,miString.length)
document.write(mitad1 + "<br>" + mitad2)
Lasdosprimeraslíneassirvenparadeclararlasvariablesquevamosautilizareinicializarelstringapartir.Enlasiguientelíneahallamoslaposicióndelamitaddelstring.
Enlasdossiguienteslíneasesdonderealizamoseltrabajodeponerenunavariablelaprimeramitaddelstringyenlaotralasegunda.Paraelloutilizamoselmétodosubstringpasándole
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 100 de 121
comoinicioyfinenelprimercasodesde0hastalamitadyenelsegundodesdelamitadhastaelfinal.Parafinalizarimprimimoslasdosmitadesconunsaltodelíneaentreellas.
Podemosverelejemploenfuncionamientoenunapáginaaparte.
Unavezsabemosmanejarlosobjetosdelaclasestring,podemospasaraverotrasdelasclasesnativasdeJavascript,comolaclaseDate.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen21/03/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/objetos-string-javascript.html
ClaseDateenJavascript
ExplicamoslaclaseDatedeJavascript,queseutilizaparaelmanejodefechasyhoras.ExploramossusdiversosmétodosypropiedadesdelosobjetosDate,conlosquerealizarcálculoseneltiempo.
VamosaempezararelatartodaslascosasquedebessabersobreotrodelosobjetosnativosdeJavascript,elqueimplementalaclaseDate.
SobrelaclaseDaterecaetodoeltrabajoconfechasenJavascript,comoobtenerunafecha,eldíalahoraactualesyotrascosas.ParatrabajarconfechasnecesitamosinstanciarunobjetodelaclaseDateyconélyapodemosrealizarlasoperacionesquenecesitemos.
UnobjetodelaclaseDatesepuedecreardedosmanerasdistintas.Porunladopodemoscrearelobjetoconeldíayhoraactualesyporotropodemoscrearloconundíayhoradistintosalosactuales.Estodependedelosparámetrosquepasemosalconstruirlosobjetos.
ParacrearunobjetofechaconeldíayhoraactualescolocamoslosparéntesisvacíosalllamaralconstructordelaclaseDate.
miFecha = new Date()
Paracrearunobjetofechaconundíayhoradistintosdelosactualestenemosqueindicarentreparéntesiselmomentoconqueinicializarelobjeto.Hayvariasmanerasdeexpresarundíayhoraválidas,poresopodemosconstruirunafechaguiándonosporvariosesquemas.Estossondosdeellos,suficientesparacreartodotipodefechasyhoras.
miFecha = new Date(año,mes,dia,hora,minutos,segundos)
miFecha = new Date(año,mes,dia)
Losvaloresquedeberecibirelconstructorsonsiemprenuméricos.Undetalle,elmescomienzapor0,esdecir,eneroeselmes0.Sinoindicamoslahora,elobjetofechasecreacon
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 101 de 121
hora00:00:00.
LosobjetosdelaclaseDatenotienenpropiedadesperosiunmontóndemétodos,vamosaverlosahora.
getDate()
Devuelveeldíadelmes.
getDay()
Devuelveeldíadelasemana.
getHours()
Retornalahora.
getMinutes()
Devuelvelosminutos.
getMonth()
Devuelveelmes(atenciónalmesqueempiezapor0).
getSeconds()
Devuelvelossegundos.
getTime()
Devuelvelosmilisegundostranscurridosentreeldía1deenerode1970ylafechacorrespondientealobjetoalqueselepasaelmensaje.
getYear()
Retornaelaño,alqueseleharestado1900.Porejemplo,parael1995retorna95,parael2005retorna105.EstemétodoestáobsoletoenNetscapeapartirdelaversión1.3deJavascriptyahoraseutilizagetFullYear().
getFullYear()
Retornaelañocontodoslosdígitos.Usarestemétodoparaestarsegurosdequefuncionarátodobienenfechasposterioresalaño2000.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 102 de 121
setDate()
Actualizaeldíadelmes.
setHours()
Actualizalahora.
setMinutes()
Cambialosminutos.
setMonth()
Cambiaelmes(atenciónalmesqueempiezapor0).
setSeconds()
Cambialossegundos.
setTime()
Actualizalafechacompleta.Recibeunnúmerodemilisegundosdesdeel1deenerode1970.
setYear()
Cambiaelañorecibeunnúmero,alquelesuma1900antesdecolocarlocomoañodelafecha.Porejemplo,sirecibe95colocaráelaño1995.EstemétodoestáobsoletoapartirdeJavascript1.3enNetscape.AhoraseutilizasetFullYear(),indicandoelañocontodoslosdígitos.
setFullYear()
Cambiaelañodelafechaalnúmeroquerecibeporparámetro.Elnúmeroseindicacompletoej:2005o1995.Utilizarestemétodoparaestarsegurosquetodofuncionaparafechasposterioresa2000.
Comohabréispodidoapreciar,hayalgúnmétodoobsoletoporcuestionesrelativasalaño2000:setYear()ygetYear().EstosmétodossecomportanbienenInternetExplorerynonosdaráningúnproblemaelutilizarlos.Sinembrago,nofuncionaráncorrectamenteenNetscape,porloqueesinteresantequeutilicemosensulugarlosmétodosgetFullYear()ysetFullYear(),quefuncionanbienenNetscapeeInternetExplorer.
EjemplosdetrabajoconfechasenJavascript
Vistoloanterior,ahorapodemosponerlosconocimientosenlaprácticaenunejemplo
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 103 de 121
completodetrabajoconobjetosdelaclaseDate.
Enesteejemplovamosacreardosfechas,unaconelinstanteactualyotraconfechadelpasado.Luegolasimprimiremoslasdosyextraeremossuañoparaimprimirlotambién.Luegoactualizaremoselañodeunadelasfechasylavolveremosaescribirconunformatomáslegible.
//en estas líneas creamos las fechas
miFechaActual = new Date()
miFechaPasada = new Date(1998,4,23)
//en estas líneas imprimimos las fechas.
document.write (miFechaActual)
document.write ("<br>")
document.write (miFechaPasada)
//extraemos el año de las dos fechas
anoActual = miFechaActual.getFullYear()
anoPasado = miFechaPasada.getFullYear()
//Escribimos en año en la página
document.write("<br>El año actual es: " + anoActual)
document.write("<br>El año pasado es: " + anoPasado)
//cambiamos el año en la fecha actual
miFechaActual.setFullYear(2005)
//extraemos el día mes y año
dia = miFechaActual.getDate()
mes = parseInt(miFechaActual.getMonth()) + 1
ano = miFechaActual.getFullYear()
//escribimos la fecha en un formato legible
document.write ("<br>")
document.write (dia + "/" + mes + "/" + ano)
Sisedesea,sepuedeverenfuncionamientoestescriptenunapáginaaparte.
Hayquedestacarundetalleantesdeacabaryesqueelnúmerodelmespuedeempezardesde0.PorlomenosenelNetscapeconelquerealizamoslaspruebasempezabaen0elmes.PorestarazónsumamosunoalmesquedevuelveelmétodogetMonth.
Haymásdetallesadestacar,puesresultaqueenNetscapeelmétodogetFullYear()devuelvelosañostrascurridosdesde1900,conloquealobtenerelañodeunafechade,porejemplo,2005,indicaqueeselaño105.ParaobtenerelañocompletotenemosanuestradisposiciónelmétodogetFullYear()quedevolvería2005delmismomodoenNetscapeeInternetExplorer.
Muchaatención,pues,altrabajoconfechasendistintasplataformas,puestoquepodríaserproblemáticoelhechodequenosofrezcandistintassalidaslosmétodosdemanejodefechas,comsiempredependiendodelamarcayversióndenuestronavegador.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 104 de 121
Referencia:SepuedeverotroejemplodetrabajoconlaclaseDateeneltallerCalcularlaedadenJavascript
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen15/04/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/clase-date-javascript.html
ClaseMathenJavascript
Laclasequeutilizamospararealizarcálculosmatemáticosdetodotipo.
LaclaseMathesunadelasclasesnativasdeJavascript.ProporcionalosmecanismospararealizaroperacionesmatemáticasenJavascript.Algunasoperacionesseresuelvenrápidamenteconlosoperadoresaritméticosqueyaconocemos,comolamultiplicaciónolasuma,perohayunaseriedeoperacionesmatemáticasadicionalesquesetienenquerealizarusandolaclaseMathcomopuedensercalcularunsenoohacerunaraizcuadrada.
DemodoqueparacualquiercálculomatemáticocomplejoutilizaremoslaclaseMath,conunaparticularidad.HastaahoracadavezquequeríamoshaceralgoconunaclasedebíamosinstanciarunobjetodeesaclaseytrabajarconelobjetoyenelcasodelaclaseMathsetrabajadirectamenteconlaclase.EstosepermiteporquelaspropiedadesymétodosdelaclaseMathsonloquesellamapropiedadesymétodosdeclaseyparautilizarlosseoperaatravésdelaclaseenlugardelosobjetos.Dichodeotraforma,paratrabajarconlaclaseMathnodeberemosutilizarlainstrucciónnewyutilizaremoselnombredelaclaseparaaccederasuspropiedadesymétodos.
PropiedadesdeMath
Laspropiedadesguardanvaloresqueprobablementenecesitemosenalgúnmomentosiestamoshaciendocálculosmatemáticos.Esprobablequeestaspropiedadesresultenunpocorarasalaspersonasquedesconocenlasmatemáticasavanzadas,perolosquelasconozcansabrándesuutilidad.
E
NúmeroEoconstantedeEuler,labasedeloslogaritmosneperianos.
LN2
Logaritmoneperianode2.
LN10
Logaritmoneperianode10.
LOG2E
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 105 de 121
Logaritmoenbase2deE.
LOG10E
Logaritmoenbase10deE.
PI
Conocidonúmeroparacálculoconcírculos.
SQRT1_2
Raizcuadradadeunmedio.
SQRT2
Raizcuadradade2.
MétodosdeMath
Asímismo,tenemosunaseriedemétodospararealizaroperacionesmateméticastípicas,aunqueunpococomplejas.Todoslosqueconozcanlasmatemáticasaunbuennivelconoceránelsignificadodeestasoperaciones.
abs()
Devuelveelvalorabsolutodeunnúmero.Elvalordespuésdequitarleelsigno.
acos()
Devuelveelarcocosenodeunnúmeroenradianes.
asin()
Devuelveelarcosenodeunnumeroenradianes.
atan()
Devuelveunarcotangentedeunnumero.
ceil()
Devuelveelenteroigualoinmediatamentesiguientedeunnúmero.Porejemplo,ceil(3)vale3,ceil(3.4)es4.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 106 de 121
cos()
Retornaelcosenodeunnúmero.
exp()
RetornaelresultadodeelevarelnúmeroEporunnúmero.
floor()
Locontrariodeceil(),puesdevuelveunnúmeroigualoinmediatamenteinferior.
log()
Devuelveellogaritmoneperianodeunnúmero.
max()
Retornaelmayorde2números.
min()
Retornaelmenorde2números.
pow()
Recibedosnúmeroscomoparámetrosydevuelveelprimernúmeroelevadoalsegundonúmero.
random()
Devuelveunnúmeroaleatorioentre0y1.MétodocreadoapartirdeJavascript1.1.
round()
Redondeaalenteromáspróximo.
sin()
Devuelveelsenodeunnúmeroconunánguloenradianes.
sqrt()
Retornalaraizcuadradadeunnúmero.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 107 de 121
tan()
Calculaydevuelvelatangentedeunnúmeroenradianes.
EjemplodeutilizacióndelaclaseMath
VamosaverunsencilloejemplosobrecómoutilizarmétodosypropiedaesdelaclaseMathparacalcularelsenoyelcosenode2PIradianes(unavueltacompleta).Comoalgunosdevosotrossabréis,elcosenode2PIradianesdebedarcomoresultado1yelseno0.
document.write (Math.cos(2 * Math.PI))
document.write ("<br>")
document.write (Math.sin(2 * Math.PI))
2PIradianeseselresultadodemultiplicar2porelnúmeroPI.Eseresultadoesloquerecibeelmétodocos,ydacomoresultado1.Enelcasodelsenoelresultadonoesexactamente0peroestáaproximadoconunaexactituddemásdeunamillonésimadefracción.Seescribenloselsenoycosenoconunsaltodelíneaenmedioparaquequedemásclaro.
Podemosverelresultadodeejecutarestaslíneasdecódigo.
Además,sideseamosprofundizarenlaclaseMathosrecomiendoleerelartículodecrearunnúmeroaleatorio.TambiénsehaceusodelaclaseMathenelartículoenlacealeatorio.TodosenelTallerdeJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen25/04/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ClaseNumberenJavascript
Clasequemodelizaeltipodedatosnumérico.
VamosaveracontinuaciónotradelasclasesnativasdeJavascriptparatrabajocondatosnuméricos.SetratadelaclaseNumber,quemodelizaeltipodedatosnuméricoyfueañadidaenlaversión1.1deJavascript(conNetscapeNavigator3).
Comoveremosenesteartículo,laclaseNumbernossirveparacrearobjetosquetienendatosnuméricoscomovalor.Esmuyprobablequenololleguesautilizarenningunaocasión.Porlomenosenlamayoríadelosscripts,parahacerlascosasmásdispares,novasautilizarestaclase,noobstantevienebienconocerla.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 108 de 121
Nota:conocimoseltipodedatosnuméricoenelprimermanualdejavascript.Estenosservíaparaguardarunvaloresnuméricossinmás.Esteobjetomodelizaestetipodedatosylaclaseensi,ofrecealgúnmétodoquepuedeserútil.Paraloscálculosmatemáticosyelusodenúmerosengeneralvamosautilizarsiemprelasvariablesnuméricasvistasanteriormente.
ElvalordelobjetoNumberquesecreadependedeloquerecibaelconstructordelaclaseNumber.Conestasreglas:
Sielconstructorrecibeunnúmero,entoncesinicializaelobjetoconelnúmeroquerecibe.Sirecibeunnúmeroentrecomilladoloconvierteavalornumérico,devolviendotambiéndichonúmero.Devuelve0encasodequenorecibanada.EncasodequerecibaunvalornonuméricodevuelveNaN,quesignifica"NotaNumber"(Noesunnúmero).Sirecibefalseseinicializaa0ysirecibetrueseinicializaa1.
Sufuncionamientosepuederesumirenestosejemplos.
var n1 = new Number()
document.write(n1 + "<br>")
//muestra un 0
var n2 = new Number("hola")
document.write(n2 + "<br>")
//muestra NaN
var n3 = new Number("123")
document.write(n3 + "<br>")
//muestra 123
var n4 = new Number("123asdfQWERTY")
document.write(n4 + "<br>")
//muestra NaN
var n5 = new Number(123456)
document.write(n5 + "<br>")
//muestra 123456
var n6 = new Number(false)
document.write(n6 + "<br>")
//muestra 0
var n7 = new Number(true)
document.write(n7 + "<br>")
//muestra 1
Esteejemployelsiguiente,sepuedenverenunapáginaaparte.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 109 de 121
PropiedadesdelaclaseNumber
Estaclasetambiénnosofrecevariaspropiedadesquecontienenlossiguientesvalores:
NaN
Comohemosvisto,significaNotaNumber,oenespañol,noesunnúmero.
MAX_VALUEyMIN_VALUE
GuardanelvalordelmáximoyelmínimovalorquesepuederepresentarenJavascript
NEGATIVE_INFINITYyPOSITIVE_INFINITY
Representanlosvalores,negativosypositivosrespectivamente,apartirdeloscualeshaydesbordamiento.
Estaspropiedadessondeclase,asíqueaccederemosaellasapartirdelnombredelaclase,talcomopodemosverenesteejemploenelquesemuestracadaunodesusvalores.
document.write("Propiedad NaN: " + Number.NaN)
document.write("<br>")
document.write("Propiedad MAX_VALUE: " + Number.MAX_VALUE)
document.write("<br>")
document.write("Propiedad MIN_VALUE: " + Number.MIN_VALUE)
document.write("<br>")
document.write("Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY)
document.write("<br>")
document.write("Propiedad POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)
Losdosejemplosdeesteartículosepuedenverenfuncionamientoenunapáginaaparte.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen14/05/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ClaseBooleanenJavascript
OtradelasclasesincorporadasenJavascript,enestecasoparacrearvaloresboleanosapartirdevaloresnoboleanos.
EnesteartículopresentaremosotradelasclasesnativasdeJavascript,queeslaclaseBoolean.Estaclasenossirveparacrearvaloresboleanosyfueañadidaenlaversión1.1deJavascript(conNetscapeNavigator3).
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 110 de 121
Unadesusposiblesutilidadesesladeconseguirvaloresboleanosapartirdedatosdecualquierotrotipo.Noobstante,aligualqueocurríaconlaclaseNumber,esmuyprobablequenolalleguesautilizarnunca.
Nota:conocimoseltipodedatosbooleanenelprimermanualdeJavascript.Estenosservíaparaguardarunvalorverdadero(true)ofalso(false).Estaclasemodelizaesetipodedatosparacrearobjetosboleanos.
DependiendodeloquerecibaelconstructordelaclaseBoleanelvalordelobjetoboleanoquesecreaseráverdaderoofalso,delasiguientemanera
Seinicializaafalse
Cuandonopasasningúnvaloralconstructor,osipasasunacadenavacía,elnúmero0olapalabrafalsesincomillas.
Seinicializaatrue
Cuandorecibecualquiervalorentrecomilladoocualquiernúmerodistintode0.
Sepuedecomprenderelfuncionamientodeesteobjetofácilmentesiexaminamosunosejemplos.
var b1 = new Boolean()
document.write(b1 + "<br>")
//muestra false
var b2 = new Boolean("")
document.write(b2 + "<br>")
//muestra false
var b25 = new Boolean(false)
document.write(b25 + "<br>")
//muestra false
var b3 = new Boolean(0)
document.write(b3 + "<br>")
//muestra false
var b35 = new Boolean("0")
document.write(b35 + "<br>")
//muestra true
var b4 = new Boolean(3)
document.write(b4 + "<br>")
//muestra true
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 111 de 121
var b5 = new Boolean("Hola")
document.write(b5 + "<br>")
//muestra true
Sepuedeverenfuncionamientoelejemploenunapáginaaparte.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen14/05/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 112 de 121
EpílogosaestaprimerapartedelManualdeJavascript
ConestosartículosterminaremoslaprimerapartedelmanualdeJavascriptdeDesarrolloWeb.com.Aquíveremospordóndecontinuarestasexplicacionesyalgunostemasdeinteréscomoelcontroldeerroresenlosprogramas.
PausayconsejosJavascript
HacemosunapausaenelmanualdeJavascriptparaofrecerunaseriedeconsejosútiles.
HastaaquíhemosvistolamayorpartedelasintaxisyformadefuncionardeellenguajeJavascript.Ahorapodemosescribirscriptssimplesquehaganusodevariables,funciones,arrays,estructurasdecontrolytodaclasedeoperadores.Contodoestoconocemosellenguaje,peroaunquedamuchocaminopordelanteparadominarJavascriptysaberhacertodoslosefectosposiblesenpáginasweb,queendefinitivaesloqueinteresa.
Detodosmodos,estemanualnoslohemostomadoconmuchacalma,conintencióndequelaspersonasquenoesténfamiliarizadasconelmundodelaprogramaciónpuedantambiénteneraccesoallenguajeyaprendanlastécnicasbásicasquepermitiránafrontarfuturosretosenlaprogramación.Esperamosentoncesquelalecturadelmanualhayasidoprovechosaparalosmásinexpertosyqueahorapuedanentenderconfacilidadlassiguientesleccionesoejemplos,yaqueconocenlasbasessobrelasqueestánimplementados.
Antesdeacabar,vamosadarunaseriedeconsejosaseguiralahoradeprogramarnuestrosscripts,quenospuedenayudarahacernoslavidamásfácil.Algunosconsejossonnuevoseimportantes,otrossehanseñaladoconanterioridad,perosindudavienebienrecordar.
Distintosnavegadores
LoprimeroimportanteenseñalaresqueJavascriptesunlenguajemuydinámicoyquehasidoimplementadopocoapoco,amedidaquesalíannuevosnavegadores.SipensamosenelNetscape2,elprimernavegadorqueincluíaJavascript,yelNetscape6oInternetExplorer6nosdaremoscuentaquehanpasadounmundodenovedadesentreellos.Javascripthacambiadoporlomenostantocomolosnavegadoresyesorepresentaunproblemaparalosprogramadores,porquetienenqueestaraltantodelasdistintasversionesylamaneradefuncionarquetienen.
Actualizado:adíadehoytodavíalasdiferenciasentrelosnavegadoresantiguosylos
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 113 de 121
nuevosestodavíamáspatente.Incluso,ahoraqueapareceelHTML5,existenmuchosotrosusosdondeJavascripttienevalidez.
Lasbasesdejavascript,sobrelasquehemoshabladohastaahora,nohancambiadoprácticamentenada.Sóloenalgunasocasiones,quehemosseñaladosegúnlasconocíamos-comolosarraysporejemplo-,ellenguajehaevolucionadounpoco.Sinembargo,amedidaquenuevastecnologíascomoelDHTMLsedesarrollaban,losnavegadoreshanvariadosumanerademanejarlas.
Nuestroconsejoesqueesteisaltantodelascosasquefuncionanenunosuotrossistemasyqueprograméisparaquevuestraspáginasseancompatiblesenelmayornúmerodenavegadores.Paraprocurarestoúltimoesmuyaconsejableprobarlaspáginasenvariasplataformasdistintas.Tambiénesmuyútildejardeladolosúltimosavances,esdecir,noiralaúltima,sinoserunpococonservadores,paraquelaspersonasquehanactualizadomenoselbrowserpuedantambiénvisualizarloscontenidos.
Consejosparahaceruncódigosencilloyfácildemantener
Ahoravamosadarunaseriedeconsejosparaqueelcódigodenuestrosscriptsseamásclaroylibredeerrores.Muchosdeellosyaloshemosseñaladoysomoslibresdeaplicarlosono,perosilohacemosnuestratareacomoprogramadorespuedesermuchomásagradable,nosólohoy,sinotambiéneldíaquetengamosquerevisarlosscriptsensumantenimiento.
Utilizacomentarioshabitualmenteparaqueloqueestáshaciendoenlosscriptspuedaserrecordadoportiycualquierpersonaquetengaqueleerlosmásadelante.Tencuidadoconelámbitodelasvariables,recuerdaqueexistenvariablesglobalesylocales,queinclusopuedentenerlosmismosnombresyconoceencadamomentolavariablequetienevalidez.Escribeuncódigoconsuficienteclaridad,queseconsigueconsaltosdelíneadespuésdecadainstrucción,unsangradoadecuado(ponermárgenesacadalíneaparaindicarenquébloqueestánincluidas),utilizarlasllaves{}siempre,aunquenoseanobligatoriasyengeneralmantenersiempreelmismoestiloalahoradeprogramar.Aplicaunpocodeconsistenciaalmanejodevariables.Declaralasvariablesconvar.Nocambieseltipodeldatoquecontiene(sieranuméricanopongasluegotexto,porejemplo).Dalesnombrescomprensiblesparasaberentodomomentoquécontienen.Inclusoalahoradedarlesnombrepuedesaplicarunanorma,quesetratadequeindiquenensusnombreseltipodedatoquecontienen.Porejemplo,lasvariablesdetextopuedenempezarporunas(deString),lasvariablesnuméricaspuedenempezarporunanolasboleanasporunab.Pruebatusscriptscadapocoamedidaquelosvasprogramando.Puedesescribiruntrozodecódigoyprobarloantesdecontinuarparaverquetodofuncionacorrectamente.Esmásfácilencontrarloserroresdecódigoenbloquespequeñosqueenbloquesgrandes.
EnelrestodeestaprimerapartedelmanualdeJavascriptvamosaverunpardecosastambiénfundamentaleseneltrabajodeldíaadíaconestelenguaje,comosonladeteccióndeerrores.Además,osdejamosunasreferenciasimportantesparacontinuarconelaprendizaje:
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 114 de 121
ManualdeJavascriptII:lasegundapartedeestemanualabordaráusosdeJavascriptparacontroldeloselementosdelaspáginasweb.VideotutorialdeJavascript:estamospublicandounaseriedevideotutorialesdeJavascriptqueteencantaránsiquieresaprenderporlapráctica.Javascriptafondo:todoloquetienequeverconJavascriptloencontrarásenestaseccióndeDesarrolloWeb.com.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen10/01/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
Tratamientodeerroresenjavascript
Vamosaexplicarloserrorescomunesquepodemoscometerycómoevitarlosydepurarlos.Ademásveremosunapequeñaconclusiónalaprimerapartedelmanual.
Hemosterminadoyadeexplicartodoelcontenidodelaprimerapartedelmanualdejavascript,peroauntenemosalgunascosasimportantesquetratar.Enconcretoenesteartículovamosaexplicarloserrorescomunesquepodemoscometerycómoevitarlosydepurarlos.Ademásveremosunapequeñaconclusiónaestapartedelmanual.
ErrorescomunesenJavascript
Cuandoejecutamoslosscriptspuedenocurrirdostiposdeerroresdesintaxisodeejecución,losvemosacontinuación.
Erroresdesintaxisocurrenporescribirdemaneraerrónealaslíneasdecódigo,equivocarsealahoradeescribirelnombredeunaestructura,utilizarincorrectamentelasllavesolosparéntesisocualquiercosasimilar.Estoserroreslosindicajavascriptamedidaqueestácargandolosscriptsenmemoria,loquehacesiempreantesdeejecutarlos,comoseindicóenlosprimeroscapítulos.Cuandoelanalizadorsintácticodejavascriptdetectaunerrordeestossepresentaelmensajedeerror.
Erroresdeejecuciónocurrencuandoseestánejecutandolosscripts.Porejemplopuedenocurrircuandollamamosaunafunciónquenohasidodefinida.javascriptnoindicaestoserroreshastaquenoserealizalallamadaalafunción.
Lamaneraquetienejavascriptdemostrarunerrorpuedevariardeunnavegadoraotro.Enversionesantiguassemostrabaunaventanitaconelerroryunbotóndeaceptar,tantoenInternetExplorercomoenNetscape.Enlaactualidadloserroresdejavascriptpermanecenunpocomásocultosalusuario.Estovienebien,porquesinuestraspáginastienenalgúnerrorenalgunaplataformanoserámuymolestoparaelusuarioqueenmuchasocasionesnisedarácuenta.Sinembargoparaelprogramadorpuedeserunpocomásmolestoderevisarysenecesitaráconocerlamaneradequesemuestrenloserroresparaquepuedanserreparados.
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 115 de 121
EnversionesdeInternetExplorermayoresquela4semuestraelerrorenlabarradeestadodelnavegadorysepuedeverunadescripciónmásgrandedelerrorsiledamosundobleclickaliconodealertaamarilloqueapareceenlabarradeestado.EnNetscapeaparecetambiénunmensajeenlabarradeestadoqueademásnosindicaqueparamostrarmásinformacióndebemosteclear"javascript:"enlabarradedirecciones(dondeescribimoslasURLparaaccederalaspáginas).ConesoconseguimosqueaparezcalaConsolajavascript,quenosmuestratodosloserroresqueseencuentranenlaspáginas.
Tambiénpodemoscometerfallosenlaprogramaciónquehaganquelosscriptsnofuncionentalycomodeseábamosyquejavascriptnodetectacomoerroresyporlotantonomuestraningúnmensajedeerror.
Pordejarloclarovamosaverunejemploenelquenuestroprogramapuedenofuncionarcomodeseamossinquejavascriptofrezcaningúnmensajedeerror.Enesteejemplotrataríamosdesumardoscifrasperosiunadelasvariablesesdetipotextopodríamosencontrarnosconunerror.
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2
¿Cuántovalelavariablesuma?Comomuchosyasabéis,lavariablesumavale"2342"porquealintentarsumarunavariablenuméricayotratextual,setratanalasdoscomosifuerandetipotextoyporlotanto,eloperador+seaplicacomounaconcatenacióndecadenasdecaracteres.Sinoestamosaltantodeestacuestiónpodríamostenerunerrorennuestroscriptyaqueelresultadonoeselesperadoyademáseltipodelavariablesumanoesnuméricosinocadenadecaracteres.
Evitarerrorescomunes
Vamosaverahoraunalistadeloserrorestípicoscometidosporinexpertosenlaprogramaciónengeneralyenjavascriptenparticular,ypornotaninexpertos.
Utilizar=enexpresionescondicionalesenlugarde==esunerrordifícildedetectarcuandosecomete,siutilizamosunsoloigualloqueestamoshaciendoesunaasignaciónynounacomparaciónparaversidosvaloressoniguales.
Noconocerselaprecedenciadeoperadoresynoutilizarparéntesisparaagruparlasoperacionesquesedesearealizar.Enestecasonuestrasoperacionespuedendarresultadosnodeseados.
Usarcomillasdoblesysimpleserróneamente.Recuerdaquesepuedenutilizarcomillasdoblesosimplesindistintamente,conlanormasiguiente:dentrodecomillasdoblessedebenutilizarcomillassimplesyviceversa.
Olvidarsedecerrarunallaveocerrarunallavedemás.
Colocarvariassentenciasenlamismalíneasinsepararlasdepuntoycoma.Estosueleocurrir
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 116 de 121
enlosmanejadoresdeeventos,comoonclick,queveremosmásadelante.
Utilizarunavariableantesdeinicializarlaonodeclararlasvariablesconvarantesdeutilizarlastambiénsonerrorescomunes.Recuerdaquesinoladeclaraspuedesestarhaciendoreferenciaaunavariableglobalenlugardeunalocal.
Contarlasposicionesdelosarraysapartirde1.Recuerdaquelosarraysempiezanporlaposición0.
Depurarerroresjavascript
Cualquierprogramaessusceptibledecontenererrores.javascriptnosinformarádemuchosdeloserroresdelapágina:losquetienenrelaciónconlasintaxisylosquetienenlugarenelmomentodelaejecucióndelosscriptsacausadeequivocarnosalescribirelnombredeunafunciónounavariable.Sinembargo,nosonlosúnicoserroresquenospodemosencontrar,tambiénestánloserroresqueocurrensinquejavascriptmuestreelcorrespondientemensajedeerror,comovimosanteriormente,peroquehacenquelosprogramasnofuncionencomoesperábamos.
Nota:ParaaprenderautilizarlasherramientasdedeteccióndeerroresJavascriptmáspopulares,recomendamosespecialmenteverelvideotutorialsobredetectarerroresJavascriptenpáginasweb.
Paratodotipodeerrores,unosmásfácilesdedetectarqueotros,debemosutilizaralgunatécnicadedepuraciónquenosayudeaencontrarlos.Lenguajesdeprogramaciónmáspotentesqueelquetratamosahoraincluyenimportantesherramientasdedepuración,peroenjavascriptdebemoscontentarnosconunarudimentariatécnica.Setratadeutilizarunafunciónpredefinida,lafunciónalert()querecibeentreparéntesisuntextoylomuestraenunapequeñaventanaquetieneunbotóndeaceptar.
Conlafunciónalert()podemosmostrarencualquiermomentoelcontenidodelasvariablesqueestamosutilizandoennuestrosscripts.Paraelloponemosentreparéntesislavariablequedeseamosversucontenido.Cuandosemuestraelcontenidodelavariableelnavegadoresperaaqueapretemoselbotóndeaceptarycuandolohacemoscontinúaconlassiguientesinstruccionesdelscript.
Esteesunsencilloejemplosobrecómosepuedeutilizarlafunciónalert()paramostrarelcontenidodelasvariables.
var n_actual = 0
var suma = 0
while (suma<300){
n_actual ++
suma += suma + n_actual
alert("n_actual vale " + n_actual + " y suma vale " + suma)
}
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 117 de 121
Conlafunciónalert()semuestraelcontenidodelasdosvariablesqueutilizamosenelscript.Algosimilaraestoesloquetendremosquehacerparamostrarelcontenidodelasvariablesysabercómoestánfuncionandonuestrosscripts,sitodovabienohayalgúnerror.
Conclusión
Hastaaquíhemosconocidolasintaxisjavascriptenprofundidad.Aunqueaunnosquedancosasimportantesdesintaxis,lavisiónquehaspodidotenerdellenguajeserásuficienteparaenfrentartealosproblemasmásfundamentales.Enadelantepresentaremosotrosreportajesparaaprenderautilizarlosrecursosconlosquecontamosalahoradehacerefectosenpáginasweb.
Veremoslajerarquíadeobjetosdelnavegador,cómoconstruirnuestrospropiosobjetos,lasfuncionespredefinidasdejavascript,característicasdelHTMLDinámico,trabajoconformulariosyotrascosasimportantesparadominartodaslasposibilidadesdellenguaje.
TodoelloennuestromanualdeJavascriptIIyenelTallerdeJavascript.
EsteartículoesobradeMiguelAngelAlvarezFuepublicadoporprimeravezen11/02/2002Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php
ConsejosparaescribircódigoJavascript
EnesteartículopuedesencontrarvariosconsejosbastanteinteresantesalahoradeprogramarcódigoJavascript.
SiestasdandotusprimerospasosenJavacriptyestasempezandoyaasersucioydesordenado...Notienesexcusadaungiroparaescribirelcódigoordenadoytodoserámássencillo.
LosforosestanllenosdepeticionesdeinformaciónsobreAjax,DOMycomoseusanalgunaslibreríasoefectos.Hayunaextraordinariacantidaddeinformación,scripts,libreríasqueestansiendodesarrollados,blogsynuevossitiosespecializadosenestatemática,sólonecesitasunpocodetiempoyecharleunvistazo...esmuyfácillosmejoreslosencuentrasenDigg.comoendel.icio.us,seacabaronaquellosdíasenelqueJavascriptyelDHTMLseconvirtieronenpersonanongratacomohabilidadprincipalentuCV.
LagranmayoríadecódigoJavascripteshoyendiamuchomáslimpioqueenla"era"DHTML.
AhoraesunbuenmomentoparaconvertirteenunentusiastadeJavascript.Aunquealgunosdefectosqueocurrierontiempoatrasserepitensinembargo.
AquíosdejounaseriesdeconsejosqueosharámássencillomantenertucódigoJavascriptordenado,algunosconsejossondemasiadoobviosperotodossabemosqueelhombreesel
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 118 de 121
únicoanimalque...
Conservalasintaxisyestructuradetucódigolimpiayordenada
Estosignificaqueguardesporejemplounlímitedelongituddelínea(80caracteres)yqueprogramesfuncionesrazonablementepequeñas.Unfalloespensarqueenunafunciónlargalopodemoshacertodo.
Teneruntamañorazonableparatusfuncionessignificaquelaspodrásreutilizarcuandoamplieselcódigo,tampocoseasextremistayhagasfuncionesdeunaodoslíneasestopuedellegarasermásconfusoqueusarunaúnicafunción.
Esteesunejemploquemuestracualeslajustamedidaencuantoaltamañodelasfuncionesyladivisióndelastareas:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
Puedesoptimizarestafunciónseparandocadatareaconsupropiafunción:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
function printWindow(){
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 119 de 121
window.print();
}
function closeWindow() {
window.close();
}
function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}
Utilizainteligentementelosnombresdevariablesyfunciones
Estaesuntécnicaesencialdeprogramación,utilizanombresdevariablesyfuncionesqueseantotalmentedescriptivoseinclusootrapersonapuedallegaraplantearsequefunciónrealizanantesdeverelcódigo.
Recuerdaqueescorrectoelusodeguionesomayúsculasparaconcatenardiferentespalabras,enestecasoconcretodeesmástípicoelusodemayúsculasdebidoalasintaxisdellenguaje,(ej.getElementsByTagName()).
CambioFormatoFecha();
cambio_formato_fecha();
Comentaelcódigo
Graciasaloscomentariospuedeslibrartedemásdeunquebraderodecabeza,esmejorresolverelproblemaunaúnicavez.
Cómopuedescomprobarencualquierlibrodeprogramacióncadalíneatienecomentariosexplicandosuobjetivo.
Diferencialasvariablesdependiendodesuimportancia
Estepasoessimple:Colocaaquellasvariablesquesonusadasdurantetodoelscriptenlacabeceradelcódigo,deestamanerassiempresabrásdondeencontrarestasvariablesquesonlasquedeterminanelresultadodenuestrocódigo.
function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;
// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 120 de 121
tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);
}
Separaeltextodelcódigo
Puedesseparareltextodelcódigo,utilizandoundocumentollamadotexto.jsenformatoJSON.
Unejemploquefuncionamuybienpodríaser:
var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'noQAmessage' : 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},
'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}
Manual de JavaScript
http://desarrolloweb.com/manuales/manual-javascript.html Página 121 de 121
};
Estopermitiríaacualquieraquenoesprogramadortraducireltextodelscript,cambiandounicamentelasetiquetassinnecesidaddeaccederalcódigo.
Documentaelcódigo
Escribeunabuenadocumentaciondetuscript/libreríaoefecto.Unabuenadocumentacióndacalidadalcódigo,sinopreguntateporqueexistelaclásicadocumentaciónencualquierAPIcontodaslasposiblespropiedadesyparametros,perosindudalomejordetodoesexplicarconejemplosquecontienenunalistadeposibilidades.
EsteartículoesobradeManuGutierrezFuepublicadoporprimeravezen20/12/2007Disponibleonlineenhttp://desarrolloweb.com/articulos/consejos-para-escribir-codigo-javascript.html