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 :)