Diseño deDiseño de Aplicaciones Web:...
Transcript of Diseño deDiseño de Aplicaciones Web:...
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
2Marzo de 2015 Diseño de Aplicaciones Web
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).
3Marzo de 2015 Diseño de Aplicaciones Web
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>
4Marzo de 2015 Diseño de Aplicaciones Web
</HTML>
JavaScript
Resultado
5Marzo de 2015 Diseño de Aplicaciones Web
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.
6Marzo de 2015 Diseño de Aplicaciones Web
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
7Marzo de 2015 Diseño de Aplicaciones Web
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.
8Marzo de 2015 Diseño de Aplicaciones Web
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.
9Marzo de 2015 Diseño de Aplicaciones Web
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)
10Marzo de 2015 Diseño de Aplicaciones Web
JavaScript
Objetos del Navegador
11Marzo de 2015 Diseño de Aplicaciones Web
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.
12Marzo de 2015 Diseño de Aplicaciones Web
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.
13Marzo de 2015 Diseño de Aplicaciones Web
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.
15Marzo de 2015 Diseño de Aplicaciones Web
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
Marzo de 2015 Diseño de Aplicaciones Web
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.
Marzo de 2015 Diseño de Aplicaciones Web
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.
19Marzo de 2015 Diseño de Aplicaciones Web
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
20Marzo de 2015 Diseño de Aplicaciones Web
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
21Marzo de 2015 Diseño de Aplicaciones Web
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.
22Marzo de 2015 Diseño de Aplicaciones Web
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.
Marzo de 2015 Diseño de Aplicaciones Web
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.
24Marzo de 2015 Diseño de Aplicaciones Web
JavaScript
Button, Submit y Reset
• name: Se utiliza para hacer referencia al objeto
• 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.
25Marzo de 2015 Diseño de Aplicaciones Web
JavaScript
Checkbox y Radio
• name: Se utiliza para hacer referencia al objeto
• 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
26Marzo de 2015 Diseño de Aplicaciones Web
JavaScript
Select
• name: Se utiliza para hacer referencia al objeto
– 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:
27Marzo de 2015 Diseño de Aplicaciones Web
JavaScript
JavaScript: Modelo de Eventos
28Marzo de 2015 Diseño de Aplicaciones Web
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.
29Marzo de 2015 Diseño de Aplicaciones Web
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>
Marzo de 2015 Diseño de Aplicaciones Web
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 >
31Marzo de 2015 Diseño de Aplicaciones Web
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 )
32Marzo de 2015 Diseño de Aplicaciones Web
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”>
33Marzo de 2015 Diseño de Aplicaciones Web
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.
34Marzo de 2015 Diseño de Aplicaciones Web
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”>
35Marzo de 2015 Diseño de Aplicaciones Web
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.
36Marzo de 2015 Diseño de Aplicaciones Web
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”>
37Marzo de 2015 Diseño de Aplicaciones Web
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”>
38Marzo de 2015 Diseño de Aplicaciones Web
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”>
39Marzo de 2015 Diseño de Aplicaciones Web
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”>
40Marzo de 2015 Diseño de Aplicaciones Web
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”>
41Marzo de 2015 Diseño de Aplicaciones Web