powerpoint 4 - javascript, jquery y ajax

1

División de Alta Tecnología

.NET 4.5 Web Application Developer Visual Studio 2012


.NET 4.5 Web Application

Developer

Visual Studio 2012

Temas

1. Tipos de Variables

2. Operadores

3. Instrucciones de control - Sentencias Condicionales

4. Instrucciones de control - Sentencias de Bucle

5. Intrucciones de control - Manipulación de objetos

6. DOM – Document Object Model

7. Eventos

Capítulo 4: Javascript, jQuery y AJAX

.NET 4.5 Web Application Developer

Temas

8. Introducción a jQuery

9. Introducción a jQuery – jQuery Cheat Sheet

10. Selectores jQuery

11. Eventos - Mouse

12. Eventos - Teclado

13. Ajax con jQuery

14. Uso de Plugins de jQuery



2



Objetivo

1. Reconocer y aplicar conceptos de Javascript

y framework jQuery

Usando Javascript


2. Operadores

3. Instrucciones de control

4. Document Object Model

5. Eventos

Temas


2. Operadores





7. Eventos



3



4.1 Tipos de variables

TIPO DESCRIPCIÓN EJEMPLOS

Numéricas Se utilizan para almacenar valores numéricos enteros o decimales

var iva = 20; var total = 214.35;

Cadenas de Texto Se utilizan para almacenar caracteres, palabras y/o frases de

texto

var mensaje = "Bienvenido a DAT"; var nombre = 'Juan Chavez';

Arrays Se utilizan cuando se desea almacenar una colección de

variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",

"Sábado", "Domingo"];

Booleanos Se utilizan para almacenar un tipo especial de valor que solamente

puede tomar dos valores: true (verdadero) o false (falso)

var procesoTerminado=false; var igvIncluido=true;

Temas


2. Operadores





7. Eventos



Operadores

OPERADOR DESCRIPCIÓN

Igual (==) Devuelve true si las variables son iguales

Distinto (!=) Devuelve true si las variables no son iguales

Igual estricto (===) Devuelve true si las variables son iguales y del mismo tipo

Distinto estricto (!==) Devuelve true si las variables no son iguales y/o no son del mismo tipo

Mayor que (>) Devuelve true si la variable izquierdo es mayor que el derecho

Mayor o igual que (>=) Devuelve true si la variable izquierda es mayor o igual que el derecha

Menor que (<) Devuelve true si la variable izquierda es menor que el derecha

Menor o igual que (<=) Devuelve true si la variable izquierdas es menor o igual que el derecha

4



Temas


2. Operadores





7. Eventos



4.3 Instrucciones de control

– Sentencias Condicionales:

TIPO DESCRIPCIÓN EJEMPLO

if...else Utilice la sentencia if para ejecutar una sentencia sí la condición lógica es

verdadera. Utilice la cláusula opcional else para ejecutar una sentencia sí la condición es falsa

if(edad >= 18) { alert("Mayor de edad");

} else { alert("Menor de edad"); }

switch Permite evaluar una expresión e intenta compararla con el valor de la

etiqueta de una expresión por casos. Si la coincidencia es encontrada, ejecuta la sentencia asociada

switch (var1) { case 1:

var2=10;break; case 2: var2=20;break; default: var=0;break;

}

5



Temas


2. Operadores





7. Eventos




– Sentencias de Bucle:


for Un bucle se repite hasta que una

condición específica se evalúe como falsa

for(var i = 0; i < 5; i++) {

alert("DAT"); }

do…while Repite sentencias hasta que una especificación

condicionada se evalúe

como falsa

do { i += 1;

document.write(i);

} while (i < 10);

while Ejecuta sus sentencias mientras una condición

especificada sea evaluada como verdadera

var n=0; while (n < 3) {

alert("DAT"); n++; }

Temas


2. Operadores





7. Eventos



6




– Sentencias de manipulación de objetos:


for…in Itera una variable especificada sobre

todas las propiedades de un objeto. Por cada propiedad distinta, JavaScript ejecuta las sentencias

especificadas

for(var i = 0; i < 5; i++) {

alert("DAT"); }

Temas


2. Operadores





7. Eventos



4.6 DOM - Document Object Model

– Permite acceder y

modificar el contenido,

estructura y estilo de los

documentos HTML y XML.

– Define la manera en que

los objetos y elementos se

relacionan entre sí, en el

navegador y en el

documento.

http://www.w3.org/TR/DOM-Level-3-Events/

7



Temas


2. Operadores





7. Eventos



4.7 Eventos

– Permiten ejecutar sentencias según la acción realizada sobre un objeto

HTML:

EVENTO DESCRIPCIÓN DEFINIDO

onblur Deseleccionar el elemento <button>, <input>, <label>, <select>,

<textarea>, <body>

onchange Deseleccionar un elemento que se ha

modificado

<input>, <select>, <textarea>

onclick Al hacer clic Todos los elementos

ondblclick Hacer clic dos veces seguidas Todos los elementos

onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,

<textarea>, <body>

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>

onkeypress Pulsar una tecla Elementos de formulario y <body>

onkeyup Soltar una tecla pulsada Elementos de formulario y <body>

onload La página se ha cargado completamente <body>

Laboratorio Nº 1

Implementar funciones con Javascript

Implementar funciones con Javascript para realizar

algunas validaciones sobre los formularios de

mantenimientos

8



Temas




11. Eventos - Mouse


13. Ajax con jQuery




4.8 Usando jQuery



3. Eventos

4. jQuery y Ajax

5. Web Widgets

Temas




11. Eventos - Mouse


13. Ajax con jQuery




9



4.9 Introducción a jQuery

– jQuery es una biblioteca de JavaScript, creada inicialmente por John

Resig, que permite simplificar la manera de interactuar con los

documentos HTML, manipular el árbol DOM, manejar eventos,

desarrollar animaciones y agregar interacción con AJAX a las

aplicaciones web.

Introducción a jQuery

– jQuery Cheat Sheet:

http://jqapi.ru/

http://evolutionofweb.appspot.com/

Temas




11. Eventos - Mouse


13. Ajax con jQuery




10



4.10 Selectores jQuery

– Permiten acceder de una manera rápida y sencilla a un elemento o

grupo de elementos del DOM y luego poder aplicar sobre los mismos

cualquier tipo de instrucción, evento, animación, etc.

Temas




11. Eventos - Mouse


13. Ajax con jQuery




4.11 Eventos

– Eventos relacionados con el Mouse:

EVENTO DESCRIPCIÓN

click() Sirve para generar un evento cuando se produce un clic en un elemento de la página

dblclick() Para generar un evento cuando se produce un doble clic sobre un elemento

hover() Esta función en realidad sirve para manejar dos eventos, cuando el mouse entra y sale de encima de un elemento

mousedown() Para generar un evento cuando el usuario hace clic, en el momento que presiona el botón e independientemente de si lo suelta o no

mouseup() Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del mouse

mouseenter() Este evento se produce al situar el mouse encima de un elemento de la página

mouseleave() Este se desata cuando el mouse sale de encima de un elemento de la página

11



Eventos

– Eventos relacionados con el Mouse:

EVENTO DESCRIPCIÓN

mousemove() Evento que se produce al mover el mouse sobre un elemento de la página

mouseout() Se lanza cuando el usuario sale con el mouse de la superficie de un elemento

mouseover() Se produce cuando el mouse está sobre un elemento

toggle() Sirve para indicar dos o más funciones para ejecutar acciones al hacer clic

Temas




11. Eventos - Mouse


13. Ajax con jQuery




4.12 Eventos

– Eventos relacionados con el teclado:

EVENTO DESCRIPCIÓN

keydown() Este evento se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene. Se produce una única

vez en el momento exacto de la presión

keypress() Este evento ocurre cuando se digita un caracter, o se presiona otro tipo de tecla. Es como el evento keypress de Javascript, por lo que se entiende que keypress() se

ejecuta una vez, como respuesta a una pulsación e inmediata liberación de la tecla, o varias veces si se pulsa una tecla y se mantiene pulsada

keyup() El evento keyup se ejecuta en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que se tenía pulsada

12



Laboratorio Nº 2

Modificar el comportamiento de elementos y

objetos a través de jQuery

Implementar funcionalidades de interacción y

comportamiento de formularios con jQuery

Temas




11. Eventos - Mouse


13. Ajax con jQuery




4.13 AJAX con jQuery

– Permite realizar peticiones hacia el servidor sin necesidad de recargar la

página.

13



Laboratorio Nº 3

Aplicación de AJAX para recoger información

del servidor

Usar jQuery para implementar llamadas AJAX que

permitan enviar y recibir información desde el

servidor, considerando que dicha información debe

ser serializada con JSON

Temas




11. Eventos - Mouse


13. Ajax con jQuery




4.14 Uso de Plugins de jQuery

– Representan componentes creados como extensibilidad de jQuery para

brindar nuevas funcionalidades:

http://plugins.jquery.com/

14



Web Widgets

– Son plugins que brindan un conjunto de componentes de interfaz de

usuario personalizados con características específicas para una mejor

usabilidad de la aplicación:

http://http://api.jqueryui.com/

http://www.kendoui.com/

http://metroui.org.ua//

Laboratorio Nº 4

Implementación de un formulario utilizando

diversos plugins de jQuery

Diseñar y construir un formulario utilizando diversos

plugins. Como mínimo debería considerar los

siguientes plugins:

– jquery-ui o kendoui

– jquery-validate

– tile

powerpoint 4 - javascript, jquery y ajax

Documents