PDF de programación - JavaScript en su salsa con JQuery - La Web desde cero (II)

Imágen de pdf JavaScript en su salsa con JQuery - La Web desde cero (II)

JavaScript en su salsa con JQuery - La Web desde cero (II)gráfica de visualizaciones

Actualizado el 18 de Abril del 2021 (Publicado el 12 de Septiembre del 2017)
1.296 visualizaciones desde el 12 de Septiembre del 2017
854,0 KB
45 paginas
Creado hace 10a (12/06/2011)
La Web desde cero (II)
JavaScript en su salsa
con JQuery

Marc Rubiño

Web: http://mrubino.net
Blog: http://geeks.ms/blogs/mrubino
Twitter: @Marc_Rubino

Las cosas claras

y

el chocolate espeso

¿ Qué es JavaScript ?

Lenguajes scripts en los Navegadores

JavaScript

JScript



ECMA-262

• La especificación
• lenguaje ECMAScript
• Soportado por la mayoría de navegadores



¿ Qué es DOM ?

DOM

• Document Object Model

▫ Modelo de objetos de los documentos

 Html
 XHtml
 XML

▫ Para acceder al documento
▫ Para modificar el documento

¿ Qué es AJAX ?

¿ Qué es AJAX ?

• Asynchronous JavaScript And XML
• ## No es ASP.NET AJAX ##
• Llamadas asíncronas
• Cargas Parciales
• XMLHttpRequest

¿ Qué es ASP.NET AJAX ?

¿ Qué es ASP.NET AJAX ?

• AJAX con ASP.NET
• Controles de cliente "JavaScript"
• Controles de servidor.
• Cargas parciales páginas ASP.NET

¿ Qué es ASP.NET AJAX
Control Toolkit ?

ASP.NET AJAX Control Toolkit

• Proyecto Open-Source
• Utiliza ASP.NET AJAX
• kit de controles y extensores
• http://asp.net/ajax/ajaxontroltoolkit/samples

¿ Qué es JQuery ?

JQuery

• Librería JavaScript
• Encapsula la complejidad del lenguaje
• Extensible - Plugins
• Utiliza AJAX
• Animaciones
• Gestión de eventos

Principales librerías Scripts

• Prototype
• MooTools
• JQuery
• Dojo
• Modernirzr
• ASP.NET AJAX



Resumiendo

Resumiendo

• AJAX

▫ Peticiones Asíncronas XMLHttpRequest

• ASP.NET AJAX

▫ Microsoft AJAX para ASP.NET
▫ ASP.NET AJAX Control-Toolkit

• JavaScript

▫ Estándar EcmaScript

• JQuery

▫ Librería JavaScript

JQuery en su salsa

Principales Características

• Ligero y fácil

▫ Versión reducida – Minified & Gzipped

• Potentes Selectores

▫ Compatibles con CSS 1-3

• Cross-Browser

▫ IE , FF, Safari, Opera y Chrome

• Extensible

▫ Plugin

Principales Características



• Librerías UI

▫ Jquery User Interface
▫ Efectos
▫ Controles
▫ Themas

Ejemplo

Selectores

Selectores

Selector
*
#id
element
.class
a, b
a b
a > b
a + b
a ~ b

Elementos que Selecciona...
Todos los elementos.
El elemento con el ID dado.
Todos los elementos del tipo dado.
Todos los elementos con la clase dada.
Elementos que coincidan con la a o con b.
Elementos b que son descendientes de a.
Elementos b que son hijos de a.
Elementos b a continuación de a.
Elementos que son hermanos de a.

Selectores

Selector
first
:last
:even
:odd
:eq (index)
first
:last

Elementos que Selecciona...
El primer elemento en el conjunto resultado.
El último elemento en el conjunto resultado
Elementos pares en el conjunto resultado (en base 0).
Elementos impares en el conjunto resultado (en base 0).
Un elemento numerado en el conjunto resultado (en base 0).
El primer elemento en el conjunto resultado.
El último elemento en el conjunto resultado

Selectores

Elementos que Selecciona...
Selector
Elementos de encabezado (por ejemplo. <h1>, <h2>)
:header
:animated
Elementos con una animación en progreso.
: contains(text) Elementos que contienen el texto facilitado.
:empty

Elementos sin nodos hijos.
Elementos que contienen un elemento descendientes que
coincide con a.
Elementos que tienen nodos hijos.
Elementos que están ocultos por medio de CSS o porque son
<input type="hidden" />.

:has (a)
:parent

:hidden

Selectores

Elementos que Selecciona...
Selector
Elementos que tienen el atributo attr.
[attr]
[attr=value] Elementos cuyo atributo attr es value.
[attr^=value] Elementos cuyo atributo attr empieza con value.
:first-child
:checkbox
:image
:disable
:checked
:selected

Elementos que son el primer hijo de su padre.
Elementos <input> con type="checkbox".
Elementos <input> con type="image".
Elementos de formulario desactivados.
Casillas de verificación y botones de opción seleccionados.
Elementos <option> seleccionados.

Manipulación DOM

Manipulación del DOM

Métodos
addClass()
attr()
html()
val()
removeProp()
add()
children()
first()
next()

Métodos usados para:
Añade una clase al elemento o elementos.
Obtiene el atributo del primer elemento.
Obtiene el contenido html del primer elemento.
Obtiene el valor del primer elemento.
Elimina la propiedad del elemento.
Añade un nuevo elemento.
Obtiene el elemento hijo.
Obtiene el primer elemento.
Obtiene el siguiente elemento disponible.

Ejemplo

Eventos

Eventos

• Se pueden lanzar
• Se puede enlazar una función
• Tantos eventos como en JavaScript sin «on-»

▫ focus()
▫ blur()
▫ keyup()
▫ mouseover()
▫ …

Eventos

• bind()

▫ Permite asociar un número ilimitado de eventos a

un mismo elemento.

• toggle()

▫ La ejecución se alterna en función de las veces que

se pincha sobre el elemento.



Ejemplo

Animaciones

Animaciones

Métodos
hide()
show()
stop()
fadeIn()
fadeOut()
animate()

Métodos usados para:
Oculta el elemento.
Muestra el elemento.
Para la animación actual.
Muestra el elemento con una animación.
Oculta el elemento con una animación.
Personaliza una animación

Llamadas AJAX

JQuery AJAX

• Limitaciones con Cross-domain
• Tipos de Datos

▫ Texto
▫ Html
▫ Xml
▫ Script
▫ Json
▫ JsonP «cross-domain»



Animaciones

JQuery AJAX

• Función principal

▫ $.ajax()

• Propiedades

▫ async
▫ beforeSend
▫ complete
▫ contentType
▫ data
▫ dataType
▫ error
▫ success
▫ type
▫ url



JQuery AJAX

• jQuery.get( url, [data], [callback], [type] )

▫ Llamadas GET

• jQuery.post( url, [data], [callback], [type] )

▫ Llamadas POST

• jQuery.getJSON( url, [data], [callback] )

▫ Llamadas que retornan datos JSon

• $.ajaxStart()
• $.ajaxEnd()



Ejemplo

Plugins

Marc Rubiño

Web: http://mrubino.net
Blog: http://geeks.ms/blogs/mrubino
Twitter: @Marc_Rubino
  • Links de descarga
http://lwp-l.com/pdf6930

Comentarios de: JavaScript en su salsa con JQuery - La Web desde cero (II) (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad