PowerPoint 4 - Javascript, JQuery y AJAX

Divisin de Alta Tecnologa
.NET 4.5 Web Application Developer Visual Studio 2012
.NET 4.5 Web Application

Developer
Visual Studio 2012
.NET 4.5 Web Application Developer

Captulo 4: Javascript, jQuery y AJAX
Temas
1.
Tipos de Variables
2.
Operadores
3.
Instrucciones de control - Sentencias Condicionales
4.
Instrucciones de control - Sentencias de Bucle
5.
Intrucciones de control - Manipulacin de objetos
6.
DOM Document Object Model
7.
Eventos

Temas
8.
Introduccin a jQuery
9.
Introduccin a jQuery jQuery Cheat Sheet
10. Selectores jQuery

11. Eventos - Mouse
12. Eventos - Teclado
13. Ajax con jQuery
14. Uso de Plugins de jQuery

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.
4.
5.
6.
7.
Eventos

4.1 Tipos de variables

TIPO
DESCRIPCIN
EJEMPLOS
Numricas
Se utilizan para almacenar valores

numricos 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 coleccin de
variables, que pueden ser todas del
mismo tipo o cada una de un tipo
diferente
var dias = ["Lunes", "Martes",

"Mircoles", "Jueves", "Viernes",
"Sbado", "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.
4.
5.
6.
7.
Eventos
Operadores
OPERADOR
DESCRIPCIN
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


Temas
1.
Tipos de Variables
2.
Operadores
3.
4.
5.
6.
7.
Eventos
4.3 Instrucciones de control

Sentencias Condicionales:
TIPO
DESCRIPCIN
EJEMPLO
if...else
Utilice la sentencia if para ejecutar

una sentencia s la condicin lgica es
verdadera. Utilice la clusula opcional
else para ejecutar una sentencia s la
condicin es falsa
if(edad >= 18) {

alert("Mayor de edad");
}
else {
alert("Menor de edad");
}
switch
Permite evaluar una expresin e

intenta compararla con el valor de la
etiqueta de una expresin 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;
}


Temas
1.
Tipos de Variables
2.
Operadores
3.
4.
5.
6.
7.
Eventos

Sentencias de Bucle:
TIPO
DESCRIPCIN
EJEMPLO
for
Un bucle se repite
hasta que una
condicin especfica se
evale como falsa
for(var i = 0; i < 5;
i++) {
alert("DAT");
}
dowhile
Repite sentencias hasta

que una especificacin
condicionada se evale
como falsa
do {
i += 1;
document.write(i);
} while (i < 10);
while
Ejecuta sus sentencias

mientras una condicin
especificada sea
evaluada como
verdadera
var n=0;
while (n < 3) {
alert("DAT");
n++;
}

Temas
1.
Tipos de Variables
2.
Operadores
3.
4.
5.
6.
7.
Eventos


Sentencias de manipulacin de objetos:
TIPO
forin
DESCRIPCIN
Itera una variable
especificada sobre
todas las propiedades
de un objeto. Por cada
propiedad distinta,
JavaScript ejecuta las
sentencias
especificadas
EJEMPLO
for(var i = 0; i < 5;
i++) {
alert("DAT");
}

Temas
1.
Tipos de Variables
2.
Operadores
3.
4.
5.
6.
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/


Temas
1.
Tipos de Variables
2.
Operadores
3.
4.
5.
6.
7.
Eventos
4.7 Eventos
Permiten ejecutar sentencias segn la accin realizada sobre un objeto
HTML:
EVENTO
DESCRIPCIN
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
onkeyup
Soltar una tecla pulsada
onload
La pgina 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


Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery
4.8 Usando jQuery
1. Introduccin a jQuery
3. Eventos
4. jQuery y Ajax
5. Web Widgets

Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery

4.9 Introduccin 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 interaccin con AJAX a las
aplicaciones web.
jQuery Cheat Sheet:
http://jqapi.ru/
http://evolutionofweb.appspot.com/

Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery

4.10 Selectores jQuery

Permiten acceder de una manera rpida y sencilla a un elemento o
grupo de elementos del DOM y luego poder aplicar sobre los mismos
cualquier tipo de instruccin, evento, animacin, etc.

Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery
4.11 Eventos
Eventos relacionados con el Mouse:
EVENTO
DESCRIPCIN
click()
Sirve para generar un evento cuando se produce un clic en un elemento de la

pgina
dblclick()
Para generar un evento cuando se produce un doble clic sobre un elemento
hover()
Esta funcin 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
botn e independientemente de si lo suelta o no
mouseup()
Para generar un evento cuando el usuario ha hecho clic y luego suelta un botn del
mouse
mouseenter()
Este evento se produce al situar el mouse encima de un elemento de la pgina
mouseleave()
Este se desata cuando el mouse sale de encima de un elemento de la pgina
10

Eventos
Eventos relacionados con el Mouse:
EVENTO
DESCRIPCIN
mousemove()
Evento que se produce al mover el mouse sobre un elemento de la pgina
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 ms funciones para ejecutar acciones al hacer clic

Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery
4.12 Eventos
Eventos relacionados con el teclado:
EVENTO
DESCRIPCIN
keydown()
Este evento se produce en el momento que se presiona una tecla del teclado,
independientemente de si se libera la presin o se mantiene. Se produce una nica
vez en el momento exacto de la presin
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 pulsacin e inmediata liberacin 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 tena pulsada
11

Laboratorio N 2
Modificar el comportamiento de elementos y

objetos a travs de jQuery
Implementar funcionalidades de interaccin
comportamiento de formularios con jQuery

Temas
8.
9.

11. Eventos - Mouse
13. Ajax con jQuery
4.13 AJAX con jQuery

Permite realizar peticiones hacia el servidor sin necesidad de recargar la
pgina.
12

Laboratorio N 3
Aplicacin de AJAX para recoger informacin

del servidor
Usar jQuery para implementar llamadas AJAX que
permitan enviar y recibir informacin desde el
servidor, considerando que dicha informacin debe
ser serializada con JSON

Temas
8.
9.

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/
13

Web Widgets
Son plugins que brindan un conjunto de componentes de interfaz de

usuario personalizados con caractersticas especficas para una mejor
usabilidad de la aplicacin:
http://http://api.jqueryui.com/
http://www.kendoui.com/
http://metroui.org.ua//
Laboratorio N 4
Implementacin de un formulario utilizando

diversos plugins de jQuery
Disear y construir un formulario utilizando diversos
plugins. Como mnimo debera considerar los
siguientes plugins:
jquery-ui o kendoui
jquery-validate
tile
14

PowerPoint 4 - Javascript, JQuery y AJAX

Cargado por

Copyright:

Formatos disponibles

PowerPoint 4 - Javascript, JQuery y AJAX

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PowerPoint 4 - Javascript, JQuery y AJAX

Cargado por

Copyright:

Formatos disponibles

Divisin de Alta Tecnologa

.NET 4.5 Web Application Developer Visual Studio 2012

.NET 4.5 Web Application

Divisin de Alta Tecnologa

.NET 4.5 Web Application Developer

Instrucciones de control - Sentencias Condicionales

Instrucciones de control - Sentencias de Bucle

Intrucciones de control - Manipulacin de objetos

DOM Document Object Model

.NET 4.5 Web Application Developer

Introduccin a jQuery jQuery Cheat Sheet

10. Selectores jQuery

Divisin de Alta Tecnologa

Document Object Model

.NET 4.5 Web Application Developer

Instrucciones de control - Sentencias Condicionales

Instrucciones de control - Sentencias de Bucle

Intrucciones de control - Manipulacin de objetos

DOM Document Object Model

Divisin de Alta Tecnologa

4.1 Tipos de variables

Se utilizan para almacenar valores

var iva = 20;

Se utilizan para almacenar

var mensaje = "Bienvenido a DAT";

Se utilizan cuando se desea

var dias = ["Lunes", "Martes",

Se utilizan para almacenar un tipo

.NET 4.5 Web Application Developer

Instrucciones de control - Sentencias Condicionales

Instrucciones de control - Sentencias de Bucle

Intrucciones de control - Manipulacin de objetos

DOM Document Object Model

Devuelve true si las variables son iguales

Devuelve true si las variables no son

Igual estricto (===)

Devuelve true si las variables son iguales

Distinto estricto (!==)

Devuelve true si las variables no son

Mayor que (>)

Devuelve true si la variable izquierdo es

Mayor o igual que (>=)

Devuelve true si la variable izquierda es

Menor que (<)

Devuelve true si la variable izquierda es

Menor o igual que (<=)

Devuelve true si la variable izquierdas es

Divisin de Alta Tecnologa

.NET 4.5 Web Application Developer

Instrucciones de control - Sentencias Condicionales

Instrucciones de control - Sentencias de Bucle

Intrucciones de control - Manipulacin de objetos

DOM Document Object Model

4.3 Instrucciones de control

Utilice la sentencia if para ejecutar

if(edad >= 18) {

Permite evaluar una expresin e

Divisin de Alta Tecnologa

.NET 4.5 Web Application Developer