JavaScript-jQuery.

pdf

albeerto_ro

Desarrollo de Aplicaciones Web

3º Grado en Ingeniería Informática

Escuela Técnica Superior de Ingeniería

Universidad de Santiago de Compostela

Reservados todos los derechos.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
 DAW - JavaScript (2019)

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Creado por Brendan Eich de la empresa Netscape para añadir interactividad a las páginas web.
NO es Java. Con su aparición aparece el DHTML (Dynamic HTML). El código JS aparece embebido
en el código HTML, y es interpretado (no compilado) por en navegador. Es sensible a mayúsculas
y minúsculas, y todas las líneas finalizan en punto y coma.

Normalmente se incluyen en la cabecera, pero no es obligatorio. Debe ser incluido antes de

usarlo y su contenido debe ir dentro de etiquetas <script> … </script>. También existe la
posibilidad de incluirlo como página externa: <script src=”aprobar.js”></script>.

Existen cinco tipos de datos: string, number, boolean, object, null. Se devuelve el
tipo de variable usando typeof y se pueden convertir entre tipos usando parseFloat(),
parseInt(), toString().

Reservados todos los derechos.

function mi_aprobado() {
//code
}

Las variables pueden ser globales o locales.

Constructores, métodos, instancias, llamadas y acceso a propiedades es igual que en Java. Los
arrays se inicializan con el constructor new (var aprobados = new Array();).

1 EVENTOS
El manejador de eventos es una función especial que forma parte del objeto que genera el
evento y es llamada automáticamente por el navegador cuando la acción ocurre. Se añade el
prefijo on al nombre del evento: Click -> onClick.

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-2354881
 DAW - jQuery (2019)
jQuery es una librería de funciones escrita en JavaScript. Fue creada por John Resig y presentada
en 2006. Es un software libre de código abierto que permite:

o Simplificación de la interacción con documentos HTML.

o Manipulación del árbol DOM.
o Manejo de eventos.
o Desarrollo de animaciones.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
o Interacción mediante AJAX en páginas web.

Para incluir el archivo, se hace como con JavaScript y, DEBE estar en el mismo directorio que el
archivo HTML en el que lo vamos a usar.

Reservados todos los derechos.

Existe el método ready() que informa de cuando el DOM del documento HTML está listo y
entonces ejecuta la función que lleva como argumento, es decir:

$(document).ready( function () {
//lo que sea
} );

1 MANEJO DE CONTENIDO
o Método text(): permite obtener el texto del elemento seleccionado.
o Método text(texto): permite modificar el contenido en el texto del elemento.
o Método html(): permite obtener el contenido del texto y etiquetas html del
elemento.
o Método html(texto + etiquetas): permite modificar el contenido en texto y
etiquetas html del elemento.
o Otros métodos como append(), appendTo(), before(), insertBefore(),
remove(), empty().

Para el manejo de nodos, existen métodos como parent(), child(), prepend(),

prependTo(), clone().

Descarga la app de Wuolah desde tu store favorita

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-2354881
 2 EVENTOS
o click(manejadorEvento()): asocia manejadorEvento al evento click.
o dblclick(manejadorEvento()): asocia manejadorEvento al evento doble click.
o trigger(tipoEvento()): dispara el evento asociado al ser ejecutada.
o unbind(tipoEvento, manejadorEvento()): elimina la asociación existente
entre un evento y un elemento.
o mousedown(manejadorEvento()): asocia manejadorEvento al evento pulsar ratón.
o mouseup(manejadorEvento()): asocia manejadorEvento al evento soltar ratón.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
o mouseover(manejadorEvento()): asocia manejadorEvento a pasar encima de un
elemento.
o focus(manejadorEvento()): asocia manejadorEvento a tener elemento de texto
activo.
o blur(manejadorEvento()): asocia manejadorEvento a que el elemento de texto
activo deje de estarlo.

3 VISIBILIDAD

Reservados todos los derechos.

o show(velocidad, funcionAlternativa()): muestra el contenido seleccionado
en respuesta a un click de ratón.
o hide(velocidad, funcionAlternativa()): oculta el contenido seleccionado en
respuesta a un click de ratón.
o toggle(velocidad, funcionAlternativa()): muestra/oculta el contenido
seleccionado en respuesta a un click de ratón.
o animate({CSS nuevo}, velocidad, funcion()): ejecuta el cambio en el
contenido seleccionado desde el CSS actual al CSS nuevo, a la velocidad indicada.

Descarga la app de Wuolah desde tu store favorita

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-2354881