Javascript Departamento de Lenguajes escuela técnica superior de ingeniería informática Grupo de Ingeniería a del Software Noviembre 2006 Versión original: Amador Durán y David Benavides (octubre 2005) Última revisión: Pablo Fernandez (noviembre 2006); Reestructuración y ampliación de contenido. Tiempo: 2h 3. Qué es? objetos en contexto Internet http:// ://servidor.com/ <head> </head> </head> <h1>página <h1>página</h1> </h1> servidor.com Grupo de Ingeniería del Software 1 1
3. Qué es? objetos en contexto Internet http:// ://servidor.com/ Página <head> </head> </head> <h1>página <h1>página</h1> </h1> servidor.com Grupo de Ingeniería del Software 2 3. Qué es? objetos en contexto Internet http:// ://servidor.com/ <head> </head> <head> </head> </head> <h1>página <h1>página</h1> gina</h1> <script> <script> document.write(" Hola document.write(" Hola Mundo!"); Mundo!"); servidor.com Grupo de Ingeniería del Software 3 2
3. Qué es? objetos en contexto Internet http:// ://servidor.com/ Página <head> </head> <head> </head> </head> <h1>página <h1>página</h1> gina</h1> <script> <script> document.write(" Hola document.write(" Hola Mundo!"); Mundo!"); servidor.com Grupo de Ingeniería del Software 4 3. Qué es? objetos en contexto Internet http:// ://servidor.com/ Página Hola Mundo! servidor.com <head> </head> <head> </head> </head> <h1>página <h1>página</h1> gina</h1> <script> <script> document.write(" Hola document.write(" Hola Mundo!"); Mundo!"); Grupo de Ingeniería del Software 5 3
3. Qué es? objetos Dónde colocamos el? En el documento HTML Dentro del elemento head Dentro del elemento body Como gestor de evento onevento="código" * Como URL de un enlace href="javascript:código" ** En un archivo separado En qué orden se ejecuta el código c? El código se ejecuta siempre en el orden en el que aparece en el código HTML. Lo habitual dentro del elemento head es poner sólo declaraciones de variables y funciones. *Los eventos y su gestión se verán en el siguiente tema. **Esta forma está en desuso y no se recomienda. Grupo de Ingeniería del Software 6 3. Qué es? objetos Script dentro del documento HTML (body( body) <html <head <head> <title <title>título del del documento</ documento</title> title> otra otra información información de de cabecera cabecera--> --> </head </head> <body contenido contenido del del documento documento--> --> <script <script type=" type="text/javascript"> text/javascript // // Código Código //-- //--> </script <!- <!- más más contenido contenido del del documento documento--> --> </body </html Grupo de Ingeniería del Software 7 4
3. Qué es? objetos Script dentro del documento HTML (head( head) <html <head <head> <title <title>título del del documento</ documento</title> title> <script <script type=" type="text/javascript"> text/javascript // // Código Código //-- //--> </script otra otra información información de de cabecera cabecera--> --> </head </head> <body contenido contenido del del documento documento--> --> </body </html Grupo de Ingeniería del Software 8 3. Qué es? objetos Script en un archivo separado <html <head <head> <title <title>título del del documento</ documento</title> title> <script <script type=" type="text/javascript" text/javascript src=" src="micodigo.js"> </script otra otra información información de de cabecera cabecera--> --> </head </head> <body contenido contenido del del documento documento--> --> </body </html // // Código Código // // micodigo.js Grupo de Ingeniería del Software 9 5
3. Qué es? objetos Características principales de Es un lenguaje interpretado (script), no compilado Es un lenguaje basado en objetos No es Java, aunque su sintaxis es similar Los objetos en Son arrays asociativos a los que pueden añadirse propiedades o funciones (métodos) dinámicamente. A las propiedades se accede mente el operador punto o mente los corchetes: objeto.propiedad objeto["propiedad"] A los métodos se accede mente el operador punto con paréntesis: objeto.método( parámetros ) Grupo de Ingeniería del Software 10 3. Qué es? objetos Comentarios en <script <script type=" type="text/javascript"> text/javascript // // Comentario Comentario de de una una línea línea /* /* Comentario Comentario de de varias varias líneas líneas igual igual que que en en Java Java */ */ //-- //--> </script Pueden ser de una sola línea o de varias líneas, con la misma sintaxis que en Java o en C++. El código dentro de un elemento script debe ir entre comentarios HTML para evitar problemas con navegadores antiguos. En XHTML debe ir dentro de una sección CDATA. Grupo de Ingeniería del Software 11 6
3. Qué es? objetos Tipos básicos b en Cadenas: " Hola, mundo!", 'epi@barriosesamo.es' Números: 12, 22.4, -5 Booleanos: true, false Constantes de cadenas "El es 'guay'." "Se debe tener cuidado con las comillas' ' Se puede poner <h1>html</h1>?' " Se puede usar la barra: \\?" Grupo de Ingeniería del Software 12 3. Qué es? objetos Declaración n de variables en es sensible a las mayúsculas y las minúsculas, por lo que una variable nombre no es la misma que otra Nombre. No es obligatorio declarar las variables, pero se recomienda. var varnotaabd; notaabd notaabd = 10; 10; Inicialización n de variables var varnotaabd; notaabd notaabd = 10; 10; // // Sin Sin declaración declaración explícita explícita notaabd notaabd = 10; 10; NO RECOMENDABLE var varnpract = 10, 10, nteoria nteoria = 10; 10; var varntotal = (npract*0.4) (npract*0.4) + (nteoria*0.6); (nteoria*0.6); Grupo de Ingeniería del Software 13 7
3. Qué es? objetos Funciones en function functionnombre_función( nombre_función( argumentos argumentos )) { var varvariable_local variable_local = valor_inicial; valor_inicial; // // código código función función return return (expresión_devuelta); Si no existe return o bien no se devuelve nada la función devuelve una variable undefined. Existen tres funciones muy útiles para la validación de formularios que son: parseint: convierte una cadena en un entero. parsefloat: convierte una cadena en un real. isnan: es cierta si el argumento no es un número. parseint( parseint( "456" "456")) == == 456; 456; // // true true parsefloat( parsefloat( "1.34" "1.34")) == == 1.34; 1.34; // // true true isnan( isnan( parseint( parseint( "uno" "uno"))); ); // // true true Grupo de Ingeniería del Software 14 3. Qué es? objetos Estructuras de en Tienen la misma sintaxis que en Java y C++. if if (condición) (condición){ // // bloque bloque if if else else { // // bloque bloque else else while while (condición) (condición){ // // bloque bloque while while do do { // // bloque bloque do do while while (condición) (condición) switch switch (expresión) (expresión){ case case etiq1 etiq1 :: // // bloque1 bloque1 case case etiq2 etiq2 :: // // bloque2 bloque2...... default default :: // // bloquen bloquen for for (i=0; (i=0; i<=n; i<=n; i++) i++) { // // bloque bloque for for Grupo de Ingeniería del Software 15 8
3. Qué es? objetos Expresiones condicionales if if (condición) (condición){ /* /* Código Código ejecutado ejecutado si si la la condición condición es es cierta cierta */ */ else else { /* /* Código Código ejecutado ejecutado si si la la condición condición es es falsa falsa */ */ Ejemplos de condición var varaprobareabd; aprobareabd; var varnoinicializada; var varnotaabd = 10; 10; aprobareabd aprobareabd = true; true; while while (condición) (condición){ /* /* Se Se ejecuta ejecuta mientras mientras la la condición condición sea sea cierta cierta */ */ do do { /* /* Se Se ejecuta ejecuta mientras mientras la la condición condición sea sea cierta cierta */ */ while while (condición) (condición) (aprobareabd)) es true (noinicializada)) es false (notaabd >= 5) es true (notaabd == 5) es false Grupo de Ingeniería del Software 16 3. Qué es? objetos Clases en Las clases establecen categorías de objetos. Por ejemplo: Coche, Persona, String, Objetos en Un objeto representa una instancia de una clase. Por ejemplo: Juan y Luis son objetos de la clase Persona. var varjuan = new newpersona(); var varluis = new newpersona(); Grupo de Ingeniería del Software 17 9
3. Qué es? objetos Existen varias en Las que más se suelen usar son: Array, Boolean, Math, Date, Number, Object y String. Se pueden usar para crear objetos, por ejemplo: var varcadena, cadena2; cadena2; cadena cadena = new newstring("soy una una cadena"); cadena"); cadena2 cadena2 = cadena.touppercase(); // // cadena2 cadena2 = "SOY "SOY UNA UNA CADENA" CADENA" O también de forma estática: var varcadena; cadena cadena = String("Estatico").toUpperCase(); // // cadena cadena = "ESTATICO" "ESTATICO" Grupo de Ingeniería del Software 18 3. Qué es? objetos Cuando se usa en navegadores, están n disponibles varios objetos en Algunos están asociados con el propio navegador: window: la ventana del navegador. screen: la pantalla. navigator: el propio navegador. history: la historia de navegación. location: la URL de la página actual. window.alert("aviso"); Otros están relacionados con la estructura del documento HTML (DOM) y son accesibles desde el objeto document: <img <img id="imgmail" id="imgmail" src="mail.jpg"/> document.getelementbyid("imgmail").src = "mail2.jpg"; "mail2.jpg"; Grupo de Ingeniería del Software 19 10
3. Qué es? objetos Clases : String Propiedades length: longitud de la cadena. Métodos big(): para poner la fuente más grande bold(): para ponerla en negrita charat(n): devuelve el carácter colocado en la posición n match(c) : dice si la subcadena c pertenece a la cadena substring(x,y): devuelve la subcadena que va de x a y inclusive (las cadenas empiezan en 0) tolowercase(): convierte a mayúsculas touppercase(): convierte a minúsculas valueof() : devuelve el valor de tipo string (importante a la hora de comparar cadenas) tostring(): convierte un objeto en una cadena Grupo de Ingeniería del Software 20 3. Qué es? objetos Clases : Math Métodos abs(número): función valor absoluto max(x,y): devuelve el máximo de x e y min(x,y): devuelve el mínimo de x e y pow(base, exp): potencia random(): devuelve un número aleatorio en [0,1] round(número): redondea al entero más cercano sin(número): función seno sqrt(número): función raíz cuadrada tan(número): función tangente... Grupo de Ingeniería del Software 21 11
3. Qué es? objetos Clases : Array Propiedades length: longitud del array Métodos join(): agrupa los elementos separándolos por comas reverse(): invierte el orden de los elementos sort(): ordena los elementos del array a = new newarray (25); (25);// // crea crea un un array arrayde de 25 25 elementos elementos a = new newarray (1,"abd",true); (1,"abd",true);// // un un array arraycon con tres tres posiciones posiciones a = new newarray ("cadena"); ("cadena");// // un un array arraycon con una una cadena cadena a = new newarray (false (false); // // array arraycon con el el elemento elemento false false Array de 3 filas y 6 columnas? a = new newarray (3); (3); for for (i=0;i<3;i++) (i=0;i<3;i++) a[i]= a[i]= new newarray (6); (6); //acceso //acceso al al array arraya[i][j] a[i][j] Grupo de Ingeniería del Software 22 3. Qué es? objetos Clases : Date Métodos getdate(): devuelve el día del mes actual como un entero entre 1 y 31 getday(): devuelve el día de la semana actual como un entero entre 0 y 6 gethours(): devuelve la hora del día actual como un entero entre 0 y 23. getminutes(): devuelve los minutos de la hora actual como un entero entre 0 y 59. getmonth(): devuelve el mes del año actual como un entero entre 0 y 11. getseconds(): devuelve los segundos del minuto actual como un entero entre 0 y 59. gettime(): devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual Grupo de Ingeniería del Software 23 12
3. Qué es? objetos Clases : Date Métodos getyear(): devuelve el año actual como un entero setdate(día_mes): pone el día del mes actual en el objeto Date que estemos usando togmtstring(): devuelve una cadena que usa las convenciones de Internet con la zona horaria GMT var varf f = new new Date Date (); (); var varf f = new new Date Date (año, (año, mes); mes); var varf f = new new Date Date (año, (año, mes, mes, día); día); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas); horas); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas, horas, minutos); minutos); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas, horas, minutos, minutos, segundos); segundos); Grupo de Ingeniería del Software 24 3. Qué es? objetos Clases : Date function function DeLaSemana() DeLaSemana() { { var var hoy hoy = new new Date(); Date(); var var ; ; switch switch ( ( hoy.getday() hoy.getday() ) ) { { case case 0: 0: = "Domingo"; "Domingo"; case case 1: 1: = "Lunes"; "Lunes"; case case 2: 2: = "Martes"; "Martes"; case case 3: 3: = "Miércoles"; "Miércoles"; case case 4: 4: = "Jueves"; "Jueves"; case case 5: 5: = "Viernes"; "Viernes"; case case 6: 6: = "Sábado"; "Sábado"; return( return( ); ); Grupo de Ingeniería del Software 25 13
3. Qué es? objetos Objetos : window Representa a la ventana del navegador. Propiedades status: mensaje de la barra de estado document: documento HTML visualizado history: historial de navegación closed: cierto si la ventana está cerrada length: número de frames que contiene la ventana frames: un array que contiene todos los frames que tiene la ventana, es decir, devuelve un array de objetos de tipo Frame Grupo de Ingeniería del Software 26 3. Qué es? objetos Objetos : window Métodos alert(msg): muestra una ventana con un mensaje confirm(msg): muestra una ventana con un botón de cancelar y otro de aceptar; devuelve true si se ha pulsado aceptar y false si se ha pulsado cancelar prompt(msg,default): muestra una ventana de entrada de datos con un valor por defecto open(url,nombre,opt): abre una nueva ventana del navegador close(): cierra la ventana navigate(url): ir a url (sólo IE) Grupo de Ingeniería del Software 27 14
3. Qué es? objetos Objetos : navigator Representa al propio navegador. Propiedades appname: nombre del navegador: Microsoft Internet Explorer, Mozilla, NetScape, appversion: versión del navegador: Netscape 5.0 (Windows; es-es) Microsoft Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT 5.0) mimetypes: un array con los tipos MIME (Multipurpose Internet Mail Extensions) que soporta el navegador (Application, Audio, Image, Message, Multipart, Text, Video) plugins: un array con los plugins que tiene instalado el navegador javaenabled(): devuelve un booleano indicando si está habilitado el lenguaje Java para los applets Grupo de Ingeniería del Software 28 3. Qué es? objetos Objetos : frame Representa a un marco (frame). Propiedades parent: el marco padre del frame Objetos : location Representa a la URL del documento mostrado en window Propiedades host: Contiene el nombre del servidor que ha servido la página y el número de puerto de la URL hostname: nombre del servidor pathname: camino sin incluir ni el servidor ni el puerto port: puerto protocol: protocolo (http, ftp,..) href: URL que se puede cambiar dinámicamente Grupo de Ingeniería del Software 29 15
3. Qué es? objetos Bibliografía web Referencia dentro del estándar de HTML: http://www.w3.org/tr/html401/interact/scripts.html Página principal del proyecto Mozilla http://www.mozilla.org/js JScript en la MSDN http://msdn.microsoft.com/library/default.asp?url=/library/enus/script56/html/1e9b3876-3d38-4fd8-8596-1bbfe2330aa9.asp Última versión (12/1999) del estándar ECMAScript (Javascript 1.5) http://www.ecma-international.org/publications/standards/ecma- 262.htm Tutoriales: http://www.webteacher.com/javascript/ http://www.webreference.com/programming/javascript/ries/ http://www.pageresource.com/jscript/ http://www.webestilo.com/javascript/ Grupo de Ingeniería del Software 30 16