Sei sulla pagina 1di 14

Divisin de Alta Tecnologa

.NET 4.5 Web Application Developer Visual Studio 2012

.NET 4.5 Web Application


Developer
Visual Studio 2012

Divisin de Alta Tecnologa

.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

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

Divisin de Alta Tecnologa


.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

.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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

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;

.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

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

Divisin de Alta Tecnologa


.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

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;
}

Divisin de Alta Tecnologa


.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

4.4 Instrucciones de control


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++;
}

.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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

4.5 Instrucciones de control


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");
}

.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

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/

Divisin de Alta Tecnologa


.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

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

Elementos de formulario y <body>

onkeyup

Soltar una tecla pulsada

Elementos de formulario y <body>

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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

4.8 Usando jQuery

1. Introduccin a jQuery
2. Selectores jQuery
3. Eventos
4. jQuery y Ajax
5. Web Widgets

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

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.

Introduccin a jQuery

jQuery Cheat Sheet:

http://jqapi.ru/
http://evolutionofweb.appspot.com/

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

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.

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

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

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

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

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

Laboratorio N 2

Modificar el comportamiento de elementos y


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

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

4.13 AJAX con jQuery


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

12

Divisin de Alta Tecnologa


.NET 4.5 Web Application Developer Visual Studio 2012

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

.NET 4.5 Web Application Developer


Captulo 4: Javascript, jQuery y AJAX
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

4.14 Uso de Plugins de jQuery


Representan componentes creados como extensibilidad de jQuery para
brindar nuevas funcionalidades:

http://plugins.jquery.com/

13

Divisin de Alta Tecnologa


.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 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

Potrebbero piacerti anche