apuntes_alexbm8_13_03_09

=Apuntes de la clase del 13 de Marzo=

El resumen de la clase anterior lo hizo paquitoChus, haciendo algunos aportes alexbm8 y afharo.  Se habló algo del google summer of code, del que existen sobre 10 proyectos propuestos por la UGR (por ejemplo Espice), claro que para que éstos se desarrollen tienen que aceptar la candidatura. Si se termina el proyecto, se pagan $4500, divididos en tres plazos: al principio se pagan $500, a la mitad $2000 y al final otros $2000. En el año pasado hubo muy pocas candidaturas en España (como la de la universidad [|PompeuFabra] ). En cada proyecto se pueden admitir personal externo a la candidatura.  [|Paco] presentó su resolución al ejercicio T1.4. Carlos también realizó [|esta tarea] presentando el resultado en una tabla y nos dio su solución al [|apartado T1.5] (comentamos que la clase Math, se encuentra tanto en Java como en Javascript).

A continuación vimos el siguiente ejemplo de JSON:

code format="javascript" var pepe = {'nombre':'Pepe','apellido':'Barea'}

for (i in pepe){ print( i + "" + pepe[i] + "\n")} code

Si queremos poner "coches en casa", necesitamos comillas (""), si es una única palabra ("coches"), no harían falta las comillas. [|Tularis] subió un ejemplo de esto al blog.

Continuamos viendo el modelo de objetos: el navegador es el entorno nativo de javascript. El modelo de objetos es una forma de expresar unívocamente la estructura de un documento (es decir, su forma no su apariencia). DOM es un estándar, por eso la ventana se llama en todos los navegadores ".document". Esto facilita que se programe con el entorno del navegador como si fuese un entorno de ventanas. Para poder ver la estructura del documento instalamos el plugin "DOM inspector" (ctrl + mayús + i), también podemos instalar firebug, que es más completo porque permite realizar más modificaciones.

Lo aplicamos a la web de la asignatura y vimos que en el nivel superior está la etiqueta HTML. Luego tenemos la cabecera y el cuerpo (body). En el cuerpo tenmos los div (contenedores que se les puede cambiar la apariencia). Todos los elementos de html tienen un id y una clase que identifica grupos de entidades que son de la misma forma y que se emplean para dar apariencia diferenciada.

Si estando abierto DOM Inspector, pinchamos en una etiqueta con nombre, nos mueve a dicha sección en la web html.

Con //document.write// estamos creando un nuevo nodo que se añade al árbol del documento. Desde Javascript podemos alterar los atributos del documento. Una vez que el documento está cargado no se pueden ver los nodos nuevos del árbol que se creen. Write trabaja sobre el árbol según se va construyendo. Una vez creado el árbol completo no se puede usar //write//.

La instrucción //getElementByTagName// devuelve un array con todos los elementos que contengan esta etiqueta, por ejemplo, si pones 'p' devolvería todos los párrafos. Vimos el ejemplo anterior al ejercicio T1.7.

Por último vimos //Greasemonkey// para añadir funcionalidad a páginas webs usando javascript (páginas sobre las que en principio no tenemos ningún control). Añade además funciones extra. Cuando carguemos algún fichero con la extensión //.user.js//, greasemonkey lo reconocerá como suyo.

A continuación, comentamos algunos aspectos importantes del ejemplo de la sección T1.8: <span style="font-family: Arial,sans-serif;">__Namespace__: es un URI (identificador de recurso universal), describe de forma única una entidad. Así distinguimos diferentes programas de diferentes usuarios, ya que tendrán URIs diferentes. Que tengan estructura de URL no quiere decir que haya algo detrás de dicha dirección si la tomamos como URL (de hecho no es aconsejable que lo haya).

<span style="font-family: Arial,sans-serif;">El programa visto de ejemplo añade una flecha de navegación en las secciones de AAP. Lo instalamos y lo probamos (puede que haya que cerrar y abrir otra vez la página).

<span style="font-family: Arial,sans-serif;">En el programa se obtienen todas las cabeceras h2 y después cogemos todos los elementos que contengan la etiqueta <a> dentro de h2. En a_nodes almacenamos todas las "a" que están dentro de h2 y en "anchors" almacenamos todos los atributos. (Podemos ver los mensajes en herramientas => consola de errores.) Lo que se hace a continuación en crear nuevos nodos y añadirlos antes del h2. Pero como ya está cargada la página, hay que ir creando los elementos poco a poco.

<span style="font-family: Courier New,monospace;"> code format="javascript" if ( secs < h2.length -1 ) {

span.appendChild(document.createTextNode(' | '));

var ahref = document.createElement('a');

ahref.setAttribute('href','#'+anchors[secs+1]);

var txt=document.createTextNode('v');

ahref.appendChild(txt);

span.appendChild(ahref);

}

a_nodes[secs].parentNode.insertBefore(span,a_nodes[secs]); code <span style="font-family: Courier New,monospace;"> <span style="font-family: Arial,sans-serif;">Lo que se crea es, en este orden:


 * <span style="font-family: Arial,sans-serif;">
 * <span style="font-family: Arial,sans-serif;"> Añadir atributo a dicho span
 * <span style="font-family: Arial,sans-serif;"> Creamos <a> con href al anchors de la sección anterior
 * <span style="font-family: Arial,sans-serif;"> Definimos el objeto texto "^" ó "v"
 * <span style="font-family: Arial,sans-serif;"> Creamos el nodo de texto donde poder pinchar para ir al enlace mediante "appendChild"
 * <span style="font-family: Arial,sans-serif;"> Finalmente, le decimos al nodo padre (h2) que inserte el span antes del "a" (también se podría haber insertado después)