js.pdf

Diseo de Aplicaciones Web:Diseo de Aplicaciones Web: JavaScriptp

1Marzo de 2015 Diseo de Aplicaciones Web

JavaScript

Caractersticas JavaScript es un lenguaje de programacin

interpretadointerpretado. El cdigo est empotrado en la pgina HTML Permite la generacin de pginas dinmicas Se puede utilizar tanto en el servidor como en el p

cliente


JavaScript

Modo de funcionamiento Se pide la pgina HTML. El servidor enva la pgina En esta pgina est El servidor enva la pgina. En esta pgina est

incluido tanto el cdigo HTML como el cdigo JavaScriptJavaScript.

Se lee la pgina y se visualiza el cdigo HTML.j l i ( i d ) Se ejecuta el programa JavaScript (si procede).


JavaScript

Ejemplo

Programa 1 JSCRIPT

document.write("Hola a todos. Estees el resultado ");es el resultado ");

document.write("de un programa tontocon JavaScript");


JavaScript

Resultado


JavaScript

Eventos Las sentencias JavaScript se utilizan para atender

eventos que el usuario provoca en los elementos de una eve os que e usua o p ovoca e os e e e os de u apgina.


JavaScript

Estructura de un documento (I) Etiqueta:

Cdigo JavaScript

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): Indica que el lenguaje utilizado es JavaScript. J v Sc p ( ): d c que e e gu je u do es J v Sc p .

Si aparece la versin indica que es obligatorio que el navegador soporte dicha versin


JavaScript

Estructura de un documento (II) SRC:Especifica un fichero que contiene el programa o

fragmento de programa. Utilizando esta opcin se ag e o de p og a a. U a do es a opc sepueden escribir libreras.

Cdigo JavaScript: Cdigo JavaScript: Lenguaje sensible a las maysculas. camion != Camion

Admite comentarios: //Comentario de una sola lnea o deAdmite comentarios: //Comentario de una sola lnea o de/* VariasLneas */

Sentencia: Separadas por ; { y } delimitan un bloque.


JavaScript

Funciones bsicas document.write(texto): Escribe un texto en el

documento htmldocu e o alert(string): Muestra una ventana de texto con el

parmetro que se pasaparmetro que se pasa. texto=prompt(mostrado, valor_def): Muestra una

entana de te to imprimiendo el primer parmetroventana de texto imprimiendo el primer parmetro y pide que se introduzca un texto.


JavaScript

Conversin de tipos Qu ocurre cuando queremos leer un valor de la

consola?co so a? La operacin de las variables depende de su tipo.

Consideraciones acerca de las operaciones recogidas en Consideraciones acerca de las operaciones recogidas en la documentacin.

I t( t i b ) parseInt(string, base) parseFloat(string)


JavaScript

Objetos del Navegador


Objetos del Navegador:JavaScript

Objetos del Navegador: ConsideracionesConsideraciones

Los objetos de tipo array (forms) se pueden f i d d freferenciar de dos formas: document.forms[formulario1] document.formulario1

Todos los objetos de tipo array tienen la propiedad length: document.forms.length

El objeto window no es necesario nombrarlo. Por jdefecto el navegador lo antepone.


JavaScript

Navigator Contiene informacin relativa al navegador. Es independiente

del resto de los objetos. Mtodos:

javaEnabled(): Devuelve un valor booleano. Indica si el d d i Jnavegador admite Java.


JavaScript

Window (Propiedades)

closed: booleano que indica si la ventana se ha

self, window: alternativost R f i lindica si la ventana se ha

cerrado defaultStatus y status:

parent: Referencia al window que contiene el conjunto de marcosdefaultStatus y status:

cadena de caracteres en la barra inferior.

conjunto de marcos. frames: array que

contiene cada uno de los length: Nmero de

marcos.

contiene cada uno de los marcos de la pgina

history: Array que name: opener: referencia a la

y y qcontiene los URLs visitados con anterioridad

14ventana que la abri

Marzo de 2015 Diseo de Aplicaciones Web

JavaScript

Window (Mtodos)

close(): cierra la ventana.f () bl ()

setTimeout(expresion, ms): Aplaza la evaluacin focus() y blur(): pone y

elimina el foco. alert prompt y confirm

ms): Aplaza la evaluacin de la expresin ms milisegundos. alert, prompt y confirm

moveTo, moveBy(x,y): mueve la ventana

gDevuelve un identificador de timer.

mueve la ventana. resizeTo, resizeBy(x,y):

Cambia el tamao de la

clearTimeout(id): Cancela el temporizador.

Cambia el tamao de la ventana. Vase ejemplo. open(url,nombre,opts):

Abre una nueva ventana.


JavaScript

Mtodo open: opciones

directories={yes,no}: Barra personal de enlaces

status={yes,no}: Contiene el rea de estadoBarra personal de enlaces.

location ={yes,no}: Texto que contiene URL

el rea de estado. toolbar={yes,no}:

Contiene la barra deque contiene URL menubar ={yes,no}:

Barra de mens.

Contiene la barra de herramientas.

width=npixels, heightBarra de mens. resizable ={yes,no}:

Posibilidad de cambiar el

width npixels, height =npixels: Anchura y altura.

tamao de la ventana. scrollbars ={yes,no}:

top=npixels, left= npixels: Origen de la

16Contiene barras de scroll. ventana


JavaScript

Location

Contiene informacin relativa a la URL

href: URL completarelativa a la URL.

host: Nombre del host + puerto

Mtodos reload()puerto.

hostname: Nombre del host.

replace(url):Reemplaza la historia host.

pathname: Nombre del documento

con el documento que se pasa.

port: Nmero del puerto protocol:

17

pMarzo de 2015 Diseo de Aplicaciones Web

JavaScript

Document: Propiedades

Contiene informacin relativa al documento

cookies: Cadena de caracteres que contiene lasrelativa al documento.

alinkColor, vlinkColor linkColor: Colores de los

caracteres que contiene las cookies.

referrer: URL desde lalinkColor: Colores de los enlaces.

bgColor, fgColor: Color

referrer: URL desde la que se referenci el documento.bgColor, fgColor: Color

de fondo y de texto. anchors, applets, links,

docu e o. title:Ttulo del documento

, pp , ,images, forms : Arrays

location: URL del

18documento.


JavaScript

Document: Mtodos

clear(): Limpia la ventanal () Ci l d close(): Cierra el documento.

open(mime,str): Abre el documento para escritura. ib b l d write y writeln: Escribe sobre el documento.


JavaScript

Link

Es el objeto contenido en cada elemento de

protocol: protocolocada elemento de document.links.

host: Nombre y puerto del

target: ventana destino.host: Nombre y puerto del

host. hostname: Nombre del

href: Contiene el nombre de la URL hostname: Nombre del

host. pathname: Camino de la

completa. Ejemplo: link htmp

pgina port: Nmero de puerto.

Ejemplo: link.htm


JavaScript

Anchor

Es el objeto contenido en cada elemento de

href: Contiene el b d l URLcada elemento de document.anchors.

text: Texto asociado al

nombre de la URL completa. Slo en IE.

text: Texto asociado al anchor

name: Nombre del

Ejemplo: Anchor.htmlname: Nombre del anchor.

target: Ventana destino.g


JavaScript

Image

Objeto que contiene los parmetros de una imagen

hspace, vspace: Valores hparmetros de una imagen.

border: Valor entero que contiene el ancho del

hspace y vspace. src: URL que contiene la

imagencontiene el ancho del borde.

complete: Indica si la

imagen name: Campo name. Se

utiliza para hacercomplete: Indica si la imagen se ha cargado completamente.

utiliza para hacer referencia al objeto.

El conjunto de atributos es height, width: Altura y

anchura.

El conjunto de atributos es muy dependiente del navegador.


JavaScript

Form

Objeto que contiene los parmetros de un

elements: Conjunto de bj t ti lparmetros de un

formulario. action:

objetos que contiene el formulario.Vase las seccionesaction:

encoding: Contiene el campo ENCTYPE.

Vase las secciones siguientes.

name: Campo name. Se campo ENCTYPE. method: GET o POST. target: Especifica el

e: Ca po a e. Seutiliza para hacer referencia al objeto.target: Especifica el

nombre de la ventana que contiene la salida del

Mtodos: reset() y submit()

23formulario.


JavaScript

Text Textarea password y Hidden

name: Se utiliza para hacer referencia al objeto

Mtodos: bl () Q it l fhacer referencia al objeto.

value: Valor introducido en la caja de texto

