Introducción a AngularJS,Introducción a JQuery,Cómo obtener el

Introducción a AngularJS
Hola! en nuestro post de hoy nos vamos a centrar en uno de los frameworks
JavaScript más populares, recuerda que si te ha gustado este artículo
comparte!!
En los últimos años hemos visto frameworks para manipular el DOM pero Angular
vino a cambiar las cosas, ya no solo es manipular sino aumentar las
capacidades. Si eres nuevo en Angular y quieres aprender las bases, te
recomiendo que sigas leyendo.
Para iniciarte en AngularJS considero que lo más importante es conocer sus
conceptos. Si dominas los conceptos podrás reconocer los patrones de cómo
programar usando Angular.
Vista / Plantillas
Las vistas o templates, o como quieras llamarle, es simplemente HTML con
ciertos atributos y expresiones que aumentan la funcionalidad del mismo.
Uno de los atributos que más veras en todo los tutoriales de Angular es: ngapp. Este atributo le dice al framework que todo lo que esté dentro de la
etiqueta que lo contenga, será parte de la aplicación angular.
Otros atributos vienen dados por el framework o pueden crearse mediante
directivas. Veremos de directivas más adelante.
Cambiando a expresiones, una expresión de Angular es simplemente código
dentro de doble corchetes {{ expresión}}. Un ejemplo de expresión es el
siguiente: {{ 2 + 2 }}. Esto no se escribirá como tal en el sitio web sino
que se presentará el valor 4, que es el resultado de la operación de la
expresión “2+2″.
Una expresión no solamente son operaciones matemáticas, una expresión puede
ser sacar el valor de una variable del modelo. Por ejemplo: {{ persona.Nombre
}}. Esta expresión retornará el valor de la propiedad nombre del objeto
persona.
Controlador
En Angular, un Controlador es simplemente una función utilizada para aumentar
las propiedades y capacidades del Scope. Por ejemplo, veamos el siguiente
ejemplo:
var app = angular.module(‘ejemplo’,[]);
app.controller(‘BienvenidaController’, [‘$scope’, function($scope) {
$scope.bienvenida= ‘Hola!’;
}]);
En este ejemplo creamos un módulo principal y le agregamos un controlador.
Este controlador recibe un primer parámetro que es el nombre y un segundo
parámetro que es una lista de dependencias y una función al final que es
realmente la función del controlador.
Este controlador aumenta el $scope, agregándole una variable llamada
“bienvenida” y asignándole un valor de “Hola!”. Al igual que agregar
variables, podemos agregar funciones.
Un controlador debe encargarse de la lógica del negocio como tal y no
preocuparse de, por ejemplo, saber cómo ir a buscar datos a una base de
datos. Para ir a buscar datos, el controlador utilizará servicios o fábricas
(las veremos más adelante) que se inyectarán dentro de la definición del
controlador al igual que se inyecta el $scope.
Un ejemplo para inyectar un servicio es el siguiente:
var app = angular.module(‘ejemplo’,[]);
app.controller(‘BienvenidaController’,
[‘$scope’,
‘ServicioDatos’,
function($scope, servicio) {
$scope.bienvenida= $servicio.getData();
}]);
Hemos agregado al controlador un servicio llamado “ServicioDatos” y lo hemos
pasado a la función del controlador como una variable “servicio”. Como ven
pueden tener diferentes nombres pero se asocian por el orden en que se van
agregando. En el valor de la propiedad $scope.bienvenida hemos mandado a
pedir el dato del servicio.
Scope
El $scope es una variable que se encarga de realizar la magia en Angular. La
variable $scope véanla como la conexión que existe entre las vistas
(plantillas HTML) y los controladores (funcionas js). Cuando en un
controlador agregas una variable o una funciona a $scope, esa variable o
función la tendrás accesible en la vista donde ese controlador esté
instanciado. En resumen: una variable compartida entre vista y controlador.
Directivas
Las directivas en Angular básicamente son el punto donde más se nota la
función del framework para aumentar la funcionalidad de HTML. Una directiva
básicamente es la forma en que Angular modifica el DOM ya sea para agregar
comportamiento, funcionalidad o atributos.
Dentro de las directivas encontramos:
ng-model
ng-bind
ng-href
Hello <input ng-model=’name’> <hr/>
<span ng-bind=”name”></span>
En este ejemplo de arriba vemos 2 directivas en uso: ng-model y ng-bind. Esto
quiere decir que cuando el input (ng-model) cambie, el span (ng-bind)
cambiará porque está ligado al modelo.
Lo
bonito
de
Angular
es
que
puedes
crear
tus
propias
directivas,
permitiéndote extender los atributos, funcionalidades, comportamientos y
etiquetas de HTML.
Filtros
Un filtro formatea el valor de una expresión para ser mostrada al usuario.
Pueden ser usados en plantillas de las vistas, en controladores o servicios.
Adicionalmente, como todo es extensible, puedes crear tus propios filtros.
Los filtros pueden aplicarse en una vista de la siguiente manera: {{
expression | filter }}. Un ejemplo de esto es: {{ 12 | currency }} : Esta
expresión devolverá un valor (12) formateado como moneda: “$ 12.00″.
Fábricas/Servicios
Los servicios en Angular son objetos substituibles y reutilizables que se
conectan por medio de la inyección de dependencias, como lo vimos en la parte
de controladores. Puedes usar servicios para organizar, compartir y testear
el código de tu aplicación.
Introducción a JQuery
jQuery es hoy en día, una indispensable librería javascript que
permite manejar el DOM y el Ajax de forma muy simple y directa.
jQuery lo podemos encontrar integrados en muchos recursos para el
diseño y desarrollo web, por ejemplo esta presente en Twitter
Bootstrap.
jQuery es una librería en Javacript de fuente
abierta (open source), que simplifica mucho
la creación de páginas web, sobre todo en
interfaces web que se comportan de modo muy
similar a las aplicaciones de escritorio.
Algunas ventajas de jQuery
jQuery nos provee una forma simple y poderosa de trabajar en Javacript,jQuery
nos propone una metodología de programación orientado a objetos en un flujo
controlado por eventos, donde encontramos características tales como:
Alta compatibilidad entre Navegadores: Usando jQuery podemos
desarrollar un código que no tenga que pelearse con una implementación
particular de un navegador, por ejemplo, en el trabajo con Ajax. Es
decir, trabajando con jQuery tenemos una mayor compatibilidad entre
navegadores.
Iteración Implicita: Los selectores que usamos en jQuery para
encontrar elementos en el DOM, posee iteración implicita, esto
significa que nos evita tener que estar programando bluces de código
para buscar todos elementos en el DOM que cumplen el criterio dado.
Por ejemplo, seleccionar elementos DIV del HTML con una clase CSS de
nombre PROMO se programa en una sola línea de código.
Encadenamiento de Métodos: Permite en una sola linea de código hacer
mucho más de lo que podríamos hacer usando solamente las
caracteríticas propias del Javascript. Esto es muy útil cuando
recorremos el DOM de un documento HTML, buscando un elemento
determinado. Es decir, con jQuery hacemos más con menos líneas de
código.
DOM: Cuando un navegador carga y despliega al
usuario una página web cualquiera, lo que
hace internamente es interpretar todo el HTML
de la página web y traducir a una estructura
de datos, donde el documento HTML queda
representado en un estructura de tipo árbol,
esto se denomina DOM (Document Object Model).
Obteniendo la librería jQuery
Para usar jQuery en el desarrollo de una página web, disponemos de dos (2)
alternativas:
Descargar la libreria y colocarla en nuestro sitio web.
O víncularla a algún CDN, como el de Google o de la propia página de
jQuery.
CDN: Significa Content Delivery Network.
Si elegimos descargar la librería jQuery, la podemos descargar desde:
http://jquery.com/download/
En el momento de escribir este artículo, la página de jQuery señala que hay
dos (2) tipos de versiones de la librería. Las versiones 1.x y las versiones
2.x, esta última dispone de la misma API de jQuery de versiones 1.x pero sin
soporte para Internet Explorer 6, 7 y 8.
También es posible descargar jQuery, en forma
mimificada (comprimida) o una versión nomimificada (no-comprimida). En general se
recomiendo en sitios wed en producción,
descargar una copia de la librería en su
forma comprimida para ahorrar ancho de banda
y mejorar el rendimiento del navegador.
Hacer disponible jQuery a una página web
Si hemos optado por cargar la librería directamente a nuestro sitio web y no
desde un CDN, entonces el código HTML5 de nuestra página podría tener uno de
los siguientes aspectos.
Colocando el enlace a la librería jQuery en el HEAD del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
<script src=”jquery-1.11.1.min.js”></script>
</head>
<body>
…
…
</body>
</html>
Colocando el enlace a la librería jQuery en la parte final del BODY del HTML:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
…
</body>
</html>
Si usamos un CDN, como el del sitio de
jQuery, lo único que cambiaría en el código
anterior es la forma de hacer la vinculación,
en ese caso sería:
<script
src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
Con lo anterior tenemos disponible jQuery, pero ahora necesitamos crear
nuestro propio código Javascript que use jQuery… Esto lo veremos a
continuación.
Usando jQuery
Para usar jQuery necesitamos escribir código Javascript. La forma tradicional
y ordenada de hacer esta tarea, es crear un nuevo archivo Javascript, por
ejemplo el archivo ‘mi_js.js’:
Entonces para usar jQuery, dentro del archivo ‘mi_js.js’, debieramos escribir
algo así:
$(document).on(‘ready’, inicializar);
//
//luego el código de la funcion inicializar
function inicializar() {
//
alert(‘Hola Mundo… desde jQuery’)
//
}
y luego debemos vincular este archivo ‘mi_js.js’ a nuestra página HTML,
quedando el código así:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” />
<title>Mi página web con jQuery</title>
…
<link rel=”stylesheet” href=”css/estilo.css” media=”screen” />
</head>
<body>
…
…
<script src=”jquery-1.11.1.min.js”></script>
<script src=”mi_js.js”></script>
</body>
</html>
Es muy importante colocar el enlace a nuestro
archivo CSS en una línea anterior al enlace a
jQuery. Esto es necesario, para tener acceso
al código de la definición de los estilos
CSS.
Es bastante simple la programación en Javascript, lo que si puede costar un
poco de entener en un inicio, es cuando hacemos uso de su ejecución en forma
asincrónica.
Entendiendo la programación con jQuery
Para entender jQuery, necesitamos conocer algunos rudimentos de Javascript.
Para empezar, en Javascript encontramos tres (3) objetos nativos en el
lenguaje:
navigator: Es el objeto que representa al navegador, donde están los
recursos del tipo: la Geolocalización, los acelerómetros y entre otros
(ej. el User-agent).
window: Es el objeto que representa el tab del navegador, donde están
accesibles características del tipo: la resolución de la pantalla, la
posición, etc.
document: Este es el objeto que representa a la página HTML.
Entonces, si queremos crear un objeto jQuery que use, por ejemplo, el
objeto document escribimos el siguiente código:
$(document);
Si queremos que el objeto anterior, ponga atención al evento de nombre ‘mievento’, y cuando ese evento suceda dispare una función determinada, por
ejemplo la función de nombre ‘mi-funcion’. Entonces el código anterior lo
debemos sustituir por:
$(document).on(‘mi-evento’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
//
alert(‘Mi primer programa usando jQuery’);
}
El método ‘on’ que vemos en el código jQuery
anterior, es un listener de eventos que es
usado desde jQuery 1.8, antes se usaba
‘bind’.
Naturalmente, el nombre del evento ‘mi-evento’ no lo tenemos definido, pero
podemos utilizar el evento que sucede cuando el navegador carga sólo el
código HTML de la página. En este caso, el código será:
$(document).on(‘ready’, ‘mi-funcion’);
//
//Ahora definimos ‘mi-funcion’
function mi-funcion() {
alert(‘Se acaba de cargar el HTML’);
}
Frecuentemente se hace mención a jQuery como
el Framework jQuery, sin embargo en este
artículo nos referimos a él como la librería
jQuery.
Cómo obtener el elemento activo de un
formulario con JavaScript
Para obtener el elemento activo de un formulario en Internet Explorer lo podemos
hacer fácilmente con la propiedad activeElement, pero en navegadores Mozilla, como
Firefox, no existe esta propiedad, aunque eso no quiere decir que no podamos
hacerlo.
Podemos averiguar qué elemento está activo recorriendo los elementos del formulario
y asignándoles una función en el evento onfocus y onblur que nos permitirá averiguar
qué elemento está activo.
<script type=”text/javascript”>
var activeElement;
function blurFunc() {
activeElement = null; /* Cuando el elemento deja de estar activo el elemento activo
pasa a ser nulo (null) */
}
function focusFunc(evento) {
if(!evento) { // Para IE
evento = window.event;
activeElement = evento.srcElement; /* Cuando un elemento se activa (focus) lo
indicamos */
} else { // Para otros navegadores
activeElement = evento.target;
}
alert(activeElement.name); // Lo utilizaremos para hacer la prueba
}
function init() {
for (var i = 0; i < document.forms.length; i++) {
for(var j = 0; j < document.forms[i].elements.length; j++) {
document.forms[i].elements[j].onfocus = focusFunc;
document.forms[i].elements[j].onblur = blurFunc;
}
}
}
window.onload = init;
</script>
El código que acabamos de ver, lo pondremos entre <head> y </head>. Luego, para
probarlo, utilizaremos este formulario entre <body> y </body>
<form name=”HolaMundo” action=””>
Nombre: <input type=”text” name=”nombre”>
Apellidos: <input type=”text” name=”apellidos”>
<input type=”button” name=”activo” value=”Enviar”>
</form>
Cuando probemos este formulario, tanto con IE como con Firefox, al pulsar sobre un
campo del formulario nos aparecerá una ventana con el nombre del elemento activo.
Los eventos en JavaScript
El término evento suele referirse a una acción del usuario mediante la cual
puede realizarse un proceso pero también entendemos que un evento ocurre
cuando algún tipo de interacción se realiza en una página Web. Por ejemplo,
cuando el usuario da click en nuestra página Web.
Nos encontramos con dos tipos de invocación de un evento, es decir, el
primero de ellos es captura del evento y el segundo es la propagación del
evento. Cuando hablamos de invocación por captura del evento decimos que el
evento inicia con el elemento que está más afuera en el árbol DOM (Modelo de
Objetos del Documento) el cual funciona entrando dentro del elemento HTML. Y
en la propagación de eventos que es el segundo tipo de invocación este
realiza un trabajo contrario a la captura de eventos en este caso inicia
chocando si el elemento destino del evento tiene alguna asociación con un
gestor de ese evento checando a los padres y los elementos, hasta que llega a
alcanzar al elemento HTML.
Muchas de las veces JavaScript no tiene un comportamiento como deseamos ya
que muchas de las personas deshabilitan JavaScript en los navegadores que
tienen instalados en sus computadoras, los firewalls no permitiendo
JavaScript, los antivirus, etc.
Podemos tomar como ejemplo el evento onload el cual pertenece al objeto
Windows, este evento toma lugar cuando toda nuestra página web ha terminado
de cargar, cuando ha finalizado de cargar se le llama Window.onload podríamos
enviar un mensaje al usuario cuando la página termine de cargar por ejemplo:
1. addEvent(window, "load", mensaje);
2.
3. function mensaje() {
4.
5.
alert("Hola, página cargada!");
6.
7. }
Ahora si no quieres colocar un nombre a tu función podrías usar
1. addEvent(window, "load", function () {
2.
3.
alert("Hola, página cargada!");
4.
5. });
Ahora bien, hay infinidad de eventos y
a continuación colocare los más
comunes:
Onclick: Ejecutandose cuando se da click a un elemento del DOM.
Onmouseover: Ejecutandose cuando el puntero del mose pasa sobre un elemento
Html.
Onmouseout: Ejecutandose cuando el puntero sale del area de un elemento del
DOM.
Onload: Cuando todos los elementos de un sitio web son cargados entonces se
ejecuta onload.
Onkeydown: Sucede cuando presionamos una tecla sin soltarla.
Onkeypress: se ejecuta cuando pulsamos una tecla.
Onfocus: se ejecuta cuando seleccionamos un elemento.
Onreset: Inicializa un formulario.
Onblur: Deselecciona el elemento.
Onclick: Al hacer doble click con el raton.
Onchange: Deselecciona un elemento que ha sido modificado.
Onresize: Cuando se ha modificado el tamaño de la ventana del navegador.
Onsubmit: Enviar formulario.
Onmouseup: Se ejecuta al soltar el raton.
La variable this en JavaScript
Esta
variable
se
crea
automáticamente
y
es
empleada
por
muchos
desarrolladores. This se utiliza para hacer referencia al elemento XHTML que
ha provocado el evento.
www.asociacionaepi.es