creación de sitios web con xhtml, css y javascript...

JavaScriptJavaScriptJuan Manuel Cueva Lovelle Juan Manuel Cueva Lovelle OOTOOTLabLab

CreaciCreacióón de Sitios Web con XHTML, CSS y n de Sitios Web con XHTML, CSS y JavaScriptJavaScript

JavaScriptJavaScriptJuan Manuel Cueva LovelleJuan Manuel Cueva Lovelle

[email protected]@lsi.uniovi.eswww.di.uniovi.eswww.di.uniovi.es/~cueva/~cueva

Departamento de InformDepartamento de InformááticaticaUniversidad de Oviedo (Asturias, EspaUniversidad de Oviedo (Asturias, Españña)a)

OOTOOTLabLab www.ootlab.uniovi.eswww.ootlab.uniovi.es


ContenidosContenidos•• GeneraciGeneracióón dinn dináámica de informacimica de informacióón n •• ComputaciComputacióón en el clienten en el cliente

•• Etiqueta Etiqueta <<objectobject>>•• Etiqueta Etiqueta <<scriptscript>>

•• ComputaciComputacióón en el servidorn en el servidor•• CGICGI•• CCóódigo incrustadodigo incrustado

•• Servicios WebServicios Web

GeneraciGeneracióón dinn dináámica de informacimica de informacióónn

ComputaciComputacióón en la Webn en la Web


GeneraciGeneracióón dinn dináámica de informacimica de informacióónn•• ComputaciComputacióón dinn dináámicamica: La informaci: La informacióón se computa en el momento enn se computa en el momento en

que se solicita (normalmente a partir de una base de datos)que se solicita (normalmente a partir de una base de datos)•• Ejemplo: InformaciEjemplo: Informacióón del tiempo.n del tiempo.

•• Ventajas:Ventajas:•• Flexibilidad: La informaciFlexibilidad: La informacióón se adapta a las caractern se adapta a las caracteríísticas del clientesticas del cliente•• Eficiencia: No es necesario tener almacenada toda la informaciEficiencia: No es necesario tener almacenada toda la informacióónn

•• PosibilidadesPosibilidades•• ComputaciComputacióón en n en el el clientecliente•• ComputaciComputacióón en n en el el servidorservidor


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n ComputaciComputacióón en el Cliente <n en el Cliente <objectobject>>


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n ComputaciComputacióón en el Cliente <n en el Cliente <scriptscript>>

ComputaciComputacióón en el clienten en el clienteLenguajes de Lenguajes de scriptscript

ECMAScriptECMAScript


JavaScriptJavaScript, , JScriptJScript, , ECMAScriptECMAScript

•• JavaScriptJavaScript fue desarrollado por fue desarrollado por NetscapeNetscape•• Poco despuPoco despuéés s MicrosoftMicrosoft saco su propio lenguaje de saco su propio lenguaje de scriptscript, ,

VBScriptVBScript, para hacer frente a , para hacer frente a NetScapeNetScape. . •• Posteriormente Internet Explorer pasarPosteriormente Internet Explorer pasaríía a soportar a a soportar

JavaScriptJavaScript, pero no el de , pero no el de NetscapeNetscape, sino una interpretaci, sino una interpretacióón n del mismo: del mismo: JScriptJScript

•• ECMAScriptECMAScript: est: estáándar. ndar. JavaScriptJavaScript & & JScriptJScript son ahora son ahora compatibles con la especificacicompatibles con la especificacióón ECMAn ECMA--262 (aunque 262 (aunque contienen extensiones diferentes...)contienen extensiones diferentes...)•• Algunas extensiones Algunas extensiones JavaScriptJavaScript ssóólo funcionan en lo funcionan en NetscapeNetscape (y (y

otras extensiones otras extensiones JScriptJScript ssóólo funcionan en Internet lo funcionan en Internet ExplorerExplorer……))


¿¿QuQuéé se puede hacer con se puede hacer con JavaScriptJavaScript??

•• Validar formulariosValidar formularios•• Realizar cRealizar cáálculos simpleslculos simples•• PersonalizaciPersonalizacióón de las pn de las pááginas Webginas Web•• Hacer interactiva una pHacer interactiva una páágina Webgina Web•• InclusiInclusióón de datos del sistema (hora n de datos del sistema (hora ……). Crear ). Crear

relojes animados relojes animados ……•• Manipular los elementos HTML de una pManipular los elementos HTML de una pááginagina•• JuegosJuegos


JavaScriptJavaScript y los Navegadoresy los Navegadores

•• Cada navegador acepta una versiCada navegador acepta una versióón de n de JavaScriptJavaScriptligeramente diferente (o no lo acepta en absoluto)ligeramente diferente (o no lo acepta en absoluto)

•• No existe...No existe...•• podemos probarlo en un npodemos probarlo en un núúmero razonable de navegadores:mero razonable de navegadores:

•• NN 4 (NN 4 (document.layersdocument.layers))•• IE 5 (IE 5 (document.alldocument.all))•• NN 6/7 & IE 6 y 7 (NN 6/7 & IE 6 y 7 (document.getElementByIddocument.getElementById))

•• podemos incluir cpodemos incluir cóódigo para detectar el navegador, asdigo para detectar el navegador, asíí como como diferentes versiones de algunas funciones, una para cada diferentes versiones de algunas funciones, una para cada navegadornavegador

¿SOLUCIÓN?


Funcionamiento de Funcionamiento de JavaScriptJavaScript

•• Los navegadores pueden Los navegadores pueden interpretarinterpretarJavaScriptJavaScript en la men la mááquina clientequina cliente•• Cuando un navegador solicita una pCuando un navegador solicita una páágina, el gina, el

servidor manda tanto el cservidor manda tanto el cóódigo digo XHTMLXHTML como como los los scriptsscripts incluidos en dicho cincluidos en dicho cóódigodigo

•• El navegador lee la pEl navegador lee la páágina de arriba abajo, gina de arriba abajo, mostrando el cmostrando el cóódigo digo XHTMLXHTML y ejecutando los y ejecutando los scriptsscripts en el orden en que aparecenen el orden en que aparecen


