Saltar al contenido

www. La Mandarina Mecánica .es

…ahora con internet los niños se te educan solos… Homer Simpson…

Archivo

Categoría: JavaScript

Podemos pasar variables entre páginas utilizando solo javaScript
Este es el código que va en la página que envía las variables.
Enviamos las variables de los campos (campo_1 y campo_2) a través del form fi, con el método get.

<form action=”Recoger.html” method=”get” name=”f1″ id=”f1″>
  Nombre Cliente:
  <input id=”campo_1″ value=”" type=”text” />
  <input id=”campo_2″ value=”" type=”text” />
  <input name=”Submit” type=”submit” />
</form>

Este es el código que lleva la página que recibe las variables.
Accedemos a la cadena que nos hemos enviado desde la otra página.
La función separa las variables que hemos recibido,
Unescape codifica las cadenas de caracteres que hemos recibido en formato URL. unescape(”%23″);

// devuelve #
     continúe leyendo…

JavaScript es un lenguaje es basado en prototípos. Un prototípo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (números, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos.

Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototipo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos:

[Objeto = Prototípo]{
    [ Propiedad = Variable ]
    [ Método = Funcion ]
}

CREACIÓN DE CLASES

La forma en que los lenguajes orientados a objetos comúnmente resuelven el problema anterior es mediante el uso de Clases, en JavaScript no es posible declarar Clases, pero si es posible instanciar objetos a partir de un constructor.

continúe leyendo…

Esta es una implementación de lo que sería una hashtable de java, pero para javascript, puede resultar muy útil a la hora de manejar colecciones de datos en javascript.

Yo la he utilizado frecuentemente para almacenar objetos javascript y realmente funciona muy bien, su creador es Michael Synovic, se puede obtener también de su web (creo que es la oficial)

http://work.synovic.net/hashtable/hashtable.html

En esta página además del código fuente, existe una herramienta que te muestra el funcionamiento de la librería.

FUNCIONALIDADES:

Contructor(s):

Hashtable()

Creates a new, empty hashtable         

 

Method(s):

void clear()

Clears this hashtable so that it contains no keys.

boolean containsKey(String key)

Tests if the specified object is a key in this hashtable.

boolean containsValue(Object value)

Returns true if this Hashtable maps one or more keys to this value.

Object get(String key)

Returns the value to which the specified key is mapped in this hashtable.

boolean isEmpty()

Tests if this hashtable maps no keys to values.

Array keys()

Returns an array of the keys in this hashtable.

void put(String key, Object value)

Maps the specified key to the specified value in this hashtable. A NullPointerException is thrown is the key or value is null.

Object remove(String key)

Removes the key (and its corresponding value) from this hashtable. Returns the value of the key that was removed

int size()

Returns the number of keys in this hashtable.

String toString()

Returns a string representation of this Hashtable object in the form of a set of entries, enclosed in braces and separated by the ASCII characters “, ” (comma and space).

Array values()

Returns a array view of the values contained in this Hashtable.

Array entrySet()

Returns a reference to the internal array that stores the data. The Set is backed by the Hashtable, so changes to the Hashtable are reflected in the Set, and vice-versa.

 

continúe leyendo…

 

En al siguente ejemplo vamos a cambiar el aspecto y comportamiento de una tabla HTML básica utilizanzo TableSorter, CSS y JavaScript.

 

Vamos a mejorar la tabla HTML básica en los siguientes aspectos:

 

-          Posibilidad de ordenar los datos, incluso por fechas.

-          Alternar los colores de cada fila.

-          Hacer que cambie el cursor cuando pasamos por encima de una fila.

-          Hacer que cambie el color de la fila al pasar con el cursor por encima.

-          Modificación de las imágenes de la cabecera en función del tipo de ordenación.

 

Algunas de estas mejoras las proporciona la librería TableSorter y otras están basadas en CSS y JavaScript (JQuery).

 

TableSorter ofrece muchas más posibilidades de personalización de las tablas HTML, para ver todas las posibilidades consultar su página web. 

 

http://tablesorter.com

 

Ficheros Necesarios:

- arrow_down.png (Imagen cabecera orden descendente)

     arrow_down
- arrow_off.png (Imagen cabecera sin orden)

     arrow_off
- arrow_up.png (Imagen cabecera orden ascendente)

     arrow_up
- jquery-1.3.js
- jquery.tablesorter.min.js
- tableSorter.html (Contiene el código del ejemplo)

continúe leyendo…

A la hora de construir cualquier página web es muy común encontrarnos con la necesidad de incluir tablas para mostrar información, HTML nos proporciona el elemento TABLE con el cual podemos mostrar la información de esta forma. Mediante CSS podemos ‘tunear’ la tabla cambiando colores, tamaños, estilos, bordes…

TableSorter es una librería javascript que apoyándose en Jquery nos proporciona la funcionalidad hacer ordenable cualquier tabla escrita con HTML, es decir, pinchando sobre la cabecera de las columnas los datos que estan por debajo se ordenan de manera ascendente o descendente.

CARACTERÍSTICAS:

  1. Permite crear tablas ordenables a partir de una tabla HTML estándar. Se hace clic sobre las cabeceras de cada columna para ordenar.
  2. Posibilidad de ordenación por defecto.
  3. Personalización de cabeceras vía CSS
  4. Ordenación Multicolumna
  5. Extensibilidad vía Widgets
  6. Mínimo tamaño.
  7. Posibilidad de ordenar por fechas, moneda, IPs…
  8. Facilidad de uso 

Para ampliar información consultar la web oficial:

http://tablesorter.com

DESCARGA:

http://tablesorter.com/docs/#Download

Descargar los ficheros:

  1.  jquery-1.3.js
  2.  jquery.tablesorter.min.js

EJEMPLO BÁSICO:

La aplicación de TableSorter es muy sencilla, básicamente son tres pasos:

1- Modificar el HEAD de la página HTML para importar jquery-1.3.js y jquery.tablesorter.min.js

<script type=”text/javascript” src=”jquery-1.3.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>

 2- También dentro del HEAD introducir este código

$(document).ready(function()
    {
        $(”#idTabla”).tablesorter();
    }
);

Esto hace que cuando termine de cargar el documento HTML la librería modifique la tabla y la haga ordenable.

3- Para que TableSorter funcione correctamente la tabla HTML tiene que tener la siguiente estructura:

<TABLE id=”idTabla”>
<THEAD>
  <TR>
     <TH>Cabecera1</TH>
     <TH> Cabecera2</TH>
     <TH> Cabecera3</TH>
  </TR>
 </THEAD>
 <TBODY>
  <TR>
     <td>Dato1</TD>
     <td>Dato2</TD>
     <td>Dato3</TD>
  </TR>
  …
 </TBODY>
</TABLE>

Código Ejemplo Básico:

<HTML>
 <HEAD>
  <TITLE>Ejemplo TableSorter</TITLE>
   
  <script type=”text/javascript” src=”jquery-1.3.js”></script>
  <script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>

  <script type=”text/javascript”>
   $(document).ready(function()
       {
           $(”#tabla_basica”).tablesorter();
       }
   );
  </script>
 </HEAD>
 <BODY >
  <H1>EJEMPLO TABLESORTER BASICO</H1>
  <BR>
  <H3>Tabla HTML Básica</H3>
  <TABLE id=”tabla_basica” BORDER=”1PX”>
   <THEAD>
    <TR>
       <TH>Id Usuario</TH>
       <TH>Fecha Alta</TH>
       <TH>Nick</TH>
       <TH>Perfil</TH>
    </TR>
   </THEAD>
   <TBODY>
    <TR>
       <td>001</TD>
       <td>March 17, 2009 4:16 PM</TD>
       <td>usu1</TD>
       <td>Senior</TD>
    </TR>
    <TR>
       <TD>007</TD>
       <TD>January 8, 2010 2:23 PM</TD>
       <TD>usu5</TD>
       <TD>Junior</TD>
    </TR>
    <TR>
       <TD>003</TD>
       <TD>December 3, 2009 5:54 PM</TD>
       <TD>usu9</TD>
       <TD>Master</TD>
    </TR>
    <TR>
       <TD>009</TD>
       <TD>December 25, 2009 9:24 AM</TD>
       <TD>usu3</TD>
       <TD>Junior</TD>
    </TR>
   </TBODY>
  </TABLE>
 </BODY>
</HTML>