Operadores de incremento y decremento en javascript

En javascript disponemos del operador aritmético de decremento y del operador de incremento ++. El primero resta uno al valor de la variable sobre la que lo apliquemos y el segundo añade uno. Esto en principio no requiere más explicación, el único intríngulis con estos operadores es la posición en la que los usamos,ya que no funcionan igual si van antes de la variable que si van después:

  • Si lo ponemos como prefijo, antes de la variable, entonces incrementa el valor de la variable y luego lo devuelve.
  • Si lo ponemos como sufijo, después de la variable, entonces devuelve el valor de esta y luego la incrementa.

Esto con un ejemplo se entiende mucho mejor. Veamos el incremento:

x=3;
y=++x;
//En este caso tanto x como y valdrían 4
x=3;
y=x++;
//En este caso x vale 3 e y vale 4

Con el decremento es lo mismo:

x=3;
y=--x;
//En este caso tanto x como y valdrían 2
x=3;
y=x--;
//En este caso x vale 3 e y vale 2
Anuncios

Conocer el “peso” de tu página con jQuery

Vamos con una corta entrada rápida sobre jQuery ¿quieres saber cuántos elementos DOM hay en tu página? Con una simple línea con jQuery podemos mandar la cuenta a la consola del navegador, tal que así:

console.log( $('*').length );

Conocer el número de elementos puede ser útil si estás buscando la causa de una ralentización en la carga de una página.

Cambiar el src de una imagen con javascript o jQuery

Vamos con una entrada rápida de Javascript ¿Cómo cambio el src de una imagen de forma dinámica? No es lo más recomendable para una web por temas de posicionamiento, pero puede ser una solución útil para una aplicación web de uso interno.

Vamos a suponer que tenemos una imagen llamada image1.jpg y que al clickar en un elemento esta cambia por otra que se llama image2.jpg:

<img src="image1.jpg" id="img1" alt="primeraImagen" />

<script>
//así con JS normal
//accediendo directamente a src
function cambiarImagenJS(){
  document.getElementById("img1").src="image2.jpg";
}

//así con jQuery
//haciendo uso de la función attr()
function cambiarImagenjQ(){
  $("#img1").attr("src","image2.jpg");
}
</script>

La idea sería vincular la función a un evento (un click, el cambio de estado de un checkbox o radio, llenar un campo de texto…) y cambiar el valor. En el ejemplo damos por fijo el id del elemento, en la práctica seguramente sería mejor pasárselo a la función. En ese caso ya miráis que se adapta mejor a vuestras necesidades.

jQuery: comodines para los selectores

Una de las comodidades de jQuery es la versatilidad que nos da a la hora de trabajar con diversos selectores. Lo que muchos no saben, o lo intuyen pero no lo tienen claro, es que existen diversos comodines para usar los selectores de jQuery. Vamos a verlos:

Seleccionar por un prefijo: Tenemos la posibilidad de usar un selector que actúe sobre los elementos que tengan un atributo cuyo valor sea igual a la cadena que le pasemos, o que empiecen por esa cadena seguida de un guión. La sintaxis sería tal que así: jQuery( “[attribute|=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="pepe">Some text</div>
<div id="pepe-paya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id|='pepe']" ).hide();
</script>

Seleccionar por un fragmento de una cadena: Con esta opción lo que buscaríamos sería un fragmento de texto dentro del valor del atributo, en cualquier posición. La sintaxis sería tal que así: jQuery( “[attribute*=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepepaya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id*='pepe']" ).hide();
</script>

Seleccionar por una palabra aislada concreta: El título es un pelín confuso, lo se, pero te lo explico. Con esta opción buscaríamos dentro del atributo una palabra concreta, que puede estar delimitada por espacios o ser el valor único del atributo. La sintaxis sería tal que así: jQuery( “[attribute~=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casa pepe">Some text</div>
<div id="pepe">Some other text</div>
<div id="pepepaya">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id~='pepe']" ).hide();
</script>

Seleccionar por el final del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor termine con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute$=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el primer div y dejaría los otros dos
$( "div[id$='pepe']" ).hide();
</script>

Seleccionar por el principio del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor comience con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute^=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el segundo div y dejaría los otros dos
$( "div[id^='pepe']" ).hide();
</script>

Javascript: Obtener el último carácter de una cadena

Ayer veíamos cómo obtener la primera letra de una cadena, hoy vamos a ver cómo obtener la última. Básicamente es lo mismo que en el otro ejemplo: usamos la función charAt(), pero en este caso en vez de un 0 le pasamos la longitud de la cadena restándole el último carácter (obtenemos la longitud a través de la propiedad length de la cadena). Tal que así:

#Un ejemplo donde haremos un alert
#de la última letra de una cadena

var cadena = "abc";
window.alert(cadena.charAt(cadena.length-1));

Javascript: obtener el primer carácter de una cadena.

¿Cómo se obtiene el primer carácter de una cadena con javascript? Pues es muy simple: con la función charAt(). Dicha función recibe como parámetro la posición dentro de la cadena en la que queremos buscar y devuelve el carácter que está en esa posición. Así que para obtener el primer carácter tenemos que pasarle un 0. Tal que así:

var cadena= "cadena";
var fstChar = cadena.charAt(0);

jQuery: enviando un formulario con ajax

No sabía sobre qué escribir, pero esta semana me preguntaron por esto así que puede ser cosa buena contarlo también por aquí.

Bueno, el primer punto a tener en cuenta es que jQuery nos ofrece varios métodos para realizar envío por ajax: el método post() (que hace una petición por post), el método get() (lógicamente por get) o el método ajax(). Para este ejemplo usaremos este último.

jQuery, por otra, parte nos permite no enviar todo el formulario sino sólo una lista de valores que podemos coger nosotros de los campos para, por ejemplo, realizar validaciones que necesiten consultas del lado del servidor. Pero para el ejemplo enviaremos todo el formulario.

En este caso vamos a suponer que tenemos un formulario con el id formulario que tenemos que enviar a una página llamada procesa.php, que a su vez nos devuelve una cadena de texto informándonos del éxito de la operación. La acción del envío se activa cuando hacemos click sobre un elemento con el id enviar. Sobre la cabecera de nuestro formulario hay un div con el id resultado donde podemos informar al usuario del resultado de su envío. Vamos entonces con el código jQuery:

<script type="text/javascript">   
$(function(){
  $("#enviar").click(function(){
    $("#resultado").html("<p id='enviando'>Enviando datos</p>");
    $.ajax({
      method: "POST",
      url: "procesa.php",
      data: $("#formulario").serialize()
    })
    .done(function( msg ) {
      $("#enviando").hide();
      $("#resultado").html("Formulario enviado:" + msg);
    })
    .fail(function() {
      $("#enviando").hide();
      $("#resultado").html("Se ha producido un error y no se han podido procesar los datos");
    })
  });
});
</script>