Cadenas de texto
length: longitud de una cadena de texto
toUpperCase():transforma todos los caracteres de la cadena a sus correspondientes
caracteres en mayúsculas
toLowerCase(): transforma todos los caracteres de la cadena a sus correspondientes
caracteres en minúsculas
indexOf(caracter): calcula la posición en la que se encuentra el carácter indicado
dentro de la cadena de texto
split(separador): convierte una cadena de texto en un array de cadenas de texto
Arrays
length: longitud
Números
NaN(variable) :del inglés, "Not a Number", indica si la variable no es un valor numérico
DOM
getElementsByTagName(etiqueta): devuelve una colección de elementos según su
etiqueta
getElementsByName(nombre): devuelve una colección de elementos según su name
getElementById(id): devuelve un elemento según su id
querySelector(selector): devuelve un elemento según el selector css
querySelectorAll(selector):devuelve una colección de elementos según el selector css
createElement(etiqueta): crea un nodo de tipo Element
createTextNode(contenido): crea un nodo de tipo Text
nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo
nodoPadre.removeChild(nodoHijo): elimina un nodo hijo de otro nodo
elemento.nombreAtributo: para acceder al atributo del elemento
elemento.style.atributo: para acceder a los estilos del elemento
elemento.className: para acceder al atributo class del elemento
elemento.children: la colección con los elementos hijos del elemento
elemento.textContent: el texto del cuerpo del elemento
BOM
window:
moveBy(x, y) desplaza la posición de la ventana x píxel hacia la derecha y y píxel hacia
abajo
moveTo(x, y) desplaza la ventana del navegador hasta que la esquina superior
izquierda se encuentre en la posición (x, y) de la pantalla del usuario.
resizeBy(x, y) redimensiona la ventana del navegador de forma que su nueva anchura
sea igual a (anchura_anterior + x) y su nueva altura sea igual a (altura_anterior + y).
resizeTo(x, y) redimensiona la ventana del navegador hasta que su anchura sea igual a
x y su altura sea igual a y
EVENTOS
elemento.addEventListener( “evento”, función): añade un escuchador para el
“evento” al elemento. Cuando se lance el evento, se ejecutará la función.
elemento.removeEventListener( “evento”, función): elimina el escuchador función
para el “evento” al elemento.
EVENTOS DE RATÓN
Evento Descripción
click Se produce cuando se pulsa el botón izquierdo del ratón. También cuando el foco está
situado en un botón y se pulsa la tecla ENTER.
dblclick Se produce cuando se pulsa 2 veces el botón izquierdo del ratón.
mousedown Se produce cuando se pulsa cualquier botón del ratón.
mouseup Se produce cuando se el botón del ratón que estaba pulsado
mouseover Se produce cuando el puntero del ratón está fuera del elemento, y el usuario mueve el
puntero a un lugar en el interior del elemento.
mouseout Se produce cuando el puntero del ratón está dentro del elemento, y el usuario mueve el
puntero a un lugar fuera del elemento.
mousemove Se produce (de forma continua) cuando el puntero del ratón se desplaza sobre el
elemento.
EVENTOS DE TECLADO
Evento Descripción
keydown Se produce cuando se pulsa cualquier tecla en el teclado. También se produce de forma
continua si se mantiene pulsada la tecla.
keyup Se produce al soltar una tecla pulsada.
keypress Se produce cuando se pulsa una tecla correspondiente a un carácter alfanumérico (no se
tienen en cuenta teclas como SHIFT, ALT, CTRL,..). También se produce de forma continua
si se mantiene pulsada la tecla.
EVENTOS DE ELEMENTOS HTML
Evento Descripción
load Se produce en el objeto window cuando la página se carga por completo. En el elemento
<img> cuando se carga por completo la imagen.
unload Se produce en el objeto window cuando la página desaparece por completo (al cerrar la
ventana del navegador por ejemplo). En el elemento <object> cuando desaparece el
objeto.
abort Se produce en un elemento cuando el usuario cancela la descarga antes de cargar el
elemento por completo
error Se produce en el objeto window cuando se produce un error de JavaScript. En el elemento
<img> cuando la imagen no se ha podido cargar por completo y en el elemento <object>
cuando el elemento no se carga completamente
select Se produce cuando se seleccionan los caracteres de un cuadro de texto (<input> y
<textarea>)
change Se produce cuando un cuadro de texto (<input> y <textarea>) pierde el foco y su contenido
ha cambiado. También cuando se cambia la selección de un elemento <select>
submit Se produce cuando se pulsa un botón de tipo submit
(<input type=”submit”>)
reset Se produce cuando se pulsa un botón de tipo reset
(<input type=”reset”>)
resize Se produce en el objeto window cuando se re-dimensiona la ventana del navegador
scroll Se produce en cualquier elemento que tenga una barra de scroll, cuando el usuario la
utiliza. El elemento <body> contiene la barra de scroll de la página completa.
focus Se produce en cualquier elemento (incluido el objeto window) cuando el elemento obtiene
el foco
blur Se produce en cualquier elemento (incluido el objeto window) cuando el elemento pierde
el foco
Propiedades del objeto EVENT:
Propiedad/método Devuelve Descripción
clientX Número entero Coordenada X de la posición del ratón respecto del área visible de la
ventana
clientY Número entero Coordenada Y de la posición del ratón respecto del área visible de la
ventana
target Element El elemento que origina el evento
currentTarget Element El elemento que es objetivo del evento
this Element En una función manejadora, el elemento que ha capturado el
evento y lanzado la función manejadora.
isChar Boolean Indica si la tecla pulsada corresponde a un carácter
keyCode Número entero El código numérico de la tecla pulsada
key String El carácter correspondiente a la tecla pulsada
preventDefault() Función Se emplea para cancelar la acción predeterminada del evento
stopPropagation() Función Se emplea para detener que el evento se propague en la fase
bubbling
FORMULARIOS
Forma recomendada:
<form id="formulario">
<input type="text" name="nombre/>
</form>
Para acceder al elemento input nombre desde JavaScript:
document.getElementById("formulario").elements["nombre"]
submit: Evento de envío en un formulario, se asocia al formulario, no al input tipo submit.
AJAX
Ejemplo envío AJAX:
var http = new XMLHttpRequest();
var url = "url_del_servidor";
http.open("GET", url, true);
http.onreadystatechange = function () {
if (http.readyState === 4) {
// Se ha recibido la respuesta.
if(http.status === 200) {
// Aquí escribiremos lo que queremos que se ejecute tras recibir la respuesta
var datosDoc = http.responseText;
alert (datosDoc);
} else {
// Ha ocurrido un error
alert("Error: "+http.statusText);
}
}
};
http.send(null);
Respuesta:
http.responseText: devuelve la respuesta del servidor en formato de texto
http.responseXML: devuelve la respuesta del servidor en formato de texto
