How to select option in dropdown menu using jQuery

Sometimes we need to find the selected option in a select component.

HMTL

<select name=”options” id=”optionsById”>
      <option value=”1″>Red</option>
      <option value=”2″ selected=”1″>Green</option>
      <option value=”3″>Blue</option>
</select>


Javascript

//remove selected one
$(‘option:selected’, ‘select[name=”options”]’).removeAttr(‘selected’);
//Using the value by name
$(‘select[name=”options”]’).find(‘option[value=”3″]’).attr(“selected”,true);
//or
$(‘select[name=”options”]’).find(‘option[value=”3″]’).prop(“selected”,true);
//or
$(‘select[name=”options”]’).val(‘3’);
//Using the value by id
$(‘#optionsById option:eq(“1”)’).prop(“selected”,true);
//Using the text
$(‘select[name=”options”]’).find(‘option:contains(“Blue”)’).attr(“selected”,true);

How to sort an array of objects with javascript

We  can sort an array using this method:

  1. This is the method to sort the array:
    var array = [(name, artist),(name, artist),(name, artist)];
    
    function SortByName(a, b){
      var aName = a.name.toLowerCase();
      var bName = b.name.toLowerCase(); 
      return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
    }
    
    
  2. How to sort the array with data? Just do:
    var arr = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];
    array.sort(SortByName);

Reference link: http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript

How to sort array on key value in javaScript using Prototype library

We  can sort a JSON  array using this method:

  1. This is the method to sort the array:
    Array.prototype.sortOn = function(key){
        this.sort(function(a, b){
            if(a[key] < b[key]){
                return -1;
            }else if(a[key] > b[key]){
                return 1;
            }
            return 0;
        });
    }
    
    
  2. How to sort the array with data? Just do:
    var arr = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];
    arr.sortOn("name");
    arr.sortOn("artist");

If we want to convert the array to JSON we have to do this:

  1. var array = [];
    for ( var i=1 ; i< arr.length; i++ ){
            var mComponente = {
    	        name	: 'bob',
    	        artist  : 'rudy',
    	};
            array.push(mComponente);
    }
    
    // convert array into JSON array
    var jsonArray = $.parseJSON(JSON.stringify(array));
    

Reference link: http://stackoverflow.com/questions/16648076/sort-array-on-key-value

jQuery form autofill

Simply autofill an empty form using JSON data:

  1. We need a form:
    <form id="f">
        name <input type="text" name="name">
        email <input type="text" name="email">
        love jQuery
        <input type="radio" name="lovejquery" value="yes"> yes
        <input type="radio" name="lovejquery" value="no"> no
    </form>
  2. and data:
    var data = {
        "name": "John Doe",
        "email": "johndoe@mail.com",
        "lovejquery": "yes"
    }
  3. How to autofill the form with data? Just do:
    $("#f").autofill( data );

Reference link: http://labs.creative-area.net/jquery.formautofill/doc/

How to round a Double value in Java

With this code, you can round a double in Java

  1. Using DecimalFormat method:
    double d = 1.234567;
    DecimalFormat df = new DecimalFormat("#.##");
    System.out.print(df.format(d));
  2. Using BigDecimal method:
    public static void main(String[] args)
    {
          double value = 1254.625;
          String val = value+"";
          BigDecimal big = new BigDecimal(val);
          big = big.setScale(2, RoundingMode.HALF_UP);
          System.out.println("Number : "+big);
    }

Reference link: http://javafox.wordpress.com/2009/10/20/redondear-un-double-en-java/

Funciones y propiedades básicas de JavaScript

JavaScript incluye numerosas propiedades y métodos muy útiles para cada uno de los tipos de variables y clases que define.

2.8.1. Cadenas de texto

A continuación se muestran algunas de las funciones más útiles para el manejo de cadenas de texto:

length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)

var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10

+, se emplea para concatenar varias cadenas de texto.

var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

Además del operador +, también se puede utilizar la función concat()

var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

Las cadenas también se pueden unir con variables numéricas:

var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"

Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Los espacios en blanco se pueden añadir al final o al principio de las cadenas o indicarlos de forma explícita:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:

var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:

var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:

var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = ‘H’
letra = mensaje.charAt(2); // letra = ‘l’

indexOf(letra), calcula la primera posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1

La función indexOf() comienza su búsqueda desde el principio de la palabra y solo devuelve la primera posición de todas las existentes. Su función análoga es lastIndexOf().

lastIndexOf(letra), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.lastIndexOf(‘a’); // posicion = 3
posicion = mensaje.lastIndexOf(‘b’); // posicion = -1

La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.

substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si solo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

Si se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición inicio está incluida y la posición final no):

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a"

Si se indica un final más pequeño que un inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5); // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte una cadena de texto dividiendo sus trozos a partir del carácter delimitador indicado:

var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

Con esta función se pueden extraer fácilmente las letras que forman una palabra:

var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]

2.8.2. Arrays

A continuación se muestran algunas de las funciones más útiles para el manejo de arrays:

length, calcula el número de elementos de un array:

var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays:

var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador:

var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad.

var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2]

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud una unidad. También es posible añadir más de un elemento a la vez.

var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad.

var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3]

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en una unidad. También es posible añadir más de un elemento a la vez.

var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]

Reference link: http://librosweb.es/ajax/capitulo_2/funciones_y_propiedades_basicas_de_javascript.html

How to convert an HTML Table into a JSON Object

Table-to-JSON

A jQuery plugin that converts an HTML Table into a javascript object. Great for working with user-editable tables or accessing output from 3rd party tools.:

  1. JavaScript files needed:

    Insert these scripts into <head> tag:

    <head>
       //download this js from "http://jquery.com/download/"
       <script src="js/jquery-1.9.1.min.js"></script>
    
       //download this js from "https://github.com/lightswitch05/table-to-json/blob/master/lib/jquery.tabletojson.min.js"
       <script src="js/jquery.tabletojson.min.js"></script>
    </head>
  2. Basic Usage JavaScript code:

    <head>
       //Insert this script into <head> tag:
       <script>
          //Basic Usage
          var table = $('#example-table').tableToJSON();
       </script>
    </head>
  3. Advance Usage JavaScript code:
    <head>
       //Insert this script into <head> tag
       <script>
          //Ignore first column (name)
          var table = $('#example-table').tableToJSON({
            ignoreColumns: [0]
          });
       </script>
    </head>
  4. Example:
    First Name Last Name Points
    Jill Smith 50
    Eve Jackson 94
    John Doe 80
    Adam Johnson 67
    HMTL
    <table id='example-table'>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th data-override="Score">Points</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td data-override="disqualified">50</td></tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td></tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>80</td></tr>
        <tr>
          <td>Adam</td>
          <td>Johnson</td>
          <td>67</td></tr>
      </tbody>
    </table>
  5. Result of the example:

    <script type="text/javascript">
      // Basic Usage
      var table = $('#example-table').tableToJSON();
      // table == [{"First Name"=>"Jill", "Last Name"=>"Smith", "Score"=>"disqualified"},
      //           {"First Name"=>"Eve", "Last Name"=>"Jackson", "Score"=>"94"},
      //           {"First Name"=>"John", "Last Name"=>"Doe", "Score"=>"80"},
      //           {"First Name"=>"Adam", "Last Name"=>"Johnson", "Score"=>"67"}]
    
      // Ignore first column (name)
      var table = $('#example-table').tableToJSON({
            ignoreColumns: [0]
      });
      // table == [{"Last Name"=>"Smith", "Score"=>"disqualified"},
      //           {"Last Name"=>"Jackson", "Score"=>"94"},
      //           {"Last Name"=>"Doe", "Score"=>"80"},
      //           {"Last Name"=>"Johnson", "Score"=>"67"}]
    </script>

Reference link: http://lightswitch05.github.io/table-to-json/

JavaScript libraries comparison

JavaScript Libraries

JQuery Mootols Minified Zepto

Size Comparison

Name Legacy IE Support Compiled Size Compiled and GZip’d
minified-web.js yes 9.1kb 4089 bytes
minified-web.noie.js no 7.7kb 3429 bytes
jQuery 1.10.2 yes 91kb 32kb
jQuery 2.0.3 no 82kb 29kb
MooTools Core NoCompat 1.4.5 yes 88kb 29kb
Zepto.js 1.0 no 27kb 9.7kb

Feature Comparison

Feature Minified jQuery MooTools Zepto.js
CSS Selector yes

CSS1 or browser engine
yes

CSS3 subset + extensions
yes

CSS3 subset + extensions
yes

browser engine
CSS Style Changes yes yes yes yes
CSS Class Changes yes yes yes yes
Element Creation yes yes

HTML-strings only
yes yes

HTML-strings only
Element Cloning yes yes yes yes
DOM Manipulation yes yes yes yes
Animation (numeric) yes yes yes yes

CSS transitions only
Animation (color) yes no yes yes

CSS transitions only
Events yes yes yes yes
DOMReady yes yes yes yes
Ajax/XHR yes yes yes yes
Promises/A+-compatible yes yes no no
JSON yes yes yes yes
Cookies yes no yes no
Form Serialization no yes no yes
Array Helpers (Iteration) no

will be in Util module
yes yes yes
AMD support yes yes no no
Online Builder yes

modules and functions
no yes

modules
no
Internet Explorer 6-8 compatible yes

IE-support optional
yes

jQuery 1.x only
yes no

 

Reference link: http://minifiedjs.com/