Diferencia entre revisiones de «Programación en JavaScript/ClasesJS»

Contenido eliminado Contenido añadido
Sin resumen de edición
(Sin diferencias)

Revisión del 12:22 18 jul 2005

Clases predeterminadas de JavaScript.

A continuación vamos a estudiar algunos de los objetos y clases más utilizados en JavaScript.

Clase Array.

Está clase, como ya sabemos, permite crear una matriz de datos a utilizar en nuestros programas. Vamos a estudiar algunos de sus métodos. Veamos el siguiente ejemplo:

   <html>
   <body>
   
   <script type="text/javascript">
   var famname = new Array(3);
   famname[0] = "Jani";
   famname[1] = "Tove";
   famname[2] = "Hege";
   
   document.write(famname.length + "<br>");
   document.write(famname.join(".") + "<br>");
   document.write(famname.reverse() + "<br>");
   document.write(famname.push("Ola","Jon") + "<br>");
   document.write(famname.pop() + "<br>");
   document.write(famname.shift() + "<br>");
   </script>
   
   </body>
   </html>

Estudiemos el código. Después de crear la matriz, utilizamos algunas funciones y propiedades. length sirve para conocer la cantidad de elementos que contiene la matriz propiamente dicha. La función join permite unir todos los elementos separados por una cádena de caracteres que pasamos como parámetro, en este caso, ".". La siguiente función es reverse, que posiciona los elementos actuales de forma inversa. push nos permite añadir un nuevo elemento dentro de la matriz (en realidad, podemos añadir cualquier cantidad de ellos). pop extrae el último elemento de la matriz y lo devuelve. Y por último, shift, que extrae y devuelve el primer elemento de la lista. Con esto, es fácil contrastar el código y el resultado final en el navegador.

Si queremos ordenar los elementos de una matriz, podemos usar la función miembro sort para realizar esta operación. Pero la ordenación realizada es "lexicográfica", es decir, que se ordenarán alfabéticamente. Si queremos realizar una ordenación númerica, podemos crear una función de comparación como veremos en el siguiente ejemplo:

   <html>
   <body>
   
   <p>
   Nota: Si no usamos función de comparación para definir el orden, la matriz 
   se ordenará siempre alfabéticamente. "500" vendrá antes que "7", pero en una ordenación 
   numérica, 7 viene antes que 500. Este ejemplo muestra como usar la funcion de 
   comparación - que ordenará correctamente los elementos tanto en una matriz numérica 
   como de cadenas.
   </p>
   
   <script type="text/javascript">
   array1=new Array("Rojo","Verde","Azul");
   array2=new Array("70","9","800");
   array3=new Array(50,10,2,300);
   array4=new Array("70","8","850",30,10,5,400);
   
   function compareNum(a,b)
   {
           return a-b;
   }
   
   document.write("Ordenado: " + array1.sort());
   document.write("<br><br>");
   
   document.write("Ordenado sin compareNum: " + array2.sort());
   document.write("<br>");
   document.write("Ordenado con compareNum: " + array2.sort(compareNum));
   document.write("<br><br>");
   
   document.write("Ordenado sin compareNum: " + array3.sort());
   document.write("<br>");
   document.write("Ordenado con compareNum: " + array3.sort(compareNum));
   document.write("<br><br>");
   
   document.write("Ordenado sin compareNum: " + array4.sort());
   document.write("<br>");
   document.write("Ordenado con compareNum: " + array4.sort(compareNum));
   </script>
   </body>
   </html>

Como podemos apreciar en el código, sólo las llamadas a sort que tienen como parámetro la función de comparación "compareNum" han sido ordenadas numéricamente.

Clase Date.

Esta clase permite definir una fecha y hora. Tiene una buena cantidad de funciones, y aquí vamos a estudiar algunas de las más interesantes.

   <html>
   <body>
   <script type="text/javascript">
   var d = new Date();
   document.write(d.getDate());
   document.write(".");
   document.write(d.getMonth() + 1);
   document.write(".");
   document.write(d.getFullYear());
   </script>
   </body>
   </html>

Este ejemplo construye una fecha usando las instrucciones getDate, getMonth y getFullYear. El valor base de getMonth es 0 (Enero). Aunque con esto, lo que conseguimos es la fecha actual. En los siguientes ejemplos veremos como adaptar el objeto a la fecha que nosotros queremos. En el siguiente ejemplo extraeremos la hora actual:

   <html>
   <body>
   
   <script type="text/javascript">
   var d = new Date();
   document.write(d.getHours());
   document.write(".");
   document.write(d.getMinutes());
   document.write(".");
   document.write(d.getSeconds());
   </script>
   
   </body>
   </html>

La dinámica de este ejemplo es muy parecida al anterior, pero en este caso usamos getHours, getMinutes y getSeconds.

   <html>
   <body>
   
   <script type="text/javascript">
   var d = new Date();
   d.setFullYear("1990");
   document.write(d);
   </script>
   
   </body>
   </html>

Este ejemplo muestra como cambiar alguna parte de la fecha, en concreto el año, con setFullYear, aunque también podemos cambiar otras partes de la fecha y la hora, con setMonth, setDate (para el día), setHours, setMinutes y setSeconds. En vez de setFullYear, que tiene como parámetro un año con todas sus cifras, podemos usar también setYear, que sólo necesita las dos últimas cifras del año (de 00 a 99). Algo a tener en cuenta es que con esto no cambiamos ningún parámetro de la fecha y hora del sistema, si no del objeto Date exclusivamente.

En el siguiente ejemplo veremos como mostrar los días de la semana:

   <html>
   <body>
   <script language="javascript">
   var d=new Date();
   var weekday=new Array("Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado");
   document.write("Hoy es " + weekday[d.getDay()]);
   </script>
   </body>
   </html>
   

Como vemos, podemos crear una matriz con los días de la semana (comenzando por el domingo, dado que se toma la referencia anglosajona), y referenciar a sus elementos con la función getDay. También podemos usar otras funciones como getMonth, getYear, getHours, getMinutes y getSeconds.

Clase Math.

Esta clase contiene funciones y propiedades relacionadas con las matemáticas.

   <html>
   <body>
   
   <script language="javascript">
   document.write(Math.round(7.25) + "<br>");
   document.write(Math.random() + "<br>");
   no=Math.random()*10;
   document.write(Math.round(no) + "<br>");
   document.write(Math.max(2,4) + "<br>");
   document.write(Math.min(2,4) + "<br>");
   </script>
   
   </body>
   </html>

round permite redondear una cifra de coma flotante a un entero. random genera un número aleatorio, o si queremos que este número se encuentre entre 1 y 10, lo podemos hacer como en la siguiente linea, generando un número aleatorio y multiplicándolo por el máximo que queremos. max y min devuelven el número máximo y mínimo entre dos dados, respectivamente. A su vez, esta clase contiene también funciones trigonométricas como cos, sin, tan, acos, asin, atan. Podemos contar con otras funciones de coma flotante como ceil, log, y sqrt (raiz cuadrada). Como puede comprobarse también, no hace falta crear un objeto para usar esta clase (se las denomina clases estáticas).

Clase String.

Esta clase permite la manipulación de cadenas de texto. Toda cadena de texto que creamos es un objeto de esta clase, así que podemos hacer manipulaciones de muy diverso tipo.

   <html>
   <body>
   
   <script type="text/javascript">
   var str="¡JavaScript es guay!";
   
   document.write("<p>" + str + "</p>");
   document.write(str.length + "<br>");
   
   document.write("<p>" + str.fontcolor() + "</p>");
   document.write("<p>" + str.fontcolor('red') + "</p>");
   document.write("<p>" + str.fontcolor('blue') + "</p>");
   document.write("<p>" + str.fontcolor('green') + "</p>");
   
   var pos=str.indexOf("Script");
   if (pos>=0)
   {
           document.write("Script encontrado en la posición: ");
           document.write(pos + "<br>");
   }
   else
   {
           document.write("¡Script no encontrado!" + "<br>");
   }
   
   document.write(str.substr(2,6));
   document.write("<br><br>");
   document.write(str.substring(2,6) + "<br>");
   
   document.write(str.toLowerCase());
   document.write("<br>");
   document.write(str.toUpperCase() + "<br>");
   </script>
   
   </body>
   </html>

En este ejemplo podemos ver varios ejemplos del funcionamiento de las funciones de cadena que podemos encontrar en la clase String. La propiedad length, como en Array, nos devuelve, en este caso, el número de caracteres de la cadena de texto. fontcolor es una función que permite generar cadenas de distintos colores (nombres o valores hexadecimales). indexOf es una función que devuelve la posición de una cadena dentro de otra (partiendo de cero). Si es igual a -1, es que no se ha localizado. substr y substring funcionan extrayendo subcadenas de otras, pero con funcionamientos diferentes. substr nos devuelve una subcadena que comienza en el primer parámetro, devolviendo el número de caracteres especificado en el segundo parámetro. substring devuelve una subcadena que se comprende entre el primer y segundo parámetro (esto es, contando siempre con un índice base de 0). Por último, toLowerCase y toUpperCase devuelven la misma cadena pero convertida a minúsculas y mayúsculas respectivamente.