Primeros Pasos (Tutorial de Javascript)

Por qu JavaScript?
JavaScript es un lenguaje de programacin poderoso, complicado y recuentemente mal entendido!
Permite el desarrollo "cil de aplicaciones en las que los usuarios pueden introducir datos y ver los
resultados con acilidad!
#a ventaja principal de JavaScript, tam$in conocido como %&'(Script, gira entorno al
)avegador *e$, ya que tiene la +a$ilidad de producir los mismos resultados en todas las
plataormas soportadas por el navegador! Por eso es altamente recomenda$le que, previamente,
poseas conocimientos suicientes de ,T'#! #os ejemplos de esta p"gina, justo igual que -oogle
'aps, uncionan en #inu., *indo/s y 'ac 0S! &on el creciente n1mero de li$rer2as JavaScript
a+ora es m"s sencillo navegar por un documento, seleccionar elementos del 30', crear
animaciones, gestionar eventos y desarrollar aplicaciones (ja.! ( dierencia de la moda alrededor
de otras tecnolog2as promovidas por dierentes intereses propietarios, JavaScript es el 1nico
lenguaje de programacin cliente multiplataorma que es li$re y tiene una adopcin universal!
4u de$er2as sa$er
JavaScript es un lenguaje de programacin con el que empe5ar a programar muy "cilemente! Todo
lo que necesitas para empe5ar es un editor de te.to (como el notepad66) y un )avegador *e$!
,ay muc+as otras tecnolog2as que pueden integrarse y desarrollarse conjuntamente con JavaScript
que est"n m"s all" del alcance de este documento! 7)o esperes +acer una aplicacin entera como
-oogle 'aps en tu primer d2a8
Primeros pasos
&omen5ar en JavaScript es muy "cil! )o necesitas instalar ning1n sot/are de desarrollo complejo!
)o necesitas sa$er el uso de la consola, ni el programa 'a9e o usar un compilador! Javascript es un
lenguaje interpretado por tu navegador /e$!
JavaScript es un gran lenguaje de programacin para iniciarse en el mundo de la programacin!
Permite una respuesta instant"nea con los nuevos estudiantes y ense:a so$re +erramientas que son
utili5adas en la vida real! %sto +ace un gran contraste con &, &66 y Java los cuales son utili5ados
solamente por desarrolladores de sot/are muy dedicados y especiali5ados!
Pro$lemas de compati$ilidad entre navegadores
,ay variaciones entre las uncionalidades que est"n disponi$les en dierentes navegadores! 'o5illa,
'icrosot ;%, (pple Saari y 0pera luctuan su comportamiento! Tratamos de documentar estas
variaciones! Puedes mitigar estos temas usando varias (P;s en JavaScript para plataormas cru5adas
que est"n disponi$les! %stas (P;s proveen una uncionalidad com1n y te ocultan estas luctuaciones
entre navegadores para acilitarte la tarea!
&mo pro$ar los ejemplos
#os ejemplos de m"s a$ajo tienen cdigos de muestra! ,ay muc+as maneras de pro$ar estos
ejemplos! Si ya tienes ti propio sitio /e$ slo de$er2as poder guardar estos ejemplos como nuevas
p"ginas /e$ en tu sitio!
Si no lo tienes, puedes guardar estos ejemplos como arc+ivos en tu computadora y a$rirlos con el
navegador que ests usando! JavaScript es un lenguaje muy "cil de usar para programadores
principiantes! )o necesitas un compilador o un entorno de desarrollo! Todo lo que necesitas para
comen5ar es el $loc9 de notas y tu navegador!
%jemplo< ;nterceptando un clic de ratn
#as especiicaciones del manejo de eventos (tipos de eventos, registracin del evento, propagacin,
etc!) son muy e.tensas para ser cu$iertas completamentepor este simple ejemplo! Sin em$argo, este
ejemplo no puede demostrar la captura de un clic9 del ratn sin proundi5ar un poco en el sistema
de eventos de JavaScript! Solo ten en mente que este ejemplo evitar" detalles so$re los eventos de
JavaScript y si deseas ir m"s all" de lo descripto aqu2, lee m"s acerca del sistema de eventos de
JavaScript!
#os eventos del ='ouse= son un su$grupo del total de eventos tratados por un navegador *e$ en
respuesta a las acciones del usuario! #a siguiente es una lista de eventos emitidos en respuesta a la
accin del mouse del usuario<
&lic9 > ocurre cuando un usuario +ace clic9 con el mouse
3$l&lic9 > ocurre cuando un usuario +ace dou$le>clic9 con el mouse
'ouse3o/n > ocurre cuando un usuario $aja un $otn del mouse (la primera mitad de un clic9)
'ouse?p > ocurre cuando un usuario levanta un $otn del mouse (la segunda mitad de un clic9)
'ouse0ut > ocurre cuando el cursor del mouse a$andona los l2mites gr"icos de un o$jeto
'ouse0ver > ocurre cuando el cursor del mouse ingresa en los l2mites gr"icos de un o$jeto
'ouse'ove > ocurre cuando el cursor del mouse se mueve dentro de los l2mites gr"icos de un
o$jeto
&onte.t'enu > ocurre cuando un usuario +ace clic9 con el $otn derec+o del mouse
0$serva que en las 1timas versiones de ,T'#, se espera que los manejadores de eventos en linea
(por ejemplo, los agregados como atri$utos de etiquetas) estn todos en minuscula y que los
manejadores de eventos de los scripts estn siempre todos en min1sculas!
%l mtodo m"s simple para capturar estos eventos para registrar los manejadores de eventos (usando
,T'#) es especiicar los elementos individuales como atri$utos para tu elemento! Por ejemplo<
@span onclic9ABalert(=7,ola 'undo8=)CBD&lic9 aqu2@EspanD
%l cdigo JavaScript que deseas ejecutar puede estar alineado como valor del atri$uto o puedes
llamar a una uncin que +ayas deinido en un $loque @scriptD dentro de la p"gina ,T'#<
@script typeABte.tEjavascriptBD
unction clic9,andler () F
alert (B7,ola, 'undo8B)C
G
@EscriptD
@span onclic9ABclic9,andler()CBD&lic9 aqu2@EspanD
(dditionally, t+e event o$ject /+ic+ is issued can $e captured and reerenced, providing t+e
developer /it+ access to speciics a$out t+e event suc+ as /+ic+ o$ject received t+e event, t+e
event=s type, and /+ic+ mouse $utton /as clic9ed! ?sing t+e inline e.ample again<
@script typeABte.tEjavascriptBD
unction clic9,andler(event) F
var eType A event!typeC
EH t+e ollo/ing is or compati$ility HE
EH 'o5 populates t+e target property o t+e event o$ject HE
EH ;% populates t+e src%lement property HE
var eTarget A event!target II event!src%lementC
alert( B&aptured %vent (typeAB 6 eType 6 B, targetAB 6 eTarget )C
G
@EscriptD
@span onclic9ABclic9,andler(event)CBD&lic9 ,ere@EspanD
;n addition to registering to receive events in your ,T'#, you can li9e/ise set t+e same attri$utes
o any ,T'#%lement o$jects generated $y your JavaScript! T+e e.ample $elo/ instantiates a span
o$ject, appends it to t+e page $ody, and registers t+e span o$ject to receive mouse>over, mouse>out,
mouse>do/n, and mouse>up events!
@$odyD@E$odyD
@script typeABte.tEjavascriptBD
unction mouseevent,andler(event) F
EH T+e ollo/ing is or compati$ility HE
EH ;% does )0T $y deault pass t+e event o$ject HE
EH o$tain a re to t+e event i one /as not given HE
i (8event) event A /indo/!eventC
EH o$tain event type and target as earlier HE
var eType A event!typeC
var eTarget A event!target II event!src%lementC
alert(eType 6= event on element /it+ id< =6 eTarget!id)C
G
unction onload,andler () F
EH o$tain a re to t+e =$ody= element o t+e page HE
var $ody A document!$odyC
EH create a span element to $e clic9ed HE
var span A document!create%lement(=span=)C
span!id A =%.ampleSpan=C
span!append&+ild(document!createTe.t)ode (=&lic9 ,ere8=))C
EH register t+e span o$ject to receive speciic mouse events >
notice t+e lo/ercase o t+e events $ut t+e ree c+oice in t+e names o t+e +andlers you replace
t+em /it+!
HE
span!onmousedo/n A mouseevent,andlerC
span!onmouseup A mouseevent,andlerC
span!onmouseover A mouseevent,andlerC
span!onmouseout A mouseevent,andlerC
EH display t+e span on t+e page HE
$ody!append&+ild(span)C
G
/indo/!onload A onload,andlerC EE since /e replace t+e +andler, /e do )0T +ave () ater t+e
unction name
@EscriptD
%jemplo< ;nterceptando un evento de teclado
Similar to t+e B&atc+ing a mouse eventB e.ample a$ove, catc+ing a 9ey$oard event relies on
e.ploring t+e JavaScript event system! Jey$oard events are ired /+enever any 9ey is used on t+e
9ey$oard!
T+e list o availa$le 9ey$oard events emitted in response to a 9ey$oard action is considera$ly
smaller t+an t+ose availa$le or mouse<
JeyPress > issued /+en a 9ey is depressed and released
Jey3o/n > issued /+en a 9ey is depressed $ut +asn=t yet $een released
Jey?p > issued /+en a 9ey is released
Te.t;nput (availa$le in *e$9it $ro/sers only at time o /riting) > issued /+en te.t is input eit+er $y
pasting, spea9ing, or 9ey$oard! T+is event /ill not $e covered in t+is article!
;n a 9eypress event, t+e ?nicode value o t+e 9ey pressed is stored in eit+er t+e 9ey&ode or
c+ar&ode property, never $ot+! ; t+e 9ey pressed generates a c+aracter (e!g!, =a=), c+ar&ode is set to
t+e code o t+at c+aracter, respecting t+e letter case (i!e!, c+ar&ode ta9es into account /+et+er t+e
s+it 9ey is +eld do/n)! 0t+er/ise, t+e code o t+e pressed 9ey is stored in 9ey&ode!
T+e simplest met+od or capturing 9ey$oard events is again to register event +andlers /it+in t+e
,T'#, speciying t+e individual events as attri$utes or your element! %.ample<
@input typeABte.tB on9eypressABalert (=,ello *orld8=)CB ED
(s /it+ mouse events, t+e JavaScript code you /is+ to e.ecute can $e inlined as t+e attri$ute value
or you can call a unction /+ic+ +as $een deined in a @scriptD $loc9 /it+in t+e ,T'# page<
@script typeABte.tEjavascriptBD
unction 9eypress,andler() F
alert (B,ello, *orld8B)C
G
@EscriptD
@input on9eypressAB9eypress,andler()CB ED
&apturing t+e event and reerencing t+e target (i!e!, t+e actual 9ey t+at /as pressed) is ac+ieved in a
similar /ay to mouse events<
@script typeABte.tEjavascriptBD
unction 9eypress,andler(evt) F
var eType A evt!typeC EE *ill return B9eypressB as t+e event type
EH +ere /e again need to use a cross $ro/ser met+od
mo5illa $ased $ro/sers return /+ic+ and ot+ers 9ey&ode!
T+e &onditional operator or ternary is a good c+oice HE
var 9ey&ode A evt!/+ic+?evt!/+ic+<evt!9ey&odeC
var e&ode A =9ey&ode is = 6 9ey&odeC
var e&+ar A =c+ar&ode is = 6 String!rom&+ar&ode(9ey&ode)C EE or evt!c+ar&ode
alert (B&aptured %vent (typeAB 6 eType 6 B, 9ey ?nicode valueAB 6 e&ode 6 B, (S&;; valueAB 6
e&+ar 6 B)B)C
G
@EscriptD
@input on9eypressAB9eypress,andler(event)CB ED
&apturing any 9ey event rom t+e page can $e done $y registering t+e event at t+e document level
and +andling it in a unction<
@script typeABte.tEjavascriptBD
document!on9eypress A 9eypress,andler(event)C
document!on9eydo/n A 9eypress,andle(event)C
document!on9eyup A9eypress,andle(event)

@EscriptD
,ere is a complete e.ample t+at s+o/s 9ey event +andling<
@830&TKP% +tmlD
@+tmlD
@+eadD
@scriptD
var meta&+ar A alseC
var e.ampleJey A LMC
unction 9ey%vent(event) F
var 9ey A event!9ey&ode II event!/+ic+C EE alternative to ternary > i t+ere is no 9ey&ode, use
/+ic+
var 9eyc+ar A String!rom&+ar&ode(9ey)C
i (9eyAAe.ampleJey) F meta&+ar A trueC G
i (9ey8Ae.ampleJey) F
i (meta&+ar) F
alert(B&om$ination o metaJey 6 B 6 9eyc+ar)
meta&+ar A alseC
G else F alert(BJey pressed B 6 9ey)C G
G
G
unction metaJey?p (event) F
var 9ey A event!9ey&ode II event!/+ic+C
i (9eyAAe.ampleJey) F meta&+ar A alseC G
G
@EscriptD
@E+eadD
@$ody on9eydo/nAB9ey%vent(event)B on9eyupABmetaJey?p(event)BD
Try pressing any 9ey8
@E$odyD
@E+tmlD
Nro/ser $ugs and quir9s
T+e t/o properties made availa$le t+roug+ t+e 9ey events are 9ey&ode and c+ar&ode! ;n simple
terms, 9ey&ode reers to t+e actual 9ey$oard 9ey t+at /as pressed $y t+e user, /+ile c+ar&ode is
intended to return t+at 9ey=s (S&;; value! T+ese t/o values may not necessarily $e t+e sameC or
instance, a lo/er case =a= and an upper case =(= +ave t+e same 9ey&ode, $ecause t+e user presses t+e
same 9ey, $ut a dierent c+ar&ode $ecause t+e resulting c+aracter is dierent!
T+e /ay in /+ic+ $ro/sers interpret t+e c+ar&ode is not a consistently>applied process! Oor
e.ample, ;nternet %.plorer and 0pera do not support c+ar&ode! ,o/ever, t+ey give t+e c+aracter
inormation in 9ey&ode, $ut only on9eypress! 0n9eydo/n and on9eyup 9ey&ode contain 9ey
inormation! Oireo. uses a dierent /ord, B/+ic+B, to distinguis+ t+e c+aracter!
Peer to t+e 'o5illa 3ocumentation on Jey$oard %vents or a urt+er treatment o 9ey$oard events!
Norrador
%sta p"gina no est" completa!
%jemplo< (rrastrando im"genes
T+e ollo/ing e.ample allo/s moving t+e image o Oireo. around t+e page<
@830&TKP% +tmlD
@+tmlD
@+eadD
@style typeA=te.tEcss=D
img F position< a$soluteC G
@EstyleD
@script typeA=te.tEjavascript=D
/indo/!onload A unction() F
mov'e;d A document!get%lementNy;d(B;mg'ovB)C
mov'e;d!style!top A BQRp.BC
mov'e;d!style!let A BQRp.BC
document!onmousedo/n A coordinatesC
document!onmouseup A mouseupC
unction coordinates(e) F
i (e AA null) F e A /indo/!eventCG

EE e!src%lement +olds t+e target element in ;%, /+ereas e!target +olds t+e target element in Oireo.
EE Not+ properties return t+e ,T'# element t+e event too9 place on!
var sender A (typeo( /indo/!event ) 8A BundeinedB ) ? e!src%lement < e!targetC
i (sender!idAAB;mg'ovB) F
mouseover A trueC
plet A parse;nt(mov'e;d!style!let)C
ptop A parse;nt(mov'e;d!style!top)C
.coor A e!clientSC
ycoor A e!clientKC
document!onmousemove A move;mageC
return alseC
G else F
return alseC
G
G
unction move;mage(e) F
i (e AA null) F e A /indo/!eventC G
mov'e;d!style!let A plet6e!clientS>.coor6Bp.BC
mov'e;d!style!top A ptop6e!clientK>ycoor6Bp.BC
return alseC
G
unction mouseup(e) F
document!onmousemove A nullC
G
G
@EscriptD
@E+eadD
@$odyD
@img idAB;mg'ovB srcAB+ttp<EEplace+old!itELRR.LRRTte.tAJSB /idt+ABMUB +eig+tABMUB ED
@pD3rag and drop around t+e image in t+is page!@EpD
@E$odyD
@E+tmlD
%jemplo< Pedimensionando cosas
%.ample o resi5ing an image (t+e actual image is not resi5ed, only t+e image=s rendering!)
@830&TKP% +tmlD
@+tmlD
@+eadD
@styleD
Vresi5e;mage F
margin>let< LRRp.C
G
@EstyleD
@scriptD
/indo/!onload A unction() F
var resi5e;d A document!get%lementNy;d(Bresi5e;mageB)C
var resi5eStart&oordsS,
resi5eStart&oordsK,
resi5e%nd&oordsS,
resi5e%nd&oordsKC
var resi5e%nd&oordsC
var resi5ing A alseC
document!onmousedo/n A coordinates'ousedo/nC
document!onmouseup A coordinates'ouseupC
unction coordinates'ousedo/n(e) F
i (e AA null) F
e A /indo/!eventC
G
var element A (typeo( /indo/!event ) 8A =undeined= ) ? e!src%lement < e!targetC
i (element!id AA Bresi5e;mageB) F
resi5ing A trueC
resi5eStart&oordsS A e!clientSC
resi5eStart&oordsK A e!clientKC
G
return alseC
G
unction coordinates'ouseup(e) F
i (e AA null) F
e A /indo/!eventC
G
i (resi5ing AAA true) F
var current;mage*idt+ A parse;nt(resi5e;d!/idt+)C
var current;mage,eig+t A parse;nt(resi5e;d!+eig+t)C
resi5e%nd&oordsS A e!clientSC
resi5e%nd&oordsK A e!clientKC
resi5e;d!style!+eig+t A current;mage,eig+t > (resi5eStart&oordsK > resi5e%nd&oordsK) 6
=p.=C
resi5e;d!style!/idt+ A current;mage*idt+ > (resi5eStart&oordsS > resi5e%nd&oordsS) 6 =p.=C
resi5ing A alseC
G
return alseC
G
G
@EscriptD
@E+eadD
@$odyD
@img idABresi5e;mageB
srcAB+ttp<EEupload!/i9imedia!orgE/i9ipediaEcommonsEeEeWE'o5illaXOireo.XY!ZXlogoX[ZM!pngB
/idt+ABMUB +eig+tABMUB ED
@pD&lic9 on t+e image and drag or resi5ing!@EpD
@E$odyD
@E+tmlD