apuntes_vallesquino_13_03_09

Resumen de la clase 13-3-09
Resumen de la clase anterior por paquitochus, y lo completan alexbm8 y afharo. Hablamos sobre el google summer code y la candidatura de la UGR Vemos el ejercicio Ejercicio T1.4.1 pakitochus y Tularis.

A continuación vimos un ejemplo JSON: code var pepe={'nombre': 'Pepe','apellido':'McKenzie', coches:{'mio':'Seat',tuyo:'Opel'}} code NOTA:si la clave es varias palabras hace falta ponerlo entre comillas: 'coche de mi casa'

Vemos el ejercicio de autoevaluación T1.6 por tularis.

Acceder al DOM-Inspector: Ctrl+Mayus+i. Elementos: - H1:cabecera - DIV:Contenedores - P:Parrafos CSS:hoja de estilo en cascada. En el ejemplo de cambiar el color de la pagina modificamos el id ce color.style.setbackground.Usamos getElementById. Se discutió sobre como el document.write afecta al árbol ya que estamos creando un nuevo nodo que se añade al árbol del documento. Una vez se halla cargado el documento el write ya no puede crear un nuevo nodo, es decir write trabaja sobre el árbol según se va construyendo.
 * Continuamos con el modelo de objetos DOM**. Para visualizar la estructura de documento que DOM representa instalamos en nuestro navegador de Mozilla el DOM Inspector:

Con respecto a getElementByTagName devuelve un array con todos los elementos que contengan esta etiqueta. Ejemplo para navegar con el modelo de objetos en la página de la asignatura mediante un contenedor que imprimimos en él el enunciado de cada ejercicio de autoevaluación: code function putBloque(value) {

var ejs = document.getElementById('ej.T1.'+value); document.getElementById('resultado1').innerHTML=ejs.textContent; } //Cogemos el texto de ejs y lo metemos en el div: resultado1 que se encuentra en la pagina web document.getElementById('resultado1').innerHTML=ejs.textContent; } code

**T1.8 Usando GreaseMonkey** Es un //plugin// para los navegadores Mozilla que permite instalar en el navegador programillas JS específicos de una página o grupo de páginas.GreaseMonkey reconoce los scripts con la extensión .user.js como propios, los instala, y permite gestionarlos, activarlos, y desactivarlos, desde un icono con un monito en la barra inferior del navegador. Vimos el siguiente script comentado para navegar mediante unas pestañas entre los distrintos bloques del tema: code format="javascript" // ==UserScript== // @name               AAP-Nav // @namespace          http://geneura.org/projects/greasemonkey // @description        Navegación por las secciones de AAP // @include            http://geneura.ugr.es/~jmerelo/asignaturas/* // ==/UserScript==

GM_log('Entrando AAP-Nav');//Escribimos en un registro la consola de error de JavaScript"log" var h2 = document.getElementsByTagName('h2');//Cogemos todos los elemntos con extension H2 var a_nodes = new Array; var anchors = new Array; for ( var secs = 0; secs < h2.length; secs ++ ) { var thisA = h2[secs].getElementsByTagName('a');//Cogemos todos los elementos con etiqueta "a" que se encuentra en H2. a_nodes[secs] = thisA[0];//Cogemos el primer "a" de H2 anchors[secs] = thisA[0].getAttribute('name');//Los anchor tiene un atributo llamado name. GM_log('Anchor ' + secs + " " + anchors[secs]);//Lo imprimimos por la consola de error de JavaScript }

//Añadimos nuevos nodos antes del H2. //1)Creamos el elemnto //2)Creamos el texto //3)Creamos los atributos for ( var secs = 0; secs < h2.length; secs ++ ) { var span = document.createElement('span');//Span es un elemnto que no tiene nada,es un contenedor. Es un nodo del arbol  span.setAttribute('style','background:lightblue');//A span le añadimos un atributo //Hasta ahora es como si fuesemos creado en la pagina web:   if ( secs > 0 ) {    var ahref = document.createElement('a');//Creamos un elemento "a"    ahref.setAttribute('href','#'+anchors[secs-1]);//Le añadimos a "a" un atributo href que contiene el anchor anterior    var txt=document.createTextNode('^');//Le asignamos la flechita hacia arriba (sección anterior)    ahref.appendChild(txt);//Agrega al nodo hijo el txt    span.appendChild(ahref);//Agrega al nodo hijo el href  }  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]);//Inserta el span entre el nodo padre H2 y a } code