Categoría: Javascript

Listas en #javascript. (arreglos, matrices) #push, #pop, #sort, #reverse, #unshift, #forEach.

Las listas en javascript son un tema enorme pero que todo programador de javascript debe conocer a fondo. En esta entrada me enfocare a los aspectos básicos de las listas (arreglos, matrices).

Ver arreglos – curso básico de javascript.

Para crear una lista vacía se puede hacer de las siguientes dos formas:


//Forma 1: corchetes
var lista=[];

//Forma 2: new Array();
var lista=new Array();

Sea cual sea la forma que utilicen para crear una lista (arreglo) es irrelevante.

Ahora para crear una lista con elementos desde el inicio se puede hacer de la siguiente manera:


//Forma 1: corchetes
var lista=new Array("ganzo","perro");

//Forma 2: new Array();
var lista=["ganzo","perro"]

Ahora para recorrer una lista, la mejor manera es por medio del método forEach, el cual itera con cada elemento del arreglo. Este método recibe una función como parámetro, y se utiliza de la siguiente manera:


//creamos nuestra lista
var lista=["ganzo","perro"];

//recorre elemento por elemento y los muestra con alert()
//el atributo i es el elemento actual en cada iteración.

lista.forEach(function(i){
	alert(i)
});

Para agregar un elemento al final del arreglo se utiliza el método push(), y para agregar un elemento al inicio del arreglo se utiliza el método unshift(). En el siguiente ejemplo muestro como se utilizan:


var lista=["ganzo","perro"];

//agregamos pato al final de la lista
lista.push("pato");

//agregamos pez al inicio de la lista
lista.unshift("pez");

//si mostramos nuestra lista ahora se veria así
//>> pez, ganzo, perro, pato

La función pop() elimina el elemento que esta al final (una pila):


var lista=["ganzo","perro","palomo","gato"];

lista.pop();

//si mostramos nuestra lista ahora se veria así
//>> ganzo, perro, palomo

Y por último los métodos sort() y reverse() nos sirven para ordenar nuestra lista ya sea ascendente o descendentemente:


var lista=[5,4,1,9];

lista.sort();
//>> 1, 4, 5, 9

lista.reverse();
//>>9, 5, 4, 1

Todas estas funciones son básicas y nos sirven para el buen manejo de los objetos, y conocerla es obligación de todo programador de javascript.

Existen muchísimas funciones más de listas pero para eso habrá más entradas.

El método map de javascript (listas, matrices, arreglos)

El método map de javascript sirve para llamar una función la cual se ejecutara con cada uno de los elementos de un arreglo (matriz, lista). Este método recibe una función como argumento la cual ejecutara n veces (el número de elementos en nuestro arreglo), y regresara un nuevo arreglo con los resultados.

Su función es la siguiente:


//lista con numeros
var lista=[1,4,9,16,25]

//la función map es inmutable por lo cual debemos asignar lo que regresa a otra lista
//en este caso se lo asignamos a la misma lista
var lista=lista.map(function(elemento){
	//sacamos la raíz cuadrada del elemento
	return Math.sqrt(elemento);
});

//Ahora recorremos con foreach la lista
//foreach funciona de manera similar solo que no regresa la lista
lista.forEach(function(i){

	alert(i)
	//muestra 1,2,3,4,5
})

También podemos llamar una función existente la cual reciba un argumento el cual será nuestro elemento:


//lista con numeros
var lista2=[1,2,3,4,5]

//función que multiplica un numero por 10
function MultiplicaX10(elementoLista){

	return 	elementoLista*10
}

//la función mapa puede enviar parametros a la función que se ejecutara
//se hace de la siguiente manera
var lista2=lista2.map(MultiplicaX10,10);

//mostramos el resultado
lista2.forEach(function(i){

	alert(i)

	//muestra 10,20,30,40,50
})

Nota: La función foreach tiene un funcionamiento parecido, solo que no regresa un arreglo.

Codificar y decodificar base64 en #javascript

Para realizar la codificación y decodificación de base64 en javascript, vamos a utilizar el siguiente código comprimido que ya contiene todo lo necesario, pueden copiarlo en un archivo con extensión “js” o ponerlo en la página web donde va a utilizarlo.

Código Necesario, debe copiarse toda la siguiente línea:


//COPIAR ESTE CÓDIGO
//comienzo de código
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

//fin de código

Ahora muestro un ejemplo para realizar la codificación y decodificación:

Codificar en base64:


//codificar en base64
//variable con contenido "patito"
var variable="patito"

//codificamos a base64 utilizando Base64.encode
var variableBase64=Base64.encode(variable)

//imprimimos el valor
document.writeln(variableBase64);
//imprime cGF0aXRv

Decodificar en base64:


//decodificar en base64
var variableBase64="cGF0aXRv"

//decodificamos a base64 utilizando Base64.decode
var variable=Base64.decode(variableBase64)

//imprimimos el valor
document.writeln(variable);

Marcar activa una opción de un menú al darle clic con #jquery

Ejemplo (da clic en una opción).

Para hacer que un menú nos indique cual es la opción activa, o la sección en que nos encontramos en una página web podemos hacer uso de los selectores de jquery y la función addClass y removeClass.

A continuación anexo el código que permite hacer esto.

Css


#menu .opcion{
	width:20%;
	float:left;
	cursor:pointer;
	background:#ddd;
	color:#000;
	padding:5px 0px 5px 0px;
	text-align:center;

}

#menu .opcionActiva{

	background:#000;
	color:#fff;
}

Html


<div id="menu">
    	<div class="opcion">opción 1</div>
       	<div class="opcion">opción 2</div>
        <div class="opcion">opción 3</div>
        <div class="opcion">opción 4</div>
        <div class="opcion">opción 5</div>
</div>

Javascript


$(document).ready(function(){

	//selector a la clase opcion para darle función al evento click
	$(".opcion").click(function(){

		//eliminamos la clase activa por si una opción la contiene
		$(".opcion").removeClass("opcionActiva");

		//asignamos la clase opcionActiva a la opción presionada
		$(this).addClass("opcionActiva")

	})
})

Simplemente hago uso de addClass y removeClass de jquery para añadir o remover la clase de CSS opcionActiva.

La función addClass sirve para agregar una clase de css a un elemento y la función removeClass sirve para lo contrario.

¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.

El siguiente código hace posible la animación del scroll de una manera rápida y fácil:

Html


<!-- menu para dar clic -->
    <div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
    	<a href="#opcion1"  class="scroll">Ir a opcion 1</a><br />
        <a href="#opcion2"  class="scroll">Ir a opcion 2</a><br />
        <a href="#opcion3"  class="scroll">Ir a opcion 3</a><br />
        <a href="#opcion4"  class="scroll">Ir a opcion 4</a><br />
        <a href="#opcion5"  class="scroll">Ir a opcion 5</a><br />
        <a href="#opcion6"  class="scroll">Ir a opcion 6</a><br />
    </div>

    <!-- los elementos destino -->
    <div style="height:500px; background:#fff;">
    	<p id="opcion1">Un pato</p>
    </div>
     <div style="height:500px; background:#eee;">
    	<p id="opcion2">Dos pato</p>
    </div>
     <div style="height:500px; background:#ddd;">
    	<p id="opcion3">Tres pato</p>
    </div>
     <div style="height:500px; background:#ccc;">
    	<p id="opcion4">Cuatro pato</p>
    </div>
     <div style="height:500px; background:#bbb;">
    	<p id="opcion5">Cinco pato</p>
    </div>
     <div style="height:500px; background:#aaa;">
    	<p id="opcion6">Seis pato</p>
    </div>

Javascript


