Qu es JavaScript?

JavaScript -JS- es un eficiente lenguaje de guionizacin desarrollado por la empresa Netscape para el desarrollo de cliente-servidor de Web Si bien en muc!o menos riguroso "ue Java# no !a$ duda "ue JavaScript es un lenguaje completo basado en objetos JavaScript trabaja de la manera siguiente% en el lado del cliente# el navegador interpreta los comandos JavaScript es un lenguaje interpretado . diferencia de JavaScript "ue est&n embebidos de los lenguajes compilados "ue crean cdigo directamente en la p&gina de '()* binario# los lenguajes interpretados se ejecutan 0en e *o anterior significa "ue un guin de instante# comando por comando0 *o anterior JavaScript puede ser ejecutado implica "ue JavaScript es per se m&s simple "ue directamente en la computadora Java para tareas de control de p&ginas de '()* cliente sin necesidad de conectarse de nuevo al servidor +caso contrario a lo "ue se !ace con ,',- .l cambiar la tarea de ejecutar guiones del servidor al cliente# el proceso de a/adir interactividad a la p&gina se vuelve m&s r&pido $ eficiente ,uede incluirse tambin cdigo JavaScript como respuesta a alg9n evento% 3input t$pe50submit0 onclic:50alert+;.cabas de !acer clic:;-<return false<0 value50=lic:04
Click

Dnde y cmo incluir JavaScript

12isten distintos modos de incluir lenguaje JavaScript en una p&gina *a forma mas frecuente de !acerlo es utilizando la directiva 3script4 en un documento '()* +se pueden incluir tantas directivas 3script4 como se "uiera en un documento- 1l formato es el siguiente% 3script language50Javascript 6 704

*os scripts pueden incluirse como comentarios para asegurar "ue su 1l atributo lenguaje !ace referencia a la versin de cdigo no es 0visto0 por JavaScript "ue se va a utilizar en dic!o script 8tro navegadores viejos "ue no reconocen JavaScript $ as> evitar atributo de la directiva script es src# "ue puede usarse para incluir un arc!ivo e2terno "ue contiene errores JavaScript $ "ue "uiere incluirse en el cdigo 3script 4 '()* 1l arc!ivo e2terno simplemente es un

arc!ivo del te2to "ue contiene cdigo JavaScript# $ 3@cu$o nombre acaba con la e2tensin js =digo JavaScript ??--4 3?script4 3script language50JavaScript0 src 50arc!ivo js04 3?script4

Operadores Aritmticos
*os operadores aritmticos toman los valores numricos +literales o variables- como sus operando $ devuelve un solo valor numrico *os operadores aritmticos normales son% Oper. Nombre A G ? Suma Substraccin )ultiplicacin Hivisin Ejemplo Descripcin BAC D-E CG7 I?J Suma dos n9meros Festa dos n9meros )ultiplica dos n9meros Hivide dos n9meros Hevuelve el resto -modulo- de dividir ambos n9meros Suma 6 al contenido de una variable Festa 6 al contenido de una variable Mnvierte el signo de un operando 3!tml4 3!ead4 3title41jemplo de JavaScript3?title4 3?!ead4 3bod$4 3script language50JavaScript04 a 5 J< b 5 7< document Nrite+a A b-< document Nrite+03br40-< document Nrite+a - b-< document Nrite+03br40-< document Nrite+ a G b-< document Nrite+03br40-< document Nrite+a ? b-< document Nrite+03br40-< aAA< document Nrite+a-< document Nrite+03br40-< b--< document Nrite+b-< 3?script4 3?bod$4 3?!tml4 331jecutar el ejemplo44 66 B LI L CCCCCCCCCCCCCCCB E L

)dulo

DKL

AA

Mncremento

aAA

--

Hecremento

a--

Mnvertir signo

-a

Objetos

Ona primera clasificacin del modelo de objetos lo dividir>a en dos grandes grupos ,or una parte# tendr>amos los objetos directamente relacionados con el navegador $ las posibilidades de programacin '()* +denominados# genricamente# objetos del navegador- $ por otra parte un conjunto de objetos relacionados con la estructura del lenguaje# llamados genricamente objetos del lenguaje EL O JE!O S!"#N$% 1ste objeto nos permite !acer diversas manipulaciones con las cadenas# para "ue trabajar con ellas sea m&s sencillo =uando asignamos una cadena a una variable# JS est& creando un objeto de tipo String "ue es el "ue nos permite !acer las manipulaciones &ropiedades% o lengt! Palor numrico "ue nos indica la longitud en caracteres de la cadena dada o protot$pe Nos permite asignar nuevas propiedades al objeto String 'todos% o anc!or+nombre- =rea un enlace asignando al atributo N.)1 el valor de ;nombre; 1ste nombre debe estar entre comillas 0 0 o big+- )uestra la cadena de caracteres con una fuente grande o blin:+- )uestra la cadena de te2to con un efecto intermitente o c!ar.t+indice- Hevuelve el car&cter situado en la posicin especificada por ;indice; o fi2ed+- )uestra la cadena de caracteres con una fuente proporcional o fontcolor+color- =ambia el color con el "ue se muestra la cadena *a variable color debe ser especificada entre comillas% 0 0# o bien siguiendo el estilo de '()*# es decir 0QFFRRSS0 donde FF# RR# SS son los valores en !e2adecimal para los colores rojo# verde $ azul# o bien puede ponerse un identificador v&lido de color entre comillas .lgunos de estos identificadores son 0red0# 0blue0# 0$elloN0# 0purple0# 0dar:gra$0# 0olive0# 0salmon0# 0blac:0# 0N!ite0# o fontsize+tama/o- =ambia el tama/o con el "ue se muestra la cadena *os tama/os v&lidos son de 6 +m&s pe"ue/o- a D +m&s grandeinde28f+cadenaTbuscada#indice- Hevuelve la posicin de la primera ocurrencia de ;cadenaTbuscada; dentro de la cadena actual# a partir de la posicin dada por ;indice; 1ste 9ltimo argumento es opcional $# si se omite# la bus"ueda comienza por el primer car&cter de la cadena o italics+- )uestra la cadena en cursiva o lastMnde28f+cadenaTbuscada#indice- Hevuelve la posicin de la 9ltima ocurrencia de ;cadenaTbuscada; dentro de la cadena actual# a partir de la posicin dada por ;indice;# $ buscando !acia atr&s 1ste 9ltimo argumento es opcional $# si se omite# la bus"ueda comienza por el 9ltimo car&cter de la cadena o lin:+OF*- =onvierte la cadena en un v>nculo asignando al atributo 'F1U el valor de OF* o small+- )uestra la cadena con una fuente pe"ue/a o split+separador- ,arte la cadena en un arra$ de caracteres Si el car&cter separador no se encuentra# devuelve un arra$ con un slo elemento "ue coincide con la cadena original . partir de NS 7# M1 I +JS 6 Lo stri:e+- )uestra la cadena de caracteres tac!ada

o o

o o o

sub+- )uestra la cadena con formato de sub>ndice substring+primerTMndice#segundoTMndice- Hevuelve la subcadena "ue comienza en la posicin ;primerTMndice A 6; $ "ue finaliza en la posicin ;segundoTMndice; Si ;primerTMndice; es ma$or "ue ;segundoTMndice;# empieza por ;segundoTMndice A 6; $ termina en ;primerTMndice; Si !acemos las cuentas a partir de V# entonces es la cadena "ue comienza en ;primerTMndice; $ termina en ;segundoTMndice - 6; +o bien ;segundoTMndice; $ ;primerTMndice - 6; si el primero es ma$or "ue el segundosup+- )uestra la cadena con formato de super>ndice to*oNer=ase+- Hevuelve la cadena en min9sculas toOpper=ase+- Hevuelve la cadena en min9sculas

