Una introducción a JavaScript y JQuery

1. Introducción a JavaScript y JQuery
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 Introducción a JavaScript
 Introducción a jQuery
 Manipulando el DOM
 Manejando eventos del cliente

3. Introducción a JavaScript
1. Runtime Environment
2. Características del lenguaje
3. Tipado fuerte y débil
4. Tipado dinámico
5. Características básicas del lenguaje
6. Tipos

4. 1. Runtime Environment
 Servicios del motor
JavaScript:
 Manejo de
Memoria
 Compilación Just-
in-Time (para la
mayor parte)
 Sistema de Tipos
 etc.
 Depende del
navegador
 Servicios del CLR:
 Manejo de
Memoria
 Compilación Just-
in-Time
 Sistema de tipos
comunes
 etc.
• JavaScript • C# y .NET

5. 1. Runtime Environment
JavaScript y el CLR
• Los servicios son similares
• El Garbage Collector es lo suficientemente
bueno.
• JIT nos brinda performance
 El JIT de JavaScript depende del navegador,
la plataforma y el dispositivo.
 JavaScript es como IL, se compila a código
máquina

6. 2. Características del lenguaje
 Tipado débil
 Dinámico
 Prototipos
 Funciones
 Funciones
 Funciones
 Tipado fuerte
 Estático
 Herencia clásica
 Clases
 Constructores
 Métodos
• JavaScript • C#

7. 3. Tipado fuerte y débil
C#:
JavaScript:
var estudiante = new Estudiante();
var estudiante = new Estudiante();
Lo infiere
el
compilador
Declaración
de variable

8. 3. Tipado fuerte y débil
Tipado Fuerte:
 Los tipos se definen por nombres y
estructura
 El compilador realiza la verificación
 El compilador puede inferir si es necesario
C#:
var x = 0; // el tipo int se infiere
bool esEntero = x is int; // true
x = new object(); // error de compilacion

9. 3. Tipado fuerte y débil
Tipado Débil:
 Los tipos se definen por su estructura y no
por su identidad
 Se hacen verificaciones en tiempo de
ejecución
 los tipos son dinámicos
JavaScript:
var x = 0; // crea una variable que tiene un number
var esEntero = typeof x == "number"; // funciona pero es limitado
x = new Object(); // no hay problema, se redefine el tipo de x

10. 4. Tipado dinámico
 Se pueden crear tipos dinámicamente
 Se puede agregar propiedades
dinámicamente.
 Se puede agregar funciones dinámicamente.
JavaScript: var x = {
nombre: "Juanito",
ciudad: "Cochabamba"
};
x.telefono = "4433221";
x.llamar = function () {
llamarAlguien(this.telefono);
};

11. 5. Características básicas del lenguaje
Ámbito global:
 Los objetos en la raíz son globales
 Todo los miembros de nivel global se pueden
ver entre ellos.
JavaScript:
var x = 1;
function unaFuncion(arg1, arg2) {
}
unaFuncion(1, x);

12. 5. Características básicas del lenguaje
Type Coalescing
 JavaScript realiza Coalescing de tipos
JavaScript:
"hola " + "mundo" // hola mundo
"hola " + 1 // hola 1
"hola " + true // hola true
"hola " + (1 == 1) // hola true
200 + "25" // 20025

13. 5. Características básicas del lenguaje
Operadores
 La mayoría de operadores son idénticos a
.NET
 Los operadores de igualdad/desigualdad
(==, !=) son distintos a .NET
 JavaScript determina la igualdad usando
Coalescing
JavaScript: "hola" == "hola" // true
1 == 1 // true
1 == "1" // true

14. 5. Características básicas del lenguaje
Operadores
 Operadores de igualdad idéntica en
JavaScript (===, !==)
 Determina la igualdad sin hacer Coalescing
JavaScript:
"hola" == "hola" // true
1 == 1 // true
1 === "1" // false
1 !== "1" // true

15. 6. Tipos
Tipos Primitivos
 JavaScript tiene tipos básicos
 Tipos de Valor
 boolean
 string
 number
 Tipos de Referencia
 object
 Tipos Delegados
 function
 Tipos especiales
 null
 "undefined"

16. 6. Tipos
Object Literals
 Manera rápida de crear estructuras de datos
 Si el nombre de la propiedad tiene espacios,
debe estar entre comillas.
var estudiante = {
nombre: "Juanito Perez",
edad: 10.0,
"materia favorita": "historia"
escuela : {
esPrivada: false,
nombre: "escuela ABC"
}
}

17. 6. Tipos
Array Literals
• La manera de crear colecciones
var arreglo = ["hola", "chau"];
var est1 = [{
nombre: "Juanito Perez",
edad: 10.0,
"materia favorita": "historia"
escuela : {
esPrivada: false,
nombre: "escuela ABC"
}
}];

18. 6. Tipos
Funciones
 Son tipos de datos
 Son similares a Func<> de C#
var f = function (arg1, arg2) {
};
f(1, 2);
var e = {
nombre: "Juanito",
cantar: function (cancion) {
}
};
e.cantar("cancion #1");

19. Introducción a jQuery
1. Introducción a jQuery
2. Selectores de jQuery

20. 1. Introduccion a jQuery
Qué es jQuery
• Liberia JavaScript (un solo archivo)
• Provee soporte Cross-browser
• Permite seleccionar elementos HTML
fácilmente
• Manejo de eventos
• Animación de elementos HTML
• Realizar llamadas AJAX
• Existen miles de plugins para jQuery

21. 1. Introduccion a jQuery
Hola mundo en jQuery:
1. Bajar el script de jQuery de
http://jquery.com
2. Referenciar el script en la cabecera de
nuestra pagina web:
<script src="Scripts/jquery-2.0.3.js"
type="text/javascript"></script>

22. 1. Introduccion a jQuery
3. Agregar código jQuery:
4. Ejecutar:
<script type="text/javascript">
$(document).ready(function () {
alert("Hola Mundo jQuery!!");
});
</script>

23. 2. Selectores de jQuery
Introducción
 Permiten seleccionar elementos de la página.
 Soporta selección simple o múltiple.
 Un selector identifica un elemento HTML que
queremos manipular con código jQuery
 Los principales selectores son: por nombre
de Tag, por id, por clase.
<div id="estudiantesDiv" class="Brillante">
<span class="Texto">Bienvenido!!</span>
</div>

24. 2. Selectores de jQuery
Sintáxis:
• Ambas sintaxis son válidas y equivalentes:
 $(expresionDeSelector)
 jQuery(expresionDeSelector)

25. 2. Selectores de jQuery
1. Seleccionando por nombre de etiqueta:
$("div")
• Selecciona todos los elementos div de la
página
$("p")
• Selecciona todos los elementos p de la
página

26. 2. Selectores de jQuery
Selección múltiple:
• Para seleccionar en base a múltiples
condiciones debemos separarlas por comas:
$("div, p, span")
• Selecciona todos los elementos div, de tipo
p, y de tipo span de la pagina

27. 2. Selectores de jQuery
Selección de descendentes:
Formato: $("padre descendente")
• Para seleccionar descendentes ya sea hijos,
nietos, etc. de un nodo padre. Debemos
separarlos por espacio:
$("table tr")
• Selecciona todos los elementos tr que son
descendentes de elementos tipo table

28. 2. Selectores de jQuery
2. Seleccionando por id:
• Usamos el simbolo # para especificar un Id
$("#miId")
• Selecciona todos los elementos cuyo id sea
miId
• Por ejemplo selecciona: <p id="miId">

29. 2. Selectores de jQuery
3. Seleccionando por clase:
• Usamos el punto . para especificar una
clase.
$(".miClase")
• Selecciona todos los elementos cuyo atributo
class sea miClase
• Por ejemplo selecciona: <p
class="miClase">

30. 2. Selectores de jQuery
Seleccionando por valor de un atributo:
Símbolo Descripción Ejemplo
* Busca el término
en cualquier
posición
$("a[href*=MiDominio]")
^ Busca el término
al principio de la
cadena
$("a[href^=Folder/]")
$ Busca el término
al final de la
cadena
$("a[href$=.com]")
! Busca elementos
que no coincidan
$("a[href!=www.Dominio.com]")

31. Manipulando el DOM
1. Introducción
2. Recorriendo la colección de elementos
3. Modificando propiedades DOM
4. Modificando Atributos
5. Filtrado y recorrido de elementos DOM en
jQuery
6. Manipulación de elementos DOM en jQuery

32. 1. Introducción
 Los selectores jQuery retornan un conjunto
de elementos.
 jQuery nos permite manipular elementos
DOM mediante funciones
 Podemos cambiar valores, adjuntar eventos,
cambiar estilos, agregar efectos, filtrar
elementos.

33. 2. Recorriendo la colección de elementos
La función .each()
 Funciona como un foreach
 Podemos pasarle una función anónima.
 La función anónima será ejecutada para cada
elemento del conjunto.
<script type="text/javascript">
$(document).ready(function () {
$("h2").each(function (index) {
this.innerHTML = "Seccion " + index;
});
});
</script>

34. 3. Modificando propiedades DOM
 Podemos utilizar this.nombreDePropiedad
para modificar una propiedad directamente
 Itera todos los elementos div y modifica su
titulo.
 Si la propiedad no existe, será agregada.
$('div').each(function (i) {
this.title = "Indice = " + i
});

35. 4. Modificando Atributos
1. Accediendo atributos:
• Los atributos pueden accederse usando
attr()
• Retorna el valor del atributo title del
elemento de Id estudiantesDiv.
var valor = $('#estudiantesDiv').attr('title');

36. 4. Modificando Atributos
2. Modificando sus valores:
• .attr(nombreDelAtributo, valor) se usa
para acceder al atributo y modificar su valor:
$('img').attr('title', 'El titulo de mi imagen');

37. 4. Modificando Atributos
Modificando múltiples atributos
• Pasamos un objeto JSON a la función .attr()
• Este objeto JSON modificará el titulo y el
borde de las imágenes.
$('img').attr({
title: 'El titulo de mi imagen',
style: 'border:2px solid green;'
});

38. 5. Filtrado y recorrido de elementos DOM
en jQuery
Ejemplo jQuery Descripción
$("span").get(0)
$("span")[0]
La función .get() permite
seleccionar un solo elemento del
conjunto.
Buscan todas las etiquetas span
en el DOM y retornan el primer
ítem de la colección encontrada.
var items = $("h2").size(); La función .size permite
determinar el numero de
elementos en el conjunto. El
numero de elementos
encontrados.
$("h2").add("span").css("color",
"green");
La función .add() permite agregar
elementos a los elementos
encontrados.

39. 5. Filtrado y recorrido de elementos DOM
en jQuery
Ejemplo jQuery Descripción
$("h2").eq(1).css("color", "green"); La función .eq() permite
reducir el tamaño del conjunto
a tan solo un ítem.
Se basa en el índice del
elemento (comienza en 0)
$("#div1").children() La función .children() permite
seleccionar todos los hijos de
primer nivel de cada elemento
del conjunto.
$("#div1").find("h2") La función .find() permite
realizar una búsqueda entre
los elementos del conjunto.

40. 5. Filtrado y recorrido de elementos DOM
en jQuery
Ejemplo jQuery Descripción
$("h2").filter(function(index) {
return $("b", this).length == 1;
}).css("color", "green");
La función .filter() permite filtrar
entre los elementos retornados,
permite también pasar una
función usada para evaluar cada
elemento y decidir si incluirlo o
no.
$("h2").slice(2) La función .slice() permite
cortar los resultados basados en
un índice de inicio y
opcionalmente de fin. (índice
basado en 1)

41. 5. Filtrado y recorrido de elementos DOM
en jQuery
Ejemplo jQuery Descripción
$("h2").next() La función .next() retorna el elemento
que inmediatamente sigue al elemento
seleccionado.
También existe la función .prev(), que
selecciona el elemento que precede al
elemento seleccionado.
$("#div1").nextUntil("p") La función nextUntil() encuentra todos
los elementos retornados hasta que
encuentra el elemento especificado y
se detiene.

42. 6. Manipulación de elementos DOM en
jQuery
Ejemplo jQuery Descripción
$("h2")
.append(" : <a
href='default.aspx'>home</a>");
La función .append() permite
insertar HTML al final del
contenido del elemento
encontrado.
Se insertara el HTML como el
ultimo hijo del elemento
encontrado
$("#div1").detach(); La función .detach() remueve del
DOM a los elementos
encontrados incluyendo su
contenido.
es similar a .remove(). pero
detach() mantiene los elementos
eliminados en memoria en caso
de necesitarlos. .remove() solo
remueve los items.

43. 6. Manipulación de elementos DOM en
jQuery
Ejemplo jQuery Descripción
$(document).height(); .height() se usa para saber la altura
en pixeles de los elementos.
El ejemplo calcula la altura de todo el
documento.
jQuery incluye funciones similares
para medir tamaño en pixeles:
.width(), .innerHeight(),
.innerWidth(), .outerHeight(), y
.outerWidth().
$("#div1").after($("#div2")); .after() permite insertar contenido o
elementos después de un elemento o
conjunto de elementos encontrados.
En el ejemplo se busca div2 y se lo
inserta después de div1.
jQuery incluye funciones similares:
.before(), .insertAfter(),
.insertBefore().

44. 6. Manipulación de elementos DOM en
jQuery
Ejemplo jQuery Descripción
$("h2").replaceWith("<h1>Page
Title</h1>");
.replaceWith() elimina contenido
del DOM y lo remplaza con algo
mas.
El ejemplo encuentra todas las
h2, las elimina y pone el HTML.
Se pone el nuevo contenido una
sola vez.
$("h2").wrapInner("<span
class='pageTitle' />");
Agrega contenido HTML al
rededor del contenido de los
elementos seleccionados.
jQuery provee funciones
similares: .wrap(), .wrapAll(), y
.unwrap().

45. Manejando eventos del Cliente
1. Introducción
2. Eventos desde jQuery

46. 1. Introducción
 jQuery permite adjuntar scripts a eventos del
cliente.
 Los scripts pueden estar en archivos .js
separados o en la página.
 Se los adjunta usando la función .bind() de
jQuery

47. 1. Introducción
Ejemplo:
 1.1. Adjuntando la función validarDatos al
evento click:
$(document).ready(function () {
$("#MainContent_Buscar").bind("click", "validarDatos")
});

48. 1. Introducción
 1.2. La función click es también equivalente
y es mas directa:
$(document).ready(function () {
$("#MainContent_Buscar").click(validarDatos);
});

49. 2. Eventos desde jQuery
Metodos de
eventos de
jQuery
Descripción
.blur() Usar este evento para ejecutar código cuando
un elemento pierde el foco.
.click(),
.dblclick()
Usar estos eventos para ejecutar código
cuando el usuario hace clic o doble clic en un
elemento.
.error() Usar este evento para atrapar errores de los
elementos como un link roto o una imagen
faltante.

50. 2. Eventos desde jQuery
Metodos de
eventos de
jQuery
Descripción
.focus(),
.focusin(),
.focusout()
Usar estos eventos para ejecutar código
cuando un elemento recibe el foco.
.focusin() será lanzado para los elementos
hijos cuando un padre recibe el foco.
.focusout() será lanzado cuando se pierde el
foco de un elemento o de su padre.
.hover() Cuando el puntero del mouse esta dentro el
contexto del elemento.
.keydown(),
.keyup(),
.keypress()
Para atrapar las entradas del teclado del
usuario asociadas al elemento.

51. 2. Eventos desde jQuery
Metodos de eventos
de jQuery
Descripción
.mousedown(),
.mouseup(),
.mouseenter(),
.mouseleave(),
.mouseout(),
.mouseover(),
.mousemove()
Los eventos del mouse del usuario
relacionados al elemento.
.load(), .unload() Cuando un elemento es cargado o
descargado de la página.
.resize() Cuando el navegador cambia los
tamaños.

52. 2. Eventos desde jQuery
Metodos de
eventos de
jQuery
Descripción
.scroll() Cuando el usuario realiza un scroll en un
elemento.
.select() Cuando un usuario selecciona datos o otros
elementos hijos contenidos en un elemento
padre.
.unbind() Usar este evento para des-adjuntarse de
algún otro evento.