Foros del Web » Programando para Internet » Javascript »

entender funcion facil

Estas en el tema de entender funcion facil en el foro de Javascript en Foros del Web. muy buenas, llevo unos meses intentando aprender programacion jvascript y me surgen muchas dudas, espongo la siguiente por si me ayudase alguien. si tenemos este ...
  #1 (permalink)  
Antiguo 22/10/2015, 06:54
 
Fecha de Ingreso: marzo-2008
Mensajes: 43
Antigüedad: 14 años, 8 meses
Puntos: 0
entender funcion facil

muy buenas, llevo unos meses intentando aprender programacion jvascript y me surgen muchas dudas, espongo la siguiente por si me ayudase alguien.

si tenemos este codigode abajo en el js

var flex_list = {

sections: [480, 640, 800, 1200],

initialize: function(classReference) {
document.getElementsByClassName(classReference)[0].parentNode.style.position = "relative";

// Load listener
window.addEventListener("load", function() {
// First time execution
flex_list.resizeFunction(classReference);
}, false);

// Resize listener
window.addEventListener("resize", function() {
flex_list.resizeFunction(classReference);
}, false);

},


y en la pagina index hay esto antes de cerrar body
<script type="text/javascript">
flex_list.initialize("listado");
</script>


que es lo que esta sucediendo aqui?

consigo saber que se le pasa el argumento listado que es una clase a la funcion
del js, pero esto no se bien que es initialize: function(classReference) {

¿se guarda la funcion en initialize?, initialize que es, una variable , una funcion, un metodo?.

MUchas gracias
  #2 (permalink)  
Antiguo 22/10/2015, 07:53
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 5 meses
Puntos: 1011
Respuesta: entender funcion facil

flex_list es un objeto y dentro de el están los elementos de este objeto. tanto initialize como sections son elementos del objeto flex_list y a estos elementos se le puede asignar otro objeto, un array (sections), una función (initialize), etc...

<offtopic>en lugar de usar getElementsByClassName, usa querySelectorAll</offtopic>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 22/10/2015, 08:25
 
Fecha de Ingreso: marzo-2008
Mensajes: 43
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: entender funcion facil

Muchas gracias isabel, permiteme que insista.. pero como veo que me puedes ayudar bastante en este codigo que lo necesito como agua de mayo, te lo pongo entero por si me pudieses ayudar en otros puntos.

Es un codigo que me descarge para poner los elememenos de las columnas de tal modo que se pongan uno seguido de otro, sin embargo funciona siempre que el no haya ningun elemento pradre mas que el body por encima del padre de .listado (que es donde estan contenidas las imagenes).

la verdad es que no se porque..

/**
* Flex List Javascript Library v0.0.1
*
* @Author ANM.
*
* Date 2015-09-15
*/

var flex_list = {

sections: [480, 640, 800, 1200],

initialize: function(classReference) {

document.getElementsByClassName(classReference)[0].parentNode.style.position = "relative";

// Load listener
window.addEventListener("load", function() {
// First time execution
flex_list.resizeFunction(classReference);
}, false);

// Resize listener
window.addEventListener("resize", function() {
flex_list.resizeFunction(classReference);
}, false);

},


/**
* Initialize flex list events.
* Add onload and resize listeners AND list of sections to make columns.
*/
initialize_with_sections: function(classReference, sects) {
// Define sections
if ( sects && (sects.constructor.toString().indexOf("Array") > -1) )
flex_list.sections = sects;

flex_list.initialize(classReference);
},

/**
* Returns x,y as pixels position of selected item into HTML DOM
*/
getPosition: function(element) {
var xPosition = 0;
var yPosition = 0;

while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
},


/**
* Each time function is called, check number of items needed for every row and move all to adjust.
*/
resizeFunction: function(classReference) {
// Set container size, for adjust content to it.
var list = document.getElementsByClassName(classReference);
list[0].style.left = 0;
var fatherWidth = list[0].parentNode.offsetWidth;
//console.log(fatherWidth);

// Default items per row value.
var itemsPerRow = 1;
//console.log(window.innerWidth);
/*
if (window.innerWidth > 1200) {
itemsPerRow = 5;
}else if (window.innerWidth > 800) {
itemsPerRow = 4;
}else if (window.innerWidth > 640) {
itemsPerRow = 3;
}else if (window.innerWidth > 480) {
itemsPerRow = 2;
}
*/

// Check sections array and define these sections. If array isnt exists, define only 1 column.
for (var x = 0; x<flex_list.sections.length; x++) {
if ( window.innerWidth > parseInt(flex_list.sections[x]) ) {
itemsPerRow = itemsPerRow + 1;
}
}



// Default values for realignment.
var mod = 0;
var row = 1;
var newTop = 0;
var newLeft = 0;
var pos = {x:0, y:0};
for (var x = 0; x<list.length; x++) {
mod = x % itemsPerRow;
row = Math.floor(x / itemsPerRow);
//console.log("Fila:"+row+" columna:"+mod);
pos = flex_list.getPosition(list[x]);
//console.log("Left:"+pos.x+" Top:"+pos.y);

// TOP alignment
if (row == 0) {
newTop = 0;
}else {
pos = flex_list.getPosition(list[x-itemsPerRow]);
newTop = pos.y + list[x-itemsPerRow].offsetHeight;
//console.log("Item:"+(x-itemsPerRow)+" Altura:"+list[x-itemsPerRow].offsetHeight);
}

// LEFT alignment
if (mod == 0) {
newLeft = 0;
}else {
pos = flex_list.getPosition(list[x-1]);
newLeft = pos.x + list[x-1].offsetWidth;
}

// APPLY
list[x].style.left = newLeft;
list[x].style.top = newTop;
list[x].style.position = "absolute";
//console.log("newTop:"+newTop+" newLeft:"+newLeft);
}
},
};

Etiquetas: entender, facil, funcion, js, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:31.