JMiur [E]

En JavaScript, una variable es un "cajoncito" donde guardamos algo y al que le damos un nombre para saber cuál es cual ¿Qué podemos guardar?, casi cualquier cosa; así, yo puedo decir que:
var midato = 2;
y guardo un valor o bien:
var midato = "Nombre y Apellido"
y guardo un texto.

Son variables porque puedo ir cambiando su contenido y en algún momento, puedo poner que:
midato = midato + 100;
y el cajoncito ahora contendrá el valor 102, o bien:
midato = midato + " : Fulano de Tal";
y el cajoncito ahora contendrá el valor "Nombre y Apellido : Fulano de Tal"

Siempre, las defino al principio para evitar que algunos navegadores como Internet Explorer no las reconozcan cuando las vayamos a usar o "las declaro" colocando el nombre sin ningún valor:
var midato;
y si tengo varias, las separo con comas:
var midato, otrodato, utlimodato;
Es importante entender que JavaScript es sensible a minúsculas y mayúsculas así que estas tres variables, serán diferentes:
var midato, MIDATO, MiDato;
Como en las variables podemos poner casi cualquier contenido, una de las cosas que normalmente podemos usar son objetos como las etiquetas HTML. Podría parecer confuso pero, para decirlo de manera simple: un objeto es ... como un objeto. Una mesa es un objeto y como tal tiene propiedades, es de madera o de metal, tiene una cierta altura, un color; lo mismo ocurre con las etiquetas HTML, de alguna forma, son objetos rectangulares que tienen propiedades, un ancho, un alto, un color de fondo, están en cierta posición de nuestra página; y así como podemos modificar algunas propiedades de una mesa, también podemos modificar alguas propiedades de las etiquetas pero, como las computadoras no piensan, para hacer eso, debemos indicarles con exactitud a cual nos estamos refiriendo.

Por ejemplo, en una página web puede haber muchas etiquetas DIV y si nosotros queremos usar JavaScript para cambiar algo de uno de ellos, debemos identificarlo con claridad. Para eso existe el atributo ID que nos sirve para darle un nombre exclusivo a una etiqueta cualquiera de tal modo que podamos manipularla:
<div id="contenedor"> ... el contenido ... </div>
El ID nos permitirá darle propiedades con CSS:
#contenedor {}
pero también nos permitirá acceder a él desde JavaScript y para eso ya hay una función interna que nos ayuda:
document.getElementById("nombre_ID")
así que podría usarlo de este modo, guardándolo en una variable:
var micontenedor = document.getElementById("nombre_ID");
o leer sus propiedades de estilo con algo así:
document.getElementById("nombre_ID").style.PROPIEDAD
donde la PROPIEDAD tiene una sintaxis similar a la que usamos en CSS: color, width, height, display con algunas variantes cuando esas propiedades tienen nombres compuesto, por ejemplo a background-color se accede con backgroundColor y a padding-left se accede con paddingLeft; en general, eliminando ese guión y comenzando la segunda palabra con mayúsculas.

Quiere decir que si yo quiero saber cuál es el color y el ancho de esa etiqueta, escribiría esto:
elColor = document.getElementById("contenedor").style.color;
elAncho = document.getElementById("contenedor").style.width;
y usamos las variables para simplificar el código:
var elColor, elAncho;
var micontenedor = document.getElementById("contenedor");
elColor = micontenedor.style.color;
elAncho = micontenedor.style.width;
Asi como las leo, tambien puedo escribirlas:
micontenedor.style.color = "#F00"; // establecerá rojo como color
micontenedor.style.width ="300px"; // hará que tenga 300 pixeles de ancho
Esta es la idea básica que usamos cuando queremos tener una etiqueta cuyo contenido mantenemos oculto hasta que se hace click; permutamos una de sus propiedades (display) y lo hacemos con una función. Para el ejemplo, necesitamos un enlace que ejecute esa función y un DIV que de entrada, mantenemos oculto:
<a href="javascript:permutardisplay('contenedor');"> click acá para permutar de estado </a>
<div id="contenedor" style="display:none;"> ... el contenido ... </div>
Al hacer click, se ejecutará una función llamada permutardisplay a la que le enviaremos el nombre (el ID) de la etiqueta que queremos modificar. Esa función podría ser algo como esto:
<script>
function permutardisplay(cual) {
  // en una variable, guardo la etiqueta
  var micontenedor = document.getElementById(cual);
  // uso una condición; le pregunto ¿esa etiqueta es visible?
  if (micontenedor.style.display == "block") {
    // si la respuesta es SI (true) le cambio la propiedad y la oculto
    micontenedor.style.display = "none";
  } else {
    // en caso contrario, como la respuesta es NO (false) le cambio la propiedad y la hago visible
    micontenedor.style.display = "block";
  }
}
</script>

Cada vez que haga click, el resultado de la condición cambiará y por lo tanto, si la etiqueta está oculta se mostrará y si esta visible se ocultará.

Esa es la utilidad de las funciones, permiten tener un solo código para ejecutar cosas similares; en este caso, usando la misma, indicándoles sobre cuál DIV actuar, permutamos tres DIVs diferentes:
<a href="javascript:permutardisplay('contenedor_1')">1</a>
<a href="javascript:permutardisplay('contenedor_2')">2</a>
<a href="javascript:permutardisplay('contenedor_3')">3</a>
<div id="contenedor_1" style="display:none;"> ... el contenido del ejemplo 1 ... </div>
<div id="contenedor_2" style="display:none;"> ... el contenido del ejemplo 2 ... </div>
<div id="contenedor_3" style="display:none;"> ... el contenido del ejemplo 3 ... </div>

1 | 2 | 3

17 comentarios:

Theemilio_crazy  

Hola JMiur, Tengo un pequeño problemita y es que como me robaron el blog y no lo pude recuperar atravez de foro de google tube que crear uno nuevo y importe todas las entradas del antiguo blog, entonces el problema es que esas entradas cuando trato de buscarla en el buscador no aparecen aunque si estan publicadas, solo aparecen las nuevas entradas, Que puedo hacer en este caso?...Gracias Por Todo....

Blog es: http://www.elmundodepeliculas2.org/

Responder
Luis Reyes  

eres un jenio Jmiur

Responder
Unknown  

Ya no puedo decir más, excelente :D
Para guardarlos!

Menos mal que las compus, aún no piensan :$

Responder
Joan Irazu  

un ejemplo basico de como conseguir cambiar el estilo desde un clic :)

Responder
Manuel Alberto  

Gracias JMiur por esta explicación clara y didáctica...:)

Responder
Cárpena Creativos  

Hola JMiur, estoy buscando hacer un efecto hover como este y no lo encuentro:

http://www.frombagstoriches.com/rentbag/pc/viewCategories.asp?idCategory=16

Al leer este post, talves pueda hacerlo pero veo q hay q darle click para ver lo escondido, Pregunta: Sabes de algun script para hacer algo similar a lo de la web mostrada? o se podria modificar el script de este post para q aparezca lo oculto no con click sino con mouse hover?

Gracias anticipadas amigo !!

Responder
JMiur  

Theemilio_crazy:
No tengo información al respecto. Si el blog "viejo" tenía una URL y el "nuevo" otra, los buscadores lo tomarán como dos sitios diferentes. No entiendo muy bien a qué te refieres cuando hablas de que no encuentras las entradas ¿hablas de las del viejo blog?

Graciela:
Menos mal ¡qué sería de nosotros si lo hiceran!!!! :D

CHiCken, Manfenix:
Esa era la idea, que sea básico ... para perderle el miedo :D

JAIME:
Ese que muestras es un script de Dynamic Drive llamado Cool DHTML Tooltip

Responder
[@nimes]  

Hola amigo Jmiur, quisiera saber si tienes un tuto para hacer ese efecto de las categorias que tiene animeid.com, sus categorias cuando le das click se abren estan ordenadas de A-F y G-L , espero me entiendas lo que trato de decir, se podria hacer estoy a un blog!!, gracias por tu atencion.

Responder
Cárpena Creativos  

Muchas gracias, ya le heche una mirada, ahora a probarlo, gracias por el dato. Y otra pregunta: en algun lado te vi un tutorial para eliminar la sidebar en una entrada en particular, recuerdas cual es?

Gracias!!

Responder
JMiur  

[@nimes]
Para desplegar y contraer las categorias usa algun plugin de JQuery. Es algo como esto.

El cómo ha creado las categorias no puedo decírtelo. Como no utillza Blogger, puede ser cualquier cosa; en Blogger podría hacerse ya sea manualmente o agregando varios gadgets de etiquetas y seleccionando en cada uno de ellos los que se quieren mostrar.

Responder
Cárpena Creativos  

Jmiur, si me permites un aporte para [@nimes] creo q lo q quiere esta aqui:

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Responder
JMiur  

JAIME:
Adelante, lo que abunda no sobra :D
Creo que el que usa el sitio de referencia es el otro pero ese que muestras me gusta y parece hacer más o menos lo mismo así que es otra alternativa válida.

Responder
Theemilio_crazy  

Hola JMiur, mira me refiero que cuando hago una busqueda internet en el blog (nuevo) no aparecen las entradas que he importada, es como si no estubieran, pero si estan alli...

Responder
JMiur  

Tal vez, deberías enviar un sitempa con las entradas del nuevo blog, como son muchas, es posible que no se indexen rápidamente. Ese tipo de cambio no es sencillo, cuando se cambia la URL del blog, pasa más o menos lo mismo que cuando se crea uno nuevo; se requiere tiempo para que los buscadores lo reindexen.

Responder
La hormiguita  

Cada vez que leo la variable VAR me suena a ruso... ni idea por que :O
pero es el cajoncito ruso y lo de adentro bueno tengo una idea, pero una idea... ya se aclarará.:P

Responder
Rita Paola  

hola una pregunta como podríamos pasarle un parámetro? por ejemplo si quisiéramos una función donde contaríamos cada vez que cambiamos el estado?
Exelente post!!!!!!

JMiur  

Si el contador es un dato que se debe preservar, se debe definir la variable fuera de la función y de este modo, puede ser evaluada por ella o por cualquier otra; es decir, es global.

Por ejemplo:

var contador = 0;

function permutardisplay(cual) {
// hago algo
contador++;
}

Cada vez que se ejecute permutardisplay() la variable contador se incrementará,

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR