Javascript discreto (no intrusivo... Unobtrusive JS)

AlZuwaga · #1 (**permalink**) 18/07/2007, 12:12

Hola, estoy dandole a la lectura sobre este tema, pero hasta el momento encontré poca info en castellano.
Alguien tendrá por allí algunos enlaces a info en nuestro idioma al respecto? Tutoriales? Ejemplos prácticos explicados para novatos?

Gracias!

AlZuwaga · #2 (**permalink**) 18/07/2007, 15:10

Acá hice una función para escalar imágenes:

Código:

function escalarImg(){
	var divs = document.getElementsByTagName('div');
	for(var i=0; i < divs.length; i++){
		if(/post_content/.test(divs[i].className)){
			var imas = document.getElementsByTagName('img');
			for(var i=0; i < imas.length; i++){
				ancho_max = 580;
				ancho_actual = imas[i].width;
				if(ancho_actual > ancho_max){
					imas[i].width = 580;
					imas[i].title = "Imagen escalada";
					alertar_escala = document.createElement('a');
					escala_texto = document.createTextNode('La imagen fue escalada. Click para abrirla en nueva ventana a tamaño real.');
					alertar_escala.appendChild(escala_texto);
					alertar_escala.setAttribute('href',imas[i].src);
					alertar_escala.onclick = function(){abrir_original(this); return false;};
					imas[i].parentNode.appendChild(document.createElement('br'));
					imas[i].parentNode.appendChild(alertar_escala);
				}//if
			}//for
		}//if
	}//for
}//function

function abrir_original(ima){
	window.open(ima.href);
}

window.onload = escalarImg;

La hice para aportar una idea en el tema Nuevo Diseño Foros del Web.

¿Sería un buen uso de javascript no-intrusivo?

Y me surge otra duda... ¿cómo pongo varios window.onload = bla ? Porque me toma siempre el último!

Panino5001 · #3 (**permalink**) 18/07/2007, 16:43

Te respondo lo del window.onload. Para llamar a varias funciones, lo que podés hacer es colocarlas dentro de una función anónima:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function asustar(){ 
alert('booo!') 
} 
window.onload=function(){ 
alert('hola'); 
document.getElementsByTagName('body').item(0).appendChild(document.createTextNode('hola!')); 
document.getElementsByTagName('body').item(0).appendChild(document.createElement('br')); 
document.getElementsByTagName('body').item(0).appendChild(document.createTextNode('chau!')); 
asustar(); 
} 
</script> 
</head> 
 
<body> 
</body> 
</html>

AlZuwaga · #4 (**permalink**) 18/07/2007, 17:12

Gracias Panino. Mañana hago pruebas :)