Tutorial javascript parte 3

OBJETOS
Definimos como objeto, una entidad con una serie de propiedades que definen su estado y unos métodos (funciones) que actúan sobre esas propiedades.

La forma de acceder a una propiedad de un objeto es la siguiente:


nombreobjeto.propiedad


También se puede referir a una propiedad de un objeto por su índice en la creación. Los índices comienzan por 0:


casa[0]=casa.localidad
casa[1]=casa.superficie
casa[2]=casa.precio

Vamos a crear un objeto con una serie de propiedades. La forma de crear un objeto es la siguiente:

Crear una función constructora
function casa(localidad,superficie,precio){
this.localidad=localidad
this.superficie=superficie
this.precio=precio
}

Instanciar objetos con "new"
casa1=new casa("Pamplona",90,15000000)
casa2=new casa("Bilbao",110,23000000)

Dos observaciones importantes:

Gracias a new creamos nuevos objetos con las propiedades de los ya creados.
"this" hace referencia al propio objeto.
A un objeto se le pueden seguir añadiendo propiedades tras ser definido, aunque es una práctica que no se aconseja, pues todos los objetos ya creados hasta entonces añaden también esa propiedad con valor nulo. Para ello se utiliza la palabra prototype:



casa.prototype.año=null
casa.año="1980"

Otra forma de crear objetos es de forma literal:


nombreobjeto={propiedad1:valor;propiedad2:valor;.....propiedadN:valor}


Finalmente, sólo añadir que una propiedad puede estar formada por varias subpropiedades de modo que para referenciarlas deberemos seguir una notación similar a la anterior:


nombreobjeto.nombrepropiedad.nombreSubpropiedad


Ejemplo:


casa1={localidad:"Pamplona",precio:15000000,superficie:{interior:90,terraza :10}}


En este ejemplo,casa1 es un objeto en el que, la propiedad "superficie", está a su vez formada por dos subpropiedades: interior y terraza.

Veamos ahora como se crean los métodos.

Un método no es más que una función asociada a un tipo de objeto:


objeto.nombremétodo=nombrefunción


Veamos un ejemplo. Este método sirve para mostrar las propiedades de un objeto casa:


function VerCasa(){
var mostrar="La casa está en " + this.localidad + ", tiene " + this.superficie +" m2 y cuesta " +this.precio +" ptas."

return(mostrar)
}

Si en la función constructora de casa añadimos:


this.VerCasa=VerCasa

Ya tenemos un método llamado VerCasa que nos permite ver las propiedades de cualquier objeto de tipo casa.

Una vez creado un objeto, si lo que queremos es eliminarlo, sólo tenemos que llamar al operador "delete".


delete casa

Este operador es interesante, porque, si consigue eliminar el objeto, devuelve "true" si se le pone valor, por lo que se puede saber cuando un objeto ha sido borrado satisfactoriamente.

NOTA: Existen objetos, y propiedades de estos, de muy diverso tipo, predefinidos en JavaScript:

Window
Frame
Document
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
Textarea
Text
fileUpload
Password
Hidden
Submit
Reset
Radio
Checkbox
button
Select
Option
Location
History
Navigator
Plugin
MimeType

OPERADORES
Existen varios tipos de operadores en JavaScript:

Asignación
Este tipo de operador se utiliza para asignar valores a las variables.



var resultado=50


Asigna a la variable "resultado" el valor 50.

Existen abreviaturas de algunas operaciones de asignación:

x + = y x = x + y
x - = y x = x - y
x * = y x = x * y
x % = y x = x % y
x / = y x = x / y

Comparación
En JavaScript, se pueden comparar variables de distinto tipo, pues es capaz de forzar conversiones:

== Devuelve true si son iguales. Fuerza conversiones de tipo.
!= Devuelve true si son distintos. Fuerza conversiones de tipo.
=== Devuelve true si son iguales y del mismo tipo.
!== Devuelve true si son distintos o de distinto tipo.
> Devuelve true si la variable de la izquierda es mayor que la variable de la derecha
< Devuelve true si la variable de la derecha es mayor que la variable de la izquierda
>= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha
<= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha

Aritméticos
Los operadores aritméticos, a partir de varios operandos, devuelven un solo valor, resultado de la operación realizada con los anteriores operandos.

En JavaScript, existe notación postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el segundo caso, primero se incrementa la variable y despues se procesa.

>% Binario. Devuelve el resto de una división.
++ Unitario. Incrementa el valor de la variable.
-- Unitario. Decrementa el valor de una variable.
- Unitario. Cambia el signo de una variable.

Lógicos
Los operadores lógicos devuelven un valor binario.

&& AND
|| OR
! NOT

Es importante saber que si en una evaluación ya se conoce el resultado, no se pone valor a los demás términos:

true || devuelve true.
false && devuelve false.
Cadenas
Con las cadenas de caracteres podemos usar funciones de concatenación o asignación. Estos opreadores sirven tanto para literales como para variables.


"Hoy es un día" + "frío"
resultado="Día " + tiempo

Condicional
Este operador realiza las funciones de una sentencia "SI" que veremos más tarde. Su formato es el siguiente:


condición?acción1:acción2


Evalúa condición.
Si la evaluación devuelve true, realiza acción1.
Si la evaluación devuelve false, realiza acción2.

SENTENCIAS
Las sentencias en JavaScript se dividen en varios tipos:

Condicionales
Las sentencias condicionales sin "if" y "switch". La sintaxis de "if" es la siguiente:


if(condición){
acciones
}
else{
acciones
}


Ejemplo:


var i=5

if(i>5){
document.write("i es mayor que 5")
}
else{
document.write("i es menor o igual que 5")
}

La sentencia "switch" toma una variable, y la evalúa según unos posibles valores:
switch(variable){
case valor1:
acciones1;
break;
case valor2:
acciones2;
break;
.........
.........
case valorN:
accionesN;
break;
default acciones;
}

Veamos cada una de las partes:

case valor1: En el caso de que la variable tenga el valor "valor1", realizará las acciones "acciones1".
break: Si no se incluye esta sentencia después de cada "case", se realizarían todos los cases del "switch" hasta el final. De este modo, sólo se realizarán las acciones referentes al "case" concreto.
Default: Si el valor de la variable no concuerda con ningún case, se realizarán las acciones de default.
Bucles
Estas sentencias se caracterizan por que el flujo puede pasar varias veces por ellas hasta que se cumple una condición.

"for" representa una o varias sentencias que se repiten un número determinado de veces:


for(inicio;final;incremento){
acciones
}


"do...while" es un bucle que al menos se recorre una vez, antes de analizar la condición al final.


do(condición){
acciones
}while(condición)



"while" es una sentencia de bucle que puede que no se realice ninguna vez, pues la condición se evalúa al principio del bucle.


while(condición){
acciones
}


Con la sentencia "break", se puede salir de una sentencia de bucle sin limitaciones.

Con la sentencia "continue", se termina el bucle actual y se comienza con el siguiente.


Manipulación de Objetos

Existen dos sentencias(for y with) que permiten acceder a las propiedades de un objeto de forma rápida.

La sentencia "for" recorre todas y cada una de las propiedades de un objeto con un índice.


for(variable en objeto){
acciones
}


"with" establece un objeto por defecto al que aplica un conjunto de acciones:


with(objeto){
acciones
}

La forma de introducir comentarios en JavaScript es con //, si se trata de una línea o con /* ...*/, si queremos tomar un bloque como comentario.

FUNCIONES
Una función es un elemento del programa creado con la finalidad de realizar una determinada acción. Una función puede ser llamada desde otra.

En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es:


function nombreFunción([parámetros]){
acciones
}


Veamos un ejemplo. El siguiente script es una función que toma los valores de un formulario, y devuelve en un cuadro de texto del mismo el valor de la primera casilla elevado a la potencia de la segunda:


<script>
function potencia(){
var i=0;
var resul=1;
if(document.cálculo.elevado.value==0)
document.cálculo.resultado.value=resul;
else
{
resul=document.cálculo.base.value;
for(i=1;i<document.cálculo.elevado.value;i++)
resul=resul*document.cálculo.base.value;
}
document.cálculo.resultado.value=resul;
}
</script>

¡Las funciones siempre irán situadas en la cabecera del documento HTML!

Se debe recordar cómo se accede a los diferentes elementos de un documento HTML. Primero, document, después, los nombres de los distintos elementos que existen en ese elemento:

cálculo: Es el valor que se le ha dado al atributo "name" del formulario.
resultado, base, elevado: Es el valor que se le ha dado al atributo "name" de una de las cajas de texto del formulario.
Veamos la parte HTML de este documento:


<form name="cálculo">
Número: <input type="text" name="base">
Potencia: <input type="text" name="elevado">
Resultado: <input type="text" name="resultado">
<input type="button" name="poten" Value="Calcular potencia" onClick="potencia()">
</form>

onClick es un evento que será estudiado en el siguiente tema.

Más adelante se explica cómo referenciar a elementos de una página de frames.

En JavaScript, los parámetros de las funciones se pasan por valor, es decir, si una variable cambia de valor en la función, fuera de ella sigue teniendo el mismo valor que cuando entró en ella.

Si una función devuelve su resultado con return, la función debe ser asignada o formar parte de una respuesta. En caso contrario, si una función no devuelve un valor con "return", puede ser llamada sin ser asignada.

Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. Al array se accede con "nombreFunción.arguments", donde "i" es un índice que comienza por 0.

Para conocer el número de parámetros, podemos utilizar: "arguments.length".

Existe un conjunto de funciones predefinidas, veamos algunas de ellas:

Fecha
getDate() - Día del mes
getDay() - Día de la semana
getMonth() - Día del mes
getYear() - Año (con dos dígitos)
getTime() - Milisegundos transcurridos desde 1/1/1970
getHours() - Hora entre 0 y 23
getMinutes() - Minutos entre 0 y 59
getSeconds() - Segundos entre 0 y 59
Existen las mismas funciones pero con "set" en lugar de "get", de modo que nos permiten cambiar el valor de esas variables.

VENTANAS
Tenemos tres formas de mostrar un mensaje al usuario en una ventana de aviso:

Alert - Muestra el contenido de lo que le pasamos en una ventana con un botón de aceptar.
alert("Esto es una prueba")

Confirm - Muestra un mensaje como "alert", pero muestra dos botones: aceptar y cancelar. Si se evalúa, al pulsar aceptar devuelve true y con cancelar, false.
Prompt - Muestra una ventana donde podemos escribir un valor, de modo que después pueda ser asignado a una variable.
prompt("mensaje",valor por defecto)

MATEMÁTICAS
Se trata de las propiedades de Math:

abs() - Valor absoluto
max(v1,..,vn) - Valor máximo
min(v1,..,vn) - Valor mínimo
round() - Redondear
exp() - Exponencial
log() - Logaritmo
pow(base,exponente) - Potencia
sqrt() - Raíz cuadrada
sin() - Seno
cos() - Coseno
tan() - Tangente
asin() - Arcoseno
acos() - Arcocoseno
atan() - Arcotangente

Saludos

r0b!nh00d