
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Otro Blog Más &#187; javascript</title>
	<atom:link href="http://otroblogmas.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://otroblogmas.com</link>
	<description>Blog de informática: programación, internet, php, wordpress, zend framework, mysql, windows, mootools, linux,...</description>
	<lastBuildDate>Thu, 26 Apr 2012 06:00:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Javascript: objetos, funciones y arrays</title>
		<link>http://otroblogmas.com/javascript-objetos-funciones-arrays/</link>
		<comments>http://otroblogmas.com/javascript-objetos-funciones-arrays/#comments</comments>
		<pubDate>Fri, 15 Apr 2011 07:00:12 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=2489</guid>
		<description><![CDATA[En Javascript no existe la programación orientada a objetos, o almenos de la forma como otros lenguajes de programación del lado del servidor. Igualmente, puede que haya veces que se quiera encapsular ciertos conceptos, para hacer el código más legible o de más fácil utilización. Para ello hay que conocer tres elementos principales de Javascript: [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/optimizar-javascript-firebug/' rel='bookmark' title='Optimizar Javascript con Firebug'>Optimizar Javascript con Firebug</a></li>
<li><a href='http://otroblogmas.com/funcion-remove-para-array-de-javascript/' rel='bookmark' title='Función REMOVE para Array de Javascript'>Función REMOVE para Array de Javascript</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-medium wp-image-2500" title="javascript-logo" src="http://otroblogmas.com/wp-content/uploads/2011/03/javascript-logo-177x150.png" alt="javascript logo 177x150 Javascript: objetos, funciones y arrays" width="177" height="150" />En <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con javascript">Javascript</a> no existe la <strong>programación orientada a objetos</strong>, o almenos de la forma como otros lenguajes de programación del lado del servidor. Igualmente, puede que haya veces que se quiera<strong> encapsular ciertos conceptos</strong>, para hacer el código más legible o de más fácil utilización.</p>
<p style="text-align: justify;">Para ello hay que conocer <strong>tres elementos principales</strong> de Javascript:</p>
<p><span id="more-2489"></span></p>
<h3>Objetos</h3>
<p style="text-align: justify;">Aunque casi todo en Javascript es un objeto, entendiéndolos como un tipo de dato a definir, vienen a ser una <strong>colección de datos</strong> solamente. Si lo quisieramos comparar con PHP, serían <strong>arrays asociativos</strong>, donde cada elemento puede ser un valor una función:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> bar <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	num <span style="color: #339933;">:</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">,</span>
	calc <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">num</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
bar.<span style="color: #660066;">num</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>
bar.<span style="color: #660066;">calc</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">// 10</span>
&nbsp;
bar<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'num'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span>
bar.<span style="color: #660066;">calc</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">// 8</span></pre></div></div>

<h3>Funciones</h3>
<p>Son lo <strong>más parecido a un objeto</strong>, dependiendo como se implementen. Se pueden definir de muchos aspectos, como por ejemplo, una función puede ser guardada en una variable.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> bar
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">num</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getNum</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">num</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> bar1 <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> bar<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
bar1.<span style="color: #660066;">num</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
bar1.<span style="color: #660066;">getNum</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">// 2</span>
<span style="color: #003366; font-weight: bold;">var</span> bar2 <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> bar<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
bar2.<span style="color: #660066;">getNum</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">// 3</span>
&nbsp;
<span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'called function'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<h3>Arrays</h3>
<p>Los arrays en Javascript solamente pueden ser <strong>numéricos</strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> bar <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> <span style="color: #3366CC;">'red'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'blue'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'green'</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Vía <a href="http://bonsaiden.github.com/JavaScript-Garden/">JavaScript Garden</a>.</p>
<p><strong>ACTUALIZACIÓN (2011/06/03)</strong>: Añado otro enlace interesante sobre el tema:<br />
<a href="http://albertovilches.com/profundizando-en-javascript-parte-2-objetos-prototipos-herencia-y-namespaces">Profundizando en Javascript, parte 2: objetos, prototipos, herencia y namespaces</a></p>
<p><strong>ACTUALIZACIÓN (2011/09/02)</strong>: Otro enlace:<br />
<a href="http://www.etnassoft.com/2011/09/02/funciones-declaradas-vs-funciones-expresadas-en-javascript/">Funciones declaradas VS Funciones expresadas en Javascript</a></p>
<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/optimizar-javascript-firebug/' rel='bookmark' title='Optimizar Javascript con Firebug'>Optimizar Javascript con Firebug</a></li>
<li><a href='http://otroblogmas.com/funcion-remove-para-array-de-javascript/' rel='bookmark' title='Función REMOVE para Array de Javascript'>Función REMOVE para Array de Javascript</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/javascript-objetos-funciones-arrays/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Optimizar Javascript con Firebug</title>
		<link>http://otroblogmas.com/optimizar-javascript-firebug/</link>
		<comments>http://otroblogmas.com/optimizar-javascript-firebug/#comments</comments>
		<pubDate>Thu, 07 Apr 2011 07:00:12 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[optimización]]></category>
		<category><![CDATA[profiling]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=2515</guid>
		<description><![CDATA[En el trabajo tenía un script de Javascript que, cuando se cargaban muchos elementos en el DOM, tardaba casi 2 minutos en inicializar todos los objetos y eventos. No siendo un Javascript Expert, he tenido que optimizar el código para que siguiera funcionando correctamente, pero teniendo que esperar mucho menos a tenerlo todo listo. Quiero [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/funcion-remove-para-array-de-javascript/' rel='bookmark' title='Función REMOVE para Array de Javascript'>Función REMOVE para Array de Javascript</a></li>
<li><a href='http://otroblogmas.com/javascript-objetos-funciones-arrays/' rel='bookmark' title='Javascript: objetos, funciones y arrays'>Javascript: objetos, funciones y arrays</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">En el trabajo tenía un <strong>script de Javascript</strong> que, cuando se cargaban muchos elementos en el DOM, tardaba casi <strong>2 minutos en inicializar todos los objetos y eventos</strong>. No siendo un Javascript Expert, he tenido que <strong>optimizar el código</strong> para que siguiera funcionando correctamente, pero teniendo que esperar mucho menos a tenerlo todo listo. Quiero explicar mi experiencia y las herramientas que he descubierto, por si a alguien lo son de utilidad.</p>
<p><span id="more-2515"></span></p>
<p style="text-align: justify;">Primero descubrí que la página (el <strong>código HTML</strong>) tardaba poco más de 2 segundo en llegar y ser procesada por el navegador. Entre cagar y procesar el <strong>CSS</strong>, tardaba otro segundo largo. Y en cargar el <strong>Javascript </strong>y procesar todo el contenido, efectuando todos los cálculos iniciales, y añadiendo todos los eventos necesarios a los elementos del DOM, tardaba 1 minuto con 45 segundo.</p>
<p style="text-align: justify;">Para conocer estos valores utilice Firebug. En su pestaña de &#8220;<strong>Red</strong>&#8220;, pude ver los tiempos de carga de cada archivo y el tiempo total necesario hasta que el navegador volvía a reaccionar. En cada prueba, <strong><a href="http://otroblogmas.com/tag/firefox/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con firefox">Firefox</a> iba devorando la RAM</strong> como quien come palomitas en el cine.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-2516" title="Firebug pestaña Red" src="http://otroblogmas.com/wp-content/uploads/2011/03/firebug-red.jpg" alt="firebug red Optimizar Javascript con Firebug" width="408" height="123" /></p>
<p style="text-align: justify;">Cuando empecé a mirar los problemas del Javascript, empecé por <strong>ir comentando código</strong> para ir viendo donde estaba. Principalmente había tres zonas con problemas: búsqueda y capturación de elementos del HTML, modificación de estados y estilos de elementos HTML, y cálculos iniciales a partir de los elementos HTML existentes.</p>
<p style="text-align: justify;">Posteriormente, tenía que <strong>medir el tiempo de ejecución</strong> de cada proceso, para poder comparar con las mejorar que iba a hacer. Entonces descubrí otra funcionalidad más de Firebug. Esta herramienta <strong>tiene un gran potencial</strong>, y aunque todos los desarrolladores la usamos, no conocemos todas las posibilidades que ofrece.</p>
<p style="text-align: justify;">En el objeto <em>console</em>, hay un par de métodos para conseguir tiempos de ejecución o <a href="http://es.wikipedia.org/wiki/Profiling">hacer profiling</a> de una porción de código.</p>
<h3 style="text-align: justify;">console.time( name )</h3>
<p style="text-align: justify;">Crea un <strong>cronómetro </strong>con el nombre indicado, que será detenido y mostrado con console.timeEnd() con la etiqueta indicada.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">myFunc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>				
&nbsp;
console.<span style="color: #660066;">time</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'timer myFunc'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
myFunc<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">timeEnd</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'timer myFunc'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h3 style="text-align: justify;">console.profile( [name] )</h3>
<p style="text-align: justify;">Crea un <strong>Javascript Profiler</strong> que será detenido con console.profileEnd(). Se puede usar sin etiqueta. Solamente se puede usar con funciones, así que si se quiere hacer <a href="http://otroblogmas.com/tag/profiling/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con profiling">profiling</a> de un bucle, hará falta hacer un closure (una función anónima).</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">myFunc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>				
&nbsp;
console.<span style="color: #660066;">profile</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
myFunc<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">profileEnd</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>pre<span style="color: #339933;">&gt;</span>console.<span style="color: #660066;">profile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'my profile'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">100000</span><span style="color: #339933;">;</span> i<span style="color: #339933;">--;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> a  <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">profileEnd</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'my profile'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><img class="aligncenter size-full wp-image-2524" title="Firebug Profile" src="http://otroblogmas.com/wp-content/uploads/2011/04/firebug-profile.png" alt="firebug profile Optimizar Javascript con Firebug" width="430" height="140" /></pre>
<p style="text-align: justify;">Gracias a la ayuda de <a href="http://www.adriavalles.net/">Adrià</a>, conseguí bajar a 12 segundos toda la carga de la página.</p>
<p style="text-align: justify;">Vía <a href="http://www.stoimen.com/blog/2010/02/02/profiling-javascript-with-firebug-console-profile-console-time/">Stoimen's web log</a>.</p>
<p style="text-align: justify;">Link <a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug - Console API</a></p>
<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/funcion-remove-para-array-de-javascript/' rel='bookmark' title='Función REMOVE para Array de Javascript'>Función REMOVE para Array de Javascript</a></li>
<li><a href='http://otroblogmas.com/javascript-objetos-funciones-arrays/' rel='bookmark' title='Javascript: objetos, funciones y arrays'>Javascript: objetos, funciones y arrays</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/optimizar-javascript-firebug/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</title>
		<link>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/</link>
		<comments>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/#comments</comments>
		<pubDate>Sat, 29 Aug 2009 07:00:38 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[mootools]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=293</guid>
		<description><![CDATA[Para el trabajo, tuve que hacer una presentación sobre Mootools, en la cual, hice una pequeña introducción a JavaScript, que era un framework y porque elegir Mootools de entre los diferentes y famosos frameworks hechos para JavaScript. Como era para compañeros de trabajo, la presentación esta hecha un poco informal, y con trozos código para [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="mootools logo Presentación: Mootools y otros frameworks JavaScript" width="213" height="70" />Para el trabajo, tuve que hacer una <strong>presentación sobre <a href="http://otroblogmas.com/tag/mootools/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con mootools">Mootools</a></strong>, en la cual, hice una pequeña <strong>introducción a <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con javascript">JavaScript</a></strong>, <strong>que era un framework</strong> y <strong>porque elegir Mootools</strong> de entre los diferentes y famosos frameworks hechos para JavaScript.</p>
<p style="text-align: justify;">Como era para compañeros de trabajo, la presentación esta hecha un <em>poco informal</em>, y <strong>con trozos código</strong> para poder ver Mootools en funcionamiento y sus ventajas.</p>
<p style="text-align: justify;"><span id="more-293"></span>Os dejo la presentación que esta publicada en <a href="http://www.slideshare.net/ianmonge/mootools-y-otros-frameworks-js">SlideShare</a>.</p>
<div style="width: 520px; text-align: left;"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" title="Mootools Y Otros Frameworks JS" href="http://www.slideshare.net/ianmonge/mootools-y-otros-frameworks-js">Mootools Y Otros Frameworks JS</a><object style="margin:0px" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="434" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mootoolsyotrosframeworksjs-090317143114-phpapp01&amp;rel=0&amp;stripped_title=mootools-y-otros-frameworks-js" /><param name="allowfullscreen" value="true" /><embed style="margin:0px" type="application/x-shockwave-flash" width="520" height="434" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mootoolsyotrosframeworksjs-090317143114-phpapp01&amp;rel=0&amp;stripped_title=mootools-y-otros-frameworks-js" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
<div id="__ss_1159372" style="width: 520px; text-align: left;">
<div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/ianmonge">ianmonge</a>.</div>
</div>
<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Clase &#8216;Two Lists&#8217; en Mootools</title>
		<link>http://otroblogmas.com/clase-two-lists-en-mootools/</link>
		<comments>http://otroblogmas.com/clase-two-lists-en-mootools/#comments</comments>
		<pubDate>Sun, 23 Aug 2009 07:00:34 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[mootools]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=175</guid>
		<description><![CDATA[Clase en Mootools para hacer interactivas dos listas. Con dos elementos html SELECT y dos INPUT, permite pasar los items (OPTION) de una lista a otra, de la forma asignar o liberar. Ejemplo: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo. Clase mejorable, [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/dbug-clase-en-php-para-substituir-a-var_dump-o-print_r/' rel='bookmark' title='dBug: clase en PHP para substituir a var_dump o print_r'>dBug: clase en PHP para substituir a var_dump o print_r</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="mootools logo Clase Two Lists en Mootools" width="213" height="70" />Clase en <a href="http://otroblogmas.com/tag/mootools/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con mootools">Mootools</a> para <strong>hacer interactivas dos listas</strong>. Con dos elementos html <em>SELECT </em>y dos <em>INPUT</em>, permite pasar los items (<em>OPTION</em>) de una lista a otra, de la forma asignar o liberar. <strong>Ejemplo</strong>: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo.</p>
<p style="text-align: justify;"><span id="more-175"></span>Clase <em>mejorable</em>, es bastante básica y fácil de entender. <strong>Requiere la <a href="http://otroblogmas.com/funcion-remove-para-array-de-javascript">modificación de la función nativa REMOVE</a> en Arrays de <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con javascript">Javascript</a></strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//******************************************************************************</span>
<span style="color: #006600; font-style: italic;">// Función nativa de Javascript que se ha modificado por otra.</span>
<span style="color: #006600; font-style: italic;">// Elimina un (o mas) elemento(s) de un array:</span>
Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">remove</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span> to<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> rest <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">||</span> from<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> from <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> from <span style="color: #339933;">:</span> from<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">push</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> rest<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//******************************************************************************</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/*
 * 		Clase Two_lists
 *
 * 		Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
 * 		que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
 * 		Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
 * 		También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
 * 		que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
 * 		click también se moverá de SELECT.
 *
 * 		Para instanciar la clase, hay que pasar cuatro parámetros :
 * 		* El primer SELECT
 * 		* El segundo SELECT
 * 		* El INPUT que mueve del primer SELECT al segundo
 * 		* El INPUT que mueve del segundo SELECT al primero
 *
 * 		La clase posee cuatro funciones a parte de la constructora:
 * 		* moveOptionToSelect2 (option)
 * 			Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
 * 			los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
 * 			option del HTML.
 * 		* moveOptionToSelect1 (option)
 * 			Idem anterior, pero en el otro sentido.
 * 		* updateSelect1 ()
 * 			Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
 * 			Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
 * 		* updateSelect2 ()
 * 			Idem anteior, pero en el segundo SELECT.
 *
 */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> Two_lists <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	Implements<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>Options<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
&nbsp;
	select1 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	select2 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	asignar <span style="color: #339933;">:</span>	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	liberar <span style="color: #339933;">:</span>	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	options1 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// Array interno con los datos de los OPTIONs del primer SELECT</span>
	options2 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// Array interno con los datos de los OPTIONs del segundo SELECT</span>
&nbsp;
	options<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// INITIALIZE</span>
	<span style="color: #006600; font-style: italic;">//	Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los</span>
	<span style="color: #006600; font-style: italic;">//	dos INPUTs que interactuarán en la clase.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>select1<span style="color: #339933;">,</span> select2<span style="color: #339933;">,</span> asignar<span style="color: #339933;">,</span> liberar<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span> <span style="color: #339933;">=</span> select1<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span> <span style="color: #339933;">=</span> select2<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">asignar</span> <span style="color: #339933;">=</span> asignar<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">liberar</span> <span style="color: #339933;">=</span> liberar<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//generar el array con todos los options del select1</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">options1</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'id'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'name'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'state'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//generar el array con todos los options del select2</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">options2</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'id'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'name'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'state'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el botón</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">asignar</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> options_selected <span style="color: #339933;">=</span> self.<span style="color: #660066;">select1</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			options_selected.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">moveOptionToSelect2</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			self.<span style="color: #660066;">updateSelect2</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de liberar para el botón</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">liberar</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> options_selected <span style="color: #339933;">=</span> self.<span style="color: #660066;">select2</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			options_selected.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">moveOptionToSelect1</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			self.<span style="color: #660066;">updateSelect1</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el doble click en el option</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dblclick'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">asignar</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el doble click en el option</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dblclick'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">liberar</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>   
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// MOVE OPTION TO SELECT2</span>
	<span style="color: #006600; font-style: italic;">//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	moveOptionToSelect2 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> option <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// calcula la posición donde se encuentra el option en el array de options del select original</span>
		<span style="color: #003366; font-weight: bold;">var</span> position<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				position <span style="color: #339933;">=</span> index<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// hace el intercambio en los arrays</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span><span style="color: #009900;">&#91;</span>position<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span>position<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra el option del select original</span>
		option.<span style="color: #660066;">destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// MOVE OPTION TO SELECT1</span>
	<span style="color: #006600; font-style: italic;">//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	moveOptionToSelect1 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> option <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// calcula la posición donde se encuentra el option en el array de options del select original</span>
		<span style="color: #003366; font-weight: bold;">var</span> position<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				position <span style="color: #339933;">=</span> index<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// hace el intercambio en los arrays</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span><span style="color: #009900;">&#91;</span>position<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span>position<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra el option del select original</span>
		option.<span style="color: #660066;">destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>		
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// UPDATE SELECT1</span>
	<span style="color: #006600; font-style: italic;">//	Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	updateSelect1 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra los options del select de destino, y lo regera según el array</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">state</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				op <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #3366CC;">'id'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'dominio-'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'value'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'html'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				op.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">select1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// UPDATE TO SELECT2</span>
	<span style="color: #006600; font-style: italic;">//	Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	updateSelect2 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra los options del select de destino, y lo regera según el array</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			op <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
			    <span style="color: #3366CC;">'id'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'dominio-'</span><span style="color: #339933;">+</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
			    <span style="color: #3366CC;">'value'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
			    <span style="color: #3366CC;">'html'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			op.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">select2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/dbug-clase-en-php-para-substituir-a-var_dump-o-print_r/' rel='bookmark' title='dBug: clase en PHP para substituir a var_dump o print_r'>dBug: clase en PHP para substituir a var_dump o print_r</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/clase-two-lists-en-mootools/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Función REMOVE para Array de Javascript</title>
		<link>http://otroblogmas.com/funcion-remove-para-array-de-javascript/</link>
		<comments>http://otroblogmas.com/funcion-remove-para-array-de-javascript/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 07:00:36 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=179</guid>
		<description><![CDATA[Función para eliminar un elemento o un grupo de elementos de un array en Javascript. // Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function&#40;from, to&#41; &#123; var rest = this.slice&#40;&#40;to &#124;&#124; from&#41; + 1 &#124;&#124; this.length&#41;; this.length = from &#38;lt; 0 ? this.length + from : from; return this.push.apply&#40;this, rest&#41;; &#125;; Visto [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/javascript-objetos-funciones-arrays/' rel='bookmark' title='Javascript: objetos, funciones y arrays'>Javascript: objetos, funciones y arrays</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/optimizar-javascript-firebug/' rel='bookmark' title='Optimizar Javascript con Firebug'>Optimizar Javascript con Firebug</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Función para <strong>eliminar un elemento o un grupo de elementos de un array</strong> en <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con javascript">Javascript</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Array Remove - By John Resig (MIT Licensed)</span>
Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">remove</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span> to<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> rest <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">||</span> from<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> from <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> from <span style="color: #339933;">:</span> from<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">push</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> rest<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p style="text-align: justify;">Visto en <a href="http://ejohn.org/blog/javascript-array-remove/">John Resig</a>, donde también esta el código para sobreescribir la función nativa a Javascript.</p>
<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/javascript-objetos-funciones-arrays/' rel='bookmark' title='Javascript: objetos, funciones y arrays'>Javascript: objetos, funciones y arrays</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/optimizar-javascript-firebug/' rel='bookmark' title='Optimizar Javascript con Firebug'>Optimizar Javascript con Firebug</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/funcion-remove-para-array-de-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Detectar la tecla de borrar en Mootools</title>
		<link>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/</link>
		<comments>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 10:01:35 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[mootools]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=160</guid>
		<description><![CDATA[Como la palabra delete es una palabra reservada, no se puede utilizar la siguiente sentencia para detectar el evento de cuando se pulsa la tecla de borrar o retroceso: var isdel = Event.Keys.delete; Cuando hacemos un detector de teclas pulsadas en Mootools, para el evento de la tecla de retroceso hay que utilizar el siguiente [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-163" title="Tecla retroceso" src="http://otroblogmas.com/wp-content/uploads/2009/08/backspace_key.jpg" alt="backspace key Detectar la tecla de borrar en Mootools" width="133" height="74" />Como la palabra <em>delete</em> es una <strong>palabra reservada</strong>, no se puede utilizar la siguiente sentencia para detectar el <strong>evento de cuando se pulsa la tecla de borrar</strong> o retroceso:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> isdel <span style="color: #339933;">=</span> Event.<span style="color: #660066;">Keys</span>.<span style="color: #000066; font-weight: bold;">delete</span><span style="color: #339933;">;</span></pre></div></div>

<p style="text-align: justify;">Cuando hacemos un <strong>detector de teclas pulsadas en <a href="http://otroblogmas.com/tag/mootools/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con mootools">Mootools</a></strong>, para el evento de la tecla de retroceso hay que utilizar el siguiente método:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> isdel <span style="color: #339933;">=</span> Event.<span style="color: #660066;">Keys</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'delete'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Visto en <a href="http://davidwalsh.name/listen-delete-key-mootools">david walsh blog</a>.</p>
<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Efecto con Mootools para subir el scroll de la página hasta arriba</title>
		<link>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/</link>
		<comments>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 15:51:28 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[mootools]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=154</guid>
		<description><![CDATA[Pequeño trozo de código Javascript, que permite añadir un evento a los elementos que queramos, que produce un efecto de subir el scroll del navegador hasta arriba la página web. Muy práctico para los típicos enlaces &#8216;Subir&#8216; o &#8216;Arriba&#8216;, que hay en páginas muy largas. Esta hecho para trabajar con Mootools, y el plugin Fx.Scroll [...]
Entradas relacionadas:<ol>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="mootools logo Efecto con Mootools para subir el scroll de la página hasta arriba" width="213" height="70" />Pequeño trozo de código <strong><a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con javascript">Javascript</a></strong>, que permite añadir un evento a los elementos que queramos, que produce un <strong>efecto de subir el scroll del navegador</strong> hasta arriba la página web. Muy práctico para los típicos enlaces &#8216;<em>Subir</em>&#8216; o &#8216;<em>Arriba</em>&#8216;, que hay en páginas muy largas.</p>
<p style="text-align: justify;">Esta hecho para trabajar con <a href="http://mootools.net/">Mootools</a>, y el plugin <a href="http://mootools.net/docs/more/Fx/Fx.Scroll">Fx.Scroll</a> de <a href="http://otroblogmas.com/tag/mootools/" class="st_tag internal_tag" rel="tag" title="Entradas etiquetadas con mootools">Mootools</a> que viene a parte en el <a href="http://mootools.net/more">More Builder</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> scroller <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #000066;">Scroll</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'link_to_top'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		scroller.<span style="color: #660066;">toTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Entradas relacionadas:</p><ol>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