Jerar(u)a
1n esta parte del curso se describir&n las propiedades $ los mtodos de los objetos del navegador Mnicialmente !a$ "ue mencionar la jerar"u>a "ue presentan los objetos del navegador# atendiendo a una relacin 0contenedor - contenido0 "ue se da entre estos objetos He forma es"uem&tica# esta jerar"u>a podemos representarla de esta manera +al lado est& la directiva '()* con "ue se inclu$en en el documento objetos de este tipo# cuando e2ista esta directiva-% * window Seg9n esta jerar"u>a# podemos entender el objeto area + history como un objeto dentro del objeto document "ue a su vez + location est& dentro del objeto NindoN 'a$ "ue decir "ue la + document notacin ; ; tambin se usa para denotar a un objeto "ue <BODY> ... </BODY> - anchor <A est& dentro de un objeto
NAM !"..."> ... </A> - a##let <A$$% &> ... </A$$% &> - area <MA$> ... </MA$> - 'orm <(O)M> ... </(O)M> + *utton <+N$,& &Y$ !"*utton"> + chec-*o. <+N$,& &Y$ !"chec-*o."> + 'ile,#load <+N$,& &Y$ !"'ile"> + hidden <+N$,& &Y$ !"hidden"> + #assword <+N$,& &Y$ !"#assword"> + radio <+N$,& &Y$ !"radio"> + reset <+N$,& &Y$ !"reset"> + select </ % 0&> ... <// % 0&> - o#tions <+N$,& &Y$ !"o#tion"> + su*mit <+N$,& &Y$ !"su*mit"> + te.t

,or ejemplo# si "ueremos !acer referencia a una caja de te2to# tendremos "ue escribir ventana documento formulario cajaTdeTte2to donde ventana es el nombre del objeto NindoN# documento es el nombre del objeto document# formulario es el nombre del objeto forms +veremos "ue forms es un arra$- $ cajaTdeTte2to es el nombre del objeto te2tarea (ambin podemos utilizar la notacin de arra$ para referirnos a alg9n objeto# por ejemplo# cuando los objetos a usar no tienen nombre# como en este caso% document formsWVX elementsW6X< !ace referencia al segundo elemento del primer formulario del documento< este elemento ser& el segundo "ue se !a$a creado en la p&gina '()*

<+N$,& &Y$ !"te.t"> + te.tarea <& 1&A) A> ... </& 1&A) A> - ima2e <+M3 /)0!"..."> - lin<A 4) (!"..."> ... </A> - #lu2in < MB D /)0!"..."> + 'rame <()AM > * na5i2ator

*ormularios
1n esta seccin finalizamos el estudio de los objetos del navegador viendo cmo manipular formularios 1ste punto es especialmente importante% si aprendemos correctamente a manipular todos los objetos de un formulario# podremos !acer funciones "ue nos permitan validarlo antes de enviar estos datos a un servidor# a!orr&ndole la faena de tener "ue verificar la correccin de los datos enviados

8SJ1(8 U8F)% Este objeto es el contenedor de todos los elementos del +ormulario. ,omo ya vimos al tratar el objeto document- los +ormularios se agrupan en un array dentro de document. ,ada elemento de este array es un objeto de tipo +orm.
Propiedades

action 1s una cadena "ue contiene la OF* del par&metro .=(M8N del form# es decir# la direccin en la "ue los datos del formulario ser&n procesados elements 1s un arra$ "ue contiene todos los elementos del formulario# en el mismo orden en el "ue se definen en el documento '()* ,or ejemplo# si en el formulario !emos puesto# en este orden# una caja de te2to# un c!ec:bo2 $ una lista de seleccin# la caja de te2to ser& elementsWVX# el c!ec:bo2 ser& elementsW6X $ la lista de seleccin ser& elementsWLX encoding 1s una cadena "ue tiene la codificacin mime especificada en el par&metro 1N=(Y,1 del form met!od 1s una cadena "ue tiene el nombre del mtodo con el "ue se va a recibir?procesar la informacin del formulario +R1(?,8S(-

Mtodos

reset+- Fesetea el formulario% tiene el mismo efecto "ue si puls&ramos un botn de tipo F1S1( dispuesto en el form submit+- 1nv>a el formulario% tiene el mismo efecto "ue si puls&ramos un botn de tipo SOS)M( dispuesto en el form