Linea de Codigo

Si tenemos una serie de elementos en un array es muy probable que queramos volcar el contenido en pantalla. Vamos a ver cómo podemos hacer esta sencilla operación y volcar el contenido de un array con jQuery.

El punto de partida... nuestro array:

// Un listado de números. Soy poco original
var a=[1,2,3,4,5,6,7,8,9,10];

Lo primero que tenemos que tener es una parte de nuestra página web (de nuestro DOM) preparado para volcar el contenido. En nuestro caso hemos definido un elemento span.

<span id="resultado"></span>

A este elemento le hemos dado el id "resultado". Y es que el id es importante, ya que vía el id volcaremos el contenido del array. Para acceder al contenido del elemento "resultado" nos vamos a servir del método .text(). En jQuery el método .text() nos permite obtener el texto del elemento y todos los elementos que contenga.

$("#resultado").text();

Ahora solo nos queda volcar el contenido sobre el texto. Para ello nos vamos a valer de un método Javascript, del método .join(), el cual nos permite volcar el contenido de un array indicando como parámetro el separador de los elementos a volcar.

$("#resultado").text(a.join(", "));

Y con esto ya hemos conseguido volcar el contenido de un array con jQuery sobre un elemento de nuestra página.

El saber cuál es el mayor de dos números es uno de los primeros ejemplos que hacemos cuándo empezamos a aprender un lenguaje de programación.

La idea es muy simple. Pedimos al usuario dos números y nuestro código tiene que determinar cuál de los dos números es más grande.

Lo primero será pedir los números al usuario. Para esto nos apoyamos en la clase Scanner.

Scanner reader = new Scanner(System.in);
int iNumero1, iNumero2;
 
System.out.println("Dame el primer número");
iNumero1 = reader.nextInt();

El método .nextInt() nos devolverá lo que el usuario haya introducido en un valor entero. Si quieres más detalle sobre cómo obtener lo que el usuario ha introducido puedes leerte "Lectura de datos en Java con Scanner"

Ahora vamos con el centro del problema. Saber qué numero es mayor. Para ello vamos a utilizar la estructura de selección if. La idea es muy sencilla:

si numero1 es mayor que numero 2
entonces numero1 es el mayor
si no numero2 es el mayor

Que en nuestro código Java quedaría de la siguiente forma con la estructura if:

if (iNumero1>iNumero2)
  System.out.println(iNumero1 + " es mayor que " + iNumero2);
else
  System.out.println(iNumero2 + " es mayor que " + iNumero1);

Ya tenemos nuestro código Java para saber cuál es el mayor de dos números.

Cuando estamos diseñando una web una de las cosas que siempre vamos a necesitar es saber como poner un fondo en nuestras páginas web.

Aunque tiempo atrás esto era una tarea que se podía hacer en HTML, desde que se separo HTML para la estructura y CSS para el diseño, fue este segundo lenguaje, el CSS, el que se quedó encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web es background. Dicho elemento se puede aplicar al fondo de diferentes elementos. Si bien, si queremos utilizar para poner el fondo de la página web, lo tendremos que utilizar sobre el elemento body.

La estructura del elemento background es la siguiente:

background: [color] [image] [repeat] [attachment] [position];

Es decir, podemos indicarle un color RGB, una imagen, podemos indicar cómo se repite o si no se repite. Con attachment podemos indicar si se queda fijo o en formato scroll y por último podremos indicar la posición inicial en la que se situará la imagen.

Lo mejor que puedes hacer es leerte la documentación sobre el elemento background.

Así, nuestro código CSS quedará de la siguiente forma:

 
<style type="text/css">
body {
        background:url(fondo.gif) repeat 0 0;
 }
</style>
 

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.

Otra de la cosas que hay que fijarse en el código es que utilizamos la función url() para indicar el directorio dónde se encuentra la imagen. En nuestro caso la página que diseñamos para ponerle en fondo de mi web está en el mismo directorio que la imagen. Si bien, si queremos utilizar otro directorio podemos poner lo siguiente:

 
<style type="text/css">
body {
        background:url('/imagenes/fondo.gif') repeat 0 0;
 }
</style>
 

Ahora la imagen se encuentra en un directorio llamados "imagenes" que está en la raiz.

Por último tenemos que saber que existe otra propiedad llamada background-image, la cual nos permite solo indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.

En este caso el código quedaría de la siguiente forma:

 
<style type="text/css">
body {
        background-image:url('/imagenes/fondo.gif');
 }
</style>
 

Hay una cosa muy sencilla, muy sencilla que nos pide mucha gente. Y esta es saber cuántos dígitos tiene un número con Java.

Lo primero será partir de un número:

int iNumero = 123458;

Lo siguiente que vamos a hacer es convertirlo en una cadena String. Para ello utilizamos el método toString de Intege.

String x = Integer.toString(iNumero);

Ahora que tenemos la cadena, será tan simple como conocer el tamaño de la misma, mediante .length(), lo cual coincidirá con la cantidad de dígitos de un número.

System.out.println(iNumero + " tiene " + x.length() + " dígitos");

Como dije al principio, muy sencillo y útil para los que empiezan.

Existen otras formas alternativas, y posiblemente más artificiales, como la utilización de un bucle y la división entre 10.

int iCantidad = 0;
int iTemp = iNumero;
 
while (iTemp>0){
  iTemp = iTemp/10;
  iCantidad++;
}
 
System.out.println(iNumero + " tiene " + iCantidad + " dígitos");

El número de dígitos de un número coincidirá con tantas veces como podamos dividir dicho número entre 10.

¿Se te ocurre otra forma de calcular los dígitos de un número? Compártela con nosotros.

Cuando creamos combos en un formulario nos puede aparecer la necesidad de detectar cuándo el usuario ha cambiado un valor del combo y saber que valor se ha seleccionado. Lo que en HTML viene a ser el evento onChange.

Pero, lo primero, creemos el formulario con el combo:

 
<form id="formulario">
<select id="combo">
<option value="FC. Barcelona">FC. Barcelona</option>
<option value="Real Madrid">Real Madrid</option>
<option value="Atlético Madrid">Atlético Madrid</option>
<option value="Betis">Betis</option>
<option value="Villareal">Villareal</option>
<option value="Real Sociedad">Real Sociedad</option>
</select>
</form>
 

Ahora vamos a inyectar el código jQuery para el control de cambios en el combo de forma no intrusiva. Para ello creamos código jQuery en la cabecera de la página.

El método jQuery que nos permite controlar los cambios en un combo es .change(). Aplicaremos el método .change() sobre el elemento que representa al combo (el del id "combo")

$("#combo").change(...);

En el manejador que asignamos al evento change buscaremos el nuevo valor que tenga el combo. Para ello nos vamos a valer de selectores. En concreto del "option:selected".

"#combo option:selected"

Si bien, para obtener el valor del elemento utilizamos la función .val().

Ya solo nos queda mostrar el nuevo valor del elemento tras los cambios en el combo. Por ejemplo, volvaremos dicho valor en una capa ayudándonos del método .html()

El código jQuery final nos quedará de la siguiente forma:

<script type="text/javascript">
$(document).ready(function(){
        $("#combo").change(function(){
                var op = $("#combo option:selected").val();
                $('#capa').html(op);
        });
});
</script>

O como nos comenta Unai:

<script type="text/javascript">
$(document).ready(function(){
        $("#combo").change(function(){
                var op = $(this).find("option:selected").val();
                $('#capa').html(op);
        });
});
</script>

En el anterior artículo veíamos como podemos filtrar los elementos de un array con jQuery para quedarnos los que realmente nos interesan.

En este caso filtrábamos elementos numéricos. Pero ahora vamos a ver cómo podemos filtrar elementos nulos de un array con jQuery. Lo primero será tener un array con elementos nulos.

var a=[1,2,0,"a",null,NaN,undefined,7,"","palabra",{}];

Vemos que en el array están presentes elementos como null, NanN, undefined y el cero. Todos ellos elementos nulos.

Para filtrar los elementos volvemos a apoyarnos en la función .grep(), la cual recibía el array con los elementos y la función de filtro. Pero, ¿qué función jQuery nos filtra los elementos nulos de un array?

Pues en ese caso vamos a utilizar el constructor de Boolean. Y es que cuando intentamos instanciar el constructor de Boolean con un elemento nulo, dicho constructor nos devolverá false.

Boolean(NaN); //false
Boolean(undefined); //false
Boolean(null); //false
Boolean(1); //true

El código para filtrar elementos nulos de un array con jQuery utilizando .grep() nos quedará de la siguiente forma:

var b = a.filter(Boolean);

Ya solo nos queda volcar el contenido del array.

$("#resultado").text(b.join(", "));