¿Como encontrar la mayor cantidad de numero uno consecutivos?

Digamos que nos proporcionan un array de numeros binarios llamado nums, este devuelve el número máximo de unos consecutivos en el array.

Para resolver este problema voy a utilizar JavaScript. 

Como un ejemplo, el primer array que vamos a ejecutar es el siguiente: 

nums: [1,1,0,1,1,1] y como resultado nuestra funcion deberia devolver el valor: 3. 

 

El siguiente es el codigo para resolver este problema:

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                maximo = l1;
            } else {
                maximo = l2;
            }
        } 
    }

    return maximo;
    
};

 let nums = [1,1,0,1,1,1];

 console.log(encontrarMaximoNumeroUnosCosecutivos(nums));

Ahora voy a explicar como funciona este codigo.

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

};

Primero, declaramos la funcion "encontrarMaximoNumeroUnosConsecutivos" e iniciamos las variables c, l1, l2, y maximo; todas igual a 0. 

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {

         if (nums[i] === 1) {
            c++;
        }  

    }

} 

Luego, debemos atravezar cada elemento del array "nums". Para ello utilizamos un for loop, en esete caso.
Al mismo tiempo, cada vez que el valor del indice "i" que estemos atravezando sea igual a "1" incrementaremos el valor de la variable "c".

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            l1 = c;
            c = 0;
        }
};

Ahora preguntamos: si el indice "i" es igual a 0 o el indice "i" indique el final del array entonces debemos especificar q el valor de "l1"ahora sera el valor del acumulador de 1s "c". Y luego resetear el valor de "c" a 0 de nuevo.

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0; 
        } 
    }

};
Digamos que el valor maximo de unos consecutivos en un array es igual a 2 y luego encontramos otro valor consecutivo mas alto, entonces debemos reemplazar este valor. Para ello preguntamos si la variable "l1" no es igual que 0 y tambien "l1" es mayor que el valor de "l2", entonces "l2" tendria el valor de "l1". 

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                maximo = l1;
            } else {
                maximo = l2;
            }
        } 
    }

    return maximo;
    
};

 let nums = [1,1,0,1,1,1];

 console.log(encontrarMaximoNumeroUnosCosecutivos(nums));

Finalmente preguntamos si el valor del numero maximo de unos consecutivos nuevo (l1) es mayor que el valor de unos consecutivos anterior (l2) entonces la variable "maximo" sera igual al valor de l1; de lo contrario sera igual al valor de l2. Retornamos la variable "maximo" que nos indicara el numero maximo final de unos consecutivos en el array. 

 

 

 

Read more

Comparación entre Animaciones Web utilizando JavaScript o CSS

 Las aplicaciones web a veces están equipadas con animaciones. Algunas animaciones son desencadenadas por eventos, como por ejemplo cuando el usuario pasa el mouse sobre un botón y este progresivamente expande su tamaño, o simplemente pueden suceder sin la interacción del usuario, un ejemplo seria un cuadrado parpadeante en la pantalla. Las animaciones proporcionan efectos visuales a las aplicaciones basadas en la web para hacerlas más interactivas y visualmente atractivas. Algunas aplicaciones son más adecuadas a tener elementos animados mas que otras, como en el caso de juegos interactivos.

    Actualmente existen diferentes formas de lograr estos efectos visuales en la web. En este artículo voy a analizar los enfoques de animación web utilizando JavaScript y CSS. ¿Qué método es más eficiente y bajo qué circunstancias? Cuál método es más fácil de implementar y mantener?

    En el pasado, Flash era un método muy popular para crear aplicaciones animadas; sin embargo, llegada la demanda de dispositivos mobiles la utilización de Flash se volvió obsoleta. Esto se debió a que el rendimiento de la animación se convirtió en una aspecto muy importante y Flash no ofrecía las mejores capacidades. Mas adelante se introdujeron librerías de JavaScript, como es el caso de jQuery, que ofrece animaciones basadas en JavaScript. Sin embargo, tan conveniente como jQuery fue para los desarrolladores, este también quedo corto en lograr un alto rendimiento de animación [3]. Luego, la introducción de CSS3 se convirtió una mejor solución para animaciones que no implicaban instalar ninguna librería externa para nuestro proyecto, y por lo tanto era una opción prometedora para animaciones más eficientes.

Hay dos formas diferentes de utilizar CSS para crear animaciones. Estos son Propiedades de animaciones y transiciones CSS:

Transiciones CSS: muestra animaciones entre dos estados. Estos podrían ser, por ejemplo, animando un botón entre su estado de reposo y un hover. El botón podría mostrar un efecto de desvanecimiento mientras el usuario intenta seleccionar este botón. Las transiciones con CSS tienen diferentes propiedades que definen la propiedad de animación de destino, la duración de la animación, suavizado del efecto y retraso del mismo. Tanto la duración como el retraso se miden en segundos.

Animaciones CSS: asigna animaciones entre un conjunto de propiedades iniciales y finales. Esta consta de keyframes clave para la progresión de las animaciones y el estilo de la apariencia de la misma [2].

    Ambos están programados de diferentes formas, pero también comparten deficiencias similares. Las animaciones utilizando CSS no permiten una gran interacción entre el programador/usuario y la animación. Por ejemplo, no hay forma de encontrar un keyframe especifico en una animacion programada solo con CSS, también una vez que la animación ha comenzado no se puede revertir o llevar a ningún punto en particular. Aparte de esto, solo algunos navegadores permiten al usuario pausar y reanudar una animación creada con CSS. Cuando se trata de valores relativos, las animaciones hechas con CSS no ofrecen gran flexibilidad tampoco, lo que significa que si el programador desea instruir a la animación un elemento para mover 50px a la derecha de donde comienzan las animaciones, no sería posible hacerlo simplemente utilizando animaciones con CSS [3].

    Otra alternativa popular para animar elementos de aplicaciones web es utilizando JavaScript. Cómo mencione anteriormente, hay ciertas librerías de JavaScript que se pueden utilizar para producir animaciones de una manera simple para los desarrolladores. jQuery hizo un intento de lograr esto, pero este también se quedo corto con relación al rendimiento. Aparte de jQuery existe otra librería basada en JavaScritpt llamada GSAP (GreenSock Animation Platform) que se construyó específicamente para crear animaciones para la web, teniendo en cuenta la optimización y la eficiencia de estas tareas [3]. Sin embargo, existe un enfoque más estándar para crear animaciones JavaScript, y esto es la API de animaciones web que funciona dirigiéndose a elementos DOM [6].

    JavaScript proporciona ciertas funcionalidades que no son posibles utilizando simplemente animaciones basadas en CSS como son la posibilidad de pausar, reanudar, detener, y revertir una animación. Esto proporciona al usuario la capacidad de tener cierto control sobre la animación.  Esto hace que aplicación sea verdaderamente interactiva, una característica que no es posible con CSS [3]. Las animaciones desarrolladas con JavaScript también puede hacer uso de objetos, lo que hace posible integrar la Programación Orientada a Objetos a nuestras animaciones, permitiendo desarrollar diseños más complejos. Otra ventaja de JavaScript sobre las animaciones con CSS es poder animar otras objetos distintos de los elementos DOM [2].

    Aparte de la interactividad y la facilidad de desarrollo, hay otro, incluso más importante aspecto al comparar dos métodos de programación. Aqui estamos hablando del rendimiento. Primero vamos a discutir qué propiedades y componentes son menos y más costosos de animar. Las propiedades más baratas para animar los navegadores son: posición, escala, rotación, y opacidad [4]. Ahora, las propiedades más caras de animar son las que cambian el diseño completo de la página junto con ellos, así como la pintura en la pantalla. Por ejemplo, si tenemos un elemento de página web con ancho y alto medidos en porcentaje junto a otros elementos, cambiar estas propiedades constantemente hará que el los elementos en el entorno tengan que recalcular sus valores tambien, lo que hace que esta sea una tarea muy costosa. Estos problemas relacionados al  rendimiento se pueden atribuir a ambos tipos: animaciones basadas con JavaScript y también con CSS.

    Cuando se trata de subprocesos de animaciones CSS, así como animaciones web basadas en JavaScript se ejecutan en un hilo llamado "hilo compositor". Este hilo es diferente del hilo donde el navegador hace la mayor parte del trabajo en cuanto a estilo, diseño, pintura y ejecución de JavaScript. El nombre de este hilo es "hilo principal". El hecho de que haya una hilo separado para CSS y animaciones web para ejecutar significa que se ejecutarán independientemente de la carga de trabajo que lleva el navegador de otros tareas. Esto hace que las animaciones basadas en CSS y JavaScript funcionen igualmente bien en eso sentido [2]. Otra ventaja que hace que las animaciones CSS y JavaScript se ejecuten sin problemas es la ventaja que ambos obtienen del hardware. La capa de GPU permite el aislamiento los elementos de las de animaciones que, a su vez, facilitan que la GPU mueva esas capas y las componga mas tarde. Sin embargo, para que JavaScript aproveche esta ventaja del GPU una capas que necesita para hacer uso de transformaciones 3D y matrices. La única desventaja de la estratificación de GPU sería un pequeño retraso al iniciar ambas aplicaciones debido al cálculo de la capa del navegador y la carga a la hora de la GPU [3].

    En conclusión, tanto las animaciones basadas en JavaScript como en CSS funcionan relativamente y casi igualmente bien cuando JavaScript está bien optimizado. La decisión de elegir uno sobre el otro tiene más que ver con la flexibilidad y la complejidad de la animación que quiere ser lograda. Para proyectos más pequeños y simples, se recomienda utilizar animaciones CSS. Vienen con la ventaja de ser más fáciles de escribir. Para animaciones más complejas que requieren pausar, detener, reanudar y ralentizar las animaciones, JavaScript es necesario. La API de animaciones web es la herramienta de referencia para el desarrollo de animaciones JavaScript; sin embargo, hay otras librerías de animación de alto rendimiento como GSAP.



