Manual de Java Script autor Miguel Ángel Álvarez y Manu Gutierrez PDF

Preview

Summary

Libro relacionado a la programacion en javascript. Tocando diversos temas, diferencias entre java y javascript y siendo un contenido apto para principiantes personas que se estan iniciando en la programacion y en el diseño y desarrollo web...

Description

Manual de JavaScript

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

Página 1 de 125

Manual de JavaScript

Introducción:ManualdeJavaScript ManualdeJavascriptdesdecero.Adéntrateenellenguajedeprogramaciónmáspopulardelawebyconoce todaslascaracterísticasdelaprogramacióndelladodelcliente. Javascriptesellenguajedeprogramaciónusadoparalaspáginasweb,compatiblecontodoslosnavegadores yqueformaunestándardedesarrolloqueahoratambiénseextiendeadispositivosoprogramasde propósitogeneralmultiplataforma. EstemanualdeJavascriptestádivididoendosgrandespartes.Enlaprimeraparteveremoslas característicasfundamentalesdellenguaje,comosusintaxis,variables,estructurasdecontrol,funciones, arrays,etc.TodalainformaciónqueencontrarásenlaprimerapartetesirveparaprogramarJavascripta nivelgeneral,seadondeseaelentornodeejecucióndetusprogramas. Enlasegundaparte,quetambiénencontrarásenestamismapágina,ahondaremosenelusodeJavascripten elámbitodelnavegador,esdecir,aprenderemosamanejarlosrecursosquenosofreceelnavegadorpara hacerpáginasinteractivas,capacesdeinteractuarconelusuariodemaneraavanzada. Encuentrasestemanualonlineen: http://desarrolloweb.com/manuales/manual-javascript.html

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

Página 2 de 125

Manual de JavaScript

Autoresdelmanual Lassiguientespersonashanparticipadocomoautoresescribiendoartículosdeestemanual.

MiguelAngelAlvarez MiguelesfundadordeDesarrolloWeb.comylaplataformadeformaciónonline EscuelaIT.Comenzóenelmundodeldesarrollowebenelaño1997, transformandosuhobbyensutrabajo.

ManuGutierrez

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

Página 3 de 125

Manual de JavaScript

IntroduccionesaJavascript Artículosquenosserviránparaintroducirnosenestelenguaje,aprendiendolosconceptosmásbásicosde Javascriptylaprogramacióndelladodelcliente.

IntroducciónaJavascript VeamosquéesJavaScriptylasposibilidadesquenosofreceutilizarestelenguajealahorade desarrollarpáginasweb.Conocemosalgodesuhistoria. ConesteartículocomenzamoselManualdeJavascript,enelqueesperamosofrecerunpuntodepartida paralaspersonasquequierenintroducirseenelmundodelaprogramaciónwebdelladodelcliente. ElcursodeJavascriptquehemospreparadoenDesarrolloWeb.comestádivididoendospartes fundamentales.EnesteprimermanualpretendemosexplicarellenguajeJavascriptdemanerageneral, ofreciendoinformaciónsobrecómoincluirscriptsylidiarconloselementosmásbásicosdecualquier lenguajedeprogramación,comosonlasvariables,operadores,estructurasdecontrol,funciones,etc.La segundapartedelmanualladedicaremosaexplorartemasmásespecíficossobrecómoJavascriptnospuede ayudaraaplicardinamismoaunapáginaweb,atravésdelcontroldinámicodeelementosdelapáginayla interacciónconelusuario.

Nota:Portanto,enesteprimermanualencontraréisqueseofrecemuchamásinformaciónteórica típicasobrelenguajesdeprogramación.Seráesencialparasabercómodarlosprimerospasosenla programación,peroquizásresulteunpocomásaburridaquelasegundaparte,dondeaprenderemosa alterardinámicamentelapáginaweb,responderaaccionesdelusuario,etc. Nosotroshemosqueridoexplicarlascosascondetenimiento,paraqueaprenderJavascriptconeste manualestéalalcancedepersonasinclusosinconocimientosdeprogramación.Noobstante,en DesarrolloWeb.comexistendiversosmanualesmásbásicostodavíaparaaprenderaprogramar,como puedeserelcursodeprogramaciónenvídeo,omásespecíficosparalawebconelmanualdePáginas dinámicasolaintroducciónalaprogramación. Sinembargo,quizáspersonasmásexperimentadaspuedanpreferirpasardirectamentealasegundaparte deestemanual,dondeexplicaremoscosasmásprácticasyvolversobreartículospuntualesdeeste manualparautilizarloscomoreferenciaamedidaquevayannecesitandoconocerlasintaxisde determinadasestructurasdecontrol,operadoresdellenguaje,construccióndefunciones,etc.

EnesteartículopretendemosexplicarquéesJavascriptyparaquésirveestelenguaje,almenosenlíneas generales.Alolargodeésteylospróximosartículosexplicaremoslosconceptosnecesariosparaquelas personastenganunaideamásomenosclarasobreJavascript,lasposibilidadesdedellenguajeousosmás comunesylosmodosdetrabajoquepodemosemplearparadesarrollarnuestrospropiosscripts.

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

Página 4 de 125

Manual de JavaScript

Nota:OtrorecursoquequeremosrecomendarparaaprenderJavascript,especialmenteindicadoparalas personasconmenosexperiencia,eselVideotutorialdeJavascript.Porsupuesto,tampoconosqueremos olvidardelosTalleresdeJavascript,asícomootrosmanualesmásespecíficosqueencontrarásenla secciónJavascriptafondo.

QuéesJavascript Javascriptesunlenguajedeprogramaciónutilizadoparacrearpequeñosprogramitasencargadosderealizar accionesdentrodelámbitodeunapáginaweb.ConJavascriptpodemoscrearefectosespecialesenlas páginasydefinirinteractividadesconelusuario.Elnavegadordelclienteeselencargadodeinterpretarlas instruccionesJavascriptyejecutarlaspararealizarestosefectoseinteractividades,demodoqueelmayor recurso,ytalvezelúnico,conquecuentaestelenguajeeselpropionavegador. Javascripteselsiguientepaso,despuésdelHTML,quepuededarunprogramadordelawebquedecida mejorarsuspáginasylapotenciadesusproyectos.Esunlenguajedeprogramaciónbastantesencilloy pensadoparahacerlascosasconrapidez,avecesconligereza.Inclusolaspersonasquenotenganuna experienciapreviaenlaprogramaciónpodránaprenderestelenguajeconfacilidadyutilizarloentodasu potenciaconsólounpocodepráctica. EntrelasaccionestípicasquesepuedenrealizarenJavascripttenemosdosvertientes.Porunladolos efectosespecialessobrepáginasweb,paracrearcontenidosdinámicosyelementosdelapáginaquetengan movimiento,cambiendecolorocualquierotrodinamismo.Porelotro,javascriptnospermiteejecutar instruccionescomorespuestaalasaccionesdelusuario,conloquepodemoscrearpáginasinteractivascon programascomocalculadoras,agendas,otablasdecálculo. Javascriptesunlenguajeconmuchasposibilidades,permitelaprogramacióndepequeñosscripts,pero tambiéndeprogramasmásgrandes,orientadosaobjetos,confunciones,estructurasdedatoscomplejas, etc.TodaestapotenciadeJavascriptseponeadisposicióndelprogramador,queseconvierteenel verdaderodueñoycontroladordecadacosaqueocurreenlapágina. Enestemanualvamosatratardeacercarnosaestelenguajeenprofundidadyconocertodossussecretosy métodosdetrabajo.Alfinaldelmanualseremoscapacesdecontrolarelflujoennuestrosprogramas Javascriptysabercómocolocarscriptspararesolverdistintasnecesidadesquepodamostener.Todoloque veremosacontinuaciónnosservirádebaseparaadentrarnosmásadelanteeneldesarrollodepáginas enriquecidasdelladodelcliente.

AlgodelahistoriadeJavascript EnInternetsehancreadomultituddeserviciospararealizarmuchostiposdecomunicaciones,como correo,charlas,búsquedasdeinformación,etc.Peroningunodeestosserviciossehadesarrolladotanto comoelWeb.Siestamosleyendoestaslíneasnovamosanecesitarningunaexplicacióndeloqueeselweb, perosipodemoshablarunpocosobrecómosehaidodesarrollandoconelpasodelosaños. ElWebesunsistemaHipertexto,unacantidaddedimensionesgigantesdetextosinterrelacionadospor mediodeenlaces.Cadaunadelasunidadesbásicasdondepodemosencontrarinformaciónsonlaspáginas web.Enunprincipio,paradiseñarestesistemadepáginasconenlacessepensóenunlenguajeque http://desarrolloweb.com/manuales/manual-javascript.html

Página 5 de 125

Manual de JavaScript

permitiesepresentarcadaunadeestasinformacionesjuntoconunospequeñosestilos,estelenguajefueel HTML. ConformefuecreciendoelWebysusdistintosusossefueroncomplicandolaspáginasylasaccionesquese queríanrealizaratravésdeellas.AlpocotiempoquedópatentequeHTMLnoerasuficientepararealizar todaslasaccionesquesepuedenllegaranecesitarenunapáginaweb.Enotraspalabras,HTMLsehabía quedadocortoyaquesólosirveparapresentareltextoenunpágina,definirsuestiloypocomás. Alcomplicarselossitiosweb,unadelasprimerasnecesidadesfuequelaspáginasrespondiesenaalgunas accionesdelusuario,paradesarrollarpequeñasfuncionalidadesmásalládelospropiosenlaces.Elprimer ayudanteparacubrirlasnecesidadesqueestabansurgiendofueJava,queesunlenguajedepropósito general,peroquehabíacreadounamaneradeincrustarprogramasenpáginasweb.Atravésdelatecnología delosApplets,sepodíacrearpequeñosprogramasqueseejecutabanenelnavegadordentrodelaspropias páginasweb,peroqueteníanposibilidadessimilaresalosprogramasdepropósitogeneral.Laprogramación deAppletsfueungranavanceyNetscape,poraquelentonceselnavegadormáspopular,habíarotola primerabarreradelHTMLalhacerposiblelaprogramacióndentrodelaspáginasweb.Nocabedudaquela aparicióndelosAppletssupusoungranavanceenlahistoriadelweb,peronohasidounatecnología definitivaymuchasotrashanseguidoimplementandoelcaminoquecomenzóconellos. LlegaJavascript

Netscape,despuésdehacersusnavegadorescompatiblesconlosapplets,comenzóadesarrollarunlenguaje deprogramaciónalquellamóLiveScriptquepermitiesecrearpequeñosprogramasenlaspáginasyque fuesemuchomássencillodeutilizarqueJava.DemodoqueelprimerJavascriptsellamoLiveScript,pero nodurómuchoesenombre,puesantesdelanzarlaprimeraversióndelproductoseforjóunaalianzacon SunMicrosystems,creadordeJava,paradesarrollarenconjuntoesenuevolenguaje. LaalianzahizoqueJavascriptsediseñaracomounhermanopequeñodeJava,solamenteútildentrodelas páginaswebymuchomásfácildeutilizar,demodoquecualquierpersona,sinconocimientosde programaciónpudieseadentraseenellenguajeyutilizarloasusanchas.Además,paraprogramarJavascript noesnecesariounkitdedesarrollo,nicompilarlosscripts,nirealizarlosenficherosexternosalcódigo HTML,comoocurríaconlosapplets. Netscape2.0fueelprimernavegadorqueentendíaJavascriptysuestelafueseguidaporotrosclientesweb comoInternetExplorerapartirdelaversión3.0.Sinembargo,lacompañíaMicrosoftnombróaeste lenguajecomoJScriptyteníaligerasdiferenciasconrespectoaJavascript,algunasdelascualesperduran hastaeldíadehoy. Diferenciasentredistintosnavegadores

ComohemosdichoelJavascriptdeNetscapeyeldeMicrosoftInternetExplorerteníaligerasdiferencias, peroesquetambiénelpropiolenguajefueevolucionandoamedidaquelosnavegadorespresentabansus distintasversionesyamedidaquelaspáginaswebsehacíanmásdinámicasymásexigenteslasnecesidades defuncionalidades. LasdiferenciasdefuncionamientodeJavascripthanmarcadolashistoriadellenguajeyelmodoenelque losdesarrolladoresserelacionanconél,debidoaqueestabanobligadosacrearcódigoquefuncionase correctamenteendiferentesplataformasydiferentesversionesdelasmismas.Adíadehoy,siguenhabiendo http://desarrolloweb.com/manuales/manual-javascript.html

Página 6 de 125

Manual de JavaScript

muchasdiferenciasyparasolucionarlohansurgidomuchosproductoscomolosFrameworksJavascript, queayudanarealizarfuncionalidadesavanzadasdeDHTMLsintenerquepreocuparseenhacerversiones distintasdelosscripts,paracadaunodelosnavegadoresposiblesdelmercado. AcontinuaciónseguiremosaprendiendocuriosidadesdellenguajeyaclararemosqueJavayJavascriptson doscosasdistintas,enelartículosobrelasdiferenciasdeJavayJavascript.

EsteartículoesobradeMiguelAngelAlvarez Fuepublicadoporprimeravezen16/07/2001 Disponibleonlineenhttp://desarrolloweb.com/articulos/introduccion-javascript.html

DiferenciasentreJavayJavascript JavayJavascriptsondosproductosdistintos.Ponemosdemanifiestoladiferenciaentreestosdos lenguajesconunnombresimilar. EstamoscontandodiversosasuntosinteresantesycuriosidadesquesirvendeintroducciónparaelManual deJavascriptyqueremostratarunadelasmástípicasasociacionesquesesehacenaloirhablarde Javascript.Nosreferimosarelacionarloconotrolenguajedeprogramación,llamadoJava,quenotiene muchoquever.RealmenteJavascriptsellamóasíporqueNetscape,queestabaaliadoaloscreadoresde Javaenlaépoca,quisoaprovecharelconocimientoylapercepciónquelaspersonasteníandelpopular lenguaje.Contodo,secreóunproductoqueteníaciertassimilitudes,comolasintaxisdellenguajeoel nombre.Sehizoentenderqueeraunhermanopequeñoyorientadoespecíficamenteparahacercosasenlas páginasweb,perotambiénsehizocaeramuchaspersonasenelerrordepensarquesonlomismo. QueremosquequedeclaroqueJavascriptnotienenadaqueverconJava,salvoensusorígenes,como sehapodidoleerhaceunaslíneas.Actualmentesonproductostotalmentedistintosynoguardanentresi másrelaciónquelasintaxisidénticaypocomás.Algunasdiferenciasentreestosdoslenguajessonlas siguientes: Compilador.ParaprogramarenJavanecesitamosunKitdedesarrolloyuncompilador.Sin embargo,Javascriptnoesunlenguajequenecesitequesusprogramassecompilen,sinoqueéstos seinterpretanporpartedelnavegadorcuandoésteleelapágina. Orientadoaobjetos.Javaesunlenguajedeprogramaciónorientadoaobjetos.(Mástardeveremos quequieredecirorientadoaobjetos,paraelquenolosepatodavía)Javascriptnoesorientadoa objetos,estoquieredecirquepodremosprogramarsinnecesidaddecrearclases,talcomoserealiza enloslenguajesdeprogramaciónestructuradacomoCoPascal. Propósito.JavaesmuchomáspotentequeJavascript,estoesdebidoaqueJavaesunlenguajede propósitogeneral,conelquesepuedenhaceraplicacionesdelomásvariado,sinembargo,con Javascriptsólopodemosescribirprogramasparaqueseejecutenenpáginasweb. Estructurasfuertes.Javaesunlenguajedeprogramaciónfuertementetipado,estoquieredecirque aldeclararunavariabletendremosqueindicarsutipoynopodrácambiardeuntipoaotro automáticamente.PorsuparteJavascriptnotieneestacaracterística,ypodemosmeterenuna variablelainformaciónquedeseemos,independientementedeltipodeésta.Además,podremos cambiareltipodeinformacióndeunavariblecuandoqueramos. Otrascaracterísticas.ComovemosJavaesmuchomáscomplejo,aunquetambiénmáspotente, http://desarrolloweb.com/manuales/manual-javascript.html

Página 7 de 125

Manual de JavaScript

robustoyseguro.TienemásfuncionalidadesqueJavascriptylasdiferenciasquelosseparansonlo suficientementeimportantescomoparadistinguirlosfácilmente.

EsteartículoesobradeMiguelAngelAlvarez Fuepublicadoporprimeravezen16/07/2001 Disponibleonlineenhttp://desarrolloweb.com/articulos/20.php

Antesdeempezar MostramosejemplosdepáginasqueempleanJavaScriptensudesarrolloycomentamoslas aplicacionesnecesariasparaempezaraprogramar. HayvariospuntosquequeremoscomentarcomointroducciónenelManualdeJavascriptyquepodrás quererconocerantesdecomenzaraprogramar.Primeroseríabuenohacernosunaideamásconcretadelas posiblesaplicacionesquepodríatenerellenguajeyquesepuedenencontrareninnumerablessitiosweb. Ademástambiénqueremoscomentarlasherramientasyconocimientospreviosquenecesitamospara ponernosmanosalaobra.

UsosdeJavascript QuizásadíadehoysobradecirparaquésirveJavascript,peroveamosbrevementealgunosusosdeeste lenguajequepodemosencontrarenelwebparahacernosunaideadelasposibilidadesquetiene. Sinirmáslejos,DesarrolloWeb.comutilizaJavascriptparaelmenúsuperior,quemuestradiferentesenlaces dentrodecadaopciónprincipal.Vamoscambiandolapáginacadaciertotiempo,peroeneldiseñoactualde estesitioweb,elementoscomoelrecuadrode"Login"tambiéntienensudinamismoconJavascript. ActualmentecasitodaslaspáginasunpocoavanzadasutilizanJavascript,puessehavueltounadelas insigniasdeloquesedenominalaWeb2.0ylaexperienciaenriquecidadeusuario.Porejemplo,webstan popularescomoFacebook,TwitteroYoutubeusanJavascriptaraudales.Parasermásconcretos,cuando enlaredsocialapretamosunenlaceparacomentaralgo,semuestraenlapáginaunpequeñoformularioque aparececomoporartedemagiayluegoseenvíasinsalirsedelapropiapágina.Tambiéncuandovotamos porunvídeoenYoutubeocuandosecuentanloscaracteresquellevamosescritosenlosmini-postde Twitter,seutilizaJavascriptpararealizarpequeñasfuncionalidadesquenoesposiblerealizarconHTML sólo.EnrealidadsepuedenverejemplosdeJavascriptdentrodecualquierpáginaunpococompleja. Algunosquehabremosvistoeninnumerablesocasionessoncalendariosdinámicosparaseleccionarfechas, calculadorasoconvertidoresdedivisas,editoresdetextoenriquecido,navegadoresdinámicos,etc. EsmuchomáshabitualencontrarJavascriptpararealizarefectossimplessobrepáginasweb,onotan simples,comopuedensernavegadoresdinámicos,aperturadeventanassecundarias,validaciónde formularios,etc.Nosatrevemosadecirqueestelenguajeesrealmenteútilparaestoscasos,puesestos típicosefectostienenlacomplejidadjustaparaserimplementadosencuestióndeminutossinposibilidadde errores.Sinembargo,apartedeesosunossimplesejemplos,podemosencontrardentrodeInternetmuchas aplicacionesquebasanpartedesufuncionamientoenJavascript,quehacenqueunapáginawebse conviertaenunverdaderoprogramainteractivodegestióndecualquierrecurso.Ejemplosclarossonlas aplicacionesdeofimaticaonline,comoGoogleDocs,OfficeOnlineoGoogleCalendar. http://desarrolloweb.com/manuales/manual-javascript.html

Página 8 de 125

Manual de JavaScript

QuénecesitasparatrabajarconJavascript ParaprogramarenJavascriptnecesitamosbásicamentelomismoqueparadesarrollarpáginaswebcon HTML.UneditordetextosyunnavegadorcompatibleconJavascript.Cualquierordenadormínimamente actualposeedesalidatodolonecesarioparapoderprogramarenJavascrip.Porejemplo,unusuariode Windowsdisponedentrodesuinstalacióntípicadesistemaoperativo,deuneditordetextos,elBlocde notas,ydeunnavegador:InternetExplorer.

Nota:UsuariosquedeseenherramientasmásavanzadaspuedenencontrarenInternetfácilmente programassimilaresenlaseccióndeprogramasparadesarrolladores.

Permitidmeunarecomendaciónconrespectoaleditordetextos.Setratadeque,aunqueelBlocdeNotases suficienteparaempezar,talvezseamuyútilcontarconotrosprogramasquenosofrecenmejores prestacionesalahoradeescribirlaslíneasdecódigo.Estoseditoresavanzadostienenalgunasventajas comoquecoloreanloscódigosdenuestrosscripts,nospermitentrabajarconvariosdocumentos simultáneamente,tienenayudas,etc.EntreotrosqueremosdestacarKomodoEdit,Notepad++o UltraEdit.

Conocimientospreviosrecomendables Lociertoesquenohacefal...