Programación en JavaScript/ClasesJS

Clases predeterminadas en JavaScript

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

Clase Array

La clase Array permite crear una matriz de datos. Vamos a estudiar algunos de sus métodos con 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.
join permite unir todos los elementos separados por una cádena de caracteres que pasamos como parámetro, en este caso, ".".
reverse 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.
shift extrae y devuelve el primer elemento de la lista.

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 la fecha actual mediante los métodos getDate, getMonth y getFullYear. El valor base de getMonth es 0 (Enero). 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 cómo modificar 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>

La función 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 malo!";
   
   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.

A continuación se muestra una lista muy útil con los métodos y propiedades propios de la clase String, pero ¡cuidado! estos metodos dependen de que el navegador los implemente, o sea que no tienen porque funcionar en todos los navegadores y/o versiones.

Propiedades: length; prototype; constructor

Métodos: anchor(); big(); blink(); bold(); charAt(); charCodeAt(); concat(); fixed(); fontcolor(); fontsize(); fromCharCode(); indexOf(); italics(); lastIndexOf(); link(); localeCompare(); match(); replace(); search(); slice(); small(); split(); strike(); sub(); substr(); substring(); sup(); toLocaleLowerCase(); toLocaleUpperCase(); toLowerCase(); toString(); toUpperCase(); valueOf()

← OOP

Clases prederteminadas en JavaScript

Formularios →