El Método appendChild; Añadir nodo de texto al DOM; appendChild siempre añade el nuevo nodo como el último nodo hijo; Añadir otros tipos de Nodos; El Método insertBefore añade un nuevo nodo antes del nodo que se indique.
Existen varios métodos para añadir un nuevo nodo al documento:
appendChild(): es el método más simple y muestra el nuevo nodo a continuación del último nodo hijo ya presente
var nuevoTexto = document.createTextNode(“Nuevo Texto hijo”); //Nuevo nodo
var miDiv = document.getElementById(“id1”); // Seleccionamos un Nodo Padre.
miDiv.appendChild(nuevoTexto); //Añadimos el nuevo nodo hijo a miDiv
insertBefore(): añade un nuevo nodo antes del nodo que indiquemos Tiene dos argumentos: El nodo a añadir y el nodo del que colocarse antes
Los cambios en el DOM no aceptan al documento original; Añadir nuevos nodos al DOM; Dos pasos: crear el nodo y añadirlo al árbol DOM; Uso del Método createElement; Uso del Método createTextNode para crear Nodos de texto; Clonar elementos ya existentes con el Método cloneNode
Para añadir nuevos elementos en el DOM hay que realizar dos pasos:
Crear el nodo utilizando el método createElement() ó el método createTextNode(). También podemos clonar un elemento existente usando el método cloneNode() (Si añadimos true también clonará los nodos hijo).
Añadimos el nuevo nodo en la localización deseada
Ejemplo:
<div id=”id1”>”Este es el contenido del DIV con id = id1</div>
<script>
var nuevoDiv = document.createElement(“div”);
var nuevoNodoTexto = document.createTextNode(“Aquí está el Texto”);
var miDiv = document.getElementById(“id1”);
var cloneDiv = MiDiv.cloneNode(true);
</script>
Cuando clonamos un nodo, también va a tener la misma id que el nodo original así que debe cambiarse.
Uso del Método split del Objeto String; document.cookie almacena todas las cookies de una página, separadas por punto y coma; Buscar una cookie por su nombre y que nos devuelva su valor; Métodos indexOf, substring y chartAT del Objeto String; Crear Funciones setCookie y getCookie; Leer valores de Cookies
Vamos a trabajar con las propiedades y métodos del Objeto document; Diagrama de árbol DOM; Cada enlace dentro del DOS se denomina Nodo; existen distintos tipos de Nodos; Nodos element y Nodos de texto; Los 12 tipos de Nodo.
Las cookies tienen asociadas distintos trozos de información; Atributos cookieName y cookieValue; Atributo domain; Atributo path; El atributo secure; El atributo expires; Escritura de una Cookie asignando un valor a document.cookie; Uso de escape; Elaborar una función que escriba nuestras cookies; Aplicación que crea cookies
Protocolo HTTP es stateless, no guarda ninguna información de las transacciones; La solución son las cookies; Nos permiten almacenar y recuperar trozos de información a través del navegador; Las cookies expiran; Precauciones; Uso de Cookies en JavaScript; Las cookies son almacenadas y recuperadas con la propiedad document.cookie; Las cookies son pares nombre = valor; Propiedades stringlike; Todas las cookies de una página en una unica cookie document.cookie; cada cookie separada por punto y coma; Tratar con caracteres especiales; funciones escape y unescape; Ejemplo práctico del uso de la función escape.
Las cookies soluciona limitaciones del protocolo http.
document.cookiePropiedad stringlike (Se comporta como un string). Las propiedades son almacenadas y almacenadas usando la propiedad cookie. Cada cookie es un par de texto que incluye nombre=valor. Las propiedades van separadas por “;”
escape(), unescape(): Codifica/decodifica una cokie para que sea almacenada correctamente. escape convierte cualquier caracter no ASCII del string a su equivalente en formato hexadecimal de dos o cuatro digitos.
Comportamientos por defecto de los gestores de evento; Los gestores de eventos se ejecutan siempre antes que el elemento HTML con el que están vinculados; Usar gestor de eventos para anular acciones HTML; Uso de gestores de eventos con elementos de un formulario para llevar a cabo validaciones
Los gestores de eventos se ejecutan siempre antes que el comportamiento por defecto del elemento HTML con el que están vinculados. Si no queremos que seejecute el comportamiento predeterminado ni el del gestor de eventos javascript tenemos que retornar un valor de fase a la función javascript que trata el evento.
return = false
onSubmit: evento que se dispara cuando se envia un formulario
¿Qué hacen los Eventos? ¿Qué código necesitamos? Nuestro programa debe poder detectar los eventos y disparar una acción; Los eventos más comunes son desencadenados por el usuario; Eventos inline; Separar Código HTML y Código JavaScript. Uso de getElementbyID.
Un evento significa que algo pasa. Nuestro programa debe poder detectarlos. Los eventos más comunes son acciones del usuario (como por ejemplo click con el ratón) aunque otros pueden ser disparados por el propio navegador (por ejemplo onload cuando se termina de cargar una página).
Un gestor de eventos detecta cuando se produce un evento y decide qué acción debe llevarse a cabo como respuesta. Por ejemplo, en código HTML hay algunos gestores de eventos denominados inline:
onmouseover: detecta cuando el cursor está sobre un objeto
onmouseout: detecta cuando el cursor abandona un objeto
Al evento se le asigna la definicion de la función, no la llamada, así que no lleva ()
Es importante tener claro siempre el orden en el que se va a ejecutar el código Javascript.
Se puede envolver el código del gestor de eventos en window.onload = function() {.....} para que no se ejecute hasta que se haya cargado completamente el documento.
Serializar es convertir datos para almacenar y transmitir; Para serializar un objeto JSON, debemos expresarlo como un String; Uso de los Métodos JSON.parse y JSON.stringify; Serializar: Convertir Objeto JavaScript en Objeto JSON con JSON.stringigy; Deserializar: Convertir Objeto JSON en Objeto Javascript con JSON.parse
Serializar es convertir datos para almacenar y transmitir a través de una red. Para serializar un objeto JSON debemos expresarlo como un string. En los navegadores más recientes podemos usar los métodos:
JSON.parse() // Deserializamos un objeto
JSON.stringify() //Serializamos un objeto
Nota:
Si queremos ejecutar un función cuando la página termine de cargarse tenemos que usar el método onload de HTML:
JSON. JavaScript Object Notation. JSON, otro modo de instanciar Objetos JavaScript; Sintaxis global de intercambio de datos; Notación simple y compacta para JavaScript; Un Objeto JSON es un Objeto JavaScript; La Sintaxis JSON; Procesos de serialización/deserialización; Uso de la función eval( ) con código JSON; El Objeto JSON en los navegadores modernos; métodos stringify y parse del Objeto JSON
JSON nos permite otro modo de crear instancias de objetos y que además puede actuar como una sintaxis global de intercambio de datos.
Los objetos, una vez creados por JSON, pueden ser fácilmente convertidos a strings para poder ser almacenados y transmitidos entre aplicaciones o redes.
JSON es código JavaScript (más información: json.org).
Sintaxis de JSON:
Sus datos son siempre expresados como una secuencia de pares “parámetro:valor”. Estos pares se separan entre ellos por “,”. Toda el contenido del objeto JSON debe estar rodeado por llaves “{......}”
Ejemplo:
var usuario = ‘{“nombreusuario”:”Rosa Blanca”,”país”:”España”,”altura”: 1.75}’;
Los objetos creados porJSON son objetos Javascript y pueden tener propiedades y métodos.
Para trasmitir un objeto JSON hay que serializarlo y el destino tiene que deserializarlo. Para ello javascript cuenta con la funcion eval() que ejecuta o evalua el código javascript que se le pasa como argumento. Ejemplo:
var x = eval(4 * 3); // x = 12
eval(“a=1;b=2;document.write(a+b);“); // escribe tren en la página
La función eval() puede ser usada para convertir un objeto JSON en un objeto javascript. Esta función no es necesaria en los navegadores recientes.
var usuario = ‘{“nombreUsuario”:”Rosa Blanca”,”país”:”España”,”altura”: 1.75}’;
var miObjeto = eval('(' + usuario + ')'); //lo convierte en un objeto javascript
document.write("Nombre de usuario: " + miObjeto.nombreUsuario);
Todos los navegadores modernos cuentan con soporte nativo para JSON lo que hace innecesario el uso de la función eval(). Es el objeto Javascript JSON es el encargado de serializar/deserializar String JSON. Para eso, el objeto JSON cuenta con los métodos stringify() y parse()
var usuario = ‘{“nombreUsuario”:”Rosa Blanca”,”país”:”España”,”altura”: 1.75}’;
var miObjeto = JSON.parse(usuario)
document.write("Nombre de usuario: " + miObjeto.nombreUsuario);
