PowerPoint 4 - Javascript, JQuery y AJAX
-
Upload
luis-jesus-perez-pereda -
Category
Documents
-
view
34 -
download
3
description
Transcript of PowerPoint 4 - Javascript, JQuery y AJAX
1
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
División de Alta Tecnología
.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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
2
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
Objetivo
1. Reconocer y aplicar conceptos de Javascript
y framework jQuery
Usando Javascript
1. Tipos de Variables
2. Operadores
3. Instrucciones de control
4. Document Object Model
5. Eventos
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
3
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
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
División de Alta Tecnología
.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
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
División de Alta Tecnología
.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
4.4 Instrucciones de control
– Sentencias de Bucle:
TIPO DESCRIPCIÓN EJEMPLO
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
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
6
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
4.5 Instrucciones de control
– Sentencias de manipulación de objetos:
TIPO DESCRIPCIÓN EJEMPLO
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
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
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
División de Alta Tecnología
.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
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
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
4.8 Usando jQuery
1. Introducción a jQuery
2. Selectores jQuery
3. Eventos
4. jQuery y Ajax
5. Web Widgets
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
9
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
10
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
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
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
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
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
4.13 AJAX con jQuery
– Permite realizar peticiones hacia el servidor sin necesidad de recargar la
página.
13
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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
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
Capítulo 4: Javascript, jQuery y AJAX
.NET 4.5 Web Application Developer
4.14 Uso de Plugins de jQuery
– Representan componentes creados como extensibilidad de jQuery para
brindar nuevas funcionalidades:
http://plugins.jquery.com/
14
División de Alta Tecnología
.NET 4.5 Web Application Developer Visual Studio 2012
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