Referencias:

[1] https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript
Updated 2019
[2]https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-andperformance#
css-vs-javascript-performance Updated 2019
[3] https://css-tricks.com/myth-busting-css-animations-vs-javascript/ 2014 - Updated 2017
[4] https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Read more

Como invertir un String con recursividad

Primero que todo ¿Que es recursividad?

Recursividad es el proceso en el que una función se invoca a si misma. La solución de este problema depende de la solución de instancias más pequeñas del mismo problema.

Pasos a tener en cuenta cuando usamos recursividad.

Paso 1. Ten especificaciones específicas

Paso 2. Procura que tu método trabaje en el caso base.

Paso 3. Presta atención al caso recursivo(s). En tu mente reemplaza cada invocación recursiva de acuerdo a las especificaciones y verifica que todo este correcto.

Paso 4. Ten en cuenta no tener un proceso recursivo infinito. Asegúrate de que los argumentos de invocaciones recursivas son en algún caso más pequeñas que las partes de los métodos.

Aquí discutiré el problema de como invertir un String, o una palabra usando JavaScript. Este problema se podría resolver fácilmente utilizando un ciclo for. Sin embargo, quiero utilizar el método de recursividad para resolver el mismo problema.

1. Primero creamos una función llamada: "invertirString", que reciba como argumento un String: "str".

function invertirString(str) {
}

2. Necesitamos saber el tamaño del String, por lo tanto creamos una variable llamada "sLen" que sera igual al str.length.

function invertirString(str) {
       let sLen = str.length;
}

3. ¿Ahora, para que saber el tamano del String? Pues la lógica de las invocaciones recursivas requiere que llamemos la funcion "invocarString()" tantas veces sea necesario, teniendo en cuenta que cada vez que llamemos la función el valor del argumento (str), debe de ser cada vez menor.

Si cada vez que llamemos la funcion "invertirString()" queremos que la entrada sea menor entonces el caso base seria cuando el tamaño del String sea menor o igual que 0. Por lo tanto:

function invertirString(str) {
       let sLen = str.length;
       if (sLen <= 0) {
        return "";
    }
}

Cuando hayamos llamado la función muchas veces hasta agotar el tamano del String debemos retornar la función con un String vacío.

4. La parte más importante de las funciones recursivas es invocarse a si mismas. En este caso para invertir un String debemos primero utilizar el método "chatAt()" para tomar el último caracter en nuestro String y concatenarlo con el resultado de la invocación de nuestra funcion. Como queremos que el String valla eliminando el caracter que vallamos añadiendo a nuestro resultado y así achicando la entrada, entonces utilizamos el método "substring()" para ello. De esta manera nuestro código terminaría así:

function invertirString(str) {
    let sLen = str.length;
    if (sLen <= 0) {
        return '';
    } else {
        return str.charAt(sLen - 1) + invertirString(str.substring(0, sLen -1));
    }
}

Read more

Como encontrar el segundo valor mas grande en un array

En este programa usare JavaScript para encontrar el sugundo valor mas alto en un array.

Primero declaramos una variable de nombre "arr" con el array y los valores que queramos intentar.

let arr = [ 8, 6, 4, 12, 10, 2 ];

Luego declaramos la funcion "segundoMasGrande" y pasamos el array "arr" como parametro de la siguiente manera:

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {

}

Para empezar debemos declarar dos variables e inizializarlas en cero:

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {
   let masGrande = 0;
   let segundoMasGrande = 0;
}

Ahora debemos comparar todos los valores en el array para saber cual es el segundo valor mas grande. Para ello tambien debemos saber cual es el valor mas grande y compararlos. Utilizamos un clico for iterar por cada valor y para comparar los valores, uno con otro utilizamos un if.

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {

   let masGrande = 0;
   let segundoMasGrande = 0;

  for (let i = 0; i < arr.length; i++) {
     if (arr[i] > masGrande ) {
            masGrande = arr[i];
     }
  }
}

En el codigo de arriba, "if (arr[i] > masGrande ) {" compara si el "arr[i]" o el valor actual es mayor que el valor actual mas grande que es la variable "masGrande". Cuando el ciclo "for" compare por primera vez que el valor "8" es mas grande que "0" que seria el valor actual de la variable "masGrande" entocese el valor de la variable "masGrande" se igualaria a "8".

Cuando el ciclo "for" compare el segundo valor "6" enconces preguntara: 6 > 8, siendo el resultado falso, entoces deberiamos decir que 8 todavia es el valor mas grande pero 6 es ahora el segundo valor mas grande. Para ello creamos un else y utlizamos la variable del valor "segMasGrande".

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {

   let masGrande = 0;
   let segundoMasGrande = 0;

  for (let i = 0; i < arr.length; i++) {
     if (arr[i] > masGrande ) {
            masGrande = arr[i];
     } else {

             if (arr[i] > segMasGrande) {
                segMasGrande= arr[i];
             }
         }
  }
}

Cuando el ciclo compare el tercer valor "4" entonces preguntaria: 4 > 8, (8 todavia es le valor mas grade) esto tambien seria falso, por lo cual se va al else y el if preguntaria de nuevo: 4 > 6, (6 todavia el segundo valor mas grande), esto seria falso tambien, por lo tanto los valores de ambas variables continuan igual.

Al comparar 12 > 8, esto seria verdadero, ahora el valor de la variable masGrande se iguala a 12. Pero que pasaria con el valor de 8, que ahora seria le segundo valor mas grande? Para resolver esto simplemente igualamos la variable "segMasGrande" igual a el valor que tenia la variable "masGrande".

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {

   let masGrande = 0;
   let segundoMasGrande = 0;

  for (let i = 0; i < arr.length; i++) {
     if (arr[i] > masGrande ) {
            segundoMasGrande = masGrande ;
            masGrande = arr[i];
     } else {

             if (arr[i] > segMasGrande) {
                segMasGrande= arr[i];
             }
         }
    }
}

Finalmente imprimimos el valor de la variable "segMasGrande" y llamamos la funcion al final.

let arr = [ 8, 6, 4, 12, 10, 2 ];

function segundoMasGrande(arr) {

   let masGrande = 0;
   let segundoMasGrande = 0;

  for (let i = 0; i < arr.length; i++) {
     if (arr[i] > masGrande ) {
            segundoMasGrande = masGrande ;
            masGrande = arr[i];
     } else {
             if (arr[i] > segMasGrande) {
                segMasGrande= arr[i];
             }
         }
    }
    console.log(segMasGrande);
}


segundoMasGrande(arr);

El segundo valor mas grande de este array seria 10.

Read more

Manipulacion de tablas HTML con DataTables

En mi experiencia en mejor plugin para la manipulacion de datos en tablas HTML es DataTables. El mismo le permitira ordenar, buscar y mostrar los datos de sus tablas de una forma dinamica, gracias a que es un plugin de la libreria de javascript JQuery.

A continuacion un ejemplo de como instalar DataTable con datos traidos desde la base de datos. 

1. Descargar la version mas reciente de DataTable en la siguiente direccion: http://datatables.net/download/, extraer el archivo .zip

2. Ejecutar el siguiente script para la creacion de la base de datos:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

--

-- Database: `datatable_ejemplo`

--

CREATE DATABASE IF NOT EXISTS `datatable_ejemplo` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `datatable_ejemplo`;

-- --------------------------------------------------------

--

-- Table structure for table `cliente`

--

CREATE TABLE IF NOT EXISTS `cliente` (

  `codigo` int(11) NOT NULL AUTO_INCREMENT,

  `nombre` varchar(25) NOT NULL,

  `apellido` varchar(25) NOT NULL,

  `direccion` varchar(45) NOT NULL,

  `telefono` varchar(12) NOT NULL,

  PRIMARY KEY (`codigo`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--

-- Dumping data for table `cliente`

--

INSERT INTO `cliente` (`codigo`, `nombre`, `apellido`, `direccion`, `telefono`) VALUES

(1, 'Maria', 'Lopez', 'c/ 20 Los Ramos', '829-234-2344'),

(2, 'Juan', 'Gomez', 'c/ D Las Flores', '849-322-2344'),

(3, 'Flavia', 'Pichardo', 'c/77 El tronco', '809-345-6420');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

3.  Abrir un documento php con el formato HTML correspondiente. 

4. Hacer la conexion a la base de datos:

<?php

mysql_connect('localhost','root','') or die ("No se pudo conectar a la base de datos");

mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");

?>

5. Crear la tabla html que contendra nuestros datos. Es muy importante que la tabla cuente con las etiquetas <theader> y <tfooter> para que el DataTable pueda funcionar. El siguiente es mi codigo para el ejemplo. 

<table id="datatables">

    <thead>

       <tr>

<th> <strong>Codigo </strong>    </th>   

<th> <strong>Nombre </strong>    </th>  

<th> <strong>Apellido </strong>  </th>

<th> <strong>Direccion </strong> </th>

<th> <strong>Telefono </strong> </th>

 </tr>

    </thead>

    <tbody>

       <?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";

$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {

    

    

    echo '<tr">

<td>' . $fila['codigo'] . '</td> 

<td>' . $fila['nombre'] . '</td> 

<td>' . $fila['apellido'] . '</td> 

<td>' . $fila['direccion'] . '</td> 

<td>' . $fila['telefono'] . '</td> 

</tr>';

    

}

?>

    </tbody>

</table>

6. Luego hay que anadir dentro de las etiquetas <head> el enlace a los estilos css para el dataTable de la siguiente manera:

<style type="text/css" title="currentStyle">

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>

7. Finalmente necesario insertar justo despues del cierre de la etiqueta <body> los siguientes enlaces:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ENLACE A JQUERY ALMACENADO EN LA LIBRERIA DE GOOGLE -->

<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> <!-- ENLACE A LOS SCRIPTS DE JQUERY DE EL DATATABLE -->

<script type="text/javascript" charset="utf-8"> <!-- FUNCION PARA INICIALIZAR EL DATATABLE Y PERSONALIZARLO AL ESPANOL -->

$(document).ready(function() {

$('#datatables').dataTable({

   "aaSorting": [[0, "desc"]],

        "sPaginationType": "full_numbers",

"bAutoWidth": false,

"oLanguage": {

            "sLengthMenu": "Mostrar _MENU_ ",

            "sZeroRecords": "No existen datos para esta consulta",

            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",

            "sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",

            "sInfoFiltered": "(De un maximo de _MAX_ registros)",

"sSearch": "Buscar: _INPUT_",

"sEmptyTable": "No hay datos disponibles para esta tabla",

"sLoadingRecords": "Por favor espere - Cargando...",  

"sProcessing": "Actualmente ocupado",

"sSortAscending": " - click/Volver a ordenar en orden Ascendente",

"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {

        "sFirst":    "Primero",

        "sLast":     "Ultimo",

        "sNext":     "Siguiente",

        "sPrevious": "Anterior"

    },

        }

});

})

</script>

El resultado deberia lucir asi:

Este es mi codigo completo:

<?php
mysql_connect('localhost', 'root', '') or die("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
<html>
<title> DataTable Ejemplo </title>
<head>
<style type="text/css" title="currentStyle">

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>
</head>

<body>

<table id="datatables">
    <thead>
       <tr>
<th> <strong>Codigo </strong>    </th>
<th> <strong>Nombre </strong>    </th>
<th> <strong>Apellido </strong>  </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
 </tr>
    </thead>
    <tbody>
       <?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {
 
 
    echo '<tr">

<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>

</tr>';
 
}

?>
    </tbody>
</table>
</body>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ENLACE A JQUERY ALMACENADO EN LA LIBRERIA DE GOOGLE -->

<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> <!-- ENLACE A LOS SCRIPTS DE JQUERY DE EL DATATABLE -->

<script type="text/javascript" charset="utf-8"> <!-- FUNCION PARA INICIALIZAR EL DATATABLE Y PERSONALIZARLO AL ESPANOL -->

$(document).ready(function() {

$('#datatables').dataTable({


   "aaSorting": [[0, "desc"]],
        "sPaginationType": "full_numbers",
"bAutoWidth": false,


"oLanguage": {
            "sLengthMenu": "Mostrar _MENU_ ",
            "sZeroRecords": "No existen datos para esta consulta",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Ultimo",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
    },

        }
});

})

</script>

</html>

Read more

Validar formulario con Javascript

En este ejemplo de validación de un formulario utilizando Javascript primero creamos un formulario en HTML, con los campos Nombre, Apellido y Teléfono y Dos botones Validar y Limpiar. A cada uno de estos elementos HTML les asignamos un id para identificarlos en el código Javascript con sus respectivos nombres.

Ex:
<form>
<label>Nombre:</label>
<input type="text" id="nombre" name="nombre" size="20" autofocus="autofocus" /><br/>
<label>Apelido:</label>
<input type="text" id="apellido" name="apellido" /><br/>
<label>Telefono:</label>
<input type="text" id="telefono" name="telefono" /><br/>
<input type="button" value="Validar" id="boton_validar" />
<input type="reset" value="Limpiar" />
</form>



Luego debajo del formulario escribimos el codigo Javascript:

<script type="text/javascript">

function validar() {
    var nombre = document.getElementById("nombre");
    var apellido = document.getElementById("apellido");
    var telefono = document.getElementById("telefono");

    if (nombre.value.trim() == "") {
        nombre.focus();
        return alert("Algun elemento esta vacio");
    } else {
        if (apellido.value.trim() == "") {
            apellido.focus();
            return alert("Algun elemento esta vacio");
        } else {
            if (telefono.value.trim() == "") {
                telefono.focus();
                return alert("Algun elemento esta vacio");
            }
        }
    }

}

document.getElementById("boton_validar").onclick = validar;

</script>

Explicación del código:

Primero creamos la funcion validar, dentro de ella el codigo que esta devolvera.
Asignamos a variables javascript los inputs HTML Ej:  var nombre = document.getElementById("nombre");


Preguntamos si los valores de las variables javascript estan vacíos entonces enviamos el cursos al input correspondiente (nombre.focus();) y mandamos por pantalla un mensaje (return alert("Algun elemento esta vacio");)

Por ultimo decimos que el nombre del botón validar (en este caso "boton_validar", identificado por su id en HTML), en el evento "onclick" devuelva "validar" que es el nombre de la función.

Nota: La función Trim() se utiliza para eliminar espacios en blanco al inico y final de una cadena.

En definitiva el código completo es el sigte:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Validar formulario con Javascript</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>


<body bgcolor="#FFFFFF">

<hr />
<h2> VALIDACION DE FORMULARIO CON JAVASCRIPT </h2>
<hr />
&nbsp;

<form>
<label>Nombre:</label>
<input type="text" id="nombre" name="nombre" size="20" autofocus="autofocus" /><br/>
<label>Apelido:</label>
<input type="text" id="apellido" name="apellido" /><br/>
<label>Telefono:</label>
<input type="text" id="telefono" name="telefono" /><br/>
<input type="button" value="Validar" id="boton_validar" />
<input type="reset" value="Limpiar" />
</form>

<script type="text/javascript">

function validar() {
    var nombre = document.getElementById("nombre");
    var apellido = document.getElementById("apellido");
    var telefono = document.getElementById("telefono");

    if (nombre.value.trim() == "") {
        nombre.focus();
        return alert("Algun elemento esta vacio");
    } else {
        if (apellido.value.trim() == "") {
            apellido.focus();
            return alert("Algun elemento esta vacio");
        } else {
            if (telefono.value.trim() == "") {
                telefono.focus();
                return alert("Algun elemento esta vacio");
            }
        }
    }

}

document.getElementById("boton_validar").onclick = validar;


</script>


</body>
</html>










Read more