Generalidades de Generalidades de JavaScriptJavaScript•• Lenguaje Orientado a Objetos sin clasesLenguaje Orientado a Objetos sin clases•• SSóólo se parece a Java en aspectos sintlo se parece a Java en aspectos sintáácticoscticos•• InterpretadoInterpretado•• Lenguaje Lenguaje ““sin tipossin tipos”” o dino dináámicomico•• No tiene acceso al disco de la mNo tiene acceso al disco de la mááquina local (por seguridad)quina local (por seguridad)•• Tiene objetos predefinidosTiene objetos predefinidos

•• WindowWindow•• LocationLocation•• HistoryHistory•• DocumentDocument

•• FormsForms•• AnchorsAnchors

•• StringString•• MathMath•• DateDate•• NavigatorNavigator


Generalidades de Generalidades de JavaScriptJavaScript (II)(II)•• Elementos de Elementos de JavaScriptJavaScript::

•• ObjetosObjetos•• ExpresionesExpresiones•• Estructuras de controlEstructuras de control•• FuncionesFunciones•• ArraysArrays•• EventosEventos

•• Elementos de una pElementos de una páágina XHTML pueden causar un gina XHTML pueden causar un eventoevento que ejecutarque ejecutaráá una acciuna accióónn

•• Esa acciEsa accióón se ejecutarn se ejecutaráá a trava travéés de una serie de sentencias s de una serie de sentencias JavaScriptJavaScript


La etiqueta <La etiqueta <scriptscript> </> </scriptscript>>•• SintaxisSintaxis

•• ¿¿DDóónde se colocan los nde se colocan los scriptsscripts??•• en general, dentro de en general, dentro de <<headhead> ... </> ... </headhead>>•• si genera una salida, dentro de si genera una salida, dentro de <<bodybody> ... </> ... </bodybody>>•• si hace referencia a un elemento XHTML, despusi hace referencia a un elemento XHTML, despuéés de s de

dicho elementodicho elemento•• en algunos casos, en los atributos de algunas etiquetas en algunos casos, en los atributos de algunas etiquetas

((eventoseventos))•• en un fichero externoen un fichero externo

<script type="text/javascript">

//instrucciones javaScript

</script>

<script type="text/javascript" src="fuente.js"></script>

Ejemplo: Escribir en la pEjemplo: Escribir en la páágina HTMLgina HTML

<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>>

</</bodybody>></</htmlhtml>>


Objeto Objeto documentdocument

•• Representa un Representa un documento HTMLdocumento HTML en en JavaScriptJavaScript

•• Este es uno de los objetos predefinidosEste es uno de los objetos predefinidos•• Contiene propiedades y mContiene propiedades y méétodostodos

•• PropiedadesPropiedades: : anchorsanchors, , lastModifiedlastModified, , locationlocation,,……•• MMéétodostodos: : clearclear(), (), closeclose(), (), writewrite(),(),……

Navegadores que no aceptan Navegadores que no aceptan JavaScriptJavaScript

•• Resulta aconsejable escribir los Resulta aconsejable escribir los scriptsscripts asasíí::

•• TambiTambiéén se puede incluir la etiqueta:n se puede incluir la etiqueta:

<script language=“JavaScript” type=“text/javascript”></script>

<noscript>Su página no acepta Javascript. Pruebe con <a href=“no_jscript.html”>esta página</a></noscript>

Ejemplo: Objetos Ejemplo: Objetos StringString<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">">></</scriptscript>>

<p>Este ejemplo define un objeto <p>Este ejemplo define un objeto StringString y lo muestra</p>y lo muestra</p><<olol>><<lili>Directamente</>Directamente</lili>><<lili>Como nivel h1</>Como nivel h1</lili>></</olol>>


Objetos predefinidos en Objetos predefinidos en JavaScriptJavaScript•• Objetos PredefinidosObjetos Predefinidos

•• StringString: Cada vez que se asigna una cadena de caracteres a una : Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase variable, se crea un objeto de la clase StringString

•• MathMath: Se usa para efectuar c: Se usa para efectuar cáálculos matemlculos matemááticosticos•• DateDate: Para el manejo de fechas y horas: Para el manejo de fechas y horas•• ArrayArray: almacena un conjunto de valores: almacena un conjunto de valores•• BooleanBoolean

•• Objeto Objeto browserbrowser (Navegador)(Navegador)•• Informa sobre el navegadorInforma sobre el navegador

•• Objeto Objeto documentdocument•• Es el documento HTML y tiene asociados elementos del Es el documento HTML y tiene asociados elementos del

documento (link, ancla, formulario, documento (link, ancla, formulario, ……))•• Objetos definidos por el usuarioObjetos definidos por el usuario


MMéétodos comunestodos comunes•• StringString::

•• lengthlength(): longitud del (): longitud del stringstring•• replacereplace(): reemplaza un texto por otro(): reemplaza un texto por otro•• ToUpperCaseToUpperCase ():pasa a may():pasa a mayúúsculassculas

•• DateDate::•• getTimegetTime()()•• getFullYeargetFullYear()()•• getDaygetDay()()

•• ArrayArray•• sortsort(): ordena elementos(): ordena elementos•• concatconcat(): concatena dos (): concatena dos arraysarrays

•• MathMath•• roundround()()•• maxmax(), (), minmin()()•• sin(), cos(), tan(), sin(), cos(), tan(), asinasin(), (), acosacos(), atan(), atan2()(), atan(), atan2()•• powpow()()


Nombres de VariablesNombres de Variables

•• Los nombres son sensibles a mayLos nombres son sensibles a mayúúsculas/minsculas/minúúsculas (sculas (case case sensitivesensitive))..

•• Deben comenzar por una letra o guiDeben comenzar por una letra o guióón bajo. No deben n bajo. No deben coincidir con palabras reservadascoincidir con palabras reservadas

•• Se podrSe podríían definir como variables:an definir como variables:NombreNombre_Opci_Opcióón15n15mes3mes3

•• DeclaraciDeclaracióón:n:•• AsignAsignáándole un valor: ndole un valor: x = 42x = 42•• Con la palabra reservada Con la palabra reservada ““varvar””: : varvar xx•• O bien ambos: O bien ambos: varvar x = 42x = 42


Tipos predefinidos de objetosTipos predefinidos de objetos•• Tipos disponibles elementales:Tipos disponibles elementales:

•• NumNumééricorico (42, 3.14159, (42, 3.14159, …… ))•• BooleanoBooleano ((truetrue y y falsefalse))•• StringString ((““Hola mundoHola mundo””))•• nullnull, que denota el valor nulo, que denota el valor nulo•• undefinedundefined//NaNNaN, que denota un valor indefinido, que denota un valor indefinido•• ObjectObject•• DateDate

•• Tipos Tipos ““dindináámicosmicos””: : •• No es necesario declarar el tipo de los objetosNo es necesario declarar el tipo de los objetos•• Se pueden convertir automSe pueden convertir automááticamente de un tipo a otro ticamente de un tipo a otro

durante la ejecucidurante la ejecucióónn


ComentariosComentarios

•• Una lUna líínea: nea: // comentario de una l// comentario de una lííneanea

•• Varias lVarias lííneas:neas:/* /* comentario de varias lcomentario de varias lííneasneas*/*/


BuclesBucles•• WhileWhile whilewhile ((condicioncondicion){){

//c//cóódigodigo}}

•• Do Do …… whilewhile do {do {//c//cóódigodigo}}

whilewhile ((condicioncondicion))

•• ForFor forfor ((inicializacioninicializacion; ; condicioncondicion; incremento){; incremento){//c//cóódigodigo}}

•• ForFor in in forfor (variable in (variable in objectobject) { ) { //c//cóódigo digo

} }


Ejemplo: Enteros y bucles Ejemplo: Enteros y bucles whilewhile<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">"><!<!——

//No son necesarios obligatoriamente los puntos y comas//No son necesarios obligatoriamente los puntos y comasvarvar i = 0i = 0whilewhile (i <= 5)(i <= 5){{document.writedocument.write("El valor de i=" + i)("El valor de i=" + i)document.writedocument.write("<("<brbr/>")/>")i++i++

}}---->></</scriptscript>>



Sentencias condicionalesSentencias condicionalesif (condicion){//código para condición = true}else{//código para condición = false}

switchswitch ((expresionexpresion){){case etiqueta1:case etiqueta1:

//c//cóódigo si la digo si la expresionexpresion = label1= label1breakbreak

case etiqueta2:case etiqueta2://c//cóódigo si la digo si la expresionexpresion = label2= label2breakbreak

defaultdefault:://c//cóódigo si la expresidigo si la expresióón no es ninguna de las n no es ninguna de las

anterioresanteriores}}


OperadoresOperadores

•• AritmAritmééticosticos: +, : +, --, *, /, %, ++, , *, /, %, ++, ----•• AsignaciAsignacióónn: =, +=, : =, +=, --=, *=, /=, %==, *=, /=, %=•• ComparaciComparacióónn: ==, !=, >, <, >=, <=: ==, !=, >, <, >=, <=•• LLóógicosgicos: &&, ||, ! : &&, ||, !

Ejemplo: Date y Ejemplo: Date y ifif -- elseelse ifif -- elseelse<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>


VisualizaciVisualizacióón de errores sintn de errores sintáácticos por cticos por los navegadoreslos navegadores

•• En En IE 7IE 7::•• Herramientas/Opciones de Internet/Opciones avanzadas/Herramientas/Opciones de Internet/Opciones avanzadas/

seleccionar seleccionar ““Mostrar una notificaciMostrar una notificacióón sobre cada error de n sobre cada error de scriptscript””

•• En En FirefoxFirefox::•• Tareas/Herramientas/Consola de Tareas/Herramientas/Consola de JavaScriptJavaScript•• Para que se active automPara que se active automááticamente, incluir la siguiente ticamente, incluir la siguiente

llíínea en el fichero nea en el fichero prefs.jsprefs.js::user_prefuser_pref((““javascript.console.open_on_errorjavascript.console.open_on_error””, , truetrue););


Objetos y propiedadesObjetos y propiedades

•• Podemos acceder a las propiedades de un Podemos acceder a las propiedades de un objeto:objeto:

nombreObjeto.nombrePropiedadnombreObjeto.nombrePropiedad

•• Las propiedades se definen Las propiedades se definen asignasignáándole un ndole un valorvalor

•• EjemploEjemplo. Dado el objeto . Dado el objeto miCochemiCoche, definimos las , definimos las propiedades marca, modelo y apropiedades marca, modelo y añño como sigue:o como sigue:miCoche.marcamiCoche.marca = = ““FordFord”” // // miCochemiCoche[[““marcamarca””] = ] = ““FordFord””miCoche.modelomiCoche.modelo = = ““FocusFocus”” // // miCochemiCoche[[““modelomodelo””] = ] = ““FocusFocus””miCoche.amiCoche.aññoo = 2000= 2000 // // miCochemiCoche[[““aaññoo””] = 2000] = 2000

Ejemplo: Visualizar el navegadorEjemplo: Visualizar el navegador<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>

Ejemplo: MEjemplo: Máás informacis informacióón del navegador y de la plataforman del navegador y de la plataforma<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>


Ejemplo: MEjemplo: Máás informacis informacióón del navegador, de la plataforma y de los idiomasn del navegador, de la plataforma y de los idiomas<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">">varvar x = x = navigatornavigatordocument.writedocument.write("Nombre del c("Nombre del cóódigo=" + digo=" + x.appCodeNamex.appCodeName))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Versi("Versióón menor=" + n menor=" + x.appMinorVersionx.appMinorVersion))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Nombre=" + ("Nombre=" + x.appNamex.appName))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Versi("Versióón=" + n=" + x.appVersionx.appVersion))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("("CookisCookis activas=" + activas=" + x.cookieEnabledx.cookieEnabled))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Tipo CPU=" + ("Tipo CPU=" + x.cpuClassx.cpuClass))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("("OnLineOnLine=" + =" + x.onLinex.onLine))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("("PlatformaPlatforma=" + =" + x.platformx.platform))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("("UserUser AgentAgent=" + =" + x.userAgentx.userAgent))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Lenguaje del navegador=" + ("Lenguaje del navegador=" + x.browserLanguagex.browserLanguage))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Lenguaje del Sistema=" + ("Lenguaje del Sistema=" + x.systemLanguagex.systemLanguage))document.writedocument.write("<("<brbr />")/>")document.writedocument.write("Lenguaje del usuario=" + ("Lenguaje del usuario=" + x.userLanguagex.userLanguage))</</scriptscript>></</bodybody>></</htmlhtml>>


FuncionesFunciones

•• SintaxisSintaxisfunctionfunction mifuncion(argumento1mifuncion(argumento1,argumento2,,argumento2,……)){{//C//Cóódigodigo}}

Se puede usar la palabra reservada Se puede usar la palabra reservada returnreturnpero no hay que indicar nada en la pero no hay que indicar nada en la declaracideclaracióón de la funcin de la funcióónn

Ejemplo recursivo: FactorialEjemplo recursivo: Factorial<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>

<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>

Problemas de Problemas de seguridad en seguridad en

IE7IE7


CreaciCreacióón de nuevos objetosn de nuevos objetos

•• Es posible definir nuevos objetos de dos Es posible definir nuevos objetos de dos formas diferentes:formas diferentes:•• Mediante inicializaciMediante inicializacióón de objetos (dando el n de objetos (dando el

valor inicial del mismo)valor inicial del mismo)•• Mediante una funciMediante una funcióón constructora y n constructora y ““newnew””


InicializaciInicializacióón de objetos (JS>1.1)n de objetos (JS>1.1)

•• Consiste en asignarle a una variable un literal de objeto:Consiste en asignarle a una variable un literal de objeto:nomObjnomObj = { prop1: val1, prop2: val2, ..., = { prop1: val1, prop2: val2, ..., propNpropN: : valNvalN }}

donde donde •• nomObjnomObj es el nombre del nuevo objetoes el nombre del nuevo objeto•• prop1,...,prop1,...,propNpropN son identificadores que representan las son identificadores que representan las

propiedades del objetopropiedades del objeto•• val1,...,val1,...,valNvalN son los valores asignados a cada son los valores asignados a cada

propiedad del objetopropiedad del objeto•• Si no vamos a volver a necesitar el objeto, no es necesario Si no vamos a volver a necesitar el objeto, no es necesario

asignarle un nombreasignarle un nombre•• Pero, Pero, JavaScriptJavaScript debe debe interpretarinterpretar el objeto cada vez que el objeto cada vez que

aparezca una referencia al mismo en el caparezca una referencia al mismo en el cóódigo (lento...)digo (lento...)


Ejemplo: ConstrucciEjemplo: Construccióón de objetos por inicializacin de objetos por inicializacióónn

<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">">

personaObjpersonaObj==newnew ObjectObject()()personaObj.nombrepersonaObj.nombre="Juan Manuel"="Juan Manuel"personaObj.apellidospersonaObj.apellidos="Cueva Lovelle"="Cueva Lovelle"personaObj.edadpersonaObj.edad=49=49personaObj.colorOjospersonaObj.colorOjos="verdes"="verdes"

document.write(personaObj.nombredocument.write(personaObj.nombre + " " ++ " " +personaObj.apellidospersonaObj.apellidos++" tiene " + " tiene " + personaObj.edadpersonaObj.edad + " a+ " añños" os" + " y sigue con los ojos "+ + " y sigue con los ojos "+ personaObj.colorOjospersonaObj.colorOjos))

</</scriptscript>>



Funciones constructorasFunciones constructoras

•• La creaciLa creacióón de un objeto mediante una funcin de un objeto mediante una funcióón constructora consiste n constructora consiste en dos pasos:en dos pasos:1.1.-- definimos el definimos el perfilperfil del objeto mediante una funcidel objeto mediante una funcióón (constructora)n (constructora)2.2.-- creamos un objeto usando creamos un objeto usando ““newnew””

functionfunction persona ( persona ( nomnom, edad, sexo ) {, edad, sexo ) {thisthis.nombre.nombre = = nomnomthisthis.edad.edad = edad= edadthisthis.sexo.sexo = sexo= sexo

}}Juan = Juan = newnew persona(persona(““Juan GarcJuan Garcííaa””,31,,31,““HH””))Rosa = Rosa = newnew persona(persona(““Rosa MartRosa Martííneznez””,28,,28,““MM””))......


Ejemplo: Constructores con parEjemplo: Constructores con paráámetrosmetros<<htmlhtml>><<bodybody>>

<<scriptscript typetype="="texttext//javascriptjavascript">">

functionfunction persona(nombre,apellidos,edad,colorOjospersona(nombre,apellidos,edad,colorOjos)){{this.nombrethis.nombre=nombre=nombrethis.apellidosthis.apellidos=apellidos=apellidosthis.edadthis.edad=edad=edadthis.colorOjosthis.colorOjos==colorOjoscolorOjos}}

yo=yo=newnew persona("Juan Manuel","Cueva Lovelle",49,"verdes")persona("Juan Manuel","Cueva Lovelle",49,"verdes")

document.writedocument.write( ( yo.nombreyo.nombre + " tiene " + + " tiene " + yo.edadyo.edad + " a+ " añños")os")

</</scriptscript>>



Funciones constructoras (2)Funciones constructoras (2)

•• Es posible definir propiedades que sean a su vez objetos:Es posible definir propiedades que sean a su vez objetos:functionfunction coche( marca, modelo, coche( marca, modelo, propprop ) {) {

this.marcathis.marca = marca= marcathis.modelothis.modelo = modelo= modelothis.propietariothis.propietario = = propprop

}}coche1 = coche1 = newnew coche(coche(““FordFord””, , ““FocusFocus””, Juan), Juan)coche2 = coche2 = newnew coche(coche(““SeatSeat””, , ““ToledoToledo””, Rosa), Rosa)......

•• Para acceder al nombre del propietario de coche1:Para acceder al nombre del propietario de coche1:coche1.coche1.propietario.nombrepropietario.nombre // // ““Juan GarcJuan Garcííaa””


Acceso a las propiedadesAcceso a las propiedades

•• Podemos acceder de dos formas:Podemos acceder de dos formas:•• mediante un mediante un ííndicendice miCochemiCoche[5][5]•• mediante el nombre mediante el nombre miCoche.colormiCoche.color / / miCochemiCoche[[““colorcolor””]]

•• Sin embargo,Sin embargo,•• si se cresi se creóó con un con un ííndice, sndice, sóólo se puede acceder con dicho lo se puede acceder con dicho ííndicendice•• si se cresi se creóó con un nombre, scon un nombre, sóólo se puede acceder con dicho nombrelo se puede acceder con dicho nombre

•• ExcepciExcepcióónn: objetos predefinidos de HTML (por ej., : objetos predefinidos de HTML (por ej., formsforms))document.formsdocument.forms[0].[0].listaCocheslistaCoches // // ííndicendicedocument.formsdocument.forms[[““formCochesformCoches””].].listaCocheslistaCoches // nombre// nombredocument.formCoches.listaCochesdocument.formCoches.listaCoches


DefiniciDefinicióón de mn de méétodostodos

•• Un mUn méétodo es una funcitodo es una funcióón asociada a un objeto:n asociada a un objeto:

•• se definen como cualquier otra funcise definen como cualquier otra funcióónn

•• se asocian a un objeto mediante la sentencia:se asocian a un objeto mediante la sentencia:objeto.nombreMobjeto.nombreMéétodotodo = = nombreFuncinombreFuncióónn

donde donde ““objetoobjeto”” debe ser un objeto existentedebe ser un objeto existente

•• y se pueden invocar asy se pueden invocar asíí::objeto.nombreMobjeto.nombreMéétodo(partodo(paráámetrosmetros))

•• Si asociamos el mSi asociamos el méétodo en la funcitodo en la funcióón constructora para un n constructora para un tipo de objetos, estartipo de objetos, estaráá disponible para todos ellosdisponible para todos ellos


DefiniciDefinicióón de mn de méétodos: Ejemplotodos: Ejemplofunctionfunction verDatosverDatos() {() {

var var strstr = = ““Datos del coche: Datos del coche: ”” + this.marca + + this.marca + ““ ”” ++

this.modelothis.modelo + + ““ de color de color ”” + this.color+ this.colordocument.write(strdocument.write(str + + ““<br><br>””))

}}functionfunction coche(marca, modelo, color) {coche(marca, modelo, color) {

this.marcathis.marca = marca= marcathis.modelothis.modelo = modelo= modelothis.colorthis.color = color= color

this.verDatosthis.verDatos = = verDatosverDatos}}

coche2 = new coche(coche2 = new coche(““SeatSeat””, , ““ToledoToledo””, , ““rojorojo””))coche2.coche2.verDatosverDatos()()

// // ““Datos del coche: Seat Toledo de color rojoDatos del coche: Seat Toledo de color rojo””


Mensajes emergentes: Pop Mensajes emergentes: Pop upsups

•• Tipo Tipo alertalert•• alertalert((““Cuidado con las manos") Cuidado con las manos")

•• Tipo Tipo confirmconfirm•• confirmconfirm((“¿“¿EstEstáás seguro?") s seguro?")

•• Tipo Tipo promptprompt•• promptprompt((““Dime tu nombre",Dime tu nombre",““ponlo aquponlo aquíí")")

Ejemplo: Mensaje de alertaEjemplo: Mensaje de alerta

<<htmlhtml>><<bodybody>><<scriptscript typetype="="texttext//javascriptjavascript">"><!></</scriptscript>></</bodybody>></</htmlhtml>>

Ejemplo: InteracciEjemplo: Interaccióón con el usuarion con el usuariopromptprompt()()<html><html><body><body><script type="<script type="texttext//javascriptjavascript">"><!></script></script></body></body></html></html>

Problemas de Problemas de seguridad en seguridad en

IE7IE7


Tiempo de vida de las variablesTiempo de vida de las variables

•• Las variables pueden serLas variables pueden ser•• LocalesLocales: dentro de una funci: dentro de una funcióónn

•• Su valor perdura dentro de ellasSu valor perdura dentro de ellas•• GlobalesGlobales: fuera de las funciones: fuera de las funciones

•• disponible desde cualquier parte de cdisponible desde cualquier parte de cóódigo digo JavaScriptJavaScriptque haya en la pque haya en la páágina gina

•• El uso de El uso de varvar para declarar una variable global es para declarar una variable global es opcional...opcional...•• Aunque si se introduce una variable en una funciAunque si se introduce una variable en una funcióón y no n y no

se declara, tendrse declara, tendráá áámbito mbito globalglobal!!•• Para las variables locales, el uso de Para las variables locales, el uso de varvar es muy es muy

recomendable para evitar problemas...recomendable para evitar problemas...


Modelo de Eventos de Modelo de Eventos de JavaScriptJavaScript

•• El evento es gestionado por una secciEl evento es gestionado por una seccióón de cn de cóódigo digo en en JavaScriptJavaScript (Gestor de Eventos)(Gestor de Eventos)

•• DeclaraciDeclaracióón de Gestores de Eventos: similar a los n de Gestores de Eventos: similar a los atributos en HTMLatributos en HTML

•• Crear pCrear pááginas ginas webweb dindináámicasmicas•• Las acciones son detectadas por Las acciones son detectadas por JavaScriptJavaScript•• Ejemplos:Ejemplos:

•• ClickClick de ratde ratóónn•• Carga de la pCarga de la pááginagina•• Mandar un Mandar un formularioformulario……


Gestores de Gestores de EventosEventos ((EventEvent HandlersHandlers))

Evento Ocurre cuando Gestorblur El usuario quita el cursor de un elemento de formulario onBlur

click El usuario hace click en un link o un elemento de formulario onClick

change El usuario cambia el valor de un texto, un área de texto o selecciona un elemento.

onChange

focus El usuario coloca el cursor en un elemento de formulario. onFocus

load El usuario carga una página en el Navegador onLoad

Mouseover El usuario mueve el ratón sobre un link onMouseOver

Select El usuario selecciona un campo del elemento de un formulario onSelect

Submit Se envía un formulario onSubmit

Unload Se descarga la página onUnload


Ejemplo: Evento Ejemplo: Evento onLoadonLoad

<<htmlhtml>><<headhead> > </</headhead> > <<bodybody onLoadonLoad="="alertalert((‘‘Bienvenido a mi sitio Web')"> Bienvenido a mi sitio Web')"> <h1> Mi sitio Web</h1><h1> Mi sitio Web</h1></</bodybody>></</htmlhtml> >


Ejemplo: Evento Ejemplo: Evento onClickonClick

<<htmlhtml> > <<headhead> > </</headhead> > <<bodybody> > <a <a hrefhref="="httphttp://://www.google.comwww.google.com//" " onClickonClick="="alertalert('Vas a ir a ('Vas a ir a GoogleGoogle')">')">GoogleGoogle</a> </a> </</bodybody> >

</</htmlhtml>>

Ejemplo: Evento Ejemplo: Evento onUnLoadonUnLoad

<html><head>

<title>manipulación de un evento</title><script language="JavaScript" type="text/javascript"></script>

</head><body onUnLoad="adios()"></body></html>


JavaScriptJavaScript & DHTML& DHTML

•• DHTML (HTML + CSS + DOM + DHTML (HTML + CSS + DOM + JavaScriptJavaScript))•• JavaScriptJavaScript interactinteractúúa con los elementos HTML a trava con los elementos HTML a travéés del DOM del s del DOM del

navegadornavegador

•• BBáásicamente, existen 4 modelos de DOM:sicamente, existen 4 modelos de DOM:•• DOM nivel 0DOM nivel 0 (>NN2.x, >IE 3.x)(>NN2.x, >IE 3.x)

•• el modelo original, introducido por el modelo original, introducido por NetscapeNetscape•• muy compatible, debermuy compatible, deberíía usarse siempre que fuera posiblea usarse siempre que fuera posible

•• DOM DOM NetscapeNetscape (s(sóólo NN 4.x)lo NN 4.x)•• introduce introduce document.layersdocument.layers (capas)(capas)

•• DOM Internet ExplorerDOM Internet Explorer (>IE 4.x)(>IE 4.x)•• introduce introduce document.alldocument.all

(acceso a todos los elementos)(acceso a todos los elementos)•• W3C DOM nivel 1/2/W3C DOM nivel 1/2/…… (>NN 6.x, >IE 5.x)(>NN 6.x, >IE 5.x)

•• introduce introduce document.getElementByIddocument.getElementById

¡Guerra de losnavegadores!


DOMDOM•• Cuando se carga una pCuando se carga una páágina, se crean una serie de gina, se crean una serie de

objetos objetos JavaScriptJavaScript asociados con los asociados con los ““principalesprincipales””elementos HTML de la pelementos HTML de la páágina:gina:windowwindow TexareaTexarea

FrameFrame TextTextdocumentdocument LinkLink FileUploadFileUploadLocationLocation ImageImage PasswordPasswordHistoryHistory AnchorAnchor HiddenHidden

EmbedEmbed SubmitSubmitAppletApplet ResetReset

navigatornavigator PluginPlugin RadioRadioappNameappName ...... CheckboxCheckboxmimeTypesmimeTypes FormForm ButtonButton

SelectSelect


Acceso a los elementosAcceso a los elementos

•• Cuando se carga la pCuando se carga la páágina, se crea una jerarqugina, se crea una jerarquíía de objetos que a de objetos que refleja el contenido de la misma:refleja el contenido de la misma:<<htmlhtml>><h1>Ejemplo</h1><h1>Ejemplo</h1><<imgimg srcsrc==““logoupv.giflogoupv.gif”” namename==““upvupv””>><<formform namename==““formularioformulario””>><<inputinput typetype==““texttext”” namename==““campo1campo1””>>......

de forma que podemos acceder a ellos (desde de forma que podemos acceder a ellos (desde JavaScriptJavaScript) indicando la ) indicando la ““trayectortrayectorííaa”” completa:completa:window.document.upvwindow.document.upv // // window.document.imageswindow.document.images[0][0]window.document.formulariowindow.document.formulario // // window.document.formswindow.document.forms[0][0]……

el atributo el atributo ““namename”” es esencial para acceder a los elementoses esencial para acceder a los elementos


OperacionesOperaciones

•• Cada elemento dispone deCada elemento dispone de•• propiedadespropiedades: que se pueden consultar y, en : que se pueden consultar y, en

ocasiones, modificarocasiones, modificar•• window.document.bgColorwindow.document.bgColor

•• mméétodostodos: que nos permiten ejecutar acciones : que nos permiten ejecutar acciones relacionadas con el objetorelacionadas con el objeto•• window.openwindow.open()()

•• LimitacionesLimitaciones::•• no hay acceso a todos los elementos de la pno hay acceso a todos los elementos de la pááginagina•• la mayor parte de las propiedades son de la mayor parte de las propiedades son de ““ssóólo lecturalo lectura””


EjemploEjemplo

<HTML><HEAD>

<TITLE>Ejemplo sencillo de página HTML</TITLE></HEAD><BODY>

<A name="principio">Este es el principio de la página</A> // ancla<HR><FORM method="POST">

<P> Introduzca su nombre:<INPUT type="text" name="me" size="70"> </P><INPUT type="reset" value="Borrar Datos"><INPUT type="submit" value="OK">

</FORM><HR>Clica aquí para ir al <A href="#principio">principio</A> de la página // link

</BODY></HTML>

document.title

document.anchors[0].name

document.forms[0].method

document.forms[0].elements[1].value

document.links[0].href


EjemploEjemplo•• Cambiar el color de letra y de fondoCambiar el color de letra y de fondo•• ScriptScript::

functionfunction colores(fondocolores(fondo, frente) {, frente) {document.bgColordocument.bgColor = fondo= fondodocument.fgColordocument.fgColor = frente }= frente }

•• HTML:HTML:<<formform>><<inputinput typetype==““buttonbutton”” valuevalue==““Fondo rojo, texto blancoFondo rojo, texto blanco””

onClickonClick==““colores(colores(‘‘redred’’, , ‘‘whitewhite’’))””>><<inputinput typetype==““buttonbutton”” valuevalue==““Fondo blanco, texto rojoFondo blanco, texto rojo””

onClickonClick==““colores(colores(‘‘whitewhite’’, , ‘‘redred’’))””>></</formform>>


DOM W3CDOM W3C•• EstEstáándar ndar •• La principal ventaja es que dispone de facilidades paraLa principal ventaja es que dispone de facilidades para

•• mover parte del documento a otro lugarmover parte del documento a otro lugar•• crear nuevos elementos y acrear nuevos elementos y aññadirlos en cualquier puntoadirlos en cualquier punto•• organizar y manipular fragmentos del documento antes de organizar y manipular fragmentos del documento antes de

insertarlos en el mismoinsertarlos en el mismo•• Algunos cambios:Algunos cambios:

•• varvar oParentoParent = = oNode.parentElementoNode.parentElement DHTMLDHTML•• varvar oParentoParent = = oNode.parentNodeoNode.parentNode W3C DOMW3C DOM•• oNode.innerHTMLoNode.innerHTML="="TheThe newnew labellabel"; "; DHTMLDHTML•• oNode.childNodesoNode.childNodes[0].[0].nodeValuenodeValue="="TheThe newnew labellabel";"; WC3 DOMWC3 DOM•• ……


Acceso a los elementosAcceso a los elementos

•• La principal novedad es el mLa principal novedad es el méétodo todo getElementByIdgetElementById::•• por ejemplo, dado un documento:por ejemplo, dado un documento:

......<<divdiv idid==““div1div1””>>......</</divdiv>>......

oNodeoNode = = getElementByIdgetElementById((““div1div1””)) devuelvedevuelveen en oNodeoNode una referencia al objeto una referencia al objeto divdiv


CreaciCreacióón de nodosn de nodos

•• Existen dos formas bExisten dos formas báásicas:sicas:•• createElementcreateElement::

•• createElementcreateElement + + innerTextinnerText + + appendChildappendChild•• createElementcreateElement + + innerTextinnerText + + insertBeforeinsertBefore

•• createTextNodecreateTextNode•• createTextNodecreateTextNode + + childNodeschildNodes + + replaceNodereplaceNode

•• Ejemplos:Ejemplos:•• Insertar cabecera, insertar Insertar cabecera, insertar itemitem•• Modificar valor de un nodoModificar valor de un nodo


Recorrer el Recorrer el áárbolrbol

•• Aparecen 2 mAparecen 2 méétodos para recorrer nodos:todos para recorrer nodos:•• nextSiblingnextSibling y y previousSiblingpreviousSibling

<SCRIPT> <SCRIPT> // devuelve el // devuelve el itemitem etiquetado etiquetado ““ListList ItemItem 22””varvar oSiblingoSibling = = oList.childNodesoList.childNodes(0).(0).nextSiblingnextSibling;;// devuelve el // devuelve el itemitem etiquetado etiquetado ““ListList ItemItem 11””varvar oSiblingPoSiblingP = = oSibling.previousSiblingoSibling.previousSibling;;

</SCRIPT></SCRIPT><BODY> <BODY> <UL ID = <UL ID = oListoList>>

<LI><LI>ListList ItemItem 1</LI>1</LI><LI><LI>ListList ItemItem 2</LI>2</LI><LI><LI>ListList ItemItem 3</LI>3</LI>

</UL> </UL> <BODY> <BODY>


ReferenciasReferencias•• JavaScriptJavaScript. . TheThe definitivedefinitive GuideGuide..

•• David David FlanaganFlanagan. . OO’’ReillyReilly, 2006, 2006•• VersiVersióón Castellana: n Castellana: JavaScriptJavaScript. La Gu. La Guíía definitiva. a definitiva. AnayaAnaya--OO’’ReillyReilly, ,

20072007•• W3schools. W3schools. httphttp://://www.w3schoolswww.w3schools..comcom•• ““Standard ECMAStandard ECMA--262: 262: ECMAScriptECMAScript LanguageLanguage

SpecificationSpecification””. . http://www.ecmahttp://www.ecma--international.org/publications/standards/Ecmainternational.org/publications/standards/Ecma--262.htm262.htm•• Explorer: Explorer:

http://msdn.microsoft.com/library/default.asp?url=/workshop/ahttp://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asputhor/dhtml/reference/dhtml_reference_entry.asp

•• MozillaMozilla: : http://developer.mozilla.org/en/docs/Gecko_DOM_Referencehttp://developer.mozilla.org/en/docs/Gecko_DOM_Reference

•• Tabla de Tabla de compatibilidadcompatibilidad: : http://www.quirksmode.org/http://www.quirksmode.org/

ComputaciComputacióón en el servidorn en el servidor

CGI y lenguajes incrustadosCGI y lenguajes incrustados


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n ComputaciComputacióón en el Servidor (CGI)n en el Servidor (CGI)


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n ComputaciComputacióón en el Servidorn en el Servidor


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n Servicios WebServicios Web


GeneraciGeneracióón dinn dináámica de informacimica de informacióón n Servicios WebServicios Web

•• CoreografCoreografííasas•• OrquestaciOrquestacióónn

ComputaciComputacióón en el servidorn en el servidor

PHPPHP


PHPPHP

•• Lenguaje de programaciLenguaje de programacióónn•• PPHP HP HHypertextypertext PPrere--processorprocessor•• Inicialmente Inicialmente PPersonal ersonal HHomeome PPageage toolstools


CaracterCaracteríísticas generales de PHPsticas generales de PHP•• Es un Es un lenguaje multiplataformalenguaje multiplataforma. . •• Capacidad de conexiCapacidad de conexióón con la mayorn con la mayoríía de los manejadores de base de datos a de los manejadores de base de datos

que se utilizan en la actualidad, destaca su conectividad con que se utilizan en la actualidad, destaca su conectividad con MySQLMySQL•• Leer y manipular datos desde diversas fuentes, incluyendo datos Leer y manipular datos desde diversas fuentes, incluyendo datos que pueden que pueden

ingresar los usuarios desde formularios HTML. ingresar los usuarios desde formularios HTML. •• Capacidad de expandir su potencial utilizando la enorme cantidadCapacidad de expandir su potencial utilizando la enorme cantidad de mde móódulos dulos

(llamados extensiones). (llamados extensiones). •• Posee una amplia documentaciPosee una amplia documentacióón en su pn en su páágina oficial, entre la cual se destaca gina oficial, entre la cual se destaca

que todas las funciones del sistema estque todas las funciones del sistema estáán explicadas y ejemplificadas en un n explicadas y ejemplificadas en un úúnico archivo de ayuda. nico archivo de ayuda.

•• Es Es librelibre, por lo que se presenta como una alternativa de f, por lo que se presenta como una alternativa de fáácil acceso para cil acceso para todos. todos.

•• Permite las tPermite las téécnicas de cnicas de ProgramaciProgramacióón Orientada a Objetosn Orientada a Objetos. . •• Permite crear los formularios para la Web. Permite crear los formularios para la Web. •• Biblioteca nativa de funciones sumamente amplia e incluida Biblioteca nativa de funciones sumamente amplia e incluida •• No requiere definiciNo requiere definicióón de tipos de variables ni manejo detallado del bajo nivel. n de tipos de variables ni manejo detallado del bajo nivel.


HistoriaHistoria

•• PHP 1.0 (8 de Junio de 1995)PHP 1.0 (8 de Junio de 1995)•• Sucesivas versiones hastaSucesivas versiones hasta•• PHP 5.2.2 (MayoPHP 5.2.2 (Mayo--2007 ) 2007 )


Ejemplo: Obtener la versiEjemplo: Obtener la versióón de PHP n de PHP instalada en el servidorinstalada en el servidor

<<htmlhtml>><<headhead>>

<<titletitle>Ejemplo en PHP</>Ejemplo en PHP</titletitle>></</headhead>><<bodybody>>

<?<?phpphp# El operador . concatena cadenas# El operador . concatena cadenasecho "Hola mundo con PHP versiecho "Hola mundo con PHP versióón " . n " . phpversionphpversion(); (); ?>?>



Ejemplo: Fecha en el servidorEjemplo: Fecha en el servidor

<html><html><head><head>

<title><title>EjemploEjemplo en PHP</title>en PHP</title></head></head><body><body><?<?phpphp

print (print (date("ldate("l dSdS of F Y of F Y h:i:sh:i:s A"));A"));?>?>

</body></body></html></html>


Ejemplo: Fecha en espaEjemplo: Fecha en españñolol


<<titletitle>Ejemplo en PHP</>Ejemplo en PHP</titletitle>></</headhead>><<bodybody>>

<?<?phpphp# Para que salga en espa# Para que salga en españñolol

setlocalesetlocale ((LC_TIMELC_TIME,","es_ESes_ES");");$fecha$fecha = = strftimestrftime("("%A%A %d%d de de %B%B de de %Y%Y %H%H::%M%M::%S%S");");echo echo $fecha$fecha . "<. "<brbr/>"; />"; # El operador . concatena cadenas# El operador . concatena cadenas

# Por defecto en ingl# Por defecto en inglééssprintprint (date("l (date("l dSdS ofof F Y F Y h:i:sh:i:s A"));A"));

?>?></</bodybody>></</htmlhtml>>


Ejemplo: Obtener la direcciEjemplo: Obtener la direccióón IP del clienten IP del cliente


<<titletitle>Ejemplo en PHP: Obtener la IP</>Ejemplo en PHP: Obtener la IP</titletitle>></</headhead>><<bodybody>>

<?<?phpphp

$ip$ip = = $HTTP_SERVER_VARS$HTTP_SERVER_VARS["["REMOTE_ADDRREMOTE_ADDR"]; "]; echo "Su IP es " . echo "Su IP es " . $ip$ip;;

?>?>



Ejemplo: ConexiEjemplo: Conexióón con Javan con Java<<htmlhtml>>

<<headhead>><<titletitle>Ejemplo 8 en PHP: Conexi>Ejemplo 8 en PHP: Conexióón con Java</n con Java</titletitle>>

</</headhead>><<bodybody> >

<?<?phpphp// Es necesario disponer de una m// Es necesario disponer de una mááquina virtual java (JVM) instalada en el sistemaquina virtual java (JVM) instalada en el sistema// se obtiene la instancia de la clase de Java // se obtiene la instancia de la clase de Java java.lang.Systemjava.lang.System desde PHPdesde PHP$system$system = = newnew Java('Java('java.lang.Systemjava.lang.System');');

// se muestran las propiedades del acceso que se realiza a Java// se muestran las propiedades del acceso que se realiza a Javaprintprint ''VersionVersion de Java='.de Java='.$system$system-->>getPropertygetProperty('('java.versionjava.version').' <').' <brbr>';>';printprint 'Desarrollador de la JVM=' .'Desarrollador de la JVM=' .$system$system-->>getPropertygetProperty('('java.vendorjava.vendor').' <').' <brbr>';>';printprint 'Sistema Operativo='.'Sistema Operativo='.$system$system-->>getPropertygetProperty('('os.nameos.name').' '.').' '.

$system$system-->>getPropertygetProperty('('os.versionos.version').' ').' onon '.'.$system$system-->>getPropertygetProperty((''os.archos.arch').' <').' <brbr>';>';

// ejemplo de // ejemplo de java.util.Datejava.util.Date$formatter$formatter = = newnew Java('Java('java.text.SimpleDateFormatjava.text.SimpleDateFormat',',

"EEEE, MMMM "EEEE, MMMM dddd, , yyyyyyyy ''atat' ' h:mm:ssh:mm:ss a a zzzzzzzz");");

printprint $formatter$formatter-->>format(newformat(new Java('Java('java.util.Datejava.util.Date'));'));?>?>



ReferenciasReferencias

•• Sitio oficial Sitio oficial httphttp://www.php.net/://www.php.net/•• Manual de referenciaManual de referencia

•• httphttp://es.php.net/manual/es/://es.php.net/manual/es/


Referencias GeneralesReferencias Generales•• JavaScriptJavaScript. . TheThe definitivedefinitive GuideGuide..

•• David David FlanaganFlanagan. . OO’’ReillyReilly, 2006, 2006•• VersiVersióón Castellana: n Castellana: JavaScriptJavaScript. La Gu. La Guíía definitiva. a definitiva. AnayaAnaya--OO’’ReillyReilly, ,

20072007

•• EspecificaciEspecificacióón n ECMAScriptECMAScript•• httphttp://www.ecma://www.ecma--international.org/publications/standards/Ecmainternational.org/publications/standards/Ecma--

262.htm262.htm

•• httphttp://://www.di.uniovi.eswww.di.uniovi.es//~cueva~cueva//investigacioninvestigacion//lineaslineas//webweb•• PPáágina Web del autor con enlaces a distintos temas de Ingeniergina Web del autor con enlaces a distintos temas de Ingenieríía a

WebWeb

•• ProgramaciProgramacióón de Aplicaciones Webn de Aplicaciones Web•• S. RodrS. Rodrííguez de la Fuente et al.guez de la Fuente et al.•• Editorial Editorial ThomsonThomson, Madrid, 2003, Madrid, 2003

creación de sitios web con xhtml, css y javascript...

Documents