Chapter 1: JavaScript Primer · color: JavaScript JavaScript JavaScript src a }
Javascript
description
Transcript of Javascript
-
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¶m2=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="";
}