$(document).ready(function(){	
  $(".scroll").click(function(event){					 
 //bloqueamos la función del anchor original					 
 event.preventDefault();					 
 //dirigimos de manera animada al id del anchor					 
 $('html,body').animate({											 
 //le indicamos al scroll vertical que se dirija al objeto con el id											 
 //guardado en el anchor a su posición top.											 
 scrollTop:$(this.hash).offset().top											 
 },1000);	
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

¿Cómo utilizar prompt() de javascript? Mensaje de alerta con input text para escribir

La función prompt(), es una función de alerta de javascript, la cual tiene un comportamiento de mostrar un mensaje y a su vez un input text(caja de texto) en el cual el usuario puede capturar un texto. El texto capturado puede ser guardado en una variable y con esta realizar la acción deseada.

Se utiliza de la siguiente manera:


//El primer parametro es el texto a mostrar, el segundo es el texto por defecto en el input text
var texto = prompt("¿Cual es tu nombre?", "Texto por defecto");

//comparamos el texto obtenido, sea distinto a el texto por defecto
if(texto!="Texto por defecto")
  alert("Tu nombre es: "+texto)

¿Cómo utilizar confirm() de javascript? Alerta de confirmación

La función confirm() de javascript nos permite abrir una alerta en la cual tenemos la opción de confirmar o rechazar alguna pregunta, y dependiendo de la respuesta podemos hacer una acción u otra.

Se utiliza de la siguiente manera:


//la función confirm nos regresa true si es seleccionado si, sino nos regresa false.
if(confirm("¿Eres un pato?")){
alert("cua cua")
}else{
alert("no eres pato")
}

¿Cómo obtener un hijo por su posición con jquery? #nth-child

Para obtener un hijo por su posición con jquery haremos uso de la pseudo-clase de css nth-child, esta pseudo-clase sirve para seleccionar un elemento hijo por su posición la cual tiene la siguiente sintaxis: grupoElementos:nth-child(posición).

A continuación un ejemplo de cómo se utiliza:

Html

  <div id="muchosDivs">
    	<div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
  </div>

Jquery

$(function(){

        //seleccionamos del conjunto de divs hijos de #muchosDivs el tercer div
	$divTres=$("#muchosDivs div:nth-child(3)");

        //mostramos el div seleccionado
	alert($divTres.html())

})

La función alert() nos mostrara el número 3.

Realizar una búsqueda en una columna en específico de una tabla con #jquery.

Para realizar una búsqueda en una columna en específico de una tabla podemos hacer uso del filtro eq que nos sirve para seleccionar el número de la columna de elementos, de esta manera podemos realizar la búsqueda solo por una columna en particular.

En el siguiente ejemplo muestro como se puede buscar un valor en la primera columna, y después obtener la fila entera (por medio de la función parent() de jquery) para mostrar su resultado (o lo que deseen hacer ustedes con esos datos).

En seguida muestro el ejemplo en el cual pueden ver el resultado, y debajo el código que hace posible esta funcionalidad:

Ejemplo:

Html


<label>Captura un código</label>
	<input type="text" id="busqueda"/>
    <input onclick="jsBuscar();" type="button" value="Buscar" /><br /><br />

    <table id="miTabla">
    	<tr>
        	<th>Codigo</th>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
        	<td>1</td>
            <td>Pedro</td>
            <td>34 años</td>
        </tr>
    	<tr>
        	<td>2</td>
            <td>Luis</td>
            <td>34 años</td>
        </tr>
        	<tr>
        	<td>3</td>
            <td>Juan</td>
            <td>15 años</td>
        </tr>
        	<tr>
        	<td>4</td>
            <td>Jesus</td>
            <td>20 años</td>
        </tr>
        	<tr>
        	<td>5</td>
            <td>Pablo</td>
            <td>23 años</td>
        </tr>
    </table>

    <div id="mostrarResultado">

    </div>

Jquery


//función que realiza la busqueda
function jsBuscar(){

		//obtenemos el valor insertado a buscar
		buscar=$("#busqueda").prop("value")

		//utilizamos esta variable solo de ayuda y mostrar que se encontro
		encontradoResultado=false;

		//realizamos el recorrido solo por las celdas que contienen el código, que es la primera
		$("#miTabla tr").find('td:eq(0)').each(function () {

			 //obtenemos el codigo de la celda
			  codigo = $(this).html();

			   //comparamos para ver si el código es igual a la busqueda
			   if(codigo==buscar){

					//aqui ya que tenemos el td que contiene el codigo utilizaremos parent para obtener el tr.
					trDelResultado=$(this).parent();

					//ya que tenemos el tr seleccionado ahora podemos navegar a las otras celdas con find
					nombre=trDelResultado.find("td:eq(1)").html();
					edad=trDelResultado.find("td:eq(2)").html();

					//mostramos el resultado en el div
					$("#mostrarResultado").html("El nombre es: "+nombre+", la edad es: "+edad)

					encontradoResultado=true;

			   }

		})

		//si no se encontro resultado mostramos que no existe.
		if(!encontradoResultado)
		$("#mostrarResultado").html("No existe el código: "+buscar)
}

Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []