DOM OBJECTPropiedades- accessKey- childNodes- firstChild- lastChild- nextSibling- previousSibling- parentNode- ownerDocument- id- innerHTML- tabIndex- className- tagName- textContent Establece/devuelve el texto del nodo y de sus descendientes- title- attributes- style Mtodos- appendChild(node)- insertBefore(node, nodoRef)- removeChild(node)- replaceChild(old, new)- getElementsByTagName(tag)- isEqualNode(node)- cloneNode()- getAttribute(nombre)- setAttribute(nombre, valor)- hasAttribute(nombre)- hasAttributes() True/false si tiene o no atributos- removeAttribute(nombre)

WINDOWPropiedades- closed Devuelve true/false si se ha cerrado- document- history- location- navigator- screen- frames Array de frames- length N de frames- name Ajusta o devuelve el nombre- status Ajusta o devuelve el msg de la barra de estado- defaultStatus Ajusta o devuelve valor por defecto- opener- parent- self- top- pageXOffset Scroll en pixels- pageYOffset- screenLeft- screenTop- screenX- screenY

Mtodos- alert(cadena)- confirm(cadena)- prompt(mensaje, valor)- blur()- focus()- setInterval(funcion, miliseconds) Devuelve el identificador- clearInteval(identificador)- setTimeout(funcion, miliseconds) Devuelve el identificador - clearTimeout(identificador)- open(url, nombre, propiedades) Devuelve la referencia- close()- stop() Detiene la carga- atob(cadena) Descodifica una cadena en base-64- btoa(cadena) Codifica una cadena a base-64- moveTo(x, y)- moveBy(x, y)- scrollTo(x, y)- scrollBy(x, y)- resizeTo(x, y)- resizeBy(x, y)

PROPIEDADES DE LA VENTANA

Separadas por comas

- toolbar = [yes|no|1|0]- location = [yes|no|1|0] - directories = [yes|no|1|0]- status = [yes|no|1|0]- menubar = [yes|no|1|0]- scrollbars = [yes|no|1|0]- resizable = [yes|no|1|0]- width = px- height = px- outerWidth = px- outerHeight = px- left = px- top = px

DOCUMENTColecciones- anchor[]- forms[]- images[]- links[]- applets[]

Propiedades- cookie- domain- referrer- title- URL- baseURI- doctype- inputEncoding- lastModified- body- documentElement- documentMode- documentURI- readyState Mtodos- open()- close()- write()- writeln()- clear()- getElementById(cadena)- getElementByName(cadena)- getElementsByTagName(cadena)- createAttribute(cadena)- createElement(cadena)- createTextNode(cadena)

SCREENPropiedades- width- height- availWidth- availHeight- colorDepth- pixelDepth

LOCATIONPropiedades- hash- host- hostname- href- pathname- port- protocol- search Mtodos- assign(url)- reload()- replace(url)

HISTORYPropiedades- length

Mtodos- go(-index)- back()- forward()

NAVIGATORPropiedades- appCodeName- appName- appVersion- cookieEnabled- languaje- platform- userAgent

Mtodos- javaEnabled()

OBJECTPropiedades- constructor- prototype

Mtodos- toString()- valueOf()

NUMBERPropiedades- MAX_VALUE- MIN_VALUE- NEGATIVE_INFINITY- POSITIVE_INFINITY- NaN Mtodos- toExponential(x)- toFixed(x)- toPrecision(x)

MATHPropiedades- E- LN2- LN10- LOG2E- LOG10E- SQRT1_2- SQRT2 Mtodos- abs(x)- acos(x)- asin(x)- atan(x)- atan2(y,x)- cos(x)- sin(x)- tan(x)- floor(x)- ceil(x)- round(x)- log(x)- pow(x, y)- sqrt(x)- min(x, n)- max(x, n)- random() Entre 0 y 1

DATEnew Date();new Date(milliseconds);new Date(dateString);new Date(year,

month,date = 1,

hours = 0, minutes = 0, seconds = 0, milliseconds = 0); Mtodos- get/setDate(1-31)- get/setDay(0-6)- get/setMonth(0-11)- get/setFullYear(XXXX)- get/setHours(0-23)- get/setMiliseconds(0-999)- get/setMinutes(0-59)- set/getUTC...()- get/setTime(UNIX_TIME_ms)- UTC() Tiempo unix en ms en UTC- getTimeZoneOffset() Devuelve minutos- parse(cadena) Devuelve Tiempo Unix en ms- toString()- toLocaleString()- toTimeString()- toDateString()- toLocaleTimeString()- toLocaleDateString()- toISOString()- toUTCString()- toJSON()- valueOf()

GLOBALPropiedades- Infinity- NaN- undefined

Mtodos- decodeURI(uri)- encodeURI(uri)- isFinite(x)- isNaN(x)- Number(var)- String(var)- parseFloat(cadena)- parseInt(cadena)

ARRAYnew Array()new Array(tamao)new Array(valor1, valor2) // denso[valor1, valor2] // literal{indice1 : valor1, indice2 : valor2} //mixto

Propiedades- length Mtodos- concat(array) Devuelve una copia- slice(ini, fin) Devuelve una copia- indexOf(item, desde)- lastIndexOf(item, desde)- join() Devuelve una cadena sep. por comas - pop() Elimina y devuelve el ltimo elemento- push(item) Aade un elemento al final, devuelve la nueva longitud- shift() Elimina y devuelve el primer elemento- unshift(item) Aade un elemento al principio, devuelve la nueva longitud- splice(indice, eliminar_cuenta, insertar1, , insertarN) Elimina o inserta elementos, devuelve un nuevo array con los elementos eliminados o vacio si no se elimina- sort()- reverse()- toString()- valueOf()

STRINGPropiedades- length

Mtodos- charAt(index)- charCodeAt(index)- concat(cadena) Devuelve una copia- substr(ini, cuenta) Devuelve una copia- substring(ini, fin) Devuelve una copia- trim() Elimina los espacios al inicio y al final- indexOf(item, desde)- lastIndexOf(item, desde)- localeCompare(cadena)- match(regexp) Devuelve las coincidencias- search(cadena) Devuelve el index- replace(antes, despues)- split(cadena) Devuelve un array- toLowerCase()- toUpperCase()

OBJETOSFunction Coche(marca, combustible){ this.marca = marca; this.combustible = combustible; this.cantidad = 0;

this.rellenar = function(litros) { this.cantidad = litros; } this.publica = publica; function publica(arg) { } function privada(arg) { }}

OBJETOS LITERALES

avion = {marca:Boeing, modelo:747};avion = new Object();avion.marca = Boeing;avion.modelo = 747;

FORM

document.getElementById(idControl)document.nameForm.nameControldocument.nameForm.elements[indice]document.nameForm.elements[nameContro]

Colecciones- elements[]

Propiedades- length- acceptCharset- enctype- action- method- target - name

Mtodos- reset()- submit()

INPUT, TEXTAREA, SELECT, OPTION

Propiedades- type- name- form- value no en SELECT- disabled

INPUT TEXT, PASSWORD, HIDDEN

Propiedades- defaultValue- readOnly- maxLength- size

Mtodos- select()

TEXTAREA

Propiedades- defaultValue- readOnly- maxLength- cols- rows

Mtodos- select()

INPUT CHECKBOX, RADIO

20 Kg

Etiqueta1

Etiqueta2

Propiedades- checked- defaultChecked

SELECT

Colecciones- options[]

Propiedades- length- multiple- selectedIndex- size

Mtodos- add(opcion)- add(opcion, indice)- remove(indice)

OPTION

1 2

Propiedades- selected- defaultSelected

EVENTOS EN LINEA

Pulsa aqu

function preguntar(enlace) { return confirm(Desea ir a + enlace.href + ?); }

MODELO DE EVENTOS TRADICIONAL

enlace.onclick = function () { };enlace.onclick = avisar;function avisar() { alert(Va a ir a + this.href);}

MODELO DE EVENTOS AVANZADO: W3C

enlace.addEventListener( click, pregunta, false);

function pregunta(event) { var ir = confirm(Desea ir a + this.href + ?); if (!ir) event.preventDefault();} EventTarget- addEventListener(evento, func, fase)- removeEventListener(evento, func, fase) evento: string con el tipo fase: true para captura false para burbujeo- eventListenerList()

Propiedades evento- bubbles- cancelable- eventPhase CAPTURING_PHASE | AT_TARGET | BUBBLING_PHASE- currentTarget- target- timeStamp- type

Mtodos evento- initEvent()- preventDefault()- stopPropagation() Solo en la fase de burbujeo, en la fase de captura es imposible detener la propagacin

LISTADO DE EVENTOS

Mouse: click, dblclick, mousedown, mousemove, mouseover, mouseout, mouseupKeyboard: keydown, keypress, keyup,Frame/Object: abort, error, load, resize, scroll, unloadForm: blur, focus, change, reset, select, submit

COOKIES

function guardarCookie(nombre, valor){ document.cookie = nombre +'='+ valor;}

function leerCookie(n) { var cookie = document.cookie;

var ini = cookie.indexOf(n + '='); if (ini < 0) return null; ini += n.length + 1;

var fin = cookie.indexOf(';', ini); if (fin < 0) fin = cookie.length; else fin--;

return cookie.substring(ini, fin);}

DOM NODE LEVEL 2Propiedades- nodeName- nodeValue- nodeType- parentNode- childNodes- firstChild- lastChild- nextSibling- previousSibling- ownerDocument- attributes- style- localName- prefix Mtodos- appendChild(node)- insertBefore(node, nodoRef)- removeChild(node)- replaceChild(old, new)- isEqualNode(node)- cloneNode(deep)- getAttribute(nombre)- setAttribute(nombre, valor)- hasAttribute(nombre)- hasAttributes() True/false si tiene o no atributos- removeAttribute(nombre)

EVENTOPropiedades- type- timeStamp- bubbles- cancelable- eventPhase CAPTURING_PHASE | AT_TARGET | BUBBLING_PHASE- target- currentTarget- relatedTarget- altKey, ctrlKey, metaKey, shiftKey- keyCode- charCode- which- button Izquierdo: 0 | Medio: 1 | Derecho: 2- screenX, screenY- clientX, clientY- layerX, layerY- pageX, pageY

Mtodos- initEvent()- preventDefault()- stopPropagation() Solo en la fase de burbujeo, en la fase de captura es imposible detener la propagacin

MODELO DE EVENTOS AVANZADO: W3C

enlace.addEventListener( click, pregunta, false);

function pregunta(event) { var ir = confirm(Desea ir a + this.href + ?); if (!ir) event.preventDefault();} EventTarget- addEventListener(evento, func, fase)- removeEventListener(evento, func, fase) evento: string con el tipo fase: true para captura false para burbujeo- eventListenerList()

LISTADO DE EVENTOS

Mouse: click, dblclick, mousedown, mousemove, mouseover, mouseout, mouseupKeyboard: keydown, keypress, keyup,Frame/Object: abort, error, load, resize, scroll, unloadForm: blur, focus, change, reset, select, submit

FUNCIN CROSS-BROWSER PARA CREAR EVENTOS

var crearEvento = function() { function w3c_crearEvento(elemento, evento, mifuncion) { elemento.addEventListener(evento, mifuncion, false); } function ie_crearEvento(elemento, evento, mifuncion) { var fx = function() { mifuncion.call(elemento); }; elemento.attachEvent('on' + evento, fx); }

if (typeof window.addEventListener !== 'undefined') return w3c_crearEvento; else if (typeof window.attachEvent !== 'undefined') return ie_crearEvento;

}(); // Esta parte es crtica, tiene que terminar en ()

FUNCIN CROSS-BROWSER PARA PARAR LA PROPAGACIN DEL EVENTO

var pararPropagacion = function() {function w3c_pararPropagacion(evento) {

evento.stopPropagation();}

// en caso de < IE8 no se usa el objeto evento, que ser undefined// se usa el objeto window.event con la propiedad cancelBubblefunction ie_pararPropagacion(evento) {

window.event.cancelBubble = true;}

if (typeof window.addEventListener !== 'undefined')return w3c_pararPropagacion;

else if (typeof window.attachEvent !== 'undefined')return ie_pararPropagacion;

}();

FUNCIN CROSS-BROWSER PARA ELIMINAR UNA CLASE DE UN OBJETO

var eliminarClase = function() {function noClassList_eliminarClase(objeto, clase) {

var clases = objeto.className.split(" ");var resultado = new Array();for(var i = 0;i

XMLHttpRequestPropiedades- readyState 0 solicitud no inicializada 1 conexin establecida con el servidor 2 solicitud recibida 3 procesando solicitud 4 solicitud ya terminada y respuesta disponible- responseText- responseXML- status 200 | 400- statusText

Mtodos- abort()- getAllRespnseHeaders()- getResponseHeader()- open(metodo, url, async, usuario, password)- send(datos)- setRequestHeader(etiqueta, valor)

$.AJAX

$.AJAX({ url: [URL], type: [GET/POST], success: [function exito(data)], error: [function callback error], complete: [function callback error], ifModified: [bool comprobar E-Tag], data: [mapa datos GET/POST], async: [bool sincrona/asincronia]});

$.AJAX({ url: '/ruta/pagina.php', type: 'POST', async: true, data: 'param1=valor1&param2=valor2', success: function (respuesta) { alert(respuesta); }, error: mostrarError});

Propiedades- url- type- data GET | POST- dataType XML | HTML | JSON | JSONp | script | text- success Funcin al finalizar con exito- error Funcin en un error- complete Funcin al completar la llamada

.load()

.load( url, [datos], [callback])

// carga en el contenedor con id noticias // lo que devuelve la pgina feeds.HTML$("#noticias").load("feeds.HTML");

// Pasa un array de datos al servidor // con el nombre de dos personas.$("#objectID").load("test.php", { 'personas[]': ["Juan", "Susana"] } );

$.post()

$.post(url, [datos], [callback], [tipo])

$.post("test.php");$.post("test.php", { nombre: "Juana", hora: "11am" } );$.post("test.php", function(resultados) { alert("Datos Cargados: " + resultados);});

$.get()

$.get(url, [datos], [callback], [tipo]) $.getJSON(url, [datos], [callback], [tipo])

FUNCIN CROSS-BROWSER PARA CREAR OBJETO XMLHTTPRequest

function objetoXHR(){ if (window.XMLHTTPRequest) { // El navegador implementa la interfaz XHR de forma nativa return new XMLHTTPRequest(); } else if (window.ActiveXObject) { var versionesIE = new Array('MsXML2.XMLHTTP.5.0', 'MsXML2.XMLHTTP.4.0', 'MsXML2.XMLHTTP.3.0', 'MsXML2.XMLHTTP', 'Microsoft.XMLHTTP'); for (var i = 0; i < versionesIE.length; i++) { try { /* Se intenta crear el objeto en Internet Explorer comenzando en la versin ms moderna del objeto hasta la primera versin. En el momento que se consiga crear el objeto, saldr del bucle devolviendo el nuevo objeto creado. */ return new ActiveXObject(versionesIE[i]); } catch (errorControlado) {} } }

/* Si llegamos aqu es porque el navegador no posee ninguna forma de crear el objeto. Emitimos un mensaje de error usando el objeto Error. Ms informacin sobre gestin de errores en: HTTP://www.javascriptkit.com/javatutors/trycatch2.sHTML */ throw new Error("No se pudo crear el objeto XMLHTTPRequest"); }

// para crear un objeto XHR lo podremos hacer con la siguiente llamada.var objetoAJAX = new objetoXHR();

FUNCIN CROSS-BROWSER PARA MODIFICAR EL CONTENIDO DE UN DIV

function textoDIV(nodo, texto){ var nodo = document.getElementById(idObjeto);

while (nodo.firstChild) {// Eliminamos todos los hijos de ese objeto.nodo.removeChild(nodo.firstChild);

}

// Cuando ya no tenga hijos, agregamos un hijo// con el texto que recibe la funcin.nodo.appendChild(document.createTextNode(texto));

}

FUNCIN CROSS-BROWSER PARA CREAR OBJETO XMLHTTPRequest

function activarIndicadorAjax(){

// Activamos el indicador Ajax antes de realizar la peticin.document.getElementById("indicador").innerHTML =

"";}

FUNCIN CROSS-BROWSER PARA DESACTIVAR EL INDICADOR AJAX

function desactivarIndicadorAjax(){

// Activamos el indicador Ajax antes de realizar la peticin.document.getElementById("indicador").innerHTML="";

}