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 CSSoverflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un 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
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 estrellaStar
Vídeos sobre Javascript
Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.
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<=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<=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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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().
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:
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:
Creamos el JFrame asigándole un nombre en su constructor
Seteamos nuestra ventana principal al modo FlowLayout (Alterará la forma en que se ubicarán los componentes en el Frame)
Hacemos visible la ventana principal
Seteamos la opción de redimensionar la ventana (true=SI, false=NO)
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:
Asignamos un evento (ActionListener) al botón (button_saludo), como su nombre lo indica escuchará cada vez que se presione.
Agregamos el método actonPerformed (Si usas Netbeans esa parte se hace por defecto, así que solo tendrás que asignar instrucciones)
Preguntamos que si el textField_texto está vacio que realize la siguiente acción
Desplegamos un mensaje en pantalla (como un alert() en Javascript, MessageBox en .NET )
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:
Llamamos al método inicializar
Llamamos al método agregarComponentes
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.
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
Botón derecho sobre Libraries
Add Jar/Folder (Agregar JAR / Carpeta)
Buscamos y seleccionamos nuestro JAR descargado
Luego lo único que tenemos que hacer es nuestro honorable MAIN que quedaría de la siguiente manera: