Programación en Internet
|
|
|
- Mariano Rivero del Río
- hace 10 años
- Vistas:
Transcripción
1 Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript Referencias Libro: Capítulos Internet & WWW: How to Program. Capítulo 5. Programación de Aplicaciones Web. W3 Schools, Programación en Internet Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript 1
2 Introducción Características de JavaScript Tecnología del lado del servidor que aporta dinamismo a documentos HTML Lenguaje interpretado (script) embebido en el código HTML Lenguaje orientado a eventos. Es posible ejecutar acciones en respuesta a eventos. Lenguaje orientado a objetos. Aunque con un modelo de objetos reducido, JavaScript dispone de las ventajas de los paradigmas orientados a objetos. Historia de JavaScript Netscape incluyó JavaScript 1.0 en su navegador Netscape Navigator 2.0 y Posteriormente JavaScript 1.1 en la versión 3.0 Microsoft incluyó su versión de JavaScript (Jscript) en Internet Explorer 3.0 ECMA (European Computer Manufacturers Association) estandariza JavaScript bajo la denominación ECMAScript-262 Desde las versiones de Netscape 4.0 e Internet Explorer 4.0 soportan el estándar ECMAScript-262 o JavaScrip 1.2 (aunque con diferencias) La últimas versiones de los navegadores soportan JavaScript 1.3 (Full ECMAScript-262) Introducción JavaScript en un documento HMTL <script > Atributos type : [ text/ecmascript text/javascript text/jscript text/vbscript text/vbs text/xml ] src : URL al fichero (.js) que contiene el código JavaScript Ubicación <head> </head>. El código será ejecutado cuande se invoque. <body> </body>. El código se ejecutará durante la carga de la página Ejemplos <!-- Ejemplo 1 --> <! -- Ejemplo 2 --> <head> <head> </head> <script type= text/javascript <body> src= codigo.js > <script type= text/javascript > </head> document.write( <h1>hola Mundo!</h1> ); </body> 2
3 Introducción Otro ejemplo <html> <head> <title>javascript: Ejemplo 3</title> function validarnumero() { var valor1, valor2; valor1=document.f.n.value; if ( valor1=="" ) { alert("es necesario insertar algo"); return false; valor2 = parseint(valor1); if (isnan(valor2)) alert("ha insertado la cadena: "+valor1); else alert("ha insertado el número: "+valor1); </head> <body> document.write("<h1>ejemplo 3</h1>"); <form name="f" method="" action="" id="f"> Insertar Valor <input type="text" name="n" id="n"> <br /> <input type="button" value="validar" onclick="validarnumero()"> </form> </body> </html> Introducción Otro ejemplo <html> <head> <title>javascript: Ejemplo 3</title> function validarnumero() { var valor1, valor2; valor1=document.f.n.value; if ( valor1=="" ) { alert("es necesario insertar algo"); return false; valor2 = parseint(valor1); if (isnan(valor2)) alert("ha insertado la cadena: "+valor1); else alert("ha insertado el número: "+valor1); </head> <body> document.write("<h1>ejemplo 3</h1>"); <form name="f" method="" action="" id="f"> Insertar Valor <input type="text" name="n" id="n"> <br /> <input type="button" value="validar" onclick="validarnumero()"> </form> </body> </html> 3
4 Programación en Internet Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript Fundamentos de JavaScript Tipos de datos y variables Tipos básicos Numéricas: Enteros y Reales Booleanas. Cadenas de Caracteres. Declaración de variables (no es necesario especificar un tipo, se asigna un tipo a la variable en la primera asignación) var nomb_variable ; Funciones de conversión de tipos int parseint(cad): Devuelve el entero incluido en cad o NAN si no es numérica float parsefloat(cad): Devuelve el real incluido en cad o NAN si no es numérica Concatenación de cadenas y variables numéricas: + cadena + numero Ejemplo. El valor de X es + x 4
5 Fundamentos de JavaScript Ejemplo 4 <html> <head> <title>javascript: Ejemplo 4</title> var suma; function sumar() { var valor1, valor2; valor1=prompt("inserte valor 1:"); valor2=prompt("inserte valor 2:"); valor1 = parsefloat(valor1); valor2 = parsefloat(valor2); if (isnan(valor1) isnan(valor2)) { alert("error en la entrada de datos"); document.write("<p>recarge para probar otra vez</p>"); return false; suma=valor1+valor2; document.write("<h1>ejemplo 4</h1><p>Suma="+suma+ "</p><p>recarge para probar otra vez</p>"); <!-- continuación --> </head> <body onload="sumar()"> </body> </html> Fundamentos de JavaScript Ejemplo 4 <html> <head> <title>javascript: Ejemplo 4</title> var suma; function sumar() { var valor1, valor2; valor1=prompt("inserte valor 1:"); valor2=prompt("inserte valor 2:"); valor1 = parsefloat(valor1); valor2 = parsefloat(valor2); if (isnan(valor1) isnan(valor2)) { alert("error en la entrada de datos"); document.write("<p>recarge para probar otra vez</p>"); return false; suma=valor1+valor2; document.write("<h1>ejemplo 4</h1><p>Suma="+suma+ "</p><p>recarge para probar otra vez</p>"); <!-- continuación --> </head> <body onload="sumar()"> </body> </html> 5
6 Fundamentos de JavaScript Operadores Asignación Operador = += -= *= /= %= Descripción Asigna el valor del operando de la izquierda al operando de la derecha Suma el operando derecho al izquierdo y le asigna el resultado Resta el operando derecho al izquierdo y le asigna el resultado Multiplica el operando derecho por el izquierdo y le asigna el resultado Divide el operando izquierdo entre el derecho, asignando el resultado al operando izquierdo Divide el operando de la izquierda por el de la derecha y asigna el valor del resto de la división al operando de la izquierda Ejemplo a = 5; x1 = x2 = x3 = 0; b += a: b %= 7; Fundamentos de JavaScript Operadores Aritméticos Operador Descripción binarios + Sumar - Restar * Multiplicar / Dividir % Resto división unarios ++ Incremento -- decremento Ejemplos c = a+b; d = (a + b) / 2; resto = a % 2; area = lado * lado; valor = 12 / ( 4 * 3 ); a++; ++b; --c; d--; 6
7 Fundamentos de JavaScript Operadores Comparación y Lógicos Operador Descripción == Igual que!= Distinto de > (>=) Mayor (igual) que < (<=) Menor (igual) que && Y (AND) O (OR)! No Ejemplos if ( a == ok ) if ( salir!= 100 ).. while (x1 <= 10) for ( i=1; i<=10; i++)... if (!condicion ) while ( x<10 && y<10) if (!a (b>0 && c!= si )) x F F T T y x&&y x y F F F T F T F F T T T T T: true, F:false!x T T F F Fundamentos de JavaScript Estructuras de control: Condicionales if (cond) { sentsi Si se cumple la condición se ejecuta sentsi if (cond) { sentsi Si se cumple la condición se ejecuta sentsi else {sentsino en otro caso, se ejecuta SentSiNo ( cond )? valorsi : valorsino Si se cumple la condición, devuelve valorsi en otro caso devuelve valorsino. switch ( exp ) { Se evalua el valor de la expresión exp case val1 : sent1; break; si toma el valor val1 se ejecuta sent1 case val2 : sent2; break; si toma el valor val2 se ejecuta sent2 case valn : sentn; break; si toma el valor valn se ejecuta sentn default : sent; si toma otro valor se ejecuta sent. 7
8 Fundamentos de JavaScript Estructuras de control: Condicionales <html> <head> <script> function operar() { var resultado; var operacion=f.op.value; var op1=parsefloat(f.v1.value); var op2=parsefloat(f.v2.value); switch (operacion) { case ("+") : resultado=op1+op2;break; case ("-") : resultado=op1-op2;break; case ("*") : resultado=op1*op2;break; case ("/") : resultado=op1/op2;break; default : resultado="error"; f.r.value=resultado; <title>ejemplo 5</title> </head> <body> <h1>ejemplo 5</h1> <form id="f"> Valor 1: <input type="text" id="v1" size="3"><br /> Valor 2: <input type="text" id="v2" size="3"> <input type="text" id="op" size="1" onblur="operar()"> = <input type="text" id="r" size="5"> </form> </body> </html> Fundamentos de JavaScript Estructuras de control: Condicionales <html> <head> <script> function operar() { var resultado; var operacion=f.op.value; var op1=parsefloat(f.v1.value); var op2=parsefloat(f.v2.value); switch (operacion) { case ("+") : resultado=op1+op2;break; case ("-") : resultado=op1-op2;break; case ("*") : resultado=op1*op2;break; case ("/") : resultado=op1/op2;break; default : resultado="error"; f.r.value=resultado; <title>ejemplo 5</title> </head> <body> <h1>ejemplo 5</h1> <form id="f"> Valor 1: <input type="text" id="v1" size="3"><br /> Valor 2: <input type="text" id="v2" size="3"> <input type="text" id="op" size="1" onblur="operar()"> = <input type="text" id="r" size="5"> </form> </body> </html> 8
9 Fundamentos de JavaScript Estructuras de control: Bucles for (exp_inic ; cond ; exp_incr ) { sent Se ejecuta la expresión de inicialización exp_inic. Se comprueba la condición cond, si es verdadera se ejecutan las sentencias sent. Posteriormente, se ejecuta la expresión de incremento exp_incr, y se vuelve a comprobar la condición, repitiendo el proceso hasta que ésta tome valor falso. Ejemplo: for( i=0; i<100; i++) { document.write( Línea +i+ <br /> ); while (cond) { sent Las sentencias sent se ejecutaran mientras que se cumpla la condición cond. Ejemplo: while ( dato!= Fin ) { dato = prompt( Inserta dato); do {sent while (cond); Las sentancias sent se ejecutaran mientras la condición cond sea verdadera. Ejemplo: do { dato = prompt( Inserta dato); while ( dato!= Fin ); break y continue break : finaliza la ejecución de un bucle. continue : Finaliza un ciclo de un bucle, comenzando uno nuevo. Fundamentos de JavaScript Estructuras de control: Bucles <html> <head> <title>ejemplo 6</title> <script> function entrar() { var r; var i; do { r=prompt("palabra mágica?"); if(r=="abracadabra") break; if(r.length==0) continue; for(i=0;i<r.length;i++) document.write("*"); document.write("<br />"); while(true); </head> <!-- continuación --> <body onload="entrar()"> </body> </html> 9
10 Programación en Internet Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript Funciones y Objetos en JavaScript Funciones Declaración function nomb_funcion ( lista_parametros ) { sentencias; Llamada: nomb_funcion ( valor_parametros ); Ejemplo: fichero func.js function aviso( error, funcion ) { alert( Error: +error+ en función +funcion); Funciones predefinidas isnan(dato) eval(expresion) escape(cadena) unescape(cadena) function raizcuadrada(x) { var dato; if ( x<0 ) aviso( Valor Negativo, raizcuadrada ); dato = Math.sqrt(x); return dato; 10
11 Funciones y Objetos en JavaScript Funciones Ejemplo 1 <html> <head> <script src="func.js"> <title>ejemplo funciones 1</title> </head> <body> <h1>ejemplo funciones 1</h1> <script> var d=prompt("dame valor","0"); document.write( <p>valor = "+raizcuadrada(d)+ </p> ); </body> </html> Funciones y Objetos en JavaScript Funciones Ejemplo 2 <html> <head> <script src="func.js"> <script> function actuar() { var v=parseint(f.dato.value); f.resultado.value=raizcuadrada(v); <title>ejemplo funciones 2</title> </head> <body> <h1>ejemplo funciones 2</h1> <form id="f"> Valor <input type"text" id="dato" /><br /> <input type="button" value="raiz" onclick="actuar()" /> Resultado <input type"text" id="resultado" /> </form> </body> </html> 11
12 Funciones y Objetos en JavaScript Objetos y métodos Creación function nomb_objeto ( lista_atributos ) { this.atributo1 = atributo1; this.atributo2 = atributo2;.. this.metodo1 = funcion1; this.metodo2 = funcion2; Utilización : objeto = new nom_objeto ( valores_atributos ); Ejemplo funcion Calculo ( x, y ) { this.x = x; o = new Calculo(4,4); this.y = y; valor1 = o.sumar; this.sumar = suma valor2 = o.restar; this.restar = resta function suma { return this.x + this.y ; function resta { return this.x + this.y ; Funciones y Objetos en JavaScript Objetos y métodos: Ejemplo 1 <html><head><title>ejemplo objetos 1</title> function Empleado() { this.nombre = prompt("introduzca el nombre del empleado: ", "Nombre"); this.edad = prompt("introduzca la edad de " + this.nombre, "00"); this.puesto = prompt("introduzca ocupación " + this.nombre, "Parado"); this.mostrarperfil = mostrarperfil; function mostrarperfil() { document.write("<h1>perfil del empleado</h1><hr />"); document.write("<h2>" + this.nombre + "</h2>"); document.writeln("<p>edad: " + this.edad); document.writeln("<br />Puesto: " + this.puesto+"</p>"); </head> <body> nuevoempleado = new Empleado() nuevoempleado.mostrarperfil() </body></html> 12
13 Funciones y Objetos en JavaScript Objetos y métodos: Ejemplo <html><head><title>ejemplo 7</title> function Empleado() { this.nombre = prompt("introduzca el nombre del empleado: ", "Nombre"); this.edad = prompt("introduzca la edad de " + this.nombre, "00"); this.puesto = prompt("introduzca ocupación " + this.nombre, "Parado"); this.mostrarperfil = mostrarperfil; function mostrarperfil() { document.write("<h1>perfil del empleado</h1><hr />"); document.write("<h2>" + this.nombre + "</h2>"); document.writeln("<p>edad: " + this.edad); document.writeln("<br />Puesto: " + this.puesto+"</p>"); </head> <body> nuevoempleado = new Empleado() nuevoempleado.mostrarperfil() </body></html> Funciones y Objetos en JavaScript Objetos predefinidos Objetos básicos Number Boolean String Array Date Math Windows Navigator 13
14 Objetos Predefinidos en JavaScript Objeto String: Toda variable tipo cadena es un objeto String Propiedades y métodos: Su utilización cadena.método length : longitud de la cadena anchor( ancla ): Crea un ancla con el identificador especificado. big() : Devuelve la cadena de caracteres con una fuente grande. blink() : Devuelve la cadena de texto con un efecto intermitente. charat(indice): Devuelve el carácter situado en la posición especificada. fixed() : Devuelve la cadena de caracteres con una fuente proporcional. fontcolor(color) : Devuelve la cadena con el color especificado. fontsize(tamaño) : Devuelve la cadena con el tamaño (1-7) indicado. indexof(cad, indice): Devuelve la posición de cad desde el índice indicado. italics(): Muestra la cadena en cursiva. lastindexof(cad, indice): Devuelve la posición de la última ocurrencia de cad. link(url): Devuelve la cadena como un enlace a la URL indicada. small(): Devuelve la cadena con fuente más pequeña split(separador): Devuelve la cadena separada con el separador especificado. strike(): Devuelve la cadena tachada. sub() : Devuelve la cadena con formato de subíndice. substring(indice1,indice2): Devuelve la subcadena entre indice1 e indice2. sup(): Devuelve la cadena con formato de superíndice. tolowercase(): Devuelve la cadena en minúsculas. touppercase() : Devuelve la cadena en minúsculas. Objetos Predefinidos en JavaScript Objeto String: Ejemplo <html><head><title>ejemplo Objeto: String</title> </head><body> var cad="<h1>introducción</h1>"; document.write(cad.anchor("intro")); <hr /> document.write("formula: ".fontcolor("red")); document.write("x"+"1".sub()+" = y"+"2".sup()); <!- - Continuación --> var c="desplazate hacía abajo</p>"; document.write("<p>"+c.blink()+"</p>"); <!-- más contenido --> var cad="<p>volver a la introducción</p>"; document.write(cad.link("#intro")); </body></html> 14
15 Objetos Predefinidos en JavaScript Objeto String: Ejemplo <html><head><title>ejemplo Objeto: String</title> </head><body> var cad="<h1>introducción</h1>"; document.write(cad.anchor("intro")); <hr /> document.write("formula: ".fontcolor("red")); document.write("x"+"1".sub()+" = y"+"2".sup()); <!- - Continuación --> var c="desplazate hacía abajo</p>"; document.write("<p>"+c.blink()+"</p>"); <!-- más contenido --> var cad="<p>volver a la introducción</p>"; document.write(cad.link("#intro")); </body></html> Objetos Predefinidos en JavaScript Objeto Array: Colección de elementos indexados. (Los elementos no tienen porque ser del mismo tipo) Declaración objarray = new Array(n_elementos); Es posible inicializarlo en su declaración new Array(lista_elementos); Ejemplos: c=new Array(10); vocales=new Array( a, e, i, o, u ); Uso: c[1] = 10; c[2]= Hola ; a=c[1]+4; Propiedades y métodos ( objarray.método ) length: devuelve el número de elementos del array. join(separador): Devuelve una cadena separada por el separador indicado reverse() : Devuelve el array con los elementos en orden invertido. sort() : Devuelve el array ordenado siguiendo el orden lexicográfico 15
16 Objetos Predefinidos en JavaScript Objeto Array: Ejemplo <html><head><title>ejemplo Objetos: Array</title> function tratararray(array, metodo) { switch (metodo) { case "join": return array.join("-");break; case "sort": return array.sort();break; case "reverse": return array.reverse(); </head><body> <h1>ejemplo de Arrays</h1> <hr /> vocales=new Array(0,2,1,4,3); document.write("<p>array separado por (-): "+tratararray(vocales,"join")+"</p>"); document.write("<p>array ordenado: "+tratararray(vocales,"sort")+"</p>"); document.write("<p>array inverso: "+tratararray(vocales,"reverse")+"</p>"); </body></html> Objetos Predefinidos en JavaScript Objeto Date: Manipulación de fechas Declaración objfecha = new Date([año, mes, día, hora, minutos, segundos]); donde año: xxxx, mes: 0-11, día: 1-(según mes), hora: 0-23, min y seg: 0-59 Ejemplo: fecha = new Date(); Principales 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 (D) y 6 (S). 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, un entero entre 0 y 59. getyear() : Devuelve el año actual como un entero, (para Netscape 0 es 1900). setdate(día_mes), setday(día_semana), sethours(horas), setminutes(minutos), setmonth(mes), setseconds(segundos), settime(milisegundos), setyear(año): Modifican la parte de la fecha indicada en el parámetro. togmtstring() : Devuelve una cadena con la especificación de zona horaria GMT. 16
17 Objetos Predefinidos en JavaScript Objeto Date: Ejemplo <html><head><title>ejemplo Objetos: Date</title> meses=new Array("Enero", "Febrero", "Marzo", "Abril"); semana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"); </head><body> <h1>ejemplo con Fechas</h1> <hr /> f=new Date(); var base=0; if (navigator.appname=="netscape") base=1900; var agno=base+f.getyear(); document.write(f.togmtstring()+"</p><hr />"); document.write("<p>en Huelva: "); document.write(semana[f.getday()]+", "); document.write(f.getdate()+" de "+meses[f.getmonth()]); document.write(" de "+agno); document.write(" a las "+f.gethours()+" horas "+f.getminutes()); document.write(" minutos "+f.getseconds()+" segundos.</p>"); </body></html> Objetos Predefinidos en JavaScript Objeto Date: Ejemplo <html><head><title>ejemplo Objetos: Date</title> meses=new Array("Enero", "Febrero", "Marzo", "Abril"); semana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"); </head><body> <h1>ejemplo con Fechas</h1> <hr /> f=new Date(); var base=0; if (navigator.appname=="netscape") base=1900; var agno=base+f.getyear(); document.write(f.togmtstring()+"</p><hr />"); document.write("<p>en Huelva: "); document.write(semana[f.getday()]+", "); document.write(f.getdate()+" de "+meses[f.getmonth()]); document.write(" de "+agno); document.write(" a las "+f.gethours()+" horas "+f.getminutes()); document.write(" minutos "+f.getseconds()+" segundos.</p>"); </body></html> 17
![appname=="netscape") base=1900; var agno=base+f.getyear(); document.write(f.togmtstring()+"</p><hr />"); document.write("<p>en Huelva: "); document.write(semana[f.getday()]+", "); document.write(f.getdate()+" de "+meses[f.](/docs-images/45/3119761/images/page_17.jpg "getmonth()]); document.write(\" de \"+agno); document.write(\" a las \"+f.gethours()+\" horas \"+f.getminutes()); document.write(\" minutos \"+f.getseconds()+\" segundos.")
18 Objetos Predefinidos en JavaScript Objeto Math: Funciones matemáticas Utilización Math. Metodo( )_o_propiedad; Propiedades E : Número 'e', base de los logaritmos naturales (neperianos). LN2 : Logaritmo neperiano de 2. LN10 : Logaritmo neperiano de 10. LOG2E : Logaritmo en base 2 de e. LOG10E : Logaritmo en base 10 de e. PI : Número PI. SQRT1_2 : Raíz cuadrada de 1/2. SQRT2 : Raíz cuadrada de 2. Ejemplo: Math.E; Math.PI Objetos Predefinidos en JavaScript Objeto Math: Funciones matemáticas Métodos abs(num): Valor absoluto. acos(num): Arcocoseno. 'num' debe estar en el rango [-1,1], si no devuelve NaN. asin(num): Arcoseno. 'num' debe estar en el rango [-1,1], si no devuelve NaN. atan(num): Arcotangente. Si num no es numérico devuelve NaN. atan2(x,y): Devuelve el ángulo formado por el vector (x,y) respecto al eje X. ceil(num): Devuelve el entero obtenido de redondear en exceso 'num'. cos(num): Coseno de 'num o NaN si éste no es numérico. exp(num): Devuelve e num. floor(num): Devuelve el entero obtenido de redondear por defecto 'num'. log(num): Devuelve el logaritmo neperiano de 'num'. 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: Devuelve base exp. random(): Devuelve un número pseudoaleatorio entre 0 y 1. round(num): Redondea 'num' al entero más cercano. sin(num): Devuelve el seno de 'num' o NaN. sqrt(num): Devuelve la raíz cuadrada de número. tan(num): Devuelve la tangente de 'num' o NaN. 18
19 Funciones y Objetos en JavaScript Funciones y Objetos en JavaScript Objeto Navigator: Información del navegador Propiedades appcodename. Código del Navegador. appname: Nombre del Navegador. appversion: Versión del Navegador. language (NS) o systemlanguage (IE): Idioma del Navegador. mimetypes: Array que contiene todos los tipos MIME soportados por el Navegador. platform: Nombre de la plataforma sobre la que se ejecuta el Navegador. plugins: Array que contiene todos los plug-ins soportados por el Navegador. useragent: Información de cabecera enviada en una petición HTTP. Ejemplo navigator.appname Netscape Microsoft Internet Explorer 19
20 Funciones y Objetos en JavaScript Objeto window: Objeto principal de la jerarquía. Información de la ventana donde se muestra el documento HTML. Propiedades principales closed: Valor booleano que inica si si la ventana está cerrada. defaultstatus: Valor por defecto para la barra de estado del navegador. frames: Array con los marcos (frames[0], frames[1],...) que contiene la ventana. Su orden se asigna según se definen en el documento HTML. history: Array con las direcciones (URL s) visitadas en la ventana (historial). length: Número de marcos (frames) que tiene la ventana. location : Dirección (URL) actual mostrada en ventana. name : Nombre de la ventana. opener : Referencia al objeto window que abrió está ventana. parent : Referencia al objeto window que contiene el frameset. self y window : Nombres alternativo para la ventana. status : Información de la barra de estado. top : Nombre de la ventana del nivel superior. Funciones y Objetos en JavaScript Objeto window: Objeto principal de la jerarquía. Información de la ventana donde se muestra el documento HTML. Métodos principales (I) alert(msj) : Muestra el mensaje 'msj' en un cuadro de diálogo confirm(msj) : Muestra un cuadro de diálogo con el mensaje 'msj' y dos botones: Aceptar y Cancelar. Devuelve true si se pulsa aceptar y false si se pulsa cancelar. prompt(msj, defecto) : Muestra un cuadro de diálogo con el mensaje msj y una caja de texto. El parámetro 'defecto' es opcional, y muestra la respuesta por defecto. El método devuelve la respuesta introducida en el cuadro de texto. settimeout(func, retardo) : Establece un retardo, en milisegundos, antes de evaluar func. Devuelve un identificador. setinterval(func, retardo) : Establece un intervalo, en milisegundos, para evaluar func, periódicamente. Devuelve un identificador. cleartimeout(id) : Cancela el retardo id. clearinterval(id) : Cancela el intervalo id. 20
![frames: Array con los marcos (frames[0], frames[1],...) que contiene la ventana. Su orden se asigna según se definen en el documento HTML.](/docs-images/45/3119761/images/page_20.jpg "history: Array con las direcciones (URL s) visitadas en la ventana (historial). length: Número de marcos (frames) que tiene la ventana. location : Dirección (URL) actual mostrada en ventana.")
21 Funciones y Objetos en JavaScript Objeto window: Objeto principal de la jerarquía. Información de la ventana donde se muestra el documento HTML. Métodos principales (y II) open(url, nombre, opciones) : Abre una ventana nueva con la url indicada. Donde opciones establecen las características de la nueva ventana. Estas son: directories / location / menubar / resizable / scrollbars / status / toolbar (yes/no/ 1/0) width / heigth / top / left / outerwidth / outerheight (pixels) Ejemplo: ventnueva=open(, Prueba, directories=no, toolbar=yes ); close() : Cierra la ventana. focus() : Asigna el foco sobre la ventana. blur() : Elimina el foco de la ventana. moveby(x, y) : Mueve la ventana hor. y vert. el número de pixels x e y, respect. moveto(x, y) : Mueve la ventana a las coordenadas (x, y). scrollto(x, y) : Desplaza el contenido de la ventana a las coordenadas (x, y). scrollby(x, y) : Desplaza el contenido x e y pixels, hor. y vert., respectivamente. Funciones y Objetos en JavaScript Objeto window: Ejemplo. <html> <head> <title> Ejemplo Objeto Windows </title> <script type= text/javascript"> var v; function a() { var opciones = "left=100,top=100,width=250,height=150"; v = window.open("", "", opciones); v.document.write("<h1>nueva Ventana</h1>"); settimeout("b()",2000); settimeout("c()",4000); settimeout("v.close()",6000); function b() { v.moveby(200, 200); v.document.write("<p>movimiento desde función b().</p>"); function c() { v.moveto(500, 100); v.document.write("<p>movimiento desde función c().</p>"); </head> <body><h1>ejemplo con Objeto Window</h1> <script type= text/javascript"> a(); </body> </html> Ejemplo ej-objetowindow.html 21
22 Funciones y Objetos en JavaScript Objeto frame: Información sobre los marcos que contiene una ventana. <html> <head> <title> Frame superior </title> <script> function escribiren(opcion, Texto) { var marco; if (Opcion[0].checked) marco=top.izquierdo; else marco=top.derecho; marco.document.write(texto.value); Texto.value=""; </head> <body> Escribe un texto y elige el marco para escribirlo. <form> Texto : <input type="text" name="texto" size="20"><br /> Marco: <input type="radio" name="opcion" value="izq" checked="checked">izquierdo <input type="radio" name="opcion" value="der">derecho<br /> <input type="button" value="escribir" onclick="escribiren(this.form.opcion, this.form.texto);"> </form> </body> </html> Ejemplo ej-objetoframe.html Funciones y Objetos en JavaScript Objeto Location: Información sobre la URL visualizada. Propiedades: hash : Nombre del enlace, dentro de la URL. host : Nombre de dominio y número del puerto en la URL. hostname : Nombre de dominio (o dirección IP) en la URL. href : Cadena URL completa. pathname : Ruta al recurso solicitado por la URL. port : Puerto especificado en la URL protocol : Protocolo utilizado (incluyendo los dos puntos), dentro de la URL. search : Información pasada en una llamada a un script CGI, dentro de la URL. Métodos: reload() : vuelve a cargar la URL especificada en la propiedad href del objeto location. replace(cadenaurl) : Reemplaza el historial actual mientras carga la URL especificada en cadenaurl. Ejemplo: location.replace( ); Ejemplo ej-objetolocation.html 22
23 Funciones y Objetos en JavaScript Objeto history: Histórico de páginas visitadas. Propiedades: current : URL de la entrada actual en el historial. next : URL de la siguiente entrada en el historial. previous : URL de la anterior entrada en el historial. length : Número de entradas en el historial. Métodos: back() : cargar la URL anterior en el historial. forward() : cargar la URL siguiente dentro del historial. go(pos) : cargar la URL especificado por 'pos' dentro del historial. Funciones y Objetos en JavaScript Objeto document: Contenido de la página visualizada. Propiedades: alinkcolor : Color de los enlaces activos anchors : Array con los anclas (enlaces internos) existentes en el documento applets : Array con los applets existentes en el documento bgcolor : Color de fondo del documento cookie : Valores de las cookies del documento actual domain : Nombre del servidor que ha servido el documento fgcolor : Color del primer plano forms : Array con los formularios del documento. images : Array con todas las imágenes del documento. lastmodified : Fecha de la última modificación del documento. linkcolor : Color de los enlaces links : Array con los enlaces externos location : URL del documento actual referrer : URL del documento que llamó al actual, en caso de usar un enlace. title : Título del documento actual vlinkcolor : Color de los enlaces visitados 23
24 Funciones y Objetos en JavaScript Objeto document: Contenido de la página visualizada. Métodos: clear() : Borra la ventana del documento. close() : Cierra la escritura sobre el documento. open(mime, "replace") : Abre la escritura sobre el documento, donde mime es el tipo de documento y replace (opcional) reusa el documento anterior en el historial. write() : Escribe texto en el documento. writeln() : Escribe texto en el documento, y además lo finaliza con un salto de línea. getelementby(id) : Devuelve el elemento con identificador id del documento Objetos principales que contiene: link anchor image form Funciones y Objetos en JavaScript Objeto document: Ejemplo document.cookie Las cookies proporcionan una manera de conservar información entre peticiones del cliente. El cliente enviará esta información al servidor en cada petición. La información se guarda en pares nombre=valor. Otras propiedades opcionales: Fecha caducidad. Fecha hasta la que la cookie estará almacenada. Ruta. Permite establecer una ruta a la que se enviará la cookie. (ej. /necesitocookie) Dominio de aplicación. Permite establecer un dominio al que enviar la cookie. (ej. uhu.es) Trasmisión. Tipo de transmisión: segura (secure) o no. Asignar cookie: document.cookie = nombre=valor ; expires=fechagmt ; path=ruta ; domain=dom ; secure; Consultar: Mostar el valor de document.cookie. Por ejemplo: alert(document.cookie); Eliminar: Basta crearla de nuevo con una fecha anterior (p.e. 1/1/1970) para que la elimine el navegador. Ejemplo ej-documentcookie.html 24
25 Funciones y Objetos en JavaScript Objeto link: Información de un enlace. Propiedades: target : Ventana o frame especificado en el parámetro target del enlace. hash : Nombre del ancla usada en el enlace. host : Nombre de dominio y número de puerto del enlace. hostname : Nombre de dominio (o la dirección IP) href : URL completa pathname : Rura al recurso del enlace. port : Número de puerto. protocol : Protocolo usado, incluyendo los : (los dos puntos). search : Información pasada en una llamada a un script CGI. Ejemplo: document.links[i].href Objeto anchor: Información de un enlace interno (anclas). Ejemplo Propiedades: name : (sólo netscape) URL completa target : (sólo IE) Ventana o frame especificado en el parámetro target del enlace. ej-objetolink.html Ejemplo: document.anchors.length; document.anchors[j].name; Funciones y Objetos en JavaScript Objeto image: Información de imágenes del documento. Propiedades: name : Nombre (name) asignado a la imagen. src : Ubicación (src) de la imagen. width : Ancho (width) de la imagen. height : Altura (height) de la imagen. border : Border de la imagen. complete : Booleano que indica si la imagen se ha descargado completamente hspace : Parámetro 'hspace' de la imagen vspace : Parámetro 'vspace' de la imagen lowsrc : Parámetro 'lowsrc' de la imagen prototype : Permite crear nuevos parámetros para este objeto Ejemplo: document.images[0].width *= 2; Ejemplo ej-objetoimage.html 25
26 Funciones y Objetos en JavaScript Objeto form: Información de formulario. Propiedades: name : Nombre del formulario (parámetro name). elements : Array con todos los elementos del formulario. action : Parámetro action del formulario. method : Método que va a recibir/procesar la información del formulario (get/post). Métodos: reset() : Resetea el formulario. El mismo efecto que click en un botón de tipo reset. submit() : Envía el formulario. El mismo efecto que click en un botón de tipo submit. Objetos internos: text, password y textarea button, submit y reset checkbox radio buton select Funciones y Objetos en JavaScript Objeto text, password y textarea. Propiedades: name : Nombre del elemento (parámetro name) value : Valor del elemento (parámetro value) defaultvalue : Valor por defecto Métodos: blur() : Quita el foco sobre el objeto especificado focus() : Asigna el foco sobre el objeto especificado select() : Selecciona el texto dentro del objeto dado Objeto button, submit, reset. Propiedades: name : Nombre del elemento (atributo name) value : Valor del elemento (aributo value) Métodos: click(): Acción de pulsado del botón 26
27 Funciones y Objetos en JavaScript Objeto checkbox. Propiedades: checked : Booleano que indica si el checkbox está pulsado. defaultchecked : Booleano que indica si el checkbox está seleccionado por defecto. name : Nombre del checkbox (atributo name). value : Valor de checkbox (atributo value). Métodos: click() : Acción de pulsado del checkbox Objeto radio button. Propiedades: checked : Booleano que indica si el radio está seleccionado. defaultchecked : Booleano que indica si el radio está seleccionado por defecto. length : Número de opciones dentro de un grupo de elementos radio name : Nombre del radio button (atributo name). value : Valor del racio button (atributo value) Métodos: click(): Acción de pulsado de la opción del radio button Funciones y Objetos en JavaScript Objeto select. Propiedades: length : Número de opciones tiene la lista name : Nombre de la lista (atributo name) options : Array que contiene las opciones de la lista. Sus propiedades son: defaultselected: Booleano que indica si la opción está seleccionada por defecto index: Posición de la opción dentro de la lista length: Número de opciones tiene la lista options: Código HTML de la lista selected: Booleano que indica si la opción está seleccionada text: Texto mostrado en la lista de una opción. value: Valor de una opción de la lista selectedindex : Posición de la opciones que está actualmente seleccionada. 27
28 Programación en Internet Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript Eventos en JavaScript Eventos (lo definiremos aquí como) Un suceso que se produce en un documento HTML y requiere tratamiento mediante un script (JavaScript) Posibles eventos - cargar la página (onload, unload) - clic en un enlace o botón (onclick) - Movimiento del ratón por un elemento (onmouseover, onmouseout) - Acciones en un formulario (onsubmit, onreset) - Cambio del valor de un campo (onchange) - Activar (foco) de un elemento (onfoco, onblur) - Selección de texto (onselect) - Pulsar teclas (onkeydown, onkeyup, onkeypress) - Pulsar boton del ratón (onmousedown, onmouseup) Manejo de eventos <etiqueta onevento= codigo_javascript > Ejemplo: <a href= onclick= preguntar() >UHU</a> 28
29 Eventos en JavaScript onload onunload onclick onsubmit onreset onfocus onblur onselect onabord onkeydown onkeyup onkeypress onmousedown onmouseup onresize Evento onmouseover onmouseout onchange Se pulsa el boton izq del ratón Se resetea el formulario Se recibe el foco Se pierde el foco Se selecciona texto Causa El documento se carga El documento se descarga El ratón pasa sobre una zona El ratón sale de una zona Se envía un formulario Cambia el contenido Se interrumpe la carga Pulsar una tecla Se deja de pulsar una tecla Se deja pulsada una tecla Pulsar un botón del ratón Dejar de pulsar un botón del ratón Redimensionar una ventana <body> <body> button, submit, reset, radio, checkbox, <a href> y un Area <a href> y cualquier Area <a href> y cualquier Area <form> <form> text y TextArea text y TextArea text y TextArea text y TextArea <body> <img> Text y TextArea <a href>, button, submit, reset <body> Principales Etiquetas Eventos en JavaScript Ejemplo 1: onload / onunload <html> <head> <title>página principal</title> <script language="javascript"> var mevotastes=false; function pedirvoto(){ if (confirm( Votación: Te gusta mi web?")){ mevotastes=true; open(" function agradecer(){ if (mevotastes){ alert("muchas gracias por tu voto"); </head> <body onload="pedirvoto()" onunload="agradecer()"> <h1>mi Página Web</h1> <p> Bla, bla, bla,... </p> <p> <br />. </p> </body> </html> Ejemplo ej-eventoonload.html 29
30 Eventos en JavaScript Ejemplo 2: onclick <html> <head> <title>página principal</title> <script language="javascript"> function tratarclick(obj){ switch(obj.id) { case "enl" : alert("click en Enlace");break; case "tab" : alert("click en Tabla");break; case "fbt" : alert("click en boton de formulario");break; case "fcb" : alert("click en checkbox de formulario");break; </head> <body> <h1>ejemplo onclick</h1> <p><a id="enl" href="" onclick="tratarclick(this)">enlace</a></p> <table id="tab" border="1" onclick="tratarclick(this)"> <tr><td>celda1</td><td>celda2</td></tr></table> <p> <form id="form" name="formulario" method="" action=""> <input type= checkbox" id= fcb onclick="tratarclick(this) /> CheckBox<br /> <input id="fbt" type="button" value="enviar" onclick="tratarclick(this) /> </form> </p> </body> </html> Ejemplo ej-eventoonclick.html Eventos en JavaScript Ejemplo 3: onmouserover / onmouseout <html> <head> function colorfondo(bool) { var p=document.getelementbyid("par"); if (bool) p.classname = "conraton"; else p.classname = "sinraton"; </head> <body> <h1>ejemplo onmouserover / onmouseout </h1> <p id="par" class="sinraton" onmouseover="colorfondo(true) onmouseout="colorfondo(false)"> Pasa el ratón por aquí </p> </body> </html> <style type="text/css">.sinraton { font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; background-color: #999999; border: thin ridge #006666;.conRaton { font-family: Arial; font-size: 12px; font-weight: bold; color: #999999; background-color: #993300; border: thin inset #00CC66; </style> Ejemplo ej-eventomouse.html 30
31 Eventos en JavaScript Ejemplo 4: onsubmit <html> <head> <title>página principal</title> <script language="javascript"> function validar(f){ if(f.nombre.value=="") {alert("introduce Nombre"); return false; if(f.apellido.value=="") {alert("introduce Apellido"); return false; if(f. .value=="") {alert("introduce Correo"); return false; 0)==-1) {alert("introduce Correo correcto"); return false; return true; </head> <body> <h1>ejemplo onsubmit</h1> <form name="formulario" method="post" action="procesar.jsp" OnSubmit="return validar(this)"> Nombre: <input type="text" name="nombre"><br /> Apellido: <input type="text" name="apellido"><br /> Correo : <input type="text" name=" "><br /> <input type="submit" name="submit" value="enviar"> </form> Ejemplo </body> </html> ej-eventoonsubmit.html Tema 3. JavaScript Resumen 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y Métodos 4. Eventos en JavaScript Referencias Libro: Capítulos Internet & WWW: How to Program. Capítulo 5. Programación de Aplicaciones Web. W3 Schools, 31
JavaScript DOM. JavaScript - Jerarquía de Objetos. JavaScript - Jerarquía de Objetos. Jerarquía de Objetos del Navegador
JavaScript Jerarquía de Objetos del Navegador DOM 1 Son los objetos disponibles en Javascript para controlar cualquier elemento en una página web. Javascript trabaja con esta jerarquía de objetos. Con
Modelo de objetos de documento
Departamento de Lenguajes y Sistemas Informáticos Modelo de objetos de documento Programación en Internet Curso 2004-2005 Índice Introducción Modelo de Netscape Cómo acceder a un formulario DLSI - Universidad
JavaScript Básico. Ejemplo. Arreglos en JavaScript Creación de Arreglos. Asignación de valores. var miarray = new Array() var miarray = new Array(10)
1 JavaScript (III) JavaScript Básico Arreglos en JavaScript Creación de Arreglos var miarray = new Array() var miarray = new Array(10) Asignación de valores. miarray[0] = 1 miarray[1] = 0.5 miarray[2]
Diseño de Aplicaciones Web: JavaScript Marzo de 2015 Diseño de Aplicaciones Web 1
: JavaScript 1 Características JavaScript es un lenguaje de programación interpretado. 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
JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.
1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas
HTML dinámico: Javascript
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)
BOM. Browser Object Model
1 BOM Browser Object Model INTRODUCCIÓN El BOM o Browser Object Model, permite acceder y modificar las propiedades de las ventanas del propio navegador. Es posible redimensionar y mover la ventana del
Tema 2: JavaScript. Lenguaje interpretado. 1. Introducción.
Tema 2: JavaScript. 1. Introducción. 2. Sintaxis. 3. Cadenas, Matrices y Objetos. 4. Eventos. 5. Modelo de Objetos. 6. Aplicaciones. Tema 2: JavaScript 1 1. Introducción. Lenguaje interpretado. Creado
El lenguaje JavaScript. Asignatura: Fonaments Cartografia i SIG Curso: 2006/07 Profesor: Toni Navarrete
El lenguaje JavaScript Asignatura: Fonaments Cartografia i SIG Curso: 2006/07 Profesor: El lenguaje Javascript Pág. 1 1. Introducción JavaScript es un sencillo lenguaje de programación, que presenta una
HTML, PHP y bases de datos
HTML, PHP y bases de datos Estrella Pulido Cañabate HTML Estructura de un documento HTML Zen and Tumbolia The Zen monk Bassui wrote a letter to one of his disciples
CONTROLES FORMULARIOS PRIMERA PARTE
CONTROLES FORMULARIOS PRIMERA PARTE Acceder a los formularios de una página a través de su nombre Acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
Tomar información por pantalla con JavaScript
Tomar información por pantalla con JavaScript Para lograr interactividad con nuestros usuarios, es necesario reaccionar a sus acciones o permitir que estos ingresen información para que sea manipulada,
Curso de JAVASCRIPT 3 / 3
Curso de JAVASCRIPT 3 / 3 Autor: Luis Marco Giménez ibliografía: avascript. The Definitive Guide 2 O Reilly. iseño de páginas web interactivas con avascript 2ª Ed. 2 Ra-Ma rofessional JavaScript 2 Wrox
HTML Dinámico: JavaScript. HTML Dinámico: JavaScript. Grupo de Ingeniería del Software. Departamento de Lenguajes y Sistemas Informáticos HTTP TCP/IP
escuela técnica superior de ingeniería informática HTML Dinámico: JavaScript Departamento de Lenguajes 2005 Cliente web HTTP TCP/IP Servidor de aplicaciones SQL Servidor de datos Validación Validación
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
2- Formularios y JavaScript Course: Developing web- based applica=ons
2- Formularios y JavaScript Course: Developing web- based applica=ons Cris*na Puente, Rafael Palacios 2010- 1 Creación de formularios Formularios Un formulario HTML es una sección de un documento que contiene
TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIÓN DE CAMPOS EN FORMULARIOS HTML:
TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIÓN DE CAMPOS EN FORMULARIOS HTML Página 1 de 6 TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIÓN DE CAMPOS EN FORMULARIOS
JavaScript. El modelo de objetos. Tecnologías web 17. El modelo de objetos de JavaScript. Los objetos del navegador. Los objetos del navegador
JavaScript Tecnologías web 17 El modelo de objetos El modelo de objetos de JavaScript En JavaScript los objetos pueden ser considerados colecciones de propiedades (los atributos, su contenido) y métodos
APRENDE A CREAR UNA PÁGINA WEB CON HTML
APRENDE A CREAR UNA PÁGINA WEB CON HTML Introducción a PHP INTRODUCCIÓN PHP es una lenguaje de programación del lado del servidor. En este curso, lo usaremos para recibir los datos de un formulario, realizar
EXTENSIÓN DE UML PARA APLICACIONES WEB
EXTENSIÓN DE UML PARA APLICACIONES WEB 1. Descripción Esta extensión de UML define un conjunto de estereotipos, valores etiquetados y restricciones que nos permiten modelar aplicaciones web. Los estereotipos
JavaScript. Contenidos. Introducción El lenguaje Validación de formularios. Programación en Internet 2005-2006. DLSI - Universidad de Alicante 1
Departamento de Lenguajes y Sistemas Informáticos JavaScript Programación en Internet Curso 2005-2006 Contenidos Introducción El lenguaje Validación de formularios DLSI - Universidad de Alicante 1 Introducción
El lenguaje JavaScript. Asignatura: Programació III Curso: 1999/2000 Profesor: Toni Navarrete
El lenguaje JavaScript Asignatura: Curso: 1999/2000 Profesor: El lenguaje Javascript Pág. 1 1. Introducción Al crear páginas web en HTML nos damos cuenta de que estamos ciertamente restringidos a sólo
AGRADECIMIENTOS INTRODUCCIÓN... 17
ÍNDICE AGRADECIMIENTOS... 15 INTRODUCCIÓN... 17 CAPÍTULO 1. CONCEPTOS BÁSICOS DE XHTML... 21 REGLAS DEL XHTML A TENER EN CUENTA... 22 ESTRUCTURA DE UN DOCUMENTO XHTML... 24 El DOCTYPE y la codificación...
Programa. Conceptos básicos: variables, valores y objetos predefinidos, operadores, etc. etc. Callbacks, eval(), etc.
Programa Programa 1. Introducción. Repaso HTML-CSS. Orientaciones Generales. 2. Javascript: Qué es? Dónde se ejecuta? Cómo se ejecuta? Conceptos básicos: variables, valores y objetos predefinidos, operadores,
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos
Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones
Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones 4.3.1 Manejo de Cookies 4.3.2 Manejo de Sesiones 4.3.3 Aplicación basada en sesiones Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones 4.3.1 Manejo
JavaScript. manual de referencia
JavaScript manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en el lenguaje JavaScript compatible para los navegadores Explorer y Netscape. Versión normalizada de la ECMA
XPERTO EN DISEÑO DE PÁGINAS WEB
Curso ICA de: EXPERTO EN DISEÑO DE PÁGINAS WEB Módulo 1: Program. cliente: JavaScript Estudia el lenguaje JavaScript para crear guiones o scripts que se incluyen en las páginas web y que son ejecutados
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
Curso PHP Módulo 1 R-Luis
Lenguaje PHP Introducción Archivos HTML y PHP: Crear un archivo php es tan sencillo como cambiarle la extensión a un archivo html, por ejemplo podemos pasar de index.html a index.php sin ningún inconveniente.
PHP. Introducción (1) Introducción (3) Introducción (2) PHP 1
Introducción (1) Personal Home Page Qué es? Acrónimo de : Hypertext Preprocessor. Lenguaje interpretado de alto nivel que permite desarrollar fácilmente páginas dinámicas. Similar a los lenguajes C y Perl.
Desarrollo y servicios web
Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1 Qué vimos la clase pasada? 1. Fin tutorial HTML 2. Nombres de dominio 3. URLs 3 Sesión 4. Método GET - POST Qué haremos hoy? 1. Tipos de solicitudes
Alumn@: U.T. 6.- Lenguaje Javascript - DOM. Parte Práctica
E-mail: [email protected] Pág. 1 U.T. 6.- Lenguaje Javascript - DOM. Parte Práctica Alumn@: Ejercicio 1.- Calculadora tabla formulario. Realiza una página implemente una calculadora aritmética. Para ello haz
1. Los lenguajes de marcas. - Características de los lenguajes de marcas.
IFCD0110: CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB CÓDIGO ESPECIALIDAD C.P. PRESEN- CIALES TELEFORMA- CIÓN TOTALES TIPO DE FORMACIÓN IFCD0110 CONFECCIÓN Y PUBLICA- CIÓN DE PÁGINAS WEB SI 200 280 480 OBJETIVOS
Operaciones básicas, fórmulas, referencias absolutas, relativas y mixtas.
Módulo 3 Herramientas de Cómputo Operaciones básicas, fórmulas, referencias absolutas, relativas y mixtas. Operaciones Básicas Las operaciones básicas que se realizan en una hoja de cálculo son: Seleccionar
Ejercicio: Mensajes Alert, Confirm y Prompt
Ejercicio: Mensajes Alert, Confirm y Prompt Utilizando Javascript podemos crear tres diferentes tipos de mensajes emergentes que se pueden usar para mostrar información, obtener confirmación u obtener
CapÍtulo 3: Manejo de Forms.
CapÍtulo 3: Manejo de Forms. El mecanismo básico de interacción entre el usuario y un web-site esta dado por el uso de formularios html, el server envía un formulario que el browser muestra en pantalla
BANNERS CÍCLICOS CON JAVASCRIPT
BANNERS CÍCLICOS CON JAVASCRIPT ÍNDICE 1. INTRODUCCIÓN. 2. BANNERS CÍCLICOS. 2.1.BANNER CÍCLICO. 2.2.BANNERS CÍCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PÁGINA. 2.3.AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS.
Que es PHP? Que se puede hacer con PHP? Sintaxis del lenguaje. Variables. Operadores básicos. Condicionales. Ciclos.
Que es PHP? Que se puede hacer con PHP? Sintaxis del lenguaje. Variables. Operadores básicos. Condicionales. Ciclos. Qué es PHP? PHP (Hypertext Preprocessor). Es un lenguaje de programación: De código
Imágenes y objetos IMÁGENES
IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 8: PHP 2 (cookies y sesiones) 1. Objetivos Conocer el concepto de cookie y sus posibles usos. Aprender a utilizar las cookies con PHP. Conocer el concepto
JavaScript como Orientación a Objetos
Gustavo Lacoste ([email protected]) October 2012 Resumen El objetivo de las siguientes notas es generar una estructura en JavaScript que nos permita reutilizar de manera limpia las funciones creadas
Ejemplos básicos de webmathematica para profesores
Ejemplos básicos de webmathematica para profesores Cualquier cálculo hecho dentro Mathematica puede ser realizado usando webmathematica con dos limitaciones significativas. Primero, al usar webmathematica,
Una variable de clase escalar tiene un nivel de indirección igual a 1. Por ejemplo, las variables i, b y x definidas como se muestra a continuación.
Descripción de la semántica de ALFA En esta descripción sólo se mencionarán los aspectos en los que el lenguaje de programación ALFA pueda diferir de otros lenguajes de programación de alto nivel. Se sobreentienden
GUÍA DE USUARIO DEL CORREO
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN DIRECCIÓN GENERAL DE LA OFICINA DE ADMINISTRACIÓN Y SERVICIOS DIVISIÓN DE SOPORTE TÉCNICO Y FORMACIÓN AL USUARIO GUÍA DE
2.5. Manipular objetos y formularios en una página Web.
2.5. Manipular objetos y formularios en una página Web. Un formulario es una página web en la cual el usuario puede introducir información que posteriormente recibiremos para que sea procesada, por alguna
PROGRAMACIÓN PÁGINAS WEB JAVASCRIPT Y PHP
PROGRAMACIÓN PÁGINAS WEB JAVASCRIPT Y PHP OBJETIVOS Estudiar la programación de la parte cliente con JavaScript y la programación de la parte servidor con la tecnología PHP y el servidor de bases de datos
Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]
![Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]](/thumbs/29/13637404.jpg "Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]")
INFORMÁTICA Y COMUNICACIONES Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2] Confección y publicación de páginas web Contenidos I IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD
3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.
3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc
Manual de PHP Básico - WebEstilo
(páx. 1) http://leliadoura.com.es/dai/phpwebestilo/manual/basico/index.html (páx. 1) Manual de PHP Básico - WebEstilo Iniciación a PHP - Conceptos Básicos - Nuestro primer PHP - Variables Operadores en
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana
EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente
Bases de Datos. Marta Elena Zorrilla Pantaleón. Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN
Bases de Datos Tema 05. Prototipo de una aplicación de base de datos Marta Elena Zorrilla Pantaleón Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN Este tema se publica bajo Licencia:
Partes del formulario
Partes del formulario Etiqueta La etiqueta presenta los siguientes atributos: Comando ACTION METHOD ENCTYPE Descripción El valor de este parámetro es la URL del programa o script en el Servidor
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Sintaxis del JavaScript
Sintaxis del JavaScript El código JavaScript del que hablaremos en este manual va embebido en un documento HTML, y no tendremos en cuenta la reciente aparición de los scripts de servidor que pueden ir
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR 2.4 FORMULARIOS 18/10/2014 Taboada León IES San Sebastián Huelva 1 Formularios (I) Los formularios permiten al usuario introducir
MANUAL DE USO DE LA APLICACIÓN
MANUAL DE USO DE LA APLICACIÓN ÍNDICE 1. Acceso a la aplicación 2. Definición de funciones 3. Plantillas 4. Cómo crear una nueva encuesta 5. Cómo enviar una encuesta 6. Cómo copiar una encuesta 7. Cómo
Denominación: PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS WEB. Código: UF1305
UNIDAD FORMATIVA 1 Denominación: PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS WEB. Código: UF1305 1. Metodología de la programación 1.1Lógica de programación. 1.1.1Descripción y utilización de operaciones
Tutorial de carga de fotos en www.sonmisamigos.es
Tutorial de carga de fotos en www.sonmisamigos.es Este documento describe paso a paso como cargar un conjunto de fotografías en la web www.sonmisamigos.es Paso 1: Seleccionar las fotos a cargar Antes de
Fórmulas y funciones
Fórmulas y funciones Uso de fórmulas Las fórmulas son el corazón y el alma de la hoja de cálculo. Si no las necesitáramos sería lo mismo que trabajáramos en un procesador de textos. Excel 2007 ofrece un
GUÍA DE TRABAJO N 3 C# Ing. Néstor Raúl Suarez Perpiñan Página 1 de 10. Tema: APLICACIONES WINDOWS FORMS LENGUAJE C#
Página 1 de 10 Tema: APLICACIONES WINDOWS FORMS LENGUAJE C# Objetivo: Conocer y aplicar correctamente las diferentes estructuras de programación que hacen parte del lenguaje de Programación C# en una Aplicación
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS Servicio DNS - 1 - Servicio DNS...- 3 - Definición... - 3 - Instalación... - 5 - Configuración del Servidor DNS...- 10 - - 2 - Servicio DNS Definición
[email protected]
Programación de páginas web con PHP Curso de desarrollo de aplicaciones web. Para ello se estudia la programación de la parte cliente con JavaScript y la programación de la parte servidor con la tecnología
ENLACES EMAILS Y ANCLAS. ENLACES Y EMAILS ( Link)
ENLACES EMAILS Y ANCLAS Enlaces y E-mails 1.1 URL 1.1.1 Información de Enlace 1.1.2 Objetivo 1.1.3 Subir 1.2 Enlace a la barra en el texto 1,3 E-mail 1.4 Opciones avanzadas 2 Anclas ENLACES Y EMAILS (
2_trabajar con calc I
Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,
Preliminares. Tipos de variables y Expresiones
Preliminares. Tipos de variables y Expresiones Felipe Osorio Instituto de Estadística Pontificia Universidad Católica de Valparaíso Marzo 5, 2015 1 / 20 Preliminares Computadoras desarrollan tareas a un
Definiciones. Tema 21_Módulos Menú 1
Definiciones Un menú es una lista de opciones o de órdenes que forman parte de un mismo título, mediante los cuales se podrán seleccionar determinadas operaciones de la aplicación. El conjunto de todos
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
Tema 4. II - Cookies. Arquitecturas Distribuidas 11/12
Tema 4. II - Cookies Arquitecturas Distribuidas 11/12 1 II. Cookies 1. Necesidad de mantener información de estado y HTTP 2. Sesiones 3. Qué son las cookies? 4. Funcionamiento de cookies 5. Envío de cookies
MANUAL DE USUARIO DESKTOP
2013 TEM SOLUCIONES MANUAL DE USUARIO DESKTOP Usuario Desktop Tem Soluciones TABLA DE CONTENIDO INTRODUCCIÓN... 3 LOGIN... 4 Login... 4 PÁGINA DE BIENVENIDA... 4 ENVIAR SMS... 5 Solo SMS (Single SMS):...
PL/SQL. Con PL/SQL vamos a poder programar las unidades de programa de la base de datos Oracle:
PL/SQL (Procedural Language/Structured Query Language) PL/SQL es el lenguaje de programación que proporciona Oracle para extender el SQL estándar con otro tipo de instrucciones y elementos propios de los
Páginas web ::: Cómo diseñar un menú de navegación? Diseño de materiales multimedia. Web 2.0. 1.14 Cómo diseñar un menú de navegación?
111 1.14 Cómo diseñar un menú de navegación? 112 1.14 Cómo diseñar un menú de navegación? En este apartado vamos a describir el procedimiento de creación de un menú de navegación para un sitio web con
Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO]
![Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO]](/thumbs/24/2759618.jpg "Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO]")
Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones Conceptos Lo primero que necesitamos para crear una aplicación o proyecto web es seleccionar el entorno del Visual
Clases y objetos en JavaScript
Clases y objetos en JavaScript Sergio Luján Mora Departamento de Lenguajes y Sistemas Informáticos JavaScript Nombre original: Mocha LiveScript (1995) Netscape 2.0B3 (diciembre 1995) Lenguaje más estándar
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
Programación Hipermedia I
Programación Hipermedia I Práctica 5: JavaScript 1. Objetivos Aprender el lenguaje de programación JavaScript. Aprender a manejar el DOM de una página web para acceder a su contenido. Aprender a validar
RESUMEN DE CONCEPTOS BASICOS DE PROGRAMACION JAVA
UNED Centro Asociado de Cádiz RESUMEN DE CONCEPTOS BASICOS DE PROGRAMACION JAVA 1. OBJETOS Cualquier elemento del programa es un objeto. Un programa es un conjunto de objetos que se comunican entre sí
COPIAS DE SEGURIDAD AUTOMÁTICAS DE DIRECCIONES CALLEÇPAÑA
COPIAS DE SEGURIDAD AUTOMÁTICAS DE DIRECCIONES CALLEÇPAÑA Autor: Carlos Javier Martín González. Licenciado en Física Teórica por la Universidad Autónoma de Madrid. Analista programador y funcional. Desarrollador
CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP
CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP Características del Explorador de Windows El Explorador de Windows es una de las aplicaciones más importantes con las que cuenta Windows. Es una herramienta indispensable
Ejercicios y cuestiones
1 Ejercicios y cuestiones Objetivos.- Dominar los conceptos fundamentales de la programación script cliente. Identificar y utilizar adecuadamente las estructuras básicas de programación de Javascript/DOM.
Práctica 1ª: Introducción a Matlab. 1er curso de Ingeniería Industrial: Ingeniería de Control
1er curso de Ingeniería Industrial: Ingeniería de Control Práctica 1ª: Introducción a Matlab Departamento de Ingeniería electrónica, Telecomunicación y Automática. Área de Ingeniería de Sistemas y Automática
La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.
PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación
Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:
Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor
Introducción. Monitorización y operación de la aplicación del NS utilizando un navegador Web. LAN, Internet
NS WEB Interface Introducción Cómo conectar Funciones del Interface WEB del NS Configuración del Interface WEB del NS Conexión al interface WEB a través de Internet Introducción Qué es y qué permite el
Objetivo: Introducción conceptual y aplicación básica de los lenguajes del lado del servidor.
Sesión 03: Lenguajes web del servidor Competencias a Conseguir: - Conocer el entorno de trabajo a nivel de servidores web. - Instalación del localhost (Servidor Local). - Repaso general de PHP y ejercicios
Programación de páginas web dinámicas con CGIs
Programación de páginas web dinámicas con CGIs Esquema Webs estáticas o dinámicas. CGIs: Que son y como funcionan Formularios para enviar información CGIs en perl Webs estáticas o dinámicas Una (página)
1. Utilizar JavaScript en un documento HTML 3. 2. Tipos de datos y expresiones en JavaScript 9 2.1. Variables... 9 2.2. Expresiones y operadores...
Índice general 1. Utilizar JavaScript en un documento HTML 3 2. Tipos de datos y expresiones en JavaScript 9 2.1. Variables.................................. 9 2.2. Expresiones y operadores.........................
HTML 5 : Formularios
HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir