iuttu » javascript

De Mootools a jQuery: comprobar si un elemento existe

iuttu — Sun, 15 Mar 2009 11:26:01 +0000

Para los que estamos acostumbrados a mootools, nos es habitual comprobar si un elemento (tag html con id) existe antes de lanzar los scripts, siempre lo hacemos de la misma manera:

1	if ($("elemento")) { alert("adelaaaaaaaanteee"); }

Pero si pasamos a jQuery, vemos que si lo hacemos así, la expresión siempre devolverá cierto. Ya que la función $(“”) en jQuery siempre devuelve un array de elementos. Sabiendo esto, lo que tenemos que comprobar para saber si un elemento existe, es comprobar la longitud del array que nos devuelve:

1	if ($("elemento").length > 0) { alert("adelaaaaaanteee"); }

Ya puestos, en dojo tendríamos que hacer esto:

1	if (dojo.byId('elemento')) { alert("adelaaaaaanteee"); }

Reproductor mp3 controlado con javascript

iuttu — Thu, 18 Dec 2008 08:21:33 +0000

Para un proyecto reciente tenía la necesidad de reproducir archivos mp3 desde un listado de canciones. La red está llena de javascripts en flash para reproducir mp3s externos, pero no llegué a encontrar alguno que además de poder cargar mp3s te diese la posibilidad de pausar las canciones.

Partimos de la página html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
</head>
<body>

<div id="flash"
	<object type="application/x-shockwave-flash" data="audio.swf" width="0" height="0" id="audio"><param name="allowScriptAccess" value="all" /><param name="movie" value="audio.swf" /></object>
</div>
 
</body>
</html>

vemos el ActionScript del flash:

import flash.external.ExternalInterface;
 
// allowscriptaccess = samedomain
 
var my_sound:Sound = new Sound();
 
var soundStatus = 0;
var soundStarted = false;
var currentPosition = 0;
var currentPlay;
 
function playSound(param) {
	currentPlay = param;
 
	my_sound = new Sound();
	my_sound.loadSound(param, true);
	my_sound.start(0);
 
	soundStatus = 1;
	soundStarted = true;
	currentPosition = my_sound.position;
 
	my_sound.onSoundComplete = function() {
		soundStatus = 0;
 
		currentPosition = 0;
		// Avisamos a la página
		soundStarted = false;
		this.stop();
	}
}
 
function togglePause() {
	if (soundStatus == 1) { // Lo pausamos
		currentPosition = my_sound.position;
		my_sound.stop();
		soundStatus = 0;
		this.stop();
	} else {
		if (soundStarted) {
			my_sound.start(currentPosition/1000);
			soundStatus = 1;
			this.stop();
		}
 
	}
}
 
function stopSound() {
	if (soundStatus == 1) {
		my_sound.stop();
		soundStatus = 0;
		this.stop();
	}
}
 
ExternalInterface.addCallback("playSound", this, playSound);
ExternalInterface.addCallback("togglePause", this, togglePause);
ExternalInterface.addCallback("stop", this, stopSound);

Ahora imaginemos que tenemos 3 archivos mp3 llamados “mp3_1.mp3″, “mp3_2.mp3″ y “mp3_3.mp3″, vamos a presentar la página html para poder reproducir las 3 canciones:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
</head>
<body>

<div id="flash"
	<object type="application/x-shockwave-flash" data="audio.swf" width="0" height="0" id="audio"><param name="allowScriptAccess" value="all" /><param name="movie" value="audio.swf" /></object>
</div>
 
<a href="javascript:reproduce('mp3_1.mp3')">Canción 1</a>
<a href="javascript:reproduce('mp3_2.mp3')">Canción 2</a>
<a href="javascript:reproduce('mp3_3.mp3')">Canción 3</a>
 
</body>
</html>

tendríamos que añadir la función javascript que llame al flash:

<script type="text/javascript">
 
function reproduce(_cual) {
	document.getElementById("audio").playSound(_cual);
}
script>

Ahora podríamos añadir los botones de pausa/play y stop:

...
<a href="javascript:reproduce('mp3_1.mp3')">Canción 1</a>
<a href="javascript:reproduce('mp3_2.mp3')">Canción 2</a>
<a href="javascript:reproduce('mp3_3.mp3')">Canción 3</a>
 
<a href="javascript:play_pause();">play/pausa</a>
<a href="javascript:stop();">stop</a>
</body>
</html>

y sus funciones:

<script type="text/javascript">
function reproduce(_cual) {
	document.getElementById("audio").playSound(_cual);
}
 
function play_pause() {
	document.getElementById("audio").togglePause();
}
 
function stop() {
	document.getElementById("audio").stop();
}
 
function onSoundComplete() {
	alert("Canción completada!!");
}
script>

y ya tendremos lo básico (pero más importante) para crearnos un reproductor de mp3 controlado por javascript !!

Descárgate los archivos del tutorial

Cambiar evento onChange de un select con mootools

iuttu — Wed, 08 Oct 2008 19:23:48 +0000

En un proyecto reciente, tenímos la necesidad de que, dependiendo de X factores, la función a la que llamase el evento onChange de varios combos Select debía ir cambiando:

<select id="slSelect" onchange="alert(1)">
<option value="1">hola</option>
<option value="2">que tal</option>
</select>

En mootools, tenemos varias funciones para eliminar eventos de objetos: $(element).removeEvent() y $(element).removeEvents(), pero, misteriosamente, no tienen ningún efecto cuando se aplica a un objeto de tipo Select. ¿Y si en vez de un evento, el código onchange=”alert(1)” fuera interpretado como una propiedad de objeto? Pues efectivamente, la única forma de quitar (para después añadir otro) un evento onchange es anulando la propiedad del objeto, en mootools sería así:

1	$("slSelect").removeProperty("onchange");

Probado en FF3, IE6, IE7 y Safari. En la página siguiente os dejo el código del ejemplo…

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" charset="utf-8">
function changeOnChange() {
    $("slSelect").removeProperty("onchange");
}
</script>
</head>
<body>
<select id="slSelect" onchange="alert(1)">
    <option value="1">hola</option>
    <option value="2">que tal</option>
</select>
<input type="button" value="cambia onchange" onclick="changeOnChange();" />
</body>
</html>