03. Introduccion a JavaScript y JQuery

Introducción a JavaScript y JQuery

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

[email protected]

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


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


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#


C#:

JavaScript:

var estudiante = new Estudiante();

var estudiante = new Estudiante();

Lo infiere el compilador

Declaración de variable


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


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


Á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);


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


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


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

Introducción a jQuery

1. Introducción a jQuery

2. Selectores de jQuery

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


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>

http://jquery.com/


3. Agregar código jQuery:

4. Ejecutar:

<script type="text/javascript"> $(document).ready(function () { alert("Hola Mundo jQuery!!"); }); </script>


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>


Sintáxis:

• Ambas sintaxis son válidas y equivalentes:

$(expresionDeSelector)

jQuery(expresionDeSelector)


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


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


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


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


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


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');


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');


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


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.



$("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.



$("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)



$("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.



$("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.



$(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().



$("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().

Manejando eventos del Cliente

1. Introducción

2. Eventos desde jQuery

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


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.



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.



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.



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.

03. Introduccion a JavaScript y JQuery

Software

Transcript of 03. Introduccion a JavaScript y JQuery