Capítulo IV.
Anuncio
Microsoft Virtual Academy
Cursos técnicos gratuitos en línea
Tome un curso gratuito en línea.
http://www.microsoftvirtualacademy.com
Aprendiendo a Programar
Capítulo IV
Qué es Javascript?
• Es un lenguaje de programación que los browser
directamente leen e interpretan en el momento en que
cargamos nuestra página web.
• Se usa principalmente del lado del cliente, o sea, en nuestra
computadora, implementado como parte de un navegador
web y nos permite hacer mejoras en la interfaz de usuario y
páginas web dinámicas.
• Todos los navegadores modernos interpretan el código
JavaScript integrado en las páginas web, como Internet
Explorer, Firefox o Chrome.
Librerías en Javascript
• Qué significa que la gente haga programas abiertos para reutilizar? Grupos
de programadores en todo el mundo han ido desarrollando lo que se
llaman librerías, que no son mas que un conjunto de funcionalidades en
un lenguaje determinado, en este caso javascript, para hacer
determinadas tareas.
• Qué tareas? Con algunas librerías podemos por ejemplo corroborar que
los campos en un formulario se hayan cargado correctamente o que no
estén vacíos. O podemos crear animaciones con imágenes, o simplemente
mostrar un calendario para que un usuario elija una fecha. Son cosas que
parecieran sencillas, y realmente lo son si utilizamos las librerías que
tenemos a disposición.
Eventos
• Para usar las librerías vamos a tener que entender algunas cosas. Y
siempre que trabajemos con Javascript del lado del cliente tendremos que
manejar lo que son Eventos.
• Los eventos son todas las acciones que el usuario inicia: dar clic sobre un
botón, presionar las teclas del teclado, etc. Cada vez que se produce un
evento, se crea un objeto.
• Cada lenguaje de programación tiene su propio modelo de eventos.
• Javascript registra las fuentes de eventos (teclado, ratón, etc). La
aplicación se queda escuchando y en el caso de que ocurra un evento
utilizamos la información recibida para realizar las acciones adecuadas.
Programación del lado del cliente
• Comencemos por el principio. En desarrollo web, existen una
categorización que define dos tipos de tecnologías: del lado del cliente y
del lado del servidor.
• Las tecnologías del lado del servidor guardan información y modelos de
datos en el server y luego envían el código de la página web al navegador
del usuario cuando este lo requiere. Las tecnologías del lado del cliente
directamente se interpretan y ejecutan directamente en el navegador del
usuario.
• En general, ambas tecnologías interactúan para crear un sitio web
completo.
Programación del lado del cliente
• Javascript es una tecnología del lado del cliente que puede ser utilizada
para una variedad de cosas, como ser:
–
–
–
–
–
Validación de formularios
Crear efectos
Cambiar estilos dinámicamente
Hacer cálculos complejos
Etc.
• Javascript se ha convertido en una tecnología sumamente importante
porque el procesamiento del lado del cliente es mas eficiente que del lado
del servidor y es orientado a eventos (que veremos luego), que son las
interacciones del usuario con la interfaz.
Un primer ejemplo en JS
•
•
Para realizar nuestro primer programa en Javascript, tomemos el HTML que hicimos en el capítulo
anterior, nuestro Hola Mundo
Y saquemos lo que hay en el tag h1 y cambiemos nuestro title a Mi primer programa en Javascript y
agregamos en el body una función para escribir información
<!DOCTYPE html>
<html>
<head>
<title>Mi primer programa en Javascript</title>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
document.write(“<h1>Hola Mundo desde Javascript</h1>”);
document.write(“<br/>Este es mi primer programa en Javascript!”);
</script>
</body>
</html>
Corriendo nuestro ejemplo
•
Clickeen en el archivo HTML para abrirlo y verán el resultado. Lo que hace el tag
script es decir que allí en el HTML se insertará un programa, y defino el lenguaje
en el que estará el mismo, en este caso Javascript. Luego dentro de mi código JS
estoy escribiendo el documento HTML lo que se encuentra entre comillas, que no
es mas ni menos que código HTML para que el navegador lo interprete y muestre
lo correspondiente.
•
Pero la potencia de Javascript, viene de lo que llamamos Eventos, que veremos en
la sección 3, pero que de manera simple, son todas las interacciones que hace un
usuario con la interfaz. De esa manera cada vez que ocurre un evento podemos
activar lo que se llaman “funciones de JS” que realizarán algún tipo de
procesamiento y acción.
Funciones
•
En general, el tag de Javascript para funciones se suele poner en el tag Head, y luego
definimos una función utilizando la palabra function:
<script language=”javascript” type=”text/javascript”>
function decirHola()
{
document.write(“Hola Mundo”);
}
</script>
• Y luego lo que haremos, en el body, será llamar a la función:
<script language=”javascript” type=”text/javascript”>
decirHola();
</script>
Librerías
•
La otra manera de incluir funcionalidades en JS en nuestros programas,
reutilizando código ya escrito, es llamando a librerías externas. Esto lo podemos
hacer poniendo una línea como la siguiente:
<script language=”javascript” type=”text/javascript” src=”attached.js”></script>
•
De esta manera, es que podremos utilizar librerías como jQuery, que veremos en
la próxima sección, solamente incluyendo el llamado a la misma insertando la
siguiente línea en el head:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
•
•
Lo que haremos entonces será simplemente, esperar la ocurrencia de un evento y
cuando ello ocurra, llamar alguna función de Javascript para que realice algún tipo
de acción
Para mas información: http://www.w3schools.com/js/default.asp
jQuery
• jQuery es una librería de JavaScript que funciona de manera
rápida, es liviana y rica en funcionalidad. jQuery permite
manipular el HTML para modificarlo dinámicamente, nos
permite un mejor manejo de eventos, animación y Ajax (que
veremos luego), de manera mucho más simple que funciona
en prácticamente todos los navegadores.
• JQuery se puede descargar e incluirlo en nuestro proyecto
directamente, o se puede utilizar desde un servidor remoto,
como vimos anteriormente.
Instrucciones de jQuery
• La manera de escribir código para jQuery es muy sencilla, y tiene cierta
forma similar con CSS y con Javascript. La sintaxis está hecha a medida
para la selección de los elementos HTML y realizar alguna acción sobre el
elemento.
$(selector).acción()
• Por ejemplo:
–
–
–
–
$(this).hide() – oculta el elemento donde se está haciendo foco
$("p").hide() – oculta todos los elementos <p>.
$(".test").hide() – oculta todos los elementos con class="test".
$("#test").hide() – oculta el elemento id="test".
Instrucciones de jQuery
•
Entre las animaciones y efectos que podemos agregar a nuestra página utilizando jQuery, se
encuentran:
–
–
–
–
–
–
–
•
Y para manipular el HTML de nuestra página podremos utilizar funcionalidades como:
–
–
–
–
•
Hide/Show
Fade
Slide
Animate
Stop
Callback
Chaining
Get
Set
Add
Remove
Para mas información ingresar en: http://jquery.com/
Eventos en profundidad
•
•
Nada de lo que vimos tiene sentido si no entendemos en profundidad lo que
significa un evento. Mucha de la programación de hoy día se maneja mediante
eventos, ya sea en una web o un dispositivo móvil.
La definición corta es que un evento es una acción o acontecimiento detectado
por el programa que puede ser manejado por el mismo. Típicamente, el programa
tiene uno o más lugares dedicados a manejar los eventos. La fuente mas usual de
eventos es el usuario (que pulsa una tecla en el teclado, mediante el click de un
mouse, el tap en una pantalla táctil, etc). Otra fuente podría ser un dispositivo de
hardware, como un temporizador o reloj. Cualquier programa también puede
generar su propio conjunto de eventos, por ejemplo, para comunicar la finalización
de una tarea.
Programación orientada a eventos
• Los programas se basan en los eventos para modificar su comportamiento
en respuesta a los mismos, a menudo con el objetivo de ser interactivo. De
esta manera es que se programan sistemas que son orientados a eventos.
• En la programación web y en la programación de aplicaciones para
dispositivos móviles, los eventos existentes son muchos y variados.
Simplemente para activarlos debemos agregar programación que realice
algo cuando ese evento ocurre. Si no existe ese código no significa que el
evento no esté ocurriendo sino simplemente que no haremos nada con el
mismo
Algunos eventos comunes
• Algunos de los eventos mas comunes que se utilizan en programación web
y móvil son:
–
–
–
–
–
–
–
–
–
onLoad: se dispara cuando se carga la página, antes de cualquier acción
onFocus: cuando ponemos el foco en un campo de ingreso de datos
onKeyPress: cuando se presiona una tecla
onKeyUp: cuando se suelta una tecla presionada
onKeyDown: cuando se se esta presionando una tecla
onClick: cuando se presiona el botón del mouse
onDblClick: doble click del mouse
onMouseMove: cuando se mueve el mouse
onMouseOver: cuando el mouse pasa sobre un elemento
Recursos
•
•
•
•
•
http://www.w3schools.com/js/default.asp
http://jquery.com/
http://www.w3schools.com/jquery/default.asp
http://www.w3schools.com/jsref/dom_obj_event.asp
http://jqueryui.com/
