Scribd
Cargar
69 vistas

Javascript

Este documento proporciona una introducción a JavaScript, incluyendo una descripción de sus orígenes, características principales como lenguaje interpretado, orientado a objetos y a eventos, y formas de incluir código JavaScript en páginas HTML. También explica conceptos básicos como tipos de datos, declaración de variables, comentarios, cuadros de diálogo y escritura de cadenas de texto.

Cargado por

natmarti
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como ODP, PDF, TXT o lee en línea desde Scribd
69 vistas

Javascript

Este documento proporciona una introducción a JavaScript, incluyendo una descripción de sus orígenes, características principales como lenguaje interpretado, orientado a objetos y a eventos, y formas de incluir código JavaScript en páginas HTML. También explica conceptos básicos como tipos de datos, declaración de variables, comentarios, cuadros de diálogo y escritura de cadenas de texto.

Cargado por

natmarti
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como ODP, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 100

JavaScript

Introduccin a JavaScript Fundamentos de JavaScript Trabajando con datos e informacin


Tipos de datos Declaracin de variables Operadores aritmticos Funciones y objetos Arrays asociativos Eventos en JavaScript Creacin de formularios interactivos

JavaScript
Es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Es un lenguaje interpretado, es decir, no require compilacin. El navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas en una pgina HTML y ejecutarlas adecuadamente. Es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un enlace o mueve el puntero sobre una imagen se produce un evento.

JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript est reducido y simplificado, pero incluye los elementos necesarios para que los scripts puedan acceder a la informacin de una pgina y puedan actuar sobre la interfaz del navegador.

Cmo introducir JavaScript en el cdigo HTML?


Existen dos formas de introducir un script de JavaScript en una pgina HTML: 1.-Embebido en el cdigo HTML, entre las etiquetas o tags <script> y </script>. 2.-Como archivo .js que se carga con la pgina HTML.

<HTML> <HEAD> <TITLE>Introduccin a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-function saludo() { window.alert('Bienvenido a JavaScript!') } //--> </SCRIPT> </HEAD> <BODY onLoad="saludo()"> </BODY> </HTML>

<HTML> <HEAD> <TITLE>Tutorial de JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="codigo.js"></SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Introduccin de cdigo JavaScript en las pginas


Para introducir cdigo JavaScript en una pgina HTML, debe incluirse el siguiente cdigo (normalmente, entre las etiquetas <head> y </head> de la pgina, aunque tabin puede ir en el cuerpo de la misma): <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-Programa JavaScript //--> </SCRIPT>

Comentarios en JavaScript
// comentario de una lnea /* comentario de varias lneas */

Los bloques de cdigo que integran una unidad son encerrados entre los caracteres { y } (por ejemplo, el cdigo de una funcin, o las sentencias incluidas dentro de un bucle). Por otra parte, JavaScript hace diferencia entre maysculas y minsculas para los nombres de variables y funciones.

Inclusin de ficheros externos con cdigo JavaScript


Los scripts que queramos utilizar en una pgina suelen escribirse en la misma pgina, normalmente entre las etiquetas <head> y </head>. Determinados scripts pueden aparecer entre las etiquetas <body> y </body> (por ejemplo, gestores de eventos, o scripts que escriben cdigo on-line), pero lo normal es que la mayora de las funciones estn en la cabecera de la pgina. Otra posibilidad es la inclusin del cdigo JavaScript en ficheros externos, de extensin .js. Estos ficheros son enlazados desde la pgina HTML donde se utilizan con este cdigo (que deber ir tambin entre <head> y </head>): <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="fichero.js"></SCRIPT>

Escritura de cadenas de texto en la pgina


Las cadenas de texto en JavaScript pueden ir entre comillas dobles o simples indistintamente. Lo nico que hay que tener en cuenta es utilizar el mismo tipo de comillas en la apertura y cierre de la cadena de texto document.write("Texto") document.write('Texto') document.write('<IMG SRC="imagen.gif">') Para escribir la cadena Texto ms un retorno de carro podemos usar: document.writeln("Texto") o bien document.write("Texto\n")

Otros caracteres no imprimibles que pueden utilizarse son:

<HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write('<IMG SRC="imagen.gif">') document.write("<BR><H1>Bienvenido a JavaScript</H1>") //--> </SCRIPT> </BODY> </HTML>

Cuadros de dilogo:el mtodo alert() del objeto window:


alert("Texto") Por ejemplo: alert("Bienvenido!\n\tEsta Web est dedicada a JavaScript.")
Este tipo de ventanas de dilogo muestra un botn de aceptar, normalmente con el nombre Aceptar, que el usuario deber pulsar para continuar.

Tipos de ventanas de dilogo que interactan con el usuario.

El mtodo prompt() del objeto window muestra una caja de texto en la que el usuario puede introducir contenidos. Tambin muestra dos botones, Aceptar y Cancelar.
prompt("Su color favorito es: ","Azul")

El segundo parmetro es el valor predeterminado para la caja de texto, que el usuario podr modificar.

Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y despues mostrarlo:
<HTML> <HEAD> <TITLE>Ejemplo 2.2: pgina que pide el nombre</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var nombre = prompt("Introduzca su nombre:","") document.write("<H2>Bienvendio, " + nombre + "</H2>") //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML>

Finalmente, para pedir al usuario confirmacin en la realizacin de una accin podemos usar el mtodo confirm() del objeto window. Este mtodo mostrar un cuadro de dilogo con el mensaje de texto que le pasemos como parmetro, y dos botones, Aceptar y Cancelar: confirm("Desea volver al inicio de la pgina?") Este mtodo devuelve verdadero (true) si se pulsa Aceptar y falso (false) si se pulsa Cancelar.

<HTML> <HEAD> <TITLE>Ejemplo 2.3: pgina que pide confirmacin</TITLE> </HEAD> <BODY> <H1>Pgina sobre sellos</H1> <SCRIPT LANGUAGE="JavaScript"> <!-var entrar = confirm("De verdad desea entrar en esta\npagina?") if ( !entrar ) self.close() //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML>

Trabajando con datos e informacin

Tipos de datos
En JavaScript un dato puede ser de uno de los siguientes tipos: Nmero : Cualquier nmero, como 12, 22.5 o 2e8 Cadena : "Hola" u 'Hola' Booleano : Verdadero (true) o falso (false) Objeto : Ver Captulo 4: Funciones y objetos Funcin NULL Palabra clave para indicar ningn valor

Los nmeros enteros pueden encontrarse en diferentes bases: Decimal (base 10): cualquier entero que no empiece por 0 estar representado en base 10. Octal (base 8): si el entero se escribe empezando con el dgito 0, estar en base 8. Hexadecimal (base 16): para indicar nmero en hexadecimal, hay que anteponerlo con 0x o 0X (por ejemplo 0x1A). En JavaScript, la cadena vaca "" es diferente de null.

VARIABLES
Concepto de variable Una variable es un espacio en memoria donde se almacena un dato, un espacio donde podemos guardar cualquier tipo de informacin que necesitemos para realizar las acciones de nuestros programas. Los nombres de las variables han de construirse con caracteres alfanumricos y el carcter subrayado (_). Aparte de esta, hay una serie de reglas adicionales para construir nombres para variables. La ms importante es que tienen que comenzar por un carcter alfabtico o el subrayado.

Declaracin de variables en Javascript


Declarar variables consiste en definir y de paso informar al sistema de que vas a utilizar una variable. Javascript cuenta con la palabra "var" que utilizaremos cuando queramos declarar una o varias variables. Como es lgico, se utiliza esa palabra para definir la variable antes de utilizarla. var operando1 var operando2 O bien: var operando1,operando2 ; var operando1 =12 var operando2 =32 O bien: var operando1=12,operando2=32 ; var operando1=12;var operando2=32; NOTA: Les sentencies javascript es separen amb ; o salts de lnia

El mbito de las variables en Javascript: qu son las variables locales y globales y cmo se trabaja con ellas en Javascript.
Concepto de mbito de variables Se le llama mbito de las variables al lugar donde estas estn disponibles. Por lo general, cuando declaramos una variable hacemos que est disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programacin y como Javascript se define dentro de una pgina web, las variables que declaremos en la pgina estarn accesibles dentro de ella. La propia pgina donde se define es el mbito ms habitual de una variable y le llamaremos a este tipo de variables globales a la pgina. Para declarar una variable global a la pgina simplemente lo haremos en un script, con la palabra var. <SCRIPT> var variableGlobal </SCRIPT>

Variables locales
Tambin podremos declarar variables en lugares ms acotados, como por ejemplo una funcin. A estas variables les llamaremos locales. Cuando se declaren variables locales slo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habamos declarado en una funcin solo podremos acceder a ella cuando estemos en esa funcin. Las variables pueden ser locales a una funcin, pero tambin pueden ser locales a otros mbitos, como por ejemplo un bucle. En general, son mbitos locales cualquier lugar acotado por llaves. <SCRIPT> function miFuncion (){ var variableLocal } </SCRIPT>

No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la variable global ser visible desde toda la pgina, excepto en el mbito donde est declarada la variable local ya que en este sitio ese nombre de variable est ocupado por la local y es ella quien tiene validez. <SCRIPT> var numero = 2 function miFuncion (){ var numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 </SCRIPT>

Diferencias entre declarar variables con var, o no declararlas


Existe libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso sern distintos. Cuando utilizamos var estamos haciendo que la varible que estamos declarando sea local al mbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una variable, sta ser global a toda la pgina, sea cual sea el mbito en el que haya sido declarada. En el caso de una variable declarada en la pgina web, fuera de una funcin o cualquier otro mbito ms reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un mbito es global a toda la pgina. La diferencia se puede apreciar en una funcin por ejemplo, ya que si utilizamos var la variable ser local a la funcin y si no lo utilizamos, la variable ser global a la pgina. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la pgina, ya que si no lo hacemos en una funcin podramos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.

<SCRIPT> var numero = 2 function miFuncion (){ numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 //llamamos a la funcin miFuncion() document.write(numero) //imprime 19 </SCRIPT> la variable numero de la funcion ser la misma variable global numero declarada fuera de la funcin.

En una variable podemos guardar distintos tipos de datos.

Tipo de datos numrico


Slo existe un tipo de datos numrico, al contrario que ocurre en la mayora de los lenguajes ms conocidos. Todos los nmeros son por tanto del tipo numrico, independientemente de la precisin que tengan o si son nmeros reales o enteros. Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Los nmeros reales son nmeros fraccionarios, como 2.69 o 0.25, que tambin se pueden escribir en notacin cientfica, por ejemplo 2.482e12. Existen tres bases con las que podemos trabajar Base 10, es el sistema que utilizamos habitualmente, el sistema decimal. Cualquier nmero, por defecto, se entiende que est escrito en base 10. Base 8, tambin llamado sistema octal, que utiliza dgitos del 0 al 7. Para escribir un nmero en octal basta con escribir ese nmero precedido de un 0, por ejemplo 045. Base 16 o sistema hexadecimal, es el sistema de numeracin que utiliza 16 dgitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para los dgitos que faltan. Para escribir un nmero en hexadecimal debemos escribirlo precedido de un cero y una equis, por ejemplo 0x3EF.

Tipo boleano El tipo bolean, boolean en ingls, sirve para guardar un si o un no o dicho de otro modo, un verdadero o un falso. Se utiliza para realizar operaciones lgicas, generalmente para realizar acciones si el contenido de una variable es verdadero o falso. Si una variable es verdadero entonces no Ejecuto otras Ejecuto unas instrucciones Si

Los dos valores que pueden tener las variables boleanas son true o false.

miTexto = "Pepe se va a pescar" miTexto = '23%%$ Letras & *--*' Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado como una cadena de caracteres independientemente de lo que coloquemos en el interior de las comillas.

Operadores aritmticos
+ Suma de dos valores - Resta de dos valores, tambin puede utilizarse para cambiar el signo de un nmero si lo utilizamos con un solo operando -23 * Multiplicacin de dos valores / Divisin de dos valores % El resto de la divisin de dos nmeros (3%2 devolvera 1, el resto de dividir 3 entre 2) ++ Incremento en una unidad, se utiliza con un solo operando -- Decremento en una unidad, utilizado con un solo operando Ejemplos precio = 128 //introduzco un 128 en la variable precio unidades = 10 //otra asignacin, luego veremos operadores de asignacin factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura resto = factura % 3 //obtengo el resto de dividir la variable factura por 3 precio++ //incrementa en una unidad el precio (ahora vale 129)

Operadores de asignacin = Asignacin. Asigna la parte de la derecha del igual a la parte de la izquierda. A al derecha se colocan los valores finales y a la izquierda generalmente se coloca una variable donde queremos guardar el dato. += Asignacin con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de la izquierda. -= Asignacin con resta *= Asignacin de la multiplicacin /= Asignacin de la divisin %= Se obtiene el resto y se asigna Ejemplos ahorros = 7000 //asigna un 7000 a la variable ahorros ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500 ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250

Operadores de cadenas
+ Concatena dos cadenas, pega la segunda cadena a continuacin de la primera. Ejemplo cadena1 = "hola" cadena2 = "mundo" cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo" miNumero = 23 miCadena1 = "pepe" miCadena2 = "456" resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe" resultado2 = miNumero + miCadena2 //resultado2 vale "23456" miCadena2 += miNumero //miCadena2 ahora vale "45623"

Operadores lgicos

! Operador NO o negacin. Si era true pasa a false y viceversa. && Operador Y, si son los dos verdaderos vale verdadero. || Operador O, vale verdadero si por lo menos uno de ellos es verdadero. Ejemplo miBoleano = true miBoleano = !miBoleano //miBoleano ahora vale false tengoHambre = true tengoComida = true comoComida = tengoHambre && tengoComida

Operadores condicionales

== Comprueba si dos valores son iguales != Comprueba si dos valores son distintos > Mayor que, devuelve true si el primer operando es mayor que el segundo < Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha >= Mayor igual <= Menor igual

Operadores a nivel de bit

& Y de bits ^ Xor de bits | O de bits << >> >>> >>>= >>= <<= Varias clases de cambios

Precedencia de los operadores


todos los operadores se evalan de izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se evalan antes que otros. Muchas de estas reglas de precedencia estn sacadas de las matemticas y son comunes a otros lenguajes, las podemos ver a continuacin: () [] . Parntesis, corchetes y el operador punto que sirve para los objetos ! - ++ -- negacin, negativo e incrementos * / % Multiplicacin divisin y mdulo +- Suma y resta << >> >>> Cambios a nivel de bit < <= > >= Operadores condicionales == != Operadores condicionales de igualdad y desigualdad & ^ | Lgicos a nivel de bit && || Lgicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= != Asignacin

el operador typeof, que devuelve una cadena de texto que describe el tipo del operador que estamos comprobando.
var boleano = true var numerico = 22 var numerico_flotante = 13.56 var texto = "mi texto" var fecha = new Date() document.write("<br>El tipo de boleano es: " + typeof boleano) document.write("<br>El tipo de numerico es: " + typeof numerico) document.write("<br>El tipo de numerico_flotante es: " + typeof numerico_flotante) document.write("<br>El tipo de texto es: " + typeof texto) document.write("<br>El tipo de fecha es: " + typeof fecha) Podemos ver: boolean, para los datos boleanos. (True o false) number, para los numricos. string, para las cadenas de caracteres. object, para los objetos.

Declaracin de variables
Los datos maneja nuestro programa se almacenan en variables. El concepto de variable debe verse como un contenedor de informacin. var nombre_variable nombre_variable = "valor" Ejemplo: var resultado Resultado = 10 + 10
La variable resultado contiene ahora el valor 20. Para referirnos a ella, utilizamos su nombre.

JavaScript no es necesario indicar de qu tipo es una variable en el momento de su definicin. El tipo del dato queda definido en el momento en que se asigna un valor a la variable.

Por otra parte, podemos realizar la asignacin del valor de la variable en el momento de su declaracin, del siguiente modo:
var resultado = 10 + 10

Aunque en JavaScript no es estrictamente necesario declarar una variable antes de utilizarla, la declaracin mediante el uso de la palabra reservada var es siempre recomendable, por claridad. El nombre de una variable puede empezar por una letra o por el carcter _. Despus ya pueden ponerse nmeros. Los nombres de variables son sensibles a maysculas y minsculas.

<HTML> <HEAD><TITLE>Ejemplo 3.1: uso de una variable</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var name = prompt("Introduce tu nombre:","Nombre") //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write("<H1>Hola " + name + ". Bienvenido a mi pgina!</H1>") //--> </SCRIPT></BODY></HTML>

Operadores aritmticos

Binarios

Unarios

Operadores lgicos

Operadores de comparacin

Operadores condicionales
(condicion) ? valor1 : valor2

<HTML> <HEAD><TITLE>Ejemplo operadores</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var pregunta = "Cunto vale 10 + 10?" var respuesta_correcta = 20 var correcto = "<p>CORRECTO!</p>" var incorrecto = "<p>INCORRECTO</p>" //realiza la pregunta var respuesta_dada = prompt(pregunta, "0") //comprueba la respuesta var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto //--> </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE="JavaScript"> <!-//escribe la salida document.write(salida) //--> </SCRIPT></BODY></HTML>

Estructuras de control: Toma de decisiones y Bucles

En Javascript podemos tomar decisiones utilizando dos enunciados distintos. IF SWITCH En javascript existen varios tipos de bucles, cada uno est indicado para un tipo de iteracin distinto y son los siguientes: FOR WHILE DO WHILE Todas las estructuras de control se escriben en minsculas en Javascript.

Sentencia if
if (expresin) { //acciones a realizar en caso positivo //... }

if (expresin) { //acciones a realizar en caso positivo //... } else { //acciones a realizar en caso negativo //... }

Para empezar vemos como con unas llaves engloban las acciones que queremos realizar en caso de que se cumplan o no las expresiones. Estas llaves han de colocarse siempre, excepto en el caso de que slo haya una instruccin como acciones a realizar, que son opcionales.

Sentencias IF anidadas

/*si deseo comprobar si un nmero es mayor menor o igual que otro*/ var numero1=23 var numero2=63 if (numero1 == numero2){ document.write("Los dos nmeros son iguales") }else{ if (numero1 > numero2) { document.write("El primer nmero es mayor que el segundo") }else{ document.write("El primer nmero es menor que el segundo") } }

La estructura de control switch de Javascript es utilizada para tomar decisiones en funcin de distintos estados o valores de una variable.
switch (expresin) { case valor1: Sentencias a ejecutar si la expresin tiene como valor a valor1 break case valor2: Sentencias a ejecutar si la expresin tiene como valor a valor2 break case valor3: Sentencias a ejecutar si la expresin tiene como valor a valor3 break default: Sentencias a ejecutar si el valor no es ninguno de los anteriores }

switch (dia_de_la_semana) { case 1: document.write("Es Lunes") break case 2: document.write("Es Martes") break case 3: document.write("Es Mircoles") break case 4: document.write("Es Jueves") break case 5: document.write("Es viernes") break case 6: case 7: document.write("Es fin de semana") break default: document.write("Ese da no existe") }

El bucle FOR
Se utiliza para repetir una o ms instrucciones un determinado nmero de veces. De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el nmero de veces que queremos que se ejecute.

for (inicializacin; condicin; actualizacin) { //sentencias a ejecutar en cada iteracin }

var i for (i=0;i<=10;i++) { document.write(i) document.write("<br>") }

for (i=1;i<=1000;i+=2) document.write(i)

for (i=343;i>=10;i--) document.write(i)

for (i=1;i<=6;i++) { document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")


}

Bucle WHILE

while (condicin){ //sentencias a ejecutar }

var color = "" while (color != "rojo"){ color = prompt("dame un color (escribe rojo para salir)","") }

Bucle DO...WHILE

Comparaciones: sentencia if ... else

if (condicion) sentencia unica if (condicion) { varias sentencias } if (condicion) { varias sentencias } else { varias sentencias2 }

<HTML> <HEAD><TITLE>Ejemplo sentencia if ... else</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//definicion de variables var pregunta = "Cunto vale 10 + 10?" var respuesta_correcta = 20 var correcto = "<p>Correcto!</p>" var incorrecto = "<p>Incorrecto!</p>" //realiza la pregunta var respuesta_dada = prompt(pregunta, "0"); //comprueba la respuesta if (respuesta_dada != respuesta_correcta) { //respuesta incorrecta, segunda oportunidad if ( confirm("No! Pulsa OK para reintentarlo.")) respuesta_dada = prompt(pregunta, "0") } //comprueba la respuesta var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto //--> </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE="JavaScript"> <!-//escribe la salida document.write(salida) //--> </SCRIPT></BODY></HTML>

Funciones y objetos

Definicin de una funcin function nombre_funcion(argumentos) { bloque de comandos}

El nombre de la funcin es sensible a maysculas y minsculas. Puede incluir el caracter "_" y empezar con una letra.

function ImprimeNombre(nombre) { document.write("<HR>Tu nombre es <B><I>") document.write(nombre) document.write("</B></I><HR>") } La variable nombre slo existe dentro de la funcin y lo mismo pasa para cualquier variable declarada dentro de la funcin.

Las funciones pueden devolver un valor. Para ello: function cubo(numero) { var cubo = numero * numero * numero return cubo } Tambin podra haber sido return numero * numero * numero

<HTML><HEAD><TITLE>Preguntador</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function HazPregunta(pregunta) { //VARIABLES LOCALES var solucion = eval(pregunta) /*La funcin eval() evala un string devolviendo un valor numrico. Por ejemplo, eval("10*10") devolver el valor 100.*/ var salida = "Que da " + pregunta + "?" var correcto='<IMG SRC="correcto.gif">' var incorrecto='<IMG SRC="incorrecto.gif">' var respuesta = prompt(salida,"0") //COMPRUEBA EL RESULTADO return (respuesta == solucion) ? correcto : incorrecto} //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var resultado = HazPregunta("10 + 10") document.write(resultado) //--> </SCRIPT> </BODY></HTML>

Funciones recursivas

Son las que se llaman a s mismas. Un ejemplo tpico es el de la funcin que calcula el factorial de un nmero: x! = x * (x 1)!

function factorial(numero) { if (numero > 1) { return numero * factorial(numero - 1) } else { return numero } }

Veamos una modificacin del ejemplo anterior en la que la funcin HazPregunta es recursiva:
//DEFINICION DE LA FUNCION HazPregunta() function HazPregunta(pregunta) { //VARIABLES LOCALES var solucion = eval(pregunta) var salida = "Que da " + pregunta + "?" var correcto='<IMG SRC="correcto.gif">' var incorrecto='<IMG SRC="incorrecto.gif">' //REALIZA LA PREGUNTA var respuesta = prompt(salida,"0") //COMPRUEBA EL RESULTADO return (respuesta == solucion) ? correcto : HazPregunta(pregunta) }

Creacin de objetos
Primero es necesario definir su tipo (o clase): function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto } En JavaScript, la partcula this se refiere al objeto en el que se utiliza. Una vez definida la clase, podemos crear variables (instanciar objetos) de esa clase de la siguiente manera: empleado_1 = new empleado("Pedro", 26, "Programador") Pueden aadirse propiedades a los objetos aunque estas no haya sido declaradas en la definicin de la clase. Por ejemplo: empleado_1.jefe = "Luis"

Estas propiedades nuevas slo afectaran a ese objeto y no al resto.

Los objetos pueden anidarse de forma que un objeto sea una propiedad de otro objeto.
function oficina(ciudad, pais) { this.ciudad = ciudad this.pais = pais } oficinaPedro = new oficina("Madrid","Espaa") empleado_1 = new empleado("Pedro", 26, "Programador", oficinaPedro) En el ejemplo anterior, hay que definir la clase empleado de esta forma: function empleado(nombre, edad, puesto, oficina){ this.nombre = nombre this.edad = edad this.puesto = puesto this.oficina = oficina }

Dentro de la definicin de la clase o tipo del objeto, pueden incluirse funciones que accedan a sus propiedades. Estas funciones reciben el nombre de mtodos.Un mtodo se define de la siguiente manera:

function mostrarPerfil() { document.write("Nombre: " + this.nombre + "<BR>") document.write("Edad: " + this.edad + "<BR>") document.write("Puesto: " + this.puesto + "<BR>") } function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto this.mostrarPerfil = mostrarPerfil } As pueden mostrarse las propiedades del objeto empleado invocando el mtodo asociado: empleado_1.mostrarPerfil

<HTML><HEAD><TITLE>Empleados</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function mostrarPerfil() { document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>") document.writeln("Edad: " + this.edad) document.writeln("Puesto: " + this.puesto) document.write("</PRE>") } function empleado() { this.nonmbre = prompt("Introduzca el nombre del empleado: ", "Nombre") this.edad = prompt("Introduzca la edad de " + this.nombre, "00") this.mostrarPerfil = mostrarPerfil } nuevoEmpleado = new empleado() //--> </SCRIPT> </HEAD><BODY><SCRIPT LANGUAGE="JavaScript"> <!-nuevoEmpleado.mostrarPerfil() //--> </SCRIPT>

Arrays asociativos

En JavaScript las propiedades de un objeto y los arrays estn relacionados de la siguiente manera: empleado_1[0] = "Pedro" empleado_1[1] = 26 empleado_1[2] = "Programador" Y tambin se produce la siguiente equivalencia:
empleado_2["nombre"] equivale a empleado_2[0] empleado_2["edad"] equivale a empleado_2[1]

Ejemplo para la creacin de un men de usuario:


<HTML><HEAD><TITLE>Menu de usuario</TITLE><SCRIPT LANGUAGE="JavaScript"> <!-//DEFINE METODO PARA VER LA INFORMACION function verInfo() { document.write("<H1>Perfil del empleado: " + this.nombre + "</H1><HR><PRE>") document.writeln("Numero de empleado: " + this.numero) document.writeln("Edad: " + this.edad) document.writeln("Puesto: " + this.puesto) document.write("</PRE>") } //DEFINE METODO PARA OBTENER LA INFORMACION function obtenerInfo() { var menu = "1. Salir/n2. Nombre/n3. Edad/n4. Puesto" var eleccion = prompt(menu, "0") if (eleccion != null) { if ((eleccion < 0) || (eleccion > 4)) { alert ("Eleccion incorrecta.") this.obtenerInfo() } else { if (eleccion != "0") { this[eleccion - 1] = prompt("Introduzca informacion","") this.obtenerInfo() } } } //DEFINE OBJETO function empleado() { this.nombre = "" this.edad = 0

Eventos en JavaScript

En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso (por ejemplo, el cambio del valor de un formulario, o la pulsacin de un enlace). Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versin a partir de la cual estn soportados y su significado Ejemplo de evento:
<INPUT TYPE="text" onChange="CompruebaCampo(this)"> En este ejemplo, CompruebaCampo() es una funcin JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la funcin (en este caso, el campo del formulario).

Manejador Versin Se produce cuando... onAbort 1.1 El usuario interrumpe la carga de una imagen onBlur 1.0 Un elemento de formulario, una ventana o un marco pierden el foco onChange 1.0 (1.1 para FileUpload) El valor de un campo de formulario cambia onClick 1.0 Se hace click en un objeto o formulario onDblClick 1.2 (no en Mac) Se hace click doble en un objeto o formulario onDragDrop 1.2 El usuario arrastra y suelta un objeto en la ventana onError 1.1 La carga de un documento o imagen produce un error onFocus 1.1 (1.2 para Layer) Una ventana, marco o elemento de formulario recibe el foco onKeyDown 1.2 El usuario pulsa una tecla onKeyPress 1.2 El usuario mantiene pulsada una tecla onKeyUp 1.2 El usuario libera una tecla onLoad 1.0 (1.1 para image) El navegador termina la carga de una ventana onMouseDown 1.2 El usuario pulsa un botn del ratn onMouseMove 1.2 El usuario mueve el puntero onMouseOut 1.1 El puntero abando una rea o enlace onMouseOver 1.0 (1.1 para area) El puntero entra en una rea o imagen onMouseUp 1.2 El usuario libera un botn del ratn onMove 1.2 Se mueve una ventana o un marco onReset 1.1 El usuario limpia un formulario onResize 1.2 Se cambia el tamao de una ventana o marco onSelect 1.0 Se selecciona el texto del campo texto o rea de texto de un formulario onSubmit 1.0 El usuario enva un formulario onUnload 1.0 El usuario abandona una pgina

La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator. Manejador de evento Objetos para los que est definido onAbort Image onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window onChange FileUpload, Select, Text, Textarea onClick Button, document, Checkbox, Link, Radio, Reset, Submit onDblClick document, Link onDragDrop window onError Image, window onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window onKeyDown document, Image, Link, Textarea onKeyPress document, Image, Link, Textarea onKeyUp document, Image, Link, Textarea onLoad Image, Layer, window onMouseDown Button, document, Link onMouseMove Ninguno (debe asociarse a uno) onMouseOut Layer, Link onMouseOver Layer, Link onMouseUp Button, document, Link onMove window onReset Form onResize window onSelect Text, Textarea onSubmit Form onUnload window

Mtodos de evento disponibles en JavaScript


Mtodos de evento Funcin que realizan

blur() Elimina el foco del objeto desde el que se llame click() Simula la realizacin de un click sobre el objeto desde el que se llame focus() Lleva el foco al objeto desde el que se llame select() Selecciona el rea de texto del campo desde el que se llame submit() Realiza el envo del formulario desde

Ejemplo: <HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> <!-function Reacciona(campo) { alert("Introduzca un valor!") campo.focus() } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text NAME=campo onFocus="Reacciona(this)"> </FORM> </BODY> </HTML>

Eventos onLoad y onUnload Se usan como atributos del tag <BODY> de HTML. <BODY onLoad="Hola()" onUnload="Adios()"> La funcin Hola() se ejecutar antes de que se cargue la pgina y la funcin Adios() al abandonarla. Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo onLoad y onUnload</TITLE> </HEAD> <BODY onLoad="alert('Bienvenido a mi pgina!')" onUnload="alert('Vuelva pronto!')"> ... </BODY> </HTML>

<HTML> <HEAD> <TITLE>Ejemplo con funciones</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var name = "" function Hola() { nombre = prompt('Introduzca su nombre:','') alert('Hola ' + nombre + '!') } function Adios() { alert('Adios ' + nombre + '!') } //--> </SCRIPT> </HEAD> <BODY onLoad="Hola()" onUnload="Adios()"> ... </BODY> </HTML>

ejemplo para un campo de texto:


<INPUT TYPE=text NAME="test" onBlur="alert('Gracias!')" onChange="Comprueba(this)">

Ejemplo: Calculadora interactiva


<HTML> <HEAD><TITLE>Calculadora interactiva</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcula(form) { form.resultados.value = eval(form.entrada.value) } function CogeExpresion(form) { form.entrada.blur() form.entrada.value = prompt("Introduce una expresin matemtica vlida en JavaScript","") Calcula(form) } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> Calculadora interactiva: <INPUT TYPE=text NAME="entrada" VALUE="" onFocus="CogeExpresion(this.form)"> <BR>El resultado es:<INPUT TYPE=text NAME="resultados" VALUE="" onFocus="this.blur()">

Creacin de formularios interactivos


Acceso a los formularios de una pgina: Los formularios y campos de formulario contenidos en una pgina pueden ser accedidos desde un script JavaScript. El array forms almacena un elemento por cada formulario que aparece en la pgina, en el orden en que estn en el cdigo fuente. De este modo, en el ejemplo siguiente <FORM METHOD=POST NAME="Formu"> para acceder al formulario, estas tres formas son equivalentes: document.forms[0] (primer formulario) document.forms["Formu"] document.Formu

Propiedades del objeto formulario

Mtodos del objeto form

<HTML> <HEAD><TITLE>Ejemplo de metodo submit()</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function CompruebaValor(Formu) { if (Formu.respuesta.value == "100") Formu.submit() else Formu.respuesta.value = "" } //--> </SCRIPT> </HEAD><BODY> <FORM METHOD=POST onSubmit="alert('Respuesta correcta!'); return false"> Cunto vale 10 * 10? <INPUT TYPE="text" NAME="respuesta" onChange="CompruebaValor(this.form)"> </FORM> </BODY> </HTML>

Eventos de formulario

Acceso a los elementos de un formulario


Se utiliza el array elements. Este array contiene una entrada para cada objeto del formulario (button, checkbox, fileupload, hidden, password, radio, reset, select, submit, text, y textarea), en el orden en que aparecen el el cdigo fuente. Por ejemplo, si un formulario de nombre MiFormu tiene un campo de texto (text) y dos cuadros de seleccin (checkbox), podemos acceder a ellos con los elementos: MiFormu.elements[0] MiFormu.elements[1] MiFormu.elements[2] Otra posibilidad es utilizar el nombre del elemento al cual se desea acceder. As, si el campo de texto del ejemplo anterior se llama MiTexto, las siguientes opciones son equivalentes: MiFormu.elements[0] MiFormu.elements["MiTexto"] MiFormu.MiTexto

Ejemplo: utilizacin del array elements en una tabla de <HTML> multiplicar.


<HEAD> <TITLE>Tabla de multiplicar</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcula(Formu) { var num = 1 var Numero = Formu.Numero.value Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ } //--> </SCRIPT> </HEAD>

<BODY> <FORM METHOD=POST> Number: <INPUT TYPE=text NAME="Numero" VALUE=1 onChange="Calcula(this.form);"><BR> x 1: <INPUT TYPE=text NAME="1" VALUE=1 onFocus="blur();"><BR> x 2: <INPUT TYPE=text NAME="2" VALUE=2 onFocus="blur();"><BR> x 3: <INPUT TYPE=text NAME="3" VALUE=3 onFocus="blur();"><BR> x 4: <INPUT TYPE=text NAME="4" VALUE=4 onFocus="blur();"><BR> x 5: <INPUT TYPE=text NAME="5" VALUE=5 onFocus="blur();"><BR> x 6: <INPUT TYPE=text NAME="6" VALUE=6 onFocus="blur();"><BR> x 7: <INPUT TYPE=text NAME="7" VALUE=7 onFocus="blur();"><BR> x 8: <INPUT TYPE=text NAME="8" VALUE=8 onFocus="blur();"><BR> x 9: <INPUT TYPE=text NAME="9" VALUE=9 onFocus="blur();"><BR> x 10: <INPUT TYPE=text NAME="10" VALUE=10 onFocus="this.blur();"><BR> <INPUT TYPE=button NAME="Calcula" VALUE="Calcula" onClick="Calcula(this.form);"> </FORM> </BODY> </HTML>

La gran ventaja del array elements es la simplificacin del cdigo mediante la utilizacin de bucles y el acceso a los elementos del formulario mediante ndices. Por ejemplo, la funcin Calcula() del ejemplo anterior puede escribirse de la siguiente forma: function Calcula(Formu) { var Numero = Formu.Numero.value for(num = 1; num <= 10; num++) { Formu.elements[num].value = Numero * num } }

Mtodos, propiedades y eventos de los elementos de un formulario

Cada elemento de un formulario posee propiedades y mtodos que pueden utilizarse en los scripts para actuar sobre el formulario. A continuacin vamos a describir los ms importantes.

Cuadro de seleccin (checkbox)

Botn de seleccin (radio)


Es similar al cuadro de seleccin (checkbox) con la diferencia de que varios elementos de este tipo pueden agruparse con un solo nombre de modo que slo uno de ellos podr estar seleccionado.

<HTML> <HEAD> <TITLE>Ejemplo de cuadro de seleccion (checkbox)</TITLE> <SCRIPT> <!-function Calcula(Formu, Campo) { if (Formu.BotonAccion[1].checked) { Formu.resultado.value = Math.sqrt(Formu.entrada.value) } else { Formu.resultado.value = Formu.entrada.value * Formu.entrada.value } } //--> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> <P>Valor:<BR> <INPUT TYPE="text" NAME="entrada" VALUE=0 onChange="Calcula(this.form, this.name);"> <P>Accin:<BR> <INPUT TYPE="radio" NAME="BotonAccion" VALUE="cuadrado"> Al cuadrado<BR> <INPUT TYPE="radio" NAME="BotonAccion" VALUE="raiz2"> Raiz cuadrada<BR> <P>Resultado:<BR> <INPUT TYPE=text NAME="resultado" VALUE=0> </FORM> </BODY> </HTML>

Cuadro de texto (text)

Lista de seleccin (select)

Como ejemplo, dado el siguiente cdigo HTML: <SELECT NAME="Ejemplo" onFocus="Ver()"> <OPTION SELECTED VALUE="Opcin 1">1 <OPTION VALUE="Opcin 2">2 <OPTION VALUE="Opcin 3">3 </SELECT> las propiedades de la lista de seleccin se acceden como se muestra, tomando los valores que aparecen a la derecha: Ejemplo.options[1].value = "Opcin 2" Ejemplo.options[2].text = "3" Ejemplo.selectedIndex = 0 Ejemplo.options[0].defaultSelected = true Ejemplo.options[1].selected = false

Area de texto (textarea) Posee las propiedades defaultValue, name y value, con el mismo significado que para el cuadro de texto. Los mtodos focus(), blur() y select() pueden utilizarse con este elemento, al igual que los eventos onFocus, onBlur y onSelect. Botones submit y reset Los botones submit y reset poseen las propiedades name y value, puediendo utilizarse con ellos el mtodo click() y el evento onClick(). El botn submit posee un mtodo y un evento especficos: el mtodo submit() y el evento onSubmit. El mtodo submit() realiza el emisin del formulario (es equivalente a pulsar el botn submit). El evento onSubmit se produce cuando se enva el formulario, permitiento realizar operaciones con los datos del formulario antes de realizar el envo (por ejemplo, validacin de campos).

function Limpiar(Formu) { total = 0 UltimaOperacion = "+" Formu.display.value = "" }

Ejemplo final: calculadora

function BorraNumero(Formu) { Formu.display.value = "" } function Calcula(Operacion) { var Formu = Operacion.form var Expresion = total + UltimaOperacion + Formu.display.value UltimaOperacion = Operacion.value total = eval(Expresion) Formu.display.value = total NuevoNumero = true } //--> </SCRIPT> </HEAD> <BODY> <FORM> <TABLE BORDER=1> <TR><TD COLSPAN=4><INPUT TYPE=text NAME=display VALUE="" onFocus="this.blur();"></TD></TR> <TR> <TD><INPUT TYPE=button NAME="7" VALUE=" 7 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="8" VALUE=" 8 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="9" VALUE=" 9 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="+" VALUE=" + " onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button NAME="4" VALUE=" 4 " onClick="IntroduceNumero(this);"></TD>

} function Limpiar(Formu) { total = 0 UltimaOperacion = "+" Formu.display.value = "" } function BorraNumero(Formu) { Formu.display.value = "" } function Calcula(Operacion) { var Formu = Operacion.form var Expresion = total + UltimaOperacion + Formu.display.value UltimaOperacion = Operacion.value total = eval(Expresion) Formu.display.value = total NuevoNumero = true } //--> </SCRIPT> </HEAD> <BODY> <FORM> <TABLE BORDER=1>

También podría gustarte