Post on 13-Apr-2017
Contenido del Módulo
Introducción a JavaScript
Introducción a jQuery
Manipulando el DOM
Manejando eventos del cliente
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
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
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
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#
3. Tipado fuerte y débil
C#:
JavaScript:
var estudiante = new Estudiante();
var estudiante = new Estudiante();
Lo infiere el compilador
Declaración de variable
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
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
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); };
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);
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
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
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
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"
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" } }
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" } }];
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");
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
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>
1. Introduccion a jQuery
3. Agregar código jQuery:
4. Ejecutar:
<script type="text/javascript"> $(document).ready(function () { alert("Hola Mundo jQuery!!"); }); </script>
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>
2. Selectores de jQuery
Sintáxis:
• Ambas sintaxis son válidas y equivalentes:
$(expresionDeSelector)
jQuery(expresionDeSelector)
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
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
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
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">
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">
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]")
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
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.
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>
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 });
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');
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');
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;' });
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.
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.
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)
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.
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.
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().
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().
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
1. Introducción
Ejemplo:
1.1. Adjuntando la función validarDatos al evento click:
$(document).ready(function () { $("#MainContent_Buscar").bind("click", "validarDatos") });
1. Introducción
1.2. La función click es también equivalente y es mas directa:
$(document).ready(function () { $("#MainContent_Buscar").click(validarDatos); });
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.
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.
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.