Artículos
Java

Convertir un array en una lista

Creado: 30/Jun/2007 Actualizado: 24/Ago/2021

El framework Collections no solo nos proporciona un gran número de estructuras de datos para el desarrollo, sino que nos aporta una serie de algoritmos para su manejo y manipulación (ordenación, búsqueda, cálculos,…). Todo ello lo agrupa en un framework donde mediante clases abstractas e interfaces ofrece los algoritmos.

Uno de estos algoritmos nos permite transformar los «arrays de toda la vida» en alguna de las estructura del framework Collections, consiguiendo, así, todas las ventajas de la manipulación de Colecciones.

El método que nos permite la transformación, en este caso a una estructura List, es:

.asList( Array[] )

que lo encontramos en la clase abstracta Arrays. Nos basta con invocarlo directamente ya que es un método estático.

Lo primero será crear un array e incializarlo:

String[] cadenas = new String[3];
cadenas[0] = "Victor";
cadenas[1] = "Amaya";
cadenas[2] = "Luis";

Una vez que tengamos el array tenemos que definir la lista a la cual transformaremos el array:

List lista = new ArrayList();

y solo nos quedará invocar al método .asList():

lista = Arrays.asList(cadenas);

Código Fuente

Descárgate el código fuente de Convertir un array en una lista
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
Javascript

Escribir texto con formato en JavaScript

Creado: 29/Jun/2007 Actualizado: 21/May/2015

Empiezo a aprender JavaScript, ya me he creado mi primera página web y he incluido el código necesario para poner mi código JavaScript.

Bien, seguimos adelante. También se como escribir texto con el lenguaje. He sido listo y me he leído en Línea de Código el artículo Hola Mundo con JavaScript.

Veamos… poner el document.write(«texto»)…

Y ahora ¿cómo puedo hacer que mi texto salga con formato?????

Pues es muy sencillo, además de volcar cadenas de texto con el document.write, también puedes incluir cualquier código HTML.

En el método document.write podemos poner texto y cadenas HTML. Todo junto.

Así, si queremos que nuestro texto sea un encabezado, podemos incluir la etiqueta h1 dentro del texto.

Y al igual que la etiqueta h1 cualquier otra etiqueta del lenguaje HTML que se te ocurra.

Código Fuente

Descárgate el código fuente de Escribir texto con formato en JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

Generar un documento HTML mediante JavaScript

Creado: 28/Jun/2007 Actualizado: 29/May/2015

Aunque parezca raro, desde código JavaScript podemos generar dinámicamente una página HTML. Esto nos dará un gran potencial a la hora de devolver respuestas al usuario. Típicamente le devolveremos un alert o crearemos un nuevo elemento dentro de la página con el resultado de la respuesta. Pero, por qué no, la respuesta puede ser una nueva página HTML, creada dinámicamente.

Para poder hacer esto lo primero que vamos a hacer es crear un formulario donde vamos a recoger información del usuario. Será esta información la que utilicemos para crear el documento. Vamos a pedirle un nombre y una edad…

Nombre: Edad:

Como podemos ver en el código JavaScript, estamos llamando a la función crearDocumento con los valores del formulario. El contenido de dicha función será el objetivo de este documento.

Para crear un documento lo primero que tenemos que hacer es abrirlo. Para ello invocaremos al método open del objeto document. Dicho método recibe como parámetros dos datos. El primero es el mime-type del documento y el segundo sirve para indicar si queremos heredar la historia del documento desde el que se está generando.

Así, abriremos el documento de la siguiente forma:

var doc = document.open("text/html","replace");

Al abrir un documento HTML, el mime-type que utilizamos es «text/html».

Lo siguiente será crear el contenido del nuevo documento. Al ser un documento HTML, la estructura será la de cualquier documento HTML. Al menos.




Contenido


Así, en JavaScript lo definiremos de la siguiente forma. Sobre una simple variable:

var texto = "<html><body><h1>Saludo</h1>Hola " + nombre + ". Tu edad es de " + edad + " años.";

Con el documento abierto y el texto a volcar definido, lo siguiente será el escribir sobre el documento. Esto lo hacemos mediante el método .write(texto). Sobre el objeto document.

doc.write(texto);

Solo nos quedará la ultima cosa, pero no por ello menos importante, que será la de cerrar el documento.

doc.close();

Código Fuente

Descárgate el código fuente de Generar un documento HTML mediante JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

Numero de elementos del historial

Creado: Actualizado: 21/May/2015

Si nos ponemos a pensar en la utilizar que tiene el acceso vía JavaScript al historial de un navegador, la verdad, es que puede ser que no le encontremos mucho sentido. Hay que pensar que el historial de un navegador es una información confidencial del usuario, la cual refleja las páginas que este ha visitado.

Imaginaros a empresas conociendo las páginas que visitáis…. no quiero ni imaginármelo.

Es por ello que el acceso al historial es limitado, vuelve a la anterior página, ves a la siguiente, ves a una página en concreto,…

Lo que también podemos conocer es el número de elementos que hay en el historial del usuario. Esto al menos nos dará una pista del número de navegaciones que ha hecho hasta llegar a nuestra página.

Para poder acceder al número de elementos del historial nos podemos basar en el objeto history y en concreto en su propiedad .length.

history.length;

Así, podemos jugar con su valor para decirle al usuario si ha empezado a navegar por nuestra página o bien, si lleva ya un rato navegando. Veamos el código:

numero = history.length;
document.write(numero + "<br>");

if (numero > 5)
 document.write("Parece que has navegado bastante");
else
  document.write("Ummm... parece que soy una de las primeras páginas que visitas");

Si, ya lo se, puede ser que la utilidad de esto sea cero. Pero no deja de ser otro buen ejemplo para ver como trabajar con los objetos del navegador y empezar a tirar nuestras primera líneas con JavaScript

Código Fuente

Descárgate el código fuente de Numero de elementos del historial
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
CSS

Centrar texto con CSS en tu página web

Creado: 27/Jun/2007 Actualizado: 11/Oct/2021

Una de las cosas más sencillas cuando queramos dar formato al texto será la de centrar el texto. Esto era más o menos sencillo en HTML mediante la etiqueta center. Si bien, esta etiqueta quedo obsoleta con la llegada de las hojas de estilo CSS. Así que vamos a ver cómo podemos centrar texto con CSS en tu página web.

Dentro de las propiedades de CSS que nos permiten modificar el texto aparece una propiedad que se denomina text-align, la cual nos permitirá alinear el texto en la posición que necesitemos. En el caso que queramos tenerlo centrado el valor a asociar es «center».

Lo que tendremos es que definir una clase con esta propiedad. Por ejemplo, en este caso hemos definido una clase que hemos llamado centrado:

.centrado{
  text-align:center;
}

Ahora solo nos quedará aplicar esta clase al texto que tengamos dentro de nuestra página web. Para aplicar un estilo hay que utilizar el atributo class de un elemento HTML.

Para nuestro ejemplo hemos utilizado un elemento p, el cual representa a un párrafo y lo hemos aplicado de la siguiente forma.

<p class="centrado">Texto centrado</p>

El texto aparecerá de la siguiente forma:

Texto Centrado

Como has podido comprobar es muy sencillo el código para poder centrar texto con CSS en tu página web y aplicarlo a las partes de tu código HTML dónde lo necesites, reutilizando la misma clase.

De igual manera puedes investigar el resto de valores que tiene la propiedad text-align ya que estos nos permiten manejar el texto de muchas formas y así podemos alinearlo a la derecha, justificarlo en todas las líneas o justificarlo en todas las líneas menos la últimas,… ¿Nos cuentas en los comentarios qué has podido hacer con la propiedad text-align? o ¿Qué te gustaría saber a la hora de justificar la alineación del texto?

Código Fuente

Descárgate el código fuente de Centrar texto con CSS en tu página web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Artículos
CSS

Subrayar texto en CSS

Creado: Actualizado: 11/Oct/2021

En las primeras versiones del HTML apareció el elemento u la cual nos permitía subrayar texto en la web de forma muy sencilla. Pero en posteriores versiones del HTML dicha etiqueta ha quedado obsoleta, pasándose ahora a realizar el subrayado de texto mediante CSS. En este artículo vamos a ver cómo podemos subrayar texto en CSS.

Ojo, que el elemento u haya quedado obsoleto no significa que no vaya a funcionar en nuestros navegadores, ya que la compatibilidad hacia atrás está asegurada. Simplemente que no es muy recomendable utilizarlo. Y es mejor pasar a realizarlo con CSS.

Para poder subrayar texto en la web con CSS lo primero que deberemos hacer es crearnos una clase. Dicha clase se la asignaremos, posteriormente, a la parte o partes de nuestra página que queramos subrayar. En este caso hemos creado la clase subrayado. No es que hayamos sido muy originales. :-D

<style>
 .subrayado{...}
<style>

Lo siguiente que tenemos que saber es que el atributo que nos permite personalizar el texto es text-decoration. La sintaxis de text-decoration es la siguiente:

text-decoration : <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

En este caso el valor que se le asigna al text-decoration-line al subrayado es el de «underline». De esta forma nuestra clase CSS quedaría de la siguiente forma:

.subrayado{
  text-decoration:underline;
}

Ahora solo nos quedará el aplicar el estilo CSS a una parte de nuestra página web. Para ello deberemos de utilizar el atributo class de algún elemento HTML. En nuestro caso lo haremos mediante el bloque en linea span.

Veamos como quedaría la línea de código:

<span class="subrayado">Texto subrayado con CSS</span>

Espero que os haya gustado y sobre todo que os sea útil este ejemplo sobre cómo subrayar texto en CSS.

Código Fuente

Descárgate el código fuente de Subrayar texto en CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Artículos
Java

Máximo y mínimo número de un conjunto

Creado: 26/Jun/2007 Actualizado: 02/Jun/2015

El objetivo de este ejemplo es solventar la necesidad de encontrar dentro de un conjunto el número mínimo y máximo del mismo.

Podríamos implementar un algoritmo donde recorriendo todos los elementos del conjunto fuésemos preguntando si el elemento es el más pequeño o es el más grande.

Si bien, vamos a apoyarnos en el framework Collection para llevar a cabo esta casuistica.

Dentro del framework Collection encontramos dos operaciones:

  • .min(conjunto), devuelve el mínimo elemento del conjunto.
  • .max(conjunto), devuelve el máximo elemento del conjunto.

Lo primero será el crear el conjunto e incluirle elementos:

Set hs = new HashSet();
hs.add(2);
hs.add(4);
hs.add(6);
hs.add(8);

El conjunto es representado por la clase Set, si bien la implementación es un HashSet. El método para añadir los elementos será .add(elemento).

Ahora solo nos quedará invocar a los métodos .max y .min:

System.out.println("El número mayor del conjunto es... "
    + Collections.max(hs));
System.out.println("El número menor del conjunto es... "
    + Collections.min(hs));

Invocando dichas operaciones nos olvidamos de cualquier implementación del algoritmo que calcule el mínimo y el máximo. Pero, nos surge una duda ¿Cómo saben estos métodos realizar la comparación entre los números? ¿Y si fuese otro tipo de datos?.

A la hora de utilizar dichas operaciones, el framework espera que los elementos de los cuales queremos saber su mínimo y máximo se les pueda aplicar la función compareTo. Clases como Integer, Float,… ya implementan dicha función.

No quiere decir que a elementos que no contengan esta función no se les pueda aplicar operaciones del framework Collections, ya que existe la posibilidad de implementar el interface Comparator para buscar una solución.

Código Fuente

Descárgate el código fuente de Máximo y mínimo número de un conjunto
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
Javascript

Número de enlaces del documento

Creado: Actualizado: 21/May/2015

El manejo del modelo de objetos de la página (DOM) nos permite acceder a cualquier elemento que esté conformando la página. Esto nos proporciona una gran potencia a la hora de interactuar con los objetos que la conforman.

En este ejemplo vamos a ver como de una forma sencilla podemos conocer el número de enlaces que hay en la página.

Lo primero que tenemos que hacer es crear una página web que contenga enlaces. Hay que recordar que en HTML los enlaces se crean mediante la etiqueta «anchor» A.

Incluyamos algunos enlaces:

Listado de enlaces

Ahora mediante código Javascript vamos a obtener el número de enlaces que hemos incluido en la página. Para ello deberemos de acceder al objeto document, el cual representa a la página. Dentro de este objeto tenemos el objeto anchors, que representa a los enlaces y este tiene una propiedad denominada length. Dicha propiedad nos dirá cuantos enlaces tenemos en la web.

document.anchors.length;

Es importante destacar que los enlaces tienen que tener el atributo name. De otra forma, al utilizar el método document.anchors.length no obtendriamos ningún resultado.

Si queremos mostrarlo por pantalla, como siempre, utilizaremos el método document.write().

Código Fuente

Descárgate el código fuente de Número de enlaces del documento
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

document.getElementById

Creado: 25/Jun/2007 Actualizado: 06/Feb/2025

Si hubiera que decir cuál ha sido el método más importante del lenguaje JavaScript desde su creación, creo que muchos coincidiríamos en que es document.getElementById. Dicho método nos permite obtener la referencia a un elemento de la página mediante el id de dicho elemento.

Por ejemplo, si tenemos una imagen representada por el siguiente código HTML:

<img id="mifoto" src="foto.jpg">

Podríamos obtener una referencia a dicha imagen mediante el siguiente código JavaScript:

foto=document.getElementById("mifoto")

Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades, ya sea para lectura o escritura. Por ejemplo, en este caso podríamos cambiar el origen (src) de la imagen, su alto/ancho,…

Una de las cosas que más puede sacar de quicio a las personas que lo utilizan es confundir mayúsculas con minúsculas. Si usamos getElementBYID o getElementByID o GETELEMENTBYID,… no nos funcionará.

En este caso vamos a utilizar esta función para obtener el contenido de un área de texto. Así que lo primero que haremos será crear un área de texto:

<form action="">
  <textarea id="areadetexto" cols="40" rows="20">Texto del área de texto</textarea>
</form>

Ahora, para acceder al área de texto, utilizaremos su id «areadetexto» y la función document.getElementById. Con el fin de hacerlo más interactivo, vamos a utilizar el código JavaScript en el evento onClick de un botón.

Veamos el código:

<form action="">
  <textarea rows="20" cols="40" id="areadetexto">Texto del área de texto</textarea>
  <input type="button" value="Contenido del TextArea" onclick="javascript:alert(document.getElementById('areadetexto').value);">
</form>

Código Fuente

Descárgate el código fuente de document.getElementById
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

Obtener la referencia de la pagina en Javascript

Creado: Actualizado: 20/May/2015

Hay dos formas de llegar a una página web. La primera es de forma directa. En este caso será porque habremos escrito la URL de la página directamente en el navegador. La segunda forma será porque lleguemos mediante algún enlace en alguna página de referencia. Que en un porcentaje de los casos será un buscador (y casi siempre Google).

Mediante JavaScript tenemos la oportunidad de obtener la URL de la página que nos ha referenciado. Esto nos dará la oportunidad de saber quien habla de nosotros…

Para ello tenemos que utilizar el objeto document. Este es un objeto genérico del navegador. Y en concreto el atributo referrer.

document.referrer;

Ahora solo nos quedará volcarlo a pantalla, mediante el método write (también del objeto document), para ver su valor.

Código Fuente

Descárgate el código fuente de Obtener la referencia de la pagina en Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript