Archive for the ‘Javascript’ Category

Windows 8: integrando JQuery

Una de las cosas que me ha llamado la atención al seguir los tutoriales de Microsoft sobre la programación para Windows 8 utilizando HTML5 y JS es que en los tutoriales se usa la sintaxis que para los usuarios de JQuery o similares puede parecer de la prehistoria.

Me estoy refiriendo al  document.getElementById(“mielemento”)

Este es el código del primer tutorial:

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

Puede ser un paso atrás en la programación para los que estamos acostumbrados a otras cosas.

Por suerte para los que trabajamos con librerías tipo JQuery se pueden integrar muy bien en un proyecto de Windows 8.

Para ello tenemos que seguir unos sencillos pasos:

1- Obtener nuestra librería ”preferida”, en mi caso JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

Importante: cuando estamos programando y probando nuestra AppMetro en local, el compilador no permite acceder a Internet para usar recurso

La solución pasa por descargar la libreria e incluirla en el proyecto.

2- Incluirla en el proyecto

Importante: incluirla antes de las librerías de nuestras páginas

3- Utilizarla como siempre

Codigo original del tutorial:

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

Código utilizando jQuery:

    $(document).ready(function () {

        $("#helloButton").click(function () {
            var userName = $("#nameInput").val();
            var greetingString = "Hello, " + userName + "!";
            $("#greetingOutput").html(greetingString);
        });

    });

 

Con esta integración no debería de ser problemático incluso migrar ciertas webs a un entorno Windows 8. Esto lo probaremos en otro momento.

 

 

Share

Javascript : Función getElementsByClass

Cuando quieres interaccionar con el DOM Javascript ofrece posibilidades como “getElementById” o “getElementsByTagName“, pero si lo que necesitamos es trabajar con una lista de elementos cuyo único punto de conexión es la clase CSS, pues nos toca trastear a mano para conseguir acceder a ellos…

Buscando por Internet he dado con una función que nos facilitara la tarea.

Se trata de una función preparada de antemano para retornar exactamente lo que necesitamos.

function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}

Y aqui dejo un trozo de código HTML usando ficha función para que entendáis mejor el ejemplo :

 <html><head><title>getElementsByClass test page</title>

<script type="text/javascript">

// paste getElementsByClass function (see above) here 

function showtab(tabname)
{
	// hide every element with class 'tab'
	var tabs = getElementsByClass('tab');
	for(i=0; i<tabs.length; i++)
		tabs[i].style.display = 'none';
	// hide every element with class 'tab'		 

	document.getElementById(tabname).style.display='block';
	// show element with given tabname
}
</script>

<style type="text/css">
/* We use several classes here to test getElementsByClass */
div.tab {  width: 100px; height: 100px; border: 1px solid black; }
div.bgray { background-color: gray;}
</style>

</head>
<body>

<a href="#" onclick="showtab('tab1');">tab1</a>,
<a href="#" onclick="showtab('tab2');">tab2</a>,
<a href="#" onclick="showtab('tab3');">tab3</a>,
<a href="#" onclick="showtab('tab4');">tab4</a>,
<a href="#" onclick="showtab('tab5');">tab5</a>

<div class="tab bgray" id="tab1">
Tab1
</div>

<div class="tab bgray" id="tab2" style="display: none;">
Tab2
</div>

<div class="tab bgray" id="tab3" style="display: none;">
Tab3
</div>

<div class="tab bgray" id="tab4" style="display: none;">
Tab4
</div>

<div class="tab bgray" id="tab5" style="display: none;">
Tab5
</div>

</body></html>

Recordar que se trata de una función, no de un método de Clase, así que la utilización correcta seria esta :

getElementsByClass('algo')

y no esta :

document.getElementsByClass('algo')

Os dejo un link de la pagina donde encontré este código que puede sernos bastante útil en bastantes ocasiones.

Por cierto según explican en la propia pagina la función funciona (nunca mejor dicho) en :

  • Internet Explorer 6.x, 7.x
  • Opera 8.x, 9.x
  • Mozilla Firefox
  • Apple Safari
  • y otros navegadores “modernos” (esta info tan precisa nunca inspira mucha confianza) ;)
Share

Javascript : Orientado a objetos

A pesar de lo que podamos pensar por el nombre, poco se parece Javascript y Java en lo que a POO se refiere…

Intentare dejar por aquí unos Snippets que puedan ser útiles para iniciarse en OOP con Javascript.

Crear un objeto :

miobjeto = new Object();

o

miobjeto = {};

Declarar un array :

miarray = new Array();

o

miarray = [];

Agregar miembros al objeto creado anteriormente :

miobjeto.variable = “hola”;

miobjeto.metodo = new Function();

En JavaScript no es posible declarar Clases, pero si es posible instanciar objetos a partir de un constructor.

Usaremos el  objeto Function  como objeto instanciable en JavaScript, y el cuerpo de la función sera el constructor del objeto. Podremos llamar al constructor con el operador new.

Ejemplo :

/*clase de ejemplo*/

miClase = new Function();

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

Para emular las clases en JavaScript usaremos la palabra clave this dentro de los constructores.

/*clase de ejemplo*/

miClase = function(){

/*

agregamos miembros dinamicamente

al objeto que será retornado

*/

this.propiedad = “hola!”;

this.metodo = function(){

/* aqui ‘this’ hace referencia al objeto al que pertenece el metodo */

alert(this.propiedad);

}

}

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

Este link del cual me he inspirado toca en mas profundidad el tema, y puede seros de gran ayuda. Dejaremos para otro post la propiedad prototype

Share

Javascript : Class.js Script para facilitar el uso de Clases en javascript

Si vienes de otros lenguajes mas estándar en el uso de la POO, Javascript puede parecerte un tanto tosco en su manera de interpretarla.

Hemos encontrado un script que pesa menos de un kilobyte (se trata de Class.js) y que te facilitara la vida.

Así quedaría crearíamos una clase con Javascript :

One = {
	
	message:'',
	
	set:function(val){
	
		this.message = val;
	
	},
	
	get:function(){
	
		alert(this.message);
	
	}

};

Así la usaríamos :

var e = new Class(One);
e.set('Hello, World!');
e.get();

Para el tema constructores, si los necesitamos los definiremos como “construct()“, y serán llamados al instanciar la clase. Ese constructor podrá tener argumentos

One = {
	
	message:'',
	
	construct:function(val){
	
		this.set(val);
	
	},
	
	set:function(val){
	
		this.message = val;
	
	},
	
	get:function(){
	
		alert(this.message);
	
	}

};

Y lo usaríamos así :

var e = new Class(One,['Awesome!']);
e.get();

El script nos otorga también la posibilidad de “extender” clases, y lo definiríamos de esta manera :

One = {

	message:'',
	
	set:function(val){
	
		this.message = val;
	
	},
	
	get:function(){
	
		alert(this.message);
	
	}

};

Two = Extend(One,{

	construct:function(val){
	
		this.set(val);
	
	}

});

Y lo utilizaremos así :

var e = new Class(Two,['Quixotic!']);
e.get();

Aunque se nos notifica que no podemos sobrecargar métodos en las clases extendidas.

El script también permite extender instancias de clases, y el uso de plugins…pero para eso ya os dejo investigar un poco.

Os dejo de nuevo la URL que a bote pronto me parece muy interesante : URL Class.js

Share

Javascript : Hola Mundo!

Mas “Hello World” (por algún sitio siempre hay que empezar) :

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
document.write("Hola Mundo");
</SCRIPT>
Share