You are here
Programación orientada a objetos JavaScript Sin categoría 

Programación orientada a objetos JavaScript

Programación orientada a objetos JavaScript

Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas métodos). A partir de esta estructura se ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos.

El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes más abstractos que definen un conjunto determinado de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la clase a la cual pertenecen.

Propiedades y métodos.
Para acceder a los métodos y propiedades de un objeto debemos utilizar la siguiente sintaxis:
objeto.propiedad
objeto.metodo(parametros)

Conceptos Básicos.

Objetos
Son todas las cosas con identidad propia. Se relacionan entre si. Poseen características (atributos) y tienen responsabilidades (funciones, métodos) que deben cumplir. Son ejemplares (instancias) de una clase y conocen a la clase a la cual pertenecen.

Atributos o propiedades
Son las características, cualidades distintivas de cada objeto. Deben ser mínimos para poder realizar todas las operaciones que requiere la aplicación.

Ejemplos de objetos del mundo real:

– Casa:

atributos: tamaño, precio, cantidad de habitaciones, etc.; responsabilidades: comodidad, seguridad, etc.

– Mesa:

atributos: altura, largo, ancho, etc.; responsabilidades: contener elementos.

– Ventana:

atributos: tamaño, color, etc.; responsabilidades: abrirse, cerrarse, etc.
Ejemplos de objetos del mundo de la programación:

– Ventana:

atributos: tamaño, color, etc.; responsabilidades: mostrar título, achicarse etc.
Responsabilidades o Métodos.
Son las responsabilidades que debe cumplir la clase. El objetivo de un método es ejecutar las actividades que tiene encomendada la clase. Es un algoritmo (conjunto de operaciones) que se ejecuta en respuesta a un mensaje; respuestas a mensajes para satisfacer peticiones.

Un método consiste en el nombre de la operación y sus argumentos. El nombre del método identifica una operación que se ejecuta. Un método está determinado por la clase del objeto receptor, todos los objetos de una clase usan el mismo método en respuesta a mensajes similares.
La interpretación de un mensaje (selección del método ejecutado) depende del receptor y puede variar con distintos receptores, es decir, puede variar de una clase a otra.

Clases
Una clase es una agrupación de objetos que comparten las mismas propiedades y comportamientos. Es un molde para objetos que poseen las mismas características (que pueden recibir los mismos mensajes y responden de la misma manera). Una clase es una representación de una idea o concepto. Unidad que encapsula códigos y datos para los métodos (operaciones).

Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo método) en respuesta a mensajes similares.

La clase a la cual pertenece un objeto determina el comportamiento del objeto.
Una clase tiene encomendadas actividades que ejecutan los métodos.
Las clases están definidas por:

– Atributos (Propiedades),
– Comportamiento (operaciones o métodos) y
– Relaciones con otros objetos.

Una aplicación es un conjunto de objetos de determinadas clases.

 

 Clase Date

JavaScript dispone de varias clases predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas.

Esta clase nos permitirá manejar fechas y horas. Se invoca así:

fecha = new Date();//creación de un objeto de la clase Date

fecha = new Date(año, mes, dia);

fecha = new Date(año, mes, dia, hora, minuto, segundo);
Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales, obtenidas del reloj de nuestra computadora. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Así, por ejemplo:
navidad06 = new Date(2006, 11, 25)
El objeto Date dispone, entre otros, de los siguientes métodos:

getYear()

setYear(año)
Obtiene y coloca, respectivamente, el año de la fecha.

Éste se devuelve como número de 4 dígitos excepto en el caso en que esté entre 1900 y 1999, en cuyo caso devolverá las dos últimas cifras.
getFullYear()

setFullYear(año)
Realizan la misma función que los anteriores, pero sin tanta complicación, ya que siempre devuelven números  con todos sus dígitos.
getMonth()

setMonth(mes)

getDate()

setDate(dia)

getHours()

setHours(horas)

getMinutes()

setMinutes(minutos)

getSeconds()

setSeconds(segundos)
Obtienen y colocan, respectivamente, el mes, día, hora, minuto y segundo de la fecha.
getDay()

 

Devuelve el día de la semana de la fecha en forma de número que va del 0 (domingo) al 6 (sábado)
Ejemplo: Mostrar en una página la fecha y la hora actual.
<HTML>

<HEAD>

<SCRIPT LANGUAGE=”JavaScript”>

function mostrarFechaHora()

{

var fecha

fecha=new Date();

document.write(‘Hoy es ‘);

document.write(fecha.getDate()+'/’);

document.write((fecha.getMonth()+1)+'/’);

document.write(fecha.getYear());

document.write(‘<br>’);

document.write(‘Es la hora ‘);

document.write(fecha.getHours()+’:’);

document.write(fecha.getMinutes()+’:’);

document.write(fecha.getSeconds());

}

//Llamada a la función

mostrarFechaHora();

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 

En este problema hemos creado un objeto de la clase Date. Luego llamamos una serie de métodos que nos retornan datos sobre la fecha y hora actual del equipo de computación donde se está ejecutando el navegador.
Es bueno notar que para llamar a los métodos disponemos:
<nombre de objeto>.<nombre de método>(parámetros)

Clase Array

Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos.
Con un único nombre se define un vector y por medio de un subíndice hacemos referencia a cada elemento del mismo (componente).

Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y luego mostrar el total de gastos en sueldos (cada actividad en una función).
<HTML>

<HEAD>

</HEAD>

<BODY>

<SCRIPT LANGUAGE=”JavaScript”>

function cargar(sueldos)

{

var f;

for(f=0;f<sueldos.length;f++)

{

var v;

v=prompt(‘Ingrese sueldo:’,”);

sueldos[f]=parseInt(v);

}

}

function calcularGastos(sueldos)

{

var total=0;

var f;

for(f=0;f<sueldos.length;f++)

{

total=total+sueldos[f];

}

document.write(‘Listado de sueldos<br>’);

for(f=0;f<sueldos.length;f++)

{

document.write(sueldos[f]+'<br>’);

}

document.write(‘Total de gastos en sueldos:'+total);

}

var sueldos;

sueldos=new Array(5);

cargar(sueldos);

calcularGastos(sueldos);

</SCRIPT>

</BODY>

</HTML>
Recordemos que el programa comienza a ejecutarse a partir de las líneas que se encuentran fuera de la funciones:

var sueldos;

sueldos=new Array(5);

cargar(sueldos);

calcularGastos(sueldos);
Lo primero, definimos una variable y posteriormente creamos un objeto de la clase Array, indicándole que queremos almacenar 5 valores.
Llamamos a la función cargar enviándole el vector. En la función, a través de un ciclo for recorremos las distintas componentes del vector y almacenamos valores enteros que ingresamos por teclado.
Para conocer el tamaño del vector accedemos a la propiedad length de la clase Array.
En la segunda función sumamos todas las componentes del vector, imprimimos en la página los valores y el total de gastos.

Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los meses de año. En otra función solicitar el ingreso de un número entre 1 y 12. Mostrar a qué mes corresponde y cuántos días tiene dicho mes.
<HTML>

<HEAD></HEAD>

<BODY>

<SCRIPT LANGUAGE=”JavaScript”>
function mostrarFecha(meses,dias)

{

var num;

num=prompt(‘Ingrese número de mes:’,”);

num=parseInt(num);

document.write(‘Corresponde al mes:'+meses[num-1]);

document.write(‘<br>’);

document.write(‘Tiene ‘+dias[num-1]+’ días’);

}

var meses;

meses=new Array(12);

meses[0]='Enero’;

meses[1]='Febrero’;

meses[2]='Marzo’;

meses[3]='Abril’;

meses[4]='Mayo’;

meses[5]='Junio’;

meses[6]='Julio’;

meses[7]='Agosto’;

meses[8]='Septiembre’;

meses[9]='Octubre’;

meses[10]='Noviembre’;

meses[11]='Diciembre’;

var dias;

dias=new Array(12);

dias[0]=31;

dias[1]=28;

dias[2]=31;

dias[3]=30;

dias[4]=31;

dias[5]=30;

dias[6]=31;

dias[7]=31;

dias[8]=30;

dias[9]=31;

dias[10]=30;

dias[11]=31;

mostrarFecha(meses,dias);

</SCRIPT>

</BODY>

</HTML>

 

En este problema definimos dos vectores, uno para almacenar los meses y otro los días. Decimos que se trata de vectores paralelos porque en la componente cero del vector meses almacenamos el string ‘Enero’ y en el vector dias, la cantidad de días del mes de enero.

Es importante notar que cuando imprimimos, disponemos como subíndice el valor ingresado menos 1, esto debido a que normalmente el operador de nuestro programa carga un valor comprendido entre 1 y 12. Recordar que los vectores comienzan a numerarse a partir de la componente cero.
document.write(‘Corresponde al mes:'+meses[num-1]);
 Clase Math

Esta clase no está construido para que tengamos nuestras variables Math, sino como un contenedor que tiene diversas constantes (como Math.E y Math.PI) y los siguientes métodos matemáticos:

Método Descripción Expresión de ejemplo Resultado del ejemplo
abs Valor absoluto Math.abs(-2) 2
sin, cos, tan Funciones trigonométricas, reciben el argumento en radianes Math.cos(Math.PI) -1
asin, acos, atan Funciones trigonométricas inversas Math.asin(1) 1.57
exp, log Exponenciación y logaritmo, base E Math.log(Math.E) 1
ceil Devuelve el entero más pequeño mayor o igual al argumento Math.ceil(-2.7) -2
floor Devuelve el entero más grande menor o igual al argumento Math.floor(-2.7) -3
round Devuelve el entero más cercano o igual al argumento Math.round(-2.7) -3
min, max Devuelve el menor (o mayor) de sus dos argumentos Math.min(2,4) 2
pow Exponenciación, siendo el primer argumento la base y el segundo el exponente Math.pow(2,3) 8
sqrt Raíz cuadrada Math.sqrt(25) 5
random Genera un valor aleatorio comprendido entre 0 y 1. Math.random() Ej. 0.7345

Ejemplo: Confeccionar un programa que permita cargar un valor comprendido entre 1 y 10. Luego generar un valor aleatorio entre 1 y 10, mostrar un mensaje con el número sorteado e indicar si ganó o perdió:
<html>

<head>

</head>

<body>

<script language=”JavaScript”>

var selec=prompt(‘Ingrese un valor entre 1 y 10’,”);

selec=parseInt(selec);

var num=parseInt(Math.random()*10)+1;

if (num==selec)

document.write(‘Ganó el número que se sorteó es el ‘+ num);

else

document.write(‘Lo siento se sorteó el valor ‘+num+’ y usted eligió el ‘+selec);

</script>

</body>

</html>

 

Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo siguiente:

var num=parseInt(Math.random()*10)+1;
Al multiplicar Math.random() por 10, nos genera un valor aleatorio comprendido entre un valor mayor a 0 y menor a 10, luego, con la función parseInt, obtenemos sólo la parte entera. Finalmente sumamos uno.
El valor que cargó el operador se encuentra en:
var selec=prompt(‘Ingrese un valor entre 1 y 10’,”);

Con un simple if validamos si coinciden los valores (el generado y el ingresado por teclado).


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*