Manual de JavaScript · PDF fileConocemos algo de su historia. Con este artículo comenzamos el Manual de Javascript, en el que esperamos ofrecer un punto

Manual de JavaScript

http://desarrolloweb.com/manuales/manual-javascript.html Página 1 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

http://desarrolloweb.com/manuales/manual-javascript.html



Autoresdelmanual

Lassiguientespersonashanparticipadocomoautoresescribiendoartículosdeestemanual.

MiguelAngelAlvarez

MiguelesfundadordeDesarrolloWeb.comylaplataformadeformaciónonlineEscuelaIT.Comenzóenelmundodeldesarrollowebenelaño1997,transformandosuhobbyensutrabajo.

ManuGutierrez



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

http://www.desarrolloweb.com/manuales/manual-javascript.html


http://www.desarrolloweb.com/manuales/26/

http://www.desarrolloweb.com/manuales/curso-fundamentos-programacion.html






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,

http://desarrolloweb.com/manuales/videotutorial-javascript.html


http://www.desarrolloweb.com/javascript/



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

http://www.desarrolloweb.com/articulos/731.php



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

http://www.desarrolloweb.com/articulos/listado-distintos-framework-javascript.html


http://desarrolloweb.com/articulos/introduccion-javascript.html




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

http://desarrolloweb.com/articulos/20.php




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.

http://www.desarrolloweb.com/programas/

http://www.desarrolloweb.com/articulos/komodo-edit.html

http://desarrolloweb.com/articulos/notepad.html




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.


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.




http://www.desarrolloweb.com/manuales/maquetacion-css.html



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.


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.






<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)">

http://desarrolloweb.com/articulos/ejemplos/javascript/abrir_vent_1.html

http://desarrolloweb.com/articulos/ejemplos/javascript/bienvenida_1.html

http://desarrolloweb.com/articulos/ejemplos/javascript/fecha.html



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.


http://www.desarrolloweb.com/articulos/video-introduccion-javascript.html





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.






TambiénsepuedeescribirJavascriptdentrodedeterminadosatributosdelapágina,comoelatributoonclick.Estosatributosestánrelacionadosconlasaccionesdelusuarioysellamanmanejadoresdeeventos.

Vamosaverenelsiguientecapítulocommásdetenidamenteestasdosmanerasdeescribirscripts,quetienencomodiferenciaprincipalelmomentoenqueseejecutanlassentencias.


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




http://desarrolloweb.com/articulos/video-javascript-incluir-ejecutar-scripts.html

http://desarrolloweb.com/manuales/20/




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.


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







ningúncasosemuestrecomotextoenlapágina.

OcultarelcódigoJavascriptconcomentariosHTML

VeamosconunejemplodecódigodondesehanutilizadocomentariosHTMLparaocultarJavascript,omejodicho,elcódigolosscriptsJavascript.

<SCRIPT>



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



EnelsiguienteartículoveremosalgunosotrosdetallessobrecolocarscriptsJavascriptquesehanquedadoeneltintero.


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.






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.


SintaxisJavascript

EmpezamosacontarlasintaxisdellenguajeJavascript,indicandosusprincipalescaracterísticas.

PorfinempezamosavercódigofuentedeJavascript!Esperamosquesehayanasimiladotodas





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




(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.






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:




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

http://desarrolloweb.com/articulos/ejemplos/javascript/primeras-variables.html



conceptosmásimportantesquedeberemosaprendersobreellas,elámbitodelasvariables.


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







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


var numero = 19

document.write(numero) //imprime 19

}


</SCRIPT>

Unconsejoparalosprincipiantespodríasernodeclararvariablesconlosmismosnombres,paraquenuncahayalugaraconfusiónsobrequévariableeslaquetienevalidezencadamomento.

Diferenciasentredeclararvariablesconvar,onodeclararlas

Comohemosdicho,enJavascripttenemoslibertadparadeclararonolasvariablesconla



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


numero = 19


}


//llamamos a la función

miFuncion()


</SCRIPT>

Enesteejemplo,tenemosunavariableglobalalapáginallamadanumero,quecontieneun2.Tambiéntenemosunafunciónqueutilizalavariablenumerosinhaberladeclaradoconvar,porloquelavariablenumerodelafuncionserálamismavariableglobalnumerodeclaradafueradelafunción.Enunasituacióncomoesta,alejecutarlafunciónsesobreescribirálavariablenumeroyeldatoquehabíaantesdeejecutarlafunciónseperderá.

Enelpróximoartículocontinuaremoshablandodevariablesymostraremosqueenellassepuedenguardardistintostiposdeinformación.


Quépodemosguardarenvariables

VemoselconceptodetiposdedatosparaellenguajeJavascriptyporquéesimportantemanejarlosbien.

EnelManualdeJavascriptyahemoshabladosobrelasvariablesenvariosartículos.Perotodavíanosquedancosasporveryenconcretomostraremosenesteartículoqueenuna






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.



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.


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.






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



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.






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=




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



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.





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&&paracomprobarsiambascomprobacionessecumplieronalmismotiempo.

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



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



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.



39

Detodosmodos,esimportantedarsecuentaqueelusodelosparéntesispuedeahorrarnosmuchosquebraderosdecabezaysobretodolanecesidaddesabernosdememorialatabladeprecedenciadelosoperadores.Cuandoveamospococlaroelordenconelqueseejecutaránlassentenciaspodemosutilizarlosyasíforzarqueseevalúeanteseltrozodeexpresiónqueseencuentradentrodelosparéntesis.

Paraacabarconeltemadeoperadoresnosquedaporverunúltimooperadoruntantoespecial,llamadotypeof.


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








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.






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






losnivelesenlaprogramación.Conunbuclepodemosporejemploimprimirenunapáginalosnúmerosdel1al100sinnecesidaddeescribircienvecesellainstrucciónimprimir.

Desdeel1hastael100Imprimirelnúmeroactual

Enjavascriptexistenvariostiposdebucles,cadaunoestáindicadoparauntipodeiteracióndistintoysonlossiguientes:

FORWHILEDOWHILE

Comohemosseñaladoya,lasestructurasdecontrolsonmuyimportantesenJavascriptyencualquierlenguajedeprogramación.Esporelloqueenlossiguientescapítulosveremoscadaunadeestasestructurasdetenidamente,describiendosuusoyofreciendoalgunosejemplos.Comenzaremosconlaestructuradecontrolif.


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










//...

}

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



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



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.






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



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.


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:


break

case valor3:


http://www.desarrolloweb.com/manuales/videotutorial-javascript.html

http://desarrolloweb.com/articulos/videotutorial-if-javascript.html






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



mostrarelmismomensaje.Enelcaso6enrealidadnoindicamosningunainstrucción,perocomotampococolocamosunbreakseejecutarálasentenciaosentenciasdelcasosiguiente,quecorrespondenconlasentenciaindicadaenelcaso7queeselmensajequeinformaqueesfindesemana.Sielcasoes7simplementeseindicaqueesfindesemana,talcomosepretendía.

Nota:AdemáscontamosconunvideotutorialsobreelSWITCHenJavascriptqueospuedeserdemuchaayudaparaentenderlotodomuchomejor.

EnelsiguienteartículocomenzaremosaexplorarlasestructurasdecontrolparahacerbuclesorepeticionesenJavascript,comenzandoporelbuclefor.


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.

http://www.desarrolloweb.com/articulos/video-estructura-switch-javascript.html






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.



Ejerciciodeejemplodelbuclefor

Vamosahacerunapausaparaasimilarelbucleforconunejercicioquenoencierraningunadificultadsihemosentendidoelfuncionamientodelbucle.

Setratadehacerunbuclequeescribaenunapáginaweblosencabezamientosdesde<H1>hasta<H6>conuntextoqueponga"Encabezadodenivelx".

LoquedeseamosescribirenunapáginawebmedianteJavascripteslosiguiente:

<H1>Encabezado de nivel 1</H1>






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.

http://desarrolloweb.com/articulos/ejemplos/javascript/for.html


http://desarrolloweb.com/articulos/bucle-for-javascript.html





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




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.




Podemosverunapáginaconelejemploenfuncionamiento.

ConestoyahemosconocidotodoslostiposdebuclesqueexistenenJavascript,noobstanteaunvamosadedicarunartículoparaexplicarlassentenciasbreakycontinuequenossirvenparaalterarelfuncionamientonormaldelosbuclesendossentidos.


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")

http://desarrolloweb.com/articulos/ejemplos/javascript/while.html






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.

http://desarrolloweb.com/articulos/ejemplos/javascript/break.html





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





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)


}

}

Conelprimerbuclecontrolamoslatablaactualyconelsegundobucleladesarrollamos.Enelprimerbucleescribimosunacabecera,ennegrita,indicandolatablaqueestamosescribiendo,primeroladel1yluegolasdemásenordenascendentehastael9.Conelsegundobucleescribocadaunodelosvaloresdecadatabla.Sepuedeverelejemploenmarchaenesteenlace.

Nota:Veremosmáscosasconbuclesanidadosencapítulosposteriores,aunquesiqueremosadelantarnosunpocoparaverunnuevoejemploqueafianceestosconocimientospodemosirviendounejemploenelTallerdeJavascriptsobrebuclesanidados,dondeseconstruyelatablacontodosloscolorespurosendefinicionesde256colores.

Conesteartículomásbienprácticosobreanidacióndebucles,terminamoseltemadelasestructurasdecontrol.AhorapasaremosaotraseccióndeesteManualdeJavascript,enlaquetrataremossobrelasfunciones.


http://desarrolloweb.com/articulos/ejemplos/javascript/tablamultiplicar.html







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





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.



escribirBienvenida()

Luegoveremosqueexistenmuchascosasadicionalesquedebemosconocerdelasfunciones,comoelpasodeparámetrosolosvaloresderetorno.PeroantesvamosaexplicardóndedebemoscolocarlasfuncionesJavascript.


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.



http://desarrolloweb.com/articulos/manuales/20/




b)Colocarlafunciónenotrobloquedescript:Tambiénesválidoquelafunciónseencuentreenunbloque<SCRIPT>anterioralbloquedondeestálallamada.

<HTML>

<HEAD>

<TITLE>MI PÁGINA</TITLE>

<SCRIPT>


//hago algo...


}

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


//hago algo...


}

</SCRIPT>

ConestoesperamoshaberresueltotodaslasdudassobrelacolocacióndelcódigodelasfuncionesJavascript.Ensiguientesartículosveremosotrostemasinteresantescomolosparámetrosdelasfunciones.





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")





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)



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.


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







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.




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



machacaríaunhipotéticovalordeesavariableysesustituiríapor"qwerty".

Nota:Podemosencontrarmásinformaciónsobreámbitodevariablesenunartículoanterior.

Conestohemosterminadoeltemadelasfunciones,asíqueenadelantenosdedicaremosaotrosasuntostambiéninteresantes,comosonlosArraysenJavascript.


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)






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



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



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



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.









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()




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.


miArray[0] = 155

miArray[1] = 4

miArray[2] = 499

for (i=0;i<3;i++){

document.write("Posición " + i + " del array: " + miArray[i])


}

Hemoscreadounarraycontresposiciones,luegohemosintroducidounvalorencadaunadelasposicionesdelarrayyfinalmentelashemosimpreso.Engeneral,elrecorridoporarraysparaimprimirsusposiciones,ocualquierotracosa,sehaceutilizandobucles.Enestecaso



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.


Longituddelosarrays

Aprendemosmáscosassobreelfuncionamientodelosarraysyenconcreto

http://desarrolloweb.com/articulos/ejemplos/javascript/ej_array.html





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.






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])


}

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.


ArraysmultidimensionalesenJavascript

Vemosquésonlosarraysmultidimensionales(arraysdemásdeunadimensión)ycómoutilizarlos.Ademásexplicamoscómoinicializararraysensudeclaración.

Comoestamosviendo,losarrayssonbastanteimportantesenJavascriptytambiénenlamayoríadeloslenguajesdeprogramación.EnconcretoyahemosaprendidoacreararraysyutilizarlosenartículosanterioresdelManualdeJavascript.Peroaunnosquedanalgunascosasimportantesqueexplicar,comosonlosarraysdevariasdimensiones.

http://desarrolloweb.com/articulos/ejemplos/javascript/ej_recorrido_array.html



http://desarrolloweb.com/manuales/20



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



var temperaturas_medias_ciudad1 = new Array (3)




var temperaturas_medias_ciudad2 = new Array (3)




Conlasanterioreslíneashemoscreadotresarraysde1dimensiónytreselementos,comolosqueyaconocíamos.Ahoracrearemosunnuevoarraydetreselementoseintroduciremosdentrodecadaunadesuscasillaslosarrayscreadosanteriormente,conloquetendremosunarraydearrays,esdecir,unarrayde2dimensiones.

var temperaturas_cuidades = new Array (3)

temperaturas_cuidades[0] = temperaturas_medias_ciudad0



Vemosqueparaintroducirelarrayenterohacemosreferenciaalmismosinparéntesisnicorchetes,sinosóloconsunombre.Elarraytemperaturas_cuidadesesnuestroarraybidimensinal.



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.


http://www.desarrolloweb.com/manuales/manual-handlebars.html

http://desarrolloweb.com/articulos/ejemplos/javascript/arraymultidimensional.html



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.









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



http://www.desarrolloweb.com/manuales/teoria-programacion-orientada-objetos.html

http://www.desarrolloweb.com/articulos/objetos-lenguaje-informatico-introduccion.html

http://www.desarrolloweb.com/manuales/curso-fundamentos-programacion.html



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(".").




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


http://www.desarrolloweb.com/manuales/manual-de-ecmascript-6.html



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

http://www.desarrolloweb.com/articulos/literales-objeto-javascript.html


http://www.desarrolloweb.com/manuales/teoria-programacion-orientada-objetos.html

http://desarrolloweb.com/articulos/introduccion-objetos-javascript.html



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,



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




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

http://www.desarrolloweb.com/articulos/que-es-json-video.html



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

http://desarrolloweb.com/articulos/literales-objeto-javascript.html



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



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

http://www.desarrolloweb.com/articulos/literales-objeto-javascript.html



enconcretodelbucleforinJavascript,sinodeltratamientoquehaceestelenguajealosobjetos.Setratadequepodemosaccederalaspropiedadesdelosobjetoscomosifueranarrays,indicandocomoíndicedelarrayunacadenaconelnombredelapropiedad.

alert(diasMes["mayo"]);

Esonosmostraráenunacajadealertaelvalor31queeselqueestáasociadoalapropiedad"mayo"delobjeto"diasMes".

Tehabrásdadocuentaqueestasintaxisparaaccederalosvaloresdelaspropiedadesesjustamenteigualalasintaxisqueseusaparaaccederavaloresdecasillasdeunarrayasociativo.

Bueno,puessabiendoestopodrásaccederalosvaloresdelobjeto,unoporuno,conunbuclefor...inmuyparecidoalqueteníamosantes.


console.log(diasMes[mes]);

}

Seguroqueahorateparecesencillo.Esquerealmenteloes.

Todojunto,accesoalapropiedadysuvalor

Estaparteyaseguroquenitehacefaltaleerla.Simplementequieromostrarunmensajeenlaconsolamáslegible,accediendoenelmismobuclealapropiedadysuvalor.


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" : {



"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

http://desarrolloweb.com/articulos/recorridos-propiedades-objetos-javascript-forin.html






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.



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.



this.edad = edad


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



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



this.edad = edad


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

http://desarrolloweb.com/articulos/ejemplos/javascript2/uso_objetos.html

http://desarrolloweb.com/articulos/clases-javascript-es5.html



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



http://desarrolloweb.com/articulos/726.php?manual=26







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.


TratamientodeStringenJavascript

LascadenasenJavascriptsonobjetosdelaclaseString,quecontienendiversosmétodosquenossirvenparamanejarcadenasdecaracteres.Estudiamossuspropiedadesylalistacompletademétodos.

EnjavascriptlasvariablesdetipotextosonobjetosdelaclaseString.Estoquieredecirquecadaunadelasvariablesquecreamosdetipotextotienenunaseriedepropiedadesymétodos.






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.



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()



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.



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

http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_string1.html



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

http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_string2.html


http://desarrolloweb.com/articulos/objetos-string-javascript.html




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.



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



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 (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.

http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_fechas.html



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


http://desarrolloweb.com/articulos/clase-date-javascript.html




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.



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.



tan()

Calculaydevuelvelatangentedeunnúmeroenradianes.

EjemplodeutilizacióndelaclaseMath

VamosaverunsencilloejemplosobrecómoutilizarmétodosypropiedaesdelaclaseMathparacalcularelsenoyelcosenode2PIradianes(unavueltacompleta).Comoalgunosdevosotrossabréis,elcosenode2PIradianesdebedarcomoresultado1yelseno0.

document.write (Math.cos(2 * Math.PI))


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.


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.

http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_math1.html








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")


//muestra NaN

var n3 = new Number("123")


//muestra 123

var n4 = new Number("123asdfQWERTY")


//muestra NaN

var n5 = new Number(123456)


//muestra 123456

var n6 = new Number(false)


//muestra 0

var n7 = new Number(true)


//muestra 1

Esteejemployelsiguiente,sepuedenverenunapáginaaparte.


http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_number.html



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("Propiedad MAX_VALUE: " + Number.MAX_VALUE)


document.write("Propiedad MIN_VALUE: " + Number.MIN_VALUE)


document.write("Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY)


document.write("Propiedad POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)

Losdosejemplosdeesteartículosepuedenverenfuncionamientoenunapáginaaparte.


ClaseBooleanenJavascript

OtradelasclasesincorporadasenJavascript,enestecasoparacrearvaloresboleanosapartirdevaloresnoboleanos.

EnesteartículopresentaremosotradelasclasesnativasdeJavascript,queeslaclaseBoolean.Estaclasenossirveparacrearvaloresboleanosyfueañadidaenlaversión1.1deJavascript(conNetscapeNavigator3).

http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_number.html





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("")


//muestra false

var b25 = new Boolean(false)


//muestra false

var b3 = new Boolean(0)


//muestra false

var b35 = new Boolean("0")


//muestra true

var b4 = new Boolean(3)


//muestra true





var b5 = new Boolean("Hola")


//muestra true

Sepuedeverenfuncionamientoelejemploenunapáginaaparte.


http://desarrolloweb.com/articulos/ejemplos/javascript2/ej_boolean.html




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




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:





ManualdeJavascriptII:lasegundapartedeestemanualabordaráusosdeJavascriptparacontroldeloselementosdelaspáginasweb.VideotutorialdeJavascript:estamospublicandounaseriedevideotutorialesdeJavascriptqueteencantaránsiquieresaprenderporlapráctica.Javascriptafondo:todoloquetienequeverconJavascriptloencontrarásenestaseccióndeDesarrolloWeb.com.


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.


http://desarrolloweb.com/manuales/videotutorial-javascript.html

http://desarrolloweb.com/javascript/





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



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)

}

http://desarrolloweb.com/articulos/video-detectar-errores-javascript.html



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.


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




http://www.digg.com/

http://del.icio.us/



ú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:


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);


}

function printWindow(){



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.


var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// variables temporales

var printLinkLabel = ?print?;

var closeLinkLabel = ?close?;#



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);


}

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': {

}



};

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

http://desarrolloweb.com/articulos/consejos-para-escribir-codigo-javascript.html

Documents

Manual de JavaScript · PDF fileConocemos algo de su historia. Con este artículo comenzamos el Manual de Javascript, en el que esperamos ofrecer un punto