Diseño deDiseño de Aplicaciones Web: JavaScriptlaurel.datsi.fi.upm.es/_media/docencia/asignaturas/daw/js.pdf · JavaScript Estructura de un documento (II) •SRC:Especifica un fichero

Diseño de Aplicaciones Web:Diseño de Aplicaciones Web: JavaScriptp

1Marzo de 2015 Diseño de Aplicaciones Web

JavaScript

Características• JavaScript es un lenguaje de programación

interpretadointerpretado.• El código está empotrado en la página HTML• Permite la generación de páginas dinámicas• Se puede utilizar tanto en el servidor como en el p

cliente


JavaScript

Modo de funcionamiento• Se pide la página HTML.• El servidor envía la página En esta página está• El servidor envía la página. En esta página está

incluido tanto el código HTML como el código JavaScriptJavaScript.

• Se lee la página y se visualiza el código HTML.j l i ( i d )• Se ejecuta el programa JavaScript (si procede).


JavaScript

Ejemplo• <HEAD>

<TITLE>Programa 1 JSCRIPT</TITLE></HEAD></HEAD><HTML>

<BODY BGCOLOR=#FFF090><SCRIPT LANGUAGE="JavaScript">

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

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

</SCRIPT></BODY>

</HTML>


</HTML>

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 apágina.


JavaScript

Estructura de un documento (I)• Etiqueta: <SCRIPT><SCRIPT LANGUAGE=“lang” SRC=“ubicación”>Código 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): 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 versión indica que es obligatorio que el navegador soporte dicha versión


JavaScript

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

fragmento de programa. Utilizando esta opción se ag e o de p og a a. U a do es a opc ó sepueden escribir librerías.

• Código JavaScript:• Código JavaScript:– Lenguaje sensible a las mayúsculas. camion != Camion

Admite comentarios: //Comentario de una sola línea o deAdmite comentarios: //Comentario de una sola línea o de/* VariasLíneas */

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


JavaScript

Funciones básicas• document.write(texto): Escribe un texto en el

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

parámetro que se pasaparámetro que se pasa.• texto=prompt(mostrado, valor_def): Muestra una

entana de te to imprimiendo el primer parámetroventana de texto imprimiendo el primer parámetro y pide que se introduzca un texto.


JavaScript

Conversión de tipos• ¿Qué ocurre cuando queremos leer un valor de la

consola?co so a?• La operación de las variables depende de su tipo.

Consideraciones acerca de las operaciones recogidas en• Consideraciones acerca de las operaciones recogidas en la documentación.

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 información relativa al navegador. Es independiente

del resto de los objetos.• Métodos:

– 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: Número de

marcos.

contiene cada uno de los marcos de la página

• history: Array que • name:• opener: referencia a la

y y qcontiene los URLs visitados con anterioridad

14ventana que la abrió

Marzo de 2015 Diseño de Aplicaciones Web

JavaScript

Window (Métodos)

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

• setTimeout(expresion, ms): Aplaza la evaluación• focus() y blur(): pone y

elimina el foco.• alert prompt y confirm

ms): Aplaza la evaluación de la expresión 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 tamaño de la

• clearTimeout(id): Cancela el temporizador.

Cambia el tamaño de la ventana. Véase ejemplo. • open(url,nombre,opts):

Abre una nueva ventana.


JavaScript

Método 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 menús.

Contiene la barra de herramientas.

• width=npixels, heightBarra de menús.• resizable ={yes,no}:

Posibilidad de cambiar el

width npixels, height =npixels: Anchura y altura.

tamaño de la ventana.• scrollbars ={yes,no}:

• top=npixels, left= npixels: Origen de la

16Contiene barras de scroll. ventana


JavaScript

Location

• Contiene información relativa a la URL

• href: URL completarelativa a la URL.

• host: Nombre del host + puerto

• Métodos– reload()puerto.

• hostname: Nombre del host.

– replace(url):Reemplaza la historia host.

• pathname: Nombre del documento

con el documento que se pasa.

• port: Número del puerto• protocol:

17

pMarzo de 2015 Diseño de Aplicaciones Web

JavaScript

Document: Propiedades

• Contiene información 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:Título del documento

, pp , ,images, forms : Arrays

• location: URL del

18documento.


JavaScript

Document: Métodos

• 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

página• port: Número 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. Sólo 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 parámetros de una imagen

• hspace, vspace: Valores hparámetros 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 parámetros de un

• elements: Conjunto de bj t ti lparámetros de un

formulario.• action:

objetos que contiene el formulario.Véase las seccionesaction:

• encoding: Contiene el campo ENCTYPE.

Véase 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

• Métodos: reset() y submit()

23formulario.


JavaScript

Text Textarea password y Hidden

• name: Se utiliza para hacer referencia al objeto

• Métodos: 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: Tamaño en

horizontal.• rows:Tamaño en vertical.


JavaScript

Button, Submit y Reset


• Métodos: li k() Si l l ió dhacer referencia al objeto.

• value: Valor contenido en la caja

– click(): Simula la acción de pulsar el botón.

la caja.• defaultValue: Valor por

defecto.defecto.


JavaScript

Checkbox y Radio


• length: Sólo válido para radio Número de botoneshacer referencia al objeto.

• checked: Booleano. Indica si está seleccionado

radio. Número de botones• Métodos:

click(): Simula la acción deIndica si está seleccionado• defaultChecked:

Booleano. Indica si está

– click(): Simula la acción de pulsar el botón.

Booleano. Indica si está seleccionado por defecto.

• value: Sólo válido para pradio. Contiene el texto que aparece junto a la caja


JavaScript

Select


– defaultSelected: Booleano. Indica si la opción estáhacer referencia al objeto.

• length: Número de opciones en la selección

Indica si la opción está seleccionada por defecto.

– selected: Booleano. Indica i tá l i dopciones en la selección

• selectedIndex: Índice de la opción seleccionada.

si está seleecionado.– index: Índice que ocupa en

el vectorla opción 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 páginas estáticas.

• No se toma ninguna decisión respecto a lasNo se toma ninguna decisión respecto a las acciones del usuario.

l h j• Evento: Suceso externo a la hoja HTML que requiere la intervención de un fragmento de código JavaScript.


JavaScript

Eventos: Ejemplo

• <HTML><HEAD><TITLE>onLoad</TITLE>

<SCRIPT>function fincarga(){

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

</SCRIPT></HEAD>

<BODY BGCOLOR="#FFFF90” onLoad="fincarga();"><CENTER>Primera prueba con eventos:<BR> EventoPrimera prueba con eventos:<BR> Evento

<tt>onLoad</tt></CENTER></BODY></HTML>

30

</BODY></HTML>


JavaScript

Eventos: onLoad y onUnload

• Se produce cuando se carga/abandona una página.• Atributo de una etiqueta: BODY, FRAMESET:• <BODY onLoad="sentencia Jscript”

onUnload="sentencia JScript >


JavaScript

Eventos: onClick

• Se produce cuando se pulsa el botón del ratón.• Atributo de una etiqueta: HREF, INPUT:• <A HREF="enlace" onClick="sentencia JScript"><INPUT TYPE="tipoentrada” onClick= "sentencia JScript">"sentencia JScript"><SELECT onClick="sentencia JScript"> (Sólo en Explorer)( p )


JavaScript

Eventos: onMouseOver y onMouseOut

• Se producen cuando se entra/abandona el área de l ió d lselección de un enlace.

• Atributo de una etiqueta HREF:• <A HREF="enlace" onMouseOver="sentencia JScript” onMouseOut="sent. Jscript”>


JavaScript

Eventos: onReset y onSubmit

• Se producen cuando se pulsa el botón de R /E í f l iReset/Envío en un formulario.

• Atributo de una etiqueta FORM:• <FORM onReset="sentencia JScript”

onSubmit="sentencia JScript>

• 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:• <INPUT TYPE=text onFocus="sentencia JScript”>• <SELECT onFocus="sentencia JScript”>


JavaScript

Eventos: onSelect

• Se produce cuando se selecciona con el ratón el un j dtexto en una caja de texto.

• Atributo de una etiqueta INPUT:• <INPUT TYPE=text onSelect="sentencia JScript”>• <TEXTAREA onSelect="sentencia”>

<INPUT TYPE d S l t " t i ”>• <INPUT TYPE=password onSelect="sentencia”>

• 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:

• <INPUT TYPE te t onChange "sentencia JScript”>• <INPUT TYPE=text onChange="sentencia JScript”>• <TEXTAREA onChange="sentencia”>• <INPUT TYPE=password onChange="sentencia”>p g• <SELECT onChange="sentencia”>


JavaScript

Eventos: onAbort

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

• Atributo de una etiqueta IMG:• <IMG onAbort="sentencia JScript”>


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:• <INPUT TYPE=text onkeydown ="sentencia JScript”>• <TEXTAREA onkeydown ="sentencia”>

<INPUT TYPE d k d " t i ”>• <INPUT TYPE=password onkeydown ="sentencia”>


E t dJavaScript

Eventos: onmousedown, onmouseup, onmousemove

• Se produce cuando se pulsa, levanta o se mueve el óratón.

• Atributo de una etiqueta INPUT:• <INPUT TYPE=button onmousedown ="sentencia”>• <A HREF=“enlace” onmousedown ="sentencia”>


JavaScript

Eventos: onMove, onResize

• Se produce cuando se mueve o se cambia de ñ l d l dtamaño la ventana del navegador.

• Atributo de una etiqueta BODY:• <BODY onMove ="sentencia JScript”

onResize ="sentencia JScript”>


Documents

Diseño deDiseño de Aplicaciones Web: JavaScriptlaurel.datsi.fi.upm.es/_media/docencia/asignaturas/daw/js.pdf · JavaScript Estructura de un documento (II) •SRC:Especifica un fichero