Js PDF

Diseo de Aplicaciones Web:
JavaScript
p
Marzo de 2015
Diseo de Aplicaciones Web
JavaScript
Caractersticas
JavaScript es un lenguaje de programacin
interpretado.
interpretado
El cdigo est empotrado en la pgina HTML
Permite la generacin de pginas dinmicas
Se ppuede utilizar tanto en el servidor como en el
cliente
Marzo de 2015
JavaScript
Modo de funcionamiento
Se pide la pgina HTML.
El servidor enva la pgina.
pgina En esta pgina est
incluido tanto el cdigo HTML como el cdigo
JavaScript.
JavaScript
Se lee la pgina y se visualiza el cdigo HTML.
Se ejecuta
j
ell programa JavaScript
i (si
( i procede).
d )
Marzo de 2015
JavaScript
Ejemplo
<HEAD>
<TITLE>Programa 1 JSCRIPT</TITLE>
</HEAD>
<HTML>
<BODY BGCOLOR=#FFF090>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hola a todos. Este
es el resultado ");
document.write("de un programa tonto
con JavaScript");
</SCRIPT>
</BODY>
</HTML>
Marzo de 2015
JavaScript
Resultado
Marzo de 2015
JavaScript
Eventos
Las sentencias JavaScript se utilizan para atender
eventos
eve
os que el
e usuario
usua o provoca
p ovoca en
e los
os elementos
e e e os de una
u a
pgina.
Marzo de 2015
JavaScript
Estructura de un documento (I)

Etiqueta: <SCRIPT>
<SCRIPT LANGUAGE=lang SRC=ubicacin>
Cdigo JavaScript
</SCRIPT>
La etiqueta SCRIPT puede aparecer tanto en la cabecera

como en el cuerpo del documento.
LANGUAGE: Lenguaje en el que est escrito el script.
JavaScript(xx):
J v Sc p ( ): Indica
d c que el
e lenguaje
e gu je utilizado
u
do es JavaScript.
J v Sc p .
Si aparece la versin indica que es obligatorio que el
navegador soporte dicha versin
Marzo de 2015
JavaScript
Estructura de un documento (II)

SRC:Especifica un fichero que contiene el programa o
ag e o de programa.
p og a a. Utilizando
U
a do esta
es a opcin
opc se
fragmento
pueden escribir libreras.
Cdigo JavaScript:
Lenguaje sensible a las maysculas. camion != Camion
Admite comentarios: //Comentario de una sola lnea o de
/* Varias
Lneas */
Sentencia: Separadas por ;
{ y } delimitan un bloque.
Marzo de 2015
JavaScript
Funciones bsicas
document.write(texto):
Escribe un texto en el
documento
docu
e o html
alert(string): Muestra una ventana de texto con el
parmetro que se pasa.
pasa
texto=prompt(mostrado, valor_def): Muestra una
ventana
entana de texto
te to imprimiendo el primer parmetro y
pide que se introduzca un texto.
Marzo de 2015
JavaScript
Conversin de tipos
Qu ocurre cuando queremos leer un valor de la
co so a?
consola?
La operacin de las variables depende de su tipo.
Consideraciones acerca de las operaciones recogidas en
la documentacin.
parseInt(string,
I t( t i
b
base)
)
parseFloat(string)
Marzo de 2015
10
JavaScript
Objetos del Navegador
Marzo de 2015
11
JavaScript
Objetos del Navegador:

Consideraciones
Los objetos de tipo array (forms) se pueden
referenciar
f
i de
d dos
d formas:
f
document.forms[formulario1]
document.formulario1
Todos los objetos de tipo array tienen la propiedad

length: document.forms.length
El objeto
j window no es necesario nombrarlo. Por
defecto el navegador lo antepone.
Marzo de 2015
12
JavaScript
Navigator
Contiene informacin relativa al navegador. Es independiente
del resto de los objetos.
Mtodos:
javaEnabled(): Devuelve un valor booleano. Indica si el
navegador
d admite
d i Java.
J
Marzo de 2015
13
JavaScript
Window (Propiedades)
closed: booleano que
indica si la ventana se ha
cerrado
defaultStatus y status:
cadena de caracteres en la
barra inferior.
length: Nmero de
marcos.
name:
opener: referencia a la
ventana que la abri
Marzo de 2015
self, window: alternativos

parent:
t Referencia
R f
i all
window que contiene el
conjunto de marcos.
marcos
frames: array que
contiene cada uno de los
marcos de la pgina
history:
y Arrayy qque
contiene los URLs
visitados con anterioridad
14
JavaScript
Window (Mtodos)
close(): cierra la ventana.
focus()
f
() y blur():
bl () pone y
elimina el foco.
alert,
alert prompt y confirm
moveTo, moveBy(x,y):
mueve la ventana.
ventana
resizeTo, resizeBy(x,y):
Cambia el tamao de la
ventana. Vase ejemplo.
Marzo de 2015
setTimeout(expresion,
ms): Aplaza la evaluacin
de la expresin ms
milisegundos.
g
Devuelve un identificador
de timer.
clearTimeout(id):
Cancela el temporizador.
open(url,nombre,opts):
Abre una nueva ventana.
15
JavaScript
Mtodo open: opciones

directories={yes,no}:
Barra personal de enlaces.
enlaces
location ={yes,no}: Texto
que contiene URL
menubar ={yes,no}:
Barra de mens.
resizable ={yes,no}:
Posibilidad de cambiar el
tamao de la ventana.
scrollbars ={yes,no}:
Contiene barras de scroll.
Marzo de 2015
status={yes,no}: Contiene
el rea de estado.
estado
toolbar={yes,no}:
Contiene la barra de
herramientas.
width
width=npixels,
npixels, height
=npixels: Anchura y
altura.
top=npixels, left=
npixels: Origen de la
ventana
16
JavaScript
Location
Contiene informacin
relativa a la URL.
URL
host: Nombre del host +
puerto
puerto.
hostname: Nombre del
host.
pathname: Nombre del
documento
port: Nmero del puerto
p
protocol:
Marzo de 2015
href: URL completa

Mtodos
reload()
replace(url):
Reemplaza la historia
con el documento que
se pasa.
17
JavaScript
Document: Propiedades
Contiene informacin
relativa al documento.
documento
alinkColor, vlinkColor
linkColor: Colores de los
enlaces.
bgColor, fgColor: Color
de fondo y de texto.
anchors,, applets,
pp , links,,
images, forms : Arrays
location: URL del
documento.
Marzo de 2015
cookies: Cadena de
caracteres que contiene las
cookies.
referrer: URL desde la
que se referenci el
documento.
docu
e o.
title:Ttulo del documento
18
JavaScript
Document: Mtodos
clear(): Limpia la ventana

close():
l () Cierra
Ci
ell documento.
d
open(mime,str): Abre el documento para escritura.
write y writeln: Escribe
ib sobre
b ell documento.
d
Marzo de 2015
19
JavaScript
Link
Es el objeto contenido en
cada elemento de
document.links.
host: Nombre y puerto del
host.
hostname: Nombre del
host.
p
pathname: Camino de la
pgina
port: Nmero de puerto.
Marzo de 2015
protocol: protocolo
target: ventana
destino.
href: Contiene el
nombre de la URL
completa.
link htm
Ejemplo: link.htm
20
JavaScript
Anchor
Es el objeto contenido en
cada elemento de
document.anchors.
text: Texto asociado al
anchor
name: Nombre del
anchor.
target:
g Ventana destino.
Marzo de 2015
href: Contiene el
nombre
b dde lla URL
completa. Slo en IE.
Ejemplo: Anchor.html
21
JavaScript
Image
Objeto que contiene los
parmetros de una imagen.
imagen
border: Valor entero que
contiene el ancho del
borde.
complete: Indica si la
imagen se ha cargado
completamente.
height, width: Altura y
anchura.
Marzo de 2015
hspace, vspace: Valores

h
hspace
y vspace.
src: URL que contiene la
imagen
name: Campo name. Se
utiliza para hacer
referencia al objeto.
El conjunto de atributos es
muy dependiente del
navegador.
22
JavaScript
Form
Objeto que contiene los
parmetros de un
formulario.
action:
encoding: Contiene el
campo ENCTYPE.
method: GET o POST.
target: Especifica el
nombre de la ventana que
contiene la salida del
formulario.
Marzo de 2015
elements: Conjunto de
objetos
bj t que contiene
ti
ell
formulario.
Vase las secciones
siguientes.
name:
e: Campo
Ca po name.
a e. Se
utiliza para hacer
referencia al objeto.
Mtodos: reset() y
submit()
23
JavaScript
Text Textarea password y Hidden

name: Se utiliza para
hacer referencia al objeto.
objeto
value: Valor introducido
en la caja de texto.
texto
defaultValue: Valor por
defecto.
size o cols: Tamao en
horizontal.
rows:Tamao en vertical.
Marzo de 2015
Mtodos:
bl
blur():
() Quita
Q it ell foco
f
focus() Pone el foco
select(): Selecciona el texto
que aparece en la caja
24
JavaScript
Button, Submit y Reset

objeto
value: Valor contenido en
la caja.
caja
defaultValue: Valor por
defecto.
Marzo de 2015
Mtodos:
click():
li k() Simula
Si l la
l accin
i de
d
pulsar el botn.
25
JavaScript
Checkbox y Radio
objeto
checked: Booleano.
Indica si est seleccionado
defaultChecked:
Booleano. Indica si est
seleccionado por defecto.
value: Slo vlido para
p
radio. Contiene el texto
que aparece junto a la caja
Marzo de 2015
length: Slo vlido para

radio Nmero de botones
radio.
Mtodos:
click(): Simula la accin de
pulsar el botn.
26
JavaScript
Select
objeto
length: Nmero de
opciones en la seleccin
selectedIndex: ndice de
la opcin seleccionada.
Solo en IE
options:
p
Conjunto
j
de
opciones:
Marzo de 2015
defaultSelected: Booleano.
Indica si la opcin est
seleccionada por defecto.
selected: Booleano. Indica
sii est
t seleecionado.
l i d
index: ndice que ocupa en
el vector
text: Texto de la caja
value: Campo value
27
JavaScript
JavaScript: Modelo de Eventos
Marzo de 2015
28
JavaScript
Eventos
Hasta este punto se han realizado pginas
estticas.
No se toma ninguna decisin respecto a las
acciones del usuario.
Evento: Suceso externo a la
l hoja
h j HTML
que requiere la intervencin de un
fragmento de cdigo JavaScript.
Marzo de 2015
29
JavaScript
Eventos: Ejemplo
<HTML><HEAD><TITLE>onLoad</TITLE>
<SCRIPT>
function fincarga()
{
alert("La
l t("L hoja
h j ha
h t
terminado\nde
i d \ d cargarse");
")
}
</SCRIPT></HEAD>
<BODY BGCOLOR="#FFFF90 onLoad="fincarga();">
<CENTER>
Primera prueba con eventos:<BR> Evento
<tt>onLoad</tt>
</CENTER>
</BODY></HTML>
Marzo de 2015
30
JavaScript
Eventos: onLoad y onUnload

Se produce cuando se carga/abandona una pgina.
Atributo de una etiqueta: BODY, FRAMESET:
<BODY onLoad="sentencia Jscript
onUnload="sentencia JScript >
Marzo de 2015
31
JavaScript
Eventos: onClick
Se produce cuando se pulsa el botn del ratn.
Atributo de una etiqueta: HREF, INPUT:
<A HREF="enlace" onClick="sentencia
JScript">
<INPUT TYPE="tipoentrada onClick=
"sentencia JScript">
<SELECT onClick="sentencia JScript">
(Slo en Explorer)
(
p
)
Marzo de 2015
32
JavaScript
Eventos: onMouseOver y onMouseOut

Se producen cuando se entra/abandona el rea de
seleccin
l i de
d un enlace.
l
Atributo de una etiqueta HREF:
<A HREF="enlace" onMouseOver="sentencia
JScript onMouseOut="sent. Jscript>
Marzo de 2015
33
JavaScript
Eventos: onReset y onSubmit

Se producen cuando se pulsa el botn de
R
Reset/Envo
/E en un formulario.
f
l i
Atributo de una etiqueta FORM:
<FORM onReset="sentencia JScript
onSubmit="sentencia JScript>
Es importante que devuelva un valor booleano.
Marzo de 2015
34
JavaScript
Eventos: onFocus y onBlur

Se producen cuando se pone/elimina el cursor en un
elemento
l
de
d un formulario.
f
l i
Atributo de una etiqueta INPUT o SELECT:
<INPUT TYPE=text onFocus="sentencia JScript>
<SELECT onFocus="sentencia JScript>
Marzo de 2015
35
JavaScript
Eventos: onSelect
Se produce cuando se selecciona con el ratn el un
texto en una caja
j de
d texto.
Atributo de una etiqueta INPUT:
<INPUT TYPE=text onSelect="sentencia JScript>
<TEXTAREA onSelect="sentencia>
<INPUT TYPE
TYPE=password
d onSelect="sentencia>
S l t "
t
i >
Se utiliza para asegurar que se teclea un campo y

no se copia
i de
d otro.
t
Marzo de 2015
36
JavaScript
Eventos: onChange
Se produce cuando se modifica el contenido de una
caja de texto y se genera cuando se cambia de
objeto.
Atributo de una etiqueta INPUT,
INPUT TEXTAREA o
SELECT:
<INPUT TYPE
TYPE=text
te t onChange
onChange="sentencia
"sentencia JScript>
<TEXTAREA onChange="sentencia>
<INPUT TYPE=password
p
onChange="sentencia>
g
<SELECT onChange="sentencia>
Marzo de 2015
37
JavaScript
Eventos: onAbort
Se produce cuando se cancela la carga de una
i
imagen.
Tecla
T l ESC o ell bbotn
dde STOP
STOP.
Atributo de una etiqueta IMG:
<IMG onAbort="sentencia JScript>
Marzo de 2015
38
JavaScript
E t onkeydown,
Eventos:
k d
onkeyup,
k
onkeypress
yp
Se produce cuando se pulsa, levanta o se mantiene
pulsada
l d una tecla.
l
Atributo de una etiqueta INPUT o TEXTAREA:
<INPUT TYPE=text onkeydown ="sentencia JScript>
<TEXTAREA onkeydown ="sentencia>
<INPUT TYPE
TYPE=password
d onkeydown
k d
="sentencia>
"
t
i >
Marzo de 2015
39
JavaScript
E t onmousedown,
Eventos:
d
onmouseup,
onmousemove
Se produce cuando se pulsa, levanta o se mueve el
ratn.
Atributo de una etiqueta INPUT:

<INPUT TYPE=button onmousedown ="sentencia>
<A HREF=enlace onmousedown ="sentencia>
Marzo de 2015
40
JavaScript
Eventos: onMove, onResize

Se produce cuando se mueve o se cambia de
tamao
la
l ventana del
d l navegador.
d
Atributo de una etiqueta BODY:
<BODY onMove ="sentencia JScript
onResize ="sentencia JScript>
Marzo de 2015
41

Js PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Js PDF

Cargado por

Copyright:

Formatos disponibles

Diseo de Aplicaciones Web:

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Estructura de un documento (I)

La etiqueta SCRIPT puede aparecer tanto en la cabecera

Diseo de Aplicaciones Web

Estructura de un documento (II)

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Objetos del Navegador

Diseo de Aplicaciones Web

Objetos del Navegador:

Todos los objetos de tipo array tienen la propiedad

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

self, window: alternativos

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Mtodo open: opciones

Diseo de Aplicaciones Web

href: URL completa

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

clear(): Limpia la ventana

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

hspace, vspace: Valores

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Text Textarea password y Hidden

Diseo de Aplicaciones Web

Button, Submit y Reset

Diseo de Aplicaciones Web

length: Slo vlido para

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

JavaScript: Modelo de Eventos

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Eventos: onLoad y onUnload

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Eventos: onMouseOver y onMouseOut

Diseo de Aplicaciones Web

Eventos: onReset y onSubmit

Es importante que devuelva un valor booleano.

Diseo de Aplicaciones Web

Eventos: onFocus y onBlur

Diseo de Aplicaciones Web

Se utiliza para asegurar que se teclea un campo y

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Diseo de Aplicaciones Web

Atributo de una etiqueta INPUT:

Diseo de Aplicaciones Web