blur(): Quita el foco focus() Pone el foco select(): Selecciona el textoen la caja de texto.

defaultValue: Valor por defecto.

select(): Selecciona el texto que aparece en la caja

defecto. size o cols: Tamao en

horizontal. rows:Tamao en vertical.


JavaScript

Button, Submit y Reset


Mtodos: li k() Si l l i dhacer referencia al objeto.

value: Valor contenido en la caja

click(): Simula la accin de pulsar el botn.

la caja. defaultValue: Valor por

defecto.defecto.


JavaScript

Checkbox y Radio


length: Slo vlido para radio Nmero de botoneshacer referencia al objeto.

checked: Booleano. Indica si est seleccionado

radio. Nmero de botones Mtodos:

click(): Simula la accin deIndica si est seleccionado defaultChecked:

Booleano. Indica si est

click(): Simula la accin de pulsar el botn.

Booleano. Indica si est seleccionado por defecto.

value: Slo vlido para pradio. Contiene el texto que aparece junto a la caja


JavaScript

Select


defaultSelected: Booleano. Indica si la opcin esthacer referencia al objeto.

length: Nmero de opciones en la seleccin

Indica si la opcin est seleccionada por defecto.

selected: Booleano. Indica i t l i dopciones en la seleccin

selectedIndex: ndice de la opcin seleccionada.

si est seleecionado. index: ndice que ocupa en

el vectorla opcin seleccionada. Solo en IE

options: Conjunto de

text: Texto de la caja value: Campo valuep j

opciones:


JavaScript

JavaScript: Modelo de Eventos


JavaScript

Eventos

Hasta este punto se han realizado pginas estticas.

No se toma ninguna decisin respecto a lasNo se toma ninguna decisin respecto a las acciones del usuario.

l h j Evento: Suceso externo a la hoja HTML que requiere la intervencin de un fragmento de cdigo JavaScript.


JavaScript

Eventos: Ejemplo

onLoad

function fincarga(){

l t("L h j h t i d \ d ")alert("La hoja ha terminado\nde cargarse");}

JavaScript

Eventos: onLoad y onUnload

Se produce cuando se carga/abandona una pgina. Atributo de una etiqueta: BODY, FRAMESET:


JavaScript

Eventos: onClick

Se produce cuando se pulsa el botn del ratn. Atributo de una etiqueta: HREF, INPUT:

JavaScript

Eventos: onMouseOver y onMouseOut

Se producen cuando se entra/abandona el rea de l i d lseleccin de un enlace.

Atributo de una etiqueta HREF:


JavaScript

Eventos: onReset y onSubmit

Se producen cuando se pulsa el botn de R /E f l iReset/Envo en un formulario.

Atributo de una etiqueta FORM: Es importante que devuelva un valor booleano.


JavaScript

Eventos: onFocus y onBlur

Se producen cuando se pone/elimina el cursor en un l d f l ielemento de un formulario.

Atributo de una etiqueta INPUT o SELECT:


JavaScript

Eventos: onSelect

Se produce cuando se selecciona con el ratn el un j dtexto en una caja de texto.

Atributo de una etiqueta INPUT:

Se utiliza para asegurar que se teclea un campo y

i d tno se copia de otro.


JavaScript

Eventos: onChange

Se produce cuando se modifica el contenido de una caja de texto y se genera cuando se cambia decaja de texto y se genera cuando se cambia de objeto.

Atributo de una etiqueta INPUT TEXTAREA o Atributo de una etiqueta INPUT, TEXTAREA oSELECT:

p g

JavaScript

Eventos: onAbort

Se produce cuando se cancela la carga de una i T l ESC l b d STOPimagen. Tecla ESC o el botn de STOP.

Atributo de una etiqueta IMG:

E t k d kJavaScript

Eventos: onkeydown, onkeyup, onkeypressyp

Se produce cuando se pulsa, levanta o se mantiene l d lpulsada una tecla.

Atributo de una etiqueta INPUT o TEXTAREA:


E t dJavaScript

Eventos: onmousedown, onmouseup, onmousemove

Se produce cuando se pulsa, levanta o se mueve el ratn.

Atributo de una etiqueta INPUT:


JavaScript

Eventos: onMove, onResize

Se produce cuando se mueve o se cambia de l d l dtamao la ventana del navegador.

Atributo de una etiqueta BODY:


js.pdf

Documents