Artículos
CSS

Código fuente en una capa con scroll

Creado: 31/Oct/2010 Actualizado: 25/Ago/2021

Hay situaciones en las que el contenido que queremos poner puede desbordar del tamaño de la capa en la que están contenidos. En este sentido ya vimos como controlar el overflow de una capa.

Ahora vamos a ver un caso práctico del uso de las capacidades CSS. Y es el que se produce, por ejemplo, al añadir código fuente que quieras mostrar en una página. Cosa que nos pasa ya en nuestros códigos fuente (y que deberíamos de subsanar). Así que veamos como podemos poner código fuente en una capa con scroll.

En este caso, ya que el contenido el código fuente y los caracteres pueden ser variopintos, va dentro de etiquetas PRE.

< pre class="codigo" >

< /pre >

La idea es ahora que el código fuente nos aparezca en una capa con scroll. Para ello vamos a manejar la propiedad CSS overflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un scroll.

El código CSS sería el siguiente:

.codigo{
  width:400px;
  height:300px;
  display:block;  
  overflow:scroll
}

De esta forma sencilla podremos tener capas en las cuales mostrar el código fuente. Sencillo verdad… Ahora solo queda que lo apliquemos a Linea de Código. :-D

Código Fuente

Descárgate el código fuente de Código fuente en una capa con scroll
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
Javascript

Tipo de objeto en Javascript

Creado: 30/Oct/2010 Actualizado: 28/May/2015

Si estamos trabajando con objetos en Javascript puede darse el caso de que necesitemos conocer el tipo de objeto con el que estamos tratando. En este caso podemos utilizar la sentencia instanceof para contrastar el tipo de dato que manejamos.

La estructura para conocer el tipo de objeto sería la siguiente

objeto instanceof tipoObjeto

Así, por ejemplo, si tenemos el siguiente objeto:

var x = new String("Cadena de Texto");

Podemos validar el tipo de objeto que es en Javascript de la siguiente forma:

