Carrera de Ingeniera en Sistemas, Universidad Nacional de Loja.

Javascript, Jquery
Fernando Adrin Carrin Chamba Loja-Ecuador

Abstract El presente documento contiene una descripcin detallada del lenguaje de programacin javascript y Framework Jquery, adems de las ventajas y utilidad que cada uno de ellos nos ofrecen. ara el desarrollo de este informe se !a le"do varios art"culos destacados, para de esta manera tener una visin clara de lo que cada uno de ellos representa.

caracter+sticas y de las estr ct ras del len% aje #ava* " e desarrollado independiente$ente* p ede interact ar con el c&di%o ,T-L. ./0 1ste len% aje " e inventado por 2rendan 1ic) en la e$presa Netscape Co$$ nications* ! e es la ! e "abric& los pri$eros nave%adores de Internet co$erciales..30 #avaScript es n len% aje interpretado* es decir* ! e no

I.

INTRODUCCIN

re! iere co$pilaci&n* tili'ado principal$ente en p%inas 4eb* con na sinta5is se$ejante a la del len% aje #ava y el len% aje C. Al contrario ! e #ava* #avaScript no es n len% aje

Javascript es un lenguaje de programacin que se puede utilizar para construir sitios Web y para hacerlos ms interactivos, aunque comparte muchas de las caractersticas y de las estructuras del lenguaje Java, este fue desarrollado independientemente, Javascrpit es un lenguaje sencillo, liviana y utiliza poca memoria. j uery es considerado un !rame"or# de Javascript, o ambiente de desarrollo. $o que no es ms que un conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de una manera muy simplificada, j uery nos permite agregar efectos y funcionalidades complejas a nuestro sitio "eb, como por ejemplo% galeras de fotos dinmicas y elegantes, validacin de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra pgina y muchas otras poderosas opciones.

orientado a objetos propia$ente dic)o* ya ! e no dispone de ,erencia* es $s bien n len% aje basado en prototipos* ya ! e las n evas clases se %eneran clonando las clases base 6prototipos7 y e5tendiendo s " ncionalidad..80
$E*)#J#% +E J#$#%&'( ). La caracter+stica principal de

#avascript* de )ec)o* es la de ser n lenguaje de scriptin% por e5celencia. .90 1s n len% aje sencillo $ y liviana* tili'a poca $e$oria* es $ y :til para el desarrollo de pa%inas 4eb din$icas y tiene na %ran cantidad de e"ectos vis ales ade$s de ser li%ero de car%a y co$patible con la %ran $ayoria de los nave%adores $odernos incl yendo i;)one* $oviles y ;S8..<0 #avaScript es na e5celente sol ci&n para poner en prctica la validaci&n de datos de n "or$ lario en el lado del cliente. na de las reas en la ! e sobresale radical$ente #avaScript es en la creaci&n de e"ectos din$icos tales co$o i$%enes din$icas y presentaciones de diapositivas..=0 ,)(-(+#+ cliente>servidor* +E J#$#%&'( ). #avaScript sirve n

II.

ANALISIS

Se describirn el concepto las ventajas y la tilidad ! e nos o"rece tanto #avascript co$o #! ery.

principal$ente para $ejorar la %esti&n de la inter"a' J#$#%&'( ). #avascript es n len% aje de pro%ra$aci&n ! e se p ede tili'ar para constr ir sitios (eb y para )acerlos $s interactivos* a n! e co$parte $ c)as de las n script #avaScript insertado en doc $ento ,T-L per$ite reconocer y tratar local$ente* es decir* en el cliente* los eventos %enerados por el s ario. .?0

Carrera de Ingeniera en Sistemas, Universidad Nacional de Loja.

#avascript es

tili'ado para crear pe! e@os pro%ra$as ! e

c&di%o #avascript se coloca dentro de

no de ,T-L*

l e%o son insertados en na p%ina 4eb y en pro%ra$as $s %randes* orientados a objetos $ c)o $s co$plejos. Con #avascript pode$os crear di"erentes e"ectos e interact ar con n estros s arios. .A0 1l c&di%o #avaScript se p ede encar%ar de crear e"ectos din$icos en resp esta a acciones del s ario* por eje$plo ! e se desplie% e n $en: tipo acorde&n c ando el s ario pasa el rat&n por enci$a de n ele$ento del $en:..B0 #avaScript es n len% aje con na sinta5is $ y si$pleC* Casi todo el $ ndo p ede poner pe! e@os D"ra%$entosD de c&di%o en las p%inas ,T-L* #avaScript se p ede pro%ra$ar para ejec tarse c ando s cede al%o* co$o c ando )a ter$inado de car%ar na p%ina o c ando n s ario )ace clic en n ele$ento ,T-L* o para validar datos. ./E0 EJE. -/% J#$#%&'( ). Los len% ajes Script sirven principal$ente para a@adir contenido din$ico a las p%inas (eb.

encerrndolo entre las eti! etas G scriptHG >scriptH.

Ejemplo 1. Fis ali'a por pantalla el no$bre introd cido por teclado

Ejemplo 0. Fis ali'ar por pantalla n $ensaje de bienvenida a la p%ina (eb. 1n este pri$er eje$plo* si$ple$ente* creare$os n #avascript ! e lo ! e )ar es vis ali'ar n $ensaje de bienvenida c ando el s ario entre a la p%ina (eb. Co$o se p ede apreciar el

Ejemplo 2. 1je$plo ! e pide con"ir$aci&n para visitar na p%ina. La " nci&n confirm vis ali'a na ventana e$er%ente de

con"ir$aci&n 6con el te5to ! e le indi! e$os7 c yas opciones ! e nos da son Aceptar o Cancelar dic)a con"ir$aci&n.

Carrera de Ingeniera en Sistemas, Universidad Nacional de Loja.

J3,E'4. jI ery es contiene " ncionalidades* considerado

n $arco de desarrollo el c al librer+as preJdesarrolladas* es

i$ple$entar de "or$a e"iciente tales co$porta$ientos interactivos* rec perar in"or$aci&n de n servidor sin re"rescar na p%ina../90 ,)(-(+#+ +E J3,E'4. jI ery nos per$ite a%re%ar e"ectos y " ncionalidades co$plejas a n estro sitio 4eb* co$o por eje$ploO %aler+as de "otos din$icas y ele%antes* validaci&n de "or$ larios* calendarios* )acer aparecer y desaparecer ele$entos en n estra p%ina y $ c)as otras poderosas opciones* el soporte es otra de las ra'ones por la c al la tili'aci&n de jI ery en n estros sitios es total$ente reco$endada. ./<0 1sta "antstica librer+a )a tenido na aceptaci&n $ y %rande por los pro%ra$adores* lo ! e )a %enerado ! e $ c)os desarrolladores se dedi! en a la creaci&n de pl %ins o co$ple$entos ! e tili'an jI ery. EJE. -/% J3,E'4. TabContainer Te$a

n Kra$e4orL de #avascript* o a$biente de

desarrollo. Lo ! e no es $s ! e n conj nto de tilidades las c ales no necesitan ser pro%ra$adas* de )ec)o ya " eron pro%ra$adas* probadas y pode$os tili'arlas de na $anera $ y si$pli"icada..//0 Ade$s de proporcionarnos $as c&di%o. jI ery es n prod cto ! e sirve co$o base para la na serie de " ncionalidades

basadas en #avascript ! e de otra $anera re! erir+an de $ c)o

pro%ra$aci&n avan'ada de aplicaciones* ! e aporta na serie de " nciones o c&di%os para reali'ar tareas )abit ales* donde $s nos p ede ay dar* p esto ! e i$ple$enta na serie de clases 6de pro%ra$aci&n orientada a objetos7 ! e nos per$iten pro%ra$ar sin preoc parnos del nave%ador con el ! e nos est visitando el s ario* ya ! e " ncionan de e5acta "or$a en todas las plata"or$as $s )abit ales y ! e per$ite si$pli"icar la $anera de interact ar con los doc $entos ,T-L* $anip lar el rbol DO-* $anejar eventos* desarrollar ani$aciones y a%re%ar interacci&n con la tMcnica A#AN a p%inas 4eb. ./30

$E*)#J#% +E J3,E'4. #! ery nos proporciona ele$entos co$oO botones* barras de )erra$ientas* "or$ larios* listas y tipo%ra"+as especial$ente opti$i'adas y estili'adas para aplicaciones $&viles. Ade$s* c enta con n siste$a de blo! es ideal para constr ir plantillas* ta$biMn nos per$ite constr ir aplicaciones aptas para todo tipo de plata"or$as* es $ y "cil de aprender y tili'ar ade$s de proporcionarnos n soporte para Aja5 y no re! iere del so de pro%ra$as especiales* a di"erencia de otras tecnolo%+as. ./80 #! ery nos per$iteO $odi"icar la apariencia de na p%ina (eb* alterar el contenido de n doc $ento no esta li$itado a $eros ca$bios estMticos* responder a la los eventos de s ario* ani$ar ca$bios reali'ados a n n doc $ento para A Navi%ation -en Ejemplo 0. estilo de ani$aci&n " ndido ! e se ejec ta co$o el s ario nave%a por las "ic)as seleccionadas.

Carrera de Ingeniera en Sistemas, Universidad Nacional de Loja.

Ejemplo 1. Lista sin ordenar con anclas y listas anidadas* ta$biMn $ estra c&$o a%re%ar na lista de se% ndo nivel. #! ery Tabs Tabs>8 UI

"4#

012L'oint(

%a&ascri't(

)ttpO>>444.)t$lpoint.co$>javascript>corso>jsRE3.)t$* Fecha de consulta: 14 de Octubre del 201 ! "3# Club Ensa4os( /entajas 4 5es&entajas de ja&ascri't( )ttpO>>cl bensayos.co$>Te$asJFariados>#AFAJSCRI;TJF1N TA#ASJSJD1SF1NTA#AS>333E==.)t$l* consulta: 14 de Octubre del 201 ! "6# Ca'acit4( )*u7 Es %a&a+cri't , /entajas 4 5es&entajas()ttpO>>blo%.capacityacade$y.co$>3E/3>/E>/B>! Fecha de

Ejemplo 2. si$ple jI ery basado pesta@a de nave%aci&n. III.

eJesJjavascriptJventajasJyJdesventajas>* 14 de Octubre del 201 !

Fecha de consulta:

"8# 9anco de objetos de A'rendi:aje 4 de in$ormacion( )-ara ;ue sir&e %a&a+cri't ,( )ttpO>>aprendeenlinea. dea.ed .co>l$s>ova>$od>reso rce>vie4. p)pQidT/<BB* 201 ! "<# 2aestros del =eb( )*u7 Es %a&a+cri't,( Fecha de consulta: 14 de Octubre del

CONCLUSION1S Una ve' ter$inada el presente trabajo )e concl ido ! eO 1l len% aje de pro%ra$aci&n #avascript es na )erra$ienta ! e nos per$ite la creaci&n de aplicaciones 4eb. #avascript $ejora la %esti&n de la inter"a' cliente servidor. #! ery es n $arco de desarrollo el c al posee " ncionalidades y librer+as preJdesarrolladas. #! ery es $ y :til al $o$ento de a%re%ar e"ectos y " ncionalidades co$plejas a n estro sitio 4eb.

)ttpO>>444.$aestrosdel4eb.co$>editorial> UC3U2K! eJesJjavascript>* Octubre del 201 ! "># A'render a -ro.ramar( )*u7 es 4 'ara ;u7 sir&e %a&a+cri't, Embeber %a&a+cri't en 012L( )ttpO>>444.aprenderapro%ra$ar.co$>inde5.p)pQ optionTco$RcontentVvie4TarticleVidT<BEOi! eJesJyJparaJ! eJsirveJjavascriptJe$beberJjavascriptJenJ)t$lJejercicioJeje$pl oJbasicoJc EE?8/bVcatidT=BOt torialJbasicoJpro%ra$adorJ4e bJ)t$lJdesdeJceroVIte$idT/B3* Octubre del 201 ! Fecha de consulta: 14 de Fecha de consulta: 14 de

IF.

R1K1R1NCIAS

./0 PI M es #avaScriptQ J De"inici&n de #avascript* 1n Linea* )ttpO>>444.$asadelante.co$>"a!s>javascript* Fecha de consulta: 14 de Octubre del 201 ! "2# E$ectos %a&ascri't( )*ue es %a&a+cri't ,( En Linea( )ttpO>>444.e"ectosjavascript.co$>javascript.)t$*l consulta: 14 de Octubre del 201 ! " # l* -er.amino /irtual! %a&ascri't( Fecha de

"10# 2anuales de la =eb( *ue es %a&ascri't( -ara ;ue sir&e( 4 ;ue 'uedo hacer con el( )ttpO>>$an alesdela4eb.co$>a>! eJesJjavascriptJparaJ! eJsirve JyJ! eJp edoJ)acerJconJelJ3E//E//?* 14 de Octubre del 201 ! Fecha de consulta:

)ttpO>>444.per%a$inovirt al.co$.ar>de"inicion>#avaScript.)t$ Fecha de consulta: 14 de Octubre del 201 !

Carrera de Ingeniera en Sistemas, Universidad Nacional de Loja.

"11#

El

9alcon(

)*u7

es

%;uer4,(

)ttpO>>elbalcondejai$e.blo%spot.co$>3EEB>E<>! eJesJj! ery.)t $l* Fecha de consulta: 14 de Octubre del 201 ! "12# %o&en Club( %;uer4(

)ttpO>>% tl.jovencl b.c >4iLi>de"iniciones>j! ery* Fecha de consulta: 14 de Octubre del 201 ! "1 # +oluciones( /entajas 4 des&en4ajas de %;uer4( En Linea()ttpO>>444.9rsol ciones.co$>ventajasJyJdesventajasJdeJ j! eryJ$obile>* Fecha de consulta: 14 de Octubre del 201 ! "14# -alentino( /entajas del uso del %;uer4( En Linea()ttpO>>444.palentino.es>blo%>ventajasJdelJ soJdeJj! ery >* Fecha de consulta: 14 de Octubre del 201 ! "13# -ro.ramacin( )*u7 es 4 -ara ;u7 +ir&e j*uer4,( En Linea( )ttpO>>pro%ra$acionya.co$> , Fecha de UC3U2K! eJesJyJparaJ! eJsirveJj! ery> consulta: 14 de Octubre del 201 !