CURSO DE JAVASCRIPT
SEGUNDA PARTE

Ir al tema 8 8. OBJETOS Y MÉTODOS Ir al tema 9 Ir a Ejercicios

Un objeto es un grupo de variables agrupadas, estas variables se denominan propiedades. Los objetos también disponen de una serie de métodos o funciones que realizan operaciones con las variables propias del mismo.

En JavaScript podemos crear nuestros propios objetos, o bien, utilizar los objetos incorporados al lenguaje.

Propiedades de un objeto

Un objeto tiene asociado un conjunto de propiedades. Para acceder a estas propiedades, debemos utilizar la notación del punto (dot notation).

La sintaxis para acceder a una propiedad es la siguiente:

objeto.nombrePropiedad = contenido;

Por ejemplo, para un objeto llamado viaje con las propiedades: destino, origen, precio, transporte, el acceso a esas propiedades se realizaría con la siguiente notación:

viaje.destino="Praga";
viaje.origen="Barcelona";
viaje.precio=50000;
viaje.transporte="avión";

Métodos de un objeto

Un método es una acción que ejecutamos sobre los datos de un objeto.

La sintaxis para hacer una llamada al método es:

objeto.nombreMetodo(parametro1, parametro2,…);

Por ejemplo, para un método llamado ivaviaje que calcula el IVA del precio del viaje en función del tanto por ciento que se pasa como parámetro, se realizaría una llamada de esta forma:

viaje.ivaviaje(16)

Creación de objetos

Los pasos para crear un nuevo objeto en JavaScript son:

  1. Definir un tipo de objeto a través de una función.
  2. Crear una instancia del objeto utilizando la palabra reservada new.

Para definir un objeto llamado viaje se utilizaría el código que se muestra a continuación.

function viaje (origen, destino, precio, transporte){
	this.origen=origen;
	this.destino=destino;
	this.precio=precio;
	this.transporte=transporte;
	this.mostrar=mostarpantalla; //este es un método
}

El objeto definido contiene las propiedades: origen, destino, precio y transporte. También contiene el método mostar.

Para crear una instancia del objeto que hemos definido se debe utilizar una instrucción como la que sigue:

unviaje = new viaje ("Madrid", "Budapest","65000","avión");

La palabra clave this da a entender a la función que debe referirse a sí misma a la hora de hacer las asignaciones de propiedad. Cuando se definen funciones, pueden utilizarse también otros objetos como propiedades en esa función.

Definición de métodos

Para definir un método se ha de crear una función que realice las operaciones que se requieren con un objeto. Posteriormente el método se ha de asociar con el objeto.

La sintaxis para definir un método es:

objeto.nombreMetodo=nombreFuncion;

donde nombreFuncion es la función que queremos que sea método, nombreMetodo es el nombre que le damos al método y objeto es el objeto al que asociamos el método.

Para añadir métodos a los objetos hay que especificar en la definición del objeto la función que ha de emplearse para el método. En la definición de objeto anterior se ha añadido un método denominado mostar. La función mostarpantalla tendría que haberse definido de forma que se especificará como método en un objeto. Añadir un método a la definición de un objeto garantiza que todos los objetos que se creen contendrán el método.

Para definir el método imprime que se utiliza en la definición del objeto viaje se necesita la siguiente función

function mostarpantalla (origen, destino, precio, transporte){
	document.write ("<BR>Viaje: "+this.origen+"-"+this.destino);
	document.write ("<BR>precio: "+this.precio);
	document.write ("<BR>transporte: "+this.transporte);
}

Para utilizar el método definido se necesita un objeto creado con new. Se ejecutaría una instrucción como la siguiente:

unviaje.mostrar();

Esta instrucción mostraría la información del objeto unviaje por pantalla según la función mostrarpantalla.

[Ver ejemplo de objeto viaje]

Ejercicios

Ejercicio 8.1: Crear un modelo de objetos llamado cd_musica que contenga las propiedades: titulo, grupo y fecha y un método que muestra esta información por pantalla. Hacer un programa que cree tres objetos con la información que se solicita por pantalla y después los muestre utilizando el método creado para ello.

Ejercicio 8.2: Crear un modelo de objetos llamado piso que contenga las siguientes propiedades: metroscuadrados, altura, numhabitaciones y precio, también se deben crear dos métodos: uno que muestre la información por pantalla y otro que calcule el IVA en función de un número que se introduzca por pantalla. Hacer un programa que permita crear un objeto de este tipo, solicitando todos los datos de las propiedades y el % de IVA que se aplica al precio. Finalmente se debe mostrar esa información por pantalla.

Ir al tema 8 9. OBJETO Array Ir al tema 10 Ir a Ejercicios

Un array, también llamado matriz o tabla, es un conjunto de datos del mismo tipo que se identifican con un índice.

Podríamos representar una array como una tabla en la que cada casilla contiene un elemento. Para modificar, ver o eliminar un elemento se debe acceder a la casilla que lo contiene por medio de un índice que la identifica.

0

ana

1

rosa

2

pedro

3

carmen

4

ramón

Para acceder a "ana" tendríamos que acceder al elemento 0 del array, para acceder a "ramón" al 4, y así con el resto de los elementos.

Es importante tener en cuenta que el primer elemento del array se enumera con el índice 0. Así si una array tiene 5 elementos, los índices que contienen van del 0 al 4.

Para crear un arrary similar al gráfico:

socios = new Array();

Para introducir elementos en el array:

socios[0] = "ana";
socios[1] = "rosa";
socios[2] = "pedro";
socios[3] = "carmen";
socios[4] = "ramón";

Para eliminar elementos en el array se asigna un valor nulo a su contenido:

socios[3] = ""; //se ha borrado el contenido "carmen"
socios[2]=null; //se ha borrado el contenido "rosa"

Propiedades

length Indica la longitud del array, es decir, el número de elementos que contine 

Ejemplo 9.1: Ver la longitud de la tabla creada anteriormente.

document.write ("El número de socios es "+ socios.length);

[Ejecución]

Métodos

join()

Agrupa todos los elementos del array dentro de una cadena de caracteres y los separa por comas.

reverse()

 Invierte le orden de colocación de los elementos del array

sort()

 Muestra los elementos ordenados en su orden natural (alfabético para string y numérico para números) de menor a mayor.

Ejemplo 9.2: 

document.write ("<BR> Listado de socios según su posición");
document. write ("<BR> "+ socios.join());
document.write ("<BR> Listado de socios en orden inversa a su posición");
document.write ("<BR> "+ socios.reverse());
document.write ("<BR> Listado de socios ordenados por su contenido");
document. write ("<BR> "+ socios.sort());

[Ejecución]

Ejercicios

Ejercicio 9.1: Crear un programa que permita introducir 10 nombres de los socios de un club (utilizar la estructura de array). Los elementos deben leerse de pantalla utilizando el método prompt(). En el mensaje de salida que permite la introducción de los nombres debe indicarse el número de elemento que se solicita. Después de introducir todos los elementos se tiene que mostrar la siguiente información por pantalla:

Ejercicio 9.2: Crear un script en el que se pregunte por el número de alumnos y en función de este dato pida el nombre de los alumnos y sus notas finales. Al final se debe mostrar, cada alumno con su nota y después la media de todos los alumnos. 

Ejercicio 9.3: Crear un array para los nombres y otro para las edades. Introducir en el elemento 0 del primer array un nombre y en el elemento 0 del segundo array su edad y así sucesivamente hasta 6 nombres. Crear un enlace que permita mostrar por pantalla cada nombre con su edad  y otro para ver la media de todas las edades. Utilizar una función para calcular la media de las edades.

Ejercicio 9.4: Añadir, al final del ejercicio anterior, un enlace que de la posibilidad de introducir un nombre por pantalla y conocer su edad si existe y si no un mensaje de advertencia.

Ejercicio 9.5: Completar el ejercicio 9.3 con la presentación de dos enlaces en pantalla con las siguientes opciones:

Ejercicio 9.6: Crear un array que contenga el nombre de los meses del año. El script debe pedir el número del més en el que estamos y,  en función de ello, preguntar por los ingresos obtenidos en los meses del año ya transcurridos. El mensaje para pedir el ingreso del mes debe mostrar el nombre del mes correspondiente. Los ingresos deben ser acumulados y el valor final se debe mostar por pantalla.

Ejercicio 9.7: Modificar el script anterior para que guarde el ingreso de cada mes. Al final debe mostar un listado con el nombre del mes y el ingreso que le corresponde.

Ejercicio 9.8: Modificar el script anterior para que almacene también el gasto de cada mes y muestre al final un listado del nombre del mes, el ingreso, el gasto y un mensaje indicando si ha obtenido beneficios o no. También se debe mostar en el listado la media de los ingresos y los gastos de todos los meses almacenados.

Mucho más

http://dalila.sip.ucm.es/miembros/olga/arrays.html

Ir al tema 910. OBJETO string Ir al tema 11 Ir a Ejercicios

Las propiedades y métodos del objeto string se pueden aplicar a todas las cadenas de caracteres. De ese modo puede convertir, por ejemplo, todas las letras minúsculas de una cadena de caracteres en letras mayúsculas.

Propiedades

length

 Indica el número de caracteres del string.

Ejemplo 10.1:

var ciudad;
ciudad=prompt("Introduce el nombre de una ciudad");
document.write("La ciudad tiene " + ciudad.length + " letras");

[Ejecución]

Métodos

anchor("nomarcador")

 Le da a una cadena de caracteres el formato de un ancla de vínculo o marcador, al que se puede saltar con ayuda de un vínculo HTML. Su efecto es el mismo que el delcomando HTML <a name=>…</a>. A este método se le ha de transmitir como parámetro ("nomarcador") el nombre que se desee asingar al marcador..

Ejemplo 10.2: Crea un marcador en la primera línea y en la última construir un enlace que nos lleve directamente a la línea que contiene el ancla.

texto="Índice de materias";
document.write(texto.anchor("m1")); //le asigno el marcador "m1" al objeto "texto"
for (i=1;i<100;++i){
document.write("<br>Línea "+i); //escribo 100 líneas
}
//creo un enlace que apunta al marcador m1 
document.write("<br> <a href=#m1> Ir al principio </a>");

[Ejecución]

La construcción texto.anchor("m1") tiene aquí el mismo efecto que el comando HTML <a name="m1">Índice de materias</a>.

big()

 Formatea una cadena de caracteres con fuente grande, exactamente como el comando HTML de formato <big>….</big>.

Ejemplo 10.3: Muestra un texto en tamaño normal y otro en tamaño más grande.

texto="Los objetos de Javascript son muy útiles"
document.write (texto+"<br>"); //escribe texto en tamaño normal
document.write(texto.big()); //escribe texto en tamaño más grande

[Ejecución]

blink()

 No funciona en IE. Formatea una cadena de caracteres como texto intermitente,exactamente igual que el formato HTML de <blink>…</blink>.

Ejemplo 10.4: Almacena en una variable string los datos de la última modificación del documento y lo muestra intermitente.

actualizacion=document.lastModified; //última modificación del documento
document.write(actualizacion.blink());

[Ejecución]

bold()

 Formatea una cadena de caracteres en negrita, igual que el comando HTML de formato <b>…</b>.

Ejemplo 10.5. Almacena en una variable string la URL del archivo actual y lo muestra en negrita.

actualpag=window.location.pathname; //ruta de la página actual
document.write(actualpag.bold());

[Ejecución]

charAt(pos)

 Este método devuelve el carácter que ocupa una determinada posición dentro de una cadena de caracteres. Se le ha de transmitir como parámetro la posición deseada (pos). Hay que tener encuenta que la primera posición de un string es 0.

Ejemplo 10.6: Averigua las letras del NIF de un dato almacenado en una variable.

nif="34567564CF";
letra1=nif.charAt(8);
letra2= nif.charAt(9);
document.write("Las letras del nif son " +letra1+letra2);

[Ejecución]

concat(pluscadena)

 Añade una cadena de caracteres a otra cadena. Como parámetro se la ha de transmitir la cadena de caracteres (pluscadena) que se debe añadir, o concatenar, a la primera cadena.

Ejemplo 10.7: Define dos variables que contengan el nombre y el apellidos de una persona, mediante la operación de contatenación introducimos en una única variable el nombre y el apellido.

nombre="Ana";
apellido="Pereira";
nombrecompleto=nombre.concat(apellido);
document.write (nombrecompleto);
[Ejecución]

fixed()

 Formatea una cadena de caracteres como texto de teletipo, exactamente igual que el formato HTML <tt>…</tt>.

Ejemplo 10.8: Muestra el contenido de una variable en el formato de teletipo.

ciudad="Gijón";
document.write (ciudad.fixed());

[Ejecución]

fontcolor("colorhex")

 Formatea una cadena de caracteres asignando color a la fuente. Hace lo mismo que el formato <font color>…</font> en HTML. Como parámetro se le ha de transmitir el color que se desee entre comillas y en numeración hexadecimal (colorhex)

Ejemplo 10.9: Muestra el contenido de una variable string con el color rojo.

nombrepag="Mi página de presentación";
document.write (nombrepag.fontcolor("FF000")); //color rojo

[Ejecución]

fontsize(tamaño)

 Formatea una cadena de caracteres con un tamaño relativo, entre 1 y 7, siendo 3 el tamaño normal. Su efecto es el mismo que cuando en HTML se ejecuta <font size>…</font>.

Ejemplo 10.10: Muestra el contenido de dos variables string con distintos tamaños.

nombrecompleto="Ana Pereira";
direccion="C/Aletán nº3";
document.write (direccion.fontsize(7)+"<br>"); 
document.write (nombrecompleto.fontsize(6));

[Ejecución]

indexOf(cadena,[inicio])

 Este método averigua la primera vez que aparece un carácter (o cadena de caracteres) dentro de un string y devuelve la posición que ocupa el carácter dentro de la cadena. La numeración empieza en 0. Si la búsqueda se realiza sin éxito, se devuelve el valor –1. De manera opcional también podemos asignar a la función un segundo parámetro indicando la posición a partir de la cual se quiere empezar la búsqueda dentro de la cadena de caracteres.

Ejemplo 10.11: Busca en la cadena definida en la variable frase el texto que se corresponde con árbol.

frase="Quien a buen árbol se arrima, buena sombra le cobija";
document.write("La frase sobre la que buscar es: <br>"+frase.bold());
palabra=prompt("Introduce la palabra a buscar","");
if ((palabra != null)&& (palabra!="")){
	buscarpos=frase.indexOf(palabra);
	if (buscarpos==-1) alert ("La palabra no existe en la frase");
	else alert ("La palabra se encuentra en la posición "+buscarpos);
}else {
	document.write("No ha introducido ninguna palabra")
}

[Ejecución]

italics()

 Formatea una cadena de caracteres en cursiva. Su efecto es el mismo que cuando en HTML se ejecuta <i>…</i>.

Ejemplo 10.12: Muestra el texto introducido en la ventana en cursiva.

texto=prompt("Introduce tu nombre","");
document.write("Tu nombre es "+texto.italics());

[Ejecución]

lastIndexOf(cadena,[inicio])

 Este método averigua la última vez que aparece un carácter (o una cadena de caracteres) dentro de un string y devuelve la posición que ocupa el carácter dentro de la cadena. La numeración empieza en 0. Si la búsqueda se realiza sin éxito, se devuelve el valor –1. De manera opcional también podemos asignar a la función un segundo parámetro indicando la posición a partir de la cual se quiere empezar la búsqueda dentro de la cadena de caracteres.

Ejemplo 10.13: Averigua la última vez que aparece la cadena "hombre" en la frase.

frase="El hombre es enemigo del hombre";
document.write("Busca la última vez que aparece la palabra 'hombre');
document.write("en la siguiente frase: <br>"+frase.bold());
busqueda=frase.lastIndexOf("hombre");
alert("la última posición donde aparece es la "+busqueda);

[Ejecución]

link(destinourl)

Formatea una cadena de caracteres como un vínculo. Su efecto es el mismo que el del comando HTML <a href=>…</a>. Como parámetro se le ha de transmitir la dirección URL del destino del vínculo (destinourl).

Ejemplo 10.14: Crea un vínculo a una página denominada home.htm.

texto="A mi homepage";
document.write(texto.link("home.htm"));

[Ejecución]

slice(inicio,[ final])

Esta función extrae una subcadena parcial de una cadena de caracteres. Su valor de devolución es la subcadena extraída. Se le ha de transmitir un parámetro indicando la posición dentro del string del primero (inicio) y otro indicando la posición del siguiente caracter al último (final) a extraer. Se empieza a contar por 0. El segundo parámetro se puede omitir, en este caso, la extración se realiza hasta el final de la cadena.

Ejemplo 10.15: Extraer la subcadena que cotenga los caracteres que se corresponden con los caracteres que van del 4 al 8.

frase="el perro no fue encontrado";
extraer=frase.slice(4,8);
alert(extraer);

[Ejecución]

small()

 Formatea una cadena de caracteres con el texto en tamaño pequeño, igual que el formato de HTML <small>…</small>.

Ejemplo 10.16: Formatea en letra pequeña un texto almacenado en una variable.

frase="El perro no fue encontrado";
document.write (frase.small());

[Ejecución]

split(delimitador,[numprocesos])

 Este método divide cadenas de caracteres en varias subcadenas parciales. Las nuevas subcadenas parciales de caracteres se guardan en un array. como parámetro se le ha de transmitir un carácter delimitador o una serie de caracteres delimitadores que sirva como marca de separación para las subcadenas parciales (delimitador). Opcionalmente, también se puede transmitir como segundo parámetro el número máximo de procesos de división (split) que se han de realizar (numprocesos).

Ejemplo 10.17: Divide un string almacenado en una variable en función de la situación de los espacios en blanco y los almacena en la tabla denominada "palabras", a partir de entonces, cada elemento de la tabla creada contiene una palabra.

frase="Quien a buen árbol se arrima buena sombra le cobija";
document.write("La frase es: <br>"+frase.bold());
palabras=frase.split(" ");
document.write ("Una frase con "+palabras.length+" palabras.<br>");
document.write ("La cuarta palabra es "+palabras[3]);

[Ejecución]

strike()

 Formatea una cadena de caracteres como texto tachado, exactamente igual que el formato de HTML <s>…</s>.

Ejemplo 10.18: Formatea en letra tachada un texto almacenado en una variable.

frase="No por mucho madrugar amanece más temprano";
document.write (frase.strike());

[Ejecución]

sub()

 Formatea una cadena de caracteres como texto en subíndice, exactamente igual que el formato de HTML <sub>…</sub>.

Ejemplo 10.19: Formatea en subíndece el texto almacenado en una variable.

var peso="2";
document.write ("La fórmula química del agua es H"+peso.sub()+"O");

[Ejecución]

substr(inicio,numcaracteres)

 Extrae, de una cadena de caracteres, una cadena parcial de determinada longitud y a partir de un carácter que ocupa una determinada posición. Devuelve como valor la cadena de caracteres extraída. Se le han de transmitir los parámetros correspondientes a la posición de inicio del carácter que se quiere extraer (inicio) y el número de caracteres que se quiere extraer (numcaracteres).

Ejemplo 10.20. Averigua las letras del NIF de un dato almacenado en una variable.

var nif="34567564CF";
document.write("Las letras del nif son " +nif.substr(8,2));

[Ejecución]

substring(inicio,fin)

 Extrae una cadena parcial de caracteres dentro de otra cadena, desde una posición concreta a otra posición concreta. Devuelve como valor la cadena parcial de caracteres extraída. Se le han de transmitir como parámetros la posción inicial (inicio) y la final (fin).

Ejemplo 10.21: Averigua las letras del NIF de un dato almacenado en una variable.

var nif="34567564CF";
document.write("Las letras del nif son " +nif.substring(8,10));

[Ejecución]

sup()

 Formatea una cadena de caracteres como texto en superíndice, de la misma forma que el formato de HTML <sup>;…</sup>.

Ejemplo 10.22. Formatea en superíndice el texto almacenado en una variable.

var num1="8";
document.write ("Con 8 bits se pueden configurar 2"+num1.sup()+" números binarios");

[Ejecución]

toLowerCase()

 Transforma en minúsculas todas las mayúsculas de una cadena de caracteres.

toUpperCase()

 Transforma en mayúsculas todas las minúsculas de una cadena de caracteres.

Ejemplo 10.23. Trasforma una salida en mayúsculas y otra en minúsculas.

nombre=prompt("Introduce tu nombre","");
aficion= prompt("Introduce una afición","");
document.write ("<br>Bienvenid@ a mi portal "+ nombre.toUpperCase());
document.write ("<br>Te enviaremos información de "+aficion.toLowerCase());

[Ejecución]

Ejercicios

Ejercicio 10.1: Construye una página web que realice las siguientes operaciones

  1. Solicite el número de socios que se va a introducir.
  2. Imprima el titulo: "LISTADO DE SOCIOS" en pantalla
  3. Imprima el nombre del club: "Club Aladra"

Utilizando JavaScript, realiza las modificaciones necesarias en el documento para conseguir que:

Ejercicio 10.2: Hacer un script que muestre por pantalla la ecuación que se describe a continuación: 3 elevado a x + 4 elevado a y+ x sub i.

Ejercicio 10.3: Hacer un script que pregunte por el nombre del usuario por un lado y por la ciudad por otro. Si el usuario es "Eva" se le debe mostrar un mensaje dándole las gracias por entrar de nuevo en nuestra página y si no se debe mostrar en una ventana el nombre del usuario en mayúsculas y la ciudad en minúsculas, independientemente de como se hayan introducido. El programa debe funcionar de cualquier forma en que se introduzca el nombre por pantalla (mayúsculas o minúsculas).

Ejercicio 10.4: Hacer un script que pida el número de teléfono y en función del prefijo nos indique si es de Asturias, Lugo, Leon o Cantabria, si es de otro lugar mostrará el siguiente mensaje: "Ese prefijo aún no lo conozco". Se debe utilizar una función que tome por parámetro tres caracteres y nos muestre un mensaje en función de lo indicado anteriormente. Recordar el método slice(inicio,[final]). 

Ejercicio 10.5: Hacer un script que pregunte por el número de socios y pida, una vez por cada socio y en ventanas diferentes, el nombre y la dirección de correo electrónico. Cada vez que lea el dato del correo electrónico, una función deberá comprobar que el dato se corresponde con un dirección e-mail utilizando la función indexOf(). La función deberá devolver el valor true si la dirección tiene una @ y false si no la tiene.En el caso de que sea una dirección electrónica debe almacenar el nombre y la dirección en un elemento de un array y si no debe pedirsela de nuevo hasta que introduzca un dato correcto.

Ejercicio 10.6: Amplía el ejercicio 1 con las siguientes cuestiones: (analiza el ejemplo 10.2)

  1. Solicite el nombre de los distintos socios e imprima cada uno en una línea de la página
  2. Al finalizar la introducción de los datos muestre un enlace que contenga el texto "ir al principio" y que nos lleve al principio de la página. Este enlace se debe realizar utilizando los  métodos link()y anchor().

Ejercicio 10.7: Hacer un script que pida, en ventanas diferentes, el nombre y el teléfono de 5 socios. Con los datos de cada socio tendrá que componer una cadena con la siguiente estructura: "Pedro---->986787654". Cada una de estas cadenas las almacenará en una posición de un array. Al final debe escribir en la página web los datos de los socios con tamaño de fuente 7, que estarán almacenados en el array.

Ejercicio 10.8: Hacer un script que pregunte por el número de socios y pida, una vez por cada socio y en ventanas diferentes, el nombre y la dirección de correo electrónico. Cada vez que lea el dato del correo electrónico, una función deberá comprobar que el dato se corresponde con un dirección e-mail utilizando la función indexOf(). La función deberá devolver el valor true si la dirección tiene una @ y false si no la tiene.En el caso de que sea una dirección electrónica debe almacenar el nombre y la dirección en un elemento de un array y si no debe pedirsela de nuevo hasta que introduzca un dato correcto.

Ejercicio 10.9: Hacer un script que pida la dirección de correo electrónico de un usuario y devuelva el nombre del servidor. Utilizar los métodos slice() (o substr()) y indexOf()

Ejercicio 10.10: Hacer un script que al usuario que introduzca, nombre, profesión y edad separado por guiones. Después el programa debe mostrar la edad del usuario por pantalla. Utilizar los métodos length(), slice() y lastIndex()

Ejercicio 10.11: Vamos a hacer un juego. El programa debe permitir introducir al jugador1 una frase y después mostrar las palabras de la frase en pantalla de forma desordenada. A continuación, el programa debe preguntar al jugador2 por la posición de la 1ª palabra en la frase, después por la 2ª, y así sucesivamente hasta que el jugador de la posición de todas las palabras, entonces, el programa debe indicar si ha acertado o no. El mensaje final debe estar en rojo y letra grande si ha acertado, y en letra tachada si no lo ha hecho. Utilizar el método split()

Ir al tema 10 11. OBJETO Math Ir al tema 11 Ir a Ejercicios

Con el objeto math se pueden realizar cálculos científicos y contables. Este objeto dispone para ello de diversos métodos y funciones de gran potencia, así como de algunas propiedades. Las propiedades y métodos de Math se pueden utilizar directamente. El esquema a seguir es:

x=Math.Propiedad;
x=Math.Método(parámetros);

Propiedades

E

 Constante de Euler o número e cuyo valor numérico es aproximádamente 2,718.
LN2 Logaritmo natural de 2. Constante con un valor aproximado de 0,693.
LN10 Logaritmo natural de 10. Constante con un valor aproximado de 2,302.
LOG2E Logaritmo de 2. Constante con un valor aproximado de 1,442.
LOG10E Logaritmo de 10. Constante con un valor aproximado de 0,434.
PI Número Pi para cálculos con circunferencias. Constante con un valor aproximado de 3,14,159.
SQRT1_2 Raíz cuadrada de 0,5. Constante con un valor aproximado de 0,707.
SQRT2 Raíz cuadrada de 02. Constante con un valor aproximado de 1,414.

Métodos

abs(numero)

 Devuelve el valor absoluto del parámetro numero.
acos(numero) Calcula el arco coseno de numero.
asin(numero) Calcula el arco seno de numero.
atan(numero) Calcula la arco tangente de numero.
ceil(numero) Redondea el parámetro numero hacia su superior.
cos(numero) Calcula el coseno de numero.
exp(numero) Calcula el valor exponencial de numero tomando como base la constante de Euler.
floor(numero) Redondea el parámetro numero hacia su inferior.
log(numero) Calcula el logaritmo de numero.
max(numero1,numero2) Devuelve numero1 o numero2 en función de cuál sea el mayor.
min(numero1,numero2) Devuelve numero1 o numero2 en función de cuál sea el nenor.
pow(numero1,numero2) Calcula numero1 elevado a numero2.
random() Devuelve un número aleatorio comprendido entre 0 y 1.
round(numero) Devuelve el número entero más cercano a numero.
sin(numero) Calcula el seno de numero.
sqrt(numero) Calcula la raíz cuadrada de numero.
tan(numero) Calcula la tangente de numero.

Ejemplo 11.1. Se ejecutarán parte de los métodos. Ver el código del programa que se ejecuta en el enlace siguiente.

[Ejecución]

Ejercicios

Ejercicio 11.1: Hacer un programa que muestre un menú de opciones con las siguientes operaciones posibles:

El programa debe pedir una opción de las mostradas y en función de ello pedir los datos necesarios para realizar la operación y mostrar el resultado. Cada opción del menú debe ser ejecutada por una función diferente la cual debe pedir los datos y ejecutar las operaciones necesarias para obtener el resultado. El resultado debe ser devuelto por la función y se muestra en el programa principal.

Ejercicio 11.2: La siguiente intrucción calcula un número aleatorio entre 1 y 6:

                                Math.round(Math.random()*5)+1

Hacer una página web que permita hacer una tirada de dados cuando se pulsa un enlace.

Ir al tema 11 12. OBJETO Date Ir al tema 13 Ir a Ejercicios

El objeto Date es el responsable de realizar todos los cálculos referentes a fechas y horas. La fecha del 1 de Enero de 1970 a las 00:00:00 se toma internamente como referencia para guardar y calcular los demás datos. La unidad de tiempo que utiliza JavaScript para todos sus cálculos es el milisegundo.

Antes de acceder a través de JavaScript a las funciones integradas de fecha y hora, debe crear un objeto Date nuevo. Esto se puede hacer de varias formas:

nombreObjeto=new Date();
nombreObjeto=new Date("Mes Día, Año Horas:Minutos:Segundos");
nombreObjeto=new Date(Año, Mes, Día);
nombreObjeto=new Date(Año, Mes, Día, Horas, Minutos, Segundos);

Todos los métodos que permiten averiguar la fecha y hora actuales, o una parte de la misma, como por ejemplo el día de la semana o el mes, se refiere siempre al reloj del sistema del ordenador del usuario, ya que el usuario ejecuta JavaScript en el navegador de su ordenador. La hora actual del sistema del servidor no se uede averiguar con JavaScript –si se puede averiguar, por ejemplo, con un script CGI-.

Métodos

getDay()

 Devuelve el día de la semana del objeto nombreObjeto en forma de número, teniendo en cuenta que el 0 se corresponde con el domingo, el 1 con el lunes, y así sucesivamente.

Ejemplo 12.1. Muestra en el documento activo el día de la semana actual.

var ahora, diasemana;
ahora = new Date();
diasemana = ahora.getDay();
switch (diasemana){
	case 0: diasemana="domingo";
	break
	case 1: diasemana="lunes";
	break
	.....//incluir código para todos los días que faltan
	case 6: diasemana="sábado";
	break
}
document.write("El día de la semana es: "+diasemana);

[Ejecución]

getDate()

 Devuelve el día del mes del objeto nombreObjeto en forma de número.

getMonth()

 Devuelve el número del més guardado en el objeto nombreObjeto.

getYear()

 Devuelve el valor numérico el año guardado en el objeto nombreObjeto.

getHours()

Devuelve el valor numérico de la parte de las horas guardada en el objeto nombreObjeto.

getMinutes()

 Devuelve el valor numérico de la parte de los minutos guardada en el objeto nombreObjeto.

getSeconds()

 Devuelve el valor numérico de la parte de los segundos guardada en el objeto nombreObjeto.

Ejemplo 12.2. Extrae los datos infividuales de la fecha actual y muestra un mensaje acorde con esta información.

var dia, anno, hora, minutos, segundos, ahora;
var mes = new Array ("Enero", "Febrero", "Marzo","Abril","Mayo", "Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
ahora=new Date();
dia=ahora.getDate();
nummes=ahora.getMonth();
anno=ahora.getYear();
hora=ahora.getHours();
minutos=ahora.getMinutes();
segundos=ahora.getSeconds();
document.write ("Hoy es día "+ahora.getDate()+" de "+mes[nummes]+" del año "+anno+"<br>");
document.write ("La hora actual es "+hora+", "+minutos+" minutos y "+segundos+" segundos);

[Ejecución]

getTime()

 Devuelve en forma de número la cantidad de milisegundos transcurridos entre el 1/1/1970 a las 00:00:00 y la hora y fecha guardadas en objeto nombreObjeto.

Ejemplo 12.3. Muestra el número de días transcurridos desde el 1/1/1970

var actual, dias;
actual=new Date();
dias=actual.getTime()/(1000*60*60*24);
document.write ("Los días transcurridos desde el 1/1/1970 al día de hoy es de "+
	Math.floor(dias));

[Ejecución]

getTimezoneOffset()

 Devuelve el número de minutos que hay de diferencia entre el sistema horario del ordenador local y el Greenwich Meridian Time (GTM). Según la zona horaria en que esté definido el reloj del ordenador del usuario, el valor puede ser positivo o negativo.

Ejemplo 12.4. Calcula el número de horas de diferencia entre el sistema actual y el sistema horario GTM.

var ahora,diferencia;
ahora=new Date();
diferencia=ahora.getTimezoneOffset()/60;
document.write("La diferencia horaria local con el sistema horario GTM es de "+diferencia+" horas";

[Ejecución]

setDate(numdia) Modifica el día del mes guardado en nombreObjeto. El nuevo día del més será el dato transmitido en numdia. Los posibles valores de numdia son los que van de 1 a 31.
setMoth(nummes) Modifica el mes guardado en nombreObjeto. El nuevo día del més será el dato transmitido en nummes. Los posibles valores de nummes son los que van de 1 a 12.

setYear(numaño)

 Modifica el año guardado en nombreObjeto. El nuevo dato se ha de transmitir como parámetro.

setHours(numhora)

 Modifica el número de horas de la hora indicada en nombreObjeto. La nueva hora se ha de transmitir como parámetro. Los posibles valores de numhora son los que van de 0 a 23.

setMinutes(numminuto)

 Modifica el número de minutos de la hora indicada en nombreObjeto. La nueva hora se ha de transmitir como parámetro. Los posibles valores de numminuto son los que van de 0 a 59.
setSeonds(numseg) Modifica el número de segundos de la hora indicada en nombreObjeto. La nueva hora se ha de transmitir como parámetro. Los posibles valores de numseg son los que van de 0 a 59.

Ejemplo 12.5. Analiza el código del programa que se ejecuta en en enlace siguiente.

[Ejecución]

setTime(tiempo)

Modifica de una vez el contenido completo del dato horario almacenado en nombreObjeto. El nuevo dato se ha de transmitir como parámetro. El número se interpreta como la cantidad de milisegundos transcurridos desde el 1/1/1971 a las 00:00:00 hasta el momento que se quiere definir.

Ejemplo 12.6. Averigua la fecha que será dentro de 100 días.

tiempo=new Date();
ahoraAbs=tiempo.getTime();
antesAbs=ahoraAbs+(100*24*60*60*1000);// ahoraAbs+número de milisegundos que hay en 100 días
tiempo.setTime(antesAbs);
anno=tiempo.getYear();
mes=tiempo.getMonth();
dia=tiempo.getDate();
alert("Dentro de 100 días será el "+dia+"/"+mes+"/"+anno);

[Ejecución]

toGMTString()

 Transforma los datos guardados en nombreObjeto en una cadena de caracteres según el estándar IETF. Si en nombreObjeto tenermos, por ejemplo, 3-4-2001,20:12:10, este método nos devolverá el valor "Wed, 3 de Apr 2001 20:12:10 GMT".

toLocaleString()

 Transforma los datos guardados en nombreObjeto en una cadena de caracteres. La cadena de caracteres resultante tiene en cuenta la fecha y hora locales. Si en nombreObjeto tenermos guardado, por ejemplo, 2-10-1991, 23:59:00, este método devolverá el valor: "10/2/91 23:59"

Ejemplo 12.7. Muestra la hora actual según el horario GMT y según el horario local.

ahora=new Date();
document.write("La fecha y hora actual, según el horario GMT, son:"+ahora.toGMTString());
document.write("La fecha y hora local son: "+ahora.toLocaleString());

[Ejecución]

parse(fechastring)

 Devuelve, en milisegundos, el tiempo pasado entre las 00:00:00 del 1/1/1070 y la fecha especificada en fechastring. No es necesario crear un objeto Date nuevo, se puede trabajar directamente con Date.parse(fechastring).

Ejemplo 12.8. Calcula el número de años que han pasado desde 1/1/1970 hasta el día 1/1/2000.

annos=Date.parse("Tue, 1 Jan 2000 00:00:00 GMT") / (1000*60*60*24*365);
alert("Desde el 1/1/1970 al 1/6/2000 han pasado "+Math.floor(annos)+" años");

[Ejecución]

UTC(tiempo)

 Devuelve el número de milisegundos transcurridos entre el 1-1-1970 y el momento que se desee. Ese momento se ha de transmitir en forma de parámetro, y todos los parámetros han de ser valores numéricos. Los valores de la fecha se hand e indicar obligatoriamente, los de la hora son opcionales.

Ejemplo 12.9. Escribe el número de horas transcurridos desde 1/1/1970 hasta la apuntada en el ejemplo.

var horas= Date.UTC(2001,2,11,19,26,00)
document.write("El número de horas transcurridas entre 1/1/1970 y 2/11/2001 son "+horas);

[Ejecución]

Ejercicios

Ejercicio 12.1: Crear un script que muestre un mensaje de bienvenida distinto para cada día de la semana del día actual.

Ejercicio 12.2: Crear un script que muestre un mensaje con la fecha y hora actual pero utilizando el siguiente formato:" Hoy es día 3 de Mayo de 2001 y en estos momentos son las 17:30"

Ejercicio 12.3: Crear un script muestre el número de semanas transcurridas entre dos fechas que pida por pantalla, con la condición de que las dos fechas sean posteriores al 1/1/1970 (mirar el ejemplo 12.3).

Ejercicio 12.4: Crear un script muestre un mensaje de bienvenida indicando el sistema horario del ordenador cliente con el siguiente mensaje:"Usted está en un sistema horario que tiene X  hora de más respecto al sistema GTM".

Ejercicio 12.5: Analiza el siguiente código fijándote en lo que se ejecuta con cada intrucción.

ahora=new Date();
diaMes=ahora.getDate();
mes=ahora.getMonth();
año=ahora.getYear();
hora=ahora.getHours();
minutos=ahora.getMinutes();
segundos=ahora.getSeconds();
diaMesNuevo=prompt("El día del mes actual es "+diaMes+" Introduce el día del mes en el que te gustaría estar ", "");
ahora.setDate(diaMesNuevo);
mesNuevo=prompt("El mes actual es "+mes+" Introduce el mes en el que te gustaría estar ", "");
ahora.setMonth(mesNuevo);
añoNuevo=prompt("El año actual es "+año+" Introduce el año en el que te gustaría estar ", "");
ahora.setYear(añoNuevo);
horaNueva=prompt("El hora actual es "+hora+" Introduce la hora en el que te gustaría estar ", "");
ahora.setHours(horaNueva);
minutosNuevos=prompt("Los minutos de la hora actual son "+minutos+" Introduce los minutos en el que te gustaría estar ", "");
ahora.setMinutes(minutosNuevos);
segNuevos=prompt("Los segundos de la hora actual son "+segundos+" Introduce los segundos en el que te gustaría estar ", "");
ahora.setSeconds(segNuevos);
document.write ("La fecha en la que querrías estar es <br>"+ahora.getDate()+"/"+ahora.getMonth()+"/"+ahora.getYear()+"<br>y la hora "+ahora.getHours()+":"+ahora.getMinutes()+":"+ahora.getSeconds());