Artículos
Javascript

Clase Javascript con métodos privados

Creado: 19/Sep/2010 Actualizado: 28/May/2015

Hemos visto como crear atributos privados definidos dentro de una clase en Javascript. Ahora crearemos métodos privados que nos permitan acceder a esa información.

En la siguiente definición vemos como podemos crear métodos públicos. Los cuales se pueden invocar desde cualquier parte del código JavaScript.

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

Pero, si nos queremos volver orientados a objetos en el más puro de los sentidos, una de las preguntas sería ¿Cómo puedo crear métodos privados?

Recordamos que los métodos privados son aquellos métodos que se pueden llamar desde métodos de la clase, pero nunca de forma externa a la clase.

En este caso vamos a añadir un método que incremente en uno la altura. Pero haremos que el método sea privado. Para que el método solo sea privado dejamos de utilizar el elemento this.

Así, los métodos privados nos quedarían de la siguiente forma:

function rectangulo(base,altura){
	var base = base;
	var altura = altura;	
	this.inc = function() { incBase(); incAltura(); };

	function incBase() { base++; }
	function incAltura() { altura++; }
}

Vemos que los métodos incBase() e incAltura() son métodos privados, definidos como simples funciones y que acceden a propiedades privadas (base y altura).

De igual manera, hemos creado un método público, llamado inc(), que invoca a estos métodos privados. Y que será el que podamos llamar desde código JavaScript externo.

var r1 = new rectangulo(2,6);
r1.inc();

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
Java

Calcular el perímetro de un círculo con Java

Creado: 18/Sep/2010 Actualizado: 08/Ene/2015

El perímetro de un círculo es lo que se conoce como circunferencia. Y su definición forma sería:

Perímetro = 2 * PI * radio

Una vez que conocemos la formula, vamos a calcular el perímetro de un círculo con Java.

Lo primero que tenemos que hacer es pedir al usuario el radio. Para ello nos apoyamos en la clase Scanner:

double perimetro,radio;

Scanner reader = new Scanner(System.in);
radio = reader.nextDouble();

Vemos que el tipo de dato tanto del radio, como del perímetro es double. Utilizando el tipo double conseguimos mayor precisión en los cálculos.

El siguiente paso será aplicar la formula. La formula utiliza la constante PI, es por ello que nos basamos en la constante PI clase Math para utilizar dicho valor.

perimetro = 2*Math.PI*radio;

Ya solo nos quedará volcar el contenido de la variable perímetro por pantalla.

Unas pocas líneas, pero muy sencillo para nuestros cálculos básicos de las clases de geometría.

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

Clase con atributos privados en Javascript

Creado: Actualizado: 28/May/2015

En los ejemplos que hemos visto de orientación a objetos con Javascript: Crear un objeto en Javscript y Crear un objeto con métodos en Javascript. Hemos podido comprobar que los atributos de la clase, eran variables públicas. Es decir, podían ser accedidas desde el código Javascript de manera directa.

Si queremos que no se tenga acceso directo, si no que sea mediante método, deberemos de hacer que los atributos sean privados. Veamos como hacerlo.

Los atributos público serían definidos de la siguiente forma:

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

Y pueden ser accedidos de la siguiente forma:

var r1 = new rectangulo(2,6);
alert(r1.base);

Para declararlos privados, dejamos de utilizar la clausula this y pasamos a definirlos como variables. Jugando, en este caso, con el ámbito de uso de las variables en Javascript.

Las definiríamos de la siguiente forma:

function rectangulo(base,altura){
	var base = base;
	var altura = altura;
}

De esta forma, el código de acceso directo…

var r1 = new rectangulo(2,6);
alert(r1.base);

… devolvería undefined.

En este caso tendríamos que proporcionar unos métodos públicos para acceder a estos atributos privados.

function rectangulo(base,altura){
	var base = base;
	var altura = altura;
	this.getBase = function() {return base;}
	this.getAltura = function() {return altura;}	
}

Y el acceso mediante estos métodos:

document.write("Un rectangulo de " + r1.getBase() + "x" + r1.getAltura());

Código Fuente

Descárgate el código fuente de Clase con atributos privados 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
Java

Conocer la resolución de la pantalla con Java

Creado: 14/Sep/2010 Actualizado: 08/Ene/2015

Una cosa importante cuando estamos haciendo aplicaciones gráficas en Java es conocer la resolución de la pantalla en la cual se ejecuta nuestra aplicación. Y es que estaremos de acuerdo que no es lo mismo lanzar una aplicación en una resolución de 800×600 que lanzarla en una resolución de 1600×1200.

Para conocer la resolución de la pantalla con Java nos apoyaremos en el framework AWT. La clase que representa el framework AWT en general es Toolikt. Toolikt es una abstracción y permite enganchar con implementaciones nativas del framework.

Lo primero que haremos será instanciar el framework:

Toolkit t = Toolkit.getDefaultToolkit();

Una vez instanciado el framework, utilizaremos un método del Toolikt para conocer la resolución de la pantalla. En concreto utilizaremos el método .getScreenSize(). Este método devolverá una clase Dimensions, la cual sirve para albergar las dimensiones de cualquier componente de AWT.

Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();

Ya solo nos quedará acceder a las propiedades height y width de Dimensions para conocer la resolución de nuestra pantalla.

System.out.println("Tu resolución es de " + screenSize.width + "x" + screenSize.height);

Sencillo y útil programa.

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
CSS

Controlando el overflow de una capa

Creado: 12/Sep/2010 Actualizado: 25/Ago/2021

Como veíamos en el artículo definir el ancho de una capa con CSS, una de las cosas que nos puede suceder es que el contenido de la capa sea más grande al tamaño que demos a la capa y nos veamos controlando el overflow de una capa.

Aunque en el ejemplo de definir el ancho de una capa con CSS sucedía con el texto, lo más normal es que suceda de forma más normal cuando utilicemos otros elementos como las imágenes.

Por ejemplo, nos puede pasar lo siguiente:
css capas overflow

En esta situación, cuando trabajemos con capas, tendremos que controlar la propiedad overflow de la capa. Es decir, como queremos que desborde el contenido de la capa. Para ello podemos utilizar los siguientes valores de overflow:

  • visible – el contenido superará el tamaño definido por la capa. Es decir, si es más grande el contenido, se quedará por encima de la capa. Es el valor por defecto de la propiedad overflow.
  • hidden – el contenido que desborda el tamaño de la capa se corta y queda eliminado. Es decir, no se visualiza.
  • scroll – la capa incorpora un scroll vertical y horizontal para poder ver la totalidad del contenido, sin modificar el tamaño de la capa.
  • auto – incorpora scroll solo en la dirección que lo necesite.
  • inherit – el valor de la propiedad será heredado del valor del atributo overflow del elemento padre.

Veamos como queda nuestro diseño dependiendo del valor de las propiedades de overflow:
css capas valores overflow

El código CSS que tenemos que añadir quedaría de la siguiente forma:

Este es el caso del valor overflow. Solo tienes que modificar este valor para ver como quedan los otros valores.

Seguiremos con más artículos sobre las capas. Los siguientes serán para controlar su ubicación…

Código Fuente

Descárgate el código fuente de Controlando el overflow de una capa
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

Definir el ancho de una capa con CSS

Creado: 11/Sep/2010 Actualizado: 25/Ago/2021

Una de las mejores formas de maquetar nuestras web es utilizando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra hay que tener en consideración.

Las estructura de nuestro documento HTML podría ser la siguiente:

<div id="equipos">
  <h2>Equipos</h2>
  Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis.
</div>

<div id="goleadores">
  <h2>Goleadores</h2>
  Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo.
</div>

Como podemos ver, tenemos dos capas (la de equipos de fútbol y la de goleadores). Una cosa importante es que hemos dado un ID a las capas. Ya que mediante ese ID vamos a dar un ancho a dichas capas.

Si queremos definir el ancho de una capa con CSS deberemos de utilizar el atributo width. Así nuestra hoja de estilos CSS quedará de la siguiente forma:

#equipos{
  width:100px;
  background:red;
}

#goleadores{
  width:100px;
  backgorund:blue;
}

Vemos que utilizamos los valores de los ID precedidos de una almohadilla (#) para dar el estilo CSS al elemento.

Hemos añadido un fondo a la capa, mediante el atributo background, con el fin de poder apreciar que hemos dado a las capas un ancho de 100px.

Inicialmente podríamos decir que ya tenemos resuelto nuestro problema y que era sencillo definir el ancho de una capa con CSS.

Veamos una captura de la imagen…
css capas width

Bueno, viendo el resultado, quizás me asalten algunas dudas:

  • El texto «Goleadores» se sale de la capa. ¿Cómo debería de quedar ajustado?
  • Las capas están una debajo de otra. Yo pensaba que al definirlas un ancho, se situarían una detrás de otra.

De momento dejamos definido el ancho de las capas con CSS. En siguientes artículos iremos viendo como ajustar esos pequeños detalles.

Código Fuente

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

Capturar la tecla F5 con Javascript

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

Una de las últimas preguntas que hacían en nuestros foros era acerca de cómo capturar la tecla F5 dentro de un navegador. Y @Torres aportaba la solución de forma muy correcta mediante Javascript.

Veamos cuales son los pasos.

Lo primero será saber que el usuario ha pulsado una tecla. Es por ello que deberemos de estar al tanto del evento onkeydown. Al cual le asignaremos una función de escucha. Bueno, el evento lo capturamos a nivel de página:

document.onkeydown=capturarf5;

Como podemos ver, la función recibe el objeto event. Este será el que contenga la información de la tecla que el usuario ha pulsado.

Empecemos a detallar la función capturarf5(). Lo primero que hay que saber es que el código de la tecla pulsada viaja en la propiedad event.which y que la tecla F5 tiene el código 116. Como la propiedad event.which no está recogida en ninguna especificación (de momento es del DOM Gecko, aunque ampliamente reconocida) también tenemos que utilizar la propiedad e.keycode (de las implementaciones para el Internet Explorer)

Así, para capturar el código de la tecla utilizamos la siguiente línea:

var code = (e.keyCode ? e.keyCode : e.which);

Y si es el código 116…. pues, lo que queramos. ¿avisamos al usuario?

if(code == 116) {
  alert("Pulsada la tecla F5");
}

Como podemos apreciar… un código muy sencillo.

Por cierto, ¿esto evita un refresco de la página?

Muchas gracias a @Torres por su aporte en los foros.

Código Fuente

Descárgate el código fuente de Capturar la tecla F5 con 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
Java

Añadir un tooltip a un JButton

Creado: 09/Sep/2010 Actualizado: 08/Ene/2015

Un tooltip es un mensaje emergente que nos aparece cuando pasamos por ciertos elementos, por ejemplo, sobre un botón (clase JButton en Swing). Este mensaje nos proporcionará información alternativa sobre el elemento o la acción que desencadene.

Veamos que pasos tenemos que seguir para añadir un tooltip a un JButton.

Lo primero de todo será crear nuestro botón con la clase JButton:

JButton boton = new JButton("Pasa sobre este botón");

Una vez creado el botón le añadiremos el tooltip mediante el método .setToolTipText(). Dicho método recibe como parámetro el texto del tooltip.

boton.setToolTipText("Tooltip del botón");

Ya solo nos quedará añadir el botón a nuestro contenedor, con el método .add(), para tener la aplicación montada. Veamos como sería el código:

public BotonConTooltip(){
  super("Botón con Tooltip");	
		
  getContentPane().setLayout(new FlowLayout());
				
  JButton boton = new JButton("Pasa sobre este botón");
  boton.setToolTipText("Tooltip del botón");
  getContentPane().add(boton);
  	
  setSize(400,300);
  setVisible(true);
}

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
HTML

Utilizando la etiqueta ADDRESS

Creado: 08/Sep/2010 Actualizado: 28/Oct/2018

Una de las etiquetas HTML más olvidadas es ADDRESS. Esta etiqueta es la que nos permite poner el contacto de una determinada página, tal cual nos indica la W3C:

«El elemento ADDRESS debe de ser utilizado por los autores para proporcionar información de contacto de un documento o de una parte importante de un documento como podría ser un formulario.»

Así que cuando vayamos a poner el contacto de un documento podemos utilizar la etiqueta ADDRESS la cual tiene la siguiente estructura básica:

contacto

Así, si queremos poner un contacto podríamos poner lo siguiente:

Victor Cuervo
Alferez Provisional 14 2B
05003 Avila
Tlfno: +34 920 22 22 27

Un interesante artículo (en inglés) sobre la utilización del elemento ADDRESS es «Use of ADDRESS Element».

Código Fuente

Descárgate el código fuente de Utilizando la etiqueta ADDRESS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

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

Test HTML

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

Test HTML
Artículos
VBScript

Definir una variable en VBScript

Creado: 07/Sep/2010 Actualizado: 08/May/2024

Si queremos definir un valor variable en VBScript deberemos de utilizar la clausula DIM.

DIM variable

Así para definir la variable nombre haremos lo siguiente:

DIM nombre

Mediante el símbolo igual le podremos asignar un valor

DIM nombre = "Victor"

Si bien es verdad que el compilador no se queja si omitimos la sentencia DIM. así podremos definir una variable mediante la línea de código

nombre = "Victor"

Una cosa importante es que no se define el tipo de la variable, si no que en el momento que asignamos un valor a una variable, a dicha variable se le asgina un tipo. Así, la variable nombre, después de la asignación, será de tipo String.

Si bien, en la siguiente línea, podemos hacer lo siguiente:

nombre = 23

Automáticamente, la variable nombre, pasa a ser de tipo entero.