if (x instanceof String)
  document.write("El objeto es de tipo String 
"); else document.write("El objeto NO es de tipo String
");

A parte de servirnos para los tipos de objetos que vienen en el lenguaje Javascript, también nos sirve para objeto definidos por nosotros mismos. Así, si definimos la clase rectángulo e instanciamos un objeto de este tipo.

function rectangulo(base,altura){
  this.base = base;
  this.altura = altura;
  this.calcularArea = function() { return this.base*this.altura; };
}

var r1 = new rectangulo(2,6);

Podemos realizar la misma validación mediante instanceof.

if (r1 instanceof rectangulo)
  document.write("El objeto es de tipo Rectangulo 
"); else document.write("El objeto NO es de tipo rectangulo
");

Código Fuente

Descárgate el código fuente de Tipo de objeto 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
HTML5

Listar el contenido de Local Storage en HTML5

Creado: 29/Oct/2010 Actualizado: 09/Ene/2025

Si desconocemos las claves de la Local Storage del navegador en HTML5, siempre podemos acceder a listar el contenido de la caché.

Para ello, lo primero que haremos será el conocer el tamaño de la caché. Esto nos lo proporciona la propiedad .length

for (x=0; x&lt;=localStorage.length-1; x++)  { ... }

Así, mediante un bucle for podremos iterar sobre los elementos de la caché.

De cada una de las posiciones de la caché vamos a pedir el nombre de la clave que contiene. El método .key() será el que nos sirva para poder realizar dicha acción:

clave = localStorage.key(x);

Una vez que tenemos la clave solo nos queda acceder al contenido de la misma mediante el método .getItem()

localStorage.getItem(clave);

El código final que accede al contenido de la Local Storage en HTML5 nos quedará de la siguiente forma:

for (x=0; x&lt;=localStorage.length-1; x++)  {  
  clave = localStorage.key(x); 
  document.write("La clave " + clave + "contiene el valor " + localStorage.getItem(clave) + "<br>");  
}

Vídeos sobre HTML5

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

Test HTML5

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

Test HTML5
Artículos
PHP

Sacar un naipe de la baraja con PHP

Creado: 24/Oct/2010 Actualizado: 17/Sep/2017

La idea es poder sacar una carta aleatoria de la baraja (una baraja inglesa o francesa). La baraja se compone de cuatro palos (Picas ♠, Corazones , Diamantes y Tréboles ♣) y de trece cartas por cada palo, comprendidas desde el as al diez y tres figuras.

Para llevar acabo la operación y sacar un naipe aleatorio, vamos a almacenar todas las posibilidades de cartas en variables.

$palos = array('Picas','Corazones','Diamantes','Tréboles');
$cartas = array('As','Dos','Tres','Cuatro','Cinco','Seis','Siete','Ocho','Nueve','Diez','Jota','Reina','Rey');

Hemos creado dos variables, por una parte una variable con un array que contiene los cuatro palos de la baraja y la otra variable con un array con las diez numeraciones y tres figuras de las cartas, consiguiendo así las 52 cartas de las barajas. Gracias al array nos permite almacenar varios entradas en una misma variable.

$palo = array_rand($palos, 1);
$carta = array_rand($cartas, 1);

Usamos la función array_rand() que nos ofrece PHP, la cual nos devuelve la clave al azar de una entrada del array.

Ahora únicamente nos queda mostrar los valores aleatorios en una frase.

print 'La carta que salió de la baraja fue: ' . $cartas[$carta] . ' de ' . $palos[$palo] ;

Código Fuente

Descárgate el código fuente de Sacar un naipe de la baraja con PHP
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Artículos
Java

Contar las consonantes de una palabra con Java

Creado: 23/Oct/2010 Actualizado: 29/Dic/2014

Pues si esta mañana veíamos como contar las vocales de una palabra con Java, ahora vamos a por las consonantes.

Y vamos a basarnos en el código de las vocales para realizar nuestro código. Y es que todo aquello que no es una vocal es una consonante… ¿Verdad? O al menos, siempre que hablemos de letras. Ya que un & ni es vocal ni consonante.

Lo primero, hemos creado un método Java para calcular las vocales.

public static boolean esVocal(char c){
  if ((Character.toLowerCase(c)=='a') || (Character.toLowerCase(c)=='e') || (Character.toLowerCase(c)=='i') || (Character.toLowerCase(c)=='o') || (Character.toLowerCase(c)=='u'))
    return true;
  else
    return false;		
}

Básicamente, dado un carácter nos dice si es una vocal o no. Hemos utilizado el método Character.toLowerCase para evitar problemas de mayúsculas y minúsculas.

Ahora, mientras llamemos al código hay que llamar a este método, pero indicando que nos de aquello que no es una vocal

for(int x=0;x

Pero, como dijimos antes, hay caracteres que no son ni vocal, ni consonante. Como puede ser el caso del &, los símbolos matemáticos,... Así que nos aseguraremos que el carácter también es una letra. Para ello utilizamos el método Character.isLetter.

for(int x=0;x

De esta forma tan sencilla ya podremos contar las consonantes de una palabra con Java.

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
Java

Contar las vocales de una palabra con Java

Creado: Actualizado: 29/Ene/2024

Algunos nos habéis solicitado información sobre cómo podemos contar las vocales de una palabra utilizando Java. Así que contentos de poder ayudar con esta consulta y proporcionar una solución detallada.

Empecemos por lo más básico, es decir, la palabra que vamos a analizar. Para mantener las cosas simples y directas, vamos a considerar una simple cadena, o como se conoce en el mundo de la programación, un String.

String sPalabra ="murcielago";

En el siguiente paso, vamos a definir un contador. Este contador tendrá la responsabilidad de llevar un seguimiento exhaustivo de las vocales que se encuentran en la palabra que estamos analizando. Esto se llevará a cabo a lo largo de toda la longitud de la palabra para asegurarnos de que no se pase por alto ninguna vocal:

int contador = 0;

La siguiente tarea que tendremos que realizar es recorrer la palabra, lo cual se puede lograr mediante un bucle for. Un bucle for, como se puede aprender en este tutorial, es una estructura de control que nos permite repetir un bloque de instrucciones un número determinado de veces. En este caso, vamos a utilizarlo para recorrer cada carácter en la palabra. Para determinar cuántas veces necesitamos repetir el bucle, vamos a utilizar el método .length(). Este método, que se explica con más detalle en este enlace, nos devuelve el número de caracteres en la cadena, lo que nos ayudará a controlar el tamaño de la palabra que estamos recorriendo.

for(int x=0;x<sPalabra.length();x++) {
  ...
}

En cada iteración de nuestro proceso, el método .charAt(), una función integrada de Java que se utiliza para devolver un valor char en un índice específico de una cadena, nos proporcionará el carácter en la posición que estamos actualmente recorriendo. Con este carácter obtenido, luego procedemos a realizar una comprobación para determinar si el carácter es una vocal. En el español, las vocales son a, e, i, o, u. Si el carácter es una de estas vocales, entonces realizamos las acciones correspondientes en nuestra lógica de programación.

for(int x=0;x<sPalabra.length();x++) {
 if ((sPalabra.charAt(x)=='a') || (sPalabra.charAt(x)=='e') || (sPalabra.charAt(x)=='i') || (sPalabra.charAt(x)=='o') || (sPalabra.charAt(x)=='u')){
    contador++;
  }
}

Una vez que hayamos completado todos los pasos anteriores, solo nos quedará una tarea final. Esta tarea consiste en volcar el valor que hemos acumulado en el contador y mostrarlo directamente en la consola. Este es un proceso sencillo, pero esencial para que podamos visualizar el resultado final de todas nuestras operaciones.

System.out.println("La palabra " + sPalabra + "contiene " + contador + " vocales");

De esta forma, en pocas líneas de código habremos conseguido contar las vocales de una palabra con Java.

Código Fuente

Descárgate el código fuente de Contar las vocales de una palabra con Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Contar las vocales de una palabra con Java

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

JSSQL: Un motor de base de datos en javascript

Creado: 14/Oct/2010 Actualizado: 28/May/2015

Este verano me topaba con un proyecto interesante llamado JSSQL. JSSQL es un motor de base de datos escrito en Javascript, el cual podemos ejecutar consutlas SQL desde nuestras páginas web. Sin necesidad de estar conectado a algún servidor.

JSSQL es un proyecto de Joaquín Becerra de la Universidad de Buenos Aires. Podéis encontrar más información en:
http://javascriptsql.sourceforge.net/

Pero vamos a ponernos manos a la obra…

Lo primero de todo es cargar la librería Javascript que implementa el motor de base de datos. Esta librería es JSSQL.js.

Una vez cargada la librería instanciaremos el objeto principal llamado JSSQL.

var myJSSQL= new JSSQL();

A partir del objeto JSSQL abriremos la base de datos a utilizar mediante el método open.

if (!myJSSQL.Open('mibasededatos')) {
  alert(myJSSQL.GetError()); //si falla que nos avise
}

Si falla la apertura de la base de datos, devolvemos el error del motor de la base de datos. Este error está accesible vía el método .GetError().

En el código vemos que abrimos una base de datos que se llama «mibasededatos». Pero ¿Dónde está la base de datos?

Las bases de datos están definidas en ficheros .jsdb bajo una estructura de directorios:

/bases/nombreBD/nombreBD.jsbd

El fichero JSDB tiene la siguiente estructura:

_bd={
  "paises":{
    "IdPais":"numeric",
    "Pais":"string",
  }
};
_bd_ind={
   'paises':[false,false]
};
_bd_pag={
   'paises':0
};

Vemos que contiene la definición mediante arrays de las bases de datos que contiene. A su vez, cada una de las tablas, tiene su fichero JSBD con el contenido. Por ejemplo la tabla de países tendría el siguiente contenido:

_aux['paises']=Array();
_aux['paises']=[
[1,"Noruega"],
[2,"Portugal"],
[3,"Francia"],
[4,"Italia"],
[5,"UK"]
];

JSSQL nos ofrece una herramienta de conversión desde las bases de datos hacía JSDB. Puedes acceder a ella desde:
http://javascriptsql.sourceforge.net/ARCH/JSBD/ConversorBD.php

Una vez que hemos visto como se definen las bases de datos pasamos a ejecutar la consulta mediante el método .Query(). La consulta una SELECT sencilla de paises.

sql="select Pais from paises" ; 
res=myJSSQL.Query(sql);

El resultado nos lo deja en un array, el cual recorremos de forma sencilla:

for (x=0;x");

La verdad es que JSSQL realiza un enfoque muy interesante sobre la necesidad de tener una BD en local. Algo que ya no parece estar muy lejos gracias a HTML5.

Código Fuente

Descárgate el código fuente de JSSQL: Un motor de base de datos 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
jQuery

Eliminar imágenes rotas con jQuery

Creado: 12/Oct/2010 Actualizado: 27/Ago/2021

Algo demasiado habitual como los errores de codificación, dependencias acopladas a enlaces externos,… pueden dar al traste con el diseño de nuestras páginas web.

Y es que cualquiera de los puntos citados anteriormente pueden hacer que tengamos imágenes rotas en nuestra página, las cuales estropeen el contenido de las mismas.

Si bien, mediante sencillos scripts podemos eliminar imágenes rotas con jQuery. La idea es recorrer todas las imágenes que haya en la página y si la imagen tiene un error, eliminarla.

Lo primero es saber como acceder a las imágenes mediante jQuery. Para ello utilizamos el siguiente código:

$("img")

El selector pasado a la función $ es el del elemento IMG. Como queremos saber si se ha producido un error en la carga de la imagen pasaremos a tratar el evento .error().

$("img").error(...);

Dentro de la gestión del evento .error() tomaremos la decisión sobre qué hacer. En este caso, como vamos a eliminar las imágenes rotas, llamaremos al método .remove() de jQuery.

$('img').error(function() {
  $(this).remove();
}) 

Este código lo tendremos que ejecutar cuándo se haya cargado la página. Es decir, en el método .ready().

 $(document).ready(function(){
   $('img').error(function() {
     $(this).remove();
   }) 
 });

Código Fuente

Descárgate el código fuente de Eliminar imágenes rotas con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Artículos
HTML5

Vaciar la Local Storage en HTML5

Creado: 11/Oct/2010 Actualizado: 09/Ene/2025

En el artículo Acceder a la caché local del navegador con HTML5 vimos como podemos manipular la Local Storage para almacenar y recuperar información de la cache.

Si el usuario hace una operación de logoff, lo más probable es que queramos vaciar el contenido de la Local Storage.

Para vaciar la Local Storage, deberemos de ejecutar el método .clear()

localStorage.clear();

Algo muy sencillo, pero que nos servirá para eliminar toda la información que hayamos almacenado a lo largo de la sesión del usuario.

Puedes descargarte el código completo que inserta elementos, los visualiza y al final vacía la Local Storage.

Vídeos sobre HTML5

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

Test HTML5

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

Test HTML5
Artículos
Java

Ventanas con estilo gracias a Substances

Creado: 10/Oct/2010 Actualizado: 25/Ago/2021

Hoy explicaré en simples pasos cómo usar Substance en nuestras aplicaciones, que de hecho es una muy buena forma de darle estilo a nuestras ventanas

¿Que haremos?

Crearemos una ventana simple(JFrame, JTextField, JButton) a código. Sin ayuda de Netbeans u otro programa que solo tienes que arrastrar componentes, que de hecho es una muy buena forma, pero el motivo es enseñar.

Primero que todo haremos una nueva clase llamada «JVentana» que como el nombre lo indica tendrá lo suficiente para crear una ventana y también incluiremos un evento al botón:

public final class JVentana{
...}

Ahora agregamos 3 atributos de tipo JFrame, JTextField, JButton:

private JFrame Frame_principal;
private JTextField textField_texto;
private JButton button_saludo;

Siguiendo de lo antes realizado agregaremos un método llamado «inicializar», que inicializará los atributos que declaramos anteriormente:

public void inicializar(){
  Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
  textField_texto = new JTextField();
  textField_texto.setColumns(40);
  button_saludo = new JButton("Saludar");
}

Explicación del método inicializar:

  1. Creamos el JFrame asigándole un nombre en su constructor
  2. Creamos el JTextField
  3. Seteamos el JTextField para que sea mas largo (por columnas)
  4. Creamos el JButton

Siguiendo lo anterior iremos a crear otro método llamado «agregarComponentes»:

public void agregarComponentes(){
  Frame_principal.add(textField_texto);
  Frame_principal.add(button_saludo);
  Frame_principal.setLayout(new FlowLayout());
  Frame_principal.setVisible(true);
  Frame_principal.setResizable(false);
  Frame_principal.pack();
}

Explicación del método agregarComponentes:

  1. Agregamos el JTextField creado al FramePrincipal
  2. Agregamos el JButton creado al FramePrincipal
  3. Seteamos nuestra ventana principal al modo FlowLayout (Alterará la forma en que se ubicarán los componentes en el Frame)
  4. Hacemos visible la ventana principal
  5. Seteamos la opción de redimensionar la ventana (true=SI, false=NO)
  6. Seteamos la ventana principal, para que se adapte al tamaño de nuestros componentes para evitar espacios innesesarios

Ahora lo que nos queda hacer por último es programar nuestro evento para que al hacer click en el botón se genere un mensaje:

public void asignarEventos(){
  button_saludo.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
            JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
            JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
    }
  });
}

Explicación del método asignarEventos:

  1. Asignamos un evento (ActionListener) al botón (button_saludo), como su nombre lo indica escuchará cada vez que se presione.
  2. Agregamos el método actonPerformed (Si usas Netbeans esa parte se hace por defecto, así que solo tendrás que asignar instrucciones)
  3. Preguntamos que si el textField_texto está vacio que realize la siguiente acción
  4. Desplegamos un mensaje en pantalla (como un alert() en Javascript, MessageBox en .NET )
  5. Si no es así, entonces saludará al nombre ingresado en el text

Y bueno ya casi terminando crearemos nuestro constructor:

public JVentana(){
  inicializar();
  agregarComponentes();
  asignarEventos();
}

Explicación del constructor:

  1. Llamamos al método inicializar
  2. Llamamos al método agregarComponentes
  3. Llamomos al método asignarEventos

Es importante la posición en que pones las llamada a los métodos, porque si pones por ejemplo agregarComponentes se generará un error ya que aún no se han creado los componente

Nuestra clase sería verse algo así :

package ejemplosubstance;

import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JTextField;

public final class JVentana{

  private JFrame Frame_principal;
  private JTextField textField_texto;
  private JButton button_saludo;

  public JVentana(){
    inicializar();
    agregarComponentes();
    asignarEventos();
  }

  public void inicializar(){
    Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
    textField_texto = new JTextField();
    textField_texto.setColumns(40);
    button_saludo = new JButton("Saludar");
  }

  public void agregarComponentes(){
    Frame_principal.add(textField_texto);
    Frame_principal.add(button_saludo);
    Frame_principal.setLayout(new FlowLayout());
    Frame_principal.setVisible(true);
    Frame_principal.setResizable(false);
    Frame_principal.pack();
  }

  public void asignarEventos(){
    button_saludo.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
          JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
          JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
      }
    });
  }
}

Luego que tengamos todo listo viene la parte principal de éste tutorial por así decirlo «darle estilo a nuestras ventanas». Para ellos vamos a utilizar Substances.

Lo primero que tenemos que hacer es descargarnos el jar de Substances.

Descargar Substances Version: 5.3

Luego que lo tenemos descargado lo añadimos al proyecto, desconosco la manera en que algunas aplicaciones hacen éste proceso pero Netbeans lo hace de la siguiente manera

  1. Botón derecho sobre Libraries
  2. Add Jar/Folder (Agregar JAR / Carpeta)
  3. Buscamos y seleccionamos nuestro JAR descargado

Luego lo único que tenemos que hacer es nuestro honorable MAIN que quedaría de la siguiente manera:

public static void main(String[] args) {
  java.awt.EventQueue.invokeLater(new Runnable() {
    public void run() {
      try {
        Frame.setDefaultLookAndFeelDecorated(true);
        SubstanceLookAndFeel.setSkin("org.jvnet.substance.skin.OfficeSilver2007Skin");
        new JVentana();
      } catch (Exception e) {
        JOptionPane.showMessageDialog(null, "Error: "+e);
      }
    }
  });
}

Explicaré la dos lineas que son nuevas para ustedes. Sí, «JFrame.setDefaultLookAndFeelDecorated» y «SubstanceLookAndFeel.setSkin»

  1. La primera setea el Frame que vendrá luego a que adopte el decorado de Subtances y que decorado tendrá.
  2. Bueno la segunda linea de encarga del decorado en éste caso es «officeSilver2007Skin»

Si todo va bien deberíamos ver algo así
jframe estilos substances

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